:root {
  --bg: #04070d; --glass: rgba(10, 18, 30, 0.58); --glass2: rgba(14, 24, 40, 0.78); --line: rgba(160, 200, 230, 0.16);
  --tx: #e8f1f8; --tx2: #9fb4c6; --tx3: #6f8597; --acc: #8fd6e8; --warm: #ffd28a;
  --mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--tx); overflow: hidden;
  font-family: 'Pretendard Variable', Pretendard, -apple-system, 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif; -webkit-font-smoothing: antialiased; }
canvas#gl { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
canvas#gl:active { cursor: grabbing; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
button { font: inherit; color: inherit; }
#fade { position: fixed; inset: 0; background: #000; opacity: 0; pointer-events: none; transition: opacity .6s ease; z-index: 30; }
#fade.on { opacity: 1; }
#err { position: fixed; top: 0; left: 0; right: 0; z-index: 99; background: #5a1010; color: #fff; font: 12px var(--mono); padding: 6px 10px; white-space: pre-wrap; }

.panel { position: fixed; 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: 14px; box-shadow: 0 10px 40px rgba(0,0,0,.35); z-index: 10; }
.ph { font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--tx2); margin-bottom: 10px; }
.ph span { color: var(--tx3); font-weight: 400; margin-left: 4px; }
.hint { font-size: 11.5px; color: var(--tx3); margin-top: 10px; line-height: 1.5; }

/* 모드별 표시 */
.s-only, .c-only { display: none !important; }
body.mode-sea .s-only, body.mode-compare .s-only { display: revert !important; }
body.mode-compare .c-only { display: flex !important; }
body.mode-compare #readout, body.mode-compare #hud, body.mode-compare #compass { display: none !important; }
body:not(.mode-globe) .g-only, body:not(.mode-globe) #brand, body:not(.mode-globe) #labels { display: none !important; }
body.mode-sea::before { content: ''; position: fixed; left: 0; right: 0; top: 0; height: 190px; background: linear-gradient(180deg, rgba(0,6,14,.42), rgba(0,6,14,0)); z-index: 2; pointer-events: none; }

#brand { position: fixed; top: 22px; left: 26px; z-index: 10; pointer-events: none; text-shadow: 0 2px 18px rgba(0,0,0,.6); }
#brand .kicker { font-size: 11.5px; color: var(--acc); letter-spacing: .04em; opacity: .9; }
#brand h1 { margin: 4px 0 2px; font-size: 38px; font-weight: 700; letter-spacing: -.02em; }
#brand .sub { font-size: 14px; color: var(--tx2); }
#brand .sub span { display: block; font-size: 12px; color: var(--tx3); margin-top: 2px; font-style: italic; }

#presets { left: 22px; top: 150px; width: 268px; padding: 14px 12px 12px; max-height: calc(100vh - 260px); overflow-y: auto; }
#presetList { display: flex; flex-direction: column; gap: 3px; }
.pr { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "nm v" "sb sb"; align-items: baseline; column-gap: 8px; padding: 7px 9px; border-radius: 9px; cursor: pointer; border: 1px solid transparent; background: none; text-align: left; width: 100%; }
.pr:hover { background: rgba(143, 214, 232, .08); border-color: var(--line); }
.pr .nm { font-size: 13.5px; font-weight: 500; }
.pr .nm { grid-area: nm; } .pr .v { grid-area: v; }
.pr em { grid-area: sb; display: block; font-style: normal; font-size: 11px; color: var(--tx3); font-weight: 400; margin-top: 1px; line-height: 1.35; }
.pr .v { font-family: var(--mono); font-size: 11.5px; color: var(--tx2); text-align: right; white-space: nowrap; }
.pr .v b { color: var(--tx); font-weight: 500; }
.pr .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; }

#legend { right: 22px; top: 22px; width: 280px; padding: 13px 15px 12px; }
#cbar { width: 100%; height: 12px; border-radius: 4px; display: block; }
#legend .ticks { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--tx3); margin: 3px 0 9px; }
.lg-row { font-size: 11.5px; color: var(--tx2); display: flex; align-items: center; gap: 8px; margin-top: 5px; line-height: 1.35; }
.sw { width: 18px; height: 10px; border-radius: 3px; flex: none; }
.sw.ice { background: #dcecff; }
.sw.crest { background: repeating-linear-gradient(90deg, transparent 0 4px, rgba(150,230,210,.9) 4px 6px); }
.sw.night { background: linear-gradient(90deg, #26425a, #05080e); }

#labels { position: fixed; inset: 0; pointer-events: none; z-index: 5; }
.lbl { position: absolute; transform: translate(-50%, -50%); pointer-events: auto; cursor: pointer; display: flex; align-items: center; gap: 6px; white-space: nowrap;
  font-size: 11.5px; color: #eaf6ff; text-shadow: 0 1px 4px rgba(0,0,0,.9), 0 0 10px rgba(0,0,0,.6); transition: opacity .2s; }
.lbl i { width: 8px; height: 8px; border-radius: 50%; background: var(--warm); box-shadow: 0 0 0 3px rgba(255,210,138,.25), 0 0 12px rgba(255,210,138,.8); flex: none; }
.lbl span { transform: translateX(0); }
.lbl.hide { opacity: 0; pointer-events: none; }

#pick { left: 50%; bottom: 112px; transform: translateX(-50%); width: min(420px, calc(100vw - 32px)); padding: 15px 16px 14px; }
#pick .x, .modal .x { position: absolute; right: 8px; top: 6px; width: 30px; height: 30px; border: none; background: none; color: var(--tx2); font-size: 22px; cursor: pointer; border-radius: 8px; }
#pick .x:hover { background: rgba(255,255,255,.06); }
.pk-name { font-size: 17px; font-weight: 600; }
.pk-ll { font-size: 12px; color: var(--tx3); margin-top: 2px; }
.pk-vals { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 12px 0 13px; }
.pk-vals div { font-size: 11px; color: var(--tx3); }
.pk-vals b { display: block; font-family: var(--mono); font-size: 16px; color: var(--tx); font-weight: 500; margin-top: 2px; }
.pk-vals b small { font-size: 11px; color: var(--tx2); margin-left: 2px; }
.pk-msg { font-size: 13px; color: var(--tx2); margin: 10px 0 4px; }
.go { width: 100%; padding: 11px; border-radius: 10px; border: 1px solid rgba(143,214,232,.5); background: linear-gradient(180deg, rgba(60,140,170,.45), rgba(30,80,110,.45)); font-size: 15px; font-weight: 600; cursor: pointer; letter-spacing: .01em; }
.go:hover { background: linear-gradient(180deg, rgba(80,170,200,.55), rgba(40,100,130,.55)); }
.go span { margin-left: 4px; }

/* 해면 HUD */
#hud { position: fixed; left: 24px; top: 20px; z-index: 10; pointer-events: none; text-shadow: 0 1px 3px rgba(0,0,0,.7), 0 0 20px rgba(0,0,0,.35); }
.hud-place { font-size: 26px; font-weight: 650; letter-spacing: -.01em; }
.hud-ll { font-size: 12.5px; color: rgba(232,241,248,.82); margin-top: 3px; }
.hud-time { font-size: 14px; margin-top: 10px; color: rgba(232,241,248,.95); }
.hud-time b { font-family: var(--mono); font-weight: 500; font-size: 15px; }
.hud-astro { font-size: 12px; color: rgba(232,241,248,.75); margin-top: 4px; }

#readout { right: 20px; top: 20px; width: 262px; padding: 12px 14px 10px; background: rgba(6, 12, 22, .62); }
.ro-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
.ro { min-width: 0; }
.ro .k { font-size: 11px; color: var(--tx2); }
.ro .k em { font-style: normal; color: var(--tx3); margin-left: 3px; font-size: 10px; }
.ro .val { font-family: var(--mono); font-size: 19px; font-weight: 500; margin-top: 1px; white-space: nowrap; }
.ro .val small { font-size: 11px; color: var(--tx2); margin-left: 2px; }
.ro .sub2 { font-size: 10.5px; color: var(--tx3); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ro .arr { display: inline-block; width: 13px; height: 13px; margin-left: 5px; vertical-align: -1px; }
.ro-foot { font-size: 10.5px; color: var(--tx3); margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line); line-height: 1.5; }

#compass { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); width: min(560px, 46vw); height: 40px; z-index: 9; pointer-events: none; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); }
#cmpStrip { position: absolute; left: 0; top: 0; height: 100%; width: 100%; }
.ct { position: absolute; top: 4px; transform: translateX(-50%); font-size: 10.5px; color: rgba(232,241,248,.6); font-family: var(--mono); text-shadow: 0 1px 3px rgba(0,0,0,.8); }
.ct.c { font-size: 13px; color: #fff; font-weight: 600; font-family: inherit; }
.ct.tick { width: 1px; height: 6px; background: rgba(255,255,255,.5); top: 22px; }
.ct.mk { top: 20px; font-size: 10.5px; font-family: inherit; padding: 1px 5px; border-radius: 6px; background: rgba(0,0,0,.35); color: #fff; }
.ct.mk.wave { color: #8fe3d8; } .ct.mk.wind { color: #c9d6ff; } .ct.mk.sun { color: #ffd28a; } .ct.mk.moon { color: #e6e9f2; }
.cmp-needle { position: absolute; left: 50%; top: 0; width: 2px; height: 9px; background: var(--warm); transform: translateX(-50%); border-radius: 1px; }
.cmp-deg { position: absolute; left: 50%; bottom: -1px; transform: translateX(-50%); font-size: 10px; color: var(--warm); display: none; }

#seabar { position: fixed; left: 20px; bottom: 96px; z-index: 10; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.pill { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--glass2); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-size: 13px; cursor: pointer; white-space: nowrap; }
.pill:hover { border-color: rgba(143,214,232,.5); }
.pill.sm { padding: 6px 11px; font-size: 12px; }
.pill.on { background: rgba(60,140,170,.45); border-color: rgba(143,214,232,.6); }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; background: var(--glass2); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding: 2px; }
.seg button { border: none; background: none; padding: 6px 11px; border-radius: 999px; font-size: 12px; color: var(--tx2); cursor: pointer; white-space: nowrap; }
.seg button.on { background: rgba(143,214,232,.2); color: var(--tx); }

#cmpLabels { position: fixed; top: 14px; left: 0; right: 0; z-index: 10; justify-content: space-around; pointer-events: none; }
.cl { pointer-events: auto; text-align: center; text-shadow: 0 1px 3px rgba(0,0,0,.8); width: 50%; display: flex; flex-direction: column; align-items: center; }
.cl select { font: inherit; font-size: 17px; font-weight: 650; color: #fff; background: rgba(8,14,24,.45); border: 1px solid var(--line); border-radius: 10px; padding: 5px 10px; backdrop-filter: blur(8px); max-width: 92%; }
.cl select option { background: #0c1522; color: #fff; }
.cl-v { font-size: 12.5px; color: rgba(232,241,248,.92); margin-top: 6px; line-height: 1.55; white-space: pre-line; }
body.mode-compare #gl { cursor: grab; }
body.mode-compare::after { content: ''; position: fixed; top: 0; bottom: 80px; left: 50%; width: 1px; background: rgba(255,255,255,.35); z-index: 8; pointer-events: none; }

/* 시간 막대 */
#timebar { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); width: min(980px, calc(100vw - 32px)); z-index: 11; display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; background: var(--glass2); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--line); border-radius: 16px; }
.round { width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(143,214,232,.45); background: rgba(60,140,170,.25); cursor: pointer; font-size: 13px; flex: none; }
.tb-main { flex: 1; min-width: 0; }
.tb-label { display: flex; justify-content: space-between; align-items: baseline; font-size: 12.5px; margin-bottom: 3px; gap: 8px; }
#tbTime { font-size: 13px; }
#tbRel { color: var(--acc); font-size: 12px; white-space: nowrap; }
.tb-track { position: relative; height: 26px; }
#tRange { position: absolute; left: 0; right: 0; top: 2px; width: 100%; margin: 0; -webkit-appearance: none; appearance: none; background: transparent; height: 22px; z-index: 2; }
#tRange::-webkit-slider-runnable-track { height: 4px; background: linear-gradient(90deg, rgba(143,214,232,.6), rgba(143,214,232,.2)); border-radius: 2px; }
#tRange::-moz-range-track { height: 4px; background: rgba(143,214,232,.35); border-radius: 2px; }
#tRange::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: #fff; margin-top: -6px; box-shadow: 0 0 0 4px rgba(143,214,232,.3); cursor: pointer; }
#tRange::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: #fff; border: none; box-shadow: 0 0 0 4px rgba(143,214,232,.3); }
#tbTicks { position: absolute; left: 8px; right: 8px; top: 15px; height: 12px; }
#tbTicks span { position: absolute; transform: translateX(-50%); font-size: 10px; color: var(--tx3); white-space: nowrap; top: 3px; }
#tbTicks i { position: absolute; width: 1px; height: 5px; background: rgba(255,255,255,.25); top: -3px; }
#tbTicks .nowmk { position: absolute; width: 2px; height: 10px; background: var(--warm); top: -6px; border-radius: 1px; }

.modal { position: fixed; inset: 0; z-index: 40; background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; padding: 16px; }
.modal[hidden] { display: none; }
.mbox { position: relative; background: #0b1420; border: 1px solid var(--line); border-radius: 16px; max-width: 760px; width: 100%; max-height: calc(100vh - 32px); overflow-y: auto; padding: 22px 26px 20px; line-height: 1.65; font-size: 13.5px; color: #d6e2ec; }
.mbox h2 { margin: 0 0 6px; font-size: 21px; color: #fff; }
.mbox h3 { margin: 18px 0 6px; font-size: 14px; color: var(--acc); }
.mbox ul { margin: 0; padding-left: 18px; }
.mbox li { margin: 3px 0; }
.tbl { border-collapse: collapse; width: 100%; font-size: 12.8px; }
.tbl th { text-align: left; vertical-align: top; white-space: nowrap; color: #fff; font-weight: 600; padding: 7px 12px 7px 0; border-top: 1px solid var(--line); width: 120px; }
.tbl td { padding: 7px 0; border-top: 1px solid var(--line); }
.credit { margin-top: 18px; font-size: 12px; color: var(--tx3); border-top: 1px solid var(--line); padding-top: 10px; }

#loading { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 31; font-size: 14px; color: var(--tx2); pointer-events: none; opacity: 0; transition: opacity .3s; }
#loading.on { opacity: 1; }

@media (max-width: 760px) {
  #brand { top: 12px; left: 14px; }
  #brand h1 { font-size: 26px; }
  #brand .kicker { font-size: 10px; }
  #brand .sub { font-size: 12px; }
  #brand .sub span { display: none; }
  #legend { display: none !important; }
  #presets { left: 0; right: 0; top: auto; bottom: 92px; width: auto; max-height: none; overflow: visible; padding: 0 10px; background: none; border: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
  #presets .ph, #presets .hint { display: none; }
  #presetList { flex-direction: row; overflow-x: auto; gap: 6px; padding-bottom: 4px; scrollbar-width: none; }
  #presetList::-webkit-scrollbar { display: none; }
  .pr { flex: none; width: auto; background: var(--glass2); border: 1px solid var(--line); grid-template-columns: auto; padding: 6px 10px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
  .pr .nm { font-size: 12.5px; } .pr em { display: none; } .pr .v { text-align: left; font-size: 10.5px; }
  #pick { bottom: 160px; }
  .pk-vals { grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .pk-vals b { font-size: 14px; }
  #hud { left: 14px; top: 12px; }
  .hud-place { font-size: 19px; }
  .hud-time { margin-top: 5px; font-size: 12.5px; } .hud-astro { font-size: 11px; }
  #readout { left: 10px; right: 10px; top: auto; bottom: 140px; width: auto; padding: 9px 11px 8px; }
  .ro-grid { grid-template-columns: repeat(4, 1fr); gap: 6px 8px; }
  .ro .val { font-size: 14px; } .ro .k { font-size: 10px; } .ro .k em { display: none; } .ro .sub2 { display: none; }
  .ro-foot { display: none; }
  #compass { top: auto; bottom: 252px; width: 80vw; }
  #seabar { left: 10px; right: 10px; bottom: 92px; gap: 5px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  #seabar::-webkit-scrollbar { display: none; }
  #seabar .pill { padding: 6px 10px; font-size: 12px; } .seg button { padding: 5px 8px; font-size: 11.5px; }
  #segCloud { display: none; }
  #timebar { bottom: 10px; padding: 8px 10px; gap: 7px; width: calc(100vw - 20px); }
  #btnAbout { padding: 0; width: 32px; height: 32px; border-radius: 50%; font-weight: 700; font-family: Georgia, serif; font-style: italic; flex: none; }
  #btnAbout .full { display: none; } #btnAbout .short { display: inline; }
  #tbRel { display: none; }
  #tbTicks span:nth-of-type(2n) { display: none; }
  .round { width: 32px; height: 32px; }
  #cmpLabels { top: 8px; flex-direction: column; height: calc(100vh - 100px); justify-content: space-between; }
  .cl { width: 100%; }
  .cl select { font-size: 14px; }
  .cl-v { font-size: 11px; white-space: normal; padding: 0 10px; }
  body.mode-compare::after { left: 0; right: 0; width: auto; top: calc((100vh - 0px) / 2); bottom: auto; height: 1px; }
}

#btnAbout .short { display: none; }
@media (max-width: 760px) { #btnAbout .short { display: inline; } }
.pgh { font-size: 11.5px; font-weight: 600; color: var(--acc); margin: 10px 4px 3px; letter-spacing: .02em; }
.pgh:first-child { margin-top: 0; }
.pgh span { color: var(--tx3); font-weight: 400; margin-left: 4px; font-size: 10.5px; }
.pr[hidden] { display: none; }
.lbl.dyn i { background: #8fe3d8; box-shadow: 0 0 0 3px rgba(143,227,216,.25), 0 0 12px rgba(143,227,216,.8); }
.lbl.cyc i { background: #ff7a6b; box-shadow: 0 0 0 3px rgba(255,122,107,.25), 0 0 14px rgba(255,122,107,.9); }
@media (max-width: 760px) { .pgh { display: none; } }
.pr .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
#presets { width: 300px; }
@media (max-width: 760px) {
  #seabar { flex-wrap: nowrap !important; }
  #seabar > * { flex: none; }
  #readout { bottom: 142px; }
}
body.mode-sea #seabar, body.mode-compare #seabar { display: flex !important; }

.ro-obs { margin-top: 10px; padding: 8px 10px; border-radius: 9px; background: rgba(143,214,232,.08); border: 1px solid rgba(143,214,232,.18); font-size: 11.5px; color: var(--tx2); line-height: 1.5; }
.ro-obs b { font-family: var(--mono); color: var(--tx); font-weight: 500; font-size: 13px; }
.ro-obs .ok { color: #8fe3d8; } .ro-obs .bad { color: #ffb38a; }
@media (max-width: 760px) { .ro-obs { grid-column: 1 / -1; margin-top: 6px; padding: 5px 8px; font-size: 10.5px; } }

@media (max-width: 760px) { #compass { top: 128px !important; bottom: auto !important; } }

.lg-row.tgl { cursor: pointer; margin-top: 8px; } .lg-row.tgl input { accent-color: #8fd6e8; margin: 0 4px 0 2px; }

.mini { pointer-events: auto; margin-left: 8px; padding: 2px 9px; border-radius: 999px; border: 1px solid rgba(255,210,138,.55); background: rgba(40,30,10,.45); color: #ffd28a; font-size: 11.5px; cursor: pointer; }
#hud { pointer-events: none; } #hud .mini { pointer-events: auto; }

.hud-ship { font-size: 12px; color: rgba(232,241,248,.82); margin-top: 4px; } .hud-ship b { font-family: var(--mono); font-weight: 500; }
@media (max-width: 760px) { .hud-ship { font-size: 10.5px; } }

#loading { padding: 10px 18px; border-radius: 999px; background: rgba(6,12,22,.7); border: 1px solid var(--line); backdrop-filter: blur(8px); }
#loading::before { content: ''; display: inline-block; width: 10px; height: 10px; margin-right: 10px; border-radius: 50%; border: 2px solid var(--acc); border-right-color: transparent; animation: spin .8s linear infinite; vertical-align: -1px; }
@keyframes spin { to { transform: rotate(360deg); } }
#toast { position: fixed; left: 50%; bottom: 110px; transform: translateX(-50%); z-index: 45; padding: 8px 16px; border-radius: 999px; background: rgba(6,12,22,.85); border: 1px solid var(--line); font-size: 13px; opacity: 0; transition: opacity .3s; pointer-events: none; }
#toast.on { opacity: 1; }
button:focus-visible, select:focus-visible, input:focus-visible { outline: 2px solid var(--warm); outline-offset: 2px; }

@media (max-width: 760px) {
  body.mode-compare #cmpLabels { height: auto; display: block !important; position: fixed; inset: 0; pointer-events: none; }
  body.mode-compare #clA { position: absolute; top: 8px; left: 0; right: 0; }
  body.mode-compare #clB { position: absolute; top: calc(50% + 6px); left: 0; right: 0; }
  body.mode-compare #seabar .seg { display: none; }
}