/* GOW SKY — 전체화면 플라네타륨 */
:root {
  --panel: rgba(12, 18, 32, .92); --edge: #1c2941; --text: #dce6f5; --muted: #7f95bd;
  --accent: #6db3ff; --accent2: #b9d2ff;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #04070f; color: var(--text); font-family: 'Pretendard', -apple-system, 'Malgun Gothic', sans-serif; }
canvas#sky { position: fixed; inset: 0; display: block; }

.topbar { position: fixed; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 20px; background: linear-gradient(rgba(4,7,15,.85), rgba(4,7,15,0)); z-index: 20; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand img { height: 28px; }
.brand-sky { font-weight: 800; letter-spacing: 4px; color: var(--accent2); font-size: 14px; }
.clockbox { display: flex; align-items: center; gap: 10px; background: var(--panel); border: 1px solid var(--edge); border-radius: 20px; padding: 6px 14px; font-variant-numeric: tabular-nums; font-size: 14px; }
.mini { border: 1px solid var(--edge); background: transparent; color: var(--accent); border-radius: 12px; padding: 2px 10px; font-size: 12px; cursor: pointer; }
.mini:hover { border-color: var(--accent); }
.nav-links { display: flex; gap: 14px; font-size: 13px; }
.nav-links a { color: var(--muted); text-decoration: none; }
.nav-links a:hover { color: var(--text); }

.panel { position: fixed; top: 60px; left: 14px; width: 250px; z-index: 20; }
.panel-inner { background: var(--panel); border: 1px solid var(--edge); border-radius: 14px; padding: 16px; backdrop-filter: blur(8px); max-height: calc(100vh - 90px); overflow-y: auto; }
.panel.collapsed .panel-inner { display: none; }
.panel-toggle { position: absolute; top: -2px; right: -40px; width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--edge); background: var(--panel); color: var(--text); cursor: pointer; }
.panel h3 { margin: 0 0 8px; font-size: 16px; }
.panel h4 { margin: 0 0 8px; font-size: 13px; color: var(--accent2); }
.hint { color: var(--muted); font-size: 12px; line-height: 1.5; margin: 0 0 6px; }
.grp { border-top: 1px solid rgba(127,149,189,.18); padding: 12px 0; }
.grp label { display: block; font-size: 13px; padding: 3px 0; cursor: pointer; }
.row { display: flex; gap: 8px; margin-bottom: 8px; }
.row input[type=number] { width: 50%; background: rgba(255,255,255,.04); border: 1px solid var(--edge); border-radius: 8px; color: var(--text); padding: 7px 9px; font-size: 13px; }
.btn { width: 100%; border: 1px solid var(--edge); background: rgba(255,255,255,.03); color: var(--text); border-radius: 8px; padding: 7px 0; font-size: 13px; cursor: pointer; }
.btn:hover { border-color: var(--accent); }
.time-row .btn { width: 55%; }
.time-row select { width: 45%; background: rgba(255,255,255,.04); border: 1px solid var(--edge); border-radius: 8px; color: var(--text); font-size: 12px; }
input[type=range] { width: 100%; accent-color: var(--accent); }
.footer-note { font-size: 11px; color: var(--muted); line-height: 1.6; }
.footer-note a { color: var(--accent); text-decoration: none; }
#infoBox h4 { color: var(--text); font-size: 14px; }

@media (max-width: 720px) {
  .nav-links { display: none; }
  .panel { width: 220px; }
}