オーバーレイOverlay

「オーバーレイ（Overlay）」を実装してください。

## これは何か
モーダルやドロワーを出したときに、背後を覆う半透明の膜。背後が操作できないことを見た目で伝える。

## 使いどころ
- モーダル・ドロワー・ライトボックスを開いたとき
- 読み込み中に、画面全体の操作を止めたいとき

## 実装の要件
- position: fixed; inset: 0 で全面を覆い、背景色は rgba の単色にする
- 開いている間は html に overflow: hidden を当てて背後のスクロールを止める。html に scrollbar-gutter: stable を常に指定しておくと、スクロールバーが消えたぶん本文が横にずれない（Chrome・Edge は 94 から、Safari は 18.2 から、Firefox は 97 から）
- 暗幕が出ている状態は :has() で拾い、JavaScript でクラスを付け外ししない（:has() と :modal がどちらも使えるのは、Chrome・Edge は 105 から、Safari は 15.6 から、Firefox は 121 から）
- dialog の暗幕なら html:has(dialog:modal)、閉じているときに hidden 属性で隠す div の暗幕なら html:has(.x-overlay__scrim:not([hidden])) に overflow: hidden を当てる
- 濃すぎると背後が見えず、薄すぎると操作できることを期待させる。0.4〜0.5あたりが目安
- 暗幕を押したら閉じる挙動は、入力途中のモーダルでは危ない。破棄の確認を挟む
- 暗幕を出したまま、背後のスクロールを止め忘れるとページが動いてしまう

## アクセシビリティの要件
- 暗幕そのものは装飾なので aria-hidden="true" にする
- 暗幕を押して閉じる作りでも、暗幕は aria-hidden="true" のまま Tab 順に入れない。キーボードと読み上げ向けには × ボタンと Esc で閉じられるようにする
- 暗幕が出ている間、背後の内容を inert にしてタブ移動を止める

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

```html
<div class="x-overlay">
  <div class="x-overlay__stage">
    <p class="x-overlay__bg">背後のページの内容</p>
    <div class="x-overlay__scrim" aria-hidden="true"></div>
    <div class="x-overlay__win">前に出ている窓</div>
  </div>
</div>
```

```css
/* 貼った先のリセットに頼らないよう、この部品の中だけ border-box にする */
.x-overlay,
.x-overlay *:not([class*="fa-"]),
.x-overlay *:not([class*="fa-"])::before,
.x-overlay *: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-overlay__stage {
  position: relative;
  width: 250px;
  height: 120px;
  padding: 12px;
  border: 1px solid #e3e6ea;
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
}
.x-overlay__bg {
  margin: 0;
  font-size: 11.5px;
  color: #606a7b;
}
.x-overlay__scrim {
  position: absolute;
  inset: 0;
  background: rgba(20, 24, 31, 0.45);
}
.x-overlay__win {
  position: absolute;
  inset: auto 20px 18px;
  padding: 12px;
  border-radius: 8px;
  background: #fff;
  font-size: 12px;
  text-align: center;
}
```

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