/* ─────────────────────────────────────────────────────────
   字型:自己托管,不向任何外部主機請求
   ─────────────────────────────────────────────────────────
   2026-08-26 之前,全站 58 頁都會向 fonts.googleapis.com 與
   fonts.gstatic.com 發請求 —— 也就是每一個讀者的 IP 都會到 Google,
   而站上一個字都沒提。本站的讀者是「不會電腦的人」,
   那種事不該在他們不知道的情況下發生。

   現在九個拉丁字型檔(latin 子集)放在 assets/fonts/,合計 191 KB。
   中文**刻意不自己托管** —— 中文字型檔動輒好幾 MB,
   而 PingFang TC(Mac)與微軟正黑體(Windows)是系統本來就有的,
   下面每一條 font-family 都把它們列在後面當備援。

   授權:Barlow Condensed 與 IBM Plex 皆為 SIL Open Font License 1.1,
   明文允許重新散布與自行托管。授權英文全文見 assets/fonts/OFL.txt,
   中文說明與著作權人見 assets/fonts/LICENSE.txt。
   ───────────────────────────────────────────────────────── */

@font-face{
  font-family:'Barlow Condensed';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('fonts/barlow-condensed-500.woff2') format('woff2');
}
@font-face{
  font-family:'Barlow Condensed';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('fonts/barlow-condensed-600.woff2') format('woff2');
}
@font-face{
  font-family:'Barlow Condensed';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('fonts/barlow-condensed-700.woff2') format('woff2');
}
@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('fonts/ibm-plex-mono-400.woff2') format('woff2');
}
@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('fonts/ibm-plex-mono-500.woff2') format('woff2');
}
@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('fonts/ibm-plex-mono-600.woff2') format('woff2');
}
/* IBM Plex Sans 是**可變字型**,一個檔涵蓋整個粗細範圍(Google Fonts 對 400/500/600
   送的是同一個檔;2026-08-26 實測同一段拉丁文字在三種粗細下寬度各不相同,粗細真的有生效)。
   2026-08-26 到 09-06 之間這裡放了三條 @font-face 指到三個 md5 相同的檔,
   瀏覽器把它們當三個不同網址各抓一次 —— 每位讀者第一次來多抓 80 KB。
   2026-09-06 併成一條:font-weight 寫成範圍,一個檔就夠。
   註:中文不走這套字型 —— IBM Plex Sans 沒有漢字,中文會落到系統字型。 */
@font-face{
  font-family:'IBM Plex Sans';
  font-style:normal;
  font-weight:400 600;
  font-display:swap;
  src:url('fonts/ibm-plex-sans-400.woff2') format('woff2');
}

/* ═══════════════════════════════════════════════════════════
   toni的MVP模組補習班 — 全站設計系統
   暖紙底 + 琥珀主色 + 草地綠/紅土/藍
   新手導向:大字級、高對比、步驟元件、不橫向捲動
   ═══════════════════════════════════════════════════════════ */

:root{
  --paper:#F4F6F1; --card:#FCFBF6; --tint:#EDF1EA; --tint-2:#E4EAE2;
  --line:#C8D2C8;--rule:var(--line); --line-soft:#DCE3DA;
  --text:#16241E; --text-2:#44534C; --text-3:#5C6B64;
  --amber:#B5720F; --amber-dk:#8A5608; --amber-wash:#F6E8CF;
  --grass:#3E6B4F; --grass-wash:#E0EBE0;
  --clay:#9B4A31; --clay-wash:#F5E4DC;
  --blue:#2C5A73; --blue-wash:#E2EDF3;
  --pre-bg:#122019; --pre-fg:#DCE6DE; --pre-line:#20342B;
  --btn-bg:#8A5608; --btn-bg-hover:#B5720F; --btn-fg:#FFFFFF;
  --shadow:0 1px 2px rgba(15,30,25,.06),0 6px 20px rgba(15,30,25,.06);
  --nav-fade:rgba(22,36,30,.14);
}
@media (prefers-color-scheme:dark){
  :root{
    --paper:#0E1A16; --card:#152420; --tint:#1A2B25; --tint-2:#21332C;
    --line:#2C4038;--rule:var(--line); --line-soft:#243731;
    --text:#E8EDE7; --text-2:#AEBBB3; --text-3:#93A39A;
    --amber:#E0A346; --amber-dk:#F0BE6F; --amber-wash:#2E2416;
    --grass:#7FB08D; --grass-wash:#17281D;
    --clay:#D08A6E; --clay-wash:#2E1D17;
    --blue:#7FB3CE; --blue-wash:#152631;
    --pre-bg:#08120F; --pre-fg:#D6E2DA; --pre-line:#20342D;
    --btn-bg:#E0A346; --btn-bg-hover:#EDB963; --btn-fg:#1A1408;
    --shadow:0 1px 2px rgba(0,0,0,.3),0 6px 20px rgba(0,0,0,.28);
    --nav-fade:rgba(0,0,0,.42);
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--text);
  font-family:"IBM Plex Sans","Noto Sans TC","PingFang TC","Microsoft JhengHei",system-ui,sans-serif;
  font-size:17px; line-height:1.75; -webkit-font-smoothing:antialiased;
}
@media (max-width:600px){ body{font-size:16px} }
.wrap{max-width:880px;margin:0 auto;padding:0 20px 72px}

/* ── 導覽列 ─────────────────────────── */
.nav{
  border-bottom:1px solid var(--line); background:var(--card);
}
.nav-in{
  max-width:880px;margin:0 auto;padding:12px 20px;
  display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px;
}
.nav .brand{
  font-family:"Barlow Condensed","Noto Sans TC",sans-serif;
  font-weight:700;font-size:1.25rem;color:var(--text);text-decoration:none;
  letter-spacing:.01em;
}
.nav .brand .ball{color:var(--amber)}
.nav a.item{
  font-size:.92rem;color:var(--text-2);text-decoration:none;
  padding:2px 2px;border-bottom:2px solid transparent;
}
.nav a.item:hover{color:var(--amber-dk)}
.nav a.item.on{color:var(--amber-dk);border-bottom-color:var(--amber)}

/* ── 標題層級 ───────────────────────── */
h1,h2,h3{font-family:"Barlow Condensed","Noto Sans TC","PingFang TC",sans-serif;letter-spacing:.01em}
h1{font-size:clamp(1.9rem,5vw,2.7rem);font-weight:700;line-height:1.15;margin:34px 0 10px;text-wrap:balance}
h2{font-size:1.5rem;font-weight:600;margin:44px 0 10px;padding-bottom:7px;border-bottom:1.5px solid var(--line)}
h3{font-size:1.18rem;font-weight:600;margin:28px 0 8px}
.lede{font-size:1.05rem;color:var(--text-2);max-width:64ch}
p{margin:0 0 12px;max-width:70ch}
strong{color:var(--text)}
a{color:var(--amber-dk);text-decoration-thickness:1px;text-underline-offset:3px;overflow-wrap:anywhere}
p,li,td,dd{overflow-wrap:break-word}
a:hover{color:var(--amber)}
:focus-visible{outline:2.5px solid var(--amber);outline-offset:2px}

/* ── 眉批 / 徽章 ────────────────────── */
.eyebrow{
  font-family:"IBM Plex Mono",monospace;font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--amber-dk);margin:0 0 4px;
}
.badge{
  display:inline-block;font-family:"IBM Plex Mono",monospace;font-size:.68rem;
  padding:2px 8px;border-radius:3px;white-space:nowrap;vertical-align:middle;
  letter-spacing:.04em;
}
.badge.ok{background:var(--grass-wash);color:var(--grass);border:1px solid var(--grass)}
.badge.wip{background:var(--tint-2);color:var(--text-3);border:1px solid var(--line)}
.badge.lv{background:var(--amber-wash);color:var(--amber-dk);border:1px solid var(--amber)}
/* 會不會動到你的檔案 —— 給新手一眼看得出來的分別 */
.badge.ro{background:var(--tint);color:var(--text-2);border:1px dashed var(--line)}
.badge.rw{background:var(--clay-wash);color:var(--clay);border:1px solid var(--clay)}

/* ── 卡片 ───────────────────────────── */
.card{
  background:var(--card);border:1px solid var(--line);border-radius:6px;
  padding:18px 20px;box-shadow:var(--shadow);margin:14px 0;
}
.card.amber{border-left:4px solid var(--amber);background:var(--amber-wash)}
.card.grass{border-left:4px solid var(--grass);background:var(--grass-wash)}
.card.clay{border-left:4px solid var(--clay);background:var(--clay-wash)}
.card.blue{border-left:4px solid var(--blue);background:var(--blue-wash)}
/* 🔬 科普小教室 —— 名詞的中英對照 + 解釋 + 生活比喻，三合一。
   2026-08-29 定案:不要動正文。所以這些東西<u>不存在於 HTML 原始碼裡</u>，
   是 site.js 在讀者的瀏覽器裡掛上去的 —— 關掉 JavaScript 就完全消失，
   版面一格都不動(對齊 site.js 檔頭紀律第 1 條)。
   靜態的完整清單另外放在 glossary.html，不需要 JavaScript。 */

/* 正文裡那個可以點的名詞 */
button.term{
  font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;
  cursor:help;border-bottom:1px dashed var(--grass);
  /* 不用底色也不用粗體 —— 它只是「這裡有東西可以點」，不是重點標示 */
}
button.term:hover,button.term:focus-visible{background:var(--grass-wash)}
button.term::after{
  content:"ᴱᴺ";font-size:.62em;vertical-align:.45em;margin-left:1px;
  color:var(--grass);letter-spacing:.02em;
}
/* 彈出的那一格 */
.termpop{
  position:absolute;z-index:60;max-width:min(30rem,calc(100vw - 24px));
  background:var(--card);border:1px solid var(--grass);border-radius:8px;
  box-shadow:0 6px 24px rgba(0,0,0,.28);padding:12px 14px;
}
.termpop .tp-h{margin:0 0 6px;font-weight:700;color:var(--grass);font-size:1rem}
.termpop .tp-en{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.9rem;color:var(--text-2)}
.termpop p{margin:6px 0 0;font-size:.93rem;line-height:1.7}
.termpop .tp-sci{margin-top:8px;padding-top:8px;border-top:1px dashed var(--line)}
/* 再深入一點:量到的數字與細節。內容長的時候讓框自己捲，不要撐出畫面。 */
.termpop .tp-more{margin-top:8px;padding-top:8px;border-top:1px dashed var(--line);
  font-size:.9rem;color:var(--text-2)}
.termpop{max-height:min(70vh,32rem);overflow-y:auto}
.termpop .tp-x{position:absolute;top:4px;right:6px;background:none;border:0;
  color:var(--text-3);font-size:1.1rem;cursor:pointer;min-width:44px;min-height:44px}
@media (max-width:700px){
  /* 手機上改成貼在畫面底部，不然彈出框會被切掉 */
  .termpop{position:fixed;left:12px;right:12px;bottom:12px;top:auto;max-width:none}
}
/* glossary.html 的條目 */
.gl-term{border-top:1px solid var(--line);padding:14px 0}
.gl-term:first-of-type{border-top:0}
.gl-term h3{margin:0 0 4px;font-size:1.02rem}
.gl-term h3 .en{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.86rem;color:var(--text-2);font-weight:400;margin-left:6px}
.gl-term .sci{margin-top:6px;color:var(--text-2);font-size:.93rem}
.card-h{
  font-family:"Barlow Condensed","Noto Sans TC",sans-serif;
  font-size:1.12rem;font-weight:600;margin:0 0 6px;
}
.card.amber .card-h{color:var(--amber-dk)}
.card.grass .card-h{color:var(--grass)}
.card.clay .card-h{color:var(--clay)}
.card.blue .card-h{color:var(--blue)}
.card p:last-child{margin-bottom:0}

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin:16px 0}
.grid .card{margin:0;min-width:0}

/* ── 按鈕(下載/行動)───────────────── */
.btn{
  display:inline-block;background:var(--btn-bg);color:var(--btn-fg);
  font-family:"Barlow Condensed","Noto Sans TC",sans-serif;font-weight:600;
  font-size:1.08rem;letter-spacing:.02em;
  padding:11px 22px;border-radius:6px;text-decoration:none;
  border:none;box-shadow:var(--shadow);
}
.btn:hover{background:var(--btn-bg-hover);color:var(--btn-fg)}
.btn.ghost{background:var(--card);color:var(--amber-dk);border:1.5px solid var(--amber-dk);box-shadow:none}
.btn.ghost:hover{background:var(--amber-wash)}
.btnrow{display:flex;flex-wrap:wrap;gap:12px;margin:16px 0}

/* ── 代碼 ───────────────────────────── */
code{
  font-family:"IBM Plex Mono",Menlo,Consolas,monospace;font-size:.88em;
  background:var(--tint-2);padding:.12em .4em;border-radius:4px;
}
pre{
  background:var(--pre-bg);color:var(--pre-fg);border:1px solid var(--pre-line);
  border-radius:6px;padding:14px 16px;overflow-x:auto;
  font-family:"IBM Plex Mono",Menlo,Consolas,monospace;font-size:.86rem;line-height:1.65;
  margin:10px 0;
}
pre code{background:none;padding:0;font-size:1em;color:inherit}
pre .cm{color:#7E9A8B;font-style:italic}
pre .kw{color:#E0A346;font-weight:600}
pre .nu{color:#8FCBA6}
pre .hl{background:#5c4409;color:#FFE9BC;padding:0 2px;border-radius:2px;font-weight:600}
.copyhint{font-size:.8rem;color:var(--text-3);margin:-6px 0 10px}

/* ── 步驟元件(手把手核心)──────────── */
.step{display:grid;grid-template-columns:34px 1fr;gap:12px;margin:0 0 22px}
.step>*{min-width:0}
.step-n{
  width:34px;height:34px;border-radius:50%;background:var(--btn-bg);color:var(--btn-fg);
  font-family:"IBM Plex Mono",monospace;font-size:1rem;font-weight:600;
  display:flex;align-items:center;justify-content:center;margin-top:2px;
}
.step-t{
  font-family:"Barlow Condensed","Noto Sans TC",sans-serif;
  font-size:1.28rem;font-weight:600;margin:2px 0 6px;
}
.step-why{font-size:.95rem;color:var(--text-2);margin-bottom:8px}
.substep{margin:8px 0;padding-left:14px;border-left:2px solid var(--line)}
.substep p{margin:0 0 6px;font-size:.97rem}
.sk{
  display:inline-block;font-family:"IBM Plex Mono",monospace;font-size:.78rem;font-weight:600;
  color:var(--amber-dk);background:var(--amber-wash);border-radius:3px;
  padding:1px 6px;margin-right:5px;min-width:20px;text-align:center;
}
.key{
  display:inline-block;font-family:"IBM Plex Mono",monospace;font-size:.84rem;
  border:1px solid var(--text-3);border-bottom-width:2.5px;border-radius:4px;
  padding:1px 7px;background:var(--card);white-space:nowrap;line-height:1.4;
}
.seen{
  border:1px solid var(--grass);background:var(--grass-wash);border-radius:6px;
  padding:10px 14px;margin:10px 0;font-size:.95rem;
}
.seen>b{color:var(--grass);font-family:"Barlow Condensed","Noto Sans TC",sans-serif;font-size:1.05rem}
.ifnot{
  border:1px solid var(--clay);background:var(--clay-wash);border-radius:6px;
  padding:10px 14px;margin:10px 0;font-size:.95rem;
}
.ifnot>b{color:var(--clay);font-family:"Barlow Condensed","Noto Sans TC",sans-serif;font-size:1.05rem}
.seen p,.ifnot p{margin:4px 0 0}
.seen ul,.ifnot ul{margin:4px 0 0;padding-left:20px}
.seen li,.ifnot li{margin-bottom:4px}
.report{
  border:1.5px dashed var(--blue);background:var(--blue-wash);border-radius:6px;
  padding:14px 16px;margin:16px 0;
}
.report .card-h{color:var(--blue)}

/* ── 表格 ───────────────────────────── */
.tablewrap{position:relative;overflow-x:auto;border:1px solid var(--line);border-radius:6px;background:var(--card);margin:14px 0}
table{border-collapse:collapse;width:100%;font-size:.92rem;min-width:540px}
/* 表格比畫面寬的時候，右緣給一道陰影 —— 不然手機上完全看不出可以左右滑。
   background-attachment:local 讓陰影只在「那一側還有內容」時出現，捲到底就消失。 */
/* 2026-09-05:SVG 圖的捲動容器(.figscroll)跟表格同一套 —— 手機上 10 張圖 9 張捲得動,
   卻沒有任何「可以左右滑」的跡象,而表格早就有了。 */
.tablewrap,.figscroll{background-image:
  linear-gradient(to right,var(--card),transparent),
  linear-gradient(to left,var(--card),transparent),
  linear-gradient(to right,rgba(0,0,0,.28),transparent),
  linear-gradient(to left,rgba(0,0,0,.28),transparent);
  background-position:left,right,left,right;
  background-size:22px 100%,22px 100%,11px 100%,11px 100%;
  background-repeat:no-repeat;
  background-attachment:local,local,scroll,scroll}
/* 提示標籤：只有真的捲得動才由 site.js 掛上，捲過一次就收起來 */
.tablewrap .swipehint,.figscroll .swipehint{position:sticky;left:0;display:block;padding:3px 10px 5px;
  font-size:.76rem;color:var(--text-3);background:var(--card);
  border-bottom:1px solid var(--line);width:max-content}
.tablewrap.scrolled .swipehint,.figscroll.scrolled .swipehint{display:none}
/* 整格可點,而且點得到 —— 手機上量到 43px,WCAG 2.5.5 要 44。
   用 min-height 撐,不動其他表格的行高。 */
/* 整格可點,而且點得到。把 td 的上下內距讓給錨點,錨點自己撐 44px ——
   這樣算得出精確高度(44),不是靠內距去湊、湊到多少要量才知道。
   WCAG 2.5.5 的最小可點區就是 44。 */
.tablewrap td:has(> a.rowlink){padding-top:0;padding-bottom:0}
a.rowlink{color:inherit;text-decoration:none;display:flex;align-items:center;min-height:44px}
a.rowlink:hover,a.rowlink:focus-visible{text-decoration:underline}
/* 手機上,只有兩欄的表不該還要橫向捲才看得到數字。
   540px 的底線是為了不讓多欄表被擠成細長條,兩欄表不需要那個保護。
   :has() 在不支援的瀏覽器會整條規則失效 → 退回 540px,也就是現在的行為,不會壞。
   —— 2026-08-26 實測:375px 下「先看規模」那種兩欄表,數字欄整個在畫面外。 */
@media (max-width:560px){
  .tablewrap table:not(:has(tr > *:nth-child(3))){min-width:100%;width:100%}
  .tablewrap table:not(:has(tr > *:nth-child(3))) td{padding-left:10px;padding-right:10px}
  /* 儲存格裡的檔案路徑(data\datafile\datafile.big 這種)在窄畫面不換行,
     會把整張表撐開。只在手機上允許它從任何地方斷。 */
  .tablewrap td code,.tablewrap th code{overflow-wrap:anywhere;word-break:break-word}
}
th{
  font-family:"IBM Plex Mono",monospace;font-size:.7rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-3);text-align:left;font-weight:500;
  padding:9px 12px;background:var(--tint-2);border-bottom:1px solid var(--line);white-space:nowrap;
}
td{padding:8px 12px;border-bottom:1px solid var(--line-soft);vertical-align:top}
tr:last-child td{border-bottom:none}
tr.hi td{background:var(--amber-wash)}
/* 「這一列不算在標題那個數字裡」的列 —— 例如原版沒有、只是常見的殘留檔 */
tr.lo td{opacity:.62;font-style:italic}
td.mono,th.mono{font-family:"IBM Plex Mono",monospace;font-size:.84rem;white-space:nowrap}
td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}

/* ── 清單 ───────────────────────────── */
ul.tick,ul.cross{list-style:none;padding:0;margin:8px 0}
ul.tick li,ul.cross li{padding-left:24px;position:relative;margin-bottom:7px}
ul.tick li::before{content:"✓";position:absolute;left:2px;color:var(--grass);font-weight:700}
ul.cross li::before{content:"✕";position:absolute;left:2px;color:var(--clay);font-weight:700}
ol.plain,ul.plain{padding-left:24px;margin:8px 0}
ol.plain li,ul.plain li{margin-bottom:7px}

/* ── 名詞表 ─────────────────────────── */
.gloss td:first-child{font-weight:600;white-space:nowrap;width:26%}

/* ── 課程地圖列 ─────────────────────── */
.lesson{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 12px;
  padding:13px 4px;border-bottom:1px solid var(--line-soft);
}
.lesson:last-child{border-bottom:none}
.lesson .t{font-weight:600;flex:1 1 260px}
.lesson .t a{text-decoration:none;color:var(--text)}
.lesson .t a:hover{color:var(--amber-dk)}
.lesson .d{flex:2 1 300px;font-size:.9rem;color:var(--text-3)}

/* ── 頁尾 ───────────────────────────── */
footer{
  margin-top:64px;padding-top:20px;border-top:1px solid var(--line);
  color:var(--text-3);font-size:.85rem;
}
footer p{margin:0 0 6px}

/* ── 其他 ───────────────────────────── */
hr{border:none;border-top:1px solid var(--line);margin:32px 0}
img{max-width:100%;height:auto;border-radius:6px}
.small{font-size:.88rem;color:var(--text-3)}
.crumb{font-size:.85rem;color:var(--text-3);margin:18px 0 -18px}
.crumb a{color:var(--text-3)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media print{.nav,.btnrow{display:none}}

/* 只給螢幕閱讀器的標籤(視覺上隱藏,但輔助科技讀得到) */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
#q:focus{outline:2px solid var(--amber);outline-offset:2px}

/* ── 版面座標圖(SVG,不是截圖:每個框都是版面檔裡量到的座標)── */
.figbox{margin:16px 0;border:1px solid var(--line);border-radius:6px;
  background:var(--card);padding:14px;box-shadow:var(--shadow)}
.figbox figcaption{font-size:.86rem;color:var(--text-3);margin-top:10px;line-height:1.65}
.figscroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
svg.hudmap{display:block;width:100%;height:auto;max-width:720px;min-width:540px;margin:0 auto;
  background:var(--pre-bg);border-radius:4px}
svg.hudmap .scr{fill:none;stroke:var(--pre-line);stroke-width:2}
svg.hudmap .gd{stroke:var(--pre-line);stroke-width:1;stroke-dasharray:6 8}
svg.hudmap .el{fill:rgba(220,230,222,.10);stroke:#8FA79A;stroke-width:1}
svg.hudmap .el.tx{fill:rgba(220,230,222,.20);stroke:#B8CCC0}
svg.hudmap .el.hit{fill:rgba(224,163,70,.30);stroke:#E0A346;stroke-width:2}
svg.hudmap .cal{fill:#E0A346;stroke:#1A1408;stroke-width:1.5}
svg.hudmap .caln{fill:#1A1408;font:700 14px/1 "IBM Plex Sans",system-ui,sans-serif;
  text-anchor:middle}
svg.hudmap rect{transition:fill .12s}
svg.hudmap .el:hover{fill:rgba(224,163,70,.55)}
/* ── 臉皮槽位分佈圖(S-4)：894 個編號畫成格子，顏色從量到的名冊直接來 ── */
svg.facegrid{display:block;width:100%;height:auto;max-width:760px;min-width:560px;margin:0 auto;
  background:var(--pre-bg);border-radius:4px;padding:6px 0}
svg.facegrid .idle{fill:#1C2E25}
svg.facegrid .used{fill:#38553F}
svg.facegrid .me{stroke:#0E1712;stroke-width:1}
svg.facegrid .me.on{fill:#E0A346}
svg.facegrid .me.off{fill:#D08A6E}
svg.facegrid .zero{fill:none;stroke:#DCE6DE;stroke-width:1.5}
svg.facegrid .rl{fill:#7E9488;font:500 9px/1 "IBM Plex Mono",monospace;text-anchor:end}
svg.facegrid rect.me:hover{fill:#F0BE6F}
.fglegend{display:flex;flex-wrap:wrap;gap:6px 16px;margin:10px 0 0;
  font-size:.84rem;color:var(--text-3);list-style:none;padding:0}
.fglegend li{display:flex;align-items:center;gap:6px}
.fglegend i{width:13px;height:13px;border-radius:2px;display:inline-block;flex:0 0 auto}
.fglegend .k-idle{background:#1C2E25;outline:1px solid var(--line)}
.fglegend .k-used{background:#38553F}
.fglegend .k-on{background:#E0A346}
.fglegend .k-off{background:#D08A6E}
.fglegend .k-zero{background:transparent;box-shadow:inset 0 0 0 1.5px #8FA79A}

svg.barchart{display:block;width:100%;height:auto;max-width:660px;min-width:460px;margin:0 auto;
  background:var(--pre-bg);border-radius:4px}
svg.barchart .bar{fill:#E0A346}
svg.barchart .bar:hover{fill:#F0BE6F}
svg.barchart .ax{stroke:#5C7268;stroke-width:1.5}
svg.barchart .bl{fill:#DCE6DE;font:600 14px/1 "IBM Plex Mono",monospace;text-anchor:end}
svg.barchart .bv{fill:#DCE6DE;font:500 14px/1 "IBM Plex Sans",system-ui,sans-serif}
svg.barchart .bn{fill:#9FB3A8;font:500 13px/1 "IBM Plex Sans",system-ui,sans-serif}
svg.blockmap{display:block;width:100%;height:auto;max-width:680px;min-width:520px;margin:0 auto;
  background:var(--pre-bg);border-radius:4px}
svg.blockmap .px{fill:#3B5A4B;stroke:#6E8C7C;stroke-width:1}
svg.blockmap .by{stroke:#0B1512;stroke-width:1.5;rx:3}
svg.blockmap .c1{fill:#E0A346}
svg.blockmap .c2{fill:#7FB08D}
svg.blockmap .c3{fill:#7FB3CE}
svg.blockmap .ar{stroke:#9FB3A8;stroke-width:2}
svg.blockmap .ah{fill:#9FB3A8}
svg.blockmap .lb{fill:#DCE6DE;font:600 14px/1 "IBM Plex Sans",system-ui,sans-serif}
svg.blockmap .bt{fill:#12201A;font:600 12px/1 "IBM Plex Sans",system-ui,sans-serif;text-anchor:middle}
svg.blockmap .sm{fill:#9FB3A8;font:400 12.5px/1 "IBM Plex Sans",system-ui,sans-serif}
svg.blockmap .em{fill:#E0A346;font-weight:600}
svg.blockmap .hx{fill:#E0A346;font-family:"IBM Plex Mono",monospace}
kbd{font:600 .86em/1 "IBM Plex Mono",ui-monospace,monospace;background:var(--tint-2);
  border:1px solid var(--line);border-bottom-width:2px;border-radius:4px;
  padding:2px 6px;color:var(--text);white-space:nowrap}

/* ─── 王牌補習班版型標準(2026-08-29 定案)───────────────────
   每一課兩個固定區塊,方向相反:
     .quickfix  頁首「⚡ 速解」—— 給只想趕快做完的人,不用讀完
     .recap     頁尾「📌 重點整理」—— 給讀完想複習的人,掃一眼回想全頁
   中間的原理與量測不動:老手要的硬核內容還在,只是被包起來。 */
.quickfix{border:2px solid var(--btn-bg);border-radius:6px;
  padding:16px 18px;margin:22px 0;background:var(--card)}
.quickfix > .card-h{margin:0 0 10px;font-size:1.04rem}
.quickfix ol{margin:0;padding-left:1.35em}
.quickfix ol > li{margin:.42em 0;line-height:1.55}
/* ⚠️ 只讓指令區塊獨立成行。原本這條把 li 底下的行內 <code> 也設成 block,
   句子被切成一行一個詞 —— HTML 檢查看不出來,只有看畫面才會發現。 */
.quickfix pre{display:block;margin:.35em 0}
.quickfix .tail{margin:12px 0 0;font-size:.82rem;color:var(--text-3)}

.recap{border-left:5px solid var(--btn-bg);padding:4px 0 4px 16px;margin:14px 0 4px}
.recap > li{margin:.5em 0;line-height:1.6;list-style:none}
.recap > li::before{content:"▸ ";color:var(--btn-bg);font-weight:700}
.recap > li > strong:first-child{color:var(--text)}

/* 2026-08-29 上線前稽核:上面這幾條原本引用了六個從來沒有定義過的變數
   (--radius / --card-bg / --dim / --fg / --tint-1 / --accent)。
   沒有備援值的 CSS 變數會讓**整條屬性失效**,所以班主任訂的「⚡ 速解」框
   一直是直角、而且沒有底色 —— HTML 完全正確、七支檢查器全綠,
   只有真的看畫面(或讀計算後樣式)才會發現。
   全部換成站上既有的色票,不另外造別名。 */

/* ── 互動元件(2026-08-29)─────────────────────────────────
   全部由 assets/site.js 在執行時建立。關掉 JavaScript 時
   這些選擇器一個都不會命中,版面與今天完全相同。 */

.prewrap{position:relative}
.copybtn{position:absolute;top:8px;right:8px;z-index:2;
  font:inherit;font-size:.76rem;line-height:1;padding:6px 10px;
  border:1px solid var(--pre-line);border-radius:5px;
  background:var(--pre-line);color:var(--pre-fg);
  cursor:pointer;opacity:.35;transition:opacity .15s}
.prewrap:hover .copybtn,.copybtn:focus{opacity:1}
.copybtn.is-done{opacity:1;background:var(--grass);color:var(--paper);border-color:var(--grass)}

.step-btn{font:inherit;padding:0;border:0;cursor:pointer;
  -webkit-appearance:none;appearance:none;position:relative}
.step-btn.is-done::after{content:"✓";position:absolute;right:-3px;bottom:-3px;
  font-size:.7rem;line-height:1;width:15px;height:15px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--grass);color:var(--paper)}
.stepbar{margin:10px 0 18px;font-size:.9rem;color:var(--text-2)}
.stepcount{font-weight:600}
.linkbtn{font:inherit;font-size:.85rem;background:none;border:0;padding:0;
  color:var(--amber-dk);text-decoration:underline;cursor:pointer}

.tblfind,.errfind{border:1px solid var(--line);border-radius:6px;
  background:var(--tint);padding:12px 14px;margin:18px 0}
.tblfind label,.errfind label{display:block;font-size:.9rem;
  font-weight:600;margin-bottom:6px}
.tblfind input,.errfind input{width:100%;box-sizing:border-box;font:inherit;
  padding:8px 10px;border:1px solid var(--line);border-radius:5px;
  background:var(--card);color:var(--text)}
.tblfind input:focus,.errfind input:focus{outline:2px solid var(--amber);outline-offset:2px}
.tblmsg,.errmsg{margin:8px 0 0;min-height:1.2em}
tr.errhit{background:var(--amber-wash)}
tr.errhit td{font-weight:600}

/* 跳到主要內容 —— 平常看不見,鍵盤 Tab 一下就現身。
   每頁導覽列有 9 個連結,用鍵盤或讀螢幕器的人每進一頁都要先按 9 次
   才碰得到內文。零 JS,關掉 JavaScript 行為完全一樣。 */
.skip:focus{position:fixed;left:12px;top:12px;width:auto;height:auto;
  clip:auto;clip-path:none;overflow:visible;white-space:normal;
  z-index:999;padding:10px 14px;border-radius:6px;
  background:var(--btn-bg);color:var(--btn-fg);font-weight:600;
  box-shadow:var(--shadow)}
.wrap:focus{outline:none}

/* ═══════════════════════════════════════════════════════════
   2026-08-29 版面稽核修正 —— 五項都是量出來的,不是感覺
   ═══════════════════════════════════════════════════════════ */

/* ① 內文行長。實測桌機一般段落是 84 個字元寬,而舒適區是 45~75。
      .lede 本來就有 max-width:64ch,但**一般段落沒有** ——
      主體文字比自己的導言還難讀。
      只限制純文字段落與清單,不碰表格 / 程式碼 / 卡片內的排版。 */
.wrap > p,
.wrap > ul:not(.recap):not(.cards),
.wrap > ol,
.step > div > p,
.step > div > ul {
  max-width: 68ch;
}
/* 卡片本來就窄,再套一次會讓它左邊縮排看起來歪掉 */
.card > p, .card > ul { max-width: none; }

/* ② 手機導覽列。實測 137px = 812px 螢幕的 17%,
      而且 9 個連結的點擊高度全部是 32px —— WCAG 2.5.5 要求 44px。
      改成單排橫向捲動:高度砍掉三分之二,而且每個連結都合格。 */
@media (max-width: 700px) {
  .nav-in {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 4px 16px;
    gap: 0 4px;
    align-items: center;
  }
  .nav-in::-webkit-scrollbar { display: none; }
  .nav-in .item,
  .nav-in .brand {
    white-space: nowrap;
    flex: 0 0 auto;
    min-height: 44px;          /* WCAG 2.5.5 */
    display: inline-flex;
    align-items: center;
    padding: 0 8px;
  }
  .nav-in .brand { padding-left: 0; padding-right: 12px; }
  /* 右邊淡出,讓人知道還有東西可以捲 */
  .nav { position: relative; }
  .nav::after {
    content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 28px;
    pointer-events: none;
    background: linear-gradient(to right, transparent, var(--card));
  }
}

/* ③ 複製鈕壓在程式碼上(實測 copybtn_covers_code = true),
      而且只有 26px 高,同樣低於 44px。
      窄畫面改成貼在區塊右上角外側,並把 pre 的上緣讓開。 */
.copybtn { min-height: 34px; padding: 8px 12px; }
@media (max-width: 700px) {
  /* padding-top 必須 >= 鈕高 + 間距。第一版寫 34px 而鈕是 44px,
     實測仍然重疊 5px —— 「看起來讓開了」跟「真的讓開了」是兩件事。 */
  .prewrap { padding-top: 50px; }
  .copybtn {
    top: 0; right: 0;
    min-height: 44px; padding: 10px 14px;
    opacity: .85; border-radius: 0 6px 0 6px;
  }
}

/* ④ 手機上三張資訊卡(難度 / 時間 / 可以還原嗎)實測佔 300px,
      只為了講三件各五個字的事。窄畫面壓成兩欄、去掉多餘留白。 */
@media (max-width: 700px) {
  .grid { gap: 10px; }
  .grid .card { padding: 12px 14px; }
  .grid .card .card-h { margin-bottom: 2px; font-size: .82rem; }
  .grid .card p:last-child { margin: 0; font-size: .95rem; }
}
/* 340px 以上就放得下兩欄(iPhone SE 是 375px)。第一版門檻設 380px,
   剛好把最常見的小螢幕擋在外面,等於這條規則對它們不存在。 */
@media (max-width: 700px) and (min-width: 340px) {
  .grid { grid-template-columns: 1fr 1fr; }
  .grid .card:only-child { grid-column: 1 / -1; }
}

/* ⑤ 中文的斷行。瀏覽器對中英數混排的斷點判斷不好,
      會讓一行只剩一個字。text-wrap:pretty 支援的瀏覽器會改善末行,
      不支援的完全沒有影響。 */
.wrap p, .wrap li, .lede, h1, h2, h3 { text-wrap: pretty; }
h1, h2, h3 { overflow-wrap: break-word; }

/* 兩欄裝三張時,第三張會單獨吊在左下。讓它橫跨兩欄,收掉那個缺口。
   (⚠️ 2026-08-29:同一輪我以為導覽列的 ⚾ 被裁掉,量完是 ball_clipped:false ——
    它正好從 16px 內距起算。眼睛會騙人,版面問題也要量。) */
@media (max-width: 700px) and (min-width: 340px) {
  .grid .card:nth-child(3):last-child { grid-column: 1 / -1; }
}

/* ═══════════════════════════════════════════════════════════════════
   2026-08-30 版型現代化 —— 依手機實機檢視後訂的三件事
     「首頁最上方感覺很不現代」「這排版很像 20 年前」
     「重點整理很像全新的課文,沒有顏色區分、沒有適當的欄距、
       沒有螢光筆螢起來、沒有適當的便利貼」
   ═══════════════════════════════════════════════════════════════════ */

/* ── ① 寬表格在手機上變成堆疊卡片 ────────────────────────────────
   原本 table{min-width:540px} 讓三欄以上的表在 375px 硬撐 540px,
   每一格被擠成「一個字一行」的直條 ——「本壘板紀／律」「選球／能力」
   都被拆斷,描述欄整段變成一條細帶子。那不是美感問題,是讀不下去。
   窄螢幕改成:一列 = 一張卡,每一格自己一行,欄名印在值上面。
   描述欄因此拿到整個 375px 寬,而不是 90px。
   只有 .stack 的表才這樣(有 thead、無 colspan/rowspan、三欄以上,
   由 .tools/add_table_labels.py 標記,389 張)。 */
@media (max-width:640px){
  .tablewrap:has(> table.stack){
    overflow-x:visible;border:0;background:none;border-radius:0;
    background-image:none;
  }
  .tablewrap:has(> table.stack) .swipehint{display:none}
  table.stack{min-width:0;width:100%;display:block;border-collapse:separate}
  table.stack thead{
    position:absolute;width:1px;height:1px;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap;      /* 螢幕閱讀器仍讀得到 */
  }
  table.stack tbody{display:block}
  table.stack tbody > tr{
    display:block;margin:0 0 12px;padding:12px 14px 10px;
    background:var(--card);border:1px solid var(--line);
    border-left:4px solid var(--line);border-radius:10px;
    box-shadow:var(--shadow);
  }
  table.stack tbody > tr.hi{border-left-color:var(--amber);background:var(--amber-wash)}
  table.stack tbody > tr.lo{opacity:1;border-left-style:dashed}
  table.stack tbody > tr > td{
    display:block;width:auto;padding:0;border:0;
    line-height:1.72;margin:0 0 10px;
  }
  table.stack tbody > tr > td:last-child{margin-bottom:0}
  /* 欄名:小、淡、在值的上面一行 */
  table.stack tbody > tr > td::before{
    content:attr(data-label);display:block;
    font-family:"Barlow Condensed","Noto Sans TC",sans-serif;
    font-size:.74rem;font-weight:600;letter-spacing:.06em;
    color:var(--text-3);text-transform:none;
    margin:0 0 2px;
  }
  /* 第一格當卡片標題:不印欄名,字大一點 */
  table.stack tbody > tr > td:first-child{
    font-size:1.06rem;font-weight:600;color:var(--text);
    padding-bottom:8px;margin-bottom:10px;
    border-bottom:1px solid var(--line-soft);
  }
  table.stack tbody > tr > td:first-child::before{display:none}
  table.stack tbody > tr > td.num{text-align:left;white-space:normal;overflow-wrap:anywhere}  /* 2026-09-06:nowrap 沒解除害 reference/fonts.html 整頁橫向捲 */
  table.stack tbody > tr > td.mono{white-space:normal;overflow-wrap:anywhere}
}

/* ── ② 重點整理:從一坨課文變成看得下去的卡片 ──────────────────
   要做到的四件:顏色區分 / 適當的欄距 / 螢光筆 / 便利貼。
   ⚠️ 703 條內容一個字都不改 —— 全部用既有的標記做到:
     · 每條開頭那個 <strong> 本來就是主旨(1,110 個)→ 變成標題行
     · <u> 本來就是「這裡要注意」(296 個)→ 變成螢光筆
     · 首條「一句話」與末條「本站沒驗的」是站上的固定慣例
       → 分別給重點色與便利貼樣式 */
.recap{
  border-left:0;padding:0;margin:18px 0 8px;
  display:flex;flex-direction:column;gap:14px;
}
.recap > li{
  list-style:none;margin:0;line-height:1.85;
  background:var(--card);border:1px solid var(--line);
  border-left:4px solid var(--blue);
  border-radius:10px;padding:14px 16px 13px;
  box-shadow:var(--shadow);
}
.recap > li::before{content:none}          /* 拿掉原本的 ▸ */
/* 每條開頭的主旨 → 獨立一行的標題 */
.recap > li > strong:first-child{
  display:block;margin:0 0 8px;
  font-family:"Barlow Condensed","Noto Sans TC",sans-serif;
  font-size:1.1rem;font-weight:700;letter-spacing:.01em;
  color:var(--text);
}
/* 螢光筆 —— <u> 與 <mark> 都算 */
.recap u,.recap mark{
  text-decoration:none;background:linear-gradient(transparent 58%,var(--amber-wash) 58%);
  box-shadow:none;color:inherit;padding:0 1px;border-radius:2px;
}
.recap mark{background:linear-gradient(transparent 52%,var(--amber-wash) 52%)}
.recap code{background:var(--tint);border-radius:4px;padding:1px 5px}
/* 顏色區分:首條是結論、末條是保留 */
.recap > li:first-child{
  border-left-color:var(--amber);background:var(--amber-wash);
}
.recap > li:first-child > strong:first-child{color:var(--amber-dk)}
.recap > li:last-child{
  border-left-color:var(--clay);background:var(--clay-wash);
  border-style:dashed;border-left-style:solid;
}
.recap > li:last-child > strong:first-child{color:var(--clay)}
/* 便利貼:末條那張右上角折角 */
.recap > li:last-child{position:relative;overflow:hidden}
.recap > li:last-child::after{
  content:"";position:absolute;top:0;right:0;
  border-width:0 18px 18px 0;border-style:solid;
  border-color:var(--paper) transparent;
  filter:drop-shadow(-1px 1px 0 var(--line));
}
@media (max-width:640px){
  .recap{gap:12px}
  .recap > li{padding:13px 14px 12px;line-height:1.8}
  .recap > li > strong:first-child{font-size:1.04rem}
}

/* ── ③ 導覽列:從一排小字變成藥丸 ──────────────────────────────
   無障礙原本就做過了(44px 觸控、可捲、右側淡出),
   「不現代」指的是外觀:字小、沒有形狀、品牌跟項目擠在同一條線上。 */
.nav{position:sticky;top:0;z-index:40;backdrop-filter:saturate(1.2) blur(6px)}
.nav a.item{
  border-bottom:0;border-radius:999px;
  padding:5px 12px;font-weight:500;
  transition:background .14s,color .14s;
}
.nav a.item:hover{background:var(--tint);color:var(--text)}
.nav a.item.on{
  background:var(--btn-bg);color:var(--btn-fg);font-weight:600;
  border-bottom:0;
}
.nav a.item.on:hover{background:var(--btn-bg-hover);color:var(--btn-fg)}
@media (max-width:700px){
  .nav-in{padding:8px 14px;gap:0 6px}
  .nav-in .brand{
    font-size:1.06rem;padding-right:10px;
    border-right:1px solid var(--line);margin-right:4px;
  }
  .nav-in .item{padding:0 12px;border-radius:999px}
  .nav-in .item.on{background:var(--btn-bg);color:var(--btn-fg)}
  .nav::after{width:36px}
}

/* ═══ 2026-08-30 第二段:首頁最上方 ═══════════════════════════════
   手機實機檢視的結論:首頁最上方的視覺層次不足。
   實際量到四件事,每一件都是真的:
     1. 導覽列 10 個項目在 375px 上只看得到 2 個。它**可以**橫向捲
        (scrollWidth 943 > clientWidth 375),但沒有任何提示 ——
        使用者不會知道右邊還有八個。這是可用性問題不是美觀問題。
     2. `.eyebrow` 的 letter-spacing:.16em 把「手把手修改教學」
        拉成「手 把 手 修 改 教 學」。字距對拉丁字母是排版技巧,
        對中文是把詞拆散 —— 中英混排時一條規則服務不了兩種文字。
     3. 首屏被一張公告卡整個佔滿,主標題被推到第二屏。
     4. 卡片標題行高太鬆,兩行之間空得像沒排版。
   ───────────────────────────────────────────────────────────── */

/* 1. 導覽列:右緣漸層提示「還有」+ 藏掉捲軸 */
.nav-in{
  scrollbar-width:none;               /* Firefox */
  -ms-overflow-style:none;
}
.nav-in::-webkit-scrollbar{display:none}
.nav{position:relative}
.nav::after{                          /* 右緣淡出 = 「可以往右滑」的視覺提示 */
  content:"";position:absolute;top:0;right:0;bottom:1px;width:34px;
  pointer-events:none;opacity:0;transition:opacity .18s;
  /* ⚠️ 第一版寫 transparent → var(--card),而導覽底色**就是** --card:
     白色淡出到白色 = 完全看不見。改用一道實際看得見的暗邊。 */
  background:linear-gradient(90deg,transparent,var(--nav-fade));
}
@media (max-width:720px){ .nav::after{opacity:1} }

/* 2. 眉批:字距收斂到中文不散、英文仍有排版感 */
.eyebrow{
  letter-spacing:.05em;
  font-size:.76rem;
  display:flex;align-items:center;gap:9px;
}
.eyebrow::before{                     /* 一小段橫線,取代靠字距撐出來的「儀式感」 */
  content:"";flex:0 0 22px;height:2px;border-radius:2px;
  background:var(--amber);opacity:.85;
}

/* 3. 首屏:主標題與導覽之間收緊,別讓第一眼是空白 */
.wrap > .eyebrow:first-of-type{margin-top:30px}
h1{letter-spacing:0}                  /* 中文標題同理,不加字距 */

/* 4. 卡片標題行高 */
.card-h{line-height:1.35}

/* 5. 首屏公告橫幅:比整張卡薄,讓主標題留在第一眼 */
.hero-note{
  display:block;text-decoration:none;color:inherit;
  background:var(--grass-wash);border:1px solid var(--line-soft);
  border-left:4px solid var(--grass);border-radius:10px;
  padding:12px 15px;margin:18px 0 0;box-shadow:var(--shadow);
}
.hero-note:hover{background:var(--tint-2);color:inherit}
.hero-note .t{
  display:block;font-weight:700;font-size:1.02rem;line-height:1.4;
  color:var(--text);margin:0 0 3px;
}
.hero-note .d{
  display:block;font-size:.87rem;color:var(--text-2);line-height:1.5;margin:0;
}
.hero-note .go{color:var(--amber-dk);font-weight:600;white-space:nowrap}

/* ── 手機導覽:讓第三個項目「露一半」 ────────────────────────────
   量到的問題:第三項左緣在 371px,而畫面只有 375px —— 差 4px,
   等於完全看不到。導覽**可以**橫向捲,但沒有任何跡象顯示這件事。
   ⚠️ 我第一版加的是右緣漸層 transparent → var(--card),
      而導覽底色**就是** --card:白色淡出到白色 = 隱形。
      有效的提示是讓下一項被切一半 —— 半個字在視覺上不完整,
      大腦會自己想看完。省 brand 30px + padding 12px + gap 8px。 */
@media (max-width:640px){
  .nav-in{padding:10px 14px;gap:6px 10px}
  .nav .brand{font-size:1.05rem}
  .nav::after{width:26px}
  /* 兩顆主按鈕等寬各佔一行 —— 觸控目標更大,也不會一長一短 */
  .btnrow{gap:10px}
  .btnrow > .btn{flex:1 1 100%;text-align:center}
}

/* ── 螢光筆:別只認 <u> ──────────────────────────────────────────
   需求是「重點要像螢光筆螢起來」。第一版只讓 <u> / <mark> 變螢光,
   結果 91 張重點整理裡有 28 張一個 <u> 都沒有 —— 樣式做了,
   那些頁面卻完全看不到效果,對讀者等於沒做。
   量到的解:那些頁的**內文裡本來就有 <strong> 標著重點**(73/91 張)。
   作者已經標過了,這裡只是換一種呈現 —— **零內容改動**。
   ⚠️ 排除 :first-child:那一個是條目標題,已經做成獨立的標題行。 */
.recap > li > strong:not(:first-child){
  background:linear-gradient(transparent 58%,var(--amber-wash) 58%);
  padding:0 1px;
}
/* 2026-09-06:兩欄「項目 / 數值」表的列標題改成 <th scope="row"> 之後,不要套到欄標題那套等寬大寫樣式 */
th[scope="row"]{font-family:inherit;font-size:inherit;letter-spacing:normal;text-transform:none;color:var(--text);font-weight:600;background:none;white-space:normal;text-align:left}