# Dialog

현재 작업 위에 떠서 사용자의 입력이나 확인을 받는 모달입니다.

> 원본: `03_ASSET_GUIDE/catalog/dialog.js` · CSS: `03_ASSET_GUIDE/styles/elements/dialog.css`
> kind `component` · category `overlay` · status `stable` · specSource `measured`
> 함께 필요한 CSS: `button` (Header 의 닫기와 Footer 의 액션이 실제 [Button](./button.md) 입니다)

---

## 1. 구성

뒤 화면을 덮는 **Scrim** 과 그 위에 뜨는 **Panel** 두 층으로 나뉩니다. Panel 은 위에서부터
**Header** · **Body** · **Footer** 세 칸이고, 내용이 길어질 때 스크롤하는 것은 Body 하나뿐입니다.

```
░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ ①
░░ ┌────────────────────────────────────┐ ░░
░░ │ 알림 받을 시간                    ✕ │ ░░ ② ③ ④ ⑤
░░ │ 설정한 시간에만 알림을 보냅니다.     │ ░░ ⑥
░░ │                  [ 취소 ] [ 저장 ] │ ░░ ⑦
░░ └────────────────────────────────────┘ ░░
░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
```

| # | 요소 | 필수 | 클래스 | 설명 |
|---|---|---|---|---|
| ① | Scrim | 필수 | `atom-dialog-scrim` | 뒤 배경을 덮는 딤. 열려 있는 동안 뒤 내용은 조작할 수 없습니다. |
| ② | Panel | 필수 | `atom-dialog` | 떠 있는 층. 최대 폭과 최대 높이를 가집니다. |
| ③ | Header | 필수 | `atom-dialog__header` | 제목과 닫기 버튼. 스크롤해도 고정됩니다. |
| ④ | Title | 필수 | `atom-dialog__title` | 필수입니다. `aria-labelledby` 가 가리키는 대상입니다. |
| ⑤ | Close | 선택 | `atom-dialog__close` | 선택입니다. 아이콘만 있는 [Button](./button.md) 을 씁니다. |
| ⑥ | Body | 선택 | `atom-dialog__body` · `atom-dialog__description` | 내용. 길면 이 영역만 스크롤합니다. |
| ⑦ | Footer | 선택 | `atom-dialog__footer` | 액션 버튼. 오른쪽 정렬이고 스크롤해도 고정됩니다. |
| — | Frame | 문서용 | `atom-dialog-frame` | `--contained` Scrim 이 딤 처리할 대역 뷰포트. 데모 스테이지 전용입니다. |

---

## 2. 종류 / 크기

### Size

`medium` 이 기본이고 최대 폭 480px 입니다. 표나 목록이 들어가 480px 로는 읽기 어려울 때만
`large`(800px) 를 씁니다. 최대 폭이므로 화면이 좁으면 그만큼 줄어듭니다.

| Size | 최대 폭 | 쓸 곳 |
| --- | --- | --- |
| `medium` (기본) | 480px | 확인, 짧은 폼 |
| `large` | 800px | 표·목록이 들어가는 내용 |

폭만 달라지고 패딩과 글자 크기는 두 사이즈가 같습니다.

### 높이와 스크롤

최대 높이는 **뷰포트의 80%** 입니다. 위아래로 배경이 보여야 떠 있는 층으로 인식됩니다.

내용이 그보다 길면 **Body 만 스크롤하고 Header 와 Footer 는 고정**합니다. 전체가 스크롤되면
액션 버튼을 보려고 끝까지 내려가야 합니다.

Body 에 스크롤이 생기면 Panel 에 `data-body-scroll` 을 붙여 Header 아래와 Footer 위에
구분선을 넣습니다. 선이 없으면 잘린 문장이 레이아웃 오류처럼 보입니다.

### Header · Footer 조합

필수는 Title 하나뿐입니다. Close 와 Body 와 Footer 는 상황에 따라 빠집니다. 세 칸이 각자
여백을 가지므로, Body 나 Footer 가 없어도 24px 가장자리 여백은 유지됩니다.

| 조합 | 예 |
| --- | --- |
| 제목 + 액션 2개 · 본문 없음 | "저장하지 않고 나갈까요" + 계속 작성 / 나가기 |
| 제목 + 닫기 + 본문 · 푸터 없음 | "임시 권한이 발급됐어요" |
| 제목만 | "알림 설정" |

### 좁은 화면

Scrim 의 좌우 여백 16px 이 그대로 좁은 화면의 여백이 됩니다. 375px 화면에서 Panel 은 화면
폭의 약 91% 입니다. 별도의 브레이크포인트는 두지 않았습니다. 프리뷰 캔버스가 데스크톱
뷰포트 안의 400px 상자라서, `min-width` 쿼리를 걸면 카드 썸네일에도 그 규칙이 적용되기
때문입니다.

| 대상 | 값 |
| --- | --- |
| Panel 폭 | 화면 폭 − 32px (375px 화면에서 약 91%) |
| Panel 최대 높이 | `min(80vh, 100%)` |
| Footer 배치 | 라벨이 한 줄에 안 들어가면 세로로 쌓습니다 |

> [!NOTE]
> **세로로 쌓을 때는 아래가 주요 액션입니다**
> `__footer--stack` 은 방향만 바꾸고 순서는 그대로 둡니다. 가로에서 오른쪽 끝이던 주요
> 액션이 세로에서는 맨 아래로 갑니다. 엄지가 닿기 쉬운 위치에 주요 액션을 두기 위해서입니다.

Bottom Sheet 로의 전환은 하지 않습니다. `bottom-sheet` 프리뷰가 이미 따로 있으므로 폭만
줄이는 쪽을 택했습니다. 컴포넌트가 화면 크기에 따라 둘로 갈리면 어느 문서를 참고해야 할지
불분명해집니다.

### 치수

| 대상 | 속성 | 값 |
| --- | --- | --- |
| Scrim | padding | 16px — 좁은 화면의 좌우 여백을 겸합니다 |
| Panel | max-width | 480px (`medium`) / 800px (`large`) |
| Panel | max-height | `min(80vh, 100%)` |
| Header | padding | 24px 24px 12px |
| Title | font | 18px / 700 / line-height 1.4 |
| Body | padding-inline | 24px |
| Body | font | 15px / line-height 1.7 |
| Footer | padding | 24px |
| Footer | gap | 8px |
| Close | margin | −6px −8px −6px 0 — 아이콘 버튼의 여백을 패널 가장자리로 되돌립니다 |

> [!NOTE]
> **Panel 에는 패딩이 없습니다**
> 24px 가장자리 여백은 Header · Body · Footer 가 각자 갖습니다. Panel 에 패딩을 주면 Body 가
> 스크롤할 때 내용이 테두리에서 24px 안쪽에서 잘려 렌더 버그처럼 보입니다.

Header 의 닫기 버튼과 Footer 의 액션은 [Button](./button.md) 을 그대로 쓰며, Dialog
전용 버튼 스타일은 없습니다. 닫기는 `layout_icon-only` + `variant_ghost`,
Footer 는 기본 `medium`(47px) 입니다.

### 클래스 계약

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

| 대상 | Prop | 값 | 클래스 |
|---|---|---|---|
| `atom-dialog` | `size` | `medium` · `large` | — · `--size_large` |
| `atom-dialog__footer` | `stackActions` | `false` · `true` | — · `atom-dialog__footer--stack` |
| `atom-dialog-scrim` | (구현 `contained`) | `false` · `true` | — · `--contained` |

상태 선택자: `atom-dialog-scrim[data-state="open\|closed"]` · `atom-dialog[data-state="closed"]` · `atom-dialog[data-body-scroll]` · `atom-dialog:focus`

---

## 3. 상태

열림/닫힘은 Scrim 의 `data-state` 로 표현합니다. `closed` 는 `display: none` 이므로 닫힌
Dialog 는 레이아웃을 차지하지 않습니다.

| State | 표현 | 선택자 |
| --- | --- | --- |
| `open` | Scrim · Panel 진입 애니메이션 | `.atom-dialog-scrim[data-state="open"]` |
| `closed` | `display: none` | `.atom-dialog-scrim[data-state="closed"]` · `.atom-dialog[data-state="closed"]` |
| Body 스크롤 | Header 아래 · Footer 위 1px 구분선 | `.atom-dialog[data-body-scroll]` |
| Panel focus | 링을 그리지 않음 | `.atom-dialog:focus` |

| 대상 | 속성 | 값 |
| --- | --- | --- |
| Scrim | opacity | 0 → 1 |
| Panel | opacity · transform | 0 → 1 · `translateY(8px) scale(0.97)` → 없음 |
| 둘 다 | duration · easing | `--atom-duration-base`(200ms) · `--atom-ease-out` |

퇴장 곡선은 Motion 에 `ease-in` 이 없어 정의하지 않았습니다.
닫기는 JS 가 `data-state="closed"` 로 즉시 감춥니다.

> [!WARNING]
> **모션 감소에서는 키프레임을 끕니다**
> `base.css` 의 전역 규칙은 모든 애니메이션을 0.01ms 로 줄이지만 **첫 프레임은 그대로
> 그립니다.** 그러면 Panel 이 8px 아래에 투명하게 한 번 그려지므로,
> `prefers-reduced-motion: reduce` 에서는 `animation: none` 으로 키프레임 자체를 없앴습니다.

---

## 4. Props

| Prop | Type | Default | 필수 | 설명 |
|---|---|---|---|---|
| `open` | `boolean` | `false` | | 열림 상태입니다. Scrim 의 `data-state` 로 내려갑니다. |
| `title` | `ReactNode` | | ● | 제목입니다. |
| `description` | `ReactNode` | | | 제목 아래 설명입니다. |
| `size` | `"medium" \| "large"` | `"medium"` | | 최대 폭 480 · 800px 입니다. |
| `role` | `"dialog" \| "alertdialog"` | `"dialog"` | | 확인이 강제되는 경고면 `alertdialog`. |
| `showClose` | `boolean` | `true` | | 헤더 닫기 버튼입니다. `alertdialog` 는 `false`. |
| `dismissOnScrim` | `boolean` | `true` | | Scrim 클릭으로 닫습니다. 파괴적 작업과 `alertdialog` 는 `false`. |
| `dismissOnEsc` | `boolean` | `true` | | `Esc` 로 닫습니다. |
| `stackActions` | `boolean` | `false` | | Footer 를 세로로 쌓습니다. 주요 액션이 맨 아래로 갑니다. |
| `onOpenChange` | `(open: boolean) => void` | | | 열림 상태가 바뀔 때 호출됩니다. |

### Parts (compound)

| Part | 요소 | 설명 |
|---|---|---|
| `Dialog` | `<div class="atom-dialog-scrim">` > `<div class="atom-dialog" role="dialog">` | Scrim + Panel. `document.body` 로 포털합니다. Header(`<h2 class="atom-dialog__title">` + 닫기 Button)를 그리고, `Dialog.Footer` 가 아닌 자식은 Body 에 넣습니다. 구현은 `contained`(Scrim `--contained`, 포털 없음)를 함께 받습니다. |
| `Dialog.Description` | `<p class="atom-dialog__description atom-break-keep">` | Body 안의 설명 문단. `description` prop 이 첫 문단을 만들고, 더 필요하면 이 파트를 씁니다. |
| `Dialog.Footer` | `<div class="atom-dialog__footer">` | 액션 버튼 영역. `stackActions` 면 `--stack`. 버튼은 [Button](./button.md) 을 씁니다. |

---

## 5. Component tokens

| 대상 | 속성 | Token |
|---|---|---|
| Scrim | background | `{color.bg.scrim}` |
| Scrim | padding | `{space.x4}` |
| Panel | background | `{color.bg.layer}` |
| Panel | radius | `{radius.r3}` |
| Panel | shadow | `{shadow.s3}` |
| Header · Body · Footer | padding | `{space.x6}` |
| Header 아래 여백 | padding-bottom | `{space.x3}` |
| Footer | gap | `{space.x2}` |
| Title | color | `{color.fg.neutral}` |
| Body | color | `{color.fg.neutral}` |
| Description | color | `{color.fg.neutral-muted}` |
| Close | color | `{color.fg.neutral-muted}` |
| 구분선 (`data-body-scroll`) | box-shadow | `{color.border.subtle}` |
| 진입 | duration · easing | `{duration.base}` · `{easing.out}` |

Title 18px, Body 15px, Panel 최대 폭 480 · 800px, Scrim `z-index: 100` 은 토큰이 아닙니다.

```json
{
  "dialog": {
    "scrim": {
      "background": { "$type": "color", "$value": "{color.bg.scrim}" },
      "padding":    { "$type": "dimension", "$value": "{space.x4}" }
    },
    "panel": {
      "background": { "$type": "color", "$value": "{color.bg.layer}" },
      "radius":     { "$type": "dimension", "$value": "{radius.r3}" },
      "shadow":     { "$type": "shadow", "$value": "{shadow.s3}" }
    },
    "padding":        { "$type": "dimension", "$value": "{space.x6}" },
    "header-padding-bottom": { "$type": "dimension", "$value": "{space.x3}" },
    "footer-gap":     { "$type": "dimension", "$value": "{space.x2}" },
    "title":          { "$type": "color", "$value": "{color.fg.neutral}" },
    "body":           { "$type": "color", "$value": "{color.fg.neutral}" },
    "description":    { "$type": "color", "$value": "{color.fg.neutral-muted}" },
    "close":          { "$type": "color", "$value": "{color.fg.neutral-muted}" },
    "scroll-divider": { "$type": "color", "$value": "{color.border.subtle}" },
    "enter": {
      "duration": { "$type": "duration", "$value": "{duration.base}" },
      "easing":   { "$type": "cubicBezier", "$value": "{easing.out}" }
    }
  }
}
```

---

## 6. 접근성

- **역할** — `role="dialog"` 에 `aria-modal="true"` 를 씁니다. 확인이 강제되는 경고는
  `role="alertdialog"` 로, 이 역할은 스크린리더가 열리는 즉시 내용을 읽습니다.
- **이름과 설명** — `aria-labelledby` 로 Title 을, `aria-describedby` 로 Body 를 가리킵니다.
  둘 중 하나라도 없으면 스크린리더 사용자는 무엇에 대한 Dialog 인지 알 수 없습니다.
- **초기 포커스** — 열릴 때 Panel 안으로 포커스를 옮깁니다. 파괴적 액션이 있으면 주요
  버튼이 아니라 **취소 버튼이나 Panel 자체**(`tabindex="-1"`)에 두어 실수로 `Enter` 가
  실행되지 않게 합니다. Panel 전체를 감싸는 링은 오류처럼 보이므로, Panel 은 포커스를
  받아도 링을 그리지 않습니다.
- **포커스 트랩** — `Tab` 이 Panel 안에서 순환하고, 마지막 요소에서 `Tab` 을 누르면 첫
  요소로 돌아옵니다. Panel 밖 요소로 나가지 않아야 합니다.
- **뒤 콘텐츠 비활성** — 배경 요소를 `inert` 로 만듭니다. 시각적으로만 딤 처리하면
  스크린리더와 키보드는 여전히 뒤 내용에 접근합니다. `aria-hidden` 만 쓰면 키보드는 막지
  못합니다.
- **닫을 때 포커스 복귀** — 열었던 트리거로 포커스를 되돌립니다. 되돌리지 않으면 포커스가
  문서 처음으로 이동합니다. 네 레퍼런스 모두 이 규칙을 문서화하지 않았지만 **필수**입니다.
- **`Esc`** — Dialog 는 닫습니다. 다만 입력 중인 폼이라면 `Esc` 로 바로 닫지 말고
  "작성한 내용을 버릴까요" 를 한 번 물어야 합니다. 어느 쪽이든 **키보드로 빠져나갈 수단이
  하나는 있어야 합니다.**
- **Scrim 클릭** — 정보를 보여주는 Dialog 에서는 닫아도 됩니다. 파괴적 작업이나 입력 중인
  폼에서는 닫지 않습니다. 배경을 실수로 눌러 작업이 사라질 수 있습니다.
- **스크롤 잠금** — 열려 있는 동안 배경 스크롤을 막습니다. Body 자체는
  `overscroll-behavior: contain` 으로 스크롤이 뒤 화면으로 넘어가지 않게 했지만, 배경
  잠금은 JS 가 해야 합니다. `body` 에 `overflow: hidden` 을 걸면 iOS 에서 스크롤 위치가
  튀므로 주의가 필요합니다.
- **제목은 실제 제목 태그로** — `atom-dialog__title` 을 `<h2>` 에 붙입니다. `<p>` 에
  스타일만 주면 스크린리더의 제목 탐색이 동작하지 않습니다. 카드 프리뷰와 데모는 문서용
  단편이라 `<p>` 를 쓰고 있습니다.
- **대비** — `critical-solid` 버튼의 흰 라벨은 라이트 모드에서 **3.91:1** 로 본문 기준
  4.5:1 에 미달합니다. 삭제 확인 Dialog 에서 가장 자주 쓰이는 조합이므로
  [Color](../foundation/color.md) 의 결정 사항을 참고하세요.
- **모션 감소** — 진입 애니메이션이 사라지므로, 애니메이션 완료 콜백에서 포커스를 옮기는
  구현은 이 환경에서 동작하지 않습니다. 포커스 이동은 `open` 시점에 바로 하세요.

---

## 7. 사용 가이드

### 꼭 필요할 때만 씁니다

Dialog 는 진행 중인 작업을 중단시킵니다. 진행하기 전에 반드시 답해야 하는 것,
또는 별도 화면을 만들 만큼 크지 않은 작업에만 씁니다.

- ✅ **Do** 되돌릴 수 없는 액션의 확인에 씁니다.
- ❌ **Don't** 저장 완료 같은 성공 알림에 쓰지 않습니다. [Toast](./toast.md) 를 씁니다.

### Alert Dialog 와 구분하기

카탈로그에는 `dialog` 와 `alert-dialog` 두 항목이 따로 있습니다. 기준은 **답하지 않고
원래 작업으로 돌아갈 수 있는지**입니다. 돌아갈 수 있으면 Dialog, 답해야만 진행되면
Alert Dialog 입니다.

| | Dialog | Alert Dialog |
| --- | --- | --- |
| 쓸 곳 | 별도 작업 수행, 정보 보기, 입력 받기 | 되돌릴 수 없는 동작의 확인 |
| 즉시 응답 | 필요 없음 — 닫고 돌아갈 수 있다 | **필요함** — 답하지 않으면 진행할 수 없다 |
| Header 닫기 버튼 | 있음 | **없음** |
| Scrim 클릭으로 닫기 | 허용 | **금지** |
| `Esc` 로 닫기 | 허용 | 허용 — 취소와 같게 처리 |
| 버튼 | 취소 + 주요 액션 | 액션 버튼만, 같은 너비로 나눔 |
| ARIA 역할 | `role="dialog"` | `role="alertdialog"` |

`Esc` 는 두 쪽 모두 허용합니다. 레퍼런스는 갈리지만(seed 는 막고, Spectrum·Ant 는 허용)
키보드 사용자가 빠져나갈 방법이 없으면 접근성 문제이고, 위험한 액션에서 `Esc` 는 취소로
처리되므로 안전합니다.

> [!NOTE]
> **Alert Dialog 는 이 CSS 가 정의하지 않습니다**
> `styles/elements/dialog.css` 는 `atom-dialog` 만 정의합니다. Alert Dialog 는 아직
> 카드 프리뷰만 있고 상세 문서가 없으므로, 위 표와 아래 두 번째 마크업 예시는 두 프리뷰를
> 비교한 결과입니다. 이 절만 `derived` 입니다.

프리뷰에서 Dialog 는 `--atom-shadow-s3`, Alert Dialog 는 `--atom-shadow-s2` 를 씁니다.
Alert Dialog 는 Dialog 보다 **위에** 떠야 하므로(Shadow 의
층위 규칙) 현재 값은 반대입니다. `alert-dialog.css` 를 만들 때 둘 다 `s3` 로 맞춰야
합니다.

### 한 번에 하나만, 중첩하지 않습니다

Dialog 안에서 Dialog 를 열면 사용자는 몇 겹 안에 있는지 알 수 없고, 닫을 때마다 어디로
돌아가는지 예측할 수 없습니다.

- ✅ **Do** 다음 단계가 필요하면 같은 Dialog 안에서 내용을 바꿉니다.
- ❌ **Don't** Dialog 위에 Dialog 를 띄우지 않습니다.

### 닫기 수단을 두 개 두지 않습니다

헤더의 `×` 와 푸터의 "취소" 는 같은 동작이므로 함께 두지 않습니다.

- ✅ **Do** 정보를 보여주는 Dialog 는 `×` 만 둡니다.
- ❌ **Don't** `×` 와 "취소" 를 동시에 두지 않습니다.

입력 칸이 있는 Dialog 에서는 **`×` 아이콘을 씁니다.** 폼에서 "취소" 라는 글자는 "작성한
내용을 버린다" 로 읽히고, `×` 는 "여기서 나간다" 로 읽힙니다.

### 제목에는 결과를 적습니다

제목에는 동작의 결과를 적습니다. "정말 삭제하시겠습니까?" 처럼 이미 선택한 동작을 되묻지
않습니다. 제목 끝에 마침표를 쓰지 않고, 물음표는 실제로 질문일 때만 씁니다.

### 버튼 라벨은 액션을 그대로 적습니다

버튼만 읽고도 동작을 알 수 있게 씁니다. "예 / 아니오" 는 제목을 다시 읽어야 뜻을 알 수
있습니다.

- ✅ **Do** 제목에 결과를 적고, 버튼은 액션의 단어를 그대로 씁니다.
- ❌ **Don't** "예" · "아니오" · "확인" 을 쓰지 않습니다.

### 버튼 순서와 강조

가로 배치는 **왼쪽부터 취소 → 보조 → 주요** 순서입니다. 주요 액션은 읽는 순서의 마지막인
오른쪽 끝에 둡니다. 버튼이 세 개를 넘으면 Dialog 대신 별도 화면을 씁니다.

- ✅ **Do** 위험한 액션에만 `critical-solid` 를 쓰고 오른쪽에 둡니다.
- ❌ **Don't** 취소 버튼에 위험 색을 쓰지 않습니다. 위험한 버튼이 어느 쪽인지 혼동됩니다.

라벨이 길어 한 줄에 들어가지 않으면 `__footer--stack` 으로 세로로 쌓고, 이때는 **아래로
갈수록 중요한 액션**을 둡니다.

### 열기 전 상태를 잃지 않게

Dialog 를 닫으면 뒤에 있던 스크롤 위치와 입력값이 그대로여야 합니다. 뒤 화면을 다시 그려
작업 내용이 사라지지 않게 합니다.

### 관련 컴포넌트

- [Button](./button.md) — Header 의 닫기와 Footer 의 액션이 모두 Button 입니다.
- [Form Field](./field.md) — 입력이 있는 Dialog 의 Body 는 Field 로 조립합니다.
- [Input](./text-input.md) — 짧은 폼 Dialog 에서 가장 자주 함께 씁니다.

---

## 8. 예시

```tsx
const [open, setOpen] = useState(false);

<Button variant="criticalSolid" onClick={() => setOpen(true)}>삭제</Button>

<Dialog
  open={open}
  onOpenChange={setOpen}
  title="이 항목을 삭제하면 되돌릴 수 없어요"
  description="삭제한 글은 복구할 수 없어요."
  dismissOnScrim={false}
>
  <Dialog.Footer>
    <Button variant="neutralWeak" onClick={() => setOpen(false)}>취소</Button>
    <Button variant="criticalSolid" onClick={remove}>삭제</Button>
  </Dialog.Footer>
</Dialog>
```

```html
<div class="atom-dialog-scrim" data-state="open">
  <div class="atom-dialog" role="dialog" aria-modal="true" tabindex="-1"
       aria-labelledby="dlg-title" aria-describedby="dlg-desc">
    <div class="atom-dialog__header">
      <h2 class="atom-dialog__title" id="dlg-title">이 항목을 삭제하면 되돌릴 수 없어요</h2>
      <button class="atom-dialog__close atom-button atom-button--variant_ghost
                     atom-button--layout_icon-only atom-button--size_small"
              type="button" aria-label="닫기">
        <svg class="atom-button__icon" aria-hidden="true">
          <use href="#atom-i-close" />
        </svg>
      </button>
    </div>

    <div class="atom-dialog__body" id="dlg-desc">
      <p class="atom-dialog__description atom-break-keep">삭제한 글은 복구할 수 없어요.</p>
    </div>

    <div class="atom-dialog__footer">
      <button class="atom-button atom-button--variant_neutral-weak" type="button">
        <span class="atom-button__label">취소</span>
      </button>
      <button class="atom-button atom-button--variant_critical-solid" type="button">
        <span class="atom-button__label">삭제</span>
      </button>
    </div>
  </div>
</div>
```

Body 가 실제로 넘칠 때 Panel 에 `data-body-scroll` 을 붙입니다.

```html
<div class="atom-dialog" role="dialog" aria-modal="true" data-body-scroll>
  <!-- Header 아래와 Footer 위에 1px 구분선이 생깁니다 -->
</div>
```

문서 페이지의 데모처럼 Dialog 를 뷰포트가 아닌 특정 영역 안에 가둘 때는 Scrim 에
`--contained` 를 붙입니다. 이때 부모에 `position: relative` 가 있어야 합니다.

```html
<div class="atom-dialog-frame" style="width: 600px; height: 340px">
  <div class="atom-dialog-scrim atom-dialog-scrim--contained" data-state="open">
    <div class="atom-dialog" role="dialog" aria-modal="true">…</div>
  </div>
</div>
```