# 스페이싱 & 레이아웃

---

## 기본 스케일 (4px 기반)

모든 여백과 크기는 4px 단위를 기준으로 한다.

| Token | px | rem | Tailwind | 용도 |
|-------|----|-----|----------|------|
| space-0 | 0 | 0 | `p-0`, `m-0` | 초기화 |
| space-1 | 4px | 0.25rem | `p-1`, `m-1` | 아이콘 내부 간격 |
| space-2 | 8px | 0.5rem | `p-2`, `m-2` | 배지 내부 패딩 |
| space-3 | 12px | 0.75rem | `p-3`, `m-3` | 버튼 수직 패딩 |
| space-4 | 16px | 1rem | `p-4`, `m-4` | 카드 내부 패딩 (sm) |
| space-5 | 20px | 1.25rem | `p-5`, `m-5` | 인풋 내부 패딩 |
| space-6 | 24px | 1.5rem | `p-6`, `m-6` | 카드 내부 패딩 (md) |
| space-8 | 32px | 2rem | `p-8`, `m-8` | 섹션 내부 패딩 |
| space-10 | 40px | 2.5rem | `p-10`, `m-10` | 섹션 상하 여백 |
| space-12 | 48px | 3rem | `p-12`, `m-12` | 페이지 상하 패딩 |
| space-16 | 64px | 4rem | `p-16`, `m-16` | 섹션 간 여백 |
| space-20 | 80px | 5rem | `p-20`, `m-20` | 페이지 섹션 간격 |
| space-24 | 96px | 6rem | `p-24`, `m-24` | 히어로 여백 |

---

## 컴포넌트별 내부 여백

### Button

| 사이즈 | padding | font-size | height |
|--------|---------|-----------|--------|
| sm | `px-3 py-1.5` | `text-sm` | 32px |
| md | `px-4 py-2` | `text-base` | 40px |
| lg | `px-6 py-3` | `text-lg` | 48px |

### Input

| 사이즈 | padding | font-size | height |
|--------|---------|-----------|--------|
| sm | `px-3 py-1.5` | `text-sm` | 32px |
| md | `px-3 py-2` | `text-base` | 40px |
| lg | `px-4 py-3` | `text-lg` | 48px |

### Card

| 패딩 | 클래스 | 용도 |
|------|--------|------|
| compact | `p-4` | 데이터 테이블 행 |
| default | `p-6` | 일반 카드 |
| spacious | `p-8` | 주요 콘텐츠 카드 |

### Badge

패딩: `px-2 py-0.5` / 폰트: `text-xs font-medium`

### Modal

| 사이즈 | width | padding |
|--------|-------|---------|
| sm | `max-w-sm` | `p-6` |
| md | `max-w-md` | `p-6` |
| lg | `max-w-lg` | `p-8` |
| xl | `max-w-xl` | `p-8` |

---

## 반응형 브레이크포인트

Tailwind CSS 4 기본 브레이크포인트 사용.

| 이름 | 최소 너비 | 용도 |
|------|-----------|------|
| xs | — | 기본 (모바일 우선) |
| sm | 640px | 큰 모바일, 세로 태블릿 |
| md | 768px | 태블릿 |
| lg | 1024px | 데스크톱 |
| xl | 1280px | 와이드 데스크톱 |
| 2xl | 1536px | 울트라 와이드 |

---

## 12컬럼 그리드

```html
<!-- 페이지 컨테이너 -->
<div class="container mx-auto px-4 sm:px-6 lg:px-8">

  <!-- 12컬럼 그리드 -->
  <div class="grid grid-cols-12 gap-4 lg:gap-6">

    <!-- 사이드바 (3컬럼) -->
    <aside class="col-span-12 lg:col-span-3">...</aside>

    <!-- 메인 콘텐츠 (9컬럼) -->
    <main class="col-span-12 lg:col-span-9">...</main>

  </div>
</div>
```

### 자주 쓰는 레이아웃 패턴

| 패턴 | 클래스 |
|------|--------|
| 전체 너비 | `col-span-12` |
| 절반 | `col-span-12 md:col-span-6` |
| 1/3 | `col-span-12 md:col-span-4` |
| 2/3 | `col-span-12 md:col-span-8` |
| 사이드바 | `col-span-12 lg:col-span-3` |
| 콘텐츠 | `col-span-12 lg:col-span-9` |

---

## Gap (간격)

| 컨텍스트 | 클래스 |
|----------|--------|
| 인라인 아이템 (버튼 그룹) | `gap-2` |
| 폼 필드 | `gap-4` |
| 카드 그리드 | `gap-4 lg:gap-6` |
| 섹션 간 | `gap-8 lg:gap-12` |

---

## 스택 레이아웃

```html
<!-- 수직 스택 -->
<div class="flex flex-col gap-4">...</div>

<!-- 수평 스택 -->
<div class="flex items-center gap-2">...</div>

<!-- 정렬 포함 -->
<div class="flex items-center justify-between gap-4">...</div>
```