# Semantic Spacing

여백에 관한 시멘틱토큰을 정의합니다.

| 이름 | 여백 | 용도 |
| --- | --- | --- |
| helper_text.gap.desktop | 
6px

 | Helper Text Gap (Desktop) |
| helper_text.gap.mobile | 

6px

 | Helper Text Gap (Mobile) |
| section.margin.desktop | 

28px

 | Section Margin (Desktop) |
| section.margin.mobile | 

0px

 | Section Margin (Mobile) |
| section.gap.desktop | 

8px

 | Section gap (Desktop) |
| section.gap.mobile | 

8px

 | Section gap (Mobile) |
| section.padding_horizontal.desktop | 

16px

 | Section Padding Horizontal (Desktop) |
| section.padding_horizontal.mobile | 

16px

 | Section Padding Horizontal (Mobile) |
| section.padding_vertical.desktop | 

16px

 | Section Padding Vertical (Desktop) |
| section.padding_vertical.mobile | 

24px

 | Section Padding Vertical (Mobile) |
| content.gap_medium.desktop | 

20px

 | 속성이 다른 Form요소 사이의 여백(예 - 입력 - 버튼 사이) (Desktop) |
| content.gap_medium.mobile | 

16px

 | 속성이 다른 Form요소 사이의 여백(예 - 입력 - 버튼 사이) (Mobile) |
| content.gap_small.desktop | 

12px

 | Form 입력요소 사이의 여백(Desktop) |
| content.gap_small.mobile | 

8px

 | Form 입력요소 사이의 여백(Mobile) |
| content.gap_xsmall.desktop | 

8px

 | 버튼 ↔ 버튼, 라벨 ↔ 값 사이의 여백 (Desktop) |
| content.gap_xsmall.mobile | 

8px

 | 버튼 ↔ 버튼, 라벨 ↔ 값 사이의 여백 (Mobile) |
| content.gap_xxsmall.desktop | 

4px

 | 아이콘 ↔ 텍스트, 제목 ↔ 보조 텍스트 사이의 여백 (Desktop) |
| content.gap_xxsmall.mobile | 

4px

 | 아이콘 ↔ 텍스트, 제목 ↔ 보조 텍스트 사이의 여백 (Mobile) |
| modal.dialog_padding.desktop | 

24px

 | Alert·Confirm 모달 패딩 (Desktop) |
| modal.dialog_padding.mobile | 

24px

 | Alert·Confirm 모달 패딩 (Mobile) |
| modal.dialog_content_button_gap.desktop | 

24px

 | Alert·Confirm 모달 콘텐츠 ↔ 버튼 영역 사이의 여백 (Desktop) |
| modal.dialog_content_button_gap.mobile | 

24px

 | Alert·Confirm 모달 콘텐츠 ↔ 버튼 영역 사이의 여백 (Mobile) |
| modal.padding.desktop | 

16px

 | Basic·Notice·Floating 모달 패딩 (Desktop) |
| modal.padding.mobile | 

16px

 | Basic·Notice·Floating 모달 패딩 (Mobile) |
| modal.content_gap.desktop | 

8px

 | 모달 상단 콘텐츠(아이콘·제목·본문) 요소 사이의 여백 (Desktop) |
| modal.content_gap.mobile | 

8px

 | 모달 상단 콘텐츠(아이콘·제목·본문) 요소 사이의 여백 (Mobile) |
| modal.content_button_gap.desktop | 

16px

 | Floating 패널 콘텐츠 ↔ 버튼 영역 사이의 여백 (Desktop) |
| modal.content_button_gap.mobile | 

16px

 | Floating 패널 콘텐츠 ↔ 버튼 영역 사이의 여백 (Mobile) |
| modal.button_gap.desktop | 

8px

 | 모달 버튼 사이의 여백 (Desktop) |
| modal.button_gap.mobile | 

8px

 | 모달 버튼 사이의 여백 (Mobile) |
| modal.body_gap.desktop | 

12px

 | 모달 본문(Slot) 요소 사이의 여백 (Desktop) |
| modal.body_gap.mobile | 

8px

 | 모달 본문(Slot) 요소 사이의 여백 (Mobile) |
| modal.header_gap.desktop | 

16px

 | 모달 헤더 아이콘·제목·닫기 버튼 사이의 여백 (Desktop) |
| modal.header_gap.mobile | 

16px

 | 모달 헤더 아이콘·제목·닫기 버튼 사이의 여백 (Mobile) |
| modal.footer_gap.desktop | 

16px

 | 모달 푸터 요소(체크박스·버튼) 사이의 여백 (Desktop) |
| modal.footer_gap.mobile | 

16px

 | 모달 푸터 요소(체크박스·버튼) 사이의 여백 (Mobile) |
| modal.floating_gap.desktop | 

8px

 | Floating 패널 ↔ 열기 버튼 사이의 여백 (Desktop) |
| modal.floating_gap.mobile | 

8px

 | Floating 패널 ↔ 열기 버튼 사이의 여백 (Mobile) |
| table.padding_large.desktop | 

16px

 | Table Padding Large (Desktop) |
| table.padding_large.mobile | 

16px

 | Table Padding Large (Mobile) |
| table.padding_medium.desktop | 

12px

 | Table Padding Medium (Desktop) |
| table.padding_medium.mobile | 

12px

 | Table Padding Medium (Mobile) |
| table.padding_small.desktop | 

8px

 | Table Padding Small (Desktop) |
| table.padding_small.mobile | 

8px

 | Table Padding Small (Mobile) |
| table.padding_xsmall.desktop | 

4px

 | Table Padding XSmall (Desktop) |
| table.padding_xsmall.mobile | 

4px

 | Table Padding XSmall (Mobile) |
| empty_state.padding.desktop | 

80px

 | Empty State Padding (Desktop) |
| empty_state.padding.mobile | 

80px

 | Empty State Padding (Mobile) |