/* =============================================================
   withdraw.css — 회원 탈퇴 (withdraw.html)
   Figma: db 홈페이지 (file hIJDNfXqLsMnSXdlkrZF6R) / node 556:3147
   라벨:값 행(.nk-my-kv*)은 css/components.css, 목록(.nk-my-plain-list),
   셀렉트(.nk-my-select--block), textarea(.nk-input--textarea)는
   css/mypage.css 재사용 (withdraw.html이 둘 다 로드한다).
   색상·간격·타이포는 전부 css/variables.css 의 --nk-* 토큰만 사용.
   ============================================================= */

.nk-withdraw {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--nk-space-40);              /* 40px */
  width: 100%;
  padding: var(--nk-space-60) var(--nk-space-24) var(--nk-space-80);
}

.nk-withdraw__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-withdraw__content {
  display: flex;
  flex-direction: column;
  gap: var(--nk-space-28);              /* 28px */
  width: var(--nk-form-width);          /* 328px */
  max-width: 100%;
}

.nk-withdraw__head {
  display: flex;
  flex-direction: column;
  gap: var(--nk-space-8);
  text-align: center;
}
.nk-withdraw__title {
  margin: 0;
}
.nk-withdraw__desc {
  margin: 0;
}

.nk-withdraw__notice {
  display: flex;
  flex-direction: column;
  gap: var(--nk-space-16);              /* 16px */
  width: 100%;
}
.nk-withdraw__notice-title {
  margin: 0;
}
/* 이용 중인 구독이 있을 때만 js/withdraw.js가 여는 경고 박스 */
.nk-withdraw__warn {
  margin: 0;
  padding: var(--nk-space-12) var(--nk-space-16);
  border: 1px solid var(--nk-color-red-line);
  border-radius: var(--nk-radius-8);
  background: var(--nk-color-red-bg);
  font: var(--nk-text-p14-m);
  color: var(--nk-color-red-1);
}
/* 보관 기간 표: 항목명이 길어 375px에서 한 줄에 안 들어간다. 공용 .nk-my-kv의
   nowrap을 이 화면에서만 풀고, 값이 안 들어가면 아랫줄로 내린다. */
.nk-withdraw__notice .nk-my-kv {
  flex-wrap: wrap;
}
.nk-withdraw__notice .nk-my-kv__label {
  white-space: normal;
}

.nk-withdraw__reason {
  display: flex;
  flex-direction: column;
  gap: var(--nk-space-16);              /* 16px */
  width: 100%;
}
.nk-withdraw__reason-title {
  margin: 0;
}
.nk-withdraw__field {
  display: flex;
  flex-direction: column;
  gap: var(--nk-space-8);
  width: 100%;
}
.nk-withdraw__field p {
  margin: 0;
}

.nk-withdraw__actions {
  display: flex;
  gap: var(--nk-space-16);
  width: 100%;
}
.nk-withdraw__actions .nk-btn {
  flex: 1 0 0;
  min-width: 0;
}

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

@media (max-width: 375px) {
  .nk-withdraw__card {
    padding: var(--nk-space-40) var(--nk-space-16);
  }
  .nk-withdraw__actions {
    flex-direction: column;
  }
}