ライトボックスLightbox

「ライトボックス（Lightbox）」を実装してください。

## これは何か
サムネイルを押すと、暗い背景の上に画像を大きく表示する仕掛け。

## 使いどころ
- 一覧から選んだ画像を、ページを移動せずに大きく見せたいとき
- 前後の画像へ送りながら見せたいとき

## 実装の要件
- dialog 要素 + showModal()。暗幕は ::backdrop に rgba の単色で敷く
- 背景クリックで閉じるのは closedby="any" に任せる（Chrome・Edge は 134 から、Firefox は 141 から。Safari は 27.0 時点で未対応）
- 'closedBy' in HTMLDialogElement.prototype が偽のときだけ、pointerdown と click の target がどちらも dialog 自身なら requestClose()（無ければ close()）を呼ぶ
- この判定が暗幕だけに当たるよう、dialog は padding と border を 0 にし、全画面に広げず中身の大きさにする
- ×ボタンの基準に dialog へ position: relative を付けない。最前面の層では absolute として扱われ、スクロールした画面で開くとページが先頭へ飛ぶ（dialog の既定の position: fixed が×ボタンの基準になる）
- 閉じたら、開いたサムネイルへフォーカスを戻す
- 閉じ方が分からなくなりやすい。×ボタン・背景クリック・Esc の3つを用意する
- 元の大きさより拡大しない。粗い画像を大きく見せても価値が無い
- スマートフォンでは、拡大とスワイプの操作が競合しやすい

## アクセシビリティの要件
- モーダルと同じ扱いにする（フォーカスの移動・Esc・背後の inert）
- 前後へ送るボタンに aria-label を付ける
- 拡大中の画像にも alt を持たせる
- 開いたら閉じるボタンにフォーカスを置く

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

```html
<div class="x-lightbox">
  <div class="x-lightbox__stage">
    <img class="x-lightbox__img" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='9'%3E%3Crect width='16' height='9' fill='%23dbe3f7'/%3E%3C/svg%3E" alt="拡大表示: 春の川辺" width="108" height="72">
    <button class="x-lightbox__x" type="button" aria-label="拡大表示を閉じる">
      <i class="fa-solid fa-xmark" aria-hidden="true"></i>
    </button>
  </div>
</div>
```

```css
/* 貼った先のリセットに頼らないよう、この部品の中だけ border-box にする */
.x-lightbox,
.x-lightbox *:not([class*="fa-"]),
.x-lightbox *:not([class*="fa-"])::before,
.x-lightbox *: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;
}

/* position: relative は流れの中の見本用。dialog にしたら外す（最前面の層では absolute になり、
   スクロールした画面で開くとページが先頭へ飛ぶ） */
.x-lightbox__stage {
  position: relative;
  display: grid;
  place-items: center;
  width: 210px;
  height: 118px;
  border-radius: 10px;
  background: rgba(20, 24, 31, 0.86);
}
.x-lightbox__img {
  display: block;
  width: 108px;
  height: 72px;
  border-radius: 6px;
  background: #fff;
  object-fit: cover;
}
.x-lightbox__x {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 7px;
  background: none;
  color: #fff;
  cursor: pointer;
}
```

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