/* ==========================================================================
   모달 (아래쪽에 반응형 절이 이어진다)

   프로젝트 모달은 .modal > .modal-dim + .modal_popup 구조이고
   .modal_popup 은 폭이 고정(450~500px)에 left:50% + margin-left:-폭/2 로
   가운데를 맞춘다. 390px 화면에서는 좌우로 55px 씩 삐져나가 버튼이 잘린다.

   왜 컨테이너 스코프를 쓰지 않는가
     모달은 대개 #container 바깥(body 직속)에 있어 페이지 컨테이너로 묶을 수 없다.
     그리고 폭을 넘겨 잘리는 모달은 어느 페이지에서든 못 쓴다.
     적용 구간이 768px 이하뿐이라 데스크톱 렌더링에는 영향이 없다.

   기능은 건드리지 않는다.
   Scripts/Framework/common.js 의 modal_open 이 여는 시점에
   marginTop = -height/2 를 인라인으로 넣는다. 내용이 화면보다 길면 위가 잘리므로
   높이를 제한하고 안쪽에서 스크롤되게 한다.
   ========================================================================== */

/* --------------------------------------------------------------------------
   디자인

   실측(전, 결제하기 > 서비스 사이트 선택):
     .modal_popup   500x529 / border 1px solid #787878 / radius 0 / 그림자 없음
     .pop_header    margin:0 10px; padding:20px 10px; .pop_title 22px
     .btn_pop_close 28px PNG 이미지(얇은 X)
     .pop_content   padding:30px 0 10px
     .pop_footer    .btn.point  140x40 #3caaf5 radius 0
                    .btn.light  140x40 #ecf0f5 radius 0
   화면 본문은 카드 radius 16 / 버튼 radius 10 인데 모달만 각진 회색 창이었다.

   스코프
     모달은 #container 바깥(#wrap 직속)이라 페이지 스코프로 못 잡는다.
     그렇다고 전역으로 두면 _Layout 에 들어 있는 "상담 신청 완료" 모달이
     리디자인 제외 페이지(광고대행·솔루션 소개)에서도 바뀐다.
     그래서 body:has(#container:is(...)) 로 "지금 어느 화면인지" 를 보고 건다.
     :has() 는 인자 중 가장 높은 특이도(여기서는 id)를 따르므로
     레거시 .modal .modal_popup 을 여유 있게 이긴다.

   상담 신청 완료 팝업(#pop_inquiry_finish_simple, _Layout.cshtml)은 예외로 어느 화면에서든 건다.
     모든 화면의 떠 있는 '무료 상담 신청' 뒤에 뜨는 팝업이라, 위 화면 목록 밖(메인 · 광고대행 ·
     광고솔루션)에서는 옛 모양(회색 1px 테 · 각진 모서리 · 회색 확인)으로, 광고 문의 화면에서만
     새 모양으로 떴다(2026-09-29 실측). 그래서 모든 규칙의 앞머리를
     :is(목록 화면의 .modal, .modal:has(> #pop_inquiry_finish_simple)) 로 둔다.

   기능은 건드리지 않는다.
     여닫기는 Scripts/Framework/common.js 의 modal_open / modal_close 가
     display 와 인라인 margin-top 으로 처리한다. 그 둘은 손대지 않는다.
   -------------------------------------------------------------------------- */

:is(body:has(#container:is(.service_history, .pay_processing, .coupon, .relax_policy,
                       .member_modify, .withdraw_info, .pay_finish, .payment,
                       .recommend, .withdraw, .faq, .notice, .inquiry, .terms,
                       .login_wrap, .content-sign-up, .sign_in, .account_find)) .modal, .modal:has(> #pop_inquiry_finish_simple)) .modal-dim {
    background: rgba(11, 18, 32, .45);
}

:is(body:has(#container:is(.service_history, .pay_processing, .coupon, .relax_policy,
                       .member_modify, .withdraw_info, .pay_finish, .payment,
                       .recommend, .withdraw, .faq, .notice, .inquiry, .terms,
                       .login_wrap, .content-sign-up, .sign_in, .account_find)) .modal, .modal:has(> #pop_inquiry_finish_simple)) .modal_popup {
    border: 0;
    border-radius: var(--mc-radius);
    background: var(--mc-surface, #fff);
    box-shadow: 0 32px 64px -24px rgba(11, 18, 32, .45),
                0 2px 8px rgba(11, 18, 32, .08);
    /* 내용이 화면보다 길면 모달 안에서 스크롤. 데스크톱에도 필요하다
       (서비스 사이트 선택은 행이 늘면 529px 을 넘는다). */
    max-height: calc(100dvh - 80px);
    overflow-y: auto;
}

/* ---- 머리글 ---- */
:is(body:has(#container:is(.service_history, .pay_processing, .coupon, .relax_policy,
                       .member_modify, .withdraw_info, .pay_finish, .payment,
                       .recommend, .withdraw, .faq, .notice, .inquiry, .terms,
                       .login_wrap, .content-sign-up, .sign_in, .account_find)) .modal, .modal:has(> #pop_inquiry_finish_simple)) .pop_header {
    display: flex;
    align-items: center;
    gap: 12px;
    /* 레거시는 margin:0 10px 로 선을 안쪽에 들여 그린다.
       카드 폭 전체를 쓰는 선이 더 정직하다. */
    margin: 0;
    padding: 20px 24px;
    border-bottom: 1px solid var(--mc-border, #e7ebf5);
}

    :is(body:has(#container:is(.service_history, .pay_processing, .coupon, .relax_policy,
                       .member_modify, .withdraw_info, .pay_finish, .payment,
                       .recommend, .withdraw, .faq, .notice, .inquiry, .terms,
                       .login_wrap, .content-sign-up, .sign_in, .account_find)) .modal, .modal:has(> #pop_inquiry_finish_simple)) .pop_header .pop_title {
        flex: 1 1 auto;
        min-width: 0;
        margin: 0;
        font-size: 18px;
        font-weight: 700;
        letter-spacing: -.02em;
        line-height: 1.4;
        color: var(--mc-ink, #0b1220);
    }

/* 닫기 — PNG 를 감추고 X 를 선으로 그린다. 히트 영역을 36px 로 넓힌다. */
:is(body:has(#container:is(.service_history, .pay_processing, .coupon, .relax_policy,
                       .member_modify, .withdraw_info, .pay_finish, .payment,
                       .recommend, .withdraw, .faq, .notice, .inquiry, .terms,
                       .login_wrap, .content-sign-up, .sign_in, .account_find)) .modal, .modal:has(> #pop_inquiry_finish_simple)) .btn_pop_close {
    /* X 를 ::before/::after 로 그리므로 기준이 되어야 한다.
       static 으로 두면 pseudo 가 .pop_header(position:relative) 기준으로
       튀어 헤더 왼쪽 위에 X 가 그려진다.
       레거시의 top:18px / right:10px 은 함께 풀어야 자리가 안 밀린다. */
    position: relative;
    top: auto;
    right: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    margin-right: -8px;
    border-radius: 10px;
    cursor: pointer;
    transition: background .15s ease;
}

    :is(body:has(#container:is(.service_history, .pay_processing, .coupon, .relax_policy,
                       .member_modify, .withdraw_info, .pay_finish, .payment,
                       .recommend, .withdraw, .faq, .notice, .inquiry, .terms,
                       .login_wrap, .content-sign-up, .sign_in, .account_find)) .modal, .modal:has(> #pop_inquiry_finish_simple)) .btn_pop_close:hover {
        background: var(--mc-tint, #f4f7fe);
    }

    :is(body:has(#container:is(.service_history, .pay_processing, .coupon, .relax_policy,
                       .member_modify, .withdraw_info, .pay_finish, .payment,
                       .recommend, .withdraw, .faq, .notice, .inquiry, .terms,
                       .login_wrap, .content-sign-up, .sign_in, .account_find)) .modal, .modal:has(> #pop_inquiry_finish_simple)) .btn_pop_close img {
        display: none;
    }

    :is(body:has(#container:is(.service_history, .pay_processing, .coupon, .relax_policy,
                       .member_modify, .withdraw_info, .pay_finish, .payment,
                       .recommend, .withdraw, .faq, .notice, .inquiry, .terms,
                       .login_wrap, .content-sign-up, .sign_in, .account_find)) .modal, .modal:has(> #pop_inquiry_finish_simple)) .btn_pop_close::before,
    :is(body:has(#container:is(.service_history, .pay_processing, .coupon, .relax_policy,
                       .member_modify, .withdraw_info, .pay_finish, .payment,
                       .recommend, .withdraw, .faq, .notice, .inquiry, .terms,
                       .login_wrap, .content-sign-up, .sign_in, .account_find)) .modal, .modal:has(> #pop_inquiry_finish_simple)) .btn_pop_close::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 15px;
        height: 1.7px;
        margin: -1px 0 0 -7.5px;
        border-radius: 2px;
        background: var(--mc-body, #4a5468);
    }

    :is(body:has(#container:is(.service_history, .pay_processing, .coupon, .relax_policy,
                       .member_modify, .withdraw_info, .pay_finish, .payment,
                       .recommend, .withdraw, .faq, .notice, .inquiry, .terms,
                       .login_wrap, .content-sign-up, .sign_in, .account_find)) .modal, .modal:has(> #pop_inquiry_finish_simple)) .btn_pop_close::before { transform: rotate(45deg); }
    :is(body:has(#container:is(.service_history, .pay_processing, .coupon, .relax_policy,
                       .member_modify, .withdraw_info, .pay_finish, .payment,
                       .recommend, .withdraw, .faq, .notice, .inquiry, .terms,
                       .login_wrap, .content-sign-up, .sign_in, .account_find)) .modal, .modal:has(> #pop_inquiry_finish_simple)) .btn_pop_close::after  { transform: rotate(-45deg); }

/* ---- 본문 ---- */
:is(body:has(#container:is(.service_history, .pay_processing, .coupon, .relax_policy,
                       .member_modify, .withdraw_info, .pay_finish, .payment,
                       .recommend, .withdraw, .faq, .notice, .inquiry, .terms,
                       .login_wrap, .content-sign-up, .sign_in, .account_find)) .modal, .modal:has(> #pop_inquiry_finish_simple)) .pop_content {
    padding: 22px 24px;
}

    :is(body:has(#container:is(.service_history, .pay_processing, .coupon, .relax_policy,
                       .member_modify, .withdraw_info, .pay_finish, .payment,
                       .recommend, .withdraw, .faq, .notice, .inquiry, .terms,
                       .login_wrap, .content-sign-up, .sign_in, .account_find)) .modal, .modal:has(> #pop_inquiry_finish_simple)) .pop_content .con_txt {
        font-size: 14px;
        line-height: 1.7;
        color: var(--mc-body, #4a5468);
    }

    :is(body:has(#container:is(.service_history, .pay_processing, .coupon, .relax_policy,
                       .member_modify, .withdraw_info, .pay_finish, .payment,
                       .recommend, .withdraw, .faq, .notice, .inquiry, .terms,
                       .login_wrap, .content-sign-up, .sign_in, .account_find)) .modal, .modal:has(> #pop_inquiry_finish_simple)) .pop_content .caution {
        /* 레거시(Content/css/css.css)가 .modal .pop_content .caution 에
           width: 450px 을 고정으로 준다. 390 화면에서 팝업이 374px 이라
           안내 상자가 오른쪽으로 76px 삐져나갔다(결제 화면 실측). */
        box-sizing: border-box;
        width: auto;
        max-width: 100%;
        min-width: 0;
        margin: 0 0 14px;
        padding: 12px 14px;
        border: 1px solid var(--mc-border, #e7ebf5);
        border-radius: var(--mc-radius-sm, 10px);
        background: var(--mc-tint, #f4f7fe);
        font-size: 14px;
        line-height: 1.6;
        color: var(--mc-body, #4a5468);
        text-align: left;
    }

    /* 모달 안 표 */
    :is(body:has(#container:is(.service_history, .pay_processing, .coupon, .relax_policy,
                       .member_modify, .withdraw_info, .pay_finish, .payment,
                       .recommend, .withdraw, .faq, .notice, .inquiry, .terms,
                       .login_wrap, .content-sign-up, .sign_in, .account_find)) .modal, .modal:has(> #pop_inquiry_finish_simple)) .pop_content .tb_style {
        width: 100%;
        border-top: 1px solid var(--mc-border, #e7ebf5);
    }

        :is(body:has(#container:is(.service_history, .pay_processing, .coupon, .relax_policy,
                       .member_modify, .withdraw_info, .pay_finish, .payment,
                       .recommend, .withdraw, .faq, .notice, .inquiry, .terms,
                       .login_wrap, .content-sign-up, .sign_in, .account_find)) .modal, .modal:has(> #pop_inquiry_finish_simple)) .pop_content .tb_style :is(th, td) {
            padding: 12px 10px;
            border-bottom: 1px solid var(--mc-border, #e7ebf5);
            font-size: 14px;
        }

        :is(body:has(#container:is(.service_history, .pay_processing, .coupon, .relax_policy,
                       .member_modify, .withdraw_info, .pay_finish, .payment,
                       .recommend, .withdraw, .faq, .notice, .inquiry, .terms,
                       .login_wrap, .content-sign-up, .sign_in, .account_find)) .modal, .modal:has(> #pop_inquiry_finish_simple)) .pop_content .tb_style th {
            background: var(--mc-tint, #f4f7fe);
            font-weight: 600;
            color: var(--mc-ink, #0b1220);
        }

    /* 모달 안 입력 */
    :is(body:has(#container:is(.service_history, .pay_processing, .coupon, .relax_policy,
                       .member_modify, .withdraw_info, .pay_finish, .payment,
                       .recommend, .withdraw, .faq, .notice, .inquiry, .terms,
                       .login_wrap, .content-sign-up, .sign_in, .account_find)) .modal, .modal:has(> #pop_inquiry_finish_simple)) .pop_content :is(input[type=text], input[type=password],
                                            input[type=tel], input[type=number],
                                            input[type=email], select, textarea) {
        height: 46px;
        padding: 0 14px;
        border: 1px solid var(--mc-border, #e7ebf5);
        border-radius: var(--mc-radius-sm, 10px);
        background-color: var(--mc-surface, #fff);
        font-family: inherit;
        font-size: 14px;
        color: var(--mc-ink, #0b1220);
    }

        :is(body:has(#container:is(.service_history, .pay_processing, .coupon, .relax_policy,
                       .member_modify, .withdraw_info, .pay_finish, .payment,
                       .recommend, .withdraw, .faq, .notice, .inquiry, .terms,
                       .login_wrap, .content-sign-up, .sign_in, .account_find)) .modal, .modal:has(> #pop_inquiry_finish_simple)) .pop_content textarea {
            height: auto;
            padding: 12px 14px;
            line-height: 1.6;
        }

/* ---- 버튼줄 ---- */
:is(body:has(#container:is(.service_history, .pay_processing, .coupon, .relax_policy,
                       .member_modify, .withdraw_info, .pay_finish, .payment,
                       .recommend, .withdraw, .faq, .notice, .inquiry, .terms,
                       .login_wrap, .content-sign-up, .sign_in, .account_find)) .modal, .modal:has(> #pop_inquiry_finish_simple)) .pop_footer {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 0 24px 24px;
}

    :is(body:has(#container:is(.service_history, .pay_processing, .coupon, .relax_policy,
                       .member_modify, .withdraw_info, .pay_finish, .payment,
                       .recommend, .withdraw, .faq, .notice, .inquiry, .terms,
                       .login_wrap, .content-sign-up, .sign_in, .account_find)) .modal, .modal:has(> #pop_inquiry_finish_simple)) .pop_footer > :is(a, button, input[type=submit], input[type=button]) {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 132px;
        height: 48px;
        margin: 0;
        padding: 0 20px;
        border: 1px solid transparent;
        border-radius: var(--mc-radius-sm, 10px);
        background: var(--mc-surface, #fff);
        font-family: inherit;
        font-size: 14px;
        font-weight: 600;
        line-height: 1;
        color: var(--mc-body, #4a5468);
        text-decoration: none;
        cursor: pointer;
        transition: filter .15s ease, border-color .15s ease;
    }

        /* 주 버튼.
           모달 푸터에서는 .second 가 긍정 버튼이다. 본문의 관례와 반대다.
           실측(전체 모달 푸터): 확인 .second 12 / 확인 .point 4 /
           예·저장·신청취소·휴먼계정 해제하기 .second /
           취소·아니오·다음에 할래요 .light. 그래서 .second 를 주 버튼으로 둔다. */
        :is(body:has(#container:is(.service_history, .pay_processing, .coupon, .relax_policy,
                       .member_modify, .withdraw_info, .pay_finish, .payment,
                       .recommend, .withdraw, .faq, .notice, .inquiry, .terms,
                       .login_wrap, .content-sign-up, .sign_in, .account_find)) .modal, .modal:has(> #pop_inquiry_finish_simple)) .pop_footer > :is(.btn.point, .btn.second, .btn.full, .btn_ok) {
            border-color: transparent;
            background: var(--mc-cta, #111);
            color: #fff;
            box-shadow: 0 12px 24px -14px rgba(16, 24, 48, .5);
        }

        /* 보조 (취소·아니오) */
        :is(body:has(#container:is(.service_history, .pay_processing, .coupon, .relax_policy,
                       .member_modify, .withdraw_info, .pay_finish, .payment,
                       .recommend, .withdraw, .faq, .notice, .inquiry, .terms,
                       .login_wrap, .content-sign-up, .sign_in, .account_find)) .modal, .modal:has(> #pop_inquiry_finish_simple)) .pop_footer > :is(.btn.light, .btn.line, .btn.basic) {
            border-color: var(--mc-border, #e7ebf5);
            background: var(--mc-surface, #fff);
            color: var(--mc-body, #4a5468);
        }

        :is(body:has(#container:is(.service_history, .pay_processing, .coupon, .relax_policy,
                       .member_modify, .withdraw_info, .pay_finish, .payment,
                       .recommend, .withdraw, .faq, .notice, .inquiry, .terms,
                       .login_wrap, .content-sign-up, .sign_in, .account_find)) .modal, .modal:has(> #pop_inquiry_finish_simple)) .pop_footer > :is(a, button):hover {
            filter: brightness(.98);
        }

@media (max-width: 768px) {

    .modal .modal_popup {
        left: 12px !important;
        right: 12px !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        margin-left: 0 !important;
        box-sizing: border-box;

        /* 세로 가운데.

           한때 top:20px 으로 위에 붙여 뒀다. 가운데를 잡는 방식이 화면마다
           둘로 갈리는데(컨테이너에 따라 transform: translate(-50%,-50%) 이거나,
           modal_open 이 인라인으로 넣는 margin-top:-height/2), 둘을 그대로
           두면 좌우로 밀리거나 내용이 길 때 위가 잘려서 피한 것이다.
           그런데 390px 실측에서 위 20 / 아래 580px — 짧은 모달이 화면 위쪽에
           떠 있고 아래가 텅 비었다. 데스크톱은 가운데였다(위아래 328).

           두 방식을 다 걷어내고 여기서 직접 가운데를 잡는다. 좌우는 위의
           left/right 12px 이 맡으므로 세로만 옮기면 된다.
           아래 max-height 가 높이를 화면-40px 로 묶으므로, 가운데에 둬도
           내용이 길어서 위가 잘리는 일은 없다. */
        top: 50% !important;
        transform: translateY(-50%) !important;
        margin-top: 0 !important;

        /* 내용이 길면 모달 안에서 스크롤 */
        max-height: calc(100vh - 40px);
        max-height: calc(100dvh - 40px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

        /* 모달 안의 표도 컬럼이 많다. 칸을 무너뜨리지 않고 가로 스크롤로 흘린다. */
        .modal .modal_popup table {
            display: block;
            width: 100%;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
        }

        .modal .modal_popup :is(img, iframe) {
            max-width: 100%;
        }

        /* 푸터 버튼은 전체폭으로 나눠 갖는다 */
        .modal .modal_popup .pop_footer {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }

            .modal .modal_popup .pop_footer > :is(a, button) {
                flex: 1 1 120px;
                min-width: 0;
            }
}

@media (max-width: 480px) {

    .modal .modal_popup {
        left: 8px !important;
        right: 8px !important;
    }
}


/* ==========================================================================
   모달 안의 폼 — 세금계산서 정보 관리(#pop_tax_invoice)

   왜 여기냐
     회원정보수정 본문은 Auth.css 가 리뉴얼한다(회원가입과 같은 폼이라
     같은 파일을 쓴다). 그런데 모달은 #container 바깥이라 그 스코프가
     닿지 않는다. 같은 내용을 담은 폼인데 본문만 새 옷을 입고 모달은
     구 디자인으로 남았다. 껍데기(딤·반경·닫기)를 이 파일이 잡는 것과
     같은 수법으로 안쪽도 여기서 잡는다.

   1440 실측(고치기 전)
     절 제목        border-bottom: 2px solid #333   <- 본문에서 걷어낸 그 선
     라벨 칸        flex-basis 175px + margin-top 18.4px
     필수 표시      라벨 *앞* 에 빨간 별 (관례는 뒤쪽 위 ⁎)
     우편번호 찾기   검정 #333
     ⓘ             .caution 의 padding 을 덮어 첫 글자에 겹침
     390 에서는 라벨 175 고정이 살아 입력 자리가 199px 밖에 안 남아
     사업자등록번호 세 칸 중 하나가 잘렸다.

   값은 Auth.css 의 폼 언어와 같은 것을 쓴다. 기능은 건드리지 않는다.
   ========================================================================== */

/* ---- 절 제목 — 밑줄을 걷고 범례와 체크를 한 줄에 ---- */
/* 레거시가 .modal .content-form 에 padding-bottom: 0 !important 를 박아 둔다.
   본문이 스크롤 상자가 된 지금은 끝까지 내렸을 때 마지막 입력칸 아래가 0 이라
   버튼줄과 맞붙어 겹쳐 보인다(1440 실측: 마지막 줄 아래 = 0px). */
body:has(#container.member_modify) .modal .pop_content.content-form {
    padding-bottom: 22px !important;
}

body:has(#container.member_modify) .modal .pop_content.content-form .section-title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 14px;
    padding: 0;
    border: 0;
}

    body:has(#container.member_modify) .modal .pop_content.content-form .section-title .asterisk {
        font-size: 12px;
        color: var(--mc-muted, #7c87a0);
    }

    body:has(#container.member_modify) .modal .pop_content.content-form .section-title .checkbox {
        margin-left: auto;
    }

/* ---- 행: 라벨 위 / 입력 아래 ---- */
body:has(#container.member_modify) .modal .pop_content.content-form section > ul {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 0;
    padding: 0;
    /* 레거시가 ul 에 1px #ccc 를 그어 마지막 입력 테두리와 겹쳐 보인다 */
    border-bottom: 0;
    list-style: none;
}

    body:has(#container.member_modify) .modal .pop_content.content-form section > ul > li {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 7px;
        min-height: 0;
        margin: 0;
        padding: 0;
        border: 0;
    }

        body:has(#container.member_modify) .modal .pop_content.content-form section > ul > li > .title {
            /* 레거시 flex: 0 0 175px. 행을 column 으로 바꾸면 그 175 가
               높이로 읽혀 라벨과 입력 사이가 벌어진다. 반드시 푼다.
               margin-top: 1.15rem 도 같이 푼다 — 간격은 ul 의 gap 이 정한다. */
            flex: none;
            width: auto;
            min-height: 0;
            margin: 0;
            padding: 0;
            font-size: 14px;
            font-weight: 600;
            line-height: 1.4;
            text-align: left;
            color: var(--mc-ink, #0b1220);
        }

            /* 필수 표시를 라벨 뒤 오른쪽 위로. components.css 가 본문에
               해 두는 것과 같은 값이다(그 규칙은 #container 안만 본다). */
            body:has(#container.member_modify) .modal .pop_content.content-form section > ul > li > .title.asterisk::before {
                content: none;
            }

            body:has(#container.member_modify) .modal .pop_content.content-form section > ul > li > .title.asterisk::after {
                content: "⁎";
                margin-left: 3px;
                color: tomato;
                font-size: .8em;
                vertical-align: super;
            }

        body:has(#container.member_modify) .modal .pop_content.content-form section > ul > li > .inputs {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 8px;
            flex: none;
            width: auto;
            max-width: none;
            margin: 0;
            padding: 0;
        }

            /* 한 줄에 여럿이면 남은 자리를 나눠 갖는다.
               사업자등록번호 칸에는 style="width:70px" 같은 인라인 폭이
               박혀 있는데, flex-basis 0 이 주축 크기를 정하므로 무시된다. */
            body:has(#container.member_modify) .modal .pop_content.content-form .inputs > input,
            body:has(#container.member_modify) .modal .pop_content.content-form .inputs > select,
            body:has(#container.member_modify) .modal .pop_content.content-form .inputs .row > input,
            body:has(#container.member_modify) .modal .pop_content.content-form .inputs .row > select {
                flex: 1 1 0;
                width: auto;
                min-width: 0;
            }

            body:has(#container.member_modify) .modal .pop_content.content-form .inputs > .row {
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                gap: 8px;
                flex: 1 1 100%;
                min-width: 0;
            }

            /* 사이의 '-' 와 '@' 는 줄을 만들지 않는다 */
            body:has(#container.member_modify) .modal .pop_content.content-form .inputs .row > span {
                display: flex;
                align-items: center;
                flex: 0 0 auto;
                color: var(--mc-muted, #7c87a0);
            }

            body:has(#container.member_modify) .modal .pop_content.content-form .inputs .selectbox {
                flex: 0 0 auto;
            }

            /* 오류 문구는 제 줄을 쓴다 */
            body:has(#container.member_modify) .modal .pop_content.content-form .inputs > small {
                flex: 1 1 100%;
            }

            body:has(#container.member_modify) .modal .pop_content.content-form .inputs > small:empty {
                display: none;
            }

/* ---- 줄 안 버튼(우편번호 찾기) ----
   레거시는 검정 사각형이라 같은 모달 안에서 혼자 검다.
   한때 연한 청회색 면(--mc-tint) + 잉크 글자로 뒀는데, 이 면은 이 화면에서
   '비활성' 을 뜻한다(components.css 의 readonly·disabled 배경). 바로 옆
   우편번호 칸이 readonly 라 같은 색이 되어 버튼이 칸처럼 읽혔다.
   본문 회원 정보의 [수정]·[본인 인증](Auth.css .inputs button:not([class]))과
   같은 채운 회색 #55607a + 흰 글자로 맞춘다. 근거 수치는 그 규칙의 주석에 있다. */
body:has(#container.member_modify) .modal .pop_content.content-form .inputs button:not([class]),
body:has(#container.member_modify) .modal .pop_content.content-form .inputs .row button:not([class]) {
    flex: 0 0 auto;
    height: 48px;
    padding: 0 16px;
    border: 1px solid #55607a;
    border-radius: var(--mc-radius-sm, 10px);
    background: #55607a;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    cursor: pointer;
}

    body:has(#container.member_modify) .modal .pop_content.content-form .inputs button:not([class]):hover,
    body:has(#container.member_modify) .modal .pop_content.content-form .inputs .row button:not([class]):hover {
        border-color: var(--mc-body, #4a5468);
        background: var(--mc-body, #4a5468);
        color: #fff;
    }

/* ---- 안내문 ----
   bundle.css 가 .content-form .caution::before 로 ⓘ 를 left:1rem 에
   절대배치하고 padding-left: 2.75rem 로 자리를 비운다. 위쪽 규칙이 그
   padding 을 덮어 아이콘이 첫 글자에 겹쳤다. */
body:has(#container.member_modify) .modal .pop_content.content-form .caution {
    /* 안내 상자가 세로 flex 라 가장 긴 문단의 max-content 폭을 그대로
       가져간다. 390 에서 절이 326 인데 상자가 450 이 되어 오른쪽이 잘렸다.
       flex 항목의 자동 최소 크기를 풀어야 줄바꿈이 일어난다. */
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding-left: 44px;
    /* 44 를 비우고 나면 줄이 짧아져 '입력해 주세 / 요.' 처럼 낱자로 끊겼다 */
    word-break: keep-all;
}

    body:has(#container.member_modify) .modal .pop_content.content-form .caution p {
        min-width: 0;
    }

@media (max-width: 768px) {

    body:has(#container.member_modify) .modal .pop_content.content-form section > ul {
        gap: 14px;
    }

    /* 서너 자리짜리 칸은 한 줄에 둔다 */
    body:has(#container.member_modify) .modal .pop_content.content-form .inputs .row > input[maxlength="2"],
    body:has(#container.member_modify) .modal .pop_content.content-form .inputs .row > input[maxlength="3"],
    body:has(#container.member_modify) .modal .pop_content.content-form .inputs .row > input[maxlength="4"],
    body:has(#container.member_modify) .modal .pop_content.content-form .inputs .row > input[maxlength="5"] {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
    }

    /* 우편번호 찾기는 한 줄을 다 쓴다 */
    body:has(#container.member_modify) .modal .pop_content.content-form .inputs .row > button:not([class]) {
        flex: 1 1 100%;
    }
}


/* ==========================================================================
   모달 안의 표 — 사업자 정보 수정(#pop_business_modify)

   레거시 tb_style 표에 colgroup 으로 라벨 칸 135px 이 박혀 있다.
   390 실측(고치기 전): 모달 374 안에서 회사명 입력이 오른쪽으로 잘리고,
   사업자 번호 세 칸은 '123 - 45 -' 까지만 한 줄에 들어가 마지막 칸이
   혼자 다음 줄로 떨어지면서 뒤의 '-' 가 허공에 남았다.

   좁은 화면에서는 표를 풀어 라벨 위 / 값 아래로 쌓는다.
   (table-responsive.css 의 카드 접기는 #container 안만 보므로 안 닿는다)
   ========================================================================== */

body:has(#container.member_modify) .modal #pop_business_modify .pop_content .tb_style {
    width: 100%;
    /* 표 자체의 위아래 선. 모달 머리 구분선 바로 아래에 또 그어져
       30px 간격으로 선이 둘 보였다. 머리와 버튼줄이 이미 틀을 만든다. */
    border-top: 0;
    border-bottom: 0;
}

    /* 회사명 칸만 258px 이라 아래 사업자 번호 줄과 오른쪽 끝이 안 맞았다 */
    body:has(#container.member_modify) .modal #pop_business_modify .pop_content td input[type=text] {
        width: 100%;
    }

body:has(#container.member_modify) .modal #pop_business_modify .inp_tel_wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

    body:has(#container.member_modify) .modal #pop_business_modify .inp_tel_wrap > input {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
    }

    /* 오류 문구는 제 줄을 쓴다 */
    body:has(#container.member_modify) .modal #pop_business_modify .inp_tel_wrap > .message_txt {
        flex: 1 1 100%;
        margin: 0;
    }

@media (max-width: 768px) {

    body:has(#container.member_modify) .modal #pop_business_modify .pop_content :is(table, tbody, tr, th, td) {
        display: block;
        width: auto;
    }

    body:has(#container.member_modify) .modal #pop_business_modify .pop_content th {
        padding: 0 0 6px;
        border: 0;
        background: none;
        font-size: 14px;
        font-weight: 600;
        line-height: 1.4;
        text-align: left;
        color: var(--mc-ink, #0b1220);
    }

    body:has(#container.member_modify) .modal #pop_business_modify .pop_content td {
        padding: 0 0 14px;
        border: 0;
    }

        body:has(#container.member_modify) .modal #pop_business_modify .pop_content tr:last-child td {
            padding-bottom: 0;
        }
}


/* ==========================================================================
   스크롤 상자는 하나만

   세금계산서 정보 관리 모달에서 스크롤바가 둘 보였다. 1440x1100 실측
     .modal_popup   max-height calc(100dvh - 80px) = 1020, 내용 1029  -> 9px
     .pop_content   max-height 80vh = 880, 내용 1042                 -> 162px
   바깥은 9px 밖에 안 움직이는데도 막대가 생기고, 두 막대 중 어느 것을
   끌어야 아래 내용이 나오는지 알 수 없었다.
     바깥  css/common/modal.css (이 파일, 리뉴얼)
     안쪽  Content/css/css.css 의 .modal .pop_content (레거시)

   안쪽 하나만 남긴다. 머리글과 버튼줄이 제자리에 남아 '저장' 을 찾아
   내려갈 필요가 없다는 점에서도 이쪽이 낫다.
   팝업을 세로 flex 로 세우고 가운데 칸(.pop_content)만 늘어나게 한다.
   min-height: 0 을 빠뜨리면 flex 항목의 자동 최소 크기 때문에 안 줄어든다.
   ========================================================================== */

:is(body:has(#container:is(.service_history, .pay_processing, .coupon, .relax_policy,

                       .member_modify, .withdraw_info, .pay_finish, .payment,

                       .recommend, .withdraw, .faq, .notice, .inquiry, .terms,

                       .login_wrap, .content-sign-up, .sign_in, .account_find)) .modal, .modal:has(> #pop_inquiry_finish_simple)) .modal_popup {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

    /* 폼이 한 겹 더 있는 모달(세금계산서·사업자 정보)도 같이 세운다 */
    :is(body:has(#container:is(.service_history, .pay_processing, .coupon, .relax_policy,

                       .member_modify, .withdraw_info, .pay_finish, .payment,

                       .recommend, .withdraw, .faq, .notice, .inquiry, .terms,

                       .login_wrap, .content-sign-up, .sign_in, .account_find)) .modal, .modal:has(> #pop_inquiry_finish_simple)) .modal_popup > form {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
    }

    :is(body:has(#container:is(.service_history, .pay_processing, .coupon, .relax_policy,

                       .member_modify, .withdraw_info, .pay_finish, .payment,

                       .recommend, .withdraw, .faq, .notice, .inquiry, .terms,

                       .login_wrap, .content-sign-up, .sign_in, .account_find)) .modal, .modal:has(> #pop_inquiry_finish_simple)) .modal_popup :is(.pop_header, .pop_footer) {
        flex: 0 0 auto;
    }

    :is(body:has(#container:is(.service_history, .pay_processing, .coupon, .relax_policy,

                       .member_modify, .withdraw_info, .pay_finish, .payment,

                       .recommend, .withdraw, .faq, .notice, .inquiry, .terms,

                       .login_wrap, .content-sign-up, .sign_in, .account_find)) .modal, .modal:has(> #pop_inquiry_finish_simple)) .modal_popup .pop_content {
        flex: 1 1 auto;
        min-height: 0;
        /* 레거시 80vh. 이제 남는 자리가 높이를 정한다. */
        max-height: none;
        overflow-y: auto;
    }


/* ==========================================================================
   모달은 맨 위 층이다

   레거시 .modal { z-index: 2000 } 인데 오른쪽 플로팅 묶음
   (.quick_menu — 광고상담 · TOP)이 10002 다. 그래서 모달을 열어도
   두 버튼이 팝업 위로 겹쳐 떴고, 딤조차 그 아래에 깔렸다.
   모바일에서는 팝업이 화면을 거의 다 쓰므로 바로 눈에 띈다.
   (390x844 실측: 광고상담 270,726 · TOP 330,784 — 둘 다 팝업 영역 안)

   이 사이트에서 가장 높은 값이 10004(홈 검색 오버레이)다. 그보다 위에 둔다.
   ========================================================================== */
:is(body:has(#container:is(.service_history, .pay_processing, .coupon, .relax_policy,

                       .member_modify, .withdraw_info, .pay_finish, .payment,

                       .recommend, .withdraw, .faq, .notice, .inquiry, .terms,

                       .login_wrap, .content-sign-up, .sign_in, .account_find)) .modal, .modal:has(> #pop_inquiry_finish_simple)) {
    z-index: 10050;
}

/* --------------------------------------------------------------------------
   팝업이 열려 있는 동안 뒤 화면을 잠근다 (모든 화면)

   modal_open 은 .modal 에 style="display: block;" 을, modal_close 는 "display: none;" 을 붙일 뿐
   페이지 스크롤은 건드리지 않아, 팝업을 띄운 채 뒤 화면이 계속 스크롤됐다
   (메인 1440 실측: 팝업 연 채 휠 한 번에 500px 이동). common.js 는 손대지 않고
   그 표시를 보고 잠근다. 스크롤바 자리는 남겨 PC 에서 화면이 옆으로 튀지 않게 한다.
   닫으면 표시가 display: none 으로 바뀌어 잠금이 풀리고, 스크롤 위치는 그대로다.
   잠금은 body 에만 건다. html 에도 overflow:hidden 을 주면 body 의 overflow 가 화면(viewport)으로
   올라가지 않게 되어, 광고대행 · 비밀번호 찾기에서 여는 순간 뒤 화면이 맨 위로 튀었다(300 → 0).
   -------------------------------------------------------------------------- */
html:has(body .modal:is([style*="display: block"], [style*="display:block"])) {
    scrollbar-gutter: stable;
}

    html:has(body .modal:is([style*="display: block"], [style*="display:block"])) body {
        overflow: hidden;
    }