/* NIFS 5 km ROMS — 화면.

   레퍼런스(KOOS 예보 뷰어)의 화면 언어를 그대로 쓴다: 지도는 전면으로 깔고,
   나머지는 모두 그 위에 떠 있는 유리판(.glass)이다. 이유는 두 가지다 —
   지도가 화면을 통째로 쓰면 격자 5km 가 실제로 보이고, 조작판이 떠 있으면
   기본 화면에 남는 것이 '지도 · 변수 · 기간 · 색눈금' 넷뿐이 된다.

   그래서 나머지(등치/유선/내려받기, 연직 단면, 검증)는 전부 접어 둔다.
   처음 보는 사람이 눌러야 할 것을 넷으로 줄이는 것이 이 파일의 목적이다. */

:root{
  --bg:#070b12;
  --ink:#e8eef6;
  --dim:#93a2b8;
  --faint:#5d6b80;
  --line:rgba(255,255,255,.10);
  --line2:rgba(255,255,255,.06);
  --glass:rgba(12,18,28,.72);
  --glass2:rgba(16,24,36,.90);
  --accent:#4da3ff;
  --warn:#ff6b6b;
  --r:12px;
  /* 노치·홈바 여백. 네 방향 다 잡는다 (아이폰 가로보기에서 왼쪽 판이 먹힌다). */
  --pad: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);
  --tbh:58px;                            /* 기간막대 높이. 범례를 그 위에 띄운다 */
  --shadow:0 8px 28px rgba(0,0,0,.45);

  /* 캔버스가 읽어 가는 색 (theme.js). 지도·색눈금·차트는 캔버스라
     스타일시트가 손댈 수 없다 — 아래 값이 곧 그림의 색이다.
     하나라도 빼먹으면 그 색만 기본값(밝은 종이색)으로 남아 어두운 판에서
     글씨가 사라진다. boottest 7절이 누락을 잡는다. */
  --c-paper:#070b12;  --c-plate:#0c121c;
  --c-ink:#e8eef6;    --c-ink2:#93a2b8;  --c-ink3:#5d6b80;
  --c-rule:rgba(255,255,255,.20);
  --c-rule2:rgba(255,255,255,.11);
  --c-rule3:rgba(255,255,255,.06);
  --c-navy:#4da3ff;   --c-brick:#ff9d5c; --c-onaccent:#08121f;
  --c-sea:#0a1220;    --c-bed:#1b2634;
  --c-coast:#cfdcea;  --c-coastrule:rgba(255,255,255,.10);
  --c-sealbl:#7d8ca3; --c-halo:rgba(7,11,18,.82);
  --c-iso1:rgba(126,176,224,.34);
  --c-iso2:rgba(126,176,224,.20);
  --c-flow:226,236,248;                  /* 유선은 알파를 세기로 쓰므로 rgb 세 값 */
}

*{box-sizing:border-box}
/* 브라우저 기본 [hidden]{display:none} 은 특정도가 가장 낮아서 .sheet{display:flex}
   같은 클래스 규칙에 진다. 그러면 hidden 을 달아 둔 창이 처음부터 열려 있다. */
[hidden]{display:none !important}
html,body{height:100%;margin:0}
@supports (height:100dvh){ html,body{height:100dvh} }
body{
  background:var(--bg); color:var(--ink);
  font:400 13px/1.45 -apple-system,BlinkMacSystemFont,"Pretendard","Apple SD Gothic Neo",
       "Noto Sans KR","Malgun Gothic",system-ui,sans-serif;
  overflow:hidden; -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent; touch-action:manipulation;
}
button,.sw,.ptitle,.rl,.c-main,.c-sub,.pt,.brand{-webkit-user-select:none;user-select:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:9px}

.glass{
  background:var(--glass);
  backdrop-filter:blur(14px) saturate(1.3);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);
  border:1px solid var(--line);
  border-radius:var(--r);
  box-shadow:var(--shadow);
}

/* ── 지도 ──────────────────────────────────────────────────── */
.map{position:absolute;inset:0;background:var(--c-sea)}
.map canvas{position:absolute;inset:0;width:100%;height:100%;outline:none;display:block}
#ov{cursor:crosshair}
.map.dragging #ov{cursor:grabbing}

/* ── 좌상단 ────────────────────────────────────────────────── */
.topbar{
  position:absolute; left:calc(12px + var(--padl)); top:calc(12px + var(--pad)); z-index:20;
  display:flex; flex-direction:column; gap:8px; align-items:flex-start;
  pointer-events:none;                   /* 껍데기는 손을 안 받는다 */
}
.topbar > *{pointer-events:auto}
.brand{display:flex;align-items:center;gap:10px;padding:8px 13px 8px 9px}
.brand-mark{
  width:34px;height:34px;flex:none;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  font:700 10px/1 ui-monospace,monospace;letter-spacing:.02em;
  color:var(--c-onaccent);background:linear-gradient(150deg,#6cb6ff,#2f7fd6);
}
.brand-title{font-size:13.5px;font-weight:650;letter-spacing:-.2px;line-height:1.2}
.brand-sub{font-size:11px;color:var(--dim);margin-top:1px;font-variant-numeric:tabular-nums}
.brand-sub b{font-weight:600;color:var(--ink)}

/* 변수 탭. 세로로 세운다 — 여섯 개를 옆으로 늘어놓으면 지도 위쪽을 가로로
   가로막는다. position:relative 는 유지해야 한다 (.var-ind 가 offsetTop 을
   이 상자 기준으로 재기 때문). */
.varbar{position:relative;z-index:19;display:flex;flex-direction:column;
        padding:4px;gap:1px;min-width:112px;max-height:calc(100vh - 300px);overflow-y:auto}
.varbar button{
  position:relative;z-index:1;appearance:none;background:none;border:0;
  color:var(--dim);cursor:pointer;font:inherit;font-size:12px;font-weight:550;
  padding:7px 12px;border-radius:8px;text-align:left;transition:color .16s;
  display:flex;justify-content:space-between;align-items:baseline;gap:10px;white-space:nowrap;
}
.varbar button:hover{color:var(--ink)}
.varbar button.on{color:var(--c-onaccent)}
.varbar .vd{font-size:9px;font-weight:700;opacity:.5;letter-spacing:.04em}
.var-ind,.week-ind{
  position:absolute;z-index:0;left:0;top:0;width:0;height:0;border-radius:8px;
  background:var(--accent);pointer-events:none;
  transition:transform .22s cubic-bezier(.4,.9,.3,1),
             width .22s cubic-bezier(.4,.9,.3,1),
             height .22s cubic-bezier(.4,.9,.3,1);
}

/* ── 우상단 도구 ───────────────────────────────────────────── */
.tools{position:absolute;right:calc(12px + var(--padr));top:calc(12px + var(--pad));
       z-index:20;display:flex;gap:2px;padding:4px}
.iconbtn{
  appearance:none;background:none;border:0;color:var(--dim);cursor:pointer;
  display:flex;align-items:center;gap:6px;padding:8px;border-radius:9px;
  font:inherit;font-size:12px;font-weight:550;transition:.15s;
}
.iconbtn svg{width:17px;height:17px;flex:none}
.iconbtn:hover{color:var(--ink);background:rgba(255,255,255,.07)}
.iconbtn.on{color:var(--ink);background:rgba(255,255,255,.12)}
.iconbtn.wide{padding:8px 11px}
/* 글자를 감추는 목. 감춰도 title 이 남으니 뜻은 안 잃는다. */
@media (max-width:900px){ .iconbtn.wide span{display:none} .iconbtn.wide{padding:8px} }

/* ── 표시 설정 판 ──────────────────────────────────────────── */
.panel{
  position:absolute; right:calc(12px + var(--padr)); top:calc(64px + var(--pad)); z-index:18;
  width:292px; padding:12px; max-height:calc(100vh - 190px); overflow-y:auto;
  transition:opacity .2s, transform .22s;
}
.panel.closed{opacity:0;transform:translateY(-8px) scale(.98);pointer-events:none}
.ptitle{
  font-size:11px;font-weight:700;letter-spacing:.08em;
  color:var(--faint);margin:2px 2px 10px;display:flex;justify-content:space-between;
  align-items:center;gap:8px;
}
.ptitle.sub{margin:0 2px 7px}
.p-x{appearance:none;background:none;border:0;color:var(--faint);cursor:pointer;padding:2px;
     border-radius:6px;display:flex}
.p-x svg{width:15px;height:15px}
.p-x:hover{color:var(--ink);background:rgba(255,255,255,.08)}
.group{border-top:1px solid var(--line2);padding:8px 0;margin:0}
.group:first-of-type{border-top:0;padding-top:0}
.row{display:flex;align-items:center;gap:10px;padding:6px 2px;cursor:pointer}
.rl{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.rl b{font-weight:550;font-size:12.5px}
.rl i{font-style:normal;font-size:10.5px;color:var(--faint);line-height:1.35}

.sw{appearance:none;width:34px;height:19px;border-radius:10px;background:rgba(255,255,255,.14);
    position:relative;cursor:pointer;flex:none;transition:background .18s;border:0;margin:0}
.sw::after{content:"";position:absolute;top:2px;left:2px;width:15px;height:15px;
    border-radius:50%;background:#fff;transition:transform .18s}
.sw:checked{background:var(--accent)}
.sw:checked::after{transform:translateX(15px)}

.mini{appearance:none;border:1px solid var(--line);background:rgba(255,255,255,.05);
      color:var(--dim);font:inherit;font-size:11.5px;font-weight:550;padding:5px 11px;
      border-radius:8px;cursor:pointer;flex:none;transition:.15s}
.mini:hover{color:var(--ink);background:rgba(255,255,255,.12)}

.colo{margin:0;display:grid;grid-template-columns:auto 1fr;gap:3px 10px;font-size:11px}
.colo dt{color:var(--faint)}
.colo dd{margin:0;color:var(--dim);font-variant-numeric:tabular-nums}
.status{border-top:1px solid var(--line2);margin-top:6px;padding-top:8px;
        font-size:10.5px;color:var(--faint);line-height:1.5;font-variant-numeric:tabular-nums}

/* ── 수심 눈금 ─────────────────────────────────────────────────
   물기둥을 세워 놓은 모양이다. 칸 색(--dcol)은 roms.js 가 깊이에 따라
   짙어지게 넣는다. 2D 변수를 고르면 .off 가 붙어 통째로 사라진다. */
.depthrail{
  position:absolute; right:calc(12px + var(--padr)); z-index:17;
  top:50%; transform:translateY(-50%); padding:7px 6px 6px;
  display:flex; flex-direction:column; gap:1px; min-width:52px;
  transition:opacity .2s, transform .2s;
}
.depthrail.off{opacity:0;pointer-events:none;transform:translateY(-50%) translateX(8px)}
.depthrail .rh{font-size:9.5px;font-weight:700;letter-spacing:.08em;color:var(--faint);
               text-align:center;padding-bottom:4px}
.depthrail .rb{display:flex;flex-direction:column;gap:1px}
.depthrail button{
  appearance:none;border:0;background:none;cursor:pointer;font:inherit;
  font-size:10.5px;font-variant-numeric:tabular-nums;color:var(--dim);
  padding:3px 6px 3px 14px;border-radius:6px;text-align:right;position:relative;
  transition:background .14s,color .14s;
}
.depthrail button::before{
  content:"";position:absolute;left:5px;top:50%;transform:translateY(-50%);
  width:4px;height:4px;border-radius:1px;background:var(--dcol,var(--dim));opacity:.85;
}
.depthrail button:hover:not(:disabled){background:rgba(255,255,255,.07);color:var(--ink)}
.depthrail button.on{background:rgba(255,255,255,.13);color:var(--ink);font-weight:600}
.depthrail button.on::before{width:5px;height:11px;border-radius:2px;opacity:1}
.depthrail button:disabled{opacity:.28;cursor:default}

/* ── 색눈금 ────────────────────────────────────────────────── */
.legend{
  position:absolute; left:calc(12px + var(--padl)); z-index:18; padding:8px 11px 9px;
  bottom:calc(var(--tbh) + 20px + var(--padb));
  width:min(340px, calc(100vw - 24px));
}
#legend{width:100%;height:42px;display:block}
.lg-cap{font-size:10.5px;color:var(--faint);line-height:1.5;margin-top:5px;
        border-top:1px solid var(--line2);padding-top:6px}
.lg-cap b{color:var(--dim);font-weight:600}

/* ── 지도 위 작은 것들 ─────────────────────────────────────── */
.readout{padding:7px 10px;font-variant-numeric:tabular-nums;line-height:1.4;min-width:132px}
#readout{position:absolute;right:calc(12px + var(--padr));z-index:18;
         bottom:calc(var(--tbh) + 20px + var(--padb))}
.readout .rv{font-size:16px;font-weight:650;letter-spacing:-.3px}
.readout .rv .u{font-size:10.5px;font-weight:400;color:var(--dim)}
.readout .rp{font-size:10.5px;color:var(--faint)}

.loading{position:absolute;left:50%;top:calc(16px + var(--pad));transform:translateX(-50%);
         z-index:25;padding:6px 13px;font-size:11.5px;color:var(--dim)}
.scalebar{position:absolute;left:calc(12px + var(--padl));z-index:16;
          bottom:calc(var(--tbh) + 6px + var(--padb));
          display:flex;align-items:center;gap:6px;font-size:9.5px;color:var(--faint);
          font-variant-numeric:tabular-nums;pointer-events:none}
.scalebar i{display:block;height:4px;border-left:1px solid var(--dim);
            border-right:1px solid var(--dim);border-bottom:1px solid var(--dim)}

/* ── 기간 막대 ─────────────────────────────────────────────── */
.timebar{
  position:absolute; z-index:20;
  left:calc(12px + var(--padl)); right:calc(12px + var(--padr));
  bottom:calc(12px + var(--padb));
  display:flex; align-items:center; gap:12px; padding:9px 13px;
}
#play{appearance:none;width:34px;height:34px;flex:none;border-radius:50%;border:0;cursor:pointer;
      background:var(--accent);color:var(--c-onaccent);font-size:12px;line-height:1;
      display:flex;align-items:center;justify-content:center;transition:background .18s}
#play:hover{background:#6cb6ff}
#play[data-playing="1"]{font-size:0}
#play[data-playing="1"]::before{content:"❚❚";font-size:9px;letter-spacing:1px}
.clock{flex:none;min-width:118px;line-height:1.25}
.c-main{font-size:14px;font-weight:650;letter-spacing:-.2px}
.c-sub{font-size:10.5px;color:var(--faint);font-variant-numeric:tabular-nums}

/* 여섯 칸뿐이라 재생바를 끌게 하지 않는다 — 직접 누르는 것이 언제나 빠르다. */
.weekbar{position:relative;flex:1;display:flex;gap:2px;justify-content:flex-end}
.weekbar button{
  position:relative;z-index:1;appearance:none;background:none;border:0;cursor:pointer;
  color:var(--dim);font:inherit;padding:5px 13px;border-radius:9px;transition:color .16s;
  display:flex;flex-direction:column;align-items:center;gap:0;line-height:1.2;
}
.weekbar button:hover{color:var(--ink)}
.weekbar button.on{color:var(--c-onaccent)}
.weekbar .wl{font-size:12px;font-weight:600}
.weekbar .ws{font-size:9.5px;opacity:.7;font-variant-numeric:tabular-nums}
.week-ind{border-radius:9px}

/* ── 큰 창 (연직 단면 · 검증) ──────────────────────────────────
   지도 화면에 붙여 두지 않는다. 기본 화면에 남는 것은 지도·변수·기간·색눈금
   넷뿐이어야 하고, 이 둘은 한 번에 한 가지만 보는 것이다. */
.sheet{position:fixed;inset:0;z-index:70;display:flex;align-items:center;justify-content:center;
       padding:20px;background:rgba(4,7,12,.62);backdrop-filter:blur(3px)}
.sheet-in{display:flex;flex-direction:column;width:min(1280px,96vw);
          max-height:min(940px,92vh);border-radius:16px;overflow:hidden;padding:0}
.sheet-head{display:flex;align-items:flex-start;gap:14px;padding:13px 15px;flex:none;
            border-bottom:1px solid var(--line2)}
.sheet-tx{flex:1;min-width:0}
.sheet-nm{font-size:15px;font-weight:650;letter-spacing:-.2px}
.sheet-sub{font-size:11px;color:var(--faint);line-height:1.55;margin-top:2px;max-width:78ch}
.sheet-sub b{color:var(--dim);font-weight:600}
.sheet-info{font-size:10.5px;color:var(--faint);font-variant-numeric:tabular-nums;
            font-weight:400;letter-spacing:0;white-space:nowrap;flex:none}
.sheet-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:13px 15px 16px}

/* 세그먼트 단추 — 창 안에서 쓰는 유일한 조작 부속이다. */
.segbar{display:flex;flex-wrap:wrap;gap:3px;align-items:center}
.seg,.segbar button{
  appearance:none;border:1px solid var(--line);background:rgba(255,255,255,.04);
  color:var(--dim);font:inherit;font-size:11.5px;padding:5px 10px;border-radius:8px;
  cursor:pointer;line-height:1.3;transition:background .14s,border-color .14s,color .14s;
  font-variant-numeric:tabular-nums;
}
.seg:hover,.segbar button:hover:not(:disabled){background:rgba(255,255,255,.09);color:var(--ink)}
.seg.on,.segbar button.on{background:rgba(77,163,255,.20);border-color:rgba(77,163,255,.55);
                          color:var(--ink)}
.segbar button:disabled{opacity:.3;cursor:default}
.segbar.zbar{margin-top:8px}
.segbar.zbar.off{display:none}
.cap{font-size:11px;color:var(--faint);line-height:1.6;margin:8px 0 0}
.cap b{color:var(--dim);font-weight:600}
.hint{font-size:10.5px;color:var(--faint);line-height:1.55;margin:7px 0 0}

/* Ⅱ 연직 단면 */
.seclayout{display:grid;grid-template-columns:300px minmax(0,1fr);gap:16px;align-items:start}
.minimap{position:relative;height:290px;margin-top:8px;border-radius:10px;overflow:hidden;
         background:var(--c-sea);border:1px solid var(--line2)}
.minimap canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
#sov{cursor:crosshair}
.secmain{min-width:0}
.secwrap{position:relative;height:clamp(300px,50vh,470px);margin-top:8px}
#sec{position:absolute;inset:0;width:100%;height:100%;display:block}
#seclegend{width:100%;height:42px;display:block;margin-top:2px}

/* Ⅲ 검증 */
.vbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.vsep{width:1px;height:20px;background:var(--line);flex:none}
.trio{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
      gap:10px;margin-top:12px}
.pane{min-width:0}
.pt{font-size:11px;font-weight:600;color:var(--dim);padding-bottom:5px}
.pmap{position:relative;height:clamp(220px,32vh,340px);border-radius:10px;overflow:hidden;
      background:var(--c-sea);border:1px solid var(--line2)}
.pmap canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
#vread{position:absolute;right:8px;top:32px;z-index:5}
.leg2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:8px}
.leg2 canvas{width:100%;height:42px;display:block}

.vgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}
.vcard{background:rgba(255,255,255,.035);border:1px solid var(--line2);border-radius:12px;
       padding:11px 12px 12px;min-width:0}
.vcard + .vcard,.vgrid + .vcard{margin-top:0}
.vgrid ~ .vcard{margin-top:12px}
.chartwrap{position:relative;height:290px}
.chartwrap canvas{position:absolute;inset:0;width:100%;height:100%;display:block}

.tabwrap{max-height:300px;overflow:auto;overscroll-behavior:contain}
.vtab{width:100%;border-collapse:collapse;font-size:11px;font-variant-numeric:tabular-nums}
.vtab th{position:sticky;top:0;z-index:1;background:var(--glass2);text-align:right;
         font-weight:600;color:var(--dim);padding:6px 8px;white-space:nowrap;
         border-bottom:1px solid var(--line)}
.vtab th:first-child,.vtab td:first-child{text-align:left}
.vtab td{padding:4px 8px;text-align:right;color:var(--dim);border-bottom:1px solid var(--line2);
         white-space:nowrap}
.vtab td.pos{color:#ff9d5c}
.vtab td.neg{color:#6cb6ff}
.vtab tr:hover td{background:rgba(255,255,255,.04)}

/* ── 도움말 ────────────────────────────────────────────────── */
.modal{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;
       background:rgba(4,7,12,.62);padding:20px}
.modal-in{position:relative;max-width:620px;width:100%;max-height:86vh;overflow-y:auto;
          padding:22px 24px;overscroll-behavior:contain}
.modal-in .p-x{position:absolute;right:12px;top:12px}
.modal-in h2{margin:0 0 10px;font-size:17px;letter-spacing:-.3px}
.modal-in h3{margin:16px 0 7px;font-size:11px;letter-spacing:.08em;color:var(--faint);
             font-weight:700}
.modal-in p{margin:0 0 9px;color:var(--dim);font-size:12.5px;line-height:1.65}
.modal-in b{color:var(--ink);font-weight:600}
.htab{width:100%;border-collapse:collapse;font-size:12px}
.htab th{text-align:left;padding:4px 12px 4px 0;color:var(--ink);font-weight:600;
         white-space:nowrap;vertical-align:top;width:1%}
.htab td{padding:4px 0;color:var(--dim);line-height:1.55}
.fine{font-size:10.5px;color:var(--faint);border-top:1px solid var(--line2);
      padding-top:10px;margin-top:14px;line-height:1.6}

/* ── 첫 화면 ───────────────────────────────────────────────── */
.boot{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;
      background:var(--bg);transition:opacity .45s}
.boot.gone{opacity:0;pointer-events:none}
.boot-in{font-size:12.5px;color:var(--dim);letter-spacing:.02em}

/* ══════════════════════════════════════════════════════════════
   좁은 화면 — 폰은 넓이가 아니라 **높이**가 없다.
   규칙은 하나: 무엇도 지도 위에 겹쳐 세로로 쌓지 않는다.
   ══════════════════════════════════════════════════════════════ */
@media (pointer:coarse){
  #play{width:44px;height:44px;font-size:14px}
  .iconbtn{padding:11px}
  .iconbtn.wide{padding:11px 12px}
  .iconbtn svg{width:19px;height:19px}
  .p-x{padding:7px}
  .p-x svg{width:17px;height:17px}
  .sw{width:44px;height:26px;border-radius:13px}
  .sw::after{width:20px;height:20px}
  .sw:checked::after{transform:translateX(18px)}
  .varbar button{padding:10px 13px}
  .weekbar button{padding:8px 13px}
  .depthrail button{padding:7px 8px 7px 16px;font-size:11.5px}
  .seg,.segbar button{padding:8px 12px;font-size:12px}
  .panel,.varbar,.modal-in,.sheet-body,.tabwrap{overscroll-behavior:contain}
}

@media (max-width:1080px){
  .seclayout{grid-template-columns:1fr}
  .minimap{height:240px}
  .vgrid,.leg2{grid-template-columns:1fr}
  .trio{grid-template-columns:1fr;}
  .pmap{height:clamp(200px,30vh,300px)}
}

@media (max-width:640px){
  :root{--r:14px}
  .topbar{left:calc(8px + var(--padl));right:calc(8px + var(--padr));top:calc(8px + var(--pad));gap:6px}
  .brand{padding:6px 11px 6px 7px;gap:8px}
  .brand-mark{width:28px;height:28px;font-size:9px}
  .brand-title{font-size:12.5px}
  .brand-sub{font-size:10px}
  /* 변수는 세로로 쌓으면 화면 절반을 먹는다. 옆으로 눕히고 넘치면 굴린다. */
  .varbar{flex-direction:row;align-self:stretch;min-width:0;max-height:none;
          overflow-x:auto;overflow-y:hidden;gap:2px;scrollbar-width:none}
  .varbar::-webkit-scrollbar{display:none}
  .varbar button{flex:none;padding:8px 11px}

  .tools{right:calc(8px + var(--padr));top:calc(8px + var(--pad));padding:3px}

  /* 기간막대는 두 줄로 접어 주차 칸에 화면 너비를 통째로 준다. */
  .timebar{left:calc(8px + var(--padl));right:calc(8px + var(--padr));
           bottom:calc(8px + var(--padb));flex-wrap:wrap;gap:0 10px;padding:8px 11px}
  #play{order:1}
  .clock{order:2;flex:1;min-width:0}
  .weekbar{order:3;flex:1 0 100%;justify-content:space-between;padding-top:6px;overflow-x:auto;
           scrollbar-width:none}
  .weekbar::-webkit-scrollbar{display:none}
  .weekbar button{flex:none;padding:6px 9px}

  /* 수심은 오른쪽에 세우면 지도 절반을 덮는다. 기간막대 위 가로줄로 눕힌다. */
  .depthrail{top:auto;bottom:calc(var(--tbh) + 78px + var(--padb));transform:none;
             right:calc(8px + var(--padr));left:calc(8px + var(--padl));
             flex-direction:row;align-items:center;gap:6px;padding:5px 8px;min-width:0}
  .depthrail.off{transform:translateX(8px)}
  .depthrail .rh{padding:0 2px 0 0}
  .depthrail .rb{flex-direction:row;overflow-x:auto;scrollbar-width:none;flex:1}
  .depthrail .rb::-webkit-scrollbar{display:none}
  .depthrail button{flex:none;padding:4px 7px 4px 14px}

  .legend{left:calc(8px + var(--padl));right:calc(8px + var(--padr));width:auto;
          bottom:calc(var(--tbh) + 128px + var(--padb));padding:7px 10px 8px}
  #readout{bottom:calc(var(--tbh) + 128px + var(--padb));right:calc(8px + var(--padr));
           display:none}          /* 손가락으로는 호버가 없다 */
  .scalebar{bottom:calc(var(--tbh) + 112px + var(--padb));left:calc(10px + var(--padl))}
  .panel{left:calc(8px + var(--padl));right:calc(8px + var(--padr));top:auto;
         bottom:calc(var(--tbh) + 66px + var(--padb));width:auto;z-index:22;
         max-height:min(56vh,calc(100dvh - 240px))}
  .panel.closed{transform:translateY(10px) scale(.99)}

  .sheet{padding:0}
  .sheet-in{width:100vw;max-height:100vh;height:100%;border-radius:0;border:0}
  .sheet-body{padding:11px 12px 16px}
  .modal{padding:10px}
  .modal-in{max-height:min(90vh,calc(100dvh - 20px));padding:18px 16px}
  .modal-in h2{font-size:16px}
}

@media (max-height:480px) and (orientation:landscape){
  .brand-txt{display:none}
  .brand{padding:6px}
  .varbar{flex-direction:row;max-height:none;overflow-x:auto;scrollbar-width:none}
  .legend{display:none}                  /* 색눈금보다 지도가 먼저다 */
  .depthrail{max-height:calc(100dvh - 120px);overflow-y:auto}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}