/* ==========================================================================
   美股 · ETF · 黃金 知識站 — 共享樣式
   ========================================================================== */
:root {
  color-scheme: light dark;
  /* 紙面刻意走中性偏冷，不用暖奶油底：暖紙＋黃銅是內容站最泛濫的一套皮，
     這站靠字體與留白建立質感，不靠底色。 */
  --ink: #15171c;
  --ink-soft: #454a55;
  /* 對 --bg-alt（#ecedf0）約 4.7:1，達 WCAG AA。 */
  --ink-faint: #636974;
  --line: rgba(21, 23, 28, 0.11);
  --line-strong: rgba(21, 23, 28, 0.20);
  --bg: #f7f8f9;
  --bg-alt: #ecedf0;
  --card: #ffffff;
  /* 金色降級：只在「黃金」這個主題與 wordmark 上出現，不再是全站簽名色。
     --gold 是裝飾色，對淺底約 3:1，不承載小字；小字一律用 --gold-text。 */
  --gold: #a8781f;
  --gold-text: #7d5a12;
  --gold-soft: rgba(168, 120, 31, 0.11);
  /* 唯一的品牌 accent：墨藍偏青。避開 navy＋金的理專反射，
     也避開市場語意（台股紅漲綠跌），對 --bg 約 8.4:1。 */
  --accent: #1c4f61;
  --accent-soft: rgba(28, 79, 97, 0.09);
  --danger: #b0342a;
  --danger-soft: rgba(176, 52, 42, 0.09);
  --ok: #1d6b46;
  --ok-soft: rgba(29, 107, 70, 0.09);
  --radius: 14px;
  --maxw: 1080px;
  /* 標題用中文襯線（明體/宋體族）：中文出版物的標題慣例，
     同時避開全站 system-ui 那種一眼可辨的模板感。全部走系統字，不下載字檔。 */
  --font-display: "Noto Serif TC", "Source Han Serif TC", "Songti TC", "Songti SC",
                  "PMingLiU", "MingLiU", Georgia, "Times New Roman", serif;
  /* 內文用中文黑體：小字級的螢幕可讀性優於襯線。
     注意用 TC 而非 SC 字族——本站是繁體，用簡體字族會出現異體字。 */
  --font-body: "PingFang TC", "Noto Sans TC", "Source Han Sans TC",
               "Microsoft JhengHei", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ink: #eceef2;
    --ink-soft: #a4abb8;
    --ink-faint: #89909d;
    --line: rgba(255, 255, 255, 0.12);
    --line-strong: rgba(255, 255, 255, 0.22);
    /* 深色同樣走中性偏冷的石墨，不是藍調暗色。無純黑。 */
    --bg: #121317;
    --bg-alt: #191b20;
    --card: #1c1e24;
    --gold: #d3ae63;
    /* 深色主題下 --gold 對背景已達約 8.8–9.5:1，文字色不需另外加深。 */
    --gold-text: #d3ae63;
    --gold-soft: rgba(211, 174, 99, 0.13);
    /* 墨藍在暗底要提亮才夠對比，色相維持一致。對 --bg 約 7.6:1。 */
    --accent: #7fbdd2;
    --accent-soft: rgba(127, 189, 210, 0.13);
    --danger: #df7568;
    --danger-soft: rgba(223, 117, 104, 0.13);
    --ok: #58bf8c;
    --ok-soft: rgba(88, 191, 140, 0.13);
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* 標題走中文襯線，內文走黑體：對比軸配對（襯線 display + 人文黑體 body），
   而不是靠字級大小尖叫。這是全站視覺個性的主要來源。 */
h1, h2, h3, h4,
.brand,
.stat .value,
.article-head h1,
.hero h1 {
  font-family: var(--font-display);
  font-weight: 600;
}
/* 數字一律等寬對齊，表格與試算結果不會跳動 */
table.data, .stat .value, .promo-code, time { font-variant-numeric: tabular-nums; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 1.5rem; }
.narrow { max-width: 760px; }
a { color: var(--accent); text-underline-offset: 2px; }
img { max-width: 100%; height: auto; }

/* --- 頂部導航（下拉式，可直達每個頁面） --- */
.topbar { border-bottom: 1px solid var(--line-strong); position: sticky; top: 0; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(8px); z-index: 50; }
.topbar .wrap { display: flex; align-items: stretch; justify-content: space-between; gap: 1rem; min-height: 60px; }
.brand { display: flex; align-items: center; font-weight: 700; letter-spacing: -0.01em; font-size: 1.02rem; text-decoration: none; color: var(--ink); white-space: nowrap; }
.brand span { color: var(--gold-text); }

.nav { display: flex; flex: 1 1 auto; }
.nav .menu { list-style: none; margin: 0; padding: 0; display: flex; align-items: stretch; flex: 1 1 auto; }
.nav .menu > li { position: relative; display: flex; align-items: stretch; }
.nav .menu > li + li { border-left: 1px solid var(--line); }
.nav .top { display: inline-flex; align-items: center; font: inherit; font-size: 0.92rem; color: var(--ink-soft); background: none; border: 0; cursor: pointer; padding: 0 1rem; text-decoration: none; white-space: nowrap; }
.nav .has-sub > .top::after { content: "＋"; font-size: 0.85em; margin-left: 0.4em; opacity: 0.7; transition: transform .18s; }
.nav .menu > li:hover > .top, .nav .top:hover, .nav .top:focus-visible { color: var(--ink); background: var(--bg-alt); }
.nav .menu > li.active > .top, .nav .top[aria-current="page"] { color: var(--bg); background: var(--ink); }
.nav .has-sub:hover > .top::after, .nav .has-sub.open > .top::after, .nav .has-sub:focus-within > .top::after { transform: rotate(45deg); }

.nav .sub { list-style: none; margin: 0; padding: 0.4rem; position: absolute; top: 100%; left: 0; min-width: 220px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 14px 34px rgba(0,0,0,0.14); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .15s, transform .15s, visibility .15s; z-index: 60; }
.nav .has-sub:hover > .sub, .nav .has-sub:focus-within > .sub, .nav .has-sub.open > .sub { opacity: 1; visibility: visible; transform: translateY(0); }
.topbar.nav-ready .nav .has-sub:not(.open) > .sub { opacity: 0; visibility: hidden; transform: translateY(6px); }
.topbar.nav-ready .nav .has-sub:not(.open) > .top::after { transform: none; }
.nav .sub li + li { margin-top: 1px; }
.nav .sub a { display: block; padding: 0.55rem 0.7rem; font-size: 0.9rem; color: var(--ink-soft); text-decoration: none; border-radius: 7px; white-space: nowrap; }
.nav .sub a:hover, .nav .sub a:focus-visible { background: var(--accent-soft); color: var(--ink); }
.nav .sub a[aria-current="page"] { background: var(--gold-soft); color: var(--ink); font-weight: 600; }
.nav .sub .tag { font-size: 0.72rem; color: var(--gold-text); margin-left: 0.4rem; }

/* 語言切換：膠囊按鈕 + 下拉，沿用 .has-sub 的展開行為 */
.nav .menu > li.lang-item { margin-left: 0.4rem; border-left: 0; align-items: center; }
.nav .lang { border: 1px solid var(--line-strong); border-radius: 999px; padding: 0.32rem 0.85rem; color: var(--ink); }
.nav .lang:hover, .nav .lang:focus-visible,
.lang-item:hover > .lang, .lang-item.open > .lang { border-color: var(--gold); color: var(--gold-text); background: var(--gold-soft); }
.nav .lang::after { font-size: 0.7em; opacity: 0.55; }
/* 選單靠右對齊，避免最右側的下拉超出視窗 */
.nav .sub.lang-sub { left: auto; right: 0; min-width: 168px; }
.nav .sub.lang-sub a { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; }
/* 目前語言：打勾而不是只靠底色，色弱使用者也分得出 */
.nav .sub.lang-sub a[aria-current="page"]::after { content: "✓"; color: var(--gold-text); font-weight: 700; }
/* Longer Amharic labels need less horizontal padding above the mobile breakpoint. */
@media (min-width: 761px) and (max-width: 900px) {
  html:lang(am) .nav .top { padding-inline: 0.75rem; }
}
@media (max-width: 760px) {
  .nav .menu > li.lang-item { margin-left: 0; align-items: stretch; }
  .nav .lang { border: 0; border-radius: 0; padding: 0.85rem 0.4rem; background: none; }
  .nav .sub.lang-sub { right: auto; min-width: 0; }
}

/* 觸控目標不小於 44×44（WCAG 2.5.8 / 行動端常用基線）。 */
.nav-toggle { display: none; align-items: center; justify-content: center; flex-direction: column; gap: 4px; width: 44px; margin: auto 0; height: 44px; border: 1px solid var(--line-strong); border-radius: 8px; background: transparent; cursor: pointer; }
.nav-toggle span { width: 18px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .2s, opacity .2s; }
.topbar.open .nav-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.topbar.open .nav-toggle span:nth-child(2) { opacity: 0; }
.topbar.open .nav-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 760px) {
  .nav-toggle { display: inline-flex; }
  .nav { position: fixed; inset: 62px 0 auto 0; background: var(--bg); border-bottom: 1px solid var(--line); max-height: calc(100vh - 62px); overflow-y: auto; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .15s, transform .15s, visibility .15s; display: block; }
  .topbar.open .nav { opacity: 1; visibility: visible; transform: translateY(0); }
  .nav .menu { flex-direction: column; align-items: stretch; padding: 0.5rem 1.2rem 1.4rem; }
  .nav .menu > li { flex-direction: column; align-items: stretch; }
  .nav .menu > li + li { border-left: 0; border-top: 1px solid var(--line); }
  .nav .top { padding: 0.85rem 0.4rem; font-size: 1rem; }
  .nav .menu > li.active > .top, .nav .top[aria-current="page"] { background: none; color: var(--gold-text); }
  .nav .has-sub > .top { justify-content: space-between; }
  .nav .sub { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; background: transparent; padding: 0 0 0.5rem 0.8rem; min-width: 0; border-radius: 0; }
  .topbar.nav-ready .nav .has-sub:not(.open) > .sub { display: none; }
}

/* --- Hero --- */
.hero { padding: 4rem 0 3rem; border-bottom: 1px solid var(--line); }
/* 兩欄：左邊是本站主張，右邊是商業披露。右欄刻意窄一截，
   讓推廣區塊在視覺重量上低於標題，而不是壓過它。 */
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(290px, 350px);
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: start;
}
.hero-copy > :last-child { margin-bottom: 0; }
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 2.4rem; }
}
.eyebrow { display: inline-block; font-size: 0.78rem; letter-spacing: 0.08em; color: var(--gold-text); background: var(--gold-soft); padding: 0.3rem 0.7rem; border-radius: 999px; margin-bottom: 1.1rem; }
.hero h1 { font-size: clamp(1.9rem, 4.5vw, 2.8rem); line-height: 1.2; letter-spacing: -0.02em; margin: 0 0 1rem; max-width: 22ch; text-wrap: balance; }
.hero p.lead { font-size: 1.08rem; color: var(--ink-soft); max-width: 56ch; margin: 0 0 2rem; text-wrap: pretty; }
@media (max-width: 760px) {
  .hero { padding-top: 2rem; }
  .hero-grid { gap: 1.5rem; }
  .hero p.lead { margin-bottom: 1.25rem; }
}

/* --- 按鈕 --- */
.cta { display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: center; }
.btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.7rem 1.25rem; border-radius: 10px; font-weight: 600; text-decoration: none; font-size: 0.96rem; border: 1px solid transparent; cursor: pointer; }
.btn-primary { background: var(--ink); color: var(--bg); }
.btn-primary:hover { opacity: 0.9; }
.btn-ghost { border-color: var(--line-strong); color: var(--ink); background: transparent; }
.btn-ghost:hover { border-color: var(--ink-soft); }
.pending { font-size: 0.78rem; color: var(--ink-soft); }
.badge-todo { font-size: 0.7rem; color: var(--gold-text); border: 1px dashed var(--gold); padding: 0.05rem 0.4rem; border-radius: 5px; margin-left: 0.35rem; vertical-align: middle; white-space: nowrap; }

/* --- 區塊 --- */
section.block { padding: 3.2rem 0; }
section.block.alt { background: var(--bg-alt); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section-head { margin-bottom: 1.8rem; }
.section-head h2 { font-size: 1.5rem; letter-spacing: -0.01em; margin: 0 0 0.4rem; }
.section-head p { color: var(--ink-soft); margin: 0; }

/* --- 卡片網格 --- */
.grid { display: grid; gap: 1.1rem; }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 820px) { .grid.cols-3, .grid.cols-2 { grid-template-columns: 1fr; } }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; display: block; text-decoration: none; color: inherit; transition: border-color .15s, transform .15s; }
a.card:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.card .num { font-size: 0.78rem; color: var(--ink-faint); font-weight: 600; letter-spacing: 0.04em; }
.card h3 { font-size: 1.15rem; margin: 0.5rem 0 0.5rem; color: var(--ink); }
.card p { color: var(--ink-soft); margin: 0 0 0.8rem; font-size: 0.94rem; }
.card ul { margin: 0; padding-left: 1.1rem; color: var(--ink-soft); font-size: 0.9rem; }
.card li { margin-bottom: 0.3rem; }
.card .more { font-size: 0.88rem; color: var(--accent); font-weight: 600; }

/* --- 文章列表行 --- */
.list { list-style: none; margin: 0; padding: 0; }
.list li { border-bottom: 1px solid var(--line); }
.list a { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; padding: 0.9rem 0; text-decoration: none; color: var(--ink); }
.list a:hover { color: var(--accent); }
.list .tag { font-size: 0.76rem; color: var(--ink-faint); white-space: nowrap; }

/* --- 麵包屑 --- */
.crumbs { font-size: 0.84rem; color: var(--ink-faint); padding: 1.2rem 0 0; }
.crumbs a { color: var(--ink-soft); text-decoration: none; }
.crumbs a:hover { color: var(--accent); }
.crumbs span { margin: 0 0.4rem; }

/* --- 文章正文 --- */
.article-head { padding: 1.4rem 0 1.6rem; border-bottom: 1px solid var(--line); margin-bottom: 2rem; }
.article-head .kicker { font-size: 0.8rem; letter-spacing: 0.04em; color: var(--accent); font-weight: 600; font-family: var(--font-display); }
.article-head h1 { font-size: clamp(1.7rem, 3.6vw, 2.4rem); line-height: 1.25; letter-spacing: -0.01em; margin: 0.5rem 0 0.7rem; }
.article-head .meta { font-size: 0.85rem; color: var(--ink-faint); }
.prose { font-size: 1.03rem; }
.prose h2 { font-size: 1.4rem; letter-spacing: -0.01em; margin: 2.4rem 0 0.9rem; padding-top: 0.4rem; scroll-margin-top: 76px; }
.prose h3 { font-size: 1.12rem; margin: 1.8rem 0 0.6rem; scroll-margin-top: 76px; }
.prose p { margin: 0 0 1.1rem; }
/* 查證年月／適用範圍這類小字附註：比正文低一階，但不是灰到看不見（對 --bg 約 4.6:1，符合 AA）。 */
.prose p.note {
  font-size: 0.9rem;
  color: var(--ink-faint);
  margin: -0.3rem 0 1.4rem;
  padding: 0.7rem 0.95rem;
  background: var(--bg-alt);
  border-radius: 8px;
}
.prose ul, .prose ol { margin: 0 0 1.2rem; padding-left: 1.4rem; }
.prose li { margin-bottom: 0.45rem; }
.prose strong { font-weight: 700; }
.prose a { font-weight: 500; }
.prose blockquote { margin: 1.8rem 0; padding: 0 0 0 1.6rem; font-family: var(--font-display); font-size: 1.1rem; line-height: 1.75; color: var(--ink-soft); text-indent: -0.55rem; }
.prose code { padding: 0.1em 0.35em; border-radius: 4px; background: rgba(127,127,127,0.16); font-size: 0.9em; }
.prose hr { border: none; border-top: 1px solid var(--line); margin: 2.2rem 0; }
.prose figure { margin: 1.8rem 0; }
.prose figure img { width: 100%; height: auto; display: block; border: 1px solid var(--line-strong); border-radius: 10px; }
.prose figcaption { font-size: 0.82rem; color: var(--ink-faint); margin-top: 0.55rem; padding-left: 0.1rem; }

/* 工具页折叠 SEO 指南 */
.guide { border: 1px solid var(--line); border-radius: 12px; padding: 0 1.3rem; margin: 1.6rem 0; background: var(--card); }
.guide > summary { cursor: pointer; font-weight: 600; padding: 0.95rem 0; color: var(--ink); list-style: none; }
.guide > summary::-webkit-details-marker { display: none; }
.guide > summary::after { content: "＋"; float: right; color: var(--gold-text); font-weight: 700; }
.guide[open] > summary::after { content: "－"; }
.guide[open] > summary { border-bottom: 1px solid var(--line); }
.guide .prose { padding: 0.4rem 0 1rem; font-size: 0.98rem; }
.guide h3 { font-size: 1.02rem; margin: 1.1rem 0 0.4rem; }
.guide p { margin: 0 0 0.7rem; color: var(--ink-soft); }

/* --- 資料表 --- */
.table-wrap { overflow-x: auto; margin: 0 0 1.4rem; }
table.data { width: 100%; border-collapse: collapse; font-size: 0.94rem; }
table.data th, table.data td { text-align: left; padding: 0.65rem 0.8rem; border-bottom: 1px solid var(--line); vertical-align: top; }
table.data thead th { background: var(--bg-alt); font-weight: 600; border-bottom: 1px solid var(--line-strong); }
table.data tbody tr:hover { background: var(--accent-soft); }

/* 窄螢幕：三欄以上的表若硬塞進 390px，每格會被擠成一行一兩個字。
   給它一個最小寬度讓 .table-wrap 真的捲起來，並提示可以橫向滑動。
   提示文字跟著 <html lang> 走，三個語種各一份。 */
:root { --table-scroll-hint: "← 表格可左右滑動 →"; }
html:lang(am) { --table-scroll-hint: "← ሰንጠረዡን ወደ ጎን ማንሸራተት ይቻላል →"; }
html:lang(gu) { --table-scroll-hint: "← કોષ્ટક ડાબે-જમણે સ્ક્રોલ કરો →"; }

@media (max-width: 700px) {
  .table-wrap table.data:has(th:nth-child(3)) { min-width: 540px; }
  .table-wrap table.data:has(th:nth-child(5)) { min-width: 660px; }
  .table-wrap:has(table.data th:nth-child(3))::after {
    content: var(--table-scroll-hint);
    position: sticky; left: 0;
    display: block; width: max-content;
    font-size: 0.78rem; color: var(--ink-faint);
    padding-top: 0.5rem;
  }

  /* 不認得 :has() 的瀏覽器（Firefox 121 以前、Safari 15.4 以前）會把上面三條整組丟掉，
     表格又擠回一行一兩個字。這裡改用不依賴 :has() 的寫法兜底：每格給一個最小寬度，
     欄數多的表自然撐寬、.table-wrap 就捲得起來；兩欄表 2×8em 仍塞得進窄螢幕，
     不會平白多出橫向捲軸。滑動提示做不到只給寬表看，這裡就不放，寧可少提示也不誤導。 */
  @supports not selector(:has(*)) {
    .table-wrap table.data th,
    .table-wrap table.data td { min-width: 8em; }
  }
}

/* --- 目錄 TOC --- */
.toc { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.3rem; margin: 0 0 2rem; }
.toc strong { font-size: 0.9rem; display: block; margin-bottom: 0.5rem; color: var(--ink-soft); }
.toc ol { margin: 0; padding-left: 1.2rem; font-size: 0.92rem; }
.toc li { margin-bottom: 0.3rem; }
.toc a { text-decoration: none; color: var(--ink-soft); }
.toc a:hover { color: var(--accent); }

/* --- 提示框 --- */
/* 提示框：整圈細邊 + 淡染底，不用彩色左豎條（那是最容易一眼看出的模板長相）。
   類型靠底色與標題色區分，不靠色條。 */
.callout {
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  background: var(--accent-soft);
  border-radius: 10px;
  padding: 1rem 1.15rem;
  margin: 1.5rem 0;
  font-size: 0.96rem;
}
.callout.tip { border-color: color-mix(in srgb, var(--ok) 28%, transparent); background: var(--ok-soft); }
.callout.warn { border-color: color-mix(in srgb, var(--danger) 30%, transparent); background: var(--danger-soft); }
.callout strong { display: block; margin-bottom: 0.3rem; font-family: var(--font-display); color: var(--accent); }
.callout.tip strong { color: var(--ok); }
.callout.warn strong { color: var(--danger); }

/* --- 署名與日期 --- */
.article-head .byline { display: flex; flex-wrap: wrap; gap: 0.2rem 0.9rem; margin-top: 0.55rem; font-size: 0.82rem; color: var(--ink-faint); }
.article-head .byline b { color: var(--ink-soft); font-weight: 600; }

/* --- 資料來源 --- */
.sources { margin: 2.6rem 0 0; padding-top: 1.6rem; border-top: 1px solid var(--line); }
.sources h2 { font-size: 1.15rem; margin: 0 0 0.5rem; }
.sources p { font-size: 0.88rem; color: var(--ink-faint); margin: 0 0 0.8rem; }
.sources ol { margin: 0; padding-left: 1.3rem; font-size: 0.9rem; color: var(--ink-soft); }
.sources li { margin-bottom: 0.4rem; }

/* --- 相關閱讀 --- */
.related { margin: 2.6rem 0 0; padding-top: 1.6rem; border-top: 1px solid var(--line); }
.related h2 { font-size: 1.15rem; margin: 0 0 0.9rem; }

/* --- 工具頁 UI --- */
.tool { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.6rem; margin: 0 0 1.6rem; }
.tool .fields { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem 1.2rem; }
@media (max-width: 560px) { .tool .fields { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: 0.35rem; }
.field label { font-size: 0.88rem; color: var(--ink-soft); font-weight: 600; }
.field .hint { font-size: 0.8125rem; color: var(--ink-soft); font-weight: 400; }
.field input, .field select { font: inherit; padding: 0.55rem 0.7rem; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--bg); color: var(--ink); }
.field input:focus, .field select:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.tool .result { margin-top: 1.4rem; padding-top: 1.3rem; border-top: 1px solid var(--line); }
.result-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
@media (max-width: 560px) { .result-grid { grid-template-columns: 1fr; } }
.stat { background: var(--bg-alt); border: 1px solid var(--line); border-radius: 10px; padding: 0.9rem 1rem; }
.stat .label { font-size: 0.8rem; color: var(--ink-faint); }
.stat .value { font-size: 1.4rem; font-weight: 700; letter-spacing: -0.01em; margin-top: 0.15rem; }
.stat .value.gold { color: var(--gold-text); }
.tool-note { font-size: 0.84rem; color: var(--ink-faint); margin-top: 1rem; }

/* --- 頁尾 --- */
footer.site { border-top: 1px solid var(--line); padding: 2.5rem 0; font-size: 0.85rem; color: var(--ink-soft); margin-top: 3rem; }
footer.site .risk { border: 1px solid var(--line); border-radius: 10px; padding: 0.9rem 1.1rem; margin-bottom: 1.4rem; background: var(--card); }
footer.site .cols { display: flex; flex-wrap: wrap; gap: 1.6rem 2.4rem; margin-bottom: 1.4rem; }
footer.site .cols h4 { font-size: 0.82rem; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 0.6rem; font-weight: 600; }
footer.site .cols a { display: block; color: var(--ink-soft); text-decoration: none; margin-bottom: 0.35rem; font-size: 0.88rem; }
footer.site .cols a:hover { color: var(--accent); }
footer.site .meta { display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; padding-top: 1rem; border-top: 1px solid var(--line); font-size: 0.82rem; }
footer.site .meta b { color: var(--ink); font-weight: 600; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

/* ===================================================================
   视觉升级 v2 · 叠加层（不改任何 HTML；全站统一；随时可整段回退）
   目标：从「稳重」升到「更有记忆点、更精致」——金色为签名色
   =================================================================== */

/* Hero：不放光暈、不放漸層。用一道細分隔線與大留白撐版面，
   讓襯線標題自己說話——這是編輯感的來源，加裝飾反而掉價。 */
.hero { background: var(--bg); }
.hero h1 {
  font-size: clamp(2rem, 4.8vw, 3.05rem);
  letter-spacing: -0.015em;
  line-height: 1.28;
}
.hero .lead { max-width: 58ch; }
/* eyebrow 去掉彩色圓點，改成低調的字級與字距 */
.eyebrow {
  background: none;
  color: var(--ink-faint);
  padding: 0;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 0.3rem;
  border-radius: 0;
}

/* 卡片：只用邊框與淡染色陰影表達層級，不加頂部漸層條 */
a.card:hover {
  border-color: var(--ink-faint);
  box-shadow: 0 10px 26px rgba(21, 23, 28, 0.07);
}
a.card:active { transform: translateY(0); box-shadow: none; }

/* 區塊標題：靠字體與字級分層，不畫裝飾短線 */
.section-head h2 { font-size: 1.62rem; letter-spacing: -0.01em; }

/* 文章 h2：上方一道通欄細線 + 襯線字，取代彩色左豎條 */
.prose h2 {
  border-top: 1px solid var(--line-strong);
  padding-top: 1.5rem;
  margin-top: 3rem;
  font-size: 1.46rem;
}
.prose h2:first-child { border-top: 0; padding-top: 0; margin-top: 0; }

/* 主按鈕：淡染色陰影（不用純黑），按下時有物理回饋 */
.btn-primary { box-shadow: 0 5px 16px rgba(21, 23, 28, 0.14); }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 9px 22px rgba(21, 23, 28, 0.19); }
.btn-primary:active, .btn-ghost:active { transform: translateY(1px); box-shadow: none; }

/* 工具结果主数字更醒目 */
.stat .value { font-size: 1.55rem; }

/* 正文標題內的狀態標籤（例如「已被 XXXX 條目取代」），不要跟著標題放大 */
.prose h2 .tag, .prose h3 .tag {
  display: inline-block;
  margin-left: 0.5rem;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0;
  color: var(--danger);
  background: var(--danger-soft);
  border-radius: 999px;
  padding: 0.1rem 0.6rem;
  vertical-align: middle;
}

/* ==========================================================================
   指南總覽頁：全站文章與工具清單
   分區用「標題 + 導語 + 條目」而不是卡片格，條目數增加時不改版面。
   ========================================================================== */
.guide-sec { margin: 2.6rem 0 0; }
.guide-sec h2 { margin: 0 0 0.5rem; font-size: 1.34rem; padding-top: 1.1rem; border-top: 1px solid var(--line-strong); }
.guide-blurb { margin: 0 0 1.1rem; color: var(--ink-soft); font-size: 0.95rem; max-width: 62ch; text-wrap: pretty; }
.guide-list { list-style: none; margin: 0; padding: 0; }
.guide-list li { padding: 0.9rem 0; border-top: 1px solid var(--line); }
.guide-list li:last-child { border-bottom: 1px solid var(--line); }
.guide-list > li > a { font-weight: 600; font-size: 1.02rem; text-decoration: none; }
.guide-list > li > a:hover { text-decoration: underline; }
.guide-list .tag { margin-left: 0.5rem; font-size: 0.72rem; font-weight: 600; color: var(--gold-text); background: var(--gold-soft); border-radius: 999px; padding: 0.1rem 0.55rem; white-space: nowrap; }
.guide-desc { display: block; margin-top: 0.3rem; color: var(--ink-soft); font-size: 0.88rem; line-height: 1.65; max-width: 68ch; text-wrap: pretty; }
/* 分區標題在總覽頁上是連結，去掉底線讓它仍讀作標題 */
.guide-sec h2 > a { color: inherit; text-decoration: none; }
.guide-sec h2 > a:hover { color: var(--gold-text); }
.guide-back { margin: 2.4rem 0 0; padding-top: 1.2rem; border-top: 1px solid var(--line); font-size: 0.9rem; color: var(--ink-soft); }

/* 首頁分區精選：只放前兩篇 + 「看全部」，新增文章不影響首頁版面 */
.pick h3 { font-size: 1.12rem; margin: 0 0 0.5rem; color: var(--ink); }
.pick + .pick { margin-top: 0; }
.pick-more { display: inline-block; margin-top: 0.7rem; font-size: 0.88rem; text-decoration: none; }
.pick-more:hover { text-decoration: underline; }

/* ==========================================================================
   首頁邀請碼區塊（推廣披露 + 可複製邀請碼）
   只出現在兩個語言的首頁；不含任何外部跳轉連結。
   ========================================================================== */
.promo {
  margin: 2.2rem 0 0;
  padding: 1.3rem 1.4rem 1.4rem;
  /* 比頁面底色略深一階：讀起來是「附註」，不是搶戲的白卡片 */
  background: var(--bg-alt);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
}
.hero .promo { margin: 0; }
.promo h2 {
  margin: 0 0 0.9rem;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  font-weight: 700;
  color: var(--gold-text);
  padding-left: 0;
  border-left: 0;
}
.promo-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem; }
.promo-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--ink);
  background: var(--gold-soft);
  border: 1px dashed var(--gold);
  border-radius: 8px;
  padding: 0.4rem 0.9rem;
  user-select: all;
}
/* 複製按鈕高度對齊觸控基線 */
.promo-copy { min-height: 44px; padding: 0.5rem 1.1rem; font-size: 0.92rem; }
.promo-status { font-size: 0.86rem; color: var(--ok); font-weight: 600; min-height: 1.4em; }
.promo-note { font-size: 0.86rem; line-height: 1.7; color: var(--ink-soft); margin: 0.9rem 0 0; text-wrap: pretty; }
/* 披露連結收在卡片底部，與正文之間拉開，形成「正文／出處」兩段節奏 */
.promo-links {
  display: flex; flex-wrap: wrap; gap: 0.3rem 0.9rem;
  margin: 1.1rem 0 0; padding-top: 0.9rem;
  border-top: 1px solid var(--line);
  font-size: 0.84rem;
}

/* ==========================================================================
   降低動效偏好：關閉非必要過渡、變形與平滑滾動。
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  /* 這幾處是純裝飾的位移，直接取消而不是加速 */
  a.card:hover { transform: none; }
  .btn-primary:hover { transform: none; }
}