docs/DESIGN-SYSTEM.md

@@ -22,58 +22,218 @@ Google Stitch MCP로 생성된 스크린을 기반으로 일관된 UI 구현을
 | 6 | Operational Shell (Layout) | `86fd57c9f3c749d288f6270838a9387d` | TopBar, SubMenu, 3컬럼 레이아웃 |
 | 7 | Container & Navigation | `201c2c0c47b74fcfb3427d029319fa9d` | 카드, 섹션, 탭바, KV 행, 헤더바 |
 
-## 디자인 토큰 요약
+---
 
-### 배경색
-| 토큰 | Tailwind | 값 | 용도 |
-|------|----------|-----|------|
-| `--bg0` | `bg-bg-0` | `#0a0e1a` | 페이지 배경, 입력 배경 |
-| `--bg1` | `bg-bg-1` | `#0f1524` | 사이드바, 패널 |
-| `--bg2` | `bg-bg-2` | `#121929` | 테이블 헤더 |
-| `--bg3` | `bg-bg-3` | `#1a2236` | 카드, 버튼(secondary) |
-| `--bgH` | `bg-bg-hover` | `#1e2844` | 호버 상태 |
+## Foundations
 
-### 텍스트
-| 토큰 | Tailwind | 값 | 용도 |
-|------|----------|-----|------|
-| `--t1` | `text-text-1` | `#edf0f7` | 주요 텍스트 |
-| `--t2` | `text-text-2` | `#b0b8cc` | 보조 텍스트 |
-| `--t3` | `text-text-3` | `#8690a6` | 비활성, 플레이스홀더 |
+### 색상 (Color Palette)
 
-### 보더
-| 토큰 | Tailwind | 값 |
-|------|----------|-----|
-| `--bd` | `border-border` | `#1e2a42` |
-| `--bdL` | `border-border-light` | `#2a3a5c` |
+#### Primitive Colors
 
-### 강조색
-| 토큰 | Tailwind | 값 | 용도 |
-|------|----------|-----|------|
-| `--cyan` | `text-primary-cyan` | `#06b6d4` | Primary accent, 활성 상태 |
-| `--blue` | `text-primary-blue` | `#3b82f6` | Secondary accent |
-| `--purple` | `text-primary-purple` | `#a855f7` | Tertiary accent |
+UI 전반에서 사용하는 기본 색조 팔레트. Navy는 배경 전용 5단계, 나머지는 00~100의 11단계 스케일.
 
-### 상태색
-| 토큰 | 값 | 용도 |
-|------|-----|------|
-| `--red` | `#ef4444` | 위험, 삭제 |
-| `--orange` | `#f97316` | 주의 |
-| `--yellow` | `#eab308` | 경고 |
-| `--green` | `#22c55e` | 정상, 성공 |
+**Navy** (배경 전용)
 
-### 타이포그래피
-| 크기 | 용도 | 폰트 |
-|------|------|------|
-| 9px | 메타정보 | Noto Sans KR |
-| 10px | 테이블/KV 데이터 | Noto Sans KR |
-| 11px | 입력, 버튼, 값 표시 | Noto Sans KR |
-| 13px | 섹션 헤더 | Noto Sans KR, bold |
-| 15px | 패널 타이틀 | Noto Sans KR, bold |
-| 수치 데이터 | 모든 숫자 | JetBrains Mono |
+| Step | Hex |
+|------|-----|
+| 0 | `#0a0e1a` |
+| 1 | `#0f1524` |
+| 2 | `#121929` |
+| 3 | `#1a2236` |
+| hover | `#1e2844` |
+
+**Cyan**
+
+| 00 | 10 | 20 | 30 | 40 | 50 | 60 | 70 | 80 | 90 | 100 |
+|----|----|----|----|----|----|----|----|----|----|----|
+| `#ecfeff` | `#cffafe` | `#a5f3fc` | `#67e8f9` | `#22d3ee` | `#06b6d4` | `#0891b2` | `#0e7490` | `#155e75` | `#164e63` | `#083344` |
+
+**Blue**
+
+| 00 | 10 | 20 | 30 | 40 | 50 | 60 | 70 | 80 | 90 | 100 |
+|----|----|----|----|----|----|----|----|----|----|----|
+| `#eff6ff` | `#dbeafe` | `#bfdbfe` | `#93c5fd` | `#60a5fa` | `#3b82f6` | `#2563eb` | `#1d4ed8` | `#1e40af` | `#1e3a8a` | `#172554` |
+
+**Red**
+
+| 00 | 10 | 20 | 30 | 40 | 50 | 60 | 70 | 80 | 90 | 100 |
+|----|----|----|----|----|----|----|----|----|----|----|
+| `#fef2f2` | `#fee2e2` | `#fecaca` | `#fca5a5` | `#f87171` | `#ef4444` | `#dc2626` | `#b91c1c` | `#991b1b` | `#7f1d1d` | `#450a0a` |
+
+**Green**
+
+| 00 | 10 | 20 | 30 | 40 | 50 | 60 | 70 | 80 | 90 | 100 |
+|----|----|----|----|----|----|----|----|----|----|----|
+| `#f0fdf4` | `#dcfce7` | `#bbf7d0` | `#86efac` | `#4ade80` | `#22c55e` | `#16a34a` | `#15803d` | `#166534` | `#14532d` | `#052e16` |
+
+**Orange**
+
+| 00 | 10 | 20 | 30 | 40 | 50 | 60 | 70 | 80 | 90 | 100 |
+|----|----|----|----|----|----|----|----|----|----|----|
+| `#fff7ed` | `#ffedd5` | `#fed7aa` | `#fdba74` | `#fb923c` | `#f97316` | `#ea580c` | `#c2410c` | `#9a3412` | `#7c2d12` | `#431407` |
+
+**Yellow**
+
+| 00 | 10 | 20 | 30 | 40 | 50 | 60 | 70 | 80 | 90 | 100 |
+|----|----|----|----|----|----|----|----|----|----|----|
+| `#fefce8` | `#fef9c3` | `#fef08a` | `#fde047` | `#facc15` | `#eab308` | `#ca8a04` | `#a16207` | `#854d0e` | `#713f12` | `#422006` |
+
+#### Semantic Colors
+
+컨텍스트에 따라 의미를 부여한 토큰. Dark/Light 두 테마 값 병기.
+
+**Text**
+
+| 토큰 | Dark | Light | 용도 |
+|------|------|-------|------|
+| `text-1` | `#edf0f7` | `#0f172a` | 기본 텍스트, 아이콘 기본 |
+| `text-2` | `#b0b8cc` | `#475569` | 보조 텍스트 |
+| `text-3` | `#8690a6` | `#94a3b8` | 비활성, 플레이스홀더 |
+
+**Background**
+
+| 토큰 | Dark | Light | 용도 |
+|------|------|-------|------|
+| `bg-0` | `#0a0e1a` | `#f8fafc` | 페이지 배경 |
+| `bg-1` | `#0f1524` | `#ffffff` | 사이드바, 패널 |
+| `bg-2` | `#121929` | `#f1f5f9` | 테이블 헤더 |
+| `bg-3` | `#1a2236` | `#e2e8f0` | 카드 배경 |
+| `bg-hover` | `#1e2844` | `#cbd5e1` | 호버 상태 |
+
+**Border**
+
+| 토큰 | Dark | Light | 용도 |
+|------|------|-------|------|
+| `border` | `#1e2a42` | `#cbd5e1` | 기본 구분선 |
+| `border-light` | `#2a3a5c` | `#e2e8f0` | 연한 구분선 |
+
+**Accent**
+
+| 토큰 | Dark | Light | 용도 |
+|------|------|-------|------|
+| `primary-cyan` | `#06b6d4` | `#06b6d4` | 주요 강조, 활성 상태 |
+| `primary-blue` | `#3b82f6` | `#0891b2` | 보조 강조 |
+| `primary-purple` | `#a855f7` | `#6366f1` | 3차 강조 |
+
+**Status**
+
+| 토큰 | Dark | Light | 용도 |
+|------|------|-------|------|
+| `status-red` | `#ef4444` | `#dc2626` | 위험, 삭제 |
+| `status-orange` | `#f97316` | `#c2410c` | 주의 |
+| `status-yellow` | `#eab308` | `#b45309` | 경고 |
+| `status-green` | `#22c55e` | `#047857` | 정상, 성공 |
+
+---
+
+### 타이포그래피 (Typography)
+
+#### Font Family
+
+| 이름 | className | Font Stack | 용도 |
+|------|-----------|------------|------|
+| Noto Sans KR | `font-korean` | `'Noto Sans KR', sans-serif` | 기본 UI 텍스트, 한국어 콘텐츠 전반 |
+| JetBrains Mono | `font-mono` | `'JetBrains Mono', monospace` | 좌표, 수치, 코드, 토큰 이름 |
+| Outfit | `font-sans` | `'Outfit', 'Noto Sans KR', sans-serif` | 영문 헤딩, 브랜드 타이틀 |
+
+> Body 기본 스택: `font-family: 'Outfit', 'Noto Sans KR', sans-serif`
+
+#### Typography Tokens (`.wing-*` 클래스)
+
+| 클래스 | Size | Font | Weight | 용도 | 샘플 |
+|--------|------|------|--------|------|------|
+| `.wing-title` | 15px | font-korean | Bold (700) | 패널 제목 | 확산 예측 시뮬레이션 |
+| `.wing-section-header` | 13px | font-korean | Bold (700) | 섹션 헤더 | 기본 정보 입력 |
+| `.wing-label` | 11px | font-korean | Semibold (600) | 필드 레이블 | 유출량 (kL) |
+| `.wing-btn` | 11px | font-korean | Semibold (600) | 버튼 텍스트 | 시뮬레이션 실행 |
+| `.wing-value` | 11px | font-mono | Semibold (600) | 수치 / 데이터 값 | 35.1284° N, 129.0598° E |
+| `.wing-input` | 11px | font-korean | Normal (400) | 입력 필드 | 서해 대산항 인근 해역 |
+| `.wing-section-desc` | 10px | font-korean | Normal (400) | 섹션 설명 | 예측 결과는 기상 조건에 따라... |
+| `.wing-subtitle` | 10px | font-korean | Normal (400) | 보조 설명 | 최근 업데이트: 2026-03-24 09:00 KST |
+| `.wing-meta` | 9px | font-korean | Normal (400) | 메타 정보 | v2.1 \| 해양환경공단 |
+| `.wing-badge` | 9px | font-korean | Bold (700) | 뱃지 / 태그 | 진행중 |
+
+---
 
 ### Border Radius
-| 크기 | 값 | 용도 |
-|------|-----|------|
-| sm | 6px | 버튼, 입력, 소형 카드 |
-| md | 10px | 카드, 모달, 패널 |
 
+#### Radius Tokens
+
+| Tailwind 클래스 | 값 | 비고 |
+|-----------------|-----|------|
+| `rounded-sm` | 6px | **Custom** (Tailwind 기본값 오버라이드) |
+| `rounded` | 4px (0.25rem) | Tailwind 기본 |
+| `rounded-md` | 10px | **Custom** (Tailwind 기본값 오버라이드) |
+| `rounded-lg` | 8px (0.5rem) | Tailwind 기본 |
+| `rounded-xl` | 12px (0.75rem) | Tailwind 기본 |
+| `rounded-2xl` | 16px (1rem) | Tailwind 기본 |
+| `rounded-full` | 9999px | Tailwind 기본 |
+
+#### 컴포넌트 매핑
+
+| Radius | 값 | 적용 컴포넌트 |
+|--------|-----|-------------|
+| `rounded-sm` | 6px | `.wing-btn`, `.wing-input`, `.wing-card-sm` |
+| `rounded` | 4px | `.wing-badge` |
+| `rounded-md` | 10px | `.wing-card`, `.wing-section`, `.wing-tab` |
+| `rounded-lg` | 8px | `.wing-tab-bar` |
+| `rounded-xl` | 12px | `.wing-modal` |
+
+---
+
+### 레이아웃 (Layout)
+
+#### Breakpoints
+
+| Name | Prefix | Min Width | 사용 | 비고 |
+|------|--------|-----------|------|------|
+| sm | `sm:` | 640px | - | |
+| md | `md:` | 768px | - | |
+| lg | `lg:` | 1024px | - | |
+| xl | `xl:` | 1280px | **사용 중** | TopBar 탭 레이블/아이콘 토글 |
+| 2xl | `2xl:` | 1536px | - | |
+
+> Desktop(≥ 1280px)만 지원. Tablet/Mobile 미지원.
+
+| Device | Width | Columns | Gutter | Margin |
+|--------|-------|---------|--------|--------|
+| Desktop | ≥ 1280px | flex 기반 가변 | gap-2 ~ gap-6 | px-5 ~ px-8 |
+| Tablet | 768px ~ 1279px | - | - | - |
+| Mobile | < 768px | - | - | - |
+
+#### Spacing Scale
+
+| Scale | rem | px | 용도 |
+|-------|-----|----|------|
+| 0.5 | 0.125rem | 2px | 미세 간격 |
+| 1 | 0.25rem | 4px | 최소 간격 (gap-1) |
+| 1.5 | 0.375rem | 6px | 컴팩트 간격 (gap-1.5) |
+| 2 | 0.5rem | 8px | 기본 간격 (gap-2, p-2) |
+| 2.5 | 0.625rem | 10px | 중간 간격 |
+| 3 | 0.75rem | 12px | 표준 간격 (gap-3, p-3) |
+| 4 | 1rem | 16px | 넓은 간격 (p-4, gap-4) |
+| 5 | 1.25rem | 20px | 패널 패딩 (px-5, py-5) |
+| 6 | 1.5rem | 24px | 섹션 간격 (gap-6, p-6) |
+| 8 | 2rem | 32px | 큰 간격 (px-8, gap-8) |
+| 16 | 4rem | 64px | 최대 간격 |
+
+#### Z-Index Layers
+
+| Layer | z-index | Color | 설명 |
+|-------|---------|-------|------|
+| Tooltip | 60 | `#a855f7` | 툴팁, 드롭다운 메뉴 |
+| Popup | 50 | `#f97316` | 팝업, 지도 오버레이 |
+| Modal | 40 | `#ef4444` | 모달 다이얼로그, 백드롭 |
+| TopBar | 30 | `#3b82f6` | 상단 네비게이션 바 |
+| Sidebar | 20 | `#06b6d4` | 사이드바, 패널 |
+| Content | 10 | `#22c55e` | 메인 콘텐츠 영역 |
+| Base | 0 | `#8690a6` | 기본 레이어, 배경 |
+
+#### App Shell Classes
+
+| 클래스 | 역할 | Tailwind 스타일 |
+|--------|------|----------------|
+| `.wing-panel` | 탭 콘텐츠 패널 | `flex flex-col h-full overflow-hidden` |
+| `.wing-panel-scroll` | 패널 내 스크롤 영역 | `flex-1 overflow-y-auto` |
+| `.wing-header-bar` | 패널 헤더 | `flex items-center justify-between shrink-0 px-5 border-b` |
+| `.wing-sidebar` | 사이드바 | `flex flex-col border-r border-border` |