/* 269: ログイン・初回設定・メール確認の3画面で共有する配色と部品。
   トップ（index.html・228）と会員画面に揃えた暗い地色。
   公開ページの共通CSS（style.css）は明るい配色で審査対象の8ページが使うので触らない
   ——この3画面だけがこのファイルを追加で読む。 */

body {
  background: radial-gradient(120% 100% at 50% 0%, #1a2040 0%, #0b1020 60%);
  background-attachment: fixed;
  color: #e8eaf6;
}
a { color: #a5b4fc; }
header.site, footer.site { border-color: rgba(255,255,255,.10); }
header.site { background: rgba(11,16,32,.72); backdrop-filter: blur(8px);
  position: sticky; top: 0; z-index: 5; }
.brand { color: #e8eaf6; }
header.site nav a { color: #b9bfe0; }
header.site nav a.cta, .cta { background: #4f46e5; color: #fff !important; }
footer.site .note, footer.site .links { color: #8f97bb; }
footer.site .links a { color: #a5b4fc; }

main { max-width: 560px; padding-top: 0; }
.auth-hero {
  display: flex; flex-direction: column; justify-content: center;
  min-height: 62vh; padding: 40px 0 48px;
}
.auth-hero h1 { font-size: 1.72rem; line-height: 1.5; margin: 0 0 12px; letter-spacing: .01em; }
.auth-hero .note { font-size: 1rem; color: #b9bfe0; line-height: 1.9; margin: 0 0 24px; }

/* 入力欄: **1行に1つ**。ラベルを太く大きく、欄は全幅で高さを取る（スマホで押しやすく） */
.auth-field { display: block; margin: 0 0 18px; }
.auth-field label {
  display: block; font-weight: 700; font-size: 1.02rem; color: #e8eaf6; margin: 0 0 8px;
}
.auth-field input {
  display: block; width: 100%; box-sizing: border-box;
  font-size: 1.05rem; font-family: inherit; color: #e8eaf6;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.22);
  border-radius: 12px; padding: 14px 16px; outline: none;
}
.auth-field input:focus { border-color: #a5b4fc; box-shadow: 0 0 0 3px rgba(99,102,241,.35); }
.auth-field input[readonly] { color: #b9bfe0; background: rgba(255,255,255,.03); }
.auth-field .hint { font-size: .9rem; color: #8f97bb; margin: 6px 0 0; }

.auth-actions { display: flex; flex-direction: column; gap: 14px; margin-top: 8px; }
.auth-cta, .auth-cta-sub {
  display: block; width: 100%; box-sizing: border-box; text-align: center;
  text-decoration: none; font-weight: 700; font-size: 1.02rem;
  padding: 16px 24px; border-radius: 14px; border: 0; cursor: pointer;
  font-family: inherit; line-height: 1.4;
}
.auth-cta { background: #4f46e5; color: #fff !important; }
.auth-cta:disabled { opacity: .55; cursor: default; }
.auth-cta-sub {
  background: rgba(255,255,255,.06); color: #e8eaf6 !important;
  border: 1px solid rgba(255,255,255,.22);
}
.auth-status { margin: 18px 0 0; font-size: .98rem; line-height: 1.8; }
.auth-status.ok { color: #a7f3d0; }
.auth-status.err { color: #fca5a5; }
.auth-foot { margin: 28px 0 0; font-size: .95rem; color: #b9bfe0; line-height: 1.9; }

@media print {
  body { background: #fff; color: #1f2330; }
  .auth-actions { display: none; }
}