Editorial Longform

# Editorial Longform — web 디자인 팩

## 이 스타일의 정체성
잡지 기사를 웹으로 옮긴 롱폼 읽기 경험. 단일 좁은 본문 컬럼(측정 폭 60~68자), 큰 세리프 본문, 오버사이즈 세리프 헤드라인. 드롭캡으로 기사를 열고, 풀퀘이트(pull-quote)가 본문 흐름을 끊으며, 이미지는 본문 컬럼 폭을 의도적으로 깨고 넘친다. "스크롤하며 긴 글을 읽는 것이 즐겁다"가 정답 — 카드도 그리드도 없고 오직 읽기의 리듬.

## 색
- 배경: `#fbfaf7` (따뜻한 페이퍼 화이트)
- 텍스트: `#1a1a1a` (본문)
- 보조(메타·캡션·바이라인): `#8a8578`
- 강조: `#9a3324` (벽돌빛 레드) — 단 1개. 링크·드롭캡·섹션 디바이더에만. 면적 5% 이하.
- 헤어라인: `#dcd8cd` 1px
- 그라디언트 금지.

## 타이포그래피
- 본문 세리프: `"Source Serif 4", Georgia, serif` (Source Serif 4는 Google Fonts 공개 웹폰트)
- 헤드라인 세리프: `"Playfair Display", Georgia, serif` (Google Fonts) — 하이콘트라스트 디스플레이
- 메타/캡션 산세리프: `Inter, sans-serif` (Google Fonts)
- H1: `clamp(2.5rem, 5vw, 4rem)`, weight 700 (Playfair), line-height 1.1, letter-spacing `-0.01em`
- H2: `1.75rem`, weight 700 (Playfair)
- 본문: `1.25rem` (20px, 크게), weight 400 (Source Serif), line-height 1.75, 측정 폭 60~68자
- 드롭캡: 첫 문단 첫 글자 `float: left`, `font-size: 4.2rem`, line-height 0.85, 강조색, 3줄 높이
- 풀퀘이트: `1.6rem`, weight 400 italic (Playfair), 본문 컬럼보다 넓게 빠져나옴
- 캡션/바이라인: `0.8125rem`, Inter, letter-spacing `0.04em`, 대문자

## 레이아웃 / 그리드
- 본문 컬럼 폭 `680px` 고정(측정 60~68자 보장), 중앙 정렬
- 페이지 최대 폭 `1100px` — 이미지·풀퀘이트는 이 폭까지 본문 컬럼을 깨고 확장
- 브레이크포인트: `<720px` 본문 컬럼 100%(좌우 패딩 20px), `>720px` 680px 고정
- 섹션/문단 그룹 간격 `64px`, 문단 간 간격 `1.5em` (airy한 수직 리듬)
- 이미지: 본문 컬럼(680px)을 넘어 `1000px`까지 확장하거나 풀블리드. 캡션은 이미지 아래 작게.

## 형태 / 질감
- radius `0px` — 이미지·구분선 모두 직각.
- 그림자 전무.
- 카드 없음. 콘텐츠는 오직 타이포그래피 위계와 수직 간격으로 구성.
- 섹션 디바이더: 가운데 정렬된 작은 강조색 글리프(`✦` 또는 `—`) 또는 1px 헤어라인.
- 이미지: 흑백 또는 채도 낮춘 처리 권장, 직각.

## 모션
- subtle. 본문 진입 시 `opacity 0→1` + `translateY(12px)` 페이드인, `500ms ease-out`, 스크롤로 트리거.
- 링크 호버: 밑줄 두께가 `1px→2px`로, `150ms ease`.
- 읽기 진행 표시 바(상단 가는 강조색 바)는 선택적.
- 패럴럭스·과한 스크롤 효과 금지 — 읽기를 방해하지 않는다.

## 하지 말 것
- 보라/인디고 그라디언트 금지 — 배경은 따뜻한 페이퍼 단색.
- 본문을 산세리프로 쓰지 말 것 — 본문은 반드시 세리프, 20px, line-height 1.75.
- 본문 컬럼을 760px 넘게 넓히지 말 것(측정 폭 68자 초과 시 가독성 붕괴).
- 카드 그리드·3열 박스 반복 금지 — 콘텐츠는 단일 컬럼 흐름.
- 둥근 모서리·soft shadow 금지. 이모지 금지. blob 도형 금지.
- 중앙 정렬 히어로에 거대 버튼 두 개 박는 SaaS 패턴 금지.
- 강조색을 2개 이상 쓰지 말 것.

## 적용 예
- **히어로**: 페이퍼 배경, 상단에 작은 대문자 카테고리 라벨(Inter, 강조색), 그 아래 좌측 정렬 오버사이즈 H1(Playfair), 바이라인·날짜 메타. 풀블리드 리드 이미지가 그 아래.
- **본문 블록**: 680px 단일 컬럼, 20px 세리프 본문. 첫 문단에 드롭캡. 중간에 풀퀘이트(italic, 컬럼보다 넓게 확장). 이미지는 1000px로 컬럼을 깬다.
- **푸터**: 색 반전 없음. 상단 1px 헤어라인, 가운데 정렬 작은 글리프 디바이더, Inter 대문자 메타 텍스트, 다음 기사 링크.