@charset "utf-8";

/* ============================================================
 * login.css — 認証系ページ（login.php / password_reset_email.php /
 *             show_reset_form.php）専用スタイル
 *
 * 設計方針：
 *   - 既存PHPのHTML構造（class / id / form name 等）には一切手を入れない
 *   - common.css のスタイル（body の border-top、header / footer / h1 / h2 等）
 *     を本ファイル内で局所的に上書きして、login系3ページのみ新デザインを適用
 *
 * 構造マッピング：
 *   header                  → 紺背景の固定ヘッダー
 *   header h1               → 学会名タイトル（白文字・Shippori Mincho）
 *   .wrap                   → main相当のフレックスコンテナ
 *   .wrap h2                → 「マイページ」のページタイトル（紺・中央）
 *   .login-area             → カード幅のラッパー（max 440px）
 *   form#login-form         → 白カード本体（影・角丸）
 *   form#login-form::before → 紺ヘッダーバー（ゴールドアクセント付）
 *   form#login-form > p     → 説明文
 *   form#login-form dl      → 入力グループ
 *   form#login-form dl dt   → ラベル（紺・小サイズ・太字）
 *   form#login-form dl dd input → テキスト入力（フォーカス時シャドウ）
 *   #login-button.submit    → メイン送信ボタン（紺・丸角・影）
 *   .btn__gg.text-center a  → 「パスワードを忘れた方」リンク
 *   .notinput               → エラーバナー
 *   footer                  → 白背景のフッター
 * ============================================================ */

/* ── Webフォント読み込み ─────────────────────────────────────── */
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;600;700&family=Shippori+Mincho:wght@400;600;700&display=swap");

/* ── デザイントークン（このページスコープ） ─────────────────── */
:root {
  --primary:        #0C73B2;  /* ekonpas メインカラー */
  --primary-light:  #1a8acd;  /* 明るい青（フォーカス・hover） */
  --primary-dark:   #08527e;  /* 暗い青（active 時など） */
  --primary-pale:   #e3f1f9;  /* 薄い青（背景・ホバー） */
  --accent:         #26a69a;  /* ティール（アクセントライン・バッジ） */
  --accent-light:   #d3ede9;  /* 薄いティール（背景） */
  --accent-dark:    #1d8079;  /* 濃いティール（hover） */
  --text-color:     #1c1c2e;
  --text-muted:     #5a6070;
  --border-color:   #d0d8e4;
  --bg-color:       #f4f6fa;
  --error:          #c0392b;
  --shadow-card:    0 2px 16px rgba(12, 115, 178, 0.10);
  --shadow-btn:     0 4px 18px rgba(12, 115, 178, 0.28);
  --shadow-btn-hv:  0 6px 24px rgba(12, 115, 178, 0.36);
  --radius:         6px;
}

/* ============================================================
 * 1. ベースリセット（common.css の body 設定を上書き）
 * ============================================================ */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI",
    "Helvetica Neue", "Yu Gothic", YuGothic, "メイリオ", meiryo, sans-serif !important;
  font-size: 14px;
  line-height: 1.8;
  color: var(--text-color) !important;
  background: var(--bg-color) !important;
  border-top: none !important; /* common.css の 3px 紺ボーダーを無効化 */
}

/* ============================================================
 * 2. ヘッダー
 *    既存: <header><div class="container-fluid"><h1><span>...</span></h1></div></header>
 * ============================================================ */
header {
  background: var(--primary) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
  padding: 0 !important;
  margin: 0 !important;
  border-bottom: none !important;
  flex-shrink: 0;
}

header .container-fluid {
  max-width: 900px;
  margin: 0 auto;
  padding: 18px 24px 14px !important;
  display: flex;
  align-items: center;
}

header h1 {
  font-family: "Shippori Mincho", serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: rgba(255, 255, 255, 0.95) !important;
  line-height: 1.5 !important;
  padding-left: 0 !important;
  margin: 0 !important;
  letter-spacing: 0.02em;
}

header h1 span {
  display: inline-block;
}

@media (max-width: 767px) {
  header .container-fluid {
    padding: 14px 16px 12px !important;
  }
  header h1 {
    font-size: 12px !important;
    line-height: 1.45 !important;
  }
}

/* ============================================================
 * 3. メインコンテナ（.wrap）
 * ============================================================ */
.wrap {
  flex: 1 1 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 48px 24px 30vh; /* 下端：操作ボタンが画面端に来ないよう 30vh 確保（共通ルール） */
  margin: 0 !important;
  overflow-y: visible;
  background: transparent;
  position: static;
}

@media (max-width: 767px) {
  .wrap {
    padding: 28px 14px 30vh;
  }
}

/* イベントタイトル（既存 .wrap h2 を流用）
 * common.css の h2（カードヘッダー型・紺背景・白文字）を完全に打ち消し、
 * 中央寄せのページタイトル（紺文字・透明背景）にする */
.wrap h2 {
  /* レイアウト */
  display: block !important;
  width: 100%;
  max-width: 440px;
  margin: 0 auto 26px !important;
  padding: 0 !important;
  /* common.css の背景・影・角丸を打ち消し */
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  /* タイトルの見た目 */
  font-family: "Shippori Mincho", serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.7 !important;
  color: var(--primary) !important;
  text-align: center;
  position: relative;
  letter-spacing: 0.02em;
}

/* common.css の h2::before（ティール縦線）を完全に消す */
.wrap h2::before {
  content: none !important;
  display: none !important;
  background: transparent !important;
  width: 0 !important;
  height: 0 !important;
}

/* ゴールドの下線 */
.wrap h2::after {
  content: "";
  display: block;
  width: 40px;
  height: 3px;
  background: var(--accent);
  border-radius: 2px;
  margin: 10px auto 0;
}

.wrap h2 > span {
  display: block;
  font-family: "Noto Sans JP", sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--text-muted) !important;
  margin-top: 4px;
}

/* ============================================================
 * 4. ログインカードラッパー
 * ============================================================ */
.login-area {
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
  padding: 0;
}

/* ============================================================
 * 5. ログインカード本体（form#login-form）
 *    紺の上部ヘッダーバーを ::before で再現
 * ============================================================ */
form#login-form {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  background: #ffffff;
  border: none;
  border-radius: 10px;
  box-shadow: var(--shadow-card);
  margin: 0;
  padding: 0;
  position: relative;
  overflow: hidden;
}

/* 紺背景のヘッダーバー（疑似要素） */
form#login-form::before {
  content: "ログイン";
  display: flex;
  align-items: center;
  background: var(--primary);
  padding: 18px 28px 18px 46px; /* 左 46px = 28px + アクセント線 4px + 余白 14px */
  font-family: "Shippori Mincho", serif;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.05em;
  position: relative;
}

/* 二段階認証（OTP）画面：ヘッダーラベルを「二段階認証」に上書き */
form#login-form.otp-form::before {
  content: "二段階認証";
}

/* パスワード再設定リクエストフォーム：ヘッダーラベルを「パスワード再設定」に */
form#login-form.reset-form::before {
  content: "パスワード再設定";
}

/* 新パスワード設定フォーム：ヘッダーラベルを「新パスワード設定」に */
form#login-form.show-reset-form::before {
  content: "新パスワード設定";
}

/* ヘッダーバー左のゴールドアクセントライン */
form#login-form::after {
  content: "";
  position: absolute;
  top: 18px;
  left: 28px;
  width: 4px;
  height: 20px;
  background: var(--accent);
  border-radius: 2px;
  pointer-events: none;
}

/* カード本体内の余白（フォーム要素） */
form#login-form > p:first-of-type,
form#login-form > p.pt-0 {
  width: auto !important;
  margin: 24px 32px 22px !important;
  padding: 0 !important;
  font-size: 13px !important;
  line-height: 1.7 !important;
  color: var(--text-muted) !important;
  text-align: left !important;
  font-weight: 400 !important;
  letter-spacing: 0;
}

/* ============================================================
 * 6. 入力フィールド（dl / dt / dd）
 * ============================================================ */
form#login-form dl {
  width: auto !important;
  margin: 0 32px 18px !important;
  padding: 0 !important;
  overflow: visible;
}

form#login-form dl dt,
form#login-form dl dd {
  margin: 0;
}

form#login-form dl dt {
  display: block;
  margin-top: 0 !important;
  font-size: 12px;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: 0.03em;
  margin-bottom: 7px !important;
  padding: 0;
  background: transparent;
}

form#login-form dl dt:first-child {
  margin-top: 0;
}

form#login-form dl dd {
  position: relative;
}

form#login-form dl dd input {
  width: 100% !important;
  height: auto !important;
  padding: 11px 14px !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius) !important;
  background: #fff !important;
  font-family: "Noto Sans JP", sans-serif !important;
  font-size: 14px !important;
  color: var(--text-color) !important;
  font-weight: 500;
  outline: none;
  margin-top: 0 !important;
  transition: border-color 0.2s, box-shadow 0.2s;
  -webkit-appearance: none;
  appearance: none;
  box-shadow: none;
}

form#login-form dl dd input:focus {
  border-color: var(--primary-light) !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 168, 0.12) !important;
  background: #fff !important;
}

/* ============================================================
 * 7. ログインボタン
 * ============================================================ */
form#login-form p.column__02.btn__gg {
  width: auto !important;
  margin: 24px 32px 28px !important;
  padding: 0 !important;
  text-align: center;
}

form#login-form p.column__02.btn__gg:first-of-type {
  padding-top: 0 !important;
}

#login-button.submit {
  display: block;
  width: 100% !important;
  max-width: none;
  min-width: 0;
  height: auto;
  margin: 0;
  padding: 14px;
  background: var(--primary) !important;
  color: #fff !important;
  font-family: "Noto Sans JP", sans-serif !important;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.1em;
  text-align: center;
  border: none;
  border-radius: 50px;
  box-shadow: var(--shadow-btn);
  cursor: pointer;
  transition: background-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

#login-button.submit:hover {
  background: var(--primary-light) !important;
  box-shadow: var(--shadow-btn-hv);
  transform: translateY(-2px);
}

#login-button.submit:focus,
#login-button.submit:active {
  outline: none;
  background: var(--primary-light) !important;
  transform: translateY(0);
}

/* ============================================================
 * 8. 「パスワードを忘れた方はこちら」リンク
 *    既存: <p class="column__02 btn__gg text-center"><a>...</a></p>
 * ============================================================ */
form#login-form p.column__02.btn__gg.text-center {
  margin: 22px 32px 28px !important;
  padding: 16px 0 0 !important;
  border-top: 1px solid var(--border-color);
  text-align: center;
}

form#login-form p.column__02.btn__gg.text-center a {
  display: inline-block;
  font-size: 12px;
  color: var(--primary-light);
  text-decoration: underline;
  font-weight: 500;
  transition: color 0.15s;
}

form#login-form p.column__02.btn__gg.text-center a:hover {
  color: var(--primary);
}

/* ============================================================
 * 9. エラーバナー（.notinput）
 * ============================================================ */
@keyframes login-error-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(192, 57, 43, 0.3); }
  100% { box-shadow: 0 0 0 6px rgba(192, 57, 43, 0); }
}

div.notinput {
  width: 100%;
  max-width: 440px;
  min-width: 0;
  margin: 0 auto 18px;
  padding: 14px 18px !important;
  background: #fff5f5;
  border: 1px solid var(--error);
  border-left: 4px solid var(--error);
  border-radius: var(--radius);
  color: var(--error);
  text-align: left;
  line-height: 1.6;
  animation: login-error-pulse 1.4s ease infinite;
}

div.notinput p.blinking {
  font-weight: 700;
  font-size: 13px;
  padding-bottom: 6px !important;
  margin-bottom: 6px;
  border-bottom: 1px dashed rgba(192, 57, 43, 0.4);
}

div.notinput ul {
  display: block;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 12px;
}

div.notinput ul li {
  text-align: left;
  padding-left: 1em;
  text-indent: -1em;
  margin-top: 2px;
}

div.notinput ul li::before {
  content: "・";
  color: var(--error);
}

/* ============================================================
 * 10. ワンタイムパスワード（OTP）入力
 *     → twpstep_verify_login.php / show_reset_form.php で使用
 * ============================================================ */
.otp-wrapper {
  margin: 0 32px 18px !important;
}

.otp-wrapper dt {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: 0.03em;
  margin-bottom: 8px;
}

.otp-wrapper dd {
  margin: 0;
}

.otp-inputs {
  display: flex;
  gap: 0.5em;
  justify-content: flex-start;
}

.otp-input {
  width: 2.5em !important;
  height: 2.5em !important;
  padding: 0 !important;
  font-size: 1.5em !important;
  font-weight: 700;
  text-align: center;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius);
  outline: none;
  background: #fff;
  color: var(--text-color);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.otp-input:focus {
  border-color: var(--primary-light) !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 168, 0.12) !important;
}

.msg__ {
  width: auto !important;
  margin: 0 32px !important;
  font-size: 13px;
  color: var(--text-muted);
}

.btn__gg {
  padding-top: 24px;
  padding-bottom: 28px;
}

.small {
  font-size: 11px !important;
  color: var(--text-muted) !important;
  margin-top: 6px !important;
}

/* OTP の再送信エリア（補足テキスト＋ボタンを中央寄せにまとめる） */
form#login-form.otp-form .small,
form#login-form.otp-form p:has(> #resend-code) {
  text-align: center !important;
  margin-left: 32px !important;
  margin-right: 32px !important;
}
form#login-form.otp-form .small {
  margin-bottom: 8px !important;
}

/* OTP の再送信ボタン */
#resend-code {
  background-color: #fff;
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  padding: 8px 20px;
  border-radius: 50px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

#resend-code:hover,
#resend-code:focus {
  background-color: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

/* ============================================================
 * 11. フッター
 * ============================================================ */
footer {
  flex-shrink: 0;
  text-align: center;
  padding: 18px 20px !important;
  margin: 0 !important;
  background: #fff !important;
  color: var(--text-muted) !important;
  border-top: 1px solid var(--border-color);
  font-size: 11px !important;
  font-weight: 400 !important;
  letter-spacing: 0.02em;
}

/* ============================================================
 * 12. 旧スタイル互換用（show_reset_form.php / password.css 連携）
 * ============================================================ */
form#login-form .password-rule,
form#login-form .password-rules {
  margin: 0 32px 12px;
}

/* show_reset_form.php：最初の dl（新パスワード）
 *  - 紺ヘッダーバー直下に密着しないよう上余白を確保
 *  - 直下の注意・条件パネル（.password-note）と意図的に密着させる（下マージン0） */
form#login-form.show-reset-form dl:first-of-type {
  margin-top: 22px !important;
  margin-bottom: 0 !important;
}

/* show_reset_form.php：注意・条件パネル（password-note）
 *  - 上は直前の入力欄と密着（margin-top: 0、HTML側 mt-0 と合致）
 *  - 下は次の dl（新パスワード確認用）と離す */
form#login-form.show-reset-form .password-note {
  margin-top: 0 !important;
  margin-bottom: 18px !important;
}

/* show_reset_form.php：表示切替ボタン分の右側パディング確保 */
form#login-form.show-reset-form dl dd .position-relative input {
  padding-right: 44px !important;
}

/* show_reset_form.php：表示切替ボタン位置調整（password.css の .password-toggle を上書き）
 * 親 dd に対して absolute 配置し、input の右端に重ねる */
form#login-form.show-reset-form dl dd .position-relative {
  position: relative;
}
form#login-form.show-reset-form dl dd .password-toggle {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  padding: 6px 10px;
  background: transparent;
  border: none;
  color: var(--text-muted);
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
}
form#login-form.show-reset-form dl dd .password-toggle:hover,
form#login-form.show-reset-form dl dd .password-toggle:focus {
  color: var(--primary);
  outline: none;
}

/* ============================================================
 * 13. レガシー幅指定の打ち消し
 * ============================================================ */
@media screen and (max-width: 1000px) {
  div.notinput,
  form#login-form {
    width: 100%;
    margin: 0 auto;
    position: static;
    transform: none;
  }
}

@media (max-width: 480px) {
  form#login-form > p:first-of-type,
  form#login-form > p.pt-0 {
    margin: 22px 22px 20px !important;
  }
  form#login-form dl {
    margin: 0 22px 16px !important;
  }
  form#login-form p.column__02.btn__gg {
    margin: 22px 22px 0 !important;
  }
  form#login-form p.column__02.btn__gg.text-center {
    margin: 20px 22px 24px !important;
  }
  .otp-wrapper,
  .msg__ {
    margin-left: 22px !important;
    margin-right: 22px !important;
  }
}