/* ============================================================================
   Login — 스플릿 에디토리얼 + WebGL 잉크 배경 + 브랜드 로고.
   base.html extends 로 tokens·프리페인트·다크모드·폰트·theme.js 상속.
   폼 측은 토큰 기반이라 라이트/다크 자동. 브랜드 패널은 의도적 '항상 다크'.
   ============================================================================ */

/* WebGL 잉크(hero.js)는 tokens.css 의 테마별 --bg-base/--bg-ink/--bg-amt 를 그대로 사용
   → 라이트=밝은 종이에 어두운 잉크, 다크=어두운 표면에 밝은 잉크로 자동 전환(hero.js 가 data-theme 변화를 관찰해 실시간 갱신). */

body.auth {
  margin: 0; min-height: 100vh; min-height: 100dvh;
  background: var(--paper); color: var(--ink);
  font-family: var(--font-sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}

/* 페이지 고정 배경 캔버스(three.js). WebGL 실패 시 빈 캔버스 → 브랜드 패널 폴백 그라디언트가 대신함 */
.page-bg { position: fixed; inset: 0; z-index: 0; width: 100vw; height: 100vh; display: block; pointer-events: none; }

.auth-split {
  position: relative; z-index: 1;
  min-height: 100vh; min-height: 100dvh;
  display: grid; grid-template-columns: 1fr 1fr;   /* 정중앙 50/50 */
}

/* ── 좌: 브랜드 패널 (테마 대응 — 라이트: 밝은 잉크+어두운 글자 / 다크: 어두운 잉크+밝은 글자) ── */
.auth-brand {
  position: relative; overflow: hidden;
  display: flex; align-items: center;
  padding: clamp(var(--sp-7), 6vw, var(--sp-10)) clamp(var(--sp-6), 5vw, var(--sp-9));
  color: var(--ink);
  background: linear-gradient(150deg, var(--surface-2) 0%, var(--paper) 100%);   /* no-WebGL 폴백 */
}
/* WebGL: 콘텐츠(좌측)는 스크림으로 덮어 글자 가독 확보, 우측으로 갈수록 투명 → 잉크 flow 비침. 테마별 톤. */
.webgl .auth-brand { background: linear-gradient(105deg, rgba(251, 250, 248, .66) 0%, rgba(251, 250, 248, .16) 60%, transparent 100%); }
:root[data-theme="dark"] .webgl .auth-brand { background: linear-gradient(105deg, rgba(11, 17, 30, .66) 0%, rgba(9, 13, 24, .20) 60%, transparent 100%); }
.auth-brand::before {   /* 브랜드 글로우 */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(130% 90% at 12% 6%, rgba(76, 130, 255, .14), transparent 55%);
}
/* inner 를 고정 폭으로 → 구분선(width:100%)이 텍스트보다 약간 더 길어 안정감. 브랜드 패널은 데스크톱 전용 */
.auth-brand__inner { position: relative; z-index: 1; width: 360px; max-width: 100%; transform: translateY(-4vh); }   /* 광학적 중심 보정 — 정중앙보다 살짝 위 */
.auth-logo { display: block; width: 150px; height: auto; }
/* 브랜드 구분선 2개 — 로고 아래 + 서브텍스트 위. 브랜드색 → 투명 그라디언트, 색은 팔레트 따라감 */
.auth-headline::before,
.auth-tagline::before {
  content: ''; display: block; width: 100%; height: 2px;
  background: linear-gradient(90deg, var(--brand), transparent);
}
.auth-headline::before { margin: var(--sp-5) 0; }   /* 로고 ↔ 헤드라인 */
.auth-tagline::before  { margin: 0 0 var(--sp-5); }  /* 헤드라인 ↔ 서브텍스트 */
:root[data-theme="dark"] .auth-brand .auth-logo { filter: invert(1); }   /* 검정 로고 → 다크에서 반전 */
.auth-headline {
  margin: var(--sp-5) 0 0; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.1rem, 3.6vw, 3.1rem); line-height: 1.12; letter-spacing: -.02em; color: var(--ink);
}
.auth-tagline { margin: var(--sp-5) 0 0; font-size: var(--t-body); line-height: 1.65; color: var(--ink-2); }
/* 브랜드 텍스트는 WebGL 잉크 위에 얹히므로 테마별 헤일로로 대비 확보(라이트=밝은 헤일로, 다크=어두운 헤일로) */
.auth-headline, .auth-tagline { text-shadow: 0 0 3px rgba(251, 250, 248, .9), 0 1px 14px rgba(251, 250, 248, .85); }
:root[data-theme="dark"] .auth-headline,
:root[data-theme="dark"] .auth-tagline { text-shadow: 0 1px 12px rgba(6, 10, 18, .72); }

/* ── 우: 폼 패널 (테마 대응, 불투명 → 캔버스 가림) ── */
.auth-form {
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-7) clamp(var(--sp-5), 5vw, var(--sp-8));
  background: var(--paper);
}
.auth-form__inner { width: 100%; max-width: 360px; }
.auth-logo--form { display: none; width: 108px; height: auto; margin-bottom: var(--sp-4); }
:root[data-theme="dark"] .auth-logo--form { filter: invert(1); }   /* 검정 로고 → 다크에서 반전 */
.auth-form__inner h1 {
  margin: 0; font-family: var(--font-display); font-size: 1.95rem; font-weight: 700;
  letter-spacing: var(--tracking-tight); color: var(--ink);
}
.auth-sub { margin: 8px 0 var(--sp-6); font-size: var(--t-sm); color: var(--muted); }

/* Google (미설정 폴백) + GIS 위젯 정렬 */
.google-login-btn {
  width: 100%; height: var(--control-h-lg);
  display: flex; align-items: center; justify-content: center; gap: 10px; padding: 0 16px;
  font: 500 var(--t-sm)/1 var(--font-sans); color: var(--ink-2);
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-md);
  cursor: pointer; transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.google-login-btn:hover:not(:disabled) { background: var(--surface-2); border-color: var(--ink-2); }
.google-login-btn:disabled { opacity: .55; cursor: not-allowed; }
.google-login-btn svg { flex: none; }
.g_id_signin { display: flex; justify-content: center; }
.g_id_signin > div { width: 100% !important; }

/* 구분선 */
.divider { display: flex; align-items: center; gap: 12px; margin: var(--sp-5) 0; }
.divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.divider span { font: 500 var(--t-xs)/1 var(--font-sans); color: var(--muted); white-space: nowrap; }

/* 폼 */
.form-section { display: flex; flex-direction: column; gap: var(--sp-4); margin-bottom: var(--sp-5); }
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-group label { font: 600 var(--t-sm)/1 var(--font-sans); color: var(--ink-2); }
.form-group input {
  width: 100%; height: var(--control-h); padding: 0 12px; box-sizing: border-box;
  font-size: var(--t-sm); font-family: inherit; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-md); outline: none;
  transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.form-group input::placeholder { color: var(--faint); }
.form-group input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-wash); }

/* 주 액션 — 잉크 솔리드(다크에선 토큰 자동 반전) */
.auth-submit {
  width: 100%; height: var(--control-h-lg); margin-top: 4px;
  font: 600 var(--t-body)/1 var(--font-sans); color: var(--paper); background: var(--ink);
  border: 1px solid var(--ink); border-radius: var(--r-md); cursor: pointer;
  transition: background var(--dur-1) var(--ease);
}
.auth-submit:hover { background: var(--ink-2); border-color: var(--ink-2); }
.auth-submit:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* 하단 링크 */
.forgot-links { text-align: center; font-size: var(--t-sm); margin-bottom: var(--sp-4); }
.forgot-links a { color: var(--muted); text-decoration: none; }
.forgot-links a:hover { color: var(--ink-2); text-decoration: underline; }
.forgot-links .link-divider { color: var(--line-strong); margin: 0 8px; }
.register-link { text-align: center; font-size: var(--t-sm); color: var(--muted); }
.register-link a { color: var(--brand); text-decoration: none; font-weight: 600; }
.register-link a:hover { text-decoration: underline; }

/* ── 우상단 유틸 컨트롤: 테마 스위치 + 폰트 선택 ── */
.auth-controls { position: fixed; top: var(--sp-4); right: var(--sp-4); z-index: 20; display: flex; align-items: center; gap: var(--sp-2); }
.auth-controls .reading-tools { position: static; display: flex; align-items: center; gap: var(--sp-2); }
.auth-controls .widthpick { display: none; }   /* 본문 너비 스위치는 레슨 전용 */
.fontpick {
  height: 32px; padding: 0 8px; font: 500 var(--t-sm)/1 var(--font-sans); color: var(--ink-2);
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md); cursor: pointer;
  transition: border-color var(--dur-1) var(--ease);
}
.fontpick:hover { border-color: var(--ink-2); }
.fontpick:focus-visible { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-wash); outline: none; }

/* 테마 스위처 (nav.css 와 동일 — 로그인은 nav.css 미로드라 여기 정의) */
.theme-switch { display: inline-flex; align-items: center; gap: 1px; padding: 2px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); }
.theme-switch__btn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: none; background: transparent; color: var(--muted); cursor: pointer; border-radius: var(--r-sm); transition: color var(--dur-1) var(--ease), background var(--dur-1) var(--ease); }
.theme-switch__btn:hover { color: var(--ink-2); }
.theme-switch__btn.is-active { color: var(--ink); background: var(--surface); box-shadow: var(--shadow-sm); }
.theme-switch__btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* ── 반응형: 좁으면 브랜드 패널 숨기고 폼만(폼에 로고 노출) ── */
@media (max-width: 820px) {
  .auth-split { grid-template-columns: 1fr; }
  .auth-brand { display: none; }
  .auth-logo--form { display: block; }
  .auth-form { background: var(--paper); }
}