/* ============================================================
   화면8 · 로그인 화면 전용 스타일 (design-guide.md 6-19절)
   사이드바·상단바 없는 유일한 화면 — 모바일 우선(프론트 관점)으로 작성하되,
   카드 자체는 데스크탑에서도 폭 고정(400px)이라 좁은 화면(<640px)만 별도 대응합니다.
   ============================================================ */

.login-page.login-page {
  /* body 전체를 채우는 중앙 정렬 레이아웃(공통 앱 프레임 .app을 쓰지 않는 유일한 화면) */
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  padding: 24px;
}

.login-card {
  width: 400px;
  max-width: 100%;
  background: var(--surface);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card-hover);
  padding: 36px 34px;
}

.login-card__brand { text-align: center; margin-bottom: 28px; }
.login-card__mark {
  width: 44px; height: 44px; border-radius: 12px; background: var(--primary-500);
  display: flex; align-items: center; justify-content: center; margin: 0 auto 14px;
  font: 700 18px var(--font-num); color: #fff;
}
.login-card__title { margin: 0; font: 700 19px var(--font-num); color: var(--text-strong); }
.login-card__subtitle { margin: 4px 0 0; font-size: 12px; color: var(--text-muted); }

.login-card__form .field { margin-bottom: 16px; }

.login-card__cred-error {
  display: flex; align-items: center; gap: 6px;
  font: 500 12.5px var(--font-kr); color: var(--danger-text);
  margin: -4px 0 14px;
}
.login-card__cred-error i { font-size: 14px; }

.login-card__checkbox { margin: 2px 0 0; }

.login-card__submit {
  width: 100%; margin-top: 22px;
  padding: 12px 22px; font: 700 14px var(--font-kr);
  justify-content: center;
}
.login-card__submit .spinner { display: none; }

/* 모바일(<640px, design-guide 8장 브레이크포인트) — 카드 좌우 20px 여백(6-19절 확정값), 부모 padding으로 구현 */
@media (max-width: 640px) {
  .login-page.login-page { padding: 20px; }
  .login-card { width: 100%; padding: 30px 24px; }
}