コンテキストメニューContext menu

「コンテキストメニュー（Context menu）」を実装してください。

## これは何か
右クリックや長押しで、その場所に応じた操作を出すメニュー。対象を指したまま操作を選べる。

## 使いどころ
- 一覧の行や、キャンバス上の要素に対する操作を出したいとき
- 画面に操作ボタンを並べる場所が無いとき

## 実装の要件
- メニューは position: fixed; にし、contextmenu イベントで preventDefault() してから clientX / clientY を top / left に入れる。画面外にはみ出す分は JavaScript で内側へ寄せる。基準がポインターの座標なので、CSS アンカー配置（position-area）は使わない
- 最前面に出すために popover 属性を使うなら popover="manual" にし、UA の既定の inset: 0; margin: auto; を inset: auto; margin: 0; で打ち消し、外側クリックで閉じる処理を自分で書く
- 値を省いた popover（auto）は使わない。マウスのボタンを押し下げた時点で contextmenu が発火する macOS と Linux では、離した瞬間に外側クリックとみなされて閉じる
- 同じ操作をボタンからも辿れるようにする
- ここにしか無い操作を作らない。右クリックを知らない人、できない端末がある
- ブラウザ標準の右クリックメニューを奪うと、リンクを新しいタブで開けなくなる
- 項目を増やしすぎると、目的のものを探すほうが遅くなる

## アクセシビリティの要件
- キーボードからも開けるようにする（メニューキー、または操作ボタンを別に置く）
- 矢印キーでの移動と Esc での閉じを実装する
- 開いたらメニューの先頭へフォーカスを移す

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

```html
<div class="x-context-menu">
  <div class="x-context-menu__stage">
    <p class="x-context-menu__row">請求書_2026_09.pdf</p>
    <ul class="x-context-menu__m" role="menu">
      <li role="menuitem" tabindex="-1">開く</li>
      <li role="menuitem" tabindex="-1">名前を変える</li>
      <li role="menuitem" tabindex="-1">ダウンロード</li>
    </ul>
  </div>
</div>
```

```css
/* 貼った先のリセットに頼らないよう、この部品の中だけ border-box にする */
.x-context-menu,
.x-context-menu *:not([class*="fa-"]),
.x-context-menu *:not([class*="fa-"])::before,
.x-context-menu *: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-context-menu__stage {
  position: relative;
  width: 236px;
  height: 132px;
  padding: 10px 12px;
  border: 1px solid #e3e6ea;
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
}
.x-context-menu__row {
  margin: 0;
  font-size: 12px;
}
.x-context-menu__m {
  position: absolute;
  top: 34px;
  left: 56px;
  width: 132px;
  margin: 0;
  padding: 5px;
  border: 1px solid #cfd4dc;
  border-radius: 8px;
  background: #fff;
  list-style: none;
}
.x-context-menu__m li {
  padding: 5px 8px;
  border-radius: 6px;
  font-size: 11.5px;
  line-height: 1.5;
}
.x-context-menu__m li:first-child {
  background: #eef2ff;
  color: #1d4ed8;
}
```

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