/*
  회원가입 — 목업에 없는 두 가지에만 스타일을 준다.
  목업 원본(page/join.css · page/cart.css)은 건드리지 않는다.

  1) 필드 아래 안내문(`join-field-message`) · 폼 전체 오류(`join-form-message`)
     목업은 검증 문구를 그리지 않아 규칙이 없다. 우리는 아이디 중복확인 결과와
     비밀번호 불일치를 입력칸 바로 아래에 띄운다.

  2) 카드 인증 확인 단계(`join-card-confirm`)
     목업의 카드 팝업은 `저장` 한 번으로 끝나지만, 우리는 인증된 카드를 보여 주고
     확인을 받는 단계를 하나 더 둔다.
     ⚠ 결제카드 등록 체크는 목업 기본 체크박스 양식(`control-label`)을 그대로 쓴다 —
       전용 규칙을 두지 않는다.

  3) 카드 팝업 제목(`.ui-popup-head h2`)
     팝업이 `.component-wrap` 안에서 렌더돼 회원가입 화면의 제목 규칙에 잡힌다.
     목업 팝업 규격으로 되돌린다.
*/

/* --- 카드 팝업 제목 ----------------------------------------------------- */

/*
  카드 팝업은 `<div class="component-wrap join-wrap">` 안에서 렌더된다(`JoinInfoStep`) —
  `page/join.css` 의 `.page-join .component-wrap h2` 가 <b>팝업 제목까지</b> 잡는다.
  선택자가 두 클래스라 `common/_components.css` 의 `.ui-popup-head h2 { margin: 0 }` 를 이기고,

    PC     : 28px + `margin-bottom: 42px` → 제목이 커지고 헤더가 늘어나면서
             `position:absolute; top:22px` 인 닫기 버튼과 어긋난다
    ~1024px: `display: none` → 제목이 아예 사라진다

  팝업 헤더 안에서만 목업 팝업 규격(`.text-h2` = 20px/600/150%)으로 되돌린다.
  목업 원본(`page/join.css`)은 건드리지 않는다.
*/
.page-join .component-wrap .ui-popup-head h2 {
  display: block;
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  line-height: 150%;
}

.page-join .join-info-form .join-field-message {
  margin-top: 6px;
  color: var(--color-text-gray);
}

/*
  안내멘트 글자 크기 — <b>필드 라벨과 같게</b> 맞춘다(국민행복몰 검토사항 §6).

  마크업의 `text-label4`(12px) 와 `app/form-feedback.css` 의 앱 공통 오류 규격(12px)이
  필드 라벨 `text-label2`(14px) 보다 작아 `추천인 등록` 옆 빨간 문구만 유독 작게 보였다.
  가입 화면에서만 14px/400 로 올린다 — 공통 파일은 다른 화면의 오류까지 함께 바꾸므로
  건드리지 않는다.

  ⚠ 선택자에 `[role]` 과 래퍼 한 겹을 더 붙여야 한다 — 공통 규칙이
  `.page-join .join-info-form .join-form-message[role='alert']`(클래스 3 + 속성 1)이고
  <b>더 늦게 로드</b>되므로 같은 구체성으로는 진다. `role` 은 통과(`status`)·사유(`alert`)
  양쪽에 붙어 있어 둘 다 같은 크기가 된다. 굵기는 모바일의 `text-label2`(400)에 맞춘다.
*/
.page-join .join-wrap .join-info-form :is(.join-field-message, .join-form-message)[role],
.page-payment .payment-card-popup .join-card-foot-message[role] {
  font-size: 14px;
  font-weight: 400;
  line-height: 145%;
}

/* --- 결제카드 등록 체크 -------------------------------------------------- */

/*
  <b>모바일에서만</b> 목업 공용 축소를 되돌린다 — PC 는 손대지 않는다.

  `_guide.css` 의 768px 미디어쿼리가 `.text-label3` 을 12px/500/130% 로 줄인다. 그런데 이 팝업의
  `카드사`·`카드번호`·`유효기간` 라벨(`cart.css` 의 `.payment-card-field`)은 모바일에서도
  14px/400/145% 그대로다 — `cart.css` 모바일 블록에 그 규칙이 없다. 그래서 이 줄만 작고 굵어지고,
  18px 체크박스 옆에서 글자가 작아 수직 가운데까지 어긋나 보인다.

  PC 는 두 값이 이미 같아(14px/400/145%) 규칙을 주지 않는다.
*/
@media (max-width: 768px) {
  .page-payment .payment-card-form .control-label {
    font-size: 14px;
    font-weight: 400;
    line-height: 145%;
  }
}

/* --- 카드 인증 확인 단계 ------------------------------------------------ */

.page-payment .join-card-confirm {
  display: grid;
  gap: 16px;
}

.page-payment .join-card-confirm-question {
  margin: 0;
  color: var(--color-text);
  text-align: center;
}

.page-payment .join-card-confirm-summary {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 16px;
  border-radius: 8px;
  background: var(--color-bg-gray, #f6f7f9);
}

.page-payment .join-card-confirm-summary > div {
  display: flex;
  gap: 12px;
  align-items: baseline;
  justify-content: space-between;
}

.page-payment .join-card-confirm-summary dt {
  flex: 0 0 auto;
  color: var(--color-text-gray);
}

.page-payment .join-card-confirm-summary dd {
  min-width: 0;
  margin: 0;
  color: var(--color-text);
  text-align: right;
  word-break: break-all;
}

/*
  인증 버튼 아래 안내문 — 목업 `.payment-card-foot` 은 `display:flex` 가로 한 줄이라
  세로로 세워야 문구가 버튼 아래에 온다.

  PC : 버튼이 100px 라 `align-items: center` 로 가운데.
  모바일 : `page/cart.css` 가 버튼에 `width:100%` 를 주므로 그대로 꽉 찬다.
  두 경우 모두 이 한 벌로 맞는다 — 미디어쿼리가 따로 필요 없다.
*/
.page-payment .payment-card-foot.join-card-verify-foot {
  flex-direction: column;
  align-items: center;
  gap: 0;
}

/*
  카드 인증 안내멘트는 <b>버튼과 같은 축(가운데)</b>에 둔다(국민행복몰 검토사항 §3).

  예전에는 `width:100%` 로 늘어난 뒤 글자가 왼쪽 끝에 붙어, 가운데 100px 버튼과 어긋난
  자리에서 빨간 문구가 혼자 왼쪽으로 튀어나와 있었다.

  ⚠ `text-align` 은 앱 공통 규격(`app/form-feedback.css` 의 `[role='alert']` → left)을
  이겨야 하므로 위 글자 크기 규칙과 같은 구체성으로 쓴다.
*/
.page-payment .join-card-foot-message {
  width: 100%;
}

.page-payment .payment-card-popup .join-card-foot-message[role] {
  text-align: center;
}

/* 카드 인증 결과 — 잔액이 아니라 실제 등록 대상 여부만 보여준다(FP-JV-05). */
:is(.page-join .join-voucher-eligibility, .my-voucher-cert-popup .voucher-eligibility-results) {
  margin-top: 24px;
}

:is(.page-join .join-voucher-eligibility, .my-voucher-cert-popup .voucher-eligibility-results) h3 {
  margin: 0 0 16px;
  color: var(--color-text);
}

:is(.page-join .join-voucher-eligibility, .my-voucher-cert-popup .voucher-eligibility-results) ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

:is(.page-join .join-voucher-eligibility, .my-voucher-cert-popup .voucher-eligibility-results) li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: 4px;
  background: var(--color-bg-gray, #f6f7f9);
  color: var(--color-text-medium);
}

:is(.page-join .join-voucher-eligibility, .my-voucher-cert-popup .voucher-eligibility-results) strong {
  flex: 0 0 auto;
  font-weight: 500;
}

:is(.page-join .join-voucher-eligibility, .my-voucher-cert-popup .voucher-eligibility-results) .eligible {
  color: var(--color-primary2, #597fd0);
}

:is(.page-join .join-voucher-eligibility, .my-voucher-cert-popup .voucher-eligibility-results) .unavailable {
  color: var(--color-primary, #ee5d44);
}

/* 가입완료 — 쇼핑 이용 안내 2열, 사용자 제공 회원가입완료.png 기준. */
.page-join .join-wrap.complete {
  max-width: 460px;
}

.page-join .join-wrap.complete .mileage-guide-wrap > h4 {
  color: var(--color-text);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.55;
}

.page-join .join-wrap.complete .mileage-guide-wrap > ul > li > span > strong {
  color: var(--color-primary);
  font-weight: 400;
}