:root{color-scheme:dark;--ink:#edf7ff;--muted:#8ba3b7;--line:rgba(143,190,220,.15);--aqua:#53d8df;--sun:#ffc95c;--panel:rgba(8,29,46,.72)}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#04101b;color:var(--ink);font-family:Manrope,"Noto Sans KR",sans-serif}body{overflow-x:hidden;background:radial-gradient(circle at 28% 38%,#10354a 0,#061723 32%,#030b12 75%)}
body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.35;background-image:radial-gradient(circle,#b7e6ff 0 1px,transparent 1.5px);background-size:89px 89px}
.app-shell{width:min(1500px,100%);min-height:100vh;margin:auto;padding:28px 38px 34px}header{height:54px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}
.brand{font-size:.8rem;font-weight:700;letter-spacing:.22em;display:flex;align-items:center;gap:11px}.sun-mark{width:20px;height:20px;border:1px solid var(--sun);border-radius:50%;box-shadow:0 0 20px rgba(255,201,92,.35);position:relative}.sun-mark:after{content:"";position:absolute;inset:5px;background:var(--sun);border-radius:50%}.build-badge{font-size:.55rem;letter-spacing:.04em;color:#6fe2e5;border:1px solid rgba(111,226,229,.35);border-radius:999px;padding:2px 5px}
.utc-pill{font-size:.75rem;color:#b9ccda;letter-spacing:.08em;display:flex;gap:9px;align-items:center}.pulse{width:6px;height:6px;border-radius:50%;background:#55e1b6;box-shadow:0 0 10px #55e1b6}
.workspace{display:grid;grid-template-columns:minmax(0,1fr) 390px;min-height:calc(100vh - 116px)}.globe-panel{position:relative;min-height:800px;overflow:visible}.globe-copy{position:absolute;z-index:4;left:2%;top:4%;width:265px;pointer-events:none;padding:13px 14px 14px;border-radius:14px;background:rgba(255,255,255,.96);box-shadow:0 12px 34px rgba(0,0,0,.24)}.pondered-logo{display:block;width:100%;height:auto}.education-copy{margin:9px 3px 0;padding-top:9px;border-top:1px solid rgba(5,25,38,.12);font:600 .78rem/1.55 "Noto Sans KR",sans-serif;color:#173142;letter-spacing:-.02em}.line-guide{margin:9px 3px 0;padding-top:8px;border-top:1px solid rgba(5,25,38,.1);display:grid;gap:6px;color:#49606e;font:500 .6rem/1.3 "Noto Sans KR",sans-serif}.line-guide span{display:flex;align-items:center;gap:7px}.line-guide i{display:block;width:24px;height:2px;flex:none}.equator-swatch{background:#ffd064}.ecliptic-swatch{background:repeating-linear-gradient(90deg,#159daa 0 5px,transparent 5px 8px)}
.canvas-wrap{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;overflow:visible;padding-top:150px}.canvas-wrap:after{content:"";position:absolute;left:50%;top:calc(50% + 75px);transform:translate(-50%,-50%);width:min(51vw,576px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,transparent 55%,rgba(57,206,223,.08) 69%,transparent 72%);pointer-events:none}#globe3d{position:relative;flex:0 0 auto;width:min(52vw,600px);height:min(52vw,600px);touch-action:none;cursor:grab;filter:drop-shadow(0 28px 55px rgba(0,0,0,.58))}#globe3d:active{cursor:grabbing}#globe3d canvas{display:block;position:absolute;inset:0}.drag-hint{position:absolute;bottom:3%;font-size:.68rem;color:#6d889b;letter-spacing:.13em;pointer-events:none}
.map-city{appearance:none;border:0;background:rgba(4,17,27,.68);color:#e6f6f7;border-radius:6px;padding:3px 6px;display:flex;align-items:baseline;gap:5px;white-space:nowrap;font-family:Manrope,"Noto Sans KR",sans-serif;line-height:1;box-shadow:0 2px 8px rgba(0,0,0,.28);cursor:pointer;transform:translate(-50%,-50%);opacity:.82}.map-city strong{font:600 10px "Noto Sans KR",sans-serif}.map-city span{font-size:8px;color:#8ecbd0;font-variant-numeric:tabular-nums}.map-city:hover,.map-city.selected{background:rgba(9,48,59,.94);outline:1px solid rgba(255,210,105,.6);opacity:1;z-index:2}.map-city.selected strong{color:#ffd769}.map-city.selected span{color:#d9f5f5}
.time-panel[data-phase="낮"],.time-panel[data-phase="백야"]{box-shadow:0 25px 80px rgba(0,0,0,.3),inset 0 0 50px rgba(255,202,92,.05)}.time-panel[data-phase="새벽"],.time-panel[data-phase="저녁"]{box-shadow:0 25px 80px rgba(0,0,0,.3),inset 0 0 60px rgba(244,134,75,.06)}.time-panel[data-phase="밤"],.time-panel[data-phase="극야"]{box-shadow:0 25px 80px rgba(0,0,0,.38),inset 0 0 55px rgba(43,88,156,.07)}
.time-panel{align-self:center;background:linear-gradient(145deg,rgba(10,35,54,.93),rgba(5,20,32,.9));border:1px solid rgba(129,196,217,.17);border-radius:28px;padding:30px;box-shadow:0 25px 80px rgba(0,0,0,.3);backdrop-filter:blur(16px)}.local-label{font-size:.65rem;color:var(--aqua);font-weight:700;letter-spacing:.19em;text-transform:uppercase}.city-heading{display:flex;justify-content:space-between;align-items:center;margin-top:10px}.city-heading h2{font:600 1.5rem "Noto Sans KR",sans-serif;margin:0}.city-heading p{font-size:.75rem;color:var(--muted);margin:5px 0 0}.city-heading button{background:transparent;border:1px solid var(--line);color:#8fa9bb;border-radius:50%;width:38px;height:38px;font-size:1.1rem;cursor:pointer}.city-heading button:hover{border-color:var(--aqua);color:var(--aqua)}
.hero-time{font-size:clamp(4.2rem,7vw,6.2rem);line-height:1;font-weight:500;letter-spacing:-.08em;margin:36px 0 10px;font-variant-numeric:tabular-nums}.hero-date{font-family:"Noto Sans KR",sans-serif;font-size:.85rem;color:#a8bdca}.day-status{margin-top:17px;color:#c5d5df;font-size:.78rem;display:flex;align-items:center;gap:7px}.day-status #statusIcon{color:var(--sun)}.dot{color:#4f6a7b}
.moon-status{margin-top:18px;padding:13px 14px;border:1px solid rgba(145,187,213,.14);border-radius:13px;background:rgba(104,145,175,.055);display:grid;grid-template-columns:34px 1fr;column-gap:10px;align-items:center}.moon-icon{font-size:1.7rem;color:#dce8ef;text-shadow:0 0 12px rgba(198,220,234,.3)}.moon-status div{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap}.moon-status small{width:100%;font-size:.57rem;color:#7892a4;letter-spacing:.08em}.moon-status strong{font:600 .75rem "Noto Sans KR",sans-serif;color:#d9e8ef}.moon-status div span{font-size:.62rem;color:#8ba7b8}.moon-status em{grid-column:2;font-style:normal;font-size:.52rem;color:#587285;margin-top:4px}
.timeline-block{margin-top:34px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:24px 0}.timeline-head{display:flex;justify-content:space-between;font-size:.72rem;color:#8fa8ba}.timeline-head strong{color:var(--aqua);font-weight:600}input[type=range]{width:100%;margin:20px 0 8px;accent-color:var(--aqua);cursor:pointer}.range-labels{display:flex;justify-content:space-between;font-size:.59rem;color:#60798c}
.city-picker{position:relative;margin-top:22px}.city-picker summary{list-style:none;display:flex;align-items:center;justify-content:space-between;border:1px solid rgba(115,186,207,.2);border-radius:12px;padding:12px 14px;color:#a9bfcd;font-size:.72rem;cursor:pointer;background:rgba(117,174,200,.045)}.city-picker summary::-webkit-details-marker{display:none}.city-picker summary:after{content:"⌄";margin-left:8px;color:#62d6db}.city-picker summary strong{margin-left:auto;color:#67dce0;font-size:.65rem;font-weight:600}.city-picker[open] summary{border-color:rgba(78,211,219,.4);border-radius:12px 12px 0 0}.city-options{position:absolute;z-index:20;left:0;right:0;top:100%;max-height:245px;overflow:auto;padding:8px;background:#071b2a;border:1px solid rgba(78,211,219,.35);border-top:0;border-radius:0 0 12px 12px;box-shadow:0 18px 35px rgba(0,0,0,.45)}.city-option{display:flex;align-items:center;gap:9px;padding:8px;border-radius:8px;color:#a9bfcd;font-size:.68rem;cursor:pointer}.city-option:hover{background:rgba(78,211,219,.08);color:#ddf5f6}.city-option input{accent-color:#55d8de}.city-option span{margin-left:auto;color:#668396;font-size:.58rem}#cityLimitNote{margin:8px 2px 0;color:#698294;font-size:.58rem}.city-picker.limit #cityLimitNote{color:#ffbf72}
.city-search-wrap{display:none;position:absolute;z-index:21;left:0;right:0;top:100%;padding:9px 9px 6px;background:#071b2a;border-left:1px solid rgba(78,211,219,.35);border-right:1px solid rgba(78,211,219,.35)}.city-picker[open] .city-search-wrap{display:block}.city-search-wrap input{width:100%;border:1px solid rgba(109,182,204,.24);border-radius:8px;background:#04131f;color:#dcecf2;padding:9px 10px;font:500 .68rem Manrope,"Noto Sans KR",sans-serif;outline:none}.city-search-wrap input:focus{border-color:#55d8de;box-shadow:0 0 0 2px rgba(85,216,222,.1)}.city-picker[open] .city-options{top:calc(100% + 47px);max-height:220px}.city-empty{padding:16px 8px;text-align:center;color:#61798a;font-size:.66rem}
@media(max-width:980px){.app-shell{padding:20px}.workspace{grid-template-columns:1fr}.globe-panel{min-height:720px}.globe-copy{top:2%;left:50%;transform:translateX(-50%);width:220px}.canvas-wrap{padding-top:115px}.time-panel{position:relative;z-index:5;width:min(560px,100%);justify-self:center;margin-bottom:30px}#globe3d{width:min(76vw,530px);height:min(76vw,530px);margin-top:80px}}
@media(max-width:560px){.app-shell{padding:16px}.brand{font-size:.7rem}.workspace{min-height:auto}.globe-panel{min-height:650px}.globe-copy{left:50%;top:1%;width:205px}.education-copy{font-size:.7rem}.canvas-wrap{align-items:end;padding:105px 0 36px}#globe3d{width:88vw;height:88vw;margin:0 0 2vw}.orbit-legend{bottom:1%}.drag-hint{bottom:1%}.time-panel{border-radius:22px;padding:24px 20px}.hero-time{font-size:4.45rem}}
@media(min-width:981px){.globe-panel{min-height:860px}#globe3d{width:min(56vw,660px);height:min(56vw,660px)}}
.globe-copy{width:212px;padding:10px 11px 11px;border-radius:12px}.education-copy{margin-top:7px;padding-top:7px;font-size:.624rem}.line-guide{margin-top:7px;padding-top:6px;gap:5px;font-size:.48rem}.line-guide i{width:19px}.equinox-swatch{height:7px!important;width:7px!important;border-radius:50%;background:#ff8967;box-shadow:0 0 0 2px rgba(255,137,103,.2)}
@media(max-width:980px){.globe-copy{width:176px}}
@media(max-width:560px){.globe-copy{width:164px}.education-copy{font-size:.56rem}}
.drag-hint{display:flex;align-items:center;justify-content:center;gap:16px;padding:7px 12px;border:1px solid rgba(126,180,204,.13);border-radius:999px;background:rgba(4,16,27,.6);backdrop-filter:blur(8px);white-space:nowrap}
@media(max-width:560px){.drag-hint{gap:5px;flex-direction:column;padding:6px 10px;font-size:.58rem;line-height:1.35}}
.header-actions{display:flex;align-items:center;gap:14px}.install-button{border:1px solid rgba(83,216,223,.42);border-radius:999px;background:rgba(83,216,223,.09);color:#bff6f7;padding:8px 13px;font:600 .68rem Manrope,"Noto Sans KR",sans-serif;cursor:pointer}.install-button:hover{background:rgba(83,216,223,.17);border-color:#53d8df}.install-button[hidden]{display:none}.install-dialog{width:min(430px,calc(100% - 32px));border:1px solid rgba(114,198,215,.24);border-radius:22px;background:linear-gradient(145deg,#0b2638,#061724);color:#eaf6fb;padding:28px;box-shadow:0 30px 100px rgba(0,0,0,.65)}.install-dialog::backdrop{background:rgba(0,7,13,.72);backdrop-filter:blur(5px)}.dialog-close{position:absolute;right:14px;top:12px;border:0;background:transparent;color:#8aa6b7;font-size:1.5rem;cursor:pointer}.install-mark{width:64px;height:64px;border-radius:15px;overflow:hidden;margin-bottom:17px}.install-mark img{display:block;width:100%;height:100%}.install-dialog h2{margin:0 0 18px;font:600 1.25rem "Noto Sans KR",sans-serif}.install-steps{display:grid;gap:12px}.install-steps section{padding:13px 14px;border-radius:12px;background:rgba(116,181,202,.07);border:1px solid rgba(116,181,202,.12)}.install-steps strong{font-size:.76rem;color:#72e0e4}.install-steps p{margin:7px 0 0;font:400 .74rem/1.65 "Noto Sans KR",sans-serif;color:#b5c9d5}.install-steps b{color:#f1d285}.dialog-done{width:100%;margin-top:18px;border:0;border-radius:11px;background:#54d6dc;color:#04202a;padding:11px;font:700 .75rem "Noto Sans KR",sans-serif;cursor:pointer}@media(max-width:560px){header{gap:10px}.header-actions{gap:8px}.utc-pill{display:none}.install-button{padding:7px 10px;font-size:.62rem}.install-dialog{padding:24px 20px}}