/* global.css — reset, body, 스테이지·레이아웃, 아이콘, reduced-motion. 토큰은 tokens.css */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}

body {
  margin: 0;
  font-family: var(--ns-font-family-sans);
  font-size: var(--ns-font-size-t5);
  line-height: var(--ns-line-height-t5);
  font-weight: var(--ns-font-weight-regular);
  color: var(--ns-color-fg-neutral);
  background: var(--ns-color-bg-layer-basement);
  -webkit-font-smoothing: antialiased;
  word-break: keep-all;      /* 한국어 어절 유지 */
  overflow-wrap: break-word;
}

h1, h2, h3, h4, h5, h6, p, figure, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: var(--ns-color-fg-informative); text-decoration: none; }
a:hover { color: var(--ns-color-fg-informative-contrast); }
img, svg { display: block; max-width: 100%; }
mark { background: none; color: inherit; }

:focus-visible {
  outline: 2px solid var(--ns-color-stroke-focus-ring);
  outline-offset: 2px;
}

/* ───────── 장면과 스테이지 ─────────
   .ns-scene  : 100vh 뷰포트. 배경(레터박스)은 톤이 결정.
   .ns-stage  : 1920×1080 고정 스테이지. --ns-stage-scale(scripts/stage.js)로 화면에 맞춰 축소.
   기획 5.3 레이아웃: 선언·질문은 중앙, 설명·데이터는 왼쪽, 비교는 분할. */
.ns-deck { position: relative; height: 100vh; overflow: hidden; }

/* 장면은 겹쳐 두고 한 번에 하나만 보인다. 전환은 크로스페이드 */
.ns-scene {
  position: absolute;
  inset: 0 0 0 176px;
  overflow: hidden;
  background: var(--ns-color-bg-layer-basement);
  color: var(--ns-color-fg-neutral);
  opacity: 0;
  visibility: hidden;
  transition: opacity 600ms var(--ns-timing-function-easing), visibility 0s 600ms;
}
.ns-scene[data-active="true"] {
  opacity: 1;
  visibility: visible;
  transition: opacity 600ms var(--ns-timing-function-easing), visibility 0s;
}
.ns-scene[data-tone="night"] {
  background: var(--ns-color-bg-night);
  color: var(--ns-color-fg-neutral-inverted);
}

/* 스테이지는 절대 배치로 중앙에 건다. 그리드/플렉스 중앙 정렬은 아이템이 컨테이너보다 클 때
   시작 모서리에 붙어 버려서, 화면이 1920×1080보다 작으면 화면이 통째로 치우친다. */
.ns-stage {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--ns-stage-width);
  height: var(--ns-stage-height);
  padding: var(--ns-stage-inset);
  transform: translate(-50%, -50%) scale(var(--ns-stage-scale, 1));
  transform-origin: center;
  overflow: hidden;
}
:fullscreen .ns-scene,
:-webkit-full-screen .ns-scene { left: 0; }
.ns-stage[data-layout="center"] {
  display: grid;
  place-items: center;
  text-align: center;
}
.ns-stage[data-layout="left"] {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: var(--ns-dimension-x10);
}
.ns-stage[data-layout="split"] {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ns-dimension-x30);
  align-items: center;
}

/* "Illustrative data / 시연용 예시" — 기획 4.3 */
.ns-stage__caption {
  position: absolute;
  left: var(--ns-stage-inset);
  bottom: var(--ns-dimension-x16);
  font-family: var(--ns-font-family-mono);
  font-size: var(--ns-font-size-data);
  line-height: var(--ns-line-height-data);
  color: var(--ns-color-fg-noise);
  letter-spacing: 0.04em;
}

/* ───────── 아이콘 (Design.md 13절) ───────── */
.ns-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  vertical-align: middle;
  width: var(--ns-icon-size, 24px);
  height: var(--ns-icon-size, 24px);
  color: var(--ns-icon-color, currentColor);
}
.ns-icon svg { width: 100%; height: 100%; }

/* ───────── Reduced motion (기획 10절) ─────────
   장면 타임라인은 GSAP 쪽 reducedMotion이 처리. CSS 전환만 여기서 끈다. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}