スケルトンスクリーンSkeleton screen

「スケルトンスクリーン（Skeleton screen）」を実装してください。

## これは何か
読み込み中に、これから出る内容の形だけを灰色の箱で見せておく表示。空白やスピナーより待ち時間が短く感じられる。

## 使いどころ
- 一覧やカードのように、出来上がりの形が決まっているとき
- 読み込みに1〜3秒かかるとき

## 実装の要件
- 本物と同じ大きさの箱を並べる。角丸と高さを本物に合わせる
- 動きは opacity の変化に留め、prefers-reduced-motion で止める
- 実際の中身と形が違うと、出たときに画面が飛ぶ。行数や高さを合わせる
- 長く待たせるときは向かない。何が起きているかを文字で伝えるほうがよい
- 点滅させすぎると目が疲れる。動きは控えめにする

## アクセシビリティの要件
- 読み込み中の領域に role="status" と「読み込み中」の文字（画面に出さない形でも可）を持たせる
- 読み込み中の領域には aria-busy="true" を付け、中身が出たら外す
- 灰色の箱そのものは aria-hidden="true" にする
- prefers-reduced-motion が指定されていたら、点滅の動きを止める

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

```html
<div class="x-skeleton" role="status">
  <span class="x-skeleton__sr">読み込み中</span>
  <div class="x-skeleton__thumb" aria-hidden="true"></div>
  <div class="x-skeleton__line" aria-hidden="true"></div>
  <div class="x-skeleton__line x-skeleton__line--short" aria-hidden="true"></div>
</div>
```

```css
/* 貼った先のリセットに頼らないよう、この部品の中だけ border-box にする */
.x-skeleton,
.x-skeleton *:not([class*="fa-"]),
.x-skeleton *:not([class*="fa-"])::before,
.x-skeleton *: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-skeleton {
  width: 220px;
  padding: 12px;
  border: 1px solid #e3e6ea;
  border-radius: 10px;
  background: #fff;
}
.x-skeleton__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  white-space: nowrap;
  clip-path: inset(50%);
}
.x-skeleton__thumb {
  height: 44px;
  margin-bottom: 10px;
  border-radius: 6px;
  background: #e8ebef;
}
.x-skeleton__line {
  height: 10px;
  margin-bottom: 7px;
  border-radius: 999px;
  background: #e8ebef;
}
.x-skeleton__line--short {
  width: 60%;
  margin-bottom: 0;
}
```

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