Password Input — パスワード入力（表示切替・強度インジケーター）

/* === パスワード入力 ===
   色を変えたいときは :root の変数を書き換えるだけでOKです */
:root {
  --color-primary:  #2B7FE8; /* フォーカスリングなどの強調色 */
  --color-border:   #D0D7E0; /* 通常時のボーダー色 */
  --color-muted:    #9AA5B4; /* 未達成の条件テキスト色 */
  --color-met:      #22C55E; /* 達成済みの条件テキスト色（緑） */
}

*, *::before, *::after { box-sizing: border-box; }
body {
  font-family: sans-serif;
  padding: 24px;
  max-width: 400px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* パターンのラベル */
.pw-section-label {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 700;
  color: var(--color-primary);
  letter-spacing: 0.04em;
}

/* inputとボタンを重ねるコンテナ */
.pw-field-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.pw-input {
  width: 100%;
  padding: 10px 44px 10px 12px; /* 右側にボタン分のスペースを確保 */
  font-size: 14px;
  font-family: sans-serif;
  color: #1A2332;
  border: 1.5px solid var(--color-border);
  border-radius: 8px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.pw-input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(43, 127, 232, 0.12);
}

/* 目アイコンボタン */
.pw-toggle-btn {
  position: absolute;
  right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  color: #8A9BAE;
  line-height: 0;
  padding: 4px;
  border-radius: 4px;
  transition: color 0.15s;
}

.pw-toggle-btn:hover { color: #5A6A7A; }

/* 初期状態: 目を閉じるアイコンは非表示 */
.pw-icon--hide { display: none; }

/* .is-visible クラスが付いたときアイコンを入れ替える */
.pw-toggle-btn.is-visible .pw-icon--show { display: none; }
.pw-toggle-btn.is-visible .pw-icon--hide { display: block; }

/* === 強度インジケーター === */
.pw-strength-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}

.pw-strength-bar-track {
  flex: 1;
  height: 6px;
  background: var(--color-border);
  border-radius: 3px;
  overflow: hidden;
}

/* 幅と色はJSで動的に変更する */
.pw-strength-bar-fill {
  height: 100%;
  width: 0;
  border-radius: 3px;
  transition: width 0.3s, background-color 0.3s;
}

.pw-strength-label {
  font-size: 12px;
  font-weight: 700;
  min-width: 60px;
  color: #5A6A7A;
}

/* === 条件チェックリスト === */
.pw-criteria-list {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* 未達成: グレー。::before でアイコンを表示 */
.pw-criteria-item {
  font-size: 13px;
  color: var(--color-muted);
  padding-left: 18px;
  position: relative;
}

.pw-criteria-item::before {
  content: '○';
  position: absolute;
  left: 0;
  font-size: 11px;
}

/* 達成済み: 緑 + チェックマーク */
.pw-criteria-item.met {
  color: var(--color-met);
}

.pw-criteria-item.met::before {
  content: '✓';
  font-weight: 700;
}

@media (max-width: 480px) {
  body { padding: 16px; }
}

// ===== 表示/非表示切替（両パターン共通の処理） =====
function setupToggle(inputId, btnId) {
  var input = document.getElementById(inputId);
  var btn   = document.getElementById(btnId);

  btn.addEventListener('click', function () {
    var isVisible = btn.classList.toggle('is-visible');
    // type を切り替えて表示/非表示を制御する
    input.type = isVisible ? 'text' : 'password';
    // スクリーンリーダー向けにラベルも更新する
    btn.setAttribute('aria-label', isVisible ? 'パスワードを非表示' : 'パスワードを表示');
  });
}

setupToggle('pw1', 'toggleBtn1');
setupToggle('pw2', 'toggleBtn2');

// ===== Pattern 2: 強度インジケーター =====
var pw2         = document.getElementById('pw2');
var strengthBar = document.getElementById('strengthBar');
var strengthLabel = document.getElementById('strengthLabel');

// 強度スコアごとのバー幅・色・ラベルテキスト
var STRENGTH_LEVELS = [
  { width: '0%',   color: '',          label: '—' },
  { width: '25%',  color: '#EF4444',   label: '弱い' },
  { width: '50%',  color: '#F59E0B',   label: '普通' },
  { width: '75%',  color: '#22C55E',   label: '強い' },
  { width: '100%', color: '#16A34A',   label: '非常に強い' }
];

// 4つの条件: 要素IDと判定関数のペア
var CRITERIA = [
  { id: 'crit-length', test: function (v) { return v.length >= 8; } },
  { id: 'crit-upper',  test: function (v) { return /[A-Z]/.test(v); } },
  { id: 'crit-digit',  test: function (v) { return /[0-9]/.test(v); } },
  { id: 'crit-symbol', test: function (v) { return /[^A-Za-z0-9]/.test(v); } }
];

pw2.addEventListener('input', function () {
  var value = pw2.value;
  var score = 0;

  // 各条件を判定してクラスを付け外し、スコアを集計する
  CRITERIA.forEach(function (crit) {
    var el = document.getElementById(crit.id);
    var met = crit.test(value);
    el.classList.toggle('met', met);
    if (met) score++;
  });

  // 未入力のときはスコアを 0 扱いにしてバーをリセットする
  if (value === '') score = 0;

  var level = STRENGTH_LEVELS[score];
  strengthBar.style.width = level.width;
  strengthBar.style.backgroundColor = level.color;
  strengthLabel.textContent = level.label;
});