ファイルアップロードFile upload

「ファイルアップロード（File upload）」を実装してください。

## これは何か
パソコンやスマートフォンの中のファイルを選んで送る入力。枠の中へ放り込める形にすることが多い。

## 使いどころ
- 画像や書類を添付してもらうとき
- 複数のファイルをまとめて受け取りたいとき

## 実装の要件
- input[type=file] + label。ドラッグ&ドロップは追加の手段として足す
- 選択後にファイル名と容量を表示する
- 放り込む形だけにしない。ボタンから選ぶ道も必ず残す（ドラッグできない環境がある）
- 受け付ける形式と上限サイズを、選ばせる前に書く
- 選んだあとのファイル名を表示しないと、何を送るのか分からない

## アクセシビリティの要件
- input[type=file] を隠す場合でも、label で結んでキーボードから開けるようにする
- accept 属性で受け付ける形式を伝える
- 選択後のファイル名は文字で表示し、変化は aria-live="polite" で伝える
- ドラッグの反応を色だけで示さない。枠線の太さや文言も変える

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

```html
<div class="x-file-upload">
  <input class="x-file-upload__i" id="x-file-upload-i" type="file" accept="image/png,image/jpeg">
  <label class="x-file-upload__drop" for="x-file-upload-i">
    <i class="fa-solid fa-arrow-up-from-bracket" aria-hidden="true"></i>
    <span class="x-file-upload__t">ファイルを選ぶ</span>
    <span class="x-file-upload__n">ここへ放り込むこともできます（PNG / JPEG・5MBまで）</span>
  </label>
</div>
```

```css
/* 貼った先のリセットに頼らないよう、この部品の中だけ border-box にする */
.x-file-upload,
.x-file-upload *:not([class*="fa-"]),
.x-file-upload *:not([class*="fa-"])::before,
.x-file-upload *: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-file-upload {
  width: 258px;
}
.x-file-upload__drop {
  display: grid;
  justify-items: center;
  gap: 5px;
  padding: 16px 14px;
  border: 1px dashed #7f8a99;
  border-radius: 8px;
  background: #fff;
  color: #1b2028;
  text-align: center;
  cursor: pointer;
}
.x-file-upload__drop:hover {
  border-color: #1d4ed8;
  color: #1d4ed8;
}
.x-file-upload__t {
  font-size: 13px;
  font-weight: 700;
}
.x-file-upload__n {
  font-size: 11px;
  line-height: 1.6;
  color: #606a7b;
}
.x-file-upload__i {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.x-file-upload__i:focus-visible + .x-file-upload__drop {
  outline: 2px solid #1d4ed8;
  outline-offset: 2px;
}
```

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