/*
 * 로그인 (JI-8100) — 내부_아동권리영화제 시안 698:5654 실측 기반 (CRFF-47)
 * 컨테이너 598 중앙, MO 는 전폭(-16 은 .page-main 마진) + 헤드라인 28px(시안 부재 협의값 2026-08-03)
 */
.login-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: var(--spacing-80);
  padding-bottom: var(--spacing-120);
}

/* 타이포는 공통 .page-headline — 여기선 배치만 */
.login-headline {
  margin-bottom: var(--spacing-56);
}

.login-container {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-56);
  width: 100%;
  max-width: 598px;
  padding: 0 var(--spacing-24);
}

.login-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-40);
}

.login-fields {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-24);
}

/* 아이디 저장 — 시안 라벨은 Regular (공통 .form-check 는 Bold) */
.login-remember {
  font-weight: 400;
}

.login-submit {
  width: 100%;
}

.login-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-24);
}

/* SNS 섹션 — 점선 구분선 + 타이틀, 버튼 간 24 */
.login-sns {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-24);
}

/* 구분선 구조는 공통 .divider-title — 여기선 타이포 크기만 (로그인 시안 18px) */
.login-sns-title {
  font-size: 18px;
  line-height: 1.5;
}

.login-sns-help {
  display: flex;
  justify-content: center;
  gap: var(--spacing-4);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-text-caption);
  text-align: center;
}

.login-sns-help::before {
  content: "";
  flex-shrink: 0;
  width: 3px;
  height: 3px;
  margin-top: 11px;
  border-radius: var(--radius-full);
  background-color: currentColor;
}

/* 로그인 팝업(JI-8110) — 타이틀↔설명 간격이 표준(16)과 달리 12 */
.login-modal .modal-desc {
  margin-top: var(--spacing-12);
}

@media (max-width: 1023px) {
  .login-page {
    padding-top: var(--spacing-40);
    padding-bottom: var(--spacing-80);
  }

  .login-headline {
    /* 긴 2줄 문장 — 공통 MO 38 대신 32 (로그인 모바일 시안 749:21366 실측 2026-08-04) */
    font-size: 32px;
    margin-bottom: var(--spacing-40);
  }

  .login-container {
    max-width: none;
    padding: 0;
  }

  /* SNS 구분 타이틀 — 모바일 18→16 (로그인 시안 749:21414 실측 2026-08-04) */
  .login-sns-title {
    font-size: 16px;
  }

  /* 링크(회원가입·아이디/비번 찾기) — 모바일 18→15 (시안 627:31099) */
  .login-links .text-button {
    font-size: 15px;
  }

  /* 로그인 CTA·SNS 버튼 — 모바일은 h52/15(시안 749:21388/21417). PC XLarge h80·MO 공통 h64 대비 축소 */
  .login-page .button--xlarge {
    height: 52px;
    font-size: 15px;
  }

  /* 안내문 모바일 좌측정렬 + 14px (PC 는 중앙·16 유지) — 불릿 note 는 좌측정렬이 자연스러움 */
  .login-sns-help {
    justify-content: flex-start;
    font-size: 14px;
    text-align: left;
  }
  .login-sns-help::before {
    margin-top: 9px;   /* 14px 라인(21) 첫 줄 중앙 정렬 (base 11 은 16px 기준) */
  }
}

/* 태블릿(768~1023): 휴대폰·SNS 안내문만 중앙정렬 (폰 ≤767 은 좌측정렬 유지) */
@media (min-width: 768px) and (max-width: 1023px) {
  .login-sns-help {
    justify-content: center;
    text-align: center;
  }
}