/* ===========================================================================
   ログイン系ページの共通スタイル
   ---------------------------------------------------------------------------
   対象 = Pages/Login.cshtml ／ Pages/PasswordReset.cshtml
   （どちらも Layout = null の単独ページ＝背景画像＋中央カードの骨格を共有する）

   ⚠️ この2ページは _Layout を使わないため app-shell.css / form-common.css を
      読み込まない。ログイン系の見た目はこのファイルが正。
   ⚠️ form-common.css の .field* とは「別デザイン」なので、form-common.css を
      読み込む形には置き換えられない（下記の違いは意図的なもの）:
        form-common: .field = flex/column/gap、.field-label = グレー(--text-secondary)、
                     エラーは .field.has-error input（親に付与）
        ログイン系  : .field = margin-bottom、.field-label = 青(--primary)、
                     エラーは .field input.invalid（入力自身に付与）
   ⚠️ 新しいログイン系ページ（お客さま用ログイン等）を追加するときは、
      ページ内 <style> にコピペせずこのファイルを読み込むこと。
   =========================================================================== */

/* ---------------------------------------------------------------------------
   トークン
   ⚠️ 名前は app-shell.css と揃える（--danger-text / --success-text）。
      同じ意味を --danger / --success と別名で持つとページ間で共通化できなくなる。
   ⚠️ --radius-lg だけは app-shell.css（16px）と値が異なる 20px。
      ログインカードは面積が大きく、16px では角の丸みが弱く見えるため。
   --------------------------------------------------------------------------- */
:root {
  --bg-card: #FFFFFF;
  --border-default: #E5E7EB;
  --text-primary: #111827;
  --text-secondary: #6B7280;
  --text-muted: #9CA3AF;
  --primary: #2563EB;
  --primary-light: #EFF6FF;
  --danger-bg: #FEE2E2;
  --danger-text: #B91C1C;
  --danger-border: #FCA5A5;
  --success-text: #16A34A;
  /* ⚠️ ログイン系ページは Layout=null で app-shell.css を読み込まないため、
        app-shell.css の :root にあるトークンもここに同じ値で持つ必要がある
        （持たないと var() が未定義になり、その宣言ごと無効化されて背景が消える）。
        値を変えるときは app-shell.css 側と必ず揃える。 */
  --primary-dark: #1D4ED8;
  --danger-surface: #FEF2F2;
  --surface-muted: #F3F4F6;
  --surface-panel: #F9FAFB;
  /* フォーカスリング（入力・セレクト・ボタンで共通。12箇所で同じ値だったのでトークン化） */
  --focus-ring: 0 0 0 3px rgba(37,99,235,0.12);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
}

html, body {
  margin: 0; padding: 0; min-height: 100%;
  color: var(--text-primary);
  font-family: 'Inter', 'Noto Sans JP', system-ui, -apple-system, sans-serif;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

/* ===== 背景 ===== */
body {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: #fff url('/img/login/login_bg.jpg') center bottom / cover no-repeat fixed;
  overflow-x: hidden;
}

/* ===== メイン ===== */
.login-main {
  position: relative; z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 20px 24px;
  gap: 28px;
}

/* ロゴ */
.brand-block {
  display: flex; flex-direction: column; align-items: center;
}
.brand-logo {
  display: block;
  width: 380px; max-width: 82vw;
  height: auto;
  user-select: none;
  filter: drop-shadow(0 2px 10px rgba(15,23,42,0.10));
}

/* ===== カード =====
   ⚠️ max-width はログイン画面の 440px を基準にしている。
      パスワード再設定は本文が長いためページ側で 460px に上書きしている。 */
.login-card {
  width: 100%;
  max-width: 440px;
  background: var(--bg-card);
  border: 1px solid rgba(226,232,240,0.9);
  border-radius: var(--radius-lg);
  box-shadow:
    0 1px 3px rgba(15,23,42,0.04),
    0 12px 32px rgba(37,99,235,0.10),
    0 30px 60px rgba(15,23,42,0.06);
  padding: 40px 44px 36px;
  backdrop-filter: blur(6px);
}

/* ⚠️ サイズはログイン画面の「LOGIN」見出し（26px）を基準にしている。
   パスワード再設定は文章見出しなのでページ側で 22px に上書きしている。 */
.login-title {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-size: 26px; font-weight: 700; letter-spacing: 0.02em;
  color: var(--primary);
  margin-bottom: 30px;
}
.login-title i { font-size: 26px; }

/* ===== フォーム ===== */
.field { margin-bottom: 20px; }
.field-label {
  display: block;
  font-size: 13px; font-weight: 700;
  color: var(--primary);
  margin-bottom: 8px;
  letter-spacing: 0.02em;
}
.input-wrap { position: relative; }
/* 入力欄の左に置く先導アイコン（付ける場合は input に .has-lead を併せて付ける）。 */
.input-wrap > i.lead {
  font-size: 18px;
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-muted);
  pointer-events: none;
}
.field input {
  width: 100%;
  padding: 13px 14px;
  font-size: 15px;
  font-family: inherit;
  color: var(--text-primary);
  background: var(--surface-panel);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  transition: border-color .18s, box-shadow .18s, background .18s;
}
.field input.has-lead { padding-left: 42px; }
/* 表示切替ボタンと文字が重ならないように */
.field input.has-toggle { padding-right: 48px; }
.field input::placeholder { color: #C0C7D1; }
.field input:focus {
  outline: none;
  border-color: var(--primary);
  background: #fff;
  box-shadow: var(--focus-ring);
}

/* 入力エラー（全画面共通＝ラベルと入力欄の間に赤字＋該当入力枠を赤にする） */
.field input.invalid { border-color: var(--danger-text); background: var(--danger-surface); }
.field input.invalid:focus { box-shadow: 0 0 0 3px rgba(220,38,38,0.12); }
/* ⚠️ 要素は常に描画しておき .show の付け外しだけで出し入れする
   （パスワードの一致チェックのように JS が即時に出し引きするものがあるため。
     form-common.css の .field-error も同じ「初期 none」方式）。 */
.field-error {
  display: none;
  margin: 0 0 8px;
  font-size: 12px; font-weight: 600;
  color: var(--danger-text);
  letter-spacing: 0.02em;
}
.field-error.show { display: block; }
.field-error i { margin-right: 4px; }

.pw-toggle {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
  border: none; background: transparent; cursor: pointer; color: var(--text-muted);
  border-radius: 6px; transition: background .15s, color .15s;
}
.pw-toggle:hover { background: var(--surface-muted); color: var(--text-secondary); }
.pw-toggle i { font-size: 18px; }

/* ===== 主ボタン（全幅・青グラデーション） =====
   ⚠️ app-shell.css の .btn-primary（画面内の小さめボタン）とは別物なので名前を分けている。
      ログイン系ページで app-shell.css を読むことになっても衝突しない。 */
.btn-auth {
  width: 100%;
  margin-top: 8px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 14px 18px;
  background: linear-gradient(135deg, #3B82F6, var(--primary));
  color: #fff; border: none;
  border-radius: 6px;
  font-size: 16px; font-weight: 700; letter-spacing: 0.04em;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(37,99,235,0.3);
  transition: all 0.15s;
}
.btn-auth:hover {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: 0 4px 12px rgba(37,99,235,0.4);
  transform: translateY(-1px);
}
.btn-auth i { font-size: 18px; }

/* ===== 補助リンク ===== */
.help-links {
  margin-top: 22px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.help-links a {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600;
  color: var(--primary);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .15s, border-color .15s;
}
.help-links a:hover { color: var(--primary); border-color: var(--primary); }

/* ===== フッター ===== */
.login-footer {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 28px 20px 64px;
}
.login-footer .foot-logo {
  height: 42px; width: auto; max-width: 92vw;
  opacity: 0.95;
}
.login-footer .copyright {
  font-size: 11px; color: #5B6675; letter-spacing: 0.02em;
  text-align: center;
}

@media (max-width: 480px) {
  .login-card { padding: 32px 24px 28px; }
  .login-title { font-size: 22px; }
  .brand-logo { width: 250px; }
}

/* ===== 描画前フォントゲート =====
   ⚠️ CSS だけを共通化し、fonts-ready を付けるスクリプトは各ページの <head> に
      インラインで残している。外部 JS にすると読み込みに失敗したとき
      visibility:hidden が解除されず画面が永久に真っ白になるため
      （CSS 側は読めなくても「一瞬ちらつく」だけで安全側に倒れる）。 */
html:not(.fonts-ready) { visibility: hidden; }