AI Gradient Mesh

# AI Gradient Mesh — web 디자인 팩

## 이 스타일의 정체성
부드럽게 흐르는 멀티 컬러 메시 그라디언트가 배경 전면을 채우고, 그 위에 솔리드 흰 카드가 떠 있다. 이 팩은 **의도적으로 비(非)보라 계열 메시**를 쓴다 — Claude 기본 미감의 보라-핑크 2색 그라디언트와 정면으로 갈라서기 위해, 4~5개의 정점을 따뜻한 앰버·산호·청록·라임으로 명시 고정한다. 무엇을 보면 이 스타일임을 아는가 — 배경이 단일 대각 그라디언트가 아니라 여러 색 광원이 번지는 메시이고, 그 위에 미세한 필름 그레인 노이즈가 깔리며, 카드는 반투명 글래스가 아니라 또렷한 솔리드 흰 면이다.

## 색
- **메시 그라디언트 정점 5개(고정 hex, radial-gradient 광원으로 배치) — 보라/인디고/마젠타 절대 사용 안 함:**
  - 정점 A 앰버: `#ffb347` — 좌상단 18% 22%
  - 정점 B 산호: `#ff6f61` — 우상단 82% 16%
  - 정점 C 청록: `#1fb8a6` — 우하단 88% 78%
  - 정점 D 라임샤르트뢰즈: `#c3d92e` — 좌하단 12% 84%
  - 정점 E 딥틸(중앙 깊이): `#0e7c86` — 중앙 50% 55%
- **색 관계 규칙:** A·B는 인접 난색(앰버→산호), C·E는 인접 한색(청록→딥틸), D는 A의 보색축 근처 라임. 난색군과 한색군이 대각으로 마주 보며 중앙에서 섞인다. 무지개 전 색상환을 다 쓰지 않는다 — 난색 2 + 한색 2 + 브리지 1.
- 배경 베이스: `#fff7ec` (메시 정점 사이로 비치는 웜 베이스).
- 카드 표면: 솔리드 `#ffffff` (반투명 아님, 불투명도 100%).
- 텍스트: `#1d2321` (카드 위 본문), 메시 위 직접 텍스트는 `#ffffff` + 텍스트 섀도 `0 1px 3px rgba(0,0,0,0.35)`.
- 강조: 청록 `#0e7c86` — 링크·CTA 보더에만, 면적 5% 이하.

## 메시 그라디언트 구현 명세
- 배경은 5개의 `radial-gradient`를 겹친다(`background` 다중 레이어). 각 광원은 위 정점 좌표에 `ellipse 60% 55%` 크기, `transparent`로 페이드.
- 메시 회전 각도: 전체 컨테이너에 `transform: rotate(8deg)` 후 오버스캔(`120%` 크기)으로 화면을 덮어 정점이 모서리에 박히지 않게 한다.
- **노이즈/그레인 텍스처(필수, 수치 강제):** 메시 위에 SVG `feTurbulence` 프랙탈 노이즈 또는 PNG 그레인을 `opacity: 0.07`, `mix-blend-mode: overlay`, 타일 `160px`로 깐다. 노이즈 없는 매끈한 그라디언트 금지 — 그레인이 "디폴트 회귀" 차단 장치다.
- 메시 채도: 정점 색을 그대로 쓰되 메시 레이어 전체에 `filter: saturate(0.92)`로 살짝 눌러 형광 끼를 제거.

## 타이포그래피
- 폰트: `Geist`(Google Fonts, 없으면 `Inter`) — `minimal-sans`. 전 위계 단일 패밀리.
- 히어로 헤드라인: `clamp(2.6rem, 5vw, 4.2rem)`, weight 600, `letter-spacing: -0.025em`, line-height 1.1. 그라디언트 텍스트 금지 — 솔리드 색만.
- 서브헤드: weight 400, `1.2rem`, 색 `#1d2321` 75% 불투명.
- 본문: `1.0625rem`, weight 400, line-height 1.65, 측정 62~70자.
- 라벨: `0.78rem`, weight 500, `letter-spacing: 0.06em`, 대문자.

## 레이아웃 / 그리드
- 콘텐츠 최대 폭: 1120px. 좌우 패딩 모바일 20px / 데스크탑 56px.
- 브레이크포인트: 720px, 1120px.
- `full-bleed` — 메시 배경은 항상 100vw, 콘텐츠 카드만 최대 폭 안에.
- 섹션 수직 리듬: 섹션 간 `clamp(96px, 11vw, 160px)`(balanced).
- 12열 그리드, 거터 32px. 카드 그리드는 3열(데스크탑)/1열(모바일).

## 형태 / 질감
- 모서리: 카드·버튼 radius `18px` — 통일된 한 값.
- 보더: 카드 `1px solid rgba(255,255,255,0.9)` (메시 위 솔리드 카드의 가장자리 분리).
- 그림자: 카드 `0 24px 60px -20px rgba(20,30,28,0.28)` — 메시 위에 카드가 떠 보이게. 모든 카드 동일 그림자(균일 soft shadow 회귀 아님 — 메시 배경 자체가 차별화 장치).
- 버튼: 솔리드 청록 `#0e7c86` 채움 + 흰 텍스트, 또는 흰 배경 + 청록 1px 보더.

## 모션
- 전환: `subtle` — `400ms ease-out`.
- 메시 애니메이션: 배경 메시가 `20s ease-in-out infinite alternate`로 정점 좌표를 ±6%씩 천천히 부유(`background-position` 또는 `transform`). 느리고 거의 인지 안 될 정도.
- 호버: 카드 `translateY(-4px)` + 그림자 약간 확대.
- 스크롤 진입: `opacity 0 → 1` + `translateY(20px → 0)`, 500ms.

## 하지 말 것
- **보라(`#8b5cf6` 류)·인디고·마젠타·바이올렛 그라디언트 절대 금지.** 이 팩의 존재 이유다 — 메시는 앰버·산호·청록·라임 5정점으로만.
- 단순 2색 선형 그라디언트(`linear-gradient` 좌상→우하 보라→핑크) 금지 — 반드시 5정점 radial 메시.
- 노이즈/그레인 생략 금지 — `opacity 0.07` 그레인은 필수.
- 그라디언트 텍스트(`background-clip: text`) 금지 — 텍스트는 솔리드.
- 반투명 글래스 카드(backdrop-blur) 금지 — 카드는 불투명 솔리드 흰색. (글래스는 web-glassmorphism 팩 담당)
- blob 도형·둥둥 떠다니는 추상 3D 오브젝트 금지 — 깊이는 메시와 카드 그림자로만.
- 이모지·정체불명 일러스트 금지.

## 적용 예
- **히어로:** 5정점 메시 풀블리드 배경 + 그레인. 좌측 정렬 흰색 헤드라인(텍스트 섀도)과 서브헤드, 솔리드 청록 CTA 버튼. 카드 없이 메시 위 직접 텍스트.
- **카드:** 메시 배경 위 솔리드 흰 카드 3열 그리드, radius 18px + `0 24px 60px -20px` 그림자. 카드 안은 무채 텍스트, 청록 강조. 호버 시 -4px.
- **푸터:** 메시 채도를 더 눌러(`saturate 0.6`) 어둡게 깔고, 흰 텍스트 링크. 상단 경계는 흰색 1px 헤어라인. 그레인 유지.