/* KOOS 특보판 (v2) 겉모습.
   v1 과 색은 맞추되 배치는 다르다 — 여기서 제일 중요한 건 "등급"이라
   색칠판보다 범례와 시간 띠가 먼저 눈에 들어와야 한다. */
:root {
    --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% - 24px);
    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); }

/* ── 옆 설명 ──────────────────────────────────────────── */
#side {
    position: absolute; z-index: 4; left: 12px;
    top: calc(100px + 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); }
.note { margin: 6px 0 0; font-size: 11px; color: var(--dim); line-height: 1.5; }
.note.dim { color: var(--dimmer); }

/* ── 시간 ─────────────────────────────────────────────── */
#timebar {
    position: absolute; z-index: 6; left: 12px; right: 12px;
    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; }
.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-attrib { font-size: 10px; }

/* ── 좁은 화면 ────────────────────────────────────────── */
@media (max-width: 900px) {
    #side {
        left: 8px; right: 8px; width: auto;
        top: auto; bottom: calc(56px + var(--safe-b));
        max-height: 38vh;
    }
    #hazbar { left: 8px; right: 8px; }
    #timebar { left: 8px; right: 8px; }
    #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; }
}