/* =============================================================
   find-account.css — 아이디 / 비밀번호 찾기 팝업 (nk-find)
   로그인 모달(nk-login)의 "아이디 /비밀번호 찾기" 클릭 시 그 위에 열린다.
   Figma: db 홈페이지 / node 320:1601, 330:1737, 335:19402, 335:19419
   - 모달 셸(.nk-modal / .nk-modal__dialog / .nk-modal__close)과 입력창(.nk-input)은
     css/components.css 재사용.
   - 탭 전환 / 단계 표시는 js/find-account.js 가 [hidden] 토글로 처리.
   - 색상·간격·타이포는 css/variables.css 의 --nk-* 토큰 재사용.
   ============================================================= */

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

.nk-find__title {
  margin: 0;
  font: var(--nk-text-p32-b);
  color: var(--nk-color-black);
  text-align: center;
}

/* ----- 탭 (아이디 찾기 / 비밀번호 찾기) ---------------------- */
.nk-find__tabs {
  display: flex;
  gap: var(--nk-space-8);
}
.nk-find__tab {
  padding: var(--nk-pad-pill);          /* 6px 16px */
  border: 0;
  border-radius: var(--nk-radius-pill); /* 40px */
  font: var(--nk-text-p15-m);
  color: var(--nk-color-black);
  background: var(--nk-color-blue-line);
  cursor: pointer;
  white-space: nowrap;
}
.nk-find__tab.is-active {
  color: var(--nk-color-white);
  background: var(--nk-color-blue-1);
}

/* 비밀번호 재설정 완료 화면(js: .nk-find.is-final)에서는 타이틀 / 탭 숨김 */
.nk-find.is-final .nk-find__title,
.nk-find.is-final .nk-find__tabs {
  display: none;
}

/* ----- 패널 / 단계 --------------------------------------- */
.nk-find__panel,
.nk-find__step {
  display: flex;
  flex-direction: column;
  gap: var(--nk-space-28);
  width: 100%;
}
.nk-find__panel[hidden],
.nk-find__step[hidden] {
  display: none;
}

.nk-find__form {
  display: flex;
  flex-direction: column;
  gap: var(--nk-space-24);              /* 24px */
  width: 100%;
}

/* ----- 필드 -------------------------------------------- */
.nk-field {
  display: flex;
  flex-direction: column;
  gap: var(--nk-space-8);
  width: 100%;
}
.nk-field__label {
  font: var(--nk-text-p13-r);
  color: var(--nk-color-black);
}
/* 입력창은 .nk-input (css/components.css) 사용 */

/* 아이디 찾기 완료 – 결과 값 (Figma 330:1737: 흰 배경 + 검정 테두리) */
.nk-find__result {
  margin: 0;
  width: 100%;
  padding: var(--nk-pad-input);
  border: 1px solid var(--nk-color-black);
  border-radius: var(--nk-radius-4);
  font: var(--nk-text-p15-r);
  color: var(--nk-color-black);
  background: var(--nk-color-white);
}

/* ----- 휴대폰 인증번호 줄 --------------------------------- */
.nk-field__row {
  display: flex;
  gap: var(--nk-space-4);
  width: 100%;
}
.nk-field__row > .nk-input {
  flex: 1 1 0;
  min-width: 0;
}
.nk-field__code {
  display: block;
  position: relative;
  flex: 1 1 0;
  min-width: 0;
}
.nk-field__code .nk-input {
  padding-right: 56px;                  /* 타이머 자리 확보 */
}
.nk-field__timer {
  position: absolute;
  top: 50%;
  right: var(--nk-space-16);
  transform: translateY(-50%);
  font: var(--nk-text-p15-r);
  color: var(--nk-color-gray-1);
  pointer-events: none;
}
.nk-field__send {
  flex-shrink: 0;
  height: var(--nk-control-height);     /* 44px */
  padding-inline: var(--nk-space-16);
  border: 1px solid var(--nk-color-gray-1);
  border-radius: var(--nk-radius-4);
  font: var(--nk-text-p15-m);
  color: var(--nk-color-black);
  background: var(--nk-color-white);
  cursor: pointer;
  white-space: nowrap;
}
.nk-field__send:disabled {
  opacity: 0.5;
  cursor: default;
}
.nk-field__hint {
  margin: 0;
  font: var(--nk-text-p13-r);
  color: var(--nk-color-black);
}
.nk-field__hint--success {
  color: var(--nk-color-green-1);
}
.nk-field__hint--error {
  color: var(--nk-color-red-1);
}

/* ----- 제출 / 보조 버튼 ---------------------------------- */
.nk-find__submit-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--nk-space-16);
  width: 100%;
}
.nk-find__actions {
  display: flex;
  flex-direction: column;
  gap: var(--nk-space-8);
  width: 100%;
}
/* 제출/보조 버튼은 .nk-btn 계열 (css/components.css) 사용:
   기본 = .nk-btn.nk-btn--primary.nk-btn--block
   보조 = .nk-btn.nk-btn--outline.nk-btn--block */

/* ----- 하단 안내 ("아이디가 기억나지 않으세요?") ----------- */
.nk-find__foot {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--nk-space-8);
  font: var(--nk-text-p15-r);
  color: var(--nk-color-black);
}
.nk-find__foot-link {
  padding: 0;
  border: 0;
  background: none;
  font: var(--nk-text-p15-b);
  color: var(--nk-color-black);
  cursor: pointer;
}
.nk-find__foot-link:hover {
  text-decoration: underline;
}

/* ----- 완료 메시지 (비밀번호 재설정 완료) ------------------ */
.nk-find__done {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--nk-space-16);
  text-align: center;
}
.nk-find__done-text {
  margin: 0;
  font: var(--nk-text-p15-r);
  color: var(--nk-color-black);
}

/* ============================================================
   반응형 : 768 / 375
   ============================================================ */
@media (max-width: 768px) {
  .nk-find__title {
    font: var(--nk-text-p24-b);
  }
}