:root{
  --paper:#EDEEE9; --sheet:#F8F8F5; --ink:#1C1F1C; --muted:#5E645E;
  --rule:#C9CCC4; --tint:#E3E6DE;
  --bts:#D4342F; --mrt:#1F6FB2; --srt:#7A1F22;
  --pass:#A32D2D; --fail:#8A8E86;
  --mall:#0F6E56; --condo:#BA7517; --school:#534AB7; --market:#993556; --visit:#E0A400;
  --park:#5B9E3C; --road:#D3D6CD;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:"IBM Plex Sans Thai",system-ui,sans-serif;line-height:1.65;font-size:16px}
.wrap{max-width:1360px;margin:0 auto;padding:0 20px}

header{border-bottom:1px solid var(--rule);padding:28px 0 20px;margin-bottom:24px}
h1{font-family:"Bai Jamjuree",sans-serif;font-weight:600;font-size:clamp(28px,4.5vw,42px);
  line-height:1.15;letter-spacing:-.01em;margin:0 0 10px;max-width:16ch}
.brief{color:var(--muted);max-width:70ch;margin:0 0 18px}
.criteria{display:flex;flex-wrap:wrap;border-top:1px solid var(--rule)}
.criteria div{flex:1 1 140px;padding:12px 16px 12px 0;border-right:1px solid var(--rule)}
.criteria div:last-child{border-right:0}
.criteria dt{color:var(--muted);font-size:13px;margin:0 0 2px}
.criteria dd{margin:0;font-weight:600;font-size:17px}

.split{display:grid;grid-template-columns:minmax(0,2.1fr) minmax(300px,1fr);gap:16px;margin-bottom:14px}
.mapcard,.panel{background:var(--sheet);border:1px solid var(--rule);padding:18px}
.legend{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:13px;color:var(--muted);margin-bottom:10px}
.legend span{display:inline-flex;align-items:center;gap:6px}
.swatch{width:20px;height:3px;border-radius:2px;display:inline-block}
.dotsw{width:11px;height:11px;border-radius:50%;display:inline-block}
.layers{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:13.5px;margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid var(--rule)}
.layers label{display:inline-flex;align-items:center;gap:6px;cursor:pointer;user-select:none}
.layers input{accent-color:var(--ink)}
.sh{width:11px;height:11px;display:inline-block}
.sh.m{background:var(--mall)}
.sh.c{width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:11px solid var(--condo)}
.sh.s{background:var(--school);transform:rotate(45deg);width:9px;height:9px}
.sh.v{background:var(--visit);border-radius:50%}
.sh.l{width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:11px solid var(--condo);opacity:.4}
.sh.p{background:var(--park);border-radius:50%}
.sh.rd{background:var(--road);height:6px;width:16px;border-radius:3px}
.sh.k{background:var(--market);border-radius:2px;clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%)}
svg{display:block;width:100%;height:auto}
.st{font-size:12px;fill:var(--ink)}
.vn{font-size:11px;font-weight:600;fill:#1C1F1C}
.pl{font-size:11px;fill:var(--muted)}
.rl{font-size:10.5px;fill:var(--muted);font-style:italic;letter-spacing:.02em}
.lot{cursor:pointer}
.lot circle{transition:r .12s ease}
.lot:hover circle,.lot.on circle{r:9}
.lot.on circle{stroke:var(--ink);stroke-width:2.5}
.lot:focus{outline:none}
.lot:focus-visible circle{stroke:var(--ink);stroke-width:3}
.lot.dim{opacity:.22}
.poi{cursor:pointer}
.poi:hover .pl{fill:var(--ink)}
.layer.off{display:none}

.panel{align-self:start;position:sticky;top:14px;max-height:calc(100vh - 28px);overflow:auto}
.panel .empty{color:var(--muted);font-size:15px;margin:0}
.panel h3{font-family:"Bai Jamjuree",sans-serif;font-weight:600;font-size:20px;margin:0 0 2px;line-height:1.25}
.panel .where{color:var(--muted);font-size:14px;margin:0 0 12px}
.verdict{font-size:14px;padding:10px 12px;border-radius:4px;margin:0 0 14px;line-height:1.55}
.verdict.y{background:#F3E2E1;color:#6E1C1C}
.verdict.n{background:#E4E6E0;color:#3B403A}
.figs{display:flex;gap:18px;flex-wrap:wrap;padding:12px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);margin-bottom:14px}
.figs div{min-width:72px}
.figs dt{color:var(--muted);font-size:12.5px;margin:0}
.figs dd{margin:0;font-weight:600;font-size:17px;font-variant-numeric:tabular-nums}
.field{margin:0 0 12px}
.field dt{color:var(--muted);font-size:12.5px;margin:0 0 1px}
.field dd{margin:0;font-size:15px;line-height:1.55}
.panel a.src{display:inline-block;margin-top:4px;font-size:14px;color:var(--ink);border-bottom:1px solid var(--rule)}
.panel a.src:hover{border-bottom-color:var(--ink)}
.shot{width:100%;border-radius:4px;display:block;margin:0 0 12px;border:1px solid var(--rule)}
.conf{font-size:12.5px;color:var(--muted);margin:0 0 10px}
.poitype{display:inline-block;font-size:12px;padding:2px 9px;border-radius:999px;color:#fff;margin-bottom:8px}

.tag{display:inline-block;font-size:12.5px;padding:2px 9px;border:1px solid var(--rule);border-radius:999px;color:var(--muted);white-space:nowrap}

.controls{margin:0 0 18px}
.controls p{font-size:13px;color:var(--muted);margin:0 0 7px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.chips button{font-family:inherit;font-size:14px;color:var(--muted);background:transparent;
  border:1px solid var(--rule);padding:6px 14px;border-radius:999px;cursor:pointer}
.chips button:hover{border-color:var(--muted);color:var(--ink)}
.chips button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--sheet)}
.chips button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.count{font-size:14px;color:var(--muted)}

.cluster h2{font-family:"Bai Jamjuree",sans-serif;font-weight:600;font-size:19px;margin:26px 0 2px}
.cluster p.sub{color:var(--muted);font-size:14.5px;margin:0 0 10px;max-width:64ch}
.row{border-top:1px solid var(--rule);padding:15px 0;cursor:pointer;scroll-margin-top:14px}
.row.hl{background:var(--tint);box-shadow:0 0 0 12px var(--tint)}
.head{display:grid;grid-template-columns:30px minmax(0,1.6fr) 1fr 1fr 1fr;gap:14px;align-items:baseline}
.num{font-weight:600;font-size:13px;color:var(--sheet);width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.num.y{background:var(--pass)} .num.n{background:var(--fail)}
.place{font-weight:600}
.k{display:block;color:var(--muted);font-size:12.5px;line-height:1.3}
.v{font-variant-numeric:tabular-nums}
.seg{margin-top:8px;margin-left:44px;display:flex;gap:8px;flex-wrap:wrap}
.detail{margin:12px 0 0 44px;display:none;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px 26px}
.row.open .detail{display:grid}
.detail dt{color:var(--muted);font-size:12.5px;margin:0 0 1px}
.detail dd{margin:0;font-size:14.5px;line-height:1.55}
.detail a{color:inherit}
.row.hide{display:none}

.tail{border-top:1px solid var(--rule);padding:26px 0 60px;margin-top:22px}
.tail h2{font-family:"Bai Jamjuree",sans-serif;font-weight:600;font-size:19px;margin:0 0 12px}
.tail ol{margin:0;padding-left:1.2em;max-width:66ch}
.tail li{margin-bottom:9px}
.caveat{color:var(--muted);font-size:14px;max-width:70ch}

@media (max-width:980px){ .split{grid-template-columns:1fr} .panel{position:static;max-height:none} }
@media (max-width:640px){ .head{grid-template-columns:30px 1fr 1fr;gap:8px 14px} .seg,.detail{margin-left:0} }
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* contact status (data/sites.json contactStatus) */
.contact{border-left:3px solid var(--rule);padding-left:8px}
.contact.ok{border-color:var(--mall)}
.contact.partial,.contact.login{border-color:var(--condo)}
.contact.expired,.contact.blocked,.contact.notfound{border-color:var(--fail);color:var(--muted)}