/* static/css/auth.css — 로그인/회원가입/아이디·비번찾기 공용 스플릿 레이아웃
   기준(SSoT)은 로그인 페이지. 좌측 브랜드 패널(고급 아트) + 우측 폼 패널로 구성하며,
   실사용 도구 화면은 단조롭게 유지하는 운영 방침과 대비되게 이 페이지들만 화려하게 꾸민다. */

.auth-split {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  min-height: calc(100vh - var(--header-height));
  min-height: calc(100svh - var(--header-height));
}

/* ── 좌측 브랜드 패널 ── */
.auth-brand-panel {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px 48px;
  background: linear-gradient(160deg, #1e1b4b 0%, #4c1d95 55%, #6d28d9 100%);
}
.auth-brand-panel .hero-aurora { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.55; pointer-events: none; }
.auth-brand-content { position: relative; z-index: 1; max-width: 440px; }

/* 로고는 밝은 배경 전제(--text-primary 짙은색 + 컬러플래시 애니메이션)라 어두운 브랜드
   패널 위에선 안 보인다. 정적 흰색으로 고정하고 색상 플래시 애니메이션만 끈다
   (플래시 자체가 밝은 배경용 팔레트라 여기선 끄는 게 더 정갈하다).
   주의: .tlogo-gear-slot의 애니메이션은 색상이 아니라 등장(opacity/scale) 자체이므로
   animation-name을 건드리면 안 되고 색상만 덮어쓴다. */
.auth-brand-panel .tlogo-letter-fx { color: #fff; animation-name: none; }
.auth-brand-panel .tlogo-gear-slot { color: #fff; }

.auth-brand-title {
  margin-top: 32px;
  font-family: 'Plus Jakarta Sans Variable', var(--font-pretendard), var(--font-inter), sans-serif;
  font-size: clamp(28px, 3.6vw, 40px); font-weight: 800; line-height: 1.2; letter-spacing: -0.02em;
  color: #fff;
}
.auth-brand-title-line { display: block; }
.auth-brand-title-em {
  background: linear-gradient(120deg, #c4b5fd 0%, #ede9fe 60%, #fff 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.auth-brand-desc {
  margin-top: 16px;
  font-size: 15px; line-height: 1.7; color: rgba(255,255,255,0.72);
}

/* GSAP 등장 타임라인 대상 — 기본 숨김 상태로 시작해 login.js가 애니메이션으로 드러낸다.
   reveal.js/splitTextIn.js와 동일한 패턴(motion.css) — reduced-motion이면 CSS가 즉시 표시해
   JS 로드 여부와 무관하게 항상 보이도록 보장한다. */
[data-auth-in] { opacity: 0; transform: translateY(22px); }

@media (prefers-reduced-motion: reduce) {
  .auth-brand-panel .hero-aurora { display: none; }
  [data-auth-in] { opacity: 1 !important; transform: none !important; }
}

/* ── 우측 폼 패널 ── */
.auth-form-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 32px;
  background: var(--surface);
}
.auth-form-title { font-size: 26px; font-weight: 700; margin-bottom: 28px; color: var(--text-primary); }

/* 아이디 찾기 / 비밀번호 찾기 — "계정이 없으신가요? 회원가입" 문구와 같은 톤으로 텍스트 안에 인라인 배치.
   실 기능은 다음 단계(auth 페이지 구축) 이후 연결, 지금은 정직한 준비중 토스트 */
.auth-link-btn {
  background: none; border: none; padding: 0; cursor: pointer;
  font: inherit; color: var(--accent); font-weight: 500;
}
.auth-link-btn:hover { text-decoration: underline; }

/* 로그인 버튼과 구글 버튼 사이 구분선 */
.auth-divider {
  display: flex; align-items: center; gap: 12px;
  margin: 22px 0 18px;
  color: var(--text-secondary); font-size: 12px;
}
.auth-divider::before, .auth-divider::after {
  content: ""; flex: 1; height: 1px; background: rgba(30, 27, 75, 0.12);
}

/* 구글 로그인 버튼 — 구글 브랜드 가이드라인 색상/입체감을 그대로 따른다(디자인 토큰과 별개로 고정 색상 사용) */
.google-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; height: 48px;
  background: #fff;
  border: 1px solid #dadce0;
  border-radius: var(--radius-md);
  font-size: 15px; font-weight: 500; color: #3c4043;
  cursor: pointer;
  transition: box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
  color: #3c4043;
  text-decoration: none;
}
.google-btn:hover { background: #f8f9fa; border-color: #d2d3d4; box-shadow: 0 1px 2px rgba(60,64,67,.3), 0 1px 3px 1px rgba(60,64,67,.15); }
.google-btn:active { background: #f1f3f4; }
.google-btn-icon { flex-shrink: 0; }

/* ── 모바일: 좌측 패널을 낮은 배너로 축소, 폼이 전폭 ── */
@media (max-width: 900px) {
  .auth-split { grid-template-columns: 1fr; min-height: auto; }
  .auth-brand-panel { padding: 36px 24px; min-height: 220px; }
  .auth-brand-title { margin-top: 20px; font-size: clamp(24px, 6vw, 30px); }
  .auth-brand-desc { display: none; }
  .auth-form-panel { padding: 40px 20px 56px; }
}