@import"https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=Orbitron:wght@600;700&display=swap";:root{--bg-main: #05070f;--bg-subtle: #0c1324;--line-soft: rgba(173, 199, 255, .24);--line-strong: rgba(193, 220, 255, .48);--text-main: #ebf2ff;--text-sub: #a8b9d9;--accent: #61c5ff;--accent-strong: #80f0b4}*{box-sizing:border-box}html,body,#root{width:100%;min-height:100%;margin:0}body{font-family:Space Grotesk,Apple SD Gothic Neo,Noto Sans KR,sans-serif;color:var(--text-main);background:radial-gradient(circle at 15% 10%,#11274d 0%,transparent 40%),radial-gradient(circle at 85% 85%,#113531 0%,transparent 35%),linear-gradient(140deg,var(--bg-main) 0%,var(--bg-subtle) 100%)}button,input,label{font:inherit}.appShell{width:100%;min-height:100vh;height:100dvh;padding:1rem;display:flex;flex-direction:column;gap:1rem;overflow:hidden}.topBar{display:flex;justify-content:space-between;gap:1rem;align-items:center;padding:.9rem 1rem;border:1px solid var(--line-soft);border-radius:16px;background:#070b18b8;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.titleBlock{display:flex;flex-direction:column;gap:.2rem}.eyebrow{margin:0;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-sub)}.titleBlock h1{margin:0;font-family:Orbitron,Space Grotesk,sans-serif;font-size:clamp(1.15rem,2vw,1.6rem);letter-spacing:.03em}.topActions{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;justify-content:flex-end}.modeButton,.utilityButton{border:1px solid var(--line-strong);border-radius:999px;background:#1526488c;color:var(--text-main);padding:.45rem .82rem;cursor:pointer;transition:transform .2s ease,background-color .2s ease}.modeButton.active{background:linear-gradient(120deg,#509cffe6,#60daafe6);border-color:#b2f3ffd1;color:#051120;font-weight:700}.modeButton:hover,.utilityButton:hover{transform:translateY(-1px);background:#1e3a6ebf}.helpBadge{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line-soft);border-radius:999px;padding:.42rem .72rem;color:var(--text-sub);cursor:help;background:#0a101fb3}.contentLayout{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(340px,1fr);gap:1rem;flex:1;min-height:0;overflow:hidden}.sceneArea,.sidePanel,.videoPanel{border:1px solid var(--line-soft);border-radius:18px;overflow:hidden;background:#070b16a6;min-height:0}.sceneArea{position:relative}.sceneViewport{height:100%;min-height:0}.sceneViewport canvas{display:block}.rightRail{display:grid;grid-template-rows:minmax(0,1fr) auto;gap:1rem;min-height:0}.videoPanel{display:flex}.videoDock{display:flex;flex-direction:column;gap:.75rem;padding:.9rem;height:100%;border-top:1px solid rgba(156,196,255,.25);background:radial-gradient(circle at 20% 0%,rgba(31,57,102,.35) 0%,transparent 45%),linear-gradient(145deg,#08101ff0,#091322db)}.videoDock.compact{border-top:0;padding:.75rem;height:auto;background:linear-gradient(145deg,#08101ff0,#091322db)}.videoDockHeader{display:flex;align-items:flex-end;justify-content:space-between;gap:.75rem;flex-wrap:wrap}.videoDockTitle{display:flex;flex-direction:column;gap:.2rem}.videoDockEyebrow{margin:0;font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;color:#9eb5da}.videoDockTitle h2{margin:0;font-size:1rem;letter-spacing:.02em}.videoCountBadge{display:inline-flex;align-items:center;border:1px solid rgba(171,206,255,.4);border-radius:999px;padding:.2rem .58rem;font-size:.78rem;color:#d6e6ff;background:#182a4e9e}.videoDockBody{display:grid;grid-template-columns:minmax(0,5fr) minmax(235px,3fr);gap:.8rem;min-height:0}.videoDock.compact .videoDockBody{display:grid;grid-template-rows:auto auto;gap:.62rem;min-height:auto}.videoPlayerCard,.videoListCard{border:1px solid rgba(167,198,245,.24);border-radius:12px;background:#080f1ddb}.videoPlayerCard{padding:.68rem;display:flex;flex-direction:column;gap:.62rem}.videoDock.compact .videoPlayerCard{padding:.56rem;gap:.46rem;flex:0 0 auto;min-height:auto}.videoFrame{position:relative;width:100%;border-radius:10px;overflow:hidden;border:1px solid rgba(165,193,244,.3);padding-top:56.25%;background:#02060de6}.videoDock.compact .videoFrame{padding-top:0;aspect-ratio:16 / 9;flex:0 0 auto;min-height:auto}.videoFrame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}.videoMeta{display:grid;gap:.34rem}.videoLevel{margin:0;color:#b7d7ff;font-size:.78rem;font-weight:700}.videoMeta h3{margin:0;font-size:.98rem}.videoMeta p{margin:0;color:#ccdcf8;font-size:.86rem;line-height:1.4}.videoDock.compact .videoMeta p{display:none}.videoDock.compact .videoMeta{display:flex;align-items:center;gap:.38rem;flex-wrap:wrap}.videoDock.compact .videoMeta h3{flex-basis:100%;font-size:.87rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.videoDock.compact .videoLevel{font-size:.72rem;margin:0}.videoDock.compact .videoMeta a{margin-top:0;margin-left:auto;font-size:.74rem;padding:.18rem .54rem}.videoMeta a{display:inline-flex;justify-self:start;align-items:center;margin-top:.2rem;border:1px solid rgba(173,211,255,.5);border-radius:999px;padding:.23rem .6rem;color:#eaf4ff;font-size:.8rem;text-decoration:none;background:#223d699e}.videoMeta a:hover{background:#31548ab8}.videoListCard{padding:.68rem;display:flex;flex-direction:column;gap:.5rem;min-height:0}.videoDock.compact .videoListCard{flex:0 0 auto;min-height:auto;padding:.5rem;gap:.42rem}.videoListHint{margin:0;font-size:.78rem;color:#c7ddff}.videoSearchLabel{font-size:.8rem;color:#c7ddff}.videoSearchInput{border:1px solid rgba(151,202,255,.45);border-radius:999px;background:#0e2342a3;color:#d9e7ff;padding:.34rem .68rem;font-size:.8rem}.videoSearchInput::placeholder{color:#b2c8e9b8}.videoList{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.44rem;overflow:auto;max-height:256px}.videoDock.compact .videoList{max-height:none;min-height:auto;display:grid;grid-auto-flow:column;grid-auto-columns:210px;overflow-x:auto;overflow-y:hidden;gap:.34rem}.videoListItem{width:100%;border:1px solid rgba(160,198,255,.25);border-radius:10px;background:#12213d73;color:#e5eeff;padding:.35rem;display:grid;grid-template-columns:96px minmax(0,1fr);gap:.56rem;text-align:left;cursor:pointer;transition:transform .18s ease,background-color .18s ease,border-color .18s ease}.videoListItem img{display:block;width:100%;height:auto;border-radius:8px;object-fit:cover;background:#080f1dcc}.videoListItem div{min-width:0;display:flex;flex-direction:column;gap:.14rem}.videoListItem strong{font-size:.83rem;font-weight:600;line-height:1.3;overflow-wrap:anywhere}.videoListItem span{font-size:.74rem;color:#a9c6f2}.videoDock.compact .videoListItem{grid-template-columns:72px minmax(0,1fr);gap:.42rem;padding:.26rem}.videoDock.compact .videoListItem strong{font-size:.74rem;line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.videoDock.compact .videoListItem span{font-size:.67rem}.videoListItem:hover{transform:translateY(-1px);background:#213a63a8}.videoListItem.active{border-color:#bce5ffcc;background:linear-gradient(145deg,#3e6aaea6,#234078a6)}.videoEmptyMessage{margin:0;color:#9fb6db;font-size:.84rem}.sidePanel{padding:.9rem;overflow:auto}.panel{display:flex;flex-direction:column;gap:.9rem;height:100%}.panelSection{padding:.85rem;border-radius:14px;border:1px solid rgba(177,201,245,.2);background:#060c18d6}.panelSection h2{margin:0 0 .5rem;font-size:1rem;letter-spacing:.02em}.sectionHint{margin:0 0 .8rem;color:var(--text-sub);font-size:.85rem}.rangeLabel{display:block;font-size:.9rem;margin-top:.72rem;margin-bottom:.3rem;color:#d8e4ff}input[type=range]{width:100%;accent-color:var(--accent-strong)}.quickActionRow{margin-top:.62rem;display:flex;flex-wrap:wrap;gap:.55rem;align-items:center}.panelActionButton{border:1px solid rgba(173,219,255,.48);border-radius:999px;background:#18325a8f;color:#e9f2ff;padding:.34rem .74rem;cursor:pointer;transition:transform .18s ease,background-color .18s ease}.panelActionButton:hover{transform:translateY(-1px);background:#284c81b8}.panelInlineToggle{display:inline-flex;align-items:center;gap:.42rem;font-size:.85rem;color:#dbe9ff}.toggleRow{margin-top:.8rem;display:grid;grid-template-columns:1fr;gap:.42rem}.toggleRow label{display:flex;align-items:center;gap:.45rem;font-size:.9rem}.modeWarning{margin:.85rem 0 0;padding:.68rem;border-radius:10px;border:1px solid rgba(255,194,128,.42);background:#5c310c59;font-size:.84rem;color:#ffdca9}.closeupCard{margin-top:.85rem;padding:.72rem;border-radius:11px;border:1px solid rgba(148,201,255,.38);background:linear-gradient(160deg,#13284975,#0b182bb8)}.closeupCard h3{margin:0 0 .55rem;font-size:.92rem;letter-spacing:.02em}.closeupCard dl{margin:0;display:grid;gap:.3rem}.closeupCard dl div{display:flex;justify-content:space-between;gap:.6rem;padding:.28rem 0;border-bottom:1px dashed rgba(163,196,250,.22)}.closeupCard dt{color:#b7c9eb}.closeupCard dd{margin:0;color:#ebf3ff;font-weight:600;text-align:right}.closeupCard p{margin:.55rem 0 0;color:#d6e5ff;font-size:.83rem;line-height:1.45}.seasonJumpTitle{margin:.72rem 0 .3rem;font-size:.84rem;font-weight:600;color:#d9ecff}.seasonJumpRow{display:flex;flex-wrap:wrap;gap:.38rem}.dateJumpRow{display:flex;flex-wrap:wrap;gap:.38rem;align-items:center}.dateInput{border:1px solid rgba(151,202,255,.45);border-radius:999px;background:#0e2342a3;color:#d9e7ff;padding:.26rem .62rem;font-size:.8rem;color-scheme:dark}.dateInput::-webkit-calendar-picker-indicator{filter:invert(1);opacity:.95;cursor:pointer}.seasonJumpButton{border:1px solid rgba(151,202,255,.45);border-radius:999px;background:#0e2342a3;color:#d9e7ff;padding:.26rem .62rem;font-size:.8rem;cursor:pointer}.seasonJumpButton.active{background:linear-gradient(125deg,#7ec5ffeb,#6ae8cfe6);color:#042036;border-color:#b8f7ffeb;font-weight:700}.orbitalOverview{position:relative;width:208px;height:208px;margin-top:.3rem;border-radius:14px;border:1px solid rgba(153,203,255,.32);background:radial-gradient(circle at 50% 50%,#112240e6,#070e1ee6 70%),linear-gradient(135deg,#0f1a31e0,#070f1ce6)}.overviewOrbit{position:absolute;left:50%;top:50%;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none}.sunOrbit{width:116px;height:116px;border:1px dashed rgba(135,183,255,.32)}.overviewLine{position:absolute;height:1px;transform-origin:left center;background:#ffd77cc2;pointer-events:none}.overviewLine.moonLink{background:#b7d3ffb8}.overviewBody{position:absolute;transform:translate(-50%,-50%);display:inline-flex;align-items:center;justify-content:center;border-radius:999px;font-size:.68rem;white-space:nowrap;pointer-events:none}.overviewBody.sun{padding:.2rem .45rem;color:#351d02;font-weight:700;background:radial-gradient(circle,#ffd86c,#ffb54f 72%);box-shadow:0 0 14px #ffb74c66}.overviewBody.earth{padding:.18rem .4rem;color:#e8f3ff;font-weight:700;background:radial-gradient(circle,#5f9dff,#3566c6 72%)}.overviewBody.moon{padding:.15rem .34rem;color:#101620;font-weight:700;background:radial-gradient(circle,#e4e9f1,#aeb9c8 76%)}.closeupLegend{color:#dff5ff;font-weight:600}.infoCard{flex:1}.emptyState{margin:0;color:var(--text-sub)}.infoCard h3{margin:0 0 .5rem;font-size:1.2rem}.infoCard h3 span{color:var(--accent);font-size:.95rem;font-weight:500;margin-left:.25rem}.infoCard p{margin:0 0 .75rem;color:#d4e1fd;line-height:1.5}.infoCard dl{margin:0;display:grid;gap:.4rem}.infoCard dl div{display:flex;justify-content:space-between;gap:.8rem;padding:.42rem 0;border-bottom:1px dashed rgba(164,186,235,.22)}.infoCard dt{color:var(--text-sub)}.infoCard dd{margin:0;font-weight:500;text-align:right}@media(max-width:1100px){.appShell{height:auto;overflow:visible}.contentLayout{grid-template-columns:1fr;overflow:visible}.sceneArea{min-height:55vh}.sceneViewport{min-height:0}.rightRail{grid-template-rows:auto auto}.sidePanel{min-height:38vh}.videoPanel{min-height:32vh}}@media(max-width:980px){.rightRail{gap:.8rem}.videoDockBody{grid-template-columns:1fr}.videoDock.compact .videoList{grid-auto-columns:190px}.videoList{max-height:220px}}@media(max-width:720px){.appShell{padding:.65rem}.topBar{flex-direction:column;align-items:flex-start}.topActions{width:100%;justify-content:flex-start}.modeButton,.utilityButton,.helpBadge{font-size:.88rem;padding:.42rem .7rem}.sceneViewport{min-height:50vh}.sidePanel{min-height:36vh;padding:.75rem}.videoPanel{min-height:34vh}.videoListItem{grid-template-columns:88px minmax(0,1fr)}.videoDock,.videoDock.compact{padding:.68rem}}