/* 로그인 화면 (#97). tokens.css 의 토큰만. 접두사 lg- */
body.login { margin: 0; min-height: 100vh; background: var(--color-bg); color: var(--color-fg);
  font-family: var(--font-family-base); font-size: var(--font-size-base); }
.lg-main { max-width: 400px; margin: 0 auto; padding: 12vh var(--space-4) var(--space-6); display: flex; flex-direction: column; align-items: center; }
.lg-brand { font-size: 1.6rem; font-weight: 800; color: var(--color-accent); text-decoration: none; }
.lg-tagline { margin: var(--space-1) 0 var(--space-5); color: var(--color-fg-muted); font-size: var(--font-size-sm); text-align: center; }
.lg-card { width: 100%; box-sizing: border-box; background: var(--color-bg-elevated); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: var(--space-5); }
.lg-card h1 { margin: 0 0 var(--space-4); font-size: var(--font-size-xl); }
.lg-card .ui-btn { width: 100%; padding: var(--space-3); font-size: var(--font-size-lg); }
.lg-notice { margin: 0 0 var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md);
  background: var(--color-info-bg); color: var(--color-fg); font-size: var(--font-size-sm); }
.lg-error { margin: 0; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md);
  background: var(--color-error-bg); color: var(--color-error); font-size: var(--font-size-sm); }
.lg-help { margin: var(--space-4) 0 0; color: var(--color-fg-muted); font-size: var(--font-size-sm); }
.lg-foot { margin-top: var(--space-6); width: 100%; }

/* 구글 로그인(#111) */
.lg-google {
  display: flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: var(--space-3); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md);
  background: var(--color-bg-elevated); color: var(--color-fg); font-weight: 600; text-decoration: none;
}
.lg-google:hover { background: var(--color-bg-subtle); }
.lg-google:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.lg-google-g {
  display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px;
  border-radius: 50%; background: var(--color-accent); color: var(--color-fg-inverse); font-size: var(--font-size-sm);
}
.lg-or { text-align: center; color: var(--color-fg-muted); font-size: var(--font-size-sm); margin: var(--space-3) 0; }
.lg-google { margin-top: var(--space-3); }