/* =====================================================
   register.css - 회원가입 페이지 전용 스타일
   사용: theme.css + component.css + login.css + register.css
   ===================================================== */

/* ── 패널 너비 확장 (login.css의 420px 오버라이드) ─── */
.reg-panel { max-width:520px !important; }

/* ── 진행 단계 ───────────────────────────────────────── */
.reg-steps {
  display:flex; align-items:center;
  margin-bottom:28px;
}
.reg-step {
  display:flex; flex-direction:column; align-items:center; gap:4px;
  flex-shrink:0;
}
.reg-step-num {
  width:32px; height:32px; border-radius:50%;
  border:2px solid var(--border-color);
  background:var(--card-bg); color:var(--text-muted);
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:700; transition:all .3s;
}
.reg-step-label {
  font-size:11px; color:var(--text-muted); font-weight:600;
  white-space:nowrap; transition:color .3s;
}
.reg-step.active .reg-step-num {
  background:var(--primary); border-color:var(--primary);
  color:#fff; box-shadow:0 0 0 4px rgba(3,199,90,0.15);
}
.reg-step.active .reg-step-label { color:var(--primary); }
.reg-step.done .reg-step-num {
  background:var(--primary-light); border-color:var(--primary);
  color:var(--primary);
}
.reg-step.done .reg-step-label { color:var(--primary); }
.reg-step-line {
  flex:1; height:2px; background:var(--border-color);
  margin:0 8px; margin-bottom:18px; transition:background .3s;
}

/* ── 필드 ─────────────────────────────────────────────── */
.reg-field { margin-bottom:16px; }

/* 입력 상태 */
.login-input.input-error   { border-color:var(--color-red) !important; }
.login-input.input-success { border-color:var(--primary) !important; }

/* ── 필드 메시지 ─────────────────────────────────────── */
.reg-field-msg {
  font-size:12px; margin-top:5px; min-height:16px;
  display:flex; align-items:center; gap:4px;
  transition:all .2s;
}
.reg-field-msg.error   { color:var(--color-red); }
.reg-field-msg.success { color:var(--primary-dark); }
.reg-field-msg.info    { color:var(--color-blue); }

/* ── 필수 표시 ───────────────────────────────────────── */
.reg-req { color:var(--color-red); margin-left:2px; }

/* ── 비밀번호 강도 바 ────────────────────────────────── */
.reg-pw-strength {
  display:flex; align-items:center; gap:10px;
  margin-top:8px;
}
.reg-pw-strength-bar {
  flex:1; height:4px; background:var(--border-color);
  border-radius:4px; overflow:hidden;
}
.reg-pw-strength-fill {
  height:100%; width:0; border-radius:4px;
  transition:width .3s, background .3s;
}
.reg-pw-strength-fill.weak   { background:#ff4b4b; }
.reg-pw-strength-fill.fair   { background:var(--color-orange); }
.reg-pw-strength-fill.good   { background:var(--color-blue); }
.reg-pw-strength-fill.strong { background:var(--primary); }
.reg-pw-strength-label {
  font-size:11px; font-weight:700; min-width:40px;
  text-align:right;
}
.reg-pw-strength-label.weak   { color:#ff4b4b; }
.reg-pw-strength-label.fair   { color:var(--color-orange); }
.reg-pw-strength-label.good   { color:var(--color-blue); }
.reg-pw-strength-label.strong { color:var(--primary); }

/* ── 비밀번호 규칙 ───────────────────────────────────── */
.reg-pw-rules {
  background:var(--body-bg); border:1px solid var(--border-color);
  border-radius:8px; padding:12px 14px; margin-top:8px;
}
.reg-pw-rule-title {
  font-size:12px; color:var(--text-sub); font-weight:600;
  margin-bottom:8px; display:flex; align-items:center; gap:6px;
}
.reg-pw-rule-title i { color:var(--primary); }
.reg-pw-rule-list {
  list-style:none; padding:0; margin:0;
  display:flex; flex-direction:column; gap:5px;
}
.reg-pw-rule {
  font-size:12px; color:var(--text-muted);
  display:flex; align-items:center; gap:6px;
  transition:color .2s;
}
.reg-pw-rule i { font-size:12px; transition:color .2s; }
.reg-pw-rule.pass { color:var(--primary-dark); }
.reg-pw-rule.pass i { color:var(--primary); }

/* ── 인증코드 영역 ───────────────────────────────────── */
.reg-input-btn-wrap {
  display:flex; gap:8px; align-items:stretch;
  width:100%;
}
.reg-input-btn-wrap .login-input-wrap {
  flex:1; min-width:0;
}
.reg-verify-btn {
  display:inline-flex !important; align-items:center; justify-content:center;
  padding:12px 14px; white-space:nowrap;
  background:#333333 !important; color:#ffffff !important;
  border:none; border-radius:8px;
  font-size:13px; font-weight:600; cursor:pointer;
  font-family:var(--font-family); transition:background .15s;
  flex-shrink:0; min-width:100px;
  visibility:visible !important; opacity:1 !important;
}
.reg-verify-btn:hover    { background:#333; }
.reg-verify-btn:disabled { background:var(--primary); cursor:default; opacity:0.8; }
.reg-verify-btn.resend   { background:#555; }
.reg-verify-btn--confirm {
  background:var(--primary);
}
.reg-verify-btn--confirm:hover { background:var(--primary-dark); }

.reg-code-wrap { margin-top:8px; }

/* 인증 타이머 */
.reg-timer {
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  font-size:12px; font-weight:700; color:var(--color-orange);
  pointer-events:none;
}

/* ── 이용약관 ─────────────────────────────────────────── */
.reg-terms {
  background:var(--body-bg); border:1px solid var(--border-color);
  border-radius:8px; padding:14px 16px; margin-bottom:8px;
}
.reg-terms-all {
  display:flex; align-items:center; gap:8px;
  font-size:14px; color:var(--text-main); cursor:pointer;
  margin-bottom:10px;
}
.reg-terms-all input { accent-color:var(--primary); width:16px; height:16px; }
.reg-terms-divider {
  height:1px; background:var(--border-color); margin-bottom:10px;
}
.reg-terms-item {
  display:flex; align-items:center; gap:8px;
  font-size:13px; color:var(--text-sub); cursor:pointer;
  padding:4px 0;
}
.reg-terms-item input { accent-color:var(--primary); flex-shrink:0; }
.reg-terms-item span  { flex:1; }
.reg-terms-link {
  font-size:12px; color:var(--color-blue);
  text-decoration:underline; flex-shrink:0;
}

/* ── 버튼 행 ─────────────────────────────────────────── */
.reg-btn-row {
  display:flex; gap:8px; align-items:center; margin-top:4px;
}
.reg-btn-back {
  padding:13px 18px;
  background:var(--card-bg); color:var(--text-sub);
  border:1.5px solid var(--border-color); border-radius:8px;
  font-size:14px; font-weight:600; cursor:pointer;
  font-family:var(--font-family); transition:all .15s;
  display:flex; align-items:center; gap:6px; flex-shrink:0;
}
.reg-btn-back:hover {
  border-color:var(--text-sub); color:var(--text-main);
}

/* ── 완료 화면 ───────────────────────────────────────── */
.reg-complete {
  text-align:center; padding:20px 0;
}
.reg-complete-icon {
  width:72px; height:72px; border-radius:50%;
  background:var(--primary); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:36px; margin:0 auto 20px;
  animation:popIn .5s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}
@keyframes popIn {
  0%   { transform:scale(0); opacity:0; }
  100% { transform:scale(1); opacity:1; }
}
.reg-complete-title {
  font-size:20px; font-weight:800; color:var(--text-main);
  margin-bottom:10px;
}
.reg-complete-desc {
  font-size:14px; color:var(--text-sub);
  line-height:1.7; margin-bottom:28px;
}

/* ── 인증완료 뱃지 ───────────────────────────────────── */
.reg-verified-badge {
  display:inline-flex; align-items:center; gap:4px;
  font-size:11px; font-weight:700; color:var(--primary-dark);
  background:var(--primary-light); padding:2px 8px;
  border-radius:20px; margin-left:6px;
  vertical-align:middle;
}
.reg-verified-badge i { font-size:11px; color:var(--primary); }