/* 연안 고수온 조기경보 — 판은 어둡게, 지도는 밝게.
   특보 색은 상태 전용이다 (예비 노랑 · 주의보 주황 · 경보 빨강). 다른 곳에 쓰지 않는다. */
:root{
  --bg:#0b1119;
  --ink:#e8eef6;
  --dim:#9aa8bb;
  --faint:#66758a;
  --line:rgba(255,255,255,.11);
  --line2:rgba(255,255,255,.06);
  --glass:rgba(12,18,28,.80);
  --glass2:rgba(18,26,38,.92);
  --accent:#4da3ff;
  --ok:#7ec8e3;
  --pre:#f7c948;
  --warn:#ff8a3d;
  --hot:#e8453c;
  --r:12px;
  --shadow:0 8px 28px rgba(0,0,0,.35);
  --s-year:#ff8a3d;
  --s-clim:#c3ccd8;
  --s-bot:#4da3ff;
  --padt:env(safe-area-inset-top,0px);
  --padb:env(safe-area-inset-bottom,0px);
  --padl:env(safe-area-inset-left,0px);
  --padr:env(safe-area-inset-right,0px);
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);
  font-family:"Pretendard Variable",Pretendard,system-ui,-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  font-size:13px;-webkit-font-smoothing:antialiased;overflow:hidden}
button,select,input{font:inherit;color:inherit}
.muted{color:var(--dim)}
.faint{color:var(--faint)}
#map{position:fixed;inset:0}
.glass{background:var(--glass);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);
  border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
[hidden]{display:none!important}

/* ── 위 ── */
.topbar{position:fixed;z-index:6;left:calc(12px + var(--padl));top:calc(12px + var(--padt));display:flex;gap:8px;align-items:stretch;flex-wrap:wrap;
  max-width:calc(100vw - 24px - 330px)}
.brand{display:flex;gap:10px;align-items:center;padding:8px 14px 8px 10px}
.brand-logo{width:28px;height:28px}
.brand-title{font-weight:700;font-size:15px;letter-spacing:-.2px}
.brand-sub{color:var(--dim);font-size:11.5px}
.modes{display:flex;padding:4px;gap:2px;align-items:center}
.modes button{background:none;border:0;border-radius:9px;padding:8px 13px;cursor:pointer;color:var(--dim);white-space:nowrap}
.modes button:hover{background:var(--line2);color:var(--ink)}
.modes button[aria-pressed="true"]{background:rgba(255,255,255,.12);color:var(--ink);font-weight:600}

/* ── 왼쪽 설정 ── */
.ctrl{position:fixed;z-index:4;left:calc(12px + var(--padl));top:calc(78px + var(--padt));width:272px;padding:12px;max-height:calc(100vh - 230px);overflow:auto}
.ctrl h3{margin:0 0 6px;font-size:12px;color:var(--dim);font-weight:600}
.seg{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:10px}
.seg button{background:rgba(255,255,255,.05);border:1px solid var(--line2);border-radius:8px;padding:6px 9px;cursor:pointer;color:var(--dim)}
.seg button:hover{color:var(--ink);background:rgba(255,255,255,.09)}
.seg button[aria-pressed="true"]{background:rgba(77,163,255,.18);border-color:rgba(77,163,255,.5);color:var(--ink)}
.ctrl p{margin:6px 0;line-height:1.5;color:var(--dim)}
.legend{border-top:1px solid var(--line);margin-top:8px;padding-top:10px}
.legend .ttl{font-weight:600;margin-bottom:6px}
.legend .bar{height:10px;border-radius:3px}
.legend .ticks{position:relative;height:14px;font-size:10.5px;color:var(--dim)}
.legend .ticks span{position:absolute;transform:translateX(-50%);top:2px;white-space:nowrap}
.legend .cats{display:flex;flex-direction:column;gap:4px}
.legend .cats div{display:flex;gap:7px;align-items:center}
.legend .cats i{width:14px;height:10px;border-radius:2px;display:inline-block}
.legend .note{font-size:11px;color:var(--faint);margin-top:6px;line-height:1.45}

/* ── 오른쪽 해역 ── */
.sites{position:fixed;z-index:4;right:calc(12px + var(--padr));top:calc(12px + var(--padt));bottom:calc(12px + var(--padb));width:306px;display:flex;flex-direction:column}
.sites-head{padding:12px 14px 8px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:baseline;gap:6px}
.sites-head b{font-size:14px}
.sites-list{overflow:auto;padding:4px 6px 10px;flex:1}
.region{font-size:11px;color:var(--faint);margin:10px 8px 3px;font-weight:600;letter-spacing:.3px}
.site{display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:center;padding:7px 8px;border-radius:8px;cursor:pointer;border:1px solid transparent}
.site:hover{background:rgba(255,255,255,.06)}
.site[aria-current="true"]{background:rgba(77,163,255,.12);border-color:rgba(77,163,255,.4)}
.site .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.site .v{font-variant-numeric:tabular-nums;color:var(--ink);text-align:right;min-width:52px}
.site .v small{color:var(--faint)}
.chip{font-size:11px;padding:2px 7px;border-radius:99px;white-space:nowrap;border:1px solid var(--line);color:var(--dim);min-width:48px;text-align:center}
.chip.pre{border-color:var(--pre);color:var(--pre)}
.chip.warn{border-color:var(--warn);color:var(--warn)}
.chip.hot{background:var(--hot);border-color:var(--hot);color:#fff;font-weight:600}
.chip.ok{color:var(--faint)}
.sites-foot{border-top:1px solid var(--line);padding:8px 14px;font-size:11px;color:var(--faint);line-height:1.45}

/* ── 지도 표지 ── */
.mk{width:14px;height:14px;border-radius:50%;border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.5);cursor:pointer;background:#7c8ea3}
.mk.pre{background:var(--pre)} .mk.warn{background:var(--warn)} .mk.hot{background:var(--hot)}
.mk.sel{outline:3px solid rgba(77,163,255,.9);outline-offset:1px}
.mk.small{width:9px;height:9px;border-width:1.5px}
.maplibregl-popup-content{background:var(--glass2);color:var(--ink);border:1px solid var(--line);border-radius:10px;padding:10px 12px;box-shadow:var(--shadow);font-size:12.5px}
.maplibregl-popup-tip{display:none}
.maplibregl-popup-close-button{color:var(--dim);font-size:16px;padding:0 6px}
.pop-t{font-weight:600;margin-bottom:4px}
.pop-r{display:flex;justify-content:space-between;gap:14px;font-variant-numeric:tabular-nums}
.pop-r .k{color:var(--dim)}
.maplibregl-ctrl-attrib{background:rgba(255,255,255,.7)!important}

/* ── 아래 날짜 ── */
.timeline{position:fixed;z-index:5;left:calc(12px + var(--padl));right:calc(330px + var(--padr));bottom:calc(12px + var(--padb));padding:10px 14px 6px}
.tl-row{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.play{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.08);cursor:pointer;font-size:13px}
.play:hover{background:rgba(255,255,255,.16)}
#year{background:rgba(255,255,255,.08);border:1px solid var(--line);border-radius:8px;padding:6px 8px}
#year option{background:#152030}
.years{margin:0;flex-wrap:nowrap;overflow-x:auto}
.years button{padding:6px 11px;font-variant-numeric:tabular-nums}
.tl-date{font-size:16px;font-weight:700;font-variant-numeric:tabular-nums;min-width:128px}
.tl-note{flex:1;text-align:right;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tl-strip{display:flex;height:12px;border-radius:3px;overflow:hidden;gap:0;cursor:pointer;margin:0 8px}
.tl-strip i{flex:1;height:100%}
#day{width:100%;margin:4px 0 0;accent-color:var(--hot)}
.tl-months{position:relative;height:14px;font-size:10.5px;color:var(--faint);margin:0 8px}
.tl-months span{position:absolute;transform:translateX(-50%)}

/* ── 서랍 ── */
.drawer{position:fixed;z-index:6;right:calc(330px + var(--padr));bottom:calc(128px + var(--padb));width:min(560px,calc(100vw - 660px));max-height:calc(100vh - 230px);display:flex;flex-direction:column}
body.no-tl .drawer{bottom:calc(12px + var(--padb));max-height:calc(100vh - 110px)}
.drawer-head{display:flex;justify-content:space-between;align-items:center;padding:10px 12px 8px 14px;border-bottom:1px solid var(--line)}
.drawer-head b{font-size:14px}
.x{background:none;border:0;color:var(--dim);cursor:pointer;font-size:15px;padding:4px 8px;border-radius:6px}
.x:hover{background:var(--line2);color:var(--ink)}
.drawer-body{overflow:auto;padding:8px 14px 12px}
.chart{margin:8px 0 12px}
.chart-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:4px;flex-wrap:wrap}
.chart-head b{font-size:12.5px}
.chart-legend{display:flex;gap:10px;font-size:11px;color:var(--dim);flex-wrap:wrap}
.chart-legend i{display:inline-block;width:12px;height:2px;vertical-align:middle;margin-right:4px;border-radius:1px}
.chart-legend i.band{height:8px;opacity:.5}
.chart svg{width:100%;height:auto;display:block;overflow:visible}
.stats{display:flex;gap:14px;flex-wrap:wrap;font-size:11.5px;color:var(--dim);margin-top:4px}
.stats b{color:var(--ink);font-variant-numeric:tabular-nums}
.kv{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:6px 0 4px}
.kv div{background:rgba(255,255,255,.05);border-radius:8px;padding:7px 9px}
.kv .k{font-size:11px;color:var(--dim)}
.kv .v{font-size:16px;font-weight:700;font-variant-numeric:tabular-nums}
.kv .v small{font-size:11px;font-weight:400;color:var(--dim)}
.species{width:100%;border-collapse:collapse;font-size:12px;margin-top:4px}
.species td,.species th{padding:4px 6px;border-bottom:1px solid var(--line2);text-align:left}
.species th{color:var(--dim);font-weight:500}
.species td.n{text-align:right;font-variant-numeric:tabular-nums}
.tip{position:fixed;z-index:20;pointer-events:none;background:var(--glass2);border:1px solid var(--line);border-radius:8px;padding:6px 9px;font-size:11.5px;box-shadow:var(--shadow);font-variant-numeric:tabular-nums;max-width:260px}
.tip .k{color:var(--dim)}

/* ── 지금 ── */
.now-card{background:rgba(255,255,255,.05);border-radius:10px;padding:10px 11px;margin-bottom:8px}
.now-card .big{font-size:22px;font-weight:700;font-variant-numeric:tabular-nums}
.prob{display:grid;grid-template-columns:auto 1fr auto;gap:4px 8px;align-items:center;font-size:12px}
.prob .b{height:8px;border-radius:4px;background:rgba(255,255,255,.08);overflow:hidden}
.prob .b i{display:block;height:100%;border-radius:4px}

/* ── 해설 ── */
.about{position:fixed;inset:0;z-index:8;background:rgba(5,8,12,.55);overflow:auto;padding:84px 16px 40px}
.about-in{max-width:880px;margin:0 auto;padding:22px 26px 28px;line-height:1.65;font-size:14px;background:var(--glass2)}
.about h2{font-size:20px;margin:0 0 6px}
.about h3{font-size:15px;margin:22px 0 6px;color:var(--ink)}
.about p,.about li{color:#c9d3df}
.about table{border-collapse:collapse;width:100%;font-size:13px;margin:6px 0}
.about td,.about th{border-bottom:1px solid var(--line);padding:6px 8px;text-align:left;vertical-align:top}
.about th{color:var(--dim);font-weight:500}
.about td.n{text-align:right;font-variant-numeric:tabular-nums}
.about a{color:var(--accent)}
.about .src{font-size:12px;color:var(--faint)}
.about .close{position:sticky;top:0;float:right}

.loading{position:fixed;inset:0;z-index:30;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:var(--bg);color:var(--dim)}
.spin{width:30px;height:30px;border:3px solid rgba(255,255,255,.15);border-top-color:var(--hot);border-radius:50%;animation:sp 1s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}

/* ── 좁은 화면 ── */
@media (max-width:900px){
  .topbar{max-width:calc(100vw - 24px);right:12px}
  .brand-sub{display:none}
  .modes{overflow-x:auto;max-width:100%}
  .modes button{padding:7px 9px}
  .ctrl{top:auto;bottom:calc(12px + var(--padb));width:auto;right:12px;max-height:34vh}
  body.has-tl .ctrl{display:none}
  .sites{top:auto;left:12px;right:12px;width:auto;bottom:auto;top:calc(120px + var(--padt));max-height:30vh}
  body.has-tl .sites,body.has-tl.show-sites .sites{max-height:24vh}
  .timeline{right:12px}
  .drawer{left:12px;right:12px;width:auto;bottom:calc(128px + var(--padb));max-height:56vh}
  .kv{grid-template-columns:repeat(2,1fr)}
  .tl-note{display:none}
}

/* 지금: 관측소 점 */
.nmk{width:9px;height:9px;border-radius:50%;background:#7c8ea3;border:1.5px solid #fff;box-shadow:0 1px 3px rgba(0,0,0,.45);cursor:pointer}
.nmk.pre{background:var(--pre)} .nmk.warn{background:var(--warn)} .nmk.hot{background:var(--hot)}
.nmk.na{background:transparent;border-style:dashed;border-color:#7c8ea3}
.nmk.ring1{box-shadow:0 0 0 2.5px var(--hot)} .nmk.ring2{box-shadow:0 0 0 4px var(--hot)}
.nmk.sel{outline:3px solid rgba(77,163,255,.9);outline-offset:1px}
.legend i.dot{width:10px;height:10px;border-radius:50%;border:1.5px solid #fff}
.legend i.dot.ring{background:#7c8ea3;box-shadow:0 0 0 2.5px var(--hot)}
.now-row{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin-top:6px}
.now-row div{display:flex;flex-direction:column;align-items:center;gap:3px}
.now-row b{font-size:18px;font-variant-numeric:tabular-nums}
.lnk{cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lnk:hover{text-decoration:underline}
.ptab{width:100%;border-collapse:separate;border-spacing:3px;font-size:12px}
.ptab th{font-weight:500;color:var(--dim);text-align:left;white-space:nowrap}
.ptab td{text-align:center;border-radius:5px;padding:5px 4px;font-variant-numeric:tabular-nums}
.ptab.sk td{background:rgba(255,255,255,.06)}
.ptab.sk th{font-size:11px}