오비탈 웜 에디토리얼PREMIUM

# 오비탈 웜 에디토리얼 — web 디자인 팩

## 이 스타일의 정체성
따뜻한 크림 캔버스 위에 완전 라운드 알약(pill) 도형이 궤도처럼 겹쳐 모듈러 블록 그리드로 배치되고, 세리프 헤딩과 산세리프 본문이 에디토리얼 위계를 만들며, 코랄·앰버 듀오가 강조하는 따뜻한 핀테크 브랜드 사이트다. 무엇을 보면 이 스타일임을 아는가 — 알약(border-radius 999px) 도형이 콘텐츠를 담고 또 장식으로 궤도처럼 겹친다, 배경이 따뜻한 크림이고 코랄·앰버만 강조에 쓰인다, 헤딩은 세리프(Fraunces)인데 본문은 산세리프(Inter)다, 알약들이 부드럽게 회전·겹치며 등장하는 playful 모션이 있다.

## 색
- 배경: `#F4ECDD` (따뜻한 크림). 표면(카드): `#FFFFFF`.
- 잉크: `#2B2620` (본문·헤딩).
- 강조: 코랄 `#EB7B4C` (메인 강조·알약 면) · 앰버 `#F3A623` (보조 강조·알약 면). 이 두 색만 — 그 외 강조색 금지.
- 본문 대비: `#2B2620` on `#F4ECDD` ≈ 11:1 (WCAG AAA).

## 타이포그래피
- 디스플레이/헤딩: `Fraunces`(Google Fonts) weight 500, 대체 `Georgia, serif`. H1 `clamp(2.4rem, 4.6vw, 4rem)`, line-height 1.12, `letter-spacing: -0.01em` — 따뜻한 옵티컬 세리프.
- 본문: `Inter`(Google Fonts) weight 400, `1.05rem`, line-height 1.65, 측정 60–70자.
- 키커/라벨: `Inter` weight 600, `0.78rem`, 대문자, `letter-spacing: 0.12em`, 색 `#EB7B4C`.
- 알약 라벨/태그: `Inter` weight 500, `0.85rem`.

## 레이아웃 / 그리드
- 콘텐츠 최대 폭: `1180px`(데스크탑 1280px 뷰포트 기준). 좌우 패딩 모바일 24px / 데스크탑 56px.
- 브레이크포인트: 768px, 1120px.
- 모듈러 블록 그리드 — 12열 베이스, 알약·카드 모듈이 `grid-column` span을 제각각으로 잡아 모듈러 배치. 일부 알약은 그리드 밖으로 살짝 넘쳐 궤도처럼 겹침.
- 섹션 수직 리듬: `clamp(88px, 10vw, 140px)` (airy — 넉넉한 여백).
- 알약 장식 도형이 섹션 배경에 궤도처럼 겹쳐 떠 있음(콘텐츠 알약 + 장식 알약).
- **구성 균형 — 평면 보이드 금지.** airy한 여백은 정체성이지만 평평한 빈 크림 면은 미완성으로 읽힌다. 빈 영역에는 코랄·앰버 궤도 장식 알약(옅은 면 또는 윤곽선)을 궤도처럼 겹쳐 떠 있게 배치하고, 옅은 큰 알약 윤곽 1–2점을 워터마크처럼 깐다. 알약 궤도 장식이 모든 섹션에서 빈 면을 채운다.
- **간격 리듬:** 8px 베이스 스케일. 키커↔헤딩 16px, 헤딩↔리드문 24px, 리드문↔CTA 32px, 카드 내부 패딩 28–32px 일관, 모듈 그리드 갭 24px. 알약 모듈 높이는 모듈러로 다르되 내부 패딩·간격은 통일. 텍스트는 알약/카드 내부 광학 중앙 정렬.
- 각 섹션은 완결 — 콘텐츠 모듈 + 궤도 장식 알약이 함께 자리잡는다. 빈약한 파편 금지.

## 형태 / 질감
- 알약(완전 라운드 pill, `border-radius: 999px`) 도형이 형태 정체성 — 콘텐츠 컨테이너이자 장식. 가로로 긴 알약, 세로 알약, 작은 원형 알약이 겹침.
- 다른 요소(카드·이미지): 둥근 모서리 `12–16px`.
- 그림자: 옅게만 — `0 8px 24px rgba(43,38,32,0.08)`. 균일하게 모든 카드에 깔지 않고 떠 있는 알약에만.
- 아이콘: 2px 스트로크 라운드 캡 라인 아이콘, 색 `#EB7B4C`. 이모지 금지.
- 이미지: radius 16px 또는 알약 마스크. 따뜻한 톤 그레이딩.
- 버튼: 알약 — 코랄 솔리드 `#EB7B4C` + 흰 텍스트, 패딩 `13px 32px`, radius 999px. 세컨더리는 잉크 1.5px 알약 외곽선.

## 모션
- 전환: `playful` — `360ms cubic-bezier(0.34, 1.15, 0.64, 1)` (부드러운 약간의 오버슈트).
- 알약 진입: 장식 알약들이 궤도를 따라 회전하며 등장(`rotate` + `translate` along orbit path, 600ms). 콘텐츠 알약은 `scale(0.92→1)` + 페이드.
- 호버: 카드 알약 `translateY(-4px)` + 약간 회전(`rotate(1.5deg)`) 360ms. 버튼 알약 호버 시 `scale(1.04)` + 색 한 단계 진해짐.
- 스크롤 진입: 콘텐츠 `opacity 0→1` + `translateY(16px→0)` 360ms, 80ms stagger.
- 배경 장식 알약이 아주 느리게 궤도 회전(`@keyframes orbit` 40s linear infinite).
- `prefers-reduced-motion`: 궤도 회전·호버 회전 제거, opacity·translateY만.
- 빠른 기계적 스냅 금지 — 부드럽게 도는 playful 모션.

## 컴포넌트
- **헤더/내비:** 높이 72px, 크림 배경. 좌측 워드마크(Fraunces 500), 중앙 메뉴(Inter 500, 항목 간격 24px), 우측 코랄 솔리드 알약 CTA. 내비 자체가 둥근 알약 컨테이너에 담길 수 있음. 메뉴 호버: 항목이 작은 앰버 알약으로 하이라이트.
- **알약 모듈 카드:** 가로로 긴 알약 또는 둥근 카드(radius 12–16px), 흰 표면, 내부 패딩 28–32px. 안에 라운드 라인 아이콘 + 키커 + Fraunces 제목 + Inter 본문. 카드 내부 간격: 아이콘↔키커 16px, 키커↔제목 8px, 제목↔본문 12px 일관. 알약/카드 안 죽은 공백 금지 — 콘텐츠를 형태에 맞춰 광학 정렬. 호버 시 translateY -4px + rotate 1.5deg.
- **아이콘:** 2px 스트로크 라운드 캡 라인 아이콘, 색 `#EB7B4C`. 제너릭 아이콘 세트 금지 — 따뜻한 핀테크 모티프(궤도·동전·차트)를 라운드 캡으로 크래프트. 이모지 금지.
- **궤도 장식:** 코랄·앰버 알약 도형(면 또는 옅은 윤곽선)이 섹션 배경에 겹쳐 떠서 느리게 궤도 회전(`@keyframes orbit` 40s). 빈 면을 채우는 정체성 장치.
- **로고월:** 알약 컨테이너 안에 로고를 담아 가로 스크롤 또는 그리드. 컨테이너 균일 높이.
- **버튼:** 알약 — 코랄 솔리드 `#EB7B4C` + 흰 텍스트, 패딩 `13px 32px`, radius 999px. 세컨더리는 잉크 1.5px 알약 외곽선. 호버 시 scale 1.04 + 색 한 단계 진해짐.

## 하지 말 것
- 단색 라인 일러스트·둥근 사각 카드 위주 금지(warm-workspace 자리) — 알약 도형 겹침 구성이 정체성.
- 채도 높은 원색 금지 — 따뜻한 코랄/앰버만.
- 알약을 빼고 둥근 사각형만 쓰기 금지 — pill(radius 999px)이 형태 정체성.
- 그라디언트·이모지·하드 섀도·글래스 패널 금지.
- 헤딩에 산세리프 쓰기 금지 — Fraunces 세리프 헤딩.
- 코랄·앰버 외 강조색 금지.
- 균일한 그림자를 모든 카드에 깔기 금지 — 떠 있는 알약에만 옅게.
- 빠른 기계적 스냅 모션 금지 — 부드러운 궤도 회전 playful.
- 평면 단색 데드 보이드 금지 — 빈 크림 면은 코랄·앰버 궤도 장식 알약과 옅은 큰 알약 윤곽 워터마크로 채운다.
- 빈 플레이스홀더 채움 블록 금지 — 이미지 프레임에는 실제 이미지(알약 마스크 또는 radius 16px)를 담는다.
- 길 잃은 떠다니는 요소 금지 — 떠 있는 장식 알약도 궤도 경로 위에 의도적으로 배치, 무작위 부유 금지.
- 정체성 약화 금지 — 알약(radius 999px) 도형 겹침 구성과 궤도 장식이 모든 페이지에서 또렷해야 한다. 둥근 사각 카드만으로 회귀 금지.
- 제너릭 플레이스홀더 아이콘 금지 — 따뜻한 핀테크 모티프로 크래프트한 2px 라운드 캡 아이콘만.

## 상세 페이지 (6종)

### 1. 히어로 (알약 궤도)
크림 `#F4ECDD` 배경, min-height 86vh. 좌측에 코랄 키커 + 거대 Fraunces 헤딩(`clamp(2.4rem,4.6vw,4rem)`) + Inter 리드문 + 코랄 솔리드 알약 CTA + 잉크 외곽선 알약 세컨더리. 우측에 흰 알약 모듈(가로로 긴 pill, 제품 미리보기) + 그 주위로 코랄·앰버 장식 알약 3–4개가 궤도처럼 겹쳐 떠서 느리게 회전. 배경에 옅은 큰 알약 윤곽 1점.
**궤도 장식 풍부하게(필수):** 히어로의 빈 크림 면은 알약 궤도 장식이 채운다 — 우측 흰 알약 모듈 주위로 코랄·앰버 장식 알약(면 + 옅은 윤곽선 혼합) 3–4개가 궤도처럼 겹쳐 떠 있고, 배경에 옅은 큰 알약 윤곽 1–2점이 워터마크처럼 깔린다. 흰 알약 모듈은 실제 제품 미리보기 비주얼을 담아 평면 보이드를 만들지 않는다. 좌측 텍스트는 헤딩이 거대하게 자리잡아 면을 충실히 채운다.

### 2. 헤더·내비게이션
높이 72px 크림 헤더. 좌측 워드마크(Fraunces 500 1.3rem), 중앙 5개 메뉴(Inter 500 0.92rem) — 메뉴 전체가 흰 알약 컨테이너(radius 999px)에 담김, 우측 코랄 솔리드 알약 CTA. 메뉴 호버 시 항목이 작은 앰버 알약으로 하이라이트. 모바일은 우측 라운드 햄버거 알약 버튼.

### 3. 기능 그리드 (알약 모듈)
크림 배경 섹션. content_max 1180px 안에 알약·카드 모듈 4–5개를 모듈러 블록 그리드로 — 가로로 긴 알약 모듈 2개(span 8) + 작은 둥근 카드 3개(span 4) 혼합, 높이 위계 다르게. 각 모듈 흰 표면 + 옅은 그림자, 라운드 라인 아이콘 + 키커 + Fraunces 제목 + 본문. 호버 시 translateY -4px + rotate 1.5deg.

### 4. 콘텐츠 상세
크림 배경. content_max 1180px. 좌측에 알약 마스크 이미지 또는 둥근 16px 이미지, 우측에 텍스트(키커 + Fraunces 제목 + Inter 본문 2단). 본문 옆에 코랄·앰버 작은 알약 태그 3개. 섹션 배경에 궤도 회전하는 옅은 장식 알약 2점.

### 5. 후기·로고월
표면 흰색 또는 크림 변주 섹션. 상단에 후기 카드 2–3개 — 둥근 16px 카드 안에 Fraunces italic 인용문 + 알약 아바타 + 인물명. 하단에 로고월 — 각 로고를 흰 알약 컨테이너에 담아 가로 배열(또는 느리게 가로 스크롤). 알약 컨테이너 균일 높이.

### 6. CTA·푸터
CTA: 코랄 `#EB7B4C` 솔리드 큰 알약 형태 패널(radius 999px 또는 큰 라운드), 중앙 크림/흰 Fraunces CTA 헤딩 + 흰 알약 버튼. 패널 주위 앰버 장식 알약. 푸터: 크림 배경. 4컬럼(워드마크+소개 / 제품 / 회사 / 법적고지), 각 컬럼 코랄 대문자 헤더 + Inter 링크. 소셜 링크는 작은 원형 알약. 최하단 카피라이트.