/* ============================================
   통일 팝업 / 모달 / 토스트 컴포넌트
   common-design.md § 13-6 (시안 2191:240) 기반

   전략:
   - legacy 클래스(.popup_wrap, .notice_popup, .toast_wrap, .popup_box 등)에
     시안 사양을 강한 셀렉터로 직접 덮어쓰기 → 마크업 무수정 + 글로벌 핸들러 호환.
   - .member_sign_popup (로그인/회원가입/인스타 로그인) 은 :not() 으로 제외 — §13-6 정책.
   - .ig-modal / .es_overlay / Bootstrap .modal 등 별개 시스템은 셀렉터로 건드리지 않음.
   - tokens.css 미로드(B 변종) 대비 var(..., fallback) 사용.
   - 신규 컴포넌트(.c-popup) 클래스도 함께 정의 — 미래 마크업용 보조.
   ============================================ */

/* ============================================
   1. 백드롭 컨테이너 (.popup_wrap)
   - legacy: display:none / position:fixed / 100% / rgba(0,0,0,.5) — 그대로 호환
   - 시안: z-index 만 --z-modal 로 통일
   ============================================ */
.popup_wrap:not(.member_sign_popup) {
    z-index: var(--z-modal, 2000);
}

/* ============================================
   2. 컨테이너 박스 (.popup_box)
   - 모든 .popup_box: 외형 통일 (white bg, radius 16, shadow, border 제거)
   - 변형 분기:
     · 변형 클래스 없는 단순 .popup_box: 시안 440 폭 + padding 28 (ucAlert 류)
     · .middle_box* / .big_box / .expansion_popup / .middle_expansion_popup: legacy 폭 유지
       (이용약관/견적서/약관처럼 내용이 많은 큰 팝업 — 가변 크기, 뷰포트 초과 방지)
   ============================================ */

/* 2-1. 모든 popup_box 외형 통일 (배경/radius/shadow/border) — 뷰포트 초과 방지
   ※ 폭이 큰 폼/빌더 모달 제외: .img_upload_popup / .img_upload_popup2 (이미지·로고 크롭, 695~1100px),
     .select_prd_popup ([B] Choice 상품 4종 선택, max-width 1180px / 카드 width 25%),
     .submember_product_reg (서브회원 특정상품 등록 2단 빌더, 카테고리/브랜드/상품그리드).
     이들은 440px 클램프 + max-height/overflow:hidden 이 내부 레이아웃을 잘라내므로 본 통일 규칙에서 뺀다.
     배경/정렬은 legacy base .popup_box(common.css) 가 보유하므로 유지됨. (common-design.md §13-6 폼 팝업 정책) */
.popup_wrap:not(.member_sign_popup):not(.img_upload_popup):not(.img_upload_popup2):not(.select_prd_popup):not(.submember_product_reg) > .popup_box {
    background: #FFF;
    border: none;
    border-radius: 16px;
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: flex;            /* 세로 플렉스 — popup_cont 가 남은 높이 차지/스크롤, popup_head·footer 는 고정 */
    flex-direction: column;
    max-height: calc(100vh - 64px); /* 뷰포트 초과 방지 */
    overflow: hidden; /* 내부 .popup_cont(flex:1) 가 스크롤 → 하단 footer/버튼 안 잘림 */
}
/* 2-1-1. 푸터(버튼) 하단 잘림 방지(높이/overflow 축):
   popup_cont 가 남은 높이를 차지하며 스크롤, popup_head/popup_footer/popup_close_btn 은 고정.
   (legacy 는 box overflow:visible 라 footer 가 박스 밖으로 삐져나와도 보였으나, §2-1 의 overflow:hidden 이 잘라냈음.
    내용이 짧은 알럿은 box 가 content 높이라 flex:1 영향 없음 → 시각 변화 없음) */
.popup_wrap:not(.member_sign_popup):not(.img_upload_popup):not(.img_upload_popup2):not(.select_prd_popup):not(.submember_product_reg) > .popup_box > .popup_cont {
    flex: 1 1 auto;
    min-height: 0;
}
/* 2-1-2. #divFormSpecCore 래퍼형 팝업 — ets_download_popup(전자명세서) / privacy_delete_popup(파기확인서):
   popup_cont 가 box 직속이 아니라 #divFormSpecCore 래퍼 안에 있어 §2-1-1(box 직속 popup_cont)이 안 닿음.
   래퍼를 box 를 채우는 세로 flex 로 만들어 내부 popup_cont 가 스크롤하고 popup_head/popup_footer 는 고정 → 하단 버튼 안 잘림.
   (두 팝업 모두 wrap 에 .ets_download_popup 클래스 보유 → 한 규칙으로 커버) */
.popup_wrap.ets_download_popup > .popup_box > #divFormSpecCore {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}
.popup_wrap.ets_download_popup > .popup_box > #divFormSpecCore > .popup_cont {
    flex: 1 1 auto;
    min-height: 0;
}

/* 2-2. 단순 alert / confirm (변형 클래스 없는 .popup_box) — 시안 440 폭 + padding 24 강제
   ※ 폭이 큰 폼/빌더 제외(.img_upload_popup/.img_upload_popup2/.select_prd_popup/.submember_product_reg):
     440px 강제 시 크롭 UI(695~1100px)·[B]Choice 상품 4종(1180px)·서브회원 2단 빌더가 가로로 잘림 */
.popup_wrap:not(.member_sign_popup):not(.expansion_popup):not(.middle_expansion_popup):not(.img_upload_popup):not(.img_upload_popup2):not(.select_prd_popup):not(.submember_product_reg) > .popup_box:not([class*="middle_box"]):not([class*="big_box"]) {
    width: 440px;
    max-width: calc(100% - 32px);
    padding: 24px;
}

/* 2-3. 큰 변형 박스 (.middle_box* / .big_box / .expansion_popup / .middle_expansion_popup)
       → legacy width / max-width 유지, padding 0 (내부 popup_head/popup_cont/popup_footer 가 자체 패딩 보유) */
.popup_wrap:not(.member_sign_popup) > .popup_box[class*="middle_box"],
.popup_wrap:not(.member_sign_popup) > .popup_box[class*="big_box"],
.popup_wrap.expansion_popup:not(.member_sign_popup) > .popup_box,
.popup_wrap.middle_expansion_popup:not(.member_sign_popup) > .popup_box {
    padding: 0;
    /* width / max-width 는 legacy CSS(.middle_box01 600 / .middle_box02 460 등) 그대로 유지 */
}

/* ============================================
   3. 타이틀·본문
   ============================================ */

/* 3-1. 단순 alert (popup_cont > .info_txt) — ucAlert.html 패턴
       시안 본문 영역(1946:205 의 top 99 영역)에 매칭: 14px Regular #666
   ※ 제외(§2-2 와 동일 셋): popup_cont 에 고유 패딩/레이아웃을 가진 폼·빌더 팝업들. padding:0 으로 덮으면 어색해짐 →
     - .img_upload_popup / .img_upload_popup2 : legacy popup_cont padding 3.125em 3.125em 1.875em (크롭 모달 상하좌우 여백)
     - .select_prd_popup : legacy padding 1.25em 0
     - .submember_product_reg : com_card_wrap{margin:-1.56em -0.94em}(음수 마진) 보정용 — padding:0 시 빌더가 위로 끌려 올라가 헤더 여백 침범
     이들은 §3-1 에서 빼서 legacy popup_cont 패딩을 유지한다. */
.popup_wrap:not(.member_sign_popup):not(.expansion_popup):not(.middle_expansion_popup):not(.img_upload_popup):not(.img_upload_popup2):not(.select_prd_popup):not(.submember_product_reg) > .popup_box:not([class*="middle_box"]):not([class*="big_box"]) > .popup_cont {
    padding: 0 0 32px 0;
    overflow: visible;
}
.popup_wrap:not(.member_sign_popup) > .popup_box:not([class*="middle_box"]):not([class*="big_box"]) .info_txt {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.6;
    color: #666;
    margin: 0;
    word-break: keep-all;
}

/* 3-1-1. 제목 슬롯 (.popup_tit_simple) — 시안 1946:206 Modal 의 제목 톤
   2026-05-29 정책: 단일 메시지 알럿은 줄바꿈 무관 무조건 제목 톤(18 Bold #000) 표시.
   ucAlert.html 의 openAlertNew / openAlertConfirm / openConfirm / openAlertConfirmLater
   호출 시 메시지가 이 슬롯에 채워지고, 본문(.popup_cont) 은 hide 됨.
   제목+본문이 동시에 있을 때(미래 사용 대비)는 제목 ↔ 본문 사이 12px gap. */
.popup_wrap:not(.member_sign_popup):not(.expansion_popup):not(.middle_expansion_popup):not(.footer_popup) > .popup_box:not([class*="middle_box"]):not([class*="big_box"]) .popup_tit_simple {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    color: #000;
    margin: 0;
    padding: 0;
    word-break: keep-all;
}
/* 제목 + 본문 둘 다 보일 때: 본문 영역에 padding-top 12 부여 */
.popup_wrap:not(.member_sign_popup):not(.expansion_popup):not(.middle_expansion_popup):not(.footer_popup) > .popup_box:not([class*="middle_box"]):not([class*="big_box"]) .popup_tit_simple + .popup_cont {
    padding-top: 12px;
}
/* 제목만 있고 본문 hide 인 경우: 컨테이너 padding(28) + 제목 + padding-bottom(32) + 버튼 = 자연 축소 */
.popup_wrap:not(.member_sign_popup):not(.expansion_popup):not(.middle_expansion_popup):not(.footer_popup) > .popup_box:not([class*="middle_box"]):not([class*="big_box"]) .popup_tit_simple:not(:has(+ .popup_cont:not([style*="display:none"]):not([style*="display: none"]))) {
    padding-bottom: 32px;
}

/* 3-2. 헤더 + 본문 분리 (popup_head + popup_tit + .tit) — 단순 박스에만 적용
       2026-05-29 정정: sessionExpired/ig_result/abusing_logout 은 .popup_tit_simple(§3-1-1) 패턴으로 이관됨.
       본 § 3-2 는 향후 추가될 dual-slot 알럿(제목 + 본문 명시 분리) 대비 사양으로 보존.
       큰 변형 박스(middle_box*, big_box, expansion_popup, middle_expansion_popup, footer_popup)는 legacy 유지
       ※ .submember_product_reg(2단 빌더) 제외: display:block 이 popup_head(제목+X)를 세로로 쌓아 2줄로 깨뜨림.
         legacy .popup_head(display:flex; justify-content:space-between) 유지해 제목 좌·X 우 한 줄로 둔다. */
.popup_wrap:not(.member_sign_popup):not(.expansion_popup):not(.middle_expansion_popup):not(.footer_popup):not(.submember_product_reg) > .popup_box:not([class*="middle_box"]):not([class*="big_box"]) .popup_head {
    padding: 0 0 12px 0;
    border: none;
    display: block;
}
/* #submember_product_reg(2단 빌더) 헤더: 제목(.tit 18px) + X 아이콘(.popup_close 1.875em) 세로 중앙 정렬(보조).
   ※ 상하 여백 불균형의 '주원인'은 §3-1(popup_cont padding 제거 → 빌더 com_card_wrap 음수 마진이 헤더 아래를 침범)이며
     거기서 해결됨. 본 규칙은 헤더 내부 정렬만 보조. */
.popup_wrap.submember_product_reg .popup_head {
    align-items: center;
}
.popup_wrap:not(.member_sign_popup):not(.expansion_popup):not(.middle_expansion_popup):not(.footer_popup) > .popup_box:not([class*="middle_box"]):not([class*="big_box"]) .popup_head .popup_tit .tit {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
    color: #000;
}
.popup_wrap:not(.member_sign_popup):not(.expansion_popup):not(.middle_expansion_popup):not(.footer_popup) > .popup_box:not([class*="middle_box"]):not([class*="big_box"]) .popup_head .popup_tit .tit i.alert {
    display: none; /* 시안: 헤더 아이콘 없음 */
}

.popup_wrap:not(.member_sign_popup):not(.expansion_popup):not(.middle_expansion_popup):not(.footer_popup) > .popup_box:not([class*="middle_box"]):not([class*="big_box"]) .popup_cont_txt_box {
    width: 100%;
    height: auto !important;
    overflow: visible;
}
.popup_wrap:not(.member_sign_popup):not(.expansion_popup):not(.middle_expansion_popup):not(.footer_popup) > .popup_box:not([class*="middle_box"]):not([class*="big_box"]) .popup_cont .info_box {
    margin: 0;
}
.popup_wrap:not(.member_sign_popup):not(.expansion_popup):not(.middle_expansion_popup):not(.footer_popup) > .popup_box:not([class*="middle_box"]):not([class*="big_box"]) .popup_cont .info_box p {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.6;
    color: #666;
    margin: 0;
    word-break: keep-all;
}
.popup_wrap:not(.member_sign_popup):not(.expansion_popup):not(.middle_expansion_popup):not(.footer_popup) > .popup_box:not([class*="middle_box"]):not([class*="big_box"]) .popup_cont .info_box p + p {
    margin-top: 4px;
}

/* ============================================
   4. 푸터 / 버튼 영역
   ============================================ */

/* 4-1. 단순 alert 푸터 (notice_popup > popup_close_btn) */
.popup_wrap:not(.member_sign_popup) .popup_box > .popup_close_btn {
    width: auto;
    border-top: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 24px;
}

/* 4-2. 단일 OK 버튼 (popup_close_btn:not(.check_btn_wrap) > .popup_close) — Modal full-width
       legacy .notice_popup .popup_close_btn .popup_close { color: var(--point-blue-1) } 덮어쓰기 위해 !important 사용 */
.popup_wrap:not(.member_sign_popup) .popup_close_btn:not(.check_btn_wrap) > .popup_close {
    width: 100%;
    height: 40px;
    padding: 0;
    border-radius: 10px;
    background: var(--point-blue-1, #4B75F2) !important;
    color: #FFF !important;
    font-size: 14px;
    font-weight: 700;
    line-height: 40px;
    text-align: center;
    cursor: pointer;
    border: none;
    box-sizing: border-box;
    transition: filter 0.15s ease;
}
.popup_wrap:not(.member_sign_popup) .popup_close_btn:not(.check_btn_wrap) > .popup_close:hover {
    filter: brightness(0.95);
}

/* 4-3. 2버튼 (check_btn_wrap.flex_cont > .popup_later + .popup_confirm) — Popup 변형
   2026-05-29 정책: 시안의 152:187(≈1:1.23) 대신 **컨테이너 내부 균등 분할 1:1**
   → 두 버튼 모두 `flex: 1` 로 동일 폭. 라벨 길이 변동에도 비대칭 발생 안 함. */
.popup_wrap:not(.member_sign_popup) .popup_close_btn.check_btn_wrap > div {
    flex: 1 1 0;
    min-width: 0;
    height: 44px;
    padding: 0;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    line-height: 44px;
    text-align: center;
    cursor: pointer;
    border: none;
    border-left: none !important; /* legacy 의 사이 보더 제거 */
    box-sizing: border-box;
    transition: filter 0.15s ease;
}

/* Secondary (.popup_later / .cancel_btn): filled #F2F2F2 + #999
   legacy .notice_popup .popup_close_btn .cancel_btn { color: var(--text-primary) } 덮어쓰기 */
.popup_wrap:not(.member_sign_popup) .popup_close_btn .popup_later,
.popup_wrap:not(.member_sign_popup) .popup_close_btn .cancel_btn {
    background: #F2F2F2 !important;
    color: #999 !important;
}

/* Primary (.popup_confirm / .select_btn): point-blue-1 + #FFF
   legacy .point-color { color: var(--point-blue-1) !important } 덮어쓰기 위해 !important 필수 */
.popup_wrap:not(.member_sign_popup) .popup_close_btn .popup_confirm,
.popup_wrap:not(.member_sign_popup) .popup_close_btn .select_btn {
    background: var(--point-blue-1, #4B75F2) !important;
    color: #FFF !important;
}

.popup_wrap:not(.member_sign_popup) .popup_close_btn.check_btn_wrap > div:hover {
    filter: brightness(0.95);
}

/* 4-4. popup_footer > popup_bottom_btn_wrap — **모든 박스에 적용** (단순/큰 변형/이용약관 모두 통일)
       사용자 요구: "버튼 있는 건 시안처럼 통일 (버튼 위치/스타일/레이아웃 통일)"
       분기:
         · .btn_basic:only-child → Modal 패턴 (Primary full-width)
         · 2버튼 → Popup 패턴 (Secondary 좁음 + Primary 187 우측 정렬, gap 24)
         · .point-color / .btn_primary 클래스 = Primary, 그 외 = Secondary */
.popup_wrap:not(.member_sign_popup) .popup_footer {
    margin: 0;
    padding: 16px 28px 28px;
    border: none;
}
.popup_wrap:not(.member_sign_popup) .popup_bottom_btn_wrap {
    width: auto;
    border-top: none;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 24px;
    padding: 0;
}
.popup_wrap:not(.member_sign_popup) .popup_bottom_btn_wrap .btn_basic {
    width: auto !important;
    flex: 1 1 0;
    min-width: 0;
    height: 44px;
    padding: 0;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    line-height: 44px;
    text-align: center;
    border: none;
    border-left: none !important;
    cursor: pointer;
    background: #F2F2F2 !important;
    color: #999 !important;
    box-sizing: border-box;
    transition: filter 0.15s ease;
}
/* Primary: legacy .point-color { color: var(--point-blue-1) !important } 가 bg 와 같은 색으로
   글자를 묻히게 만들어 안 보이는 문제 → !important 로 #FFF 강제
   2026-05-29: 1:1 균등 분할 정책으로 min-width / padding 제거 (베이스 .btn_basic 의 flex:1 사용) */
.popup_wrap:not(.member_sign_popup) .popup_bottom_btn_wrap .btn_basic.point-color,
.popup_wrap:not(.member_sign_popup) .popup_bottom_btn_wrap .btn_basic.btn_primary {
    background: var(--point-blue-1, #4B75F2) !important;
    color: #FFF !important;
}
.popup_wrap:not(.member_sign_popup) .popup_bottom_btn_wrap .btn_basic:hover {
    filter: brightness(0.95);
}

/* 단일 버튼이면 Modal full-width 패턴 (인라인 style="width:100%" 도 호환)
   베이스에서 이미 flex:1 이므로 단일 버튼이어도 컨테이너 전체를 차지 → 별도 분기 불필요하지만
   명시적 의도 표시를 위해 유지 (no-op 셀렉터) */
.popup_wrap:not(.member_sign_popup) .popup_bottom_btn_wrap .btn_basic:only-child,
.popup_wrap:not(.member_sign_popup) .popup_bottom_btn_wrap .btn_basic[style*="width:100%"],
.popup_wrap:not(.member_sign_popup) .popup_bottom_btn_wrap .btn_basic[style*="width: 100%"] {
    flex: 1 1 0;
    min-width: 0;
}

/* ============================================
   5. Toast (.toast_wrap) — 시안: 440×73, radius 16, shadow, 18px Bold #000
   ============================================ */
/* ⚠️ 레거시 common.css(.toast_wrap …)가 popup.css 뒤에 로드되는 페이지
   (예: goodsDetail = ucHead(popup.css) → ucMypageScript(common.css) 순)에서는
   동일 specificity 라 레거시 "초록 토스트"(--toast-bg/border, radius 10, min-width 435,
   position:absolute 큰 ✕)가 시안을 덮어씀.
   → 셀렉터를 .toast_wrap.toast_wrap 으로 1클래스 높여 로드 순서와 무관하게
     시안(440×73, radius 16, white, 18px Bold #000, ✕ 16 #CCC)이 항상 이기도록 함.
     (popup.css 의 "강한 셀렉터로 직접 덮어쓰기" 전략과 동일) */

/* 바깥 wrapper = 위치만 잡는 투명 레이어 (레거시 초록 bg/border/radius/min-width 리셋) */
.toast_wrap.toast_wrap {
    position: fixed;
    z-index: var(--z-toast, 3000);
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
    min-width: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    color: inherit;
}
/* 안쪽 박스 = 시안 440×73 카드 (레거시 padding 1.25em / padding-right 3.625em 리셋) */
.toast_wrap.toast_wrap .toast {
    width: 440px;
    max-width: calc(100vw - 32px);
    min-height: 73px;
    background: #FFF;
    border: none;
    border-radius: 16px;
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
    padding: 0 28px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: 'Pretendard', 'Pretendard Variable', -apple-system, sans-serif;
}
.toast_wrap.toast_wrap .toast > i {
    /* 시안 아이콘 없음 — 좌측 info 아이콘 숨김 */
    display: none;
}
.toast_wrap.toast_wrap .toast .txt {
    flex: 1;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    color: #000;
    margin: 0;
    word-break: keep-all;
}
.toast_wrap.toast_wrap .toast .cart_move {
    flex: 0 0 auto;
    margin: 0;
}
.toast_wrap.toast_wrap .toast .cart_move a {
    font-size: 14px;
    font-weight: 700;
    color: var(--point-blue-1, #4B75F2);
    text-decoration: none;
    border-bottom: none;
    white-space: nowrap;
}
.toast_wrap.toast_wrap .toast .cart_move a:hover {
    text-decoration: underline;
}
/* ✕ 닫기 — 레거시 position:absolute / 큰 아이콘(1.75em) / mono-1 색 리셋 → 16px #CCC inline-flex */
.toast_wrap.toast_wrap .toast .close_btn {
    position: static;
    top: auto;
    right: auto;
    transform: none;
    margin: 0;
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    cursor: pointer;
    color: #CCC;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.toast_wrap.toast_wrap .toast .close_btn i {
    font-size: 16px;
    color: inherit;
    padding: 0;
}
.toast_wrap.toast_wrap .toast .close_btn:hover {
    color: #666;
}

/* ============================================
   5-1. 진입/종료 애니메이션 + 다중 스택 재배치 (§ 13-1)
   - showToast(common.js)가 동적 생성한 .toast_wrap 에만 적용.
   - 위 § 5 의 박스 비주얼(440×73 / radius 16 / shadow / 18px Bold)은 불변 — 본 블록은
     진입/종료 모션 + 스택 위치 전이만 "추가".
   - 진입: slide-down 220ms / 종료: fade + slide-up 160ms
   - 스택: JS 가 활성 토스트 top 오프셋을 8px 간격으로 누적 계산. 제거 시 top 전이로 부드럽게 당겨짐.
     (translateX(-50%) 가로 중앙정렬과 충돌 없게 keyframe 은 translate 2축으로 동시 지정)
   ============================================ */
@keyframes toastSlideDown {
    from { opacity: 0; transform: translate(-50%, -20px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}
@keyframes toastSlideUp {
    from { opacity: 1; transform: translate(-50%, 0); }
    to   { opacity: 0; transform: translate(-50%, -20px); }
}
/* 스택 재배치(top 변경) 부드럽게 — 신규 진입은 inline top 초기값이라 전이 미발생, 제거 시에만 동작 */
.toast_wrap.toast_wrap {
    transition: top 160ms ease;
}
.toast_wrap.toast_wrap.is-entering {
    animation: toastSlideDown 220ms ease-out both;
}
.toast_wrap.toast_wrap.is-leaving {
    animation: toastSlideUp 160ms ease-in both;
    pointer-events: none;
}
/* 모션 최소화 선호 시 즉시 표시/제거 */
@media (prefers-reduced-motion: reduce) {
    .toast_wrap.toast_wrap {
        transition: none;
    }
    .toast_wrap.toast_wrap.is-entering,
    .toast_wrap.toast_wrap.is-leaving {
        animation-duration: 1ms;
    }
}

/* ============================================
   6. 모바일 반응형 (≤767)
   ============================================ */
@media (max-width: 767px) {
    .popup_wrap:not(.member_sign_popup):not(.expansion_popup):not(.middle_expansion_popup) > .popup_box {
        padding: 20px;
    }
    .popup_wrap:not(.member_sign_popup) .popup_box .info_txt,
    .popup_wrap:not(.member_sign_popup):not(.expansion_popup):not(.middle_expansion_popup) .popup_head .popup_tit .tit {
        font-size: 16px;
    }
    .popup_wrap:not(.member_sign_popup):not(.expansion_popup):not(.middle_expansion_popup) .popup_cont .info_box p {
        font-size: 13px;
    }
    .popup_wrap:not(.member_sign_popup) .popup_box > .popup_close_btn,
    .popup_wrap:not(.member_sign_popup):not(.expansion_popup):not(.middle_expansion_popup) .popup_bottom_btn_wrap {
        gap: 12px;
    }
    .popup_wrap:not(.member_sign_popup) .popup_later,
    .popup_wrap:not(.member_sign_popup) .popup_close_btn .cancel_btn {
        flex: 1;
        padding: 0 16px;
    }
    .popup_wrap:not(.member_sign_popup) .popup_confirm,
    .popup_wrap:not(.member_sign_popup) .popup_close_btn .select_btn {
        flex: 1;
        min-width: 0;
    }
    .toast_wrap.toast_wrap .toast {
        padding: 0 20px;
        min-height: 64px;
    }
    .toast_wrap.toast_wrap .toast .txt {
        font-size: 15px;
    }
}

/* ============================================
   7. 신규 컴포넌트 (.c-popup) — 미래 마크업용 보조
   - 본 섹션은 새로 만드는 팝업에서 사용. 기존 마크업은 위 § 1~6 으로 자동 적용됨.
   ============================================ */
.c-popup {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal, 2000);
    display: none;
    background: rgba(0, 0, 0, 0.5);
}
.c-popup.is-open {
    display: block;
}
.c-popup__box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 440px;
    max-width: calc(100% - 32px);
    background: #FFF;
    border-radius: 16px;
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
    padding: 28px;
    box-sizing: border-box;
    font-family: 'Pretendard', 'Pretendard Variable', -apple-system, sans-serif;
}
.c-popup__title {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
    color: #000;
    margin: 0;
}
.c-popup__body {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.6;
    color: #666;
    margin: 12px 0 0;
}
.c-popup__actions {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-top: 32px;
}
/* 2026-05-29 정책: 두 버튼은 컨테이너 내부 균등 분할 1:1
   → .c-popup__btn 베이스에서 flex:1 적용, primary/secondary 는 색만 분리 */
.c-popup__btn {
    flex: 1 1 0;
    min-width: 0;
    height: 44px;
    border-radius: 10px;
    border: none;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: filter 0.15s ease;
}
.c-popup__btn:hover {
    filter: brightness(0.95);
}
.c-popup__btn--primary {
    background: var(--point-blue-1, #4B75F2);
    color: #FFF;
}
.c-popup__btn--secondary {
    background: #F2F2F2;
    color: #999;
}
/* Modal 단일 버튼 (Primary full-width). 2버튼 베이스가 이미 flex:1 이지만 명시적 의도 표시 위해 유지. */
.c-popup__btn--full {
    flex: 1 1 0;
    min-width: 0;
    width: 100%;
}