:root{
  --bg:#07090c; --panel:#101720; --line:#1e2a36; --fg:#e2e9f0; --dim:#7e8c9a; --mid:#a2b2c0;
  --accent:#8fd0ff;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);
  font-family:'Apple SD Gothic Neo','Pretendard',system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
  /* iOS에서 같은 버튼을 빠르게 두 번 누르면 더블탭 확대가 걸린다.
     manipulation은 더블탭 확대만 끄고 손가락 두 개 확대는 남긴다. */
  touch-action:manipulation}
button,input,select,canvas,.chip,.calday{touch-action:manipulation}
a{color:#6fa8dc}
.dim{color:var(--dim)}
.tabhide{display:none !important}
#shell{max-width:1400px;margin:0 auto;padding:12px 14px 24px}

header{display:flex;align-items:center;gap:12px;margin-bottom:10px}
h1{font-size:17px;font-weight:700;letter-spacing:.5px;margin:0;display:flex;align-items:baseline;gap:8px}
h1 .dom{font-size:11px;font-weight:400;letter-spacing:.2px;color:var(--dim)}
nav{margin-left:auto;display:flex;gap:4px}
nav button{background:none;border:1px solid transparent;color:var(--dim);border-radius:8px;
  padding:5px 14px;font-size:13px;cursor:pointer;font-family:inherit}
nav button.on{background:#1a2836;border-color:#2b3f53;color:var(--fg)}

#status{display:flex;gap:12px;align-items:center;flex-wrap:wrap;font-size:12px;color:var(--mid);
  background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:8px 12px;margin-bottom:10px}
#status b{color:var(--fg);font-weight:600}
.dot{width:7px;height:7px;border-radius:50%;display:inline-block;margin-right:6px;vertical-align:1px}
#stale{display:none;background:#3a2a12;border:1px solid #5c4620;color:#f2d54e;
  border-radius:10px;padding:7px 12px;font-size:12px;margin-bottom:10px}
#stale.show{display:block}

/* 지도(왼쪽) · 히어로+사이드(오른쪽). 모바일은 히어로 -> 지도 -> 나머지 */
#main{display:grid;gap:12px;grid-template-columns:1fr 290px;
  grid-template-areas:"map hero" "map legend" "map side";align-items:start}
#hero{grid-area:hero}
#legendcard{grid-area:legend}
#mapwrap{grid-area:map;min-width:0}
#side{grid-area:side;display:flex;flex-direction:column;gap:10px}

.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 13px}
.lab{font-size:11px;color:var(--dim);margin-bottom:6px;letter-spacing:.3px}

/* 히어로 */
#herotop{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:4px}
#place{font-size:12.5px;color:var(--mid)}
#brandmark{font-size:10.5px;color:#4a5764;letter-spacing:.3px;flex:none}
/* 좌: 정보 · 우: 얼굴. nowrap이라 좁아져도 얼굴이 아래로 안 떨어진다 */
#herobody{display:flex;align-items:center;gap:12px;flex-wrap:nowrap}
#heroleft{flex:1;min-width:0}
/* 두 자리·세 자리 점수에서도 등급칩이 아래로 안 떨어지도록:
   라벨은 윗줄을 통째로 차지하고, 숫자+칩만 한 줄에 nowrap으로 묶는다.
   (사이드바 290px에서 라벨+숫자+칩을 한 줄에 넣으면 두 자리부터 넘친다) */
#scoreline{display:flex;align-items:center;gap:9px;flex-wrap:wrap;min-width:0}
#trend span{white-space:nowrap}
#scorelab{flex:0 0 100%;display:flex;align-items:baseline;gap:6px;
  font-size:12.5px;color:var(--mid);line-height:1.25;font-weight:600;white-space:nowrap}
#scorelab small{font-size:10px;color:var(--dim);font-weight:400}
#score{flex:none;font-size:clamp(38px,7.6vw,48px);font-weight:700;line-height:1;
  font-variant-numeric:tabular-nums}
#bandchip{flex:none;padding:5px 11px;border-radius:20px;font-size:14.5px;font-weight:700;
  white-space:nowrap}

/* 공기질 얼굴 — 등급 색을 그대로 입는다 */
#face{flex:none;line-height:0}
svg.face{width:78px;height:78px;display:block;
  stroke:var(--fc);stroke-width:2.1;fill:none;
  stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 0 9px color-mix(in srgb, var(--fc) 45%, transparent))}
svg.face .ring{stroke-width:2.1;opacity:.9}
svg.face .f{fill:var(--fc);stroke:none}
svg.face .fill{fill:var(--fc);fill-opacity:.2}      /* 마스크가 덮개로 읽히도록 */
svg.face .lens{fill:#07090c}                        /* 방독면 렌즈 */
#layerval{font-size:12.5px;margin-top:3px}
#trend{display:flex;gap:14px;margin-top:9px;font-size:12.5px;color:var(--mid);flex-wrap:wrap}
#trend b{color:var(--fg);font-size:14px}
canvas#spark{width:100%;height:52px;display:block;margin-top:8px}

/* 지도 */
#canvasbox{position:relative;line-height:0}
#canvasbox canvas{max-width:100%;max-height:72vh;width:auto;height:auto;display:block;margin:0 auto;
  border-radius:12px}
canvas#map{border:1px solid var(--line);background:#2b3634}
canvas#windcv{position:absolute;left:50%;top:0;transform:translateX(-50%);cursor:crosshair;
  border:1px solid transparent}
#mapbtns{position:absolute;right:9px;top:9px;display:flex;flex-direction:column;gap:4px;z-index:3}
#mapbtns button{background:rgba(16,23,32,.88);border:1px solid var(--line);color:var(--fg);
  border-radius:8px;width:36px;height:28px;font-size:12.5px;cursor:pointer;font-family:inherit;
  backdrop-filter:blur(4px);padding:0}
#mapbtns button.wide{width:auto;padding:0 9px;font-size:11.5px}
#mapbtns button.on{background:#1e3a52;border-color:#3a6a92;color:#9fdcff}
#layerbar{position:absolute;left:9px;top:9px;display:flex;gap:4px;z-index:3;flex-wrap:wrap;max-width:64%}
#layerbar button{background:rgba(16,23,32,.88);border:1px solid var(--line);color:var(--mid);
  border-radius:8px;padding:5px 10px;font-size:11.5px;cursor:pointer;font-family:inherit;
  backdrop-filter:blur(4px)}
#layerbar button.on{background:#1e3a52;border-color:#3a6a92;color:#9fdcff;font-weight:600}
#locHint{margin-top:8px;background:#2a2118;border:1px solid #5c4620;color:#f2d54e;
  border-radius:10px;padding:8px 11px;font-size:11.5px;line-height:1.55}
#locHint b{color:#fff}

/* 시간 컨트롤 */
#controls{display:flex;align-items:center;gap:5px;margin-top:9px;flex-wrap:wrap}
#controls button{background:#18222e;color:var(--fg);border:1px solid #2b3f53;border-radius:8px;
  padding:6px 11px;cursor:pointer;font-size:12.5px;font-family:inherit;white-space:nowrap}
#controls button.now{background:#1e3a52;border-color:#3a6a92;color:#9fdcff;font-weight:600}
#backlive{background:#2a2118 !important;border-color:#5c4620 !important;color:#f2d54e !important}
#tlabel{font-size:12.5px;color:#c8d4df;margin-left:auto;font-variant-numeric:tabular-nums}
#timeline{position:relative;margin-top:7px}
#tlegend{display:flex;gap:14px;flex-wrap:wrap;font-size:11.5px;color:var(--dim);margin-bottom:4px}
#tlegend b{color:var(--fg);font-weight:600;margin-left:3px}
.mk{display:inline-block;width:0;height:0;margin-right:5px;vertical-align:1px;
  border-left:5px solid transparent;border-right:5px solid transparent}
.mk.vent{border-top:6px solid #49d3c4}
.mk.clean{border-top:6px solid #5fc8f8}
canvas#ventbar{width:100%;height:18px;display:block}
#timeline input#slider{width:100%;margin:0;position:relative;top:-3px;accent-color:var(--accent)}

/* 캘린더 — 오른쪽 정렬(왼쪽이면 화면 밖으로 넘쳐 마지막 열이 잘린다) */
#calwrap{position:relative}
#calendar{display:none;position:absolute;right:0;bottom:calc(100% + 6px);z-index:20;
  background:#0e1620;border:1px solid #2b3f53;border-radius:12px;padding:10px;width:238px;
  box-shadow:0 12px 32px rgba(0,0,0,.6)}
#calendar.show{display:block}
#calendar.loading{opacity:.5;pointer-events:none}
.calhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:7px;
  font-size:12.5px;font-weight:600}
.calhead button{background:none;border:1px solid var(--line);color:var(--fg);border-radius:6px;
  width:24px;height:22px;cursor:pointer;font-size:13px;font-family:inherit;padding:0}
.calgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.caldow{font-size:9.5px;color:var(--dim);text-align:center;padding-bottom:2px}
.calday{font-size:11.5px;text-align:center;padding:5px 0;border-radius:6px;cursor:pointer;
  color:var(--fg);background:#16212c}
.calday.off{color:#39434f;background:transparent;cursor:default}
.calday.today{outline:1px solid #3a6a92}
.calday.sel{background:#1e3a52;color:#9fdcff;font-weight:700}
.calnote{font-size:10px;color:var(--dim);margin-top:7px;line-height:1.4}

/* 환기 */
#venthead{font-size:14px;font-weight:600;line-height:1.4}
#ventsub{font-size:12.5px;margin-top:3px}
#ventat{font-size:12px;margin-top:6px;padding-top:6px;border-top:1px solid var(--line)}

/* 먼지 구성 */
.bar{display:flex;height:9px;border-radius:5px;overflow:hidden;margin-bottom:8px;background:#18222d}
#barfine{background:linear-gradient(90deg,#f8963c,#f2523b)}
#barcoarse{background:#5d6d7d}
#chips{display:flex;gap:6px}
.chip{flex:1;border-radius:8px;padding:7px 8px;font-size:12px;cursor:pointer;font-family:inherit;
  border:1px solid var(--line);background:#16212c;color:var(--mid);text-align:left}
.chip b{display:block;font-size:15px;margin-top:1px}
.chip.risk b{color:#f8963c}
.chip.nat b{color:#93a5b5}
.chip.on{border-color:#3a6a92;background:#1a2836}
#chipdesc{font-size:12px;line-height:1.55;margin-top:8px}

#origin{font-size:13.5px;color:#ffc99a;line-height:1.45}
/* 배출원 성격 — 추론을 썼으면 근거도 같이 보인다 (docs/NEXT.md §8-6).
   '무엇을 쟀나'는 본문 색, '무엇을 추정했나'는 흐린 색으로 나눠 둔다. */
#srcnote{margin-top:9px;padding-top:9px;border-top:1px solid rgba(255,255,255,.08)}
#srcline{font-size:13px;color:#f8b26a;line-height:1.45}
#srcwhy{font-size:11.5px;line-height:1.55;margin-top:4px}

#legendbar{height:10px;border-radius:5px;
  background:linear-gradient(90deg,#2b3634,#a8bab2,#eeeece,#e9b389,#d04e6c,#960081,#56008c)}
.lg{display:flex;justify-content:space-between;font-size:10px;color:var(--dim);margin-top:3px}
/* 등급 범례는 색 칸과 숫자가 세로로 맞아야 "이 색이 몇 점"인지 읽힌다 */
.lg.seg span{flex:1;text-align:center}
#advisory{margin:0;padding-left:15px}
#advisory li{font-size:12px;color:var(--mid);line-height:1.55;margin-bottom:5px}
#advisory:empty{display:none}
#official{font-size:11.5px;line-height:1.5}
#notecard:has(#advisory:empty):has(#official.tabhide){display:none}
footer{font-size:10px;color:#54626f;margin-top:12px;line-height:1.6}

/* 정보 탭 */
#about{background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:24px 28px;line-height:1.75;font-size:14px}
#about h1{font-size:21px;margin:0 0 16px}
#about h2{font-size:16px;margin:28px 0 9px;padding-top:15px;border-top:1px solid var(--line)}
#about h3{font-size:14px;margin:18px 0 7px;color:var(--accent)}
#about table{border-collapse:collapse;width:100%;margin:11px 0;font-size:12.5px}
#about th,#about td{border:1px solid var(--line);padding:6px 9px;text-align:left}
#about th{background:#16212c}
#about code{background:#0d151d;border-radius:5px;padding:1px 5px}
#about pre{background:#0d151d;border-radius:6px;padding:11px;overflow-x:auto;font-size:12px}
#about blockquote{border-left:3px solid #2b3f53;margin:12px 0;padding:2px 0 2px 13px;color:var(--mid)}
#about ul{padding-left:19px}

@media (max-width:960px){
  /* 색 막대를 지도 바로 아래로 — 지도를 보면서 색을 읽을 수 있게 */
  #main{grid-template-columns:1fr;grid-template-areas:"hero" "map" "legend" "side"}
  #canvasbox canvas{max-height:52vh}
  #score{font-size:46px}
  svg.face{width:72px;height:72px}
  #bandchip{font-size:14.5px;padding:5px 11px}
  #tlabel{margin-left:0;width:100%;order:9}
  #controls button{padding:6px 10px}
  #layerbar{max-width:calc(100% - 100px)}
  #about{padding:16px 14px}
  footer{font-size:9.5px}
}