/* 토큰은 KOOS 실시간 뷰어(Visualization_AI_koos/site/style.css)의 :root 와 같다.
   세 뷰어와 같은 화면처럼 보이게 하려는 것이라 색을 새로 만들지 않는다. */
: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,.86);
  --accent:#4da3ff;
  --warn:#ff6b6b;
  --caution:#f5b942;
  --ok:#7ee0a8;
  --r:12px;
  --shadow:0 8px 28px rgba(0,0,0,.45);
  /* 차트: 관측 = 중립 잉크, 모델 = 범주 1번(파랑, 어두운 판) */
  --s-obs:#c3c2b7;
  --s-mod:#3987e5;
  --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);
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);
  font-family:"Pretendard Variable",Pretendard,system-ui,-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  font-size:13px;-webkit-font-smoothing:antialiased;overflow:hidden}
button,select,input{font:inherit;color:inherit}
.muted{color:var(--dim)}
#map{position:fixed;inset:0}
#particles{position:fixed;inset:0;pointer-events:none;z-index:1}

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

/* ── 위 ── */
.topbar{position:fixed;z-index:5;left:calc(12px + var(--padl));top:calc(12px + var(--pad));
  display:flex;flex-direction:column;gap:8px;align-items:flex-start;max-width:calc(100vw - 24px)}
.brand{display:flex;align-items:center;gap:10px;padding:8px 14px 8px 10px}
.brand-logo{width:30px;height:30px}
.brand-title{font-weight:700;font-size:14.5px;letter-spacing:-.01em}
.brand-sub{font-size:11px;color:var(--dim);margin-top:1px}
.varbar{display:flex;flex-direction:column;padding:4px;gap:2px;min-width:132px}
.varbar button{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  padding:8px 11px;border:0;border-radius:8px;background:transparent;cursor:pointer;text-align:left}
.varbar button:hover{background:var(--line2)}
.varbar button[aria-pressed="true"]{background:rgba(77,163,255,.16);box-shadow:inset 2px 0 0 var(--accent)}
.varbar button i{font-style:normal;font-size:10.5px;color:var(--faint)}

/* ── 오른쪽 위 도구 ── */
.tools{position:fixed;z-index:5;top:calc(12px + var(--pad));right:calc(12px + var(--padr));
  display:flex;gap:10px;padding:6px 8px;align-items:center;flex-wrap:wrap;justify-content:flex-end;
  max-width:calc(100vw - 340px)}
.tool-group{display:flex;gap:2px;align-items:center}
.tool-group + .tool-group{border-left:1px solid var(--line);padding-left:10px}
.tools button{border:0;background:transparent;padding:6px 10px;border-radius:7px;cursor:pointer}
.tools button:hover{background:var(--line2)}
.tools button[aria-pressed="true"]{background:rgba(77,163,255,.2);color:var(--ink)}
.tools label{display:flex;gap:5px;align-items:center;padding:4px 7px;cursor:pointer;color:var(--dim);white-space:nowrap}
.tools input{accent-color:var(--accent)}

/* ── 오른쪽 지점 판 ── */
.panel{position:fixed;z-index:4;right:calc(12px + var(--padr));top:calc(64px + var(--pad));
  width:300px;max-height:calc(100vh - 64px - 130px - var(--pad) - var(--padb));display:flex;flex-direction:column}
.panel-head{display:flex;justify-content:space-between;align-items:center;padding:10px 12px 6px 14px}
.panel-head h2{font-size:13px;margin:0;font-weight:700}
.panel-head h2 .muted{font-weight:400;font-size:11.5px;margin-left:4px}
.panel-body{overflow:auto;padding:0 8px 10px}
.panel.collapsed .panel-body{display:none}
.icon{border:0;background:transparent;width:26px;height:26px;border-radius:6px;cursor:pointer;font-size:16px;line-height:1;color:var(--dim)}
.icon:hover{background:var(--line2);color:var(--ink)}
.spots{list-style:none;margin:0;padding:0}
.spots li{display:grid;grid-template-columns:1fr auto;gap:2px 8px;padding:8px 8px;border-radius:8px;cursor:pointer}
.spots li:hover,.spots li.sel{background:var(--line2)}
.spot-name{font-weight:600}
.spot-vals{grid-column:1/-1;display:flex;gap:12px;color:var(--dim);font-size:12px;font-variant-numeric:tabular-nums}
.spot-vals b{color:var(--ink);font-weight:600}
.badge{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;padding:2px 7px;border-radius:99px;
  border:1px solid currentColor;line-height:1.4}
.badge::before{font-size:10px}
.badge.ok{color:var(--ok)} .badge.ok::before{content:"●"}
.badge.caution{color:var(--caution)} .badge.caution::before{content:"▲"}
.badge.danger{color:var(--warn)} .badge.danger::before{content:"◆"}
.note{font-size:11px;color:var(--faint);line-height:1.55;margin:8px 8px 0}
.note b{color:var(--dim);font-weight:600}

/* ── 상세 서랍 ── */
.drawer{position:fixed;z-index:6;left:calc(12px + var(--padl));bottom:calc(112px + var(--padb));
  width:min(520px,calc(100vw - 24px));max-height:calc(100vh - 250px);overflow:auto;padding:12px 14px 14px}
.drawer-head{display:flex;justify-content:space-between;gap:10px;margin-bottom:6px}
.drawer-head h3{margin:0;font-size:14.5px}
.drawer-head .muted{font-size:11.5px;margin-top:2px;line-height:1.5}
.chart{margin-top:10px}
.chart-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:12px}
.chart-head b{font-weight:600}
.chart-legend{display:flex;gap:12px;font-size:11.5px;color:var(--dim)}
.chart-legend span{display:inline-flex;align-items:center;gap:5px}
.chart-legend i{display:inline-block;width:14px;height:2px;border-radius:2px}
.chart svg{display:block;width:100%;height:120px;overflow:visible}
.chart .stats{font-size:11px;color:var(--faint);margin-top:2px;font-variant-numeric:tabular-nums}
.tip{position:fixed;z-index:20;pointer-events:none;background:var(--glass2);border:1px solid var(--line);border-radius:8px;
  padding:6px 8px;font-size:11.5px;line-height:1.5;box-shadow:var(--shadow);font-variant-numeric:tabular-nums;white-space:nowrap}
.tip .k{color:var(--dim)}

/* ── 범례 ── */
.legend{position:fixed;z-index:4;left:calc(12px + var(--padl));bottom:calc(112px + var(--padb));padding:9px 12px 8px;width:250px}
.legend-title{font-size:12px;font-weight:600;margin-bottom:6px}
.legend-title span{font-weight:400;color:var(--dim)}
.legend-bar{height:10px;border-radius:3px}
.legend-ticks{position:relative;height:16px;font-size:10.5px;color:var(--dim);font-variant-numeric:tabular-nums}
.legend-ticks span{position:absolute;top:3px;transform:translateX(-50%)}
.legend-ticks span:first-child{transform:none}
.legend-ticks span:last-child{transform:translateX(-100%)}
.legend-src{font-size:10.5px;margin-top:2px}
body.drawer-open .legend{display:none}

/* ── 시간 막대 ── */
.timebar{position:fixed;z-index:5;left:calc(12px + var(--padl));right:calc(12px + var(--padr));bottom:calc(12px + var(--padb));
  display:flex;gap:12px;align-items:center;padding:8px 14px 6px 10px}
.play{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:rgba(77,163,255,.18);cursor:pointer;font-size:14px;flex:none}
.play:hover{background:rgba(77,163,255,.3)}
.time-main{flex:1;min-width:0}
.time-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.time-label{font-weight:700;font-size:14px;font-variant-numeric:tabular-nums}
#time-note{font-size:11.5px}
.chip{border:1px solid var(--line);background:transparent;border-radius:99px;padding:3px 10px;cursor:pointer;font-size:11.5px;margin-left:auto}
.chip:hover{background:var(--line2)}
select{background:var(--glass2);border:1px solid var(--line);border-radius:7px;padding:3px 6px;font-size:11.5px}
.track{position:relative;height:30px;margin-top:4px}
#spark{position:absolute;left:0;right:0;top:0;width:100%;height:22px}
.track input{position:absolute;left:0;right:0;bottom:-4px;width:100%;margin:0;background:transparent;accent-color:var(--accent);cursor:pointer}
.event{position:absolute;top:-2px;bottom:6px;width:0;border-left:1px dashed var(--warn);pointer-events:none}
.event span{position:absolute;left:4px;top:-2px;font-size:10px;color:var(--warn);white-space:nowrap}
.days{position:relative;height:14px;font-size:10px;color:var(--faint);font-variant-numeric:tabular-nums}
.days span{position:absolute;transform:translateX(-50%)}

.loading{position:fixed;z-index:30;left:50%;top:50%;transform:translate(-50%,-50%);padding:12px 18px;border-radius:10px;
  background:var(--glass2);border:1px solid var(--line)}
.loading[hidden]{display:none}

/* maplibre 기본 팝업을 판과 같은 결로 */
.maplibregl-popup-content{background:var(--glass2);color:var(--ink);border:1px solid var(--line);border-radius:10px;
  padding:9px 12px;box-shadow:var(--shadow);font-size:12px;line-height:1.6;font-variant-numeric:tabular-nums}
.maplibregl-popup-tip{border-top-color:var(--glass2)!important;border-bottom-color:var(--glass2)!important}
.maplibregl-popup-close-button{color:var(--dim);font-size:16px;padding:0 6px}
.probe h4{margin:0 0 3px;font-size:12px}
.probe table{border-collapse:collapse}
.probe td{padding:0 10px 0 0}
.probe td:first-child{color:var(--dim)}
.maplibregl-ctrl-group{background:var(--glass2)!important;border:1px solid var(--line)}
.maplibregl-ctrl-group button .maplibregl-ctrl-icon{filter:invert(1)}
.maplibregl-ctrl-attrib{background:rgba(7,11,18,.6)!important;color:var(--faint)}
.maplibregl-ctrl-attrib a{color:var(--dim)}
.maplibregl-ctrl-bottom-right{bottom:calc(96px + var(--padb))}

/* ── 좁은 화면 ── */
@media (max-width:760px){
  .topbar{left:8px;right:8px;top:calc(8px + var(--pad))}
  .brand{padding:6px 10px 6px 7px}
  .brand-logo{width:24px;height:24px}
  .brand-title{font-size:13px}
  .varbar{flex-direction:row;overflow-x:auto;max-width:100%;scrollbar-width:none}
  .varbar button{flex:none;padding:7px 10px}
  .varbar button i{display:none}
  .tools{top:auto;bottom:calc(128px + var(--padb));right:8px;max-width:calc(100vw - 16px);gap:4px;padding:4px}
  .tool-group:first-child{display:none}
  .tool-group + .tool-group{border:0;padding:0}
  .tools label{padding:3px 5px;font-size:11.5px}
  .panel{top:auto;bottom:calc(204px + var(--padb));right:8px;left:8px;width:auto;max-height:36vh}   /* 도구 막대가 두 줄(≈65 px)이라 그 위로 */
  .panel.collapsed{left:auto}
  .legend{top:calc(106px + var(--pad));bottom:auto;left:8px;width:170px;padding:7px 10px 6px}
  .legend-src{display:none}
  .maplibregl-ctrl-attrib{display:none}
  .drawer{left:8px;right:8px;width:auto;bottom:calc(112px + var(--padb));max-height:55vh}
  .timebar{left:8px;right:8px;bottom:calc(8px + var(--padb));padding:6px 10px 4px 8px;gap:8px}
  .play{width:34px;height:34px}
  .time-label{font-size:12.5px}
  #time-note{display:none}
}

/* ── 판 탭 · 월파 시나리오 ── */
.panel{width:320px}
.panel-head{gap:8px}
.panel-head #panel-time{font-size:11.5px;margin-left:auto}
.panel-tabs{display:flex;gap:2px;background:rgba(255,255,255,.04);border-radius:8px;padding:2px}
.panel-tabs button{border:0;background:transparent;padding:5px 10px;border-radius:6px;cursor:pointer;font-size:12.5px;color:var(--dim);font-weight:600}
.panel-tabs button[aria-selected="true"]{background:rgba(77,163,255,.2);color:var(--ink)}
.ot-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:4px 6px 10px}
.ot-stats div{background:rgba(255,255,255,.04);border-radius:8px;padding:7px 6px;text-align:center}
.ot-stats b{display:block;font-size:16px;font-variant-numeric:tabular-nums}
.ot-stats span{display:block;font-size:10px;color:var(--dim);line-height:1.3;margin-top:2px}
.sc{margin:0 6px}
.sc-row{display:grid;grid-template-columns:88px 1fr 58px;align-items:center;gap:8px;padding:3px 0;font-size:12px;color:var(--dim)}
.sc-row input{width:100%;accent-color:var(--accent)}
.sc-row output{text-align:right;color:var(--ink);font-variant-numeric:tabular-nums}
.sc-btns{display:flex;gap:6px;margin:6px 0 2px;flex-wrap:wrap}
.sc-btns .chip{margin-left:0}
.ot-legend{display:flex;flex-wrap:wrap;gap:4px 10px;margin:10px 8px 0;font-size:11px;color:var(--dim)}
.ot-legend span{display:inline-flex;align-items:center;gap:5px}
.ot-legend i{display:inline-block;width:14px;height:4px;border-radius:2px}
.ot-legend.depth{gap:6px;align-items:center;margin-top:6px}
.ot-legend.depth i.grad{width:90px;height:8px;background:linear-gradient(to right,#8fe3ff,#39b7f0,#1a7fd6,#1d4fb0,#3a2a9a)}