키아로스쿠로 모터스포츠 에디토리얼PREMIUM

# 키아로스쿠로 모터스포츠 에디토리얼 — web 디자인 팩

## 이 스타일의 정체성
순흑 면과 순백 면이 페이지를 엣지투엣지로 극적 분할(키아로스쿠로 명암 대비)하고, 그 위에 큰 에디토리얼 세리프 헤드라인과 좁은 본문 칼럼이 모터스포츠 매거진처럼 밀도 있게 앉으며, 레이싱 레드는 페이지 전체에 단 한 번만 찍히는 사이트다. 무엇을 보면 이 스타일임을 아는가 — 흑/백 영역이 흐릿한 그레이 없이 순흑·순백 고대비로 화면 끝까지 맞물린다, 헤드라인은 디스플레이 세리프인데 본문은 좁고 빽빽한 그로테스크 칼럼이다, 레드 한 점이 페이지에 딱 한 번 등장해 시선을 못박는다, 트랜지션은 100–150ms로 짧고 단호하다.

## 색
- 블랙 필드: `#0A0A0A`. 화이트 필드: `#FFFFFF`.
- 본문 잉크(화이트 필드 위): `#1A1A1A`. 블랙 필드 위 텍스트: `#FFFFFF`.
- 중간 그레이(캡션·메타): `#C4C4C4` (블랙 필드 위) / `#6A6A6A` (화이트 필드 위).
- 강조: 레이싱 레드 `#D40000` — 페이지 전체에 **단 한 번만**. 키워드 하이라이트 1개 또는 1px 라인 하나. 두 번 이상 절대 금지.
- 대비: 흑/백 면 모두 본문 ≈ 16:1 (WCAG AAA).

## 타이포그래피
- 디스플레이: `Newsreader`(Google Fonts) weight 600, 대체 `Georgia, 'Times New Roman', serif`. H1 `clamp(2.6rem, 5vw, 4.6rem)`, line-height 1.05, `letter-spacing: -0.015em`. 에디토리얼 헤드라인.
- 본문: `Inter`(Google Fonts) weight 400, `0.95rem`, line-height 1.55, 측정 48–58자 — 좁고 빽빽한 매거진 칼럼.
- 키커/섹션 라벨: `Inter` weight 700, `0.7rem`, 대문자, `letter-spacing: 0.18em`.
- 캡션/크레딧: `Inter` `0.72rem`, weight 400, italic 허용.
- 거대 인덱스/이슈 번호: `Newsreader` weight 600, `clamp(3rem,8vw,7rem)`.

## 레이아웃 / 그리드
- 풀블리드 — content_max 없음(데스크탑 1280px 뷰포트 기준). 흑/백 면이 화면 끝까지 맞물림. 텍스트는 면 안에서 내부 패딩 `clamp(24px, 5vw, 80px)`.
- 브레이크포인트: 768px, 1120px.
- 섹션마다 흑 영역 / 백 영역이 화면을 비대칭 분할(예: 좌 60% 흑 + 우 40% 백, 다음 섹션은 상 50/50 등). 분할 비율은 섹션마다 다르게.
- 밀도 높은 위계 — dense. 헤드라인·키커·본문·캡션이 가까이 붙어 매거진 페이지 밀도.
- 본문 칼럼은 좁게(48–58자), 한 면 안에 1–2칼럼.
- **명암 면 완결 — 평면 보이드 금지.** 키아로스쿠로의 흑·백 면은 둘 다 콘텐츠가 들어찬 매거진 plane이다. 흑 면이 비면 거대 인덱스 번호·헤드라인·본문 칼럼·키커가 dense하게 채우고, 백 면이 비면 풀블리드 그레이스케일 이미지 또는 dense 텍스트 칼럼으로 채운다. "헤드라인 한 줄만 있고 나머지가 평평한 검정"은 미완성이다 — 거대 인덱스 번호·캡션·1px 라인 디테일을 더해 매거진 밀도를 만든다.
- **간격 리듬:** 8px 베이스 스케일. 키커↔헤드라인 12px, 헤드라인↔본문 20px, 본문 칼럼 간 거터 32px, 캡션 8px. dense하되 간격은 일관. 텍스트는 면 내부 패딩 기준 광학 정렬.
- 각 면(흑·백)은 완결된 매거진 plane — 빈약한 파편 금지.

## 형태 / 질감
- 보더 거의 없음 — 흑/백 면 경계 자체가 구획 장치. 필요 시 1px 라인 하나(흑 위 #C4C4C4 / 백 위 #1A1A1A).
- 모서리 0px. 그림자 없음.
- 이미지: 흑백(그레이스케일) 또는 강한 콘트라스트 처리. radius 0px. 풀블리드 면에 꽉 차게.
- 아이콘: 1px 스트로크 라인, 최소한으로. 면 아이콘·이모지 금지.
- 버튼: 흑 위 → 흰 솔리드 + 흑 텍스트 / 백 위 → 흑 솔리드 + 흰 텍스트. 모서리 0px, 패딩 `12px 28px`, Inter 대문자 letter-spacing 0.1em.

## 모션
- 전환: `snappy` — `120ms cubic-bezier(0.3, 0, 0.2, 1)`.
- 스크롤 진입: 흑/백 면이 `clip-path` 또는 width로 짧게 와이프(140ms) — 명암 면이 단호하게 자리잡음. 텍스트는 `opacity 0→1` 120ms.
- 호버: 버튼 흑↔백 색 즉시 반전(110ms). 갤러리 항목 호버 시 이미지 그레이스케일 해제(`filter: grayscale(1)→grayscale(0)` 130ms).
- 링크 밑줄 즉시(opacity) 등장 — 느린 드로우 금지.
- `prefers-reduced-motion`: 면 와이프·필터 전환 제거, opacity만.
- 패럴랙스·바운스·1초 이상 모션 금지 — 모터스포츠다운 단호함.

## 컴포넌트
- **헤더/내비:** 높이 60px, 블랙 필드(`#0A0A0A`). 좌측 워드마크(Newsreader 600), 우측 메뉴(Inter 대문자 0.7rem 700, 항목 간격 24px). 하단 1px `#C4C4C4` 라인. 스크롤 시 즉시 고정.
- **스토리 블록:** 면 분할 안에 거대 인덱스 번호 + Newsreader 헤드라인 + 키커 + 좁은 Inter 본문 칼럼. 요소 간격 dense(키커↔헤드라인 12px, 헤드라인↔본문 20px). 면을 채우는 매거진 밀도 — 죽은 공백 금지.
- **거대 인덱스 번호:** Newsreader 600, `clamp(3rem,8vw,7rem)` — 빈 면을 채우는 에디토리얼 장치. 흑 면에 옅게, 헤드라인과 겹치거나 면 한 구석에 크게.
- **아이콘:** 1px 스트로크 라인, 최소한으로. 제너릭 아이콘 세트 금지 — 모터스포츠 모티프(체커기·랩타임·계기)를 1px 라인으로 크래프트. 면 아이콘·이모지 금지.
- **갤러리 카드:** 그레이스케일 이미지 + 하단 캡션 바(반대 명도 면). 호버 시 그레이스케일 해제 130ms.
- **기록 테이블:** 행 구분 1px 라인, Inter tabular-nums, 헤더행 반전 명도. 우승 행 1개만 좌측에 레드 1px 표시선(레드 단 한 번 사용처).
- **버튼:** 흑 위 → 흰 솔리드 + 흑 텍스트 / 백 위 → 흑 솔리드 + 흰 텍스트. 모서리 0px, 패딩 `12px 28px`, Inter 대문자 letter-spacing 0.1em. 호버 시 흑↔백 즉시 반전 110ms.

## 하지 말 것
- 레이싱 레드를 두 번 이상 쓰기 금지 — 페이지 전체 단 한 점(extreme sparseness가 정체성).
- 흑/백 분할을 흐릿한 그레이로 약화시키기 금지 — 순흑 `#0A0A0A` / 순백 `#FFFFFF` 고대비.
- 둥근 카드·그라디언트·이모지 금지.
- content_max 박스로 콘텐츠 가두기 금지 — 흑/백 면은 엣지투엣지.
- 본문 칼럼을 넓게(60자 초과) 쓰기 금지 — 좁고 빽빽한 매거진 칼럼.
- 컬러 사진 금지 — 그레이스케일/하이콘트라스트만.
- 느린 페이드(>200ms)·패럴랙스 금지 — 모션은 snappy.
- 헤드라인에 산세리프 쓰기 금지 — Newsreader 세리프.
- 평면 단색 데드 보이드 금지 — 흑·백 면은 둘 다 콘텐츠가 들어찬 매거진 plane. 빈 흑 면은 거대 인덱스 번호·dense 텍스트로, 빈 백 면은 그레이스케일 이미지로 채운다.
- 빈 플레이스홀더 채움 블록 금지 — 이미지 면에는 실제 그레이스케일 이미지를 담는다.
- 길 잃은 떠다니는 요소 금지 — 모든 요소는 흑/백 면 안 내부 패딩 정렬축에 묶인다.
- 정체성 약화 금지 — 순흑·순백 고대비 면 분할과 에디토리얼 세리프 위계가 모든 페이지에서 또렷해야 한다.
- 제너릭 플레이스홀더 아이콘 금지 — 모터스포츠 모티프로 크래프트한 1px 라인 아이콘만.

## 상세 페이지 (6종)

### 1. 히어로 (흑백 분할)
풀스크린(min 90vh)을 흑/백으로 비대칭 분할 — 좌 58% 블랙 필드 + 우 42% 화이트 필드. 블랙 필드에 거대 Newsreader 헤드라인(`clamp(2.6rem,5vw,4.6rem)`, 흰색) + 키커 + 좁은 Inter 본문(48–58자, #C4C4C4). 화이트 필드에 풀블리드 그레이스케일 모터스포츠 이미지. 헤드라인 키워드 1개에만 레이싱 레드(페이지 단 한 점). 좌하단 흰 솔리드 CTA 버튼.
**블랙 필드 완결(필수):** 블랙 필드가 헤드라인 한 줄만 있고 나머지가 평평하면 미완성이다 — 키커 + 헤드라인 + 본문 칼럼 + CTA를 dense하게 쌓고, 면 한 구석(상단 또는 측면)에 거대 Newsreader 인덱스/이슈 번호(`clamp(3rem,8vw,7rem)`, 옅은 #C4C4C4)를 더해 매거진 밀도를 만든다. 화이트 필드는 그레이스케일 이미지가 면을 풀블리드로 꽉 채운다 — 이미지 없으면 dense 텍스트 칼럼 또는 거대 인덱스로. 평면 데드 보이드 금지.

### 2. 헤더·내비게이션
높이 60px 블랙 필드 헤더, 하단 1px `#C4C4C4` 라인. 좌측 워드마크(Newsreader 600 1.2rem), 우측 5개 메뉴(Inter 700 대문자 0.7rem letter-spacing 0.18em, #FFFFFF). 호버 시 메뉴 텍스트 아래 1px 흰 인디케이터 즉시 등장. 모바일은 우측 1px 라인 햄버거.

### 3. 헤리티지 스토리 콘텐츠
화이트 필드 풀폭 섹션. 좌측에 거대 Newsreader 이슈 번호(`clamp(3rem,8vw,7rem)`, #1A1A1A) + 키커. 우측에 Newsreader 헤드라인 + 2칼럼 좁은 Inter 본문(각 48자). 본문 사이 1px 흑 구분 룰. 상단에 그레이스케일 이미지 풀폭 밴드. dense 밀도 — 요소 간격 좁게.

### 4. 모델 갤러리
블랙 필드 풀폭 섹션. 3열 그리드(모바일 1열) 그레이스케일 모델 이미지 카드. 각 카드 하단에 화이트 필드 캡션 바 — 모델명 Newsreader + 연식 Inter tabular. 카드 모서리 0px, 갭 2px(면이 거의 맞붙음). 호버 시 이미지 grayscale 해제 130ms.

### 5. 레이스 기록·인용
상 50% 블랙 / 하 50% 화이트 분할. 블랙 영역에 큰 Newsreader 인용문(흰색, 2–3줄) + Inter 출처 라벨. 화이트 영역에 레이스 기록 테이블 — 행 구분 1px 흑 라인, Inter tabular-nums, 헤더행 흑 반전. 우승 행 좌측에 레드 1px 표시선(레드 사용처일 경우 히어로에서 안 썼다면 여기). 8행 내외.

### 6. CTA·푸터
CTA: 블랙 필드 풀폭, 중앙 거대 Newsreader CTA 문구 + 흰 솔리드 버튼. 푸터: 화이트 필드, 상단 1px 흑 라인. 4컬럼(워드마크 / 라인업 / 헤리티지 / 법적고지), 각 컬럼 Inter 700 대문자 헤더 + 라인 메뉴. 최하단 1px 흑 라인 위 카피라이트(Inter 0.72rem #6A6A6A).