@charset "utf-8";

/* ==========================================================================
   看冊 官網樣式
   --------------------------------------------------------------------------
   設計定調：一頁攤開的紙本書。
   色票不是挑出來的，是從 App 圖示取樣的（暖棕 #b47e53、米白 #f4ebd9），
   紙色沿用 App「米黃」閱讀主題。朱紅只出現在印記與段落標記，像蓋章。

   只做亮色：閱讀器官網的主體是紙，深色版對這個題目沒有加分，反而多一套要維護的對比與截圖。

   刻意不做的事（每一條都可以 grep 驗）：
   - 沒有任何 gradient、backdrop-filter、box-shadow：分區靠紙色深淺與留白，不靠浮起來的卡片。
   - 沒有純 #fff / #000。
   - 沒有外部 CDN：字型自架子集，不連 Google Fonts。
     （一個主打「不連外、無帳號」的 App，官網卻要瀏覽器去 Google 拿字，說不過去。）
   - 沒有圖示套組、沒有插畫、沒有裝置外框：圖只有兩種——App 真實截圖，以及用 CSS 排出來的真實文字示範。
   ========================================================================== */

/* ── 字型：源樣明體子集（SIL OFL 1.1，授權見 /assets/OFL.txt） ─────────── */

@font-face {
  font-family: "KanCe Serif";
  src: url("/assets/kance-serif.woff2?v=ab9e7582") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  /* 子集只含站上標題實際用到的字；缺字時瀏覽器逐字回退到下一個字型 */
}

/* ── 色彩 ──────────────────────────────────────────────────────────────── */

:root {
  color-scheme: light;   /* 官網只做亮色：「紙」就是品牌，不在招牌上做兩套 */

  --paper:    #faf7f0;   /* 頁面底 */
  --paper-2:  #f3efe4;   /* 交錯區塊 */
  --paper-3:  #ece6d7;   /* 最深的一階，只用在引言與價目 */
  --ink:      #1f1c17;   /* 主文字　15.87:1 */
  --ink-2:    #595247;   /* 次要文字　7.4:1 */
  --ink-3:    #6b6355;   /* 圖說、標籤　5.5:1（對最深的 paper-3 仍有 4.8:1）*/
  --rule:     #e0d8c6;   /* 純裝飾細線，不承載任何資訊 */
  --rule-2:   #c6bba2;   /* 稍重的裝飾線（截圖外框） */
  --edge:     #948668;   /* 需要被看見的邊界：按鈕框、刪除線　3.3:1（WCAG 1.4.11）*/
  --brown:    #8a5528;   /* 連結與主要動作　5.8:1 */
  --brown-2:  #6d4020;   /* hover */
  --seal:     #a6392b;   /* 印記、著重號　5.9:1 */

  /* 字級：原本有 20 個只差 0.01–0.02rem 的值（差不到 0.4px，等於沒差別），收斂成 8 階。
     要調整字級請改這裡，不要在元件裡寫死新的數值。 */
  --t-xs:   .83rem;   /* 段落標記、小標籤 */
  --t-sm:   .88rem;   /* 註解、圖說、頁尾 */
  --t-md:   .95rem;   /* 導覽、表格、清單副文 */
  --t-base:  1rem;    /* 按鈕 */
  --t-lg:   1.06rem;  /* 直接回答、問答標題 */
  --t-xl:   1.14rem;  /* h3、引言 */
  --t-2xl:  1.3rem;   /* 品牌字 */
  --t-3xl:   2rem;    /* 價格 */

  --measure: 34em;       /* 中文內文行寬：約 32–36 字 */
  --shell: 1120px;
  --gutter: clamp(22px, 5vw, 56px);
}

/* ── 基礎 ──────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  /* 行動裝置點擊不要等 300ms 判斷雙擊；iOS 點擊也不要蓋一層預設灰塊 */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  scroll-behavior: smooth;
  scroll-padding-top: 24px;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang TC", "Noto Sans TC",
               "Microsoft JhengHei", system-ui, "Helvetica Neue", sans-serif;
  font-size: 17px;
  line-height: 1.85;
  /* 中文正文不加字距——加了就是把每個字推開，不是變精緻 */
  letter-spacing: 0;
  line-break: strict;
  word-break: normal;
  overflow-wrap: anywhere;
  text-rendering: optimizeLegibility;
}

/* 中英數之間的空隙交給瀏覽器，不手打空格 */
@supports (text-autospace: normal) { body { text-autospace: normal; } }

img { max-width: 100%; height: auto; display: block; }

a { color: var(--brown); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--brown-2); }

::selection { background: color-mix(in srgb, var(--brown) 22%, transparent); }

/* ── 版面骨架 ──────────────────────────────────────────────────────────── */

.shell {
  max-width: var(--shell);
  margin-inline: auto;
  /* iPhone 橫向時瀏海那側會吃掉內容，安全區要加進左右內距 */
  padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right));
}
.measure { max-width: var(--measure); }

/* 區塊節奏刻意不等距：96 / 140 / 64 交替，避免整頁像用同一個 padding 刷出來的 */
.band      { padding-block: 96px; }
.band--air { padding-block: 140px; }
.band--tight { padding-block: 64px; }
.band--sunk  { background: var(--paper-2); }

@media (max-width: 720px) {
  .band { padding-block: 64px; }
  .band--air { padding-block: 84px; }
  .band--tight { padding-block: 48px; }
}

/* ── 標題 ──────────────────────────────────────────────────────────────── */

h1, h2, h3, .serif {
  font-family: "KanCe Serif", "Noto Serif TC", "Songti TC", "Songti SC", serif;
  font-weight: 400;               /* 明體不用假粗體，粗了就糊 */
  letter-spacing: .01em;
}

/* 羅馬拼音用拉丁字體排：內建明體沒有帶符號的拉丁字母，混在標題裡會有一個字換體 */
.rm { font-family: Georgia, "Times New Roman", serif; font-size: .88em; letter-spacing: .01em; }

h1, h2 { text-wrap: balance; }
p { text-wrap: pretty; margin: 0 0 1.15em; }

h1 {
  font-size: clamp(2.4rem, 6.4vw, 3.9rem);
  line-height: 1.22;
  margin: 0 0 .28em;
}

h2 {
  font-size: clamp(1.62rem, 3.4vw, 2.15rem);
  line-height: 1.38;
  margin: 0 0 .7em;
}

h3 {
  font-size: var(--t-xl);
  line-height: 1.55;
  margin: 2.1em 0 .45em;
}

/* 段落標記：一枚朱紅小印，取代「上緣一條分隔線」那種通用切法 */
.mark {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: var(--t-xs);
  letter-spacing: .16em;
  color: var(--ink-3);
  margin: 0 0 20px;
}
.mark::before {
  content: "";
  width: 11px; height: 11px;
  background: var(--seal);
  flex: none;
}

/* 著重號：中文自己的強調方式，不是把字加粗 */
.dot {
  font-weight: inherit;
  -webkit-text-emphasis: filled dot var(--seal);
  text-emphasis: filled dot var(--seal);
  text-emphasis-position: under right;
}
@supports not (text-emphasis: filled dot) {
  .dot { border-bottom: 2px solid var(--seal); }
}

.lead {
  font-size: clamp(1.06rem, 2.1vw, 1.22rem);
  line-height: 1.8;
  color: var(--ink-2);
}

.note { font-size: var(--t-sm); line-height: 1.7; color: var(--ink-3); }

/* ── 導覽 ──────────────────────────────────────────────────────────────── */

.skip {
  position: absolute; left: -9999px;
  background: var(--paper); color: var(--ink);
  padding: 10px 16px; z-index: 10;
}
.skip:focus { left: var(--gutter); top: 10px; }

.nav {
  display: flex;
  align-items: baseline;
  gap: 26px;
  padding-block: 26px 20px;
  flex-wrap: wrap;
}

.nav__brand {
  font-family: "KanCe Serif", "Noto Serif TC", "Songti TC", serif;
  font-size: var(--t-2xl);
  letter-spacing: .14em;
  color: var(--ink);
  text-decoration: none;
  margin-inline-end: auto;
}

.nav a:not(.nav__brand) {
  position: relative;
  color: var(--ink-2);
  text-decoration: none;
  font-size: var(--t-md);
}
.nav a:not(.nav__brand)::after {   /* 觸控命中區補到 44px，不動視覺 */
  content: ""; position: absolute; inset-inline: -6px; top: 50%;
  height: max(44px, 100%); transform: translateY(-50%);
}
.nav a:hover, .nav a[aria-current] { color: var(--brown); }
.nav a[aria-current] { text-decoration: underline; text-underline-offset: 6px; }

/* ── 首屏：不做賣點陳列，直接把產品做的事演一次 ──────────────────────── */

.hero { padding-block: clamp(30px, 5vw, 62px) clamp(30px, 4vw, 48px); max-width: 40em; }
.hero h1 { margin-bottom: .3em; }
.hero__sub { font-size: var(--t-xl); line-height: 1.75; color: var(--ink-2); margin-bottom: 1.6em; }

/* 前後對照：兩塊之間夾一個箭頭，不做卡片、不做陰影 */
.demo { margin: 0 0 26px; }
.demo__row { margin: 0; }
.demo__label { font-size: var(--t-xs); letter-spacing: .1em; color: var(--ink-3); margin: 0 0 8px; }
.demo__turn { margin: 12px 0 14px; color: var(--edge); font-size: var(--t-xl); line-height: 1; }

/* 用語對照做成一排「詞牌」，密度高、掃一眼就懂，而且不像功能卡 */
.chips { display: flex; flex-wrap: wrap; gap: 8px 10px; margin: 0 0 30px; padding: 0; list-style: none; }
.chips li {
  font-size: var(--t-md);
  color: var(--ink);
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 5px 11px;
}
.chips i { font-style: normal; color: var(--ink-3); margin: 0 4px; }
.chips__more { background: transparent; border-style: dashed; border-color: var(--edge); color: var(--ink-3); }

/* 首屏演完，馬上讓人看到成品 */
.showcase { margin: 0; padding-bottom: clamp(40px, 6vw, 72px); display: grid; justify-items: center; gap: 14px; }
.showcase img { width: 320px; max-width: 100%; border: 1px solid var(--edge); border-radius: 3px; }
.showcase figcaption { font-size: var(--t-sm); color: var(--ink-2); text-align: center; max-width: 26em; }

@media (max-width: 700px) {
  .showcase img { width: 260px; }
}

/* ── 動作 ──────────────────────────────────────────────────────────────── */

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; margin: 26px 0 18px; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 26px;
  background: var(--brown);
  color: var(--paper);
  border: 1px solid var(--brown);
  border-radius: 4px;
  text-decoration: none;
  font-size: var(--t-base);
  font-weight: 500;
  transition: background .14s ease-out, color .14s ease-out;
}
.btn:hover { background: var(--brown-2); border-color: var(--brown-2); color: var(--paper); }

.btn--quiet {
  background: transparent;
  color: var(--brown);
  border-color: var(--edge);   /* 按鈕的框是「這是一個按鈕」的唯一線索，要撐過 3:1 */
}
.btn--quiet:hover { background: var(--paper-2); color: var(--brown-2); border-color: var(--brown-2); }

/* 信任帶：把「要不要下載」真正卡住的四件事一次講完 */
.trust {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--rule);
  list-style: none;
  font-size: var(--t-md);
  color: var(--ink-2);
}
.trust li { display: flex; align-items: center; gap: 7px; }
/* 分隔點掛在「前一項的尾巴」而不是「後一項的頭」——換行時才不會有一顆點站在行首 */
.trust li:not(:last-child)::after { content: ""; width: 3px; height: 3px; background: var(--rule-2); }

.stars { color: var(--brown); letter-spacing: .1em; font-size: .95em; }

/* ── 轉換示範（本站的主角） ────────────────────────────────────────────── */

.xform { margin: 0; display: grid; gap: 0; border-top: 1px solid var(--rule); }

.xform__row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: baseline;
  gap: 10px 16px;
  padding: 15px 0;
  border-bottom: 1px solid var(--rule);
}

.xform__from { color: var(--ink-3); text-align: end; }
.xform__from em { font-style: normal; text-decoration: line-through; text-decoration-color: var(--edge); }
.xform__to   { color: var(--ink); }
.xform__to b { font-weight: 600; }
.xform__arrow { color: var(--ink-3); font-size: var(--t-md); }   /* 這格裝的是「正確是／看冊擋下」，是語意不是裝飾 */
/* 「逐字換→／OpenCC→」是說明哪一種做法會出錯的標籤，不該被刪除線劃掉 */
.xform__how { color: var(--ink-3); font-size: .86em; }

@media (max-width: 560px) {
  .xform__row { grid-template-columns: 1fr; gap: 2px; padding: 13px 0; }
  .xform__from { text-align: start; }
  /* 不能整個藏起來——那格裝的是「看冊擋下」這個產品主張，而手機是主要流量 */
  .xform__arrow { display: inline; font-size: var(--t-xs); margin-inline-end: 6px; }
  .xform__to::before { content: none; }
}

/* 亂碼樣本：這串是真的用編碼錯配算出來的，不是打出來的 */
.garble {
  font-family: "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", monospace;
  color: var(--ink-3);
  background: var(--paper-3);
  padding: 14px 16px;
  border-inline-start: 3px solid var(--edge);
  word-break: break-all;
  line-height: 1.7;
  font-size: var(--t-md);
}

.fix { border-inline-start-color: var(--brown); background: var(--paper-2); color: var(--ink); }

/* ── 直排實演 ──────────────────────────────────────────────────────────── */

.vert {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  /* ⚠️ 這裡不能用 block-size：在 vertical-rl 底下 block 軸是水平的，
     寫 block-size 是在夾「寬度」，高度就變成 auto、整塊被文字撐到七百多像素高。
     要夾的是實體高度，所以用 height。 */
  height: 20em;
  max-height: 62vh;
  /* ⚠️ 這裡也不能用 inline-size：vertical-rl 底下 inline 軸是垂直的，寫 inline-size 等於又設一次高度。
     要收掉右半邊那塊空白，夾的是物理寬度。 */
  width: fit-content;
  max-width: 100%;
  padding: 22px 26px;
  border: 1px solid var(--edge);
  background: var(--paper-2);
  font-family: "KanCe Serif", "Noto Serif TC", "Songti TC", serif;
  font-size: var(--t-lg);
  line-height: 2;
  overflow-x: auto;
  overscroll-behavior-x: contain;
}
/* 用 fit-content 收窄之後會靠左停在 1fr 欄裡，右邊留一大塊死空間 */
.vert { justify-self: center; }
.vert p { margin: 0 0 0 .6em; text-indent: 1em; }

/* ── 圖組 ──────────────────────────────────────────────────────────────── */

.gallery {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  padding-block: 6px 18px;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  overscroll-behavior-x: contain;   /* 捲到底不要帶著整頁一起走 */
}
.gallery figure { margin: 0; flex: 0 0 auto; width: 230px; scroll-snap-align: start; }
.gallery img { border: 1px solid var(--edge); border-radius: 3px; }
.gallery figcaption { font-size: var(--t-sm); line-height: 1.65; color: var(--ink-2); margin-top: 10px; }
/* iPad 圖比手機圖寬，縮成同寬就看不出是平板 */
.gallery figure.wide { width: 320px; }
/* 橫向捲動容器要能用鍵盤操作（HTML 上有 tabindex="0"），焦點框要看得見 */
.gallery:focus-visible, .tablewrap:focus-visible { outline: 2px solid var(--seal); outline-offset: 4px; }

/* 圖文交錯：奇數段圖在右、偶數段圖在左，且不等寬 */
.duo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 260px);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  padding-block: 40px;
  border-bottom: 1px solid var(--rule);
}
.duo:last-of-type { border-bottom: 0; }
.duo--flip { grid-template-columns: minmax(0, 260px) minmax(0, 1fr); }
.duo--flip .duo__art { order: -1; }
.duo__art img { border: 1px solid var(--edge); border-radius: 3px; }
.duo h3 { margin-top: 0; }

@media (max-width: 780px) {
  .duo, .duo--flip { grid-template-columns: 1fr; gap: 22px; }
  .duo__art { max-width: 230px; }
  .duo--flip .duo__art { order: 0; }
}

/* ── 評論 ──────────────────────────────────────────────────────────────── */

/* 兩欄。四則評論排成 2×2 才不會留下「三則一排＋一則孤零零」的破口 */
.reviews { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 0 44px; }

.reviews blockquote {
  margin: 0;
  padding: 22px 0;
  border-top: 1px solid var(--rule);
}
.reviews q {
  font-family: "KanCe Serif", "Noto Serif TC", "Songti TC", serif;
  font-size: var(--t-xl);
  line-height: 1.75;
  quotes: "「" "」" "『" "』";
}
.reviews footer { font-size: var(--t-xs); color: var(--ink-3); margin-top: 10px; }

/* ── 清單 ──────────────────────────────────────────────────────────────── */

.list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.list li { padding: 13px 0; border-bottom: 1px solid var(--rule); }
.list b { font-weight: 600; }

.facts { margin: 0; border-top: 1px solid var(--rule); }
.facts > div { display: flex; gap: 20px; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.facts dt { flex: 0 0 5.6em; color: var(--ink-3); font-size: var(--t-md); margin: 0; }
.facts dd { margin: 0; flex: 1; min-width: 0; font-size: var(--t-md); }

@media (max-width: 520px) {
  .facts > div { flex-direction: column; gap: 2px; }
  .facts dt { flex-basis: auto; }
}

/* 價目：兩欄，中間一條線，不做「推薦方案」那種高亮卡 */
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0; border-top: 1px solid var(--rule-2); }
.plans > div { padding: 26px 0; border-bottom: 1px solid var(--rule); }
.plans > div + div { border-inline-start: 1px solid var(--rule); padding-inline-start: 32px; }
@media (max-width: 620px) {
  .plans > div + div { border-inline-start: 0; padding-inline-start: 0; }
}
.price { font-family: "KanCe Serif", "Noto Serif TC", serif; font-size: var(--t-3xl); line-height: 1.2; }
.price small { font-size: var(--t-md); color: var(--ink-2); }

/* ── 表格 ──────────────────────────────────────────────────────────────── */

.tablewrap { overflow-x: auto; margin: 1.4em 0; }
table { border-collapse: collapse; width: 100%; min-width: 460px; font-size: var(--t-md); }
th, td { text-align: start; padding: 11px 14px 11px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
thead th { font-family: "KanCe Serif", "Noto Serif TC", serif; font-weight: 400; border-bottom: 1px solid var(--rule-2); white-space: nowrap; }
tbody th { font-weight: 400; color: var(--ink-2); }

/* ── 常見問題 ──────────────────────────────────────────────────────────── */

.faq details {
  border-bottom: 1px solid var(--rule);
  padding: 4px 0;
}
.faq details:first-of-type { border-top: 1px solid var(--rule); }
.faq summary {
  cursor: pointer;
  padding: 15px 28px 15px 0;
  position: relative;
  font-size: var(--t-lg);
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "＋";
  position: absolute; inset-inline-end: 0; top: 15px;
  color: var(--brown);
}
.faq details[open] summary::after { content: "−"; }
.faq details > p { margin: 0 0 16px; color: var(--ink-2); max-width: var(--measure); }

/* ── 接著看 ────────────────────────────────────────────────────────────── */

.more { border-top: 1px solid var(--rule); padding-top: 26px; }
.more ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.more a { text-decoration: none; }
.more a:hover { text-decoration: underline; }

/* ── 頁尾 ──────────────────────────────────────────────────────────────── */

.foot {
  border-top: 1px solid var(--rule);
  margin-top: 72px;
  padding-block: 26px 52px;
  display: flex;
  flex-wrap: wrap;
  gap: 18px 28px;   /* row-gap 要 ≥ 命中區溢出量，否則兩行連結的 44px 觸控區會疊在一起 */
  align-items: center;
  font-size: var(--t-sm);
  color: var(--ink-3);
}
.foot a { position: relative; color: var(--ink-2); text-decoration: none; }
.foot a::after { content: ""; position: absolute; inset-inline: 0; top: 50%; height: 44px; transform: translateY(-50%); }
.foot a:hover { color: var(--brown); }
.foot .spacer { margin-inline-end: auto; }

/* ── 焦點與動效 ────────────────────────────────────────────────────────── */

:where(a, button, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--seal);
  outline-offset: 3px;
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ── 手機 ──────────────────────────────────────────────────────────────── */

@media (max-width: 560px) {
  body { font-size: 16.5px; }
  .nav { gap: 16px; row-gap: 26px; }
  .actions .btn { flex: 1 1 100%; }
}

/* ==========================================================================
   內頁（長文）版式
   首頁是編排出來的，內頁是「一篇排得好看的文章」。共用同一套色與字，
   節奏不同：單欄、行寬固定、標題靠留白分段而不是靠框線。
   ========================================================================== */

.prose { max-width: 660px; padding-block: 12px 8px; }

.prose h1 { font-size: clamp(2rem, 5vw, 2.7rem); margin-top: 34px; }

.prose h2 {
  font-size: clamp(1.35rem, 2.8vw, 1.62rem);
  margin: 2.4em 0 .6em;
  padding-top: 1.2em;
  border-top: 1px solid var(--rule);
}

.prose h3 { font-size: var(--t-lg); margin: 2em 0 .4em; }

.prose > p, .prose li { max-width: var(--measure); }

/* 每頁開頭那段「直接回答」。搜尋引擎與 AI 助理最常整段抓走的就是它。 */
.answer {
  font-size: var(--t-lg);
  line-height: 1.8;
  border-inline-start: 3px solid var(--seal);
  padding: 2px 0 2px 18px;
  margin: 1.5em 0 1.7em;
}

.lede { color: var(--ink-2); margin-top: -.5em; font-size: var(--t-md); }

ul.plain, ol.steps { padding-inline-start: 1.25em; }
ul.plain li, ol.steps li { margin-bottom: .55em; }
ul.plain li::marker, ol.steps li::marker { color: var(--rule-2); }
ol.steps li { margin-bottom: .9em; }
strong { font-weight: 600; }

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .92em;
  background: var(--paper-2);
  padding: 1px 5px;
  border-radius: 3px;
}

/* 舊版按鈕別名：內頁沿用 */
.cta-row { display: flex; flex-wrap: wrap; gap: 14px; margin: 1.7em 0 .5em; }
.cta {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 12px 24px;
  background: var(--brown); color: var(--paper);
  border: 1px solid var(--brown); border-radius: 4px;
  text-decoration: none; font-size: var(--t-base); font-weight: 500;
  transition: background .14s ease-out, color .14s ease-out;
}
.cta:hover { background: var(--brown-2); border-color: var(--brown-2); color: var(--paper); }
.cta.ghost { background: transparent; color: var(--brown); border-color: var(--edge); }
.cta.ghost:hover { background: var(--paper-2); color: var(--brown-2); border-color: var(--brown-2); }

/* 內頁的常見問題用 h3 + p，不是 details */
.prose .faq h3 { font-size: var(--t-lg); margin-top: 1.7em; }
.prose .faq h3 + p { color: var(--ink-2); }

/* 接著看 */
.prose .more { background: var(--paper-2); border: 0; border-radius: 4px; padding: 22px 26px; margin-top: 2.8em; }
.prose .more h2 { font-size: var(--t-lg); margin: 0 0 .5em; border: 0; padding: 0; }
.prose .more ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.prose .more li { font-size: var(--t-md); }

@media (max-width: 560px) {
  .prose .cta { flex: 1 1 100%; }
  .prose .more { padding: 18px 20px; }
}

/* ── 版面微調：原本散在 HTML 裡的 inline style，收回這裡具名管理 ──────── */

.duo--plain { border-bottom: 0; }
.vert-note { margin-top: 18px; }

.actions--mid  { margin-top: 38px; }
.actions--plan { margin-top: 34px; }
.actions--center { justify-content: center; }

.plans { margin-top: 44px; }
.plans h3 { margin-top: 0; }
.plans .list { margin-top: 16px; }
.plans + .note { margin-top: 26px; }

/* 收尾那段是全站唯一置中的區塊：一句話、一顆鈕，不再堆資訊 */
.band--center { text-align: center; }
.band--center h2 { margin-bottom: .4em; }
.lead--center { margin-inline: auto; max-width: 30em; }

.more--tail { margin-top: 26px; }

/* 中文沒有詞邊界，CSS 管不了斷行；標題裡不想被拆開的詞用這個綁住 */
.keep { white-space: nowrap; }

/* 表格標題靠左，與表身對齊 */
caption { text-align: start; padding-bottom: 8px; }

/* 長清單分兩欄：>5 項還用「每列一條細線」的預設清單，是最容易讀不下去的排法 */
.list--split { columns: 2; column-gap: 44px; }
.list--split li { break-inside: avoid; }
@media (max-width: 720px) { .list--split { columns: 1; } }

/* 第三、四層並排對照：與上面的圖文分欄是不同的版面家族，避免整段變成 zigzag */
.pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 0 clamp(28px, 4vw, 56px); padding-block: 40px 8px; }
.pair__col h3 { margin-top: 0; }
@media (min-width: 781px) { .pair__col + .pair__col { border-inline-start: 1px solid var(--rule); padding-inline-start: clamp(28px, 4vw, 56px); } }