/* assets/login.css — ログイン画面（中央カード）。theme.css の変数を利用。 */
.login-wrap{
  min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  padding:24px;
}
.login-card{
  width:100%; max-width:400px;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--bg);
  padding:32px 28px;
  box-shadow:0 8px 30px rgba(15,23,42,.06);
}
.login-brand{
  display:flex; align-items:center; gap:10px;
  margin-bottom:24px;
  font-family:'Space Grotesk', system-ui, sans-serif;
  font-weight:600; font-size: var(--fs-lead); color:var(--ink);
}
.login-brand img{ width:34px; height:34px; object-fit:contain; }
.login-title{
  font-family:'Space Grotesk', system-ui, sans-serif;
  font-size:22px; font-weight:600; color:var(--ink);
  margin:0 0 6px;
}
.login-sub{ font-size: var(--fs-small); color:var(--ink-soft); line-height:1.6; margin:0 0 18px; }
.login-input{
  width:100%; box-sizing:border-box;
  padding:11px 13px; border-radius:8px;
  border:1px solid var(--border-strong);
  font-size: var(--fs-body); font-family:inherit;
  margin-bottom:12px;
}
.login-input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.login-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:100%; box-sizing:border-box;
  padding:11px 16px; border-radius:8px; border:none;
  background:var(--accent); color:#fff;
  font-size: var(--fs-body); font-weight:600; cursor:pointer;
  text-decoration:none;
}
.login-btn:hover{ filter:brightness(1.06); }
.login-btn:disabled{ opacity:.6; cursor:default; }
/* 「Google で続行」ボタン（白背景・枠線・公式 G ロゴ） */
.login-google-btn{
  display:flex; align-items:center; justify-content:center; gap:10px;
  width:100%; box-sizing:border-box;
  padding:11px 16px; border-radius:8px;
  border:1px solid var(--border-strong); background:#fff; color:var(--ink);
  font-size: var(--fs-body); font-weight:600; cursor:pointer; font-family:inherit;
}
.login-google-btn:hover{ background:#f8fafc; }
.login-google-btn:disabled{ opacity:.6; cursor:default; }
.login-google-btn svg{ width:18px; height:18px; flex:none; }
/* 区切り「または」 */
.login-divider{
  display:flex; align-items:center; gap:12px;
  margin:16px 0; color:var(--ink-mute); font-size: var(--fs-caption);
}
.login-divider::before, .login-divider::after{
  content:""; flex:1 1 auto; height:1px; background:var(--border);
}
.login-link{
  display:block; width:100%; margin-top:12px;
  background:none; border:none; color:var(--ink-soft);
  font-size: var(--fs-caption); cursor:pointer; font-family:inherit;
  text-align:center;
}
.login-link:hover{ color:var(--accent); }
.login-err{ color:var(--danger); font-size: var(--fs-caption); margin-top:8px; min-height:18px; }
.login-hint{ font-size: var(--fs-caption); color:var(--ink-mute); margin:12px 0 0; }
.login-hint a{ color:var(--accent); }
/* アプリ内ブラウザ(LINE/Instagram等)向け注意バンド。Google は webview 内 OAuth を
   disallowed_useragent で一律ブロックするため、メール/外部ブラウザへ誘導する。 */
.login-notice{
  font-size: var(--fs-caption); line-height:1.6; color:var(--ink);
  background:var(--warn-soft); border:1px solid var(--warn-border); border-radius:10px;
  padding:10px 12px; margin:0 0 14px;
}
.login-google-btn.is-disabled{ opacity:.5; }