バッジBadge

「バッジ（Badge）」を実装してください。

## これは何か
状態や分類を短い文字で示す小さな札。「公開中」「NEW」など、一目で種類が分かるようにする。

## 使いどころ
- 一覧の中で、項目の状態を見分けさせたいとき
- 新着や残りわずかなど、注意を引きたい少数の項目

## 実装の要件
- span に文字を入れ、種類ごとに背景色を変える
- 文字は2〜4文字に収める
- 1つの項目に何個も付けない。2個までが読みやすさの限界
- 色だけで意味を分けない。文字を必ず入れる
- 全部の項目に付けると、目印としての働きを失う

## アクセシビリティの要件
- 意味のある情報なので、装飾ではなく文字として置く。背景画像やアイコンだけにしない
- 色のコントラストを 4.5:1 以上にする
- 件数を示すバッジには、何の件数かを読み上げで補う（「未読 3件」）

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

```html
<p class="x-badge">
  <span class="x-badge__i x-badge__i--on">公開中</span>
  <span class="x-badge__i x-badge__i--wait">下書き</span>
  <span class="x-badge__i x-badge__i--stop">停止中</span>
</p>
```

```css
/* 貼った先のリセットに頼らないよう、この部品の中だけ border-box にする */
.x-badge,
.x-badge *:not([class*="fa-"]),
.x-badge *:not([class*="fa-"])::before,
.x-badge *: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-badge {
  display: flex;
  gap: 6px;
  margin: 0;
}
.x-badge__i {
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.7;
}
.x-badge__i--on {
  background: #dcf5e6;
  color: #14602f;
}
.x-badge__i--wait {
  background: #eceff3;
  color: #47505e;
}
.x-badge__i--stop {
  background: #fde5e5;
  color: #8f1616;
}
```

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