/* 인증 화면(로그인·2FA 등록·백업토큰) 전용.
 *
 * 라이브러리 기본 템플릿의 Bootstrap 4 레이아웃(`col-md-5 offset-md-3`)을 대체한다.
 * 색·간격은 `tokens.css` 토큰만 쓴다.
 */

/* 로그인 배경의 그라데이션 메시는 DESIGN.md 가 "로그인 화면 + 홈 환영 배너 한정" 으로
 * 범위를 좁혀 둔 서명 요소다. 데이터 화면에는 절대 깔지 않는다. */
.auth-body {
  min-height: 100vh;
  background: linear-gradient(
    100deg,
    var(--canvas-cream) 0%,
    var(--mesh-apricot) 18%,
    var(--mesh-lavender) 42%,
    var(--primary-subdued) 62%,
    var(--mesh-rose) 82%,
    var(--canvas) 100%
  );
}

.auth-main {
  display: flex;
  justify-content: center;
  padding: var(--space-section) var(--space-lg);
}

.auth-column {
  width: 100%;
  max-width: 460px;
}

.auth-panel {
  padding: var(--space-xl);
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--elevation-raised);
}

.auth-title {
  font-size: var(--fs-heading-lg);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
}

.auth-lead {
  margin-top: var(--space-sm);
  font-size: var(--fs-body-sm);
  color: var(--ink-secondary);
}

.auth-panel form {
  margin-top: var(--space-xl);
}

.auth-alt {
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--hairline-soft);
}

.auth-alt__title {
  margin-bottom: var(--space-sm);
  font-size: var(--fs-body-sm);
  color: var(--ink-mute);
}

.auth-note {
  margin-top: var(--space-lg);
  font-size: var(--fs-caption);
  color: var(--ink-mute);
}

/* --- TOTP 등록 -------------------------------------------------------------- */

.qr-frame {
  display: inline-block;
  padding: var(--space-md);
  background: var(--canvas);
  border: 1px solid var(--hairline-table);
  border-radius: var(--radius-md);
}

.qr-frame img {
  display: block;
  width: 200px;
  height: 200px;
}

.secret-reveal {
  margin-top: var(--space-lg);
  padding: var(--space-md) var(--space-lg);
  background: var(--surface-inset);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  font-size: var(--fs-body-sm);
}

.secret-reveal summary {
  cursor: pointer;
  font-weight: var(--fw-medium);
}

.secret-value {
  display: inline-block;
  margin-top: var(--space-sm);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
  word-break: break-all;
}

/* --- 백업토큰 --------------------------------------------------------------- */

.token-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

.token-list__item {
  padding: var(--space-sm) var(--space-md);
  background: var(--canvas-sunken);
  border: 1px solid var(--hairline-table);
  border-radius: var(--radius-sm);
  font-size: var(--fs-tabular);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.12em;
}

.token-summary {
  display: flex;
  gap: var(--space-lg);
  flex-wrap: wrap;
  align-items: baseline;
}

.token-summary__value {
  font-size: var(--fs-metric-lg);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--ls-display);
}

/* --- 계정 보안(기기 현황) ---------------------------------------------------- */

.security-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.security-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-lg);
  flex-wrap: wrap;
  padding: var(--space-md) var(--space-lg);
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
}

.security-row__label {
  font-size: var(--fs-body-sm);
  color: var(--ink-mute);
}

.security-row__value {
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
}