:root{
  --bg:#05070d;
  --ink:#e8ecf5;
  --mut:#8894ad;
  --line:rgba(140,160,200,.18);
  --hot:#ff5a36;
  --hot2:#ffb03a;
  --cool:#3ad1ff;
  --panel:rgba(8,12,22,.72);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);
  font-family:"Pretendard","Malgun Gothic",system-ui,sans-serif;
  word-break:keep-all;overflow:hidden;-webkit-font-smoothing:antialiased}
#gl{position:fixed;inset:0;width:100%;height:100%;display:block}
#labels{position:fixed;inset:0;pointer-events:none;overflow:hidden}

/* ── topbar ── */
.topbar{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;
  justify-content:space-between;gap:16px;padding:14px 22px;
  background:linear-gradient(180deg,rgba(5,7,13,.92),rgba(5,7,13,0));}
.brand{display:flex;align-items:center;gap:12px}
.brand .dot{width:10px;height:10px;border-radius:50%;background:var(--hot);
  box-shadow:0 0 14px 3px rgba(255,90,54,.8);animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{50%{opacity:.45;box-shadow:0 0 6px 1px rgba(255,90,54,.5)}}
.brand b{display:block;font-size:16px;letter-spacing:.16em;font-weight:700}
.brand small{display:block;font-size:15px;color:var(--mut);margin-top:2px;letter-spacing:.01em}
nav{display:flex;gap:6px;flex-wrap:wrap}
nav button{background:transparent;border:1px solid var(--line);color:var(--mut);
  padding:8px 13px;border-radius:999px;font:inherit;font-size:15.5px;cursor:pointer;
  transition:.18s;white-space:nowrap}
nav button:hover{color:var(--ink);border-color:rgba(160,190,240,.4)}
nav button.on{color:#fff;border-color:transparent;
  background:linear-gradient(135deg,var(--hot),var(--hot2));
  box-shadow:0 4px 18px -4px rgba(255,90,54,.6)}

/* ── panel ── */
.panel{position:fixed;left:22px;top:78px;width:min(468px,calc(100vw - 44px));
  max-height:calc(100vh - 110px);overflow-y:auto;z-index:15;
  padding:22px;border:1px solid var(--line);border-radius:18px;
  background:var(--panel);backdrop-filter:blur(18px);
  animation:slide .45s cubic-bezier(.2,.8,.3,1)}
@keyframes slide{from{opacity:0;transform:translateX(-14px)}}
.panel::-webkit-scrollbar{width:6px}
.panel::-webkit-scrollbar-thumb{background:rgba(150,170,210,.25);border-radius:3px}
h1{margin:0 0 10px;font-size:30px;line-height:1.32;font-weight:700;letter-spacing:-.01em}
h1 em{font-style:normal;background:linear-gradient(135deg,var(--hot2),var(--hot));
  -webkit-background-clip:text;background-clip:text;color:transparent}
h2.sub{font-size:16px;color:var(--mut);font-weight:600;letter-spacing:.04em;
  margin:22px 0 10px;padding-top:16px;border-top:1px solid var(--line)}
.lead{margin:0 0 18px;font-size:16.5px;line-height:1.72;color:#aab6cd}
.note{margin:16px 0 0;font-size:15px;line-height:1.65;color:var(--mut);
  padding:10px 12px;border-left:2px solid rgba(255,90,54,.45);background:rgba(255,90,54,.05);
  border-radius:0 8px 8px 0}
.note b{color:#cfd8ea;font-weight:600}

.ctl{margin:0 0 16px}
.ctl.row{display:flex;gap:16px;flex-wrap:wrap}
.ctl label{display:flex;justify-content:space-between;align-items:baseline;
  font-size:15px;color:var(--mut);margin-bottom:7px;letter-spacing:.02em}
.ctl label b{color:var(--ink);font-size:16px;font-weight:600}
.hint{display:block;margin-top:5px;font-size:15px;color:#67718a}
.ticks{display:flex;justify-content:space-between;margin-top:4px;font-size:15px;color:#67718a}

input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:4px;
  background:rgba(150,170,210,.2);border-radius:2px;outline:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;
  border-radius:50%;background:linear-gradient(135deg,var(--hot2),var(--hot));cursor:pointer;
  box-shadow:0 0 12px rgba(255,120,60,.7)}
input[type=range]::-moz-range-thumb{width:16px;height:16px;border:0;border-radius:50%;
  background:var(--hot);cursor:pointer}

.chk{display:flex!important;align-items:center;gap:7px;font-size:15.5px;color:#aab6cd;
  cursor:pointer;margin:0!important}
.chk input{accent-color:var(--hot);width:15px;height:15px;cursor:pointer}

.segs{display:flex;gap:5px;flex-wrap:wrap}
.segs button{flex:1;min-width:112px;background:rgba(255,255,255,.04);border:1px solid var(--line);
  color:var(--mut);padding:8px 6px;border-radius:9px;font:inherit;font-size:15px;cursor:pointer;
  transition:.16s}
.segs button:hover{color:var(--ink)}
.segs button.on{background:rgba(255,90,54,.16);border-color:rgba(255,120,70,.6);color:#ffd9c9}

.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:15px;color:#aab6cd;margin-top:4px}
.legend .sw{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:5px;
  vertical-align:middle}

.desc{font-size:15.5px;line-height:1.7;color:#aab6cd;border:1px solid var(--line);
  border-radius:12px;padding:13px 14px;background:rgba(255,255,255,.02)}
.desc b{color:var(--hot2)}

.specs{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.specs div{border:1px solid var(--line);border-radius:11px;padding:10px 11px;
  background:rgba(255,255,255,.02)}
.specs span{display:block;font-size:15px;color:#67718a;letter-spacing:.06em}
.specs b{display:block;font-size:17px;margin:3px 0 3px;color:var(--cool)}
.specs small{display:block;font-size:15px;color:var(--mut);line-height:1.5}

.cases{display:flex;flex-direction:column;gap:9px}
.case{border:1px solid var(--line);border-radius:11px;padding:11px 12px;
  background:rgba(255,255,255,.02);cursor:pointer;transition:.16s}
.case:hover{border-color:rgba(255,120,70,.45);background:rgba(255,90,54,.05)}
.case.on{border-color:rgba(255,120,70,.75);background:rgba(255,90,54,.09)}
.case .ttl{font-size:15.5px;font-weight:600;margin-bottom:2px}
.case .sub2{font-size:15px;color:#67718a;margin-bottom:8px}
.bars{display:flex;flex-direction:column;gap:5px}
.bar{display:flex;align-items:center;gap:8px;font-size:15px;color:var(--mut)}
.bar .nm{width:74px;flex:none}
.bar .tr{flex:1;height:7px;border-radius:4px;background:rgba(150,170,210,.13);overflow:hidden}
.bar .fl{height:100%;border-radius:4px;transition:width .6s cubic-bezier(.2,.8,.3,1)}
.bar .vl{width:56px;text-align:right;flex:none;color:#cfd8ea;font-variant-numeric:tabular-nums}
.fl.u{background:linear-gradient(90deg,#3ad1ff,#4d7dff)}
.fl.i{background:linear-gradient(90deg,#5b6580,#8894ad)}

.losstable{display:flex;flex-direction:column;gap:6px}
.lrow{display:flex;align-items:center;gap:9px;font-size:15px}
.lrow .nm{width:132px;flex:none;color:var(--mut)}
.lrow .tr{flex:1;height:8px;border-radius:4px;background:rgba(150,170,210,.13);overflow:hidden}
.lrow .fl{height:100%;background:linear-gradient(90deg,var(--hot2),var(--hot));border-radius:4px;
  transition:width .6s}
.lrow.best .nm{color:#ffd9c9;font-weight:600}
.lrow.best .fl{background:linear-gradient(90deg,#ffd166,#ff4d3d)}
.lrow .vl{width:60px;text-align:right;color:#cfd8ea;font-variant-numeric:tabular-nums}

/* 05 위험 예보 */
nav button.alt.on{background:linear-gradient(135deg,#3ad1ff,#4d7dff);
  box-shadow:0 4px 18px -4px rgba(58,209,255,.6)}
.chart{margin:4px 0 0;border:1px solid var(--line);border-radius:12px;padding:10px 8px 8px;
  background:rgba(255,255,255,.02)}
.chart svg{display:block}
.chartlg{display:flex;gap:12px;flex-wrap:wrap;align-items:center;padding:6px 6px 2px;
  font-size:15px;color:var(--mut)}
.chartlg i{display:inline-block;width:16px;height:3px;border-radius:2px;margin-right:5px;
  vertical-align:middle}
.chartlg b{font-size:15px;font-weight:600}
.gauge{display:flex;flex-direction:column;gap:7px}
.grow{display:flex;align-items:center;gap:9px;font-size:15px}
.grow .nm{width:116px;flex:none;color:var(--mut)}
.grow .tr{flex:1;height:8px;border-radius:4px;background:rgba(150,170,210,.13);overflow:hidden}
.grow .fl{display:block;height:100%;border-radius:4px}
.grow .vl{width:44px;text-align:right;color:#cfd8ea;font-variant-numeric:tabular-nums}

.fireinfo{margin-top:12px;font-size:15px;line-height:1.6;color:#aab6cd;min-height:0}
.fireinfo:not(:empty){border:1px solid rgba(255,120,70,.4);border-radius:11px;padding:11px 12px;
  background:rgba(255,90,54,.07)}
.fireinfo b{color:#ffd9c9}

.dragHint{position:fixed;right:22px;bottom:18px;z-index:15;font-size:15px;color:#5b6580;
  letter-spacing:.04em;pointer-events:none;max-width:min(720px,58vw);text-align:right;
  line-height:1.55}
.dragHint b{color:#8894ad;font-weight:600}

/* 3D 라벨 */
.lbl{position:absolute;transform:translate(-50%,-50%);font-size:15px;color:#cfd8ea;
  white-space:nowrap;text-shadow:0 1px 6px #000;pointer-events:none;letter-spacing:.02em}
.lbl.dim{color:#8894ad;font-size:15px}
.lbl.tag{background:rgba(6,10,18,.8);border:1px solid var(--line);border-radius:6px;
  padding:3px 7px}

/* 밴드 씬 스와이프 핸들 */
#swipe{position:fixed;top:0;bottom:0;width:2px;background:rgba(255,255,255,.5);z-index:16;
  cursor:ew-resize;display:none;box-shadow:0 0 16px rgba(255,255,255,.35)}
#swipe::after{content:"⇄";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:34px;height:34px;border-radius:50%;background:rgba(8,12,22,.92);border:1px solid rgba(255,255,255,.45);
  display:flex;align-items:center;justify-content:center;font-size:17px;color:#fff}

@media (max-width:820px){
  .panel{left:12px;right:12px;width:auto;top:auto;bottom:12px;max-height:52vh;padding:16px}
  /* 15px 하한 유지 상태에서 좁은 폭 넘침 방지 — 줄이지 말고 접는다 */
  .ctl label{flex-wrap:wrap;gap:4px 10px}
  .ctl.row{gap:10px 14px}
  .segs button{min-width:calc(50% - 4px)}
  .lrow .nm{width:112px}
  .grow .nm{width:104px}
  .bar .nm{width:66px}
  h1{font-size:22px}
  .topbar{padding:10px 12px;flex-direction:column;align-items:flex-start;gap:8px}
  nav button{font-size:15px;padding:6px 10px}
  .dragHint{display:none}
}