/* BASIC css start */
/* ============================================================================
 * 아이디 · 비밀번호 찾기 / 찾기 결과 — new_password.css (인클리어)
 * ----------------------------------------------------------------------------
 * 두 페이지 CSS 탭에 같은 파일을 넣는다.
 *   · 아이디/패스워드 찾기 통합템플릿 (new_password)
 *   · 아이디/비밀번호 찾기 결과 확인 (lost_password_result)
 *
 * 바깥 껍데기(.login-wrapper / .login-wrap / .page-title-wrap)와 색 토큰은
 * novels.css 의 로그인 리스킨을 그대로 쓴다 — 어헤이 로즈도 자동 전환된다.
 *
 * ⚠ 입력칸은 novels.css 의 '밑줄' 규칙을 쓰지 않는다.
 *   그래서 마크업의 <ul> 에서 .form-textfield 를 뺐다. 여기서 박스형으로 새로 그린다.
 * ⚠ 필드 래퍼(#find_id_email_wrap 등)의 인라인 display 는 메이크샵 스크립트가
 *   직접 건드린다. 여기서 display 를 강제하면 라디오 전환이 깨진다.
 * ========================================================================== */

.login-wrapper .login-wrap.nv-fd  { max-width: 448px; }
.login-wrapper .login-wrap.nv-fdr { max-width: 448px; }

/* [hidden] 이 클래스 display 에 밀리지 않게(탭 패널) */
.nv-fd [hidden] { display: none !important; }

/* 스크린리더 전용 — 라벨 문구는 placeholder 로 옮기고 라벨은 여기로 숨긴다 */
.nv-fd .nv-sr {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* ── 카드 ─────────────────────────────────────────────────────────── */
.nv-fd .nv-fd-card {
  padding: 8px 28px 30px;
  border: 1px solid var(--lg-line); border-radius: 20px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04),
              0 24px 48px -34px rgba(16, 24, 40, .4);
}

/* ── 탭 ───────────────────────────────────────────────────────────── */
.nv-fd .nv-fd-tabs {
  display: grid; grid-template-columns: 1fr 1fr;
  margin: 0 0 24px;
  border-bottom: 1px solid var(--lg-line);
}
.nv-fd .nv-fd-tab {
  appearance: none; border: 0; background: none; cursor: pointer;
  padding: 16px 4px 15px; margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  font-size: 14.5px; font-weight: 600; letter-spacing: -.02em;
  color: var(--lg-mute);
  transition: color .18s ease, border-color .18s ease;
}
.nv-fd .nv-fd-tab:hover { color: var(--lg-sub); }
.nv-fd .nv-fd-tab.is-on {
  color: var(--lg-ink); font-weight: 700;
  border-bottom-color: var(--color-brand-blue);
}

/* ── 안내문 ───────────────────────────────────────────────────────── */
.nv-fd .nv-fd-lead {
  margin: 0 0 16px; font-size: 13px; line-height: 1.65;
  color: var(--lg-sub); word-break: keep-all;
}
.nv-fd .nv-fd-lead em {
  display: block; margin-top: 4px; font-style: normal;
  font-size: 12.5px; color: var(--color-brand-blue);
}

/* ── 찾기 방법 (세그먼트 컨트롤) ──────────────────────────────────
   라디오 점은 감추고 칸 전체를 스위치처럼 쓴다. 클릭은 label 이 받아
   안쪽 radio 를 그대로 켜므로 메이크샵 스크립트 동작에 영향이 없다. */
.nv-fd .nv-fd-seg {
  display: flex; gap: 3px; margin: 0 0 20px;
  padding: 3px; border-radius: 999px;
  background: #f2f3f6;
}
.nv-fd .nv-fd-seg > label {
  flex: 1 1 0; min-width: 0; margin: 0;
  display: inline-flex; align-items: center; justify-content: center;
  height: 38px; padding: 0 6px; border-radius: 999px;
  font-size: 13px; font-weight: 600; color: var(--lg-sub);
  white-space: nowrap; cursor: pointer; user-select: none;
  transition: background-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.nv-fd .nv-fd-seg > label:hover { color: var(--lg-ink); }
.nv-fd .nv-fd-seg > label:has(input:checked) {
  background: #fff; color: var(--color-brand-blue);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .1);
}
/* 라디오 자체는 숨긴다(접근성/동작은 유지) */
.nv-fd .nv-fd-seg input[type="radio"] {
  position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0;
}
.nv-fd .nv-fd-seg > label:has(input:focus-visible) {
  box-shadow: 0 0 0 2px rgba(var(--color-brand-rgb), .35);
}

/* ── 입력 필드 (박스형 + 앞 아이콘) ───────────────────────────────
   아이콘은 new_password.js 가 입력칸 id 를 보고 심는다. */
.nv-fd .frm-list { margin: 0; padding: 0; list-style: none; }
.nv-fd .frm-list > li { position: relative; margin: 0 0 10px; }
.nv-fd .frm-list > li:last-child { margin-bottom: 0; }

.nv-fd .nv-fd-ic {
  position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; color: var(--lg-mute);
  pointer-events: none; transition: color .18s ease;
}
.nv-fd .nv-fd-ic svg { width: 100%; height: 100%; }

.nv-fd .frm-list input[type="text"],
.nv-fd .frm-list input[type="password"],
.nv-fd .frm-list input[type="tel"],
.nv-fd .frm-list input[type="email"] {
  width: 100%; height: 54px; box-sizing: border-box;
  padding: 0 16px 0 44px; margin: 0;
  border: 1px solid var(--lg-line); border-radius: 13px;
  background: #fafbfc; box-shadow: none;
  font-size: 15px; color: var(--lg-ink);
  transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease;
}
.nv-fd .frm-list input::placeholder { color: var(--lg-mute); }
/* 포커스는 li 의 :focus-within 으로 건다.
   입력칸에 직접 :focus 를 걸면 일부 환경에서 매칭이 들쭉날쭉했다. */
.nv-fd .frm-list input:focus { outline: 0; }
.nv-fd .frm-list li:focus-within input {
  background: #fff;
  border-color: var(--color-brand-blue);
  box-shadow: 0 0 0 3px rgba(var(--color-brand-rgb), .12);
}
.nv-fd .frm-list li:focus-within .nv-fd-ic { color: var(--color-brand-blue); }
.nv-fd .frm-list input:-webkit-autofill,
.nv-fd .frm-list input:-webkit-autofill:hover,
.nv-fd .frm-list input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #fff inset;
  -webkit-text-fill-color: var(--lg-ink);
}

/* ── 버튼 ─────────────────────────────────────────────────────────── */
.nv-fd .nv-fd-btns { margin-top: 22px; }
.nv-fd .nv-fd-go {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 54px; border-radius: 14px;
  font-size: 15.5px; font-weight: 700; letter-spacing: -.02em;
  text-decoration: none;
  background: var(--color-brand-blue); color: #fff;
  box-shadow: 0 10px 22px -14px rgba(var(--color-brand-rgb), .9);
  transition: filter .16s ease, transform .12s ease;
}
.nv-fd .nv-fd-go + .nv-fd-go { margin-top: 9px; }
.nv-fd .nv-fd-go:hover  { filter: brightness(1.1); }
.nv-fd .nv-fd-go:active { transform: translateY(1px); }

/* 보조 동작은 큰 버튼 대신 텍스트 링크로 — 무게중심을 하나로 */
.nv-fd .nv-fd-back {
  display: block; margin: 16px auto 0; width: fit-content;
  font-size: 13px; color: var(--lg-mute); text-decoration: none;
  transition: color .16s ease;
}
.nv-fd .nv-fd-back:hover {
  color: var(--color-brand-blue); text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── 본인인증 안내 ────────────────────────────────────────────────── */
.nv-fd .nv-fd-auth {
  margin-top: 18px; padding: 18px 18px 20px;
  border: 1px solid var(--lg-line); border-radius: 14px;
  background: #fafbfc;
}
.nv-fd .nv-fd-auth-tx {
  margin: 0; font-size: 13px; line-height: 1.65;
  color: var(--lg-sub); word-break: keep-all;
}
.nv-fd .nv-fd-auth-links {
  display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px;
}
.nv-fd .nv-fd-auth-links a {
  font-size: 12.5px; color: var(--color-brand-blue);
  text-decoration: underline; text-underline-offset: 3px;
}
.nv-fd .nv-fd-auth .nv-fd-btns { margin-top: 16px; }

/* ============================================================================
 * 찾기 결과 (lost_password_result)
 * ========================================================================== */
.nv-fdr .nv-fdr-box {
  display: flex; flex-direction: column; align-items: center;
  gap: 5px; padding: 40px 24px 34px; text-align: center;
  border: 1px solid var(--lg-line); border-radius: 20px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04),
              0 24px 48px -34px rgba(16, 24, 40, .4);
}
.nv-fdr .nv-fdr-ico {
  display: flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; margin-bottom: 10px; border-radius: 50%;
}
.nv-fdr .nv-fdr-ico svg { width: 30px; height: 30px; }
.nv-fdr .is-ok   .nv-fdr-ico { background: rgba(var(--color-brand-rgb), .08); color: var(--color-brand-blue); }
.nv-fdr .is-fail .nv-fdr-ico { background: #fdeeeb; color: #d97764; }

.nv-fdr .nv-fdr-label {
  margin: 0; font-size: 13px; font-weight: 600; color: var(--lg-sub);
}
.nv-fdr .nv-fdr-value {
  margin: 3px 0 0; font-size: 23px; font-weight: 800;
  letter-spacing: -.02em; color: var(--lg-ink); word-break: break-all;
}
.nv-fdr .nv-fdr-note {
  margin: 12px 0 0; font-size: 12.5px; line-height: 1.65;
  color: var(--lg-mute); word-break: keep-all;
}
.nv-fdr .nv-fd-btns { margin-top: 20px; }

/* ── 모바일 ───────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .nv-fd .nv-fd-card { padding: 4px 18px 24px; border-radius: 18px; }
  .nv-fd .nv-fd-tabs { margin-bottom: 20px; }
  .nv-fd .nv-fd-tab  { padding: 14px 4px 13px; font-size: 14px; }
  .nv-fd .nv-fd-seg > label { height: 36px; font-size: 12.5px; }
  .nv-fd .frm-list input[type="text"] { height: 50px; font-size: 14.5px; }
  .nv-fd .nv-fd-go { height: 50px; font-size: 15px; }
  .nv-fdr .nv-fdr-box { padding: 32px 18px 28px; }
  .nv-fdr .nv-fdr-value { font-size: 20px; }
}

/* BASIC css end */