/*
 * auth.css — /login/ ・ /register/ 共用スキン (.wf-auth__*)。
 * Home V2 ブルートークン (zone=hub)。左=ブランド/訴求パネル, 右=SWPM フォームカード。
 * SWPM 既定フォーム HTML は .wf-auth スコープで広めに restyle する(プラグインのクラス名に
 * 依存しすぎないよう、まず汎用の input/label/submit を当て、既知クラスで補強)。
 */

.wf-auth {
  background: var(--color-bg);
  color: var(--color-text-body);
  padding-block: clamp(32px, 5vw, 64px);
  padding-inline: var(--space-4);
}
.wf-auth__grid {
  max-width: 980px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--zone-radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

/* ---- 左: ブランド/訴求パネル ---- */
.wf-auth__aside {
  background: linear-gradient(150deg, var(--color-primary) 0%, var(--color-accent) 100%);
  color: #fff;
  display: flex;
}
.wf-auth__aside-inner {
  margin: auto;
  padding: clamp(28px, 4vw, 48px);
  width: 100%;
}
.wf-auth__brand {
  font-weight: var(--weight-bold);
  letter-spacing: 0.5px;
  font-size: var(--text-h3);
  margin-bottom: var(--space-6);
}
.wf-auth__lede {
  font-size: clamp(24px, 3vw, 32px);
  font-weight: var(--weight-bold);
  line-height: 1.35;
  margin: 0 0 var(--space-4);
}
.wf-auth__sub {
  font-size: var(--text-caption);
  line-height: 1.9;
  color: rgba(255, 255, 255, 0.88);
  margin: 0 0 var(--space-6);
}

/* login パネルの簡易リスト */
.wf-auth__points {
  list-style: none;
  margin: 0;
  padding: 0;
}
.wf-auth__points li {
  position: relative;
  padding-left: 26px;
  margin-bottom: var(--space-3);
  font-size: var(--text-caption);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.92);
}
.wf-auth__points li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--color-secondary);
  font-weight: var(--weight-bold);
}

/* register パネルの特典(アイコン+2行) */
.wf-auth__perks {
  list-style: none;
  margin: 0 0 var(--space-6);
  padding: 0;
}
.wf-auth__perk {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  margin-bottom: var(--space-4);
}
.wf-auth__perk-icon { font-size: 22px; line-height: 1.3; flex: none; }
.wf-auth__perk-title {
  display: block;
  font-weight: var(--weight-bold);
  font-size: var(--text-body);
}
.wf-auth__perk-desc {
  display: block;
  font-size: var(--text-tiny);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
  margin-top: 2px;
}
.wf-auth__trust {
  font-size: var(--text-tiny);
  color: rgba(255, 255, 255, 0.82);
  margin: 0;
}

/* ---- 右: フォームカード ---- */
.wf-auth__card { display: flex; }
.wf-auth__card-inner {
  margin: auto;
  width: 100%;
  padding: clamp(28px, 4vw, 48px);
}
.wf-auth__title {
  font-size: var(--text-h2);
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-2);
}
.wf-auth__title-sub {
  font-size: var(--text-caption);
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-6);
  line-height: 1.7;
}
.wf-auth__switch {
  margin: var(--space-6) 0 0;
  font-size: var(--text-caption);
  color: var(--color-text-secondary);
  text-align: center;
}
.wf-auth__switch a {
  color: var(--color-accent);
  font-weight: var(--weight-bold);
  text-decoration: none;
}
.wf-auth__switch a:hover { text-decoration: underline; }

/* ===================================================================
 *  SWPM フォーム restyle (.wf-auth スコープ)
 *  既定マークアップは <div class="swpm-..."> でラップされた label + input の積み重ね。
 *  クラス名に依存しすぎないよう汎用セレクタを主、既知クラスで補強する。
 * =================================================================== */
.wf-auth__form { margin: 0; }

/* SWPM の行ラッパは全幅ブロックに */
.wf-auth__form .swpm-registration-form-row,
.wf-auth__form .swpm-login-form-row,
.wf-auth__form p {
  margin: 0 0 var(--space-4);
}

/* 会員登録フォームから ユーザー名(user_name)・姓(last_name)・名(first_name)・会員レベルを非表示。
 * 姓名は SWPM 既定で任意項目。ユーザー名は必須だが inc/swpm-registration.php が送信時に
 * メールアドレスで自動補完するため入力させない(メールだけで登録できる訴求に整合)。
 * 会員レベルは無料(L2)固定で選ばせる意味がないため隠す(hidden input は残るので送信は通る)。
 * SWPM が各フィールド行に付ける専用クラス(.swpm-username-row 等)で行ごと隠す。
 * ponytail: CSS で行ごと隠すだけ。DOM から完全に除く必要が出たら SWPM フィルタ側で対応(upgrade path)。 */
.wf-auth__form .swpm-username-row,
.wf-auth__form .swpm-firstname-row,
.wf-auth__form .swpm-lastname-row,
.wf-auth__form .swpm-membership-level-row {
  display: none;
}

/* 登録ボタン下の規約同意文(小さくグレー)。 */
.wf-auth__legal {
  margin-top: var(--space-3);
  font-size: var(--text-tiny);
  color: var(--color-text-muted, #888);
  line-height: 1.6;
}
.wf-auth__legal a { color: inherit; text-decoration: underline; }

.wf-auth__form label {
  display: block;
  font-size: var(--text-caption);
  font-weight: var(--weight-medium);
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
}

.wf-auth__form input[type="text"],
.wf-auth__form input[type="email"],
.wf-auth__form input[type="password"],
.wf-auth__form input[type="tel"],
.wf-auth__form input:not([type]) {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  font-size: var(--text-body);
  color: var(--color-text-primary);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.wf-auth__form input[type="text"]:focus,
.wf-auth__form input[type="email"]:focus,
.wf-auth__form input[type="password"]:focus,
.wf-auth__form input[type="tel"]:focus,
.wf-auth__form input:not([type]):focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-bg);
}

/* Remember me 行: チェックボックスとラベルを横並びに。
 * .wf-auth__form label の display:block が「ログイン情報を保存」を改行で落とす崩れを修正。 */
.wf-auth__form .swpm-remember-me {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 var(--space-4);
}
.wf-auth__form .swpm-remember-me label {
  display: inline;
  margin: 0;
  font-weight: var(--weight-regular);
  color: var(--color-text-secondary);
}
.wf-auth__form .swpm-remember-checkbox { display: inline-flex; }
.wf-auth__form input[type="checkbox"] { margin: 0; }

/* 「会員について」リンクは不要(カード下部に無料会員登録への導線が別途あるため)。 */
.wf-auth__form .swpm-join-us-link { display: none; }

/* submit を btn-primary 相当のフル幅ボタンに */
.wf-auth__form input[type="submit"],
.wf-auth__form button[type="submit"],
.wf-auth__form .swpm-login-form-submit,
.wf-auth__form .swpm-registration-submit {
  width: 100%;
  display: block;
  padding: 13px 20px;
  margin-top: var(--space-2);
  font-size: var(--text-body);
  font-weight: var(--weight-bold);
  color: var(--zone-accent-on-accent, #fff);
  background: var(--zone-accent-primary, var(--color-accent));
  border: none;
  border-radius: var(--zone-radius-button, var(--radius-pill));
  cursor: pointer;
  transition: transform 0.12s, box-shadow 0.15s, background 0.15s;
}
.wf-auth__form input[type="submit"]:hover,
.wf-auth__form button[type="submit"]:hover,
.wf-auth__form .swpm-login-form-submit:hover,
.wf-auth__form .swpm-registration-submit:hover {
  background: var(--color-primary);
  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.20);
}

/* フォーム内リンク(パスワード忘れ等) */
.wf-auth__form a { color: var(--color-accent); text-decoration: none; }
.wf-auth__form a:hover { text-decoration: underline; }

/* SWPM のメッセージ(エラー/成功)ボックス */
.wf-auth__form .swpm-registration-success-msg,
.wf-auth__form .swpm-login-action-msg,
.wf-auth__form .swpm-red,
.wf-auth__form .swpm-green {
  font-size: var(--text-caption);
  line-height: 1.7;
  margin-bottom: var(--space-4);
}

/* ===================================================================
 *  プロフィール編集 (.wf-auth--profile): SWPM の <table> フォームを
 *  login/register と同じ縦積み(label の上に全幅 input)に変換する。
 * =================================================================== */
.wf-auth--profile .wf-auth__form table,
.wf-auth--profile .wf-auth__form tbody,
.wf-auth--profile .wf-auth__form tr,
.wf-auth--profile .wf-auth__form td {
  display: block;
  width: 100%;
}
.wf-auth--profile .wf-auth__form tr { margin-bottom: var(--space-4); }
.wf-auth--profile .wf-auth__form td { padding: 0; }
.wf-auth--profile .wf-auth__form td label { margin-bottom: var(--space-2); }
/* select も input と同じ見た目に */
.wf-auth--profile .wf-auth__form select {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  font-size: var(--text-body);
  color: var(--color-text-primary);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

/* ===================================================================
 *  マイページ (.wf-auth--account) 追加: ステータスバッジ + 学習導線リスト。
 * =================================================================== */
.wf-account__status {
  display: inline-block;
  padding: 4px 14px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  font-size: var(--text-caption);
  font-weight: var(--weight-bold);
}

.wf-account__links {
  list-style: none;
  margin: 0 0 var(--space-6);
  padding: 0;
}
.wf-account__links li { margin: 0 0 var(--space-3); }
.wf-account__links a {
  display: block;
  padding: 14px 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.wf-account__links a:hover {
  border-color: var(--color-accent);
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.12);
}
.wf-account__link-label {
  display: block;
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
}
.wf-account__link-desc {
  display: block;
  margin-top: 2px;
  font-size: var(--text-tiny);
  color: var(--color-text-secondary);
}

/* SWPM アカウントバー(ログアウト/プロフィール編集)の上に区切り */
.wf-account__swpm {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-5);
}

/* ---- モバイル: 1カラム積み(訴求パネルを上に) ---- */
@media (max-width: 720px) {
  .wf-auth__grid { grid-template-columns: 1fr; max-width: 480px; }
  .wf-auth__aside-inner { padding: var(--space-6); }
  /* login の簡易リストはモバイルでは省スペースのため非表示(訴求は register のみ残す) */
  .wf-auth--login .wf-auth__points { display: none; }
  .wf-auth--login .wf-auth__sub { margin-bottom: 0; }
}