/* ระบบดีไซน์ของเว็บอ่าน สรุป IC Plain — เขียนครั้งเดียว ใช้ทุกบท
   แก้ที่นี่ที่เดียวแล้วทั้ง 22 บทเปลี่ยนตาม โทนสีชุดนี้คุมให้พาสเทลและสบายตา */

:root {
  --paper:#F4F6F2; --page:#FEFFFD; --sunk:#EAEEE6;
  --line:#DEE3D9; --line-soft:#EAEEE4;
  --ink:#1E2622; --ink-2:#4A544D; --ink-3:#77807A;

  /* สีโซน: เข้มพอให้อ่านออก + พื้นอ่อนแบบพาสเทล */
  --z-green:#1B6B58; --z-green-w:#E6F1EC;
  --z-blue:#2B6183;  --z-blue-w:#E5EFF6;
  --z-red:#B04C3C;   --z-red-w:#FAEAE5;
  --z-gold:#95701A;  --z-gold-w:#FAF1DE;

  --wm:rgba(30,38,34,.045);
  --shadow:0 1px 2px rgba(30,45,38,.04), 0 14px 34px -26px rgba(30,45,38,.34);

  --f-display:"Noto Serif Thai", Georgia, serif;
  --f-body:"IBM Plex Sans Thai","Helvetica Neue",Arial,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:#101410; --page:#181D19; --sunk:#1F251F;
    --line:#2E352F; --line-soft:#252B25;
    --ink:#E8ECE5; --ink-2:#B5BDB5; --ink-3:#848D85;
    --z-green:#7FD3BB; --z-green-w:#17332C;
    --z-blue:#8CC7E6;  --z-blue-w:#142C3A;
    --z-red:#EDA294;   --z-red-w:#331F1A;
    --z-gold:#E5BA72;  --z-gold-w:#2F2614;
    --wm:rgba(232,236,229,.04);
    --shadow:0 1px 2px rgba(0,0,0,.45), 0 14px 34px -26px rgba(0,0,0,.85);
  }
}
:root[data-theme="dark"] {
  --paper:#101410; --page:#181D19; --sunk:#1F251F;
  --line:#2E352F; --line-soft:#252B25;
  --ink:#E8ECE5; --ink-2:#B5BDB5; --ink-3:#848D85;
  --z-green:#7FD3BB; --z-green-w:#17332C;
  --z-blue:#8CC7E6;  --z-blue-w:#142C3A;
  --z-red:#EDA294;   --z-red-w:#331F1A;
  --z-gold:#E5BA72;  --z-gold-w:#2F2614;
  --wm:rgba(232,236,229,.04);
  --shadow:0 1px 2px rgba(0,0,0,.45), 0 14px 34px -26px rgba(0,0,0,.85);
}

* { box-sizing:border-box; }
body {
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--f-body); line-height:1.72; -webkit-font-smoothing:antialiased;
  -webkit-user-select:none; user-select:none;
}
img,svg { -webkit-user-drag:none; }
@media print { body { display:none; } }
h1,h2,h3 { font-family:var(--f-display); margin:0; line-height:1.36; text-wrap:balance; }
p { margin:0; }
button { font:inherit; color:inherit; }

/* ---------- แถบบน ---------- */
.topbar {
  position:sticky; top:0; z-index:40; height:54px;
  background:color-mix(in srgb, var(--page) 88%, transparent);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:14px; padding:0 18px;
}
.brand { font-family:var(--f-display); font-weight:700; font-size:15.5px; display:flex; align-items:center; gap:9px; color:var(--ink); text-decoration:none; }
.brand:hover .dot { transform:scale(1.35); }
.brand .dot { transition:transform .18s; }
.brand .dot { width:9px; height:9px; border-radius:50%; background:var(--z-green); }
.crumb { font-size:12.5px; color:var(--ink-3); flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tbtn {
  background:none; border:1px solid var(--line); border-radius:7px; height:32px; min-width:34px;
  padding:0 9px; cursor:pointer; font-size:12.5px; color:var(--ink-2);
  display:inline-flex; align-items:center; transition:background .15s,border-color .15s;
}
.tbtn:hover { background:var(--sunk); border-color:var(--ink-3); }
.tbtn:focus-visible { outline:2px solid var(--z-green); outline-offset:2px; }
.prog { position:absolute; left:0; bottom:-1px; height:2px; background:var(--z-green); width:0; }

.wrap { max-width:820px; margin:0 auto; padding:34px 20px 110px; }
.demo-note {
  border:1px dashed var(--line); border-radius:9px; padding:10px 14px;
  font-size:12.5px; color:var(--ink-3); display:flex; gap:10px; align-items:baseline; margin-bottom:26px;
}
.demo-note b { color:var(--ink-2); font-weight:600; }

/* ---------- หัวบท ---------- */
.hero {
  background:var(--page); border:1px solid var(--line); border-radius:16px;
  padding:28px 28px 24px; box-shadow:var(--shadow); position:relative; overflow:hidden;
}
.hero::before {
  content:""; position:absolute; inset:0 0 auto 0; height:5px;
  background:linear-gradient(90deg, var(--z-green) 0 32%, var(--z-blue) 32% 64%, var(--z-red) 64% 84%, var(--z-gold) 84% 100%);
  opacity:.75;
}
.hero .kicker {
  font-family:var(--f-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--z-green); font-weight:600;
}
.hero h1 { font-size:clamp(26px,4.6vw,38px); margin:9px 0 14px; }
.statline { display:flex; flex-wrap:wrap; gap:10px; }
.stat { display:flex; align-items:baseline; gap:7px; background:var(--sunk); border-radius:9px; padding:7px 13px; }
.stat b { font-family:var(--f-mono); font-size:19px; font-weight:700; font-variant-numeric:tabular-nums; }
.stat span { font-size:12.5px; color:var(--ink-3); }
.stat.hi { background:var(--z-green-w); }
.stat.hi b { color:var(--z-green); }

.maplist { margin-top:20px; padding-top:18px; border-top:1px solid var(--line-soft); display:flex; flex-direction:column; gap:7px; }
.maplist .mt { font-family:var(--f-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin-bottom:3px; }
.maplist a { display:flex; align-items:center; gap:11px; text-decoration:none; color:var(--ink-2); font-size:14px; padding:5px 8px; border-radius:7px; }
.maplist a:hover { background:var(--sunk); }
.maplist a:focus-visible { outline:2px solid var(--z-green); outline-offset:-2px; }
.maplist a em { font-style:normal; font-size:17px; width:24px; text-align:center; flex:none; }
.maplist a i { font-style:normal; margin-left:auto; font-family:var(--f-mono); font-size:11px; color:var(--ink-3); }

/* ---------- เสียงอ่าน ---------- */
.audio { margin:20px 0 0; border:1px solid var(--line); border-radius:14px; background:var(--page); box-shadow:var(--shadow); overflow:hidden; }
.audio-bar { display:flex; align-items:center; gap:13px; padding:14px 18px; width:100%; background:none; border:0; cursor:pointer; text-align:left; }
.audio-bar:focus-visible { outline:2px solid var(--z-green); outline-offset:-2px; }
.play { width:38px; height:38px; border-radius:50%; background:var(--z-green); display:grid; place-items:center; flex:none; }
.play svg { width:13px; height:13px; fill:var(--page); }
.audio-txt { flex:1; display:flex; flex-direction:column; }
.audio-txt b { font-size:14px; font-weight:600; }
.audio-txt span { font-size:12.5px; color:var(--ink-3); }
.chev { color:var(--ink-3); transition:transform .2s; font-size:12px; }
.audio[data-open="true"] .chev { transform:rotate(180deg); }
.audio-body { display:none; padding:0 18px 18px; }
.audio[data-open="true"] .audio-body { display:block; }
.ytslot { aspect-ratio:16/9; border-radius:10px; border:1px dashed var(--line); background:var(--sunk); display:grid; place-items:center; text-align:center; color:var(--ink-3); font-size:13px; padding:20px; }
.ytparts { display:flex; flex-direction:column; gap:16px; }
.ytpart .ytname { display:flex; align-items:baseline; gap:8px; font-size:13px; font-weight:600; color:var(--ink-2); margin-bottom:8px; }
.ytpart .ytname span { font-weight:400; font-size:12.5px; color:var(--ink-3); }
.ytplayer { border-radius:10px; border:1px solid var(--line); background:var(--sunk); padding:13px 15px; }
.ytplayer audio { display:block; width:100%; height:38px; color-scheme:light; }
.ytnote { margin-top:9px; font-size:12.5px; color:var(--ink-3); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ytplayer audio { color-scheme:dark; }
}
:root[data-theme="dark"] .ytplayer audio { color-scheme:dark; }

/* ---------- การ์ดหลัก ---------- */
.panel {
  --z:var(--z-green); --zw:var(--z-green-w);
  background:var(--page); border:1px solid var(--line); border-radius:16px;
  margin-top:22px; box-shadow:var(--shadow); overflow:hidden; scroll-margin-top:70px;
}
.panel[data-zone="blue"] { --z:var(--z-blue); --zw:var(--z-blue-w); }
.panel[data-zone="red"]  { --z:var(--z-red);  --zw:var(--z-red-w); }
.panel[data-zone="gold"] { --z:var(--z-gold); --zw:var(--z-gold-w); }
.ph { background:var(--zw); border-bottom:1px solid var(--line); padding:15px 22px; display:flex; align-items:center; gap:13px; }
.ph .emo { font-size:22px; line-height:1; flex:none; }
.ph h2 { font-size:19px; color:var(--ink); flex:1; }
.ph .n {
  font-family:var(--f-mono); font-size:11px; font-weight:700; color:var(--z);
  border:1.5px solid var(--z); border-radius:50%; width:25px; height:25px;
  display:grid; place-items:center; flex:none;
}
.pb { padding:24px 22px; display:flex; flex-direction:column; gap:20px; }
.pb > p { color:var(--ink-2); font-size:15.5px; }
.lead { font-size:16px !important; color:var(--ink) !important; }
.hint { font-size:14px; color:var(--ink-3); }
.key { font-weight:600; color:var(--ink); background:linear-gradient(transparent 62%, var(--zw) 62%); }
.term { font-weight:600; color:var(--ink); }

/* การ์ดย่อยแบบมีเลข */
.routes { display:grid; gap:12px; }
.route {
  border:1px solid var(--line); border-left:4px solid var(--z); border-radius:0 11px 11px 0;
  padding:14px 17px; display:flex; gap:14px; align-items:flex-start; background:var(--page);
}
.route .rn { font-family:var(--f-mono); font-size:22px; font-weight:700; color:var(--z); line-height:1; flex:none; opacity:.6; font-variant-numeric:tabular-nums; }
.route b { display:block; font-size:15.5px; margin-bottom:3px; }
.route b .sub { font-weight:400; color:var(--ink-3); font-size:13.5px; }
.route span { font-size:14px; color:var(--ink-2); }

/* ป้ายกลม ใช่ / ตัวหลอก */
.pillbox { display:flex; flex-direction:column; gap:11px; }
.pilllabel { font-family:var(--f-mono); font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; font-weight:600; }
.pilllabel.yes { color:var(--z-green); }
.pilllabel.trap { color:var(--z-red); }
.pills { display:flex; flex-wrap:wrap; gap:8px; }
.pill { font-size:13.5px; padding:6px 13px; border-radius:20px; border:1px solid var(--z-green); background:var(--z-green-w); color:var(--ink); }
.pill.no { border-color:var(--z-red); background:var(--z-red-w); text-decoration:line-through; text-decoration-color:var(--z-red); text-decoration-thickness:1.5px; }

/* ลูกโซ่ */
.chain { display:flex; flex-direction:column; }
.cstep { display:flex; gap:14px; align-items:flex-start; }
.crail { display:flex; flex-direction:column; align-items:center; flex:none; width:26px; }
.cdot { width:26px; height:26px; border-radius:50%; background:var(--zw); border:1.5px solid var(--z); display:grid; place-items:center; font-family:var(--f-mono); font-size:11px; font-weight:700; color:var(--z); }
.cline { width:2px; flex:1; background:var(--line); min-height:20px; }
.ctext { padding-bottom:16px; font-size:15px; color:var(--ink-2); }
.cstep:last-child .ctext { padding-bottom:0; }
.cstep:last-child .cline { display:none; }

/* การ์ดแบ่งสองฝั่ง */
.splits { display:grid; gap:12px; }
.split { border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.split .sh { background:var(--sunk); padding:9px 15px; font-family:var(--f-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); font-weight:600; }
.sbody { display:grid; grid-template-columns:1fr 1fr; }
.sbody > div { padding:14px 15px; display:flex; flex-direction:column; gap:4px; }
.sbody > div + div { border-left:1px solid var(--line-soft); }
.sbody b { font-size:14.5px; }
.sbody b em { font-style:normal; font-family:var(--f-mono); font-size:11px; color:var(--ink-3); display:block; font-weight:400; }
.sbody span { font-size:13.5px; color:var(--ink-2); }
.sbody .tagline { font-family:var(--f-mono); font-size:11px; color:var(--z); }
.sbody .wide { grid-column:1/-1; border-left:0; border-top:1px solid var(--line-soft); }
.sbody.three { grid-template-columns:repeat(3,1fr); }
.sbody.one { grid-template-columns:1fr; }
.sbody > div.roomy { padding:18px; }
.sbody .blist { margin:2px 0 0; padding-left:17px; display:flex; flex-direction:column; gap:6px; }
.sbody .blist li { font-size:13.5px; color:var(--ink-2); line-height:1.6; }
.sbody .blist li::marker { color:var(--z); }
/* แถบสีสลับตามกลุ่มแถวในตาราง ใช้เมื่อหลายแถวอยู่ในกลุ่มเดียวกัน */
.tw tr.band td { background:var(--sunk); }
/* ช่องตารางที่ไม่ต้องเน้น แม้ตกมาเป็นคอลัมน์แรกเพราะแถวก่อนหน้าใช้ rowspan */
.tw td.plain { font-weight:400; color:var(--ink-2); }
/* สูตรที่วางซ้อนอยู่ในการ์ดย่อย จึงต้องกระชับกว่าสูตรที่ยืนเดี่ยว */
.route .formula { padding:9px 13px; margin-top:8px; }
.route .formula .fbody { font-size:14.5px; }

/* ตารางปกติ */
.tw { overflow-x:auto; border:1px solid var(--line); border-radius:12px; background:var(--page); }
table { border-collapse:collapse; width:100%; font-size:14.5px; min-width:440px; }
th,td { text-align:left; padding:12px 15px; border-bottom:1px solid var(--line-soft); vertical-align:top; color:var(--ink-2); }
thead th { font-family:var(--f-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); background:var(--sunk); font-weight:600; border-bottom:1px solid var(--line); }
tbody tr:last-child td { border-bottom:0; }

/* ตารางที่คอลัมน์กลางเป็นสูตร จึงต้องกว้างกว่าอีกสองคอลัมน์ */
.tw.midwide table { table-layout:fixed; }
.tw.midwide th:nth-child(1), .tw.midwide td:nth-child(1) { width:24%; }
.tw.midwide th:nth-child(2), .tw.midwide td:nth-child(2) { width:44%; }
.tw.midwide th:nth-child(3), .tw.midwide td:nth-child(3) { width:32%; }
td:first-child { font-weight:600; color:var(--ink); }

/* รูปเล็กในช่องตาราง เช่น รูปแบบแนวโน้มราคา — ไม่ใช้ figure เพราะ figure svg บังคับ min-width */
.spark { margin-top:9px; }
.spark svg { display:block; width:100%; max-width:176px; height:auto; color:var(--ink-3); }

/* แถบเทียบขนาด */
.tiers { display:flex; flex-direction:column; gap:10px; }
.tierrow { display:grid; grid-template-columns:76px 1fr; gap:14px; align-items:center; }
.tiername { font-family:var(--f-mono); font-size:15px; font-weight:700; color:var(--z); }
.tierbar { display:flex; align-items:center; gap:11px; }
.tierbar i { display:block; height:12px; border-radius:3px; background:var(--z); opacity:.7; flex:none; }
.tierbar span { font-size:13.5px; color:var(--ink-2); }

/* ป้ายย่อ */
.badges { display:flex; flex-wrap:wrap; gap:9px; }
.badge { border:1px solid var(--line); border-radius:10px; padding:10px 13px; display:flex; flex-direction:column; gap:2px; flex:1 1 150px; background:var(--page); }
.badge b { font-family:var(--f-mono); font-size:13.5px; }
.badge span { font-size:12.5px; color:var(--ink-3); line-height:1.55; }
.badge.dim { opacity:.6; }

/* สูตรคำนวณ */
.formulas { display:flex; flex-direction:column; gap:12px; }
.formula { background:var(--sunk); border-radius:12px; padding:16px 18px; display:flex; flex-direction:column; gap:6px; }
.formula .fname { font-size:14px; color:var(--ink-3); }
.formula .fbody { font-family:var(--f-mono); font-size:16px; color:var(--ink); font-variant-numeric:tabular-nums; overflow-x:auto; line-height:1.9; }
.formula .fbody sup, .formula .fbody sub { font-size:.72em; }
.formula .falt { font-size:13px; color:var(--ink-3); font-family:var(--f-mono); }

/* แผนภาพ */
figure { margin:0; display:flex; flex-direction:column; gap:9px; }
figure .fw { overflow-x:auto; background:var(--sunk); border-radius:12px; padding:16px 14px; }
figure svg { display:block; max-width:100%; height:auto; min-width:440px; margin:0 auto; color:var(--ink-2); }
figcaption { font-size:12.5px; color:var(--ink-3); text-align:center; }

/* บรรทัดท่องจำ */
.memo { display:flex; flex-direction:column; gap:10px; }
.memoline { display:flex; gap:12px; align-items:flex-start; background:var(--zw); border-radius:11px; padding:13px 16px; font-size:15px; color:var(--ink); }
.memoline em { font-style:normal; font-size:17px; flex:none; line-height:1.4; }

/* ควิซ */
details.q { border:1px solid var(--line); border-radius:12px; background:var(--page); overflow:hidden; }
details.q + details.q { margin-top:10px; }
details.q summary { cursor:pointer; padding:14px 17px; font-size:14.5px; color:var(--ink-2); display:flex; gap:11px; align-items:baseline; list-style:none; }
details.q summary::-webkit-details-marker { display:none; }
details.q summary::after { content:"ดูเฉลย"; margin-left:auto; font-family:var(--f-mono); font-size:11px; color:var(--z); white-space:nowrap; }
details.q[open] summary::after { content:"ซ่อน"; }
details.q summary:focus-visible { outline:2px solid var(--z); outline-offset:-2px; }
.qn { font-family:var(--f-mono); font-size:11px; color:var(--ink-3); flex:none; }
.ans { padding:12px 17px 16px 43px; font-size:14px; color:var(--ink-2); border-top:1px solid var(--line-soft); }
.ans b { color:var(--z); }

/* ---------- แผนผังต้นไม้ท้ายบท ---------- */
.mfold { border:1px solid var(--line); border-radius:14px; background:var(--page); overflow:hidden; margin-top:22px; box-shadow:var(--shadow); }
.mfold > summary { cursor:pointer; padding:15px 20px; display:flex; align-items:center; gap:12px; list-style:none; font-size:15px; font-weight:600; color:var(--ink); }
.mfold > summary::-webkit-details-marker { display:none; }
.mfold > summary:focus-visible { outline:2px solid var(--z-green); outline-offset:-2px; }
.mfold > summary em { font-style:normal; font-size:19px; line-height:1; }
.mfold > summary .sub { flex:1; font-size:12.5px; font-weight:400; color:var(--ink-3); }
.mfold[open] > summary { border-bottom:1px solid var(--line); }
.mfold[open] > summary .chev { transform:rotate(180deg); }
.mfold .mbody { padding:22px 20px; }

.mmap { display:flex; flex-direction:column; }
.mroot { align-self:flex-start; display:flex; flex-direction:column; gap:2px; background:var(--z-green-w); border:1.6px solid var(--z-green); border-radius:14px; padding:11px 18px; }
.mroot b { font-family:var(--f-mono); font-size:11px; letter-spacing:.14em; color:var(--z-green); }
.mroot span { font-size:14.5px; font-weight:600; color:var(--ink); }
.mtree { display:flex; flex-direction:column; margin-left:26px; border-left:2px solid var(--line); padding-top:6px; }
.mbranch { --z:var(--z-green); position:relative; padding:12px 0 12px 26px; }
.mbranch[data-zone="blue"] { --z:var(--z-blue); }
.mbranch[data-zone="red"] { --z:var(--z-red); }
.mbranch[data-zone="gold"] { --z:var(--z-gold); }
.mbranch::before { content:""; position:absolute; left:0; top:24px; width:22px; height:2px; background:var(--z); }
.mhead { display:flex; align-items:center; gap:9px; font-size:15px; font-weight:600; color:var(--ink); }
.mn { font-family:var(--f-mono); font-size:10px; font-weight:700; color:var(--z); border:1.4px solid var(--z); border-radius:50%; width:21px; height:21px; display:grid; place-items:center; flex:none; }
.mkids { display:flex; flex-direction:column; gap:5px; margin:8px 0 0 30px; }
.mkid { position:relative; font-size:13.5px; color:var(--ink-2); padding-left:15px; }
.mkid::before { content:""; position:absolute; left:0; top:8px; width:6px; height:6px; border-radius:50%; background:var(--z); }

.doneline { display:flex; align-items:center; gap:11px; margin-top:14px; border:1px solid var(--line); border-radius:12px; background:var(--page); padding:13px 18px; }
.doneline input { width:18px; height:18px; accent-color:var(--z-green); margin:0; cursor:pointer; flex:none; }
.doneline label { font-size:14.5px; color:var(--ink-2); cursor:pointer; }
.doneline.done label { color:var(--z-green); font-weight:600; }

/* ---------- หน้าเปิดเล่ม ---------- */
.gate { display:flex; flex-wrap:wrap; gap:14px; }
.gatebox { flex:1 1 210px; border:1px solid var(--line); border-radius:13px; background:var(--page); padding:15px 17px; }
.gatebox.wide { flex:1 1 100%; }
.gatebox b { display:block; font-size:26px; font-family:var(--f-mono); font-weight:700; color:var(--z); }
.gatebox b.txt { font-family:var(--f-body); font-size:20px; }
.gatebox u { display:block; text-decoration:none; font-size:13.5px; color:var(--ink-2); margin-top:3px; }
.gatebox i { display:block; font-style:normal; font-size:12.5px; color:var(--ink-3); margin-top:7px; }
.andrule { display:flex; align-items:center; gap:10px; font-size:13.5px; color:var(--ink-3); margin:2px 0; }
.andrule::before, .andrule::after { content:""; flex:1; height:1px; background:var(--line); }
.cases { display:flex; flex-direction:column; gap:9px; }
.case { display:flex; align-items:center; gap:12px; border:1px solid var(--line); border-radius:12px; padding:11px 15px; background:var(--page); }
.case .mark { font-size:17px; flex:none; }
.case .nums { font-family:var(--f-mono); font-size:13px; color:var(--ink-2); flex:1; }
.case .verdict { font-size:13.5px; font-weight:600; flex:none; }
.case.pass .verdict { color:var(--z-green); }
.case.fail .verdict { color:var(--z-red); }

.tocwrap { border:1px solid var(--line); border-radius:14px; overflow:hidden; }
.tocsec { --z:var(--z-green); --zw:var(--z-green-w); display:flex; align-items:baseline; gap:10px; background:var(--zw); padding:11px 17px; border-bottom:1px solid var(--line); }
.tocsec[data-zone="blue"] { --z:var(--z-blue); --zw:var(--z-blue-w); }
.tocsec[data-zone="red"] { --z:var(--z-red); --zw:var(--z-red-w); }
.tocsec b { font-size:14px; color:var(--ink); flex:1; }
.tocsec span { font-family:var(--f-mono); font-size:11.5px; color:var(--z); font-weight:600; flex:none; }
.tocrow { --z:var(--z-green); display:flex; align-items:center; gap:12px; padding:9px 17px; border-bottom:1px solid var(--line-soft); }
.tocrow[data-zone="blue"] { --z:var(--z-blue); }
.tocrow[data-zone="red"] { --z:var(--z-red); }
.tocrow:last-child { border-bottom:0; }
.tocrow input { width:17px; height:17px; accent-color:var(--z); flex:none; cursor:pointer; margin:0; }
.tocn { font-family:var(--f-mono); font-size:11.5px; color:var(--ink-3); width:18px; text-align:right; flex:none; cursor:pointer; }
.tocrow a { flex:1; font-size:14.5px; color:var(--ink); text-decoration:none; }
.tocrow a:hover { color:var(--z); text-decoration:underline; }
.tocq { font-family:var(--f-mono); font-size:11.5px; color:var(--ink-3); flex:none; }
.tocrow.done a { color:var(--ink-3); }
.tocrow.done .tocn::after { content:" \2713"; color:var(--z); }
.pbar { display:flex; align-items:center; gap:13px; margin-bottom:14px; }
.pbar .track { flex:1; height:9px; border-radius:5px; background:var(--sunk); overflow:hidden; }
.pbar .fill { height:100%; background:var(--z-green); width:0; transition:width .25s; }
.pbar .num { font-family:var(--f-mono); font-size:12.5px; color:var(--ink-2); flex:none; }
.reset { background:none; border:0; font-family:var(--f-body); font-size:12.5px; color:var(--ink-3); text-decoration:underline; cursor:pointer; padding:0; flex:none; }

@media (max-width:620px) {
  .mtree { margin-left:12px; }
  .mbranch { padding-left:20px; }
  .mkids { margin-left:16px; }
  .tocrow a { font-size:13.5px; }
}

/* ท้ายหน้า */
.fnav { display:flex; gap:12px; margin-top:26px; flex-wrap:wrap; }
.fnav a { flex:1 1 220px; border:1px solid var(--line); border-radius:12px; padding:14px 17px; text-decoration:none; background:var(--page); display:flex; flex-direction:column; gap:2px; }
.fnav a:hover { border-color:var(--z-green); }
.fnav small { font-family:var(--f-mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); }
.fnav b { font-size:14.5px; color:var(--ink); font-weight:600; }
.stamp { margin-top:22px; font-size:12px; color:var(--ink-3); font-family:var(--f-mono); }

/* ลายน้ำ */
.wm { position:fixed; inset:0; pointer-events:none; z-index:30; overflow:hidden; }
.wm div { position:absolute; white-space:nowrap; font-family:var(--f-mono); font-size:12px; color:var(--wm); transform:rotate(-28deg); letter-spacing:.12em; }

@media (max-width:620px) {
  .wrap { padding:26px 14px 90px; }
  .pb { padding:20px 16px; }
  .ph { padding:13px 16px; }
  .sbody, .sbody.three { grid-template-columns:1fr; }
  .sbody > div + div { border-left:0; border-top:1px solid var(--line-soft); }
  .tierrow { grid-template-columns:64px 1fr; gap:10px; }
}