# 프로젝트 관리 규칙

1. **언어 설정**: 영어로 생각하되, 모든 답변은 한국어로 작성한다. (일본어, 중국어는 절대 사용하지 않는다.)
2. **수정 권한 제한**: 사용자가 명시적으로 지시한 사항 외에는 **절대 절대 절대** 코드를 임의로 수정하지 않는다.
3. **로그 기록 철저**: 모달 오픈 여부, 수집 성공/실패 여부 등 진행 상황을 실시간 로그에 상세히 표시한다.

---

## 🎨 디자인 가이드 (Design System)

이 프로젝트는 `tokens.json`에 정의된 디자인 시스템을 준수합니다.

### 1. 컬러 시스템 (Colors)
- **Primary**: `#1E5149` (primary-lv-6) - 브랜드 핵심 컬러
- **Background**: `#FFFFFF` (Light Default) / `#F9FAFB` (Light Muted)
- **Point Colors**:
  - Blue: `#0D8DF2` (Info)
  - Green: `#4DB251` (Success)
  - Red: `#F21D0D` (Error)
  - Yellow: `#FFBF00` (Warning)
- **Special**: `ai_color` (Purple-Blue Gradient) - AI 관련 요소 전용

### 2. 타이포그래피 (Typography)
- **Font Family**: `Pretendard`, `sans-serif`
- **Scale**:
  - **H1**: 20px / ExtraBold (pretendard-0)
  - **H2**: 16px / SemiBold (pretendard-1)
  - **H3/H4**: 14px / SemiBold or Regular
  - **Body/P**: 12px / Regular (pretendard-2)

### 3. 레이아웃 및 간격 (Dimensions)
- **Spacing Unit**: Base 4px (xs: 4px, sm: 8px, md: 16px, lg: 32px, xl: 64px)
- **Border Radius**: sm: 4px, lg: 8px, xl: 16px
- **Shadow**: `0 8px 24px rgba(0,0,0,0.16)` (box__drop-shadow)

### 4. 컴포넌트 규칙
- **Buttons**: `borderRadius.lg (8px)` 적용, Primary 배경색 사용
- **Cards**: `borderRadius.lg (8px)` 적용, Subtle Shadow 활용
- **Topbar**: Height 36px, `headercolor` 그라데이션 적용 가능