/* 로그인·가입·비밀번호 재설정 전용. 콘솔 내부(console.css)가 아니라 랜딩(marketing.css)의
   톤을 잇는다 — 아직 로그인하지 않은 사람에게 콘솔 헤더를 보여줄 이유가 없다. */

:root {
  --ink: #16181d;
  --sub: #5c6270;
  --line: #e5e7ec;
  --paper: #ffffff;
  --paper-alt: #f7f8fa;
  --blue: #4a3aff;
  --blue-ink: #3428d6;
  --dark: #12102a;
  --dark-sub: #a6a1d6;
  --red: #b91c1c;
  --red-soft: #fef2f2;
  --red-line: #fecaca;
  --green-soft: #f0fdf4;
  --green-line: #bbf7d0;
}

* { box-sizing: border-box; }

body.auth {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: "Fira Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
               "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.auth-grid { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; }

/* ---------- 좌측 브랜드 패널 ---------- */
.auth-brand {
  background: radial-gradient(900px 600px at 20% 0%, #2a2266 0%, var(--dark) 60%);
  background-size: cover;
  background-position: center;
  color: #fff;
  padding: 56px 56px 48px;
  display: flex; flex-direction: column; justify-content: center;
}

/* 배경 이미지 — 오버레이로 왼쪽을 눌러 텍스트 대비를 '보장'한다. 원본 왼쪽이 비어 있어도
   거기 기대지 않는다: 나중에 더 밝은 이미지로 갈아끼우면 흰 글자가 묻히고, 그건 아무도
   눈치채지 못하는 종류의 사고다. */
body.auth-login .auth-brand,
body.auth-signup .auth-brand {
  background-image:
    linear-gradient(100deg,
      rgba(18, 16, 42, .96) 0%,
      rgba(18, 16, 42, .90) 34%,
      rgba(18, 16, 42, .62) 66%,
      rgba(18, 16, 42, .30) 100%),
    url("/console/static/img/auth-login.jpg");
}
body.auth-signup .auth-brand {
  background-image:
    linear-gradient(100deg,
      rgba(18, 16, 42, .96) 0%,
      rgba(18, 16, 42, .90) 34%,
      rgba(18, 16, 42, .62) 66%,
      rgba(18, 16, 42, .30) 100%),
    url("/console/static/img/auth-signup.jpg");
}
.auth-brand .brand {
  font-size: 24px; font-weight: 700; letter-spacing: -.02em;
  color: #fff; text-decoration: none; margin-bottom: 42px;
}
.auth-brand h2 {
  font-size: 33px; line-height: 1.35; letter-spacing: -.02em;
  margin: 0 0 34px; font-weight: 700;
}
.pitch { list-style: none; padding: 0; margin: 0 0 34px; display: grid; gap: 20px; }
.pitch li { padding-left: 28px; position: relative; }
.pitch li::before {
  content: "✓"; position: absolute; left: 0; top: 0;
  color: #a99cff; font-weight: 700;
}
.pitch b { display: block; font-size: 16px; }
.pitch span { color: var(--dark-sub); font-size: 14.5px; }
.quiet { color: var(--dark-sub); font-size: 14px; margin: 0; }

/* ---------- 우측 폼 ---------- */
.auth-main {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 48px 28px; background: var(--paper-alt);
}
.auth-card {
  width: 100%; max-width: 420px;
  background: var(--paper); border: 1px solid var(--line); border-radius: 16px;
  padding: 36px 34px;
  box-shadow: 0 1px 2px rgba(16, 18, 29, .04), 0 12px 32px rgba(16, 18, 29, .07);
}
/* 모바일에서 좌측 패널이 사라지면 카드 안에 브랜드를 보여준다 */
.brand-sm { display: none; font-size: 20px; font-weight: 700; color: var(--ink);
            text-decoration: none; margin-bottom: 18px; }

.auth-card h1 { font-size: 25px; letter-spacing: -.02em; margin: 0 0 6px; }
.auth-card .sub { color: var(--sub); font-size: 15px; margin: 0 0 24px; }

/* 폼 */
.auth-card form { display: grid; gap: 16px; }
.auth-card label { display: grid; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.auth-card .hint { font-weight: 400; color: var(--sub); font-size: 12.5px; }
.auth-card input {
  font: inherit; font-size: 15px; padding: 12px 13px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--paper);
  color: var(--ink); width: 100%; transition: border-color .12s, box-shadow .12s;
}
.auth-card input::placeholder { color: #a8adb8; }
.auth-card input:focus {
  outline: none; border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(74, 58, 255, .12);
}
.auth-card button {
  font: inherit; font-size: 16px; font-weight: 600; cursor: pointer;
  padding: 13px 18px; border: 0; border-radius: 10px;
  background: var(--blue); color: #fff; width: 100%;
  box-shadow: 0 6px 18px rgba(74, 58, 255, .26);
  transition: background .12s, transform .06s;
}
.auth-card button:hover { background: var(--blue-ink); }
.auth-card button:active { transform: translateY(1px); }

/* 알림 */
.err, .notice {
  border-radius: 10px; padding: 12px 14px; font-size: 14.5px; margin-bottom: 20px;
}
.err { background: var(--red-soft); border: 1px solid var(--red-line); color: var(--red); }
.notice { background: var(--green-soft); border: 1px solid var(--green-line); color: #166534; }

/* 하단 링크 */
.alt { margin-top: 22px; font-size: 14.5px; color: var(--sub); display: grid; gap: 6px; }
.alt a { color: var(--blue-ink); font-weight: 600; text-decoration: none; }
.alt a:hover { text-decoration: underline; }
.back { margin: 22px 0 0; font-size: 14px; }
.back a { color: var(--sub); text-decoration: none; }
.back a:hover { color: var(--ink); }

/* ---------- 반응형 ---------- */
@media (max-width: 900px) {
  .auth-grid { grid-template-columns: 1fr; min-height: auto; }
  .auth-brand { display: none; }     /* 좁은 화면에선 폼에 집중한다 */
  .brand-sm { display: block; }
  .auth-main { padding: 32px 18px; min-height: 100vh; }
  .auth-card { padding: 28px 22px; }
}

/* ---------- 다크 모드 ---------- */
@media (prefers-color-scheme: dark) {
  :root {
    --ink: #e9eaee; --sub: #a0a5b3; --line: #2b2e38;
    --paper: #1b1e25; --paper-alt: #14161b;
    --blue-ink: #a99cff;
    --red: #fca5a5; --red-soft: #2a1a1c; --red-line: #5b2b2f;
    --green-soft: #16261c; --green-line: #2c5237;
  }
  .notice { color: #86efac; }
  .brand-sm { color: var(--ink); }
}