Botanical Organic

# Botanical Organic — web 디자인 팩

## 이 스타일의 정체성
흙빛·세이지·테라코타 어스 톤에 손그림 식물과 유기적 곡선 블롭이 어우러진 자연주의 웹. 직선과 직각 대신 비기하학적 둥근 곡선, 비대칭으로 부드럽게 흐르는 배치. 종이·린넨 질감 배경, 잔잔한 페이드. 식물 일러스트(잎·줄기·꽃)가 섹션 사이를 장식한다. "정원에서 만든 사이트" 같은 따뜻하고 손맛 있는 인상이 정답.

## 색
- 배경: `#f3eee4` (린넨/오트밀 베이지)
- 표면: `#fbf8f1` (살짝 밝은 크림)
- 텍스트: `#34301f` (다크 올리브브라운 — 검정 대신)
- 보조 텍스트: `#8a8270`
- 강조: `#6b7f5a`(세이지 그린) · `#c06a3e`(테라코타) — 2개. 그린은 주, 테라코타는 포인트.
- 보더/디바이더: `#d8cfba`
- 채도 낮은 어스 톤만. 형광·순흑·차가운 색 금지. 그라디언트는 아주 옅은 어스 톤 페이드만 허용.

## 타이포그래피
- 헤드라인 세리프: `"Fraunces", "Cormorant Garamond", Georgia, serif` (Fraunces는 Google Fonts 공개 웹폰트 — 부드러운 유기적 세리프, optical size 변주)
- 본문 산세리프: `"Mulish", Inter, sans-serif` (Mulish도 Google Fonts — 둥근 휴머니스트)
- 액센트 손글씨: `"Caveat", cursive` (Google Fonts) — 작은 라벨·캡션에 가끔
- H1: `clamp(2.5rem, 5.5vw, 4.5rem)`, weight 500 (Fraunces, soft optical), letter-spacing `-0.005em`, line-height 1.15
- H2: `1.75rem`, weight 500 (Fraunces)
- 본문: `1.125rem`, weight 400 (Mulish), line-height 1.75
- 캡션/라벨: `0.875rem`, Caveat 또는 Mulish weight 600

## 레이아웃 / 그리드
- 콘텐츠 최대 폭 `1080px`, 좌우 패딩 `28px`
- asymmetric — 텍스트와 이미지를 좌우 비대칭으로 흐르듯 엇갈리게. 엄격한 정렬을 피한다.
- 브레이크포인트: `<768px` 1열, `>768px` 비대칭 2단
- 섹션 간격 `112px` (airy — 식물 일러스트가 숨 쉴 공간), 블록 간격 `40px`
- 섹션 경계를 직선 대신 곡선(`border-radius` 큰 값 또는 SVG 웨이브)으로 처리.

## 형태 / 질감
- radius `비기하학적` — 카드는 `40px 60px 48px 56px / 56px 48px 60px 40px` 같은 불규칙 둥근 모서리(잎/조약돌 형태). 모든 모서리 값을 다르게.
- 그림자: 아주 부드럽고 옅게 — `box-shadow: 0 12px 28px rgba(52,48,31,0.10)`. 하드 섀도 금지.
- 보더: `1px solid #d8cfba` 또는 보더 없이 배경 톤 차로.
- 블롭: 유기적 둥근 도형(불규칙 border-radius 또는 SVG path)에 어스 톤 채움, 식물 일러스트 뒤 배경으로.
- 질감: 배경에 미세한 종이/린넨 노이즈 텍스처(`opacity 0.04` 이하 SVG 노이즈).
- 식물 일러스트: 손그림 선화 스타일의 잎·줄기·꽃. 단색 라인 또는 어스 톤 채움. 섹션 모서리·구분선에 배치.

## 모션
- subtle. 트랜지션 `400ms ease-in-out`.
- 스크롤 시 요소가 `opacity 0→1` + `translateY(20px)`로 잔잔히 페이드인 (`600ms`).
- 식물 일러스트가 아주 천천히 흔들림(`sway`, `8s ease-in-out infinite`, ±2deg 회전).
- 호버: 카드 `translateY(-4px)` + 그림자 살짝, `400ms`.
- 급격한 모션·바운스 금지 — 모든 것이 천천히 자란다.

## 하지 말 것
- 보라/인디고 그라디언트 금지 — 색은 채도 낮은 어스 톤(베이지·세이지·테라코타·올리브)만.
- 직각 모서리·균일한 radius 금지 — 모서리는 불규칙·비기하학적 곡선.
- 하드 섀도·균일한 soft shadow 박스 금지 — 그림자는 옅고 부드럽게.
- 형광색·순흑(#000)·차가운 그레이 금지.
- 엄격한 정렬 그리드 금지 — 배치는 비대칭으로 흐른다.
- 이모지 금지(손그림 식물 일러스트로). 정체불명 추상 blob 남발 금지(식물 모티프와 연결).
- 차가운 미니멀 산세리프만 단독 사용 금지 — 헤드라인은 유기적 세리프(Fraunces).

## 적용 예
- **히어로**: 린넨 베이지 배경, 좌측에 Fraunces H1 + Mulish 본문, 우측에 손그림 식물 일러스트 또는 어스 톤 블롭. 배경에 옅은 종이 노이즈. 비대칭 배치.
- **카드**: 크림색 표면, 불규칙 둥근 모서리(잎 형태), 옅은 부드러운 그림자, 1px 베이지 보더. 모서리에 작은 잎 일러스트. 호버 시 잔잔히 떠오름.
- **푸터**: 세이지 그린(`#6b7f5a`)으로 색 반전, 크림색 텍스트, 상단 경계는 SVG 웨이브 곡선. 식물 일러스트 라인 장식.