/* สไตล์ร่วมของหน้าที่ปั่นอัตโนมัติ — แก้ที่ scripts/build-pages.mjs */
:root{--bg:#e7eee9;--surface:#fbfdfa;--surface-2:#f1f6f1;--ink:#16211d;--muted:#5d6f68;--line:#ccd9ce;
--accent:#b23229;--win:#15724b;--near:#9c6b08;--win-bg:#dff0e5;--near-bg:#f7eccc;
--font-display:"Bai Jamjuree","IBM Plex Sans Thai",system-ui,sans-serif;
--font-body:"IBM Plex Sans Thai",system-ui,sans-serif;--font-num:"IBM Plex Mono",ui-monospace,monospace}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0e1513;--surface:#161f1b;--surface-2:#1c2723;
--ink:#e4ede7;--muted:#8fa398;--line:#2a3833;--accent:#ee7f72;--win:#56c793;--near:#e0ae52;
--win-bg:#16382a;--near-bg:#3a2f14;color-scheme:dark}}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font-family:var(--font-body);line-height:1.7;margin:0}
.wrap{max-width:780px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));
padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:26px 56px}
h1,h2,h3{font-family:var(--font-display);text-wrap:balance;line-height:1.25;margin:0}
h1{font-size:clamp(24px,5vw,33px);letter-spacing:-.01em;margin-bottom:6px}
h2{font-size:19px;margin-top:34px}
h3{font-size:15.5px}
p{margin:12px 0}
a{color:var(--accent)}
.crumb{font-size:13px;color:var(--muted);margin-bottom:14px}
.crumb a{color:var(--muted);text-decoration:none}
.crumb a:hover{color:var(--ink)}
.crumb span{opacity:.5;margin:0 2px}
.topbar{position:sticky;top:0;z-index:45;display:flex;align-items:center;gap:11px;background:var(--bg);
margin:0 -16px 12px;padding:9px 16px 10px}
.menubtn{display:flex;flex-direction:column;justify-content:center;gap:4px;width:42px;height:38px;
padding:0 9px;background:var(--surface);border:1px solid var(--line);border-radius:10px;cursor:pointer;flex:0 0 auto}
.menubtn span{display:block;height:2px;background:var(--ink);border-radius:2px}
.menubtn:hover{border-color:var(--muted)}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink);min-width:0}
.bmark{flex:0 0 auto;display:block}
.btxt{display:flex;flex-direction:column;line-height:1.06;min-width:0}
.bname{font-family:var(--font-display);font-weight:700;font-size:17.5px;letter-spacing:-.01em;white-space:nowrap}
.bdom{font-family:var(--font-num);font-size:10.5px;letter-spacing:.05em;color:var(--muted);
font-weight:500;white-space:nowrap}
.brand:hover .bname{color:var(--accent)}
.drawer{position:fixed;inset:0;z-index:70;visibility:hidden}
.drawer.open{visibility:visible}
.dbd{position:absolute;inset:0;background:rgba(0,0,0,.45);opacity:0;transition:opacity .18s ease}
.drawer.open .dbd{opacity:1}
.dpanel{position:absolute;top:0;left:0;bottom:0;width:min(288px,82vw);background:var(--surface);
border-right:1px solid var(--line);padding:16px 14px;padding-top:max(16px,env(safe-area-inset-top,0px));
display:flex;flex-direction:column;gap:3px;overflow-y:auto;
transform:translateX(-101%);transition:transform .2s ease}
.drawer.open .dpanel{transform:none}
.dhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;
font-family:var(--font-display);font-weight:700;font-size:16px}
.dclose{background:0;border:0;font-size:21px;line-height:1;color:var(--muted);cursor:pointer;padding:3px 7px}
.dclose:hover{color:var(--ink)}
.dpanel a{text-decoration:none;color:var(--ink);padding:11px 12px;border-radius:9px;font-size:15px;font-weight:500}
.dpanel a:hover{background:var(--surface-2)}
.dpanel a.on{background:var(--ink);color:var(--surface)}
.mainnav{display:flex;gap:4px;overflow-x:auto;margin:0 -16px 16px;padding:0 16px 2px;
scrollbar-width:none;-webkit-overflow-scrolling:touch}
.mainnav::-webkit-scrollbar{display:none}
.mainnav a{flex:0 0 auto;font-size:13.5px;font-weight:500;text-decoration:none;color:var(--muted);
background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:6px 13px;white-space:nowrap}
.mainnav a:hover{color:var(--ink);border-color:var(--muted)}
.mainnav a.on{background:var(--ink);color:var(--surface);border-color:var(--ink)}
.sub{color:var(--muted);font-size:15px;margin:0 0 20px}
.hero{background:var(--win-bg);border:1px solid var(--win);border-radius:14px;padding:20px;margin:20px 0;text-align:center}
.hero .lb{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--win);font-weight:600}
.hero .no{font-family:var(--font-num);font-size:clamp(34px,10vw,54px);font-weight:600;letter-spacing:.1em;
color:var(--ink);margin:6px 0;font-variant-numeric:tabular-nums}
.hero .mo{font-size:14px;color:var(--muted)}
.grp{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:15px 18px;margin:12px 0}
.grp .gh{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:4px}
.grp .rw{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.nums{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:7px;margin-top:8px}
.nums b{font-family:var(--font-num);font-weight:500;font-size:14.5px;letter-spacing:.08em;text-align:center;
background:var(--surface-2);border:1px solid var(--line);border-radius:7px;padding:7px 2px;font-variant-numeric:tabular-nums}
.big b{font-size:19px;padding:9px 2px}
.pager{display:flex;gap:10px;justify-content:space-between;margin:26px 0 0;flex-wrap:wrap}
.pager a{flex:1 1 180px;background:var(--surface);border:1px solid var(--line);border-radius:12px;
padding:12px 15px;text-decoration:none;color:var(--ink);min-width:0}
.pager a:hover{border-color:var(--muted)}
.pager .k{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600}
.pager .v{font-weight:600;font-size:14.5px}
.pager .nx{text-align:right}
.cta{display:block;background:var(--ink);color:var(--surface);border-radius:12px;padding:15px 18px;
text-decoration:none;margin:24px 0;text-align:center;font-weight:600}
.cta:hover{opacity:.9}
.yr{margin-top:28px}
.yl{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:8px;margin-top:10px}
.yl a{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:9px 12px;
text-decoration:none;color:var(--ink);display:flex;flex-direction:column;gap:1px}
.yl a:hover{border-color:var(--muted)}
.yl .d{font-weight:600;font-size:13.5px}
.yl .n{font-family:var(--font-num);font-size:12.5px;color:var(--muted);letter-spacing:.06em}
.stat{display:grid;grid-template-columns:repeat(auto-fit,minmax(116px,1fr));gap:10px;margin:18px 0}
.stat>div{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:13px 15px}
.stat .k{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600}
.stat .v{font-family:var(--font-display);font-size:23px;font-weight:700;font-variant-numeric:tabular-nums;margin-top:2px;white-space:nowrap}
.note{background:var(--near-bg);border:1px solid var(--near);border-radius:12px;padding:14px 17px;margin:18px 0;font-size:14px}
.note b{font-weight:600}
.scroll{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:14.5px}
th,td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line)}
th{font-size:12.5px;letter-spacing:.02em;color:var(--muted);font-weight:600;white-space:nowrap}
td{white-space:nowrap}
td.n{font-family:var(--font-num);font-variant-numeric:tabular-nums}
.fb{display:inline-flex;align-items:center;gap:7px;text-decoration:none;color:var(--ink);
background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:7px 15px;
font-size:13.5px;font-weight:600}
.fb:hover{border-color:var(--accent);color:var(--accent)}
footer{margin-top:38px;padding-top:18px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
footer .dis{font-size:12px;line-height:1.6}
.grid100{display:grid;grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:7px;margin-top:12px}
.grid100 a{font-family:var(--font-num);font-size:15px;text-align:center;text-decoration:none;color:var(--ink);
background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:8px 2px;font-variant-numeric:tabular-nums}
.grid100 a:hover{border-color:var(--accent);color:var(--accent)}
.grid100 a .c{display:block;font-family:var(--font-body);font-size:11px;color:var(--muted)}
.vd{border-radius:12px;padding:13px 16px;margin:12px 0;font-size:14px;border:1px solid}
.vd.ok{background:var(--win-bg);border-color:var(--win)}
.vd.warn{background:var(--near-bg);border-color:var(--near)}
.pill{display:inline-block;font-size:12px;font-weight:600;border-radius:999px;padding:3px 10px;white-space:nowrap}
.pill.ok{background:var(--win-bg);color:var(--win);border:1px solid var(--win)}
.pill.warn{background:var(--near-bg);color:var(--near);border:1px solid var(--near)}
td.dim{color:var(--muted)}
.fn{color:var(--accent);text-decoration:none;font-weight:700;padding:0 1px;
vertical-align:super;font-size:.74em;line-height:0}
.fn:hover{text-decoration:underline}
.fnote{background:var(--surface);border:1px solid var(--line);border-radius:12px;
padding:18px 20px;margin:28px 0 0;font-size:14px;scroll-margin-top:16px}
.fnote h3{font-size:16px;margin:0 0 6px}
.fnote p{margin:9px 0}
.fnote ul{margin:9px 0;padding-left:20px}
.fnote li{margin:4px 0}
.fnote:target{border-color:var(--accent)}
.bars{display:grid;grid-template-columns:repeat(10,1fr);gap:4px;align-items:end;margin:14px 0 6px}
.bcell{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0}
.btrack{width:100%;height:76px;display:flex;align-items:flex-end;background:var(--surface-2);
border:1px solid var(--line);border-radius:5px;overflow:hidden}
.bfill{width:100%;background:var(--line);border-radius:4px 4px 0 0}
.bfill.hi{background:var(--accent);opacity:.72}
.bn{font-family:var(--font-num);font-size:12px;font-weight:600}
.bv{font-family:var(--font-num);font-size:11px;color:var(--muted)}