# 간격

간격은 9단계 값만 쓴다. 서비스가 바뀌어도 같다.

| 토큰 | 값(px) | CSS 변수 | 용도 | 앱에서 쓴 횟수 |
| --- | --- | --- | --- | --- |
| `xxs` | 2 | `--tds-space-xxs` | 아주 좁게. 정의만 있고 앱 코드에서는 아직 쓰지 않는다. | 0 |
| `xs` | 4 | `--tds-space-xs` | 붙여서. 서로 붙어 있어야 하는 요소 사이. 예: 개념 본문에서 핵심 포인트 목록 위쪽. | 9 |
| `sm` | 8 | `--tds-space-sm` | 가깝게. 관련된 작은 요소 사이. 버튼 두 개 사이, 칩 사이, 대화상자 버튼 사이. | 62 |
| `md` | 12 | `--tds-space-md` | 보통. 카드 안의 요소 사이. `Gap`의 기본값, 시트 안 항목 사이, 섹션 제목 아래. | 125 |
| `lg` | 16 | `--tds-space-lg` | 넉넉하게. 카드 안쪽 여백(`Card`), 시트와 하단 고정 영역의 아래 여백. | 143 |
| `gutter` | 20 | `--tds-space-gutter` | 화면 좌우. 화면 가장자리와 내용 사이. `Screen`이 좌우에 20을 둔다. | 119 |
| `xl` | 24 | `--tds-space-xl` | 구역 사이. 섹션과 섹션 사이. `SectionTitle`이 위에 24를 둔다. | 83 |
| `xxl` | 32 | `--tds-space-xxl` | 큰 구역 사이. 화면 맨 아래 여백(`Screen` 스크롤 영역), 비어 있는 화면의 위아래 여백. | 20 |
| `xxxl` | 40 | `--tds-space-xxxl` | 가장 크게. 앱에서 한 곳(검색 화면)에서만 쓴다. | 1 |

누르는 영역은 `hitSlop`으로 사방 10씩 넓힌다. 이웃한 눌림 요소 사이는 8 이상 띄운다.

규칙: S1~S6은 사용 규칙 문서를 본다.