/* 로그인 화면(/login) — 정본 screens/p2-DraftLogin4c.html (캔버스 c1c3, TICKET-755, PRD-050/AC-23)
   탑바(×)는 부품 board-comp-back-row.css, 푸터는 틀이 낸다. 여기는 배치만 한다. 값은 board-tokens.css 토큰만. */

/* 감싸는 요소 — `pg`를 쓰지 않는다(토스트 조건, ADR-1071 결정 14). 값은 board.css `.pg`와 같다. */
.login-pg { width: 100%; min-height: 100vh; min-height: 100dvh; box-sizing: border-box; background: var(--board-bg); color: var(--board-text); font-family: var(--board-font-body); display: flex; flex-direction: column; }
.login-in { padding: 0 var(--board-login-pad-x); display: flex; flex-direction: column; flex: 1; min-height: 0; }
.login-spacer { flex: 1; }
.login-hero { display: flex; flex-direction: column; gap: var(--board-login-hero-gap); padding-top: var(--board-login-hero-pad-top); }
.login-hero__mark { width: var(--board-login-mark-w); height: var(--board-login-mark-h); }
.login-tagline { font-family: var(--board-font-body); font-weight: 700; font-size: var(--board-login-tagline-size); line-height: var(--board-login-tagline-lh); letter-spacing: var(--board-login-tagline-spacing); color: var(--board-text-dim); word-break: keep-all; }
.login-tagline__word { font-family: var(--board-font-mono); font-weight: 700; font-size: var(--board-login-word-size); letter-spacing: var(--board-login-word-spacing); color: var(--board-text); }
.login-tagline__team { color: var(--board-accent); }

/* 오류 배너 — 정본에 없음. 옛 `.info-box.warn` 모양을 토큰으로 옮겨 유지 */
.login-error { margin: 0 0 var(--board-login-hero-gap); padding: var(--board-login-hero-gap); border-radius: var(--board-radius-14); background: var(--board-login-error-bg); color: var(--board-danger-text); border: 1px solid var(--board-danger); font-size: var(--board-font-size-15); line-height: 1.5; word-break: keep-all; }

.login-actions { display: flex; flex-direction: column; gap: var(--board-login-actions-gap); }
.login-btn { box-sizing: border-box; gap: var(--board-login-btn-gap); font-size: var(--board-font-size-15); }
.login-btn svg { width: var(--board-login-btn-icon); height: var(--board-login-btn-icon); }
body.board-body a.login-btn--kakao,
body.board-body a.login-btn--kakao:hover { background: var(--board-kakao-bg); color: var(--board-kakao-text); text-decoration: none; }
body.board-body a.login-btn--kakao:hover { filter: brightness(var(--board-login-btn-hover)); }
body.board-body a.login-btn--google,
body.board-body a.login-btn--google:hover { background: var(--board-google-bg); color: var(--board-google-text); border: 1px solid var(--board-google-border); text-decoration: none; }
.login-btn__g { font-family: var(--board-google-mark-font); font-weight: 900; font-size: var(--board-google-mark-size); line-height: 1; color: var(--board-google-mark); }

.login-consent { margin: var(--board-login-consent-mt) 0 var(--board-login-consent-mb); font-size: var(--board-font-size-11); line-height: var(--board-login-consent-lh); color: var(--board-text-faint); word-break: keep-all; white-space: pre-line; text-align: center; }
body.board-body .login-consent a,
body.board-body .login-consent a:hover { color: inherit; text-decoration: underline; text-underline-offset: var(--board-login-underline-offset); }
/* 푸터: 정본 .foot은 본문 밖 아래 padding 0 0 20 */
.login-in .board-info-notice { padding: 0 0 var(--board-login-foot-bottom); }