/* ===== 高中數學單元頁 · 共用設計系統 ===== */
:root {
  color-scheme: light dark;
  --paper:#e9edf1; --panel:#ffffff; --panel-2:#f4f6f9;
  --ink:#1b2430; --ink-soft:#586372; --ink-faint:#8b95a3;
  --line:#d2dae2; --grid:rgba(46,74,110,.075); --grid-bold:rgba(46,74,110,.14);
  --y1:#12938a; --y1-wash:#12938a18;
  --y2:#3a6fd0; --y2-wash:#3a6fd018;
  --y3:#7a52d0; --y3-wash:#7a52d018;
  --signal:#d9791c; --signal-wash:#d9791c1a;
  --good:#2e9e5b; --good-wash:#2e9e5b18;
  --warn:#d9791c;
  /* graph palette */
  --g-grid:rgba(46,74,110,.10); --g-axis:#7c8797;
  --g-fn1:#3a6fd0; --g-fn2:#d9791c; --g-fn3:#7a52d0; --g-fn4:#12938a;
  --g-pt:#e0455e; --g-area:#3a6fd028; --g-aux:#9aa6b6;
  --shadow:0 1px 2px rgba(20,35,60,.05),0 8px 26px -14px rgba(20,35,60,.22);
  --mono:ui-monospace,"SF Mono","Cascadia Code","JetBrains Mono",Consolas,monospace;
  --sans:"PingFang TC","Microsoft JhengHei","Noto Sans TC","Heiti TC",system-ui,sans-serif;
  --accent:var(--y1); --accent-wash:var(--y1-wash);
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper:#0c1017; --panel:#141b26; --panel-2:#10161f;
    --ink:#e7ecf3; --ink-soft:#9aa6b6; --ink-faint:#697588;
    --line:#26313f; --grid:rgba(120,155,200,.08); --grid-bold:rgba(120,155,200,.16);
    --y1:#26b8a8; --y1-wash:#26b8a820; --y2:#5f92f0; --y2-wash:#5f92f020;
    --y3:#a684f2; --y3-wash:#a684f220; --signal:#f0a24a; --signal-wash:#f0a24a24;
    --good:#48c07d; --good-wash:#48c07d20;
    --g-grid:rgba(120,155,200,.13); --g-axis:#7c8ba0;
    --g-fn1:#5f92f0; --g-fn2:#f0a24a; --g-fn3:#a684f2; --g-fn4:#26b8a8;
    --g-pt:#ff6b81; --g-area:#5f92f030; --g-aux:#697588;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 30px -14px rgba(0,0,0,.7);
  }
}
:root[data-theme="light"]{--paper:#e9edf1;--panel:#fff;--panel-2:#f4f6f9;--ink:#1b2430;--ink-soft:#586372;--ink-faint:#8b95a3;--line:#d2dae2;--grid:rgba(46,74,110,.075);--grid-bold:rgba(46,74,110,.14);--y1:#12938a;--y1-wash:#12938a18;--y2:#3a6fd0;--y2-wash:#3a6fd018;--y3:#7a52d0;--y3-wash:#7a52d018;--signal:#d9791c;--signal-wash:#d9791c1a;--good:#2e9e5b;--good-wash:#2e9e5b18;--g-grid:rgba(46,74,110,.10);--g-axis:#7c8797;--g-fn1:#3a6fd0;--g-fn2:#d9791c;--g-fn3:#7a52d0;--g-fn4:#12938a;--g-pt:#e0455e;--g-area:#3a6fd028;--g-aux:#9aa6b6;--shadow:0 1px 2px rgba(20,35,60,.05),0 8px 26px -14px rgba(20,35,60,.22);}
:root[data-theme="dark"]{--paper:#0c1017;--panel:#141b26;--panel-2:#10161f;--ink:#e7ecf3;--ink-soft:#9aa6b6;--ink-faint:#697588;--line:#26313f;--grid:rgba(120,155,200,.08);--grid-bold:rgba(120,155,200,.16);--y1:#26b8a8;--y1-wash:#26b8a820;--y2:#5f92f0;--y2-wash:#5f92f020;--y3:#a684f2;--y3-wash:#a684f220;--signal:#f0a24a;--signal-wash:#f0a24a24;--good:#48c07d;--good-wash:#48c07d20;--g-grid:rgba(120,155,200,.13);--g-axis:#7c8ba0;--g-fn1:#5f92f0;--g-fn2:#f0a24a;--g-fn3:#a684f2;--g-fn4:#26b8a8;--g-pt:#ff6b81;--g-area:#5f92f030;--g-aux:#697588;--shadow:0 1px 2px rgba(0,0,0,.4),0 10px 30px -14px rgba(0,0,0,.7);}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; font-family:var(--sans); color:var(--ink);
  background-color:var(--paper);
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:26px 26px; line-height:1.7; -webkit-font-smoothing:antialiased;
}
.page{max-width:940px; margin:0 auto; padding:clamp(16px,3.5vw,40px) clamp(14px,4vw,36px) 80px;}

/* top bar */
.topbar{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:26px;}
.crumb{font-family:var(--mono); font-size:12.5px; letter-spacing:.04em; color:var(--ink-soft); display:flex; flex-wrap:wrap; gap:6px; align-items:center;}
.crumb a{color:var(--ink-soft); text-decoration:none; border-bottom:1px dotted var(--line);}
.crumb a:hover{color:var(--accent);}
.crumb .sep{color:var(--ink-faint);}
.themebtn{flex:none; font-family:var(--mono); font-size:12px; color:var(--ink-soft); background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:7px 12px; cursor:pointer;}
.themebtn:hover{border-color:var(--accent); color:var(--accent);}
.topbar .right{display:flex; gap:8px; align-items:center;}
.tobank{flex:none; font-family:var(--mono); font-size:12px; color:var(--accent); background:var(--accent-wash); border:1px solid transparent; border-radius:8px; padding:7px 12px; text-decoration:none; white-space:nowrap;}
.tobank:hover{border-color:var(--accent);}

/* hero */
.hero{border-left:3px solid var(--accent); padding-left:18px; margin-bottom:34px;}
.hero .eyebrow{font-family:var(--mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); font-weight:600; margin-bottom:8px;}
.hero h1{font-size:clamp(26px,4.6vw,40px); line-height:1.12; margin:0 0 10px; font-weight:800; letter-spacing:-.01em; text-wrap:balance;}
.hero p{margin:0; color:var(--ink-soft); font-size:clamp(15px,1.6vw,17px); max-width:62ch;}

/* section */
section{margin-bottom:34px;}
h2{font-size:21px; font-weight:800; letter-spacing:-.01em; margin:0 0 4px; display:flex; align-items:center; gap:10px;}
h2 .num{font-family:var(--mono); font-size:13px; color:var(--accent); background:var(--accent-wash); border-radius:7px; padding:3px 9px; font-weight:700;}
h2 + .sub{color:var(--ink-faint); font-size:13.5px; margin:0 0 16px;}
h3{font-size:16px; font-weight:700; margin:22px 0 8px;}
p{margin:0 0 12px;}
.lead{font-size:16px;}

/* cards & callouts */
.card{background:var(--panel); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); padding:18px 20px; margin:16px 0;}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.grid2.center{align-items:center;}
@media(max-width:720px){.grid2{grid-template-columns:1fr;}}

.callout{border-radius:12px; padding:13px 16px; margin:14px 0; font-size:14.5px; border:1px solid var(--line);}
.callout .lbl{font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; font-weight:700; display:block; margin-bottom:4px;}
.note{background:var(--y2-wash); border-color:transparent;}
.note .lbl{color:var(--y2);}
.key{background:var(--accent-wash); border-color:transparent;}
.key .lbl{color:var(--accent);}
.warn{background:var(--signal-wash); border-color:transparent;}
.warn .lbl{color:var(--signal);}
.good{background:var(--good-wash); border-color:transparent;}
.good .lbl{color:var(--good);}

/* formula */
.formula{font-family:var(--mono); background:var(--panel-2); border:1px solid var(--line); border-radius:10px; padding:14px 18px; margin:14px 0; font-size:16px; overflow-x:auto; text-align:center; letter-spacing:.01em;}
.formula.lg{font-size:19px;}
.frac{display:inline-flex; flex-direction:column; text-align:center; vertical-align:middle; margin:0 .25em;}
.frac .n{border-bottom:1.5px solid currentColor; padding:0 .4em;}
.frac .d{padding:2px .4em 0;}
sup{font-size:.72em;} sub{font-size:.72em;}
.hl1{color:var(--g-fn1); font-weight:700;} .hl2{color:var(--g-fn2); font-weight:700;}
.hl3{color:var(--g-fn3); font-weight:700;} .hlp{color:var(--g-pt); font-weight:700;}
.hl4{color:var(--g-fn4); font-weight:700;}

/* figure */
.figure{background:var(--panel); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); padding:14px 16px 16px; margin:16px 0;}
.figure .mg-svg{width:100%; height:auto; display:block; background:transparent; border-radius:8px;}
.figcap{font-size:13px; color:var(--ink-soft); margin-top:10px; padding-top:10px; border-top:1px solid var(--line); line-height:1.55;}
.figcap b{color:var(--ink);}
.controls-row{display:flex; flex-wrap:wrap; gap:14px 22px; margin-top:12px;}
.mg-slider{display:flex; flex-direction:column; gap:4px; min-width:150px; flex:1;}
.mg-slider .row{display:flex; justify-content:space-between; align-items:baseline; font-family:var(--mono); font-size:12.5px; color:var(--ink-soft);}
.mg-slider .row b{color:var(--accent); font-size:14px;}
.mg-slider input[type=range]{width:100%; accent-color:var(--accent); cursor:pointer;}
.chipbtns{display:flex; flex-wrap:wrap; gap:8px; margin-top:12px;}
.chipbtns button{font-family:var(--mono); font-size:12.5px; padding:6px 12px; border-radius:8px; border:1px solid var(--line); background:var(--panel-2); color:var(--ink); cursor:pointer;}
.chipbtns button.active{background:var(--accent-wash); border-color:var(--accent); color:var(--accent); font-weight:700;}

/* SVG text defaults */
.mg-svg text{font-family:var(--mono); fill:var(--ink-soft);}
.mg-axis-label{fill:var(--ink-faint); font-size:12px;}
.mg-tick{fill:var(--ink-faint); font-size:10.5px;}

/* lists */
ul.clean{list-style:none; padding:0; margin:12px 0; display:flex; flex-direction:column; gap:9px;}
ul.clean li{padding-left:24px; position:relative; font-size:14.5px;}
ul.clean li::before{content:"▸"; position:absolute; left:4px; color:var(--accent);}
.tbl{width:100%; border-collapse:collapse; font-size:14px; margin:12px 0;}
.tbl th,.tbl td{border:1px solid var(--line); padding:8px 12px; text-align:center;}
.tbl th{background:var(--panel-2); font-family:var(--mono); font-weight:600; color:var(--ink-soft); letter-spacing:.03em;}
.tbl td{font-variant-numeric:tabular-nums;}

/* prev/next nav */
.pager{display:flex; gap:12px; margin-top:44px; padding-top:22px; border-top:1px solid var(--line);}
.pager a{flex:1; text-decoration:none; background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:14px 18px; color:var(--ink); box-shadow:var(--shadow); transition:border-color .15s;}
.pager a:hover{border-color:var(--accent);}
.pager .dir{font-family:var(--mono); font-size:11.5px; color:var(--ink-faint); letter-spacing:.08em;}
.pager .ttl{font-weight:700; margin-top:3px;}
.pager a.next{text-align:right;}
.pager a.disabled{opacity:.4; pointer-events:none;}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}

/* ===== 列印 / 存 PDF：把互動頁轉成靜態講義 ===== */
@media print {
  /* 強制白底深字（即使在深色模式列印也不吃墨），!important 蓋過 data-theme */
  :root{
    --paper:#fff!important; --panel:#fff!important; --panel-2:#fbfbfb!important;
    --ink:#111!important; --ink-soft:#333!important; --ink-faint:#666!important;
    --line:#bbb!important; --shadow:none!important;
  }
  body{ background:#fff!important; background-image:none!important; }
  /* 互動控制項、導覽在紙上沒意義 → 隱藏；SVG 圖形保留為靜態向量圖 */
  .topbar, .themebtn, .controls-row, .chipbtns, .mg-slider, .pager{ display:none!important; }
  .page{ max-width:100%; padding:0 6mm; }
  .figure, .card, .callout, section, .ucard{ break-inside:avoid; page-break-inside:avoid; box-shadow:none!important; }
  h2{ break-after:avoid; }
  a{ color:inherit!important; text-decoration:none; }
  .figure .mg-svg{ max-height:78mm; }   /* 避免單張圖佔滿整頁 */
}