/* ============================================================
   로그인과 강제 비밀번호 변경 페이지 (맨 레이아웃, 접두사 `login`).
   색, 크기와 반경은 base.css 의 토큰에서 온다; 버튼, 필드와 안내는 공유 클래스다.
   ============================================================ */

.login-wall {
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--wall-bg);
  padding: var(--sp6);
}

.login-card {
  width: 100%;
  max-width: 400px;
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-top: 3px solid var(--accent);
  border-radius: var(--radius-lg);
  padding: var(--sp8);
  display: flex;
  flex-direction: column;
  gap: var(--sp5);
}

/* 브랜드 행 */
.login-brandRow {
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-logo {
  display: block;
  width: 128px;
  height: auto;
}

/* 제목 */
.login-heading {
  display: flex;
  flex-direction: column;
  gap: var(--sp1);
}

.login-title {
  font-size: var(--fs-xl);
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-primary);
}

.login-subtitle {
  font-size: var(--fs-sm);
  color: var(--text-dim);
}

/* 양식 */
.login-form {
  display: flex;
  flex-direction: column;
  gap: var(--sp4);
}

/* 버튼은 열의 flex 항목이므로 이미 양식 너비에 걸친다; 그 위의 간격만 더한다. */
.login-submit {
  margin-top: var(--sp1);
}

/* Caps Lock 힌트: pages/login.js 가 거기에 쓸 때까지 비어 있다 (그래서 접혀 있다). */
.login-capsHint {
  margin-top: calc(-1 * var(--sp2));
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--warn-text);
}

.login-capsHint:empty {
  display: none;
}

/* 실패한 로그인: 호박색 안내, 메시지 앞의 아이콘과 라벨. */
.login-error {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp2);
}

.login-error > * + * {
  margin-top: 0;
}

.login-errorIcon {
  flex-shrink: 0;
  color: var(--warn-text);
}

.login-help {
  font-size: var(--fs-sm);
  color: var(--text-dim);
  line-height: 1.5;
}

/* 강제 비밀번호 변경: 할 일, 순서대로 */
.login-steps {
  display: flex;
  flex-direction: column;
  gap: var(--sp2);
  padding-left: var(--sp5);
  font-size: var(--fs-sm);
  color: var(--text-dim);
  line-height: 1.5;
}

@media (max-width: 480px) {
  /* 언어 버튼은 오른쪽 위에 뜬다; 카드는 그 아래에서 시작한다. */
  .login-wall {
    padding: calc(var(--h-sm) + var(--sp6)) var(--sp4) var(--sp4);
    align-items: flex-start;
  }

  .login-card {
    padding: var(--sp5);
  }
}