포에틱 호스피탈리티 스크롤

# 포에틱 호스피탈리티 스크롤 — web 디자인 팩

## 이 스타일의 정체성
럭셔리 호텔·리조트의 시적 웹 경험이다. 따뜻한 샌드·리넨 톤의 풀블리드 환경 사진이 화면을 채우고, 그 위에 가는 휴머니스트 세리프로 시처럼 짧은 카피가 한두 줄만 떠 있다. 무엇을 보면 이 스타일임을 아는가 — (1) 정보 밀도가 거의 없고 분위기와 절제된 카피만 있으며, (2) 풀블리드 사진이 스크롤하면 켄 번스식으로 천천히 줌·패닝되고 다음 장면으로 디졸브되며, (3) 강조는 따뜻한 테라코타 한 톤뿐이고 모든 텍스트가 가는 휴머니스트 세리프다. 빠른 정보 전달이 아니라 머무름의 페이싱.

## 색
- 배경: `#f3ede2` (샌드·리넨, 웜 오프화이트). 사진이 없는 텍스트 섹션의 바탕.
- 표면(텍스트 위 오버레이): 사진 위 텍스트 가독을 위한 미세 그라디언트 베일 `linear-gradient(to bottom, rgba(28,22,14,0.05), rgba(28,22,14,0.42))` — 균일 박스가 아닌 부드러운 베일.
- 텍스트: 사진 위 `#fbf8f1` (웜 화이트). 라이트 섹션 본문 `#3a3128` (웜 다크 브라운).
- 강조(테라코타): `#b4623f` 한 톤 — 짧은 헤어라인 룰, CTA 밑줄/보더, 챕터 번호에만. 면적 3% 이하. 본 팩 지정값.
- 사진 위 본문 대비: `#fbf8f1` on 베일 처리 영역 ≥ 4.5:1 보장 — 베일 그라디언트가 텍스트 영역에서 충분히 어둡게.

## 타이포그래피
- 디스플레이 세리프(시적 카피): `Cormorant Garamond`(Google Fonts), weight 300~400, 대체 `'EB Garamond', Georgia, serif`. 크기 `clamp(2rem, 5.5vw, 4.6rem)`, `letter-spacing: 0.005em`, line-height 1.16. 가늘고 우아한 휴머니스트 세리프.
- 본문(짧은 산문): `EB Garamond`(Google Fonts) `1.125rem`, weight 400, line-height 1.7, 측정 56~64자. 본문조차 시처럼 짧게.
- 메타·라벨(위치·계절·챕터): `EB Garamond` `0.8125rem`, weight 500, 대문자, `letter-spacing: 0.2em` — 넓은 자간이 호스피탈리티 시그널. 산세리프로 회귀하지 말 것.
- 챕터 번호: `Cormorant Garamond` italic, weight 300, `1.5rem`, 테라코타.
- 위계는 `serif-editorial` — 전 텍스트가 휴머니스트 세리프. 산세리프 미사용.

## 레이아웃 / 그리드
- 콘텐츠 폭: 풀블리드 사진은 `100vw`. 카피 텍스트 블록 최대 폭 720px, 사진 위에서는 좌하단 또는 중앙 하단 정렬.
- 좌우 패딩 모바일 24px / 데스크탑 72px.
- 브레이크포인트: 720px, 1080px.
- `full-bleed` — 환경 사진이 뷰포트 끝까지. 각 사진 섹션은 풀 뷰포트 높이(`100svh`).
- 섹션 수직 리듬: 사진 섹션 간 0(디졸브 전환). 라이트 텍스트 섹션 패딩 `clamp(96px, 16vh, 200px)` 상하 — 극단적으로 넉넉한 여백(airy).
- 한 화면 = 한 장면. 카피는 한두 줄, 그 외 비움.

## 형태 / 질감
- 모서리: radius `0` — 직각. 사진·텍스트 블록 직각.
- 보더: 없음에 가까움. 강조 장식은 짧은 테라코타 헤어라인 토막(폭 48~72px, `1px`)만.
- 그림자: 박스 섀도 금지. 깊이는 사진 위 그라디언트 베일로만.
- 사진: 풀블리드, 자르지 않고 `object-fit: cover`. 채도는 자연스럽게, 과한 필터 금지. 따뜻한 톤 유지.
- 아이콘: 거의 사용 안 함. 스크롤 힌트는 가는 세로 라인 한 줄 또는 텍스트(`SCROLL`).
- 텍스트 위 베일은 사진 하단부에만, 사진 전체를 덮지 않는다.

## 모션
- `motion: playful` — 시네마틱하고 느린 페이싱. 빠른 스냅 금지.
- 켄 번스: 사진이 스크롤 진행도 또는 진입 후 `scale(1→1.08)` + 미세한 `translate` 패닝, `8000ms` 이상 linear에 가깝게 — 거의 인지 못 할 만큼 느리게.
- 장면 전환: 다음 사진 섹션으로 `opacity` 디졸브 `1200ms ease-in-out`.
- 카피 등장: 세리프가 `opacity 0→1` + `translateY(20px→0)`, `1100ms cubic-bezier(0.22,1,0.36,1)`.
- 호버: CTA는 테라코타 밑줄이 좌→우로 그어짐 `320ms ease`.
- **reduced-motion 폴백 필수:** `prefers-reduced-motion: reduce`이면 켄 번스 줌·패닝·디졸브·등장 트랜지션 전부 정지 — 사진은 고정 정적, 카피는 즉시 표시. 정적 폴백을 적용 코드에 반드시 포함.

## 하지 말 것
- 보라/인디고 그라디언트·그라디언트 텍스트 금지. 강조는 테라코타 한 톤, 3% 이하.
- 산세리프로 회귀 금지 — 메타·라벨조차 휴머니스트 세리프.
- 정보를 빽빽이 채우지 말 것 — 한 화면 한두 줄, 비움이 정체성.
- 둥근 카드·박스 섀도·3카드 그리드 반복 금지.
- 빠른 스냅·바운스 모션 금지 — 켄 번스와 디졸브의 느린 페이싱.
- 사진에 과한 채도·비네팅·콘트라스트 필터 금지 — 따뜻한 자연 톤 유지.
- reduced-motion 폴백 없는 켄 번스 줌 금지.
- 이모지·blob·아이콘 남발 금지. 영감 호텔 브랜드의 로고·워드마크·고유색 복제 금지 — 테라코타는 본 팩 지정값.

## 적용 예
- **히어로:** 풀블리드 환경 사진(리조트 풍경)이 화면을 채우고 켄 번스로 아주 느리게 줌. 하단부 그라디언트 베일 위 좌하단에 가는 Cormorant Garamond 시적 카피 한두 줄 + 그 위 작은 넓은 자간 세리프 메타(위치·계절). 짧은 테라코타 헤어라인 토막.
- **장면 섹션:** 풀 뷰포트 한 장 = 한 장면. 사진 줌·패닝, 다음 섹션으로 디졸브. 또는 라이트 샌드 배경 텍스트 섹션 — 중앙 720px 폭에 세리프 산문 짧은 단락 + italic 테라코타 챕터 번호 + 테라코타 밑줄 CTA. 상하 극단 여백.
- **푸터:** 샌드 배경, 색 반전 없음. 상단 짧은 테라코타 헤어라인. 중앙 정렬 세리프 메종명 한 줄 + 그 아래 넓은 자간 세리프 내비 링크. 하단 작은 세리프 카피라이트.