Claymorphism Soft

# Claymorphism Soft — web 디자인 팩

## 이 스타일의 정체성
점토로 빚어 통통하게 부풀린 듯한 3D 표면. 크게 둥근 모서리, 안쪽에는 빛이 닿은 하이라이트(inner shadow), 바깥쪽에는 부드러운 더블 섀도가 떠 있는 느낌. 파스텔 톤에 둥글둥글한 아이콘과 일러스트. 모든 요소가 말랑하고 만지고 싶게 생겼다 — 날카로운 모서리나 평평한 면이 하나도 없다. "촉감이 느껴지는" 인상이 정답.

## 색
- 배경: `#f0ecff` (아주 옅은 라벤더 파스텔)
- 표면(카드·버튼): `#ffffff` 또는 파스텔 틴트(`#ffe5ec` 핑크, `#d8f3ff` 스카이, `#e3ffe9` 민트, `#fff4d6` 버터)
- 텍스트: `#3a3360` (어두운 보라기 네이비 — 검정 대신 부드럽게)
- 보조 텍스트: `#8a85a8`
- 강조: `#7c5cff`(소프트 바이올렛) · `#ff8fab`(소프트 핑크) — 최대 2개, 버튼·아이콘에.
- 모든 색은 파스텔(명도 높고 채도 낮음). 진한 원색·순흑 금지.

## 타이포그래피
- 전체 폰트: `"Nunito", "Quicksand", system-ui, sans-serif` (Nunito는 Google Fonts 공개 웹폰트 — 둥근 터미널의 부드러운 산세리프)
- H1: `clamp(2.25rem, 5vw, 4rem)`, weight 800, letter-spacing `-0.01em`, line-height 1.15
- H2: `1.625rem`, weight 700
- 본문: `1.0625rem`, weight 500, line-height 1.7
- 라벨/배지: `0.875rem`, weight 700
- 모서리가 둥근 폰트를 쓴다 — 날카로운 그로테스크 금지.

## 레이아웃 / 그리드
- 콘텐츠 최대 폭 `1100px`, 좌우 패딩 `24px`
- 중앙 정렬 레이아웃. 요소를 화면 가운데로 모은다.
- 브레이크포인트: `<768px` 1열, `>768px` 다중 카드
- 섹션 간격 `96px` (airy), 카드 내부 패딩 `28~36px`, 요소 간 간격 넉넉히
- 카드·버튼은 둥글고 통통해 보이도록 충분한 패딩과 최소 높이를 준다.

## 형태 / 질감
- radius `28px` 이상 — 카드는 크게, 버튼은 `9999px`(완전 알약형) 또는 `20px`. 모든 모서리 둥글게.
- 클레이 표면 공식(핵심): `box-shadow: inset 0 -8px 14px rgba(0,0,0,0.06), inset 0 8px 12px rgba(255,255,255,0.9), 0 18px 32px rgba(124,92,255,0.18);`
  → 안쪽 어두운 그림자(아래)+안쪽 밝은 하이라이트(위)+바깥쪽 부드러운 컬러 그림자, 3겹.
- 그림자는 흐릿하고 넓고 부드럽다 — 하드 섀도 절대 금지.
- 아이콘: 둥근 선 또는 둥근 채움, 통통한 형태. 일러스트도 둥글둥글하게.
- 보더는 거의 안 쓴다 — 깊이는 inner/outer 그림자로.

## 모션
- playful. 트랜지션 `250ms cubic-bezier(0.34, 1.56, 0.64, 1)` (스프링/바운스 이징).
- 호버 시 카드 `scale(1.03)` + 바깥 그림자 약간 확대 — 부풀어 오르는 느낌.
- 클릭(active) 시 `scale(0.97)` + inner shadow 강조 — 점토를 누른 느낌.
- 등장 시 살짝 통통 튀는 스케일 인.

## 하지 말 것
- 보라/인디고 진한 그라디언트 배경 금지 — 배경은 옅은 파스텔 단색.
- 직각 모서리(radius < 20px) 금지. 하드 섀도(블러 0) 금지 — 그림자는 항상 부드럽고 넓게.
- 평평한 단일 그림자(`0 2px 4px`) 금지 — 반드시 inner+inner+outer 3겹 클레이 섀도.
- 진한 원색·순흑(#000) 금지 — 색은 파스텔, 텍스트도 부드러운 네이비.
- 이모지 남발 금지(둥근 일러스트로 대체). 정체불명 blob 도형 남발 금지.
- 날카로운 그로테스크 폰트 금지 — 둥근 산세리프만.
- 강조색 3개 이상 금지.

## 적용 예
- **히어로**: 옅은 라벤더 배경 중앙에 통통한 흰 카드(radius 32px, 3겹 클레이 섀도). 안에 둥근 산세리프 H1, 본문, 알약형 바이올렛 버튼. 옆에 둥근 일러스트.
- **카드**: 파스텔 틴트 배경, radius 28px, `inset` 하이라이트+`inset` 어두운 그림자+바깥 부드러운 컬러 그림자. 둥근 아이콘 배지가 상단에. 호버 시 부풀며 scale(1.03).
- **푸터**: 색 반전 없음 — 살짝 더 진한 파스텔 면에 둥근 모서리(상단만 radius 40px), 둥근 링크 칩들.