# 디자인 토큰 · 컴포넌트 규칙

`assets/css/tokens.css`에 CSS 변수로 들어 있어요. 새 화면을 만들 때도 이 변수만 쓰세요.

## 색

| 이름 | 값 | 쓰는 곳 |
|---|---|---|
| `--key` (key/600) | `#4F46E5` | 버튼, 로고, 선택, 진행 막대 |
| `--key-50` / `--key-100` / `--key-200` | `#EEF2FF` / `#E0E7FF` / `#C7D2FE` | 연한 선택 배경, 포커스 링, 선택 테두리 |
| `--key-700` | `#4338CA` | 강조 글자 |
| `--app-bg` | `#FAFAFE` | 앱 배경 |
| `--panel` | `#FFFFFF` | 카드 |
| `--line` | `#E2E3EF` | 선 |
| `--ink` / `--muted` / `--faint` | `#1B1B2F` / `#626280` / `#9A9AB5` | 본문 / 보조 / 흐린 글자 |
| 사이드 목록 회색 | `#EDEEF5` | 8-4·8-5·8-6 왼쪽 레일 |
| `--ok` / `--warn` / `--bad` | `#059669` / `#B45309` / `#BE123C` | **판정 의미로만** (등급 점, 완료, 위험) |
| `--news` | `#0284C7` | 아이스브레이킹 최근 소식에만 |

규칙: 초록·주황·빨강은 장식에 쓰지 않아요. 등급은 **점 + 이름**(투표 목록만 점 + 범례).

## 글자

- 한글: **Noto Sans KR** (400·500·700·900) · 숫자·코드·배지: **JetBrains Mono**
- 크기는 8단계만: `--fs-display` 36 · `--fs-h1` 24 · `--fs-h2` 18 · `--fs-h3` 16 · `--fs-body` 14 · `--fs-sm` 13 · `--fs-cap` 12 · `--fs-label` 11

## 모서리

보드 18 · 카드 14~16 · 버튼·입력 10 · 작은 버튼 8 · 칩·배지 999

## 로고

IE 모노그램: 32×32 격자, 배경 `#4F46E5` 모서리 8, 흰 막대 두께 3.4. SVG는 각 화면 HTML의 `.appicon`을 그대로 쓰면 돼요.

## 자주 쓰는 클래스

| 클래스 | 뜻 |
|---|---|
| `.btn` · `.btn.ghost` · `.btn.soft` · `.btn.text` · `.btn.sm` · `.btn.lg` · `.btn.block` | 버튼 |
| `.inp` · `.ta` | 입력칸 · 여러 줄 입력 |
| `.chip` · `.chip.on` · `.chip.lock` + `.pro` | 선택 칩 · 선택됨 · Pro 잠금 |
| `.sk` · `.sk.on` | 스킬 칩(여러 개) |
| `.card` · `.panel2` · `.sc2` | 카드 · 본문 패널 · 사이드 카드 |
| `.badge` · `.badge.key` · `.badge.ok` | 작은 배지 |
| `.ibar` | 세션 상단바(로고 · 가운데 단계 이름 + 전체 진행률 · 역할 · 타이머 · 프로필) |
| `.dsteps` `.ds.cur` | 발산 안의 작은 단계 표시 |
| `.focusgrid` `.rail` `.ri.on` `.railbtn` `.detail.lift` | 왼쪽 회색 목록 + 떠 있는 흰 본문 + 목록 접기 |
| `.grade.go/.fix/.re` (+`.gbox`) | 등급(점 + 이름) |
| `.ans` | AI 답 태그(가능 · 있음 · 상 …) |
| `.b.ai` `.b.me` `.b.fq` `.b.explain` `.b.good` | 채팅 말풍선: AI · 나 · 꼬리질문 · 뜻풀이 · 끝 안내(마지막 1번만) |