/* 顧評 內容頁樣式 — 2026-09-10
用法：跟 styles.css 一起載入，放在它後面。
本檔只加內容頁需要的東西，不覆寫 styles.css 既有規則。
字型、顏色、禁止反白都直接繼承 styles.css，不要在這裡重複定義。 */
/* ---------- 頁首的外框按鈕 ---------- */
/* styles.css 的 `.nav-links .btn { color: #fff }` specificity 比 `.btn-ghost` 高，
首頁那顆是實心底所以看不出問題，內容頁換成外框按鈕就會變成白字配透明底＝隱形。
這裡只把頁首裡的外框按鈕拉回品牌色，不動首頁那顆實心的。 */
.nav-links .btn-ghost { color: var(--brand-dark); }
.nav-links .btn-ghost:hover { color: var(--brand-dark); }
/* ---------- 文章容器 ---------- */
.article { max-width: 760px; margin: 0 auto; padding: 40px 0 72px; }
.article .kicker {
display: inline-block; font-size: 13px; font-weight: 700;
color: var(--brand-dark); background: var(--brand-tint);
padding: 4px 12px; border-radius: 999px; margin-bottom: 14px;
}
.article h1 { font-size: 30px; line-height: 1.4; margin-bottom: 10px; }
.article .updated { color: var(--ink-soft); font-size: 14px; margin-bottom: 8px; }
.article .standfirst {
font-size: 17px; color: var(--ink-soft); line-height: 1.85;
margin: 14px 0 28px; padding-bottom: 24px; border-bottom: 1px solid var(--line);
}
.article h2 {
font-size: 22px; margin: 40px 0 12px; padding-top: 6px;
scroll-margin-top: 80px; /* 目錄跳過去時不要被固定頁首擋住 */
}
.article h3 { font-size: 17px; margin: 26px 0 8px; scroll-margin-top: 80px; }
.article p, .article li { font-size: 16px; line-height: 1.9; margin-bottom: 12px; }
.article ul, .article ol { padding-left: 22px; margin-bottom: 16px; }
.article strong { font-weight: 700; }
/* ---------- 目錄 ---------- */
.toc {
background: var(--surface); border: 1px solid var(--line);
border-radius: var(--radius); padding: 18px 22px; margin: 0 0 32px;
}
.toc strong { display: block; font-size: 14px; margin-bottom: 8px; color: var(--ink-soft); }
.toc ol { margin: 0; padding-left: 20px; }
.toc li { font-size: 15px; margin-bottom: 4px; }
/* ---------- 重點結論框（AI 搜尋最容易整段引用的區塊）---------- */
.takeaway {
background: var(--brand-tint); border: 1px solid #99e6d8;
border-radius: var(--radius); padding: 18px 22px; margin: 24px 0;
}
.takeaway strong { color: #0b7a6b; display: block; margin-bottom: 6px; }
.takeaway p:last-child { margin-bottom: 0; }
/* ---------- 提醒框 ---------- */
.warn {
background: #fff6e5; border: 1px solid #f0dcae; border-radius: var(--radius);
padding: 16px 20px; margin: 24px 0; font-size: 15px; color: #7a5a15;
}
.warn strong { color: #7a5a15; }
.warn p:last-child { margin-bottom: 0; }
/* ---------- 回覆範本卡 ---------- */
.tpl {
background: var(--surface); border: 1px solid var(--line);
border-radius: var(--radius); padding: 20px 22px; margin: 18px 0 26px;
}
.tpl-scene { font-size: 14px; color: var(--ink-soft); margin-bottom: 12px; }
.tpl-scene b { color: var(--ink); }
.tpl-quote {
border-left: 3px solid var(--star); padding: 4px 0 4px 14px;
margin: 0 0 16px; font-size: 15px; color: var(--ink-soft);
}
.tpl-stars { color: var(--star); letter-spacing: 2px; font-size: 14px; }
/* 範本本文要能複製，覆寫全站的禁止反白（客人要拿去用） */
.tpl-body {
background: #f7f9f9; border: 1px dashed #cfdcd9; border-radius: 10px;
padding: 16px 18px; font-size: 15px; line-height: 1.9; white-space: pre-line;
user-select: text; -webkit-user-select: text; -webkit-touch-callout: default;
}
.tpl-why { font-size: 14px; color: var(--ink-soft); margin-top: 12px; }
.tpl-why b { color: var(--ink); }
.tpl-bad { font-size: 14px; color: var(--danger); margin-top: 6px; }
/* ---------- 表格（手機要能橫向捲，不能讓整頁跟著捲）---------- */
.table-scroll { overflow-x: auto; margin: 18px 0; }
.article table { border-collapse: collapse; width: 100%; font-size: 14px; min-width: 460px; }
.article th, .article td { border: 1px solid var(--line); padding: 9px 11px; text-align: left; vertical-align: top; }
.article th { background: #f4f2ec; font-weight: 700; }
/* ---------- 文章內的行動呼籲 ---------- */
.article-cta {
background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
padding: 24px 26px; margin: 40px 0 0; text-align: center;
}
.article-cta h2 { margin: 0 0 8px; font-size: 20px; }
.article-cta p { color: var(--ink-soft); font-size: 15px; margin-bottom: 16px; }
/* ---------- 來源標註 ---------- */
.sources { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line); }
.sources h2 { font-size: 16px; margin: 0 0 8px; }
.sources li, .sources p { font-size: 13px; color: var(--ink-soft); line-height: 1.8; }
/* ---------- 文章列表頁 ---------- */
.post-list { max-width: 760px; margin: 0 auto; padding: 40px 0 72px; }
.post-list > h1 { font-size: 28px; margin-bottom: 8px; }
.post-list > .lead { color: var(--ink-soft); font-size: 16px; margin-bottom: 32px; }
.post-card {
display: block; background: var(--surface); border: 1px solid var(--line);
border-radius: var(--radius); padding: 20px 22px; margin-bottom: 14px;
color: inherit;
}
.post-card:hover { border-color: var(--brand); text-decoration: none; }
.post-card h2 { font-size: 18px; margin: 0 0 6px; color: var(--ink); }
.post-card p { font-size: 15px; color: var(--ink-soft); margin: 0; }
/* ---------- 價格試算器 ---------- */
.calc {
background: var(--surface); border: 1px solid var(--line);
border-radius: var(--radius); padding: 24px 26px; max-width: 640px; margin: 0 auto;
}
.calc-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 8px; }
.calc-row label { font-size: 15px; font-weight: 700; }
.calc-stepper { display: flex; align-items: center; gap: 8px; }
.calc-stepper button {
width: 38px; height: 38px; border: 1px solid var(--line); background: var(--bg);
border-radius: 10px; font-size: 20px; line-height: 1; cursor: pointer; color: var(--ink);
font-family: inherit;
}
.calc-stepper button:hover { border-color: var(--brand); color: var(--brand-dark); }
.calc-stepper input {
width: 68px; height: 38px; text-align: center; font-size: 17px; font-weight: 700;
border: 1px solid var(--line); border-radius: 10px; background: #fff;
color: var(--ink); font-family: inherit;
}
.calc-note { font-size: 13px; color: var(--ink-soft); margin-bottom: 18px; }
.calc-result { border-top: 1px solid var(--line); padding-top: 18px; }
.calc-line { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 9px 0; font-size: 15px; }
.calc-line + .calc-line { border-top: 1px dashed var(--line); }
.calc-line .calc-label { color: var(--ink-soft); }
.calc-line .calc-num { font-weight: 700; white-space: nowrap; }
.calc-line.is-us .calc-label, .calc-line.is-us .calc-num { color: var(--brand-dark); }
.calc-save {
background: var(--brand-tint); border-radius: 10px; padding: 14px 16px; margin-top: 16px;
text-align: center; font-size: 15px; color: #0b7a6b;
}
.calc-save b { font-size: 20px; }
@media (max-width: 640px) {
.article h1 { font-size: 25px; }
.article h2 { font-size: 20px; }
.article { padding: 28px 0 56px; }
.calc { padding: 20px 18px; }
}