/*
 * 회원가입 폼 공통 (JI-8230 개인 기준 실측 — 어린이 JI-8220·단체 JI-8251~53 공유 예정, CRFF-47)
 * 컨테이너 598, 섹션 간 56·타이틀↔필드 24·필드 간 24, 폼↔버튼 80. MO 전폭(로그인 동일 규칙)
 */
.join-form-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: var(--spacing-80);
  padding-bottom: var(--spacing-120);
}

.join-form-inner {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 598px;
  margin-top: var(--spacing-56);
  padding: 0 var(--spacing-24);
}

.join-form-section {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-24);
}

.join-form-section + .join-form-section {
  margin-top: var(--spacing-56);
}

.join-form-fields {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-24);
}

/* 링크형 탭(단체 JI-8251~53) ↔ 첫 섹션 간격 — 시안 form gap 56 */
.join-org-tab + .join-form-section {
  margin-top: var(--spacing-56);
}

/* 단체가입 탭 구분선 — 비선택 탭끼리 인접한 경계에만 1×16 (JI-8251~53 시안 전용, 공통 .tab--bar 아님)
 * WSG 원본 tab(60:143)엔 구분선 없어 전역 미적용 — 이 화면 한정 오버레이 (PC 전용) */
.join-org-tab .tab-list li {
  position: relative;
}

.join-org-tab .tab-list li + li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 16px;
  background-color: var(--color-divider);
}

.join-org-tab .tab-list li:has([aria-current]) + li::before,
.join-org-tab .tab-list li + li:has([aria-current])::before {
  content: none;
}

@media (max-width: 1023px) {
  .join-org-tab .tab-list li + li::before {
    content: none;
  }
}

/* 아이디 + 중복확인 버튼 행 (버튼은 인풋 상단 정렬, 캡션은 아래 흐름) */
.join-id-row {
  display: flex;
  gap: var(--spacing-8);
}

.join-id-row .form-input {
  flex: 1;
  min-width: 0;
}

/* 컨테이너 상태 클래스 기반 캡션 — join-organization.js showInputMessage/showValidation 계약
 * (.error / .validation-fail / .validation-success 토글) */
.form-field--validate .message-error,
.form-field--validate .message-validation {
  display: none;
}

.form-field--validate.error .message-error {
  display: block;
}

.form-field--validate.validation-fail .message-validation.fail {
  display: block;
}

.form-field--validate.validation-success .message-validation.success {
  display: block;
}

/* 이메일 조합 — 1행: 인풋 + @ / 2행: 인풋 + 도메인 셀렉트 (행·요소 gap 8) */
.join-email-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
}

.join-email-row + .join-email-row {
  margin-top: var(--spacing-8);
}

.join-email-row .form-input,
.join-email-row .form-select {
  flex: 1;
  min-width: 0;
}

.join-email-at {
  flex-shrink: 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-text-heading);
}

/* 주소 그룹 — 1행: 우편번호 + 주소검색(FormButton), 행 간 8 */
.join-address-row {
  display: flex;
  gap: var(--spacing-8);
}

.join-address-row + .join-address-row {
  margin-top: var(--spacing-8);
}

.join-address-row .form-input {
  flex: 1;
  min-width: 0;
}

/* 우편번호 검색 위젯 — 기능형(시안 부재), member-address.js 가 display flex/none 토글 */
.join-address-group {
  position: relative;
}

.join-post {
  display: none;
  position: absolute;
  top: calc(100% + var(--spacing-8));
  left: 0;
  z-index: 100;
  width: 100%;
  max-width: 530px;
  height: 450px;
  flex-direction: column;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-medium);
  background-color: var(--color-background);
  box-shadow: var(--shadow-panel);
  overflow: hidden;
}

.join-post-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-16) var(--spacing-24);
}

.join-post-title {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-text-heading);
}

.join-post-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}

.join-post-content {
  flex: 1;
  min-height: 0;
}

/* .error 클래스 토글형 에러 캡션 — join-child.js showInputMessage 계약(컨테이너 .error 토글) 유지용 */
.form-field--error-toggle .form-caption--error {
  display: none;
}

.form-field--error-toggle.error .form-caption--error {
  display: block;
}

/* 하단 버튼 — 1:1 균등 */
.join-form-actions {
  display: flex;
  gap: var(--spacing-8);
  margin-top: var(--spacing-80);
}

.join-form-actions .button {
  flex: 1;
  min-width: 0;
}

/* 가입 팝업(JI-8240-P1/P2) — 타이틀 ↔ 설명 12 (시안 원값, 팝업 공통 16 과 편차 — 로그인 팝업과 동일 패턴) */
.join-modal .modal-desc {
  margin-top: var(--spacing-12);
}

@media (max-width: 1023px) {
  .join-form-page {
    padding-top: var(--spacing-40);
    padding-bottom: var(--spacing-80);
  }

  .join-form-inner {
    max-width: none;
    margin-top: var(--spacing-40);
    /* 좌우 패딩은 page-main 모바일 마진(16)에 위임 — 이중 패딩(40) 방지 (2026-08-04) */
    padding: 0;
  }

  /* 섹션↔섹션·탭↔폼 간격 — 모바일 56→40 (폼형 시안 실측 2026-08-04) */
  .join-form-section + .join-form-section,
  .join-org-tab + .join-form-section {
    margin-top: var(--spacing-40);
  }

  .join-form-actions {
    margin-top: var(--spacing-56);
  }
}