모뉴멘탈 하이퍼카 디스플레이PREMIUM

# 모뉴멘탈 하이퍼카 디스플레이 — web 디자인 팩

## 이 스타일의 정체성
시네마 블랙(near-black) 캔버스 위에 거대한 모뉴멘탈 디스플레이 타이포가 한 단어씩 화면을 가로지르며, 타이포 자체가 콘텐츠이고 이미지·컴포넌트는 거의 등장하지 않는 하이퍼카 절제의 사이트다. 무엇을 보면 이 스타일임을 아는가 — 헤드라인 한 단어가 뷰포트 폭의 80–100%를 차지할 만큼 압도적으로 크다, 색은 거의 순흑이고 EB 블루는 페이지 전체에 단 한 점만 찍힌다, 섹션 하나가 곧 풀스크린 스테이트먼트 한 컷이다, 모션은 느린 페이드뿐 — 스냅·클립 리빌이 없다.

## 색
- 배경: `#080809` (시네마 블랙). 패널·표면: `#14151A`.
- 텍스트(디스플레이): `#ECECEC`. 보조·캡션: `#76787F`.
- 강조: EB 블루 단 하나 — `#1A2D5A`. 페이지 전체에 단 한 점(작은 라벨·1px 라인·인덱스 숫자)에만. 큰 면 사용 절대 금지.
- 본문 대비: `#ECECEC` on `#080809` ≈ 15:1 (WCAG AAA).

## 타이포그래피
- 디스플레이: `Anton`(Google Fonts) weight 400, 대체 `'Arial Black', Impact, sans-serif`. 모뉴멘탈 헤드라인 `clamp(4rem, 16vw, 16rem)`, line-height 0.92, `letter-spacing: -0.02em`. 한 단어 또는 두 단어만.
- 본문: `Inter`(Google Fonts) weight 400, `1.0625rem`, line-height 1.7, 측정 56–66자. 본문은 작게 — 디스플레이와의 스케일 대비가 정체성.
- 캡션/인덱스 라벨: `Inter` `0.74rem`, weight 500, 대문자, `letter-spacing: 0.2em`, 색 `#76787F`. 인덱스 숫자(01·02)는 EB 블루.

## 레이아웃 / 그리드
- 풀블리드 — content_max 없음, 엣지투엣지(데스크탑 1280px 뷰포트 기준). 텍스트 블록만 좌우 패딩 `clamp(24px, 6vw, 96px)`.
- 브레이크포인트: 768px, 1200px.
- 각 섹션 = 풀스크린(min-height 100vh) 스테이트먼트 한 컷. 거대 타이포 한 점 + 작은 보조 텍스트.
- 컴포넌트 거의 없음 — 섹션 간 호흡은 100vh 단위 스크롤로.
- 디스플레이 타이포는 좌하단 정렬 또는 화면 가로지름(`white-space: nowrap` + 약간의 오버플로 허용).
- **구성 균형 — 평면 보이드 금지.** 절제는 정체성이지만 "평평한 단색 검정 면"은 미완성으로 읽힌다. 거대 타이포가 좌하단에 앉아 상단이 비면, 그 빈 영역을 반드시 시네마틱 트리트먼트로 해소한다: (a) 상단에서 하단으로 `#080809→#14151A`로 떨어지는 미세 시네마틱 그라디언트 필드(라디얼 또는 리니어, 거의 감지 안 될 만큼), (b) 화면 우상~중앙에 조각적 하이퍼카 실루엣 SVG 폼(단색 `#14151A` 면 또는 1px `#1B1D24` 윤곽선, 화면 폭의 40–55%, 음각처럼), (c) 거대 모노그램/이니셜 한 글자(Anton, `#0E0F12`, 화면 높이의 70%, near-invisible ghost), (d) 우측 세로 스펙 리드아웃 스택(Inter Mono식 작은 수치 3–4행). 빈 상단에 (a)~(d) 중 최소 2개를 겹쳐 깐다 — 타이포 가독은 유지하되 면이 비어 보이지 않게.
- **간격 리듬:** 8px 베이스 스케일. 디스플레이↔인덱스 라벨 16px, 인덱스↔본문 24px, 본문 블록 폭 상한 540px. 텍스트 블록은 좌하단에서 패딩 `clamp(40px,6vw,96px)` 안쪽으로 광학 정렬(시각 베이스라인 기준).
- 각 100vh 섹션은 완결된 한 컷 — 거대 타이포 + 인덱스 + 본문 + 구성 비주얼(위 트리트먼트)이 모두 자리잡아야 한다. 타이포만 덜렁 있는 빈약한 컷 금지.

## 형태 / 질감
- 보더·그림자·아이콘 거의 없음. 모서리 0px.
- 구분이 필요하면 1px `#14151A` 라인 하나만.
- 이미지: 거의 쓰지 않음. 쓸 경우 풀블리드 단일 컷, 채도 -15%, 어두운 그레이딩, 텍스트 가독을 위한 좌하단 어둠 그라데이션 오버레이.
- 버튼: 텍스트 링크형 — `Inter` 대문자 + 1px 하단 EB 블루 언더라인. 박스 버튼 최소화.

## 모션
- 전환: `subtle` — `600ms cubic-bezier(0.16, 1, 0.3, 1)` (느린 ease-out).
- 스크롤 진입: 디스플레이 타이포가 `opacity 0 → 1` + `translateY(40px → 0)`, 700ms, 단어별 90ms stagger — 천천히, 무게감 있게.
- 호버: 텍스트 링크 언더라인이 좌→우로 600ms 드로우. 디스플레이 타이포는 호버 반응 없음.
- 스크롤 패럴랙스 허용 — 디스플레이 타이포가 배경보다 0.85배 느리게(미세하게만).
- `prefers-reduced-motion`: 진입 트랜스폼·패럴랙스 제거, opacity만.
- 스냅·클립 리빌·바운스·빠른 모션 금지 — 모든 전환은 느리고 무겁다.

## 컴포넌트
- **헤더/내비:** 투명 오버레이, 높이 72px, 좌우 패딩 `clamp(24px,6vw,96px)`. 좌측 워드마크(Anton 작게 1.1rem), 우측 메뉴 3–4개(Inter 대문자 0.74rem letter-spacing 0.2em, 항목 간격 32px). 스크롤해도 배경 채우지 않음 — 투명 유지. 메뉴 호버: 항목 아래 1px EB 블루 언더라인이 좌→우 600ms 드로우.
- **스테이트먼트 블록:** 풀스크린, 좌하단에 거대 Anton 디스플레이 1–2단어 + 그 위 작은 인덱스 숫자(EB 블루) + 그 아래 1–2줄 Inter 본문. 빈 상단·우측은 시네마틱 그라디언트 필드 + 조각적 하이퍼카 실루엣 SVG 또는 거대 ghost 모노그램으로 해소(레이아웃 항 참조).
- **스펙 리드아웃:** 화면 우측에 작은 등폭형 수치 스택 — 각 행 인덱스 라벨(`0–100` `TOP SPEED` 등 Inter 대문자 0.7rem #76787F) + 수치(Inter 1.6rem #ECECEC tabular-nums) + 단위(0.7em). 행 간 1px `#14151A` 헤어라인. 박스 보더 없이 수치만.
- **하이퍼카 실루엣 SVG:** 조각적 단일 폼 — 직선·완만한 곡선으로 추상화한 차체 윤곽. 단색 `#14151A` 면 또는 1px `#1B1D24` 윤곽선. 사진이 아닌 미니멀 SVG 폼. 빈 면을 채우는 구성 요소.
- **인용 카드:** 보더 없음 — 큰 Anton 한 단어 + 작은 Inter 출처. 카드 박스 그리지 않음.
- **갤러리 항목:** 풀블리드 이미지 한 컷 + 좌하단 인덱스·캡션 오버레이. 그리드 타일화 금지.

## 하지 말 것
- 스냅 클립 리빌·마스크 와이프 금지(cinematic-marque-reveal 자리) — 느린 페이드만.
- 사진 콜라주·미디어 타일 그리드 금지 — 이미지는 풀블리드 단일 컷만, 그것도 최소로.
- 컴포넌트(카드·배지·태그)를 늘려 화면 채우기 금지 — 타이포가 콘텐츠.
- 디스플레이 타이포를 작게(`clamp` 상한 8rem 미만) 쓰기 금지 — 모뉴멘탈해야 함.
- EB 블루를 큰 면·버튼 배경으로 쓰기 금지 — 페이지 전체 단 한 점.
- 그라디언트 텍스트·둥근 카드·이모지·글로우 금지.
- content_max 박스에 콘텐츠 가두기 금지 — 풀블리드 엣지투엣지.
- 빠른 스냅·바운스 모션 금지 — 600ms 이상의 무거운 페이드.
- **평면 단색 데드 보이드 절대 금지** — 히어로·섹션 상단 절반이 평평한 검정으로 비면 미완성이다. 시네마틱 그라디언트 필드 / 조각적 하이퍼카 실루엣 SVG / 거대 ghost 모노그램 / 스펙 리드아웃 중 최소 2개로 반드시 해소. 절제는 "비어 보임"이 아니다.
- 빈 플레이스홀더 채움 블록(회색 사각형·"이미지 영역") 금지 — 비주얼 프레임에는 실제 SVG 폼·그라디언트 필드를 담는다.
- 길 잃은 떠다니는 요소 금지 — 모든 요소는 좌하단 정렬축 또는 우측 스펙 스택에 묶인다.
- 정체성 약화 금지 — 거대 모뉴멘탈 타이포는 모든 섹션에서 압도적이어야 한다. 타이포를 작게 줄여 일반 다크 사이트로 회귀 금지.
- 제너릭 플레이스홀더 아이콘(빈 사각형·일반 아이콘 세트) 금지 — 이 팩은 아이콘 거의 없음, 필요 시 1px 라인 크롭마크만.

## 상세 페이지 (5종)

### 1. 히어로 (모뉴멘탈 타이포)
풀스크린(100vh) `#080809` 캔버스. 화면 좌하단에 거대 Anton 디스플레이 헤드라인 1단어(`clamp(4rem,16vw,16rem)`, line-height 0.92) — 화면 폭의 80–100%를 차지하며 약간 오버플로 허용. 그 위에 인덱스 라벨(`01 / HYPERCAR`, EB 블루). 헤드라인 아래 1줄 Inter 본문(56–66자). 우상단 투명 내비.
**상단 빈 영역 해소(필수):** 헤드라인이 좌하단을 차지하면 화면 상단 ~55%가 빈다 — 이 영역을 평면 검정으로 두지 말 것. (1) 캔버스 전체에 `#080809→#14151A` 미세 시네마틱 그라디언트(상단이 약간 밝게, 거의 감지 안 될 정도), (2) 화면 우측 상단~중앙을 가로질러 조각적 하이퍼카 실루엣 SVG 폼(단색 `#14151A` 또는 1px `#1B1D24` 윤곽, 폭 40–55vw, 음각처럼 어둠에 잠김), (3) 우측에 세로 스펙 리드아웃 스택(`0–100 / 2.8s`, `TOP SPEED / 350` 등 3행). 이 세 트리트먼트를 겹쳐 상단을 채운다. 헤드라인은 가독을 위해 그라디언트·실루엣 위에서도 충분한 대비 확보. 거대 ghost 모노그램(near-black `#0E0F12` Anton 한 글자, 화면 높이 70%)을 추가 레이어로 깔아도 됨. 평면 데드 보이드 절대 금지.

### 2. 풀스크린 스테이트먼트
연속 2–3개의 100vh 섹션, 각각 한 컷 스테이트먼트. 섹션마다 좌하단 거대 Anton 1–2단어 + 인덱스 숫자 + 본문 1–2줄. 섹션 배경은 `#080809`와 `#14151A`를 교대. 스크롤 시 타이포가 700ms 페이드+업, 단어별 stagger. 패럴랙스로 타이포가 배경보다 살짝 느리게.
각 섹션의 빈 상단·반대편은 히어로와 같은 원리로 해소 — 시네마틱 그라디언트 필드 + 조각적 SVG 폼 또는 거대 ghost 모노그램(섹션마다 다른 글자) + 우측 스펙 리드아웃. 한 섹션도 평면 보이드로 두지 말 것 — 각 컷은 타이포 + 구성 비주얼이 함께 완결된다.

### 3. 갤러리
풀블리드 이미지 시퀀스 — 각 항목이 100vh, 단일 컷 풀스크린(채도 -15%, 어두운 그레이딩). 좌하단 어둠 그라데이션 오버레이 위에 인덱스 숫자(EB 블루) + 모델명 Anton + 짧은 Inter 캡션. 타일 그리드 금지 — 한 번에 한 컷, 스크롤로 넘김.

### 4. 헤리티지·인용
`#14151A` 패널 풀스크린(상단 미세 시네마틱 그라디언트). 중앙 좌측에 거대 Anton 인용 키워드 1단어 + 그 아래 작은 Inter 인용문(2–3줄, 56자) + 출처 라벨(대문자, #76787F). 좌측에 1px EB 블루 세로 룰 하나. 카드 박스 없음. 우측 빈 영역에 거대 ghost 모노그램 또는 조각적 SVG 폼을 깔아 평면 보이드를 해소.

### 5. CTA·푸터
CTA: 풀스크린 `#080809`(미세 시네마틱 그라디언트), 중앙 거대 Anton CTA 문구 1–2단어 + 그 아래 텍스트 링크(대문자 + EB 블루 언더라인). CTA 문구가 중앙에 오면 거대 ghost 모노그램을 배경 레이어로 깔아 빈 면을 해소. 푸터: 풀폭 `#080809`, 상단 1px `#14151A` 룰. 좌하단 워드마크(Anton) + 우측 메뉴 3컬럼(Inter 대문자 0.74rem, 컬럼 간격 48px), 최하단 카피라이트. 패딩 `clamp(64px,8vw,128px)`. 컬럼 헤더↔링크 16px, 링크 행 간 10px 일관 간격.