/* 회원가입(join) 화면 9종 전용 스타일.
   components.css의 .button, .card/.card--lg, .field 계열, .choice/.choice-group,
   .form-actions, .table-scroll/.data-table를 그대로 재사용하고, 여기서는
   components.css에 없는 join 전용 클래스만 추가한다. 색·간격·타이포는 DESIGN.md 토큰
   (= base.css 변수)만 사용한다. */

.join-page {
  padding-block: var(--space-16) var(--space-24);
}

.join-page__inner {
  max-width: 43.75rem;
  margin-inline: auto;
}

.join-page__inner--wide {
  max-width: 56rem;
}

.join-page__header {
  margin-block-end: var(--space-6);
}

.join-page__welcome {
  margin: var(--space-2) 0 0;
  color: var(--color-text-muted);
  font-size: var(--font-lead);
  line-height: 1.6;
}

.join-page__title {
  margin: 0 0 var(--space-6);
}

.join-page__header .join-page__title {
  margin-block-end: 0;
  color: var(--color-text);
  font-size: clamp(1.5rem, 4vw, var(--font-h2));
  font-weight: 800;
  letter-spacing: -0.03em;
}

/* 5단계 표시 ----------------------------------------------------------- */

.join-steps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin: 0 0 var(--space-8);
  padding: 0;
  list-style: none;
  color: var(--color-text-faint);
  font-size: var(--font-caption);
  font-weight: 700;
  counter-reset: join-step;
}

.join-steps li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  white-space: nowrap;
  counter-increment: join-step;
}

.join-steps li::before {
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  color: var(--color-text-faint);
  font-size: var(--font-small);
  font-weight: 700;
  content: counter(join-step);
}

.join-steps li:not(:last-child)::after {
  width: var(--space-4);
  height: 1px;
  background: var(--color-border);
  content: "";
}

.join-steps li.is-current {
  color: var(--color-accent-strong);
}

.join-steps li.is-current::before {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-text-inverse);
}

/* 약관 동의 (terms.html + member/terms/*.html 프래그먼트) --------------- */

.terms-doc-group {
  margin-block-end: var(--space-8);
  padding-block-end: var(--space-8);
  border-block-end: var(--border-default);
}

.terms-doc-group:last-of-type {
  border-block-end: 0;
}

.terms-doc h3 {
  margin: 0 0 var(--space-2);
  font-size: var(--font-h3);
  font-weight: 700;
}

.terms-doc__effective {
  margin: 0 0 var(--space-4);
  color: var(--color-text-faint);
  font-size: var(--font-caption);
}

.terms-doc__body {
  max-height: 16rem;
  overflow-y: auto;
  padding: var(--space-5);
  background: var(--color-surface-soft);
  border: var(--border-default);
  border-radius: var(--radius-control);
  color: var(--color-text-muted);
  font-size: var(--font-small);
  line-height: 1.65;
}

.terms-doc__body p + p {
  margin-block-start: var(--space-3);
}

.terms-doc__agree {
  margin-block-start: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--color-accent-wash);
  border-radius: var(--radius-control);
  font-weight: 700;
}

.join-terms__optional {
  margin: var(--space-8) 0 0;
  padding: var(--space-6) 0 0;
  border: 0;
  border-block-start: var(--border-default);
}

.join-terms__optional legend {
  padding: 0;
  margin-block-end: var(--space-3);
  font-size: var(--font-small);
  font-weight: 700;
}

.join-terms__optional .choice {
  display: flex;
  margin-block-end: var(--space-2);
}

.join-terms__notice {
  margin-block-end: var(--space-5);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-control);
  color: var(--color-text-muted);
  background: var(--color-surface-soft);
  font-size: var(--font-small);
  font-weight: 700;
  line-height: 1.6;
}

.join-terms__notice[role="alert"] {
  color: var(--color-danger);
  background: var(--color-danger-bg);
}

/* 본인확인 (verify.html) ------------------------------------------------ */

.join-verify__notice {
  margin-block-end: var(--space-5);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-control);
  color: var(--color-text-muted);
  background: var(--color-surface-soft);
  font-size: var(--font-small);
  line-height: 1.6;
}

.join-verify__notice[role="alert"] {
  color: var(--color-danger);
  background: var(--color-danger-bg);
  font-weight: 700;
}

.join-verify__fields {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  margin-block-end: var(--space-6);
}

.join-verify__dev-notice {
  margin-block-end: var(--space-5);
  padding: var(--space-3) var(--space-4);
  color: var(--color-text-muted);
  background: var(--color-surface-soft);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-control);
  font-size: var(--font-caption);
}

.join-verify__lead {
  margin-block-end: var(--space-5);
  color: var(--color-text-muted);
  font-size: var(--font-small);
}

.join-verify__status {
  min-height: 1.125rem;
  margin-block: var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--font-caption);
  font-weight: 600;
}

/* 정보입력 (form.html, setup-id.html 공용) ------------------------------ */

.join-form__legend {
  margin: 0 0 var(--space-4);
  color: var(--color-text-muted);
  font-size: var(--font-small);
}

.join-form__notice {
  margin-block-end: var(--space-5);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-control);
  color: var(--color-text-muted);
  background: var(--color-surface-soft);
  font-size: var(--font-small);
  line-height: 1.6;
}

.join-form__notice[role="alert"] {
  color: var(--color-danger);
  background: var(--color-danger-bg);
  font-weight: 700;
}

.join-form__identity,
.join-form__guardian-verified {
  margin-block-end: var(--space-8);
  padding-block-end: var(--space-8);
  border-block-end: var(--border-default);
}

.join-form__section-title {
  margin: 0 0 var(--space-4);
  font-size: var(--font-h3);
  font-weight: 700;
}

.join-form__fields {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.join-form__address {
  margin: 0;
  padding: 0;
  border: 0;
}

.join-form__address legend {
  padding: 0;
  margin-block-end: var(--space-3);
  font-size: var(--font-small);
  font-weight: 700;
}

.join-form__field-inline {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.join-form__field-inline .field__control {
  flex: 1 1 12rem;
  min-width: 0;
}

.join-form__id-status {
  display: block;
  min-height: 1.125rem;
  color: var(--color-text-faint);
  font-size: var(--font-caption);
}

/* 가입 불가 화면 --------------------------------------------------------- */

.join-blocked__message {
  margin-block-end: var(--space-5);
  padding: var(--space-4) var(--space-5);
  color: var(--color-danger);
  background: var(--color-danger-bg);
  border-radius: var(--radius-control);
  font-size: var(--font-small);
  line-height: 1.6;
}

/* 가입완료 / 아이디 설정완료 화면 ------------------------------------------- */

.join-done {
  text-align: center;
}

.join-done__message,
.join-setup-id-done__message {
  padding: var(--space-6) var(--space-5);
  color: var(--color-success);
  background: var(--color-success-bg);
  border-radius: var(--radius-control);
  font-size: var(--font-body);
  font-weight: 700;
}

.join-done__actions {
  justify-content: center;
}

/* 아이디·비밀번호 설정 화면 ------------------------------------------------ */

.join-setup-id__notice {
  margin-block-end: var(--space-5);
  padding: var(--space-4) var(--space-5);
  color: var(--color-text-muted);
  background: var(--color-surface-soft);
  border-radius: var(--radius-control);
  font-size: var(--font-small);
  line-height: 1.65;
}

/* 안내 박스 안에서 먼저 읽혀야 하는 한 줄(예: 이미 가입된 회원입니다) */
.join-setup-id__notice strong {
  display: block;
  margin-block-end: var(--space-1);
  color: var(--color-danger);
  font-size: var(--font-body);
  font-weight: 700;
}

.join-setup-id__error {
  margin-block-end: var(--space-5);
  padding: var(--space-4) var(--space-5);
  color: var(--color-danger);
  background: var(--color-danger-bg);
  border-radius: var(--radius-control);
  font-size: var(--font-small);
  font-weight: 700;
}

.join-terms__all {
  margin-block: var(--space-6) var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: var(--color-accent-wash);
  border: 1px solid var(--color-accent-soft);
  border-radius: var(--radius-control);
  color: var(--color-text);
  font-size: var(--font-body);
  font-weight: 700;
}

/* 회원유형 선택 화면 ------------------------------------------------------- */

.join-type__lead {
  margin: 0 0 var(--space-6);
  color: var(--color-text-muted);
  font-size: var(--font-small);
  line-height: 1.65;
}

.join-type__options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.join-type__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-8) var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--motion-fast), box-shadow var(--motion-fast), transform var(--motion-fast);
}

.join-type__card:hover,
.join-type__card:focus-visible {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-card);
  transform: translateY(-2px);
}

.join-type__icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin-block-end: var(--space-2);
  background: var(--color-accent-wash);
  border-radius: var(--radius-pill);
  color: var(--color-accent-strong);
}

.join-type__icon .icon {
  width: 1.5rem;
  height: 1.5rem;
}

.join-type__age {
  color: var(--color-accent-strong);
  font-size: var(--font-caption);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.join-type__name {
  color: var(--color-text);
  font-size: var(--font-h3);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.join-type__desc {
  color: var(--color-text-muted);
  font-size: var(--font-small);
  line-height: 1.65;
}

.join-type__go {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-block-start: var(--space-4);
  color: var(--color-accent-strong);
  font-size: var(--font-small);
  font-weight: 700;
}

.join-type__card:hover .join-type__go .icon {
  transform: translateX(2px);
}

.join-type__go .icon {
  width: 1rem;
  height: 1rem;
  transition: transform var(--motion-fast);
}

/* 반응형(360px 기준 가로 스크롤 방지) --------------------------------------- */

@media (max-width: 40rem) {
  .join-type__options {
    grid-template-columns: minmax(0, 1fr);
  }

  .join-page__welcome {
    font-size: var(--font-body);
  }

  .join-page {
    padding-block: var(--space-8) var(--space-16);
  }

  .join-steps {
    gap: var(--space-1) var(--space-2);
    font-size: 0.6875rem;
  }

  .join-steps li:not(:first-child)::before {
    width: var(--space-2);
  }

  .terms-doc__body {
    max-height: 12rem;
    padding: var(--space-4);
  }

  .join-form__field-inline {
    flex-direction: column;
    align-items: stretch;
  }
}

/* SNS 로그인 본인확인 (member/sns/verify.html) --------------------------------- */

.sns-verify__inner {
  max-width: 35rem;
}

.sns-verify__header {
  margin-block-end: var(--space-6);
  text-align: center;
}

.sns-verify__provider {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
  padding: var(--space-1) var(--space-4) var(--space-1) var(--space-1);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  color: var(--color-text-muted);
  font-size: var(--font-caption);
  font-weight: 700;
}

.sns-verify__provider-mark {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--radius-pill);
}

.sns-verify__provider-mark .icon {
  width: 1rem;
  height: 1rem;
}

.sns-verify__provider-mark.is-kakao {
  color: var(--color-kakao-text);
  background: var(--color-kakao);
}

.sns-verify__provider-mark.is-naver {
  color: var(--color-text-inverse);
  background: var(--color-naver);
  font-size: var(--font-small);
  font-weight: 900;
}

.sns-verify__title {
  margin: 0;
  color: var(--color-text);
  font-size: clamp(1.5rem, 4vw, var(--font-h2));
  font-weight: 800;
  letter-spacing: -0.03em;
}

.sns-verify__lead {
  margin: var(--space-3) 0 0;
  color: var(--color-text-muted);
  font-size: var(--font-body);
  line-height: 1.6;
  word-break: keep-all;
}

.sns-verify__steps {
  justify-content: center;
}

.join-steps li.is-done {
  color: var(--color-text-muted);
}

.join-steps li.is-done::before {
  background: var(--color-accent-wash);
  border-color: var(--color-accent-soft);
  color: var(--color-accent-strong);
  content: "✓";
}

.sns-verify__card {
  padding: var(--space-8);
  box-shadow: var(--shadow-card);
}

.sns-verify__hero {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-block-end: var(--space-6);
}

.sns-verify__hero-icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  background: var(--color-accent-wash);
  border-radius: var(--radius-pill);
  color: var(--color-accent-strong);
}

.sns-verify__hero-icon .icon {
  width: 1.625rem;
  height: 1.625rem;
}

.sns-verify__hero-title {
  margin: 0;
  font-size: var(--font-lead);
  font-weight: 700;
  word-break: keep-all;
}

.sns-verify__hero-text {
  margin: var(--space-1) 0 0;
  color: var(--color-text-muted);
  font-size: var(--font-small);
  line-height: 1.6;
  word-break: keep-all;
}

.sns-verify__points {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0 0 var(--space-6);
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface-soft);
  border-radius: var(--radius-control);
  list-style: none;
}

.sns-verify__points li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--font-small);
  line-height: 1.6;
  word-break: keep-all;
}

.sns-verify__points .icon {
  margin-block-start: 0.125rem;
  color: var(--color-accent-strong);
}

.sns-verify__open {
  min-height: 3.5rem;
  font-size: var(--font-body);
}

.sns-verify__status:empty {
  min-height: 0;
  margin: 0;
}

/* 인증 완료 신호를 받으면 스크립트가 바로 제출하므로, 비활성 '다음'은 숨겨 둔다 */
.sns-verify__continue:disabled {
  display: none;
}

.sns-verify__help {
  margin: var(--space-4) 0 0;
  color: var(--color-text-faint);
  font-size: var(--font-caption);
  text-align: center;
}

.sns-verify__switch {
  margin: var(--space-6) 0 0;
  font-size: var(--font-small);
  text-align: center;
}

.sns-verify__switch a {
  color: var(--color-text-muted);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.sns-verify__switch a:hover {
  color: var(--color-accent-strong);
}

@media (max-width: 40rem) {
  .sns-verify__card {
    padding: var(--space-6) var(--space-5);
  }

  .sns-verify__hero {
    align-items: flex-start;
  }
}