/* site/pages/signup.css — 회원가입 · 가입 확인 · 이메일 확인 대기 안내 · 새 비밀번호 입력 전용
   한 화면에 단계 셋(동의 게이트 → 입력 → 확인 메일 안내)을 카드로 쌓고, 동의 전에는 입력 카드가 잠긴 모양이 된다.
   메일의 링크로 여는 화면(가입 확인·새 비밀번호 입력)은 같은 결과 카드를 쓴다.
   카드·모달의 바탕과 테두리는 로그인(login.css)과 같은 값을 쓴다. */

.signup-shell { max-width: 560px; margin: 0 auto; }
.signup-title { font-size: var(--fs-24); font-weight: var(--fw-bold); color: var(--c-primary); text-align: center; margin: var(--sp-5) 0 var(--sp-6); }
.signup-card { background: var(--c-white); border: var(--bd); border-radius: var(--r-xl); padding: var(--sp-7); box-shadow: var(--shadow-md); margin-bottom: var(--sp-5); }
.signup-step-title { font-size: var(--fs-18); font-weight: var(--fw-bold); color: var(--c-primary); margin: var(--sp-4) 0 var(--sp-5); }

/* ── 동의 게이트 ── */
.consent-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3) 0; border-bottom: 1px dashed var(--c-line); }
.consent-row:last-child { border-bottom: none; padding-bottom: 0; }
.consent-row .checkbox { font-weight: var(--fw-regular); word-break: keep-all; align-items: flex-start; }
.consent-row .chk { margin-top: 2px; }
.consent-view { background: none; border: none; padding: 0; flex: none; font-size: var(--fs-14); color: var(--c-text-soft); text-decoration: underline; text-underline-offset: 2px; }
.consent-view:hover { color: var(--c-primary); }

/* ── 입력 — 동의 전에는 잠긴 모양이다 ── */
#signupFields[disabled] { opacity: .45; }
#signupFields { border: none; padding: 0; margin: 0; min-width: 0; }
#signupFields .field:last-of-type { margin-bottom: var(--sp-6); }

/* ── 확인 메일 안내 ── */
.signup-sent { text-align: center; }
.signup-sent .sent-email { font-size: var(--fs-17); font-weight: var(--fw-bold); color: var(--c-primary); margin-bottom: var(--sp-3); word-break: break-all; }
.signup-sent .sent-message { font-size: var(--fs-15); color: var(--c-text-soft); line-height: var(--lh-base); word-break: keep-all; margin-bottom: var(--sp-6); }

.signup-login { background: var(--c-surface-tint); border-radius: var(--r-lg); padding: var(--sp-5); text-align: center; font-size: var(--fs-15); color: var(--c-text-soft); word-break: keep-all; }
.signup-login a { font-weight: var(--fw-bold); color: var(--c-accent); text-decoration: underline; text-underline-offset: 3px; }

/* ── 전문 보기 모달 — 원고가 길어 본문만 스크롤한다 ── */
.legal-modal { background: var(--c-white); border-radius: var(--r-xl); box-shadow: var(--shadow-lg); width: 720px; max-width: 100%; display: flex; flex-direction: column; max-height: 82vh; }
.legal-modal__head { padding: var(--sp-3) var(--sp-3) var(--sp-5) var(--sp-6); border-bottom: var(--bd); }
.legal-modal__head h3 { margin: 0; padding-right: var(--sp-3); font-size: var(--fs-18); font-weight: var(--fw-bold); color: var(--c-primary); }
/* 고지문은 선택·복사할 수 있는 텍스트로 보인다 — 원고 마크업은 legal.css가 꾸민다 */
.legal-modal__body { overflow-y: auto; padding: var(--sp-6); font-size: var(--fs-15); line-height: var(--lh-loose); color: var(--c-text); }
.legal-modal__foot { display: flex; justify-content: flex-end; gap: var(--sp-2); padding: var(--sp-4) var(--sp-6); border-top: var(--bd); }

/* ── 가입 확인 · 이메일 확인 대기 안내 — 결과 카드 ── */
.verify-card { text-align: center; padding: var(--sp-8) var(--sp-7); }
.verify-card h1 { font-size: var(--fs-22); font-weight: var(--fw-bold); color: var(--c-primary); margin: var(--sp-4) 0 var(--sp-3); }
.verify-card p { font-size: var(--fs-15); color: var(--c-text-soft); line-height: var(--lh-base); word-break: keep-all; margin-bottom: var(--sp-6); }
.verify-card .verify-email { font-size: var(--fs-17); font-weight: var(--fw-bold); color: var(--c-primary); word-break: break-all; margin-bottom: var(--sp-3); }
.verify-mark { width: 56px; height: 56px; border-radius: var(--r-full); display: inline-flex; align-items: center; justify-content: center; margin-bottom: var(--sp-5); }
.verify-mark--info { background: color-mix(in srgb, var(--c-primary) 10%, var(--c-white)); color: var(--c-primary); }
.verify-mark--ok { background: color-mix(in srgb, var(--c-success) 12%, var(--c-white)); color: var(--c-success); }
.verify-mark--warn { background: color-mix(in srgb, var(--c-warning) 18%, var(--c-white)); color: var(--c-warning); }
/* 결과 카드 안의 입력 칸(새 비밀번호) — 카드는 가운데 맞춤이지만 입력 칸과 규칙 안내는 왼쪽에서 읽는다 */
.verify-form { text-align: left; margin-top: var(--sp-6); }
.verify-card .verify-form .help { font-size: var(--fs-13); color: var(--c-text-mute); margin-bottom: 0; }

/* ── 반응형 ── */
@media (max-width: 767px) {
  .signup-card { padding: var(--sp-6) var(--sp-5); }
  .consent-row { align-items: flex-start; flex-wrap: wrap; }
  .legal-modal { max-height: 88vh; }
  .legal-modal__body { padding: var(--sp-5); }
}

/* ── 인쇄 — 고지문 전문만 남긴다 ── */
@media print {
  body > *:not(main), .signup-shell, .legal-modal__head, .legal-modal__foot { display: none !important; }
  dialog.modal { display: block; position: static; max-width: none; }
  dialog.modal::backdrop { display: none; }
  .legal-modal { box-shadow: none; max-height: none; width: auto; }
  .legal-modal__body { overflow: visible; padding: 0; }
}