:root{
  --paper:#faf8f4; --surface:#fff; --ink:#1a1f2e; --ink-soft:#4a5468; --ink-faint:#7c869c;
  --navy:#16233f; --navy-soft:#26365a; --gold:#b8933f; --gold-soft:#d9bd77;
  --line:#e6e1d8; --line-soft:#f0ece4; --save:#1f7a4d; --warn:#9a3412;
  --radius:10px; --wrap:920px;
  --sans:"Noto Sans TC","PingFang TC","Helvetica Neue",Arial,sans-serif;
}
:root:not([data-theme=light]){ }
@media (prefers-color-scheme:dark){ :root:not([data-theme=light]){
  --paper:#12151c; --surface:#181c26; --ink:#eceef3; --ink-soft:#a8b0c0; --ink-faint:#7b8496;
  --navy:#0e1626; --navy-soft:#1b2740; --gold:#d9bd77; --gold-soft:#b8933f;
  --line:#2a3040; --line-soft:#222736; --save:#5fbf8e; --warn:#f0a070;
}}
:root[data-theme=dark]{
  --paper:#12151c; --surface:#181c26; --ink:#eceef3; --ink-soft:#a8b0c0; --ink-faint:#7b8496;
  --navy:#0e1626; --navy-soft:#1b2740; --gold:#d9bd77; --gold-soft:#b8933f;
  --line:#2a3040; --line-soft:#222736; --save:#5fbf8e; --warn:#f0a070;
}

*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);
     font-size:16px;line-height:1.75;-webkit-font-smoothing:antialiased}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
a{color:inherit}
h1,h2,h3{line-height:1.35;letter-spacing:-.01em}
h1{font-size:clamp(1.7rem,4.5vw,2.5rem);margin:.2em 0 .5em}
h2{font-size:clamp(1.25rem,3vw,1.6rem);margin:2.2em 0 .7em;padding-bottom:.35em;border-bottom:2px solid var(--line)}
h3{font-size:1.08rem;margin:1.8em 0 .4em}
p{margin:.8em 0}
code{background:var(--line-soft);padding:.12em .42em;border-radius:5px;
     font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.92em;letter-spacing:.02em}

/* nav */
.nav{background:var(--navy);color:#fff;position:sticky;top:0;z-index:10;
     border-bottom:2px solid var(--gold)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;
           min-height:58px;flex-wrap:wrap}
.nav a{text-decoration:none;color:#fff}
.brand{font-weight:700;letter-spacing:.02em}
.nav nav{display:flex;gap:18px;align-items:center;font-size:.93rem}
.nav nav a{color:#cdd5e4}
.nav nav a:hover{color:#fff}
.nav nav a.cta{background:var(--gold);color:var(--navy);font-weight:700;
               padding:.32em .9em;border-radius:99px}

/* hero：批改過的考卷 */
:root{--pen:#c0392b;--grid:rgba(22,35,63,.06);--hl:rgba(242,201,76,.45)}
@media (prefers-color-scheme:dark){ :root:not([data-theme=light]){--pen:#ff7a6b;--grid:rgba(255,255,255,.04);--hl:rgba(242,201,76,.28)}}
:root[data-theme=dark]{--pen:#ff7a6b;--grid:rgba(255,255,255,.04);--hl:rgba(242,201,76,.28)}
.hero{background-color:var(--paper);
      background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
      background-size:24px 24px;
      padding:clamp(40px,7vw,80px) 0 clamp(36px,6vw,64px);border-bottom:1px solid var(--line)}
.hero h1{font-family:"Noto Serif TC",var(--sans);font-weight:900;color:var(--ink);
         font-size:clamp(1.9rem,4.4vw,2.6rem);line-height:1.3;letter-spacing:.01em;margin:.25em 0 .5em}
.hero .mark{white-space:nowrap;background:linear-gradient(transparent 58%,var(--hl) 58%,var(--hl) 92%,transparent 92%);padding:0 .05em}
.eyebrow{color:var(--gold);font-size:.9rem;letter-spacing:.06em;margin:0;font-weight:600}
.hero .lede{color:var(--ink-soft);max-width:34em;font-size:1.05rem}
.proof{color:var(--ink-faint);font-size:.9rem;margin-top:1.4em}
.proof strong{color:var(--ink)}
.proof.small{font-size:.83rem;color:var(--ink-faint);margin-top:.9em}
.hero .btn.primary{background:var(--navy);border-color:var(--navy);color:#fff}
.hero .btn.primary:hover{background:var(--navy-soft);border-color:var(--navy-soft)}
@media (prefers-color-scheme:dark){ :root:not([data-theme=light]) .hero .btn.primary{background:var(--gold);border-color:var(--gold);color:#1a1405}}
:root[data-theme=dark] .hero .btn.primary{background:var(--gold);border-color:var(--gold);color:#1a1405}
.hero .btn.ghost{color:var(--ink)}

/* buttons */
.actions{display:flex;gap:12px;flex-wrap:wrap;margin:1.5em 0 0}
.btn{display:inline-block;text-decoration:none;padding:.62em 1.35em;border-radius:99px;
     font-weight:600;font-size:.96rem;border:1.5px solid transparent;transition:.15s}
.btn.primary{background:var(--gold);color:#1a1405;border-color:var(--gold)}
.btn.primary:hover{background:var(--gold-soft)}
.btn.ghost{border-color:currentColor;opacity:.85}
.btn.ghost:hover{opacity:1}

.block{padding:6px 20px 30px}
.lede{font-size:1.05rem;color:var(--ink-soft)}
.note{color:var(--ink-faint);font-size:.92rem}
.warn{color:var(--warn);background:color-mix(in srgb,var(--warn) 10%,transparent);
      padding:.8em 1em;border-radius:var(--radius);font-size:.93rem}

/* school cards */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;margin-top:1.2em}
.card{display:block;text-decoration:none;background:var(--surface);border:1px solid var(--line);
      border-radius:var(--radius);padding:16px 18px;transition:.15s}
.card:hover{border-color:var(--gold);transform:translateY(-2px)}
.card h3{margin:0;font-size:1.15rem}
.card .full{margin:.15em 0 .5em;font-size:.82rem;color:var(--ink-faint)}
.card .meta{margin:0;font-size:.85rem;color:var(--ink-soft)}

/* 上下標：指數、註標，行高不被撐開 */
sup,sub{font-size:.72em;line-height:0;position:relative;vertical-align:baseline;
        font-variant-numeric:tabular-nums}
sup{top:-.48em}
sub{bottom:-.2em}
code sup,code sub{font-size:.8em}

/* 引用區塊：⚠️ 注意事項用 */
blockquote{margin:1.2em 0;padding:.9em 1.1em;background:var(--line-soft);
           border-left:4px solid var(--gold);border-radius:0 var(--radius) var(--radius) 0}
blockquote > :first-child{margin-top:0}
blockquote > :last-child{margin-bottom:0}
blockquote p{margin:.6em 0}
blockquote ul,blockquote ol{margin:.6em 0}
blockquote blockquote{margin:.7em 0;background:transparent;border-left-width:2px;padding:.1em 0 .1em .9em}
blockquote .tw{margin:.8em 0}
blockquote table{background:var(--paper)}

/* tables */
.tw{overflow-x:auto;margin:1.2em 0}
table{border-collapse:collapse;width:100%;font-size:.95rem;background:var(--surface)}
th,td{padding:.62em .85em;border-bottom:1px solid var(--line);text-align:left}
thead th{background:var(--line-soft);font-size:.86rem;color:var(--ink-soft);
         letter-spacing:.03em;border-bottom:2px solid var(--line)}
td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
td.total{font-weight:700}
td.save{color:var(--save);font-weight:600}
.tag{display:inline-block;margin-left:.5em;background:var(--gold);color:#1a1405;
     font-size:.72rem;padding:.1em .55em;border-radius:99px;font-weight:700}

/* authors / bonus / bank */
.authors,.bank{background:var(--surface);border:1px solid var(--line);
               border-left:3px solid var(--gold);border-radius:var(--radius);padding:14px 18px;margin:1.2em 0}
.authors p,.bank p{margin:.35em 0}
.lbl{display:inline-block;min-width:5.5em;color:var(--ink-faint);font-size:.85rem}
.bank code{font-size:1.05rem;font-weight:700;letter-spacing:.06em}
.bonus{margin:1em 0;padding-left:1.3em}
.bonus li{margin:.3em 0}

/* buy page */
.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin:1.5em 0}
.opt{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:20px}
.opt.recommend{border-color:var(--gold);box-shadow:0 2px 16px color-mix(in srgb,var(--gold) 18%,transparent)}
.badge{display:inline-block;background:var(--gold);color:#1a1405;font-size:.78rem;font-weight:700;
       padding:.2em .8em;border-radius:99px;margin:0}
.badge.alt{background:var(--line-soft);color:var(--ink-soft)}
.big{font-size:2rem;font-weight:700;margin:.35em 0 .1em;letter-spacing:-.02em}
.big span{font-size:.85rem;font-weight:400;color:var(--ink-faint)}
.opt ul{padding-left:1.2em;margin:.8em 0;font-size:.93rem;color:var(--ink-soft)}
.opt li{margin:.25em 0}
.opt .actions{margin-top:1.2em}
.steps{padding-left:1.3em}
.steps li{margin:.5em 0}

/* exam index */
.sblock{margin:1.8em 0}
.sblock h3{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:.5em;
           padding-bottom:.35em;border-bottom:1px solid var(--line)}
.sblock h3 a{text-decoration:none}
.sblock .meta{font-size:.82rem;color:var(--ink-faint);font-weight:400}
.sblock.empty h3{color:var(--ink-faint)}
.plist{list-style:none;padding:0;margin:0;display:grid;
       grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px}
.plist a{display:block;text-decoration:none;padding:.42em .7em;border-radius:7px;
         background:var(--surface);border:1px solid var(--line);font-size:.9rem;transition:.12s}
.plist a:hover{border-color:var(--gold)}
.plist a.ov{grid-column:span 2;border-color:var(--gold);font-weight:600;
            background:color-mix(in srgb,var(--gold) 7%,var(--surface))}
@media(max-width:420px){.plist a.ov{grid-column:span 1}}
details.years{margin-top:8px}
details.years summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:.4em;
     font-size:.86rem;color:var(--ink-soft);padding:.3em 0;user-select:none}
details.years summary::-webkit-details-marker{display:none}
details.years summary::before{content:"";width:.45em;height:.45em;border-right:1.5px solid currentColor;
     border-bottom:1.5px solid currentColor;transform:rotate(-45deg);transition:transform .15s}
details.years[open] summary::before{transform:rotate(45deg)}
details.years summary:hover{color:var(--gold)}
details.years .plist{margin-top:6px}
.plist.big{grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.plist.big a{padding:12px 14px}
.plist.big strong{display:block;font-size:.98rem}
.plist.big span{display:block;font-size:.83rem;color:var(--ink-faint);margin-top:.2em;line-height:1.5}

/* paper page */
.paper .eyebrow{color:var(--ink-faint)}
.paper .eyebrow a{color:var(--ink-faint)}
.prose h2{font-size:1.2rem;border:none;margin:1.8em 0 .5em;padding:0;
          border-left:3px solid var(--gold);padding-left:.6em}
.prose h3{font-size:1rem}
.prose ul,.prose ol{padding-left:1.4em}
.prose li{margin:.35em 0}
.sell{background:var(--surface);border:1px solid var(--gold);border-radius:var(--radius);
      padding:20px;margin:2.5em 0 1em}
.sell p{margin:.4em 0}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-block;text-decoration:none;font-size:.86rem;padding:.35em .8em;
      border:1px solid var(--line);border-radius:99px;background:var(--surface)}
.chip:hover{border-color:var(--gold)}

/* footer */
.foot{background:var(--navy);color:#9daabf;margin-top:60px;padding:30px 0;font-size:.88rem}
.foot p{margin:.3em 0}
.foot strong{color:#fff}
.foot a{color:var(--gold-soft)}
.fine{font-size:.8rem;color:#6b788e;margin-top:1em!important}

@media (max-width:560px){
  .nav .wrap{min-height:52px;padding-top:8px;padding-bottom:8px}
  .nav nav{gap:14px;font-size:.88rem;width:100%}
  .big{font-size:1.7rem}
}
td.muted{color:var(--ink-faint)}

/* ── 訂購表單 ───────────────────────────────── */
.step{margin:2em 0 2.6em}
.step h2{display:flex;align-items:center;gap:.55em;border:none;padding:0;margin:0 0 .8em;font-size:1.15rem}
.step .n{display:inline-flex;align-items:center;justify-content:center;width:1.7em;height:1.7em;
         border-radius:50%;background:var(--navy);color:var(--gold);font-size:.82rem;font-weight:700;flex:none}
:root[data-theme=dark] .step .n,
:root:not([data-theme=light]) .step .n{background:var(--gold);color:var(--navy)}
@media (prefers-color-scheme:light){:root:not([data-theme=dark]) .step .n{background:var(--navy);color:var(--gold)}}

.chks{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px}
.chk{display:flex;align-items:center;gap:.6em;background:var(--surface);border:1px solid var(--line);
     border-radius:var(--radius);padding:11px 13px;cursor:pointer;transition:.12s}
.chk:hover{border-color:var(--gold-soft)}
.chk:has(input:checked){border-color:var(--gold);background:color-mix(in srgb,var(--gold) 9%,var(--surface))}
.chk input{width:17px;height:17px;accent-color:var(--gold);flex:none;cursor:pointer}
.chk span{display:flex;flex-direction:column;line-height:1.35}
.chk em{font-style:normal;font-size:.76rem;color:var(--ink-faint);margin-top:.15em}

.calc{margin-top:14px;background:var(--surface);border:1px solid var(--line);
      border-left:3px solid var(--gold);border-radius:var(--radius);padding:14px 18px}
.calc p{margin:.2em 0}
.calc .empty{color:var(--ink-faint);font-size:.92rem;margin:0}
.calc .sum{font-size:.9rem;color:var(--ink-soft)}
.calc .amt{font-size:1.7rem;font-weight:700;letter-spacing:-.02em}
.calc .amt span{font-size:.8rem;font-weight:400;color:var(--ink-faint);letter-spacing:0}
.calc .disc{font-size:.87rem;color:var(--save);font-weight:600}

.fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.fl{display:flex;flex-direction:column;gap:.35em}
.fl.wide{grid-column:1/-1}
.fl>span{font-size:.88rem;font-weight:600;color:var(--ink-soft)}
.fl>span b{color:var(--warn);font-weight:700}
.fl em{font-style:normal;font-size:.79rem;color:var(--ink-faint)}
.fl input,.fl textarea{font:inherit;font-size:.95rem;padding:.6em .8em;border-radius:8px;
                       border:1px solid var(--line);background:var(--surface);color:var(--ink);width:100%}
.fl input:focus,.fl textarea:focus{outline:2px solid var(--gold);outline-offset:-1px;border-color:transparent}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.msg{margin:1em 0 0;font-size:.92rem;min-height:1.2em}
.msg.bad{color:var(--warn);font-weight:600}
button.btn{cursor:pointer;font-family:inherit}
button.btn:disabled{opacity:.55;cursor:default}
.done{background:var(--surface);border:1px solid var(--gold);border-radius:var(--radius);padding:26px}
.done h2{border:none;margin-top:0;padding:0}

/* 跨年度統整頁 */
.ovlist{display:grid;gap:10px;margin:1.4em 0}
.ovcard{display:block;text-decoration:none;background:var(--surface);border:1px solid var(--gold);
        border-left:4px solid var(--gold);border-radius:var(--radius);padding:14px 18px;transition:.12s}
.ovcard:hover{background:color-mix(in srgb,var(--gold) 8%,var(--surface))}
.ovcard strong{display:block;font-size:1rem}
.ovcard span{display:block;font-size:.85rem;color:var(--ink-faint);margin-top:.25em;line-height:1.55}
.yearnav{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
         padding:14px 18px;margin:1.4em 0}
.yearnav .lbl{margin:0 0 .5em;font-size:.82rem;color:var(--ink-faint);min-width:0}
th.num{text-align:right}