/* 藥物比較練習 — 視覺系統
   色彩取自 pH 廣用試紙：酸端緋紅、中性端藍綠、紫端做為底紙。
   中文標題用宋體重量級，英文藥名與數據一律等寬——像實驗紀錄。 */

:root{
  --paper:#F1EEF4;
  --surface:#FFFFFF;
  --ink:#1A1420;
  --ink-2:#4A4152;
  --ink-3:#7C7388;
  --line:#DCD5E3;
  --line-2:#EBE6EF;
  --acid:#B4123F;
  --acid-soft:#FBEDF1;
  --amber:#9C5C0E;
  --amber-soft:#FBF2E4;
  --neutral:#1C6B80;
  --neutral-soft:#E7F1F4;
  --olive:#48733F;
  --shadow:0 1px 2px rgba(26,20,32,.06), 0 8px 24px -16px rgba(26,20,32,.35);
  --dot-empty:#CBC1D6;
  --hero-bg:#1A1420;
  --hero-text:#F8F4FA;
  --hero-muted:#D6CDDF;
  --hero-subtle:#B9AEC6;
  --hero-line:#4A4058;
  --field-bg:#FAF9FB;
  --dim-bg:#FBFAFC;
  --meter-bg:rgba(241,238,244,.94);
  --on-strong:#FFFFFF;
  --accent-hover:#96082F;
  --pill-warn-line:#E8D6B8;
  --pill-ok-line:#C9E0E7;
  --meter-h:86px;
  --display:"Noto Serif TC", "Songti TC", serif;
  --body:"Noto Sans TC", system-ui, sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, monospace;
}

:root[data-theme="dark"]{
  color-scheme:dark;
  --paper:#100D14;
  --surface:#1A1520;
  --ink:#F5EFF8;
  --ink-2:#D0C5D6;
  --ink-3:#B4A9BF;
  --line:#50455C;
  --line-2:#372E40;
  --acid:#FF779E;
  --acid-soft:#351722;
  --amber:#F0B766;
  --amber-soft:#332615;
  --neutral:#72CEE3;
  --neutral-soft:#132D34;
  --olive:#9AD68B;
  --shadow:0 1px 2px rgba(0,0,0,.45), 0 12px 28px -18px rgba(0,0,0,.85);
  --dot-empty:#685B74;
  --hero-bg:#09070C;
  --hero-text:#F8F4FA;
  --hero-muted:#D8CEE0;
  --hero-subtle:#C1B5CB;
  --hero-line:#574B63;
  --field-bg:#211926;
  --dim-bg:#211B27;
  --meter-bg:rgba(16,13,20,.95);
  --on-strong:#19080E;
  --accent-hover:#FF9BBA;
  --pill-warn-line:#6B5128;
  --pill-ok-line:#2E6572;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:calc(var(--meter-h) + 16px)}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--body); font-size:16px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
b,strong{font-weight:700}
button,input,textarea,select{font:inherit; color:inherit}

.skip{position:absolute; left:-999px}
.skip:focus{left:12px; top:12px; z-index:99; background:var(--surface); padding:8px 14px; border-radius:6px}

:focus-visible{outline:2px solid var(--acid); outline-offset:2px}

/* ---------- 日夜模式 ---------- */
.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;
}
.theme-toggle{
  position:fixed; top:12px; right:12px; z-index:60;
  display:grid; place-items:center; width:44px; height:44px; padding:0;
  border:1px solid var(--line); border-radius:50%;
  background:var(--surface); color:var(--ink); box-shadow:var(--shadow);
  cursor:pointer; transition:transform .16s, border-color .16s, background .16s;
}
.theme-toggle:hover{transform:translateY(-1px); border-color:var(--acid)}
.theme-toggle__icon{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.theme-toggle__icon--sun{display:none}
:root[data-theme="dark"] .theme-toggle__icon--sun{display:block}
:root[data-theme="dark"] .theme-toggle__icon--moon{display:none}

/* ---------- Hero ---------- */
.hero{background:var(--hero-bg); color:var(--hero-text); padding:56px 24px 48px}
.hero-inner{max-width:960px; margin:0 auto}
.eyebrow{
  margin:0 0 26px; font-family:var(--mono); font-size:12px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--hero-subtle);
}
.eyebrow .dot{margin:0 10px; color:var(--acid)}
.lead{
  margin:0; font-family:var(--display); font-weight:900;
  font-size:clamp(38px,7.2vw,72px); line-height:1.08; letter-spacing:.01em;
}
.sub{margin:18px 0 0; font-size:clamp(17px,2.2vw,21px); color:var(--hero-muted); max-width:36ch}
.howto{
  margin:30px 0 0; padding-top:22px; border-top:1px solid var(--hero-line);
  font-size:14.5px; color:var(--hero-subtle); max-width:62ch;
}
.howto b{color:var(--hero-text); font-family:var(--mono)}
.hero-meta{display:flex; flex-wrap:wrap; gap:14px; margin-top:28px}
.field{display:flex; flex-direction:column; gap:6px}
.field span{font-family:var(--mono); font-size:11px; letter-spacing:.12em; color:var(--hero-subtle); text-transform:uppercase}
.field input{
  background:transparent; border:0; border-bottom:1px solid var(--hero-line); color:var(--hero-text);
  padding:6px 2px; min-width:150px; font-size:15px;
}
.field input:focus{border-bottom-color:var(--acid); outline:none}

/* ---------- 滴定條：28 格 = 4 藥 x 7 維度 ---------- */
.meter{position:sticky; top:0; z-index:30; background:var(--meter-bg); backdrop-filter:blur(8px); border-bottom:1px solid var(--line)}
.meter-inner{
  max-width:960px; margin:0 auto; padding:14px 24px;
  display:flex; align-items:center; gap:20px; flex-wrap:wrap;
}
.strip{display:flex; gap:10px; flex:1 1 320px; min-width:0}
.strip-group{display:flex; gap:3px}
.dot-cell{
  width:11px; height:22px; padding:0; border:1px solid var(--dot-empty);
  background:var(--surface); border-radius:1.5px; cursor:pointer;
  transition:background .18s, border-color .18s;
}
.dot-cell:hover{border-color:var(--ink-3)}
.dot-cell.filled{background:var(--ink); border-color:var(--ink)}
.dot-cell.endpoint{position:relative}
.dot-cell.endpoint::after{
  content:""; position:absolute; left:-3px; top:-5px; bottom:-5px; width:1px; background:var(--acid);
}
.meter-read{display:flex; align-items:baseline; gap:10px; white-space:nowrap}
.count{font-family:var(--mono); font-size:20px; font-weight:600}
.count .of{font-size:13px; color:var(--ink-3); font-weight:400}
.state{font-size:12.5px; color:var(--ink-3)}
.meter.done .count{color:var(--neutral)}
.meter-act{display:flex; gap:8px; margin-left:auto}

/* ---------- 按鈕 ---------- */
.btn{
  border:1px solid var(--line); background:var(--surface); color:var(--ink);
  padding:9px 16px; border-radius:4px; cursor:pointer; font-size:14px;
  transition:border-color .15s, background .15s;
}
.btn:hover{border-color:var(--ink-3)}
.btn-primary{background:var(--acid); border-color:var(--acid); color:var(--on-strong)}
.btn-primary:hover{background:var(--accent-hover); border-color:var(--accent-hover)}
.btn-primary:disabled{background:transparent; color:var(--ink-3); border-color:var(--line); cursor:not-allowed}
.btn-ghost{background:transparent; border-color:transparent; color:var(--ink-3); text-decoration:underline; text-underline-offset:3px}
.btn-ghost:hover{color:var(--acid); border-color:transparent}

/* ---------- 版塊 ---------- */
main{max-width:960px; margin:0 auto; padding:0 24px}
.part{padding:64px 0 8px; border-top:1px solid var(--line); margin-top:56px}
#part1{border-top:0; margin-top:0}
.part-head{max-width:60ch; margin-bottom:32px}
.part-no{margin:0 0 8px; font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--acid)}
.part h2{margin:0; font-family:var(--display); font-weight:900; font-size:clamp(26px,4vw,36px); line-height:1.2}
.part-lede{margin:12px 0 0; color:var(--ink-2); font-size:15px}

/* ---------- 比較表 ---------- */
.grid{background:var(--surface); border:1px solid var(--line); border-radius:6px; box-shadow:var(--shadow); overflow:clip}
.row{display:grid; grid-template-columns:148px repeat(4,1fr); border-top:1px solid var(--line-2)}
.row:first-child{border-top:0}
.row-head{position:sticky; top:var(--meter-h); z-index:20; background:var(--surface); border-bottom:1px solid var(--line)}
.head-cell{padding:14px; font-family:var(--mono); font-size:13px; font-weight:600; letter-spacing:-.01em}
.head-cell.corner{color:var(--ink-3); font-size:11px; letter-spacing:.1em; text-transform:uppercase; font-weight:400}
.dim{padding:16px 14px; font-size:14px; font-weight:500; color:var(--ink-2); background:var(--dim-bg); border-right:1px solid var(--line-2)}
.cell{padding:10px; border-right:1px solid var(--line-2)}
.cell:last-child{border-right:0}
.cell-drug{display:none; font-family:var(--mono); font-size:11px; color:var(--ink-3); margin-bottom:4px}
.cell textarea{
  width:100%; border:1px solid transparent; background:var(--field-bg); border-radius:4px;
  padding:8px 9px; resize:none; min-height:64px; font-size:14px; line-height:1.55; overflow:hidden;
}
.cell textarea::placeholder{color:var(--ink-3)}
.cell textarea:hover{border-color:var(--line)}
.cell textarea:focus{background:var(--surface); border-color:var(--acid); outline:none}
.cell.filled textarea{background:var(--surface)}

/* 解鎖後的參考答案 */
.ref{margin-top:8px; padding:10px 11px; border-left:2px solid var(--neutral); background:var(--neutral-soft); border-radius:0 4px 4px 0}
.ref-label{font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--neutral); display:block; margin-bottom:5px}
.ref-text{margin:0; font-size:13.5px; line-height:1.6}
.ref-src{margin:7px 0 0; font-family:var(--mono); font-size:11px; color:var(--ink-3); line-height:1.5}
.ref-src span{display:block}
.ref.uncertain{border-left-color:var(--amber); background:var(--amber-soft)}
.ref.uncertain .ref-label{color:var(--amber)}
.ref-note{margin:6px 0 0; font-size:12.5px; color:var(--amber)}
.check{display:flex; gap:4px; margin-top:8px}
.check button{
  flex:1 1 0; min-width:0; padding:5px 2px; font-size:11px; white-space:nowrap;
  border:1px solid var(--line); background:var(--surface); border-radius:3px;
  cursor:pointer; color:var(--ink-3);
}
.check button:hover{border-color:var(--ink-3); color:var(--ink)}
.check button[aria-pressed="true"]{background:var(--ink); border-color:var(--ink); color:var(--paper)}
.nhi-note{
  margin:14px 0 0; padding:11px 14px; border-left:2px solid var(--amber); background:var(--amber-soft);
  font-size:13px; color:var(--amber); border-radius:0 4px 4px 0;
}

/* ---------- 情境題 ---------- */
.case{background:var(--surface); border:1px solid var(--line); border-radius:6px; box-shadow:var(--shadow); padding:26px; margin-bottom:20px}
.case-vitals{margin:0 0 6px; font-family:var(--mono); font-size:12px; letter-spacing:.06em; color:var(--acid)}
.case-body{margin:0 0 22px; font-size:16.5px; line-height:1.7; font-weight:500; max-width:58ch}
.picks{display:flex; gap:16px; flex-wrap:wrap; margin-bottom:18px}
.pick{display:flex; flex-direction:column; gap:6px; min-width:210px; flex:1}
.pick > span{font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3)}
.pick select{padding:9px 10px; border:1px solid var(--line); border-radius:4px; background:var(--surface); font-size:14px}
.pick select:focus{border-color:var(--acid); outline:none}
.block-label{display:block; font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin-bottom:7px}
.case textarea, #sources{
  width:100%; border:1px solid var(--line); border-radius:4px; padding:10px 11px;
  background:var(--field-bg); resize:vertical; font-size:14.5px; line-height:1.6;
}
.case textarea:focus, #sources:focus{background:var(--surface); border-color:var(--acid); outline:none}
.solution{margin-top:20px; padding-top:20px; border-top:1px solid var(--line-2)}
.verdict{display:flex; gap:22px; flex-wrap:wrap; margin:0 0 16px}
.verdict div{display:flex; flex-direction:column; gap:3px}
.verdict span{font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3)}
.verdict b{font-family:var(--mono); font-size:16px}
.v-pick b{color:var(--neutral)}
.v-avoid b{color:var(--acid)}
.sol-h{margin:16px 0 5px; font-size:13px; font-weight:700}
.sol-p{margin:0; font-size:14px; line-height:1.7; color:var(--ink-2)}
.sol-alt{border-left:2px solid var(--olive); padding-left:12px; margin-top:16px}
.sol-alt .sol-h{color:var(--olive); margin-top:0}
.sol-caveat{margin-top:14px; font-size:13px; color:var(--ink-3)}

/* ---------- 第三部分 ---------- */
.card{background:var(--surface); border:1px solid var(--line); border-radius:6px; box-shadow:var(--shadow); padding:26px}
.block{margin-bottom:24px}
.block:last-child{margin-bottom:0}
.scale{display:flex; gap:6px}
.scale button{
  width:46px; height:40px; border:1px solid var(--line); background:var(--surface);
  border-radius:4px; cursor:pointer; font-family:var(--mono); font-size:15px;
}
.scale button:hover{border-color:var(--ink-3)}
.scale button[aria-checked="true"]{background:var(--ink); border-color:var(--ink); color:var(--paper)}
.scale-hint{margin:8px 0 0; font-size:12.5px; color:var(--ink-3)}
.tally{display:flex; gap:10px; flex-wrap:wrap}
.tally-item{border:1px solid var(--line); border-radius:4px; padding:10px 16px; min-width:110px}
.tally-item b{display:block; font-family:var(--mono); font-size:22px; line-height:1.2}
.tally-item span{font-size:12px; color:var(--ink-3)}
.actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:24px}
.storage-note{margin:14px 0 0; font-size:12.5px; color:var(--ink-3); max-width:64ch}

/* ---------- 主題選單 ---------- */
.hero .back{color:var(--hero-subtle); text-decoration:none; border-bottom:1px solid var(--hero-line)}
.hero .back:hover{color:var(--hero-text); border-bottom-color:var(--acid)}
.menu{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:14px}
.menu-group{
  grid-column:1/-1; margin:18px 0 0; font-family:var(--mono); font-size:11px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3);
}
.menu-group:first-child{margin-top:0}
.topic{
  display:block; padding:20px; background:var(--surface); border:1px solid var(--line);
  border-radius:6px; box-shadow:var(--shadow); color:inherit; text-decoration:none;
  transition:border-color .15s, transform .15s;
}
.topic:hover{border-color:var(--ink-3); transform:translateY(-2px)}
.topic-top{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap}
.topic h3{margin:0; font-family:var(--display); font-weight:900; font-size:20px; line-height:1.25}
.tag{font-family:var(--mono); font-size:10px; padding:2px 7px; border-radius:99px; white-space:nowrap}
.tag-ok{background:var(--neutral-soft); color:var(--neutral)}
.tag-warn{background:var(--amber-soft); color:var(--amber)}
.topic-drugs{margin:8px 0 0; font-family:var(--mono); font-size:11.5px; line-height:1.7; color:var(--ink-3)}
.topic-dots{display:grid; grid-template-columns:repeat(14,1fr); gap:3px; margin:16px 0 10px}
.topic-dot{height:10px; border:1px solid var(--dot-empty); border-radius:1.5px}
.topic-dot.filled{background:var(--ink); border-color:var(--ink)}
.topic-status{margin:0; font-size:12.5px; color:var(--ink-3)}

/* ---------- 頁尾 ---------- */
.foot{max-width:960px; margin:64px auto 0; padding:28px 24px 56px; border-top:1px solid var(--line); font-size:13px; color:var(--ink-3)}
.foot p{margin:0 0 7px}
.foot-dim{margin-top:14px; font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase}
.pill{display:inline-block; padding:4px 10px; border-radius:99px; font-size:12px; font-family:var(--mono)}
.pill-warn{background:var(--amber-soft); color:var(--amber); border:1px solid var(--pill-warn-line)}
.pill-ok{background:var(--neutral-soft); color:var(--neutral); border:1px solid var(--pill-ok-line)}

.print-head, .cell-print, .print-only{display:none}

/* ---------- 手機（限 screen，列印不套用） ---------- */
@media screen and (max-width:820px){
  .hero{padding:40px 20px 36px}
  main{padding:0 20px}
  .meter-inner{padding:12px 20px; gap:12px}
  .meter-act{width:100%; margin-left:0}
  .meter-act .btn{flex:1}
  .dot-cell{width:9px; height:18px}
  .row-head{display:none}
  .row{grid-template-columns:1fr; border-top:0}
  .dim{
    position:sticky; top:var(--meter-h); z-index:15;
    border-right:0; border-top:1px solid var(--line); background:var(--ink); color:var(--paper);
    font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  }
  .row:first-child .dim{border-top:0}
  .cell{border-right:0; border-top:1px solid var(--line-2)}
  .cell-drug{display:block}
}

@media screen and (prefers-reduced-motion:reduce){
  *{transition:none !important; animation:none !important}
  html{scroll-behavior:auto}
}

/* ---------- 列印 ----------
   A4 內容寬只有 186mm（約 703px），比手機斷點還窄，所以上面的手機規則
   一律限定 screen，否則列印會被拆成單欄、印出十來頁。 */
@media print{
  @page{size:A4; margin:12mm}
  :root{--shadow:none}
  html,body{background:#fff; color:#000; font-size:9pt; line-height:1.45}
  .hero,.meter,.theme-toggle,.actions,.storage-note,.skip,.check,.scale-hint,
  .part-lede,.part-no,.cell-drug{display:none !important}

  .print-head{display:block; margin:0 0 6mm; border-bottom:1.5pt solid #000; padding-bottom:3mm}
  .ph-title{margin:0 0 2mm; font-family:var(--display); font-weight:900; font-size:14pt}
  .ph-meta{margin:0; display:flex; gap:9mm; font-size:9.5pt}
  .ph-flag{margin:2mm 0 0; font-size:9pt; font-weight:700}

  main{max-width:none; padding:0}
  .part{padding:0; margin:0; border-top:0}
  #part2{break-before:page; padding-top:0}
  #part3{padding-top:0}
  .part-head{margin-bottom:3mm}
  .part h2{font-size:12pt; margin-bottom:0}

  /* 比較表維持 4 欄，整列不跨頁 */
  .grid,.card,.case{box-shadow:none; border:.75pt solid #000; border-radius:0}
  .row{grid-template-columns:22mm repeat(4,1fr); border-top:.5pt solid #666; break-inside:avoid}
  .row-head{position:static; border-bottom:.75pt solid #000; break-after:avoid}
  .head-cell{padding:1.5mm; font-size:8.5pt}
  .head-cell.corner{font-size:7pt}
  .dim{padding:1.5mm; font-size:8.5pt; font-weight:700; color:#000; background:#fff; border-right:.5pt solid #666}
  .cell{padding:1.5mm; border-right:.5pt solid #ccc}
  .cell textarea,.case textarea,#sources,.pick select{display:none}
  .cell-print,.print-only{display:block; font-size:8.5pt; line-height:1.4}
  .cell-print{min-height:7mm; border-bottom:.5pt dotted #999; padding-bottom:1mm}
  .cell-print:empty::before{content:"（未填）"; color:#888}

  .ref{background:#fff; border-left:1pt solid #000; padding:1.5mm 2mm; margin-top:1.5mm; border-radius:0}
  .ref.uncertain{border-left-style:dashed}
  .ref-label{font-size:6.5pt; margin-bottom:1mm; color:#000}
  .ref-text{font-size:8pt; line-height:1.4}
  .ref-note{font-size:7.5pt; color:#000; font-style:italic}
  .ref-src{font-size:6.5pt; margin-top:1mm; color:#444}
  .nhi-note{background:#fff; border-left:1pt dashed #000; color:#000; font-size:8pt; padding:2mm; border-radius:0}

  /* 情境題：整張卡片盡量不跨頁，跨頁時至少不切斷解析區塊 */
  .case{padding:3.5mm; margin-bottom:4mm; break-inside:avoid}
  .case-vitals{color:#000; font-size:8.5pt}
  .case-body{font-size:10pt; margin-bottom:3mm}
  .picks{gap:9mm; margin-bottom:3mm}
  .pick{min-width:0}
  .verdict,.sol-alt{break-inside:avoid}
  .sol-p{color:#000; font-size:8.5pt}
  .solution{margin-top:3mm; padding-top:3mm}

  .card{padding:3.5mm}
  .block{margin-bottom:7mm}
  #sources-print{border-bottom:.5pt dotted #999; padding-bottom:1.5mm; min-height:6mm}
  .block-label{color:#000; font-size:7.5pt; margin-bottom:1.5mm}
  .scale button{display:none}
  .scale button[aria-checked="true"]{
    display:block; border:.75pt solid #000; width:auto; height:auto; padding:1mm 4mm;
    background:#fff !important; color:#000 !important; font-size:11pt;
  }
  .tally{gap:3mm}
  .tally-item{border:.75pt solid #000; padding:2mm 4mm; min-width:0}
  .tally-item b{font-size:13pt}
  .foot{margin-top:5mm; padding:2.5mm 0 0; font-size:7.5pt; color:#000; break-inside:avoid}
  .pill{border:.5pt solid #000 !important; background:#fff !important; color:#000 !important}
  a[href]::after{content:""}
}