# 타이포그래피

---

## 폰트 패밀리

| 역할 | 폰트 | 적용 범위 |
|------|------|-----------|
| 기본 (한글) | Pretendard Variable / Pretendard | 모든 UI 텍스트 |
| 기본 (영문/숫자) | Inter | 영문 전용 컨텍스트 |
| 코드 | JetBrains Mono / Fira Code | 코드 블록, API Key 등 |

CSS 변수:
```css
--font-sans: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont,
             system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo',
             'Noto Sans KR', 'Malgun Gothic', sans-serif;
--font-mono: 'JetBrains Mono', 'Fira Code', Consolas, Monaco, 'Courier New', monospace;
```

---

## 타입 스케일

8단계 스케일. `rem` 단위 기준 (root 16px).

| 단계 | 이름 | px | rem | line-height | weight | 용도 |
|------|------|----|-----|-------------|--------|------|
| 1 | Display | 48px | 3rem | 1.2 | 700 | 히어로, 랜딩 |
| 2 | H1 | 36px | 2.25rem | 1.2 | 700 | 페이지 제목 |
| 3 | H2 | 30px | 1.875rem | 1.25 | 600 | 섹션 제목 |
| 4 | H3 | 24px | 1.5rem | 1.3 | 600 | 카드 제목 |
| 5 | Body-lg | 18px | 1.125rem | 1.6 | 400 | 강조 본문 |
| 6 | Body | 16px | 1rem | 1.6 | 400 | 기본 본문 |
| 7 | Caption | 14px | 0.875rem | 1.5 | 400 | 레이블, 보조 |
| 8 | Overline | 12px | 0.75rem | 1.5 | 500 | 카테고리, 태그 |

---

## Font Weight

| 값 | 이름 | 사용처 |
|----|------|--------|
| 300 | Light | 큰 디스플레이 텍스트 부제목 |
| 400 | Regular | 기본 본문 |
| 500 | Medium | 캡션, Overline, 강조 레이블 |
| 600 | SemiBold | H2, H3, 버튼 |
| 700 | Bold | Display, H1, 강조 수치 |

---

## Tailwind 클래스 매핑

| 단계 | Tailwind 클래스 |
|------|----------------|
| Display | `text-5xl font-bold leading-tight` |
| H1 | `text-4xl font-bold leading-tight` |
| H2 | `text-3xl font-semibold leading-snug` |
| H3 | `text-2xl font-semibold leading-snug` |
| Body-lg | `text-lg font-normal leading-relaxed` |
| Body | `text-base font-normal leading-relaxed` |
| Caption | `text-sm font-normal leading-normal` |
| Overline | `text-xs font-medium leading-normal tracking-wide uppercase` |

---

## 한글 타이포그래피 규칙

- `word-break: keep-all` 적용 — 단어 중간에서 줄바꿈 방지
- 한글 사용 시 `letter-spacing` 조정 금지 (Pretendard 기본값 유지)
- 본문 최대 너비: `max-w-prose` (65ch) — 가독성 확보

```css
/* 전역 적용 권장 */
p, li, dd {
  word-break: keep-all;
}
```

---

## 색상 규칙

| 상황 | 클래스 |
|------|--------|
| 제목, 본문 | `text-[var(--color-text-primary)]` |
| 보조 설명 | `text-[var(--color-text-secondary)]` |
| placeholder, 비활성 | `text-[var(--color-text-tertiary)]` |
| 링크 | `text-[var(--color-primary)] hover:text-[var(--color-primary-hover)]` |
| 위험/오류 | `text-[var(--color-danger)]` |