/* ============================================================
   H2GO — 로그인 풀블리드 스플릿 (전체화면 좌우 분할)
   사용처: index.html 의 .auth-only-card.auth-split (이 파일은 로그인 전용 로드)
   reference: 배경 애니메이션 컨셉 제안 / login.html

   설계:
   - 전체 화면(100vh)을 좌우로 분할. 카드 컨테이너는 투명·무테(글래스 제거).
   - 좌측 브랜드 패널: 투명 → 배경 애니메이션 캔버스(z-index:-1) 바로 위에 텍스트·로고.
   - 우측 폼 패널: 반투명 + backdrop-blur → 뒤의 애니메이션이 은은하게 비침.
   - 테마·디자인 스위처는 폼 패널 우상단 absolute 배치(폼 수직중앙 유지).
   - 760px 이하 상하 스택.
   - 색/표면은 기존 테마 변수(--bg-black/--border-color/--text-* 등) 재사용.
   ============================================================ */

/* 로그인 화면을 전체화면 풀블리드로 (이 파일은 로그인에서만 로드되므로 .auth-only 직접 오버라이드 안전) */
body.auth-only {
  padding: 0;
  align-items: stretch;
}

.auth-only-main--split {
  max-width: none;
  width: 100%;
  min-height: 100vh;
}

/* 카드 → 투명 풀블리드 플렉스 컨테이너 (글래스/테두리/그림자 제거) */
.auth-only-card.auth-split {
  display: flex;
  align-items: stretch;
  min-height: 100vh;
  padding: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  overflow: visible;
}

.auth-only-card.auth-split::before { display: none; } /* 카드 상단 그라디언트 라인 숨김 */

/* ── 좌: 브랜드 패널 (투명 — 애니메이션 바로 위) ─────────── */
.auth-split-brand {
  flex: 1.25 1 440px;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(2.5rem, 5vh, 4rem) clamp(1.75rem, 4vw, 3.5rem);
}

.auth-brand-cluster {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1.5rem, 2.8vw, 2.75rem);
}

.auth-brand-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.9rem;
  flex-shrink: 0;
}

.auth-brand-title {
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.12;
  color: var(--text-white);
  white-space: nowrap;
  text-shadow: 0 2px 28px rgba(0, 0, 0, 0.6);
}

.auth-brand-subtitle {
  font-size: clamp(0.95rem, 1.5vw, 1.1rem);
  font-weight: 500;
  color: var(--text-muted);
  white-space: nowrap;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55);
}

/* 세로 디바이더 (텍스트 ↔ H2GO 로고 사이) */
.auth-brand-divider {
  width: 1px;
  align-self: stretch;
  min-height: 120px;
  max-height: 190px;
  flex-shrink: 0;
  background: linear-gradient(180deg, transparent, var(--border-color) 20%, var(--border-color) 80%, transparent);
}

.auth-split-brand .login-logo { flex-shrink: 0; }

/* ── 우: 폼 패널 (반투명 글래스 — 애니메이션 은은하게 비침) ── */
.auth-split-form {
  flex: 1 1 380px;
  min-height: 100vh;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(2.5rem, 5vh, 4rem) clamp(1.75rem, 4vw, 3.5rem);
  border-left: 1px solid var(--border-color);
  background: color-mix(in srgb, var(--bg-black) 58%, transparent);
  backdrop-filter: blur(14px) saturate(125%);
  -webkit-backdrop-filter: blur(14px) saturate(125%);
}

/* 테마·디자인 스위처: 폼 패널 우상단 고정 (폼 수직중앙 유지) */
.auth-split-form .auth-only-toolbar {
  position: absolute;
  top: clamp(1rem, 2.5vh, 1.5rem);
  right: clamp(1.25rem, 3vw, 2rem);
  margin: 0;
  z-index: 5;
}

/* 폼 본문 폭 제한 + 중앙 */
.auth-split-form .auth-sections-stack {
  width: 100%;
  max-width: 380px;
  margin-top: 0;
}

/* 폼 상단 제목 ('로그인' / 안내문) */
.auth-form-head {
  margin-bottom: 1.5rem;
}

.auth-form-head-title {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-white);
  line-height: 1.2;
}

.auth-form-head-sub {
  margin-top: 0.4rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* 하단 인라인 링크 ('처음이신가요? 회원가입') */
.auth-footer-inline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-size: 0.85rem;
}

.auth-footer-text {
  color: var(--text-muted);
}

.auth-link-btn {
  background: none;
  border: none;
  padding: 2px 2px;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--h2-blue-light);
  border-bottom: 1px solid transparent;
  transition: border-color 0.18s ease, color 0.18s ease;
}

.auth-link-btn:hover {
  border-bottom-color: currentColor;
}

/* ── 반응형: 760px 이하 상하 스택 ────────────────────────── */
@media (max-width: 760px) {
  .auth-only-card.auth-split {
    flex-direction: column;
  }

  .auth-split-brand {
    min-height: 38vh;
    flex-basis: auto;
    padding-top: clamp(3rem, 8vh, 4rem);
  }

  .auth-brand-cluster {
    flex-direction: column;
    gap: clamp(1rem, 4vw, 1.5rem);
  }

  .auth-brand-title,
  .auth-brand-subtitle {
    white-space: normal;
  }

  /* 세로 디바이더 → 가로 디바이더 */
  .auth-brand-divider {
    width: 80px;
    min-height: 0;
    height: 1px;
    align-self: center;
    background: linear-gradient(90deg, transparent, var(--border-color), transparent);
  }

  .auth-split-form {
    min-height: auto;
    flex: 1;
    flex-basis: auto;
    justify-content: flex-start;
    border-left: none;
    border-top: 1px solid var(--border-color);
    padding-top: clamp(3rem, 7vh, 3.5rem);
  }
}

/* ── 자동완성(autofill) 입력칸: 브라우저 강제 흰 배경 제거 ──
   크롬 등은 :-webkit-autofill 에 흰/노랑 배경을 입힘 → 다크 테마와 충돌.
   inset box-shadow 로 일반 입력칸과 동일한 --bg-black 표면을 덮어 배경과 어우러지게 함.
   포커스 시에는 기존 포커스 글로우(0 0 0 3px)를 함께 유지. */
.auth-form input:-webkit-autofill,
.auth-form input:-webkit-autofill:hover,
.auth-form input:-webkit-autofill:active {
  -webkit-text-fill-color: var(--text-white);
  -webkit-box-shadow: 0 0 0 1000px var(--bg-black) inset;
  box-shadow: 0 0 0 1000px var(--bg-black) inset;
  caret-color: var(--text-white);
  transition: background-color 9999s ease-in-out 0s;
}

.auth-form input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text-white);
  -webkit-box-shadow: 0 0 0 1000px var(--bg-black) inset, 0 0 0 3px rgba(59, 130, 246, 0.13);
  box-shadow: 0 0 0 1000px var(--bg-black) inset, 0 0 0 3px rgba(59, 130, 246, 0.13);
  caret-color: var(--text-white);
}

/* ── 비밀번호 표시/숨김 토글 ──────────────────────────────
   .password-field 로 input 을 감싸고 우측에 눈 아이콘 버튼을 겹침. */
.password-field {
  position: relative;
}

/* 토글 버튼과 겹치지 않도록 입력칸 우측 패딩 확보 */
.password-field input {
  padding-right: 2.9rem;
}

.password-toggle {
  position: absolute;
  top: 50%;
  right: 0.5rem;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: color 0.18s ease, background 0.18s ease;
}

.password-toggle:hover {
  color: var(--text-white);
  background: var(--surface-soft);
}

.password-toggle:focus-visible {
  outline: 2px solid var(--h2-blue);
  outline-offset: 2px;
}

.password-toggle svg {
  display: block;
}

/* 기본(가림): 눈 아이콘 표시 / 표시중: 눈-가림 아이콘 표시 */
.password-toggle .pw-eye-off {
  display: none;
}

.password-toggle.is-visible .pw-eye {
  display: none;
}

.password-toggle.is-visible .pw-eye-off {
  display: block;
}