# INFINITH Design System Specification
**Version:** 1.0
**Date:** 2026-03-23

---

## 1. Design Principles

| 원칙 | 설명 |
|------|------|
| **No Primary Colors** | 빨강, 주황, 초록, 파랑 등 원색 사용 금지. 파스텔 변형만 허용 |
| **Filled Icons Only** | 라인(outlined) 아이콘 금지. SVG shape fill 스타일만 사용 |
| **No Emoji** | 모든 아이콘은 벡터 shape으로 표현 |
| **Dark/Light Rhythm** | 페이지 내 섹션은 다크/라이트 배경을 교대 배치 |
| **White Cards on Dark** | 다크 섹션 내 카드는 `bg-white` 사용 (glassmorphism 아님) |
| **Diagonal Shadows** | 카드/요소에 사선 방향 연한 그림자: `shadow-[3px_4px_12px_rgba(0,0,0,0.06)]` |
| **Pastel Semantics** | 상태 표현은 반드시 INFINITH 파스텔 팔레트의 bg/text/border/dot 세트 사용 |

---

## 2. Color System

### 2.1 INFINITH Brand Colors

| Token | Hex | CSS Variable | 용도 |
|-------|-----|-------------|------|
| Primary Navy | `#0A1128` | `--color-primary-900` | 다크 섹션 bg, 본문 텍스트, 테이블 헤더 |
| Medium Navy | `#1A2B5E` | `--color-primary-800` | 보조 다크 |
| Near White | `#F4F6FB` | `--color-primary-50` | 밝은 배경 변형 |
| Accent Purple | `#6C5CE7` | `--color-accent` | 활성 탭 보더, 강조 아이콘, 로딩 스피너 |
| Gradient Start | `#4F1DA1` | — | 버튼, 배지 그라디언트 왼쪽 |
| Gradient End | `#021341` | — | 버튼, 배지 그라디언트 오른쪽 |

### 2.2 Warm CTA Gradient (3-stop)

```css
background: linear-gradient(to right, #fff3eb, #e4cfff, #f5f9ff);
```

| Stop | Hex | 이름 |
|------|-----|------|
| Start | `#fff3eb` | Warm Peach |
| Mid | `#e4cfff` | Soft Lilac |
| End | `#f5f9ff` | Cool White-Blue |

**사용처:** CTA 카드 배경, URL 입력 필드, KPI CTA 카드

### 2.3 Semantic Status Palette

**규칙:** 상태를 표현할 때 반드시 이 4가지 세트 중 하나를 사용. 원색(빨강/초록) 절대 금지.

| Status | Background | Text | Border | Dot | 한국어 |
|--------|-----------|------|--------|-----|--------|
| Critical | `#FFF0F0` | `#7C3A4B` | `#F5D5DC` | `#D4889A` | 심각 |
| Warning | `#FFF6ED` | `#7C5C3A` | `#F5E0C5` | `#D4A872` | 주의 |
| Good | `#F3F0FF` | `#4A3A7C` | `#D5CDF5` | `#9B8AD4` | 양호 |
| Info | `#EFF0FF` | `#3A3F7C` | `#C5CBF5` | `#7A84D4` | 우수 |

**CSS Variables:**
```css
--color-status-{level}-bg
--color-status-{level}-text
--color-status-{level}-border
--color-status-{level}-dot
```

### 2.4 ScoreRing Color Thresholds

| Score Range | Color | Token |
|-------------|-------|-------|
| 0~40% | `#C084CF` | Soft Violet (Critical) |
| 41~60% | `#8B9CF7` | Periwinkle (Caution) |
| 61~80% | `#7C6DD8` | Medium Purple (Good) |
| 81~100% | `#6C5CE7` | INFINITH Purple (Excellent) |

### 2.5 Platform Brand Colors (외부 브랜드 존중)

| Platform | Hex | 용도 |
|----------|-----|------|
| YouTube | `#FF0000` | 아이콘 컨테이너, 진단 구분 |
| Instagram | `#E1306C` | 아이콘 그라디언트 |
| Facebook | `#1877F2` | 아이콘 컨테이너, 로고 |
| VIEW Purple | `#7B2D8E` | 고객 브랜드 (뷰성형외과) |
| VIEW Gold | `#E8B931` | 고객 브랜드 (뷰성형외과) |

---

## 3. Typography

### 3.1 Font Families

| 폰트 | 역할 | 로딩 |
|------|------|------|
| **Playfair Display** | 영문 헤딩, 섹션 타이틀, INFINITH 로고 | Google Fonts |
| **Pretendard** | 한글 헤딩, 본문 | CDN |
| **Inter** | 영문 본문, UI 요소 | Google Fonts (sans-serif) |

### 3.2 Size & Weight Scale

| 용도 | 폰트 | Size | Weight | Tailwind Class |
|------|-------|------|--------|---------------|
| INFINITH 로고 | Playfair Display | `3xl` (30px) | Black 900 | `font-serif text-3xl font-black tracking-[0.05em]` |
| 페이지 H1 | Playfair Display | `5xl~7xl` | Bold 700 | `font-serif text-5xl md:text-7xl font-bold tracking-[-0.02em]` |
| 섹션 타이틀 (영문) | Playfair Display | `3xl~5xl` | Bold 700 | `font-serif text-3xl md:text-5xl font-bold` |
| 섹션 서브타이틀 | Pretendard | `lg` (18px) | Regular 400 | `text-lg` |
| 카드 제목 | Pretendard | `lg` (18px) | Bold 700 | `text-lg font-bold` |
| 본문 | Pretendard / Inter | `sm~base` (14~16px) | Regular 400 | `text-sm` or `text-base` |
| 캡션/라벨 | Inter | `xs` (12px) | Medium 500 | `text-xs font-medium` |
| 배지/태그 | Inter | `xs` (12px) | Semibold 600 | `text-xs font-semibold` |

### 3.3 Text Color Mapping

| 컨텍스트 | 라이트 섹션 | 다크 섹션 |
|----------|-----------|----------|
| 제목 | `text-[#0A1128]` | gradient `from-purple-300 to-blue-300` |
| 서브타이틀 | `text-slate-600` | `text-purple-200` |
| 본문 | `text-slate-700` | `text-white/80` |
| 캡션 | `text-slate-500` | `text-purple-300` |
| 강조 | `text-[#6C5CE7]` | `text-purple-300` |

---

## 4. Layout Patterns

### 4.1 SectionWrapper

모든 콘텐츠 섹션의 기본 래퍼. `src/components/report/ui/SectionWrapper.tsx`

| Prop | Light Mode | Dark Mode |
|------|-----------|-----------|
| Background | `bg-white` | `bg-[#0A1128]` + `radial-gradient rgba(108,92,231,0.15)` |
| Padding | `py-16 md:py-20 px-6` | 동일 |
| Max Width | `max-w-7xl mx-auto` | 동일 |
| Title Style | `.text-gradient` (navy gradient) | purple-300→blue-300 gradient |
| Animation | `opacity: 0, y: 40` → `1, 0` on scroll | 동일 |

### 4.2 Card Patterns

| 패턴 | 클래스 | 사용처 |
|------|--------|--------|
| **Standard Card** | `bg-white rounded-2xl border border-slate-100 shadow-sm p-5` | 대부분의 라이트 섹션 카드 |
| **White Card on Dark** | `bg-white rounded-2xl shadow-[3px_4px_12px_rgba(0,0,0,0.06)] p-6` | ChannelStrategy, ContentCalendar |
| **Glass Card** | `bg-white/70 backdrop-blur-xl border border-white/40 shadow-[0_8px_32px_0_rgba(31,38,135,0.07)] rounded-2xl` | 랜딩 페이지 (TargetAudience, UseCases) |
| **Dark Glass Card** | `bg-white/10 backdrop-blur-sm border border-white/10 rounded-2xl` | ProblemDiagnosis 내부 |
| **Gradient Card** | `bg-gradient-to-r from-[#4F1DA1] to-[#021341]` | ConsolidationCard, 강조 카드 |

### 4.3 Shadow System

```css
/* Standard (대부분의 카드) */
shadow-sm                                          /* Tailwind default */

/* Diagonal soft shadow (화이트 카드 on 다크) */
shadow-[3px_4px_12px_rgba(0,0,0,0.06)]             /* 기본 */
shadow-[4px_6px_16px_rgba(0,0,0,0.09)]             /* hover */

/* Status-tinted shadows (배지/태그) */
shadow-[2px_3px_8px_rgba(212,136,154,0.15)]        /* Critical tint */
shadow-[2px_3px_8px_rgba(212,168,114,0.15)]        /* Warning tint */
shadow-[2px_3px_8px_rgba(155,138,212,0.15)]        /* Good/Purple tint */
shadow-[2px_3px_8px_rgba(122,132,212,0.15)]        /* Info tint */

/* Elevated (헤더, 라이트박스) */
shadow-lg                                          /* 리포트/플랜 헤더 패널 */
shadow-2xl                                         /* 라이트박스 모달 */
```

---

## 5. Component Inventory

### 5.1 Shared UI Components (`src/components/report/ui/`)

| Component | Props | Description |
|-----------|-------|-------------|
| `SectionWrapper` | `id, title, subtitle, dark?, className?` | 모든 섹션의 래퍼 |
| `MetricCard` | `value, label, trend?, subtext?` | 숫자 지표 카드 |
| `ScoreRing` | `score, maxScore, size?` | SVG 원형 점수 표시 |
| `SeverityBadge` | `severity` | 상태 배지 (심각/주의/양호/우수) |
| `DiagnosisRow` | `category, detail, severity, evidenceIds?` | 진단 항목 행 |
| `ComparisonRow` | `area, asIs, toBe` | As-Is → To-Be 비교 행 |
| `EvidenceGallery` | `evidenceIds[]` | 스크린샷 근거 갤러리 |
| `EvidenceScreenshot` | `evidence, compact?` | 개별 스크린샷 카드 |
| `EvidenceLightbox` | `evidence, onClose` | 스크린샷 확대 모달 |

### 5.2 Custom Icons (`src/components/icons/FilledIcons.tsx`)

모든 아이콘은 **fill 전용** (stroke 없음), `opacity: 0.25` 배경 rect + fill path.

| Icon | 용도 |
|------|------|
| `YoutubeFilled` | YouTube 채널 |
| `InstagramFilled` | Instagram 채널 |
| `FacebookFilled` | Facebook 채널 |
| `TiktokFilled` | TikTok 채널 |
| `GlobeFilled` | 웹사이트/기타 채널 |
| `VideoFilled` | 영상 콘텐츠 |
| `FileTextFilled` | 블로그 콘텐츠 |
| `ShareFilled` | 소셜 콘텐츠 |
| `MegaphoneFilled` | 광고 콘텐츠 |
| `MessageFilled` | 메시지/커뮤니티 |
| `CalendarFilled` | 일정/빈도 |

### 5.3 Button Patterns

| 타입 | 클래스 | 사용처 |
|------|--------|--------|
| **Primary** | `bg-gradient-to-r from-[#4F1DA1] to-[#021341] text-white rounded-full` | CTA, 로그인 |
| **Secondary** | `bg-white border border-slate-200 text-[#021341] rounded-full` | PDF 다운로드 |
| **Tab Active** | `bg-gradient-to-r from-[#4F1DA1] to-[#021341] text-white rounded-full` | 탭 인터페이스 |
| **Tab Inactive** | `bg-slate-100 text-slate-600 rounded-full hover:bg-slate-200` | 탭 인터페이스 |
| **Nav Active** | `border-b-2 border-[#6C5CE7] text-[#0A1128]` | ReportNav 탭 |

### 5.4 Badge/Tag Patterns

| 타입 | 스타일 | 예시 |
|------|--------|------|
| **Priority P0** | `bg-[#FFF0F0] text-[#7C3A4B] border-[#F5D5DC]` | 긴급 채널 |
| **Priority P1** | `bg-[#FFF6ED] text-[#7C5C3A] border-[#F5E0C5]` | 주요 채널 |
| **Priority P2** | `bg-[#F3F0FF] text-[#4A3A7C] border-[#D5CDF5]` | 보조 채널 |
| **Content Type** | 각 semantic status 색상 | 카드 내 유형 태그 |
| **Platform** | `bg-slate-100 text-slate-700` | 일반 플랫폼 라벨 |

---

## 6. Animation Patterns

| 패턴 | 구현 | 사용처 |
|------|------|--------|
| **Scroll reveal** | `motion.div` `opacity: 0, y: 20→40` | 모든 SectionWrapper, 카드 |
| **Stagger** | `delay: index * 0.1` | 그리드 카드, 리스트 |
| **Blob float** | `animate-blob` (7s) / `animate-blob-large` (25s) | Hero, Modules 배경 |
| **Score ring** | `motion.circle` dashoffset animation | ScoreRing |
| **Page transition** | Instant (no transition) | React Router |

---

## 9. Hero Section Specification

### Layout & Spacing
| Property | Value | Tailwind Class |
|----------|-------|---------------|
| Top padding | 112px / 144px | `pt-28 md:pt-36` |
| Bottom padding | 48px / 64px | `pb-12 md:pb-16` |
| Content max-width | 896px | `max-w-4xl mx-auto` |

**주의:** `min-h-screen` 사용 금지 — 다른 섹션과 일관된 간격 유지 (~160px gap between sections)

### Content Structure
1. **Badge** — `PrismFilled` infinity loop icon + "Agentic AI Marketing Automation for Premium Medical Business & Marketing Agency"
2. **H1** — "Infinite Growth Marketing Engine." (`text-5xl md:text-7xl tracking-[-0.02em]`)
3. **Subtitle** — "Marketing that learns, improves, and accelerates — automatically. 쓸수록 더 정교해지는 AI 마케팅 엔진."
4. **CTA** — URL input + Analyze button (gradient `from-[#4F1DA1] to-[#021341]`)

### Kerning Adjustments (Playfair Display ligature fix)
Playfair Display의 `fi` ligature가 겹침 발생 시 개별 문자에 `margin-left` 음수값 적용:
```tsx
<span className="tracking-[0.05em]">
  In<span className="ml-[-0.04em]">f</span>
  <span className="ml-[-0.04em]">inite</span>
</span>
```
**규칙:** `letter-spacing`은 문자 뒤에 적용되므로, 특정 문자 앞만 좁히려면 `margin-left` 사용

### Section Spacing Consistency
| Section Transition | Gap (approx.) |
|-------------------|---------------|
| Hero → TargetAudience | ~160px |
| TargetAudience → Problems | ~192px |
| Problems → Solution | ~192px |
| Solution → Modules | ~192px |

---

## 7. PDF Export Rules

| 규칙 | 구현 |
|------|------|
| 숨길 요소 | `data-report-nav`, `data-plan-nav`, `nav`, `data-cta-card`, `data-no-print` |
| 콘텐츠 래퍼 | `data-report-content` 또는 `data-plan-content` |
| 페이지 분할 | 섹션 단위 원자적 처리, 900px 이하 섹션은 통째로 |
| 마진 | 8mm 전방향 |
| 푸터 | "INFINITH Marketing Intelligence Report | Page X / Y" (7pt, #B4B4B4) |
| 해상도 | `scale: 2`, JPEG `quality: 0.9` |
| 애니메이션 | 내보내기 전 `opacity: 1, transform: none` 강제 적용 |

---

## 8. Responsive Breakpoints

| Breakpoint | Width | 주요 변화 |
|------------|-------|----------|
| Mobile | < 768px | 1열 그리드, 축소된 헤딩 |
| Tablet (md) | 768px+ | 2열 그리드, 중간 헤딩 |
| Desktop (lg) | 1024px+ | 3열 그리드, 풀 레이아웃 |
| Max content | 1280px | `max-w-7xl mx-auto` |

---

*이 문서는 코드와 함께 버전 관리됩니다. 디자인 변경 시 반드시 이 문서도 업데이트하세요.*