強度メーター付きのパスワード欄

選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。

書き換える項目

プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。

[パスワードの条件]

例：8文字以上、英字と数字を両方含む

[使用技術]

例：HTML/CSS/JavaScript、React + Tailwind CSS

あなたはフォームのUXとアクセシビリティに詳しいフロントエンドエンジニアです。
以下の条件で「強度メーター付きのパスワード入力欄」を実装してください。

## 表示内容
- ラベル「パスワード」
- 入力欄（右端に「表示／非表示」の切り替えボタン）
- 強度メーター（4段階）と、強さを表す言葉（弱い・ふつう・強い・とても強い）
- 条件のチェックリスト：[パスワードの条件]

## レイアウト・デザイン
- ラベルは入力欄の上に常に表示（14px、font-weight 700、色 #1B2A44）
- 入力欄：高さ 48px、角丸 8px、1px solid #CBD5E1、文字 16px、色 #1B2A44
- フォーカス時：枠線 #1463F0 と 3px の薄いリング
- 切り替えボタン：入力欄の内側右端。13px、色 #1463F0
- メーター：4本のバーを横に並べる（高さ 4px、間隔 4px、角丸 9999px）。満たした段階まで #1463F0、残りは #E2E8F0
- 強さの言葉：12px、font-weight 700、色 #1B2A44。メーターの右
- チェックリスト：12px、色 #5F6D84。満たした条件は先頭にチェックマークを付ける

## 入力まわりの属性
- type="password"、autocomplete="new-password"
- 貼り付けを禁止しない（パスワードマネージャーを妨げない）

## 動作
- 入力のたびに、メーターとチェックリストを更新する
- 切り替えボタンで type を text / password に切り替える
- 強さの判定は、長さと文字の種類の数で段階を決める簡単な方法でよい（判定方法をコメントで説明する）

## アクセシビリティ
- 切り替えボタンは button type="button"、aria-pressed で状態を伝え、ラベルは「パスワードを表示」
- 強さは色だけでなく言葉でも伝え、aria-live="polite" で読み上げる
- チェックリストは aria-describedby で入力欄と関連付ける

## 出力形式
- [使用技術]のコードを1つ出力
- 色・メーターの段階数をCSS変数や定数にまとめる