ログインフォーム（Login Form）

:root {
  --color-primary: #2B7FE8;
  --color-primary-dark: #1E6ECF;
  --color-error: #E53E3E;
  --color-error-bg: #FFF5F5;
  --color-border: #D0D7E0;
  --color-text: #1A2B3C;
  --color-muted: #5A6A7A;
}

* { box-sizing: border-box; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: #F4F6F9;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: 0;
  padding: 16px;
}

/* ===カード=== */
.login-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
  padding: 32px;
  width: 100%;
  max-width: 400px;
}

/* ===認証エラーバナー=== */
.login-error-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--color-error-bg);
  border: 1px solid #FEB2B2;
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 20px;
  color: var(--color-error);
  font-size: 14px;
}
/* hidden属性が display:flex に上書きされないよう打ち消す */
.login-error-banner[hidden] { display: none; }

/* ===認証成功バナー=== */
.login-success-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #F0FFF4;
  border: 1px solid #9AE6B4;
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 20px;
  color: #276749;
  font-size: 14px;
}
.login-success-banner[hidden] { display: none; }

/* ===フィールド=== */
.login-field { margin-bottom: 20px; }

.login-label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 6px;
}

.login-input {
  width: 100%;
  padding: 10px 12px;
  font-size: 15px;
  border: 1.5px solid var(--color-border);
  border-radius: 8px;
  outline: none;
  transition: border-color 0.15s;
  font-family: inherit;
}

.login-input:focus { border-color: var(--color-primary); }
.login-input.is-error { border-color: var(--color-error); }

.login-field-error {
  display: block;
  font-size: 12px;
  color: var(--color-error);
  margin-top: 4px;
}

/* ===パスワードトグル=== */
.login-password-wrap { position: relative; }
.login-password-wrap .login-input { padding-right: 44px; }

.login-toggle-pw {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  color: var(--color-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

.login-toggle-pw:hover { color: var(--color-primary); }

/* ===ログインを保持する=== */
.login-remember { margin-bottom: 24px; }

.login-remember-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--color-muted);
  cursor: pointer;
}

/* ===送信ボタン=== */
.login-btn {
  width: 100%;
  padding: 12px;
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background 0.15s;
  font-family: inherit;
}

.login-btn:hover:not(:disabled) { background: var(--color-primary-dark); }
.login-btn:disabled { opacity: 0.7; cursor: not-allowed; }

/* スピナーアニメーション */
@keyframes spin { to { transform: rotate(360deg); } }
.login-btn-spinner { animation: spin 0.8s linear infinite; }

/* SVGのhidden属性はブラウザによっては効かないことがある（初期非表示の保険） */
.login-btn-spinner[hidden],
.icon-eye-off[hidden] { display: none; }

@media (max-width: 480px) {
  .login-card { padding: 24px; }
}

// ===== 動作確認の切り替え =====
// true → 送信成功をシミュレート、false → 送信失敗をシミュレート
// 両方の動作を確認したら、この定数と下の setTimeout を実際の認証API呼び出しに差し替えてください
var SIMULATE_SUCCESS = true;
var FAKE_LOADING_MS  = 1200;

var loginForm     = document.getElementById('loginForm');
var emailInput    = document.getElementById('email');
var passwordInput = document.getElementById('password');
var emailError    = document.getElementById('emailError');
var passwordError = document.getElementById('passwordError');
var errorBanner   = document.getElementById('loginErrorBanner');
var loginBtn      = document.getElementById('loginBtn');
var btnText       = loginBtn.querySelector('.login-btn-text');
var btnSpinner    = loginBtn.querySelector('.login-btn-spinner');
var successBanner = document.getElementById('loginSuccessBanner');
var togglePw      = document.getElementById('togglePw');
var eyeIcon       = togglePw.querySelector('.icon-eye');
var eyeOffIcon    = togglePw.querySelector('.icon-eye-off');

// SVG の表示切替（element.hidden は SVGElement では動作しないため style.display を使う）
function showSvg(el) { el.style.display = 'inline'; }
function hideSvg(el) { el.style.display = 'none'; }

function validateEmail(val) {
  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(val);
}

function setFieldError(input, errorEl, message) {
  input.classList.add('is-error');
  errorEl.textContent = message;
}

function clearFieldError(input, errorEl) {
  input.classList.remove('is-error');
  errorEl.textContent = '';
}

function validate() {
  var ok = true;
  if (!emailInput.value.trim()) {
    setFieldError(emailInput, emailError, 'メールアドレスを入力してください');
    ok = false;
  } else if (!validateEmail(emailInput.value.trim())) {
    setFieldError(emailInput, emailError, '正しいメールアドレス形式で入力してください');
    ok = false;
  } else {
    clearFieldError(emailInput, emailError);
  }
  if (!passwordInput.value) {
    setFieldError(passwordInput, passwordError, 'パスワードを入力してください');
    ok = false;
  } else {
    clearFieldError(passwordInput, passwordError);
  }
  return ok;
}

function setLoading() {
  loginBtn.disabled = true;
  btnText.hidden = true;
  showSvg(btnSpinner);
}

function setSuccess() {
  hideSvg(btnSpinner);
  btnText.textContent = 'ログイン';
  btnText.hidden = false;
  loginBtn.disabled = false;
  successBanner.hidden = false;
}

function setFailure() {
  hideSvg(btnSpinner);
  btnText.hidden = false;
  loginBtn.disabled = false;
  errorBanner.hidden = false;
}

loginForm.addEventListener('submit', function (e) {
  e.preventDefault();
  clearFieldError(emailInput, emailError);
  clearFieldError(passwordInput, passwordError);
  errorBanner.hidden = true;
  successBanner.hidden = true;

  if (!validate()) return;

  setLoading();

  // 疑似レスポンス（実際の認証APIに差し替える）
  setTimeout(function () {
    if (SIMULATE_SUCCESS) {
      setSuccess();
    } else {
      setFailure();
    }
  }, FAKE_LOADING_MS);
});

// type="text" 切替時に IME が有効になるため、確定時に非ASCII文字を除去する
passwordInput.addEventListener('compositionend', function () {
  this.value = this.value.replace(/[^\x20-\x7E]/g, '');
});

// パスワードトグル
togglePw.addEventListener('click', function () {
  var isVisible = passwordInput.type === 'text';
  if (isVisible) {
    passwordInput.type = 'password';
    showSvg(eyeIcon);
    hideSvg(eyeOffIcon);
    togglePw.setAttribute('aria-label', 'パスワードを表示');
  } else {
    passwordInput.type = 'text';
    hideSvg(eyeIcon);
    showSvg(eyeOffIcon);
    togglePw.setAttribute('aria-label', 'パスワードを非表示');
  }
});