/* ============================================================
   Social Radar — 로그인 (renew_v8)
   v8.css 토큰 위에서만 동작. 페이지 prefix: lg-
   ============================================================ */

.lg-shell {
  min-height: 100vh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 28px; padding: 40px 20px;
}

.lg-brand {
  display: flex; align-items: baseline; gap: 1px;
  font-size: 30px; font-weight: 800; letter-spacing: -0.02em;
}
.lg-brand .b1 { color: var(--ink-3); font-weight: 600; }
.lg-brand .b2 { color: var(--ink); }
.lg-brand .b3 { color: var(--brand); }

.lg-card {
  width: 100%; max-width: 400px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 32px 30px;
  display: flex; flex-direction: column; gap: 18px;
}

.lg-title { font-size: var(--fs-xl); font-weight: 700; letter-spacing: -0.015em; }
.lg-sub   { font-size: var(--fs-base); color: var(--ink-2); line-height: 1.6; margin-top: 4px; }

.lg-sso-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 13px 20px;
  background: var(--ink); color: #fff;
  font-size: var(--fs-md); font-weight: 600;
  border-radius: 10px;
  transition: background .15s;
}
.lg-sso-btn:hover { background: #1e293b; }
.lg-sso-btn svg, .lg-sso-btn i { width: 17px; height: 17px; }

.lg-caption { font-size: var(--fs-sm); color: var(--ink-3); text-align: center; line-height: 1.6; }
.lg-caption a { color: var(--brand); font-weight: 600; }
.lg-caption a:hover { text-decoration: underline; }

.lg-foot { font-size: var(--fs-xs); color: var(--ink-4); }

@media (max-width: 640px) {
  .lg-card { padding: 26px 22px; }
}

/* ---- 프리미엄 스킨 정렬 — renew_v8 각 페이지의 :root 오버라이드와 동일 톤 ---- */
:root {
  --brand: #6366f1; --brand-soft: #eeeffe; --brand-deep: #4338ca;
  --shadow-card: 0 4px 20px -2px rgba(15, 23, 42, 0.04), 0 2px 6px -1px rgba(15, 23, 42, 0.02);
  --shadow-hover: 0 12px 28px -4px rgba(15, 23, 42, 0.08), 0 4px 12px -2px rgba(15, 23, 42, 0.04);
}
.lg-card { box-shadow: var(--shadow-card); }