/* 台股體檢 —— 設計系統 v2
 *
 * 依《Apple 風網頁設計與排版規範》重建。v1 的問題不是不好看,是**沒有系統**:
 *   字級用了 20 幾個憑感覺調的值(0.71 / 0.73 / 0.79 / 0.82 / 0.84…)
 *   間距用了 2/3/5/6/7/9/11/13/22/26/34/52px —— 幾乎沒一個在 8pt 刻度上
 *   把「證據數字」塗紅 —— 規範明說證據數字若不是轉化點就該用黑白
 *
 * 這一版的三條紀律:
 *   1. 單一基準(正文 16px)× Major Third 1.25 推導全部字級。Hero 單獨放大到 3.5×。
 *   2. 所有 margin/padding 取自 8pt 階(必要時 4pt 半階)。內距 ≤ 外距。
 *   3. 大面積黑白。顏色只上在**可行動或需注意**之處:連結、按鈕、漲跌、大盤狀態。
 *      實證數字(-4.47pp 這種)一律墨色 —— 它是證據,不是轉化點。
 *
 * CJK 調整(規範 Part 1.7):正文行高 1.7(拉丁用 1.55),方塊字更需要呼吸。
 */

:root{
  /* ── 字體 ── */
  --font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang TC","PingFang SC",
              "Noto Sans TC","Microsoft JhengHei",Helvetica,Arial,sans-serif;
  --font-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;

  /* ── 字級:基準 16px × 1.25。Hero 單獨放大 ── */
  --fs-caption: 0.8125rem;  /* 13px */
  --fs-body:    1rem;       /* 16px  ← 唯一基準 */
  --fs-lead:    1.25rem;    /* 20px */
  --fs-h3:      1.5625rem;  /* 25px */
  --fs-h2:      1.9375rem;  /* 31px */
  --fs-h1:      2.4375rem;  /* 39px */
  --fs-display: 3.5rem;     /* 56px  ≈ 正文 3.5× */

  /* ── 字重:不用 Light 以下 ── */
  --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700;

  /* ── 行高:大標緊、正文鬆。CJK 再放鬆一階 ── */
  --lh-display:1.12; --lh-heading:1.3; --lh-body:1.7;

  /* ── 間距:8pt 網格,4pt 半階 ── */
  --space-1:4px;  --space-2:8px;  --space-3:16px; --space-4:24px; --space-5:32px;
  --space-6:48px; --space-7:64px; --space-8:80px; --space-9:96px;

  /* ── 色彩:黑白為主,單一強調色 ── */
  --ink:#1d1d1f;        /* 主文字(近黑,非純黑) */
  --subtle:#6e6e73;     /* 次要 */
  --faint:#a1a1a6;      /* 標籤 */
  --line:#d2d2d7;       /* 分隔線 */
  --bg:#fff;
  --bg-2:#f5f5f7;       /* 區塊底(Apple 的灰) */
  --accent:#0071e3;     /* 只用於連結/按鈕 */
  --up:#a3383a;         /* 漲(台股紅)—— 只用於漲跌與狀態 */
  --down:#00695c;       /* 跌(台股綠) */
  --alert:#b7791f;      /* 需注意 —— 只用於狀態,不用於證據數字 */

  --content-max:980px;
  --line-length:70ch;
}
@media (prefers-color-scheme:dark){
  :root{ --ink:#f5f5f7; --subtle:#98989d; --faint:#6e6e73; --line:#38383c;
         --bg:#000; --bg-2:#1c1c1e; --accent:#2997ff;
         --up:#e08585; --down:#5cbfa8; --alert:#e0a951; }
}
:root[data-theme="dark"]{ --ink:#f5f5f7; --subtle:#98989d; --faint:#6e6e73; --line:#38383c;
  --bg:#000; --bg-2:#1c1c1e; --accent:#2997ff; --up:#e08585; --down:#5cbfa8; --alert:#e0a951; }
:root[data-theme="light"]{ --ink:#1d1d1f; --subtle:#6e6e73; --faint:#a1a1a6; --line:#d2d2d7;
  --bg:#fff; --bg-2:#f5f5f7; --accent:#0071e3; --up:#a3383a; --down:#00695c; --alert:#b7791f; }

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--font-sans);font-size:var(--fs-body);line-height:var(--lh-body);
  font-weight:var(--fw-regular);-webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--content-max);margin:0 auto;padding:0 var(--space-4) var(--space-9)}

/* ── 字級階梯 ── */
h1{font-size:var(--fs-h1);font-weight:var(--fw-bold);line-height:var(--lh-heading);
   letter-spacing:-.02em;margin:0 0 var(--space-3);text-wrap:balance}
h2{font-size:var(--fs-h3);font-weight:var(--fw-semibold);line-height:var(--lh-heading);
   letter-spacing:-.01em;margin:var(--space-7) 0 var(--space-3);text-wrap:balance}
h3{font-size:var(--fs-body);font-weight:var(--fw-semibold);line-height:var(--lh-heading);
   margin:0 0 var(--space-1)}
p{margin:0 0 var(--space-3);max-width:var(--line-length)}
p:last-child{margin-bottom:0}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
a:focus-visible,button:focus-visible,input:focus-visible,
textarea:focus-visible,select:focus-visible,summary:focus-visible{
  outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

.eyebrow{font-size:var(--fs-caption);font-weight:var(--fw-semibold);letter-spacing:.06em;
  color:var(--subtle);margin:0 0 var(--space-2)}
.lead{font-size:var(--fs-lead);line-height:1.5;color:var(--subtle);
  max-width:36ch;margin:0}
.caption{font-size:var(--fs-caption);color:var(--subtle);line-height:1.6;
  max-width:var(--line-length);margin:var(--space-2) 0 0}

/* ── 導覽:一條線,沒有框 ── */
nav{border-bottom:1px solid var(--line);background:var(--bg);
  position:sticky;top:0;z-index:10}
nav .in{max-width:var(--content-max);margin:0 auto;padding:0 var(--space-4);
  display:flex;align-items:center;gap:var(--space-4);min-height:48px}
nav a{font-size:var(--fs-caption);color:var(--subtle);font-weight:var(--fw-medium)}
nav a:hover{color:var(--ink);text-decoration:none}
nav a.on{color:var(--ink);font-weight:var(--fw-semibold)}
nav .brand{font-weight:var(--fw-semibold);color:var(--ink);font-size:var(--fs-caption);
  margin-right:var(--space-2)}
nav .sp{flex:1}

/* ── 區塊:靠留白分組,不靠框線 ── */
.section{padding-block:var(--space-7)}
.section+.section{border-top:1px solid var(--line)}

/* 只在真的需要「一個容器」時才用底色,而不是畫框 */
.panel{background:var(--bg-2);border-radius:12px;padding:var(--space-4)}

/* ── 數字 ── */
.num,td.num,th.num{font-variant-numeric:tabular-nums}
.stat{font-family:var(--font-mono);font-variant-numeric:tabular-nums;
  font-weight:var(--fw-semibold);letter-spacing:-.02em}

/* ── 表格:橫線分隔,無外框、無斑馬紋 ── */
.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;font-size:var(--fs-caption)}
th,td{padding:var(--space-2) var(--space-3);text-align:left;
  border-bottom:1px solid var(--line);white-space:nowrap}
th{color:var(--subtle);font-weight:var(--fw-medium);font-size:var(--fs-caption)}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
tr:last-child td{border-bottom:0}
td:first-child,th:first-child{padding-left:0}
td:last-child,th:last-child{padding-right:0}

/* ── 顏色只上在可行動 / 需注意處 ── */
.up{color:var(--up)}        /* 漲 —— 台股紅 */
.down{color:var(--down)}    /* 跌 —— 台股綠 */
.on-state{color:var(--ink)}
.off-state{color:var(--alert);font-weight:var(--fw-semibold)}

/* ── 控制項 ── */
button{background:var(--accent);color:#fff;border:0;border-radius:980px;
  padding:var(--space-2) var(--space-4);font-size:var(--fs-caption);
  font-weight:var(--fw-medium);font-family:inherit;cursor:pointer}
button:hover{opacity:.85}
button.ghost{background:transparent;color:var(--accent);
  border:1px solid var(--line);border-radius:980px}
button.ghost:hover{border-color:var(--accent);opacity:1}
input,select,textarea{width:100%;padding:var(--space-2) var(--space-3);
  border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink);
  font-family:inherit;font-size:var(--fs-body);line-height:1.5}
textarea{min-height:80px;resize:vertical;line-height:var(--lh-body)}
label{display:block;font-size:var(--fs-caption);color:var(--subtle);
  margin-bottom:var(--space-1)}
.field{margin-bottom:var(--space-3)}

/* ── 漸進揭露:第二/三層 ── */
details{margin-top:var(--space-3)}
summary{cursor:pointer;font-size:var(--fs-caption);color:var(--accent);
  list-style:none;display:inline-flex;align-items:center;gap:var(--space-1)}
summary::-webkit-details-marker{display:none}
summary::after{content:"›";transition:transform .15s}
details[open] summary::after{transform:rotate(90deg)}
details .body{padding-top:var(--space-3);font-size:var(--fs-caption);
  color:var(--subtle);line-height:1.7;max-width:var(--line-length)}

footer{border-top:1px solid var(--line);margin-top:var(--space-8);
  padding-top:var(--space-4);font-size:var(--fs-caption);color:var(--faint);
  line-height:1.7;max-width:var(--line-length)}

/* ── 手機:縮的是絕對值,不是脫離刻度 ── */
@media(max-width:734px){
  :root{ --fs-display:2.5rem; --fs-h1:1.9375rem; --fs-h2:1.5625rem; }
  .wrap{padding-inline:var(--space-3)}
  .section{padding-block:var(--space-6)}
}
@media (prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important} }