/* MOMO login — 다크 테마 게이트 (어두운 바탕 + 골드 포인트) */
.login-body {
  min-height: 100dvh;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(227, 183, 87, .14) 0%, transparent 60%),
    var(--bg);
}

/* ── 배경 슬라이드쇼: 켄번즈(줌·팬) + 사선 슬라이스 전환 + 블러 ── */
.bg-slideshow {
  position: fixed; inset: 0; z-index: 0;
  overflow: hidden; background: var(--bg);
}
.bg-slide { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.bg-slide.prev   { opacity: 1; z-index: 1; }
.bg-slide.active { opacity: 1; z-index: 2; }
/* 켄번즈: 표시되는 동안 천천히 줌·팬. active→prev 전환 시에도 동일 애니메이션이라 끊김 없음 */
.bg-slide.active, .bg-slide.prev { animation: bg-kenburns 9.5s ease-in-out forwards; }
.bg-slide[data-kb="alt"].active, .bg-slide[data-kb="alt"].prev { animation-name: bg-kenburns-alt; }
@keyframes bg-kenburns {
  from { transform: scale(1.08) translate(1%, .6%); }
  to   { transform: scale(1.16) translate(-.8%, -.6%); }
}
@keyframes bg-kenburns-alt {
  from { transform: scale(1.16) translate(-1%, .6%); }
  to   { transform: scale(1.08) translate(.8%, -.6%); }
}

/* 사선 슬라이스: 같은 이미지를 clip-path 대각 스트립으로 잘라 시차 진입 */
.bg-slice {
  position: absolute; inset: -70px; /* 진입 이동(±44px) 시 가장자리 노출 방지 여유 */
  background-size: cover; background-position: center;
}
.bg-slide.enter .bg-slice { opacity: 0; filter: blur(14px); transform: translateY(var(--dy)); }
.bg-slide.active .bg-slice {
  opacity: 1; filter: blur(0); transform: none;
  transition: opacity .85s ease, filter .85s ease, transform 1s cubic-bezier(.22, .61, .36, 1);
  transition-delay: calc(var(--i) * 95ms);
}

/* 다크 베일: 슬라이드 배경을 눌러 로그인 카드 가독성 확보.
   카드 뒤(중앙)를 가장 어둡게, 가장자리로 갈수록 사진이 비치게. */
.bg-overlay {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(820px 560px at 50% 44%, rgba(var(--bg-rgb), .8) 0%, rgba(var(--bg-rgb), .6) 55%, rgba(var(--bg-rgb), .4) 100%),
    linear-gradient(180deg, rgba(var(--bg-rgb), .45), rgba(var(--bg-rgb), .65));
}

@media (prefers-reduced-motion: reduce) {
  .bg-slide.active, .bg-slide.prev { animation: none; }
  .bg-slide.enter .bg-slice { transform: none; filter: none; }
  .bg-slide.active .bg-slice { transition: opacity .6s ease; transition-delay: 0s; }
}

.login-wrap { position: relative; z-index: 2; width: 100%; max-width: 420px; padding: 24px; }

.login-card {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 84px 36px 32px; /* 배지가 카드 위로 겹치는 만큼 상단 여백 */
  margin-top: 110px;       /* 카드 위로 솟은 배지 공간 확보 */
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .04);
}
.login-card::before { /* 카드 상단 골드 엣지 — 사이드바 유저박스와 같은 정체성 */
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  border-radius: 14px 14px 0 0;
  background: var(--grad-gold-metal);
}

/* 투명 로고 → 카드와 같은 다크 정사각 배지에 담아 겹침 (카드 경계선을 배지가 덮음) */
.login-logo {
  position: absolute;
  top: -90px;              /* 배지(150px)의 위 60%가 카드 밖으로 */
  left: 50%;
  transform: translateX(-50%);
  width: 150px;
  height: 150px;
  padding: 14px;
  box-sizing: border-box;
  object-fit: contain;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;     /* 카드와 동일한 라운드 */
  box-shadow: 0 12px 28px rgba(0, 0, 0, .5);
  z-index: 1;              /* 카드 상단 골드 엣지(::before) 위로 */
}

.field { margin-bottom: 16px; }
.field label {
  display: block; font-size: 12px; font-weight: 600;
  color: var(--text-muted); margin-bottom: 6px;
}
.field input {
  width: 100%; padding: 11px 14px;
  border: 1px solid var(--line); border-radius: 6px;
  font-size: 14px; background: var(--bg); color: var(--text);
  outline: none; transition: border-color .15s;
}
.field input:focus { border-color: var(--gold); }

.login-error {
  display: none;
  font-size: 12px; color: var(--danger); margin: -6px 0 10px;
}
.login-error.show { display: block; }

.btn-block { width: 100%; padding: 12px; font-size: 15px; }
.btn-block + .btn-block { margin-top: 10px; }

.login-foot {
  text-align: center; margin-top: 18px;
  font-size: 11px; letter-spacing: .08em; color: var(--text-muted);
}