/* =====================================================================
   PHYTO WATCH — operational oceanography dashboard (dark navy)
   ===================================================================== */
:root{
  color-scheme: dark;
  --bg:#050d1a; --bg-2:#081427; --card:#0b1a2f; --card-2:#0f2139; --inset:#081628;
  --line:rgba(94,170,214,.16); --line-2:rgba(94,170,214,.30);
  --ink:#dce9f5; --ink-2:#a7bccf; --ink-3:#6f879d;
  --cyan:#22d3ee; --teal:#2dd4bf; --accent:#22d3ee; --accent-soft:rgba(34,211,238,.10);
  --glow:0 0 0 1px rgba(34,211,238,.06), 0 8px 28px -18px rgba(34,211,238,.35);
  /* 위험 단계: normal → watch → high */
  --lv-LOW:#2dd4bf; --lv-WATCH:#facc15; --lv-HIGH:#f43f5e; --lv-ORANGE:#fb923c;
  /* 피해 범주 (고정 색) */
  --c-red:#ef4444; --c-orange:#f97316; --c-yellow:#eab308; --c-green:#22c55e; --c-gray:#8b95a5;
  --bar:#22d3ee;
  --mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
  --sans:"IBM Plex Sans KR","Malgun Gothic",system-ui,sans-serif;
  --r:6px;
  --hdr:58px; --cmd:52px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:radial-gradient(1200px 600px at 60% -10%,#0c2447 0%,transparent 60%),var(--bg);color:var(--ink);font:13px/1.55 var(--sans);-webkit-font-smoothing:antialiased}
.mono,code{font-family:var(--mono);font-variant-numeric:tabular-nums}
[hidden]{display:none!important}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,input:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
a{color:var(--cyan)}
.muted{color:var(--ink-3)}
.empty{color:var(--ink-3);font:12px var(--mono);margin:10px 0 4px}
.note{font-size:11.5px;color:var(--ink-3);margin:8px 0 0;line-height:1.55}
.sec{font:600 10.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin:14px 0 6px}
p.txt{margin:4px 0;font-size:12.5px;line-height:1.65;color:var(--ink-2)}
.big{font:600 17px/1.25 var(--mono);margin:8px 0 2px}
.big .kor,.kor{font:500 12px var(--sans);color:var(--ink-2);margin-left:6px}
.ghost{background:transparent;border:1px solid var(--line-2);border-radius:var(--r);padding:6px 12px;color:var(--ink-2)}
.ghost:hover{border-color:var(--cyan);color:var(--ink)}
.small{padding:3px 9px;font-size:12px}
.ghost.on{border-color:var(--cyan);color:var(--cyan)}
.pill{border:1px solid var(--line-2);border-radius:99px;padding:2px 10px;font:11px var(--mono);color:var(--ink-2);white-space:nowrap}
.pill.ok{border-color:rgba(45,212,191,.5);color:var(--teal)}
.pill.err{border-color:rgba(244,63,94,.5);color:var(--lv-HIGH)}
.icon-btn{background:transparent;border:1px solid var(--line-2);border-radius:var(--r);width:30px;height:30px;color:var(--ink-2)}
.icon-btn:hover{color:var(--cyan);border-color:var(--cyan)}
.tag-proto{font:600 10px var(--mono);letter-spacing:.06em;color:#fbbf24;border:1px dashed rgba(251,191,36,.5);border-radius:4px;padding:1px 6px;white-space:nowrap}
.chip{display:inline-flex;align-items:center;gap:5px;font:600 10.5px var(--mono);border-radius:4px;padding:1px 7px;color:#0b1220;white-space:nowrap}
.chip.hollow{background:transparent!important;color:var(--ink-2);border:1px solid var(--line-2)}
.lv{width:9px;height:9px;border-radius:50%;display:inline-block;flex:none}
.lv-HIGH{background:var(--lv-HIGH);box-shadow:0 0 8px var(--lv-HIGH)} .lv-WATCH{background:var(--lv-WATCH)} .lv-LOW{background:var(--lv-LOW)}

/* ---------------------------------------------------------------- header */
.hdr{position:sticky;top:0;z-index:1000;height:var(--hdr);display:flex;align-items:center;gap:18px;padding:0 18px;
  background:linear-gradient(180deg,rgba(8,20,39,.96),rgba(6,14,28,.94));border-bottom:1px solid var(--line);backdrop-filter:blur(6px)}
.brand{display:flex;align-items:center;gap:10px;min-width:250px}
.brand-mark{width:30px;height:30px;color:var(--cyan);filter:drop-shadow(0 0 6px rgba(34,211,238,.45))}
.brand-name{font:700 16px/1 var(--mono);letter-spacing:.12em}
.brand-sub{font:10.5px var(--mono);color:var(--ink-3);margin-top:3px}
.tabs{display:flex;gap:2px;flex:1;justify-content:center;overflow-x:auto}
.tabs button{background:none;border:0;border-bottom:2px solid transparent;padding:18px 9px 16px;font:500 12px var(--sans);color:var(--ink-2);white-space:nowrap}
.tabs button:hover{color:var(--ink)}
.tabs button.on{color:var(--cyan);border-bottom-color:var(--cyan);text-shadow:0 0 12px rgba(34,211,238,.5)}
.hdr-right{display:flex;align-items:center;gap:10px}
.hdr-clock{font-size:12px;color:var(--ink-2)}
.hdr-station{font:12px var(--mono);color:var(--ink);border:1px solid var(--line-2);border-radius:4px;padding:3px 8px;white-space:nowrap}

/* ---------------------------------------------------------------- command bar */
.cmdbar{position:sticky;top:var(--hdr);z-index:999;min-height:var(--cmd);display:flex;align-items:center;gap:10px;padding:8px 18px;
  background:rgba(7,17,33,.92);border-bottom:1px solid var(--line);flex-wrap:wrap}
.search{position:relative;flex:0 1 380px;min-width:240px}
.search-box{display:flex;align-items:center;border:1px solid var(--line-2);border-radius:var(--r);background:var(--inset);overflow:hidden}
.search-box:focus-within{border-color:var(--cyan);box-shadow:0 0 0 3px var(--accent-soft)}
.search-ico{color:var(--ink-3);padding:0 4px 0 10px}
.search-box input{flex:1;min-width:0;border:0;background:transparent;color:var(--ink);font:12.5px var(--sans);padding:8px 6px}
.search-box input:focus{outline:none}
.search-box button{border:0;background:var(--cyan);color:#04121f;padding:8px 14px;font:600 12px var(--mono)}
.suggest{position:absolute;left:0;right:0;top:100%;margin:4px 0 0;padding:4px 0;list-style:none;background:var(--card-2);border:1px solid var(--line-2);border-radius:var(--r);z-index:1300;max-height:320px;overflow:auto;box-shadow:0 18px 40px -16px #000}
.suggest li{padding:6px 10px;cursor:pointer;display:flex;gap:8px;align-items:baseline;font-size:12.5px}
.suggest li[aria-selected="true"],.suggest li:hover{background:var(--accent-soft)}
.suggest li small{color:var(--ink-3)}
.dropzone{position:relative;height:36px;min-width:200px;border:1px dashed var(--line-2);border-radius:var(--r);display:flex;align-items:center;justify-content:center;padding:0 12px;
  font:12px var(--mono);color:var(--ink-2);background:var(--inset);cursor:pointer;overflow:hidden}
.dropzone small{color:var(--ink-3);margin-left:6px}
.dropzone:hover,.dropzone.armed{border-color:var(--cyan);color:var(--cyan)}
.dropzone img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55}
.clear-btn{white-space:nowrap}
.clear-btn:not([disabled]){border-color:var(--cyan);color:var(--cyan)}
.clear-btn[disabled]{opacity:.4;cursor:not-allowed}
.status{flex:1 1 200px;min-width:160px;font:11.5px var(--mono);color:var(--ink-3);display:flex;gap:8px;align-items:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.status.err{color:var(--lv-HIGH)}
.pulse{width:7px;height:7px;border-radius:50%;background:var(--cyan);flex:none;animation:beat 1s ease-in-out infinite}
@keyframes beat{50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.pulse{animation:none}}
.flow{display:flex;align-items:center;gap:0;list-style:none;margin:0;padding:0;overflow-x:auto;max-width:100%;flex:1 1 100%;min-width:0}
@media (max-width:1600px){
  .hdr{flex-wrap:wrap;height:auto;padding:8px 14px 0;gap:6px 14px}
  .tabs{order:3;flex:1 1 100%;justify-content:flex-start;min-width:0}
  .tabs button{padding:10px 10px 9px}
  .hdr-right{margin-left:auto}
  .cmdbar{position:static}
}
@media (max-width:720px){
  .brand{min-width:0} .brand-sub{display:none} .hdr-clock{display:none}
  .cmdbar{padding:8px 14px}
  .search{flex:1 1 100%;min-width:0} .dropzone{flex:1 1 100%;min-width:0}
  .status{flex:1 1 100%;min-width:0}
}
.flow li{display:flex;align-items:center}
.flow li+li::before{content:"›";color:var(--ink-3);margin:0 4px;font-family:var(--mono)}
.flow button{background:none;border:0;padding:3px 4px;font:10.5px var(--mono);color:var(--ink-3);white-space:nowrap;letter-spacing:.02em}
.flow button .d{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--line-2);margin-right:5px;vertical-align:1px}
.flow button.done{color:var(--ink-2)} .flow button.done .d{background:var(--teal);box-shadow:0 0 6px var(--teal)}
.flow button.warn .d{background:var(--lv-HIGH);box-shadow:0 0 6px var(--lv-HIGH)}
.flow button:hover{color:var(--cyan)}

/* ---------------------------------------------------------------- views & cards */
.views{padding:12px 18px 18px}
.view{display:none}
.view.on{display:block}
.card{background:linear-gradient(180deg,var(--card),#0a1729);border:1px solid var(--line);border-radius:10px;padding:12px 14px;min-width:0;box-shadow:var(--glow);position:relative}
.card-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px;flex-wrap:wrap}
.card-h h2{margin:0;font:600 11.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.card-h h2::before{content:"";display:inline-block;width:3px;height:10px;background:var(--cyan);margin-right:8px;border-radius:2px;vertical-align:-1px;box-shadow:0 0 6px var(--cyan)}
.card-h .more{background:none;border:0;color:var(--ink-3);font:11px var(--mono)}
.card-h .more:hover{color:var(--cyan)}
.panel{scroll-margin-top:120px}
.panel.flash{box-shadow:0 0 0 2px var(--cyan)}
.grid-2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;align-items:start}
.grid-ocean{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:12px;align-items:start}
.grid-map{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:12px;align-items:start}
.col{display:grid;gap:12px;align-content:start;min-width:0}
@media (max-width:1180px){.grid-2,.grid-ocean,.grid-map{grid-template-columns:minmax(0,1fr)}}

/* ---------------------------------------------------------------- dashboard grid */
.dash{display:grid;gap:12px;
  grid-template-columns:250px minmax(0,1.25fr) minmax(0,1fr) minmax(0,1fr);
  grid-template-rows:minmax(0,1fr) auto auto;
  grid-template-areas:"left map right right" "bottom bottom bottom bottom" "resp resp resp resp";
  min-height:calc(100vh - var(--hdr) - var(--cmd) - 40px)}
.d-left{grid-area:left;display:grid;gap:12px;align-content:start;min-width:0}
.d-map{grid-area:map;display:flex;flex-direction:column;min-height:560px}
.d-right{grid-area:right;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;align-content:start}
.d-bottom{grid-area:bottom;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1.2fr) minmax(0,1fr);gap:12px}
.d-resp{grid-area:resp}
@media (max-width:1500px){.dash{grid-template-columns:230px minmax(0,1fr) minmax(0,1fr);grid-template-areas:"left map map" "right right right" "bottom bottom bottom" "resp resp resp"}
  .d-right{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:1100px){.dash{grid-template-columns:minmax(0,1fr);grid-template-areas:"map" "left" "right" "bottom" "resp"}
  .d-right,.d-bottom{grid-template-columns:minmax(0,1fr)}}

.st-list{list-style:none;margin:0;padding:0;display:grid;gap:3px;max-height:430px;overflow:auto}
.st-list button{width:100%;display:grid;grid-template-columns:12px minmax(0,1fr) auto;gap:8px;align-items:center;text-align:left;
  background:transparent;border:1px solid transparent;border-radius:6px;padding:6px 8px}
.st-list button:hover{background:var(--accent-soft)}
.st-list button.sel{border-color:var(--cyan);background:rgba(34,211,238,.08)}
.st-list .nm{font-size:12.5px;color:var(--ink)} .st-list .sea{font:10.5px var(--mono);color:var(--ink-3);margin-left:4px}
.st-list .lvl-t{font:600 10.5px var(--mono);text-align:right;line-height:1.2}
.st-list .lvl-t small{display:block;font-weight:400;color:var(--ink-3)}
.qs{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 10px;margin:0;font-size:12px}
.qs dt{color:var(--ink-2)} .qs dd{margin:0;font:600 13px var(--mono);text-align:right;color:var(--ink)}

/* ---------------------------------------------------------------- map shell */
.map-shell{display:flex;flex-direction:column;flex:1;min-height:0;gap:6px}
.map-toolbar{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;font:11px var(--mono);color:var(--ink-2)}
.sel select{margin-left:4px;font:11px var(--mono);background:var(--inset);color:var(--ink);border:1px solid var(--line-2);border-radius:4px;padding:3px 5px}
.layer-chips{display:flex;flex-wrap:wrap;gap:4px}
.layer-chips label{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--line-2);border-radius:99px;padding:2px 8px;cursor:pointer;user-select:none}
.layer-chips input{accent-color:var(--cyan);margin:0}
.layer-chips label:has(input:checked){border-color:var(--cyan);color:var(--cyan);background:var(--accent-soft)}
#map{flex:1;min-height:420px;border:1px solid var(--line);border-radius:8px;background:#06101e}
#mapSlotFull #map{min-height:calc(100vh - 230px)}
.map-legend{display:flex;flex-wrap:wrap;gap:4px 14px;font:10.5px var(--mono);color:var(--ink-3);align-items:center}
.map-legend span{display:flex;align-items:center;gap:5px}
.grad{width:80px;height:7px;border-radius:2px;display:inline-block}
.grad-chl{background:linear-gradient(90deg,#3b1f78,#2c6fbb,#20a39e,#8fd14f,#f5e642,#e8491d)}
.grad-sst{background:linear-gradient(90deg,#1e40af,#0ea5e9,#2dd4bf,#a3e635,#facc15,#f97316,#dc2626)}
.leaflet-container{font-family:var(--mono);background:#06101e}
.leaflet-bar a{background:#0b1a2f;color:var(--ink);border-color:var(--line)}
.leaflet-control-attribution{background:rgba(5,13,26,.75)!important;color:var(--ink-3)!important}
.leaflet-control-attribution a{color:var(--ink-2)!important}
.st-label{font:600 10.5px var(--mono);color:var(--ink);background:rgba(5,13,26,.78);border:1px solid var(--line-2);box-shadow:none;padding:0 5px;border-radius:3px}
.st-label::before{display:none}
.leaflet-popup-content-wrapper,.leaflet-popup-tip{background:var(--card-2);color:var(--ink);border:1px solid var(--line-2)}
.popup h4{margin:0 0 4px;font:600 12.5px var(--mono)}
.popup table{font:11.5px var(--mono);border-collapse:collapse}
.popup td{padding:1px 8px 1px 0}
.transport-note{font:10.5px var(--mono);color:#fbbf24}

/* ---------------------------------------------------------------- compact modules */
.mini-ident{display:grid;grid-template-columns:96px minmax(0,1fr);gap:10px;align-items:start}
.mini-ident img,.mini-ph{width:96px;height:96px;object-fit:cover;border-radius:6px;border:1px solid var(--line);background:var(--inset);display:block}
.mini-ph{display:grid;place-items:center;font:10.5px var(--mono);color:var(--ink-3);text-align:center;padding:6px}
.mini-name{font:600 14px/1.25 var(--mono);margin:0 0 4px}
.kvs{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 10px;font-size:11.5px;margin:4px 0 0}
.kvs dt{color:var(--ink-3)} .kvs dd{margin:0;color:var(--ink)}
.bar{height:6px;background:rgba(148,163,184,.15);border-radius:3px;overflow:hidden}
.bar i{display:block;height:100%;background:linear-gradient(90deg,#0ea5e9,var(--cyan));border-radius:3px}
.top3{display:grid;grid-template-columns:minmax(0,1fr) 60px 42px;gap:3px 8px;align-items:center;font-size:11.5px;margin-top:8px}
.top3 .p{text-align:right;font-family:var(--mono)}

.risk-mini{display:grid;grid-template-columns:132px minmax(0,1fr);gap:10px;align-items:center}
.ring{position:relative;width:132px;height:132px}
.ring svg{width:100%;height:100%;transform:rotate(135deg)}
.ring .num{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.ring .num b{font:700 30px/1 var(--mono)}
.ring .num span{font:600 10.5px var(--mono);margin-top:4px;padding:1px 6px;border-radius:3px;color:#04121f}
.ring .num small{font:10px var(--mono);color:var(--ink-3);margin-top:3px}
.factor{display:grid;grid-template-columns:minmax(0,1fr) 70px 34px;gap:4px 8px;align-items:center;font-size:11.5px}
.factor .v{text-align:right;font-family:var(--mono);color:var(--ink)}
.factor .bar i{background:linear-gradient(90deg,#f59e0b,#f43f5e)}
.why-list{margin:6px 0 0;padding:0;list-style:none;font-size:11.5px;color:var(--ink-2)}
.why-list li{display:flex;gap:6px;align-items:baseline;margin:2px 0}
.why-list li::before{content:"+";color:var(--lv-WATCH);font-family:var(--mono)}
.why-list li.neg::before{content:"−";color:var(--teal)}
.spark svg{width:100%;height:46px;display:block}

.metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.metric{background:var(--inset);border:1px solid var(--line);border-radius:6px;padding:6px 8px;min-width:0}
.metric .l{font:10px var(--mono);color:var(--ink-3);letter-spacing:.04em;display:flex;justify-content:space-between;gap:4px}
.metric .l em{font-style:normal;color:#5b7690}
.metric .v{font:600 15px var(--mono);color:var(--ink);white-space:nowrap}
.metric .v small{font-size:10.5px;font-weight:400;color:var(--ink-3);margin-left:2px}
.metric .s{font-size:10.5px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.arrow{display:inline-block;font-style:normal;color:var(--cyan)}
.dz-hint{cursor:pointer;text-align:center;line-height:1.5;border-style:dashed!important}
.dz-hint:hover{color:var(--cyan);border-color:var(--cyan)!important}

.mini-sliders{display:grid;gap:6px}
.msl{display:grid;grid-template-columns:62px minmax(0,1fr) 58px;gap:8px;align-items:center;font:11px var(--mono);color:var(--ink-2)}
.msl input{width:100%;accent-color:var(--cyan)}
.msl output{text-align:right;color:var(--ink)}
.change-box{display:flex;align-items:center;justify-content:space-between;gap:8px;border:1px solid var(--line-2);border-radius:6px;padding:8px 10px;margin-top:8px;background:var(--inset)}
.change-box b{font:700 20px var(--mono)}

/* ranking (Recent Observations slot) */
.rk-dash{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr);gap:8px}
.rk-card{background:var(--inset);border:1px solid var(--line);border-radius:8px;padding:8px;display:grid;gap:6px;align-content:start;min-width:0}
.rk-card.first{grid-template-columns:110px minmax(0,1fr);border-color:rgba(34,211,238,.35)}
.rk-card img,.rk-card .ph{width:100%;aspect-ratio:1;object-fit:cover;border-radius:6px;border:1px solid var(--line);background:#06101e;display:block}
.rk-card .ph{display:grid;place-items:center;font:10.5px var(--mono);color:var(--ink-3)}
.rk-card .no{font:700 11px var(--mono);color:var(--cyan)}
.rk-card .nm{font:600 12.5px/1.3 var(--mono)}
.rk-card .meta{font-size:10.5px;color:var(--ink-3);line-height:1.5}
.rk-badge{font:600 10px var(--mono);border-radius:3px;padding:1px 6px;border:1px solid;display:inline-block;max-width:100%;overflow-wrap:anywhere}
@media (max-width:720px){.rk-dash{grid-template-columns:minmax(0,1fr)}.rk-card.first{grid-template-columns:90px minmax(0,1fr)}}
.rk-badge.rec{color:var(--cyan);border-color:rgba(34,211,238,.5)}
.rk-badge.env{color:var(--ink-3);border-color:var(--line-2);border-style:dashed}

/* time series */
.ts-ctrl{display:flex;flex-wrap:wrap;gap:4px;align-items:center;margin-bottom:6px}
.ts-ctrl button{background:transparent;border:1px solid var(--line-2);border-radius:4px;padding:2px 8px;font:10.5px var(--mono);color:var(--ink-2)}
.ts-ctrl button.on{border-color:var(--cyan);color:var(--cyan);background:var(--accent-soft)}
.ts-ctrl .sp{flex:1}
.ts-chart svg{width:100%;display:block}
.ts-chart text{font:9.5px var(--mono);fill:var(--ink-3)}
.explain{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.explain span{font:10.5px var(--mono);border:1px solid var(--line-2);border-radius:4px;padding:1px 6px;color:var(--ink-2)}
.explain span.up{color:#fbbf24;border-color:rgba(251,191,36,.45)} .explain span.dn{color:var(--teal);border-color:rgba(45,212,191,.45)}

/* report */
.summary{font-size:12px}
.summary .row{display:grid;grid-template-columns:110px minmax(0,1fr);gap:8px;padding:3px 0;border-bottom:1px dotted var(--line)}
.summary .row span:first-child{color:var(--ink-3);font:11px var(--mono)}
.actions-list{margin:6px 0 0;padding:0;list-style:none;font-size:12px}
.actions-list li{display:flex;gap:6px;margin:3px 0;color:var(--ink-2)}
.actions-list li::before{content:"✓";color:var(--teal);font-family:var(--mono)}
.report{max-width:1100px;margin:0 auto;padding:22px 26px}
.report h1{font:700 18px var(--mono);letter-spacing:.08em;margin:0 0 4px}
.report h3{font:600 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--cyan);margin:18px 0 6px}
.report table{width:100%;border-collapse:collapse;font-size:12px}
.report th,.report td{border-bottom:1px solid var(--line);padding:5px 6px;text-align:left;vertical-align:top}
.report th{color:var(--ink-3);font:500 11px var(--mono)}
.report .grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.report .kpi{border:1px solid var(--line-2);border-radius:8px;padding:10px;background:var(--inset)}
.report .kpi b{display:block;font:700 22px var(--mono)}
@media print{
  body{background:#fff;color:#111}
  .hdr,.cmdbar,.foot,.drawer,.report .no-print{display:none!important}
  .view{display:none!important} #view-report{display:block!important}
  .card{box-shadow:none;border-color:#ccc;background:#fff}
  .report h3{color:#0e7490} .muted,.note{color:#555}
}

/* ---------------------------------------------------------------- drawer (상태바 트리) */
.drawer{position:fixed;top:calc(var(--hdr) + 8px);right:12px;bottom:12px;width:430px;z-index:1200;background:var(--card-2);border:1px solid var(--line-2);border-radius:10px;padding:12px 14px;overflow:auto;box-shadow:0 30px 60px -20px #000}
.tree{font:12px/1.8 var(--mono);white-space:pre;overflow-x:auto}
.tree .root{font-weight:700;color:var(--cyan)}
.tree button{background:none;border:0;padding:0;text-align:left;font:inherit;color:var(--ink)}
.tree button:hover .t-name{text-decoration:underline}
.tree .t-state{display:inline-block;width:1.4em;text-align:center}
.tree .done{color:var(--teal)} .tree .pending{color:var(--ink-3)}
.tree .t-val{color:var(--ink-3)} .tree .t-val.hot{color:var(--lv-HIGH)}

/* =====================================================================
   기존 상세 패널 구성요소 (다크 테마로 재해석)
   ===================================================================== */
.kv{display:grid;grid-template-columns:auto minmax(0,1fr);gap:3px 14px;font:12.5px var(--mono)}
.kv dt{color:var(--ink-3)} .kv dd{margin:0}
.taxo{font:12px var(--mono);color:var(--ink-2)}
.ident-top{display:grid;grid-template-columns:150px minmax(0,1fr);gap:14px;margin-top:10px}
.ident-img{position:relative;border:1px solid var(--line);border-radius:6px;aspect-ratio:1;background:var(--inset);overflow:hidden}
.ident-img img{width:100%;height:100%;object-fit:contain;display:block;max-width:100%}
.ident-img .tag{position:absolute;left:0;bottom:0;font:10px var(--mono);background:rgba(5,13,26,.85);padding:1px 6px;border-top-right-radius:4px}
.toggle{margin-top:6px;font:11px var(--mono);display:block}
.conf-bar{height:7px;background:rgba(148,163,184,.15);border-radius:3px;overflow:hidden;margin:4px 0 2px}
.conf-bar b{display:block;height:100%;background:linear-gradient(90deg,#0ea5e9,var(--cyan))}
.checks{list-style:none;margin:0;padding:0;font:12px/1.7 var(--mono);color:var(--ink-2)}
.checks li::before{content:"✓ ";color:var(--teal)}
.checks li.ai::before{content:"◉ ";color:var(--lv-ORANGE)}
.sim{display:grid;grid-template-columns:minmax(0,1fr) 110px 52px;gap:4px 10px;align-items:center;font:12px var(--mono)}
.sim .b{height:7px;background:rgba(148,163,184,.15);border-radius:3px;overflow:hidden}
.sim .b i{display:block;height:100%}
.sim .p{text-align:right}
.picker-wrap{margin-top:8px;text-align:center;background:var(--inset);border:1px solid var(--line);border-radius:6px;padding:6px}
.picker{position:relative;display:inline-block;width:100%;vertical-align:top;line-height:0}
.picker img{display:block;width:100%;height:auto;max-width:100%;border-radius:3px;user-select:none;-webkit-user-drag:none}
.picker canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:crosshair}
.pick-actions{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;margin-top:8px;font-size:12px}
.pick-actions .on{border-color:var(--cyan);color:var(--cyan)}
.months{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:2px;font:10px var(--mono);text-align:center}
.months span{padding:4px 0;background:var(--inset);color:var(--ink-3);border-radius:2px}
.months span.on{background:rgba(34,211,238,.28);color:var(--ink)}
.months span.now{outline:1.5px solid var(--cyan);outline-offset:-1.5px}
.hab-box{border-left:3px solid var(--c-gray);padding:8px 10px;background:var(--inset);border-radius:0 6px 6px 0}
.src{font-size:11.5px;color:var(--ink-3);margin:0;padding-left:16px}
.src li{margin:2px 0;word-break:break-word}
.env-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:8px;margin-top:8px}
.env-grid label{display:grid;gap:2px;font:10.5px var(--mono);color:var(--ink-3)}
.env-grid input{font:13px var(--mono);width:100%;background:var(--inset);color:var(--ink);border:1px solid var(--line-2);border-radius:4px;padding:5px 6px}
.cmp{display:grid;grid-template-columns:80px minmax(0,1fr) 88px;gap:6px 10px;align-items:center;font:11.5px var(--mono);margin-top:4px}
.track{position:relative;height:16px;background:rgba(148,163,184,.10);border-radius:2px}
.track .rng{position:absolute;top:5px;height:6px;background:rgba(148,163,184,.3)}
.track .opt{position:absolute;top:3px;height:10px;background:rgba(34,211,238,.55)}
.track .cur{position:absolute;top:-3px;width:3px;height:22px;background:var(--lv-HIGH);border-radius:1px;box-shadow:0 0 6px var(--lv-HIGH)}
.track .cur.fit{background:var(--teal);box-shadow:0 0 6px var(--teal)}
.cmp .v{text-align:right}
.cmp .ov{grid-column:2/4;font-size:10.5px;color:var(--ink-3);margin-top:-4px}
.gauge{margin:12px 0 4px}
.gauge .line{position:relative;height:8px;border-radius:4px;background:linear-gradient(90deg,var(--lv-LOW) 0 40%,var(--lv-WATCH) 40% 70%,var(--lv-HIGH) 70%)}
.gauge .knob{position:absolute;top:50%;width:16px;height:16px;border-radius:50%;background:#fff;border:3px solid var(--bg);transform:translate(-50%,-50%);transition:left .4s}
.gauge .ticks{display:flex;justify-content:space-between;font:10.5px var(--mono);color:var(--ink-3);margin-top:6px}
.score-row{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.score{font:700 38px/1 var(--mono)}
.lvl{font:700 13px var(--mono);padding:2px 9px;border-radius:4px;color:#04121f}
.contrib{display:grid;grid-template-columns:minmax(0,150px) minmax(0,1fr) 64px;gap:5px 10px;align-items:center;font:12px var(--mono)}
.contrib .blocks{height:12px;background:repeating-linear-gradient(90deg,rgba(148,163,184,.14) 0 6px,transparent 6px 8px)}
.contrib .blocks i{display:block;height:100%;background:repeating-linear-gradient(90deg,var(--cyan) 0 6px,transparent 6px 8px)}
.contrib .n{text-align:right}
.total{font:600 12.5px var(--mono);text-align:right;margin-top:6px}
ol.why{margin:0;padding-left:20px;font-size:12.5px;color:var(--ink-2)}
ol.why li{margin:3px 0}
.route{font-size:12.5px;padding:9px 12px;border-radius:6px;background:var(--inset);border:1px solid var(--line)}
.actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:8px}
.act{border:1px solid var(--line);border-radius:6px;padding:8px 10px;background:var(--inset);position:relative}
.act.on{border-color:rgba(244,63,94,.6)}
.act h5{margin:0;font:600 11.5px var(--mono);color:var(--ink-2)}
.act .st{font:700 14px var(--mono);margin:2px 0}
.act.on .st{color:var(--lv-HIGH)}
.act p{margin:0;font-size:11.5px;color:var(--ink-3);line-height:1.5}
.act .chg{position:absolute;top:6px;right:8px;font:10px var(--mono);background:var(--lv-ORANGE);color:#04121f;border-radius:2px;padding:0 5px}
.sliders{display:grid;gap:10px;margin-top:10px}
.slider{display:grid;grid-template-columns:74px minmax(0,1fr);gap:0 10px;align-items:center;font:11.5px var(--mono)}
.slider .row{display:grid;grid-template-columns:48px minmax(0,1fr) 48px;gap:8px;align-items:center;color:var(--ink-3)}
.slider .row span:last-child{text-align:right}
.slider input[type=range]{width:100%;accent-color:var(--cyan)}
.slider output{grid-column:2;text-align:center;font:600 11.5px var(--mono);color:var(--ink)}
.slider output .d{font-weight:400;margin-left:4px}
.presets{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.simulate{display:block;margin:14px auto 0;background:var(--cyan);color:#04121f;border:0;border-radius:6px;padding:9px 28px;font:700 12.5px var(--mono);letter-spacing:.1em;box-shadow:0 0 18px -4px var(--cyan)}
.wi-result{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;text-align:center}
.wi-result div{border:1px solid var(--line-2);border-radius:6px;padding:8px;background:var(--inset)}
.wi-result b{display:block;font:700 24px var(--mono)}
.wi-result small{font:10.5px var(--mono);color:var(--ink-3)}
.curve svg{width:100%;height:auto;display:block}
.curve text{font:9.5px var(--mono);fill:var(--ink-3)}

/* 현재 연안 해역 상태 · 순위 */
.rk{border:1px solid var(--line);border-radius:8px;background:var(--inset);padding:10px}
.rk-first{display:grid;grid-template-columns:128px minmax(0,1fr);gap:12px;align-items:start}
.rk-img{margin:0}
.rk-img img{width:100%;aspect-ratio:1;object-fit:contain;background:#06101e;border:1px solid var(--line);border-radius:6px;display:block;max-width:100%}
.rk-img.none span{display:grid;place-items:center;aspect-ratio:1;background:#06101e;border:1px dashed var(--line-2);border-radius:6px;font:11px var(--mono);color:var(--ink-3)}
.rk-img figcaption{font-size:10px;line-height:1.4;color:var(--ink-3);margin-top:4px}
.rk-rank{font:600 11.5px var(--mono);display:flex;flex-wrap:wrap;gap:6px;align-items:center;color:var(--cyan)}
.rk-name{margin:4px 0;font:600 15px/1.3 var(--mono)}
.rk-info{margin-top:10px;font-size:12px;grid-template-columns:72px minmax(0,1fr)}
.rk-info dd{font-family:var(--sans);color:var(--ink-2);line-height:1.55}
.rk-actions{margin-top:8px}
.rk-list{list-style:none;margin:10px 0 0;padding:0;border-top:1px solid var(--line)}
.rk-row{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:8px;align-items:center;padding:7px 0;border-bottom:1px dotted var(--line);font-size:12px}
.rk-row:last-child{border-bottom:0}
.rk-no{font:700 14px var(--mono);color:var(--ink-3);text-align:center}
.rk-main{line-height:1.7}
.demo-obs{margin-top:14px;border:1px dashed var(--line-2);border-radius:6px;padding:8px 10px;background:var(--inset)}
.demo-obs summary{cursor:pointer;font:600 10.5px var(--mono);letter-spacing:.06em;color:var(--ink-2)}

/* process decomposition */
.proc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.proc{border:1px solid var(--line-2);border-radius:8px;padding:10px;background:var(--inset)}
.proc h4{margin:0;font:700 11px var(--mono);letter-spacing:.1em;color:var(--cyan)}
.proc .q{font-size:11px;color:var(--ink-3);margin:2px 0 6px;min-height:32px}
.proc .sc{font:700 26px/1 var(--mono)}
.proc .sc small{font-size:11px;color:var(--ink-3);font-weight:400}
.comp{display:grid;grid-template-columns:minmax(0,1fr) 58px 34px;gap:3px 8px;align-items:center;font-size:11px;margin-top:6px}
.comp .v{text-align:right;font-family:var(--mono)}
.comp small{grid-column:1/-1;color:var(--ink-3);font-size:10px;margin-top:-2px}
.meta-table{width:100%;border-collapse:collapse;font-size:11.5px}
.meta-table th,.meta-table td{border-bottom:1px solid var(--line);padding:5px 6px;text-align:left;vertical-align:top}
.meta-table th{font:500 10.5px var(--mono);color:var(--ink-3);position:sticky;top:0;background:var(--card)}
.conf-low{color:#fbbf24} .conf-medium{color:var(--cyan)} .conf-high{color:var(--teal)}
.table-scroll{overflow:auto;max-height:520px}
.phys-table{width:100%;border-collapse:collapse;font:11.5px var(--mono)}
.phys-table th,.phys-table td{border-bottom:1px solid var(--line);padding:5px 6px;text-align:right}
.phys-table th:first-child,.phys-table td:first-child{text-align:left}
.phys-table th{color:var(--ink-3);font-weight:500}

.foot{padding:10px 18px 18px;font-size:11px;color:var(--ink-3);line-height:1.6}
.foot p{margin:0 0 4px}

/* ---------------------------------------------------------------- response guidance */
.resp-banner{margin:0 0 12px;padding:9px 14px;border:1px solid rgba(250,204,21,.35);border-left:3px solid var(--lv-WATCH);border-radius:8px;background:rgba(250,204,21,.06);font-size:12px;color:var(--ink-2)}
.grid-resp{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:12px;align-items:start}
@media (max-width:1180px){.grid-resp{grid-template-columns:minmax(0,1fr)}}
.omr{display:grid;gap:0;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.omr-sec{padding:10px 12px;border-bottom:1px solid var(--line)}
.omr-sec:last-child{border-bottom:0}
.omr-h{font:600 10.5px var(--mono);letter-spacing:.1em;color:var(--ink-3);margin-bottom:6px;display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap}
.omr-kv{display:grid;grid-template-columns:minmax(120px,auto) minmax(0,1fr);gap:4px 12px;margin:0;font-size:12.5px}
.omr-kv dt{color:var(--ink-3);font:11.5px var(--mono)} .omr-kv dd{margin:0;color:var(--ink)}
.omr-kv dd b{font:600 14px var(--mono)}
.ref-status{display:inline-block;font:700 11px var(--mono);letter-spacing:.06em;padding:2px 8px;border-radius:4px;border:1px solid}
.ref-BELOW,.ref-NO_DENSITY,.ref-NO_CRITERIA{color:var(--ink-2);border-color:var(--line-2)}
.ref-NEAR{color:#fb923c;border-color:#fb923c;background:rgba(251,146,60,.08)}
.ref-ABOVE{color:var(--lv-HIGH);border-color:var(--lv-HIGH);background:rgba(244,63,94,.08)}
.ai-rows{display:grid;gap:6px}
.ai-row{display:grid;grid-template-columns:minmax(150px,auto) minmax(0,1fr) 64px;gap:10px;align-items:center;font-size:12px}
.ai-row .bar{height:6px;border-radius:3px;background:rgba(148,163,184,.14);overflow:hidden}
.ai-row .bar i{display:block;height:100%}
.ai-row b{font:700 14px var(--mono);text-align:right}
.ai-row.integ{padding-top:6px;border-top:1px dashed var(--line-2)}
.ai-row.integ b{font-size:18px}
.prio{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 12px;border-radius:8px;border:1px solid var(--line-2);margin:8px 0}
.prio b{font:700 13px var(--mono);letter-spacing:.08em}
.prio-NORMAL{border-color:rgba(45,212,191,.5)} .prio-NORMAL b{color:var(--lv-LOW)}
.prio-ENHANCED{border-color:rgba(250,204,21,.55);background:rgba(250,204,21,.05)} .prio-ENHANCED b{color:var(--lv-WATCH)}
.prio-HIGH{border-color:rgba(251,146,60,.6);background:rgba(251,146,60,.07)} .prio-HIGH b{color:#fb923c}
.prio-CRITICAL{border-color:rgba(244,63,94,.7);background:rgba(244,63,94,.09)} .prio-CRITICAL b{color:var(--lv-HIGH)}
.prio small{color:var(--ink-3);font-size:11px}
.mon-list{list-style:none;margin:0;padding:0;display:grid;gap:4px;font-size:12.5px}
.mon-list li{position:relative;padding-left:20px}
.mon-list li::before{content:"✓";color:var(--teal);font-weight:700;position:absolute;left:2px;top:0}
.mon-list li.off::before{content:"◆";color:var(--lv-WATCH);font-size:10px;margin-top:3px}
.mon-list small{display:block;color:var(--ink-3);font-size:10.5px}
.why-chain{margin:0;padding-left:18px;font-size:12.5px;line-height:1.6;color:var(--ink-2)}
.why-chain li::marker{color:var(--cyan);font-family:var(--mono)}
.chain{display:flex;flex-wrap:wrap;align-items:center;gap:4px;font:10.5px var(--mono);color:var(--ink-3);margin:2px 0 8px}
.chain span{border:1px solid var(--line-2);border-radius:3px;padding:1px 6px}
.chain span.on{color:var(--cyan);border-color:rgba(34,211,238,.5)}
.chain i{font-style:normal}
.stage{border:1px solid var(--line);border-radius:8px;margin-bottom:8px;background:var(--inset)}
.stage>summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:26px minmax(0,1fr) auto;gap:10px;align-items:center;padding:9px 12px}
.stage>summary::-webkit-details-marker{display:none}
.stage .sc{font:700 13px var(--mono);color:var(--ink-3);text-align:center;border:1px solid var(--line-2);border-radius:4px;padding:2px 0}
.stage .st-t{font:600 12px var(--mono);letter-spacing:.05em}
.stage .st-t small{display:block;font:11px var(--sans);color:var(--ink-3);letter-spacing:0}
.stage-state{font:700 10.5px var(--mono);letter-spacing:.06em;padding:2px 8px;border-radius:4px;border:1px solid var(--line-2);color:var(--ink-3);white-space:nowrap}
.stage.s-ACTIVE .sc,.stage.s-ACTIVE .stage-state{color:var(--lv-WATCH);border-color:var(--lv-WATCH)}
.stage.s-HIGH-PRIORITY .sc,.stage.s-HIGH-PRIORITY .stage-state{color:var(--lv-HIGH);border-color:var(--lv-HIGH);background:rgba(244,63,94,.08)}
.stage.s-PREPARE .sc,.stage.s-PREPARE .stage-state{color:var(--cyan);border-color:var(--cyan)}
.stage.s-CHECK .stage-state{color:#fb923c;border-color:#fb923c;border-style:dashed}
.stage.s-HIGH-PRIORITY{border-color:rgba(244,63,94,.5)}
.stage.s-ACTIVE{border-color:rgba(250,204,21,.35)}
.stage-body{padding:0 12px 12px 48px;display:grid;gap:8px}
.trig{list-style:none;margin:0;padding:0;display:grid;gap:3px;font-size:12px}
.trig li{position:relative;padding-left:20px;color:var(--ink-3)}
.trig li::before{content:"○";position:absolute;left:2px;top:0}
.trig li.met{color:var(--ink)} .trig li.met::before{content:"●";color:var(--lv-WATCH)}
.off-list{margin:0;padding:0;list-style:none;display:grid;gap:4px;font-size:12px}
.off-list li{border-left:2px solid rgba(250,204,21,.5);padding:2px 0 2px 8px;color:var(--ink-2)}
.off-list li small{color:var(--ink-3);font:10px var(--mono);margin-left:6px}
.sub-h{font:600 10.5px var(--mono);letter-spacing:.08em;color:var(--ink-3);margin-top:2px}
.guide-btn{border:1px solid var(--lv-WATCH);color:var(--lv-WATCH);background:rgba(250,204,21,.06);border-radius:6px;padding:6px 12px;font:600 12px var(--mono)}
.guide-btn:hover{background:rgba(250,204,21,.14)}
.resp-inputs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:10px}
.resp-inputs label{display:grid;gap:3px;font:10.5px var(--mono);color:var(--ink-3)}
.resp-inputs input,.resp-inputs select{font:12px var(--mono);background:var(--inset);color:var(--ink);border:1px solid var(--line-2);border-radius:4px;padding:5px 6px;min-width:0}
@media (max-width:720px){.resp-inputs{grid-template-columns:minmax(0,1fr)}.ai-row{grid-template-columns:minmax(0,1fr) 54px}.ai-row .bar{display:none}}
.dresp{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) minmax(0,1.2fr) minmax(0,1.3fr);gap:12px}
@media (max-width:1500px){.dresp{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:720px){.dresp{grid-template-columns:minmax(0,1fr)}}
.dresp>div{background:var(--inset);border:1px solid var(--line);border-radius:8px;padding:10px 12px;min-width:0}
.stage-dots{display:flex;gap:5px;flex-wrap:wrap;margin-top:6px}
.stage-dots span{font:600 10.5px var(--mono);border:1px solid var(--line-2);border-radius:4px;padding:2px 6px;color:var(--ink-3)}
.stage-dots span.s-ACTIVE{color:var(--lv-WATCH);border-color:var(--lv-WATCH)}
.stage-dots span.s-HIGH-PRIORITY{color:var(--lv-HIGH);border-color:var(--lv-HIGH)}
.stage-dots span.s-PREPARE{color:var(--cyan);border-color:var(--cyan)}
.stage-dots span.s-CHECK{color:#fb923c;border-color:#fb923c;border-style:dashed}
.ctx-block{margin-bottom:10px}
.ctx-block h4{margin:6px 0 4px;font:600 12px var(--mono);color:var(--ink)}
.ctx-block h4 small{color:var(--ink-3);font-weight:400}
.prio-t{font:700 11px var(--mono);letter-spacing:.05em}
.prio-t.prio-NORMAL{color:var(--lv-LOW)} .prio-t.prio-ENHANCED{color:var(--lv-WATCH)} .prio-t.prio-HIGH{color:#fb923c} .prio-t.prio-CRITICAL{color:var(--lv-HIGH)}
.formula{font:12px var(--mono);color:var(--ink);background:var(--inset);border-left:2px solid var(--cyan);border-radius:4px;padding:7px 10px;margin:6px 0;overflow-x:auto}
.formula sub{font-size:9px;color:var(--ink-3)}
.flow-canvas{position:absolute;inset:0;pointer-events:none;z-index:450}
.flow-btn{white-space:nowrap}
.flow-btn.on{border-color:var(--cyan);color:var(--cyan);background:rgba(34,211,238,.10)}
.flow-note{color:var(--cyan)}
.map-legend .flow-note{color:var(--cyan)}
@media (prefers-reduced-motion:reduce){.flow-canvas{opacity:.85}}
.low-sample{color:#fb923c;font:600 10px var(--mono);margin-left:4px}
.low-sample-box{border-left:2px solid #fb923c;padding:4px 8px;background:rgba(251,146,60,.07);color:var(--ink-2)}
/* 문헌 기반 종 해설 */
.lit{display:grid;gap:6px}
.lit-sec{border:1px solid var(--line);border-radius:8px;background:var(--inset)}
.lit-sec>summary{cursor:pointer;padding:8px 12px;font:600 12px var(--mono);color:var(--ink);list-style:none}
.lit-sec>summary::-webkit-details-marker{display:none}
.lit-sec>summary::after{content:"▸";float:right;color:var(--ink-3)}
.lit-sec[open]>summary::after{content:"▾"}
.lit-sec[open]>summary{border-bottom:1px solid var(--line)}
.lit-body{padding:8px 12px 10px;display:grid;gap:8px}
.lit-kv{display:grid;grid-template-columns:minmax(84px,auto) minmax(0,1fr);gap:4px 12px;margin:0;font-size:12.5px}
.lit-kv dt{color:var(--ink-3);font:11.5px var(--mono)} .lit-kv dd{margin:0;color:var(--ink-2);line-height:1.6}
.lit-table td,.lit-table th{white-space:nowrap}
.lit-table tr.self td{color:var(--cyan);font-weight:600;background:rgba(34,211,238,.06)}
.lit-band svg{width:100%;max-width:560px;display:block}
.lit-band text{font:10.5px var(--sans);fill:var(--ink-2)}
.lit-band text.self{fill:var(--cyan);font-weight:600}
.lit-band text.opt{fill:#facc15;font:600 10px var(--mono)}
@media (max-width:720px){.lit-kv{grid-template-columns:minmax(0,1fr)}}