/*
 * static/css/auth/auth_layout.css
 * 인증 스플릿 레이아웃 공유 스타일 — login / find_password 공용.
 *   좌측 브랜드 패널(선박 이미지 + 네이비 오버레이 + 로고/타이틀/서브텍스트) + 반응형 래퍼.
 * 각 페이지의 우측 폼 내부 스타일은 페이지별 CSS(login.css / find_password.css).
 * 공통 요소(타이포·폼·버튼)는 common.css 사용.
 */

/* ── 전체 래퍼(유동 2컬럼, min-height 100vh) ─────────────────── */
.signup-wrapper {
  display: flex;
  width: 100%;
  min-height: 100vh;
  align-items: stretch;
  background: var(--Fill-White, #FFF);
}

/* ── 좌측 브랜드 패널(선박 이미지 + 네이비 오버레이 + 중앙 콘텐츠) ──── */
/* 배경은 랜딩 Hero 와 동일 선박 이미지 재사용(브랜드 통일) */
.left-image-container {
  position: relative;
  flex: 1 1 50%;
  min-width: 0;
  min-height: 100vh;
  background: url('/static/images/landing/hero_bg.png') #001B36 92% / cover no-repeat;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* 네이비 오버레이 rgba(0,27,54,.6) (Figma) */
.left-image-container::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 27, 54, 0.6);
}
/* 중앙 콘텐츠(오버레이 위) — 로고 / 타이틀 / 서브텍스트, gap 40 */
.login-hero-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(24px, 3vw, 40px);
  padding: 0 24px;
  text-align: center;
  color: var(--Text-White, #FFF);
}
.login-hero-logo {
  width: 120px;
  height: 31px;
  object-fit: contain;
}
.login-hero-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.login-hero-title {
  margin: 0;
  font-family: var(--Font-Family);
  font-weight: 500;                 /* Medium 기본, strong 은 Bold */
  font-size: clamp(28px, 3.4vw, 48px);
  line-height: 1.2;
  color: var(--Text-White, #FFF);
}
.login-hero-title strong { font-weight: 700; }
.login-hero-title-line { display: block; }
.login-hero-sub {
  margin: 0;
  font-family: var(--Font-Family);
  font-weight: 400;
  font-size: clamp(15px, 1.4vw, 20px);
  line-height: 1.5;
  color: var(--Text-White, #FFF);
}

/* ── 우측 폼 패널(유동 절반, 폼은 400px 중앙 배치) — login/find 공용 ── */
.right-login-container,
.right-find-container {
  flex: 1 1 50%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 52px;
  padding: 40px 24px;
  box-sizing: border-box;
}
/* 내부 콘텐츠(제목·폼) 폭 제한 — 최대 400px, 좁으면 컨테이너 따라 축소 */
.right-login-container > *,
.right-find-container > * {
  width: 100%;
  max-width: 400px;
}

/* ── 태블릿/모바일 (≤768px): 좌측 브랜드 패널 숨기고 폼 단독(중앙) ── */
/* (앱 전역 계약: common.css 가 body min-width 를 768px 에서 unset) */
@media (max-width: 768px) {
    .signup-wrapper {
        flex-direction: column;
    }
    .left-image-container {
        display: none;
    }
    .right-login-container,
    .right-find-container {
        flex: 1 1 auto;
        padding: 80px 20px;
        gap: 32px;
    }
}

/* ── 소형 모바일 (≤402px): 여백 축소 ─────────────────────────── */
@media (max-width: 402px) {
    .right-login-container,
    .right-find-container {
        padding: 64px 16px;
    }
}