/*
  로그인 계열 화면(로그인 · 2단계 인증 · 등록 · 대기).

  색을 직접 적지 않는다. centrox.css 가 정한 --cx-* 변수만 쓴다 — 설치할 때 고른 테마가
  여기에도 그대로 걸려야 한다. 로그인 화면만 예전 색으로 남으면 그것이 가장 먼저 보인다.
*/

.cx-auth {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  /* 주소창이 접히는 모바일에서 100vh 는 화면보다 크다. 지원하는 브라우저는 이 값을 쓴다. */
  min-height: 100dvh;
  padding: 24px 16px;
  background: #f5f7f8;
}

.cx-auth-box {
  width: 100%;
  max-width: 380px;
  padding: 32px 28px;
  background: var(--cx-bg);
  border: 1px solid var(--cx-line);
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
}

/* 등록 화면은 QR 과 안내 절차가 들어가 좁으면 답답하다. */
.cx-auth-wide { max-width: 460px; }

/* ── 머리 ─────────────────────────────────────────────────────────────────── */
.cx-auth-brand { text-align: center; margin-bottom: 22px; }
.cx-auth-title { font-size: 20px; font-weight: 700; color: var(--cx-primary); }
.cx-auth-desc { margin-top: 6px; font-size: 13px; color: var(--cx-muted); }

/* ── 알림 ─────────────────────────────────────────────────────────────────── */
/*
  자리를 미리 잡아 두지 않는다. 문구가 뜰 때 아래 입력칸이 밀리는 편이,
  빈 상자가 늘 떠 있어 '무언가 잘못됐나' 하고 읽게 만드는 것보다 낫다.
*/
.cx-auth-msg { display: none; }
.cx-auth-msg.on {
  display: block;
  margin-bottom: 14px;
  padding: 10px 12px;
  border-radius: 4px;
  font-size: 13px;
  line-height: 1.5;
}
/* 색만으로 구별하지 않는다 — 색약인 사람에게는 같은 회색이다. 문구가 늘 함께 있다. */
.cx-auth-msg.error { background: #fdecea; border: 1px solid #f3c3bd; color: var(--cx-danger); }
.cx-auth-msg.warn  { background: #fff6e5; border: 1px solid #f0d9a8; color: #8a5a00; }
.cx-auth-msg.info  { background: #e6f0fb; border: 1px solid #b9d5f2; color: var(--cx-primary-dark); }

/* ── 입력 ─────────────────────────────────────────────────────────────────── */
.cx-auth-row { margin-bottom: 14px; }
.cx-auth-row label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 5px; }
.cx-auth-row input {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--cx-line);
  border-radius: 4px;
  /*
    16px 미만이면 iOS 사파리가 입력칸을 누를 때 화면을 확대한다. 확대된 화면은
    되돌아오지 않아, 로그인 뒤 모든 화면이 잘려 보인다.
  */
  font-size: 16px;
}
.cx-auth-row input:focus { outline: 2px solid var(--cx-accent); outline-offset: -1px; border-color: var(--cx-accent); }

/* 인증 코드는 숫자 여섯 자리다. 넓게 띄워 놓아야 잘못 친 자리가 눈에 띈다. */
#code { letter-spacing: 6px; text-align: center; font-size: 20px; font-family: ui-monospace, "Consolas", monospace; }

.cx-auth-help { margin: 6px 0 0; font-size: 12px; color: var(--cx-muted); }

.cx-auth-submit { width: 100%; padding: 10px; font-size: 14px; margin-top: 4px; }
.cx-auth-submit[disabled] { opacity: .6; cursor: default; }

.cx-auth-back { margin: 14px 0 0; text-align: center; font-size: 13px; }
.cx-auth-back a { color: var(--cx-muted); text-decoration: none; }
.cx-auth-back a:hover { color: var(--cx-primary); text-decoration: underline; }

.cx-auth-note { margin: 18px 0 0; text-align: center; font-size: 12px; color: var(--cx-muted); }
.cx-auth-note.warn { color: #8a5a00; }

.cx-auth-foot { margin-top: 18px; text-align: center; font-size: 12px; color: var(--cx-muted); }

/* ── 등록(QR) ─────────────────────────────────────────────────────────────── */
.cx-auth-qr { text-align: center; }

/* ── 대기 ─────────────────────────────────────────────────────────────────── */
.cx-auth-queue { text-align: center; margin-bottom: 18px; }
.cx-auth-queue-pos { font-size: 44px; font-weight: 700; color: var(--cx-primary); line-height: 1.2; }
.cx-auth-queue-unit { font-size: 16px; font-weight: 400; color: var(--cx-muted); }

/* ── 처리 중 가림막 ───────────────────────────────────────────────────────── */
/*
  성공했을 때는 걷지 않는다 — 다음 화면이 뜰 때까지 덮여 있어야 그 사이에 다른 것을
  누르지 못한다. 특히 인증 코드는 한 번 쓰면 끝이라, 두 번 눌러 두 번 나가면
  두 번째가 '이미 쓴 코드' 로 실패한다.
*/
.cx-auth-busy {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 50;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: rgba(255, 255, 255, .82);
  color: var(--cx-fg);
  font-size: 14px;
}
.cx-auth-busy.on { display: flex; }
.cx-auth-spinner {
  width: 34px; height: 34px;
  border: 3px solid var(--cx-line);
  border-top-color: var(--cx-accent);
  border-radius: 50%;
  animation: cx-spin .8s linear infinite;
}
@keyframes cx-spin { to { transform: rotate(360deg); } }

/* 움직임을 줄여 달라고 한 사람에게는 돌리지 않는다. 어지럼증을 유발한다. */
@media (prefers-reduced-motion: reduce) {
  .cx-auth-spinner { animation: none; border-top-color: var(--cx-accent); }
}

@media (max-width: 420px) {
  .cx-auth { padding: 0; background: var(--cx-bg); }
  .cx-auth-box { max-width: none; border: 0; border-radius: 0; box-shadow: none; padding: 28px 20px; }
}