작업을 멈추고 확인을 받는 모달로, 데스크톱에서는 가운데, 모바일(md 768px 미만)에서는 아래 시트로 뜹니다.

## 언제 쓰나
- 되돌릴 수 없는 행동의 확인, 짧은 입력 한두 개. 정보 전달만이면 Toast, 여러 선택지면 Sheet.
- 두꺼운 크레마(`crema-fill-strong` + `blur-lg`) 위에 `radius-xl`. 뒤에는 `scrim`만 깔고 블러는 걸지 않습니다(블러 예산).
- 네이티브 `<dialog>`를 `showModal()`로 엽니다. 최상위 층에 떠서 NavBar 같은 크레마 안에서 열어도 그 안에 갇히지 않고, 뒤 화면은 조작할 수 없게(inert) 되며, 열려 있는 동안 페이지가 스크롤되지 않습니다.
- 열리면 첫 버튼으로 포커스가 가고, Esc·바깥 클릭으로 닫히고(`alert`면 바깥 클릭으로는 닫히지 않음), 닫히면 원래 자리로 포커스가 돌아갑니다. `description`은 `aria-describedby`로 읽힙니다.

## 소비자가 넣는 것
- `open`, `onClose`, `title`, `description`, `alert`(삭제 확인처럼 위험할 때), `children`(버튼, 오른쪽이 주 행동).
- 위험한 행동의 버튼은 `danger`, 동작을 그대로 씁니다("삭제하기").

<!-- props:start — node scripts/docs.mjs가 dist/index.d.ts에서 만듭니다. 손으로 고치지 마세요 -->
## Props (React)

가운데 모달(모바일에선 아래 시트). 네이티브 <dialog>(최상위 층, 뒤 화면 inert), Esc·바깥 클릭 닫기(alert는 바깥 클릭 제외). children = 버튼들.

| 이름 | 형 | | 설명 |
| --- | --- | --- | --- |
| `open` | `boolean` | 필수 |  |
| `onClose` | `() => void` |  |  |
| `title` | `string` | 필수 |  |
| `description` | `string` |  |  |
| `alert` | `boolean` |  |  |
| `children` | `ReactNode` |  |  |
| `className` | `string` |  |  |

Svelte는 같은 이름에 소문자 이벤트(`onchange`·`onclick`)와 `bind:`를 씁니다.
<!-- props:end -->