/* Layout: 상단 고정 필터바 → KPI → 권역 막대 → 정책서 권역표 → 분포 → 월별 추이 → 단지 상세. 위에서 아래로 요약→상세 */
:root{
  --bg:#f3f5f6; --surface:#ffffff; --ink:#15212b; --muted:#5d6b76; --line:#dde3e7;
  --full:#0c6e78; --ha:#d0832a; --hb:#5c6fc4; --emart:#fff6c9; --emart-ink:#7a5d00;
  --track:#e7ecef; --ok:#1f8a4c; --warn:#d97706; --over:#d6332a;
  --sans:"IBM Plex Sans KR",system-ui,-apple-system,"Malgun Gothic",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0f161c; --surface:#16212a; --ink:#e6edf1; --muted:#93a3ae; --line:#26343f;
  --full:#3fb5c0; --ha:#e9a34f; --hb:#8f9ff0; --emart:#3b3412; --emart-ink:#f2d66b; --track:#22303a; --ok:#3fbf73; --warn:#f2a33a; --over:#ff6b5e; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0f161c; --surface:#16212a; --ink:#e6edf1; --muted:#93a3ae; --line:#26343f;
  --full:#3fb5c0; --ha:#e9a34f; --hb:#8f9ff0; --emart:#3b3412; --emart-ink:#f2d66b; --track:#22303a; --ok:#3fbf73; --warn:#f2a33a; --over:#ff6b5e; color-scheme:dark}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:14px;line-height:1.55}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--surface)}
.wrap{padding-left:max(clamp(16px,2vw,32px),env(safe-area-inset-left,0px));padding-right:max(clamp(16px,2vw,32px),env(safe-area-inset-right,0px))}
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--surface);border-bottom:1px solid var(--line)}
header .wrap{display:flex;flex-wrap:wrap;gap:10px 20px;align-items:center;padding-block:12px}
h1{font-size:18px;margin:0;text-wrap:balance;letter-spacing:-.01em}
.period{color:var(--muted);font-size:12px;font-family:var(--mono)}
.tabs{display:flex;gap:4px;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:3px}
.tabs button{border:0;background:transparent;color:var(--muted);font:inherit;font-size:13px;font-weight:500;padding:6px 14px;border-radius:8px;cursor:pointer;display:grid;line-height:1.25;text-align:left}
.tabs button small{font-size:10px;font-weight:400}
.tabs button[aria-selected="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgb(0 0 0 / .12)}
.ctrls{display:flex;flex-wrap:wrap;gap:8px;margin-left:auto;align-items:center}
.seg{display:flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.seg button{border:0;background:transparent;color:var(--ink);font:inherit;font-size:13px;padding:6px 12px;cursor:pointer}
.seg button+button{border-left:1px solid var(--line)}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--surface)}
.seg button[data-m="1"][aria-pressed="true"]{background:var(--emart);color:var(--emart-ink)}
select,input[type=search]{font:inherit;font-size:13px;padding:6px 10px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink)}
button:focus-visible,select:focus-visible,input:focus-visible,th:focus-visible{outline:2px solid var(--full);outline-offset:2px}
main{display:grid;gap:28px;padding-block:24px 64px}
section{display:grid;gap:14px;min-width:0}
h2{font-size:15px;margin:0;display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
h2 small{font-weight:400;color:var(--muted);font-size:12px}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:18px;min-width:0}
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
@media (max-width:900px){.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:460px){.kpis{grid-template-columns:1fr}}
.kpi{display:grid;gap:6px;align-content:start}
.kpi .lab{font-size:12px;color:var(--muted);letter-spacing:.02em;display:flex;align-items:center;gap:6px}
.kpi .val{font-family:var(--mono);font-size:34px;font-weight:600;line-height:1.1;font-variant-numeric:tabular-nums}
.kpi .val i{font-style:normal;font-size:14px;color:var(--muted);margin-left:4px;font-family:var(--sans)}
.kpi .sub{font-size:12px;color:var(--muted)}
.dot{width:9px;height:9px;border-radius:2px;display:inline-block;flex:none}
.slots{display:grid;grid-template-columns:repeat(var(--n,40),1fr);gap:2px;margin-top:4px}
.slots span{height:14px;border-radius:2px;background:var(--track);transition:background .25s}
.slots span.on{background:var(--g)}
.lv-ok{color:var(--ok)!important}.lv-warn{color:var(--warn)!important}.lv-over{color:var(--over)!important}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--muted)}
.legend span{display:flex;gap:6px;align-items:center}
.vchart{display:grid;grid-template-columns:34px minmax(0,1fr);gap:6px;min-width:1040px}
.yax,.cols{height:clamp(240px,32vh,380px)}
.yax{position:relative;font-size:11px;color:var(--muted);font-family:var(--mono)}
.yax span{position:absolute;right:0;transform:translateY(-50%)}
.cols{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:6px;position:relative;
  background:linear-gradient(var(--line) 1px,transparent 1px) 0 0/100% 25%;border-bottom:1px solid var(--muted)}
.grpc{display:flex;gap:2px;align-items:flex-end;justify-content:center;position:relative;padding-top:20px;border-radius:4px}
.grpc.lv0,.grpc.lv1{background:color-mix(in srgb,var(--full) 7%,transparent)}
.grpc.hl{outline:2px solid var(--full);outline-offset:-1px}
.xlab .hl{color:var(--full);font-weight:700}
.vhead{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.vhead>.kpihead:first-child{margin-right:auto}
.grpc>b:first-of-type{flex:2.4;max-width:28px}
.grpc>em{position:absolute;top:0;left:0;right:0;text-align:center;font-style:normal;font-family:var(--mono);font-size:13px;font-weight:600;color:var(--full)}
.grpc>b{flex:1;max-width:10px;height:var(--h);background:var(--c);border-radius:2px 2px 0 0;transition:height .9s cubic-bezier(.2,.7,.2,1)}
.xlab{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:6px;grid-column:2}
.xlab div{text-align:center;font-size:12px;line-height:1.3}
.xlab small{display:block;color:var(--muted);font-size:10px;font-family:var(--mono)}
.xlab .lv0,.xlab .lv1{font-weight:700}
.xlab .lv3{color:var(--muted)}
/* pre = 재생 직전 0 상태. 전환 효과를 꺼야 0이 즉시 확정되고, pre 해제 시 원래 값까지 올라감 */
.pre .grpc>b{height:0;transition:none}
.pre .hist b{height:0!important;transition:none}
.trendline{transition:stroke-dashoffset 1.4s ease-out}
.pre .trendline{stroke-dashoffset:var(--len)!important;transition:none}
.tfade{transition:opacity .8s .5s}
.pre .tfade{opacity:0;transition:none}
.thov{fill:transparent}
.thov:hover{fill:color-mix(in srgb,var(--ink) 6%,transparent)}
.kpihead{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.tscroll{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:13px;font-variant-numeric:tabular-nums}
th,td{padding:7px 10px;border-bottom:1px solid var(--line);text-align:right;white-space:nowrap}
th{font-size:12px;color:var(--muted);font-weight:500;position:sticky;top:0;background:var(--surface)}
th.l,td.l{text-align:left}
td.num{font-family:var(--mono)}
tr.grp td{background:var(--bg);font-weight:700}
tr.sub td.l:first-child{padding-left:26px}
tr.em td{background:var(--emart)}
tr.em td .tag{color:var(--emart-ink)}
.tag{font-size:11px;padding:1px 6px;border-radius:4px;border:1px solid currentColor;color:var(--muted)}
.na{color:var(--muted)}
.hist{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:3px;align-items:end;height:180px;position:relative}
.hist div{display:flex;flex-direction:column;justify-content:flex-end;height:100%;min-width:0}
.hist b{display:block;background:var(--full);border-radius:2px 2px 0 0;transition:height .9s cubic-bezier(.2,.7,.2,1)}
.hist div.mean b{background:var(--ha)}
.hx{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:3px;font-size:10px;color:var(--muted);font-family:var(--mono);text-align:center}
.two{display:grid;grid-template-columns:minmax(0,1fr);gap:28px}
.note{font-size:12px;color:var(--muted);margin:0}
svg text{fill:var(--muted);font-family:var(--mono);font-size:11px}
.dtools{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.dtools .cnt{margin-left:auto;font-size:12px;color:var(--muted)}
.dc{padding:0;min-width:46px;text-align:center;font-family:var(--mono);font-size:12px;color:#fff;border:2px solid var(--surface)}
.dc.d-g{background:#1e7a46}.dc.d-y{background:#f2c037;color:#3a2c00}.dc.d-r{background:#c8323c}.dc.na{color:var(--muted);background:transparent}
th.dh{min-width:46px;text-align:center}
.more{justify-self:center;font:inherit;font-size:13px;padding:7px 16px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);cursor:pointer}
th[data-k]{cursor:pointer}
th[data-k][aria-sort]::after{content:" ▾"}
th[data-k][aria-sort="ascending"]::after{content:" ▴"}
.rules{font-size:12px;color:var(--muted);display:grid;gap:2px;margin:0;padding-left:18px}
.tip{position:fixed;z-index:20;pointer-events:none;min-width:220px;max-width:min(320px,calc(100vw - 24px));background:var(--surface);color:var(--ink);
  border:1px solid var(--line);border-radius:10px;padding:12px 14px;box-shadow:0 8px 24px rgb(0 0 0 / .18);font-size:13px;display:grid;gap:4px}
.tip h4{margin:0 0 4px;font-size:14px}
.tip div{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center}
.tip div.sep{border-top:1px solid var(--line);margin-top:4px;padding-top:4px}
.tip span:nth-child(2){color:var(--muted)}
.tip b{font-family:var(--mono);font-weight:600;text-align:right;font-variant-numeric:tabular-nums}
[data-tip]{cursor:default}
.grpc[data-tip]:hover{background:color-mix(in srgb,var(--ink) 6%,transparent)}
.hist div[data-tip]:hover b{filter:brightness(1.25)}
@media (prefers-reduced-motion:reduce){.grpc>b,.hist b,.trendline,.tfade{transition:none}}
/* 3-10 추가: 로딩·오류 상태, 오래된 자료 경고 띠 */
.loadmsg{margin:0;padding-block:48px;color:var(--muted)}
.loadmsg.err{color:var(--over)}
.stale{background:var(--emart);color:var(--emart-ink);font-size:13px;font-weight:500;border-top:1px solid var(--line)}
.stale .wrap{padding-block:8px}