@charset "UTF-8";

/* =========================================================
   auth.css
   ---------------------------------------------------------
   認証系ページ（login / register 共通）のスタイル
   対象：
     - login.php
     - register.php
     - 将来の password_reset 系
   ---------------------------------------------------------
   デザイン方針：
   ・カード型 / 中央配置
   ・入力に集中できる余白
   ・派手すぎず信頼感のあるUI
   ========================================================= */


/* ===============================
   フォーム全体ラッパー
   =============================== */

.form-login {
  max-width: 420px;
  margin: 32px auto;
  padding: 28px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
}

.form-login h1 {
  text-align: center;
  margin-bottom: 20px;
}


/* ===============================
   フィールド
   =============================== */

.form-login .field {
  display: grid;
  gap: 6px;
  margin-bottom: 14px;
}

.form-login label {
  font-size: 13px;
  font-weight: 600;
}

.form-login .hint {
  font-size: 11px;
  color: var(--muted);
  font-weight: normal;
  margin-left: 4px;
}

.form-login input {
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 14px;
}

.form-login input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.12);
}


/* ===============================
   ボタン行
   =============================== */

.form-login .actions {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}

.form-login .actions .btn {
  flex: 1;
}


/* ===============================
   アラート（成功 / エラー）
   =============================== */

.alert {
  margin-bottom: 14px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 13px;
}

.alert.success {
  background: #ecfdf5;
  border: 1px solid #10b981;
  color: #065f46;
}

.alert.error {
  background: #fef2f2;
  border: 1px solid #ef4444;
  color: #7f1d1d;
}

/* エラー表示の軽い揺れ（任意） */
.shake {
  animation: shake 0.35s linear;
}

@keyframes shake {
  0% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  50% { transform: translateX(4px); }
  75% { transform: translateX(-4px); }
  100% { transform: translateX(0); }
}

/* ===============================
   規約同意・リンク（追記）
   =============================== */

.form-login .terms-agree {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
}

.form-login .terms-agree input[type="checkbox"] {
  width: 16px;
  height: 16px;
  padding: 0;
}

.form-login .terms-link {
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 700;
  color: var(--accent);
}

.form-login .terms-link:hover,
.form-login .terms-link:focus {
  opacity: 0.85;
}

/* ===============================
   同意が必要なことを伝える仕掛け（追記）
   =============================== */

.form-login .agree-hint {
  margin-top: 10px;
  font-size: 12px;
  color: var(--muted);
}

.form-login .agree-hint.is-hidden {
  display: none;
}

/* disabledの見た目を強める（JSで is-disabled を付け外し） */
.form-login .actions .btn.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
  filter: grayscale(0.25);
}

/* 念のため：実際に disabled のときも分かりやすく */
.form-login .actions .btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}