/* 수치조류도 한반도 뷰어 v2 — UST21 공통 디자인 언어(KOP·북극항로와 같은 계열)
   어두운 남색 지도 중심 · 유리 패널 · Pretendard · 조각 버튼 · 아래 시간 막대
   색 토큰 가운데 캔버스가 읽는 것(--water --land --flow --dry --r0~4 --dp0~4 --ok --oks --gray --dneg --dpos --alert --line)은 반드시 #hex */
@font-face{font-family:"Pretendard Variable";font-weight:45 920;font-style:normal;font-display:swap;src:url(../fonts/PretendardVariable.woff2) format("woff2")}
:root{
  color-scheme:dark;
  --bg:#070b12; --surface:#0d1420; --surface-2:#0a101a; --ink:#e8eef6; --ink-2:#93a2b8; --faint:#5d6b80; --line:#1b2432;
  --line-a:rgba(255,255,255,.10); --line-b:rgba(255,255,255,.06); --fill:rgba(255,255,255,.05); --fill-2:rgba(255,255,255,.09);
  --glass:rgba(12,18,28,.74); --glass2:rgba(16,24,36,.94); --accent:#4da3ff; --accent-ink:#08121f; --accent-soft:rgba(77,163,255,.16);
  --water:#0a1522; --land:#1a2532; --flow:#d8ecff; --dry:#5a4f34; --nodata:#131f2e;
  --r0:#12324a; --r1:#1c6f9c; --r2:#2f9fd0; --r3:#f0b04c; --r4:#ff6a55; --alert:#ff6a55;
  --dp0:#20567a; --dp1:#18425f; --dp2:#12324a; --dp3:#0c2436; --dp4:#07141f;
  --oks:#1b514e; --ok:#4fd1b8; --gray:#5d6b80; --dneg:#5b9be0; --dpos:#f08a66; --ferry:#b596e6;
  --shadow:0 8px 28px rgba(0,0,0,.45);
  --font:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",system-ui,sans-serif;
  --mono:var(--font);
  --r:12px; --gut:14px; --top:68px; --tlh:80px; --navw:412px;
  --dock:calc(var(--gut) + var(--tlh) + 10px);
  --padt:env(safe-area-inset-top,0px); --padb:env(safe-area-inset-bottom,0px);
}
:root[data-theme="light"]{
  color-scheme:light;
  --bg:#eef2f6; --surface:#ffffff; --surface-2:#f4f7fa; --ink:#0f2029; --ink-2:#526976; --faint:#8596a2; --line:#d5dfe5;
  --line-a:rgba(15,32,41,.14); --line-b:rgba(15,32,41,.08); --fill:rgba(15,32,41,.04); --fill-2:rgba(15,32,41,.08);
  --glass:rgba(255,255,255,.82); --glass2:rgba(255,255,255,.97); --accent:#0b63c5; --accent-ink:#ffffff; --accent-soft:#dcebfa;
  --water:#e4eff5; --land:#cdd6cd; --flow:#0b3a52; --dry:#dccfa4; --nodata:initial;
  --r0:#c9e2ee; --r1:#7dbfd8; --r2:#2f93b8; --r3:#e3a03a; --r4:#d63a2c; --alert:#c92f22;
  --dp0:#dcecf4; --dp1:#9ccbe0; --dp2:#4f9cc0; --dp3:#1f6288; --dp4:#0d3552;
  --oks:#bfe6dc; --ok:#2a9d8f; --gray:#9aa8b0; --dneg:#2f6fb5; --dpos:#c9482f; --ferry:#7a4fb5;
  --shadow:0 1px 2px rgba(15,32,41,.06),0 6px 18px rgba(15,32,41,.10);
}
.map[data-style="night"]{
  --water:#060d16; --land:#121b27; --flow:#d8ecff; --dry:#4d442e; --nodata:#0c1622;
  --r0:#0f2f45; --r1:#17608e; --r2:#2a8fbf; --r3:#f0b04c; --r4:#ff6a55; --alert:#ff6a55;
  --dp0:#1b4e6e; --dp1:#153c56; --dp2:#102d42; --dp3:#0b2030; --dp4:#06121b;
  --oks:#1b514e; --ok:#4fd1b8; --gray:#5d6b80; --dneg:#5b9be0; --dpos:#f08a66; --ferry:#b596e6;
  --surface:#0a101a; --ink:#dfe7f1; --ink-2:#8696ad; --line:#172030; --accent:#4da3ff; --accent-ink:#08121f;
  --glass:rgba(8,13,21,.82);
}
.map[data-style="red"]{
  --water:#0b0000; --land:#170505; --flow:#ff9a86; --dry:#3a1d14; --nodata:#190604;
  --r0:#2a0b09; --r1:#5e1813; --r2:#a32b1f; --r3:#ff7b52; --r4:#ffb694; --alert:#ffb694;
  --dp0:#4a1610; --dp1:#3a100c; --dp2:#2c0b08; --dp3:#1d0705; --dp4:#100302;
  --oks:#3a0f0c; --ok:#ff8a70; --gray:#6a3a34; --dneg:#b05a48; --dpos:#ff9a80; --ferry:#d08a7a;
  --surface:#130404; --surface-2:#0e0303; --ink:#ffb9a6; --ink-2:#c27a68; --faint:#8a4c40; --line:#2e0d0a; --accent:#ff8a70; --accent-ink:#1a0402; --accent-soft:rgba(255,138,112,.16);
  --line-a:rgba(255,138,112,.18); --line-b:rgba(255,138,112,.10); --fill:rgba(255,138,112,.06); --fill-2:rgba(255,138,112,.12);
  --glass:rgba(16,4,4,.84); --glass2:rgba(22,6,6,.96);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%;margin:0;-webkit-font-smoothing:antialiased}
body{background:var(--bg);color:var(--ink);font-family:var(--font);font-size:13px;line-height:1.45;letter-spacing:-.01em;overflow:hidden;font-feature-settings:"tnum" 1}
button,select,input,textarea{font:inherit;color:inherit;letter-spacing:inherit}
button{-webkit-tap-highlight-color:transparent}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.app{height:100vh;height:100dvh}
.stage{display:block;height:100%}
.map{position:relative;width:100%;height:100%;overflow:hidden;background:var(--water);touch-action:none}
.map canvas{position:absolute;left:0;top:0;width:100%;height:100%;display:block}
#cTop{cursor:crosshair}
#err{display:none;position:fixed;left:10px;right:10px;top:10px;z-index:50;background:var(--alert);color:#fff;padding:8px 12px;border-radius:8px;font-size:12.5px;white-space:pre-wrap}

/* ── 시작 화면 ── */
#loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:40;text-align:center;padding:20px;
  background:radial-gradient(120% 90% at 50% 35%,#0c1a33 0%,#070d1a 55%,#03060d 100%);color:var(--ink-2)}
.ld-box{display:flex;flex-direction:column;align-items:center;gap:10px;min-width:240px}
.ld-box img{height:24px;width:auto;opacity:.95}
.ld-t{font-size:22px;font-weight:800;letter-spacing:-.03em;color:#e8eef6}
.ld-m{font-size:12.5px;color:#93a2b8;min-height:18px}
.ld-bar{width:220px;height:3px;border-radius:3px;background:rgba(255,255,255,.1);overflow:hidden}
.ld-bar i{display:block;height:100%;width:0;background:#4da3ff;border-radius:3px;transition:width .25s}
.ld-s{font-size:11px;font-weight:600;letter-spacing:.06em;color:#5d6b80}

/* ── 공통 부품 ── */
.glassg,.chipbox{background:var(--glass);-webkit-backdrop-filter:blur(16px) saturate(1.35);backdrop-filter:blur(16px) saturate(1.35);border:1px solid var(--line-a);border-radius:var(--r);box-shadow:var(--shadow);color:var(--ink)}
.chipbox{border-radius:10px;padding:6px 10px;font-size:12px}
.ver{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.02em;line-height:1;padding:3px 5px 2px;border-radius:5px;background:var(--accent);color:var(--accent-ink);vertical-align:2px;margin-left:2px}
.seg{flex:none;display:inline-flex;gap:2px;padding:3px;border-radius:11px;background:var(--fill);border:1px solid var(--line-b)}
.seg button{font-size:12.5px;font-weight:600;padding:5px 11px;border:0;border-radius:8px;background:transparent;color:var(--ink-2);cursor:pointer;white-space:nowrap;transition:background .15s,color .15s}
.seg button:hover{color:var(--ink);background:var(--fill-2)}
.seg button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink);font-weight:700}
.seg.sm button{font-size:12px;padding:4px 10px}
.btn{font-size:12.5px;font-weight:700;padding:7px 14px;border-radius:9px;border:1px solid var(--accent);background:var(--accent);color:var(--accent-ink);cursor:pointer;white-space:nowrap;transition:background .15s,border-color .15s}
.btn:hover{filter:brightness(1.08)}
.btn.ghost{background:var(--fill);border-color:var(--line-a);color:var(--ink);font-weight:600}
.btn.ghost:hover{background:var(--fill-2);filter:none}
.btn.sm{font-size:12px;padding:5px 10px;min-height:30px}
.btn[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.xbtn{flex:none;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;padding:0;border-radius:9px;border:1px solid var(--line-a);background:var(--fill);color:var(--ink-2);cursor:pointer;font-size:12px;line-height:1}
.xbtn:hover{background:var(--fill-2);color:var(--ink)}
select,textarea,input[type=text],input[type=number]{font-size:12.5px;padding:6px 9px;border:1px solid var(--line-a);border-radius:9px;background:var(--fill);color:var(--ink);max-width:100%}
select{width:100%;cursor:pointer}
select option{background:var(--surface);color:var(--ink)}
textarea{width:100%;font-size:12px;min-height:74px;resize:vertical}
input[type=text]:focus,textarea:focus,select:focus{outline:none;border-color:var(--accent);background:var(--accent-soft)}
input[type=range]{accent-color:var(--accent)}
h2{margin:16px 0 8px;font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--faint)}
h2:first-child{margin-top:0}
h3{margin:14px 0 6px;font-size:12.5px;font-weight:700}
h4{margin:0;font-size:12px;font-weight:700;color:var(--ink-2)}
.hint{font-size:11.5px;color:var(--ink-2);margin:6px 0 0;line-height:1.5}
.mu{color:var(--ink-2);font-weight:500}
.up{color:var(--r2)} .down{color:var(--r3)}
.pill{display:inline-block;font-size:11.5px;font-weight:700;padding:2px 9px;border-radius:99px;color:#fff;white-space:nowrap;line-height:1.4}
.pill.l0{background:var(--ok);color:#06251f} .pill.l1{background:var(--r3);color:#1d1400} .pill.l2{background:var(--alert);color:#2a0703} .pill.l3{background:var(--gray)}
:root[data-theme="light"] .pill.l0,:root[data-theme="light"] .pill.l2{color:#fff}
.btnrow{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.chk{display:flex;align-items:center;gap:7px;font-size:12.5px;cursor:pointer;margin-top:8px}
.chk input{accent-color:var(--accent);width:15px;height:15px;margin:0}
kbd{font-family:var(--font);font-size:11px;padding:0 5px;border:1px solid var(--line-a);border-bottom-width:2px;border-radius:5px;background:var(--fill)}
table.mt{width:100%;border-collapse:collapse;font-size:12px}
table.mt th,table.mt td{text-align:left;padding:5px 6px;border-bottom:1px solid var(--line-b);vertical-align:top}
table.mt th{font-size:11px;color:var(--faint);font-weight:700;white-space:nowrap}
table.mt td.num,table.mt th.num{text-align:right;font-variant-numeric:tabular-nums}
table.mt tr:last-child td{border-bottom:0}
.kv{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;font-size:12.5px;margin:8px 0 0}
.kv dt{color:var(--ink-2)} .kv dd{margin:0;text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
.seglist{margin:6px 0 0;padding:0;list-style:none;font-size:12.5px}
.seglist li{padding:5px 0;border-bottom:1px solid var(--line-b)}
.seglist li:last-child{border-bottom:0}
details>summary{cursor:pointer;font-size:12.5px;font-weight:650;margin:12px 0 4px;color:var(--ink);list-style:none;display:flex;align-items:center;gap:6px}
details>summary::-webkit-details-marker{display:none}
details>summary::before{content:"";width:6px;height:6px;border-right:1.6px solid var(--ink-2);border-bottom:1.6px solid var(--ink-2);transform:rotate(-45deg);transition:transform .15s;margin:0 2px 0 1px}
details[open]>summary::before{transform:rotate(45deg)}
.assume{margin:6px 0 0;padding-left:16px;font-size:11.5px;color:var(--ink-2);line-height:1.6}
.assume b{color:var(--ink);font-weight:600}
.gloss{margin:0;font-size:12px;display:grid;grid-template-columns:1fr;gap:1px}
.gloss dt{font-weight:700;margin-top:6px}
.gloss dd{margin:0;color:var(--ink-2)}
.tblwrap{overflow-x:auto;margin-top:6px}

/* 모드별 표시 */
.pro-only,.notgeneral{display:none}
.m-pro .notgeneral{display:inline-block}
.m-pro .sg.pro-only,.m-pro .grp.pro-only{display:flex}
.m-pro .pro-block{display:block}
.m-general .viewseg .ng{display:none}
#segTool,#tabs{display:none!important}

/* ── 위: 브랜드 · 모드 · 표시 항목 · 격자 자료 ── */
.topbar{position:absolute;left:var(--gut);top:calc(var(--gut) + var(--padt));z-index:7;display:flex;gap:8px;align-items:stretch;pointer-events:none;max-width:calc(100% - 2 * var(--gut))}
.topbar>*{pointer-events:auto}
.brand{display:flex;align-items:center;gap:11px;padding:7px 14px 7px 12px}
.brand-logo{height:22px;width:auto;flex:none;display:block}
:root[data-theme="light"] .brand-logo{filter:invert(1) hue-rotate(180deg) brightness(.35)}
.map[data-style="red"] .brand-logo{filter:sepia(1) saturate(4) hue-rotate(-28deg) brightness(.9)}
.brand .t{font-size:15.5px;font-weight:800;letter-spacing:-.03em;line-height:1.2;white-space:nowrap}
.brand .s{font-size:10.5px;font-weight:650;letter-spacing:.02em;color:var(--r3);line-height:1.25;white-space:nowrap}
.modeseg{align-items:center;padding:4px;background:var(--glass)!important;border:1px solid var(--line-a)!important;border-radius:var(--r)}
.modeseg button{font-size:13px;font-weight:700;padding:8px 14px;border-radius:9px}
.chips{display:flex;gap:8px;align-items:stretch;min-width:0}
.grp{display:flex;align-items:center;gap:8px}
.grp .lb{font-size:11px;font-weight:700;color:var(--faint);white-space:nowrap}
.topbar .grp{padding:4px 4px 4px 12px}
.topbar .grp .seg{background:transparent;border-color:transparent;padding:0}

/* ── 오른쪽 위: 도구 ── */
.ov{position:absolute;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.ov>*{pointer-events:auto}
.ov.tr{right:var(--gut);top:calc(var(--gut) + var(--padt));align-items:flex-end;z-index:8}
.tools{display:flex;gap:2px;padding:4px;align-items:center}
.tsep{width:1px;height:20px;background:var(--line-a);margin:0 3px}
.iconbtn{position:relative;display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--ink-2);background:transparent;border:0;border-radius:9px;padding:0 10px;height:36px;cursor:pointer;white-space:nowrap}
.iconbtn:hover{background:var(--fill-2);color:var(--ink)}
.iconbtn.on,.iconbtn[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)}
.iconbtn svg{width:17px;height:17px;flex:none}
.iconbtn .m-only{display:none}
.m-general .iconbtn.notgeneral{display:none!important}
.menubtn{display:none;width:40px;height:40px;justify-content:center;padding:0;color:var(--ink)}
@media (hover:hover){
  .iconbtn[data-tip]:hover::after{content:attr(data-tip);position:absolute;top:calc(100% + 8px);right:0;z-index:30;background:var(--glass2);border:1px solid var(--line-a);color:var(--ink);font-size:11.5px;font-weight:600;padding:4px 9px;border-radius:8px;white-space:nowrap;pointer-events:none;box-shadow:var(--shadow)}
}
@media (max-width:1180px){.tools .iconbtn>span{display:none}.tools .iconbtn{padding:0 9px}}
@media (max-width:1419px){.m-pro .tools .iconbtn>span{display:none}.m-pro .tools .iconbtn{padding:0 9px}}
@media (min-width:1420px) and (max-width:1699px){.m-pro .topbar .grp .lb{display:none}.m-pro .topbar .grp{padding:4px}}
@media (min-width:1360px){.m-general .tools .iconbtn .d-lab{display:inline}}
@media (min-width:1760px){.m-pro .tools .iconbtn .d-lab{display:inline}}

/* ── 지도 위 작은 것들 ── */
.toast{position:absolute;left:50%;top:calc(var(--top) + var(--padt));transform:translateX(-50%);z-index:12;pointer-events:none;background:var(--glass2);border:1px solid var(--line-a);color:var(--ink);padding:7px 14px;border-radius:10px;font-size:12.5px;font-weight:600;max-width:min(560px,calc(100% - 40px));box-shadow:var(--shadow);text-align:center}
.toast:empty{display:none}
#ctx{position:absolute;z-index:20;display:none;min-width:190px;background:var(--glass2);border:1px solid var(--line-a);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden;font-size:12.5px;padding:4px}
#ctx button{display:block;width:100%;text-align:left;font-size:12.5px;font-weight:600;padding:8px 10px;border:0;border-radius:8px;background:transparent;color:var(--ink);cursor:pointer}
#ctx button:hover{background:var(--accent-soft)}
#ctx .hd{padding:5px 10px 6px;font-size:11px;color:var(--faint);border-bottom:1px solid var(--line-b);margin-bottom:4px}
#divider{position:absolute;top:0;bottom:0;width:26px;margin-left:-13px;cursor:ew-resize;display:none;z-index:4}
#divider::before{content:"";position:absolute;left:12px;top:0;bottom:0;width:2px;background:var(--accent)}
#divider .knob{position:absolute;left:0;top:50%;margin-top:-16px;width:26px;height:32px;border-radius:8px;background:var(--accent);color:var(--accent-ink);display:flex;align-items:center;justify-content:center;font-size:12px;box-shadow:var(--shadow)}
.dlab{position:absolute;top:calc(var(--top) + var(--padt) + 44px);z-index:4;pointer-events:none;display:none;font-weight:700}
.zoomctl{position:absolute;right:var(--gut);bottom:var(--dock);z-index:5;display:flex;flex-direction:column;padding:3px;gap:1px}
.zoomctl button{width:32px;height:32px;padding:0;border:0;border-radius:8px;background:transparent;color:var(--ink);font-size:18px;font-weight:500;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.zoomctl button:hover{background:var(--fill-2)}

/* ── 범례 · 자료 · 축척 (시간 막대 바로 위) ── */
.legdock{position:absolute;left:var(--gut);bottom:var(--dock);z-index:4;display:flex;flex-direction:column;gap:6px;align-items:flex-start;pointer-events:none;max-width:calc(100% - 2 * var(--gut) - 46px)}
.m-pro .legdock{left:calc(var(--gut) + var(--navw) + 10px);max-width:calc(100% - var(--navw) - 3 * var(--gut) - 46px)}
.legdock>*{pointer-events:auto}
.legrow{display:flex;gap:6px;align-items:stretch;flex-wrap:wrap}
#readout{font-size:11.5px;font-variant-numeric:tabular-nums;max-width:100%}
#readout:empty{display:none}
.legbox{padding:8px 12px 7px}
#legend{display:flex;gap:14px;align-items:center}
.lg-main{min-width:190px}
.lg-h{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:12px;font-weight:700}
.lg-h span{font-size:11px;font-weight:500;color:var(--ink-2)}
.legend-bar{height:7px;width:100%;min-width:190px;border-radius:4px;margin:6px 0 3px}
.legend-ticks{display:flex;justify-content:space-between;font-size:10.5px;color:var(--ink-2);font-variant-numeric:tabular-nums;font-weight:600}
.lg-sw{display:flex;flex-direction:column;gap:3px;padding-left:14px;border-left:1px solid var(--line-b)}
.lg-item{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--ink-2);white-space:nowrap}
.lg-item i{display:inline-block;width:12px;height:9px;border-radius:2px;border:1px solid var(--line-a)}
.lg-cls{display:flex;gap:10px;margin-top:5px}
.lod{display:flex;flex-direction:column;justify-content:center;font-size:11px;color:var(--ink-2);line-height:1.4;padding:6px 12px}
.lod b{font-weight:700;color:var(--ink);font-size:12px}
.scalebox{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:600;padding:6px 12px}
#scaleTxt{white-space:nowrap}
#scaleBar{display:inline-block;height:5px;border:1.5px solid var(--ink);border-top:0;width:60px}
.north{display:inline-flex;align-items:center;gap:3px;font-weight:700;padding-left:8px;border-left:1px solid var(--line-b)}
.loadchip{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--ink-2);padding:6px 12px}
.loadchip::before{content:"";width:10px;height:10px;border-radius:50%;border:2px solid var(--line-a);border-top-color:var(--accent);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.loadchip::before{animation:none}}

/* ── 관측점 카드 (오른쪽) ── */
.pcard{right:var(--gut);top:calc(var(--top) + var(--padt));width:432px;z-index:5;max-height:calc(100% - var(--top) - var(--dock) - 118px)}
.m-pro .pcard{width:336px}
.pcard.wide{width:min(900px,calc(100% - 2 * var(--gut)))}
.m-pro .pcard.wide{width:336px}
.m-pro #pcWide{display:none}
.map.dopen .pcard{display:none}
.pc{padding:12px 14px;width:100%;max-height:100%;overflow:auto;overscroll-behavior:contain}
.pc-h{display:flex;gap:6px;align-items:center}
.pc-k{font-size:11px;font-weight:700;color:var(--faint);white-space:nowrap}
.pc-h select{flex:1;min-width:0;font-weight:650;font-size:13px;padding:5px 8px}
.pc-h .btn{padding:4px 9px;min-height:28px}
#pName{margin:5px 0 0;font-size:11px;color:var(--faint);font-variant-numeric:tabular-nums}
.pc-sum{font-size:14px;font-weight:600;line-height:1.6;margin:8px 0 10px}
.pc-sum b{font-weight:750}
.pc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.pc-grid>div{background:var(--fill);border:1px solid var(--line-b);border-radius:10px;padding:7px 10px 6px}
.pc-grid .n{font-size:19px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.15;letter-spacing:-.02em}
.pc-grid .u{font-size:10.5px;color:var(--ink-2);font-weight:600}
.pc-grid .s{font-size:10.5px;font-weight:600;min-height:14px}
.m-general .pc-grid{grid-template-columns:repeat(2,1fr)}
.m-general .pc-grid>div:nth-child(n+3){display:none}
.m-general .pc-grid .n{font-size:22px}
.m-general #pcToggle{display:none}
#chart{cursor:crosshair;margin-top:12px}
.pc-det summary{font-size:12px;color:var(--ink-2);font-weight:600;margin-top:8px}

/* ── 서랍 (지도 설정 · 항로 상세 · 선박·바람 · 정보) ── */
.drawer{position:absolute;right:var(--gut);top:calc(var(--top) + var(--padt));width:384px;max-height:calc(100% - var(--top) - var(--dock) - 118px);overflow:auto;overscroll-behavior:contain;z-index:9;padding:12px 16px 16px}
.drawer-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;font-size:14px}
.drawer-h b{font-weight:800;letter-spacing:-.02em}
.drawer .grp{flex-wrap:wrap;margin:6px 0 10px}
.drawer details .grp{margin:8px 0 0}
.drawer details .grp .lb{min-width:60px}
label.row{display:grid;grid-template-columns:104px 1fr auto auto;gap:8px;align-items:center;font-size:12.5px;margin:8px 0;color:var(--ink-2)}
label.row output{color:var(--ink);text-align:right;font-size:12.5px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
input[type=range].plain{width:100%}
.shipbox .sg{display:none;align-items:center;gap:8px;margin:8px 0;font-size:12.5px;color:var(--ink-2)}
.shipbox .sg:not(.pro-only){display:flex}
.shipbox .sg .lb{flex:none;width:104px;white-space:nowrap}
.shipbox .sg input[type=range]{flex:1;min-width:0}
.shipbox .sg select{flex:1}
.shipbox .sep{margin-top:14px;padding-top:12px;border-top:1px solid var(--line-b)}
.sg output{color:var(--ink);font-size:12px;min-width:42px}
input.num{width:58px;font-size:12px;font-weight:650;color:var(--ink);background:var(--fill);border:1px solid var(--line-a);border-radius:8px;padding:4px 6px;text-align:right;font-variant-numeric:tabular-nums}
input.num:focus{outline:none;border-color:var(--accent)}
em.un{font-style:normal;font-size:11px;color:var(--ink-2);min-width:24px}
.wname{font-size:11px;color:var(--ink-2);min-width:0!important;white-space:nowrap}
#nmea{width:100%;font-size:12px}
.drift{font-size:12.5px;border-top:1px solid var(--line-b);padding:8px 0 0;margin-top:8px}

/* ── 항해 계획 패널 (왼쪽, 선박항해) ── */
.navp{display:none;position:absolute;left:var(--gut);top:calc(var(--top) + var(--padt));width:var(--navw);max-height:calc(100% - var(--top) - var(--dock) + 10px - var(--gut) - var(--padt));z-index:6;flex-direction:column;overflow:hidden}
.m-pro .navp{display:flex}
.np-head{display:flex;align-items:center;gap:8px;padding:10px 12px 0 14px}
.np-ttl{flex:1;min-width:0;display:flex;align-items:baseline;gap:8px}
.np-ttl b{font-size:14px;font-weight:800;letter-spacing:-.02em;white-space:nowrap}
.np-route{font-size:11.5px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.navp.folded #npFold svg{transform:rotate(180deg)}
.navp.folded #npMain{display:none}
.np-verdict{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 14px 10px;font-size:13.5px;line-height:1.4}
.np-verdict .pill{font-size:12.5px;padding:3px 11px}
.np-verdict b{font-weight:750;font-variant-numeric:tabular-nums}
.np-verdict .mu{font-size:12px}
#npMain{display:flex;flex-direction:column;min-height:0;flex:1}
.np-tabs{display:flex;gap:2px;margin:0 10px;padding:3px;border-radius:11px;background:var(--fill);border:1px solid var(--line-b)}
.np-tabs button{flex:1;font-size:12.5px;font-weight:600;padding:6px 4px;border:0;border-radius:8px;background:transparent;color:var(--ink-2);cursor:pointer;white-space:nowrap}
.np-tabs button:hover{color:var(--ink);background:var(--fill-2)}
.np-tabs button[aria-selected="true"]{background:var(--fill-2);color:var(--ink);font-weight:750;box-shadow:inset 0 0 0 1px var(--line-a)}
.np-body{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding:12px 14px 14px}
.np-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.np-empty{font-size:12.5px;color:var(--ink-2);padding:14px 4px;line-height:1.6}
.np-det summary{margin-top:14px}
.np-actions{margin-top:14px;padding-top:12px;border-top:1px solid var(--line-b)}
.rc-row{display:flex;align-items:center;gap:6px;margin-top:8px}
.rc-row .dot{flex:none;width:36px;font-size:11px;font-weight:700;text-align:center;border-radius:99px;padding:2px 0}
.rc-row .dfrom{background:var(--ok);color:#06251f} .rc-row .dto{background:var(--alert);color:#2a0703}
.rc-inp{position:relative;flex:1;min-width:0}
.rc-inp input[type=text]{width:100%}
.rc-res{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:12;background:var(--glass2);border:1px solid var(--line-a);border-radius:10px;box-shadow:var(--shadow);display:none;max-height:230px;overflow:auto;padding:4px}
.rc-res .it{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:7px;cursor:pointer;font-size:12.5px}
.rc-res .it:hover{background:var(--accent-soft)}
.rc-res .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rc-res .ty{font-size:10.5px;color:var(--ink-2);border:1px solid var(--line-a);border-radius:99px;padding:0 7px;white-space:nowrap}
.rc-swap{display:flex;justify-content:flex-start;padding-left:3px;margin:6px 0 -2px}
#pickHint{color:var(--accent);font-weight:600}
#pickHint:empty{display:none}
.rc-pop input[type=text]{width:100%}
.rlist{max-height:230px;overflow:auto;border:1px solid var(--line-b);border-radius:10px;margin-top:6px;background:var(--fill)}
.rlist .ri{display:flex;justify-content:space-between;gap:8px;padding:6px 10px;border-bottom:1px solid var(--line-b);cursor:pointer;font-size:12.5px}
.rlist .ri:hover{background:var(--accent-soft)}
.rlist .ri:last-child{border-bottom:0}
.rlist .ri span:last-child{color:var(--ink-2);white-space:nowrap;font-variant-numeric:tabular-nums}
.rlist .ri em{font-style:normal;font-size:10.5px;color:var(--r3);margin-left:6px}
.wplist{margin-top:8px;border:1px solid var(--line-b);border-radius:10px;background:var(--fill);max-height:236px;overflow:auto}
.wplist:empty::before{content:"변침점 없음 · 지도를 눌러 추가";display:block;padding:12px;font-size:12px;color:var(--ink-2)}
.wp{display:flex;align-items:center;gap:8px;padding:5px 6px 5px 10px;border-bottom:1px solid var(--line-b);font-size:12px}
.wp:last-child{border-bottom:0}
.wp .no{flex:none;width:20px;height:20px;border-radius:50%;background:var(--accent);color:var(--accent-ink);font-weight:800;font-size:11px;display:flex;align-items:center;justify-content:center}
.wp .co{flex:1;min-width:0;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wp .lg{color:var(--ink-2);font-size:11px;white-space:nowrap;font-variant-numeric:tabular-nums}
.wp .xbtn{width:24px;height:24px;font-size:11px;border-radius:7px}
.dcard{display:none}
.navp.has-route .dcard{display:block}
.navp.has-route #depEmpty,.navp.has-route #legsEmpty{display:none}
.dc-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12.5px;margin-top:8px}
.dc-row:first-child{margin-top:0}
.dc-lb{min-width:62px;font-size:12.5px;font-weight:700}
.dc-steps .btn{flex:1;padding-left:0;padding-right:0}
.dc-steps .dc-lb{display:none}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:10px}
.kpis>div{background:var(--fill);border:1px solid var(--line-b);border-radius:10px;padding:7px 10px 6px;min-width:0}
.kpis .k{font-size:10.5px;font-weight:700;color:var(--faint);white-space:nowrap}
.kpis .v{font-size:14.5px;font-weight:750;font-variant-numeric:tabular-nums;letter-spacing:-.02em;white-space:nowrap}
.kpis .v small{font-size:11px;font-weight:600;color:var(--ink-2);margin-left:2px}
.kpis .x{font-size:10.5px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpis .pos{color:var(--r2)} .kpis .neg{color:var(--r3)}
.dc-sec{display:flex;align-items:baseline;gap:8px;margin-top:16px;font-size:12.5px;font-weight:750}
.dc-sec .hint{font-weight:500;margin:0;font-size:11px;color:var(--faint)}
.dc-lg{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:11px;color:var(--ink-2);margin-top:4px}
.dc-lg i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:4px;vertical-align:-1px}
#dcVoy,#dcScan,#dcCmp{cursor:pointer;margin-top:6px}
#dcVoy svg,#dcScan svg,#dcCmp svg,#legsProf svg{display:block;width:100%;height:auto}
#dcScan{margin-top:2px}
.dc-segs{font-size:12.5px;margin-top:4px}
.dc-segs div{padding:2px 0}
.rec{font-size:12.5px;margin-top:6px}
.rec:empty{display:none}
.rec .ri2{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--line-b)}
.rec .ri2:last-child{border-bottom:0}
.rec .ri2 .tx{flex:1;line-height:1.45;min-width:0}
.rec .btn{padding:3px 9px;min-height:26px;font-size:11.5px}
.dc-foot{font-size:11px;margin-top:12px;padding-top:10px;border-top:1px solid var(--line-b);color:var(--faint)}
table.legs td,table.legs th{padding:5px 4px;white-space:nowrap}
table.legs tbody tr{cursor:pointer}
table.legs tbody tr:hover{background:var(--accent-soft)}
table.legs tr.now td{background:var(--accent-soft)}
table.legs .fv{color:var(--r2);font-weight:700} table.legs .ad{color:var(--r3);font-weight:700}
table.legs tfoot td{font-weight:750;border-top:1px solid var(--line-a);border-bottom:0}
table.slk td{vertical-align:middle;white-space:nowrap}
table.slk tr.next td{background:var(--accent-soft)}
table.slk .k0{color:var(--ink);font-weight:750} table.slk .k1{color:var(--r2);font-weight:700} table.slk .k2{color:var(--r3);font-weight:700}
table.slk .btn{padding:2px 8px;min-height:24px;font-size:11px}
#slSel{width:auto;flex:1;min-width:0;max-width:300px}

/* 날짜·시각 선택 (공통) */
.dt{display:inline-flex;align-items:center;gap:3px}
.dt select{width:auto;padding:5px 6px;font-weight:650;font-variant-numeric:tabular-nums;font-size:12.5px}
.dt .c{color:var(--ink-2);font-weight:700}

/* ── 아래: 시간 막대 ── */
.tlbar{left:var(--gut);right:var(--gut);bottom:calc(var(--gut) + var(--padb));z-index:6}
.tlc{display:flex;align-items:center;gap:14px;padding:10px 14px;width:100%;height:var(--tlh)}
.tlc .playbtn{flex:none;width:40px;height:40px;border-radius:50%;border:0;background:var(--accent);color:var(--accent-ink);font-size:15px;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0 0 0 2px}
.tlc .playbtn:hover{filter:brightness(1.1)}
.clock{flex:none;min-width:164px}
.c-main{font-size:15.5px;font-weight:750;font-variant-numeric:tabular-nums;letter-spacing:-.02em;white-space:nowrap}
.c-sub{font-size:11px;color:var(--ink-2);white-space:nowrap;margin-top:1px}
.scrub{flex:1;min-width:0}
.tl-track{position:relative;height:40px;border:1px solid var(--line-b);border-radius:8px;background:var(--fill);overflow:hidden}
.tl-track svg{position:absolute;left:0;top:0;width:100%;height:100%}
.tl-track input{position:absolute;left:0;top:0;width:100%;height:100%;margin:0;background:transparent;-webkit-appearance:none;appearance:none;cursor:ew-resize}
.tl-track input::-webkit-slider-runnable-track{height:40px;background:transparent}
.tl-track input::-moz-range-track{height:40px;background:transparent}
.tl-track input::-webkit-slider-thumb{-webkit-appearance:none;width:3px;height:40px;background:var(--ink);border:0;border-radius:2px;box-shadow:0 0 0 3px var(--accent-soft),0 0 10px var(--accent)}
.tl-track input::-moz-range-thumb{width:3px;height:40px;background:var(--ink);border:0;border-radius:2px}
.tl-ticks{position:relative;height:15px;font-size:10.5px;color:var(--ink-2);font-variant-numeric:tabular-nums;font-weight:600}
.tl-ticks span{position:absolute;top:3px;transform:translateX(-50%);white-space:nowrap}
.tl-ticks span.d{color:var(--ink);font-weight:750}
.tl-ticks span:first-child{transform:none} .tl-ticks span:last-child{transform:translateX(-100%)}
.tl-side{flex:none;display:flex;gap:6px;align-items:center}
.tl-side select.speed{width:auto;font-weight:650}

html.bigtxt .topbar,html.bigtxt .ov,html.bigtxt .navp,html.bigtxt .legdock,html.bigtxt .drawer,html.bigtxt .toast{zoom:1.2}

/* ── 중간 폭 ── */
@media (max-width:1280px){
  :root{--navw:380px}
  .pcard{width:400px}
  .grp .lb{display:none}
  .topbar .grp{padding:4px}
}
@media (max-width:1040px){
  .pcard{width:360px}
  .lg-sw{display:none}
  .brand .s{display:none}
}

/* ── 좁은 화면 (휴대전화) ── */
@media (max-width:760px){
  :root{--gut:8px;--tlh:104px;--top:104px}
  body{font-size:13px}
  .topbar{flex-wrap:wrap;right:calc(var(--gut) + 48px);max-width:none;gap:6px}
  .brand{padding:5px 10px;gap:8px;height:40px}
  .brand-logo{height:15px}
  .brand .t{font-size:13.5px}
  .brand .s{display:block;font-size:9.5px;letter-spacing:0}
  .modeseg{height:40px;padding:3px}
  .modeseg button{padding:0 10px;font-size:12.5px}
  .chips{flex:0 0 calc(100% + 48px);overflow-x:auto;scrollbar-width:none;gap:6px;padding-bottom:2px}
  .chips::-webkit-scrollbar{display:none}
  .chips .grp{flex:none;padding:3px}
  .grp .lb{display:none}
  .seg button{padding:5px 9px}
  .menubtn{display:inline-flex}
  .tools{display:none;flex-direction:column;align-items:stretch;padding:6px;min-width:176px;background:var(--glass2)}
  .tools.open{display:flex}
  .tools .iconbtn{height:40px;justify-content:flex-start;padding:0 10px}
  .tools .iconbtn>span,.m-pro .tools .iconbtn>span,.iconbtn .m-only{display:inline}
  .tsep{width:auto;height:1px;margin:4px 6px}
  .legdock,.m-pro .legdock{left:var(--gut);bottom:auto;top:calc(var(--top) + var(--padt));max-width:calc(100% - 60px)}
  .legbox{padding:5px 9px 4px}
  #legend{gap:8px}
  .lg-main,.legend-bar{min-width:128px}
  .lg-h{font-size:11px}
  .legend-bar{margin:4px 0 2px;height:6px}
  .lg-sw,.scalebox,#readout{display:none!important}
  .lod{padding:4px 9px;font-size:10px}.lod b{font-size:11px}
  .zoomctl{bottom:auto;top:calc(var(--top) + var(--padt));right:var(--gut)}
  .toast{top:calc(var(--top) + var(--padt) + 48px);max-width:calc(100% - 70px)}
  .pcard,.m-pro .pcard,.pcard.wide{left:var(--gut);right:var(--gut);width:auto;top:auto;bottom:var(--dock);max-height:44%;display:flex}
  .m-pro .pcard{display:none}
  .pc{padding:10px 12px}
  #pcWide{display:none}
  .pc-sum{font-size:13px;margin:6px 0 8px}
  .m-general .pc-grid .n{font-size:19px}
  .pcard.peek #pcMore,.pcard.peek .pc-grid{display:none}
  .m-general #pcToggle{display:inline-flex}
  .navp{left:var(--gut);right:var(--gut);width:auto;top:auto;bottom:var(--dock);max-height:56%}
  .np-body{padding:10px 12px 12px}
  .drawer{left:var(--gut);right:var(--gut);width:auto;top:calc(var(--top) + var(--padt));max-height:calc(100% - var(--top) - var(--dock) - 8px);z-index:11}
  .tlc{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"play clock side" "scrub scrub scrub";gap:6px 10px;padding:8px 10px;height:var(--tlh)}
  .tlc .playbtn{grid-area:play;width:36px;height:36px}
  .clock{grid-area:clock;min-width:0}
  .c-main{font-size:14px}.c-sub{font-size:10.5px}
  .scrub{grid-area:scrub}
  .tl-side{grid-area:side}
  .tl-side .dt{display:none}
  .tl-track{height:30px}
  .tl-track input::-webkit-slider-runnable-track,.tl-track input::-webkit-slider-thumb{height:30px}
  .tl-track input::-moz-range-track,.tl-track input::-moz-range-thumb{height:30px}
  .tl-ticks span.m{display:none}
  .kpis .v{font-size:13.5px}
  html.bigtxt .topbar,html.bigtxt .ov,html.bigtxt .navp,html.bigtxt .legdock,html.bigtxt .drawer,html.bigtxt .toast{zoom:1.08}
}
@media (max-width:400px){
  .brand-logo{height:13px}
  .brand{gap:6px;padding:5px 8px}
  .modeseg button{padding:0 8px}
}
.m-pro .iconbtn.notgeneral{display:inline-flex}
.tl-dep{position:absolute;top:2px;transform:translateX(4px);font-size:10px;font-weight:700;color:var(--alert);pointer-events:none;line-height:1;white-space:nowrap}
.tl-dep.r{transform:translateX(calc(-100% - 4px))}
/* 스크롤 막대 */
.np-body,.pc,.drawer,.rlist,.wplist,.rc-res,.tblwrap{scrollbar-width:thin;scrollbar-color:var(--line-a) transparent}
.np-body::-webkit-scrollbar,.pc::-webkit-scrollbar,.drawer::-webkit-scrollbar,.rlist::-webkit-scrollbar,.wplist::-webkit-scrollbar,.rc-res::-webkit-scrollbar,.tblwrap::-webkit-scrollbar{width:8px;height:8px}
.np-body::-webkit-scrollbar-thumb,.pc::-webkit-scrollbar-thumb,.drawer::-webkit-scrollbar-thumb,.rlist::-webkit-scrollbar-thumb,.wplist::-webkit-scrollbar-thumb,.rc-res::-webkit-scrollbar-thumb,.tblwrap::-webkit-scrollbar-thumb{background:var(--line-a);border-radius:8px;border:2px solid transparent;background-clip:padding-box}
.pc-grid>div{padding:7px 9px 6px}
@media (max-width:760px){
  :root{--tlh:112px}
  .pcard,.m-pro .pcard,.pcard.wide{max-height:47%}
  .navp{max-height:46%}
  .pc-grid>div{padding:5px 9px 4px;display:grid;grid-template-columns:auto 1fr;column-gap:8px;align-items:baseline}
  .pc-grid .n,.m-general .pc-grid .n{font-size:17px;grid-row:span 2}
  .pc-grid .s{min-height:0}
  #pName{display:none}
  .c-sub{white-space:normal;line-height:1.25;font-size:10px}
  .tl-side select.speed{padding:5px 4px;font-size:12px}
  .tl-side .btn{padding:5px 8px;font-size:11.5px}
  .seg button{padding:5px 8px}
}

/* ── v2 2차: 최적 출항 시간대 · 판정 점 · 계산 가정 띠 · 관측점 카드 손잡이 ── */
.bestwin{margin-top:10px;padding:10px 12px;border-radius:10px;border:1px solid var(--line-a);background:linear-gradient(180deg,var(--accent-soft),transparent 140%)}
.bestwin:empty{display:none}
.bw-k{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:var(--ink-2)}
.bw-k .pill{font-size:10.5px;padding:1px 7px}
.bw-v{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:3px}
.bw-v b{font-size:16px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap}
.bw-v .btn{padding:4px 10px;min-height:28px;font-size:11.5px}
.bw-x{font-size:11.5px;line-height:1.5;margin-top:4px}
.bw-x.mu{font-size:10.5px;color:var(--faint);margin-top:2px}
.ld{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:1px;background:var(--gray)}
.ld.l0{background:var(--ok)}.ld.l1{background:var(--r3)}.ld.l2{background:var(--alert)}
.np-assume{flex:none;padding:7px 14px 9px;border-top:1px solid var(--line-b);font-size:10.5px;line-height:1.5;color:var(--faint)}
.np-assume b{color:var(--ink-2);font-weight:700;margin-right:4px}
.navp.folded .np-assume{display:none}
.rec .ri2.warn{color:var(--alert);font-weight:600;border-bottom:0}
#slPass{margin:8px 0 2px;padding:0 10px;border:1px solid var(--line-a);border-radius:10px;background:var(--fill)}
#slPass:empty{display:none}
table.slk td:first-child{white-space:normal}
.pc-grab{display:none}
@media (max-width:760px){
  :root{--legh:36px}
  /* 범례를 시간 막대 바로 위 한 줄로 내려 지도 윗부분을 비운다 */
  .legdock,.m-pro .legdock{left:var(--gut);right:var(--gut);top:auto;bottom:var(--dock);max-width:none;align-items:stretch}
  .legrow{flex-wrap:nowrap;gap:6px}
  .legbox{flex:1;min-width:0;padding:5px 10px;display:flex;align-items:center}
  #legend{flex:1;min-width:0}
  .lg-main{flex:1;min-width:0;display:grid;grid-template-columns:auto 1fr;column-gap:10px;align-items:center}
  .lg-main .lg-h{grid-row:1 / span 2;flex-direction:column;align-items:flex-start;gap:0;line-height:1.2}
  .lg-main .legend-bar{min-width:0;margin:1px 0 2px;height:6px}
  .lg-main .legend-ticks{font-size:9.5px;line-height:1}
  .lg-main .lg-cls{margin:0;gap:8px;flex-wrap:wrap}
  .lod{flex:none;padding:3px 10px;justify-content:center}
  .lod span{display:none}
  .loadchip{position:fixed;left:var(--gut);top:calc(var(--top) + var(--padt));padding:5px 10px;font-size:10.5px;z-index:4}
  .pcard,.m-pro .pcard,.pcard.wide{bottom:calc(var(--dock) + var(--legh) + 6px);max-height:39%}
  .pcard.tall{max-height:calc(100% - var(--top) - var(--dock) - var(--legh) - 14px)}
  .navp{bottom:calc(var(--dock) + var(--legh) + 6px);max-height:43%}
  .pc{padding-top:4px}
  .pc-grab{display:flex;width:100%;height:16px;margin:0 0 2px;padding:0;border:0;background:transparent;align-items:center;justify-content:center;cursor:pointer}
  .pc-grab i{width:36px;height:4px;border-radius:4px;background:var(--line-a)}
  .pcard.tall .pc-grab i{background:var(--accent)}
  .np-assume{padding:5px 12px 7px;font-size:10px;white-space:nowrap;overflow-x:auto;scrollbar-width:none}
  .np-assume::-webkit-scrollbar{display:none}
  .bw-v b{font-size:14.5px}
  .drawer{max-height:calc(100% - var(--top) - var(--dock) - 8px)}
}

.m-general .grp.pro-only{display:none}
.drawer .grp .lb{display:inline}
@media (max-width:760px){
  .kpis .x{white-space:normal;line-height:1.3}
  .kpis .k{white-space:normal}
}