벨벳 다크 부티크

# 벨벳 다크 부티크 — web 디자인 팩

## 이 스타일의 정체성
딥 와인-차콜 배경에 모듈러 벤토 그리드로 제품·룩북 타일이 배열되고, 각 타일이 미세한 벨벳 같은 매트 그레인 질감과 따뜻한 골드-브론즈 헤어라인 보더로 어둠 속에 떠 있는 다크 부티크 웹이다. 무엇을 보면 이 스타일임을 아는가 — 배경이 순흑이 아닌 와인기 도는 짙은 차콜이고, 크기가 제각각인 타일들이 벤토 박스처럼 모듈러로 짜여 있으며, 각 타일 가장자리에 발광하지 않는 가느다란 골드-브론즈 선이 둘러 있고, 표면에 절차적 노이즈로 만든 벨벳 매트 질감이 미세하게 깔린다. 헤딩은 세리프, 메타는 작은 산세리프.

## 색
- 배경: `#1a1216` (딥 와인-차콜). 페이지 전체 단색.
- 표면(타일): `#241a20` (살짝 밝은 와인-차콜), 호버 시 `#2c2027`.
- 텍스트: `#ece4e0` (웜 오프화이트, 헤딩·본문). 메타·캡션은 `#9b8e8a`.
- 강조: 따뜻한 골드 단 하나 — `#c79a52` (보조 농담 브론즈 `#a87b3e`은 헤어라인 그라데이션에만). 키커·헤어라인 보더·링크·작은 가격 라벨에만, 면적 6% 이하. 골드를 넓은 면(타일 배경)으로 칠하지 않는다.
- 다크 위 본문 대비: `#ece4e0` on `#1a1216` ≈ 12:1 (WCAG AAA).
- 벨벳 질감: 타일 표면에 절차적 그레인 — `<svg>` `feTurbulence`(baseFrequency 1.2, monochrome) 또는 미세 도트 노이즈를 `opacity 0.04`, `mix-blend-mode: overlay`. 발광 없음. 특정 스톡 텍스처 파일 재배포 금지 — 코드 생성.

## 타이포그래피
- 헤딩: `Cormorant`(Google Fonts) weight 500~600, 대체 `Georgia, serif`. H1 `clamp(2.2rem, 4.5vw, 3.8rem)`, weight 600, `letter-spacing: 0`, line-height 1.18. 타일 제목 H3 `1.35rem` weight 500.
- 세컨더리 세리프(인용·룩북 카피): `Spectral`(Google Fonts) italic, weight 400.
- 키커/라벨: `Inter`(Google Fonts) `0.72rem`, weight 600, 대문자, `letter-spacing: 0.18em`, 색 `#c79a52`.
- 본문/메타: `Inter` `0.95rem`, weight 400, line-height 1.66, 측정 56~66자.
- 가격/번호 라벨: `Inter` `0.82rem`, weight 600, 색 `#c79a52`.

## 레이아웃 / 그리드
- 콘텐츠 최대 폭: `1200px`. 좌우 패딩 모바일 20px / 데스크탑 56px.
- 브레이크포인트: 720px, 1080px.
- 벤토 그리드 — `display: grid`, 12열 베이스, 타일이 `grid-column`/`grid-row` span을 제각각(2×2, 4×2, 6×3, 3×4 등)으로 잡아 모듈러 모자이크. 모든 타일이 같은 크기인 균등 그리드 금지.
- 갭: 타일 간 `16px`.
- 섹션 수직 리듬: 섹션 간 `clamp(72px, 8vw, 112px)` (balanced).
- 모바일에서는 벤토가 1~2열로 재배열되되 타일 크기 위계(큰 타일/작은 타일)는 유지.

## 형태 / 질감
- 모서리: 타일·이미지 radius `10px`. 버튼 radius `8px`.
- 보더: 모든 타일 `1px solid` 골드-브론즈 헤어라인 — `linear-gradient` 보더(`#c79a52 → #a87b3e`)를 `border-image` 또는 가상요소로. 발광 글로우 금지 — 선명한 1px 선.
- 그림자: 다크 배경에서 그림자 대신 표면 명도 차(`#241a20`)로 깊이. 타일 아래 아주 약한 `0 12px 32px rgba(0,0,0,0.4)`로 살짝 떠 보이게.
- 이미지: radius 10px, 채도 -10%, `brightness 0.95`. 위에 벨벳 그레인 오버레이를 살짝.
- 버튼: 고스트 — `1px solid #c79a52`, 골드 텍스트, 패딩 `12px 26px`, 대문자 `letter-spacing 0.14em`. 호버 시 골드 솔리드 채움 + `#1a1216` 텍스트.

## 모션
- 전환: `subtle` — `300ms cubic-bezier(0.33, 1, 0.68, 1)`.
- 스크롤 진입: 타일 `opacity 0 → 1` + `translateY(14px → 0)`, 360ms, 80ms씩 stagger.
- 호버: 타일 `translateY(-4px)` 300ms + 골드-브론즈 헤어라인이 한 단계 밝아짐. 타일 안 제품 이미지가 `scale 1.0 → 1.05` 600ms로 살짝 줌(타일 `overflow: hidden`). 그림자 한 단계 깊어짐.
- 링크는 골드 밑줄이 페이드로 나타남.
- 발광 펄스·네온 깜빡임·바운스·빠른 스냅 모션 금지 — 부드럽고 절제된 흐름.
- `prefers-reduced-motion`: 이미지 줌·진입 트랜스폼 제거, 호버는 헤어라인 밝기 변화만.

## 하지 말 것
- 순흑(`#000000`) 배경 금지 — 배경은 와인기 도는 차콜.
- 발광/네온/글로우 보더 금지 — 헤어라인은 선명한 비발광 1px 골드-브론즈 선. 이게 luminous-dark-bento 팩과 갈리는 핵심.
- 골드 외 강조색 금지. 골드를 타일 배경 면으로 칠하기 금지 — 선·텍스트·작은 라벨로만.
- 균등 크기 타일 그리드(모든 타일 같은 span) 금지 — 벤토는 크기 위계가 정체성.
- 보라/다색 그라디언트 금지(골드-브론즈 헤어라인 그라데이션 예외).
- 큰 radius(> 14px)·완전 각진 타일 금지.
- 스냅·바운스 모션, 발광 펄스 금지 — 모션은 subtle.
- 이모지·일러스트·blob·그라디언트 텍스트 금지.
- 스톡 텍스처 이미지 파일 의존 금지 — 벨벳 그레인은 SVG/CSS 생성.

## 적용 예
- **히어로:** 와인-차콜 배경. 상단에 골드 키커 + 대형 Cormorant 세리프 헤드라인 + Spectral italic 리드문 + 골드 고스트 CTA. 그 아래 곧바로 벤토 그리드 시작 — 첫 줄에 6×3 대형 룩북 타일 하나 + 3×3 작은 타일 둘.
- **타일(제품/룩북):** `#241a20` 표면, golld-브론즈 헤어라인 보더, radius 10px, 벨벳 그레인 오버레이. 안에 제품 이미지 + 골드 키커 + Cormorant 제목 + 골드 가격 라벨. 호버 시 `translateY(-4px)` + 이미지 1.05 줌 + 헤어라인 밝아짐.
- **푸터:** `#140d11` 더 깊은 와인-차콜, 상단 골드-브론즈 1px 헤어라인. 좌측 Cormorant 세리프 사이트명, 우측 Inter 대문자 메뉴 다단, 골드 소셜 링크. balanced 패딩(96px).