モーダルModal

「モーダル（Modal）」を実装してください。

## これは何か
画面の上に重ねて出し、閉じるまで背後を操作させない窓。操作を1つのモード（mode）に閉じ込める、という意味の modal が名前の由来。

## 使いどころ
- 作業の途中で、先に答えてもらわないと進めないことがあるとき
- 画面を移動せずに、短い入力や確認を済ませたいとき

## 実装の要件
- dialog 要素の showModal() を使うと、フォーカスの閉じ込めと Esc をブラウザが持つ
- 暗幕は showModal() で出る dialog::backdrop に rgba の単色で色を付ける
- 暗幕を押して閉じるのは dialog に closedby="any" を付けてブラウザに任せる（Chrome・Edge は 134 から、Firefox は 141 から。Safari は 27.0 時点で未対応）
- 'closedBy' in HTMLDialogElement.prototype が偽のときだけ、pointerdown と click の target がどちらも dialog 自身なら requestClose()（無ければ close()）を呼ぶ
- 暗幕を押した click は dialog 自身に届く。dialog の padding と border は 0 にし、余白と枠線は内側の要素に持たせる（padding や border の上を押した click も dialog 自身に届き、暗幕と見分けられない）
- 開閉のボタンは button[commandfor][command] にすると JavaScript なしで動く（Chrome・Edge は 135 から、Safari は 26.2 から、Firefox は 144 から）
- dialog に id を付け（例: id="dlg"）、開くボタンを button[commandfor="dlg"][command="show-modal"]、閉じるボタンを button[commandfor="dlg"][command="close"] にする
- 未対応のブラウザ向けに、'commandForElement' in HTMLButtonElement.prototype が偽のときだけ、click で showModal() / close() を呼ぶ代替を置く
- ただの案内に使わない。閉じる手間を強いるだけになる
- モーダルの上にモーダルを重ねない。閉じ方が分からなくなる
- スマートフォンでは画面のほとんどを覆う。ページ遷移にしたほうが自然なことが多い

## アクセシビリティの要件
- 開いたらモーダルの中へフォーカスを移す
- 閉じたら、開く操作をした要素へフォーカスを戻す
- Tab がモーダルの外へ抜けないようにする。showModal() なら背後はブラウザが inert にするので、inert 属性を自分で付けるのは div で作るときだけにする
- Esc キーで閉じられるようにする
- 独自実装にするなら role="dialog" aria-modal="true" を付ける。dialog 要素の showModal() ならどちらも UA が持つ。見出しは aria-labelledby で結ぶ

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

```html
<div class="x-modal">
  <div class="x-modal__stage">
    <div class="x-modal__scrim"></div>
    <!-- 実際は dialog 要素を showModal() で開く（role と aria-modal は UA が持つ）。暗幕の div は dialog::backdrop に置き換え、
         .x-modal__win の position と inset は dialog に持ち込まない（既定の position: fixed のまま画面の中央に出す）。
         見本は開いたまま流れの中に置いているので、支援技術が閉じ込められないよう aria-modal を付けていない -->
    <div class="x-modal__win" role="dialog" aria-labelledby="x-modal-t">
      <p class="x-modal__t" id="x-modal-t">下書きを破棄しますか？</p>
      <p class="x-modal__b">保存していない変更は元に戻せません。</p>
      <div class="x-modal__act">
        <button class="x-modal__no" type="button">やめる</button>
        <button class="x-modal__yes" type="button">破棄する</button>
      </div>
    </div>
  </div>
</div>
```

```css
/* 貼った先のリセットに頼らないよう、この部品の中だけ border-box にする */
.x-modal,
.x-modal *:not([class*="fa-"]),
.x-modal *:not([class*="fa-"])::before,
.x-modal *: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-modal__stage {
  position: relative;
  width: 268px;
  height: 142px;
  border: 1px solid #e3e6ea;
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
}
.x-modal__scrim {
  position: absolute;
  inset: 0;
  background: rgba(20, 24, 31, 0.45);
}
.x-modal__win {
  position: absolute;
  inset: 16px 14px auto;
  padding: 12px 14px;
  border-radius: 8px;
  background: #fff;
}
.x-modal__t {
  margin: 0 0 5px;
  font-size: 12.5px;
  font-weight: 700;
}
.x-modal__b {
  margin: 0 0 10px;
  font-size: 11px;
  line-height: 1.6;
  color: #606a7b;
}
.x-modal__act {
  display: flex;
  justify-content: flex-end;
  gap: 7px;
}
.x-modal__no,
.x-modal__yes {
  padding: 6px 12px;
  border: 1px solid #cfd4dc;
  border-radius: 7px;
  background: #fff;
  font: inherit;
  font-size: 11.5px;
  cursor: pointer;
}
.x-modal__yes {
  border-color: #b91c1c;
  background: #b91c1c;
  color: #fff;
}
```

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