# Switch

켜는 즉시 반영되는 설정을 켜고 끄는 토글입니다.

> 원본: `03_ASSET_GUIDE/catalog/switch.js` · CSS: `03_ASSET_GUIDE/styles/elements/switch.css`
> kind `element` · category `action-input` · status `stable` · specSource `measured`
> 함께 정의된 블록: [Switch Field](#switch-field) (`atom-switch-field`)

> [!NOTE]
> **기존 프리뷰를 문서화 항목으로 승격한 것입니다**
> `switch` 는 카드 프리뷰의 인라인 `<style>` 에 Track · Thumb 과
> `data-state` 두 값만 정의된 상태였습니다. 그 CSS 를 `styles/elements/switch.css` 로
> 빼면서 실제 `<input type="checkbox">` 결선, `small` 사이즈, hover · focus-visible ·
> disabled 상태, 라벨 행(`atom-switch-field`)을 얹었습니다. 기존 클래스명
> (`atom-switch` · `__thumb` · `[data-state]`)은 그대로 살렸습니다.

---

## 1. 구성

Track 과 Thumb 두 요소로 구성됩니다.

```
 알림                                   ╭─────────╮
 변경 사항을 바로 알려드려요              │     (●) │
                                        ╰─────────╯
 ③ ④                                      ①   ②
```

| # | 요소 | 필수 | 클래스 | 설명 |
|---|---|---|---|---|
| ① | Track | 필수 | `atom-switch` | `atom-switch` 자신입니다. 배경색으로 켜짐/꺼짐을 나타내고, 크기를 결정합니다. |
| ② | Thumb | 필수 | `atom-switch__thumb` | Track 안에서 좌우로 움직이는 원입니다. **위치**가 상태를 나타내는 주 신호입니다. |
| — | Input | 실제 컨트롤일 때 | `atom-switch__input` | 시각적으로 감춘 `<input type="checkbox">`. 상태·초점·폼 값을 담습니다. |
| ③ | Label | Switch Field | `atom-switch-field__label` | Switch 자신은 그리지 않습니다. 라벨 행(`atom-switch-field`)이 담당합니다. |
| ④ | Description | 선택 | `atom-switch-field__description` | 라벨 아래 보충 설명. Label 과 함께 `atom-switch-field__text` 로 묶습니다. |

> [!NOTE]
> **Track 이 곧 컨트롤입니다**
> `atom-switch` 는 감싸는 상자가 아니라 Track 자체입니다. 실제 컨트롤로 쓸 때는 이 요소가
> `<label>` 이 되고, 시각적으로 감춘 `<input type="checkbox" class="atom-switch__input">`
> 이 그 안에 들어갑니다.

---

## 2. 종류 / 크기

### State

`unchecked` 와 `checked` 두 상태에 `disabled` 가 겹쳐질 수 있습니다. **`invalid` 는 없습니다.**
조작 즉시 반영되므로 검증할 제출 단계가 없습니다.

| State | 표현 | 정적 마크업 | 실제 컨트롤 |
|---|---|---|---|
| `unchecked` | Track `--atom-gray-400`, Thumb 왼쪽 | `[data-state="unchecked"]` | `__input` 기본 |
| `checked` | Track `--atom-bg-neutral-solid`, Thumb 오른쪽 끝 | `[data-state="checked"]` | `__input:checked` |
| `hover` | `filter: brightness(0.94)` | — | `:hover` |
| `active` | `filter: brightness(0.88)` | — | `:active` |
| `focus-visible` | `--atom-primary-600` 2px outline, offset 2px | — | `__input:focus-visible` |
| `disabled` | `opacity: 0.4`, `cursor: not-allowed` | `[data-disabled]` | `__input:disabled` |

두 계열이 같은 결과를 냅니다. 프리뷰나 문서 그림처럼 조작할 수 없는 자리에서는 `data-state`
를 쓰고, 실제 컨트롤에서는 `__input` 의 `:checked` · `:disabled` 를 씁니다.

> [!NOTE]
> **초점 표시는 Track 에 그립니다**
> 초점을 받는 것은 감춰진 `__input` 인데 그 요소는 1×1px 이라 링을 그려도 보이지 않습니다.
> `:focus-visible` 은 `__input` 을 감싼 `atom-switch` 에 나타납니다.
> Checkbox · Radio 와 같은 `--atom-primary-600` 2px outline, offset 2px 입니다.

### Size

`medium` 이 기본이고, 촘촘한 목록이나 표 안에서 `small` 을 씁니다. 한 화면에서 두 사이즈를
섞지 않습니다.

| Size | Track | Thumb | 안쪽 여백 | Thumb 이동 거리 |
|---|---|---|---|---|
| `small` | 40×24px | 20×20px | 2px | 16px |
| `medium` | 53×31px | 27×27px | 2px | 22px |

Track 폭은 `안쪽 여백 + Thumb + 이동 거리 + 안쪽 여백` 입니다
(`53 = 2 + 27 + 22 + 2`, `40 = 2 + 20 + 16 + 2`). Thumb 은 양 끝에서 2px 여백을 두고
멈춥니다. CSS 에서는 이동 거리를 로컬 변수 `--switch-travel` 로 두었으므로, 사이즈를
추가할 때는 Track 크기 · Thumb 지름 · 이동 거리 세 값만 바꿉니다.

### 라벨과 함께 — Switch Field

Switch 는 보통 라벨 행의 오른쪽 끝에 놓입니다. 이 행은 `atom-switch-field` 로 만들며,
왼쪽에 라벨(과 필요하면 설명), 오른쪽 끝에 Switch 를 둡니다.

[Field](./field.md) 는 쓰지 않습니다. Field 는 13px 캡션을 컨트롤 **위에** 쌓고 오류
메시지 자리를 두지만, Switch 에는 오류가 없고 라벨은 본문 크기로 **왼쪽에** 놓입니다.

> [!NOTE]
> **행 전체가 타깃이 됩니다**
> `atom-switch-field` 는 `min-height: 44px` 인 `<label>` 입니다. `medium` Track 은 31px 로
> 권장 최소 터치 영역 44px 에 못 미치지만, 행 전체가 라벨이므로 실제 타깃은 44px 이상이
> 됩니다. Switch 를 라벨 없이 단독으로 놓을 때는 투명한 히트 영역을 따로 확장해야 합니다.

비활성은 **행에** 겁니다. `atom-switch-field[data-disabled]` 를 쓰면 라벨과
Switch 가 함께 흐려집니다.

### 실제 input 과 함께

`data-state` 없이 감춘 `<input type="checkbox">` 만으로도 동작합니다. `:checked` ·
`:disabled` · `:focus-visible` 규칙이 정의되어 있어 아래 데모는 실제로 조작할 수 있습니다.

```html
<label class="atom-switch" aria-label="알림">
  <input class="atom-switch__input" type="checkbox" />
  <span class="atom-switch__thumb"></span>
</label>
```

### Tone — 없음

켜짐 색은 `--atom-bg-neutral-solid`(중립) 하나입니다. 브랜드 색으로 켜지는 변형은 없습니다.

설정 패널처럼 스위치가 여러 개 놓이는 화면에서 모두 브랜드 색이면 색이 과해지므로 중립을
씁니다. 단독으로 놓이는 중요한 설정에 브랜드 색이 필요해지면 그때 `tone` 축을 추가합니다.

### 모션

Track 색과 Thumb 위치가 모두 `--atom-duration-base`(200ms) `--atom-ease-out` 으로
전환됩니다. Thumb 의 이동이 주된 피드백이므로, 색만 바뀌는
전환(120ms)보다 길게 잡았습니다.
Motion 의 "이동은 base" 규칙을 따릅니다.

`prefers-reduced-motion: reduce` 에서는 전환을 끄고 Thumb 이 바로 반대쪽에 나타납니다.
위치는 그대로 바뀌므로 상태를 읽는 데는 지장이 없습니다. `styles/base.css` 가 이미
사이트 전체의 전환을 끄지만, `switch.css` 는 이 사이트 밖에서도 쓰이므로 같은 처리를 파일
안에도 두었습니다.

### 클래스 계약

`styles/elements/switch.css` 헤더와 원본 `registry.json` `css.blocks` 기준입니다. 클래스가 없는 값(—)은 기본 스타일 그대로입니다.

| Prop | 값 | 클래스 |
|---|---|---|
| `size` | `small` · `medium` | `--size_small` · — |
| `checked` | `false` · `true` | `__input` 기본 · `__input:checked` (정적 그림: `[data-state="unchecked"]` · `[data-state="checked"]`) |
| `disabled` | `true` | `__input:disabled` (+ 라벨 행 `atom-switch-field[data-disabled]`; 정적 그림: `[data-disabled]`) |
| `label` · `description` | | `atom-switch-field` · `__text` · `__label` · `__description` |

상태 선택자: `[data-state="unchecked|checked"]` · `:has(.atom-switch__input:checked)` · `:hover` · `:active` · `:focus-visible` · `:has(.atom-switch__input:focus-visible)` · `[data-disabled]` · `:has(.atom-switch__input:disabled)`

---

## 3. 상태

| State | 표현 | 선택자 |
|---|---|---|
| `unchecked` | Track `--atom-gray-400`, Thumb `#fff` 왼쪽 | `[data-state="unchecked"]` · `__input` 기본 |
| `checked` | Track `--atom-bg-neutral-solid`, Thumb `--atom-fg-on-solid` 로 `--switch-travel` 만큼 이동 | `[data-state="checked"]` · `:has(.atom-switch__input:checked)` |
| `hover` | `filter: brightness(0.94)` (Switch Field 는 행 hover 에도) | `:hover:not([data-disabled]):not(:has(.atom-switch__input:disabled))` |
| `active` | `filter: brightness(0.88)` (Switch Field 는 행 active 에도) | `:active:not(…)` |
| `focus-visible` | Track 에 `--atom-primary-600` 2px outline, offset 2px | `:focus-visible` · `:has(.atom-switch__input:focus-visible)` |
| `disabled` | `opacity: 0.4`, `cursor: not-allowed`. Switch Field 는 행이 흐려지고 안쪽 Switch 는 다시 흐려지지 않음 | `[data-disabled]` · `:has(.atom-switch__input:disabled)` |

**invalid 는 없습니다** — 원본 CSS 헤더: "a switch commits the moment it moves, so no submit step exists that could fail validation."

---

## 4. Props

| Prop | Type | Default | 필수 | 설명 |
|---|---|---|---|---|
| `checked` | `boolean` | `false` | | 켜짐 상태입니다. |
| `size` | `"small" \| "medium"` | `"medium"` | | Track · Thumb 크기와 이동 거리를 함께 결정합니다. |
| `disabled` | `boolean` | `false` | | 조작할 수 없게 만듭니다. 라벨 행이 있으면 행 전체가 흐려집니다. |
| `label` | `ReactNode` | | | 라벨 행의 왼쪽 텍스트입니다. 없으면 `aria-label` 이 필요합니다. |
| `description` | `ReactNode` | | | 라벨 아래에 놓이는 보충 설명입니다. |
| `onCheckedChange` | `(checked: boolean) => void` | | | 상태가 바뀔 때 호출됩니다. |
| `aria-label` | `string` | | | 라벨이 시각적으로 없을 때 필요합니다. |

`tone` 은 축이 정의되면 추가합니다.

### Parts (compound)

| Part | 요소 | 설명 |
|---|---|---|
| `Switch` | 단독: `<label class="atom-switch">` > `<input class="atom-switch__input" type="checkbox" role="switch">` + `<span class="atom-switch__thumb">` / `label` 이 있으면: `<label class="atom-switch-field">` > `__text`(`__label` · `__description`) + `<span class="atom-switch">` | 위 Props 를 받습니다. 나머지 속성과 `ref` 는 실제 `<input>` 에, `className` 은 가장 바깥 요소에 붙습니다. 구현은 uncontrolled 용 `defaultChecked` 를 더 받습니다. Field 안에서는 `useFieldControl()` 로 id · aria-describedby · disabled · required 를 맞춥니다. |

---

## 5. Component tokens

| 대상 | 속성 | Token | Value |
|---|---|---|---|
| Track | radius | `{radius.full}` | 9999px |
| Track (unchecked) | background | `{color.gray.400}` | `#c0c2cc` (다크 `#4a4c56`) |
| Track (checked) | background | `{color.bg.neutral-solid}` | |
| Track | transition | `{duration.base}` · `{easing.out}` | 200ms |
| Thumb (unchecked) | background | — | `#fff` 고정 |
| Thumb (checked) | background | `{color.fg.on-solid}` | |
| Thumb | shadow | — | `0 1px 3px rgba(0, 0, 0, 0.28)` |
| Thumb | radius | `{radius.full}` | 9999px |
| hover · active | filter | — | `brightness(0.94)` · `brightness(0.88)` |
| Focus ring | outline | `{color.primary.600}` | 2px, offset 2px |
| disabled | opacity | — | `0.4` |
| Field | gap | `{space.x4}` | 16px |
| Field description | color | `{color.fg.neutral-muted}` | |

> [!NOTE]
> **토큰을 쓰지 않는 값이 셋 있습니다**
> - **꺼짐 Thumb 이 `#fff` 고정입니다.** 꺼짐 Track 은 두 테마에서 모두 회색이라, 다크에서
>   뒤집히는 표면 토큰(`--atom-gray-00` 등)을 쓰면 Thumb 이 Track 에 묻힙니다. 켜짐
>   Track 은 `--atom-bg-neutral-solid` 라 다크에서 거의 흰색이 되어 흰 Thumb 이 보이지
>   않으므로, 켜졌을 때만 `--atom-fg-on-solid` 토큰으로 바뀝니다.
> - **Thumb 그림자가 `0 1px 3px rgba(0, 0, 0, 0.28)` 하드코딩입니다.**
>   `--atom-shadow-s1`(`0 1px 2px rgba(0,0,0,0.06)`)은 회색 Track 위의 27px 원 아래에서
>   보이지 않습니다. 원이 Track 위에 떠 있는 것으로 보이도록 더 진한 그림자를 씁니다.
>   Shadow 스케일의 예외입니다.
> - **꺼짐 Track 이 팔레트 토큰 `--atom-gray-400` 을 직접 참조합니다.**
>   Color 의 "화면에는 역할 토큰만" 원칙에 어긋나지만, 이
>   자리에 맞는 역할 토큰이 없습니다 — `--atom-bg-neutral-weak` 는 라이트에서 캔버스와
>   구분되지 않고, `--atom-fg-neutral-*` 계열은 켜짐 색과 너무 가깝습니다. 승격 전
>   프리뷰의 값을 그대로 유지했습니다.

```json
{
  "switch": {
    "track": {
      "radius": { "$type": "dimension", "$value": "{radius.full}" },
      "bg": { "$type": "color", "$value": "{color.gray.400}" },
      "bg-checked": { "$type": "color", "$value": "{color.bg.neutral-solid}" },
      "transition": {
        "duration": { "$type": "duration", "$value": "{duration.base}" },
        "easing": { "$type": "cubicBezier", "$value": "{easing.out}" }
      }
    },
    "thumb": {
      "bg": { "$type": "color", "$value": "#ffffff" },
      "bg-checked": { "$type": "color", "$value": "{color.fg.on-solid}" },
      "radius": { "$type": "dimension", "$value": "{radius.full}" },
      "shadow": {
        "$type": "shadow",
        "$value": { "color": "rgba(0, 0, 0, 0.28)", "offsetX": "0px", "offsetY": "1px", "blur": "3px", "spread": "0px" }
      }
    },
    "focus-ring": { "$type": "color", "$value": "{color.primary.600}" },
    "disabled-opacity": { "$type": "number", "$value": 0.4 },
    "field": {
      "gap": { "$type": "dimension", "$value": "{space.x4}" },
      "description": { "$type": "color", "$value": "{color.fg.neutral-muted}" }
    }
  }
}
```

---

## 6. 접근성

- **마크업** — `<label class="atom-switch">` 안에 실제
  `<input type="checkbox" class="atom-switch__input">` 을 둡니다. 폼 제출에 값이 포함되고,
  `Space` 토글과 라벨 연결이 브라우저 기본 동작으로 따라옵니다.
- **숨긴 input** — `__input` 은 화면에서만 감춥니다. `display: none` 이나
  `visibility: hidden` 은 초점과 접근성 트리에서도 지워버리므로 쓰지 않습니다.
- **`role="switch"`** — `<input type="checkbox" role="switch">` 로 올리면 스크린리더가
  "체크박스" 대신 "스위치"로 읽습니다. 이때 `checked` 가 `aria-checked` 로 자동 매핑되므로
  `aria-checked` 를 직접 쓰지 않습니다. `<button role="switch">` 로 만들 때만
  `aria-checked` 를 직접 갱신해야 합니다. 스위치에는 중간 상태가 없으므로
  `aria-checked="mixed"` 는 쓰지 않습니다.
- **이름** — 라벨 없이 Switch 만 두지 않습니다. `atom-switch-field` 안에 있으면 행의 라벨이
  이름이 되고, 단독으로 놓을 때는 최소한 `aria-label` 을 붙입니다. 라벨에는 대상만 적습니다.
  상태는 `:checked` 가 전달합니다.
- **초점 표시** — `__input:focus-visible` 일 때 감싼 Track 에 `--atom-primary-600` 2px
  outline 이 offset 2px 로 나타납니다. Checkbox · Radio 와 같습니다.
- **색만으로 상태를 전하지 않습니다** — Thumb 의 **위치**가 색과 함께 상태를 나타내므로
  이 조건을 충족합니다. 색만 바뀌고 Thumb 이 움직이지 않는 설계로 바꾸지 마세요.
- **터치 영역** — `atom-switch-field` 는 `min-height: 44px` 라 행 전체가 타깃입니다.
  Track 단독(31px 또는 24px)은 권장 최소치에 못 미칩니다.
- **비활성** — 실제 컨트롤에서는 `disabled` 속성을 씁니다. 흐리게만 하면 초점은 계속
  들어갑니다.
- **상태 변경 알림** — 즉시 반영되는 결과가 화면에 드러나지 않는 경우(백그라운드 저장)에는
  [Toast](./toast.md) 로 알립니다.
- **대비 — 알려진 한계** — 꺼짐 상태의 Track `--atom-gray-400`(라이트 `#c0c2cc`)은 흰 배경
  대비 약 1.75:1 로 WCAG 1.4.11 의 UI 요소 기준 3:1 에 미달합니다. 라벨 행 안에서는 라벨이
  대상을, Thumb 위치가 상태를 나타내므로 정보 손실은 없지만, Switch 만 단독으로 놓이는
  화면에서는 꺼진 스위치가 배경에 묻힐 수 있습니다.

---

## 7. 사용 가이드

### 즉시 반영되는 것에만 씁니다

Switch 는 조작하는 즉시 반영됩니다. 저장 버튼을 눌러야 반영되는 자리에는
[Checkbox](./checkbox.md) 를 씁니다.

| | Checkbox | Switch |
|---|---|---|
| 반영 시점 | 제출 버튼을 눌렀을 때 | 조작하는 즉시 |
| 개수 | 여러 개를 함께 | 보통 하나씩 |
| 상하위 관계 | 상위가 하위를 제어한다 | 부모-자식 관계가 없다 |
| 오류 상태 | 있다 | 없다 |
| 예시 | 약관 동의, 필터 선택 | 알림 켜기 |

- ✅ **Do** 설정 화면의 "알림" 처럼 즉시 켜지는 것에 씁니다.
- ❌ **Don't** 저장 버튼을 눌러야 반영되는 폼 안에 두지 않습니다.

### 동의·수락에는 쓰지 않습니다

약관 동의는 제출 전에 하는 **선택**입니다. 또 Switch 에는 오류 상태가 없어, 동의하지 않고
제출했을 때 그 칸을 강조할 수 없습니다.

- ✅ **Do** 약관 동의는 [Checkbox](./checkbox.md) 로 만듭니다. 오류 표시가 있습니다.
- ❌ **Don't** 필수 동의를 Switch 로 받지 않습니다.

### '전체 켜기' 를 Switch 로 만들지 않습니다

Switch 에는 `indeterminate` 가 없습니다. 하위 항목이 일부만 켜진 상태를 표현할 방법이
없으므로, 상위-하위 구조가 있으면 [Checkbox](./checkbox.md) 를 씁니다.

- 상위 '전체 선택' 은 Checkbox 의 `indeterminate` 로 만듭니다.
- 하위 스위치들을 제어하는 상위 스위치를 만들지 않습니다. 일부만 켜진 상태에서 상위가
  꺼져 보이면 아무것도 켜지 않은 것으로 오해할 수 있습니다.

### 라벨에는 대상을 적습니다

켜짐/꺼짐은 스위치 위치가 표시합니다. 라벨에 상태를 적으면 꺼져 있을 때 라벨과 실제 상태가
어긋납니다.

- ✅ **Do** "알림" — 대상만 적습니다.
- ❌ **Don't** "알림 켜기" — 켜진 상태에서 라벨과 상태가 어긋납니다.

Track 안에 "ON" / "OFF" 텍스트를 넣지 않습니다. 좁은 공간의 글자는 읽기 어렵고, 현재 상태가
어느 쪽인지 헷갈립니다.

### 비활성일 때는 라벨도 함께 흐리게

Switch 만 흐려지고 라벨이 선명하면 행이 사용 가능한 것으로 보입니다. `disabled` 는
`atom-switch-field` 에 겁니다.

- ✅ **Do** 행에 `data-disabled` 를 걸어 라벨까지 함께 흐리게 합니다.
- ❌ **Don't** Switch 만 흐리게 하고 라벨을 그대로 두지 않습니다.

### 실패할 수 있다면 되돌릴 방법을 함께

즉시 반영되더라도 서버 요청은 실패할 수 있습니다. 요청이 실패하면 Switch 를 원래 위치로
되돌리고 [Toast](./toast.md) 로 알립니다. 켜진 채로 두면 화면과 실제 상태가
달라집니다.

- 실패하면 상태를 되돌리고 이유를 알립니다.
- 요청이 오래 걸리면 `disabled` 로 조작을 막고 진행 중임을 표시합니다.
- 낙관적으로 켜 두고 실패를 무시하지 않습니다.

### 관련 컴포넌트

- [Checkbox](./checkbox.md) — 제출해야 반영되는 선택, 약관 동의, 상위 '전체 선택'.
- [Radio](./radio.md) — 여러 항목 중 하나만 골라야 할 때.
- [Field](./field.md) — 라벨이 컨트롤 위에 쌓이고 오류 메시지가 필요한 폼 항목.

---

## 8. 예시

```tsx
<Switch aria-label="알림" checked={on} onCheckedChange={setOn} />

<Switch label="알림" description="변경 사항을 바로 알려드려요" defaultChecked />

<Switch label="간편 보기 모드" disabled />
```

```html
<!-- 실제 컨트롤 — label + 감춘 checkbox -->
<label class="atom-switch" aria-label="알림">
  <input class="atom-switch__input" type="checkbox" checked />
  <span class="atom-switch__thumb"></span>
</label>

<!-- 라벨 행 — 행 전체가 label 이므로 안쪽 Switch 는 span 입니다 -->
<label class="atom-switch-field">
  <span class="atom-switch-field__text">
    <span class="atom-switch-field__label">알림</span>
    <span class="atom-switch-field__description">변경 사항을 바로 알려드려요</span>
  </span>
  <span class="atom-switch">
    <input class="atom-switch__input" type="checkbox" checked />
    <span class="atom-switch__thumb"></span>
  </span>
</label>

<!-- 비활성은 행에 겁니다 -->
<label class="atom-switch-field" data-disabled>
  <span class="atom-switch-field__text">
    <span class="atom-switch-field__label">간편 보기 모드</span>
  </span>
  <span class="atom-switch">
    <input class="atom-switch__input" type="checkbox" disabled />
    <span class="atom-switch__thumb"></span>
  </span>
</label>

<!-- 조작할 수 없는 그림 — 프리뷰와 문서 figure 전용 -->
<span class="atom-switch" data-state="checked" role="img" aria-label="켜짐">
  <span class="atom-switch__thumb"></span>
</span>
```

> [!CAUTION]
> **`data-state` 를 실제 컨트롤에 쓰지 마세요**
> `data-state` 는 조작할 수 없는 그림을 위한 것입니다. 실제 컨트롤에 이것만 붙이면 초점과
> 폼 값이 없고, 스크린리더가 상태를 읽을 수 없습니다.

---

## Switch Field

라벨 행입니다. `switch.css` 안에 함께 정의된 `atom-switch-field` 블록입니다 (`role: sibling`).

Switch 는 자기 라벨을 그리지 않고, Field 는 이 자리에 맞지 않습니다 — Field 는 13px 캡션을 컨트롤 위에 쌓고
Switch 에는 필요 없는 오류 자리를 둡니다. 설정 행은 반대 모양입니다: 본문 크기 라벨이 왼쪽, 컨트롤이 오른쪽 끝, 오류 없음.
행 자체를 `<label>` 로 만들면 터치 영역도 해결됩니다 (`min-height: 44px`).

| 클래스 | 역할 | 값 |
|---|---|---|
| `atom-switch-field` | 행 (`<label>`) | flex, `justify-content: space-between`, gap `--atom-x4`, `min-height: 44px`, 색 `--atom-fg-neutral` |
| `atom-switch-field__text` | 라벨 + 설명 묶음 | 세로 flex, gap 2px |
| `atom-switch-field__label` | 라벨 | 15px / 1.45 |
| `atom-switch-field__description` | 설명 | 13px / 1.5, `--atom-fg-neutral-muted` |
| `atom-switch-field[data-disabled]` · `:has(.atom-switch__input:disabled)` | 비활성 | 행 `opacity: 0.4`, 안쪽 `.atom-switch` 는 `opacity: 1` (0.16 으로 두 번 흐려지지 않게) |

행 hover · active 는 안쪽 `.atom-switch` 에 `brightness(0.94)` · `brightness(0.88)` 을 줍니다. 행 전체가 라벨이라 텍스트를 hover 하는 것이 곧 컨트롤을 hover 하는 것이기 때문입니다.