パネルPanel

「パネル（Panel）」を実装してください。

## これは何か
見出しと中身を持つ、画面の一区画。管理画面で情報を種類ごとに分けるときによく使う。

## 使いどころ
- 1画面に複数の話題を並べるとき。どこからどこまでが1つの話かを示す
- ダッシュボードで、指標ごとに区切りたいとき

## 実装の要件
- section > (h2 + 本文)。枠線か背景で領域を示す
- 入れ子にしすぎない。パネルの中のパネルは、境界線が増えて読みにくくなる
- 見出しの無いパネルは、ただの箱になって意味を持たない
- 影と枠線を両方使うと重くなる。どちらかにする

## アクセシビリティの要件
- 見出しを h2 / h3 にして、section 要素と aria-labelledby で結ぶ
- 中に操作があるなら、見出しとの関係が視覚的にも分かる配置にする

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

```html
<section class="x-panel" aria-labelledby="x-panel-t">
  <div class="x-panel__head">
    <h3 class="x-panel__t" id="x-panel-t">今月の使用量</h3>
    <span class="x-panel__sub">9月</span>
  </div>
  <div class="x-panel__body">
    <p class="x-panel__v">12.4 GB</p>
    <p class="x-panel__n">上限 30 GB のうち 41%</p>
  </div>
</section>
```

```css
/* 貼った先のリセットに頼らないよう、この部品の中だけ border-box にする */
.x-panel,
.x-panel *:not([class*="fa-"]),
.x-panel *:not([class*="fa-"])::before,
.x-panel *: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-panel {
  width: 236px;
  border: 1px solid #e3e6ea;
  border-radius: 10px;
  background: #fff;
}
.x-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid #e3e6ea;
}
.x-panel__t {
  margin: 0;
  font-size: 12.5px;
  /* 見出しタグに頼らず、このクラスだけで同じ見え方にする */
  font-weight: 700;
}
.x-panel__sub {
  font-size: 11px;
  color: #606a7b;
}
.x-panel__body {
  padding: 12px 14px;
}
.x-panel__v {
  margin: 0 0 3px;
  font-size: 20px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.x-panel__n {
  margin: 0;
  font-size: 11px;
  color: #606a7b;
}
```

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