/* signup-page-v3.css
 * Generated by Phase 4 (safe-merge) for (회원가입_MNU-U-020000, v3)
 * Source CSS (in cascade order): signup-page-v3.css
 */

/* === source: signup-page-v3.css === */
/* ================================================================
   회원유형선택 (MNU-U-020100) v3 — Figma TO-BE 13761:13317
   ================================================================
   - DS 토큰(--ds-*) 우선, 정확치 없을 때 가까운 토큰 + 매핑 주석
   - 자체 격리: 다른 페이지 v.css 의존 없음 (signup-page.css 의존 X)
   - wrapper: .signup-v3 (스코프 강제)
   - 배경 alpha: color-mix(in srgb, var(--token) NN%, transparent) 패턴
   ================================================================ */


/* ============================================================
   wrap — 옅은 secondary-5 50% 배경
   ============================================================ */
body:has(.signup-v3) {
  background-color: #f2f4fb;                                  /* bg_mypage.png 베이스 색 — 이미지와 경계 없이 매끄럽게(흰 띠 방지) */
  overflow-x: hidden;
}
body:has(.signup-v3) .site-main {
  background-color: transparent;                              /* 실사이트 .site-main 흰 배경 제거 → body #f2f4fb 노출(GNB~본문 흰 띠 방지). 퍼블 standalone엔 흰 배경이 없어 누락됐던 규칙 */
}
body:has(.signup-v3) .site-footer {
  margin-top: 0;
}

.signup-v3 {
  display: flex;
  flex-direction: column;                                     /* 헤더(상단) + 컨테이너(남은 영역) 세로 스택 */
  align-items: center;
  padding-top: 10rem;                                         /* 상단 100px — 헤더는 이 끝 위치 */
  padding-bottom: 10rem;
  padding-inline: var(--ds-pc-padding-layout-side);           /* 30px */
  /* secondary-5 50% on white — alpha 결합 */
  background: color-mix(in srgb, var(--ds-color-secondary-5) 50%, transparent);
  border-top: var(--ds-border-width-thin) solid var(--ds-color-gray-10);
  min-height: 80vh;
}


/* ============================================================
   container — 헤더를 제외한 남은 영역에서 카드 세로 중앙 정렬
   ============================================================ */
.signup-v3 .jsel-container {
  width: 100%;
  max-width: 108rem;                                          /* 1080px */
  flex: 1;                                                    /* 헤더 외 남은 세로 공간 전체 차지 */
  display: flex;
  align-items: center;                                        /* 카드 리스트 세로 중앙 */
  justify-content: center;                                    /* 카드 리스트 가로 중앙 */
}


/* ============================================================
   header — 회원가입 / 안내 문구
   ============================================================ */
.signup-v3 .jsel-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ds-number-4);                                    /* 8px */
  text-align: center;
}

.signup-v3 .jsel-title {
  margin: 0;
  font-size: var(--ds-font-size-36);                          /* 36px */
  font-weight: var(--ds-typo-font-weight-bold);
  color: var(--ds-color-gray-95);
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.signup-v3 .jsel-subtitle {
  margin: 0;
  font-size: var(--ds-font-size-19);                          /* 19px */
  font-weight: var(--ds-typo-font-weight-regular);
  color: var(--ds-color-gray-70);
  letter-spacing: -0.01em;
}


/* ============================================================
   카드 리스트 — 외곽 카드 1개로 묶고 내부 3개는 세로 구분선으로 분리
   ============================================================ */
.signup-v3 .jsel-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;                                                  /* 20px — 카드 사이 간격 */
  width: 100%;
  max-width: 95rem;                                          /* 1000px — 카드 폭 약 320px */
  margin: 0 auto;
}


/* ============================================================
   개별 카드 — 외곽 컨테이너 안에 border 없이 붙어 있는 형식
   (아바타 위 + 텍스트 + [가입하기] 하단 버튼)
   ============================================================ */
.signup-v3 .jsel-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 3rem;                                                  /* 30px — 영역 사이 간격 */
  padding: 5rem 2rem;                                         /* 50px 20px */
  background: var(--ds-color-gray-0);
  border: var(--ds-border-width-thin) solid var(--ds-color-gray-20);
  border-radius: var(--ds-radius-large);                      /* 12px 라운드 */
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.signup-v3 .jsel-item__text {
  flex: 1;
  justify-content: center;
}
.signup-v3 .jsel-item:hover,
.signup-v3 .jsel-item:focus-visible {
  outline: none;
  border-color: var(--ds-color-primary-50);
  box-shadow: 0 0.4rem 1.2rem rgba(0, 0, 0, 0.06);
  transform: translateY(-2px);
}

/* 아이콘 영역 — 마이페이지 .mypage-v2-avatar와 동일 (큰 원형 + secondary-5 회색 배경 통일) */
.signup-v3 .jsel-item__icon {
  width: 12rem;                                               /* 120px — 마이페이지 아바타와 동일 */
  height: 12rem;
  border-radius: 50%;
  background: var(--ds-color-secondary-5, #eef2f7);           /* 마이페이지 아바타와 동일 — 회원유형 무관 통일 */
  overflow: hidden;
  display: flex;
  align-items: flex-end;                                      /* 인물 일러스트를 컨테이너 하단에 정렬 */
  justify-content: center;
  flex-shrink: 0;
}
.signup-v3 .jsel-item__icon img {
  display: block;
  width: auto;
  height: 80%;                                                /* 원 지름의 80% */
  max-width: 90%;
  object-fit: contain;
  object-position: center bottom;
}

/* 텍스트 그룹 — 가운데 정렬 */
.signup-v3 .jsel-item__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ds-number-2);                                    /* 4px */
}

.signup-v3 .jsel-item__title {
  font-size: var(--ds-font-size-19);                          /* 19px */
  font-weight: var(--ds-typo-font-weight-bold);
  color: var(--ds-color-gray-90);
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.signup-v3 .jsel-item__desc {
  font-size: var(--ds-font-size-15);                          /* 15px */
  font-weight: var(--ds-typo-font-weight-regular);
  color: var(--ds-color-gray-70);
  letter-spacing: -0.01em;
  line-height: 1.5;
}

/* ============================================================
   반응형 — 태블릿 (1199px 이하) — 1×3 유지, 아바타·패딩 축소
   ============================================================ */
@media (max-width: 1199px) {
  .signup-v3 {
    padding-top: var(--ds-number-30);                         /* 60px */
    padding-bottom: var(--ds-number-30);
  }
  .signup-v3 .jsel-title {
    font-size: var(--ds-font-size-32);                        /* 32px */
  }
  .signup-v3 .jsel-list {
    gap: var(--ds-number-8);                                  /* 16px */
  }
  .signup-v3 .jsel-item {
    padding: var(--ds-number-14) var(--ds-number-8);          /* 28px 16px */
    gap: var(--ds-number-6);                                  /* 12px */
  }
  .signup-v3 .jsel-item__icon {
    width: 10rem;                                             /* 100px — 마이페이지 태블릿 톤 */
    height: 10rem;
  }
}


/* ============================================================
   반응형 — 모바일 (767px 이하) — 1열 스택
   ============================================================ */
@media (max-width: 767px) {
  .signup-v3 {
    padding-top: var(--ds-number-20);                         /* 40px */
    padding-bottom: var(--ds-number-20);
    padding-inline: var(--ds-mobile-padding-layout-side);     /* 16px */
    min-height: 0;
  }
  .signup-v3 .jsel-container {
    gap: var(--ds-number-12);                                 /* 24px */
  }
  .signup-v3 .jsel-header {
    margin-bottom: var(--ds-number-15);                       /* 30px — 모바일: 타이틀+안내문구 ↔ 카드 영역 간격 추가 */
  }
  .signup-v3 .jsel-title {
    font-size: var(--ds-font-size-28);
  }
  .signup-v3 .jsel-subtitle {
    font-size: var(--ds-font-size-15);
  }

  /* 카드 리스트 모바일 — 1열 스택 */
  .signup-v3 .jsel-list {
    grid-template-columns: 1fr;
    gap: var(--ds-number-6);                                  /* 12px */
    max-width: 60rem;
  }
  /* 카드 모바일 — 세로 레이아웃 유지, 패딩·아바타 축소 */
  .signup-v3 .jsel-item {
    gap: var(--ds-number-6);                                  /* 12px */
    padding: var(--ds-number-10) var(--ds-number-8);          /* 20px 16px */
  }
  .signup-v3 .jsel-item__icon {
    width: 6rem;                                              /* 60px — 마이페이지 모바일 아바타와 동일 */
    height: 6rem;
  }
  .signup-v3 .jsel-item__title {
    font-size: var(--ds-font-size-17);
  }
  .signup-v3 .jsel-item__desc {
    font-size: var(--ds-font-size-13);
    line-height: 1.4;
  }
}


/* ================================================================
   회원가입 약관동의 (MNU-U-020101 일반/어린이/외국인) v3 — Figma TO-BE 13756:3273
   ================================================================
   적용: …/MNU-U-020101_(일반|어린이|외국인)약관동의_design_v3.html
   격리: wrapper `.signup-agree-v3`를 .login-wrap에 추가
   참고: 약관재동의는 로그인 모듈 → login-page-v3.css 별도
   ================================================================ */


/* 페이지 wrap (회원유형선택과 동일 톤) */
body:has(.signup-agree-v3) {
  background-color: var(--ds-color-gray-0);
  overflow-x: clip;                                          /* hidden 금지: hidden은 overflow-y를 auto로 만들어 스크롤 컨테이너화 → 자식 sticky가 viewport 기준으로 못 붙음. clip은 가로만 자르고 컨테이너화 안 함 */
  max-width: 100%;
}
body:has(.signup-agree-v3) .site-main {
  overflow-x: clip;                                          /* 동일 이유 — 배경 sticky(::after)가 viewport 기준으로 동작하도록 clip 사용 */
  max-width: 100%;
  background-color: transparent;                             /* 실사이트 .site-main 흰 배경 제거 → body 배경 노출(GNB~본문 흰 띠 방지) */
}
body:has(.signup-agree-v3) .site-footer {
  margin-top: 0;
}
.login-wrap.signup-agree-v3 {
  display: flex;
  justify-content: center;
  gap: var(--ds-number-20);
  padding-block: 10rem;                                     /* PC 100px — 가이드 v1.7.1 §5-3 케이스 C */
  padding-inline: var(--ds-pc-padding-layout-side);
  background: color-mix(in srgb, var(--ds-color-secondary-5) 50%, transparent);
  border-top: var(--ds-border-width-thin) solid var(--ds-color-gray-10);
  max-width: 100%;
  box-sizing: border-box;
}
.login-wrap.signup-agree-v3:has(.join-stepper-area) {
  flex-direction: column;
  align-items: center;
  gap: var(--ds-number-15);                                 /* 30px */
}
.signup-agree-v3 .ds-btn:hover,
.signup-agree-v3 .ds-btn:active {
  transform: none;
}

/* 페이지 메인 타이틀 (h1) */
.signup-agree-v3 .join-page-title {
  width: 100%;
  text-align: center;
  font-size: var(--ds-pc-font-size-heading-large);
  font-weight: var(--ds-typo-font-weight-bold);
  line-height: var(--ds-typo-line-height-heading);
  color: var(--ds-light-color-text-basic);
  margin: 0;
}

/* Stepper */
.signup-agree-v3 .join-stepper-area {
  width: 100%;
  max-width: 80rem;
}
.signup-agree-v3 .join-stepper-area--child .ds-stepper__label {
  line-height: 1.35;
  word-break: keep-all;
  white-space: normal;
}

/* 약관 카드 */
.signup-agree-v3 .login-card {
  width: 100%;
  display: flex;
  flex-direction: column;
  background: var(--ds-color-gray-0);
  border-radius: var(--ds-radius-large);                    /* 12px */
  box-shadow: 0 0.4rem 1.6rem rgba(0, 0, 0, 0.06);
}
.signup-agree-v3 .login-card--wide {
  width: 80rem;                                             /* 전체동의 체크 시 약관박스 숨김→내용 폭 축소에 의한 shrink 방지 */
  max-width: 80rem;
  border: var(--ds-border-width-thin) solid var(--ds-color-gray-20);
  padding: 6.1rem 7.1rem;                                   /* 61px 71px */
  gap: var(--ds-number-12);                                 /* 24px */
  align-items: center;
}

/* 카드 헤더 — 중앙 정렬 */
.signup-agree-v3 .login-card__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--ds-number-4);                                  /* 8px */
  width: 100%;
}
.signup-agree-v3 .login-card__title {
  font-size: var(--ds-pc-font-size-heading-medium);         /* 28px */
  font-weight: var(--ds-typo-font-weight-bold);
  color: var(--ds-light-color-text-basic);
  line-height: var(--ds-typo-line-height-heading);
  margin: 0;
}
.signup-agree-v3 .join-desc {
  font-size: var(--ds-pc-font-size-body-medium);            /* 19px */
  color: var(--ds-light-color-text-subtle);
  line-height: var(--ds-typo-line-height-body);
  text-align: center;
  margin: 0;
}

/* 구분선 */
.signup-agree-v3 .join-divider {
  align-self: stretch;
  border: none;
  border-top: var(--ds-border-width-thin) solid var(--ds-light-color-divider-gray-light);
  margin: 0;
}
.signup-agree-v3 .join-terms-all + .join-divider {
  display: none;                                            /* 전체동의 박스 다음 첫 divider 숨김 */
}

/* 약관 섹션 */
.signup-agree-v3 .join-terms-section {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--ds-number-6);                                  /* 12px */
  padding: 0;
}
/* 컴포넌트에 직접 order 적용 → 3뎁스 부모>자식 셀렉터 제거 */
.signup-agree-v3 .join-terms-title-row { order: 0; }
.signup-agree-v3 .join-terms-channels  { order: 1; }
.signup-agree-v3 .join-terms-box       { order: 2; }

.signup-agree-v3 .join-terms-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: var(--ds-number-4);
}
.signup-agree-v3 .join-terms-title-row .ds-checkbox {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-number-6);
  margin: 0;
}
.signup-agree-v3 .join-terms-title {
  font-size: var(--ds-pc-font-size-body-medium);
  font-weight: var(--ds-typo-font-weight-bold);
  color: var(--ds-light-color-text-basic);
  line-height: var(--ds-number-16);                         /* 32px */
  margin: 0;
}
.signup-agree-v3 .join-terms-required {
  color: var(--ds-color-brand-red-aa);
  font-weight: var(--ds-typo-font-weight-bold);
}
.signup-agree-v3 .join-terms-optional {
  color: var(--ds-light-color-text-subtle);
  font-weight: var(--ds-typo-font-weight-medium);
}

/* 약관 본문 박스 */
.signup-agree-v3 .join-terms-box {
  width: 100%;
  height: 24rem;                                            /* 240px */
  overflow-y: auto;
  border: var(--ds-border-width-thin) solid var(--ds-light-color-border-gray-light);
  border-radius: var(--ds-radius-medium);
  padding: var(--ds-number-10);
  font-size: var(--ds-pc-font-size-body-small);
  color: var(--ds-light-color-text-basic);
  line-height: 1.7;
  scrollbar-width: thin;
  scrollbar-color: var(--ds-color-gray-30) transparent;
  scrollbar-gutter: stable;
}
.signup-agree-v3 .join-terms-box::-webkit-scrollbar { width: 0.6rem; }
.signup-agree-v3 .join-terms-box::-webkit-scrollbar-track {
  background: transparent;
  margin-block: var(--ds-number-4);
}
.signup-agree-v3 .join-terms-box::-webkit-scrollbar-thumb {
  background-color: var(--ds-color-gray-30);
  border-radius: 999px;
  border: 0.1rem solid transparent;
  background-clip: padding-box;
}
.signup-agree-v3 .join-terms-box::-webkit-scrollbar-thumb:hover {
  background-color: var(--ds-color-gray-50);
}
.signup-agree-v3 .join-terms-box::-webkit-scrollbar-button { display: none; }
.signup-agree-v3 .join-terms-box--hug { height: auto; }
.signup-agree-v3 .join-terms-chapter {
  font-size: var(--ds-pc-font-size-body-medium);
  margin-bottom: var(--ds-number-4);
}

/* 위탁업체 표 — 개인정보처리 위탁 약관 */
.signup-agree-v3 .join-terms-table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--ds-number-12) 0;                            /* 24px 상하 */
  font-size: var(--ds-pc-font-size-body-xsmall);
}
.signup-agree-v3 .join-terms-table th,
.signup-agree-v3 .join-terms-table td {
  border: 1px solid var(--ds-color-gray-20);
  padding: var(--ds-number-5) var(--ds-number-6);
  text-align: center;
  vertical-align: middle;
}
.signup-agree-v3 .join-terms-table th {
  background-color: var(--ds-light-color-surface-gray-subtler);
  font-weight: var(--ds-typo-font-weight-medium);
  color: var(--ds-light-color-text-basic);
}

/* 마케팅 하위 채널 */
.signup-agree-v3 .join-terms-channels {
  display: flex;
  align-items: center;
  gap: var(--ds-number-10);
  padding-left: var(--ds-number-14);
}

/* 약관 동의 버튼 그룹 */
.signup-agree-v3 .join-agree-btns {
  display: flex;
  justify-content: center;
  gap: var(--ds-number-4);
  width: 100%;
  margin-top: 0;
}

/* 전체 약관 동의 (Toss 스타일 박스) — 시안 13756:3462 (미체크 기본)
 * bg: secondary-5 50% / border: 없음 / padding 13px 24px / radius 8px */
.signup-agree-v3 .join-terms-all {
  width: 100%;
  padding: 1.3rem var(--ds-number-12);                      /* 13px 24px — 시안 px-[24px] py-[13px] */
  border: var(--ds-border-width-thin) solid transparent;    /* 토글 시 1px 흔들림 방지용 투명 보더 */
  border-radius: var(--ds-radius-medium);                   /* 8px */
  background: color-mix(in srgb, var(--ds-color-secondary-5) 50%, transparent);
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s;
  margin-bottom: var(--ds-number-6);                        /* 12px — 다음 섹션 갭 1.5배 (24+12=36) */
}
.signup-agree-v3 .join-terms-all:hover {
  background: color-mix(in srgb, var(--ds-color-secondary-5) 80%, transparent);
}
.signup-agree-v3 .join-terms-all:has(input[type="checkbox"]:checked) {
  background-color: var(--ds-color-gray-0);
  border-color: var(--ds-color-brand-dark);
}
.signup-agree-v3 .join-terms-all:has(input[type="checkbox"]:checked):hover {
  background-color: var(--ds-color-gray-5);
}
.signup-agree-v3 .join-terms-all .ds-checkbox {
  display: flex;
  width: 100%;
  align-items: center;
  gap: var(--ds-number-6);                                  /* 12px */
  margin: 0;
  padding: 0;
}
/* 체크박스 input — 동그라미 dot (24px, gray-20 border, 회색 체크) */
.signup-agree-v3 .join-terms-all .ds-checkbox input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  display: block;
  flex-shrink: 0;
  width: var(--ds-number-12);                               /* 24px */
  height: var(--ds-number-12);
  margin: 0;
  border: var(--ds-border-width-thin) solid var(--ds-color-gray-20);
  border-radius: 50%;
  background-color: var(--ds-color-gray-0);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpolyline points='2,6.5 5,9 10,3.5' fill='none' stroke='%238a949e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 12px 12px;
  background-repeat: no-repeat;
  background-position: center;
  transition: background-color 0.15s, border-color 0.15s;
  box-sizing: border-box;
}
/* 체크 상태 — dot brand-dark 배경 + 흰 체크 */
.signup-agree-v3 .join-terms-all:has(input[type="checkbox"]:checked) .ds-checkbox input[type="checkbox"] {
  background-color: var(--ds-color-brand-dark);
  border-color: var(--ds-color-brand-dark);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpolyline points='2,6.5 5,9 10,3.5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.signup-agree-v3 .join-terms-all__text {
  font-size: var(--ds-pc-font-size-body-medium);            /* 19px */
  font-weight: var(--ds-typo-font-weight-bold);
  color: var(--ds-color-brand-dark);
  letter-spacing: -0.05em;
  line-height: var(--ds-number-12);                         /* 24px */
  flex: 1;
}


/* 반응형 — 약관동의 (태블릿) */
@media (max-width: 1199px) and (min-width: 768px) {
  .login-wrap.signup-agree-v3 {
    padding-block: 8rem;                                    /* 태블릿 80px — 가이드 §5-3 케이스 C */
  }
  .signup-agree-v3 .login-card--wide {
    width: 100%;
    max-width: 100%;
    padding: var(--ds-number-20);
  }
  .signup-agree-v3 .join-stepper-area {
    max-width: 100%;
  }
}

/* 반응형 — 약관동의 (모바일) */
@media (max-width: 767px) {
  .login-wrap.signup-agree-v3 {
    padding-inline: var(--ds-mobile-padding-layout-side);
    padding-block: 6rem;                                    /* 모바일 60px — 가이드 §5-3 케이스 C */
    overflow-x: hidden;
    border-top: 0;
  }
  .signup-agree-v3 .join-page-title {
    font-size: var(--ds-mobile-font-size-heading-medium);   /* 24px */
  }
  .signup-agree-v3 .ds-stepper__label {
    font-size: var(--ds-mobile-font-size-body-xsmall);
    word-break: keep-all;                                   /* 단어 단위 wrap (어린이 약관동의 등) */
    white-space: normal;
    line-height: 1.35;
  }
  .signup-agree-v3 .ds-stepper__item {
    width: 8rem;                                            /* 80px (이전 70) — "법정대리인 인증/본인인증" 라벨 자연스러운 2줄 wrap */
  }
  .signup-agree-v3 .login-card {
    max-width: 100%;
    gap: var(--ds-number-16);                                /* 모바일 32px — 카드 헤더↔본문↔버튼 그룹 간격 확대 */
  }
  .signup-agree-v3 .login-card--wide {
    width: 100%;
    max-width: 100%;
    padding: var(--ds-number-20) var(--ds-number-12);       /* 40px 24px — 모바일 카드 내부 상/하/좌/우 확대 */
  }
  .signup-agree-v3 .login-card__title {
    font-size: var(--ds-mobile-font-size-heading-small);    /* 17px */
  }
  .signup-agree-v3 .join-desc {
    font-size: var(--ds-mobile-font-size-body-small);       /* 14px */
  }
  .signup-agree-v3 .join-terms-title {
    font-size: var(--ds-mobile-font-size-body-medium);      /* 16px */
    line-height: var(--ds-number-12);
  }
  .signup-agree-v3 .join-terms-box {
    font-size: var(--ds-mobile-font-size-body-small);       /* 14px */
  }
  .signup-agree-v3 .join-terms-chapter {
    font-size: var(--ds-mobile-font-size-body-medium);
  }
  .signup-agree-v3 .join-terms-table {
    font-size: var(--ds-mobile-font-size-body-xsmall);
  }
  .signup-agree-v3 .join-terms-table th,
  .signup-agree-v3 .join-terms-table td {
    padding: var(--ds-number-3) var(--ds-number-4);
  }
  .signup-agree-v3 .js-terms-toggle {
    min-height: var(--ds-number-13);                         /* 26px */
    padding-block: var(--ds-number-1);
    padding-inline: var(--ds-number-4);
    font-size: var(--ds-mobile-font-size-body-xsmall);
  }
  .signup-agree-v3 .join-terms-all {
    padding: var(--ds-number-5) var(--ds-number-10);
  }
  .signup-agree-v3 .join-terms-all__text {
    font-size: var(--ds-mobile-font-size-body-medium);
  }
  .signup-agree-v3 .join-terms-channels {
    flex-wrap: wrap;
    gap: var(--ds-number-6);
    padding-left: var(--ds-number-10);
  }
  .signup-agree-v3 .join-stepper-area--child .ds-stepper__label {
    font-size: 1.3rem;                                       /* 13px — 어린이 stepper 라벨 */
  }
  .signup-agree-v3 .join-agree-btns {
    flex-direction: column-reverse;
    gap: var(--ds-number-3);
  }
  .signup-agree-v3 .join-agree-btns .ds-btn {
    width: 100%;
  }
}


/* ================================================================
   회원가입 flow — 본인인증 / 이메일인증 / 법정대리인 / 회원정보입력 / 가입완료
   (MNU-U-020102~020106 일반·어린이·외국인) v3 — Figma TO-BE 13756:5259, 13759:6733/7642/8771/9280
   ================================================================
   적용:
     · 020102_법정대리인인증 v2
     · 020103_(일반|어린이)본인인증 v3
     · 020104_외국인이메일인증 v3
     · 020105_(일반|어린이|외국인)회원정보입력 v3
     · 020106_(일반|어린이|외국인)가입완료 v3
   격리: wrapper `.signup-flow-v3`를 .login-wrap에 추가 (self-contained)
   ================================================================ */


/* ===== 페이지 wrap — 옅은 secondary-5 50% 배경 ===== */
body:has(.signup-flow-v3) {
  background-color: #f2f4fb;                                  /* bg_mypage.png 베이스 색 — 이미지와 경계 없이 매끄럽게(흰 띠 방지). 020102·103·104·105·106 공통 */
  overflow-x: clip;                                          /* hidden 금지: hidden은 overflow-y를 auto로 만들어 스크롤 컨테이너화 → 자식 sticky가 viewport 기준으로 못 붙음. clip은 가로만 자르고 컨테이너화 안 함 */
  max-width: 100%;
}
body:has(.signup-flow-v3) .site-main {
  overflow-x: clip;                                          /* 동일 이유 — 배경 sticky(::after)가 viewport 기준으로 동작하도록 clip 사용 */
  max-width: 100%;
  background-color: transparent;                             /* 실사이트 .site-main 흰 배경 제거 → body 배경 노출(GNB~본문 흰 띠 방지) */
}
body:has(.signup-flow-v3) .site-footer {
  margin-top: 0;
}
.login-wrap.signup-flow-v3 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ds-number-15);                                   /* 30px */
  padding-block: 10rem;                                       /* PC 100px — 가이드 v1.7.1 §5-3 케이스 C */
  padding-inline: var(--ds-pc-padding-layout-side);
  background: color-mix(in srgb, var(--ds-color-secondary-5) 50%, transparent);
  border-top: var(--ds-border-width-thin) solid var(--ds-color-gray-10);
  max-width: 100%;
  box-sizing: border-box;
}
.signup-flow-v3 .ds-btn:hover,
.signup-flow-v3 .ds-btn:active {
  transform: none;
}
/* 카드 내 버튼 — 시안 radius 6px */
.signup-flow-v3 .login-card .ds-btn {
  border-radius: var(--ds-radius-small);                      /* 6px */
}

/* Step 표시 영역(stepper) ↔ 카드 사이 간격 추가 — wrap gap에 합산
   (signup-flow-v3 + signup-agree-v3 회원가입 전체 통일) */
.signup-flow-v3 .join-stepper-area + .login-card,
.signup-agree-v3 .join-stepper-area + .login-card {
  margin-top: var(--ds-number-8);                             /* PC/태블릿 +16px */
}


/* ===== 페이지 타이틀 (h1) ===== */
.signup-flow-v3 .join-page-title {
  width: 100%;
  text-align: center;
  font-size: var(--ds-pc-font-size-heading-large);            /* 36px */
  font-weight: var(--ds-typo-font-weight-bold);
  line-height: var(--ds-typo-line-height-heading);
  color: var(--ds-light-color-text-basic);
  margin: 0;
}


/* ===== Stepper 영역 ===== */
.signup-flow-v3 .join-stepper-area {
  width: 100%;
  max-width: 50rem;                                           /* 500px — 카드 폭과 통일 */
}
.signup-flow-v3 .join-stepper-area--child .ds-stepper__label {
  line-height: 1.35;
  word-break: keep-all;
  white-space: normal;
}


/* ===== 카드 — 약관동의 v3와 동일: white + gray-20 1px + 12px radius + 61/71 padding + shadow ===== */
/* 시안 페이지별 gap 차이 — default 40 (이메일인증/회원정보입력/법정대리인) / 본인인증=24 / 가입완료=60 */
.signup-flow-v3 .login-card {
  width: 100%;
  max-width: 80rem;                                           /* 800px */
  display: flex;
  flex-direction: column;
  gap: var(--ds-number-20);                                   /* 40px (default — 시안) */
  padding: 6.1rem 7.1rem;                                     /* 61px 71px (시안 정확치) */
  background: var(--ds-color-gray-0);
  border: var(--ds-border-width-thin) solid var(--ds-color-gray-20);
  border-radius: var(--ds-radius-large);                      /* 12px */
  box-shadow: 0 0.4rem 0.8rem rgba(0, 0, 0, 0.06);            /* 시안 정확치 (8px blur) */
  box-sizing: border-box;
  align-items: stretch;
}
/* --wide variant — 동일 스펙 유지 (5페이지 통일) */
.signup-flow-v3 .login-card--wide {
  max-width: 80rem;
  padding: 6.1rem 7.1rem;
  align-items: stretch;
}
/* 가입완료 — 3블록(헤더/dl/버튼) gap (시안 60 → 사용자 요청 PC 40) */
.signup-flow-v3 .login-card:has(.join-complete-info) {
  gap: var(--ds-number-20);                                   /* 40px (PC) */
}
/* 본인인증 — 헤더 + CTA만 (form/guardian 없음) gap 24px (시안 5259) */
.signup-flow-v3 .login-card:has(.join-pass-cta):not(:has(.join-guardian-agree)) {
  gap: var(--ds-number-12);                                   /* 24px */
}


/* ===== 카드 헤더 — 가운데 정렬 (타이틀 + 한줄 설명) ===== */
.signup-flow-v3 .login-card__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--ds-number-4);                                    /* 8px */
  width: 100%;
}
.signup-flow-v3 .login-card__title {
  font-size: var(--ds-pc-font-size-heading-medium);           /* 28px */
  font-weight: var(--ds-typo-font-weight-bold);
  color: var(--ds-light-color-text-basic);
  line-height: var(--ds-typo-line-height-heading);
  margin: 0;
}
.signup-flow-v3 .join-desc {
  font-size: var(--ds-pc-font-size-body-small);               /* 16px — 한 단계 낮춤 (시안 19에서 -1) */
  color: var(--ds-light-color-text-subtle);
  line-height: var(--ds-typo-line-height-body);
  text-align: center;
  margin: 0;
}


/* ===== 본인인증 / 법정대리인 PASS CTA — 시안: 흰색 박스, brand-gray 1px 보더, secondary-5 100x100 원 ===== */
.signup-flow-v3 .join-pass-cta {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ds-number-12);                                   /* 24px (시안) */
  padding: 3.3rem 2.1rem;                                     /* 33px 21px (시안 정확치) */
  background: var(--ds-color-gray-0);
  border: var(--ds-border-width-thin) solid var(--ds-color-brand-gray);  /* #939598 (시안) */
  border-radius: var(--ds-radius-medium);                     /* 8px */
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, opacity 0.15s;
  font-family: inherit;
  text-align: center;
}
.signup-flow-v3 .join-pass-cta:hover:not(:disabled) {
  background: color-mix(in srgb, var(--ds-color-secondary-5) 50%, transparent);
}
.signup-flow-v3 .join-pass-cta:focus-visible {
  outline: var(--ds-border-width-focus) solid var(--ds-color-brand-orange);
  outline-offset: 0.2rem;
}
.signup-flow-v3 .join-pass-cta:disabled {
  opacity: 0.5;                                               /* 시안: 동의 체크 전 50% */
  cursor: not-allowed;
}
.signup-flow-v3 .join-pass-cta__icon {
  width: var(--ds-number-50);                                 /* 100px */
  height: var(--ds-number-50);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.signup-flow-v3 .join-pass-cta__icon svg {
  width: 100%;
  height: 100%;
}
.signup-flow-v3 .join-pass-cta__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ds-number-4);                                    /* 8px (시안) */
  width: 100%;
}
.signup-flow-v3 .join-pass-cta__title {
  font-size: var(--ds-font-size-22);                          /* 22px → 시안 21 (가까움) */
  font-weight: var(--ds-typo-font-weight-bold);
  color: var(--ds-color-brand-dark);                          /* 시안: brand-dark */
  line-height: 1.3;
}
.signup-flow-v3 .join-pass-cta__desc {
  font-size: var(--ds-pc-font-size-body-xsmall);              /* 14px (시안) — xsmall=14 */
  color: var(--ds-color-gray-70);                             /* 시안 #464c53 = gray-70 */
  line-height: 1.5;
  margin: 0;
}


/* 법정대리인: 동의박스 → CTA 사이는 시안 20px (카드 gap 40에서 -20 보정) */
.signup-flow-v3 .join-guardian-agree + .join-pass-cta {
  margin-top: calc(-1 * var(--ds-number-10));                 /* -20px → effective 20px */
}


/* ===== 법정대리인 동의 체크박스 박스 — 시안: secondary-5 배경 + 보더 없음 ===== */
.signup-flow-v3 .join-guardian-agree {
  width: 100%;
  border: 0;
  border-radius: var(--ds-radius-medium);                     /* 8px */
  padding: var(--ds-number-6) var(--ds-number-10);            /* 12px 20px (시안) */
  margin: 0;
  background-color: var(--ds-color-secondary-5);              /* #eef2f7 (시안) */
}
.signup-flow-v3 .join-guardian-agree .ds-checkbox {
  display: flex;
  align-items: center;                                        /* 시안: items-center (한 줄) */
  gap: var(--ds-number-5);                                    /* 10px */
}
.signup-flow-v3 .join-guardian-agree__text {
  font-size: var(--ds-pc-font-size-body-small);               /* 16px (시안) — body-small=16 */
  line-height: 1.6;
  color: var(--ds-color-gray-90);                             /* 시안 #1e2124 = gray-90 */
  white-space: normal;
  word-break: keep-all;
  letter-spacing: -0.03em;                                    /* 시안 tracking -0.5px */
}
.signup-flow-v3 .join-guardian-agree__msg {
  margin-top: var(--ds-number-4);
  font-size: var(--ds-pc-font-size-label-small);
}


/* ===== 폼 — fieldset / legend / divider =====
   시안 gap 차이:
   - 외국인이메일인증 (form-fieldset 없음): form gap 40 (input-group↔submit)
   - 회원정보입력 (form-fieldset 있음): form gap 60 (V01↔V02↔submit)
   페이지 wrapper 일치 + content-aware :has로 분기 */
.signup-flow-v3 .login-card__form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--ds-number-20);                                   /* 40px (default — 외국인이메일인증) */
}
/* 회원정보입력 — V01↔V02↔submit 사이 60px (시안) */
.signup-flow-v3 .login-card__form:has(.join-form-fieldset) {
  gap: var(--ds-number-30);                                   /* 60px */
}
.signup-flow-v3 .login-card__input-group {
  display: flex;
  flex-direction: column;
  gap: var(--ds-number-10);                                   /* 20px (시안) */
  width: 100%;
}
.signup-flow-v3 .login-card__submit {
  width: 100%;
  margin-top: 0;                                              /* form gap이 처리 */
}
.signup-flow-v3 .join-form-fieldset {
  border: 0;
  padding: 0;
  margin: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--ds-number-8);                                    /* 16px (default = V02 계정정보) */
}
/* V01 회원정보 fieldset (dl 포함) — legend↔dl gap 12px (시안) */
.signup-flow-v3 .join-form-fieldset:has(.join-info-lines) {
  gap: var(--ds-number-6);                                    /* 12px */
}
/* legend row — 시안: brand-dark 1px border-bottom + pb-13 */
.signup-flow-v3 .join-form-legend-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-number-4);
  width: 100%;
  border-bottom: var(--ds-border-width-thin) solid var(--ds-color-brand-dark);
  padding-bottom: 1.3rem;                                     /* 13px (시안) */
}
.signup-flow-v3 .join-form-legend {
  font-size: var(--ds-pc-font-size-body-large);               /* 20px (시안) */
  font-weight: var(--ds-typo-font-weight-bold);
  color: var(--ds-color-gray-90);                             /* 시안 #1e2124 */
  line-height: 1.6;
  margin: 0;
}
/* 우측 안내문구 ("* 표시는 필수입력항목입니다.") — 14px gray-70, * 는 brand-red-aa */
.signup-flow-v3 .join-form-notice {
  font-size: var(--ds-pc-font-size-body-xsmall);              /* 14px */
  color: var(--ds-color-gray-70);                             /* 시안 #464c53 */
  margin: 0;
}
.signup-flow-v3 .join-form-notice__mark {
  color: var(--ds-color-brand-red-aa);                        /* 시안 #e03010 */
  font-weight: var(--ds-typo-font-weight-bold);
}
.signup-flow-v3 .join-divider {
  align-self: stretch;
  border: 0;
  border-top: var(--ds-border-width-thin) solid var(--ds-light-color-divider-gray-light);
  margin: 0;
}
/* 입력필드 — 시안: 48px height, gray-20 1px border, 6px radius, 14/13 padding */
.signup-flow-v3 .login-card .ds-input,
.signup-flow-v3 .login-card .ds-select,
.signup-flow-v3 .login-card input[type="date"],
.signup-flow-v3 .login-card input[type="email"],
.signup-flow-v3 .login-card input[type="text"],
.signup-flow-v3 .login-card input[type="tel"],
.signup-flow-v3 .login-card input[type="password"] {
  --ds-field--height: 4.8rem !important;
  height: 4.8rem !important;
  min-height: 4.8rem !important;
  border: var(--ds-border-width-thin) solid var(--ds-color-gray-20);
  border-radius: var(--ds-radius-small);                      /* 6px (시안) */
  box-sizing: border-box;
}
/* Label — 시안: 16px Pretendard SemiBold gray-90, " *" red-aa
   DS 기본은 label-medium 17px Bold이라 specificity·is-required 변형까지 강제 16/SemiBold
   주의: DS에서 body-small=16, body-xsmall=14 (xsmall이 더 작음). 시안 16 → body-small */
.signup-flow-v3 .login-card .ds-form-label,
.signup-flow-v3 .login-card .ds-form-label.is-required {
  font-weight: var(--ds-typo-font-weight-semibold) !important;
  font-size: var(--ds-pc-font-size-body-small) !important;    /* 16px */
  color: var(--ds-color-gray-90);
  letter-spacing: -0.012em;
}
.signup-flow-v3 .ds-form-label.is-required::after {
  content: ' *';
  color: var(--ds-color-brand-red-aa);                        /* 시안 #e03010 */
  font-weight: var(--ds-typo-font-weight-bold);
}
/* form-group 내부 라벨↔인풋 gap 8px (시안) */
.signup-flow-v3 .login-card .ds-form-group {
  gap: var(--ds-number-4);                                    /* 8px */
}
/* DS 기본 룰 ".ds-form-group + .ds-form-group { margin-top: var(--ds-gap-5) }"이
   flex gap 위에 누적되어 인접 form-group 사이가 시각적으로 더 넓어 보이는 현상 차단 */
.signup-flow-v3 .login-card .ds-form-group + .ds-form-group {
  margin-top: 0;
}


/* ===== 외국인 이메일인증 — 이메일 + 인증번호 발송 / 인증번호 + 타이머 ===== */
.signup-flow-v3 .join-email-row {
  display: flex;
  gap: var(--ds-number-6);                                    /* 12px (시안) */
  width: 100%;
  align-items: stretch;
}
.signup-flow-v3 .join-email-row .ds-input { flex: 1; min-width: 0; }
.signup-flow-v3 .join-email-row .ds-btn {
  flex-shrink: 0;
  height: 4.8rem !important;
  min-height: 4.8rem !important;
  box-sizing: border-box;
}
/* 인증번호 발송 / 주소 찾기 버튼 — 시안: brand-dark-aa(#343a48) bg + 흰글씨 (primary 아님) */
.signup-flow-v3 #btnSendCode,
.signup-flow-v3 #btnFindZipcode {
  background-color: var(--ds-color-brand-dark-aa);
  border-color: var(--ds-color-brand-dark-aa);
  color: var(--ds-color-gray-0);
}
.signup-flow-v3 #btnSendCode:hover:not(:disabled),
.signup-flow-v3 #btnFindZipcode:hover:not(:disabled) {
  background-color: var(--ds-color-brand-dark);
  border-color: var(--ds-color-brand-dark);
}

/* ===== 주소 입력 (회원정보입력 V02) — 우편번호 검색 + 기본주소 + 상세주소 세로 스택 ===== */
.signup-flow-v3 .join-address {
  display: flex;
  flex-direction: column;
  gap: var(--ds-number-4);                                    /* 8px — 우편번호행↔기본주소↔상세주소 */
  width: 100%;
}
/* 우편번호 입력 + [주소 찾기] 버튼 한 줄 (이메일행과 동일 리듬) */
.signup-flow-v3 .join-address__zip {
  display: flex;
  gap: var(--ds-number-6);                                    /* 12px — 우편번호↔버튼 (시안) */
  width: 100%;
  align-items: stretch;
}
.signup-flow-v3 .join-address__zip .ds-input { flex: 1; min-width: 0; }   /* 버튼 너비 제외한 나머지 가로 전체 */
.signup-flow-v3 .join-address__zip .ds-btn {
  flex-shrink: 0;
  height: 4.8rem !important;
  min-height: 4.8rem !important;
  box-sizing: border-box;
}
/* 모바일: 우편번호 입력 + [주소 찾기] 버튼 한 줄 유지 (우편번호 | 주소찾기 가로 정렬) */
@media (max-width: 767px) {
  .signup-flow-v3 .join-address__zip { flex-direction: row; }
  .signup-flow-v3 .join-address__zip .ds-btn { width: auto; }
}
.signup-flow-v3 .join-verify-input {
  position: relative;
  width: 100%;
}
.signup-flow-v3 .join-verify-input .ds-input {
  width: 100%;
  padding-right: var(--ds-number-24);                         /* 48px (타이머 영역) */
}
/* 타이머 — 시안: brand-red-aa(#e03010) Bold 16px */
.signup-flow-v3 .join-verify-input__timer {
  position: absolute;
  right: var(--ds-number-7);                                  /* 14px (시안 padding 13 매칭) */
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--ds-pc-font-size-body-small);               /* 16px — body-small=16 */
  color: var(--ds-color-brand-red-aa);                        /* #e03010 */
  font-weight: var(--ds-typo-font-weight-bold);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
.signup-flow-v3 .join-gender-options {
  display: flex;
  gap: var(--ds-number-12);                                   /* 24px */
  align-items: center;
}


/* ===== 회원정보입력 — 회원정보 readonly 텍스트 행 (join-info-lines) ===== */
.signup-flow-v3 .join-info-lines {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
}
.signup-flow-v3 .join-info-lines__item {
  display: flex;
  align-items: center;
  padding: var(--ds-number-6) 0;                              /* 12px 0 (시안 py-12) */
}
.signup-flow-v3 .join-info-lines__label {
  flex-shrink: 0;
  width: 12rem;                                               /* 120px (시안) */
  font-size: var(--ds-pc-font-size-body-small);               /* 16px (시안) */
  font-weight: var(--ds-typo-font-weight-regular);
  color: var(--ds-color-gray-70);                             /* 시안 #464c53 */
  letter-spacing: -0.03em;                                    /* 시안 tracking -0.5 */
  white-space: nowrap;
}
.signup-flow-v3 .join-info-lines__label.is-required::after {
  content: ' *';
  color: var(--ds-color-brand-red-aa);
  font-weight: var(--ds-typo-font-weight-bold);
}
.signup-flow-v3 .join-info-lines__value {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--ds-number-6);                                    /* 12px (이름↔뱃지 시안) */
  font-size: var(--ds-pc-font-size-body-medium);              /* 19px (시안) */
  font-weight: var(--ds-typo-font-weight-medium);             /* Medium (시안) */
  color: var(--ds-color-gray-90);                             /* 시안 #1e2124 */
  letter-spacing: -0.03em;
  min-width: 0;
}
.signup-flow-v3 .join-info-lines__value--input {
  font-weight: var(--ds-typo-font-weight-regular);
  gap: 0;
}
.signup-flow-v3 .join-info-lines__value--input .ds-input {
  flex: 1;
  max-width: none;
  width: 100%;
}
/* 본인확인완료 뱃지 — 시안: 18px check + 14px Bold brand-blue-aa */
.signup-flow-v3 .join-info-lines__verified {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-number-2);                                    /* 4px */
  font-size: var(--ds-pc-font-size-body-xsmall);              /* 14px */
  font-weight: var(--ds-typo-font-weight-bold);
  color: var(--ds-color-brand-blue-aa);                       /* #027bc1 */
  letter-spacing: -0.03em;
  white-space: nowrap;
}
.signup-flow-v3 .join-info-lines__verified svg {
  width: 1.8rem;                                              /* 18px (시안) */
  height: 1.8rem;
  flex-shrink: 0;
}

/* ds-form-hint — 시안: 영문 4~12자 등 안내문 14px gray-70 */
.signup-flow-v3 .login-card .ds-form-hint {
  font-size: var(--ds-pc-font-size-body-xsmall);              /* 14px */
  color: var(--ds-color-gray-70);                             /* 시안 #464c53 */
  line-height: 1.4;
  margin-top: 0.3rem;                                         /* 3px (시안 pt-3) */
  margin-bottom: 0;
}


/* ===== 가입완료 — 정보 박스 + 환영 타이틀 ===== */
.signup-flow-v3 .join-complete-title {
  font-size: var(--ds-pc-font-size-heading-medium);           /* 28px */
  line-height: 1.35;
  color: var(--ds-color-gray-90);                             /* 시안: 기본 다크 */
  font-weight: var(--ds-typo-font-weight-bold);
}
/* 가입완료 제목 내 이름만 primary-50 강조 (시안: "홍길동"만 파랑) */
.signup-flow-v3 .join-complete-title > span {
  color: var(--ds-color-primary-50);
}
.signup-flow-v3 .join-complete-info {
  width: 100%;
  border: var(--ds-border-width-thin) solid var(--ds-color-gray-10);
  border-radius: var(--ds-radius-large);                      /* 12px (시안) */
  padding: 0;
  background-color: var(--ds-color-gray-0);
  overflow: hidden;
}
.signup-flow-v3 .join-complete-info__list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 0;
}
.signup-flow-v3 .join-complete-info__item {
  display: flex;
  align-items: center;
  gap: var(--ds-number-2);                                    /* 4px (시안) */
  padding: var(--ds-number-7) var(--ds-number-10);            /* 14px 20px */
}
.signup-flow-v3 .join-complete-info__item + .join-complete-info__item {
  border-top: var(--ds-border-width-thin) solid var(--ds-color-gray-10);
}
.signup-flow-v3 .join-complete-info__item dt {
  flex-shrink: 0;
  width: 10rem;                                               /* 100px (시안) */
  font-size: var(--ds-pc-font-size-body-small);               /* 16px (시안) — body-small=16 */
  font-weight: var(--ds-typo-font-weight-regular);
  color: var(--ds-color-gray-70);                             /* 시안 #464c53 */
  margin: 0;
}
.signup-flow-v3 .join-complete-info__item dd {
  flex: 1;
  font-size: var(--ds-pc-font-size-body-medium);              /* 19px */
  font-weight: var(--ds-typo-font-weight-semibold);           /* SemiBold (시안) */
  color: var(--ds-color-gray-90);                             /* 시안 #1e2124 */
  margin: 0;
}

/* ============================================================
   020106 가입완료 — find-result 패턴 자체 명시 (030201 아이디 확인과 동일 UI)
   외부 login-page-v3.css 의존 없이 signup-page-v3.css 내부에서 완결
   ============================================================ */
/* find-result 사용 시 외곽 컨테이너 reset (이중 카드 방지) */
.signup-flow-v3 .join-complete-info:has(.find-result__list) {
  border: none;
  background: transparent;
  border-radius: 0;
  padding: 0;
  overflow: visible;
}
.signup-flow-v3 .find-result__list {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--ds-number-4);
}
.signup-flow-v3 .find-result__item {
  display: flex;
  align-items: center;
  gap: var(--ds-number-6);                                    /* 12px */
  padding: var(--ds-number-8) var(--ds-number-10);            /* 16px 20px */
  background: var(--ds-color-gray-5);
  border-radius: var(--ds-radius-small);                      /* 6px */
}
.signup-flow-v3 .find-result__avatar {
  width: 3.2rem;                                              /* 32px */
  height: 3.2rem;
  border-radius: 50%;
  background: var(--ds-color-gray-0);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ds-color-gray-50);
  flex-shrink: 0;
}
.signup-flow-v3 .find-result__info {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;                                                /* 2px */
}
.signup-flow-v3 .find-result__id {
  font-size: var(--ds-pc-font-size-body-medium);              /* 19px */
  font-weight: var(--ds-typo-font-weight-bold);
  color: var(--ds-color-gray-90);
}
.signup-flow-v3 .find-result__meta {
  font-size: var(--ds-pc-font-size-body-xsmall);              /* 14px */
  color: var(--ds-color-gray-70);
}


/* ===== 버튼 그룹 (가입완료 / 약관) ===== */
.signup-flow-v3 .join-agree-btns,
.signup-flow-v3 .join-complete-btns {
  display: flex;
  justify-content: center;
  gap: var(--ds-number-4);
  width: 100%;
  margin: 0;
}
.signup-flow-v3 .join-complete-btns .ds-btn {
  width: 100%;
  min-height: var(--ds-number-24);                            /* 48px */
}


/* ============================================================
   회원가입 flow — bg_mypage 배경 (2가지 동작 분리)

   [그룹 A] viewport-fixed
     - .site-main에 background-attachment: fixed
     - 스크롤 중에는 viewport 하단에 이미지 고정
     - main 끝(footer 시작점)에서 main 박스 밖이 클립 + 불투명 푸터 occlude로
       이미지 하단이 푸터 top에 멈춘 모양으로 보임 (레이아웃 여백 없음)
     - 대상: 020101 약관동의 + 020104 외국인이메일인증 + 020105 회원정보입력
             (모두 .login-card--wide 사용)

   [그룹 B] main-bottom scroll
     - body 배경 없음, .site-main 하단에 이미지 (페이지와 함께 스크롤)
     - 이미지 하단 = main 하단 = footer top
     - 대상: 020100 회원유형선택 (.signup-v3)
            + 020102 법정대리인인증 + 020103 본인인증 (.join-pass-cta)
            + 020106 가입완료 (.join-complete-info)

   - 헤더 위 축하 아이콘 ic_con (12px 간격) — 가입완료 전용
   - 아이디+가입일 가운데 정렬 (avatar 삭제됨) — 가입완료 전용
   ============================================================ */

/* wrap의 secondary-5 배경을 투명 처리 → body/main의 bg_mypage 노출 (모든 회원가입 페이지 공통) */
.signup-v3,
.login-wrap.signup-agree-v3,
.login-wrap.signup-flow-v3 {
  background: transparent;
}

/* [그룹 A] sticky-bottom — 약관동의 + 외국인이메일인증 + 회원정보입력 (.login-card--wide)
   - .site-main::after(이미지)에 position: sticky; bottom: 0
   - 스크롤 중: viewport 하단에 부착되어 따라옴
   - main 끝(= footer 시작점) 도달 시: 그 자리에 박혀 멈춤 → 이미지 하단이 footer top에 정렬
   - 여백 0 트릭: 높이를 padding-bottom %로, margin-top을 같은 % 음수로 주어
     레이아웃 기여 높이를 정확히 상쇄(둘 다 컨테이너 폭 기준이라 폭과 무관하게 0) */
body:has(.login-card--wide) {
  background-color: #f2f4fb;                                  /* bg_mypage.png 베이스 색 — 매끄러운 경계 */
}
body:has(.login-card--wide) .site-main {
  position: relative;
  isolation: isolate;                                         /* z-index:-1을 .site-main 내부로 격리 */
}
body:has(.login-card--wide) .site-main::after {
  content: '';
  display: block;
  align-self: stretch;                                        /* flex(align-items:center) 환경에서 풀너비 확보 */
  width: 100%;
  height: 0;
  padding-bottom: 43.646%;                                    /* 838/1920 — 이미지 비율 높이(main 폭 기준) */
  margin-top: -43.646%;                                       /* 동일값 음수 → 레이아웃 높이 정확히 상쇄(여백 0) */
  position: sticky;
  bottom: 0;                                                  /* 스크롤 중 viewport 하단 부착, main 끝에서 멈춤 */
  background-image: url('../../img/bg_mypage.png');
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: 100% 100%;                                 /* 박스가 이미 원본 비율 → 왜곡 없음 */
  pointer-events: none;
  z-index: -1;                                                /* 콘텐츠(wrap·card) 뒤로 */
}

/* [그룹 B] main-bottom scroll — 회원유형선택 + 본인인증/법정대리인인증 + 가입완료 */
body:has(.signup-v3) .site-main,
body:has(.join-pass-cta) .site-main,
body:has(.join-complete-info) .site-main {
  background-image: url('../../img/bg_mypage.png');
  background-repeat: no-repeat;
  background-position: 50% 100%;                              /* 이미지 하단 = main 하단 = 푸터 시작점 */
  background-size: 100% auto;                                 /* 가로 폭 맞춤 */
  /* background-attachment 기본값(scroll) — 페이지와 함께 스크롤 */
}

.signup-flow-v3 .join-complete-icon {
  display: block;
  margin: 0 0 0.4rem;                                         /* 4px — 헤더 gap 8 + 4 = 12px */
}
.signup-flow-v3:has(.join-complete-info) .find-result__item {
  justify-content: center;
}
.signup-flow-v3:has(.join-complete-info) .find-result__info {
  align-items: center;
  text-align: center;
}


/* ===== Modal hidden 보장 (DS modal display:flex가 hidden 덮어쓰는 문제 방지) ===== */
.signup-flow-v3 .ds-modal-backdrop[hidden],
.ds-modal-backdrop.signup-flow-v3[hidden] {
  display: none;
}


/* ============================================================
   반응형 — 태블릿 (768~1199px)
   ============================================================ */
@media (max-width: 1199px) {
  .login-wrap.signup-flow-v3 {
    padding-block: 8rem;                                      /* 태블릿 80px — 가이드 §5-3 케이스 C */
  }
  .signup-flow-v3 .login-card,
  .signup-flow-v3 .login-card--wide {
    max-width: 100%;
  }
  .signup-flow-v3 .join-stepper-area {
    max-width: 100%;
  }
  /* 태블릿: 가입완료 카드 내 블록 사이 gap 60→32px (PC 시안 60은 데스크톱 전용) */
  .signup-flow-v3 .login-card:has(.join-complete-info) {
    gap: var(--ds-number-16);                                 /* 32px */
  }
}


/* ============================================================
   반응형 — 모바일 (~767px)
   ============================================================ */
@media (max-width: 767px) {
  .login-wrap.signup-flow-v3 {
    padding-block: 6rem;                                      /* 모바일 60px — 가이드 §5-3 케이스 C */
    padding-inline: var(--ds-mobile-padding-layout-side);
    gap: var(--ds-number-16);                                 /* 32px — step↔card 등 그룹 간격 확대 */
  }
  .signup-flow-v3 .join-stepper-area + .login-card,
  .signup-agree-v3 .join-stepper-area + .login-card {
    margin-top: var(--ds-number-8);                           /* 모바일 +16px (gap 32 + 16 = 48) */
  }
  .signup-flow-v3 .join-page-title {
    font-size: var(--ds-mobile-font-size-heading-large);
  }
  .signup-flow-v3 .ds-stepper__item {
    width: 9rem;                                              /* 90px — step 사이 간격 확대로 "법정대리인 인증" 한 줄 보장 */
  }
  .signup-flow-v3 .join-stepper-area--child .ds-stepper__label {
    font-size: 1.3rem;                                        /* 13px — 어린이 stepper 라벨 */
    word-break: keep-all;
    white-space: normal;
    line-height: 1.35;
  }
  .signup-flow-v3 .login-card,
  .signup-flow-v3 .login-card--wide {
    padding: var(--ds-number-20) var(--ds-number-12);         /* 40px 24px — 모바일 카드 내부 상/하/좌/우 확대 */
    gap: var(--ds-number-16);                                 /* 32px — 카드 헤더↔본문↔버튼 그룹 간격 확대 */
  }
  /* 모바일: 가입완료 카드 내 블록 사이 gap 32px (PC 40, 태블릿 32 → 모바일 32 통일) */
  .signup-flow-v3 .login-card:has(.join-complete-info) {
    gap: var(--ds-number-16);                                 /* 32px */
  }
  .signup-flow-v3 .login-card__title {
    font-size: var(--ds-mobile-font-size-heading-medium);
  }
  /* .join-desc 모바일 사이즈 — 태블릿/PC와 동일(16px) 유지. 별도 축소 없음 (사용자 결정 2026-04-29) */
  .signup-flow-v3 .join-desc {
    font-size: var(--ds-pc-font-size-body-small);             /* 16px (= 태블릿) */
  }
  .signup-flow-v3 .join-pass-cta {
    padding: var(--ds-number-10) var(--ds-number-8);          /* 20px 16px */
  }
  .signup-flow-v3 .join-pass-cta__icon {
    width: var(--ds-number-40);                               /* 80px */
    height: var(--ds-number-40);
  }
  .signup-flow-v3 .join-pass-cta__title {
    font-size: var(--ds-mobile-font-size-body-medium);
  }
  .signup-flow-v3 .join-pass-cta__desc {
    font-size: var(--ds-mobile-font-size-body-xsmall);
  }
  .signup-flow-v3 .join-guardian-agree__text {
    font-size: var(--ds-mobile-font-size-body-small);
  }
  .signup-flow-v3 .join-form-legend {
    font-size: var(--ds-mobile-font-size-body-medium);
  }
  .signup-flow-v3 .login-card .ds-form-group > .ds-form-label {
    font-size: var(--ds-mobile-font-size-body-small);
  }
  .signup-flow-v3 .join-info-lines__label {
    width: 9rem;
    font-size: var(--ds-mobile-font-size-body-xsmall);
  }
  .signup-flow-v3 .join-info-lines__value {
    font-size: var(--ds-mobile-font-size-body-small);
  }
  .signup-flow-v3 .join-email-row {
    flex-direction: column;
  }
  .signup-flow-v3 .join-email-row .ds-btn {
    width: 100%;
  }
  .signup-flow-v3 .join-complete-title {
    font-size: var(--ds-mobile-font-size-heading-medium);
  }
  /* 모바일 — ic_con 아이콘 viewport 가로 120% (양옆 viewport 밖으로 살짝 잘림, body overflow-x:hidden 으로 처리됨) */
  .signup-flow-v3 .join-complete-icon {
    width: 120vw;
    max-width: 120vw;
    margin-inline: calc(50% - 60vw);
  }
  .signup-flow-v3 .join-complete-info__item {
    padding: var(--ds-number-6) var(--ds-number-8);           /* 12px 16px */
    gap: var(--ds-number-6);
  }
  .signup-flow-v3 .join-complete-info__item dt {
    width: 7rem;
    font-size: var(--ds-mobile-font-size-body-small);
  }
  .signup-flow-v3 .join-complete-info__item dd {
    font-size: var(--ds-mobile-font-size-body-medium);
  }
}