/* Home 히어로. S4 확정본의 무대 스타일을 .hero 아래로 옮긴 것(색은 base.css의 .dark 토큰). */
.hero { height: calc(100svh - var(--head)); min-height: 520px; }
.hero .stage { position: relative; height: 100%; overflow: hidden; cursor: grab; touch-action: pan-y;   /* 맵 바깥: 세로 스크롤 */ user-select: none; -webkit-user-select: none; }
.hero .stage.dragging { cursor: grabbing; }
.hero canvas.globe { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
/* 쌓는 순서: 뒤쪽 노드·지구 뒷면 → 이름·이름표 → 지구 앞면·앞쪽 노드 */
.hero canvas.back { z-index: 0; }
.hero .g, .hero .cap { z-index: 1; pointer-events: none; }
.hero canvas.front { z-index: 2; }
.hero .g { position: absolute; top: 0; left: 0; font-family: var(--disp); font-weight: 700; line-height: 1; white-space: pre; transform-origin: 0 0; will-change: transform; }
.hero .measure { position: absolute; visibility: hidden; white-space: pre; font-family: var(--disp); font-weight: 700; line-height: 1; }
.hero .measure span { display: inline-block; }
.hero .cap { position: absolute; opacity: 0; text-align: center; transform: translateX(-50%); line-height: 1.5; color: var(--sub); white-space: nowrap; }
.hero .cap .kr { display: block; font-family: "Pretendard Variable", Pretendard, sans-serif; color: var(--text); }
.hero .cap .en { display: block; font-family: var(--mono); letter-spacing: .03em; }
.hero .star { position: absolute; top: 0; left: 0; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; background: var(--text); border-radius: 50%; opacity: 0; z-index: 2; }
/* 커서 옆 안내(Pixelify Sans, T1 다크 강조색): 마우스일 때만, 드래그하지 않는 동안 늘 표시. 빈 곳 CLICK-DRAG · 노드 위 CLICK · 돌린 상태의 지구 위 FRONT VIEW */
.hero .cue { position: absolute; top: 0; left: 0; z-index: 5; pointer-events: none; font-family: "Pixelify Sans", var(--mono); font-weight: 500; font-size: 13px; letter-spacing: .02em; color: var(--acc); white-space: nowrap; opacity: 0; transition: opacity .15s; }
.hero .cue.on { opacity: 1; }
/* 조작 안내는 시점 버튼 바로 아래, 오른쪽 정렬 여러 줄(NOCTRA 첫 화면 오른쪽 위 모노 문단 구조). 아래 구간 제목과 붙지 않게 화면 아래에서 뺐다 */
.hero .hint { position: absolute; top: 64px; right: var(--gut); z-index: 3; pointer-events: none; text-align: right; white-space: pre-line; line-height: 1.7; color: var(--sub); transition: right .3s; }
.hero .coord { position: absolute; right: 16px; bottom: 16px; text-align: right; z-index: 3; pointer-events: none; }
@media (max-width: 600px) { .hero .coord { display: none; } }

.hero .detail { position: absolute; z-index: 4; top: 0; right: 0; bottom: 0; width: 340px; background: var(--bg); border-left: 1px solid var(--rule); padding: 20px 20px 24px; overflow-y: auto; cursor: auto; user-select: text; -webkit-user-select: text; }
.hero .detail[hidden] { display: none; }
.hero .detail h2 { font-size: 22px; font-weight: 600; line-height: 1.3; margin: 6px 0 2px; }
.hero .detail p + p { margin-top: 10px; }
.hero .detail .role { color: var(--text); }
.hero .detail a { color: var(--acc); text-decoration: none; border-bottom: 1px solid currentColor; }
.hero .detail ul { list-style: none; padding: 0; margin-top: 10px; }
.hero .detail li { padding: 6px 0; border-top: 1px solid var(--rule); }
.hero .detail .close { border: 1px solid var(--rule); font-size: 13px; position: absolute; top: 8px; right: 8px; min-height: 36px; padding: 4px 10px; }
@media (max-width: 600px) { .hero .detail { top: auto; width: auto; left: 0; max-height: 55%; border-left: 0; border-top: 1px solid var(--rule); } }

.hero .views { position: absolute; z-index: 3; top: 16px; right: var(--gut); display: flex; gap: 4px; }
.hero .views button { min-height: 36px; padding: 6px 10px; border: 1px solid var(--rule); color: var(--sub); }
.hero .views button:hover { color: var(--text); border-color: var(--sub); }
.hero .coord { right: var(--gut); }
.hero .stage.has-detail .views, .hero .stage.has-detail .hint { right: calc(340px + var(--gut)); }
@media (max-width: 600px) { .hero .stage.has-detail .views, .hero .stage.has-detail .hint { right: var(--gut); } }
.hero .grab { position: absolute; z-index: 2; touch-action: none; }   /* 맵 위: 모든 방향 드래그를 회전에 씀 */