/* assets/auth_register_wizard.css */

:root{
  --nb-bg:#F5F7F9;
  --nb-card:#fff;
  --nb-text:#1F2937;
  --nb-sub:#6B7280;
  --nb-line:#E5E7EB;
  --nb-blue:#0EA5E9;
  --nb-green:#22C55E;
  --nb-danger:#EF4444;
  --nb-warn:#F59E0B;
}

.nb-auth-body{ background: var(--nb-bg); color: var(--nb-text); margin:0; font-family: Pretendard, system-ui, -apple-system, Segoe UI, Roboto, sans-serif; }
/*
  상단 메뉴(헤더)는 사이트 공통 CSS(site.css) 기준으로 보여야 하므로,
  회원가입 위자드 CSS에서 헤더 스타일을 덮어쓰지 않습니다.
  (과거에는 auth CSS가 .nb-topbar/.nb-nav 등을 재정의하며 메뉴 라인이 깨지는 이슈가 있었습니다.)
*/

.nb-auth-main{ padding:34px 16px 70px; }
.nb-auth-wrap{ max-width: 900px; margin:0 auto; }
.nb-auth-title{ text-align:center; margin:10px 0 6px; font-size:28px; letter-spacing:-0.4px; }
.nb-auth-subtitle{ text-align:center; margin:0 0 18px; color:var(--nb-sub); font-size:13px; }

.nb-stepper{ display:flex; justify-content:center; gap:10px; margin: 8px 0 16px; flex-wrap:wrap; }
.nb-step-chip{
  border:1px solid var(--nb-line);
  background:#fff;
  padding:10px 14px;
  border-radius:999px;
  font-weight:700;
  font-size:13px;
  color:#374151;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.nb-step-chip:disabled{ opacity:.55; cursor:not-allowed; }
.nb-step-chip.is-active{ border-color: rgba(14,165,233,.55); box-shadow:0 0 0 3px rgba(14,165,233,.12); }
.nb-step-chip.is-done{ border-color: rgba(34,197,94,.55); }
.nb-step-chip .nb-step-num{
  width:22px; height:22px; border-radius:99px;
  display:inline-flex; align-items:center; justify-content:center;
  background:#F3F4F6; font-weight:800; font-size:12px;
}
.nb-step-chip.is-done .nb-step-num{ background: rgba(34,197,94,.12); color: #16A34A; }
.nb-step-chip.is-active .nb-step-num{ background: rgba(14,165,233,.12); color: #0284C7; }

.nb-card{
  background: var(--nb-card);
  border:1px solid var(--nb-line);
  border-radius:18px;
  box-shadow: 0 14px 40px rgba(17,24,39,.08);
  padding: 22px 20px;
  max-width: 640px;
  margin: 0 auto;
}

.nb-step-title{ margin:0; font-size:20px; letter-spacing:-0.2px; }
.nb-step-desc{ margin:6px 0 18px; color:var(--nb-sub); font-size:13px; }

.nb-field{ margin:12px 0; }
.nb-field label{ display:block; font-weight:800; font-size:13px; margin-bottom:7px; }
.req{ color: var(--nb-danger); font-weight:900; margin-left:4px; }

.nb-field input{
  width:100%;
  border:1px solid var(--nb-line);
  border-radius:12px;
  padding:12px 12px;
  font-size:14px;
  outline:none;
  background:#fff;
}
.nb-field input:focus{
  border-color: rgba(14,165,233,.55);
  box-shadow: 0 0 0 3px rgba(14,165,233,.14);
}
.nb-hint{ margin-top:7px; font-size:12px; color: var(--nb-sub); }
.nb-hint-warn{ color: #B45309; }

.nb-grid2{ display:grid; grid-template-columns: 1fr 1fr; gap:14px; }
@media(max-width:720px){
  .nb-grid2{ grid-template-columns: 1fr; }
  .nb-nav{ display:none; }
}

.nb-inline{ display:flex; gap:10px; align-items:center; }
.nb-inline input{ flex:1; }
.nb-address{ display:flex; gap:10px; flex-wrap:nowrap; align-items:center; }
.nb-address input{ flex:1; min-width:0; }

.nb-consent-box{
  border:1px solid var(--nb-line);
  background:#F9FAFB;
  border-radius:14px;
  padding:14px 14px;
  margin-bottom:10px;
}
.nb-consent-list{ display:flex; flex-direction:column; gap:10px; }
.nb-consent-item{
  border:1px solid var(--nb-line);
  border-radius:14px;
  padding:12px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  background:#fff;
}
.nb-consent-item.is-error{
  border-color: rgba(239,68,68,.65);
  box-shadow: 0 0 0 3px rgba(239,68,68,.10);
}

.nb-check{ display:flex; align-items:center; gap:10px; font-weight:700; font-size:13px; }
.nb-check input{ width:18px; height:18px; accent-color: var(--nb-blue); }

.nb-actions{
  display:flex;
  justify-content:space-between;
  gap:10px;
  margin-top:18px;
}
/* Step1처럼 버튼이 1개만 있을 때(이전 없음) -> 오른쪽 배치 */
.nb-actions.only-next{
  justify-content:flex-end;
}
.nb-btn{
  border:1px solid transparent;
  border-radius:12px;
  padding:11px 14px;
  font-weight:900;
  cursor:pointer;
  font-size:14px;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 120px;
}
.nb-btn:disabled{ opacity:.55; cursor:not-allowed; }

.nb-btn-primary{
  background: linear-gradient(135deg, var(--nb-blue), var(--nb-green));
  color:#fff;
  box-shadow: 0 10px 24px rgba(14,165,233,.22);
}
.nb-btn-primary:hover{ filter: brightness(0.98); }

/* ✅ 필수 미동의 등으로 '다음'이 잠시 비활성처럼 보이되, 클릭 시 안내가 뜨도록 실제 disabled는 아님 */
.nb-btn-primary.is-disabled{
  opacity:.55;
  filter: grayscale(.15);
}
.nb-btn-primary.is-disabled:hover{ filter: grayscale(.15) brightness(0.99); }

.nb-btn-ghost{
  background:#fff;
  border-color: var(--nb-line);
  color:#111827;
}
.nb-btn-light{
  background:#F3F4F6;
  border-color:#E5E7EB;
  color:#111827;
  padding:10px 12px;
  min-width: 110px;
  white-space: nowrap;
}
.nb-btn-light:hover{ background:#EEF2F7; }

/* ✅ 요청: 이전 버튼이 너무 안 보임 → 더 진하게 */
.nb-btn-secondary{
  background:#fff;
  border-color:#CBD5E1;
  color:#111827;
  box-shadow: 0 6px 16px rgba(17,24,39,.06);
}
.nb-btn-secondary:hover{
  border-color:#94A3B8;
  box-shadow: 0 10px 22px rgba(17,24,39,.10);
}

.nb-alert{
  border-radius:14px;
  padding:12px 12px;
  font-weight:900;
  font-size:13px;
  margin-bottom:14px;
}
.nb-alert.error{ background: rgba(239,68,68,.10); border:1px solid rgba(239,68,68,.35); color:#B91C1C; }
.nb-alert.success{ background: rgba(34,197,94,.10); border:1px solid rgba(34,197,94,.35); color:#166534; }
.nb-alert.info{ background: rgba(14,165,233,.10); border:1px solid rgba(14,165,233,.35); color:#075985; }

.nb-meter{ margin-top:8px; height:8px; background:#E5E7EB; border-radius:999px; overflow:hidden; }
.nb-meter-bar{ height:100%; background: linear-gradient(90deg, #F59E0B, #22C55E); width:0%; transition: width .18s ease; }

.nb-success-actions{ margin-top:16px; display:flex; justify-content:center; }

/* Modal */
.nb-modal{ position:fixed; inset:0; z-index:9999; }
.nb-modal-backdrop{ position:absolute; inset:0; background: rgba(0,0,0,.45); }
.nb-modal-dialog{
  position:relative;
  max-width: 760px;
  width: calc(100% - 24px);
  margin: 40px auto;
  background:#fff;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.25);
  box-shadow: 0 18px 55px rgba(0,0,0,.25);
  overflow:hidden;
}
.nb-modal-header{ padding:14px 16px; border-bottom:1px solid var(--nb-line); display:flex; align-items:center; justify-content:space-between; gap:10px; }
.nb-modal-title{ margin:0; font-size:16px; }
.nb-modal-x{ border:none; background:transparent; font-size:22px; font-weight:900; cursor:pointer; padding:6px 10px; }
.nb-modal-body{ padding:16px; max-height: 65vh; overflow:auto; line-height:1.65; font-size:13px; color:#111827; }
.nb-modal-body h4{ margin:14px 0 8px; }
.nb-modal-body .terms-box{ border:1px solid var(--nb-line); background:#F9FAFB; border-radius:14px; padding:12px; }
.nb-modal-body table{ width:100%; border-collapse:collapse; margin:8px 0; }
.nb-modal-body th, .nb-modal-body td{ border:1px solid var(--nb-line); padding:10px; vertical-align:top; }
.nb-modal-footer{ padding:12px 16px; border-top:1px solid var(--nb-line); display:flex; justify-content:flex-end; }

/* 입력 오류 시 입력칸 강조 */
.nb-field input.is-error{
  border-color: rgba(239, 68, 68, .65) !important;
  box-shadow: 0 0 0 4px rgba(239, 68, 68, .12) !important;
}

/* 이용약관 모달 내 글씨가 흐릿하게 보이지 않도록 강제(모바일 가독성 개선) */
.nb-modal-body .terms-box *{
  color:#111827 !important;
  opacity:1 !important;
}


/* -------- Address Postcode Layer (WebView-safe) -------- */
.nb-no-scroll{ overflow:hidden !important; }

.nb-postcode-layer{
  position:fixed;
  left:0; top:0; right:0; bottom:0;
  z-index:9999;
  background: rgba(0,0,0,.35);
}

.nb-postcode-backdrop{
  position:absolute; inset:0;
}

.nb-postcode-box{
  position:absolute;
  left:12px; right:12px;
  top:12px; bottom:12px;
  background:#fff;
  border-radius:16px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  box-shadow: 0 12px 40px rgba(0,0,0,.18);
}

.nb-postcode-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 14px;
  border-bottom:1px solid var(--nb-line);
  background:#fff;
}

.nb-postcode-title{
  font-weight:800;
  color: var(--nb-text);
  letter-spacing:-.2px;
}

.nb-postcode-close{
  border:0;
  background:#fff;
  color: var(--nb-sub);
  font-weight:700;
  padding:6px 10px;
  border-radius:10px;
}
.nb-postcode-close:active{ transform: translateY(1px); }

.nb-postcode-frame{
  flex:1;
  min-height:0;
}

.nb-postcode-frame iframe{
  width:100% !important;
  height:100% !important;
  border:0 !important;
}

/* 데스크톱에서는 너무 커지지 않게 */
@media (min-width: 900px){
  .nb-postcode-box{
    left: calc(50% - 360px);
    right: calc(50% - 360px);
    top: 60px;
    bottom: 60px;
  }
}

/* --- Daum Postcode: 상단 공지(바로가기) 클릭/호버 차단용 마스크 --- */
.nb-postcode-frame{ position: relative; }
.nb-postcode-frame::before{
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 30px;           /* 필요시 조정 */
  background: #ffffff;
  z-index: 999999;
  pointer-events: auto;   /* 핵심: 클릭/호버가 iframe으로 전달되지 않게 */
}
.nb-postcode-frame iframe{
  position: relative;
  z-index: 1;
}