/* ============================================================================
   로그인 화면 — 신규 전산 디자인
   ============================================================================
   styles.css 의 기존 로그인 블록(시네마틱 사진 배경 + 유리 카드)은 그대로 두고,
   `body.is-beta-login` 아래에서만 덮어쓴다 — beta-shell 과 같은 방식이라
   되돌리려면 login.html 의 body 클래스와 이 <link> 만 빼면 된다.

   색은 전산 신규 헤더와 같은 값(assets/css/beta-shell.css):
     미색 #faf9f6 · 글자 #1a1815 · 보조 #6b675f · 헤어라인 #e6e3dc · 브랜드 브라운 #7a3d12
   ========================================================================== */

body.is-beta-login {
  --bl-bg: #faf9f6;
  --bl-fg: #1a1815;
  --bl-muted: #6b675f;
  --bl-line: #e6e3dc;
  --bl-accent: #7a3d12;
  --bl-accent-deep: #5b2a0a;

  min-height: 100vh;
  overflow: auto;
  background: var(--bl-bg);
  color: var(--bl-fg);
  font-family: var(--font-dashboard);
  letter-spacing: -0.03em;
}

/* 사진 배경은 마크업에서 뺐다 — 혹시 남아 있어도 그리지 않는다. */
body.is-beta-login .login-visual {
  display: none;
}

body.is-beta-login .login-shell {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;          /* 사진이 없으니 가운데로 */
  padding: 24px;
  overflow: visible;
}

body.is-beta-login .login-panel {
  position: static;
  width: 100%;
  max-width: 380px;
  padding: 0;
  background: none;
  box-shadow: none;
  border: 0;
}

body.is-beta-login .login-card {
  position: static;
  width: 100%;
  /* ⚠️ 원본은 flex + gap:22~30px 이라 아래 요소들의 margin 과 겹쳐 여백이 두 배로 벌어진다.
     간격은 각 블록의 margin 으로만 잡는다. */
  gap: 0;
  padding: 34px 30px 26px;
  border: 1px solid var(--bl-line);
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 18px 48px rgba(26, 24, 21, 0.07);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
/* 유리 카드의 광택 테두리 제거 */
body.is-beta-login .login-card::before {
  display: none;
}

/* ── 브랜드 ───────────────────────────────────────────────────────────── */
body.is-beta-login .login-brand {
  margin: 0 0 22px;
  text-align: left;
}

/* ⚠️ 원본 폼은 flex + gap:16px 이라, 높이 0 인 안내 문구도 **간격 하나를 차지한다**
   (버튼 아래가 늘 15px 벌어짐). 간격은 각 요소의 margin 으로만 잡는다. */
body.is-beta-login .login-form {
  display: block;
}

body.is-beta-login .login-brand__title {
  margin: 0;
  line-height: 1;
}

body.is-beta-login .login-brand__logo {
  height: 26px;
  width: auto;
  object-fit: contain;
  filter: none;                     /* 미색 배경이므로 원본 검정 로고 그대로 */
}

body.is-beta-login .login-brand__subtitle {
  margin: 9px 0 0;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bl-muted);
}
body.is-beta-login .login-brand__subtitle::before,
body.is-beta-login .login-brand__subtitle::after {
  display: none;
}

body.is-beta-login .login-brand__system {
  margin: 3px 0 0;
  padding: 0;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--bl-muted);
}
body.is-beta-login .login-brand__system::before {
  display: none;                    /* 앞의 장식 선 제거 */
}

/* ── 입력 ─────────────────────────────────────────────────────────────── */
body.is-beta-login .login-form-area,
body.is-beta-login .auth-box {
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}

body.is-beta-login .login-field {
  margin-bottom: 14px;
}
/* 마지막 칸 아래는 폼 자체의 간격(.login-form gap)이 맡는다 — 겹치면 버튼이 멀어 보인다. */
body.is-beta-login .login-step .login-field:last-child {
  margin-bottom: 0;
}

body.is-beta-login .login-field label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.79rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--bl-muted);
  text-transform: none;
}

body.is-beta-login .login-field input {
  width: 100%;
  height: 46px;
  padding: 0 13px;
  border: 1px solid var(--bl-line);
  border-radius: 11px;
  background: #ffffff;
  color: var(--bl-fg);
  font-family: inherit;
  font-size: 0.94rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  box-shadow: none;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}
body.is-beta-login .login-field input::placeholder {
  color: #b4ada2;
}
body.is-beta-login .login-field input:focus {
  outline: none;
  border-color: var(--bl-accent);
  box-shadow: 0 0 0 3px rgba(122, 61, 18, 0.12);
}
body.is-beta-login .login-field input:disabled {
  background: #f4f1eb;
  color: #a8a094;
}

/* ── 안내 문구 ────────────────────────────────────────────────────────── */
/* 안내 문구 — 평소엔 **자리를 차지하지 않는다**(높이 0). 내용이 생기면 스윽 열리며 나타난다.
   display:none 은 전환이 안 걸리므로 max-height/opacity 로 여닫는다.
   app.js setMessage 가 textContent='' 로 비우므로 :empty 로 정확히 판정된다. */
body.is-beta-login .form-message {
  margin: 0;
  max-height: 0;
  min-height: 0;
  overflow: hidden;
  opacity: 0;
  font-size: 0.81rem;
  line-height: 1.5;
  color: var(--bl-muted);
  transition: max-height 0.3s ease, opacity 0.24s ease, margin-top 0.3s ease;
}
body.is-beta-login .form-message:not(:empty) {
  margin-top: 12px;
  max-height: 8em;
  opacity: 1;
}
body.is-beta-login .form-message[data-state="error"] {
  color: #b03d21;
}
body.is-beta-login .form-message[data-state="success"] {
  color: #1d8f51;
}
body.is-beta-login .form-message[data-state="info"] {
  color: var(--bl-accent);
}

/* ── 버튼 ─────────────────────────────────────────────────────────────── */
body.is-beta-login .login-actions {
  display: flex;
  gap: 8px;
  margin-top: 22px;                 /* 폼 gap 을 없앴으므로 여기서 간격을 잡는다 */
}

body.is-beta-login .login-button {
  flex: 1 1 auto;
  position: relative;
  height: 48px;
  padding: 0 16px;
  border: 0;
  border-radius: 12px;
  background: var(--bl-accent);
  color: #faf9f6;
  font-family: inherit;
  font-size: 0.94rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  box-shadow: none;
  transition: background-color 0.16s ease;
}
body.is-beta-login .login-button:hover:not(:disabled) {
  background: var(--bl-accent-deep);
}
body.is-beta-login .login-button:disabled {
  background: #c9b6a4;
  color: #f6f1ea;
}
/* 원본의 광택·화살표 장식 제거 */
body.is-beta-login .login-button::after,
body.is-beta-login .login-button::before {
  content: none;
}

/* 로딩 — 글자를 숨기고 도는 링만 */
body.is-beta-login .login-button.is-loading {
  color: transparent;
}
body.is-beta-login .login-button.is-loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border: 2px solid rgba(250, 249, 246, 0.35);
  border-top-color: #faf9f6;
  border-radius: 50%;
  animation: bl-spin 0.7s linear infinite;
}
@keyframes bl-spin {
  to { transform: rotate(360deg); }
}

body.is-beta-login .login-reset-button {
  flex: 0 0 auto;
  height: 48px;
  padding: 0 16px;
  border: 1px solid var(--bl-line);
  border-radius: 12px;
  background: #ffffff;
  color: var(--bl-muted);
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  box-shadow: none;
}
body.is-beta-login .login-reset-button:hover {
  border-color: #d5d0c6;
  background: #f4f1eb;
  color: var(--bl-fg);
}

/* ── 아래 안내 ────────────────────────────────────────────────────────── */
body.is-beta-login .login-card__foot {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--bl-line);
}

body.is-beta-login .login-card__support {
  margin: 0;
  font-size: 0.76rem;
  line-height: 1.6;
  color: var(--bl-muted);
  text-align: left;
}

/* ── 폰 ──────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  body.is-beta-login .login-shell {
    padding: 16px;
    align-items: flex-start;
    padding-top: 12vh;
  }
  body.is-beta-login .login-card {
    padding: 28px 22px 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.is-beta-login .login-button.is-loading::after {
    animation-duration: 2s;
  }
}

/* ── '이 기기 30일 기억' ──────────────────────────────────────────────────
   인증번호 칸 바로 아래. 체크한 기기만 다음부터 문자 단계를 건너뛴다(server.js 기기 기억 주석). */
.is-beta-login .login-remember {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 12px;
  font-size: 0.82rem;
  color: var(--beta-muted, #6b675f);
  cursor: pointer;
  user-select: none;
}
.is-beta-login .login-remember input {
  width: 18px;
  height: 18px;
  flex: none;
  accent-color: var(--beta-accent, #7a3d12);
  cursor: pointer;
}
/* 인증 단계가 아닐 때는 이 줄도 함께 접힌다(부모 .login-step 이 숨는다). */