/* 지구 기상항로 — 화면 꾸밈.
   판은 어두운 유리(glass), 지구는 밝게. 항로 색: 기존 항로 = 은회색, 최적 항로 = 주황, 대안 = 청록. */
:root{
  --bg:#060b14;
  --ink:#eef3fa;
  --dim:#a3b1c4;
  --faint:#6d7b90;
  --line:rgba(255,255,255,.12);
  --line2:rgba(255,255,255,.07);
  --glass:rgba(10,16,27,.72);
  --glass2:rgba(14,21,34,.90);
  --accent:#4da3ff;
  --pre:#f7c948;
  --warn:#ff8a3d;
  --hot:#ff5a4e;
  --ok:#5fe0a1;
  --r:14px;
  --shadow:0 10px 36px rgba(0,0,0,.45), 0 1px 0 rgba(255,255,255,.06) inset;
  --base:#c7d0dc;
  --best:#ff8a3d;
  --alt:#35d0cf;
  --padt: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;letter-spacing:-.01em}
button,select,input{font:inherit;color:inherit}
button{-webkit-tap-highlight-color:transparent}
.muted{color:var(--dim)}
.faint{color:var(--faint)}
#space{position:fixed;inset:0;width:100%;height:100%;z-index:0;background:radial-gradient(120% 90% at 50% 40%,#0c1a33 0%,#070d1a 55%,#03060d 100%)}
#map{position:fixed;inset:0;z-index:1}
.maplibregl-canvas{outline:none}
.glass{background:var(--glass);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);
  border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
[hidden]{display:none!important}
.sheet-grip{display:none}

/* ── 위 ── */
.topbar{position:fixed;z-index:6;left:calc(14px + var(--padl));top:calc(14px + var(--padt));right:calc(14px + var(--padr));display:flex;gap:10px;align-items:stretch;pointer-events:none}
.topbar>*{pointer-events:auto}
.brand{display:flex;gap:11px;align-items:center;padding:8px 16px 8px 11px}
.brand-logo{width:30px;height:30px;filter:drop-shadow(0 2px 6px rgba(77,163,255,.45))}
.brand-title{font-weight:800;font-size:15.5px;letter-spacing:-.02em}
.brand-sub{color:var(--dim);font-size:11.5px;margin-top:1px}
.modes{display:flex;padding:4px;gap:2px;align-items:center}
.modes button{background:none;border:0;border-radius:10px;padding:8px 14px;cursor:pointer;color:var(--dim);white-space:nowrap;font-weight:500;transition:background .15s,color .15s}
.modes button:hover{background:var(--line2);color:var(--ink)}
.modes button[aria-pressed="true"]{background:rgba(255,255,255,.13);color:var(--ink);font-weight:700}
.basemap{margin-left:auto;padding:4px;display:flex;gap:2px;align-items:center}
.basemap button{border-radius:10px}

/* 조각 버튼 묶음 */
.seg{display:flex;flex-wrap:wrap;gap:3px}
.seg button{background:rgba(255,255,255,.05);border:1px solid var(--line2);border-radius:9px;padding:6px 11px;cursor:pointer;color:var(--dim);font-weight:500;transition:background .15s,color .15s,border-color .15s}
.seg button:hover{color:var(--ink);background:rgba(255,255,255,.1)}
.seg button[aria-pressed="true"]{background:rgba(77,163,255,.2);border-color:rgba(77,163,255,.55);color:#fff;font-weight:600}
.seg.small button{padding:5px 9px;font-size:12px}
.seg-toggle{background:rgba(255,255,255,.05);border:1px solid var(--line2);border-radius:9px;padding:6px 11px;cursor:pointer;color:var(--dim);font-weight:500}
.seg-toggle[aria-pressed="true"]{background:rgba(53,208,207,.16);border-color:rgba(53,208,207,.5);color:#dffcfb;font-weight:600}
.sep{width:1px;height:22px;background:var(--line);margin:0 4px}

/* ── 왼쪽 입력 ── */
.ctrl{position:fixed;z-index:4;left:calc(14px + var(--padl));top:calc(80px + var(--padt));width:312px;padding:14px 16px 16px;max-height:calc(100vh - 230px);overflow:auto;overscroll-behavior:contain}
.ctrl h3{margin:14px 0 7px;font-size:11.5px;color:var(--faint);font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.ctrl h3:first-child{margin-top:0}
.ctrl label{display:flex;flex-direction:column;gap:4px;font-size:11.5px;color:var(--dim)}
.ctrl input:not([type]),.ctrl select{background:rgba(255,255,255,.07);border:1px solid var(--line);border-radius:10px;padding:8px 10px;color:var(--ink);font-size:13px;width:100%;transition:border-color .15s,background .15s}
.ctrl input:focus,.ctrl select:focus{outline:none;border-color:rgba(77,163,255,.7);background:rgba(77,163,255,.08)}
.ctrl select option{background:#152030}
.ports{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;gap:7px;align-items:end}
.ports label:nth-of-type(2){grid-column:1}
.swap{grid-row:1/3;grid-column:2;background:rgba(255,255,255,.07);border:1px solid var(--line);border-radius:10px;width:32px;height:66px;cursor:pointer;color:var(--dim);display:grid;place-items:center}
.swap:hover{color:var(--ink);background:rgba(255,255,255,.12)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:7px;align-items:end}
.chk{flex-direction:row!important;align-items:center;gap:7px!important;color:var(--ink)!important;font-size:12.5px!important;padding-bottom:8px}
.chk input{accent-color:var(--accent)}
.examples{display:flex;flex-wrap:wrap;gap:5px;margin:9px 0 2px}
.examples button,.avoid label{background:rgba(255,255,255,.05);border:1px solid var(--line2);border-radius:99px;padding:4px 10px;font-size:11.5px;cursor:pointer;color:var(--dim);transition:background .15s,color .15s}
.examples button:hover{color:var(--ink);background:rgba(255,255,255,.11)}
.avoid{display:flex;flex-wrap:wrap;gap:5px}
.avoid label{flex-direction:row;gap:6px;align-items:center}
.avoid label:has(input:checked){border-color:rgba(255,90,78,.6);color:var(--ink);background:rgba(255,90,78,.14)}
.avoid input{margin:0;accent-color:var(--hot)}
.go{margin-top:14px;width:100%;padding:11px;border-radius:12px;border:0;background:linear-gradient(180deg,#ffa25c,#ff7a2a);color:#1a1006;font-weight:800;font-size:14px;cursor:pointer;position:relative;overflow:hidden;box-shadow:0 6px 18px rgba(255,138,61,.35);transition:transform .1s,box-shadow .15s}
.go:hover{box-shadow:0 8px 22px rgba(255,138,61,.5)}
.go:active{transform:translateY(1px)}
.go:disabled{cursor:wait;filter:saturate(.7)}
.go-label{position:relative;z-index:1}
.go-bar{position:absolute;left:0;top:0;bottom:0;width:0;background:rgba(255,255,255,.28);transition:width .2s}
.progress{margin-top:7px;font-size:11.5px;min-height:16px}

/* ── 오른쪽 결과 ── */
.result{position:fixed;z-index:5;right:calc(14px + var(--padr));top:calc(80px + var(--padt));bottom:calc(150px + var(--padb));width:416px;display:flex;flex-direction:column;animation:slidein .35s cubic-bezier(.2,.8,.2,1)}
@keyframes slidein{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
.result-head{display:flex;justify-content:space-between;align-items:center;padding:12px 12px 10px 16px;border-bottom:1px solid var(--line)}
.result-head b{font-size:15px;letter-spacing:-.02em}
.result-head .muted{font-size:11.5px;margin-top:2px}
.result-body{overflow:auto;padding:10px 16px 16px;overscroll-behavior:contain}
.x{background:none;border:0;color:var(--dim);cursor:pointer;font-size:15px;padding:4px 8px;border-radius:8px}
.x:hover{background:var(--line2);color:var(--ink)}
.gain{position:relative;border-radius:12px;padding:12px 14px;margin:2px 0 10px;background:linear-gradient(135deg,rgba(255,138,61,.2),rgba(255,138,61,.06));border:1px solid rgba(255,138,61,.4)}
.gain .k{font-size:11.5px;color:var(--dim)}
.gain .big{font-size:19px;font-weight:800;letter-spacing:-.02em;margin:2px 0}
.gain.same{background:linear-gradient(135deg,rgba(77,163,255,.18),rgba(77,163,255,.05));border-color:rgba(77,163,255,.4)}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:6px 0 10px}
.card{background:rgba(255,255,255,.05);border:1px solid var(--line2);border-radius:11px;padding:8px 9px;min-width:0}
.card .k{font-size:10.5px;color:var(--faint);white-space:nowrap}
.card .v{font-size:15px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.02em;margin-top:2px;white-space:nowrap}
.card .u{font-size:10.5px;color:var(--dim);font-weight:500}
.card .d{font-size:10.5px;margin-top:2px;font-variant-numeric:tabular-nums;white-space:nowrap}
.win{color:var(--ok)}.lose{color:#ff9b8f}
.cmp{width:100%;border-collapse:collapse;font-size:12.5px;margin:6px 0 10px}
.cmp th,.cmp td{padding:6px 6px;border-bottom:1px solid var(--line2);text-align:right;font-variant-numeric:tabular-nums}
.cmp th:first-child,.cmp td:first-child{text-align:left;color:var(--dim);font-weight:400}
.cmp thead th{color:var(--dim);font-weight:600;font-size:11.5px}
.cmp .rk{display:inline-block;width:14px;height:3px;border-radius:2px;vertical-align:middle;margin-right:5px}
.cmp tr:last-child td{border-bottom:0}
.sec{font-size:12.5px;font-weight:700;margin:12px 0 5px;display:flex;align-items:center;gap:6px}
.sec .muted{font-weight:400;font-size:11.5px}
.reasons{margin:2px 0 8px;padding-left:18px;color:#d3dce8;line-height:1.6}
.warn-box{background:rgba(255,90,78,.13);border:1px solid rgba(255,90,78,.45);border-radius:10px;padding:8px 11px;margin:6px 0;font-size:12px;line-height:1.5}
.info-line{font-size:11.5px;color:var(--dim);margin:3px 0;line-height:1.5}
.chart{margin:8px 0 12px}
.chart-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:3px;flex-wrap:wrap}
.chart-head b{font-size:12.5px}
.chart-legend{display:flex;gap:10px;font-size:11px;color:var(--dim);flex-wrap:wrap}
.chart-legend i{display:inline-block;width:12px;height:2px;vertical-align:middle;margin-right:4px;border-radius:1px}
.chart svg{width:100%;height:auto;display:block;overflow:visible;cursor:crosshair}
.tip{position:fixed;z-index:20;pointer-events:none;background:var(--glass2);border:1px solid var(--line);border-radius:9px;padding:6px 9px;font-size:11.5px;box-shadow:var(--shadow);font-variant-numeric:tabular-nums;max-width:260px;line-height:1.45}
.tip .k{color:var(--dim)}
.stats{font-size:11.5px;color:var(--dim);margin-top:6px;line-height:1.55}

/* ── 배 HUD ── */
.hud{position:fixed;z-index:5;left:calc(14px + var(--padl));bottom:calc(150px + var(--padb));display:flex;gap:8px;flex-wrap:wrap;max-width:calc(100vw - 460px);pointer-events:none}
.ship-card{pointer-events:auto;background:var(--glass);backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3);border:1px solid var(--line);border-radius:12px;padding:8px 11px 9px;min-width:212px;box-shadow:var(--shadow);border-left:3px solid var(--c);animation:pop .3s cubic-bezier(.2,.8,.2,1)}
@keyframes pop{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.ship-card .nm{display:flex;align-items:center;gap:6px;font-weight:700;font-size:12.5px;margin-bottom:4px}
.ship-card .nm i{width:8px;height:8px;border-radius:50%;background:var(--c);box-shadow:0 0 8px var(--c)}
.ship-card .nm .st{margin-left:auto;font-size:10.5px;font-weight:600;color:var(--dim)}
.ship-card .nm .st.arrived{color:var(--ok)}
.ship-card .nm .st.danger{color:var(--hot);animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:.35}}
.ship-card .g{display:grid;grid-template-columns:auto 1fr auto 1fr;gap:1px 8px;font-size:11.5px;font-variant-numeric:tabular-nums}
.ship-card .g span:nth-child(odd){color:var(--faint);font-size:10.5px}
.ship-card .g b{font-weight:600}
.ship-card .bar{height:3px;border-radius:2px;background:rgba(255,255,255,.1);margin-top:6px;overflow:hidden}
.ship-card .bar i{display:block;height:100%;background:var(--c);width:0;transition:width .1s linear}

.banner{position:fixed;z-index:9;left:50%;top:calc(84px + var(--padt));transform:translateX(-50%);background:linear-gradient(135deg,rgba(255,138,61,.95),rgba(255,110,40,.92));color:#1a1006;font-weight:800;font-size:15px;padding:11px 20px;border-radius:14px;box-shadow:0 10px 30px rgba(255,138,61,.45);animation:pop .4s cubic-bezier(.2,.8,.2,1);white-space:nowrap;max-width:calc(100vw - 40px);text-overflow:ellipsis;overflow:hidden}
.banner.grey{background:linear-gradient(135deg,rgba(199,208,220,.96),rgba(160,170,185,.94));box-shadow:0 10px 30px rgba(0,0,0,.35)}

/* ── 아래 ── */
.timeline{position:fixed;z-index:5;left:calc(14px + var(--padl));right:calc(14px + var(--padr));bottom:calc(14px + var(--padb));padding:10px 16px 8px}
body.has-result .timeline{right:calc(444px + var(--padr))}
.tl-row{display:flex;align-items:center;gap:8px;margin-bottom:6px;flex-wrap:wrap}
.play{width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,138,61,.5);background:rgba(255,138,61,.18);cursor:pointer;color:#ffd7b8;display:grid;place-items:center;transition:background .15s}
.play:hover{background:rgba(255,138,61,.35)}
.tl-date{margin-left:auto;font-size:15px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.01em;display:flex;flex-direction:column;align-items:flex-end;line-height:1.15}
.tl-date small{font-size:10.5px;color:var(--dim);font-weight:500}
.tl-track{position:relative;padding:4px 0 2px}
.tl-marks{position:absolute;left:8px;right:8px;top:0;height:4px;pointer-events:none}
.tl-marks i{position:absolute;top:0;width:2px;height:4px;border-radius:1px;transform:translateX(-1px)}
.tl-marks i.hz{background:rgba(255,255,255,.35)}
.tl-marks i.eta{width:3px;height:6px;top:-1px}
.tl-marks i.evt{background:var(--hot);box-shadow:0 0 6px var(--hot)}
#step{width:100%;margin:6px 0 0;accent-color:var(--best);cursor:pointer;height:18px}
.tl-foot{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-top:2px}
.legend{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--dim)}
.legend .bar{position:relative;width:220px;height:9px;border-radius:3px;box-shadow:0 0 0 1px rgba(255,255,255,.12) inset}
.legend .bar b{position:absolute;top:11px;transform:translateX(-50%);font-weight:500;font-size:10px;color:var(--dim)}
.legend .bar{margin-bottom:12px}
.src{font-size:10.5px;text-align:right;line-height:1.35}

/* 지도 위 */
.maplibregl-popup-content{background:var(--glass2);color:var(--ink);border:1px solid var(--line);border-radius:11px;padding:9px 12px;font-size:12px;box-shadow:var(--shadow);line-height:1.5}
.maplibregl-popup-tip{display:none}
.maplibregl-popup-close-button{color:var(--dim);font-size:16px;padding:2px 6px}
.maplibregl-ctrl-group{background:var(--glass)!important;border:1px solid var(--line);border-radius:10px!important;box-shadow:var(--shadow)!important;backdrop-filter:blur(14px)}
.maplibregl-ctrl-group button{filter:invert(.9)}
.maplibregl-ctrl-group button+button{border-top:1px solid rgba(0,0,0,.4)!important}
.maplibregl-ctrl-bottom-right{bottom:calc(150px + var(--padb))!important;right:calc(14px + var(--padr))!important}
body.has-result .maplibregl-ctrl-bottom-right{right:calc(444px + var(--padr))!important}
.maplibregl-ctrl-attrib{background:rgba(6,11,20,.55)!important;color:var(--dim)!important;font-size:10px!important;border-radius:6px!important;backdrop-filter:blur(6px)}
.maplibregl-ctrl-attrib a{color:var(--dim)!important}
.maplibregl-ctrl-bottom-left{bottom:calc(150px + var(--padb))!important;left:calc(14px + var(--padl))!important}
.maplibregl-ctrl-attrib.maplibregl-compact{margin:0!important}

/* 해설 */
.about{position:fixed;inset:0;z-index:8;background:rgba(3,6,12,.6);overflow:auto;padding:84px 16px 40px;backdrop-filter:blur(3px)}
.about-in{max-width:880px;margin:0 auto;padding:24px 28px 30px;line-height:1.7;font-size:14px;background:var(--glass2)}
.about h2{font-size:22px;margin:0 0 6px;letter-spacing:-.02em}
.about h3{font-size:15px;margin:22px 0 6px}
.about p,.about li{color:#d3dce8}
.about table{border-collapse:collapse;width:100%;font-size:13px}
.about td,.about th{border-bottom:1px solid var(--line);padding:6px 8px;text-align:left;vertical-align:top}
.about .src{font-size:12px;color:var(--faint);text-align:left}
.about .close{float:right}
.loading{position:fixed;inset:0;z-index:30;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:radial-gradient(120% 90% at 50% 40%,#0c1a33 0%,#070d1a 55%,#03060d 100%);color:var(--dim);transition:opacity .5s}
.loading.out{opacity:0;pointer-events:none}
.spin{width:34px;height:34px;border:3px solid rgba(255,255,255,.12);border-top-color:var(--best);border-radius:50%;animation:sp .9s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.keys{position:fixed;z-index:9;right:calc(14px + var(--padr));bottom:calc(150px + var(--padb));padding:12px 14px;font-size:12px;line-height:1.8;background:var(--glass2)}
.keys b{display:block;margin-bottom:2px}
kbd{display:inline-block;border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;padding:0 5px;font-size:11px;font-family:inherit;background:rgba(255,255,255,.06);margin-right:3px;color:var(--ink)}
.via-mk{background:rgba(12,18,28,.85);color:#fff;border:1px solid rgba(255,138,61,.7);border-radius:6px;padding:2px 6px;font-size:11px;white-space:nowrap;pointer-events:none}

/* 북극 */
.arc-cards{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:8px 0}
.arc-card{background:rgba(255,255,255,.05);border:1px solid var(--line2);border-radius:11px;padding:9px 10px}
.arc-card .k{font-size:10.5px;color:var(--faint)}
.arc-card .v{font-size:15px;font-weight:700;margin-top:2px}
.arc-ai{border:1px dashed rgba(255,255,255,.2);border-radius:11px;padding:10px 12px;margin-top:8px;font-size:12px;color:var(--dim);line-height:1.55}

/* ── 손전화 ── 판은 아래 시트 */
@media (max-width:900px){
  html,body{font-size:13.5px}
  .topbar{gap:6px;left:10px;right:10px;top:calc(10px + var(--padt))}
  .brand{padding:6px 10px 6px 8px}
  .brand-sub{display:none}
  .basemap{display:none}
  .modes button{padding:7px 10px}
  .sheet-grip{display:block;width:38px;height:4px;border-radius:2px;background:rgba(255,255,255,.25);margin:0 auto 10px}
  .ctrl{top:auto;bottom:calc(126px + var(--padb));left:10px;right:10px;width:auto;max-height:46vh;border-radius:18px 18px 14px 14px}
  body.has-result .ctrl{display:none}
  .result{left:10px;right:10px;width:auto;top:auto;bottom:calc(126px + var(--padb));max-height:30vh;border-radius:18px 18px 14px 14px;animation:pop .35s;transition:max-height .3s}
  .result.expanded{max-height:78vh}
  .sheet-grip{cursor:pointer;padding:6px 0;margin:-6px auto 4px;background-clip:content-box}
  body.has-result .timeline{right:10px}
  .timeline{left:10px;right:10px;bottom:calc(10px + var(--padb));padding:8px 12px 6px}
  .tl-row{gap:5px}
  #cam,.sep{display:none}
  .tl-date{font-size:13px}
  .legend .bar{width:120px}
  .src{display:none}
  .hud{left:10px;right:10px;bottom:calc(126px + var(--padb));max-width:none;flex-wrap:nowrap;overflow-x:auto;padding-bottom:2px}
  body.has-result .hud{bottom:calc(126px + 30vh + 6px + var(--padb))}
  body.has-result .result.expanded~.hud{display:none}
  .ship-card{min-width:190px;flex:0 0 auto}
  .cards{grid-template-columns:repeat(2,1fr)}
  .maplibregl-ctrl-bottom-right,.maplibregl-ctrl-bottom-left{display:none}
  .keys{display:none!important}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}