택타일 럭셔리 에디토리얼

# 택타일 럭셔리 에디토리얼 — web 디자인 팩

## 이 스타일의 정체성
따뜻한 크림·샌드 종이 위에 미세한 그레인·패브릭 위브 텍스처가 깔리고, 그 위에 비대칭 다단 매거진 레이아웃이 펼쳐지는 촉각적 럭셔리 에디토리얼 웹이다. 무엇을 보면 이 스타일임을 아는가 — 배경이 순백이 아닌 크림빛이고 표면에 절차적 노이즈 그레인이 미세하게 보이며, 트랜지셔널 세리프 헤드라인과 산세리프 본문이 한 면에 섞이고, 살짝 둥근(radius 6~10px) 카드들이 종이가 겹친 듯 미묘한 그림자로 떠 있다. 칼럼 폭이 단마다 다른 비대칭 그리드.

## 색
- 배경: `#efe8da` (크림-샌드 페이퍼). 섹션 교차로 `#e7ddc9`(살짝 진한 샌드).
- 표면(카드): `#f6f1e6` (밝은 크림 페이퍼), 호버 시 `#fbf7ee`.
- 텍스트: `#2c2620` (잉크 브라운-블랙, 본문). 부제·메타·캡션은 `#6f6557`.
- 강조: 어스 톤 정확히 2개 — 머스타드 `#b8862f`, 올리브 `#5f6b3c`. 키커·링크·작은 태그·인용 룰에만, 합산 면적 8% 이하. 두 색을 한 컴포넌트 안에서 동시에 쓰지 않는다(머스타드는 강조 텍스트·태그, 올리브는 룰·보더 식으로 역할 분리).
- 본문 대비: `#2c2620` on `#efe8da` ≈ 11:1 (WCAG AAA).
- 텍스처: 절차적 그레인 — `background` 위에 `<svg>` `feTurbulence`(baseFrequency 0.9) 또는 반복 radial-gradient 도트 노이즈를 `opacity 0.05~0.08`, `mix-blend-mode: multiply`로 오버레이. 특정 스톡 텍스처 이미지 재배포 금지 — 코드로 생성한다.

## 타이포그래피
- 디스플레이/헤드라인: `Spectral`(Google Fonts) weight 400~600, 대체 `Georgia, serif`. H1 `clamp(2.4rem, 5vw, 4.2rem)`, weight 500, `letter-spacing: -0.01em`, line-height 1.16. H2 `clamp(1.6rem, 3vw, 2.4rem)` weight 600.
- 세컨더리 세리프(인용·리드문): `Source Serif 4`(Google Fonts) italic, weight 400, line-height 1.5.
- 키커/라벨: `Inter`(Google Fonts) `0.75rem`, weight 600, 대문자, `letter-spacing: 0.16em`, 색 `#b8862f`.
- 본문: `Inter` `1.0625rem`, weight 400, line-height 1.72, 측정 62~72자.
- 페이지 번호·메타: `Inter` `0.8rem`, weight 500, 색 `#6f6557`.

## 레이아웃 / 그리드
- 콘텐츠 최대 폭: `1180px`. 좌우 패딩 모바일 24px / 데스크탑 64px.
- 브레이크포인트: 720px, 1100px.
- 비대칭 12열 그리드 — 절대 균등 분할하지 않는다. 리드 텍스트 5열 / 이미지 7열, 다음 섹션은 이미지 4열 / 텍스트 8열 식으로 단마다 교대. 거터 32px.
- 섹션 수직 리듬: 섹션 간 `clamp(80px, 9vw, 128px)` (balanced — airy도 dense도 아닌 중간).
- 매거진 다단: 긴 본문 섹션은 데스크탑에서 2단 컬럼(`column-count: 2`, `column-gap: 48px`), 단 사이 `1px solid #5f6b3c` 룰.
- 카드는 그리드에 정렬하되 일부러 한 칸씩 어긋나게(`margin-top` 24~48px 오프셋) 배치해 매거진 리듬을 만든다.

## 형태 / 질감
- 모서리: 카드·이미지 radius `8px` (살짝 둥근 — 종이 모서리 느낌). 버튼 radius `6px`.
- 보더: 카드 `1px solid rgba(44,38,32,0.12)`. 인용·구획 룰은 `1px solid #5f6b3c` 또는 `2px solid #b8862f`.
- 그림자: 종이가 떠 있는 듯 부드럽고 따뜻한 다단 그림자 — `0 1px 2px rgba(44,38,32,0.06), 0 8px 24px rgba(44,38,32,0.10)`. 회색 그림자 금지 — 잉크 브라운 톤 그림자만.
- 이미지: radius 8px, 위에 `mix-blend-mode: multiply`의 그레인 오버레이를 살짝 얹어 종이에 인쇄된 느낌. 채도 -8%.
- 버튼: 머스타드 솔리드 `#b8862f` 배경 + `#efe8da` 텍스트, 패딩 `14px 28px`, weight 600. 또는 고스트 — `1px solid #2c2620` + 잉크 텍스트.

## 모션
- 전환: `subtle` — `260ms ease-out`.
- 스크롤 진입: `opacity 0 → 1` + `translateY(16px → 0)`, 420ms ease-out, 카드는 60ms씩 stagger.
- 호버: 카드 `translateY(-3px)` + 그림자 한 단계 깊어짐 260ms. 링크는 머스타드 밑줄 `text-decoration-thickness 1px → 2px`. 이미지 그레인 오버레이 `opacity` 미세 증가.
- 패럴랙스·바운스·회전 금지. 텍스처는 정적(움직이지 않는다).

## 하지 말 것
- 순백(`#ffffff`) 배경 금지 — 배경은 항상 크림-샌드 계열.
- 보라/인디고 그라디언트 금지. 다색 그라디언트 금지.
- 회색(중성 그레이) 그림자 금지 — 그림자는 잉크 브라운 톤.
- 균등 분할 그리드(모든 카드 같은 폭·같은 높이의 3카드 반복) 금지 — 비대칭·오프셋이 정체성.
- 강조색 3개 이상 금지. 머스타드·올리브를 한 컴포넌트에 동시 사용 금지.
- 큰 radius(> 12px)·완전 각진(radius 0) 카드 금지 — 8px 종이 모서리 고정.
- 글래스/블러 패널, 네온, 그라디언트 텍스트, 이모지, blob 도형 금지.
- 스톡 텍스처 이미지 파일 의존 금지 — 텍스처는 SVG/CSS로 생성.

## 적용 예
- **히어로:** 크림 배경 + 그레인 오버레이. 좌측 5열에 머스타드 키커 + 초대형 Spectral 세리프 헤드라인 + Source Serif 4 italic 리드문 + 머스타드 솔리드 CTA. 우측 7열에 radius 8px 대형 이미지(그레인 멀티플라이 오버레이). 텍스트 컬럼은 이미지보다 24px 위로 오프셋.
- **카드(아티클/컬렉션):** `#f6f1e6` 표면, radius 8px, 따뜻한 다단 그림자. 안에 작은 이미지 + 머스타드 키커 + Spectral 제목 + Inter 본문 발췌 + 올리브 1px 룰 + 페이지 번호 메타. 3열로 깔되 가운데 카드를 32px 아래로 오프셋.
- **푸터:** `#e7ddc9` 진한 샌드, 상단 `2px solid #b8862f` 룰. 좌측 Spectral 세리프 사이트명, 우측 Inter 대문자 메뉴 다단. 광활하지 않고 balanced 패딩(64px). 하단에 올리브 작은 카피라이트.