/* =========================================================
   講義內容元件（章節 HTML 片段使用的 class）
   規格見 spec/CONTENT_SPEC.md
   ========================================================= */
.doc{font-size:calc(17px * var(--read));line-height:1.85;color:var(--text);max-width:820px;margin:0 auto}
.doc h2{font-family:var(--serif);font-size:1.42em;line-height:1.4;margin:2.4em 0 .7em;padding-top:.4em;color:var(--ink);
  border-top:1px solid var(--line-soft);position:relative}
.doc h2:first-child{margin-top:.4em}
.doc h2 .num{color:var(--rust);margin-right:.3em}
.doc h3{font-size:1.14em;margin:1.8em 0 .5em;color:var(--ink-2);display:flex;align-items:baseline;gap:.5em}
.doc h3::before{content:"";flex:none;width:.42em;height:.42em;border-radius:2px;background:var(--rust);transform:translateY(-.15em)}
.doc h4{font-size:1.02em;margin:1.4em 0 .4em;color:var(--text)}
.doc p{margin:.7em 0}
.doc ul,.doc ol{padding-left:1.4em;margin:.6em 0}
.doc li{margin:.25em 0}
.doc li::marker{color:var(--rust-soft)}
.doc strong,.doc b{color:var(--ink);font-weight:700}
.doc em{font-style:normal;background:linear-gradient(transparent 62%,rgba(211,144,54,.35) 62%);padding:0 .1em}
.doc .en{font-family:var(--sans);color:var(--text-soft);font-size:.9em}
.doc code{background:var(--paper-2);border:1px solid var(--line-soft);padding:.05em .35em;border-radius:5px}
.doc pre{background:var(--ink);color:#e8edf3;padding:14px 16px;border-radius:var(--radius-s);overflow:auto;font-size:.86em;line-height:1.6}
:root[data-theme="dark"] .doc pre{background:#0b0f14}
.doc pre code{background:none;border:0;padding:0;color:inherit}
.doc hr{border:0;border-top:1px dashed var(--line);margin:2em 0}

/* 章首導讀 */
.ch-intro{background:var(--card);border:1px solid var(--line-soft);border-radius:var(--radius);padding:18px 22px;box-shadow:var(--shadow-1)}
.ch-intro .lead{font-size:1.06em;margin:0 0 .6em;color:var(--ink-2)}
.ch-intro .goals{list-style:none;padding:0;margin:0;display:grid;gap:6px}
.ch-intro .goals li{padding-left:1.7em;position:relative}
.ch-intro .goals li::before{content:"";position:absolute;left:.2em;top:.55em;width:.85em;height:.85em;border-radius:50%;
  border:2px solid var(--forest);background:var(--forest-bg)}

/* 高頻考點 */
ol.hot{list-style:none;counter-reset:hot;padding:0;margin:1em 0;display:grid;gap:8px}
ol.hot>li{counter-increment:hot;display:grid;grid-template-columns:2.2em 1fr;gap:10px;align-items:start;background:var(--card);
  border:1px solid var(--line-soft);border-radius:var(--radius-s);padding:10px 14px}
ol.hot>li::before{content:counter(hot);font-family:var(--serif);font-weight:700;font-size:1.25em;line-height:1.2;color:#fff;
  background:var(--rust);border-radius:8px;text-align:center;padding:.15em 0}
ol.hot>li .freq{display:inline-block;font-size:.78em;color:var(--rust);background:var(--rust-bg);border-radius:99px;padding:0 .6em;margin-left:.4em;white-space:nowrap}

/* 色塊 */
.box{border-radius:var(--radius-s);padding:12px 16px 12px 16px;margin:1.1em 0;border:1px solid;position:relative}
.box>.box-t{font-weight:700;font-size:.88em;letter-spacing:.04em;margin-bottom:.35em;display:flex;align-items:center;gap:.45em}
.box>.box-t::before{content:"";width:1.15em;height:1.15em;flex:none;background:currentColor;
  -webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat}
.box>*:last-child{margin-bottom:0}
.box p{margin:.35em 0}
.box ul,.box ol{margin:.3em 0}
.box.key{background:var(--rust-bg);border-color:color-mix(in srgb,var(--rust) 30%,transparent)}
.box.key>.box-t{color:var(--rust);--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.9 6.3 6.9.7-5.2 4.6 1.5 6.8L12 17l-6.1 3.4 1.5-6.8L2.2 9l6.9-.7z'/%3E%3C/svg%3E")}
.box.trap{background:var(--red-bg);border-color:color-mix(in srgb,var(--red) 30%,transparent)}
.box.trap>.box-t{color:var(--red);--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2L1 21h22L12 2zm-1 7h2v6h-2V9zm0 8h2v2h-2v-2z'/%3E%3C/svg%3E")}
.box.tip{background:var(--amber-bg);border-color:color-mix(in srgb,var(--amber) 35%,transparent)}
.box.tip>.box-t{color:var(--amber);--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 21h6v-1H9v1zm3-19a7 7 0 00-4 12.7V17h8v-2.3A7 7 0 0012 2z'/%3E%3C/svg%3E")}
.box.official{background:var(--blue-bg);border-color:color-mix(in srgb,var(--blue) 35%,transparent)}
.box.official>.box-t{color:var(--blue);--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1l9 4v6c0 5.5-3.8 10.7-9 12-5.2-1.3-9-6.5-9-12V5l9-4zm-1.2 14.6l6.4-6.4-1.4-1.4-5 5-2.4-2.4-1.4 1.4 3.8 3.8z'/%3E%3C/svg%3E")}
.box.example{background:var(--forest-bg);border-color:color-mix(in srgb,var(--forest) 30%,transparent)}
.box.example>.box-t{color:var(--forest);--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 4h16v12H5.2L4 17.2V4zm2 4h12V6H6v2zm0 4h8v-2H6v2z'/%3E%3C/svg%3E")}
.box.note{background:var(--card-2);border-color:var(--line)}
.box.note>.box-t{color:var(--text-soft);--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 7h2v2h-2V7zm0 4h2v6h-2v-6zm1-9a10 10 0 100 20 10 10 0 000-20z'/%3E%3C/svg%3E")}
.box.summary{background:var(--ink);color:#eef2f6;border-color:var(--ink)}
:root[data-theme="dark"] .box.summary{background:#0b1118;border-color:var(--line)}
.box.summary>.box-t{color:#f3c98b;--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 5h16v2H4V5zm0 6h16v2H4v-2zm0 6h10v2H4v-2z'/%3E%3C/svg%3E")}
.box.summary strong,.box.summary b{color:#fff}
.box.summary li::marker{color:#f3c98b}

/* 比較表 */
.tbl{overflow-x:auto;margin:1.1em 0;border:1px solid var(--line);border-radius:var(--radius-s);background:var(--card)}
table.cmp{border-collapse:collapse;width:100%;font-size:.93em;line-height:1.6;min-width:520px}
table.cmp th,table.cmp td{border-bottom:1px solid var(--line-soft);padding:8px 12px;text-align:left;vertical-align:top}
table.cmp th+th,table.cmp td+td{border-left:1px solid var(--line-soft)}
table.cmp thead th{background:var(--paper-2);color:var(--ink);font-weight:700;white-space:nowrap}
table.cmp tbody th{background:var(--card-2);color:var(--ink);font-weight:700;white-space:nowrap}
table.cmp tbody tr:last-child>*{border-bottom:0}
table.cmp caption{caption-side:top;text-align:left;font-weight:700;padding:8px 12px;color:var(--text-soft);font-size:.9em}
table.cmp .hl{background:var(--amber-bg)}

/* 步驟流程 */
ol.steps{list-style:none;counter-reset:st;padding:0;margin:1em 0;display:grid;gap:0}
ol.steps>li{counter-increment:st;position:relative;padding:0 0 14px 46px;margin:0}
ol.steps>li::before{content:counter(st);position:absolute;left:0;top:0;width:30px;height:30px;border-radius:50%;
  background:var(--forest);color:#fff;font-weight:700;display:grid;place-items:center;font-size:.9em}
ol.steps>li::after{content:"";position:absolute;left:14px;top:32px;bottom:2px;width:2px;background:var(--line)}
ol.steps>li:last-child::after{display:none}
ol.steps>li>b:first-child{display:block;color:var(--ink)}

/* 術語 */
dl.terms{display:grid;grid-template-columns:minmax(9em,auto) 1fr;gap:0;margin:1em 0;border:1px solid var(--line);border-radius:var(--radius-s);overflow:hidden;background:var(--card)}
dl.terms dt,dl.terms dd{margin:0;padding:8px 12px;border-bottom:1px solid var(--line-soft)}
dl.terms dt{font-weight:700;color:var(--ink);background:var(--card-2)}
dl.terms dt:nth-last-of-type(1),dl.terms dd:last-of-type{border-bottom:0}
@media (max-width:560px){dl.terms{grid-template-columns:1fr}dl.terms dt{border-bottom:0;padding-bottom:0;background:none}}

/* 口訣大字 */
.mnemo{font-family:var(--serif);font-size:1.25em;font-weight:700;color:var(--amber);letter-spacing:.08em}

/* 圖 */
figure.fig{margin:1.4em 0;background:var(--card);border:1px solid var(--line-soft);border-radius:var(--radius);padding:14px 14px 10px;box-shadow:var(--shadow-1)}
figure.fig .svg-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;cursor:zoom-in}
figure.fig svg{display:block;width:100%;height:auto;min-width:560px;max-width:100%;margin:0 auto}
figure.fig figcaption{font-size:.86em;color:var(--text-soft);margin-top:8px;text-align:center}
figure.fig figcaption b{color:var(--rust)}
/* SVG 繪圖 class（深淺色自動切換） */
.fig svg text{font-family:var(--sans);fill:var(--text);font-size:15px}
.fig svg .tx-b{font-weight:700}
.fig svg .tx-s{font-size:12.5px;fill:var(--text-soft)}
.fig svg .tx-l{font-size:18px;font-weight:700}
.fig svg .tx-w{fill:#fff}
.fig svg .tx-rust{fill:var(--rust)} .fig svg .tx-blue{fill:var(--blue)} .fig svg .tx-green{fill:var(--forest)}
.fig svg .tx-amber{fill:var(--amber)} .fig svg .tx-red{fill:var(--red)} .fig svg .tx-mute{fill:var(--text-mute)}
.fig svg .bx{fill:var(--card-2);stroke:var(--line-strong);stroke-width:1.4}
.fig svg .bx-blue{fill:var(--blue-bg);stroke:var(--blue);stroke-width:1.4}
.fig svg .bx-green{fill:var(--forest-bg);stroke:var(--forest);stroke-width:1.4}
.fig svg .bx-amber{fill:var(--amber-bg);stroke:var(--amber);stroke-width:1.4}
.fig svg .bx-rust{fill:var(--rust-bg);stroke:var(--rust);stroke-width:1.4}
.fig svg .bx-red{fill:var(--red-bg);stroke:var(--red);stroke-width:1.4}
.fig svg .bx-violet{fill:var(--violet-bg);stroke:var(--violet);stroke-width:1.4}
.fig svg .bx-ink{fill:var(--ink);stroke:var(--ink)}
.fig svg .bx-ink + text,.fig svg text.on-ink{fill:var(--paper)}
.fig svg .bx-none{fill:none;stroke:var(--line-strong);stroke-width:1.2;stroke-dasharray:5 4}
.fig svg .zone{fill:var(--paper-2);stroke:var(--line);stroke-width:1}
.fig svg .ln{stroke:var(--text-soft);stroke-width:1.6;fill:none}
.fig svg .ln-d{stroke:var(--text-soft);stroke-width:1.4;fill:none;stroke-dasharray:6 5}
.fig svg .ln-rust{stroke:var(--rust);stroke-width:1.8;fill:none}
.fig svg .ln-blue{stroke:var(--blue);stroke-width:1.8;fill:none}
.fig svg .ln-green{stroke:var(--forest);stroke-width:1.8;fill:none}
.fig svg .ln-red{stroke:var(--red);stroke-width:1.8;fill:none}
.fig svg .ln-amber{stroke:var(--amber);stroke-width:1.8;fill:none}
.fig svg .dot{fill:var(--rust)}
.fig svg .fill-rust{fill:var(--rust)} .fig svg .fill-blue{fill:var(--blue)} .fig svg .fill-green{fill:var(--forest)}
.fig svg .fill-amber{fill:var(--amber)} .fig svg .fill-red{fill:var(--red)} .fig svg .fill-ink{fill:var(--ink)}

/* 考古題連結與例題 */
.exam-ref{margin:.8em 0;display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:.88em}
.exam-ref::before{content:"考古題";font-weight:700;color:var(--text-soft);margin-right:2px}
.exam-ref a{display:inline-block;text-decoration:none;color:var(--blue);background:var(--blue-bg);border-radius:99px;padding:1px 10px;font-family:var(--mono);font-size:.92em}
.worked{border:1px solid var(--line);border-radius:var(--radius);margin:1.2em 0;background:var(--card);overflow:hidden}
.worked .wq{padding:14px 16px;border-bottom:1px dashed var(--line)}
.worked .wq .wq-src{font-size:.8em;color:var(--text-mute);font-family:var(--mono)}
.worked .wq .wq-stem{font-weight:600;margin:.2em 0 .5em}
.worked .wq ol{list-style:upper-alpha;margin:0;padding-left:1.6em}
.worked .wq li.ans{color:var(--forest);font-weight:700}
.worked .wa{padding:12px 16px;background:var(--forest-bg)}
.worked .wa::before{content:"解題思路";display:block;font-weight:700;color:var(--forest);font-size:.88em;margin-bottom:.2em}

/* 只看重點模式：隱藏一般段落 */
.doc.focus p:not(.box p):not(.lead),.doc.focus .ch-intro .goals,.doc.focus h4{display:none}
.doc.focus figure.fig{opacity:.98}
.fig-defs .m-soft{fill:var(--text-soft)} .fig-defs .m-rust{fill:var(--rust)} .fig-defs .m-blue{fill:var(--blue)}
.fig-defs .m-green{fill:var(--forest)} .fig-defs .m-red{fill:var(--red)} .fig-defs .m-amber{fill:var(--amber)}
@media (max-width:640px){
  .doc{font-size:calc(16.5px * var(--read))}
  .ch-intro{padding:14px 15px}
  .box{padding:10px 12px}
  ol.hot>li{padding:9px 10px;gap:8px}
  figure.fig{padding:10px 8px 8px;margin-left:-6px;margin-right:-6px}
}

/* 課堂教材專區：白話解釋框 */
.box.plain{background:var(--violet-bg);border-color:color-mix(in srgb,var(--violet) 32%,transparent)}
.box.plain>.box-t{color:var(--violet);--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3a6 6 0 00-4 10.5c.6.5 1 1.3 1 2.1V17h6v-1.4c0-.8.4-1.6 1-2.1A6 6 0 0012 3zM9 20h6v1H9v-1zm1 2h4v1h-4z'/%3E%3C/svg%3E")}