/* ============================================================
   tokens.css — 색·간격·타이포 토큰과 기본 리셋
   여기서만 :root 변수를 정의한다. 다른 파일은 변수만 참조.
   ============================================================ */

:root {
  /* 표면 */
  --ink: #FAFAFA;              /* 페이지 배경 */
  --paper: #14161A;            /* 본문 글자 */
  --panel: #FFFFFF;            /* 카드 배경 */
  --shade: #E4E5E7;            /* 이미지 자리 */
  --stage: #0F1012;            /* 영상·포스터 뒷배경 */

  /* 보조 */
  --dim: rgba(20, 22, 26, 0.52);
  --line: rgba(20, 22, 26, 0.12);

  /* 어두운 영역 위 글자 (히어로·타일 오버레이) */
  --on-dark: #FBFAF8;
  --on-dark-dim: rgba(251, 250, 248, 0.72);
  --on-dark-line: rgba(251, 250, 248, 0.4);

  /* 간격 */
  --gap: 2px;
  --pad: clamp(16px, 4vw, 48px);

  /* 작품 카드 비율 — 세로 포스터 */
  --poster: 2 / 3;

  /* 전환 */
  --ease: cubic-bezier(.2, .7, .3, 1);
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: "Pretendard Variable", Pretendard, system-ui, sans-serif;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }

.skip { position: absolute; left: -9999px; }
.skip:focus {
  left: var(--pad);
  top: 12px;
  z-index: 10;
  background: var(--paper);
  color: var(--ink);
  padding: 8px 16px;
}

/* 스크롤 등장 */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .reveal { opacity: 1; transform: none; }
}