시네마틱 마퀴 리빌

# 시네마틱 마퀴 리빌 — web 디자인 팩

## 이 스타일의 정체성
영화 예고편의 웹 번역이다. 잉크 블랙 캔버스에 21:9 시네마틱 풀블리드 키 비주얼이 화면 전체를 채우고, 스크롤하면 거대한 대상(자동차·아키텍처·프로덕트)이 부분 부분 순차 리빌된다. 무엇을 보면 이 스타일임을 아는가 — (1) 모든 메인 비주얼이 21:9에 가까운 와이드 시네마틱 프레임이고 좌우 끝까지 풀블리드이며, (2) 거대한 와이드 그로테스크 디스플레이가 클립 마스크(`clip-path`) 안에서 스텝하게 등장·교체되고, (3) 헤어라인 진행 인디케이터가 스텝 페이싱을 알린다. 무채에 시그널 컬러 단 하나, 의도적이고 절제된 스냅 페이싱.

## 색
- 배경: `#0a0a0b` (잉크 블랙). 전 페이지 동일.
- 표면(오버레이 패널·시네마틱 레터박스): `#121214`. 레터박스 바는 `#000000`.
- 텍스트: 헤딩·본문 `#f2f2f0` (오프화이트). 보조 메타: `#7d7d80`.
- 강조(시그널 컬러): `#ff4d2e` (시그널 오렌지-레드) 단 하나 — 진행 인디케이터 활성 스텝, 키워드 하이라이트, CTA에만. 면적 4% 이하. 브랜드 고유색 회피, 본 팩 지정값.
- 본문 대비: `#f2f2f0` on `#0a0a0b` ≈ 17:1 (WCAG AAA).

## 타이포그래피
- 디스플레이(거대 헤드라인): `Anton`(Google Fonts), weight 400(단일 굵기, 본래 헤비), 대체 `'Archivo', 'Arial Narrow', sans-serif`. 크기 `clamp(3rem, 11vw, 9rem)`, `letter-spacing: -0.01em`, line-height 0.94, 대문자. 와이드하고 압도적인 마퀴.
- 서브 디스플레이: `Archivo`(Google Fonts) weight 700~800, `clamp(1.4rem, 3vw, 2.6rem)`, `letter-spacing: -0.005em`, line-height 1.1.
- 본문: `Archivo` `1rem`, weight 400, line-height 1.55, 측정 60~70자.
- 메타·라벨·스텝 번호: `Archivo` `0.75rem`, weight 600, 대문자, `letter-spacing: 0.16em`. 스텝 번호는 등폭 느낌으로 `font-variant-numeric: tabular-nums`.
- 위계는 `heavy-display` — Anton의 거대 와이드 마퀴가 정체성. 가는 산세리프로 회귀하지 말 것.

## 레이아웃 / 그리드
- 콘텐츠 폭: 키 비주얼·히어로는 풀블리드(`100vw`). 텍스트 블록 최대 폭 1180px, 좌우 패딩 모바일 20px / 데스크탑 56px.
- 브레이크포인트: 720px, 1100px.
- `full-bleed` — 키 비주얼이 뷰포트 끝까지. 시네마틱 프레임은 21:9(`aspect-ratio: 21/9`), 모바일에서는 16:9로 완화.
- 각 리빌 섹션은 풀 뷰포트 높이(`100svh`) 스크롤 스텝.
- 섹션 수직 리듬: 섹션 간 0(스텝 스크롤). 텍스트 블록 내부 간격 `clamp(20px, 3vh, 40px)` (airy).
- 화면 하단 또는 우측에 헤어라인 스텝 진행 인디케이터(예: `01 — 02 — 03 — 04`, 활성만 시그널 컬러).

## 형태 / 질감
- 모서리: radius `0` — 직각. 시네마틱 프레임·패널·CTA 전부 각진 형태.
- 보더: `1px solid #2a2a2d` 헤어라인 — 패널·인디케이터 트랙에만.
- 그림자: 박스 섀도 금지. 깊이는 레터박스 바와 비주얼 위 어두운 그라디언트 오버레이(`linear-gradient(to top, rgba(10,10,11,0.8), transparent)`)로만.
- 키 비주얼: 21:9 풀블리드 이미지/영상. 클립 마스크 리빌 — `clip-path: inset()`이 스크롤에 따라 열림.
- CTA: 각진 솔리드 버튼, `#ff4d2e` 배경 + `#0a0a0b` 텍스트, 또는 1px 헤어라인 아웃라인.

## 모션
- `motion: snappy` — 의도적 스텝 페이싱. 흐르는 부드러움이 아니라 또렷한 스냅 컷.
- 마퀴 등장: 디스플레이 텍스트가 `clip-path: inset(0 100% 0 0)→inset(0 0 0 0)`로 좌→우 와이프, `420ms cubic-bezier(0.65,0,0.35,1)`. 라인별 80ms 스태거.
- 키 비주얼 리빌: 스크롤 진행도에 클립 마스크가 스텝하게 열림 — 부분 부분 순차 노출. `clip-path` 또는 `mask` 사용.
- 스텝 전환: 섹션 간 이동 시 짧은 컷(`200ms`) — 페이드보다 컷에 가깝게.
- 호버: CTA 색 반전 `160ms ease`, 인디케이터 스텝 호버 시 시그널 컬러 프리뷰.
- **reduced-motion 폴백 필수:** `prefers-reduced-motion: reduce`이면 클립 와이프·리빌·스태거 전부 제거 — 키 비주얼은 전체가 즉시 표시, 디스플레이 텍스트는 `opacity 1`로 고정. 정적 폴백을 적용 코드에 반드시 포함.

## 하지 말 것
- 라이트 모드·밝은 배경 금지 — 잉크 블랙 유지.
- 보라/인디고 그라디언트·그라디언트 텍스트 금지. 시그널 컬러는 한 색, 면적 4% 이하.
- 가늘고 절제된 산세리프로 회귀 금지 — 거대 와이드 헤비 디스플레이(Anton)가 정체성.
- 부드럽게 흐르는 패럴랙스·이지 모션 금지 — 의도적 스텝/스냅 컷.
- 둥근 카드·박스 섀도·중앙 정렬 히어로의 무조건 반복 금지.
- 키 비주얼을 21:9 아닌 정사각·세로 비율로 자르지 말 것.
- reduced-motion 폴백 없는 클립 리빌 금지.
- 이모지·blob·정체불명 일러스트 금지. 영감 브랜드(자동차 브랜드 등)의 로고·워드마크·고유색 복제 금지.

## 적용 예
- **히어로:** 21:9 풀블리드 키 비주얼이 화면을 채우고 하단에 어두운 그라디언트 오버레이. 그 위 거대 Anton 디스플레이 두 줄이 클립 와이프로 좌→우 등장(라인 스태거). 하단에 헤어라인 스텝 인디케이터(`01 — 04`). 시그널 오렌지-레드는 활성 스텝 한 점에만.
- **리빌 섹션:** 풀 뷰포트 스텝 — 거대 대상의 키 비주얼이 스크롤에 따라 클립 마스크로 부분 순차 노출. 우측 또는 하단에 짧은 Archivo 본문 단락 + 각진 시그널 CTA. 스텝 전환은 컷.
- **푸터:** 잉크 블랙 유지, 색 반전 없음. 상단 1px 헤어라인. 좌측 거대하지 않은 Archivo 워드마크, 우측 대문자 메타 내비. 하단 작은 카피라이트 + 진행 인디케이터 잔상 스타일의 점 표시.