:root{
  /* ── 라이트(기본) ──
     관측 영상 무대(--stage-*)만은 두 테마 모두 어둡게 고정한다.
     위성·레이더 원본이 검은 배경이라, 밝은 판에 얹으면 테두리가 뜬다. */
  --bg:#eef2f6; --bg2:#ffffff; --card:#ffffff; --line:#d4dde7; --line2:#bfcbd8;
  --fg:#0d1926; --fg2:#4d6274; --fg3:#60707f;
  --accent:#0a63ab; --accent-ink:#ffffff; --accent2:#0a7a63;
  --warn:#a85506; --danger:#c2323b;
  --stage:#060a0f; --stage-panel:#0b1016; --stage-line:#233043; --stage-fg:#9fb0c6;
  --shadow:0 1px 2px rgba(13,25,38,.05),0 6px 18px -10px rgba(13,25,38,.18);
  --radius:14px;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0b1016; --bg2:#111924; --card:#151f2c; --line:#233043; --line2:#31435c;
    --fg:#e8eef7; --fg2:#9fb0c6; --fg3:#74879f;
    --accent:#4ea3ff; --accent-ink:#04121f; --accent2:#7ee0c0;
    --warn:#ffb454; --danger:#ff6b6b;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px -14px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"]{
  --bg:#0b1016; --bg2:#111924; --card:#151f2c; --line:#233043; --line2:#31435c;
  --fg:#e8eef7; --fg2:#9fb0c6; --fg3:#74879f;
  --accent:#4ea3ff; --accent-ink:#04121f; --accent2:#7ee0c0;
  --warn:#ffb454; --danger:#ff6b6b;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px -14px rgba(0,0,0,.7);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font:15px/1.5 -apple-system,BlinkMacSystemFont,"Pretendard","Apple SD Gothic Neo","Noto Sans KR",sans-serif;
  -webkit-font-smoothing:antialiased;
}
button,select,input{font:inherit;color:inherit}

/* ───────── header ───────── */
.top{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:12px 20px; border-bottom:1px solid var(--line);
  background:var(--bg2);
  position:sticky; top:0; z-index:20;
}
.brand{display:flex;align-items:baseline;gap:10px}
.mark{font-size:20px}
.name{font-weight:700;letter-spacing:-.02em;font-size:18px}
.tag{color:var(--fg3);font-size:12.5px}
.top-right{display:flex;align-items:center;gap:10px}
.clock{font:600 14px/1 var(--mono);color:var(--fg2);letter-spacing:.02em;min-width:126px;text-align:right}
select,.ghost{
  background:var(--bg2); border:1px solid var(--line); color:var(--fg);
  padding:6px 10px; border-radius:9px; cursor:pointer;
}
.ghost:hover,select:hover{border-color:var(--accent);}

/* ───────── layout ───────── */
.grid{
  display:grid; grid-template-columns:minmax(0,1fr) 348px; gap:16px;
  padding:16px 20px 28px; align-items:start;
}
@media (max-width:1080px){ .grid{grid-template-columns:1fr} }

/* ───────── viewer ───────── */
.viewer-pane{display:flex;flex-direction:column;gap:12px;min-width:0}
.layer-tabs{display:flex;flex-wrap:wrap;gap:6px}
.layer-tabs button{
  background:var(--bg2); border:1px solid var(--line); color:var(--fg2);
  padding:7px 13px; border-radius:999px; cursor:pointer; font-size:13.5px;
  transition:color .15s,background-color .15s,border-color .15s;
}
.layer-tabs button:hover{color:var(--fg);border-color:var(--line2)}
.layer-tabs button[aria-selected="true"]{
  background:var(--accent); border-color:var(--accent); color:var(--accent-ink); font-weight:600;
}

.stage{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:10px;box-shadow:var(--shadow)}
.canvas-wrap{
  position:relative; width:100%; aspect-ratio:1/1; max-height:70vh;
  margin:0 auto; background:var(--stage); border-radius:10px; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.frame{
  position:absolute; inset:0; width:100%; height:100%; object-fit:contain;
  image-rendering:auto; opacity:0; transition:opacity .12s;
}
.frame.on{opacity:1}
/* 비교 시 두 영상은 겹치지 않고 각자 칸을 차지한다.
   레이더 640x640(레이더 합성 격자)과 위성 600x600·600x614(GK2A 람베르트)는
   크기도 종횡비도 투영도 달라, 겹쳐 놓으면 같은 지점이 다른 자리에 찍힌다. */
.canvas-wrap.split .frame{width:var(--pane-a,50%);left:0;right:auto}
.canvas-wrap.split .frame-b{width:var(--pane-b,50%);left:var(--pane-a,50%);right:auto}
.pane-tag{
  position:absolute;bottom:8px;z-index:6;
  background:rgba(6,10,15,.62);border-radius:5px;padding:3px 7px;
  font:11px/1.3 var(--mono);color:var(--stage-fg);white-space:nowrap;
}
.pane-tag.a{left:8px}
.pane-tag.b{right:8px}
.divider{
  position:absolute; top:0; bottom:0; left:50%; width:2px;
  background:var(--accent2); cursor:ew-resize; z-index:5;
}
.divider .knob{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:20px;height:20px;border-radius:50%; background:var(--accent2); color:var(--accent-ink);
  display:grid;place-items:center; font-size:11px; font-weight:700; line-height:1;
}
.stage-badge{
  position:absolute; left:10px; top:10px; z-index:6;
  background:rgba(6,10,15,.82); border:1px solid var(--stage-line);
  padding:5px 10px; border-radius:8px; font:600 12.5px/1.35 var(--mono); color:var(--stage-fg);
  backdrop-filter:blur(6px); white-space:pre-line;
}
.loading{
  position:absolute; inset:0; z-index:8; display:grid; place-content:center; gap:10px;
  background:rgba(6,10,15,.72); color:var(--stage-fg); font-size:13px; text-align:center;
}
.loading[hidden]{display:none}
.bar{width:190px;height:4px;background:var(--stage-line);border-radius:3px;overflow:hidden}
.bar i{display:block;height:100%;width:0;background:var(--accent);transition:width .18s}

/* ───────── controls ───────── */
.controls{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px;box-shadow:var(--shadow)}
.row{display:flex;align-items:center;gap:10px}
.row+.row{margin-top:10px}
.play{
  width:38px;height:38px;border-radius:50%;border:none;cursor:pointer;
  background:var(--accent);color:var(--accent-ink);font-size:14px;flex:none;
}
.play:hover{filter:brightness(1.1)}
.transport .ghost{padding:6px 9px;flex:none}
.scrub{flex:1;min-width:0;accent-color:var(--accent);cursor:pointer}
.tm{font:600 13px/1 var(--mono);color:var(--fg2);min-width:132px;text-align:right;flex:none}
.speed,.cmp{padding:5px 8px;font-size:13px}
.opts{color:var(--fg2);font-size:13.5px;flex-wrap:wrap}
.chk{display:flex;align-items:center;gap:6px;cursor:pointer}
.chk input{accent-color:var(--accent);cursor:pointer}
.spacer{flex:1}
.cadence{color:var(--fg3);font:12px/1 var(--mono)}

/* ───────── sidebar ───────── */
.side{display:flex;flex-direction:column;gap:12px;min-width:0}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:14px;box-shadow:var(--shadow)}
.card h3{margin:0 0 10px;font-size:13px;font-weight:600;color:var(--fg2);letter-spacing:.02em;
  display:flex;align-items:baseline;gap:8px}
.card h3 small{color:var(--fg3);font-weight:400;font-size:11.5px}
.skeleton{color:var(--fg3);font-size:13px;padding:8px 0}

.now-head{display:flex;align-items:center;gap:14px}
.now-icon{font-size:44px;line-height:1}
.now-temp{font-size:40px;font-weight:700;letter-spacing:-.03em;line-height:1}
.now-desc{color:var(--fg2);font-size:13.5px;margin-top:3px}
.now-place{color:var(--fg3);font-size:12px}
.now-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px;margin-top:14px;
  padding-top:12px;border-top:1px solid var(--line)}
.kv{display:flex;justify-content:space-between;font-size:13px}
.kv b{font-weight:600;font-variant-numeric:tabular-nums}
.kv span{color:var(--fg3)}

.verdict{margin:0 0 10px;font-size:14.5px;font-weight:600;line-height:1.45}
.verdict.rain{color:var(--accent)}
.verdict.heavy{color:var(--warn)}
.verdict.dry{color:var(--accent2)}
.spark{display:flex;align-items:flex-end;gap:2px;height:52px}
.spark i{flex:1;background:linear-gradient(180deg,var(--accent),#2b6fb0);border-radius:2px 2px 0 0;min-height:2px}
.spark i.zero{background:var(--line)}
.spark-axis{display:flex;justify-content:space-between;color:var(--fg3);font:11px/1 var(--mono);margin-top:6px}

.hourly{display:flex;gap:4px;overflow-x:auto;padding-bottom:4px}
.hr{flex:none;width:52px;text-align:center;padding:8px 2px;border-radius:9px;background:var(--bg2)}
.hr .h{color:var(--fg3);font:11px/1 var(--mono)}
.hr .i{font-size:19px;margin:5px 0 3px}
.hr .t{font-weight:600;font-size:13.5px;font-variant-numeric:tabular-nums}
.hr .p{color:var(--accent);font:11px/1 var(--mono);margin-top:3px;min-height:11px}

.daily{display:flex;flex-direction:column;gap:5px}
.dy{display:grid;grid-template-columns:44px 26px 1fr 74px;align-items:center;gap:9px;font-size:13.5px}
.dy .d{color:var(--fg2)}
.dy .i{font-size:16px;text-align:center}
.dy .range{height:5px;background:var(--line);border-radius:3px;position:relative;overflow:hidden}
.dy .range i{position:absolute;height:100%;border-radius:3px;
  background:linear-gradient(90deg,var(--accent),var(--warn))}
.dy .mm{text-align:right;font-variant-numeric:tabular-nums;color:var(--fg2)}
.dy .mm b{color:var(--fg);font-weight:600}

.air{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.aq{background:var(--bg2);border-radius:10px;padding:10px}
.aq .l{color:var(--fg3);font-size:11.5px}
.aq .v{font-size:22px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.2}
.aq .g{font-size:12px;font-weight:600}

.foot{color:var(--fg3);font-size:11.5px;line-height:1.6;margin:2px 0 0;padding:0 2px}

/* ── 테마 선택 (기본 / 다크 / 시스템) ── */
.theme-pick{display:flex;gap:2px;background:var(--bg2);border:1px solid var(--line);border-radius:9px;padding:2px}
.theme-pick button{
  background:none;border:none;cursor:pointer;color:var(--fg3);
  padding:4px 9px;border-radius:7px;font-size:12.5px;line-height:1.4;
}
.theme-pick button:hover{color:var(--fg)}
.theme-pick button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink);font-weight:600}
@media (max-width:560px){ .theme-pick button{padding:4px 7px;font-size:12px} .clock{display:none} }

/* ── 좁은 화면 ──────────────────────────────────────────────
   375px에서 확인한 실제 붕괴를 잡는다.
   한글은 글자 단위로 줄바꿈되기 때문에, 폭이 모자라면
   "한 반 도 실 시 간" 처럼 한 글자씩 세로로 쪼개진다. nowrap이 필수다. */
.theme-pick button,
.layer-tabs button,
.tag,
.cadence{white-space:nowrap}

@media (max-width:900px){
  .top{flex-wrap:wrap;gap:10px;padding:10px 16px}
  .top-right{flex-wrap:wrap;gap:8px;width:100%;justify-content:flex-start}
  .grid{padding:12px 16px 24px;gap:12px}
}

@media (max-width:640px){
  /* 태그는 브랜드명이 이미 말해주는 내용이다. 폭이 아쉬우면 먼저 버린다. */
  .tag{display:none}

  /* 제안한 대로 모바일에서는 즉답(사이드바)이 영상보다 먼저 온다.
     비 오는지부터 알려주고, 영상은 더 볼 사람만 스크롤한다. */
  .side{order:-1}
  /* align-items를 stretch로 되돌리지 않으면 기본값(start)이 남아
     .side가 늘어나지 않고 시간별 24칸의 내용 폭(1370px)만큼 부푼다. */
  .grid{display:flex;flex-direction:column;align-items:stretch}

  .canvas-wrap{max-height:none}
  .transport{flex-wrap:wrap}
  .scrub{order:10;flex:1 1 100%;min-width:0}
  .tm{flex:1;text-align:left;min-width:0}
  .controls{padding:10px 12px}
}

@media (max-width:400px){
  .layer-tabs button{padding:6px 10px;font-size:12.5px}
  .speed,.cmp{font-size:12px}
}

/* ── 비교 방식 선택 (나란히 / 겹치기) ── */
.seg{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.seg[hidden]{display:none}
.seg button{
  background:var(--bg2);border:none;cursor:pointer;color:var(--fg3);
  padding:5px 11px;font-size:12.5px;line-height:1.4;white-space:nowrap;
}
.seg button:hover{color:var(--fg)}
.seg button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink);font-weight:600}

/* 겹치기 모드에서는 두 영상이 다시 무대를 꽉 채우고 오른쪽만 드러난다 */
.canvas-wrap.overlay .frame{width:100%;left:0;right:0}
.canvas-wrap.overlay .frame-b{clip-path:inset(0 0 0 var(--pane-a,50%));width:100%;left:0}
.canvas-wrap.overlay .pane-tag{display:none}

/* ── 안내 대화상자 ── */
.dlg{
  border:1px solid var(--line); border-radius:12px; padding:0;
  background:var(--card); color:var(--fg); max-width:440px; width:calc(100% - 40px);
  box-shadow:0 12px 40px -12px rgba(0,0,0,.45);
}
.dlg::backdrop{background:rgba(6,10,15,.55)}
.dlg form{padding:22px 24px 16px}
.dlg h2{margin:0 0 12px;font-size:17px;font-weight:600;line-height:1.35}
.dlg p{margin:0 0 10px;font-size:14px;line-height:1.62;color:var(--fg2)}
.dlg code{font-family:var(--mono);font-size:12.5px}
.dlg-chk{display:flex;align-items:center;gap:8px;margin:14px 0 0;font-size:14px;cursor:pointer}
.dlg-chk input{accent-color:var(--accent);cursor:pointer}
.dlg menu{display:flex;justify-content:flex-end;margin:16px 0 0;padding:0}
.dlg menu button{
  background:none;border:none;cursor:pointer;color:var(--accent);
  font-size:14px;font-weight:600;padding:8px 14px;border-radius:7px;
}
.dlg menu button:hover{background:color-mix(in srgb,var(--accent) 12%,transparent)}

/* 정합 겹치기 — 위성 WMTS 모자이크. 무대보다 크게 깔고 crop 상자만 보이도록 밀어 넣는다. */
.gis-tiles{position:absolute;z-index:1;pointer-events:none}
.gis-tiles[hidden]{display:none}
.gis-tiles img{display:block}
/* 정합 모드에서는 레이더만 위에 얹고 비교 이미지는 쓰지 않는다 */
.canvas-wrap.gis .frame-b{display:none}
.canvas-wrap.gis .frame{z-index:2}
.canvas-wrap.gis .pane-tag{display:none}