아르누보 플로리도PREMIUM

# 아르누보 플로리도 — web 디자인 팩

## 이 스타일의 정체성
휘감기는 식물 채찍 곡선(whiplash curve) 장식이 섹션 경계·프레임·구분선을 휘감고, 흐르는 디스플레이 세리프가 위계를 만들며, 차분한 머스터드·세이지·플럼의 벨 에포크 팔레트가 크림 배경을 채우는 1890년대 아르누보 사이트다. 무엇을 보면 이 스타일임을 아는가 — 직선 보더 대신 SVG 채찍 곡선이 콘텐츠를 감싸고 흐른다, 헤드라인이 우아하게 흐르는 세리프이고 본문도 가라몬드 세리프다, 색이 채도 높은 원색이 아니라 19세기풍 머스터드/세이지/플럼이다, 곡선 장식이 부드럽게 드로우·페이드하며 등장한다.

## 색
- 배경: `#F2EBD9` (크림). 표면 변주: `#EAE1CB`.
- 잉크: `#2E2A22` (본문·헤드라인).
- 강조: 머스터드 골드 `#C9A227` (메인 강조·곡선 장식 stroke). 세이지 `#6E7E5B` (보조 면·구분선). 플럼 `#6B4869` (딥 강조·포인트). 이 세 색만 — 그 외 강조색 금지.
- 본문 대비: `#2E2A22` on `#F2EBD9` ≈ 11:1 (WCAG AAA).

## 타이포그래피
- 디스플레이: `Cormorant Garamond`(Google Fonts) weight 600, 대체 `Georgia, 'Times New Roman', serif`. H1 `clamp(2.6rem, 5vw, 4.8rem)`, line-height 1.1, `letter-spacing: 0`. 헤드라인 옵션으로 `Cormorant SC`(small-caps) 사용 가능.
- 본문: `EB Garamond`(Google Fonts) weight 400, `1.1rem`, line-height 1.7, 측정 60–70자.
- 키커/라벨: `EB Garamond` weight 500, `0.82rem`, small-caps 또는 대문자, `letter-spacing: 0.16em`, 색 `#6B4869`.
- 장식 이니셜(드롭캡): `Cormorant Garamond` weight 600, 본문 첫 글자, 3줄 높이, 색 `#C9A227`.

## 레이아웃 / 그리드
- 콘텐츠 최대 폭: `1080px`(데스크탑 1280px 뷰포트 기준, 좌우 여백 100px). 좌우 패딩 모바일 24px / 데스크탑 56px.
- 브레이크포인트: 720px, 1080px.
- 비대칭 레이아웃 — 텍스트 블록·이미지가 채찍 곡선 흐름을 따라 좌우 어긋나게 배치. 엄격한 그리드 회피.
- 채찍 곡선 SVG 장식이 섹션 경계(상·하단)와 콘텐츠 프레임을 휘감음 — 섹션 구분이 직선 룰이 아니라 흐르는 곡선 밴드.
- 섹션 수직 리듬: `clamp(80px, 9vw, 128px)` (balanced).
- **장식 밀도 — 모든 면에 아르누보 장식이 살아있어야 한다.** 채찍 곡선 SVG는 "선 한두 개"로 끝나지 않는다. 각 섹션마다 최소: (a) 섹션 상·하단 경계를 휘감는 채찍 곡선 밴드 1쌍(stroke 1.5–2.5px, 끝이 가늘어지며 꽃봉오리·잎 모티프로 마감), (b) 콘텐츠 프레임을 따라 흐르는 코너 필리그리(좌상·우하 등 2코너에 덩굴 곡선), (c) 면 빈 곳에 옅은(opacity 0.12–0.2) 큰 채찍 곡선 또는 꽃 모티프 1점. 비어 보이는 크림 면은 옅은 필리그리·곡선 워터마크로 채운다.
- **간격 리듬:** 8px 베이스 스케일. 키커↔헤드라인 20px, 헤드라인↔리드문 24px, 리드문↔CTA 32px. 곡선 밴드와 콘텐츠 사이 여백 `clamp(32px,4vw,56px)` — 곡선이 텍스트를 침범하지 않게 광학 정렬.
- 각 섹션은 완결 — 텍스트 + 이미지/일러스트 + 채찍 곡선 장식 3요소가 모두 자리잡는다. 장식 없는 빈 섹션 금지.

## 형태 / 질감
- 채찍 곡선 SVG가 형태 정체성 — 직선 보더 대신 비대칭 곡선 stroke(1.5–2.5px, 색 `#C9A227` 또는 `#6E7E5B`). 식물 모티프(덩굴·꽃봉오리·잎)가 곡선 끝에 매달림.
- 모서리: 카드·이미지는 비대칭 유기적 곡선 — 상단만 아치, 또는 좌상·우하만 둥글게(`border-radius: 60px 8px 60px 8px` 식의 비대칭).
- 그림자 없음 — 곡선 프레임과 면 색으로 깊이.
- 이미지: 아치형 또는 곡선 마스크(`clip-path` 곡선), 위에 머스터드/세이지 곡선 프레임.
- 버튼: 곡선 프레임 알약 — 머스터드 골드 1.5px 곡선 보더 또는 플럼 솔리드, 패딩 `12px 30px`, EB Garamond small-caps. 버튼 좌우 끝에 작은 식물 곡선 디테일.

## 모션
- 전환: `playful` — `420ms cubic-bezier(0.34, 1.2, 0.64, 1)` (부드러운 약간의 오버슈트).
- 곡선 장식 진입: SVG 채찍 곡선이 `stroke-dashoffset`로 드로우(800ms ease-in-out) — 덩굴이 자라듯. 끝의 식물 모티프는 드로우 완료 후 페이드+scale 인.
- 호버: 버튼·카드 곡선 프레임의 식물 디테일이 살짝 흔들리거나 피어남(scale 1.0→1.08, 360ms). 링크는 곡선 밑줄이 좌→우로 흐르듯 그려짐.
- 스크롤 진입: 콘텐츠 `opacity 0→1` + `translateY(20px→0)`, 420ms.
- `prefers-reduced-motion`: 곡선 드로우·흔들림 제거, opacity만.
- 빠른 스냅·기계적 모션 금지 — 흐르고 피어나는 유기적 움직임.

## 컴포넌트
- **헤더/내비:** 높이 76px, 크림 배경. 좌측 워드마크(Cormorant SC), 우측 메뉴(EB Garamond small-caps, 항목 간격 28px). 헤더 하단 경계가 직선 룰이 아니라 옅은 채찍 곡선 밴드 — 양 끝이 작은 잎 모티프로 마감.
- **곡선 프레임 카드:** 비대칭 유기적 모서리(`border-radius: 60px 8px 60px 8px` 식), 머스터드 곡선 stroke 프레임(1.5px), 크림 표면, 내부 패딩 32px. 안에 장식 이니셜(머스터드 드롭캡 3줄 높이) + Cormorant 제목 + EB Garamond 본문 + 곡선 끝 식물 모티프. 카드 내부 간격: 이니셜/제목↔본문 16px, 본문↔하단 모티프 20px. 박스 안 죽은 공백 금지 — 빈 코너에 작은 덩굴 필리그리.
- **장식 디바이더:** 섹션 사이는 직선 룰이 아니라 채찍 곡선 디바이더 — 좌우로 흐르는 비대칭 곡선 + 중앙에 작은 꽃 모티프. 콘텐츠 블록 사이도 짧은 곡선 장식으로 구분.
- **장식 드롭캡:** 본문 첫 글자는 Cormorant Garamond 600, 3줄 높이, 머스터드 `#C9A227`. 글자를 채찍 곡선·잎 필리그리가 감싸는 장식 이니셜 프레임으로.
- **아이콘:** 제너릭 라인 아이콘 금지 — 아르누보 식물 모티프(잎·꽃봉오리·덩굴 컬)를 1.5px stroke로 크래프트. 머스터드 또는 세이지.
- **인용 블록:** 좌우를 채찍 곡선 따옴표 장식이 감쌈, 큰 Cormorant italic 인용문 + 세이지 출처 라벨. 인용 블록 모서리에 꽃 필리그리 2점.
- **버튼:** 곡선 프레임 알약 — 머스터드 1.5px 곡선 보더 또는 플럼 솔리드, 패딩 `12px 30px`, EB Garamond small-caps. 좌우 끝에 작은 식물 곡선 디테일. 호버: 곡선 식물 디테일 scale 1.0→1.08, 360ms.
- **갤러리 타일:** 아치형 곡선 마스크 이미지 + 머스터드 곡선 프레임 + 하단 small-caps 캡션. 타일 사이를 옅은 식물 곡선이 잇는다.

## 하지 말 것
- 현대적 손그림 식물·유기 블롭 금지(botanical-organic 자리) — 19세기 아르누보 정전의 채찍 곡선 양식만(좌우 비대칭·끝이 가늘어지는 whiplash).
- 직각 그리드·하드 1px 직선 보더 금지 — 곡선 프레임이 정체성.
- 채도 높은 원색 금지 — 차분한 머스터드/세이지/플럼.
- 둥근 모서리를 균일 radius(모든 모서리 같은 값)로 쓰기 금지 — 비대칭 유기적 곡선.
- 산세리프 금지 — 헤드라인·본문 모두 세리프.
- 그라디언트·이모지·글래스 패널·하드 섀도 금지.
- 빠른 기계적 스냅 모션 금지 — 흐르는 playful 모션.
- **곡선 장식 생략·축소 절대 금지** — 채찍 곡선 SVG가 "가는 선 한두 개 + 평면 아치"로 끝나면 정체성 상실이다. 모든 섹션에 경계 곡선 밴드 + 코너 필리그리 + 옅은 곡선 워터마크가 살아있어야 한다. 장식이 빠진 밋밋한 면 금지.
- 평면 단색 데드 보이드 금지 — 비어 보이는 크림 면은 옅은 채찍 곡선·꽃 필리그리 워터마크로 채운다.
- 빈 플레이스홀더 채움 블록 금지 — 이미지 프레임에는 아치 마스크 일러스트·곡선 텍스처를 담는다.
- 길 잃은 떠다니는 요소 금지 — 모든 장식·콘텐츠는 곡선 흐름선에 묶인다.
- 제너릭 플레이스홀더 아이콘 금지 — 아르누보 식물 모티프로 크래프트한 아이콘만.

## 상세 페이지 (6종)

### 1. 히어로 (곡선 장식 프레임)
크림 `#F2EBD9` 배경, min-height 88vh. 좌 6열에 텍스트 — 플럼 small-caps 키커 + 거대 Cormorant Garamond 헤드라인(`clamp(2.6rem,5vw,4.8rem)`) + EB Garamond 리드문 + 곡선 프레임 알약 CTA. 우 6열에 아치형 곡선 마스크 일러스트/이미지.
**아르누보 장식 강제(필수):** 히어로는 채찍 곡선이 화면을 휘감는 정전적 아르누보 컴포지션이어야 한다 — (1) 히어로 상·하단 경계를 머스터드·세이지 채찍 곡선 SVG 밴드가 휘감고, 곡선 끝이 가늘어지며 잎·꽃봉오리 모티프로 마감, (2) 우측 아치 일러스트를 머스터드 곡선 프레임 + 덩굴 필리그리가 감싼다(평면 아치 그라디언트 하나로 끝내지 말 것), (3) 좌측 텍스트 블록 좌상 코너에 흐르는 덩굴 곡선 필리그리, (4) 배경 빈 영역(텍스트와 이미지 사이·여백)에 옅은(opacity 0.15) 큰 채찍 곡선 또는 꽃 모티프 워터마크. 곡선은 stroke-dashoffset로 덩굴이 자라듯 드로우. 가는 골드 라인 몇 개로 끝내는 밋밋한 히어로 절대 금지 — 화면 곳곳에 곡선 장식이 흐른다.

### 2. 헤더·내비게이션
높이 76px 크림 헤더. 좌측 워드마크(Cormorant SC 1.3rem), 중앙 5개 메뉴(EB Garamond small-caps 0.82rem letter-spacing 0.16em), 우측 곡선 프레임 CTA. 헤더 하단 경계는 옅은 머스터드 채찍 곡선 밴드(직선 룰 아님). 메뉴 호버 시 곡선 밑줄 드로우. 모바일은 우측 곡선 햄버거 아이콘.

### 3. 콘텐츠 상세
content_max 1080px. 비대칭 — 좌측에 곡선 마스크 이미지, 우측에 텍스트(장식 드롭캡 + Cormorant 제목 + EB Garamond 본문 2단). 본문 시작 글자는 3줄 높이 머스터드 드롭캡 — 글자를 잎·곡선 필리그리가 감싸는 장식 이니셜 프레임. 섹션 사이를 세이지 채찍 곡선 구분 밴드(중앙 꽃 모티프)가 흐름. 텍스트와 이미지가 곡선 흐름을 따라 살짝 어긋남. 곡선 마스크 이미지는 머스터드 곡선 프레임 + 코너 덩굴 필리그리로 감싼다. 본문 2단 사이를 옅은 세로 채찍 곡선이 가른다.

### 4. 갤러리
크림 배경 풀폭. 아치형 곡선 마스크 이미지 타일 6개를 비대칭 2–3열 배열(높이 위계 다르게). 각 타일 머스터드 1.5px 곡선 프레임 + 하단 small-caps 캡션. 타일 사이를 옅은 식물 곡선 장식이 잇는다. 호버 시 곡선 프레임 식물 모티프가 피어남(scale 1.08).

### 5. 후기
표면 `#EAE1CB` 풀폭 섹션. 중앙에 큰 Cormorant Garamond italic 인용문(2–3줄) — 좌우를 채찍 곡선 따옴표 장식이 감쌈. 아래에 세이지 small-caps 인물명·직함. 인용 카드 비대칭 유기적 모서리 + 머스터드 곡선 프레임. 좌우에 작은 곡선 식물 장식 2점.

### 6. CTA·푸터
CTA: 플럼 `#6B4869` 솔리드 곡선 프레임 패널, 중앙 크림 Cormorant 헤드라인 + 머스터드 곡선 알약 CTA. 패널 모서리는 비대칭 아치 — 패널 안쪽 4코너에 크림/머스터드 덩굴 필리그리, 헤드라인 좌우에 채찍 곡선 장식. 푸터: 크림 배경, 상단 경계를 머스터드 채찍 곡선 밴드가 휘감음(양 끝 잎 모티프). 3컬럼(워드마크+소개 / 메뉴 / 연락처, 컬럼 간격 48px), 각 컬럼 small-caps 헤더 + EB Garamond 링크(헤더↔링크 16px, 링크 행 간 10px). 컬럼 사이를 옅은 세로 곡선이 구분. 최하단 곡선 구분 위 카피라이트.