/* ============================================================
   Obscura — auth.css（認証系画面 共通）
   ログイン(SC-02) / 新規会員登録(SC-06) / 会員情報(SC-04) で共用。
   common.css の後に読み込む前提（トークン・ボタン・フォーム部品は common 側）。
   暗室（チャンバー）の上に、投影された光のような paper カードを中央配置。
   ============================================================ */

.auth {
  background: radial-gradient(120% 120% at 50% 0%, var(--ink-2), var(--ink) 62%);
  color: var(--text-inv);
  min-height: calc(100vh - 66px); /* ヘッダー分を差し引く */
  display: flex; align-items: center; justify-content: center;
  padding: 56px 24px;
}

.auth__card {
  width: 100%; max-width: 460px;
  background: var(--paper);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 40px 36px;
  box-shadow: 0 24px 60px -28px rgba(0, 0, 0, 0.55);
}

.auth__brand { display: flex; justify-content: center; margin-bottom: 18px; }
.auth__brand .brand__mark { color: var(--lens); }

.auth__head { text-align: center; margin-bottom: 26px; }
.auth__title { font-size: 1.7rem; margin-bottom: 8px; }
.auth__lead { color: var(--text-mute); font-size: 0.92rem; }

/* 誘導されてきた場合の案内（例: 未ログインでアップロード → next=upload） */
.auth__notice {
  display: flex; gap: 10px; align-items: flex-start;
  background: rgba(200, 153, 63, 0.08);
  border: 1px solid rgba(200, 153, 63, 0.3);
  border-radius: var(--radius-sm);
  padding: 12px 14px; margin-bottom: 22px;
  font-size: 0.86rem; color: var(--text);
}
.auth__notice svg { flex: none; color: var(--lens); margin-top: 2px; }

/* 完了メッセージ（会員情報の更新成功など） */
.auth__success {
  background: rgba(120, 200, 120, 0.1);
  border: 1px solid rgba(120, 200, 120, 0.4);
  color: #3f7a40;
  border-radius: var(--radius-sm);
  padding: 12px 14px; margin-bottom: 20px;
  font-size: 0.88rem;
}

.auth__submit { margin-top: 6px; }

/* カード（明るい面）に置くline/ghostボタンは暗文字に上書き（既定は暗背景用） */
.auth__card .btn--line { color: var(--text); border-color: var(--line); }
.auth__card .btn--line:hover { border-color: var(--lens); color: var(--lens); background: rgba(200, 153, 63, 0.06); }
.auth__card .btn--ghost { color: var(--text-mute); }
.auth__card .btn--ghost:hover { color: var(--text); background: var(--paper-2); }

/* 規約同意チェック（新規登録） */
.consent {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 0.88rem; color: var(--text); line-height: 1.6; cursor: pointer;
}
.consent input[type="checkbox"] {
  flex: none; width: 18px; height: 18px; margin-top: 2px;
  accent-color: var(--lens); cursor: pointer;
}
/* ラベル内の「利用規約」「プライバシーポリシー」＝クリックでチェックONになるテキスト */
.consent__doc { color: var(--lens); text-decoration: underline; text-underline-offset: 2px; }
/* 本文を確認するための別リンク（チェックには影響しない） */
.consent__links { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: -8px 0 0; padding-left: 28px; }
.consent__links a { font-size: 0.8rem; color: var(--text-mute); text-decoration: none; }
.consent__links a:hover { color: var(--lens); text-decoration: underline; }

/* 下部の補助導線（ログインへ／登録へ） */
.auth__alt {
  margin-top: 22px; padding-top: 20px;
  border-top: 1px solid var(--line);
  text-align: center; font-size: 0.9rem; color: var(--text-mute);
}
.auth__alt a { color: var(--lens); font-weight: 600; }
.auth__alt a:hover { color: var(--text); text-decoration: underline; }

@media (max-width: 480px) {
  .auth__card { padding: 32px 22px; }
}
/* ---- Googleログイン/登録（OAuth） ---- */
/* 「または」区切り線 */
.oauth { margin-top: 18px; }
.oauth__divider {
  display: flex; align-items: center; gap: 12px;
  margin: 4px 0 16px; color: var(--text-mute); font-size: 0.82rem;
}
.oauth__divider::before, .oauth__divider::after {
  content: ""; flex: 1; height: 1px; background: var(--line);
}
/* Google公式ガイドラインに沿った白ボタン */
.btn-google {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 12px 16px; box-sizing: border-box;
  background: #ffffff; color: #3c4043;
  border: 1px solid #dadce0; border-radius: 10px;
  font-size: 0.95rem; font-weight: 600; text-decoration: none;
  transition: background .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.btn-google:hover { background: #f7f8f8; border-color: #d2d5d9; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.btn-google:active { background: #eef0f1; }
.btn-google__icon { flex: 0 0 auto; }