ダイアログDialog

「ダイアログ（Dialog）」を実装してください。

## これは何か
利用者に判断を求める小さな窓。削除の確認のように、取り返しのつかない操作の直前に出す。

## 使いどころ
- 削除・送信・支払いなど、やり直せない操作の直前
- 選択肢が2つに絞れていて、その場で決められるとき

## 実装の要件
- dialog 要素 + showModal()。見出しと本文と2つのボタンで構成する
- 安全な側のボタンに autofocus を付け、showModal() で開いたときにそこへフォーカスが入るようにする
- ボタンの文言を「はい／いいえ」にしない。「削除する／やめる」のように動作を書く
- 危険な操作を既定の選択にしない。Enter キーで消えてしまう
- 確認ダイアログを出せば安全になるわけではない。取り消せる設計のほうが強い

## アクセシビリティの要件
- role="alertdialog" は、警告を伴う確認にだけ使う。ただの入力窓は role="dialog"
- 見出しと本文を aria-labelledby / aria-describedby で結ぶ
- 開いたときのフォーカスは、危険でないほうのボタンに置く

## 参考にする実装
この形を出発点にして、プロジェクトの命名規則・色・余白に合わせて調整してください。

```html
<!-- 実際は dialog 要素を showModal() で開く（role="alertdialog" はそのまま付ける）。見本は流れの中に置いている -->
<div class="x-dialog" role="alertdialog" aria-labelledby="x-dialog-t" aria-describedby="x-dialog-d">
  <p class="x-dialog__t" id="x-dialog-t">この予約を取り消しますか？</p>
  <p class="x-dialog__d" id="x-dialog-d">取り消すと同じ時間帯は再予約できません。</p>
  <div class="x-dialog__act">
    <button class="x-dialog__keep" type="button">予約を残す</button>
    <button class="x-dialog__del" type="button">取り消す</button>
  </div>
</div>
```

```css
/* 貼った先のリセットに頼らないよう、この部品の中だけ border-box にする */
.x-dialog,
.x-dialog *:not([class*="fa-"]),
.x-dialog *:not([class*="fa-"])::before,
.x-dialog *:not([class*="fa-"])::after {
  box-sizing: border-box;
  /* 貼った先の既定の書体に引きずられないようにする。書体が変わると
     文字の幅と高さが変わり、枠のサイズまでずれる */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Noto Sans JP", "Yu Gothic UI", Meiryo, sans-serif;
}

.x-dialog {
  width: 258px;
  padding: 14px 16px;
  border: 1px solid #e3e6ea;
  border-radius: 10px;
  background: #fff;
}
.x-dialog__t {
  margin: 0 0 5px;
  font-size: 13px;
  font-weight: 700;
}
.x-dialog__d {
  margin: 0 0 12px;
  font-size: 11.5px;
  line-height: 1.7;
  color: #606a7b;
}
.x-dialog__act {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.x-dialog__keep,
.x-dialog__del {
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid #cfd4dc;
  border-radius: 7px;
  background: #fff;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.x-dialog__del {
  border-color: #b91c1c;
  color: #b91c1c;
}
```

## 出力の約束
- HTML と CSS を分けて出す。JavaScript が要るときは素の JavaScript で書き、UIフレームワークは使わない。
- 参考実装がアイコンに Font Awesome のクラスを使っている場合は、プロジェクトで使っているアイコンかインライン SVG に置き換えてよい。
- 上のアクセシビリティ要件を満たす。満たせない箇所があるときは、理由を添えて先に知らせる。
- 色・角丸・余白は既存のデザイントークンがあればそれを使う。無ければ CSS 変数として切り出す。