쿠튀르 컬러 블록

# 쿠튀르 컬러 블록 — web 디자인 팩

## 이 스타일의 정체성
흰 캔버스에 깊고 채도 있는 솔리드 컬러 블록이 큼직하게 비대칭으로 깔리고 그 위에 가는 디스플레이 세리프가 우아하게 얹히는, 패션 룩북의 쿠튀르 컬러 블록 웹이다. 무엇을 보면 이 스타일임을 아는가 — 화면의 절반 이상을 차지하는 거대한 단색 사각 블록(섹션당 한 색)이 화이트 여백과 칼처럼 만나고, 룩북 사진이 블록과 화이트 경계를 가로질러 걸치며, 가느다란 디스플레이 세리프 텍스트가 블록 위에 화이트로 또는 화이트 위에 잉크로 놓인다. 모션은 전혀 없다 — 정적이고 위엄 있는 편집 리듬.

## 색
- 배경: `#ffffff` (순백). 화이트는 컬러 블록과 대비를 위한 핵심 색면이다.
- 컬러 블록: 깊고 채도 있는 솔리드 3색 — 딥 버건디 `#5c1f2e`, 포레스트 `#1f3a2c`, 코발트 `#1f3a6e`. 한 섹션에는 한 색만. 블록은 그라디언트 없는 완전 솔리드.
- 텍스트: 화이트 위 `#1a1714` (잉크). 컬러 블록 위 `#f4efe8` (웜 화이트).
- 강조: 별도 강조색 없음 — 컬러 블록 3색이 곧 색 시스템 전부. 면강조색을 추가로 칠하지 않는다.
- 대비: `#1a1714` on `#ffffff` ≈ 16:1. `#f4efe8` on `#5c1f2e` ≈ 8.5:1, on `#1f3a2c` ≈ 8:1, on `#1f3a6e` ≈ 7.2:1 — 모두 WCAG AAA.

## 타이포그래피
- 디스플레이/헤드라인: `Playfair Display`(Google Fonts) weight 400~500, 대체 `Georgia, serif`. H1 `clamp(2.6rem, 6vw, 5.2rem)`, weight 400 (가늘게 — 우아함은 무게가 아님), `letter-spacing: 0`, line-height 1.1.
- 세컨더리 디스플레이(브랜드명·룩북 캡션): `Bodoni Moda`(Google Fonts, OFL) weight 400, italic 허용, 하이콘트라스트 디돈.
- 키커/라벨: `Bodoni Moda` 또는 시스템 산세리프 `0.78rem`, weight 500, 대문자, `letter-spacing: 0.24em`.
- 본문: `Playfair Display` 본문 사이즈는 무겁다 — 본문은 가벼운 산세리프 `Inter`(Google Fonts) `1rem`, weight 400, line-height 1.7, 측정 58~68자.
- 페이지 번호·메타: `Inter` `0.8rem`, weight 500.

## 레이아웃 / 그리드
- 콘텐츠 최대 폭: 전체는 풀블리드(블록이 화면 가장자리까지), 본문 텍스트 컬럼만 `560px`.
- 좌우 패딩: 모바일 0(블록은 가장자리까지) / 텍스트 패딩 24px, 데스크탑 텍스트 패딩 64px.
- 브레이크포인트: 720px, 1100px.
- 비대칭 12열 — 컬러 블록은 7~8열을 차지하고 한쪽 가장자리에 붙는다. 다음 섹션은 블록이 반대쪽. 절대 좌우 균등 분할하지 않는다.
- 룩북 사진은 컬러 블록과 화이트 경계를 가로질러 걸침 — `position` 으로 블록 밖 화이트 영역까지 24~40% 침범.
- 섹션 수직 리듬: 섹션 간 `clamp(120px, 13vw, 200px)` (airy — 넓은 화이트 숨 공간).

## 형태 / 질감
- 모서리: 컬러 블록·이미지·카드 모두 radius `0` — 칼 같은 직각이 쿠튀르 에디토리얼의 정체성.
- 보더: 거의 없음. 필요 시 헤어라인 `1px solid #1a1714`(화이트 영역) 또는 `1px solid #f4efe8`(블록 위).
- 그림자: 없음. 깊이는 컬러 블록 대 화이트의 색면 대비로만.
- 이미지: radius 0, 채도 자연값, 컬러 블록 경계를 가로지르게 배치. 보더 없음.
- 버튼: 고스트 — `1px solid` 잉크(화이트 위) 또는 웜화이트(블록 위), 패딩 `16px 38px`, 대문자 `letter-spacing 0.2em`. 채움 없음.

## 모션
- 전환: `none` — 트랜지션·애니메이션을 쓰지 않는다. 정적이고 위엄 있는 편집 리듬이 정체성.
- 스크롤 진입 애니메이션 없음 — 요소는 처음부터 제자리에 있다.
- 호버: 링크·버튼만 즉각적(0ms 또는 ≤ 60ms) 상태 변화 — 버튼은 호버 시 보더 안쪽이 즉시 채워지고 텍스트 색 반전. 이미지·블록·카드는 호버 반응 없음.
- 패럴랙스·페이드·슬라이드·줌·스태거 일절 금지.
- 모션이 없으므로 `prefers-reduced-motion` 폴백 불필요(이미 정적).

## 하지 말 것
- 모션 추가 금지 — 스크롤 페이드·패럴랙스·호버 줌·스태거 일절 금지. 이 팩의 motion 축은 none이다.
- 컬러 블록에 그라디언트 금지 — 완전 솔리드 단색. 보라/다색 그라디언트 금지.
- 컬러 블록 3색 외 색 추가 금지 — 강조 면색을 더 칠하지 않는다.
- 둥근 모서리(radius > 0) 금지 — 모든 사각 도형은 칼 같은 직각.
- 굵은 헤드라인(weight ≥ 600) 금지 — 디스플레이 세리프는 weight 400~500의 가는 우아함.
- 컬러 블록을 좌우 균등 분할(50/50) 금지 — 비대칭이 정체성.
- 박스 섀도·글래스 블러·그라디언트 텍스트·이모지·일러스트·blob 금지.
- 작은 카드 3개 균등 그리드 반복 금지 — 큰 컬러 블록이 곧 레이아웃 단위.

## 적용 예
- **히어로:** 우측 8열에 딥 버건디 솔리드 컬러 블록(화면 가장자리까지, radius 0). 블록 위에 웜화이트 가는 Playfair 세리프 초대형 헤드라인 + 대문자 넓은 자간 키커. 룩북 사진이 블록 좌측 경계를 가로질러 화이트 영역으로 침범. 좌측 화이트 영역에 잉크 고스트 CTA.
- **섹션(컬렉션):** 다음 섹션은 좌측 7열에 포레스트 솔리드 블록(반대쪽). 우측 화이트 영역에 `560px` 본문 컬럼 — 잉크 Playfair 제목 + Inter 본문 + 페이지 번호. 룩북 사진이 다시 경계를 걸침. 모션 없음.
- **푸터:** 풀블리드 코발트 솔리드 블록. 웜화이트 Bodoni Moda 브랜드명, 대문자 넓은 자간 메뉴 다단, 웜화이트 헤어라인 룰. radius 0, airy 패딩(160px). 전환·호버 모션 없음.