/* 鯊魚卡牌官網 — 共用樣式
   視覺依據：IG 文宣與 Logo（深藍底 ＋ 金色），Master Handoff 8.5.5 */

/* 明體：只給大標題用（2026-08-26）
   為什麼自己託管而不用 Google Fonts CDN：我們的 CSP 是 font-src 'self'，
   而且自己託管訪客資料不會外流給第三方。
   只嵌入標題實際用到的 292 個中文字，完整字型 16.8MB → 這份 91KB。
   ⚠️ 標題文字改了要重跑 build_pages.py 重新產生字型，否則新字會掉回系統字型。 */
@font-face {
  font-family: "Shark Serif";
  src: url("fonts/NotoSerifTC-300.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

:root {
  /* 底色：2026-08-26 從深藍改成近黑
     原因是「深藍 + 金」是高級感模板最常見的公式配色，一眼就像 AI 產的。
     近黑保留深色的質感，但少了那股模板味；而且卡牌照片在近黑底上更突出。
     色相留一點點冷調（不是純黑），純黑會顯得死板。 */
  --navy-900: #08090c;
  --navy-800: #101218;
  --navy-700: #191c24;
  --navy-600: #262a35;
  --gold-400: #d4af37;
  --gold-300: #e3c765;
  --gold-200: #f0dc9a;
  --ink: #f2efe9;
  --ink-dim: #b0b3bb;
  --ink-faint: #999dab;   /* 2026-08-27 從 #7b7f8a 提亮：對比 4.97→7.36。
                             舊值剛好卡在 WCAG AA 門檻(4.5)上，用在 12–14px 的中文小字
                             （.muted / .barcmp-note / .plan-ins）就變成使用者說的「灰灰的看不舒服」。
                             通過最低標準不等於看得舒服，小字＋複雜筆畫要留餘裕。 */
  /* 分隔線改用中性色：原本是金色半透明，滿版金線也是模板味的來源之一。
     金色留給真正重要的東西（價格、CTA、關鍵數字）。 */
  --line: rgba(255, 255, 255, 0.14);
  --line-soft: rgba(255, 255, 255, 0.07);
  --max: 1120px;
  --radius: 4px;
  --serif: "Shark Serif", "Songti TC", "Noto Serif TC", serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--navy-900);
  color: var(--ink);
  font-family: "Noto Sans TC", "PingFang TC", "Helvetica Neue", -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.85;
  /* 中文內文要正字距（2026-08-26）
     拉丁字母本身有側邊留白，中文字是滿框的方塊，字距 0 會擠成一團。
     justfont（台灣字型公司）自己的網站在 16px 內文用 1.2px ≈ 0.075em，
     這裡取 0.05em 稍微保守，因為我們的行長比他們短。
     這是「看起來有人排版過」最便宜的一個改動。 */
  letter-spacing: 0.05em;
  -webkit-font-smoothing: antialiased;
}

/* 純英數的地方不要正字距——那是給中文的，拉丁字母加了會鬆散。 */
.figure, .en, code, input, select, textarea { letter-spacing: normal; }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; }

/* ---------- 通用元件 ---------- */

.eyebrow {
  font-size: 12px;
  letter-spacing: 0.28em;
  color: var(--gold-400);
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 18px;
}

.rule {
  width: 48px; height: 1px;
  background: var(--gold-400);
  margin: 22px 0;
}

/* 大標題改用明體、細字重、緊行高（2026-08-26）
   三個標竿量到的共同做法：
     Takram    h1 42px / 字重 400 / 行高 0.95
     justfont  明體大標 / 字重 300 / 字距 0.2em
     Linear    h1 64px / 字重 510 / 行高 1.0
   我們原本是 52px / 字重 600 / 行高 1.35 ——粗又鬆，正是「模板感」的來源。
   明體（襯線）與黑體（無襯線）搭配是中文排版的基本功，
   單一字體打天下才是預設值，也就是 AI 生成的樣子。 */
h1, h2 {
  font-family: var(--serif);
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: 0.08em;
}
h3 { font-weight: 600; line-height: 1.5; letter-spacing: 0.04em; }
h1 { font-size: clamp(32px, 5.4vw, 56px); }
h2 { font-size: clamp(25px, 3.6vw, 36px); }
h3 { font-size: 19px; }

.lead { font-size: clamp(16px, 2vw, 18px); color: var(--ink-dim); max-width: 62ch; }
.muted { color: var(--ink-faint); font-size: 15px; }
.gold { color: var(--gold-300); }

section { padding: clamp(56px, 8vw, 96px) 0; border-top: 1px solid var(--line-soft); }

.btn {
  display: inline-block;
  padding: 15px 34px;
  background: var(--gold-400);
  color: var(--navy-900);
  font-weight: 700;
  border-radius: var(--radius);
  letter-spacing: 0.04em;
  transition: background 0.2s, transform 0.2s;
}
.btn:hover { background: var(--gold-300); transform: translateY(-1px); }

.btn-ghost {
  display: inline-block;
  padding: 15px 34px;
  border: 1px solid var(--line);
  color: var(--gold-300);
  border-radius: var(--radius);
  transition: border-color 0.2s, background 0.2s;
}
.btn-ghost:hover { border-color: var(--gold-400); background: rgba(212,175,55,0.06); }

/* ---------- 頁首 ---------- */

.site-head {
  position: sticky; top: 0; z-index: 50;
  background: rgba(8, 9, 12, 0.92);   /* 2026-08-26：原為寫死的舊深藍，未跟著變數走 */
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-soft);
}
.site-head .wrap {
  display: flex; align-items: center; justify-content: space-between;
  height: 68px; gap: 20px;
}
.brand { display: flex; align-items: center; gap: 12px; }
/* 2026-08-14 換成真商標（原本是 CSS 畫的假「S」圓圈）。
   徽章細節多，縮到 36px 高時只看得出金色圓徽的輪廓——這是徽章型 logo 的必然，
   所以品牌名仍由旁邊的文字負責，圖只負責辨識。 */
/* 2026-08-14 第三版商標是接近正方形的構圖（3485×3324），
   框改成正方才不會左右留白。 */
.brand-mark {
  width: 40px; height: 40px; flex: 0 0 40px;
  object-fit: contain;
}
/* 頁尾的大商標——這裡尺寸夠大，徽章的細節（波浪、鱗紋、外圈字）才真的看得到 */
.foot-logo { width: 190px; height: auto; margin-bottom: 16px; opacity: 0.92; }

.brand-name { font-weight: 600; letter-spacing: 0.06em; font-size: 15px; }
.brand-name small { display: block; font-size: 10px; letter-spacing: 0.22em; color: var(--ink-faint); font-weight: 400; }

.nav { display: flex; gap: 26px; font-size: 14px; }
.nav a { color: var(--ink-dim); transition: color 0.2s; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--gold-300); }

.nav-toggle { display: none; background: none; border: 0; color: var(--gold-300); font-size: 22px; cursor: pointer; }

/* ---------- 主視覺 ---------- */

.hero {
  border-top: 0;
  padding: clamp(64px, 11vw, 128px) 0 clamp(56px, 8vw, 96px);
  background:
    radial-gradient(1100px 520px at 76% -8%, rgba(212,175,55,0.13), transparent 62%),
    linear-gradient(180deg, var(--navy-800), var(--navy-900));
}
/* ⚠️ 2026-08-14 修兩個相反方向的問題（使用者用 Cmd +/− 縮放時發現）：
   放大 → 標題被 max-width:17ch 擠成三行（「送鑑定之／前，」硬斷在詞中間）
   縮小 → 內容全擠在左側 40%，右邊大片空白
   原因是同一個：17ch 這種以字元計的寬度會隨字級變動，而 .wrap 固定 1120px 不會。
   改法：標題用 text-wrap 讓瀏覽器決定斷點、不設死寬度；hero 在寬螢幕改兩欄。 */
.hero h1 {
  /* balance 讓各行長度平均，pretty 避免最後一行只剩一兩個字 */
  text-wrap: balance;
  max-width: 22ch;
}
.hero h1 em { font-style: normal; color: var(--gold-300); }
.hero .sub { margin-top: 10px; font-size: clamp(17px, 2.3vw, 21px); color: var(--gold-200); font-weight: 500; }
.hero p { margin-top: 26px; text-wrap: pretty; }
.hero .cta-row { margin-top: 40px; display: flex; gap: 14px; flex-wrap: wrap; }

/* 寬螢幕：hero 改兩欄，右側放重點數字，消掉右邊的空白 */
@media (min-width: 1080px) {
  .hero .wrap {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: clamp(40px, 5vw, 80px);
    align-items: center;
  }
  .hero-main { min-width: 0; }
  .hero-side { min-width: 0; }
  .hero h1 { max-width: none; }
}
@media (max-width: 1079px) {
  .hero-side { margin-top: 44px; }
}

/* hero 右側的重點卡 */
.hero-side {
  display: grid;
  gap: 14px;
}
.hero-stat {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 22px 24px;
  background:
    radial-gradient(100% 70% at 100% 0%, rgba(212,175,55,0.08), transparent 65%),
    rgba(255,255,255,0.015);
}
.hero-stat b {
  display: block;
  font-size: clamp(26px, 3.4vw, 40px);
  color: var(--gold-300);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.hero-stat span { font-size: 13px; color: var(--ink-faint); letter-spacing: 0.04em; }

.hero-note {
  margin-top: 44px; padding: 20px 24px;
  border-left: 2px solid var(--gold-400);
  background: rgba(255,255,255,0.02);
  max-width: 60ch;
}

/* ---------- 服務卡 ---------- */

.grid { display: grid; gap: 18px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); }
/* 四格用（例如四大流程 STEP 01–04）。用 3 欄會孤一張在最後一排，
   右邊空兩格；215px 讓四張在桌機同一排排完，手機仍會自動疊成一欄。 */
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }

.card {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 30px 26px;
  background: linear-gradient(160deg, rgba(255,255,255,0.028), transparent);
  transition: border-color 0.2s, transform 0.2s;
  display: flex; flex-direction: column;
}
.card:hover { border-color: var(--line); transform: translateY(-2px); }
.card .tag { font-size: 11px; letter-spacing: 0.2em; color: var(--gold-400); margin-bottom: 12px; }
.card h3 { margin-bottom: 10px; }
.card p { font-size: 15px; color: var(--ink-dim); flex: 1; }
.card .price { margin-top: 16px; font-size: 21px; color: var(--gold-300); font-weight: 600; }
.card .price small { font-size: 13px; color: var(--ink-faint); font-weight: 400; }
.card .more { margin-top: 18px; font-size: 14px; color: var(--gold-300); }

/* ---------- 信任區 ---------- */

.trust { display: grid; gap: 26px; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); }
.trust-item { padding-top: 22px; border-top: 1px solid var(--line); }
.trust-item h3 { color: var(--gold-200); margin-bottom: 10px; font-size: 17px; }
.trust-item p { font-size: 15px; color: var(--ink-dim); }

.pledge {
  margin-top: 44px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 34px;
  background: linear-gradient(135deg, rgba(212,175,55,0.09), transparent 70%);
}
.pledge h3 { font-size: clamp(20px, 2.6vw, 26px); color: var(--gold-200); margin-bottom: 12px; }

/* ---------- 佔位 ---------- */

.placeholder {
  border: 1px dashed rgba(212,175,55,0.34);
  border-radius: var(--radius);
  padding: 30px 26px;
  color: var(--ink-faint);
  font-size: 14px;
  background: rgba(212,175,55,0.03);
}
.placeholder strong { color: var(--gold-300); display: block; margin-bottom: 6px; font-size: 13px; letter-spacing: 0.08em; }

/* ---------- FAQ ---------- */

.faq details {
  border-bottom: 1px solid var(--line-soft);
  padding: 20px 0;
}
.faq summary {
  cursor: pointer; font-weight: 600; font-size: 16px;
  list-style: none; display: flex; justify-content: space-between; gap: 20px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--gold-400); font-size: 20px; line-height: 1; }
.faq details[open] summary::after { content: "−"; }
.faq p { margin-top: 12px; color: var(--ink-dim); font-size: 15px; }

/* ---------- 店面 ---------- */

.store { display: grid; gap: 34px; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); align-items: start; }
.store dl { display: grid; grid-template-columns: 92px 1fr; gap: 14px 18px; font-size: 15px; }
.store dt { color: var(--gold-400); font-size: 13px; letter-spacing: 0.06em; }
.store dd { color: var(--ink-dim); }

/* ---------- 結尾 CTA ---------- */

.closing { text-align: center; }
.closing h2 { max-width: 20ch; margin: 0 auto 18px; }
.closing p { color: var(--ink-dim); margin-bottom: 32px; }

/* ---------- 頁尾 ---------- */

.site-foot { border-top: 1px solid var(--line-soft); padding: 52px 0 40px; background: var(--navy-800); }
.foot-grid { display: grid; gap: 30px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.site-foot h4 { font-size: 12px; letter-spacing: 0.2em; color: var(--gold-400); margin-bottom: 14px; font-weight: 600; }
.site-foot ul { list-style: none; font-size: 14px; }
.site-foot li { margin-bottom: 9px; color: var(--ink-dim); }
.site-foot a:hover { color: var(--gold-300); }
.foot-base {
  margin-top: 40px; padding-top: 22px;
  border-top: 1px solid var(--line-soft);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: 13px; color: var(--ink-faint);
}

/* ═══════════════════════════════════════════════════════════
   視覺強化層（2026-08-14）
   研究依據：Linear（負字距、字重 510、近黑底）、Goldin（圖片驅動、
   AktivGrotesk 字重 600）、2026 趨勢（深色優先／bento／原生捲動動畫）。
   PSA 與 CGC 刻意不參考——同業走淺色機構風，與本站精品定位不符。

   核心診斷：問題不是「排版不夠花」，是缺少視覺元素。素材（照片）還沒到，
   因此改用四個不依賴照片的手法：大數字當主視覺、bento 不等寬格狀、
   卡牌比例容器、細緻光暈與邊框漸層。
   ═══════════════════════════════════════════════════════════ */

/* ---------- 標題字距：2026-08-26 由負改正 ----------
   ⚠️ 這段原本是 letter-spacing: -0.02em / -0.03em，是錯的。
   負字距是拉丁字母的手法——拉丁字母本身帶側邊留白，收緊會更緊湊好看。
   中文字是滿框方塊，沒有那個留白，負字距只會讓筆畫互相打架。
   量到的實例：justfont 的明體大標用的是 +0.2em（正的、而且很寬）。

   這段位於檔案後段，會覆蓋前面 h1/h2 的設定——
   所以前面改成正字距後，這裡不跟著改就等於沒改。 */
h1, h2 { letter-spacing: 0.08em; font-weight: 300; }
h1 { letter-spacing: 0.06em; }   /* h1 字級最大，字距可略收 */

/* ---------- 大數字當視覺元素 ----------
   價格本身就是最強的視覺。$200 / $1,000 用超大字級處理，
   不需要照片也能撐起版面。 */
/* ⚠️ 2026-08-14 修溢出：原本 clamp(44px, 8vw, 92px) 配上 190px 的格子，
   「NT$19,000」（9 字元）在 60px 字級需要約 348px，但格子扣掉內距只有 292px，
   於是溢出並疊到隔壁欄位上（使用者實際截圖抓到）。
   三道防線：字級改保守、容器查詢讓字級跟著格子寬度、min-width:0 允許收縮。
   貨幣符號一律放進 <small>，不進大數字。 */
.figure {
  font-size: clamp(34px, 4.6vw, 62px);
  line-height: 0.95;
  font-weight: 600;
  letter-spacing: -0.04em;
  color: var(--gold-300);
  font-variant-numeric: tabular-nums;
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}
/* 容器查詢：字級跟著格子實際寬度走，不跟著螢幕寬度。
   支援的瀏覽器會用這個，不支援的落回上面的 clamp。 */
@supports (container-type: inline-size) {
  .figure-cell { container-type: inline-size; }
  .figure { font-size: clamp(30px, 17cqi, 62px); }
}
.figure small {
  display: block;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
  margin-top: 10px;
}
.figure-row {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  margin-top: 36px;
}
.figure-cell {
  padding: 30px 26px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(212,175,55,0.07), transparent 60%),
    rgba(255,255,255,0.015);
  transition: border-color 0.25s;
}
.figure-cell:hover { border-color: var(--line); }

/* ---------- Bento：刻意不等寬 ----------
   齊頭的三欄卡片是「文件感」的主因。讓區塊大小有落差，
   視線才有落點。 */
.bento {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(6, 1fr);
  /* ⚠️ 2026-08-14 修「右邊留一片空白」：7 張卡（2 張寬 + 5 張窄）在預設
     sparse 排法下，寬卡放不進剩下的 2 欄就整張換行，於上一列留下空洞，
     最後變成 4 列、右下角空一大塊。dense 讓後面的窄卡回填那些空洞，
     剛好排成 3 列滿版（4+2 / 4+2 / 2+2+2）。 */
  grid-auto-flow: dense;
}
.bento > * { grid-column: span 2; }
.bento > .b-wide { grid-column: span 4; }
.bento > .b-full { grid-column: span 6; }
.bento > .b-half { grid-column: span 3; }

/* ⚠️ 2026-08-14：原本這裡從 900px 起就直接掉成一欄（2 欄格線但每張都 span 2），
   在 900px 左右（筆電放大一級、平板橫放）整頁變成一長條，非常空。
   改成中間先過渡到真正的兩欄，600px 以下才收成一欄。 */
/* ⚠️ 2026-08-16：這個區塊一定要有 min-width 下界。
   原本寫成 max-width:900px（沒有下界），底下的 600px 區塊試圖用
   `.bento > *` 把所有子項改回 span 1——但 `.bento > :last-child` 的特異性
   （class + 偽類）比 `.bento > *`（class + 萬用）高，**沒有被蓋掉**。
   結果手機上最後一張卡仍要求跨 2 欄，硬把單欄撐成兩欄，
   第一欄窄到每行只剩兩三個字、$200 被裁掉。

   修法不是再補一條覆寫——列舉選擇器來覆寫一定會再漏掉下一個。
   改成讓平板區間有明確下界，手機區間根本不會被它影響。 */
@media (min-width: 601px) and (max-width: 900px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .bento > * { grid-column: span 1; }
  .bento > .b-wide, .bento > .b-full, .bento > .b-half { grid-column: span 2; }
  /* 目前 7 張卡（2 寬 + 5 窄）在兩欄下共佔 9 格 → 最後一張會落單、右邊空一格。
     讓落單那張補滿整排。⚠️ 前提是總格數為奇數；日後增減卡片要回頭檢查這行。 */
  .bento > :last-child { grid-column: span 2; }
}
@media (max-width: 600px) {
  .bento { grid-template-columns: 1fr; }
  /* ⚠️ 這裡必須逐一列出 .b-wide／.b-full／.b-half，不能只寫 `.bento > *`。
     它們的基礎規則寫在所有 media query 之外（`.bento > .b-wide { span 4 }`），
     那條永遠生效，而 `.bento > .b-wide`（class+class）的特異性高於
     `.bento > *`（class+萬用），蓋不掉。

     2026-08-16 實測：只寫 `.bento > *` 時，手機上 grid 雖然是單欄，
     但 b-wide 仍要求 span 4，grid 自動長出 3 個隱式欄
     （量到 118.8px 92.9px 104.4px 123.5px），卡片寬 494px > 畫面 390px 直接溢出。 */
  .bento > *,
  .bento > .b-wide,
  .bento > .b-full,
  .bento > .b-half { grid-column: span 1; }
}

/* ---------- 卡牌比例容器 ----------
   2.5 : 3.5 是實體卡的比例。用它當圖片佔位與視覺元素，
   讓「這是賣卡的」在版面上就講出來。 */
.card-frame {
  aspect-ratio: 2.5 / 3.5;
  border-radius: 6px;
  border: 1px solid var(--line);
  background:
    linear-gradient(160deg, rgba(212,175,55,0.1), transparent 55%),
    linear-gradient(0deg, var(--navy-800), var(--navy-700));
  display: grid;
  place-items: center;
  text-align: center;
  padding: 18px;
  position: relative;
  overflow: hidden;
}
.card-frame::after {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(212,175,55,0.14);
  border-radius: 3px;
  pointer-events: none;
}
.card-frame span { font-size: 13px; color: var(--ink-faint); line-height: 1.7; }

/* ---------- 前後對比：滑桿式 ----------
   修復前後用並排而非上下，並加中線分隔，一眼看得出對照關係。 */
.compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--line);
}
/* ⚠️ 2026-08-14：figure 需要 min-width:0 ＋ overflow:hidden。
   原本只在父層 .compare 設 overflow:hidden，配上 grid 1fr 讓兩欄塌成 0 寬
   （實測 .compare 只有 2px＝gap 寬度，圖片 natural 0x0 但手動載入正常）。
   這是「圖片沒顯示」但實際上是版面問題的典型誤診。 */
.compare figure {
  margin: 0; position: relative;
  background: var(--navy-800);
  min-width: 0; overflow: hidden;
  /* 固定正方形（2026-08-27）：第二組對比的兩張比例是 1.20 與 1.00，
     差 20%。grid 的列高取兩者較高者，比例不同就會有一邊被拉伸或留白。
     固定 1:1 讓所有對比組都用同一個框，object-fit:cover 負責裁切。 */
  aspect-ratio: 1 / 1;
}
.compare img { width: 100%; height: 100%; object-fit: cover; display: block; }
.compare figcaption {
  position: absolute; top: 10px; left: 10px;
  background: rgba(8, 9, 12, 0.86);   /* 2026-08-26：同上 */
  border: 1px solid var(--line);
  padding: 4px 12px;
  font-size: 12px;
  letter-spacing: 0.1em;
  border-radius: 3px;
  color: var(--gold-200);
}
.compare-meta {
  margin-top: 12px; font-size: 13px; color: var(--ink-faint);
  display: flex; gap: 18px; flex-wrap: wrap;
}
.compare-meta b { color: var(--ink-dim); font-weight: 500; }

/* ---------- 區塊標號 ----------
   讓長頁面有進度感，也讓每個區塊有視覺錨點。 */
.sec-no {
  font-size: 12px;
  letter-spacing: 0.3em;
  color: var(--gold-400);
  opacity: 0.55;
  font-variant-numeric: tabular-nums;
}

/* ---------- 分隔用細線光暈 ---------- */
.glow-line {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-400), transparent);
  opacity: 0.35;
  margin: 0;
  border: 0;
}

/* ═══════════ 互動元件（2026-08-14）═══════════
   使用者反饋「很單調、沒有互動性」。加入可操作的元件，
   而非更多裝飾動畫——精品感來自回饋精準，不是動畫多。 */

/* ---------- 分頁式切換鈕 ---------- */
.tabs {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 26px; padding-bottom: 20px;
  border-bottom: 1px solid var(--line-soft);
}
.tab {
  appearance: none;
  background: transparent;
  border: 1px solid var(--line-soft);
  color: var(--ink-dim);
  padding: 11px 22px;
  border-radius: 999px;
  font-size: 14px;
  font-family: inherit;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: all 0.22s;
}
.tab:hover { border-color: var(--line); color: var(--gold-200); }
.tab[aria-selected="true"] {
  background: var(--gold-400);
  border-color: var(--gold-400);
  color: var(--navy-900);
  font-weight: 600;
}

/* ---------- 報價器 ---------- */
.quote {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px;
  background:
    radial-gradient(90% 60% at 80% 0%, rgba(212,175,55,0.09), transparent 60%),
    rgba(255,255,255,0.015);
  margin-top: 24px;
}
.quote-facts {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  margin-top: 26px; padding-top: 22px;
  border-top: 1px solid var(--line-soft);
  font-size: 14px; color: var(--ink-dim);
}
.quote-facts b { color: var(--gold-300); font-weight: 600; }

.opt {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 20px; font-size: 14px; color: var(--ink-dim);
  cursor: pointer; user-select: none;
}
.opt input { accent-color: var(--gold-400); width: 17px; height: 17px; cursor: pointer; }

/* ---------- 卡框：3D 傾斜與光澤 ---------- */
.card-frame {
  transition: transform 0.18s ease-out, border-color 0.25s;
  transform-style: preserve-3d;
  will-change: transform;
}
.card-frame::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(160px circle at var(--gx, 50%) var(--gy, 50%),
              rgba(212,175,55,0.16), transparent 65%);
  opacity: 0; transition: opacity 0.3s;
  pointer-events: none;
}
.card-frame:hover { border-color: var(--gold-400); }
.card-frame:hover::before { opacity: 1; }

/* ---------- 前後對比：刻意用並排，不做拖曳滑桿 ----------
   兩張圖拍攝角度與距離不同，疊在一起會對不齊，
   反而讓人懷疑「不是同一張卡」——正是 Google 評論質疑過的問題。 */
.compare img { transition: transform 0.4s; }
.compare figure:hover img { transform: scale(1.06); }
@media (max-width: 640px) { .compare { grid-template-columns: 1fr; } }

/* ---------- 原生捲動進場動畫 ----------
   CSS scroll-driven animation，不需要 JS。
   ⚠️ 必須包在 @supports 裡：不支援的瀏覽器如果套了 opacity:0
   會導致內容永遠看不見——這是「動畫失效變成內容消失」的典型陷阱。 */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    @keyframes rise {
      from { opacity: 0; transform: translateY(22px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    section > .wrap > * {
      animation: rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 42%;
    }
    /* 主視覺不做進場——首屏應該立刻可見 */
    .hero > .wrap > * { animation: none; }
  }
}

/* ---------- 手機 ---------- */

@media (max-width: 820px) {
  .nav {
    display: none;
    position: absolute; top: 68px; left: 0; right: 0;
    flex-direction: column; gap: 0;
    background: var(--navy-800);
    border-bottom: 1px solid var(--line-soft);
    padding: 8px 24px 18px;
  }
  .nav.open { display: flex; }
  .nav a { padding: 15px 0; border-bottom: 1px solid var(--line-soft); }
  /* ⚠️ 2026-08-26：原本這裡是 .site-head { position: relative; }
     用意是讓上面 position:absolute 的展開選單有定位基準。
     但 sticky 本身就是定位元素，絕對定位子元素一樣以它為基準——
     改成 relative 只是讓手機版失去了固定導覽列，沒有換到任何東西。
     實測首頁在手機上 13,441px（16.6 個螢幕高），滑到一半想換頁
     得整個滑回頂端。這是本次操作面最大的單一問題。 */
  .nav-toggle {
    display: block;
    /* 觸控目標放大到 44×44（Apple 人機介面指南的最小值）。
       原本只有 19×27px，手指常按不到。 */
    width: 44px; height: 44px;
    display: grid; place-items: center;
    margin-right: -10px;   /* 視覺上仍靠齊右緣，只是可點範圍變大 */
  }
  .store dl { grid-template-columns: 78px 1fr; }
}

/* ---------- 送鑑成本試算（2026-08-14）----------
   刻意不做「輸入預測分數」——分數要看到卡才知道，那是 $200 預查的內容。
   這裡只算客人自己就能回答的部分：先付多少、佔卡價幾成。 */
.calc { margin-top: 30px; }
.calc-row {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.calc-field { display: grid; gap: 8px; }
.calc-field > span { font-size: 13px; color: var(--ink-dim); letter-spacing: 0.04em; }
.calc-input { display: flex; align-items: center; gap: 8px; }
.calc-input i { font-style: normal; color: var(--ink-faint); font-size: 14px; }
.calc-field input, .calc-field select {
  width: 100%; min-width: 0;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--line-soft); border-radius: var(--radius);
  color: var(--ink); font: inherit; font-size: 16px;
  padding: 13px 14px;
  -webkit-appearance: none; appearance: none;
}
.calc-field select {
  /* 自繪箭頭：原生箭頭在深色底下幾乎看不見 */
  background-image: linear-gradient(45deg, transparent 50%, var(--gold-300) 50%),
                    linear-gradient(135deg, var(--gold-300) 50%, transparent 50%);
  background-position: calc(100% - 20px) center, calc(100% - 14px) center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 38px;
}
.calc-field input:focus, .calc-field select:focus {
  outline: none; border-color: var(--gold-400);
}
.calc-out { margin-top: 26px; }
.calc-head {
  display: grid; gap: 22px; align-items: center;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  padding: 24px 26px;
  border: 1px solid var(--line-soft); border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,0.035), transparent);
}
.calc-facts { display: grid; gap: 10px; font-size: 14px; color: var(--ink-dim); }
.calc-facts b { color: var(--gold-300); font-size: 17px; }
.calc-band {
  margin-top: 14px; padding: 20px 24px;
  border-left: 3px solid var(--line-soft); border-radius: 0 var(--radius) var(--radius) 0;
  background: rgba(255,255,255,0.02);
}
.calc-band h4 { font-size: 16px; }
.calc-band p { margin-top: 8px; color: var(--ink-dim); font-size: 14px; line-height: 1.85; }
.calc-ok   { border-left-color: #4ea87a; }
.calc-mid  { border-left-color: var(--gold-400); }
.calc-warn { border-left-color: #d98a3a; }
.calc-stop { border-left-color: #c4564e; }
.calc-na   { border-left-color: var(--line-soft); }
.calc-note { margin-top: 16px; font-size: 14px; color: var(--ink-dim); line-height: 1.9; }

@media (max-width: 720px) {
  .calc-head { grid-template-columns: 1fr; gap: 16px; }
}

/* 服務卡的一句話 slogan（2026-08-17，學自 Apple Store 的「名稱→slogan→說明」順序）。
   目的是讓掃視的人不必讀完整段描述就抓到差異。
   刻意比說明文字亮、比標題小——它是標題的延伸，不是另一段內容。 */
.card-slogan {
  color: var(--gold-200);
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 10px;
  flex: 0 0 auto;          /* .card 是 flex column，這行避免 slogan 被拉開 */
}

/* ---------- 頂部時效公告（2026-08-17）----------
   由 app.js 動態插入到 body 最前面，所以它在 .site-head 之上。
   .site-head 是 sticky，公告不 sticky——捲下去就消失，不佔永久空間。 */
.notice {
  background: linear-gradient(90deg, rgba(212,175,55,0.16), rgba(212,175,55,0.06));
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}
.notice .wrap {
  display: flex; align-items: center; gap: 14px;
  padding: 11px 24px;
}
.notice p { flex: 1; min-width: 0; color: var(--ink); }
.notice a { color: var(--gold-300); white-space: nowrap; }
.notice a:hover { text-decoration: underline; }
.notice-x {
  flex: 0 0 auto;
  background: none; border: 0; cursor: pointer;
  color: var(--ink-faint); font-size: 15px; line-height: 1;
  padding: 4px 6px;
}
.notice-x:hover { color: var(--ink); }

@media (max-width: 600px) {
  .notice { font-size: 13px; }
  .notice .wrap { padding: 10px 16px; gap: 10px; }
  /* 手機上連結另起一行，不然三個元素擠在一起會把文字壓成一個字一行 */
  .notice p { display: block; }
  .notice a { display: inline-block; margin-top: 4px; }
}

/* 標題的補充句（2026-08-17，學自 Apple Store 的「斷言. 說明.」同行雙色）。
   目的是提高資訊密度——原本要「小標＋標題＋分隔線＋說明段落」四層、佔五行高度，
   現在標題自己就把「這一節在講什麼」說完。

   刻意用 inline 而非 block：它要跟標題同一行、一起換行，是標題的延續不是另一段。
   字級用 em 跟著標題縮放，手機上才不會變成標題很大、補充句很小的斷裂感。 */
.h2-sub {
  color: var(--ink-faint);
  font-weight: 400;
  font-size: 0.62em;
  letter-spacing: 0;
}

/* ---------- 註腳（2026-08-17）----------
   主文掛一個小上標，條件寫在頁尾。清單與編號由 app.js 自動生成。 */
/* 註腳標記（2026-08-17 改）
   ──────────────────────────────────────────────────────────
   原本是純上標數字，緊貼中文時會被讀成數學次方或錯字——
   實機上「不用來台中³」「全額退款²」看起來就像打錯字。
   （Apple 官網用 ∆ § ± ◊ 這類符號而不是數字，正是為了避開這個問題；
     我當初的分析文件寫了，實作時卻還是用了數字。）

   改成有描邊的小圓徽章：一眼看得出是「可以點的註解」，不是內文的一部分。
   保留數字而不用符號，是因為數字對應頁尾清單時比 ∆ § 好找。 */
.fn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 15px;
  height: 15px;
  margin: 0 1px 0 4px;
  padding: 0 3px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(212, 175, 55, 0.08);
  color: var(--gold-300);
  font-size: 10.5px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  cursor: pointer;
  vertical-align: 2px;      /* 略高於基線，但不像上標那樣飛起來 */
  text-decoration: none;
}
.fn:hover { border-color: var(--gold-400); background: rgba(212, 175, 55, 0.16); }

.footnotes {
  border-top: 1px solid var(--line-soft);
  padding: clamp(36px, 5vw, 56px) 0;
}
.footnotes ol {
  margin-top: 16px;
  padding-left: 22px;
  color: var(--ink-faint);
  font-size: 13px;
  line-height: 1.95;
}
.footnotes li { margin-bottom: 8px; }
.footnotes li:target { color: var(--ink); }   /* 從內文跳過來時高亮 */
.footnotes a { color: var(--gold-400); margin-left: 4px; }

/* ══════════════════════════════════════════════════════════
   橫向捲動卡片列（2026-08-17）
   ──────────────────────────────────────────────────────────
   為什麼：首頁在手機上高 16700px＝約 19 個螢幕，而且只能往下滑。
   負責人的原話是「沒有辦法左右滑動」「有些東西邏輯是可以左右操控的」。

   Apple 官網在 375px 下產品分類列仍是橫捲，沒有攤成十列長清單，
   而且整頁 scrollWidth === innerWidth——橫捲發生在**容器內部**，不是頁面。
   我們的渲染檢查器會跳過 overflow-x:auto 容器，正是為這種情況。

   ⚠️ 卡片寬度刻意用 78%，讓下一張露出一小塊邊緣。
   這是視覺暗示「可以滑」，比放箭頭直覺——不要改成 100%。
   ══════════════════════════════════════════════════════════ */
.hscroll-hint {
  /* ⚠️ 這條必須留在下面那個 @media 的**前面**。
     特異性相同時後寫的贏——放在 media query 之後會把 display:flex 蓋掉，
     提示就永遠不顯示（2026-08-17 實際踩過，量測才發現）。 */
  display: none;
  align-items: center;
  gap: 8px;
  margin-top: -4px;
  margin-bottom: 14px;
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--ink-faint);
}
.hscroll-hint svg { width: 26px; height: 10px; stroke: var(--gold-400); }

@media (max-width: 700px) {
  .hscroll.hscroll {
    /* ⚠️ 用 flex 而不是 grid（2026-08-17 改）。
       第一版寫 grid-auto-flow:column + grid-auto-columns:78%，
       桌機 Chrome 量得到 scrollWidth > clientWidth（看起來沒問題），
       但實機滑不動——iOS Safari 對「grid 容器 + overflow-x」的支援
       遠不如 flex 可靠。flex + flex-basis 是橫捲最保險的寫法。

       display 要蓋掉各容器自己的設定（.grid／.trust／.bento 都是 grid）；
       同特異性時後寫的贏，而這段在檔案最後——所以不必加 !important。 */
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    /* ⚠️ 選擇器故意寫成 .hscroll.hscroll——把特異性從 (0,1,0) 提到 (0,2,0)，
       這樣就**不依賴它在檔案裡的位置**。

       原因：`.plan-row { display: grid }` 後來加在檔案更下面，同特異性後寫的贏，
       於是把這裡的 display:flex 蓋掉，方案卡那兩區在手機上完全滑不動——
       而且畫面看起來正常，只是手指滑沒反應。
       同一種順序錯誤今天犯了第二次（第一次是滑動提示的 display:none），
       所以改成從根本上不受順序影響，而不是再搬一次位置。 */
    -webkit-overflow-scrolling: touch;
    padding-bottom: 16px;
    /* 負 margin 讓第一張能貼齊 .wrap 的左邊界，最後一張右側仍留白 */
    margin-inline: -24px;
    padding-inline: 24px;
    scrollbar-width: none;
  }
  .hscroll::-webkit-scrollbar { display: none; }
  .hscroll.hscroll > * {
    scroll-snap-align: start;
    flex: 0 0 78%;      /* 78% 讓下一張露出邊緣，當作「可以滑」的暗示 */
    min-width: 0;       /* 沒有這行，長字串會把 flex 項目撐開、破壞 78% */
  }

  /* .trust 的項目只有一條上框線、沒有自身左右內距，
     所以「出血到螢幕邊緣」的寫法會讓第一段文字直接貼齊螢幕最左（實測 0px）。
     其他容器裡的 .card 自帶 padding，文字落在 27px，看起來正常。
     這一個容器改成不出血，讓文字對齊正文左界。 */
  .trust.hscroll.hscroll {
    margin-inline: 0;
    padding-inline: 0;
  }

  /* 橫捲時 .trust-item 要看起來像一張卡。
     它平常只有一條上框線——在直向堆疊時很好看，但橫捲時
     露出邊緣的下一張會變成「一段沒有邊界的破碎文字」，
     實機截圖上就是左邊那塊孤立的「錢全部／款裡」。
     加上邊框與底色之後，露出的半張才讀得出是另一張卡。 */
  .trust.hscroll.hscroll > * {
    padding: 20px 18px;
    border: 1px solid var(--line-soft);
    border-top-color: var(--line);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.015);
  }

  /* 改用 flex 後 grid-column 已不生效，但把它歸零可避免日後改回 grid 時又踩一次 */
  .bento.hscroll.hscroll > *,
  .bento.hscroll.hscroll > .b-wide,
  .bento.hscroll.hscroll > .b-full,
  .bento.hscroll.hscroll > .b-half { grid-column: auto; }

  /* 滑動提示：只在手機顯示，因為桌機是一般排列不需要滑 */
  .hscroll-hint { display: flex; }
}

/* ── 流程帶：編號圓圈 ＋ 連接線，讓流程看起來像流程 ── */
.flow { counter-reset: flow; }
.flow > * { position: relative; counter-increment: flow; }
.flow > *::before {
  content: counter(flow, decimal-leading-zero);
  position: absolute;
  top: -13px; left: 20px;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--navy-900);
  border: 1px solid var(--gold-400);
  color: var(--gold-300);
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.04em;
  z-index: 2;
}
/* 連接線：桌機水平串接，手機不畫（橫捲時線會斷得很醜）*/
@media (min-width: 701px) {
  .flow > *:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 2px; left: calc(100% + 1px);
    width: 18px; height: 1px;
    background: var(--line);
  }
}
.flow > * { padding-top: 30px; }

/* ── 服務圖示 ── */
.svc-ico {
  width: 34px; height: 34px;
  stroke: var(--gold-300); stroke-width: 1.4;
  fill: none; stroke-linecap: round; stroke-linejoin: round;
  margin-bottom: 14px;
}

/* ── 價格橫條比較：把文字價目變成看得出差距的圖 ── */
.barcmp { margin-top: 28px; display: grid; gap: 14px; }
.barcmp-row { display: grid; grid-template-columns: 84px 1fr auto; gap: 12px; align-items: center; }
.barcmp-row b { font-size: 13px; color: var(--ink-dim); font-weight: 500; }
.barcmp-track { height: 26px; background: rgba(255,255,255,0.04); border-radius: 2px; overflow: hidden; }
.barcmp-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--navy-600), var(--gold-400));
  border-right: 1px solid var(--gold-300);
}
.barcmp-row s { font-size: 14px; color: var(--gold-200); font-variant-numeric: tabular-nums; text-decoration: none; }
.barcmp-note { margin-top: 12px; font-size: 13px; color: var(--ink-faint); }
@media (max-width: 600px) {
  .barcmp-row { grid-template-columns: 66px 1fr auto; gap: 8px; }
  .barcmp-row b { font-size: 12px; }
  .barcmp-row s { font-size: 13px; }
}

/* ══════════════════════════════════════════════════════════
   方案比較卡（2026-08-17）
   ──────────────────────────────────────────────────────────
   換掉原本的做法：每個方案用 32–52px 的巨大字級各佔一整列，
   PSA 三個主方案加四個額外服務就把區塊撐到 1373px（手機要滑快兩個螢幕）。

   更重要的是「看不懂」——客人真正在比的是「多少錢、要等多久」，
   但工期只是一串文字（60 工作日／40 工作日／15 工作日），
   要自己心算差幾倍。改成長度條之後長短一眼就分得出來。

   工期條的基準是**所有家所有方案裡最長的那個**，不是各家自己最長，
   否則跨家比較會失真（CGC 自己最長 ≠ CGC 比 PSA 慢）。
   ══════════════════════════════════════════════════════════ */
.plan-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px 16px;
  background: rgba(255, 255, 255, 0.015);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.plan-card h4 {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-dim);
  letter-spacing: 0.02em;
}
.plan-card .plan-price {
  font-size: clamp(24px, 4.4vw, 32px);
  color: var(--gold-300);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.plan-card .plan-price small {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  color: var(--ink-faint);
  letter-spacing: 0.04em;
}
/* 工期條 */
.dur { display: grid; gap: 5px; margin-top: auto; }
.dur-track { height: 5px; background: rgba(255, 255, 255, 0.07); border-radius: 3px; }
.dur-fill { height: 100%; border-radius: 3px; background: var(--gold-400); }
/* 🔴 2026-08-27 修：原本是 var(--navy-600) #262a35，**比空軌道 rgba(255,255,255,0.07) 還暗**，
   於是 Jumbo(120天) 與 Crossover(80天) 那兩張看起來像沒填、像壞掉，
   而不是「比較慢」。使用者回報「有的框框有亮有的沒亮」就是這個。
   改成低調的金色：仍然看得出填了多少，只是不搶眼。 */
.dur-fill.slow { background: rgba(212, 175, 55, 0.38); }
.dur b { font-size: 12px; font-weight: 500; color: var(--ink-dim); letter-spacing: 0.04em; }
.dur .none { font-size: 12px; color: var(--ink-faint); }
.plan-ins { font-size: 12.5px; color: var(--ink-faint); letter-spacing: 0.02em; }

.plan-row { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

/* ══════════════════════════════════════════════════════════
   送鑑成本分級軸（2026-08-17）
   ──────────────────────────────────────────────────────────
   「佔卡價 29.0%」是整個試算器的結論，但它原本只是一行文字，
   客人得自己記住 10%／30%／100% 三個門檻在哪，才知道 29% 算好還是不好。

   軸是 0–100% **線性**的。10% 那一段因此只佔十分之一寬、看起來很窄——
   這是誠實的代價：把它畫寬一點會讓人以為門檻比實際寬鬆。
   ══════════════════════════════════════════════════════════ */
.gauge { margin-top: 20px; }
.gauge-label { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.gauge-label span { font-size: 12px; letter-spacing: 0.1em; color: var(--ink-faint); }
.gauge-label b { font-size: 19px; color: var(--gold-300); font-variant-numeric: tabular-nums; }
.gauge-track { position: relative; display: flex; height: 12px; border-radius: 2px; overflow: hidden; }
.gauge-seg { height: 100%; }
.gauge-seg.s-ok { background: rgba(120, 190, 140, 0.5); }
.gauge-seg.s-mid { background: rgba(212, 175, 55, 0.45); }
.gauge-seg.s-warn { background: rgba(205, 130, 60, 0.5); }
.gauge-mark {
  position: absolute; top: -4px; bottom: -4px; width: 3px;
  background: var(--ink); border-radius: 2px;
  box-shadow: 0 0 0 2px var(--navy-900);
}
.gauge-ticks { display: flex; margin-top: 7px; font-size: 11px; color: var(--ink-faint); }
.gauge-ticks i { font-style: normal; text-align: right; letter-spacing: 0.04em; }
.calc-more { margin-top: 16px; }
.calc-more summary {
  cursor: pointer; font-size: 13px; color: var(--ink-dim);
  letter-spacing: 0.04em; padding: 6px 0;
}
.calc-more summary::marker { color: var(--gold-400); }
.calc-more p { margin-top: 10px; font-size: 13px; line-height: 1.9; color: var(--ink-faint); }

/* ═══════════════════════════════════════════════════════════
   常駐操作元件（2026-08-26）

   為什麼加：實測首頁在手機上 13,441px ＝ 16.6 個螢幕高，
   而全站只有 4 個 LINE 連結、全部要滑到才看得到。
   LINE 是本站唯一的轉換目標——客人在第 9 個螢幕決定要問，
   卻得先滑回去找入口，那個念頭就沒了。
   ═══════════════════════════════════════════════════════════ */

.floaters {
  position: fixed;
  right: clamp(14px, 2.5vw, 28px);
  bottom: clamp(14px, 2.5vw, 28px);
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  /* 容器本身不吃點擊，只有裡面的按鈕吃——
     否則這塊區域會擋住底下的內容選取與捲動。 */
  pointer-events: none;
}
.floaters > * { pointer-events: auto; }

.fab-line {
  display: flex; align-items: center; gap: 9px;
  height: 52px; padding: 0 22px;
  background: var(--gold-400);
  color: #08090c;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.04em;
  border-radius: 26px;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.45);
  transition: background 0.2s, transform 0.2s;
}
.fab-line:hover { background: var(--gold-300); transform: translateY(-2px); }

.fab-top {
  width: 44px; height: 44px;          /* 44 是觸控目標最小值 */
  display: grid; place-items: center;
  border: 1px solid var(--line);
  background: rgba(8, 9, 12, 0.86);
  backdrop-filter: blur(8px);
  color: var(--ink-dim);
  border-radius: 50%;
  font-size: 17px;
  cursor: pointer;
  /* 預設隱藏，捲動一段距離後才由 app.js 加上 .show */
  opacity: 0; visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.25s, transform 0.25s, visibility 0.25s, border-color 0.2s;
}
.fab-top.show { opacity: 1; visibility: visible; transform: none; }
.fab-top:hover { border-color: var(--gold-400); color: var(--gold-300); }

/* 手機把文字收掉只留圖示，避免橫向佔掉太多畫面 */
@media (max-width: 480px) {
  .fab-line { height: 50px; padding: 0 18px; font-size: 14px; }
  .fab-line .fab-text { display: none; }
  .fab-line { border-radius: 25px; width: 50px; justify-content: center; padding: 0; }
}

/* 捲到頁尾時把浮動按鈕淡出——頁尾本來就有完整的聯絡資訊，
   兩個 LINE 入口疊在一起只是雜訊。 */
.floaters.at-foot { opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s; }

/* 尊重使用者的「減少動態效果」設定 */
@media (prefers-reduced-motion: reduce) {
  .fab-line, .fab-top, .floaters { transition: none; }
  .fab-line:hover, .fab-top:hover { transform: none; }
}

/* ---------- 觸控目標放大（2026-08-26）----------
   Apple 人機介面指南的最小可點尺寸是 44×44pt。實測手機版有 21 個元素低於這個值，
   其中 15 個是頁尾連結（只有 20px 高）。

   手指的接觸面積大約 44px 寬，比游標大得多——小於這個尺寸就會出現
   「明明按到了卻沒反應」或「按到隔壁那條」。這種失敗不會有任何錯誤訊息，
   使用者只會覺得「這網站怪怪的」然後離開。

   做法是加內距而不是改字級：視覺密度不變，可點範圍變大。 */
@media (max-width: 820px) {
  /* 頁尾連結清單：20px → 44px */
  .site-foot ul li { margin: 0; }
  .site-foot ul li a {
    display: inline-block;
    padding: 13px 0;      /* 12px 時實測只有 43.6px，差 0.4px 沒到標準 */
    line-height: 1.4;
  }
  /* 公告關閉鈕：23×23 → 44×44 */
  .notice-x {
    width: 44px; height: 44px;
    display: grid; place-items: center;
    margin-right: -12px;
  }
  /* 註腳的返回箭頭 ↩：14×19，手指幾乎按不到 */
  .footnotes a[href^="#fnref"], .footnotes li > a:last-child {
    display: inline-block;
    min-width: 44px;      /* ↩ 只有 14px 寬，光靠內距補不到 */
    text-align: center;
    padding: 12px 10px;
    margin: -12px -4px;
  }
  /* 內文中的行內連結：加上下內距擴大可點範圍，
     用負 margin 抵銷，行距不會被撐開。 */
  .store dd a, .notice p a {
    display: inline-block;
    padding: 12px 4px;
    margin: -12px -4px;
  }
}

/* ---------- 實拍商品卡（2026-08-26）----------
   取代原本的 .card-frame 佔位框。素材來自 IG 已售出／現貨商品，
   使用者已確認 IG 上的商品照全部是自有商品。

   原圖是 IG 的銷售貼文，帶紅色價格標與商標浮水印，
   已用程式裁切到卡磚範圍、切在價格標上方（見進度紀錄）。

   照片本身是深藍底拍攝，與網站近黑底不同色——這是刻意保留的：
   讓卡磚讀起來像「放在桌上的實物」，而不是去背後貼上去的素材。 */
.card-shot {
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  overflow: hidden;
  background: var(--navy-800);
  display: flex;
  flex-direction: column;
  transition: border-color 0.25s, transform 0.25s;
}
.card-shot:hover { border-color: rgba(212, 175, 55, 0.4); transform: translateY(-3px); }

.card-shot img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center top;   /* 優先保留上方的鑑定標籤，那是最有說服力的部分 */
}

.card-shot figcaption {
  padding: 14px 16px 16px;
  border-top: 1px solid var(--line-soft);
  display: grid;
  gap: 4px;
}
.card-shot .name {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-dim);
}
.card-shot .meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-top: 2px;
}
.card-shot .grade {
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--gold-400);
  font-weight: 700;
  white-space: nowrap;
}
.card-shot .price {
  font-size: 15px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: normal;
  white-space: nowrap;
}

/* 橫向捲動時給固定寬度，否則 flex 會把每張壓扁 */
.hscroll .card-shot { min-width: 236px; }

/* 次要優勢：單行短句，不給卡片。
   八個優勢每個都配一段文字時，讀者會全部略過——份量本身就是雜訊。
   留三個當卡片，其餘壓成一行，資訊不掉但重量拿掉。 */
.trust-brief{
  margin-top:26px; padding:0; list-style:none;
  display:grid; gap:10px;
}
.trust-brief li{
  position:relative; padding-left:22px;
  color:var(--ink-dim); font-size:15px; line-height:1.7;
}
.trust-brief li::before{
  content:""; position:absolute; left:4px; top:11px;
  width:6px; height:6px; border-radius:50%; background:var(--gold-300);
}
.trust-brief strong{ color:var(--ink); font-weight:600; }
@media (min-width:760px){
  .trust-brief{ grid-template-columns:1fr 1fr; gap:10px 34px; }
}

/* 圖解流程：四張純文字卡改成有圖示、有方向的流程。
   不用固定尺寸 SVG——那不會重排。用 HTML 流排＋CSS 畫連接線，
   手機直排（線在左側縱向）、桌機橫排（線在上方橫向）。
   ⚠️ 基礎規則寫在前面，media query 覆寫寫在後面。順序反了手機版會安靜失效。 */
.flowdiag{
  list-style:none; margin:34px 0 0; padding:0;
  display:grid; gap:0;
}
.fd-step{
  position:relative; padding:0 0 26px 56px;
}
.fd-step:last-child{ padding-bottom:0; }
/* 縱向連接線：從編號圓圈底部連到下一步 */
.fd-step::before{
  content:""; position:absolute; left:19px; top:38px; bottom:0;
  width:2px; background:linear-gradient(var(--line), transparent);
}
.fd-step:last-child::before{ display:none; }
.fd-num{
  position:absolute; left:0; top:0;
  width:38px; height:38px; border-radius:50%;
  display:grid; place-items:center;
  border:1px solid var(--gold-300); color:var(--gold-200);
  font-size:14px; font-variant-numeric:tabular-nums;
  background:var(--navy-800);
}
.fd-ico{
  width:26px; height:26px; margin-bottom:8px;
  fill:none; stroke:var(--gold-300); stroke-width:1.4;
  stroke-linecap:round; stroke-linejoin:round;
}
.fd-step h3{ font-size:17px; color:var(--ink); margin:0 0 6px; }
.fd-step p{ font-size:15px; color:var(--ink-dim); margin:0; }

@media (min-width:860px){
  .flowdiag{ grid-template-columns:repeat(4,1fr); gap:0 26px; }
  .fd-step.fd-step{ padding:52px 0 0; }        /* 重複選擇器提高特異性，蓋掉上面的 padding */
  /* 橫向連接線：改成從圓圈右側連到下一步 */
  .fd-step::before{
    left:38px; right:-26px; top:19px; bottom:auto;
    width:auto; height:2px;
    background:linear-gradient(90deg, var(--line), transparent);
  }
}

/* 五家鑑定公司的優點卡 */
.graders{ display:grid; gap:20px; }
.grader{ padding-top:18px; border-top:1px solid var(--line); }
.grader h4{
  font-size:19px; color:var(--gold-200); margin:0 0 8px;
  display:flex; align-items:baseline; gap:9px; letter-spacing:0.06em;
}
.grader h4 span{
  font-size:12px; color:var(--ink-faint); letter-spacing:0.05em;
  border:1px solid var(--line); border-radius:3px; padding:2px 7px;
}
.grader p{ font-size:15px; line-height:1.85; }
@media (min-width:820px){
  .graders{ grid-template-columns:1fr 1fr; gap:24px 34px; }
}

/* ══════ 互動反饋：分兩級 ══════
   使用者 2026-08-27：「什麼東西都要有反饋，最好是任何操作都要有反饋。」
   但外部規範（pencilandpaper.io、contrast.studio）講得很清楚：
   **hover 的用途是指出「哪些東西可以互動」**。
   所以全部給同一種反饋會說謊——不能點的東西看起來像能點，客人點下去沒反應更糟。

   分兩級：
     一級（可點）  移動 ＋ 金色邊框 ＋ cursor:pointer  ← 說「我可以點」
     二級（資訊卡）底色微亮 ＋ 邊框微亮，不移動、不變 cursor  ← 說「我活著」

   ⚠️ 全部包在 @media (hover: hover) 裡。觸控裝置沒有 hover，
   不包的話手機點過會卡在 hover 狀態不退，看起來像壞掉。 */

@media (hover: hover) and (pointer: fine) {
  /* ── 二級：資訊卡。有反應，但不假裝自己能點 ── */
  .hero-stat, .trust-item, .hero-note, .grader, .fd-step,
  .store, .compare figure, .barcmp-row, .placeholder, .figure {
    transition: background-color 160ms ease, border-color 160ms ease;
  }
  .hero-stat:hover, .trust-item:hover, .hero-note:hover,
  .grader:hover, .fd-step:hover, .store:hover, .placeholder:hover {
    background-color: rgba(255, 255, 255, 0.028);
  }
  .trust-item:hover, .grader:hover { border-top-color: rgba(212, 175, 55, 0.34); }
  .hero-note:hover { border-color: rgba(212, 175, 55, 0.34); }
  .compare figure:hover { border-color: rgba(212, 175, 55, 0.34); }
  .barcmp-row:hover .barcmp-track { background: rgba(255, 255, 255, 0.075); }
  .fd-step:hover .fd-num {
    border-color: var(--gold-200);
    background: rgba(212, 175, 55, 0.1);
  }
  .compare-meta:hover { color: var(--ink-dim); }
}

/* ── 一級補件：這幾個本來就可以點，但沒有 hover ── */
.faq summary { transition: color 160ms ease; }
.faq details summary:hover { color: var(--gold-200); }
.calc-field select, .calc-field input { transition: border-color 160ms ease; }
@media (hover: hover) and (pointer: fine) {
  .calc-field:hover select, .calc-field:hover input { border-color: var(--line); }
}

/* ── 鍵盤使用者：hover 幫不到他們，focus 才行 ── */
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible {
  outline: 2px solid var(--gold-300);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ── 有人在系統設定裡關掉動畫，那是無障礙需求不是偏好 ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ══════ 框的統一處理 ══════
   使用者 2026-08-27：「有的框框它會有亮，而有的框框它沒有亮，這就是讓我看得不是很舒服。
   有框框可能至少都要亮一下吧。」

   稽核出來全站「一塊框」有五種做法：
     邊框三種亮度（--line 0.14 / --line-soft 0.07 / 完全沒有）
     底色五種（漸層 / 金色暈 / 白 0.015 / 白 0.02 / 實底 / 沒有）

   收斂成一條規則：**所有框都有 --line-soft 邊框 ＋ 一層極淡底色。**
   個別元件可以在這之上再加東西（.hero-stat 的金色暈、.card-shot 的實底），
   但**底線一致**——不會再出現「這一塊完全沒有輪廓」的情況。

   ⚠️ 寫在檔案最後，靠後寫的勝出來覆蓋前面的個別宣告。
   同特異性時後寫的贏，這是刻意的，不是意外。 */

.trust-item, .grader, .plan-card {
  border-color: var(--line-soft);
}
.fd-step, .store {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.015);
  padding: 18px 20px;
}
.hero-note {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
}
.trust-item, .grader {
  background: rgba(255, 255, 255, 0.015);
  border-radius: var(--radius);
  padding: 18px 20px 20px;
}

/* .fd-step 的縱向連接線原本從 padding 外緣算，加了框之後要重新對齊 */
.fd-step.fd-step { padding-left: 56px; }
.fd-step .fd-num { left: 12px; top: 14px; }
.fd-step::before { left: 31px; top: 52px; }
@media (min-width: 860px) {
  .fd-step.fd-step { padding: 52px 20px 18px; }
  .fd-step .fd-num { left: 20px; top: 18px; }
  .fd-step::before { left: 58px; right: -26px; top: 37px; }
}

/* ══════ 私人卡片進度頁 ══════
   這些頁面不進全站導覽，只能從各卡的隨機私人連結進入。
   視覺沿用既有近黑、金色、line-soft 與兩級互動標準，不另造一套網站。 */
.status-page {
  min-height: 100vh;
  background:
    radial-gradient(800px 420px at 50% -10%, rgba(212,175,55,0.12), transparent 64%),
    var(--navy-900);
}
.status-head {
  max-width: 760px;
  margin: 0 auto;
  padding: 22px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid var(--line-soft);
}
.status-private-label {
  color: var(--ink-faint);
  font-size: 13px;
  white-space: nowrap;
}
.status-main {
  width: min(100% - 32px, 680px);
  margin: 0 auto;
  padding: 38px 0 64px;
  display: grid;
  gap: 18px;
}
.status-panel {
  padding: clamp(24px, 5vw, 38px);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: rgba(255,255,255,0.018);
}
.status-summary { background: linear-gradient(155deg, rgba(212,175,55,0.055), rgba(255,255,255,0.012)); }
.status-caption { color: var(--ink-faint); font-size: 13px; }
.status-summary h1 {
  margin-top: 3px;
  color: var(--ink);
  font-family: "Helvetica Neue", -apple-system, sans-serif;
  font-size: clamp(38px, 10vw, 64px);
  font-weight: 600;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
.status-current {
  margin-top: 26px;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  border: 1px solid rgba(212,175,55,0.28);
  border-radius: 6px;
  background: rgba(212,175,55,0.055);
}
.status-current--attention {
  border-color: rgba(240,220,154,0.45);
  background: rgba(240,220,154,0.08);
}
.status-current-dot {
  width: 11px;
  height: 11px;
  flex: 0 0 11px;
  border-radius: 50%;
  background: var(--gold-300);
  box-shadow: 0 0 0 6px rgba(212,175,55,0.11);
}
.status-current span { display: block; color: var(--ink-faint); font-size: 12px; }
.status-current strong { display: block; margin-top: 2px; color: var(--gold-200); font-size: 21px; }
.status-message { margin-top: 20px; color: var(--ink-dim); }
.status-meta {
  margin-top: 28px;
  padding-top: 20px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  border-top: 1px solid var(--line-soft);
}
.status-meta dt { color: var(--ink-faint); font-size: 12px; }
.status-meta dd { margin-top: 3px; color: var(--ink); font-size: 14px; }
.status-panel h2 { margin-bottom: 24px; font-size: 26px; }
.status-timeline { list-style: none; display: grid; gap: 0; }
.status-step {
  position: relative;
  min-height: 54px;
  padding: 4px 0 20px 46px;
  color: var(--ink-faint);
}
.status-step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 15px;
  top: 32px;
  bottom: 0;
  width: 1px;
  background: var(--line);
}
.status-step-marker {
  position: absolute;
  left: 0;
  top: 0;
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ink-faint);
  background: var(--navy-800);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.status-step.is-done { color: var(--ink-dim); }
.status-step.is-done .status-step-marker {
  border-color: rgba(212,175,55,0.38);
  color: var(--gold-300);
}
.status-step.is-current { color: var(--ink); font-weight: 600; }
.status-step.is-current .status-step-marker {
  border-color: var(--gold-300);
  color: var(--navy-900);
  background: var(--gold-300);
}
.status-privacy {
  padding: 20px 22px;
  border-left: 2px solid var(--gold-400);
  background: rgba(255,255,255,0.018);
}
.status-privacy strong { color: var(--ink); font-size: 14px; }
.status-privacy p { margin-top: 5px; color: var(--ink-faint); font-size: 13px; }
.status-help { text-align: center; color: var(--ink-faint); font-size: 14px; }
.status-help a { color: var(--gold-300); text-decoration: underline; text-underline-offset: 3px; }
.status-foot {
  padding: 22px 24px 32px;
  border-top: 1px solid var(--line-soft);
  color: var(--ink-faint);
  font-size: 11px;
  text-align: center;
}
@media (max-width: 520px) {
  .status-head .brand-name small { display: none; }
  .status-main { width: min(100% - 24px, 680px); padding-top: 24px; }
  .status-meta { grid-template-columns: 1fr; gap: 12px; }
}
@media (hover: hover) and (pointer: fine) {
  .status-panel, .status-privacy {
    transition: border-color 160ms ease, background-color 160ms ease;
  }
  .status-panel:hover { border-color: var(--line); background-color: rgba(255,255,255,0.025); }
  .status-privacy:hover { border-left-color: var(--gold-200); background-color: rgba(255,255,255,0.025); }
}

/* ══════ 區塊標頭圖示 ══════
   使用者 2026-08-27：「全部都是純文字，好像在讀書一樣，很累⋯缺少了一些圖解、一些 icon。」

   每個區塊給一個線條圖示，跟流程圖那組（.fd-ico）同一套視覺語言：
   1.4px 線寬、無填色、圓端點、金色。**不新造一種風格**——那正是使用者說的
   「不能不知道已經有做法就自己另起爐灶」。

   圖示的作用是給眼睛一個落點，不是裝飾。所以只給區塊標頭，不散在內文裡。 */
.sec-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.sec-ico {
  width: 26px; height: 26px; flex: none;
  fill: none; stroke: var(--gold-300); stroke-width: 1.4;
  stroke-linecap: round; stroke-linejoin: round;
  opacity: 0.9;
}
@media (max-width: 600px) { .sec-ico { width: 22px; height: 22px; } }

/* ══════ 對照表 ══════
   使用者 2026-08-27：「全部都是純文字，好像在讀書一樣，很累。」

   本質上在做「比較」的內容（三個修復方案、五家鑑定公司），
   用三段文字寫要讀完才比得出來；排成對照表一眼就看到差在哪。

   手機不用橫捲——橫捲的表格在手機上永遠難讀。改成每列自己變成一張卡，
   欄名用 ::before 帶出來。 */
.cmp-table { margin-top: 30px; display: grid; gap: 10px; }
.cmp-head {
  display: none;             /* 手機不顯示表頭，欄名靠每格的 ::before */
  font-size: 12px; color: var(--ink-faint); letter-spacing: 0.06em;
  padding: 0 16px 8px;
}
.cmp-row {
  display: grid; gap: 8px;
  padding: 16px 18px;
  border: 1px solid var(--line-soft); border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.015);
  font-size: 15px; color: var(--ink-dim);
}
.cmp-row > span[role="cell"]:not(.cmp-name)::before {
  content: attr(data-label);
  display: block; font-size: 11.5px; color: var(--ink-faint);
  letter-spacing: 0.06em; margin-bottom: 2px;
}
.cmp-name { font-size: 17px; color: var(--gold-200); letter-spacing: 0.06em; }
.cmp-price { font-size: 22px; color: var(--gold-300); font-variant-numeric: tabular-nums; }
.cmp-price small { display: block; font-size: 12px; color: var(--ink-faint); margin-top: 2px; }
.cmp-yes, .cmp-no { font-size: 14px; }
.cmp-yes { color: var(--gold-200); }
.cmp-no  { color: var(--ink-faint); }
/* 工期長條：長度＝工期，一眼看出快慢 */
.cmp-bar { position: relative; }
.cmp-bar i {
  display: block; height: 6px; border-radius: 3px; margin: 4px 0 5px;
  background: linear-gradient(90deg, rgba(212,175,55,0.35), var(--gold-400));
}
.cmp-bar b { font-size: 13px; font-weight: 500; color: var(--ink-dim); }

@media (min-width: 900px) {
  .cmp-head, .cmp-row {
    grid-template-columns: 1.1fr 1.8fr 1.3fr 1fr 1.1fr;
    gap: 20px; align-items: center;
  }
  .cmp-head { display: grid; }
  .cmp-row > span[role="cell"]::before { display: none; }
}
@media (hover: hover) and (pointer: fine) {
  .cmp-row { transition: background-color 160ms ease, border-color 160ms ease; }
  .cmp-row:hover {
    background-color: rgba(255, 255, 255, 0.032);
    border-color: rgba(212, 175, 55, 0.34);
  }
}