:root{--mp-accent:#0b6e99;--mp-stage:#070b16;--mp-stage-fg:#e0e6ed;--sk-accent:#0b6e99;--sk-accent-fg:#fff;--sk-ring:#0b6e994d}body{background-color:var(--bg-sec,#f4f4f5);color:var(--fg,#11181c);justify-content:center;align-items:center;min-height:100vh;margin:0;padding:0;font-family:Pretendard,-apple-system,system-ui,sans-serif;display:flex;overflow-x:hidden}.dashboard{box-sizing:border-box;width:100%;max-width:1240px;padding:var(--sk-stage-top,60px) 20px 24px;grid-template-columns:minmax(0,440px) minmax(0,1fr);gap:24px;display:grid}.visual-section,.info-section{flex-direction:column;gap:24px;min-width:0;display:flex}.card{background-color:var(--bg,#fff);border:1px solid var(--border,#e4e4e7);border-radius:20px;box-shadow:0 4px 18px #0000000f}.main-display{flex-direction:column;align-items:center;gap:18px;padding:24px;display:flex}.moon-stage{box-sizing:border-box;background-color:var(--mp-stage);border-radius:16px;width:100%;padding:16px;transition:background-color .8s}#moonCanvas,#orbitCanvas,#skySimCanvas{width:100%;height:auto;margin:0 auto;display:block}#moonCanvas{aspect-ratio:1;max-width:340px}#orbitCanvas{aspect-ratio:550/220;max-width:550px}#skySimCanvas{aspect-ratio:320/130;max-width:320px}.orbit-display{background:var(--mp-stage);border-color:#ffffff14;flex-direction:column;align-items:center;padding:20px;display:flex}.orbit-label{color:#b8c2d0;text-align:center;word-break:keep-all;margin-top:12px;font-size:.9rem;font-weight:600}.info-card{height:fit-content;padding:24px}.app-title{text-align:center;justify-content:center;margin:0 0 14px;font-size:22px}.moon-status-header{text-align:center;margin-bottom:10px}.status-caption{color:var(--fg-muted,#71717a);margin-bottom:4px;font-size:.9rem}.phase-title{color:var(--mp-accent);margin:0 0 6px;font-size:2.2rem;font-weight:800}.moon-age-text{color:var(--fg-muted,#71717a);margin-bottom:12px;font-size:1.1rem}.guide-section{border-top:1px solid var(--border,#e4e4e7);margin-top:14px;padding-top:14px}.obs-direction-box{min-height:100px}.obs-points-box{min-height:130px}.guide-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;margin-bottom:10px;display:flex}.guide-title{color:var(--fg,#11181c);align-items:center;gap:8px;margin:0;font-size:1rem;font-weight:700;display:flex}.guide-title .ic{color:var(--mp-accent)}.guide-content{color:var(--fg,#11181c);word-break:keep-all;font-size:.95rem;line-height:1.5}.sky-sim-container{text-align:center;color:var(--mp-stage-fg);background:linear-gradient(#0a1020 0%,#152040 100%);border-radius:12px;margin-top:10px;padding:12px 12px 10px}.sky-sim-label{color:#8fd8f5;margin-bottom:8px;font-size:.875rem;font-weight:600}#skySimDesc{color:#d5dbe3;word-break:keep-all;margin-top:8px;font-size:.9rem;line-height:1.4}.direction-tag{color:var(--mp-accent);background:#0b6e991a;border-radius:6px;padding:3px 10px;font-size:.875rem;font-weight:700;display:inline-flex}.controls{box-sizing:border-box;flex-direction:column;gap:10px;width:100%;display:flex}.btn-row{align-items:center;gap:10px;width:100%;display:flex}.visually-hidden-label{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}input[type=date]{background-color:var(--bg,#fff);border:2px solid var(--border,#e4e4e7);color:var(--fg,#11181c);box-sizing:border-box;cursor:pointer;border-radius:12px;flex-grow:1;min-width:0;min-height:44px;padding:8px 12px;font-family:inherit;font-size:15px}input[type=date]:focus-visible{outline:3px solid var(--mp-accent);outline-offset:2px}.age-row{justify-content:space-between;align-items:baseline;gap:8px;margin-top:6px;font-weight:700;display:flex}.age-row label{font-size:.95rem}.age-row output{color:var(--mp-accent);font-variant-numeric:tabular-nums;font-size:1.05rem}input[type=range]{appearance:none;cursor:pointer;background:0 0;width:100%;height:32px;margin:0}input[type=range]::-webkit-slider-runnable-track{background:#d4d4d8;border-radius:3px;height:6px}input[type=range]::-moz-range-track{background:#d4d4d8;border-radius:3px;height:6px}input[type=range]:focus-visible{outline:3px solid var(--mp-accent);outline-offset:4px;border-radius:6px}input[type=range]::-moz-range-thumb{background:var(--mp-accent);box-sizing:border-box;border:3px solid #fff;border-radius:50%;width:26px;height:26px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:var(--mp-accent);cursor:pointer;border:3px solid #fff;border-radius:50%;width:26px;height:26px;margin-top:-10px;box-shadow:0 1px 4px #0000004d}.ticks{height:26px;color:var(--fg-muted,#71717a);font-size:13px;font-weight:700;position:relative}.ticks span{top:0;left:calc(13px + (100% - 26px) * var(--f));white-space:nowrap;padding-top:7px;position:absolute;transform:translate(-50%)}.ticks span:before{content:"";background:currentColor;width:2px;height:5px;position:absolute;top:0;left:50%;transform:translate(-50%)}@media (width<=520px){.dashboard{gap:16px;padding-left:10px;padding-right:10px}.info-card,.main-display{padding:16px}.orbit-display{padding:12px}.moon-stage{padding:10px}.btn-row{flex-wrap:wrap}.btn-row input[type=date]{flex-basis:100%}.btn-row .sk-btn{flex:1}}@media (width<=1100px){.dashboard{grid-template-columns:minmax(0,1fr)}}@media (prefers-reduced-motion:reduce){.moon-stage{transition:none}}