入力ステート見本

あなたは熟練のフロントエンドエンジニアです。私のWebサイトに「入力ステート見本」の効果を追加してください。

# 追加してほしい効果
入力ステート見本（フォーム & 入力）
default・focus・error・success・disabledの5状態を縦に並べた入力欄の見本。色とアイコン、ヘルプ文の違いを一覧で確認できます。

# 追加する場所
👉【ここに対象箇所を記入：例「トップのヒーローセクション」「お問い合わせボタン」「記事カードの一覧」など】

# 参考実装（この見た目・挙動を再現してください）
【HTML】
<div class="stage">
  <div class="is-card">
    <h2 class="is-title">入力ステート見本</h2>

    <div class="is-field">
      <label class="is-label" for="is-default">お名前（デフォルト）</label>
      <input type="text" id="is-default" class="is-input" placeholder="山田 太郎" aria-describedby="is-default-help">
      <p class="is-help" id="is-default-help">未入力の初期状態です</p>
    </div>

    <div class="is-field">
      <label class="is-label" for="is-focus">メールアドレス（フォーカス中）</label>
      <input type="email" id="is-focus" class="is-input is-focus-demo" placeholder="you@example.com" value="sample@" aria-describedby="is-focus-help">
      <p class="is-help" id="is-focus-help">クリックすると実際のフォーカスと同じ枠線になります</p>
    </div>

    <div class="is-field">
      <label class="is-label" for="is-error">パスワード（エラー）</label>
      <div class="is-input-wrap">
        <input type="password" id="is-error" class="is-input is-error" value="1234" aria-invalid="true" aria-describedby="is-error-help">
        <span class="is-icon is-icon-error" aria-hidden="true">!</span>
      </div>
      <p class="is-help is-help-error" id="is-error-help">8文字以上で入力してください</p>
    </div>

    <div class="is-field">
      <label class="is-label" for="is-success">ユーザーID（成功）</label>
      <div class="is-input-wrap">
        <input type="text" id="is-success" class="is-input is-success" value="yamada_taro" aria-describedby="is-success-help">
        <span class="is-icon is-icon-success" aria-hidden="true">✓</span>
      </div>
      <p class="is-help is-help-success" id="is-success-help">このIDは使用できます</p>
    </div>

    <div class="is-field">
      <label class="is-label" for="is-disabled">招待コード（無効化）</label>
      <input type="text" id="is-disabled" class="is-input" value="招待制のため入力不可" disabled aria-describedby="is-disabled-help">
      <p class="is-help" id="is-disabled-help">現在この項目は編集できません</p>
    </div>
  </div>
</div>

【CSS】
* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  font-family: "Segoe UI", "Hiragino Kaku Gothic ProN", system-ui, sans-serif;
  /* 落ち着いたブルーグレーの背景 */
  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 55%, #dbeafe 100%);
  color: #1f2937;
}

.stage { width: 100%; display: grid; place-items: center; }

.is-card {
  width: min(360px, 92vw);
  padding: 28px 26px 24px;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 24px 56px -26px rgba(30, 41, 59, 0.28);
}

.is-title {
  margin: 0 0 18px;
  font-size: 1.05rem;
  font-weight: 700;
  color: #1e293b;
}

.is-field { margin-bottom: 18px; }
.is-field:last-child { margin-bottom: 0; }

.is-label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  color: #475569;
  letter-spacing: 0.02em;
}

.is-input-wrap { position: relative; }

.is-input {
  width: 100%;
  padding: 11px 14px;
  font-size: 0.92rem;
  font-family: inherit;
  color: #111827;
  background: #f8fafc;
  border: 2px solid #e2e8f0;
  border-radius: 10px;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.is-input-wrap .is-input { padding-right: 40px; }

/* 実際にクリックした場合の本物のフォーカス */
.is-input:focus {
  outline: none;
  border-color: #2563eb;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.16);
}

/* フォーカス中の見本として、実フォーカスと同じ見た目を静的に再現 */
.is-focus-demo {
  border-color: #2563eb;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.16);
}

.is-error {
  border-color: #dc2626;
  background: #fef2f2;
}
.is-error:focus { border-color: #dc2626; box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.14); }

.is-success {
  border-color: #16a34a;
  background: #f0fdf4;
}
.is-success:focus { border-color: #16a34a; box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.14); }

.is-input:disabled {
  color: #9ca3af;
  background: #f1f5f9;
  border-color: #e5e7eb;
  cursor: not-allowed;
}

.is-icon {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.7rem;
  font-weight: 800;
  color: #fff;
  line-height: 1;
}
.is-icon-error { background: #dc2626; }
.is-icon-success { background: #16a34a; }

.is-help {
  margin: 6px 0 0;
  font-size: 0.74rem;
  color: #94a3b8;
}
.is-help-error { color: #dc2626; }
.is-help-success { color: #16a34a; }

@media (prefers-reduced-motion: reduce) {
  .is-input { transition: none; }
}

【JavaScript】
// このデモはCSSの状態表現のみで完結するためJSは不要

# 外部ライブラリ
なし（追加ライブラリ不要）

# 守ってほしいこと
- 既存のHTML構造・レイアウト・デザインを壊さないこと。必要に応じてクラス名・色・サイズを私のサイトに合わせて調整してよい。
- クラス名やidが既存と衝突しないよう、必要なら接頭辞で名前空間を分けること。
- レスポンシブ対応と prefers-reduced-motion への配慮を入れること。
- 私のサイトのフレームワーク（React / Vue / 素のHTML など）に合わせて実装すること。不明な場合は素のHTML/CSS/JSで提示し、組み込み手順も説明すること。
- 変更後の確認手順も簡潔に教えてください。