/* universe.css — 학습 우주 시각화 (우주 담당 / Opus 소유)
 * 다크 토큰 영역(#0E1524 계열). tokens.css 변수만 사용.
 * 컨테이너(.universe-mount)는 app.css가 position:relative 로 정의함.
 * 높이는 이 파일의 .universe-root가 최종 결정한다(universe.js가 마운트 시점에
 * el에 이 클래스를 추가하므로, app.css의 .universe-mount 규칙보다 이 파일이 CSS 소스
 * 순서상 나중에 로드돼 우선 적용됨). 이전 70vh 고정값은 데스크톱·모바일 모두에서
 * 캔버스가 화면을 다 채우지 못하고 바로 아래 라이트 톤 푸터가 접힘 영역 안에 들어와
 * 몰입감이 끊겨 보이는 문제가 있었다 — 헤더 높이를 제외한 나머지 뷰포트를 채우도록
 * calc(100vh - 헤더높이)로 키운다. */
.universe-root {
  position: relative;
  overflow: hidden;
  min-height: calc(100vh - 56px);
  border-radius: var(--radius-lg);
  background: #0E1524;
  isolation: isolate;
}
@media (min-width: 641px) {
  .universe-root { min-height: calc(100vh - 64px); }
}

.universe-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  cursor: grab;
  touch-action: none;
  outline: none;
}
.universe-canvas:active { cursor: grabbing; }

/* 호버 라벨(한국어) — 커서 추종, 절제된 유리판 톤 */
.universe-tooltip {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 4;
  max-width: 240px;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-sm);
  background: rgba(22, 31, 50, 0.92);
  border: 1px solid var(--border);
  color: var(--text-strong);
  font-size: 13px;
  line-height: 1.45;
  font-weight: 500;
  pointer-events: none;
  box-shadow: var(--shadow-2);
  will-change: transform;
  backdrop-filter: blur(6px);
}

/* 줌 컨트롤(+/-/홈) — 좌하단 세로 스택 */
.universe-controls {
  position: absolute;
  left: var(--sp-4);
  bottom: var(--sp-4);
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.universe-ctl {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
  font-weight: 600;
  color: var(--text-strong);
  background: rgba(22, 31, 50, 0.82);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
  backdrop-filter: blur(6px);
}
.universe-ctl:hover { background: rgba(34, 45, 68, 0.95); }
.universe-ctl:active { transform: scale(0.94); }
.universe-ctl:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(127, 168, 240, 0.45);
}

/* 대체 동선 링크(항시 제공) — 우상단 */
.universe-listlink {
  position: absolute;
  top: var(--sp-4);
  right: var(--sp-4);
  z-index: 5;
  padding: var(--sp-2) var(--sp-4);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-strong);
  background: rgba(22, 31, 50, 0.82);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: background var(--dur-1) var(--ease);
  backdrop-filter: blur(6px);
}
.universe-listlink:hover { background: rgba(34, 45, 68, 0.95); }
.universe-listlink:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(127, 168, 240, 0.45);
}

/* 캔버스 불가 시 폴백 (app.css의 .universe-fallback 와 별개로 우주 모듈 자체 폴백) */
.universe-root .universe-fallback {
  position: relative;
  z-index: 2;
}

@media (max-width: 640px) {
  .universe-ctl { width: 44px; height: 44px; }  /* 터치 최소 44px */
  .universe-listlink { padding: var(--sp-2) var(--sp-3); font-size: 13px; }
  .universe-tooltip { max-width: 200px; font-size: 12px; }
}

/* ── 별 hover 미리보기 카드 (라벨+교과+학년군+주제 수) ───────────────── */
.universe-card {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 6;
  width: 232px;
  padding: var(--sp-3) var(--sp-3);
  border-radius: var(--radius);
  background: rgba(18, 26, 43, 0.94);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-2);
  pointer-events: none;
  will-change: transform;
  backdrop-filter: blur(8px);
}
.universe-card .uc-title {
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--text-strong);
}
.universe-card .uc-code {
  margin-top: 2px;
  font-size: 11px;
  font-weight: 600;
  color: var(--brand-link);
  font-variant-numeric: tabular-nums;
}
.universe-card .uc-meta {
  margin: var(--sp-2) 0 0;
  display: grid;
  gap: 3px;
}
.universe-card .uc-meta > div {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-3);
  font-size: 12px;
}
.universe-card .uc-meta dt { margin: 0; color: var(--text-muted); }
.universe-card .uc-meta dd {
  margin: 0;
  color: var(--text);
  font-weight: 500;
  text-align: right;
}
.universe-card .uc-hint {
  margin-top: var(--sp-2);
  padding-top: var(--sp-2);
  border-top: 1px solid var(--border);
  font-size: 11px;
  font-weight: 600;
  color: var(--brand-link);
}

/* ── 상시 범례(학교급 전이 색상) — 우상단, 리스트 링크 아래 ──────────── */
.universe-legend {
  position: absolute;
  top: calc(var(--sp-4) + 44px);
  right: var(--sp-4);
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-sm);
  background: rgba(22, 31, 50, 0.78);
  border: 1px solid var(--border);
  backdrop-filter: blur(6px);
  pointer-events: none;
}
.universe-legend-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}
.universe-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text);
}
.universe-legend-item i {
  width: 12px;
  height: 3px;
  border-radius: 2px;
  display: inline-block;
}

/* ── 가이드 투어 패널 — 좌상단 ─────────────────────────────────────── */
.universe-tour {
  position: absolute;
  top: var(--sp-4);
  left: var(--sp-4);
  z-index: 5;
  width: 210px;
  padding: var(--sp-3);
  border-radius: var(--radius);
  background: rgba(22, 31, 50, 0.82);
  border: 1px solid var(--border);
  backdrop-filter: blur(6px);
}
.universe-tour-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-strong);
  margin-bottom: var(--sp-2);
}
.universe-tour-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.universe-tour-btn {
  text-align: left;
  padding: var(--sp-2) var(--sp-3);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  background: rgba(30, 42, 64, 0.7);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.universe-tour-btn:hover { background: rgba(40, 54, 82, 0.95); }
.universe-tour-btn.active {
  border-color: var(--brand-link);
  color: var(--text-strong);
  background: rgba(40, 60, 96, 0.95);
}
.universe-tour-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(127, 168, 240, 0.45);
}
.universe-tour-station {
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border);
}
.universe-tour-station .ut-step {
  font-size: 11px;
  font-weight: 700;
  color: var(--brand-link);
}
.universe-tour-station .ut-level {
  margin-top: 2px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-strong);
}
.universe-tour-station .ut-reason {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text);
}

@media (max-width: 640px) {
  .universe-tour { width: 168px; top: var(--sp-3); left: var(--sp-3); padding: var(--sp-2); }
  .universe-tour-btn { font-size: 12px; }
  /* 390x844 실측(Playwright bounding_box): .universe-listlink 높이가 모바일 패딩/폰트로
     ~40px가 되어(desktop 전제였던 +40px 오프셋과 달리) 이전 값(top: calc(sp-3+40px))으로는
     리스트 링크 하단과 범례 상단이 겹쳤다(qa/shots/r2/m01-universe.png에서 육안 확인,
     실측 겹침 ~4px). 링크 하단(대략 sp-4 16px + 40px = 56px, 루트 기준) 아래로 여유 있게
     내려 겹침·클릭 영역 침범을 없앤다. */
  .universe-legend { top: calc(var(--sp-3) + 52px); right: var(--sp-3); }
  .universe-card { width: 200px; }
}

/* ── 임베드 모드(위젯) ─────────────────────────────────────────────
 * 타 사이트 히어로에 삽입되는 경량 위젯. UI 컨트롤을 숨기고 캡션만 노출한다.
 * 우주 담당이 마운트 시 .universe-embed 를 루트에 추가한다(universe.js). */
.universe-embed .universe-controls,
.universe-embed .universe-legend,
.universe-embed .universe-listlink,
.universe-embed .universe-tour {
  display: none !important;
}
/* 자동 카메라 시퀀스의 별 캡션(하단 중앙). 커서 이벤트 무시(위젯은 부모가 클릭 처리). */
.universe-embed-caption {
  position: absolute;
  left: 50%;
  bottom: var(--sp-5);
  transform: translateX(-50%);
  z-index: 6;
  max-width: min(88%, 460px);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--radius-pill);
  background: rgba(14, 21, 36, 0.78);
  border: 1px solid var(--border);
  color: var(--text-strong);
  text-align: center;
  backdrop-filter: blur(6px);
  pointer-events: none;
}
.universe-embed-caption .ut-reason {
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--text-strong);
}
@media (max-width: 640px) {
  .universe-embed-caption { font-size: 12px; bottom: var(--sp-4); }
  .universe-embed-caption .ut-reason { font-size: 12px; }
}

/* ── 히어로 배경 모드(홈 풀블리드) ──────────────────────────────────
 * 임베드의 상위 집합: 모든 크롬 + 캡션까지 숨긴 순수 배경. 무한 앰비언트 자동 카메라는
 * universe.js가 절차적으로 구동한다. 캔버스가 페이지 세로 스크롤을 가로채지 않도록
 * touch-action:auto 로 두고(휠/스크롤 통과), 라운드/최소높이는 부모(앱 셸)가 정하도록 푼다. */
.universe-hero {
  min-height: 100%;
  height: 100%;
  border-radius: 0;
}
.universe-hero .universe-embed-caption { display: none !important; }
.universe-hero .universe-canvas {
  cursor: default;
  touch-action: auto;   /* 히어로 위에서도 페이지 스크롤이 그대로 통과 */
}

@media (prefers-reduced-motion: reduce) {
  .universe-ctl { transition: none; }
  .universe-tour-btn { transition: none; }
}