/* 과학 아틀라스 — 별빛 시간표 (2026-10-01 새로 만듦)
   판 1 무대 = 생성 그림(밤 언덕과 망원경 든 아이). 천체 그림은 검은 바탕을 지워 빛만 남긴 것.
   망원경 끝 자리는 js/starlight.js 의 EYE 값(그림에서 잰 값). */
.sl-sec{margin:30px 0 0;padding-top:24px;border-top:1px solid var(--ink-3)}
.sl-h{font-family:var(--disp);font-weight:700;font-size:19px;margin-bottom:8px}
.sl-tip{color:var(--chalk-dim);font-size:14.5px;line-height:1.7;margin-bottom:12px}

.sl-stage{position:relative;border-radius:var(--radius);overflow:hidden;background:#0b1424;user-select:none;-webkit-user-select:none;touch-action:none}
.sl-bg{display:block;width:100%;height:auto;pointer-events:none}
.sl-stage.is-drag{outline:2px dashed rgba(201,162,39,.75);outline-offset:-6px}
.sl-hint{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);margin:0;color:rgba(232,228,217,.55);font-size:14px;letter-spacing:.04em;pointer-events:none}
.sl-eye{position:absolute;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;pointer-events:none;
  box-shadow:0 0 0 2px rgba(227,200,106,.0);transition:box-shadow .3s}
.sl-eye.flash{animation:sl-flash 1.2s ease-out}
@keyframes sl-flash{0%{box-shadow:0 0 0 0 rgba(255,236,170,.95),0 0 30px 12px rgba(255,236,170,.7)}100%{box-shadow:0 0 0 26px rgba(255,236,170,0),0 0 0 0 rgba(255,236,170,0)}}
.sl-shown{position:absolute;transform:translate(-50%,-50%);pointer-events:none;animation:sl-in .6s ease-out}
@keyframes sl-in{from{opacity:0}to{opacity:1}}
.sl-body{display:block;width:100%;height:auto;filter:drop-shadow(0 0 10px rgba(255,240,200,.25))}
.sl-label{position:absolute;left:50%;top:100%;transform:translateX(-50%);font-size:12.5px;color:#E8E4D9;background:rgba(12,21,38,.6);padding:1px 8px;border-radius:999px;white-space:nowrap}
.sl-photon{position:absolute;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:#FFF4D2;
  box-shadow:0 0 8px 3px rgba(255,236,170,.9),0 0 22px 8px rgba(255,220,140,.45);pointer-events:none}

/* 천체 선반 — 낮이든 밤이든 밤하늘 띠 */
.sl-tray{display:flex;gap:6px;overflow-x:auto;margin-top:10px;padding:10px 8px;border-radius:12px;background:#0f1a2e;scrollbar-width:thin}
.sl-item{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:4px;width:78px;padding:6px 2px 7px;background:none;border:1px solid transparent;border-radius:10px;
  color:#C9CFDA;font-family:inherit;font-size:12px;line-height:1.25;cursor:grab;touch-action:none}
.sl-item img{width:52px;height:52px;object-fit:contain;pointer-events:none}
.sl-item:hover,.sl-item:focus-visible{border-color:rgba(201,162,39,.6);outline:none}
.sl-item.is-on{border-color:#C9A227;background:rgba(201,162,39,.12);color:#F3E7C2}
.sl-ghost{position:fixed;left:0;top:0;z-index:100;pointer-events:none;filter:drop-shadow(0 0 14px rgba(255,240,200,.5))}

/* 결과 — 그때 지구 */
.sl-result{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:20px;margin-top:16px;align-items:center}
.sl-result.in{animation:sl-up .5s ease-out}
@keyframes sl-up{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.sl-era{width:100%;border-radius:var(--radius);display:block;aspect-ratio:16/9;object-fit:cover}
.sl-name{font-family:var(--disp);font-weight:700;font-size:24px;margin-bottom:4px}
.sl-when{font-size:17px;color:var(--brass);margin-bottom:10px}
.sl-erat{font-size:15px;line-height:1.7;margin-bottom:6px}
.sl-note,.sl-gone{font-size:14px;color:var(--chalk-dim);line-height:1.7;margin-top:4px}
.sl-gone:empty,.sl-note:empty{display:none}

/* 판 2 */
.sl-eraview{margin:0 0 6px;position:relative}
.sl-era2{width:100%;display:block;border-radius:var(--radius);aspect-ratio:16/9;object-fit:cover}
.sl-era2.in{animation:sl-in .45s ease-out}
.sl-era2c{position:absolute;left:12px;right:12px;bottom:12px;font-size:14.5px;line-height:1.6;color:#1b2740;background:rgba(247,244,235,.92);padding:8px 12px;border-radius:8px}
.sl-road{position:relative;height:76px;margin:14px 18px 6px;touch-action:none;cursor:pointer}
.sl-road::before{content:"";position:absolute;left:0;right:0;top:50%;height:4px;margin-top:-2px;border-radius:2px;
  background:linear-gradient(90deg,var(--brass),color-mix(in srgb,var(--brass) 25%,var(--ink-3)))}
.sl-stop{position:absolute;top:50%;width:46px;height:30px;margin:-15px 0 0 -23px;border-radius:6px;overflow:hidden;border:1.5px solid var(--ink-2);box-shadow:0 1px 3px rgba(0,0,0,.25);pointer-events:none}
.sl-stop img{width:100%;height:100%;object-fit:cover;display:block}
.sl-lamp{position:absolute;top:50%;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;border:2px solid #fff6d8;cursor:grab;touch-action:none;z-index:2;
  background:radial-gradient(circle,#fff8dc 0 30%,#E3C86A 60%,#b58b1a 100%);box-shadow:0 0 14px 5px rgba(255,220,130,.55)}
.sl-lamp.is-drag{cursor:grabbing;transform:scale(1.12)}
.sl-lamp:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
.sl-far{font-size:15.5px;line-height:1.7;margin-top:4px}

@media (max-width:700px){
  .sl-result{grid-template-columns:1fr}
  .sl-label{font-size:11px}
  .sl-item{width:68px}
  .sl-item img{width:44px;height:44px}
  .sl-stop{width:34px;height:24px;margin:-12px 0 0 -17px}
}
@media (prefers-reduced-motion:reduce){.sl-result.in,.sl-era2.in,.sl-shown{animation:none}}

/* 결과 칸은 천체를 고르기 전에는 숨긴다 — 위의 display:grid 가 hidden 을 덮어쓰지 않게 (2026-10-01 배포 때 더함) */
.sl-result[hidden]{display:none}