/* 1920px: 기준 데스크톱 화면의 여백과 달 크기를 고정합니다. */
@media (min-width: 1920px) {
  .signup-page {
    padding-inline: 140px;
  }

  .moon-stage {
    width: 650px;
  }
}

/* 1400px: 넓은 데스크톱 비율을 조금 압축합니다. */
@media (max-width: 1400px) {
  .signup-page {
    grid-template-columns: minmax(430px, 0.95fr) minmax(480px, 1.05fr);
    gap: 40px;
    padding-inline: 70px;
  }

  .moon-stage {
    width: min(45vw, 580px);
  }
}

/* 960px: 폼과 달의 2단 구성을 유지합니다. */
@media (max-width: 960px) {
  .signup-page {
    grid-template-columns: minmax(390px, 1fr) minmax(350px, 0.9fr);
    gap: 24px;
    padding-inline: 40px;
  }

  .moon-stage {
    width: min(43vw, 450px);
  }

  h1 {
    font-size: clamp(2.35rem, 5vw, 3.2rem);
  }
}

/* 768px: 달을 상단, 입력 폼을 하단에 세로로 배치합니다. */
@media (max-width: 768px) {
  .signup_body .main_nav {
    border-left-color: rgba(245, 230, 189, 0.2);
    background: rgba(6, 22, 43, 0.98);
  }

  body {
    background-position: left center;
    background-size: auto 180%;
    background-attachment: scroll;
  }

  body::before {
    background: rgba(4, 17, 35, 0.72);
  }

  .signup-page {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 100svh;
    padding: 64px 28px 38px;
  }

  .moon-section {
    order: -1;
  }

  .moon-stage {
    width: min(62vw, 310px);
  }

  .signup-section {
    width: min(100%, 520px);
  }

  .signup-heading {
    text-align: center;
  }

  h1 {
    font-size: clamp(2rem, 8vw, 2.8rem);
  }

  .signup-description {
    margin-block: 12px 20px;
    font-size: 0.86rem;
  }

  .signup-form {
    gap: 11px;
  }

  .signup-options {
    gap: 14px;
    margin-top: 14px;
    padding: 17px 10px 8px;
  }
}

/* 480px: 작은 모바일의 좌우 여백과 달 크기를 줄입니다. */
@media (max-width: 480px) {
  .signup-page {
    padding: 54px 22px 34px;
  }

  .moon-stage {
    width: min(70vw, 270px);
  }

  h1 {
    font-size: clamp(2rem, 10vw, 2.55rem);
  }

  .policy-consent-group {
    gap: 6px;
  }

  .policy-consent {
    gap: 6px;
    font-size: 0.68rem;
  }
}

/* 320px: 최소 화면에서도 폼과 오류 문구가 잘리지 않게 합니다. */
@media (max-width: 320px) {
  .signup-page {
    padding: 46px 16px 34px;
  }

  .moon-stage {
    width: 205px;
  }

  h1 {
    font-size: 1.9rem;
  }

  .policy-consent {
    font-size: 0.62rem;
  }
}

/* 낮은 데스크톱 화면에서는 한 화면 안에 주요 내용을 유지합니다. */
@media (min-width: 769px) and (max-height: 820px) {
  .signup-page {
    padding-block: 24px;
  }

  h1 {
    font-size: 2.7rem;
  }

  .signup-description {
    margin-block: 10px 16px;
  }

  .signup-form {
    gap: 8px;
  }
}