/* ============================================================================
   2026 팝업 리뉴얼 공용 스타일  (Task 9)
   ----------------------------------------------------------------------------
   시안 : MetLife_AOLG상담신청팝업_2026.psd (아트보드 02 / 03-1 / 04, 캔버스 760px)
          체류팝업_0720.png (460x440)
   원칙 : styleguide-2026 §0-1(색 PSD 실측) / §0-5(공유 CSS in-place 수정 금지,
          _v2026 분리) / §0-8(Pretendard) / §9(행간은 PSD leading 을 절대값 환산)

   좌표계 :  --u = "PSD 1px 당 CSS 길이".  시안 캔버스 760px 기준으로 잡은 모든
             수치를 calc(var(--u) * N) 으로 그대로 옮긴다.
               PC : .pop_app_ext 가 400px 고정  →  --u: calc(400px / 760)
               MO : .pop_app_ext 가 100%(=100vw) →  --u: calc(100vw / 760)
             --u 는 각 뷰(_v2026.php)가 자기 루트에 선언한다. 아래는 PC 기본값.

   범위 : 이 파일은 _v2026 팝업 뷰에서만 <link> 된다. 기존 팝업(v2024/v2025)과
          범위 밖 페이지는 이 파일을 로드하지 않으므로 영향 없음.
   ========================================================================== */

.popup-v2026 {
  /* PC 기본값. MO 뷰는 자기 <style> 에서 덮어쓴다. */
  --u: calc(400px / 760);

  /* PSD 스포이드 실측 */
  --pv-navy: #003652;        /* 딥네이비 - 버튼/타이틀/강조 */
  --pv-head: #0e425f;        /* 헤더 배경 폴백(웨이브 이미지 하단 행 실측) */
  --pv-mint: #8ff5b1;        /* 포인트 민트 - 선택/동의 ON */
  --pv-beige: #f5f2ed;       /* 비선택 버튼 · 섹션 밴드 */
  --pv-ink: #2d2d2d;         /* 본문 */
  --pv-line: #d9d9d6;        /* 입력 밑줄 */
  --pv-chipline: #e5e5e5;    /* 칩 테두리 */
}

/* 공용 reset(`html, body, div, span, … { font-family:'NotoSansKR_Normal';
   font-weight:500; letter-spacing:-1px }`)이 요소 선택자로 모든 자식에 직접
   걸리기 때문에 상속만으로는 이길 수 없다 → styleguide-2026 §0-8 의
   `.content * { … !important }` 와 동일한 방식으로 스코프 전체에 강제한다. */
.popup-v2026,
.popup-v2026 * {
  font-family: "Pretendard Variable", Pretendard, -apple-system, sans-serif !important;
}

.popup-v2026 * {
  font-weight: 400;
  letter-spacing: -0.05em;
}

/* 공용 styleMetlife.css 의 `.pop_app_ext img {width:100%}` 무력화.
   v2026 은 아이콘/로고를 실제 크기로 배치한다. */
.popup-v2026 .pop_app_ext img {
  width: auto;
  height: auto;
}

.popup-v2026 .pop_app_ext {
  background: #fff;
}

/* ---------------------------------------------------------------- 헤더 (공통)
   시안 : 네이비 위에 M자 웨이브. 웨이브는 PSD 배경 레이어를 760x520 으로
   합성 추출(head_bg_v2026.png). 하단은 동일색 background-color 로 이어붙임. */
.popup-v2026 .pv26-wrap {
  position: relative;
  background-color: var(--pv-head);
  background-image: url("/assets/image/CF/Popup/v2026/head_bg_v2026.png");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% auto;
}

.popup-v2026 .pv26-head {
  position: relative;
  height: calc(var(--u) * 338);
  padding: 0 calc(var(--u) * 50);
  box-sizing: border-box;
  color: #fff;
}

.popup-v2026 .pv26-head-title {
  /* PSD: Pretendard-SemiBold 45 / leading 55 / tracking -50 / #ffffff */
  padding-top: calc(var(--u) * 52);
  font-size: calc(var(--u) * 45);
  line-height: calc(var(--u) * 55);
  letter-spacing: -0.05em;
  font-weight: 600;
}

.popup-v2026 .pv26-head-desc {
  /* PSD: Pretendard-Light 25 / leading 35 */
  margin-top: calc(var(--u) * 32);
  font-size: calc(var(--u) * 25);
  line-height: calc(var(--u) * 35);
  letter-spacing: -0.05em;
  font-weight: 300;
}

/* 닫기 X : PSD (706,25) 26x26 흰색 */
.popup-v2026 .pv26-close {
  position: absolute;
  top: calc(var(--u) * 25);
  right: calc(var(--u) * 28);
  width: calc(var(--u) * 26);
  height: calc(var(--u) * 26);
  cursor: pointer;
  z-index: 2;
}

.popup-v2026 .pv26-close img {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

/* ------------------------------------------------------------- 흰 본문 패널
   PSD: y=338 부터 흰 패널, 상단 라운딩 반경 실측 ≈ 34px */
.popup-v2026 .pv26-body {
  position: relative;
  background: #fff;
  border-radius: calc(var(--u) * 34) calc(var(--u) * 34) 0 0;
}

/* --------------------------------------------------------------- 하단 버튼부
   PSD: 버튼 x16~739 / h123 / radius 28 / #003652,
        문구 Pretendard-SemiBold 40 tracking -30 #ffffff */
.popup-v2026 .pop_footer {
  position: sticky;
  bottom: 0;
  z-index: 3;
  padding: calc(var(--u) * 12) calc(var(--u) * 16) calc(var(--u) * 24);
  background: #fff;
}

.popup-v2026 .pop_footer .btn_agree_all {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 11);
  height: calc(var(--u) * 123);
  /* 사용자 확정: 팝업 CTA 라운딩 고정 8px (calc 스케일 제거 후 적정값). */
  border-radius: 8px;
  background: var(--pv-navy);
  color: #fff;
  font-size: calc(var(--u) * 40);
  font-weight: 600;
  letter-spacing: -0.03em;
  cursor: pointer;
  padding: 0;
}

.popup-v2026 .pop_footer .btn_agree_all img {
  width: calc(var(--u) * 38) !important;
  height: calc(var(--u) * 38) !important;
}

/* 하단 고지 : PSD Pretendard-Regular 25 / #2d2d2d */
.popup-v2026 .pv26-note {
  margin-top: calc(var(--u) * 20);
  text-align: center;
  font-size: calc(var(--u) * 25);
  line-height: calc(var(--u) * 35);
  letter-spacing: -0.05em;
  color: var(--pv-ink);
  white-space: nowrap;
}

/* ==========================================================================
   P1 · 본인인증 완료 / 지역 입력   (#POPUP-CERTIFICATE-SUCCESS)
   PSD 아트보드 02
   라벨 ink-top 409 / 575 / 741 / 907 (pitch 166), 밑줄 y 516·682·848·1016,
   콘텐츠 좌우 55, 밑줄 폭 650(55~704), 지역 셀렉트 305 + gap 41 + 305
   ========================================================================== */
.popup-v2026 .pv26-field-list {
  /* 상단 59 = 흰 패널(338) → 첫 라벨 라인박스(397). margin 이 아니라 padding
     이어야 .pv26-body 로 마진 병합되어 패널이 밀려나지 않는다. */
  padding: calc(var(--u) * 59) calc(var(--u) * 55) calc(var(--u) * 134);
}

.popup-v2026 .pv26-field {
  margin-top: calc(var(--u) * 47);
}

.popup-v2026 .pv26-field:first-child {
  margin-top: 0;
}

.popup-v2026 .pv26-field .text_title {
  /* PSD: NotoSansCJKkr-Bold 35 → Pretendard-Bold 35 / #003652 */
  font-size: calc(var(--u) * 35);
  line-height: calc(var(--u) * 40);
  letter-spacing: -0.05em;
  font-weight: 700;
  color: var(--pv-navy);
}

.popup-v2026 .pv26-field .text_input,
.popup-v2026 .pv26-field select {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: calc(var(--u) * 79);
  margin: 0;
  padding: 0 0 0 calc(var(--u) * 20);
  float: none;
  border: 0;
  border-bottom: calc(var(--u) * 2) solid var(--pv-line);
  border-radius: 0;
  background: transparent;
  font-size: calc(var(--u) * 35);
  letter-spacing: -0.05em;
  color: var(--pv-ink);
  -webkit-appearance: none;
  appearance: none;
  outline: none;
}

.popup-v2026 .pv26-selects {
  display: flex;
  gap: calc(var(--u) * 41);
}

.popup-v2026 .pv26-selects select {
  flex: 1 1 calc(var(--u) * 305);
  min-width: 0;
  padding-left: calc(var(--u) * 20);
  padding-right: calc(var(--u) * 40);
  background-image: url("/assets/image/CF/Popup/v2026/chevron_v2026.png");
  background-repeat: no-repeat;
  background-position: right calc(var(--u) * 8) center;
  background-size: calc(var(--u) * 27) auto;
}

/* ==========================================================================
   P2 · 개인정보 수집/이용 동의   (#POPUP-CERTIFICATE-AGREEMENT)
   PSD 아트보드 03-1
   ========================================================================== */
.popup-v2026 .con_box {
  /* 상단 68 = 흰 패널(338) → 첫 섹션 타이틀 라인박스(406). 타이틀 자체에 주면
     ::before 네이비 바가 패딩 위쪽에 그려지므로 컨테이너 패딩으로 준다. */
  padding: calc(var(--u) * 68) calc(var(--u) * 49) calc(var(--u) * 16);
}

/* 섹션 타이틀 : 네이비 바 10x32 + Pretendard-Bold 35 #003652 */
.popup-v2026 .POPUP-BODY-TITLE {
  position: relative;
  padding-left: calc(var(--u) * 18);
  margin: 0;
  font-size: calc(var(--u) * 35);
  line-height: calc(var(--u) * 42);
  letter-spacing: -0.05em;
  font-weight: 700;
  color: var(--pv-navy);
  text-indent: 0;
}

.popup-v2026 .POPUP-BODY-TITLE:before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(var(--u) * 5);
  width: calc(var(--u) * 10);
  height: calc(var(--u) * 32);
  margin: 0;
  background-color: var(--pv-navy);
}

.popup-v2026 .pv26-title-1 {
  margin-top: 0;
}

.popup-v2026 .pv26-title-2 {
  margin-top: calc(var(--u) * 70);
}

/* 동의 버튼 2분할 : PSD 329x82, gap 7, radius 25 */
.popup-v2026 .POPUP-BODY-BOX-BTN-GROUP-ROUND {
  position: static;
  display: flex;
  gap: calc(var(--u) * 7);
  margin: calc(var(--u) * 21) 0 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.popup-v2026 .POPUP-BODY-BOX-BTN-GROUP-ROUND .BTN-AGREEMENT-v2 {
  flex: 1 1 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(var(--u) * 82);
  border: 0;
  border-radius: 8px; /* 사용자 확정: 고정 8px */
  background: var(--pv-beige);
  font-size: calc(var(--u) * 35);
  font-weight: 600;
  letter-spacing: -0.05em;
  color: var(--pv-ink);
  cursor: pointer !important;
}

.popup-v2026 .POPUP-BODY-BOX-BTN-GROUP-ROUND .BTN-AGREEMENT-v2.active {
  background: var(--pv-mint);
  color: var(--pv-navy);
}

/* 약관 본문 : PSD Pretendard-Regular 25 / 강조 Bold 30 / leading 35~55 */
.popup-v2026 .POPUP-BODY-BOX {
  box-sizing: border-box;
  width: 100%;
  margin: calc(var(--u) * 12) 0 0;
  padding: 0 calc(var(--u) * 27) 0 calc(var(--u) * 34) !important;
  border: none;
  overflow: hidden;
  /* 접힘 = ul padding-top 41 + 1행(35) + 강조 2행(45+45) = 166 (시안 y604~717) */
  max-height: calc(var(--u) * 166);
  font-size: calc(var(--u) * 25);
  color: var(--pv-ink);
}

.popup-v2026 .POPUP-BODY-BOX.open {
  max-height: none;
}

.popup-v2026 .POPUP-BODY-BOX ul {
  margin: 0;
  padding: calc(var(--u) * 41) 0 0;
  line-height: calc(var(--u) * 35);
  letter-spacing: -0.05em;
}

.popup-v2026 .POPUP-BODY-BOX ul li {
  float: none;
  list-style: none;
}

/* PSD: 번호 항목(Regular 25) 아래 강조 항목(Bold 30)은 좌측 20px 들여쓰기 */
/* 2026-08-07 광고주 QA(PDF p18): 한 줄이 박스 폭에 근접하면 "…정 / 보)," 처럼 어절 중간에서
   끊긴다. 하드코딩 줄 나눔을 재분배하는 것과 별개로, 어절 단위 줄바꿈을 안전망으로 건다. */
.popup-v2026 .POPUP-BODY-BOX ul li.description {
  word-break: keep-all;
  margin-left: calc(var(--u) * 20);
}

.popup-v2026 .POPUP-BODY-BOX ul li.pv26-gap {
  margin-top: calc(var(--u) * 12);
}

/* ※ 주석 : styleguide-2026 §4 행잉 인덴트 (※형 0.854em) */
.popup-v2026 .POPUP-BODY-BOX ul li.pv26-mark {
  margin-top: calc(var(--u) * 22);
  padding-left: 0.854em;
  text-indent: -0.854em;
  line-height: calc(var(--u) * 38);
  word-break: keep-all;
}

.popup-v2026 .POPUP-BODY-BOX strong {
  display: inline-block;
  font-size: calc(var(--u) * 30);
  line-height: calc(var(--u) * 45);
  font-weight: 700;
}

/* 더보기 / 접기 화살표 : PSD 27x18, 우측 정렬(x 693~720 = 우측 여백 40) */
.popup-v2026 .POPUP-MORE-BUTTON {
  display: flex;
  justify-content: flex-end;
  padding: calc(var(--u) * 4) calc(var(--u) * 40) 0 0;
  cursor: pointer;
}

.popup-v2026 .POPUP-MORE-BUTTON > img {
  width: calc(var(--u) * 27) !important;
  height: auto !important;
  cursor: pointer;
}

.popup-v2026 .POPUP-MORE-BUTTON .up {
  display: none;
  transform: rotate(180deg);
}

.popup-v2026 .POPUP-MORE-BUTTON .down {
  display: block;
}

.popup-v2026 .POPUP-MORE-BUTTON.open .up {
  display: block;
}

.popup-v2026 .POPUP-MORE-BUTTON.open .down {
  display: none;
}

/* 고지번호 : PSD 우측 x729 정렬 */
.popup-v2026 .num_area {
  position: static;
  /* 시안 고지번호 우측 끝 x729. con_box 우측선(711) 보다 18 바깥 */
  margin: calc(var(--u) * 79) calc(var(--u) * -18) 0 0;
  text-align: right;
  font-size: calc(var(--u) * 25);
  line-height: calc(var(--u) * 30);
  letter-spacing: -0.02em;
  color: var(--pv-ink);
}

/* ==========================================================================
   P3 · 신청완료 + 직업/관심사   (#POPUP-CONSULTING-SUCCESS)
   PSD 아트보드 04 (헤더 413, 흰 패널 라운딩 34)
   ========================================================================== */
.popup-v2026 #ext-section-1 .pv26-head {
  height: calc(var(--u) * 413);
  padding: 0;
  text-align: center;
}

.popup-v2026 .pv26-thanks {
  /* PSD: Pretendard-SemiBold 55 / #ffffff, 이모지 53x53 */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 16);
  padding-top: calc(var(--u) * 104);
  font-size: calc(var(--u) * 55);
  line-height: calc(var(--u) * 64);
  letter-spacing: -0.05em;
  font-weight: 600;
}

.popup-v2026 .pv26-thanks img {
  width: calc(var(--u) * 53) !important;
  height: calc(var(--u) * 53) !important;
}

.popup-v2026 .pv26-thanks-desc {
  /* PSD: Pretendard-Regular 35 / leading 45 */
  margin-top: calc(var(--u) * 12);
  font-size: calc(var(--u) * 35);
  line-height: calc(var(--u) * 45);
  letter-spacing: -0.05em;
}

.popup-v2026 .pv26-logo {
  margin-top: calc(var(--u) * 31);
}

.popup-v2026 .pv26-logo img {
  width: calc(var(--u) * 176) !important;
  height: calc(var(--u) * 34) !important;
}

/* 잠깐만요! 말풍선 + 안내 문구 (PSD 말풍선 144x86 @ x62,y457) */
.popup-v2026 .pv26-ask {
  position: relative;
  padding: calc(var(--u) * 44) 0 calc(var(--u) * 85);
  text-align: center;
}

/* 2026-08-07 광고주 QA(PDF p36 "이미지가 약간 잘린 것 같습니다") — PC·MO 공통.
   종전 자산은 PSD 그룹 bbox(2642,457)-(2786,543) = 144x86 을 그대로 잘라낸 것이라
   테두리 획이 캔버스에 닿아(가장자리 알파 상 255) 위쪽 곡선이 평평하게 끊겨 보였다.
   → 사용자가 사방 2px 씩 넓혀 148x90 으로 재크롭(2026-08-07).
     확장량은 픽셀 정렬로 실측 확인(좌2/상2/우2/하2, 평균차 1.42 = 같은 잉크 + 여백).
     잉크의 화면상 위치를 그대로 두려면 좌·상 좌표도 2 씩 당겨야 한다
     (left 62→60 / top 44→42). */
.popup-v2026 .pv26-ask-bubble {
  position: absolute;
  left: calc(var(--u) * 60);
  top: calc(var(--u) * 42);
  width: calc(var(--u) * 148);
  height: calc(var(--u) * 90);
}

.popup-v2026 .pv26-ask-bubble img {
  width: 100% !important;
  height: 100% !important;
}

.popup-v2026 .pv26-ask-text {
  /* PSD: Pretendard-SemiBold 40 / leading 50 / #2d2d2d */
  padding-top: calc(var(--u) * 66);
  font-size: calc(var(--u) * 40);
  line-height: calc(var(--u) * 50);
  letter-spacing: -0.05em;
  font-weight: 600;
  color: var(--pv-ink);
}

.popup-v2026 .pv26-ask-text .opt {
  font-size: calc(var(--u) * 30);
  font-weight: 300;
}

/* 질문 밴드 : PSD Rectangle 6 = 풀블리드 h97 #f5f2ed */
.popup-v2026 .pv26-band {
  display: flex;
  align-items: center;
  height: calc(var(--u) * 97);
  padding-left: calc(var(--u) * 30);
  background: var(--pv-beige);
}

.popup-v2026 .pv26-band img {
  width: calc(var(--u) * 53) !important;
  height: calc(var(--u) * 53) !important;
  margin-right: calc(var(--u) * 13);
}

.popup-v2026 .pv26-band.pv26-band-2 img {
  width: calc(var(--u) * 46) !important;
  height: calc(var(--u) * 46) !important;
  margin-left: calc(var(--u) * 3);
  margin-right: calc(var(--u) * 19);
}

.popup-v2026 .pv26-band span {
  font-size: calc(var(--u) * 35);
  line-height: calc(var(--u) * 45);
  letter-spacing: -0.05em;
  font-weight: 600;
  color: #000;
}

.popup-v2026 .pv26-band span .small {
  font-size: calc(var(--u) * 28);
}

/* 선택 칩 : PSD 높이 75 / 좌우 padding 42 / gap 7 / 행간 18 / radius 풀 */
.popup-v2026 #extStep1wrap,
.popup-v2026 #extStep2wrap {
  position: relative;
  padding: calc(var(--u) * 31) 0 calc(var(--u) * 24) calc(var(--u) * 27);
}

.popup-v2026 #extStep2wrap {
  padding-bottom: calc(var(--u) * 65);
}

.popup-v2026 .pop_content .step-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: calc(var(--u) * 75);
  padding: 0 calc(var(--u) * 40);
  margin: 0 calc(var(--u) * 7) calc(var(--u) * 18) 0;
  border: calc(var(--u) * 2) solid var(--pv-chipline);
  border-radius: calc(var(--u) * 38);
  background: #fff;
  /* PSD 표기 33.33 이나 실제 잉크 폭(전문직 71 / 농·축산·어업 138)은 30px 상당
     — 텍스트 레이어에 0.9 스케일이 적용된 것으로 보여 실측폭을 따른다 */
  font-size: calc(var(--u) * 30);
  line-height: 1;
  letter-spacing: -0.05em;
  font-weight: 500;
  color: var(--pv-ink);
  cursor: pointer;
}

.popup-v2026 .pop_content .step-btn.selected {
  background: var(--pv-mint);
  border-color: var(--pv-mint);
  color: #000;
}

/* 제출 버튼 영역 : 레이아웃만 재정의한다. 숨김/노출(visibility/opacity)은
   공용 styleMetlife.css 의 `#ext-section-7 > a { visibility:hidden }` /
   `#ext-section-7.on > a { visibility:visible }` 규칙을 그대로 따른다
   (2026-08-04 사용자 지시: 관심사 선택 전 숨김 동작 복원). */
.popup-v2026 #ext-section-7 > .pv26-submit {
  position: static;
  display: block;
  padding: 0 calc(var(--u) * 16);
}

.popup-v2026 #ext-section-7 .pv26-submit-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(var(--u) * 122);
  /* 사용자 확정: 팝업 CTA 라운딩 고정 8px. */
  border-radius: 8px;
  background: var(--pv-navy);
  color: #fff;
  font-size: calc(var(--u) * 40);
  font-weight: 600;
  letter-spacing: -0.03em;
}

.popup-v2026 #ext-section-7 .pv26-note {
  display: block;
  padding-bottom: calc(var(--u) * 40);
  cursor: default !important;
}

/* 2026-08-07 광고주 QA(PDF p19 "제출 버튼 등장 전에는 본 문구 노출 안함"):
   이 문구는 원래 제출 버튼과 한 세트로 함께 나타나는 요소였다(버튼 <a> 안에 있었던 흔적이
   위 `cursor: default !important` 로 남아 있다). 텍스트로 분리되면서 <a> 바깥으로 나왔고,
   공용 styleMetlife.css 의 `#ext-section-7 > a { visibility:hidden }` /
   `#ext-section-7.on > a { visibility:visible }` 규칙 범위에서 빠져 항상 보이게 됐다.
   → 마크업을 되돌려 <a> 안에 넣으면 문구를 눌러도 제출이 실행되므로, 같은 전환을 문구에도
     걸어 '버튼과 함께 나타난다'는 원래 동작만 복원한다.
   (visibility 라 자리는 미리 차지한다 — 버튼과 동일해 등장 시 레이아웃이 튀지 않는다.) */
.popup-v2026 #ext-section-7 .pv26-note {
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.popup-v2026 #ext-section-7.on .pv26-note {
  visibility: visible;
  opacity: 1;
}

/* MO 에서 이 블록은 .pop_footer 가 되어 화면 하단에 붙는다(아래 §MO 참조).
   그때 .pop_footer 의 좌우 패딩(16)과 겹치므로 자체 좌우 패딩·하단 패딩을 비운다 —
   두 인증 팝업의 .btn_agree_all 과 같은 여백이 되어 세 팝업이 동일해진다. */
.popup-v2026 .pop_footer#ext-section-7 > .pv26-submit {
  padding: 0;
}

.popup-v2026 .pop_footer#ext-section-7 .pv26-note {
  padding-bottom: 0;
}


/* ==========================================================================
   MO 전용 : 하단 CTA + 안내문구를 한 세트로 **화면 하단에 고정**
   ==========================================================================
   2026-08-07 광고주 QA(PDF p36) + 사용자 지시.
   `.pop_footer` 는 이미 `position: sticky; bottom: 0` 이지만, sticky 는 자기
   containing block(=`.pv26-wrap`) 안에서만 움직인다. wrap 에 높이가 없으면
   본문이 짧을 때 wrap 이 본문 길이만큼만 자라서 푸터가 화면 중간에 멈춘다.
   실측(390x664): 본인인증완료 wrap 698.8 / 개인정보동의 667.2 → 스크롤포트(664)보다
   커서 우연히 하단에 붙어 있었을 뿐이다.

   ── wrap 을 늘리는 것만으로는 안 된다 ──────────────────────────────────
   `min-height: 100%` 로 wrap 을 화면만큼 늘려도 sticky 는 **아래로 밀어주지 않는다**.
   sticky 는 요소가 스크롤포트 밖으로 나가려 할 때 붙잡을 뿐, 자연 위치가 스크롤포트
   안쪽 위에 있으면 그 자리에 그대로 둔다. 실측(높은 뷰포트에서 푸터가 화면 하단보다):
     390x1000 → 313.6 / 345.1 / 122.4px 위,  430x900 → 143.1 / 177.9px 위.

   → 본문이 남은 공간을 **차지해서** 푸터를 아래로 밀어내야 한다.
     wrap 을 세로 flex 로 두고 `.pv26-body` 에 flex-grow 를 준다.
       · 본문이 짧으면 body 가 늘어나 푸터가 화면 하단에 닿는다.
       · 본문이 길면 body 는 자연 높이 그대로이고, sticky 가 스크롤 중 하단에 붙인다.
     두 경우 모두 CTA+안내문구가 화면 하단 같은 자리에 온다.
   PC 는 `.popup-v2026-mo` 가 없으므로 영향받지 않는다(같은 파일을 공유한다).
   ========================================================================== */
.popup-v2026-mo .pv26-wrap {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

.popup-v2026-mo .pv26-body {
  flex: 1 0 auto;
}

/* ── 제출 버튼이 '나타나는' 팝업(#ext-section-7)의 등장 전 처리 ──────────
   이 CTA 는 관심사를 고른 뒤 `.on` 이 붙으면서 페이드인한다. 그래서 버튼·문구에
   `visibility:hidden + opacity:0` 을 걸어 **자리는 미리 차지**해 두는 설계다
   (등장 순간 스크롤 높이가 튀지 않게 하려는 것).

   그런데 푸터가 sticky 가 되면서 그 '미리 잡아둔 빈 자리'가 흰 배경(.pop_footer
   background:#fff)째로 본문 위에 떠서, 등장 전인데도 뒤의 직업/관심사 버튼을
   가리고 클릭까지 막았다.

   배경만 투명하게 하는 방법은 쓰지 않는다 — 이 푸터는 흰 패널(.pv26-body) **바깥**이라
   투명하면 최하단에서 wrap 의 네이비 배경이 그대로 비친다(2026-08-07 사용자 확인).

   → **등장 전에는 sticky 를 걸지 않는다.** static 이면 푸터는 제 flow 자리(=본문 맨 아래)에
     머물러 아무것도 덮지 않고, 배경도 흰색 그대로라 뚫려 보이지 않는다.
     자리는 계속 차지하므로 등장 시 스크롤 높이가 튀지 않는다는 원래 설계도 유지된다.
     `.on` 이 붙는 순간 sticky 로 바뀌며 버튼·문구 페이드인과 함께 화면 하단에 자리잡는다. */
.popup-v2026-mo #ext-section-7.pop_footer {
  position: static;
}

.popup-v2026-mo #ext-section-7.pop_footer.on {
  position: sticky;
  bottom: 0;
}

/* ==========================================================================
   체류 팝업   (#POPUP-REMINDER · magnificPopup inline)
   시안 : 체류팝업_0720.png (460x440)
   ========================================================================== */
/* 컨테이너 규칙은 일부러 ID를 붙이지 않는다: 이 페이지에는 popup_v2026.css <link>가
   v2026 팝업 종류 수만큼(예: 4개) 중복 삽입되고, PHP 뷰가 <link> 바로 뒤에 심는
   `#POPUP-REMINDER.popup-reminder-v2026{ --ru:... }` 인라인 오버라이드(특이도 1,1,0)는
   그중 딱 1번만 나온다. 만약 이 규칙에 ID를 붙여 특이도를 인라인과 동률(1,1,0)로 만들면,
   인라인보다 "뒤에" 재삽입되는 3·4번째 <link> 사본이 문서 순서로 이겨 --ru 를 PC 기본값
   (1px)으로 되돌려버린다(실측 확인됨). 그래서 여기는 클래스 단독(0,1,0)으로 유지해
   인라인이 항상 이기게 하고, 아래 title/text/btn-area/mfp-close 처럼 대응하는 인라인이
   없는 자손 선택자에만 ID를 붙여 특이도를 굳힌다.
   Mobile styleCF.css 의 `.layer-popup{ transform: translate(0,40%) }` 는 이 팝업이
   대응 프로퍼티를 아예 갖지 않아 특이도와 무관하게 그대로 새어 들어와 MO에서 카드가
   세로로 40%(약 130px) 밀려 내려가는 실제 버그였다 — transform: none 으로 무효화한다
   (styleCF.css 는 <head>에서 popup_v2026.css 보다 먼저 로드되므로 문서 순서만으로 이긴다). */
.popup-reminder-v2026 {
  --ru: 1px;
  box-sizing: border-box;
  /* 공용 CSS가 .mfp-content 에 vertical-align:top 을 걸어 magnific 세로 센터링이
     무력화됨 → 뷰포트 기준 고정 센터링으로 전환 (가로/세로 모두 화면 정중앙).
     아래 transform 이 Mobile styleCF 의 translate(0,40%) 도 함께 무효화한다. */
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) !important;
  margin: 0;
  padding: 0;
  border-radius: calc(var(--ru) * 10);
  background-color: #003652 !important;
  text-align: center;
  overflow: hidden;
}

.popup-reminder-v2026 * {
  font-family: "Pretendard Variable", Pretendard, -apple-system, sans-serif !important;
  font-weight: 400;
  letter-spacing: -0.05em;
}

#POPUP-REMINDER.popup-reminder-v2026 .title {
  margin: 0;
  padding: calc(var(--ru) * 104) 0 0;
  font-size: calc(var(--ru) * 36);
  line-height: calc(var(--ru) * 48);
  letter-spacing: -0.05em;
  font-weight: 700;
  color: #fff;
}

#POPUP-REMINDER.popup-reminder-v2026 .text {
  margin: 0;
  padding: calc(var(--ru) * 16) 0 0;
  font-size: calc(var(--ru) * 26);
  line-height: calc(var(--ru) * 30);
  letter-spacing: -0.05em;
  color: #fff;
}

#POPUP-REMINDER.popup-reminder-v2026 .text .color-0090DA {
  color: #8ff5b1 !important;
  font-weight: 700;
}

#POPUP-REMINDER.popup-reminder-v2026 .btn-area {
  padding: calc(var(--ru) * 75) 0 calc(var(--ru) * 68);
}

#POPUP-REMINDER.popup-reminder-v2026 .btn-area .pv26-reminder-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--ru) * 254);
  height: calc(var(--ru) * 70);
  /* 2026-08-04 사용자 지시: 팝업 CTA 라운딩 20 통일(a930820c)에 체류팝업 버튼도 포함 */
  border-radius: 8px;
  background: #8ff5b1;
  color: #003652;
  font-size: calc(var(--ru) * 32);
  font-weight: 700;
  letter-spacing: -0.05em;
  cursor: pointer;
}

/* magnificPopup 이 주입하는 닫기 버튼(<img class="mfp-close">)은 공용 JS 소관이라
   교체할 수 없다. 시안의 흰 ⊗ 로 보이도록 배경 이미지로 덮어씌운다. */
#POPUP-REMINDER.popup-reminder-v2026 .mfp-close {
  top: calc(var(--ru) * 14) !important;
  right: calc(var(--ru) * 16) !important;
  width: 0 !important;
  height: 0 !important;
  padding: calc(var(--ru) * 19) !important;
  opacity: 1;
  background: url("/assets/image/CF/Popup/v2026/reminder_close_v2026.png") center / contain no-repeat;
}


/* ------------------------------------------------------------------------
   팝업 본문 스크롤바 숨김 (2026-08-07 사용자 지시)
   ------------------------------------------------------------------------
   동의 내용처럼 본문이 길어지면 `.pop_app_ext` 에 세로 스크롤이 생긴다.
   macOS·모바일은 오버레이 스크롤바라 평소 보이지 않지만, Windows 는 자리를 차지하는
   막대가 항상 노출돼 팝업 우측에 회색 띠가 그려진다 — 그 차이를 없앤다.

   → **스크롤바가 자리를 차지하지 않게 감춘다.** 어느 OS·브라우저에서도 동일하게
     "막대 없음 / 본문 폭 그대로"가 되므로, 스크롤이 생겼다고 콘텐츠 영역이 줄어드는
     일이 없다(= macOS 오버레이 스크롤바와 같은 결과).

   얇은 커스텀 막대(`::-webkit-scrollbar { width: Npx }`)는 쓰지 않는다 — 폭을 주는 순간
   macOS/Chrome 이 오버레이에서 고전 스크롤바로 바뀌어 그만큼 본문이 줄고, Windows 와도
   차지하는 폭이 달라져 결국 OS 간 콘텐츠 폭이 어긋난다.
   (자리를 차지하지 않으면서 막대까지 보이게 하려면 JS 로 커스텀 썸을 얹어야 한다.)

   휠·트랙패드·터치·키보드 스크롤은 그대로 동작한다. */
.popup-v2026 .pop_app_ext {
  scrollbar-width: none;        /* Firefox */
  -ms-overflow-style: none;     /* 구 Edge / IE */
}

.popup-v2026 .pop_app_ext::-webkit-scrollbar {
  width: 0;
  height: 0;
}

/* 2026-08-13 사용자 지적("팝업 우측에 넓게 뜨는 증상") — MO 예외를 제거한다.
   종전에는 MO 만 네이티브 스크롤바를 남겼다(2026-08-08). 그 근거는 "모바일 브라우저의
   네이티브 스크롤바는 오버레이라 **폭을 차지하지 않는다**"였는데, 폭을 차지하지 않는 것과
   **보이지 않는 것**은 다르다. macOS/Chrome 의 오버레이 스크롤바는 레이아웃에는 영향을
   주지 않으면서 콘텐츠 **위에 겹쳐** 그려진다(사용자 콘솔 실측: 스크롤바 폭 0).
   팝업 우측은 네이비 헤더/흰 본문이라 밝은 트랙이 넓은 띠처럼 도드라졌다.
   → PC 와 동일하게 숨긴다(위 `.popup-v2026 .pop_app_ext` 규칙이 그대로 적용된다).
     스크롤 동작은 그대로다(실측: scrollTop 0 → 3 정상, 거터 0).
   (2026-08-08 지적은 "스크롤바가 2개 보인다"였고, 그 원인인 오버레이 썸
    popupScrollbar_v2026.js 는 지금도 MO 레이아웃에서 로드하지 않으므로 재발하지 않는다.
    실기기의 오버레이 스크롤바는 원래 스크롤 중에만 잠깐 보이던 것이라 체감 차이가 작다.) */

/* 오버레이 스크롤바 썸 — assets/script/CF/popupScrollbar_v2026.js 가 body 에 붙이고
   위치·크기를 갱신한다. position:fixed 라 본문 폭에 영향이 없고, 스크롤하는 동안만
   보였다가 사라진다(= macOS 오버레이 스크롤바 동작을 전 OS 에서 동일하게). */
.pv26-scrollthumb {
  position: fixed;
  width: 4px;
  border-radius: 2px;
  background: rgba(0, 54, 82, 0.35);
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;   /* 숨어 있을 때는 클릭을 가로채지 않는다 */
  z-index: 1000;
}

/* 보일 때만 잡을 수 있다 — 드래그로 스크롤 위치를 옮길 수 있어 네이티브 기능 손실이 없다 */
.pv26-scrollthumb.is-visible {
  pointer-events: auto;
  cursor: default;
}

.pv26-scrollthumb.is-visible {
  opacity: 1;
}