/* =============================================================
   signup.css — 회원가입 (signup.html)
   Figma: db 홈페이지 (file hIJDNfXqLsMnSXdlkrZF6R) / node 121:1542
   레이아웃만 담당. 버튼/입력창/체크박스/약관동의는
   css/components.css, 아이디·휴대폰 인증 필드 구조는
   css/find-account.css 의 .nk-field* 를 그대로 재사용한다.
   색상·간격·타이포는 전부 css/variables.css 의 --nk-* 토큰만 사용.
   ============================================================= */

.nk-signup {
  display: flex;
  justify-content: center;
  width: 100%;
  padding: var(--nk-space-60) var(--nk-space-24) var(--nk-space-80);
}

.nk-signup__card {
  display: flex;
  justify-content: center;
  width: 601px;
  max-width: 100%;
  padding: var(--nk-space-60) var(--nk-space-24);
  background: var(--nk-color-surface);
  border-radius: var(--nk-radius-16);
}

.nk-signup__form {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--nk-space-28);              /* 28px */
  width: var(--nk-form-width);          /* 328px */
  max-width: 100%;
}

.nk-signup__title {
  margin: 0;
  text-align: center;
}

/* 아이디 / 이름 / 비밀번호 / 휴대폰 필드 그룹 (각 필드는 css/find-account.css 의 .nk-field 재사용) */
.nk-signup__fields {
  display: flex;
  flex-direction: column;
  gap: var(--nk-space-24);              /* 24px */
  width: 100%;
}

/* 비밀번호처럼 라벨 하나에 입력창이 여러 개 붙는 필드용 */
.nk-signup__stack {
  display: flex;
  flex-direction: column;
  gap: var(--nk-space-8);
  width: 100%;
}

/* 약관 동의 */
.nk-signup__terms {
  display: flex;
  flex-direction: column;
  gap: var(--nk-space-8);
  width: 100%;
}
.nk-signup__terms-title {
  margin: 0;
}
/* 체크 한 줄 + 오른쪽 "보기" 링크. 링크를 <label> 밖에 두기 위한 래퍼라
   체크박스 줄과 같은 높이를 유지한다. */
.nk-agree-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--nk-space-8);
  width: 100%;
}
/* 마케팅 하위 항목(문자/이메일) — 한 단 들여쓰기 */
.nk-agree-subs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--nk-space-8) var(--nk-space-16);
  padding-left: var(--nk-space-24);
}
.nk-signup__terms-foot {
  margin: 0;
  font: var(--nk-text-p13-r);
}

/* 완료 버튼 + 로그인 안내 */
.nk-signup__submit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--nk-space-16);
  width: 100%;
}
.nk-signup__login {
  display: flex;
  align-items: center;
  gap: var(--nk-space-8);
  margin: 0;
}
.nk-signup__login-link {
  border: 0;
  padding: 0;
  background: none;
  font: var(--nk-text-p15-b);
  color: var(--nk-color-black);
  text-decoration: none;
  cursor: pointer;
}
.nk-signup__login-link:hover {
  text-decoration: underline;
}

/* ============================================================
   반응형 : 768 / 375
   ============================================================ */
@media (max-width: 768px) {
  .nk-signup {
    padding: var(--nk-space-40) var(--nk-space-16) var(--nk-space-48);
  }
  .nk-signup__card {
    padding: var(--nk-space-48) var(--nk-space-16);
  }
}

@media (max-width: 375px) {
  .nk-signup__card {
    padding: var(--nk-space-40) var(--nk-space-16);
  }
}