/* Paperlogy — 로그인 타이틀 전용(이 페이지에서만 사용) */
@font-face {
  font-family: 'Paperlogy';
  src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-3Light.woff2') format('woff2');
  font-weight: 300; font-display: swap;
}
@font-face {
  font-family: 'Paperlogy';
  src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-7Bold.woff2') format('woff2');
  font-weight: 700; font-display: swap;
}

/* 모바일/웹뷰 공통 리셋 — iOS 자동 확대·탭 하이라이트·스크롤 바운스 방지 */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; -webkit-tap-highlight-color: transparent; overscroll-behavior: none; }
* { -webkit-font-smoothing: antialiased; }

/* ── 배경: bg.png 풀블리드, 카드 중앙 정렬 ─────────────────────────────── */
.login-page {
  position: relative;
  min-height: 100vh;         /* 폴백 */
  min-height: 100svh;        /* 모바일 주소창 고려(작은 뷰포트) */
  min-height: 100dvh;        /* 동적 뷰포트 — iOS/Android 최신 브라우저 */
  display: grid;
  place-items: center;
  /* 노치/홈바 안전영역 + 기본 여백 */
  padding: max(var(--space-5), env(safe-area-inset-top))
           max(var(--space-5), env(safe-area-inset-right))
           max(var(--space-5), env(safe-area-inset-bottom))
           max(var(--space-5), env(safe-area-inset-left));
  background: url('../img/login/bg.png') center / cover no-repeat;
}
/* 배경 전용 어두운 오버레이 — 카드보다 뒤(z-index:0)라 카드엔 영향 없음 */
.login-page::before {
  content: "";
  position: absolute;
  inset: 0;
  /* 균일 다크 + 중앙은 밝고 가장자리는 어두운 비네트 → 카드 뒤가 깊어 보이게 */
  background:
    radial-gradient(120% 90% at 50% 45%,
      rgba(20, 20, 32, 0.30) 0%,
      rgba(15, 14, 28, 0.55) 70%,
      rgba(10, 9, 20, 0.72) 100%);
  z-index: 0;
  pointer-events: none;
}

/* ── input_wrap (485:1404): 흰 카드 ───────────────────────────────────── */
.login-card {
  position: relative;
  z-index: 1;                                       /* 오버레이 위로 */
  background: var(--color-surface);
  border-radius: var(--radius-lg);                 /* 10px */
  padding: 40px;                                    /* Figma input_wrap p-40 */
  /* 다층 그림자로 배경과 분리감(깊이) 확보:
     원거리 앰비언트 + 근거리 키라이트 + Figma 기본 글로우 + 상단 하이라이트 */
  box-shadow:
    0 24px 48px -16px rgba(15, 14, 35, 0.55),      /* 멀리 퍼지는 앰비언트 */
    0 10px 22px -12px rgba(15, 14, 35, 0.40),      /* 중간 거리 */
    0 2px 6px rgba(15, 14, 35, 0.22),              /* 접지 그림자 */
    0 0 10px rgba(59, 56, 80, 0.24),               /* Figma 원본 글로우 */
    inset 0 1px 0 rgba(255, 255, 255, 0.9);        /* 상단 엣지 하이라이트 */
  width: min(380px, 100%);                          /* 300 컨테이너 + 좌우 40 패딩, 소형 화면서 축소 */
}

/* input_container (485:1405): 세로 40px 간격, 데스크톱 300px → 모바일 유동 */
.login-container {
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: center;
  width: 100%;
}

/* ── 브랜드 헤더 (485:1559) ───────────────────────────────────────────── */
.login-brand { display: flex; flex-direction: column; gap: var(--space-2); align-items: center; }
.login-brand__row { display: flex; gap: var(--space-2); align-items: center; justify-content: center; }
.login-brand__label {
  font-family: 'Paperlogy', var(--font-sans);
  font-weight: 300;
  color: var(--color-primary);
  font-size: var(--text-sm);                       /* 14px */
  letter-spacing: -0.35px;
  line-height: normal;
}
.login-brand__link { width: 13px; height: 6.5px; display: block; }
.login-brand__title {
  font-family: 'Paperlogy', var(--font-sans);
  font-weight: 700;
  color: var(--color-primary);
  font-size: 26px;
  letter-spacing: -0.65px;
  line-height: normal;
  margin: 0;
}

/* ── input_box (485:1407): 세로 24px 간격 ─────────────────────────────── */
.login-box { display: flex; flex-direction: column; gap: var(--space-6); align-items: center; width: 100%; }
.login-contents { display: flex; flex-direction: column; gap: var(--space-3); align-items: flex-start; width: 100%; }
.login-inputs { display: flex; flex-direction: column; gap: var(--space-3); align-items: flex-start; width: 100%; }

/* 개별 필드 (485:1537 / 485:1540): 라벨 + 인풋 */
.field { display: flex; flex-direction: column; gap: var(--space-2); align-items: flex-start; width: 100%; }
.field__label {
  padding: 0 var(--space-3);
  font-size: var(--text-xs);                       /* 13px */
  color: var(--color-text-muted);                  /* #797979 */
  letter-spacing: -0.325px;
  line-height: normal;
}
.field__input {
  width: 100%;
  height: 48px;
  padding: 15px var(--space-3);
  border: 1px solid #eee;
  border-radius: var(--radius-sm);                 /* 6px */
  background: var(--color-surface);
  color: var(--color-text);                        /* 입력값 #505050 */
  font-size: var(--text-base);                     /* 16px */
  letter-spacing: -0.4px;
  line-height: normal;
}
.field__input::placeholder { color: var(--color-text); opacity: 1; }
.field__input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-tint); }
/* 유효성 에러 상태 */
.field__input.is-invalid { border-color: var(--color-danger); }
.field__error {
  display: none;
  padding: 0 var(--space-3);
  font-size: var(--text-2xs);                      /* 12px */
  color: var(--color-danger);
  letter-spacing: -0.3px;
}
.field.has-error .field__error { display: block; }

/* 로그인 유지 (550:547) */
.login-keep { display: inline-flex; gap: var(--space-1-5); align-items: center; padding: 0 3px; cursor: pointer; user-select: none; }
.login-keep input { position: absolute; opacity: 0; width: 0; height: 0; }
.login-keep__box {
  width: 18px; height: 18px; flex: none;
  border: 1.5px solid var(--color-icon);
  border-radius: 999px;
  display: grid; place-items: center;
  color: var(--white);
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.login-keep__box svg { width: 10px; height: 10px; opacity: 0; }
.login-keep input:checked + .login-keep__box { background: var(--color-primary); border-color: var(--color-primary); }
.login-keep input:checked + .login-keep__box svg { opacity: 1; }
.login-keep__text { font-size: var(--text-sm); color: var(--color-text-muted); letter-spacing: -0.35px; }

/* ── 버튼 영역 (485:1417) ─────────────────────────────────────────────── */
.login-actions { display: flex; flex-direction: column; align-items: center; width: 100%; }
.login-submit {
  width: 100%; height: 48px;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-field);                  /* #ebebf1 */
  border: none; border-radius: var(--radius-sm);   /* 6px */
  color: var(--color-text-muted);                  /* #797979 */
  font-size: var(--text-base); font-weight: var(--fw-medium);
  letter-spacing: -0.4px; cursor: pointer;
  transition: background var(--transition-base), color var(--transition-base);
}
.login-submit:hover { background: var(--color-primary); color: var(--color-on-primary); }

/* 또는 구분선 (550:613) */
.login-or { position: relative; width: 100%; padding: 12px 0 8px; text-align: center; }
.login-or::before { content: ""; position: absolute; left: 0; right: 0; top: 21.5px; height: 1px; background: var(--color-border); }
.login-or span { position: relative; background: var(--color-surface); padding: 2px 13px; font-size: var(--text-xs); color: var(--color-text-muted); letter-spacing: -0.325px; }

/* 계정찾기 (485:1424) */
.login-links { display: flex; gap: var(--space-2-5); align-items: center; justify-content: center; width: 100%; }
.login-links a {
  flex: 1 0 0; min-width: 0; padding: var(--space-1); text-align: center;
  font-size: var(--text-sm); color: var(--color-text-muted); letter-spacing: -0.35px; text-decoration: none;
}
.login-links a:hover { color: var(--color-primary); }
.login-links .sep { width: 1px; height: 12px; flex: none; background: var(--color-border); }

/* 탭 지연(300ms) 제거 — 구형 안드로이드 웹뷰 대응 */
.login-submit, .login-links a, .login-keep, .field__input { touch-action: manipulation; }

/* ── 모바일 집중 반응형 (≤480px): 시인성·가독성·터치영역 강화 ──────────── */
@media (max-width: 480px) {
  .login-card { padding: 32px 22px; border-radius: 14px; }
  .login-container { gap: 32px; }
  .login-brand__title { font-size: 24px; }
  /* 터치 타깃 최소 44px 확보 */
  .login-links a { padding: 12px 4px; }
  .login-keep { padding: 6px 3px; }
}

/* 초소형 기기(≤360px): 넘침 방지 */
@media (max-width: 360px) {
  .login-page { padding: max(var(--space-3), env(safe-area-inset-left)); }
  .login-card { padding: 28px 18px; }
  .login-brand__title { font-size: 22px; }
  .login-links a { font-size: var(--text-xs); }
}

/* 가로 모드/낮은 높이: 세로 간격 축소로 스크롤 최소화 */
@media (max-height: 560px) {
  .login-page { align-content: safe center; }
  .login-container { gap: 24px; }
}