에디토리얼 컨피던스

# Editorial Confidence — web 디자인 팩

## 이 스타일의 정체성
잡지가 웹이 된 듯한 자신감 있는 편집 레이아웃이다. 넓은 화이트 캔버스에 비대칭 다단 그리드, 큰 디스플레이 세리프 헤드라인과 산세리프 본문이 잡지 펼침면처럼 짜인다. 단 하나의 진한 색(딥 포레스트)을 면 단위 블록으로 과감히 칠해 강조하고, 헤어라인 룰과 넉넉한 행간으로 차분한 권위를 낸다. 큰 사진을 단을 가로질러 비대칭으로 앉히고 캡션은 작은 산세리프로 단다.

## 색
- 배경: 따뜻한 화이트 `#fcfbf8`. 순백이 아니라 종이 기운의 미색.
- 표면/면강조 블록: 딥 포레스트 `#1f3a2e` — 섹션 한 단을 통째로 칠하는 면 단위 강조에 쓴다.
- 텍스트: 본문 `#1a1a17`(잉크), 보조/캡션 `#6b6a63`. 면강조 블록 위 텍스트는 `#fcfbf8`.
- 강조: 진한 색 단 하나(`#1f3a2e`). 링크·강조 밑줄·면 블록 모두 이 색. 보조 강조색 없음.
- 룰(분할선): 1px `#dcd9d0`(따뜻한 헤어라인).
- 면강조 블록 안 보조선: `rgba(252,251,248,0.24)`.

## 타이포그래피
- 디스플레이 폰트: `Fraunces`(Google Fonts), 대체 `Georgia, serif`. opsz 큰 값으로 디스플레이 광학.
- 본문 폰트: `Inter`(Google Fonts), 대체 `system-ui, sans-serif`.
- H1(피처 헤드라인): `clamp(2.6rem, 5.5vw, 5rem)`, weight 600, letter-spacing `-0.02em`, line-height 1.08.
- H2(섹션 제목): `clamp(1.8rem, 3vw, 2.75rem)`, weight 500, line-height 1.2.
- 본문: `Inter` `1.125rem`, weight 400, line-height 1.7, 측정 폭 62~70ch.
- 캡션/크레딧: `Inter` `0.8125rem`, weight 500, letter-spacing `0.04em`, 색 `#6b6a63`.
- 킥커(섹션 오버라인): `Inter` `0.75rem`, weight 600, letter-spacing `0.14em`, 대문자.
- 드롭캡 옵션: 본문 첫 글자 `Fraunces` 3행 높이로.

## 레이아웃 / 그리드
- 콘텐츠 최대 폭 1200px. 좌우 패딩 `clamp(24px, 5vw, 72px)`.
- 12열 비대칭 그리드, gap 32px. 텍스트 블록은 7열 폭에 두고 나머지 5열은 의도적 여백 또는 캡션 단으로.
- 섹션 수직 리듬: 섹션 간 `clamp(80px, 10vw, 144px)`.
- 큰 사진은 그리드 단을 가로질러 비대칭 배치 — 예: 8열 폭 이미지를 우측 정렬하고 좌측 4열은 헤드라인 텍스트.
- 브레이크포인트: 1024px / 720px. 720px 미만은 단일 단으로 무너뜨리되 헤어라인 룰 위계는 유지.
- 헤더: 비고정(스크롤과 함께 흘러감), 높이 80px. 좌측 워드마크(Fraunces), 우측 텍스트 메뉴, 하단에 1px `#dcd9d0` 룰.

## 형태 / 질감
- 카드: 보더·그림자 없음. 1px `#dcd9d0` 상단 룰 + 넉넉한 패딩으로만 구획. radius 0.
- 면강조 블록: radius 0, 딥 포레스트 단색 채움, 그리드 단을 통째로 점유.
- 이미지: radius 0(직각 모서리), 보더 없음. 큰 사진 + 그 아래 작은 산세리프 캡션 1줄.
- 링크: 본문 링크는 `#1f3a2e` 텍스트 + 1px 밑줄(`text-underline-offset: 3px`).
- 버튼: 채움 없는 텍스트 링크형 또는 1px `#1f3a2e` 보더 사각 버튼(radius 0), 패딩 14px 28px.
- 인용/풀쿼트: 좌측 2px `#1f3a2e` 세로 룰 + Fraunces 1.5rem 이탤릭.

## 모션 (웹)
- 절제. 스크롤 등장: 헤드라인·이미지가 `opacity 0→1` + `translateY(20px→0)`, duration 500ms, easing `ease-out`.
- 링크 호버: 밑줄 두께 1px→2px, 색 유지, 160ms ease-out.
- 면강조 블록 위 CTA 호버: 배경 `#fcfbf8`로 반전 + 텍스트 `#1f3a2e`, 180ms ease-out.
- 이미지 호버 모션 없음 — 편집물은 정적이다.
- `prefers-reduced-motion: reduce`이면 등장 모션 제거, 콘텐츠 즉시 표시. 호버 색 전환만 유지.

## 하지 말 것
- 보라/인디고 그라디언트 금지. 강조는 면 단위 딥 포레스트 단색 하나뿐.
- 둥근 카드·radius 금지 — 모든 카드·이미지·블록은 직각 모서리(radius 0).
- soft drop-shadow 금지 — 구획은 헤어라인 룰과 여백, 면 블록으로만.
- 강조색을 2개 이상 쓰지 말 것. 보조 강조색·네온 금지.
- 모든 섹션을 중앙 정렬 대칭으로 만들지 말 것 — 비대칭 다단이 정체성이다.
- 그라디언트 텍스트·이모지·정체불명 일러스트 금지.
- 본문을 좁은 카드에 욱여넣지 말 것 — 측정 폭 62~70ch의 넓은 단을 유지한다.
- 세리프와 산세리프 역할을 섞지 말 것 — 헤드라인은 Fraunces, 본문은 Inter로 고정.

## 적용 예
- **히어로:** `#fcfbf8` 배경. 좌측 4열에 킥커 + Fraunces 거대 H1 + 한 줄 데크 + 텍스트 링크 CTA, 우측 8열에 큰 사진(radius 0) + 하단 캡션. 헤더 아래 1px 룰로 시작.
- **카드:** 보더·그림자 없이 1px 상단 룰로만 구획. Fraunces H2 + Inter 본문 3줄 + 작은 캡션. radius 0.
- **면강조 섹션:** 한 섹션을 딥 포레스트 `#1f3a2e`로 통째 칠하고 `#fcfbf8` 텍스트 — Fraunces 풀쿼트 + 흰 보더 사각 CTA. 흑백 사진을 곁들이면 면 블록과 대비.
- **푸터:** `#1f3a2e` 면 블록으로 반전. `#fcfbf8` 텍스트, 좌측 Fraunces 워드마크 + 한 줄, 우측 3열 산세리프 링크. 상단 0.24 투명 흰 룰.