/* ============================================================
   auth.css — 認証系画面（C-01/C-02/C-03・パスワード再設定・アクティベーション）専用
   規約: 色・角丸・余白・影・タイポはすべて sp.css のデザイントークン（CSS変数）のみ使用。
         独自の色コード・独自トークンの新設は禁止（設計07 デザイン方針=アップル風シンプル）。
   ============================================================ */

.auth-body{
  margin:0;background:var(--sp-bg);color:var(--sp-text);
  font-family:var(--sp-font);font-size:15px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.auth-wrap{
  box-sizing:border-box;max-width:420px;min-height:100vh;
  margin:0 auto;padding:48px 16px 64px;
  display:flex;flex-direction:column;gap:24px;
}
.auth-wrap *,.auth-wrap *::before,.auth-wrap *::after{box-sizing:border-box}

/* ブランド（大学表示名） */
.auth-brand{text-align:center;padding:8px 0 0}
.auth-brand-name{
  margin:0;font-size:20px;line-height:1.4;font-weight:700;color:var(--sp-text);
}
.auth-brand-sub{margin:4px 0 0;font-size:13px;color:var(--sp-text-soft)}

/* 見出し（カード内） */
.auth-heading{margin:0 0 4px;font-size:17px;line-height:1.45;font-weight:600}
.auth-lead{margin:0 0 16px;font-size:13px;line-height:1.6;color:var(--sp-text-soft)}

/* アクション・リンク行 */
.auth-actions{margin-top:24px}
.auth-actions>*+*{margin-top:8px}
.auth-links{
  margin:16px 0 0;padding:0;list-style:none;text-align:center;
  display:flex;flex-direction:column;gap:8px;
}
.auth-links a{
  color:var(--sp-accent);text-decoration:none;font-size:13px;line-height:1.5;
}
.auth-links a:hover{color:var(--sp-accent-deep);text-decoration:underline}

/* コード入力（TOTP 6桁・バックアップコード 8桁）を中央寄せで使う */
.auth-code-field .sp-code-input{margin:0 auto}

/* QRコード表示枠（TOTP初期設定） */
.auth-qr{
  display:flex;align-items:center;justify-content:center;
  width:200px;height:200px;margin:0 auto 16px;padding:12px;
  background:var(--sp-surface);border:1px solid var(--sp-line);
  border-radius:var(--sp-radius);
}
.auth-qr svg,.auth-qr img{display:block;width:100%;height:100%}
.auth-qr-placeholder{font-size:11px;color:var(--sp-text-soft);text-align:center}

/* バックアップコード一覧（一度だけ表示） */
.auth-codes{
  list-style:none;margin:0 0 16px;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;
}
.auth-codes li{
  font-variant-numeric:tabular-nums;letter-spacing:.08em;
  font-size:15px;font-weight:600;text-align:center;
  padding:10px 8px;background:var(--sp-neutral-soft);
  border:1px solid var(--sp-line);border-radius:var(--sp-radius-sm);
}

/* 手入力用シークレット等の等幅表示 */
.auth-secret{
  display:block;overflow-wrap:anywhere;text-align:center;
  font-variant-numeric:tabular-nums;letter-spacing:.06em;
  font-size:13px;font-weight:600;
  margin:0 0 16px;padding:10px 12px;
  background:var(--sp-neutral-soft);border:1px solid var(--sp-line);
  border-radius:var(--sp-radius-sm);
}

/* 画面下部の注記 */
.auth-foot{
  margin-top:auto;padding-top:24px;text-align:center;
  font-size:11px;line-height:1.5;color:var(--sp-text-soft);
}