/* ============================================================
   로그인 화면 — 퍼포먼스웨이컨설팅 디자인 시스템 적용
   값은 직접 쓰지 않고 tokens.css 의 변수만 사용한다.
   ============================================================ */

/* 디자인 시스템 CSS 에는 box-sizing 리셋이 없다.
   리셋이 없으면 .field 가 "너비 100% + 좌우 여백 + 테두리" 로 계산되어
   카드 밖으로 밀려난다. 공용 파일을 건드리지 않도록 로그인 화면 안에서만 적용한다. */
.login,
.login *,
.login *::before,
.login *::after {
  box-sizing: border-box;
}

.login {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: var(--spacing-7);
  background: var(--color-secondary-80);
}

/* ---------- 카드 ---------- */
.login__card {
  width: 100%;
  max-width: 420px;
  padding: var(--spacing-9) var(--spacing-8) var(--spacing-8);
  border-radius: var(--radius-6);
  background: var(--color-bg-base);
  box-shadow: var(--shadow-normal);
}

/* ---------- 로고 영역 ---------- */
.login__brand {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--spacing-9);
}

.login__logo {
  width: auto;
  max-width: 100%;
  height: 44px;
}

/* ---------- 제목 ---------- */
.login__title {
  margin: 0 0 var(--spacing-4);
  padding-bottom: var(--spacing-4);
  border-bottom: 1px solid var(--color-border-default);
  font-size: var(--text-title-md-size);
  font-weight: var(--text-title-md-weight);
  line-height: var(--text-title-md-line-height);
  letter-spacing: var(--text-title-md-letter-spacing);
  color: var(--color-text-main);
}

/* ---------- 입력 ---------- */
.login__form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  margin-top: var(--spacing-7);
}

/* components.css 의 .field 를 로그인 폭에 맞게 넓힌다 */
.login .field {
  display: flex;
  width: 100%;
  height: 48px;
  border-radius: var(--radius-4);
}

.login .field__control {
  font-size: var(--text-body-md-size);
  font-weight: var(--text-body-md-weight);
}

/* 비밀번호 보기 토글 */
.login__reveal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-text-placeholder);
  cursor: pointer;
}

.login__reveal:hover { color: var(--color-text-detail); }
.login__reveal:focus-visible {
  outline: 2px solid var(--color-primary-30);
  outline-offset: 2px;
  border-radius: var(--radius-2);
}

.login__reveal svg { width: 20px; height: 20px; }

/* 비밀번호가 보이는 상태에서는 눈에 사선을 겹쳐 표시 */
.login__reveal .login__reveal-slash { display: none; }
.login__reveal.is-on { color: var(--color-primary-50); }
.login__reveal.is-on .login__reveal-slash { display: block; }

/* ---------- 로그인 버튼 ---------- */
.login .btn--submit {
  width: 100%;
  height: 52px;
  margin-top: var(--spacing-4);
  border-radius: var(--radius-4);
  font-size: var(--text-label-lg-size);
  font-weight: var(--text-label-lg-weight);
}

/* ---------- PDA 체크박스 (평소 숨김, 필요 시 노출) ---------- */
.login__option {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  margin-top: var(--spacing-5);
  font-size: var(--text-body-md-14-regular-size);
  font-weight: var(--text-body-md-14-regular-weight);
  color: var(--color-text-detail);
}

.login__option input { accent-color: var(--color-primary-50); }

/* 단말 진단 정보(?ua=1) */
.login__debug {
  margin-top: var(--spacing-4);
  font-size: var(--text-body-md-14-regular-size);
  color: var(--color-text-detail);
  word-break: break-all;
}

/* ---------- 좁은 화면 ---------- */
@media (max-width: 480px) {
  .login { padding: var(--spacing-5); }
  .login__card { padding: var(--spacing-8) var(--spacing-6) var(--spacing-7); }
  .login__brand { margin-bottom: var(--spacing-8); }
}