/* Shared cinematic film shell — used by all product films */
html, body { margin: 0; padding: 0; height: 100%; background: #0a0d12; }
body {
  font-family: 'Pretendard Variable', system-ui, sans-serif;
  color: #f6f3ec;
}
#root { width: 100vw; height: 100vh; position: relative; }

.v-bg { position: absolute; inset: 0; background: radial-gradient(ellipse 80% 60% at 50% 50%, #14181f 0%, #07090c 100%); }
.v-grain {
  position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity: 0.04; mix-blend-mode: overlay;
}
.v-vignette {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 80% 60% at 50% 50%, transparent 50%, rgba(0,0,0,0.65) 100%);
}
.v-bars { position: absolute; left: 0; right: 0; height: 60px; background: #000; z-index: 10; }
.v-bars.top { top: 0; }
.v-bars.bottom { bottom: 0; }

.serif { font-family: 'Cormorant Garamond', 'Noto Serif KR', serif; font-weight: 300; }
.serif-it { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 400; }
.mono { font-family: 'IBM Plex Mono', ui-monospace, monospace; }
.serif-ko { font-family: 'Noto Serif KR', serif; font-weight: 300; }

.frame-slot {
  position: absolute;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.02) 100%),
    repeating-linear-gradient(45deg, rgba(196,162,107,0.05) 0 12px, transparent 12px 24px),
    #14181f;
  border: 1px solid rgba(246,243,236,0.16);
  overflow: hidden;
}
.frame-slot::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 90% 70% at 50% 40%, transparent 50%, rgba(0,0,0,0.55) 100%);
}
.frame-slot .lbl {
  position: absolute; top: 14px; left: 14px;
  font-family: 'IBM Plex Mono', monospace; font-size: 12px;
  letter-spacing: 0.18em; color: rgba(246,243,236,0.55);
  z-index: 2;
}
.frame-slot .lbl::before { content: '◉ '; color: #d4b783; margin-right: 4px; }
.frame-slot .corner {
  position: absolute; width: 18px; height: 18px;
  border: 1px solid rgba(212,183,131,0.7); z-index: 2;
}
.frame-slot .corner.tl { top: 10px; left: 10px; border-right: 0; border-bottom: 0; }
.frame-slot .corner.tr { top: 10px; right: 10px; border-left: 0; border-bottom: 0; }
.frame-slot .corner.bl { bottom: 10px; left: 10px; border-right: 0; border-top: 0; }
.frame-slot .corner.br { bottom: 10px; right: 10px; border-left: 0; border-top: 0; }

/* ── 화면에서 감추되 보조기기에는 남기는 제목 ─────────────────────────────
   이 네 편에는 제목 태그가 하나도 없었습니다(h1~h6 · role=heading 전부 0 ·
   검증 10회차까지). 화면의 제목 역할은 144px .serif "FIRE-RATED" 인데,
   그것은 <Sprite start={0} end={4.5}> 안이라 **30초 중 4.5초만 DOM 에 있습니다**
   (실측: 로드 직후 있음 → +7초 뒤 0개). 재생 위치는 localStorage 에 남아
   중간부터 시작하기도 합니다. 그래서 그 div 를 h1 으로 바꾸는 것은 답이 아니고,
   타임라인 **밖**의 정적 h1 을 둡니다 — React·Babel 이 통째로 실패해도 남습니다.

   ★ 이 저장소에는 .sr-only 규칙이 여기 말고 없습니다(tk.css·jmw.css 에 없음).
     다른 파일에서 class="sr-only" 를 쓰면 글자가 그대로 보입니다.
   ★ clip 과 clip-path 를 함께 둡니다. clip 은 폐기됐지만 구형 브라우저가 보고,
     clip-path 만 두면 그 브라우저에서 1px 상자 안의 글자가 넘쳐 보입니다.
     width/height 를 0 으로 하지 않는 것은 0 이면 일부 스크린리더가 건너뛰기 때문입니다. */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ══ 모션 축소 설정 존중 (2026-08-08 · 디자인 10회차) ══
   이 네 편은 tk.css 를 **로드하지 않습니다.** 그래서 사이트의 모션 축소 규칙이
   여기에는 한 줄도 안 걸렸고, 실측에서 이 4페이지만 "멈추는 것 0곳" 이었습니다.

   · 30초 타임라인 자체는 animations.jsx 의 Stage 가 멈춥니다(설정을 켜면 정지 상태로 시작).
   · 여기서는 재생바 버튼의 배경 전이(0.12s, 페이지당 2곳)를 끕니다.
     그 전이는 React 인라인 style 이지만 !important 가 붙은 스타일시트 규칙이 이깁니다.
   설정이 꺼져 있으면 예전과 완전히 같습니다. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}