# 모서리

모서리 둥글기는 7단계이고 서비스가 바뀌어도 같다.

| 토큰 | 값(px) | CSS 변수 | 용도 | 앱에서 쓴 횟수 |
| --- | --- | --- | --- | --- |
| `sm` | 8 | `--tds-radius-sm` | 작게. 작은 태그와 썸네일의 모서리. | 6 |
| `md` | 12 | `--tds-radius-md` | 입력 칸. `Field`의 모서리, 시간 선택 띠, 대화상자 버튼(md + 2 = 14). | 55 |
| `tile` | 14 | `--tds-radius-tile` | 타일. 정의만 있다. 앱 코드는 같은 값 14를 숫자로 직접 쓴다(`OptionRow`, `RowIcon`). | 0 |
| `lg` | 16 | `--tds-radius-lg` | 카드. `FeedbackCard`, `ChoiceCard`, 메뉴 목록 같은 안쪽 카드. | 44 |
| `card` | 20 | `--tds-radius-card` | 큰 카드. `Card`의 모서리. | 18 |
| `sheet` | 24 | `--tds-radius-sheet` | 시트. `Sheet`와 `dialog`의 모서리. 시트는 위쪽 두 모서리만 둥글다. | 10 |
| `pill` | 999 | `--tds-radius-pill` | 알약. 버튼, 칩, 탭 같은 알약 모양. 가로가 어떤 길이든 양 끝이 완전히 둥글다. | 33 |

## 코드가 직접 쓰는 값

| 값 | 쓰는 곳 | 설명 |
| --- | --- | --- |
| 22 | `Panel`, `SettingsGroup` | 리포트와 설정의 흰 패널 |
| 18 | `WellRow`, 토스트, `SwipeRow` 뒷면 | 앱에서 가장 많이 쓰는 직접 값 |
| 14 | `OptionRow`, `RowIcon` | `radius.tile`과 같은 값 |
| 10 | `SmallButton` | 작은 사각형 버튼 |
| 높이의 절반 | `PillTabs`(26, 21), `SubjectIcon`(크기 × 0.28) | 크기에 비례하는 모서리 |