星評価Rating

「星評価（Rating）」を実装してください。

## これは何か
星の数で評価を示す部品。見せるだけの場合と、押して評価してもらう場合がある。

## 使いどころ
- 商品やお店の評価を一目で示したいとき
- 利用者に5段階で評価してもらうとき

## 実装の要件
- 表示用: 星は装飾、数値は文字。入力用: input[type=radio] × 5 を fieldset で囲む
- 星だけでは何点か読み取りづらい。数値と件数を併記する
- 件数が少ない評価をそのまま見せると誤解を生む。「（3件）」まで出す
- 半分の星を使うときは、丸め方を決めておく。表示と数値がずれる

## アクセシビリティの要件
- 見せるだけなら、星は aria-hidden にして「5点満点中4.2点」と文字で置く
- 入力するなら、ラジオボタン5個で作る。星の絵はラベルの見た目として扱う
- 色だけで塗りと空を区別しない。形を変える（塗り星と線星）

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

```html
<p class="x-rating">
  <span class="x-rating__s" aria-hidden="true">
    <i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-regular fa-star"></i>
  </span>
  <span class="x-rating__t">5点満点中4.2点（128件）</span>
</p>
```

```css
/* 貼った先のリセットに頼らないよう、この部品の中だけ border-box にする */
.x-rating,
.x-rating *:not([class*="fa-"]),
.x-rating *:not([class*="fa-"])::before,
.x-rating *: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-rating {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
}
.x-rating__s {
  display: inline-flex;
  gap: 2px;
  color: #d97706;
  font-size: 13px;
}
.x-rating__t {
  font-size: 11.5px;
  color: #606a7b;
}
```

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