単位つき入力欄Input with prefix / suffix

「単位つき入力欄（Input with prefix / suffix）」を実装してください。

## これは何か
入力欄の枠の中の左や右に、円・kg・https:// のような単位や決まった文字が灰色の帯で添えてある欄。値だけを打てばよいことが一目で分かる。

## 使いどころ
- 金額・重さ・長さ・割合など、単位が決まっている数値を入れてもらうとき
- URL の https:// のように、全員に共通する部分を打たせたくないとき

## 実装の要件
- label（単位を含む）+ div.枠 > [span.単位 aria-hidden] + input + [span.単位 aria-hidden]。枠線と角丸は外側の div に付け、input の枠線は消す
- 金額は input[type=text][inputmode=numeric]。blur で3桁カンマに整形し、focus でカンマを外して編集しやすくする。送信前にカンマ・全角数字・単位を取り除いて数値にする
- 数値は右寄せ・font-variant-numeric:tabular-nums にし、単位を右に置くと値と単位が離れない
- 単位の帯は flex:none・white-space:nowrap にし、狭い画面でも入力部分のほうが縮むようにする（input に min-width:0 を付ける）
- テキストフィールドとの違い: 単位や決まった文字を枠の中に添え、打つ部分だけを空けておく。単位が無い自由な文字列なら普通のテキストフィールドにする
- 単位を枠の中に書くだけにしない。読み上げでは単位が伝わらないので、ラベルにも「月額（円）」のように書く（GOV.UK Design System も単位の飾りは aria-hidden にし、ラベルで単位を言っている）
- 金額にカンマを付けるなら、入力中ではなく欄を離れたときに付ける（SmartHR Design System の CurrencyInput もフォーカスが外れたときに3桁ごとのカンマを入れる）。受け取る側は、全角数字・カンマ・「円」を含む入力も取り除いて受け止める
- https:// を添えた欄に、完全な URL を貼られることがある。先頭の https:// を取り除いてから受け取る。autocomplete="url" の自動入力も完全な URL を入れるので付けない
- type="number" はカンマを受け付けず、ホイールや上下キーで値が変わる。金額は type="text" に inputmode="numeric"、小数があるなら inputmode="decimal" にする

## アクセシビリティの要件
- 単位の飾り（span）は aria-hidden="true" にし、単位はラベルか補足文で言葉にする（3.3.2 ラベル又は指示）
- 枠線とフォーカスの輪郭は、内側の input ではなく外側の箱に :focus-within で出す。単位の帯まで含めて1つの欄に見せる
- 単位の帯の文字も本文と同じく 4.5:1 以上のコントラストにする。薄い灰色にしすぎない
- 入力欄を囲む枠は背景に対して 3:1 以上にする（1.4.11 非テキストのコントラスト）

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

```html
<div class="x-input-affix">
  <!-- 単位は枠の中の飾り。読み上げでは aria-hidden で外し、そのかわりラベルに単位を書く -->
  <div class="x-input-affix__row">
    <label class="x-input-affix__l" for="x-input-affix-price">月額（円）</label>
    <div class="x-input-affix__f">
      <input class="x-input-affix__i x-input-affix__i--num" id="x-input-affix-price" type="text"
             name="price" value="12,000" inputmode="numeric">
      <span class="x-input-affix__a" aria-hidden="true">円</span>
    </div>
  </div>
  <div class="x-input-affix__row">
    <label class="x-input-affix__l" for="x-input-affix-weight">体重（kg）</label>
    <div class="x-input-affix__f x-input-affix__f--s">
      <input class="x-input-affix__i x-input-affix__i--num" id="x-input-affix-weight" type="text"
             name="weight" value="62.5" inputmode="decimal">
      <span class="x-input-affix__a" aria-hidden="true">kg</span>
    </div>
  </div>
  <div class="x-input-affix__row">
    <label class="x-input-affix__l" for="x-input-affix-site">サイトのURL（https:// のあとから）</label>
    <div class="x-input-affix__f">
      <span class="x-input-affix__a" aria-hidden="true">https://</span>
      <input class="x-input-affix__i" id="x-input-affix-site" type="text" name="site"
             value="example.com" inputmode="url" spellcheck="false" autocapitalize="none">
    </div>
  </div>
</div>
```

```css
/* 貼った先のリセットに頼らないよう、この部品の中だけ border-box にする */
.x-input-affix,
.x-input-affix *:not([class*="fa-"]),
.x-input-affix *:not([class*="fa-"])::before,
.x-input-affix *: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-input-affix {
  display: grid;
  gap: 12px;
  width: 270px;
  max-width: 100%;
  color: #1b2028;
}
.x-input-affix__l {
  display: block;
  margin-bottom: 5px;
  font-size: 12px;
  font-weight: 700;
}
/* 枠線は入力欄ではなく外側の箱に引き、単位と値を1つの枠に収める */
.x-input-affix__f {
  display: flex;
  align-items: stretch;
  height: 42px;
  overflow: hidden;
  border: 1px solid #7f8a99;
  border-radius: 8px;
  background: #fff;
}
.x-input-affix__f--s {
  width: 150px;
  max-width: 100%;
}
.x-input-affix__f:focus-within {
  outline: 2px solid #1d4ed8;
  outline-offset: 1px;
}
.x-input-affix__i {
  flex: 1;
  min-width: 0;
  padding: 0 10px;
  border: 0;
  outline: none;
  background: none;
  color: #1b2028;
  font: inherit;
  font-size: 14px;
}
/* 数値は右寄せ・等幅数字にすると、桁が縦にそろい単位の隣に値が寄る */
.x-input-affix__i--num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.x-input-affix__a {
  display: flex;
  flex: none;
  align-items: center;
  padding: 0 10px;
  background: #eef1f5;
  color: #3f4855;
  font-size: 13px;
  white-space: nowrap;
}
.x-input-affix__a:first-child {
  border-right: 1px solid #c3cad3;
}
.x-input-affix__a:last-child {
  border-left: 1px solid #c3cad3;
}
```

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