오트 주얼리 누아르

# 오트 주얼리 누아르 — web 디자인 팩

## 이 스타일의 정체성
오트 주얼리(고급 보석)의 단일 오브제 쇼케이스다. 거의 순흑 캔버스 위, 단 하나의 제품 렌더가 화면 정중앙에 떠 있고 부드러운 라디얼 스포트라이트가 어둠 속에서 제품만 비춘다. 무엇을 보면 이 스타일임을 아는가 — (1) 배경 90% 이상이 순흑에 가까운 어둠이고 빛이 중앙 한 점에만 모이며, (2) 가는 하이콘트라스트 디스플레이 세리프가 제품 위·아래에 각각 한 줄씩만 놓이고, (3) 강조는 샴페인 골드 헤어라인 한 줄뿐이다. 영화적 단일 포커스 — 스크롤하면 제품이 천천히 회전하거나 스포트라이트가 표면을 훑는다. 정보는 거의 없고, 어둠과 빛과 활자의 절제.

## 색
- 배경: `#070707` (거의 순흑). 전 섹션 동일 — 라이트 섹션으로 바꾸지 않는다.
- 스포트라이트: 중앙 `radial-gradient(circle, #1c1a17 0%, #070707 62%)` — 어둠 속 미세한 웜 글로우. 별도 표면 색 없음.
- 텍스트: 헤딩·본문 `#ece7dd` (웜 오프화이트). 보조 메타: `#8a8478`.
- 강조(샴페인 골드): `#c8a96a` — 헤어라인 룰, CTA 보더, 활성 인디케이터에만. 면적 3% 이하. 골드를 면으로 칠하지 않는다.
- 본문 대비: `#ece7dd` on `#070707` ≈ 16:1 (WCAG AAA 충족).

## 타이포그래피
- 디스플레이 세리프(제품명·히어로 카피): `Cormorant`(Google Fonts), weight 300~400, 대체 `'Bodoni Moda', 'Times New Roman', serif`. 크기 `clamp(2.4rem, 6vw, 5.4rem)`, `letter-spacing: 0.01em`, line-height 1.08. 하이콘트라스트 세리프의 가늘고 우아한 획을 살린다.
- 부제·캡션: `Cormorant` `clamp(1rem, 1.6vw, 1.25rem)`, weight 400, italic 허용, `letter-spacing: 0.04em`.
- 메타·라벨(소재·캐럿·컬렉션): `Inter`(Google Fonts) `0.75rem`, weight 400, 대문자, `letter-spacing: 0.22em` — 넓은 자간이 럭셔리 시그널.
- 본문(제품 설명): `Cormorant` `1.125rem`, weight 400, line-height 1.6, 측정 56~64자. 본문조차 짧게.
- 위계는 `serif-editorial` — 거의 모든 텍스트가 디스플레이 세리프, 메타만 산세리프.

## 레이아웃 / 그리드
- 콘텐츠 최대 폭: 1100px. 좌우 패딩 모바일 24px / 데스크탑 64px.
- 브레이크포인트: 720px, 1080px.
- `centered` — 모든 핵심 요소가 수평 중앙축에 정렬. 제품이 중앙, 카피가 제품 위·아래 중앙.
- 섹션은 풀 뷰포트 높이(`min-height: 100svh`)에 가까운 한 화면 = 한 제품. 스크롤하면 다음 제품 섹션.
- 섹션 수직 리듬: 섹션 간 0(각 섹션이 풀 화면). 섹션 내부 요소 간격 `clamp(24px, 4vh, 56px)` (airy).
- 제품 렌더 영역: 중앙 정사각~세로 비율, 폭 `clamp(280px, 42vw, 520px)`.

## 형태 / 질감
- 모서리: radius `0` — 직각. 단, CTA 알약형 버튼은 예외적으로 `999px`(헤어라인 골드 보더, 채움 없음).
- 보더: 샴페인 골드 헤어라인 `1px solid #c8a96a` — 구분선과 CTA에만. 그 외 보더 없음.
- 그림자: 박스 섀도 금지. 깊이는 라디얼 스포트라이트(빛)로만 만든다.
- 제품 이미지: 배경 투명 PNG 가정, 어둠 위에 떠 있게. 제품 아래에 미세한 타원형 글로우(`#1c1a17`, blur)로 바닥 그림자를 암시.
- 아이콘 최소화. 필요 시 1px 골드 라인 아이콘.
- 분할선: 짧은 골드 헤어라인(폭 40~64px) 한 토막을 카피 사이 구분 장식으로.

## 모션
- `motion: playful` — 영화적이되 느리고 우아하다. 스내피·바운스 금지.
- 스크롤 연동: 제품이 스크롤 진행도에 따라 Y축으로 천천히 회전(섹션당 0~24deg) 또는 라디얼 스포트라이트가 표면을 훑음(`background-position` 또는 light layer 이동).
- 카피 등장: 디스플레이 세리프가 아래에서 위로 `opacity 0→1` + `translateY(16px→0)`, `900ms cubic-bezier(0.22,1,0.36,1)`.
- 호버: CTA는 골드 보더가 채움(`#c8a96a` 배경 + `#070707` 텍스트)으로 `260ms ease`.
- **reduced-motion 폴백 필수:** `prefers-reduced-motion: reduce`이면 회전·라이트 스윕·등장 트랜지션 전부 정지 — 제품은 고정 정면 렌더, 카피는 즉시 표시(`opacity 1`). 정적 폴백을 prompt 적용 코드에 반드시 포함.

## 하지 말 것
- 라이트 모드·밝은 배경 섹션 금지 — 전 페이지 순흑 유지.
- 보라/인디고 그라디언트 금지. 골드를 면 전체 그라디언트로 칠하지 말 것 — 헤어라인·텍스트 강조로만.
- 박스 섀도·둥근 카드 그리드 금지 — 깊이는 스포트라이트로만.
- 한 화면에 제품을 여럿 늘어놓지 말 것 — 단일 오브제 포커스가 정체성.
- 본문을 길게 늘리지 말 것 — 카피는 한두 줄, 절제.
- 스내피·바운스·통통 튀는 모션 금지 — 느리고 우아한 페이싱만.
- reduced-motion 폴백 없는 스크롤 회전 금지.
- 이모지·blob·그라디언트 텍스트 금지. 영감 브랜드의 로고·워드마크·독점 골드값 복제 금지 — 골드는 본 팩 지정값 `#c8a96a`.

## 적용 예
- **히어로:** 순흑 풀 뷰포트, 중앙 라디얼 스포트라이트. 제품 렌더 한 점이 중앙에 부유. 제품 위에 가는 디스플레이 세리프 한 줄(컬렉션명), 아래에 한 줄(제품명) + 그 아래 넓은 자간 산세리프 메타(`18K · 0.74 CT · ÉDITION 2026`). 짧은 골드 헤어라인 토막이 카피를 가른다.
- **제품 섹션:** 풀 화면 한 장 = 제품 하나. 스크롤 진입 시 제품이 천천히 회전, 좌측 또는 우측에 세리프 설명 단락(56~64자) + 골드 헤어라인 보더 알약 CTA(`DISCOVER`). reduced-motion이면 회전 없이 정면 고정.
- **푸터:** 순흑 유지, 색 반전 없음. 상단 골드 헤어라인 룰. 중앙 정렬 세리프 메종명 한 줄 + 그 아래 넓은 자간 산세리프 내비 링크 한 줄. 하단 작은 메타 카피라이트.