生年月日の入力Date of birth input

「生年月日の入力（Date of birth input）」を実装してください。

## これは何か
「年」「月」「日」が別々の小さな数字の欄になった入力。前に「平成」「昭和」などの元号を選ぶ欄が付くこともある。生年月日のように覚えている日付に使う。

## 使いどころ
- 生年月日・免許の取得日のように、本人が覚えていて数字で打てる日付を入れてもらうとき
- 和暦で覚えている人が多い日付（生年月日・元号で書かれた書類の日付）を、書類どおりに写してもらうとき

## 実装の要件
- fieldset > legend + 入力例の p（aria-describedby）+ 元号の select（任意）+ input[type=text][inputmode=numeric][autocomplete=bday-year] を年・月・日の3つ、それぞれに label
- 欄の幅を入る桁数に合わせる（年は4桁、月と日は2桁）。幅そのものが何桁入れるかの手がかりになる
- 送るときは西暦の yyyy-mm-dd にまとめる。存在しない日（2月30日など）はまとめる前に検証する
- 生年月日にカレンダーを使わない。数十年分の月送りが要る。カレンダーで選ぶ日付（予約日など）は日付ピッカー、覚えている日付はこの形、と分ける
- 欄を埋めたら次の欄へ自動でフォーカスを移さない。打ち直そうとした人の入力が次の欄へ流れる
- input type="number" を使わない。スピンボタンやマウスホイールで値が変わってしまう。type="text" に inputmode="numeric" を付けて数字のキーボードを出す
- 和暦は内部で西暦に直して持つ。平成は1989年1月8日から2019年4月30日まで、令和は2019年5月1日から。範囲の外（平成35年など）はエラーにし、元年は「1」でも「元」でも受け付ける
- autocomplete="bday-year" で自動入力されるのは西暦の4桁。和暦を選んでいる欄に4桁が入ったら、元号を「西暦」へ切り替える
- 入った日付を西暦で添えて見せ、確かめてもらう。「平成2年」と「1990年」の食い違いに本人が気づける

## アクセシビリティの要件
- 3つの欄を fieldset でくくり、legend を「生年月日」にする。各欄の label は「年」「月」「日」で、グループの名前と合わせて読まれる
- 各欄に autocomplete の bday-year / bday-month / bday-day を付ける（達成基準 1.3.5 入力目的の特定）。ブラウザが保存している生年月日で埋められる
- 入力例（「例：平成 2年 4月 7日」）は placeholder ではなく欄の上に文字で置き、aria-describedby で fieldset と結ぶ
- エラーは「月は1から12の数字で入れてください」のように、どの欄の何が違うかを書き、その欄に aria-invalid="true" を付ける
- 元号の select にも label を付ける。見た目に出さないなら視覚的に隠した label にする

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

```html
<div class="x-birthdate-input">
  <fieldset class="x-birthdate-input__fs" aria-describedby="x-birthdate-input-h">
    <legend class="x-birthdate-input__lg">生年月日</legend>
    <p class="x-birthdate-input__h" id="x-birthdate-input-h">例：平成 2年 4月 7日（元号は西暦も選べます）</p>
    <div class="x-birthdate-input__row">
      <label class="x-birthdate-input__vh" for="x-birthdate-input-era">元号</label>
      <select class="x-birthdate-input__era" id="x-birthdate-input-era" name="era">
        <option value="AD">西暦</option>
        <option value="R">令和</option>
        <option value="H" selected>平成</option>
        <option value="S">昭和</option>
        <option value="T">大正</option>
      </select>
      <!-- bday-year は西暦4桁で入る。和暦を選んだ欄に4桁が入ったら、元号を「西暦」へ切り替える -->
      <span class="x-birthdate-input__f">
        <input class="x-birthdate-input__i x-birthdate-input__i--y" id="x-birthdate-input-y" type="text"
               name="year" inputmode="numeric" autocomplete="bday-year" value="2">
        <label class="x-birthdate-input__u" for="x-birthdate-input-y">年</label>
      </span>
      <span class="x-birthdate-input__f">
        <input class="x-birthdate-input__i" id="x-birthdate-input-m" type="text"
               name="month" inputmode="numeric" autocomplete="bday-month" value="4">
        <label class="x-birthdate-input__u" for="x-birthdate-input-m">月</label>
      </span>
      <span class="x-birthdate-input__f">
        <input class="x-birthdate-input__i" id="x-birthdate-input-d" type="text"
               name="day" inputmode="numeric" autocomplete="bday-day" value="7">
        <label class="x-birthdate-input__u" for="x-birthdate-input-d">日</label>
      </span>
    </div>
  </fieldset>
  <!-- 3つの欄がそろったら、西暦に直した日付をここに出して確かめてもらう -->
  <p class="x-birthdate-input__conv" role="status">西暦では 1990年4月7日</p>
</div>
```

```css
/* 貼った先のリセットに頼らないよう、この部品の中だけ border-box にする */
.x-birthdate-input,
.x-birthdate-input *:not([class*="fa-"]),
.x-birthdate-input *:not([class*="fa-"])::before,
.x-birthdate-input *: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-birthdate-input {
  width: 300px;
  max-width: 100%;
  color: #1b2028;
}
.x-birthdate-input__fs {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.x-birthdate-input__lg {
  padding: 0;
  font-size: 12px;
  font-weight: 700;
}
.x-birthdate-input__h {
  margin: 4px 0 8px;
  color: #5b6472;
  font-size: 11px;
}
.x-birthdate-input__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.x-birthdate-input__era {
  width: 72px;
  height: 44px;
  padding: 0 6px;
  border: 1px solid #7f8a99;
  border-radius: 8px;
  background: #fff;
  color: #1b2028;
  font: inherit;
  font-size: 14px;
}
.x-birthdate-input__f {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
/* 欄の幅を入る桁数に合わせる。幅そのものが「何桁入れるか」のヒントになる */
.x-birthdate-input__i {
  width: 44px;
  height: 44px;
  padding: 0 6px;
  border: 1px solid #7f8a99;
  border-radius: 8px;
  background: #fff;
  color: #1b2028;
  font: inherit;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.x-birthdate-input__i--y {
  width: 60px;
}
.x-birthdate-input__u {
  font-size: 14px;
}
.x-birthdate-input__era:focus-visible,
.x-birthdate-input__i:focus-visible {
  outline: 2px solid #1d4ed8;
  outline-offset: 1px;
}
.x-birthdate-input__conv {
  margin: 8px 0 0;
  color: #5b6472;
  font-size: 12px;
}
.x-birthdate-input__vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
  clip-path: inset(50%);
}
```

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