오로라 프렌치 모더니즘PREMIUM

# 오로라 프렌치 모더니즘 — web 디자인 팩

## 이 스타일의 정체성
밝은 캔버스 위에 노랑→시안→핑크가 오로라처럼 흐르는 다색 메시 그라디언트 면이 섹션 배경을 채우고, 버튼·카드는 모서리 반경 0의 날카로운 직사각형이며, 큰 지오메트릭 산세리프가 활기차게 자리잡는 프랑스 모더니즘 사이트다. 무엇을 보면 이 스타일임을 아는가 — 그라디언트가 작은 점이 아니라 섹션 배경 면 전체를 채운다, 오로라처럼 노랑·시안·핑크 세 색이 부드럽게 섞여 흐른다, 둥근 모서리가 단 하나도 없고 버튼·카드가 전부 zero-radius 직각이다, 모션이 150–200ms로 빠르고 단호하다.

## 색
- 배경: `#FFFFFF`. 잉크 텍스트: `#0E0E12`.
- 오로라 그라디언트 3색: 옐로 `#FFE14D` · 시안 `#2BC4FF` · 핑크 `#FF5BA8`.
- 오로라 메시: 이 세 색의 부드러운 `radial-gradient` 다중 레이어를 섹션 배경 면에. 텍스트는 그라디언트 면 위에서도 잉크 `#0E0E12` 유지(대비 확보 시 옅은 흰 면 깔기).
- 카드 표면: `#FFFFFF` (그라디언트 섹션 위 흰 카드).
- 본문 대비: `#0E0E12` on `#FFFFFF` ≈ 17:1 (WCAG AAA).

## 타이포그래피
- 디스플레이: `Clash Display`(Fontshare, 무료) weight 600, 대체 `'Arial Black', Helvetica, sans-serif`. H1 `clamp(2.6rem, 5.5vw, 5rem)`, line-height 1.04, `letter-spacing: -0.02em` — 큰 지오메트릭 헤비 디스플레이.
- 본문: `Inter`(Google Fonts) weight 400, `1.05rem`, line-height 1.6, 측정 58–68자.
- 키커/라벨: `Inter` weight 600, `0.78rem`, 대문자, `letter-spacing: 0.1em`.
- 버튼 라벨: `Inter` weight 600, `0.92rem`.

## 레이아웃 / 그리드
- 콘텐츠 최대 폭: `1240px`(데스크탑 1280px 뷰포트 기준). 좌우 패딩 모바일 24px / 데스크탑 56px.
- 브레이크포인트: 768px, 1120px.
- 풀블리드 섹션 — 오로라 그라디언트 면이 화면 끝까지(엣지투엣지). 콘텐츠는 그 안에서 content_max로 정렬.
- 섹션 수직 리듬: `clamp(80px, 9vw, 120px)` (balanced).
- 섹션마다 흰 섹션 / 오로라 그라디언트 섹션이 교대 — 활기 있는 리듬.
- **구성 균형 — 평면 보이드 금지.** 오로라 그라디언트 면은 그 자체가 살아있는 비주얼 트리트먼트다. 콘텐츠가 한쪽에 몰려 반대편이 비면 그 영역은 오로라 메시 그라디언트가 풍부하게 흐르게 두거나(노랑·시안·핑크 다중 radial 레이어), 직각 제품 이미지/흰 면 카드를 배치한다. 평평한 단색 흰 면을 그대로 두지 말 것 — 흰 섹션이면 직각 카드·이미지·콘텐츠가 충실히 채운다.
- **간격 리듬:** 8px 베이스 스케일. 키커↔H1 16px, H1↔리드문 24px, 리드문↔버튼 페어 32px, 카드 내부 패딩 32px, 카드 그리드 갭 0(보더 맞붙음) 또는 24px 일관. 모든 요소 zero-radius 직각, 컬럼 경계 정렬.
- 각 섹션은 완결 — 콘텐츠 + 오로라 그라디언트 면 또는 직각 이미지가 함께 자리잡는다. 빈약한 파편 금지.

## 형태 / 질감
- 모서리: 버튼·카드·이미지 모두 radius `0px` — zero-radius 직각이 정체성. 둥근 모서리 절대 금지.
- 보더: 카드 `1px solid #0E0E12` 또는 보더 없이 흰 면. 강조 보더 1px 잉크.
- 그림자: 없음 — 깊이는 오로라 그라디언트 면과 흰 카드 대비로.
- 아이콘: 1.75px 스트로크 지오메트릭 라인, 직각 모서리. 둥근 아이콘·이모지 금지.
- 이미지: radius 0px 직사각형. 채도 자연스럽게.
- 버튼: 솔리드 잉크 `#0E0E12` 배경 + 흰 텍스트, radius 0px, 패딩 `13px 30px`. 세컨더리는 `1px solid #0E0E12` 외곽선 직각 버튼.

## 모션
- 전환: `snappy` — `170ms cubic-bezier(0.3, 0, 0.2, 1)`.
- 오로라 그라디언트: 메시 색 위치가 아주 느리게 흐름(`background-position` 20s linear infinite) — 배경의 미세한 생동만, 빠른 모션 아님.
- 스크롤 진입: 콘텐츠 `opacity 0→1` + `translateY(12px→0)` 180ms — 빠르게.
- 호버: 버튼은 솔리드↔외곽선 색이 170ms로 단호하게 반전. 카드는 `translate(-3px,-3px)` + 그 자리에 잉크 1px 라인 잔상(직각 오프셋). 빠른 스냅.
- 링크 밑줄 즉시 등장.
- `prefers-reduced-motion`: 그라디언트 흐름·진입 트랜스폼 제거.
- 바운스·1초 이상 모션 금지(그라디언트 메시 흐름 예외) — 인터랙션은 snappy.

## 컴포넌트
- **헤더/내비:** 높이 64px, 흰 배경 또는 오로라 그라디언트 위 투명. 좌측 워드마크(Clash Display 600), 우측 메뉴(Inter 600 대문자 0.78rem, 항목 간격 28px) + 잉크 솔리드 직각 CTA 버튼. 메뉴 호버: 잉크 1px 직각 언더라인 즉시 등장.
- **그라디언트 히어로 면:** 오로라 메시 그라디언트 배경 + 그 위 흰 카드 또는 직접 잉크 텍스트.
- **기능 카드:** 흰 면 직각 카드(`1px solid #0E0E12`), 내부 패딩 32px. 안에 지오메트릭 라인 아이콘 + Inter 키커 + Clash 제목 + Inter 본문. 카드 내부 간격: 아이콘↔키커 16px, 키커↔제목 8px, 제목↔본문 12px 일관. 박스 안 죽은 공백 금지. 호버 시 `translate(-3px,-3px)` + 잉크 1px 직각 잔상.
- **아이콘:** 1.75px 스트로크 지오메트릭 라인, 직각 모서리. 제너릭 아이콘 세트 금지 — 직각·기하 모티프로 크래프트. 둥근 아이콘·이모지 금지.
- **가격 카드:** 직각 카드, 내부 패딩 32px, 추천 플랜은 오로라 그라디언트 면 배경 + 흰 텍스트. 플랜명↔가격 12px, 가격↔사양 20px 일관.
- **버튼:** 솔리드 잉크 `#0E0E12` + 흰 텍스트, radius 0px, 패딩 `13px 30px`, Inter 600 0.92rem. 세컨더리는 `1px solid #0E0E12` 외곽선 직각 버튼. 호버 시 솔리드↔외곽선 170ms 단호 반전.

## 하지 말 것
- 둥근 버튼·곡면 컬러 블록 금지(iridescent-marketing-flow 자리) — zero-radius 직각이 정체성.
- 흰 카드만으로 채우기 금지(ai-gradient-mesh 자리) — 오로라 그라디언트가 섹션 배경 면으로 등장해야 함.
- 그라디언트를 작은 점·텍스트에만 쓰기 금지 — 섹션 배경 면 전체.
- 그라디언트 텍스트 금지 — 텍스트는 단색 잉크.
- 둥근 모서리(radius > 0) 절대 금지.
- 그림자·이모지·글래스 패널 금지.
- 보라 단색 그라디언트 금지 — 노랑·시안·핑크 오로라 3색.
- 느린 흐름 인터랙션 금지 — 버튼·카드 모션은 snappy.
- 평면 단색 데드 보이드 금지 — 빈 영역은 오로라 메시 그라디언트가 풍부히 흐르게 두거나 직각 이미지/카드로 채운다. 평평한 단색 흰 면을 그대로 두지 말 것.
- 빈 플레이스홀더 채움 블록 금지 — 이미지 프레임에는 실제 이미지 또는 오로라 그라디언트 면을 담는다.
- 길 잃은 떠다니는 요소 금지 — 모든 요소는 content_max 컬럼 경계에 정렬.
- 정체성 약화 금지 — 오로라 메시 그라디언트 면과 zero-radius 직각이 모든 페이지에서 또렷해야 한다. 그라디언트를 작은 점으로 줄이거나 둥근 모서리로 회귀 금지.
- 제너릭 플레이스홀더 아이콘 금지 — 직각·기하 모티프로 크래프트한 1.75px 라인 아이콘만.

## 상세 페이지 (6종)

### 1. 히어로 (오로라 그라디언트)
풀블리드 섹션, min-height 88vh, 배경에 옐로→시안→핑크 오로라 메시 그라디언트(radial-gradient 다중 레이어, 느린 흐름). 좌측에 잉크 키커 + 거대 Clash Display 헤드라인(`clamp(2.6rem,5.5vw,5rem)`) + Inter 리드문 + 버튼 페어(잉크 솔리드 직각 + 외곽선 직각). 우측에 직각 제품 이미지 또는 흰 면 카드. 모든 모서리 radius 0px.
**오로라 면 풍부하게(필수):** 히어로 배경의 오로라 메시 그라디언트는 화면 전체를 풍부하게 흐른다 — 노랑·시안·핑크 radial-gradient를 3–4개 레이어로 겹쳐 깊이 있는 오로라 필드를 만든다(작은 점·옅은 한 점 금지). 우측 직각 제품 이미지/흰 카드는 실제 비주얼로 채워 평면 보이드를 만들지 않는다. 좌측 텍스트 블록은 헤드라인이 거대하게 자리잡아 화면을 충실히 채운다.

### 2. 헤더·내비게이션
높이 64px, 오로라 히어로 위 투명. 좌측 워드마크(Clash Display 600 1.2rem), 중앙 5개 메뉴(Inter 600 대문자 0.78rem letter-spacing 0.1em), 우측 잉크 솔리드 직각 CTA. 메뉴 호버 시 잉크 1px 직각 언더라인 즉시 등장. 모바일은 우측 직각 햄버거 아이콘 — 열면 오로라 그라디언트 풀스크린 오버레이.

### 3. 기능 그리드
흰 배경 섹션. content_max 1240px 안에 3열 직각 카드 3개(각 `1px solid #0E0E12`). 카드 상단 1.75px 지오메트릭 라인 아이콘 + Inter 키커 + Clash Display 제목 + 본문. 카드 간 갭 0(보더 맞붙음) 또는 24px. 호버 시 카드 `translate(-3px,-3px)` + 잉크 1px 직각 잔상.

### 4. 가격표
오로라 그라디언트 섹션 배경. 흰 직각 가격 카드 3개 가로 배열 — 각 카드 보더 없는 흰 면, 플랜명 + 큰 가격 숫자(Clash Display) + 사양 리스트 + 직각 CTA 버튼. 중앙 추천 플랜은 오로라 그라디언트 면 배경 + 흰 텍스트 + 잉크 외곽선. 카드 모서리 전부 radius 0.

### 5. 갤러리
흰 배경 풀폭. 직각 이미지 타일 6개를 3열 그리드(radius 0, 갭 0 또는 12px). 각 타일 호버 시 오로라 그라디언트 면이 이미지 위로 170ms 슬라이드 인 + 흰 캡션. 타일은 전부 직사각형 — 둥근 마스크 금지.

### 6. CTA·푸터
CTA: 풀블리드 오로라 그라디언트 면, 중앙 거대 Clash Display CTA 헤드라인 + 잉크 솔리드 직각 버튼 페어. 푸터: 잉크 `#0E0E12` 솔리드 배경 + 흰 텍스트. 4컬럼(워드마크 / 제품 / 회사 / 법적고지), 각 컬럼 Inter 600 대문자 헤더 + 링크. 최하단 1px 흰 라인 위 카피라이트. 모든 모서리 radius 0.