/* ════════════════════════════════════════════════════════════════
   Login page — Tesla style (left dark hero / right white form)
   ════════════════════════════════════════════════════════════════ */
.login-page {
  min-height: 100vh; min-height: 100dvh;
  display: grid; grid-template-columns: 1.1fr 1fr;
  background: var(--tsl-white);
}

/* ── Left: dark hero ─────────────────────────────────────── */
.login-hero {
  position: relative; overflow: hidden;
  background: var(--tsl-carbon);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 48px 56px;
  color: var(--tsl-text-inv);
}
.login-hero::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 30% 25%, rgba(62,106,225,.25) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 75%, rgba(255,255,255,.05) 0%, transparent 60%);
}
.login-hero::after {
  content: ''; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse at 40% 50%, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at 40% 50%, #000 30%, transparent 75%);
}
.login-hero__inner { position: relative; z-index: 1; }
.login-hero__brand {
  font-family: "Universal Sans Display", -apple-system, sans-serif;
  font-size: 18px; font-weight: 500; letter-spacing: 0.28em;
}
.login-hero__title {
  position: relative; z-index: 1;
  font-family: "Universal Sans Display", "Pretendard", sans-serif;
  font-size: clamp(36px, 4.8vw, 56px);
  font-weight: 500; line-height: 1.08;
  color: var(--tsl-text-inv);
  margin-top: auto;
}
.login-hero__sub {
  position: relative; z-index: 1;
  margin-top: 16px;
  font-size: 15px; color: rgba(255,255,255,.7);
  max-width: 480px;
}
.login-hero__footer {
  position: relative; z-index: 1;
  font-size: 12px; color: rgba(255,255,255,.4);
  letter-spacing: 0.04em;
}

/* ── Right: form ─────────────────────────────────────────── */
.login-form-wrap {
  display: flex; align-items: center; justify-content: center;
  padding: 48px;
}
.login-form {
  width: 100%; max-width: 360px;
}
.login-form__hd {
  font-family: "Universal Sans Display", "Pretendard", sans-serif;
  font-size: 28px; font-weight: 500;
  color: var(--tsl-text-1);
  margin-bottom: 8px;
}
.login-form__sub {
  font-size: 14px; color: var(--tsl-text-3);
  margin-bottom: 32px;
}
.login-form__label {
  display: block; font-size: 12px; font-weight: 500;
  color: var(--tsl-text-3); letter-spacing: 0.04em;
  text-transform: uppercase; margin-bottom: 8px;
}
.login-form__error {
  font-size: 13px; color: var(--tsl-err);
  margin-top: 8px; min-height: 18px;
  opacity: 0; transition: opacity var(--tsl-trs);
}
.login-form__hint {
  margin-top: 20px;
  padding: 12px 14px;
  background: var(--tsl-ash);
  border-radius: var(--tsl-r-1);
  font-size: 12px; color: var(--tsl-text-3); line-height: 1.5;
}

@media (max-width: 880px) {
  .login-page { grid-template-columns: 1fr; }
  .login-hero { display: none; }
  .login-form-wrap { min-height: 100vh; min-height: 100dvh; padding: 32px 20px; }
}