/* 報價單落點頁。配色沿用 docs/research/sample-report-2026-08.html 的色票,
   色條也沿用那份報告第二節的 sage → 金 → rust 漸層,讓同一套東西在報告與頁面上長得一樣。
   手機優先:預設是單欄堆疊,768px 以上才變表格式排版。 */

.qc {
    --qc-ink: #16201d;
    --qc-ink-2: #43524d;
    --qc-ink-3: #76857f;
    --qc-line: #d6dbd5;
    --qc-line-2: #e6eae4;
    --qc-sage: #4a6b52;
    --qc-sage-soft: #e3ebe2;
    --qc-rust: #9d4b33;
    --qc-amber: #f0b429;
    color: var(--qc-ink);
}

.qc-lede { color: var(--qc-ink-2); }

/* ── 輸入 ───────────────────────────────────────────── */
.qc-form textarea {
    min-height: 9rem;
    font-size: 16px;            /* 16px 以下 iOS Safari 會在聚焦時自動放大整頁 */
    line-height: 1.6;
}
.qc-form .form-label { font-weight: 600; font-size: 1rem; }

/* ── 摘要:這張單上加成最高的幾項 ────────────────────── */
.qc-summary {
    background: var(--qc-sage-soft);
    border-left: 4px solid var(--qc-sage);
    border-radius: 2px;
    padding: .9rem 1rem;
}
.qc-summary strong { color: var(--qc-rust); }

/* ── 一列 = 一個品項 ─────────────────────────────────── */
.qc-row {
    border: 1px solid var(--qc-line-2);
    border-radius: 3px;
    padding: .75rem .85rem;
    margin-bottom: .6rem;
    background: #fff;
}
.qc-row__head {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    flex-wrap: wrap;
}
.qc-row__name { font-weight: 600; }
.qc-row__matched { color: var(--qc-ink-3); font-size: .875rem; }
.qc-row__rank {
    margin-left: auto;
    font-variant-numeric: tabular-nums;
    font-size: .875rem;
    color: var(--qc-ink-3);
}
.qc-row__markup { font-weight: 700; font-variant-numeric: tabular-nums; }

/* ── 色條:下價 → 均價 → 上價,再標出使用者的價 ────────── */
/* 上方預留一層給報價標記,免得它蓋到上一列。 */
.qc-gauge { margin: .55rem 0 .3rem; padding-top: 2.1rem; }
.qc-bar {
    position: relative;
    height: 30px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--qc-sage) 0%, #c9a227 50%, var(--qc-rust) 100%);
    opacity: .9;
}
/* 刻度用明確的 class,不要用 `.qc-bar span` 這種後代選擇器 ——
   報價標記也是色條裡的 span,會被一起吃掉:它和它的兩個子元素都被強制成
   position:absolute; top:50%,於是數字和 ▼ 疊在同一點。這就是第一版重疊的原因。 */
/* 色條刻度與標記:規則允許「只有圖表刻度可更小」,這四條刻意保留 .72rem ——
   它們是刻度數字與 ▼ 標記,放大到 14px 會互相重疊(第 21 號單處理過的那個問題)。*/
.qc-tick {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: .72rem;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
/* 使用者報價的位置。
 *
 * 數字放在色條「上方」自己的一層,不和 ▼ 擠同一行,也不進色條裡面 ——
 * 色條內已經有下價/均價/上價三個刻度,擠進去就是四個數字搶同一塊地方。
 * 初版把數字用 translateY 往上拉,位移不改變排版,結果和 ▼ 仍然重疊(5 列全中)。
 * 改用 flex 直向堆疊 + 在 .qc-gauge 預留高度,位置由排版決定,不靠位移。 */
.qc-mark {
    position: absolute;
    bottom: 100%;               /* 疊在色條正上方,底邊貼齊條頂 */
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.1;
    color: var(--qc-ink);
    pointer-events: none;
}
.qc-mark__val {
    font-size: .72rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    background: rgba(255, 255, 255, .92);   /* 靠近邊緣時壓在條外也還讀得到 */
    padding: 0 .15rem;
    border-radius: 2px;
}
.qc-mark__pin { font-size: .72rem; }
.qc-scale {
    display: flex;
    justify-content: space-between;
    font-size: .72rem;
    color: var(--qc-ink-3);
    margin-top: .15rem;
}

/* ── 薄量日:整列轉灰,且不進「最值得談」 ──────────────── */
.qc-row--thin { background: #f6f7f5; }
.qc-row--thin .qc-bar { filter: grayscale(1); opacity: .5; }
.qc-row--thin .qc-row__markup,
.qc-row--thin .qc-row__name { color: var(--qc-ink-3); }
.qc-note-thin {
    font-size: .875rem;
    color: var(--qc-ink-3);
    margin-top: .3rem;
}

/* ── 問件重:就地填,不用重貼整張單 ─────────────────── */
.qc-ask {
    background: #fffdf3;
    border: 1px dashed var(--qc-amber);
    border-radius: 3px;
    padding: .5rem .6rem;
    margin-top: .4rem;
}
.qc-ask label { font-size: 1rem; color: var(--qc-ink-2); }
.qc-ask input { max-width: 7rem; }

.qc-alt { font-size: .875rem; color: var(--qc-ink-2); margin-top: .35rem; }
.qc-alt b { color: var(--qc-sage); }

/* ── 看不懂的列 ─────────────────────────────────────── */
.qc-unknown { border-top: 1px solid var(--qc-line); margin-top: 1.5rem; padding-top: 1rem; }
.qc-unknown .qc-row { background: #fafbfa; }

.qc-foot {
    margin-top: 2rem;
    padding-top: .8rem;
    border-top: 1px solid var(--qc-line-2);
    font-size: .875rem;
    color: var(--qc-ink-3);
}

/* 768px 以上才讓一列攤成一排;以下維持堆疊,因為菜商報價多半是在手機上看到的。 */
@media (min-width: 768px) {
    .qc-row { display: grid; grid-template-columns: 11rem 1fr 10rem; gap: .9rem; align-items: center; }
    .qc-row__head { display: block; }
    .qc-row__rank { margin-left: 0; display: block; }
    .qc-gauge { margin: 0; padding-top: 2.1rem; }
    .qc-right { text-align: right; }
    .qc-ask, .qc-alt, .qc-note-thin { grid-column: 1 / -1; }
}

/* 存進帳本。未登入時是一句說明,登入後是一顆按鈕 —— 兩種狀態共用同一塊版位。 */
.qc-save {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
    background: #fafbfa;
    border: 1px solid var(--qc-line-2);
    border-radius: 3px;
    padding: .55rem .7rem;
}

/* 第 43 號:品種說明與「試試這樣寫」。字級依全站規則,次要說明不小於 14px。 */
.qc-hint { grid-column: 1 / -1; font-size: .875rem; color: var(--qc-ink-2); margin-top: .35rem; }
.qc-hint--fix { color: var(--qc-rust); }

/* ── 第 48 號:讓第一次來的人看懂在做什麼 ───────────────────────────
   字級:內文與按鈕 1rem,次要說明不小於 .875rem(14px)。 */
.qc-steps { list-style: none; padding: 0; display: grid; gap: .6rem; }
.qc-steps li {
    display: flex; gap: .7rem; align-items: flex-start;
    background: #fff; border: 1px solid var(--qc-line-2); border-radius: 10px;
    padding: .7rem .85rem; font-size: 1rem; line-height: 1.45;
}
.qc-steps__n {
    flex: 0 0 auto; width: 1.7rem; height: 1.7rem; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--qc-sage); color: #fff; font-weight: 700;
}
.qc-example {
    background: var(--qc-sage-soft); border-radius: 10px;
    padding: .75rem .9rem; color: var(--qc-ink); font-size: 1rem; line-height: 1.6;
}
.qc-terms { font-size: .875rem; }
.qc-help summary { cursor: pointer; font-size: 1rem; color: var(--qc-sage); }
.qc-help ul { font-size: .875rem; color: var(--qc-ink-2); padding-left: 1.2rem; margin-top: .4rem; }
.qc-row__pos {
    display: inline-block; margin-left: .4rem; padding: 0 .5rem; border-radius: 999px;
    background: var(--qc-sage-soft); color: var(--qc-ink-2); font-size: .875rem; white-space: nowrap;
}
.qc-auction { grid-column: 1 / -1; font-size: .875rem; color: var(--qc-ink-2); margin-top: .35rem; }
@media (min-width: 768px) {
    .qc-steps { grid-template-columns: repeat(3, 1fr); }
}