/* KOOS 특보판 (v2) 겉모습.
   v1 과 색은 맞추되 배치는 다르다 — 여기서 제일 중요한 건 "등급"이라
   색칠판보다 범례와 시간 띠가 먼저 눈에 들어와야 한다. */
:root {
    color-scheme: dark;              /* 수치칸 화살표·펼침 목록을 OS 가 어둡게 */
    --bg: #070b12;
    --card: rgba(13, 20, 32, .88);
    --line: rgba(255, 255, 255, .10);
    --fg: #eaf2ff;
    --dim: #8aa0b8;
    --dimmer: #61748c;
    --ok: #57d08a;
    --safe-b: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body {
    background: var(--bg); color: var(--fg);
    font: 13px/1.5 ui-sans-serif, system-ui, -apple-system, "Noto Sans KR",
          "Malgun Gothic", sans-serif;
    -webkit-text-size-adjust: 100%;
}
#map { position: absolute; inset: 0; }
.hidden { display: none !important; }
.dim { color: var(--dim); }
b { font-weight: 650; }

/* ── 머리 ─────────────────────────────────────────────── */
#top {
    position: absolute; top: 0; left: 0; right: 0; z-index: 5;
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px calc(8px + env(safe-area-inset-top, 0px));
    padding-top: calc(8px + env(safe-area-inset-top, 0px));
    background: linear-gradient(180deg, rgba(7, 11, 18, .92), rgba(7, 11, 18, 0));
    pointer-events: none;
}
#top > * { pointer-events: auto; }
.brand { display: flex; align-items: baseline; gap: 7px; }
.brand b { font-size: 15px; letter-spacing: -.2px; }
.tag {
    font-size: 10px; color: #ffd479; border: 1px solid rgba(255, 212, 121, .35);
    border-radius: 999px; padding: 1px 6px; white-space: nowrap;
}
.cyc { color: var(--dimmer); font-size: 11px; flex: 1; min-width: 0;
       overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.back { color: var(--dim); text-decoration: none; font-size: 12px; white-space: nowrap; }
.back:hover { color: var(--fg); }

/* ── 위험 고르기 ──────────────────────────────────────── */
#hazbar {
    position: absolute; z-index: 5; left: 12px;
    top: calc(46px + env(safe-area-inset-top, 0px));
    display: flex; gap: 6px; max-width: calc(100% - 66px);
    overflow-x: auto; scrollbar-width: none;
}
#hazbar::-webkit-scrollbar { display: none; }
.haz {
    flex: 0 0 auto; cursor: pointer;
    display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
    background: var(--card); color: var(--dim);
    border: 1px solid var(--line); border-radius: 10px;
    padding: 6px 11px; font: inherit; line-height: 1.25;
    backdrop-filter: blur(8px);
}
.haz .hn { font-size: 10px; color: var(--dimmer); }
.haz .hs { font-size: 13px; font-weight: 650; }
.haz.on { color: var(--fg); border-color: rgba(255, 212, 121, .55);
          background: rgba(38, 30, 12, .9); }

/* ── 판 모드 ──────────────────────────────────────────── */
/* "이 시각" 과 "96시간을 접은 판" 은 성질이 다른 그림이다. 탭을 따로 둬서
   지금 무엇을 보고 있는지 헷갈리지 않게 한다. */
#modebar {
    position: absolute; z-index: 5; left: 12px;
    top: calc(96px + env(safe-area-inset-top, 0px));
    display: flex; gap: 4px; max-width: calc(100% - 66px);
    overflow-x: auto; scrollbar-width: none;
    background: var(--card); border: 1px solid var(--line);
    border-radius: 9px; padding: 3px; backdrop-filter: blur(8px);
}
#modebar::-webkit-scrollbar { display: none; }
.mode {
    flex: 0 0 auto; cursor: pointer; font: inherit; font-size: 12px;
    padding: 4px 9px; border: 0; border-radius: 7px;
    background: none; color: var(--dim); white-space: nowrap;
}
.mode.on { color: #101722; background: #ffd479; font-weight: 650; }

/* 접은 판은 시각 하나를 고르는 그림이 아니다. 시간 막대를 잠근다. */
body.folded #timebar { opacity: .35; pointer-events: none; }

/* ── 옆 설명 ──────────────────────────────────────────── */
#side {
    position: absolute; z-index: 4; left: 12px;
    top: calc(134px + env(safe-area-inset-top, 0px));
    width: 300px; max-height: calc(100% - 230px); overflow-y: auto;
    background: var(--card); border: 1px solid var(--line);
    border-radius: 12px; padding: 10px 12px; backdrop-filter: blur(10px);
}
#side .hd { font-size: 12px; color: var(--dim); }
.legend { margin: 8px 0 6px; display: grid; gap: 4px; }
.lgrow { display: grid; grid-template-columns: 12px 42px 1fr; gap: 7px;
         align-items: center; font-size: 12px; }
.lgrow i { width: 12px; height: 12px; border-radius: 3px;
           box-shadow: 0 0 0 1px rgba(0, 0, 0, .5) inset; }
.lgrow.off i { background: repeating-linear-gradient(45deg,
    #43505f 0 3px, #2a333f 3px 6px); }
.lgrow span { color: var(--dim); }
.area { display: flex; flex-wrap: wrap; gap: 5px; margin: 6px 0 2px; min-height: 22px; }
.chip {
    font-size: 11px; padding: 2px 8px; border-radius: 999px;
    color: var(--c, var(--dim)); border: 1px solid currentColor;
    background: color-mix(in srgb, var(--c, #888) 14%, transparent);
    white-space: nowrap;
}
.chip.ok { --c: var(--ok); }
.chip.warnish { --c: #ffd479; }
.bad { color: #ff6b62; }

.lgtitle { font-size: 11px; color: var(--dim); margin-bottom: 4px; }
.lgbar { height: 11px; border-radius: 3px; box-shadow: 0 0 0 1px rgba(0,0,0,.45) inset; }
.lgticks { display: flex; justify-content: space-between; margin-top: 2px;
           font-size: 10px; color: var(--dimmer); font-variant-numeric: tabular-nums; }

.infobtn { cursor: pointer; font: inherit; font-size: 11px; margin-top: 6px;
           padding: 3px 8px; border-radius: 999px; color: var(--dim);
           background: rgba(255,255,255,.05); border: 1px solid var(--line); }
.infobtn.on { color: var(--fg); border-color: rgba(255,212,121,.45); }
.info { margin-top: 4px; }
.note { margin: 6px 0 0; font-size: 11px; color: var(--dim); line-height: 1.5; }
.note.dim { color: var(--dimmer); }

/* ── 시간 ─────────────────────────────────────────────── */
/* 오른쪽 끝을 40px 비워 둔다. 거기가 지도 출처 표시(접힌 ⓘ)의 자리다 —
   배경지도 약관상 가려서는 안 되는 것인데, 막대를 오른쪽 끝까지 늘이면
   그대로 깔린다. */
#timebar {
    position: absolute; z-index: 6; left: 12px; right: calc(12px + 40px);
    bottom: calc(10px + var(--safe-b));
    display: flex; align-items: center; gap: 8px;
    background: var(--card); border: 1px solid var(--line);
    border-radius: 12px; padding: 7px 11px; backdrop-filter: blur(10px);
}
#timebar button {
    flex: 0 0 auto; cursor: pointer; min-width: 34px; height: 30px;
    background: rgba(255, 255, 255, .06); color: var(--fg);
    border: 1px solid var(--line); border-radius: 8px; font: inherit;
}
#play[data-on="1"] { background: rgba(255, 212, 121, .18); border-color: rgba(255, 212, 121, .5); }
#range { flex: 1; min-width: 60px; accent-color: #ffd479; height: 30px; }
.clock { font-variant-numeric: tabular-nums; font-size: 13px; white-space: nowrap; }
.lead { font-variant-numeric: tabular-nums; font-size: 11px; color: #ffd479;
        white-space: nowrap; min-width: 34px; text-align: right; }
.lead.past { color: var(--dimmer); }

/* ── 지점 패널 ────────────────────────────────────────── */
#panel {
    position: absolute; z-index: 6; right: 12px;
    bottom: calc(56px + var(--safe-b));
    width: 520px; max-width: calc(100% - 24px);
    max-height: calc(100% - 190px); overflow-y: auto;
    background: var(--card); border: 1px solid var(--line);
    border-radius: 12px; padding: 10px 12px 12px; backdrop-filter: blur(10px);
}
.phead { display: flex; align-items: center; gap: 8px; }
.phead span { flex: 1; font-variant-numeric: tabular-nums; font-size: 12px; color: var(--dim); }
#panelX { cursor: pointer; background: none; border: 0; color: var(--dim);
          font-size: 15px; line-height: 1; padding: 2px 4px; }
.tabs { display: flex; gap: 6px; margin: 8px 0 6px; }
.tabs button {
    cursor: pointer; font: inherit; font-size: 12px; padding: 4px 10px;
    color: var(--dim); background: rgba(255, 255, 255, .05);
    border: 1px solid var(--line); border-radius: 999px;
}
.tabs button.on { color: var(--fg); background: rgba(255, 212, 121, .16);
                  border-color: rgba(255, 212, 121, .45); }
#band { width: 100%; display: block; }
.bnote { margin-top: 6px; display: grid; gap: 3px; }
.sm { font-size: 12px; }
.sm b { display: inline-block; min-width: 46px; color: var(--dim); }
.sm .ok { color: var(--ok); }
.span { font-size: 11px; color: var(--dim); font-variant-numeric: tabular-nums; }
.golimits { display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 2px 0 8px;
            font-size: 12px; color: var(--dim); align-items: center; }
.golimits input { width: 62px; font: inherit; font-size: 12px; padding: 3px 6px;
                  color: var(--fg); background: rgba(255,255,255,.06);
                  border: 1px solid var(--line); border-radius: 6px;
                  font-variant-numeric: tabular-nums; }
#goBand { width: 100%; display: block; }

.wfoot { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.wfoot .note { margin: 0; }
.wbox { margin: 8px 0 4px; border-radius: 10px; overflow: hidden;
        background: #0d1420; min-height: 300px; }
.wbox iframe { width: 100%; height: 380px; border: 0; display: block; }
.wlink { font-size: 12px; color: #ffd479; text-decoration: none; }

/* 지도 표식 */
.pin {
    width: 14px; height: 14px; border-radius: 50%;
    background: rgba(255, 255, 255, .95);
    box-shadow: 0 0 0 3px rgba(255, 212, 121, .55), 0 0 10px rgba(0, 0, 0, .8);
}
.fatal { position: absolute; inset: auto 12px 12px; z-index: 20;
         background: #3a1416; border: 1px solid #7a2b2f; border-radius: 10px;
         padding: 10px 12px; }
/* ── 지도 단추 ────────────────────────────────────────────
   확대 단추는 원래 오른쪽 **아래**였는데, 거기는 시간 막대(아래)와 지점
   패널(위)이 위아래로 맞물려 빈 자리가 없다. 위 오른쪽으로 옮기고 위험
   막대와 같은 줄에 맞춘다. 출처 표시만 아래 모서리에 남긴다. */
.maplibregl-ctrl-top-right { top: calc(46px + env(safe-area-inset-top, 0px)); }
.maplibregl-ctrl-group {
    background: var(--card); border: 1px solid var(--line);
    border-radius: 10px; overflow: hidden; box-shadow: 0 6px 20px rgba(0,0,0,.4);
    backdrop-filter: blur(8px);
}
.maplibregl-ctrl-group button { width: 30px; height: 30px; background: none; }
.maplibregl-ctrl-group button + button { border-top: 1px solid var(--line); }
.maplibregl-ctrl-group button:hover { background: rgba(255,255,255,.07); }
.maplibregl-ctrl-group button:focus { box-shadow: none; }
.maplibregl-ctrl-icon { filter: invert(1); opacity: .72; }
.maplibregl-ctrl-group button:hover .maplibregl-ctrl-icon { opacity: 1; }

/* maplibre 쪽이 클래스 두 개로 잡아 놔서 한 개짜리로는 특정도에서 진다. */
.maplibregl-ctrl.maplibregl-ctrl-attrib {
    font-size: 10px; background-color: var(--card); color: var(--dimmer);
    border-radius: 9px; padding: 1px 6px;
}
.maplibregl-ctrl-attrib.maplibregl-compact {
    background-color: var(--card); border: 1px solid var(--line);
    backdrop-filter: blur(8px);
}
.maplibregl-ctrl-attrib a { color: var(--dim); text-decoration: none; }
.maplibregl-ctrl-attrib.maplibregl-compact:after { filter: invert(1); opacity: .6; }
.maplibregl-ctrl-attrib-button { background-color: transparent; filter: invert(1); opacity: .6; }
.maplibregl-ctrl-bottom-right { bottom: var(--safe-b); }

/* ── 좁은 화면 ────────────────────────────────────────── */
@media (max-width: 900px) {
    #side {
        left: 8px; right: 8px; width: auto;
        top: auto; bottom: calc(56px + var(--safe-b));
        max-height: 34vh;
    }
    #hazbar { left: 8px; max-width: calc(100% - 58px); }
    #modebar { left: 8px; max-width: calc(100% - 58px); }
    #timebar { left: 8px; right: calc(8px + 40px); }
    #panel {
        left: 8px; right: 8px; width: auto;
        bottom: calc(56px + var(--safe-b));
        max-height: 62vh;
    }
    /* 지점 패널이 열리면 옆 설명은 자리를 비운다 — 둘이 같은 자리다. */
    body:has(#panel:not(.hidden)) #side { display: none; }
    .brand b { font-size: 14px; }
    .cyc { display: none; }
    .wbox iframe { height: 320px; }
}