/* login-page-v3.css
 * Generated by Phase 4 (safe-merge) for (로그인_MNU-U-030000, v3)
 * Source CSS (in cascade order): login-page-v3.css
 */

/* === source: login-page-v3.css === */
@charset "utf-8";

/* ================================================================
   로그인 모듈 v3 — 약관 재동의 (MNU-U-030101)
   ================================================================
   적용: shared/publishing/fo/pages/로그인_MNU-U-030000/MNU-U-030101_약관재동의_design_v2.html
   격리: wrapper `.login-rejoin-v2`를 .login-wrap에 추가 (모달 div도 동일 클래스)
   참고: 회원가입 약관동의(.signup-agree-v3)는 signup-page-v3.css 별도

   Figma: node-id=13756-3273 (회원가입 약관동의 시안에서 알림박스 + 모달 영역만 추출)
   생성일: 2026-04-29
   ================================================================ */


/* ==================== 아이콘 (#341: V3 누락 base ds-icon 모디파이어 포팅 — V1/V2 동일) ==================== */
.ds-icon--certificate-01 {
  -webkit-mask-image: url(../../icons/certificate-01.svg);
  mask-image: url(../../icons/certificate-01.svg);
}
.ds-icon--shield-tick {
  -webkit-mask-image: url(../../icons/shield-tick.svg);
  mask-image: url(../../icons/shield-tick.svg);
}
.ds-icon--info-circle {
  -webkit-mask-image: url(../../icons/info-circle.svg);
  mask-image: url(../../icons/info-circle.svg);
}
.ds-icon--arrow-right {
  -webkit-mask-image: url(../../icons/arrow-right.svg);
  mask-image: url(../../icons/arrow-right.svg);
}
.ds-icon--user-circle {
  -webkit-mask-image: url(../../icons/user-circle.svg);
  mask-image: url(../../icons/user-circle.svg);
}
.ds-icon--eye {
  -webkit-mask-image: url(../../icons/eye.svg);
  mask-image: url(../../icons/eye.svg);
}
.ds-icon--eye-off {
  -webkit-mask-image: url(../../icons/eye-off.svg);
  mask-image: url(../../icons/eye-off.svg);
}
.ds-icon--check-circle {
  -webkit-mask-image: url(../../icons/check-circle.svg);
  mask-image: url(../../icons/check-circle.svg);
}
.ds-icon--alert-triangle {
  -webkit-mask-image: url(../../icons/alert-triangle.svg);
  mask-image: url(../../icons/alert-triangle.svg);
}

/* ── 외국인/일반 회원 유도 텍스트 링크 (#341: V3 누락 — [hidden] 가드 포함, V2 동일) ── */
.find-account__foreign-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-size: var(--ds-pc-font-size-body-xsmall);
  color: var(--ds-light-color-text-subtle);
  text-decoration: none;
  transition: color 0.15s;
}
.find-account__foreign-link span:not(.ds-icon) {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.find-account__foreign-link .ds-icon {
  width: 1rem;
  height: 1rem;
  background-color: currentColor;
  flex-shrink: 0;
}
.find-account__icon-flip {
  transform: rotate(180deg);
}
.find-account__foreign-link[hidden] {
  display: none !important;
}
.find-account__foreign-link:hover {
  color: var(--ds-light-color-text-basic);
}
.find-account__foreign-link:focus-visible {
  outline: var(--ds-border-width-focus) solid var(--ds-color-brand-orange);
  outline-offset: 0.2rem;
}

/* 페이지 wrap (회원유형선택/약관동의 v3와 동일 톤) */
body:has(.login-rejoin-v2) {
  background-color: var(--ds-color-gray-0);
  overflow-x: hidden;
  max-width: 100%;
}
body:has(.login-rejoin-v2) .site-main {
  overflow-x: hidden;
  max-width: 100%;
}
body:has(.login-rejoin-v2) .site-footer {
  margin-top: 0;
}
.login-wrap.login-rejoin-v2 {
  display: flex;
  justify-content: center;
  gap: var(--ds-number-20);
  padding-block: var(--ds-number-30);
  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-rejoin-v2 .ds-btn:hover,
.login-rejoin-v2 .ds-btn:active {
  transform: none;
}

/* 약관 카드 (login-card + login-card--wide) */
.login-rejoin-v2 .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);
}
.login-rejoin-v2 .login-card--wide {
  max-width: 80rem;
  border: var(--ds-border-width-thin) solid var(--ds-color-gray-20);
  padding: 6.1rem 7.1rem;
  gap: var(--ds-number-12);                                 /* 24px */
  align-items: center;
}

/* 카드 헤더 (h2 약관 재동의 — 페이지 메인 타이틀 역할) */
.login-rejoin-v2 .login-card__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--ds-number-4);
  width: 100%;
}
.login-rejoin-v2 .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;
}

/* 알림박스 — Toss 스타일 빨강 (1년 이상 미접속...) */
.login-rejoin-v2 .join-rejoin-alert {
  display: flex;
  align-items: center;
  gap: var(--ds-number-6);
  width: 100%;
  padding: 1.3rem var(--ds-number-12);                      /* 13px 24px */
  background-color: color-mix(in srgb, var(--ds-color-brand-red-aa) 4%, transparent);
  border-radius: var(--ds-radius-medium);
  color: var(--ds-color-brand-red-aa);
  font-size: var(--ds-pc-font-size-label-medium);           /* 17px */
  font-weight: var(--ds-typo-font-weight-semibold);
  letter-spacing: -0.05em;
  line-height: 1.5;
}
.login-rejoin-v2 .join-rejoin-alert .ds-icon {
  width: var(--ds-number-12);
  height: var(--ds-number-12);
  background-color: var(--ds-color-brand-red-aa);
  flex-shrink: 0;
}
.login-rejoin-v2 .ds-icon--info-circle {
  -webkit-mask-image: url(../../icons/info-circle.svg);
          mask-image: url(../../icons/info-circle.svg);
}

/* 구분선 */
.login-rejoin-v2 .join-divider {
  align-self: stretch;
  border: none;
  border-top: var(--ds-border-width-thin) solid var(--ds-light-color-divider-gray-light);
  margin: 0;
}
.login-rejoin-v2 .join-terms-all + .join-divider {
  display: none;
}

/* 약관 섹션 */
.login-rejoin-v2 .join-terms-section {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--ds-number-6);
  padding: 0;
}
.login-rejoin-v2 .join-terms-title-row { order: 0; }
.login-rejoin-v2 .join-terms-channels  { order: 1; }
.login-rejoin-v2 .join-terms-box       { order: 2; }

.login-rejoin-v2 .join-terms-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: var(--ds-number-4);
}
.login-rejoin-v2 .join-terms-title-row .ds-checkbox {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-number-6);
  margin: 0;
}
.login-rejoin-v2 .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);
  margin: 0;
}
.login-rejoin-v2 .join-terms-required {
  color: var(--ds-color-brand-red-aa);
  font-weight: var(--ds-typo-font-weight-bold);
}
.login-rejoin-v2 .join-terms-optional {
  color: var(--ds-light-color-text-subtle);
  font-weight: var(--ds-typo-font-weight-medium);
}

/* 약관 본문 박스 */
.login-rejoin-v2 .join-terms-box {
  width: 100%;
  height: 24rem;
  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;
}
.login-rejoin-v2 .join-terms-box::-webkit-scrollbar { width: 0.6rem; }
.login-rejoin-v2 .join-terms-box::-webkit-scrollbar-track {
  background: transparent;
  margin-block: var(--ds-number-4);
}
.login-rejoin-v2 .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;
}
.login-rejoin-v2 .join-terms-box::-webkit-scrollbar-thumb:hover {
  background-color: var(--ds-color-gray-50);
}
.login-rejoin-v2 .join-terms-box::-webkit-scrollbar-button { display: none; }
.login-rejoin-v2 .join-terms-box--hug { height: auto; }
.login-rejoin-v2 .join-terms-chapter {
  font-size: var(--ds-pc-font-size-body-medium);
  margin-bottom: var(--ds-number-4);
}

/* 위탁업체 표 — 개인정보처리 위탁 약관 */
.login-rejoin-v2 .join-terms-table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--ds-number-12) 0;                            /* 24px 상하 */
  font-size: var(--ds-pc-font-size-body-xsmall);
}
.login-rejoin-v2 .join-terms-table th,
.login-rejoin-v2 .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;
}
.login-rejoin-v2 .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);
}

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

/* 약관 동의 버튼 그룹 */
.login-rejoin-v2 .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 */
.login-rejoin-v2 .join-terms-all {
  width: 100%;
  padding: 1.3rem var(--ds-number-12);                      /* 13px 24px */
  border: var(--ds-border-width-thin) solid transparent;
  border-radius: var(--ds-radius-medium);
  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 */
}
.login-rejoin-v2 .join-terms-all:hover {
  background: color-mix(in srgb, var(--ds-color-secondary-5) 80%, transparent);
}
.login-rejoin-v2 .join-terms-all:has(input[type="checkbox"]:checked) {
  background-color: var(--ds-color-gray-0);
  border-color: var(--ds-color-brand-dark);
}
.login-rejoin-v2 .join-terms-all:has(input[type="checkbox"]:checked):hover {
  background-color: var(--ds-color-gray-5);
}
.login-rejoin-v2 .join-terms-all .ds-checkbox {
  display: flex;
  width: 100%;
  align-items: center;
  gap: var(--ds-number-6);
  margin: 0;
  padding: 0;
}
.login-rejoin-v2 .join-terms-all .ds-checkbox input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  display: block;
  flex-shrink: 0;
  width: var(--ds-number-12);
  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;
}
.login-rejoin-v2 .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");
}
.login-rejoin-v2 .join-terms-all__text {
  font-size: var(--ds-pc-font-size-body-medium);
  font-weight: var(--ds-typo-font-weight-bold);
  color: var(--ds-color-brand-dark);
  letter-spacing: -0.05em;
  line-height: var(--ds-number-12);
  flex: 1;
}

/* 모달 hidden 보장 — DS의 display:flex가 hidden 덮어쓰기 방지.
 * 모달은 .login-wrap 밖이라 자손/자기자신 둘 다 매칭. */
.login-rejoin-v2 .ds-modal-backdrop[hidden],
.ds-modal-backdrop.login-rejoin-v2[hidden] {
  display: none;
}


/* 반응형 — 태블릿 */
@media (max-width: 1199px) and (min-width: 768px) {
  .login-rejoin-v2 .login-card--wide {
    padding: var(--ds-number-20);
    max-width: 100%;
  }
}

/* 반응형 — 모바일 */
@media (max-width: 767px) {
  .login-wrap.login-rejoin-v2 {
    padding-inline: var(--ds-mobile-padding-layout-side);
    padding-block: var(--ds-number-12);
    overflow-x: hidden;
    border-top: 0;
  }
  .login-rejoin-v2 .login-card {
    max-width: 100%;
    gap: var(--ds-number-10);
  }
  .login-rejoin-v2 .login-card--wide {
    padding: var(--ds-number-12) var(--ds-number-8);
  }
  /* h2 = 페이지 메인 타이틀 역할 → 24px 유지 (회원가입 h1과 동급) */
  .login-rejoin-v2 .login-card__title {
    font-size: var(--ds-mobile-font-size-heading-medium);   /* 24px */
  }
  .login-rejoin-v2 .join-rejoin-alert {
    font-size: var(--ds-mobile-font-size-body-small);       /* 14px */
    padding: var(--ds-number-5) var(--ds-number-8);
  }
  .login-rejoin-v2 .join-rejoin-alert .ds-icon {
    width: var(--ds-number-10);
    height: var(--ds-number-10);
  }
  .login-rejoin-v2 .join-terms-title {
    font-size: var(--ds-mobile-font-size-body-medium);
    line-height: var(--ds-number-12);
  }
  .login-rejoin-v2 .join-terms-box {
    font-size: var(--ds-mobile-font-size-body-small);
  }
  .login-rejoin-v2 .join-terms-chapter {
    font-size: var(--ds-mobile-font-size-body-medium);
  }
  .login-rejoin-v2 .join-terms-table {
    font-size: var(--ds-mobile-font-size-body-xsmall);
  }
  .login-rejoin-v2 .join-terms-table th,
  .login-rejoin-v2 .join-terms-table td {
    padding: var(--ds-number-3) var(--ds-number-4);
  }
  .login-rejoin-v2 .js-terms-toggle {
    min-height: var(--ds-number-13);
    padding-block: var(--ds-number-1);
    padding-inline: var(--ds-number-4);
    font-size: var(--ds-mobile-font-size-body-xsmall);
  }
  .login-rejoin-v2 .join-terms-all {
    padding: var(--ds-number-5) var(--ds-number-10);
  }
  .login-rejoin-v2 .join-terms-all__text {
    font-size: var(--ds-mobile-font-size-body-medium);
  }
  .login-rejoin-v2 .join-terms-channels {
    flex-wrap: wrap;
    gap: var(--ds-number-6);
    padding-left: var(--ds-number-10);
  }
  .login-rejoin-v2 .join-agree-btns {
    flex-direction: column-reverse;
    gap: var(--ds-number-3);
  }
  .login-rejoin-v2 .join-agree-btns .ds-btn {
    width: 100%;
  }
}


/* ================================================================
   로그인 flow — 로그인 / 아이디·비번 찾기 / 아이디 확인 / 비번 재설정
   (MNU-U-030100 / 030200 / 030201 / 030202) v3 — Figma TO-BE
     · 13761-9705 (로그인)
     · 13773-3347 + 13993-13552 + 13993-14032 (아이디·비번 찾기)
     · 13847-6063 (아이디 확인)
     · 13847-6808 (비번 재설정)
   ================================================================
   격리: wrapper `.login-flow-v3`를 .login-wrap에 추가 (모달 div도 동일 클래스)
   참고: 배경은 기존 login-page.css 흰색 톤 유지 (signup-flow-v3와 다름)
   ================================================================ */


/* ===== wrap ===== */
body:has(.login-flow-v3) {
  background-color: var(--ds-color-gray-0);
  overflow-x: hidden;
}
body:has(.login-flow-v3) .site-footer {
  margin-top: 0;
}
.login-wrap.login-flow-v3 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: var(--ds-number-25);                           /* 50px — 페이지 헤더와의 갭 */
  padding-bottom: 10rem;                                      /* 100px */
  padding-inline: var(--ds-pc-padding-layout-side);
  background: var(--ds-color-gray-0);
  border-top: 0;                                              /* 페이지 헤더 추가 — login-page.css의 회색 라인 제거 */
  min-height: 60vh;
  box-sizing: border-box;
}
.login-flow-v3 .ds-btn:hover,
.login-flow-v3 .ds-btn:active {
  transform: none;
}


/* ===== 카드 — 시안: 보더·드롭쉐도우 없음 (v2의 border/shadow override) ===== */
.login-flow-v3 .login-card {
  width: 100%;
  max-width: 56rem;                                           /* 560px (시안 정확치) */
  display: flex;
  flex-direction: column;
  gap: var(--ds-number-16);                                   /* 32px (default) */
  padding: var(--ds-number-25) 0 var(--ds-number-15);         /* top 50px / bottom 30px */
  background: transparent !important;
  border: 0 !important;                                       /* v2의 border 제거 */
  box-shadow: none !important;                                /* v2의 drop-shadow 제거 */
  box-sizing: border-box;
  align-items: stretch;
}
/* 030200 아이디·비번찾기 페이지 — 상위 탭 ↔ desc 갭 0 (탭 padding-bottom 16px이 시각 갭 담당) */
.login-flow-v3 .login-card:has(.find-account-tab) {
  gap: 0;
}


/* ===== v2의 .find-account-tab 라인 탭 룰 무력화 — DS .ds-tab--bold 디자인 유지 ===== */
.login-flow-v3 .find-account-tab .ds-tab__list {
  border-bottom: 0 !important;                                /* v2의 1px 라인 제거 */
  width: 100%;
}
.login-flow-v3 .find-account-tab .ds-tab__btn {
  flex: 0 0 auto !important;                                  /* v2 flex:1 무력화 */
  justify-content: center !important;
}
.login-flow-v3 .find-account-tab .ds-tab__btn.is-active::after,
.login-flow-v3 .find-account-tab .ds-tab__btn[aria-selected="true"]::after,
.login-flow-v3 .find-account-tab .ds-tab__btn:hover::after {
  display: none !important;                                   /* v2의 두꺼운 underline 제거 */
  content: none !important;
}


/* ===== 카드 헤더 ===== */
.login-flow-v3 .login-card__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--ds-number-4);                                    /* 8px */
  width: 100%;
}
.login-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-color-gray-90);
  line-height: var(--ds-typo-line-height-heading);
  margin: 0;
}
.login-flow-v3 .login-card__logo {
  display: block;
  height: auto;
}


/* ===== 폼 ===== */
.login-flow-v3 .login-card__form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--ds-number-8);                                    /* 16px */
}
.login-flow-v3 .login-card__input-group {
  display: flex;
  flex-direction: column;
  gap: var(--ds-number-4);                                    /* 8px */
}
/* 통합 입력 박스 (아이디 + 비밀번호 위아래 붙음) */
.login-flow-v3 .login-card__input-box {
  display: flex;
  flex-direction: column;
  border: var(--ds-border-width-thin) solid var(--ds-color-gray-20);
  border-radius: var(--ds-radius-small);                      /* 6px */
  overflow: hidden;
  background: var(--ds-color-gray-0);
}
.login-flow-v3 .login-card__field {
  position: relative;
}
.login-flow-v3 .login-card__field + .login-card__field {
  border-top: var(--ds-border-width-thin) solid var(--ds-color-gray-20);
}
.login-flow-v3 .login-card__field .ds-input {
  border: 0 !important;
  border-radius: 0 !important;
  height: 4.8rem !important;
  min-height: 4.8rem !important;
  width: 100%;
  padding-inline: var(--ds-number-7);                         /* 14px */
  background: transparent;
}
.login-flow-v3 .login-card__field .ds-input:focus {
  outline: 0;
  box-shadow: none;
}
/* 비밀번호 input — eye 토글 위치 */
.login-flow-v3 .login-pw-field {
  position: relative;
  display: flex;
  align-items: center;
}
.login-flow-v3 .login-pw-field .ds-input {
  padding-right: 4rem;                                        /* 40px (eye 영역) */
}
.login-flow-v3 .login-pw-toggle {
  position: absolute;
  right: var(--ds-number-4);
  top: 50%;
  transform: translateY(-50%);
  width: 3.2rem;
  height: 3.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--ds-color-gray-50);
  padding: 0;
}
.login-flow-v3 .login-pw-toggle:hover {
  color: var(--ds-color-gray-70);
}
/* 단독 입력 (비번재설정 페이지의 login-pw-field) — 자체 보더 + radius */
.login-flow-v3 .ds-form-group .login-pw-field .ds-input {
  border: var(--ds-border-width-thin) solid var(--ds-color-gray-20);
  border-radius: var(--ds-radius-small);
  height: 4.8rem !important;
  min-height: 4.8rem !important;
  width: 100%;
}
.login-flow-v3 .login-card__options {
  margin-top: var(--ds-number-2);                             /* 4px */
}
.login-flow-v3 .login-card__submit {
  width: 100%;
  margin-top: var(--ds-number-4);                             /* 8px */
}
/* 카드 내 모든 버튼 6px radius (시안) */
.login-flow-v3 .login-card .ds-btn {
  border-radius: var(--ds-radius-small);
}
/* 카드 내 input radius/border (단독 ds-input 적용 — 통합 박스 내부는 위에서 0!important로 무력화) */
.login-flow-v3 .ds-form-group .ds-input,
.login-flow-v3 .ds-form-group .ds-select,
.login-flow-v3 .ds-form-group input[type="date"],
.login-flow-v3 .ds-form-group input[type="email"],
.login-flow-v3 .ds-form-group input[type="text"],
.login-flow-v3 .ds-form-group input[type="tel"],
.login-flow-v3 .ds-form-group input[type="password"] {
  border: var(--ds-border-width-thin) solid var(--ds-color-gray-20);
  border-radius: var(--ds-radius-small);
  height: 4.8rem !important;
  min-height: 4.8rem !important;
  box-sizing: border-box;
}
/* form-group label — 14px Regular gray-90 */
.login-flow-v3 .login-card .ds-form-label {
  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;
}
.login-flow-v3 .login-card .ds-form-group {
  display: flex;
  flex-direction: column;
  gap: var(--ds-number-4);                                    /* 8px */
}
.login-flow-v3 .login-card .ds-form-group + .ds-form-group {
  margin-top: 0;
}
.login-flow-v3 .ds-form-hint {
  font-size: var(--ds-pc-font-size-body-xsmall);              /* 14px */
  color: var(--ds-color-gray-70);
  line-height: 1.4;
  margin-top: 0.3rem;
  margin-bottom: 0;
}


/* ===== 하단 링크 (아이디/비번찾기 | 회원가입) ===== */
.login-flow-v3 .login-card__links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--ds-number-12);                                   /* 24px */
  list-style: none;
  margin: 0;
  padding: var(--ds-number-4) 0 0;
}
.login-flow-v3 .login-card__links li {
  display: flex;
  align-items: center;
}
.login-flow-v3 .login-card__links li + li::before {
  content: '';
  display: block;
  width: var(--ds-border-width-thin);
  height: 1.2rem;
  background: var(--ds-color-gray-20);
  margin-right: var(--ds-number-12);
}
.login-flow-v3 .login-card__links a {
  font-size: var(--ds-pc-font-size-body-small);               /* 16px */
  color: var(--ds-color-gray-70);
  text-decoration: none;
  transition: color 0.15s;
}
.login-flow-v3 .login-card__links a:hover {
  color: var(--ds-color-gray-90);
}


/* ===== "다른 방법으로 로그인" 구분선 — v2 패턴(flex + flex:1 라인) 호환 + 색 정정 ===== */
.login-flow-v3 .login-card__divider-text {
  position: static;
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--ds-number-8);                                    /* 16px */
  text-align: center;
  font-size: var(--ds-pc-font-size-body-xsmall);              /* 14px */
  font-weight: var(--ds-typo-font-weight-regular);
  color: var(--ds-color-gray-50) !important;
  margin-block: var(--ds-number-6);
}
.login-flow-v3 .login-card__divider-text::before,
.login-flow-v3 .login-card__divider-text::after {
  content: '';
  position: static;
  flex: 1;
  width: auto;
  height: var(--ds-border-width-thin);
  background: var(--ds-color-gray-10) !important;             /* v2의 secondary-10 보라톤 → 회색 */
}


/* ===== 소셜 로그인 버튼 (네이버 / 카카오 / 간편인증) — 시안 정확치 ===== */
.login-flow-v3 .login-card__auth {
  width: 100%;
}
.login-flow-v3 .login-card__auth-btns {
  display: flex;
  gap: var(--ds-number-4);                                    /* 8px */
  width: 100%;
}
.login-flow-v3 .login-card__auth-btns--stack {
  flex-direction: row;
}
.login-flow-v3 .login-card__auth-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--ds-number-4);                                    /* 8px — svg ↔ 텍스트 */
  min-height: 5.2rem;                                         /* 52px — svg 위아래 여백 확보 */
  padding: var(--ds-number-5) var(--ds-number-8);             /* 10px 16px (위아래 여백 명시) */
  border: 0;
  border-radius: var(--ds-radius-small);                      /* 6px */
  font-size: var(--ds-pc-font-size-body-small);               /* 16px */
  font-weight: var(--ds-typo-font-weight-bold);
  line-height: 1;
  white-space: nowrap;                                        /* "간편인증 로그인" 등 줄바꿈 방지 */
  cursor: pointer;
  transition: opacity 0.15s;
  box-sizing: border-box;
  /* 기본 — 간편인증 (brand-dark) */
  background: var(--ds-color-brand-dark);
  color: var(--ds-color-gray-0);
}
.login-flow-v3 .login-card__auth-btn svg {
  flex-shrink: 0;
}
.login-flow-v3 .login-card__auth-btn:hover {
  opacity: 0.9;
}
.login-flow-v3 .login-card__auth-btn--naver {
  background-color: #03C75A !important;                       /* 네이버 브랜드 그린 (외부 브랜드, DS 토큰 미존재) */
  color: var(--ds-color-gray-0) !important;
}
.login-flow-v3 .login-card__auth-btn--kakao {
  background-color: #FEE500 !important;                       /* 카카오 브랜드 옐로 (외부 브랜드, DS 토큰 미존재) */
  color: #191919 !important;
}


/* ===== 알럿 (로그인 실패 / 잠김) — 아이콘 세로 가운데 정렬 ===== */
.login-flow-v3 .ds-alert {
  width: 100%;
  align-items: center;                                        /* 아이콘+텍스트 세로 가운데 */
  text-align: center;
}
.login-flow-v3 .ds-alert > svg {
  flex-shrink: 0;
}
/* 잠금 알럿(빨강) — 아이콘은 세로 가운데(상속), 텍스트만 2줄 좌측 정렬 */
.login-flow-v3 .login-card__alert--stack {
  text-align: left;
}
.login-flow-v3 .login-card__alert--stack > span {
  text-align: left;
}


/* ===== 시각적 라벨 숨김 (스크린리더만 읽음) — KWCAG 검사항목 #21 레이블 제공 ===== */
.login-flow-v3 .login-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* ===== 캡스락 메시지 ===== */
.login-flow-v3 .login-capslock-msg {
  color: var(--ds-color-warning-50, #f59e0b);
  font-size: var(--ds-pc-font-size-body-xsmall);
}


/* ============================================================
   아이디·비밀번호 찾기 (030200) 전용
   ============================================================ */

/* 상위 탭 (.find-account-tab) — DS `.ds-tab--bold` 변형 그대로 사용 (회원정보수정 페이지 탭과 동일).
   DS 룰: 가운데 정렬, 파이프(|) 구분, 활성 시 Bold + brand-dark.
   페이지 wrapper만 추가 — 별도 시각 룰 없음. */
.login-flow-v3 .find-account-tab {
  width: 100%;
}

/* 안내문구 — desc↔pill 갭 = panel gap + 4px (4px 차이로 pill↔다음 컨텐츠보다 좁게) */
.login-flow-v3 .find-account__desc {
  font-size: var(--ds-pc-font-size-body-small);               /* 16px */
  color: var(--ds-color-gray-70);
  text-align: center;
  margin: 0 0 var(--ds-number-2);                             /* 4px → desc↔pill = panel gap + 4 */
}

/* pill 탭(.find-account__header) — pill↔다음 컨텐츠 갭 (legend 큰 폰트 시각 보정 위해 negative margin) */
.login-flow-v3 .find-account__header {
  margin-bottom: calc(-1 * var(--ds-number-4));               /* -8px → PC pill↔다음 = panel gap 40 - 8 = 32 (legend 폰트 큰 만큼 보정) */
}

/* 하위 탭 (pill — segmented control 룩). 시안 정확치 매칭 */
.login-flow-v3 .find-account__header.ds-tab--pill {
  width: 100%;
}
.login-flow-v3 .find-account__header .ds-tab__list {
  display: flex;
  gap: var(--ds-number-4);                                    /* 8px (시안) */
  justify-content: center;
  background: var(--ds-color-gray-5);                         /* #f4f5f6 (시안) */
  border-radius: 9999px;
  padding: var(--ds-number-2);                                /* 4px (시안) */
  list-style: none;
  margin: 0;
  width: 100%;
  box-sizing: border-box;
}
.login-flow-v3 .find-account__header .ds-tab__btn {
  flex: 1 0 0;
  height: 4rem;                                               /* 40px (시안) */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--ds-number-10);                             /* 0 20px */
  background: transparent;
  border: 0;
  border-radius: 9999px;
  font-size: var(--ds-pc-font-size-body-small);               /* 16px */
  font-weight: var(--ds-typo-font-weight-medium);
  color: var(--ds-color-gray-70);
  cursor: pointer;
  transition: color 0.15s, background-color 0.15s, box-shadow 0.15s;
}
.login-flow-v3 .find-account__header .ds-tab__btn.is-active {
  background: var(--ds-color-brand-dark-aa);                  /* #343a48 (시안) */
  color: var(--ds-color-gray-0);
  font-weight: var(--ds-typo-font-weight-bold);
  box-shadow: 0 0.1rem 0.3rem rgba(0, 0, 0, 0.12);            /* 시안 그림자 */
}

/* 탭 패널 내부 (안내문 + pill segmented + form panel) — 시안 gap 40px.
   ID 셀렉터는 specificity가 너무 높아 [hidden] 무력화 → 클래스 기반으로 처리 + [hidden] 명시 */
.login-flow-v3 .ds-tab__panel {
  display: flex;
  flex-direction: column;
  gap: var(--ds-number-12);                                   /* 24px (안내문 ↔ pill ↔ panel) */
  width: 100%;
}
.login-flow-v3 .ds-tab__panel[hidden] {
  display: none !important;                                   /* hidden 우선 보장 */
}
.login-flow-v3 .ds-tab__panel > .login-card__form {
  display: flex;
  flex-direction: column;
  gap: var(--ds-number-10);                                   /* 20px (form 자식들 사이 시각적 통일) */
  width: 100%;
  margin-top: 0;                                              /* pill ↔ form first line = panel gap 24만 (시안 시각 매칭) */
}

/* 인증방법 라디오 그룹 (휴대폰/이메일) — 시안: legend 위 + 라디오 가로 배치 */
.login-flow-v3 .find-account__method-select {
  border: 0;
  padding: 0;
  margin: 0;
  width: 100%;
}
.login-flow-v3 .find-account__method-legend {
  display: block;
  width: 100%;
  font-size: var(--ds-font-size-20);                          /* 20px (시안) — 라벨보다 위계 큼 */
  font-weight: var(--ds-typo-font-weight-bold);               /* bold */
  color: var(--ds-color-gray-90);
  padding: 0;
  margin-bottom: var(--ds-number-4);                          /* 8px (legend ↔ 라디오 그룹) */
}
.login-flow-v3 .find-account__method-select .ds-radio {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-number-3);                                    /* 6px (dot ↔ 라벨) */
  margin-right: var(--ds-number-12);                          /* 24px (라디오↔라디오) */
}
/* 인증방법 선택 fieldset ↔ 다음 form-group(이름) 사이 갭 = 20px 토큰
   form gap (.login-flow-v3 .ds-tab__panel > .login-card__form 의 var(--ds-number-10) = 20px)이 적용됨.
   추가 margin 0으로 명시 — 다른 selector가 끼어들어 갭이 변동되는 것 방지 */
.login-flow-v3 .login-card__form > .find-account__method-select + .ds-form-group {
  margin-top: 0;                                              /* form gap 20px만 적용 */
}

/* 아이디찾기 / 비번찾기 panel — desc ↔ pill ↔ 컨텐츠 gap 40px 통일 */
.login-flow-v3 .login-card > #tabFindId.ds-tab__panel:not([hidden]),
.login-flow-v3 .login-card > #tabFindPw.ds-tab__panel:not([hidden]) {
  gap: var(--ds-number-20);                                   /* 40px */
}

/* 간편인증 카드 — 시안 정확치: white bg + brand-gray 1px + 8px radius + 33/21 padding + 24 gap */
.login-flow-v3 .find-account__auth-cards {
  width: 100%;
}
.login-flow-v3 .find-account__auth-card {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ds-number-8);                                    /* 16px */
  padding: var(--ds-number-12) var(--ds-number-10);           /* 24px 20px (시안 33/21에서 축소) */
  background: var(--ds-color-gray-0);                         /* white */
  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;
  font-family: inherit;
  text-align: center;
}
.login-flow-v3 .find-account__auth-card:hover {
  background: color-mix(in srgb, var(--ds-color-secondary-5) 50%, transparent);
}
/* 일러스트 영역 — secondary-5 100×100 원 + 인증서 일러스트 */
/* 일러스트 영역 — ic_auth_easy.svg 자체에 secondary-5 원 + 인증서 + 빨간 도장 포함 */
.login-flow-v3 .find-account__auth-icon {
  width: var(--ds-number-50) !important;                      /* 100px */
  height: var(--ds-number-50) !important;
  display: block !important;
  flex-shrink: 0;
  background: transparent !important;                         /* SVG가 자체 배경 가짐 */
}
.login-flow-v3 .find-account__auth-icon svg {
  width: 100% !important;
  height: 100% !important;
  display: block;
}
/* 카드 본문 텍스트 그룹 — gap 8 (시안) */
.login-flow-v3 .find-account__auth-card > .find-account__auth-title,
.login-flow-v3 .find-account__auth-card > .find-account__auth-desc {
  display: block;
}
.login-flow-v3 .find-account__auth-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;
  margin: 0;
}
.login-flow-v3 .find-account__auth-desc {
  font-size: var(--ds-pc-font-size-body-xsmall);              /* 14px (시안) */
  color: var(--ds-color-gray-70);                             /* 시안 #464c53 */
  line-height: 1.5;
  margin: 0;
}

/* 이메일 + 인증번호 발송 row (외국인 비번찾기) */
.login-flow-v3 .find-account__email-row {
  display: flex;
  gap: var(--ds-number-6);                                    /* 12px */
  width: 100%;
  align-items: stretch;
}
.login-flow-v3 .find-account__email-row .ds-input { flex: 1; min-width: 0; }
.login-flow-v3 .find-account__email-row .ds-btn {
  flex-shrink: 0;
  background-color: var(--ds-color-brand-dark-aa);
  border-color: var(--ds-color-brand-dark-aa);
  color: var(--ds-color-gray-0);
  height: 4.8rem !important;
  min-height: 4.8rem !important;
}

/* 외국인/일반 회원 유도 링크 */
.login-flow-v3 .find-account__foreign-link {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-number-2);
  background: transparent;
  border: 0;
  padding: var(--ds-number-3) 0;
  font-size: var(--ds-pc-font-size-body-small);
  color: var(--ds-color-gray-70);
  cursor: pointer;
  align-self: center;
}
.login-flow-v3 .find-account__foreign-link:hover {
  color: var(--ds-color-gray-90);
}
.login-flow-v3 .find-account__icon-flip {
  transform: rotate(180deg);
}

/* 인증번호 입력 + 타이머 (signup-flow-v3와 같은 패턴) */
.login-flow-v3 .join-verify-input {
  position: relative;
  width: 100%;
}
.login-flow-v3 .join-verify-input .ds-input {
  width: 100%;
  padding-right: var(--ds-number-24);
}
.login-flow-v3 .join-verify-input__timer {
  position: absolute;
  right: var(--ds-number-7);
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--ds-pc-font-size-body-small);               /* 16px */
  color: var(--ds-color-brand-red-aa);
  font-weight: var(--ds-typo-font-weight-bold);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}


/* ============================================================
   아이디 확인 페이지 (030201) 전용
   ============================================================ */
.login-flow-v3 .find-result__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--ds-number-3);                                    /* 6px */
  width: 100%;
}
.login-flow-v3 .find-result__title {
  font-size: var(--ds-pc-font-size-heading-medium);           /* 28px */
  font-weight: var(--ds-typo-font-weight-bold);
  color: var(--ds-color-gray-90);
  line-height: 1.4;
  margin: 0;
}
.login-flow-v3 .find-result__desc {
  font-size: var(--ds-pc-font-size-body-small);               /* 16px */
  color: var(--ds-color-gray-70);
  margin: 0;
}
.login-flow-v3 .find-result__list {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--ds-number-4);
}
.login-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 */
}
.login-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;
}
.login-flow-v3 .find-result__info {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;                                                /* 2px */
}
.login-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);
}
.login-flow-v3 .find-result__meta {
  font-size: var(--ds-pc-font-size-body-xsmall);              /* 14px */
  color: var(--ds-color-gray-70);
}
.login-flow-v3 .login-card__btn-group {
  display: flex;
  gap: var(--ds-number-4);                                    /* 8px */
  width: 100%;
}
.login-flow-v3 .login-card__btn-group--row .ds-btn {
  flex: 1;
}
/* 비밀번호 찾기 outline 버튼 — line-gray 바탕은 유지하되 색만 primary 파랑 */
.login-flow-v3 .login-card__btn-group .ds-btn--line-gray {
  border-color: var(--ds-color-primary-50) !important;
  color: var(--ds-color-primary-50) !important;
}
.login-flow-v3 .login-card__btn-group .ds-btn--line-gray:hover {
  background-color: var(--ds-color-primary-5) !important;
}


/* ===== Modal hidden 보장 ===== */
.login-flow-v3 .ds-modal-backdrop[hidden],
.ds-modal-backdrop.login-flow-v3[hidden] {
  display: none;
}


/* ============================================================
   반응형 — 태블릿 (768~1199px)
   ============================================================ */
@media (max-width: 1199px) {
  .login-wrap.login-flow-v3 {
    padding-top: 0;                                           /* 0 — 태블릿 페이지 헤더와의 갭 */
  }
  .login-flow-v3 .login-card {
    max-width: 48rem;
  }
  /* 030200 panel gap 태블릿 축소 (PC 40 → 28) */
  .login-flow-v3 .login-card > #tabFindId.ds-tab__panel:not([hidden]),
  .login-flow-v3 .login-card > #tabFindPw.ds-tab__panel:not([hidden]) {
    gap: var(--ds-number-14);                                 /* 28px */
  }
}


/* ============================================================
   반응형 — 모바일 (~767px)
   ============================================================ */
@media (max-width: 767px) {
  .login-wrap.login-flow-v3 {
    padding-top: var(--ds-number-8);                          /* 16px — 모바일 페이지 헤더와의 갭 */
    padding-bottom: var(--ds-number-12);                      /* 24px */
    padding-inline: var(--ds-mobile-padding-layout-side);
  }
  .login-flow-v3 .login-card {
    max-width: 100%;
    padding: 0 0 var(--ds-number-10);                         /* top 0 (login-wrap padding-block 24px로 대체) / bottom 20px */
    gap: var(--ds-number-10);                                 /* 20px */
  }
  .login-flow-v3 .login-card__title {
    font-size: var(--ds-mobile-font-size-heading-medium);
  }
  /* 모바일 — 메인 로그인 버튼: 적정 사이즈 (xl이 너무 커 보이는 문제 보정) */
  .login-flow-v3 .login-card__submit {
    height: 5.2rem !important;                                /* 52px */
    min-height: 5.2rem !important;
    font-size: var(--ds-mobile-font-size-body-medium) !important; /* 17px */
    font-weight: var(--ds-typo-font-weight-bold);
  }
  /* 모바일 — 소셜 로그인 (위계상 메인보다 한 단계 작게) */
  .login-flow-v3 .login-card__auth-btns--stack {
    flex-direction: column;
    gap: var(--ds-number-3);                                  /* 6px (좀 더 촘촘) */
  }
  .login-flow-v3 .login-card__auth-btn {
    width: 100%;
    min-height: 5.2rem;                                       /* 52px — 모바일 svg 위아래 여백 충분 */
    gap: var(--ds-number-5);                                  /* 10px — svg↔텍스트 */
    padding: var(--ds-number-6) var(--ds-number-8);           /* 12px 16px (위아래 12로 svg 둘레 여유) */
    font-size: var(--ds-mobile-font-size-body-small);         /* 14px */
  }
  /* 모바일 — 하단 링크 (위계상 가장 작게, 보조 액션) */
  .login-flow-v3 .login-card__links {
    gap: var(--ds-number-6);                                  /* 12px */
  }
  .login-flow-v3 .login-card__links a {
    font-size: var(--ds-mobile-font-size-body-xsmall);        /* 14px */
  }
  .login-flow-v3 .login-card__links li + li::before {
    margin-right: var(--ds-number-6);
    height: 1rem;
  }
  /* 모바일 — "다른 방법으로 로그인" 구분선 텍스트 */
  .login-flow-v3 .login-card__divider-text {
    font-size: var(--ds-mobile-font-size-body-xsmall);
    margin-block: var(--ds-number-4);                         /* 8px (PC 12 → 8 축소) */
  }
  .login-flow-v3 .find-result__title {
    font-size: var(--ds-mobile-font-size-heading-medium);
  }
  .login-flow-v3 .login-card__btn-group--row {
    flex-direction: column-reverse;
  }
  .login-flow-v3 .find-account__header .ds-tab__btn {
    font-size: var(--ds-mobile-font-size-body-small);
  }
  /* 모바일 — 상위 탭(.ds-tab--bold) 폰트 — DS 모바일 룰 그대로 사용 (별도 override 없음) */
}


/* ============================================================
   Self-Isolation — login-page.css base 의존 흡수 (2026-04-30)
   ============================================================
   목적: v3 5페이지(030100/200/201/202 v3 + 030101 v2)가
         login-page.css 없이 단독으로 동작하도록 base 룰을
         .login-flow-v3 / .login-rejoin-v2 스코프로 흡수.
   원칙: 이전 버전 의존 0, 최신 단일 link.
   ============================================================ */

/* ── 비밀번호 토글 (base의 width/focus/icon-color 흡수) ── */
.login-flow-v3 .login-pw-field {
  width: 100%;
}
.login-flow-v3 .login-pw-toggle:focus-visible {
  outline: var(--ds-border-width-focus) solid var(--ds-color-brand-orange);
  outline-offset: 0.2rem;
}
.login-flow-v3 .login-pw-toggle .ds-icon {
  background-color: var(--ds-light-color-icon-gray-light);
}

/* ── hidden 속성 보장 (DS display:flex가 hidden 덮어쓰기 방지) ── */
.login-flow-v3 .login-card .ds-alert[hidden],
.login-flow-v3 .login-card .ds-form-group[hidden] {
  display: none;
}

/* ── .find-account-tab 상위 탭 base 메인 룰 ──
   v3는 ::after / border-bottom / flex만 무력화. 나머지(layout/btn 기본)는 base 의존이라 흡수. */
.login-flow-v3 .find-account-tab {
  display: flex;
  justify-content: flex-start;
}
.login-flow-v3 .find-account-tab .ds-tab__list {
  width: 100%;
}
.login-flow-v3 .find-account-tab .ds-tab__btn {
  padding-block: var(--ds-number-4) !important;     /* 8px (시안 컴팩트, !important로 DS 룰 override 보장) */
  /* font-size/color/font-weight는 DS .ds-tab--bold 룰 사용 — PC 19px / 모바일 17px, 비활성 gray-50, 활성 red-aa + extrabold */
}
/* 활성 색/weight는 DS .ds-tab--bold 룰 사용 (color: brand-red-aa, weight: extrabold) — override 불필요 */

/* ── 성공 메시지 ── */
.login-flow-v3 .ds-form-message.is-success {
  color: var(--ds-color-success-50);
}

/* ── 030200 비번찾기 — 외국인/일반 폼 분기 hidden 보장 + 외국인 폼 레이아웃 ── */
.login-flow-v3 #findPwDefault[hidden],
.login-flow-v3 #findPwForeign[hidden],
.login-flow-v3 #tabFindPw > .find-account__desc[hidden] {
  display: none !important;
}
.login-flow-v3 #findPwForeign:not([hidden]) {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ds-number-10);                          /* 20px */
}

/* ── 030201 아이디 확인 (.find-result wrapper + 결과 리스트 hidden) ── */
.login-flow-v3 .find-result {
  align-items: stretch;
}
.login-flow-v3 .find-result__list[hidden] {
  display: none;
}

/* ── 030202 비밀번호 재설정 폼 라벨/힌트 ── */
.login-flow-v3 #resetPwForm .ds-form-group > .ds-form-label {
  font-weight: var(--ds-typo-font-weight-regular);
  font-size: var(--ds-pc-font-size-body-small);
}
.login-flow-v3 #resetPwForm .ds-form-hint {
  font-size: var(--ds-pc-font-size-body-xsmall);
  color: var(--ds-light-color-text-subtle);
  line-height: var(--ds-typo-line-height-body);
}

/* ── 030202 비밀번호 변경 완료 모달 ──
   모달 element가 wrapper(.login-flow-v3) 클래스를 자체 보유:
   <div class="ds-modal-backdrop login-flow-v3" id="resetSuccessModal"> */
#resetSuccessModal.login-flow-v3[hidden] {
  display: none;
}
#resetSuccessModal.login-flow-v3 .ds-modal {
  max-width: 48rem;                                  /* 480px */
}
#resetSuccessModal.login-flow-v3 .ds-modal__body {
  text-align: center;
  font-size: var(--ds-pc-font-size-body-medium);
  color: var(--ds-light-color-text-basic);
  line-height: 1.6;
}
#resetSuccessModal.login-flow-v3 .ds-modal__footer {
  justify-content: center;
}

/* ── 모바일 흡수 ── */
@media (max-width: 767px) {
  .login-flow-v3 .find-account__desc {
    font-size: var(--ds-mobile-font-size-body-xsmall);
    margin-bottom: var(--ds-number-4);                        /* 8px → desc↔pill = 16+8=24 (키움) */
  }
  /* 모바일 — pill↔다음 컨텐츠 갭 추가 축소 (negative margin으로 panel gap 일부 상쇄) */
  .login-flow-v3 .find-account__header {
    margin-bottom: calc(-1 * var(--ds-number-2));             /* -4px → pill↔다음 = panel gap 16 - 4 = 12px */
  }
  /* 모바일 — 상위 탭 자체 padding 축소 (상위탭↔desc 시각 갭 줄이기) */
  .login-flow-v3 .find-account-tab .ds-tab__btn {
    padding-block: var(--ds-number-2) !important;             /* PC 8 → 모바일 4 */
  }
  .login-flow-v3 .login-card:has(.find-account-tab) .ds-form-group > .ds-form-label {
    font-size: var(--ds-mobile-font-size-body-small);
  }
  /* 간편인증 카드 모바일 */
  .login-flow-v3 .find-account__auth-cards {
    flex-direction: column;
  }
  .login-flow-v3 .find-account__auth-card {
    padding: var(--ds-number-8);                     /* 16px */
  }
  .login-flow-v3 .find-account__auth-title {
    font-size: var(--ds-mobile-font-size-body-medium);
  }
  .login-flow-v3 .find-account__auth-desc {
    font-size: var(--ds-mobile-font-size-body-xsmall);
  }
  /* 인증방법 라디오 그룹 모바일 */
  .login-flow-v3 .find-account__method-legend {
    font-size: var(--ds-mobile-font-size-body-medium) !important;   /* 모바일 ~17px — label(14)보다 위계 큼 */
    font-weight: var(--ds-typo-font-weight-bold) !important;
  }
  .login-flow-v3 .find-account__method-select {
    gap: var(--ds-number-8);                         /* 16px */
  }
  /* 030201 아이디 확인 모바일 desc */
  .login-flow-v3 .find-result__desc {
    font-size: var(--ds-mobile-font-size-body-xsmall);
  }
  /* 030200 panel gap 모바일 축소 (PC 40 → 태블릿 28 → 모바일 16) */
  .login-flow-v3 .login-card > #tabFindId.ds-tab__panel:not([hidden]),
  .login-flow-v3 .login-card > #tabFindPw.ds-tab__panel:not([hidden]) {
    gap: var(--ds-number-8);                                  /* 16px */
  }
}

/* 030200 일반회원 비번찾기 — 아이디 확인 버튼 (brand-blue-aa fill) */
.login-flow-v3 #btnVerifyId {
  background-color: var(--ds-color-brand-blue-aa);
  border-color: var(--ds-color-brand-blue-aa);
  color: var(--ds-color-gray-0);
}
.login-flow-v3 #btnVerifyId:hover {
  opacity: 0.9;
}

/* 030200 — .login-card__links 위 갭 (찾기 페이지 한정 login-card gap 0 보정) */
.login-flow-v3 .login-card:has(.find-account-tab) > .login-card__links {
  margin-top: var(--ds-number-16);                            /* 32px PC */
}
@media (max-width: 1199px) {
  .login-flow-v3 .login-card:has(.find-account-tab) > .login-card__links {
    margin-top: var(--ds-number-12);                          /* 24px 태블릿 */
  }
}
@media (max-width: 767px) {
  .login-flow-v3 .login-card:has(.find-account-tab) > .login-card__links {
    margin-top: var(--ds-number-10);                          /* 20px 모바일 */
  }
}