/* ==========================================================================
   공통 컴포넌트 디자인 — 폼 컨트롤 · 버튼 · 안내문 · 소제목 · 페이징

   결제내역에 입힌 디자인 언어를 대상 51개 화면에 공통으로 적용한다.
   화면마다 CSS 를 쓰면 같은 부품이 갈라지므로 부품 단위로 한 곳에 모은다.

   반응형(page-chrome.css)과 나누어 둔 이유
     page-chrome 은 레이아웃(기준선·리듬·탭·표 구조)을 다룬다.
     이 파일은 생김새만 다룬다. 미디어쿼리 밖에 있어 데스크톱에도 적용된다.

   스코프
     대상 화면의 컨테이너 클래스만 :is() 로 묶는다.
     .btn / input / .caution 같은 클래스는 리디자인 제외 영역(광고 상품 소개,
     솔루션 소개)에서도 널리 쓰기 때문에 전역에 걸 수 없다.

   토큰은 css/common/tokens.css 를 따른다.
   기능은 건드리지 않는다. 마크업·스크립트는 그대로 두고 표시만 덮는다.
   ========================================================================== */

/* ---- 폼 컨트롤 ----
   .terms 는 page-chrome.css 의 폭 제한 규칙에는 들어 있는데 여기만 빠져 있었다.
   같은 화면을 대상으로 보면서 목록이 어긋나, 약관 화면의 셀렉트 하나가
   레거시(34h · r0 · 선 #bfbfbf)로 남아 있었다. 두 목록을 맞춘다. */
#container:is(.service_history, .pay_processing, .coupon, .relax_policy, .member_modify,
               .withdraw_info, .pay_finish, .payment, .recommend, .withdraw,
               .faq, .notice, .inquiry, .terms):not(.blog) :is(input[type=text], input[type=password],
                                             input[type=email], input[type=tel],
                                             input[type=number], input[type=date],
                                             input[type=search], select, textarea) {
    height: 48px;
    padding: 0 14px;
    border: 1px solid var(--mc-border, #e7ebf5);
    border-radius: var(--mc-radius-sm, 10px);
    /* background 단축을 쓰면 select 의 화살표 배경 이미지가 지워진다.
       (.select_wrap select { background: url(bg_selectbox_arrow.png) right center }) */
    background-color: var(--mc-surface, #fff);
    box-sizing: border-box;
    font-family: inherit;
    font-size: 14px;
    color: var(--mc-ink, #0b1220);
    transition: border-color .15s ease, box-shadow .15s ease;
}

#container:is(.service_history, .pay_processing, .coupon, .relax_policy, .member_modify,
               .withdraw_info, .pay_finish, .payment, .recommend, .withdraw,
               .faq, .notice, .inquiry):not(.blog) textarea {
    height: auto;
    min-height: 120px;
    padding: 12px 14px;
    line-height: 1.6;
}

#container:is(.service_history, .pay_processing, .coupon, .relax_policy, .member_modify,
               .withdraw_info, .pay_finish, .payment, .recommend, .withdraw,
               .faq, .notice, .inquiry):not(.blog) :is(input, select, textarea):focus {
    outline: 0;
    border-color: var(--mc-blue, #2b5bff);
    box-shadow: 0 0 0 3px rgba(43, 91, 255, .12);
}

#container:is(.service_history, .pay_processing, .coupon, .relax_policy, .member_modify,
               .withdraw_info, .pay_finish, .payment, .recommend, .withdraw,
               .faq, .notice, .inquiry):not(.blog) input::placeholder {
    color: #a8b2c6;
}

/* 읽기 전용·비활성은 배경으로 구분한다 */
#container:is(.service_history, .pay_processing, .coupon, .relax_policy, .member_modify,
               .withdraw_info, .pay_finish, .payment, .recommend, .withdraw,
               .faq, .notice, .inquiry):not(.blog) :is(input[readonly], input:disabled, select:disabled) {
    background-color: var(--mc-tint, #f4f7fe);
    color: var(--mc-body, #4a5468);
}

/* select 은 우측 화살표 이미지가 있어 글자가 겹치지 않게 자리를 비운다.
   select:not([multiple]) 인 이유 — 위 공통 입력 규칙은 :is(input[type=text], …)
   때문에 특이도가 (1,3,1) 이라 맨 select(1,2,1) 인 이 규칙을 이겨 padding: 0 14px 가
   padding-right: 34px 를 덮었다. 글자가 화살표 밑으로 들어갔다(회원정보수정 이메일
   도메인 'naver.com' 실측). 속성 선택자 하나로 특이도를 맞추면 뒤에 오는 이쪽이 이긴다. */
#container:is(.service_history, .pay_processing, .coupon, .relax_policy, .member_modify,
               .withdraw_info, .pay_finish, .payment, .recommend, .withdraw,
               .faq, .notice, .inquiry, .terms):not(.blog) select:not([multiple]) {
    /* 래퍼가 있든 없든 같은 화살표를 쓴다.
       레거시 PNG(.select_wrap select)는 래퍼가 있는 곳에만 있어서
       래퍼 없는 select 은 화살표가 없었다. */
    padding-right: 34px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.6L6 6.4L11 1.6' fill='none' stroke='%237c87a0' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px 8px;
}

/* 래퍼(.selectbox)가 있는 select 는 레거시 bundle.css 의 .selectbox::before(검은 꺾쇠)가
   위 SVG 화살표와 같은 자리에 겹쳐 화살표가 두 개로 보였다(회원정보수정 이메일 도메인).
   화살표는 위 한 벌로 통일하고 래퍼 장식은 지운다. */
#container:is(.service_history, .pay_processing, .coupon, .relax_policy, .member_modify,
               .withdraw_info, .pay_finish, .payment, .recommend, .withdraw,
               .faq, .notice, .inquiry, .terms):not(.blog) .selectbox::before {
    display: none;
}

/* ==========================================================================
   레거시 장식 리셋

   새 스타일을 덧입히기 전에 레거시 장식을 지워야 한다. 지우지 않으면
   테두리·알약이 두 겹으로 겹쳐 보인다(사용자 보고: 탭 버튼이 기존 것과 겹침).
   ========================================================================== */

/* 상단 탭 — 래퍼(.content_tab)와 내 ul 이 각각 아래 선을 그어 두 줄이 된다.
   레거시: .sub_content_except .content_tab { border-bottom: 1px solid #dcdcdc } */
#container:is(.service_history, .pay_processing, .coupon, .relax_policy, .member_modify,
               .withdraw_info, .pay_finish, .payment, .recommend, .withdraw,
               .faq, .notice, .inquiry):not(.blog) .content_tab {
    margin-top: 0;
    border-bottom: 0;
}

    #container:is(.service_history, .pay_processing, .coupon, .relax_policy, .member_modify,
               .withdraw_info, .pay_finish, .payment, .recommend, .withdraw,
               .faq, .notice, .inquiry):not(.blog) .content_tab ul {
        width: auto;
    }

    #container:is(.service_history, .pay_processing, .coupon, .relax_policy, .member_modify,
               .withdraw_info, .pay_finish, .payment, .recommend, .withdraw,
               .faq, .notice, .inquiry):not(.blog) .content_tab ul li {
        float: none;
        width: auto;
    }

/* 서브 탭 — 레거시는 li 에 알약을 그리고 li.on 에는 회색 사각형까지 깐다.
   .bulletin_tab ul li     { height:45px; min-width:140px; border:1px solid #787878;
                             border-radius:22px; float:left; margin-left:16px }
   .bulletin_tab ul li.on  { background:#515151 }
   나는 a 에 알약을 그리므로 li 쪽 장식을 전부 지운다.
   li 배경을 남기면 알약 네 귀퉁이로 사각형이 삐져나온다. */
#container:not(.blog) .bulletin_tab ul li {
    float: none;
    min-width: 0;
    height: auto;
    margin-left: 0;
    border: 0;
    border-radius: 0;
    background: none;
}

/* ---- 버튼 ----
   레거시 변형은 second(46) / point(12) / line(6) / light(5) / btn_r(35) 이 대부분이다.
   point 와 btn_r 을 주 버튼, second 를 보조, line·light 를 외곽선으로 정리한다. */
#container:is(.service_history, .pay_processing, .coupon, .relax_policy, .member_modify,
               .withdraw_info, .pay_finish, .payment, .recommend, .withdraw,
               .faq, .notice, .inquiry):not(.blog) :is(.btn, .btn_r, .btn_ok,
                                             .btn_extend) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 22px;
    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, background .15s ease;
}

    /* 주 버튼
       .fin 은 레거시에서 이미 키컬러 340x60 알약이었다(.btn_r.fin).
       주 버튼 목록에 넣지 않으면 위의 기본 규칙(흰 배경 + 투명 테두리)이
       특정도로 이겨서 흰 화면에 흰 버튼이 된다. 결제하기 [신규서비스 신청] 이 그랬다. */
    #container:is(.service_history, .pay_processing, .coupon, .relax_policy, .member_modify,
                   .withdraw_info, .pay_finish, .payment, .recommend, .withdraw,
                   .faq, .notice, .inquiry):not(.blog) :is(.btn.point, .btn_r.point, .btn.full, .btn_ok,
                                                 .btn.fin, .btn_r.fin) {
        border-color: transparent;
        background: var(--mc-cta, #111);
        color: #fff;
        box-shadow: 0 12px 24px -14px rgba(16, 24, 48, .5);
    }

    /* 보조 버튼 */
    #container:is(.service_history, .pay_processing, .coupon, .relax_policy, .member_modify,
                   .withdraw_info, .pay_finish, .payment, .recommend, .withdraw,
                   .faq, .notice, .inquiry):not(.blog) .btn.second {
        border-color: var(--mc-border, #e7ebf5);
        background: var(--mc-tint, #f4f7fe);
        color: var(--mc-ink, #0b1220);
    }

    /* 외곽선 버튼 */
    #container:is(.service_history, .pay_processing, .coupon, .relax_policy, .member_modify,
                   .withdraw_info, .pay_finish, .payment, .recommend, .withdraw,
                   .faq, .notice, .inquiry):not(.blog) :is(.btn.line, .btn.light, .btn.basic) {
        border-color: var(--mc-border, #e7ebf5);
        background: var(--mc-surface, #fff);
        color: var(--mc-body, #4a5468);
    }

    #container:is(.service_history, .pay_processing, .coupon, .relax_policy, .member_modify,
                   .withdraw_info, .pay_finish, .payment, .recommend, .withdraw,
                   .faq, .notice, .inquiry):not(.blog) :is(.btn, .btn_r, .btn_ok,
                                                 .btn_extend):hover {
        filter: brightness(.98);
    }

/* .fin 은 레거시가 width:340px / height:60px / line-height:59px 로 못박는다.
   좁은 폭에서 넘치고, inline-flex 로 바뀌면 line-height 가 글자를 아래로 밀어낸다. */
#container:is(.service_history, .pay_processing, .coupon, .relax_policy, .member_modify,
                   .withdraw_info, .pay_finish, .payment, .recommend, .withdraw,
                   .faq, .notice, .inquiry):not(.blog) :is(.btn.fin, .btn_r.fin) {
    display: flex;
    width: 100%;
    max-width: 340px;
    height: auto;
    min-height: 56px;
    margin: 0 auto;
    border-radius: var(--mc-radius-sm, 10px);
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
}

/* 검색 버튼은 배경에 돋보기 아이콘 이미지가 들어 있다
   (.search_wrap .btn_search { background: #3caaf5 url(ico_button_search.png) }).
   background 를 덮으면 아이콘이 사라져 빈 버튼이 되므로 치수와 모서리만 맞춘다. */
#container:is(.service_history, .pay_processing, .coupon, .relax_policy, .member_modify,
               .withdraw_info, .pay_finish, .payment, .recommend, .withdraw,
               .faq, .notice, .inquiry):not(.blog) .btn_search {
    width: 52px;
    height: 48px;
    border: 0;
    border-radius: var(--mc-radius-sm, 10px);
    /* 아이콘은 레거시 background-image 를 그대로 쓰고 색만 바꾼다.
       background 단축을 쓰면 아이콘이 사라진다. */
    background-color: var(--mc-blue, #2b5bff);
    background-position: 50% 50%;
    background-repeat: no-repeat;
    cursor: pointer;
    transition: filter .15s ease;
}

    #container:is(.service_history, .pay_processing, .coupon, .relax_policy, .member_modify,
               .withdraw_info, .pay_finish, .payment, .recommend, .withdraw,
               .faq, .notice, .inquiry):not(.blog) .btn_search:hover {
        filter: brightness(1.08);
    }

/* 검색 입력 + 버튼은 한 덩어리로 붙인다.
   레거시는 둘을 그냥 나란히 두어 사이가 벌어져 있었다. */
#container:is(.service_history, .pay_processing, .coupon, .relax_policy, .member_modify,
               .withdraw_info, .pay_finish, .payment, .recommend, .withdraw,
               .faq, .notice, .inquiry):not(.blog) :is(.search_wrap, .sch_wrap) {
    display: flex;
    align-items: center;
    gap: 8px;
}

    #container:is(.service_history, .pay_processing, .coupon, .relax_policy, .member_modify,
               .withdraw_info, .pay_finish, .payment, .recommend, .withdraw,
               .faq, .notice, .inquiry):not(.blog) :is(.search_wrap, .sch_wrap) > input[type=text] {
        flex: 1 1 auto;
        min-width: 0;
    }

/* 표 안 컨트롤의 음수 마진 해제.
   레거시: .tb_style .btn { height:34px; margin:-5px 0 }
           .tb_style input[type=text] { width:260px; margin:-5px 0 }
           .tb_style .select_wrap  { margin:-5px 0 }
           .tb_style textarea      { margin:-5px 0 -10px }
   34px 짜리를 셀 padding 에 맞추려던 보정이다. 48px 로 올린 지금은
   그만큼 아래 문구를 파고든다. 간격은 셀 padding 하나로만 잡는다. */
#container:is(.service_history, .pay_processing, .coupon, .relax_policy, .member_modify,
               .withdraw_info, .pay_finish, .payment, .recommend, .withdraw,
               .faq, .notice, .inquiry):not(.blog) .tb_style :is(.btn, .btn_r, .btn_ok, .select_wrap, textarea,
                                              input[type=text], input[type=password],
                                              input[type=tel], input[type=number]) {
    margin-top: 0;
    margin-bottom: 0;
}

/* 다만 버튼은 한 칸에 둘 이상 올 수 있다(결제 칸의 기간 연장 + 업그레이드).
   인라인 요소라 줄바꿈만 되고 사이가 0 이어서 두 버튼이 맞붙어 한 덩어리로
   보였다(1440 실측: 26+26 이 831~883 에 빈틈 없이). 위아래 좌우로 조금 띄운다.
   위 규칙과 특이도가 같아야 하므로 선택자를 그대로 쓰고 뒤에 둔다. */
#container:is(.service_history, .pay_processing, .coupon, .relax_policy, .member_modify,
               .withdraw_info, .pay_finish, .payment, .recommend, .withdraw,
               .faq, .notice, .inquiry):not(.blog) .tb_style :is(.btn, .btn_r, .btn_ok, .btn_extend,
                                              input[type=submit], input[type=button]) {
    margin: 2px;
}

/* 컨트롤 다음에 오는 안내문은 한 줄 띄운다 */
#container:is(.service_history, .pay_processing, .coupon, .relax_policy, .member_modify,
               .withdraw_info, .pay_finish, .payment, .recommend, .withdraw,
               .faq, .notice, .inquiry):not(.blog) .tb_style :is(td, th) > :is(.note, .caution) {
    margin-top: 8px;
}

/* ---- 안내문 ----
   .caution 은 14곳, .note 는 14곳, .con_txt 는 20곳에서 쓴다.

   2026-09-10  스코프를 컨테이너 허용목록에서 #container:not(.blog) 로 넓혔다.
   허용목록 밖에서 .caution 이 실제로 그려지는 화면을 전수로 세어 보니 여섯이고
   (open_market 4 + service_fee 1 + solution_intro 1) 전부 같은 역할이었다.
     1280px 실측 (넓히기 전)
       open_market 4개    14px / slategray / 회색 10% 배경 / 테두리 없음 / pad 12
       TrendServiceFee    14px / slategray / 흰 배경        / pad 32
       허용목록 안        14px / --mc-body  / --mc-tint     / 테두리 1px / pad 14,16
   같은 문구가 화면마다 다르게 보일 이유가 없어서 하나로 모은다.
   .note 는 레거시 css.css 가 color 를 !important 로 박아 두어 색은 이미
   전역이 같다. 크기만 갈렸다(Auth 12.5 / 여기 13). 13 으로 맞춘다. */
#container:not(.blog) .caution {
    padding: 14px 16px;
    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.65;
    color: var(--mc-body, #4a5468);
}

    #container:not(.blog) .caution :is(p, li) {
        margin: 0;
    }

        #container:not(.blog) .caution :is(p, li) + :is(p, li) {
            margin-top: 4px;
        }

/* .caution.exclamation 은 레거시가 ⓘ 아이콘을 left:1rem 절대배치로 넣고
   글자 자리를 padding-left:2.75rem 로 비워 둔다.
   위에서 padding 을 통째로 덮었더니 아이콘이 첫 글자에 겹쳤다. */
#container:not(.blog) .caution.exclamation {
    padding-left: 44px;
}

/* .content-form 의 .caution 도 같은 ⓘ 를 left:1rem 에 절대배치한다
   (bundle.css: .content-form .caution::before). 이쪽은 .exclamation 클래스가
   없어 위 규칙에 안 걸렸고, 위에서 padding 을 통째로 덮은 탓에 아이콘이
   첫 글자 위에 겹쳤다(회원정보수정 '서비스의 원활한…' 실측). */
#container.content-form .caution,
#container .content-form .caution {
    padding-left: 44px;
}

/* 작은 보조 설명 */
#container:not(.blog) .note {
    font-size: 12px;
    line-height: 1.6;
    color: var(--mc-muted, #7c87a0);
}

/* .warn — 레거시는 색만 준다(color:$c-warn-line).
   h3.sub_title.warn 처럼 한 덩어리 안내로 쓰는 자리에서는 문장이 그냥 떠 있어
   안내인지 제목인지 구분이 안 됐다. 경고 박스로 만든다. */
#container:is(.service_history, .pay_processing, .coupon, .relax_policy, .member_modify,
               .withdraw_info, .pay_finish, .payment, .recommend, .withdraw,
               .faq, .notice, .inquiry):not(.blog) :is(h3, h4, p, div).warn {
    display: block;
    margin: 0 0 var(--mc-rhythm-sm, 12px);
    padding: 13px 15px;
    border: 1px solid rgba(229, 72, 77, .22);
    border-radius: var(--mc-radius-sm, 10px);
    background: rgba(229, 72, 77, .06);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.6;
    color: #c0343a;
}

    #container:is(.service_history, .pay_processing, .coupon, .relax_policy, .member_modify,
               .withdraw_info, .pay_finish, .payment, .recommend, .withdraw,
               .faq, .notice, .inquiry):not(.blog) :is(h3, h4, p, div).warn strong {
        font-weight: 700;
        color: inherit;
    }

/* 문장 안에 끼는 .warn (span) 은 색 강조만 유지한다 */
#container:is(.service_history, .pay_processing, .coupon, .relax_policy, .member_modify,
               .withdraw_info, .pay_finish, .payment, .recommend, .withdraw,
               .faq, .notice, .inquiry):not(.blog) span.warn {
    font-weight: 600;
    color: #c0343a;
}

/* .into_txt — 레거시에 규칙이 없어 본문과 똑같이 보였다. 보조 설명으로 낮춘다. */
#container:is(.service_history, .pay_processing, .coupon, .relax_policy, .member_modify,
               .withdraw_info, .pay_finish, .payment, .recommend, .withdraw,
               .faq, .notice, .inquiry):not(.blog) .into_txt {
    display: inline-block;
    font-size: 12px;
    line-height: 1.6;
    color: var(--mc-muted, #7c87a0);
}

/* 항목 목록. 레거시는 line-height:120% 로 아주 좁다.
   쿠폰 안내(4줄) 와 약관 조문(파일당 8~9개)이 같은 클래스를 쓴다.
   줄 간격을 읽을 수 있게 벌린다.

   크기도 여기서 정한다. 앞서는 "크기·색은 그대로" 두었는데, 그래서
   아무도 정하지 않은 브라우저 기본값 16px 이 그대로 나왔다.
   쿠폰 관리 실측(PC·모바일 동일):
     제목 20 / 본문 설명 15 / 입력 안내 ※ 13 / 하단 안내 ※ 16
   각주가 본문보다 크고, 같은 화면 같은 ※ 문구끼리 13 과 16 으로
   3px 벌어져 있었다. 본문(15) 아래 한 눈금인 14 로 내린다.
   색도 --mc-muted 로 모은다(레거시 #7f8d9e 와 입력 안내 #7c87a0 이
   미묘하게 달랐다).

   .terms(약관) 는 이 선택자 목록에 없다. 조문 본문이라 16 을 유지한다. */
#container:is(.service_history, .pay_processing, .coupon, .relax_policy, .member_modify,
               .withdraw_info, .pay_finish, .payment, .recommend, .withdraw,
               .faq, .notice, .inquiry):not(.blog) .list_style > li,
#container:is(.service_history, .pay_processing, .coupon, .relax_policy, .member_modify,
               .withdraw_info, .pay_finish, .payment, .recommend, .withdraw,
               .faq, .notice, .inquiry):not(.blog) .list_style dd {
    padding: 3px 0;
    font-size: 14px;
    line-height: 1.7;
    color: var(--mc-muted, #7c87a0);
}

/* ---- 소제목 · 본문 ---- */
#container:is(.service_history, .pay_processing, .coupon, .relax_policy, .member_modify,
               .withdraw_info, .pay_finish, .payment, .recommend, .withdraw,
               .faq, .notice, .inquiry, .terms):not(.blog):not(.pcx) :is(.con_title, .section_title) {
    margin-bottom: 10px;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--mc-ink, #0b1220);
}

/* .pcx(결제 선택)는 :not(.pcx) 로 스코프에서 뺐다.
   자체 계단이 완결돼 있다: 페이지 제목 30/800 · 카드 제목 17/700 ·
   요약 16/700 · 힌트 13. 카드 제목만 20 으로 올리면 그 화면 안에서
   제목들이 서로 어긋난다. 한 화면 안의 일관성이 더 중요하다.
   (@layer 를 안 쓰므로 revert-layer 로는 안 된다. 그건 레거시 값으로 되돌아간다) */

/* 소제목. 레거시 .sub_title 은 22px 인데 섹션 제목(20)보다 커서
   계단이 뒤집혀 있었다(약관에서 제1조 제목이 제1장 제목보다 커 보였다). */
#container:is(.service_history, .pay_processing, .coupon, .relax_policy, .member_modify,
               .withdraw_info, .pay_finish, .payment, .recommend, .withdraw,
               .faq, .notice, .inquiry, .terms):not(.blog):not(.pcx) .sub_title {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--mc-ink, #0b1220);
}


#container:is(.service_history, .pay_processing, .coupon, .relax_policy, .member_modify,
               .withdraw_info, .pay_finish, .payment, .recommend, .withdraw,
               .faq, .notice, .inquiry):not(.blog) :is(.con_text, .con_txt) {
    font-size: 14px;
    line-height: 1.7;
    color: var(--mc-body, #4a5468);
}

/* ---- 페이징 ----
   Content/PagedList.css 가 li 에 float:left; margin-left:17px 을 주고
   처음/이전/다음/마지막은 스프라이트 PNG 를 background-position 으로 잘라 쓴다.
   숫자는 사각형, 화살표는 회색 동그라미로 모양이 두 가지였고
   .PagedList-skipToFirst a { margin-right:-13px } 류의 음수 마진 때문에
   화살표가 숫자보다 위로 떠 있었다. 전부 걷고 한 칸 규격으로 맞춘다. */
#container:is(.service_history, .pay_processing, .coupon, .relax_policy, .member_modify,
               .withdraw_info, .pay_finish, .payment, .recommend, .withdraw,
               .faq, .notice, .inquiry):not(.blog) :is(.pagination, .PagedList-pager) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 4px;
    /* 레거시는 display:table + margin auto 다. flex 로 덮으면서 폭도 되돌린다. */
    width: auto;
    margin: var(--mc-rhythm, 24px) auto 0;
    padding: 0;
    list-style: none;
}

    #container:is(.service_history, .pay_processing, .coupon, .relax_policy, .member_modify,
               .withdraw_info, .pay_finish, .payment, .recommend, .withdraw,
               .faq, .notice, .inquiry):not(.blog) :is(.pagination, .PagedList-pager) > li {
        /* li 마다 line-height 가 달라 화살표가 숫자보다 2px 위였다.
           칸을 flex 로 만들어 세로 축을 하나로 맞춘다. */
        display: flex;
        align-items: center;
        float: none;
        margin: 0;
    }

    #container:is(.service_history, .pay_processing, .coupon, .relax_policy, .member_modify,
               .withdraw_info, .pay_finish, .payment, .recommend, .withdraw,
               .faq, .notice, .inquiry):not(.blog) :is(.pagination, .PagedList-pager) :is(a, span) {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        /* iOS 44 기준. 40 은 4px 미달이다
           (실측: 공지사항에서 40x40 페이징이 14개).
           page-chrome 에도 같은 규칙이 있지만 이 파일이 나중에 로드돼 이긴다. */
        min-width: 44px;
        min-height: 44px;
        margin: 0;
        padding: 0 6px;
        border: 1px solid transparent;
        border-radius: var(--mc-radius-sm, 10px);
        font-size: 14px;
        font-weight: 500;
        line-height: 1;
        color: var(--mc-body, #4a5468);
        text-decoration: none;
        transition: background .12s ease, border-color .12s ease, color .12s ease;
    }

        /* 레거시 a:hover 는 border-bottom 한 줄만 긋는다 */
        #container:is(.service_history, .pay_processing, .coupon, .relax_policy, .member_modify,
               .withdraw_info, .pay_finish, .payment, .recommend, .withdraw,
               .faq, .notice, .inquiry):not(.blog) :is(.pagination, .PagedList-pager) a:hover {
            border-color: var(--mc-border, #e7ebf5);
            background: var(--mc-tint, #f4f7fe);
            text-decoration: none;
        }

    /* 현재 페이지 */
    #container:is(.service_history, .pay_processing, .coupon, .relax_policy, .member_modify,
               .withdraw_info, .pay_finish, .payment, .recommend, .withdraw,
               .faq, .notice, .inquiry):not(.blog) :is(.pagination, .PagedList-pager) .active :is(a, span) {
        border-color: transparent;
        background: var(--mc-blue, #2b5bff);
        color: #fff;
        font-weight: 700;
    }

    /* 생략 표시(...) 는 칸만 차지하고 눌리지 않는다 */
    #container:is(.service_history, .pay_processing, .coupon, .relax_policy, .member_modify,
               .withdraw_info, .pay_finish, .payment, .recommend, .withdraw,
               .faq, .notice, .inquiry):not(.blog) :is(.pagination, .PagedList-pager) .PagedList-ellipses span {
        border-color: transparent;
        color: var(--mc-muted, #7c87a0);
    }

/* 처음 / 이전 / 다음 / 마지막 — 스프라이트를 걷고 꺾쇠를 그린다 */
#container:is(.service_history, .pay_processing, .coupon, .relax_policy, .member_modify,
               .withdraw_info, .pay_finish, .payment, .recommend, .withdraw,
               .faq, .notice, .inquiry):not(.blog) :is(.pagination, .PagedList-pager)
    :is(.PagedList-skipToFirst, .PagedList-skipToPrevious,
        .PagedList-skipToNext, .PagedList-skipToLast) :is(a, span) {
    position: relative;
    width: 40px;
    min-width: 44px;
    height: 44px;
    padding: 0;
    /* PNG 스프라이트 제거 */
    background-image: none;
    font-size: 0;
    color: var(--mc-body, #4a5468);
}

    #container:is(.service_history, .pay_processing, .coupon, .relax_policy, .member_modify,
               .withdraw_info, .pay_finish, .payment, .recommend, .withdraw,
               .faq, .notice, .inquiry):not(.blog) :is(.pagination, .PagedList-pager)
        :is(.PagedList-skipToFirst, .PagedList-skipToPrevious,
            .PagedList-skipToNext, .PagedList-skipToLast) :is(a, span)::before,
    #container:is(.service_history, .pay_processing, .coupon, .relax_policy, .member_modify,
               .withdraw_info, .pay_finish, .payment, .recommend, .withdraw,
               .faq, .notice, .inquiry):not(.blog) :is(.pagination, .PagedList-pager)
        :is(.PagedList-skipToFirst, .PagedList-skipToLast) :is(a, span)::after {
        content: "";
        width: 7px;
        height: 7px;
        border-top: 1.7px solid currentColor;
        border-right: 1.7px solid currentColor;
        border-radius: 1px;
        position: absolute;
        top: 50%;
        left: 50%;
        margin: -4px 0 0 -4px;
    }

    /* 왼쪽 방향 */
    #container:is(.service_history, .pay_processing, .coupon, .relax_policy, .member_modify,
               .withdraw_info, .pay_finish, .payment, .recommend, .withdraw,
               .faq, .notice, .inquiry):not(.blog) :is(.pagination, .PagedList-pager)
        :is(.PagedList-skipToFirst, .PagedList-skipToPrevious) :is(a, span)::before,
    #container:is(.service_history, .pay_processing, .coupon, .relax_policy, .member_modify,
               .withdraw_info, .pay_finish, .payment, .recommend, .withdraw,
               .faq, .notice, .inquiry):not(.blog) :is(.pagination, .PagedList-pager)
        .PagedList-skipToFirst :is(a, span)::after {
        transform: rotate(-135deg);
    }

    /* 오른쪽 방향 */
    #container:is(.service_history, .pay_processing, .coupon, .relax_policy, .member_modify,
               .withdraw_info, .pay_finish, .payment, .recommend, .withdraw,
               .faq, .notice, .inquiry):not(.blog) :is(.pagination, .PagedList-pager)
        :is(.PagedList-skipToNext, .PagedList-skipToLast) :is(a, span)::before,
    #container:is(.service_history, .pay_processing, .coupon, .relax_policy, .member_modify,
               .withdraw_info, .pay_finish, .payment, .recommend, .withdraw,
               .faq, .notice, .inquiry):not(.blog) :is(.pagination, .PagedList-pager)
        .PagedList-skipToLast :is(a, span)::after {
        transform: rotate(45deg);
    }

    /* 처음·마지막은 꺾쇠 두 개 */
    #container:is(.service_history, .pay_processing, .coupon, .relax_policy, .member_modify,
               .withdraw_info, .pay_finish, .payment, .recommend, .withdraw,
               .faq, .notice, .inquiry):not(.blog) :is(.pagination, .PagedList-pager)
        :is(.PagedList-skipToFirst, .PagedList-skipToLast) :is(a, span)::before {
        margin-left: -8px;
    }

    #container:is(.service_history, .pay_processing, .coupon, .relax_policy, .member_modify,
               .withdraw_info, .pay_finish, .payment, .recommend, .withdraw,
               .faq, .notice, .inquiry):not(.blog) :is(.pagination, .PagedList-pager)
        :is(.PagedList-skipToFirst, .PagedList-skipToLast) :is(a, span)::after {
        margin-left: -1px;
    }

/* 더 갈 곳이 없는 화살표는 눌리지 않는다는 걸 보여 준다 */
#container:is(.service_history, .pay_processing, .coupon, .relax_policy, .member_modify,
               .withdraw_info, .pay_finish, .payment, .recommend, .withdraw,
               .faq, .notice, .inquiry):not(.blog) :is(.pagination, .PagedList-pager) li.disabled :is(a, span) {
    color: var(--mc-muted, #7c87a0);
    opacity: .4;
    pointer-events: none;
}

/* ==========================================================================
   .content-form 공통 — 클래스 없는 버튼

   회원가입 · 아이디/비밀번호 찾기 · 회원정보수정이 같은 폼 마크업을 쓴다.
   그 안의 버튼은 .btn 클래스가 없는 맨 <button> 이라 위의 버튼 규칙에
   걸리지 않는다. 여기서 한 번에 잡는다.
   ========================================================================== */

/* 줄 안에 들어가는 버튼 (본인 인증 · 우편번호 찾기 · 수정 · 변경하기 등) */
#container.content-form :is(.inputs, .row, td, dd) > button:not([class]) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    height: 48px;
    padding: 0 16px;
    border: 1px solid var(--mc-border, #e7ebf5);
    border-radius: var(--mc-radius-sm, 10px);
    background: var(--mc-tint, #f4f7fe);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    color: var(--mc-ink, #0b1220);
    white-space: nowrap;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease;
}

    #container.content-form :is(.inputs, .row, td, dd) > button:not([class]):hover {
        border-color: var(--mc-blue, #2b5bff);
        color: var(--mc-blue, #2b5bff);
    }

/* 하단 버튼줄 — 마지막이 다음 행동(수정완료 / 가입완료) */
#container.content-form .section-buttons {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: var(--mc-rhythm, 24px);
    padding: 0;
    border: 0;
    background: none;
}

    #container.content-form .section-buttons > button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 160px;
        height: 56px;
        padding: 0 28px;
        border: 1px solid var(--mc-border, #e7ebf5);
        border-radius: var(--mc-radius-sm, 10px);
        background: var(--mc-surface, #fff);
        font-family: inherit;
        font-size: 16px;
        font-weight: 700;
        line-height: 1;
        color: var(--mc-body, #4a5468);
        cursor: pointer;
        transition: filter .15s ease;
    }

        #container.content-form .section-buttons > button:last-child {
            border-color: transparent;
            background: var(--mc-cta, #111);
            color: #fff;
            box-shadow: 0 14px 28px -16px rgba(43, 91, 255, .7);
        }

        #container.content-form .section-buttons > button:hover {
            filter: brightness(.98);
        }

@media (max-width: 768px) {

    #container.content-form .section-buttons {
        flex-direction: column;
    }

        #container.content-form .section-buttons > button {
            width: 100%;
            min-width: 0;
        }
}

/* ==========================================================================
   툴팁

   .tooltip(트리거) > .tooltip-content(패널) 구조. 여는 건 순수 CSS :hover 다
   (.tooltip:hover .tooltip-content { opacity:1; visibility:visible }).
   그 동작은 건드리지 않고 모양만 맞춘다.

   실측 버그: bundle.css 가 body .tooltip-content 에 color:white 를 주고
   .tooltip > .tooltip-content 에서 배경만 #FFF 로 덮는다. p 는
   color:#333 !important 로 구제되지만 dl/dd 를 쓰는 회원가입 툴팁은
   흰 배경에 흰 글자가 된다(실측 dd rgb(255,255,255)).
   ========================================================================== */
#wrap .tooltip {
    display: inline-flex;
    align-items: center;
    /* 레거시 cursor:auto. 올려볼 수 있다는 걸 알려 준다. */
    cursor: help;
}

#wrap .tooltip > .tooltip-content {
    /* 위치. 레거시는 body .tooltip-content 에 top:100% 를 주는데
       .tooltip > .tooltip-content 가 top:-6rem 으로 덮는다.
       -96px 은 트리거에서 멀어 어느 항목의 설명인지 연결이 끊기고
       위쪽 입력 필드를 가린다. 트리거 바로 아래로 붙인다. */
    top: 100%;
    bottom: auto;
    left: 0;
    margin-top: 6px;
    transform: none;
    z-index: 60;
    width: 360px;
    max-width: min(360px, calc(100vw - 32px));
    padding: 12px 14px;
    border: 1px solid var(--mc-border, #e7ebf5);
    border-radius: var(--mc-radius-sm, 10px);
    background: var(--mc-surface, #fff);
    box-shadow: 0 18px 36px -18px rgba(11, 18, 32, .32),
                0 2px 6px rgba(11, 18, 32, .07);
    /* 레거시 font: 12px/1.25 "NanumBarunGothicLight" 단축을 되돌린다 */
    font-family: inherit;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--mc-body, #4a5468);
    text-align: left;
}

    /* p 는 레거시가 color:#333 !important 로 잡고 있어 그대로 둔다.
       구제되지 않는 나머지(dd·dt·li·span·bare text)를 여기서 맞춘다. */
    #wrap .tooltip > .tooltip-content :is(dl, dt, dd, ul, ol, li, span, em, strong) {
        color: var(--mc-body, #4a5468);
    }

    #wrap .tooltip > .tooltip-content :is(dd, li) + :is(dd, li) {
        margin-top: 5px;
    }

    /* 레거시가 small 을 #3caaf6 하늘색으로 준다 */
    #wrap .tooltip > .tooltip-content small {
        font-size: 12px;
        color: var(--mc-blue, #2b5bff);
    }

/* 화살표를 감춘다.
   border-bottom:7px solid #333 로 검정인데 패널은 흰색이고,
   bottom:-0.5rem 에서 위를 가리키는데 패널은 top:-6rem 으로 위에 뜬다.
   방향과 색이 둘 다 안 맞는다. 그림자 있는 카드는 화살표 없이도 읽힌다. */
#wrap .tooltip::after {
    display: none;
}

/* 섹션 제목류도 bundle.css 가 Roboto 우선 체인을 박는다(제목과 같은 문제).
   본문 체인을 물려받게 한다. 콘텐츠 페이지는 대상이 아니라 스코프를 유지한다. */
#container:is(.service_history, .pay_processing, .coupon, .relax_policy, .member_modify,
               .withdraw_info, .pay_finish, .payment, .recommend, .withdraw,
               .faq, .notice, .inquiry, .terms):not(.blog) :is(.section_title, .con_title, .sub_title) {
    font-family: inherit;
}

/* 좁은 화면 터치 타깃 마무리
   실측: 약관 select 179x34, 결제하기 .caution 안 링크 128x40.
   폼 컨트롤 규격(48px)이 약관에는 안 걸려 있었다. */
@media (max-width: 768px) {

    #container:is(.service_history, .pay_processing, .coupon, .relax_policy, .member_modify,
               .withdraw_info, .pay_finish, .payment, .recommend, .withdraw,
               .faq, .notice, .inquiry, .terms):not(.blog) :is(select, input[type=text], input[type=password], input[type=date]) {
        min-height: 44px;
    }

    #container:is(.service_history, .pay_processing, .coupon, .relax_policy, .member_modify,
               .withdraw_info, .pay_finish, .payment, .recommend, .withdraw,
               .faq, .notice, .inquiry, .terms):not(.blog) :is(.caution, .note) a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }
}

/* 문단 하나가 링크 하나만 담고 있으면 그 줄이 곧 터치 타깃이다.
   실측(방침 390px): '이전 개인정보처리방침 보기' 5개가 39px 였다.
   문장 중간 링크(:only-child 아님)는 건드리지 않는다 - 행간이 벌어진다. */
@media (max-width: 768px) {

    #container:is(.terms, .privacy, .faq, .notice, .inquiry):not(.blog)
    .section p:has(> a:only-child) > a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }
}

/* 검색 묶음(입력 + 버튼)은 좁은 화면에서도 한 줄로 둔다.
   실측(공지 390px): 입력 343x48 아래로 버튼 52x48 이 떨어져 있었다. */
@media (max-width: 768px) {

    #container:is(.service_history, .pay_processing, .coupon, .relax_policy, .member_modify,
               .withdraw_info, .pay_finish, .payment, .recommend, .withdraw,
               .faq, .notice, .inquiry):not(.blog) :is(.search_wrap, .sch_wrap) {
        flex-wrap: nowrap;
    }

        #container:is(.service_history, .pay_processing, .coupon, .relax_policy, .member_modify,
               .withdraw_info, .pay_finish, .payment, .recommend, .withdraw,
               .faq, .notice, .inquiry):not(.blog) :is(.search_wrap, .sch_wrap) > input[type=text] {
            flex: 1 1 0;
            width: auto;
            min-width: 0;
        }

        #container:is(.service_history, .pay_processing, .coupon, .relax_policy, .member_modify,
               .withdraw_info, .pay_finish, .payment, .recommend, .withdraw,
               .faq, .notice, .inquiry):not(.blog) :is(.search_wrap, .sch_wrap) > .btn_search {
            flex: 0 0 auto;
        }
}


/* ==========================================================================
   블록 제목 크기 — 좁은 화면 (390px 전수 실측)

   위 '소제목 · 본문' 규칙(20px)은 13개 컨테이너 허용목록에만 걸려 있어
   광고상품·광고솔루션·SNS 화면은 레거시 값을 그대로 쓴다.
     .con_title      38px  36곳
     .section_title  30px  108곳
   그런데 같은 화면의 페이지 제목(.content_title)은 24px 이다.
   390px 에서 페이지 제목보다 섹션 제목이 더 큰 계층 역전이 30여 개 화면에서
   일어났다("오픈마켓광고" 24 위에 "쓱닷컴 스페셜 초이스" 38).

   .content_title 24 를 기준으로 계단을 다시 세운다.
     .con_title      26  블록 대표 제목(사실상 그 화면의 주제어)
     .section_title  21  섹션 제목
     .sub_title      17  소제목 (기존 값 유지)
   데스크톱은 건드리지 않는다 — 1080px 폭에서는 38/30 이 과하지 않다.
   ========================================================================== */
@media (max-width: 768px) {

    #container:not(.blog):not(.pcx) .con_title {
        font-size: 24px;
        line-height: 1.3;
    }

    #container:not(.blog):not(.pcx) .section_title {
        font-size: 20px;
        line-height: 1.35;
    }
}


/* ==========================================================================
   필수 입력 표시 — 라벨 오른쪽 위

   레거시는 라벨 *왼쪽* 에 붙인다.
     .content-form .asterisk::before {
         content:"⁎"; position:absolute; left:-10px; top:-4px }
   통례는 라벨 뒤 오른쪽 위다. 왼쪽 절대배치라 담는 요소를 가리는 문제도
   있었다 — 표 머리칸(th, padding 15/16, position:relative)에 그대로
   걸리자 칸 밖 왼쪽 위로 튀어 라벨 위에 별이 따로 찍혔다(광고문의 실측).

   자리만 옮긴다. 클래스(.asterisk)와 색은 그대로 둔다.
   범례(.section-title .asterisk / .r_box.asterisk)는 기호가 무엇인지
   설명하는 자리라 앞에 두는 것이 맞다 — 라벨만 옮긴다.

   .content-form 은 6개 화면이 쓴다 — 회원가입 · 아이디찾기 · 비밀번호찾기 ·
   회원정보수정 · 광고문의(회원/비회원).
   ========================================================================== */
/* 래퍼 자리가 화면마다 다르다 — 회원가입·회원정보수정은 .content-form 이
   #container 자신에 붙고, 광고문의는 안쪽 div.con 에 붙는다.
   후손 선택자만 쓰면 앞의 둘이 빠진다. */
#container.content-form :is(.title, th).asterisk::before,
#container .content-form :is(.title, th).asterisk::before {
    content: none;
}

#container.content-form :is(.title, th).asterisk::after,
#container .content-form :is(.title, th).asterisk::after {
    content: "⁎";
    margin-left: 3px;
    color: tomato;
    font-size: .8em;
    font-weight: 700;
    /* 첨자로 올린다. line-height:0 이라야 줄 높이를 밀지 않는다. */
    vertical-align: super;
    line-height: 0;
}


/* ==========================================================================
   약관 상세보기 토글(.btn-dropdown)

   이건 실행 버튼이 아니라 접었다 펴는 토글이다. 위 버튼 목록에 넣었더니
   .inquiry · .member_modify 에서만 알약 버튼이 됐다.
   1440px 실측
     회원가입  48x36 · 13px/500 · muted · 밑줄 · 테두리 없음  (레거시 그대로)
     광고문의  94x48 · 15px/600 · body  · 밑줄 없음 · 흰 배경 radius 10
   같은 자리 같은 역할인데 하나는 링크, 하나는 버튼으로 보였다.
   목록에서 빼 레거시 토글 모양으로 되돌린다.
   .btn-dropdown 을 쓰는 곳은 네 화면이다 — 회원가입 · 회원정보수정 ·
   광고문의(회원/비회원).
   ========================================================================== */
/* 레거시 기본은 회색 알약(80x36 · slategray · #f3f6f9 · radius 3)이다.
   회원가입은 Auth.css 가 그걸 밑줄 링크로 바꿔 쓴다
   (.section-agreement > ul > li > button, 13px/500 · muted · underline).
   같은 값을 여기에도 준다 — 자리도 역할도 같다. */
#container:is(.inquiry, .member_modify) .section-agreement li > .btn-dropdown {
    flex: 0 0 auto;
    min-height: 0;
    padding: 6px 2px;
    border: 0;
    border-radius: 0;
    background: none;
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    color: var(--mc-muted, #7c87a0);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

    #container:is(.inquiry, .member_modify) .section-agreement li > .btn-dropdown:hover {
        color: var(--mc-blue, #2b5bff);
    }

@media (max-width: 768px) {

    /* 레거시가 36px 이라 터치 기준(44)에 못 미친다.
       Auth.css 가 회원가입에 준 보정과 같은 값. */
    #container:is(.inquiry, .member_modify) .section-agreement li > .btn-dropdown {
        min-height: 44px;
        /* margin-left: auto 로 줄 오른쪽 끝에 보내던 것을 걷었다.
           토글이 다음 줄로 내려가는 것 자체를 없앴기 때문이다 —
           table-responsive 에서 문구 칸에 flex: 1 1 0 을 줘, 문구가 두 줄로
           접히면서 토글이 같은 줄에 남는다(회원가입과 같은 꼴).
           내려간 뒤 오른쪽 끝에 두면 왼쪽 끝에 둘 때와 마찬가지로 무엇에
           딸린 것인지 읽히지 않았다. */
    }
}


/* ==========================================================================
   폼 화면 공통 — 제목 · 입력 눈금 · 카드 간격 · 하단 버튼

   대상 6개: 회원가입 · 아이디찾기 · 비밀번호찾기 · 회원정보수정 ·
             광고문의(회원/비회원)

   1440px 실측(고치기 전). 같은 .content-form 인데 값이 제각각이었다.
                 폼 열   제목             입력 폭
     회원가입     720    h1, 클래스 없음   666 (카드 폭 전체)
     아이디찾기   520    .content_title    466 / 140
     광고문의     820    .content_title    360 / 169 / 79
     제목 정렬    왼쪽 / 왼쪽 / 가운데
     카드 사이    16 / 12 / 0
     하단 버튼    취소 257 : 가입완료 453 (PC) — 모바일은 326 : 326

   폼 열 폭은 통일하지 않는다. 520/720/820 은 내용량에 맞춘 값이고
   Auth.css 에 근거가 적혀 있다 — "720px 이면 '이름' 한 칸이 720px 로
   늘어나 폼으로 안 보인다". 넓히면 찾기 화면이 나빠진다.
   폭 말고 나머지를 맞춘다.

   제목은 왼쪽으로 모은다. 여섯 중 넷이 이미 왼쪽이고, 좁은 열이 가운데
   놓이는 구조에서 제목이 그 열 왼쪽에 붙어야 폼의 시작이 읽힌다.
   (사이트의 다른 화면은 가운데다. "폼 화면은 왼쪽" 이라는 구분이 생긴다.)
   ========================================================================== */

/* ---- 제목 ----
   특이도 메모: Auth.css 가 .account_find .content_title 에 margin 단축으로
   18px 을 준다. 뒤에 실리므로 #content 를 끼워 한 칸 올린다. */
#container:is(.content-sign-up, .account_find, .member_modify, .inquiry) #content :is(h1, .content_title) {
    margin-bottom: 24px;
}

/* 왼쪽으로 모으는 건 탭이 없는 폼 화면만이다.
   .member_modify(비밀번호수정)는 마이페이지 탭 안에 있는데도 여기 섞여
   있었다. 그 화면의 제목 상자는 화면 전체 폭(0~1905)이라 왼쪽으로 돌리자
   글자가 x=0 에 붙었다 — 1920 실측: 제목 0~142 / 탭 353 / 소제목 353 /
   표 543 으로 기준선이 넷이 됐다. 같은 탭의 회원정보수정·추천인은 가운데다.
   원래 진영으로 되돌린다. */
#container:is(.content-sign-up, .account_find, .inquiry) #content :is(h1, .content_title) {
    text-align: left;
}

    /* 광고문의 제목은 폭 제한이 없어 화면 전체를 쓴다. 가운데 정렬일 때는
       드러나지 않았지만 왼쪽으로 돌리자 글자가 페이지 끝(x=0)에 붙었다.
       폼 열(820)과 같은 자리에서 시작해야 한다. */
    #container.inquiry #content .content_title {
        max-width: 820px;
        margin-left: auto;
        margin-right: auto;
    }

    /* 좁은 화면에서는 820 이 걸리지 않아 제목이 다시 x=0 에 붙는다.
       390px 실측: 카드·표는 16~374 인데 제목 글자는 0 에서 시작해
       '광' 자 왼쪽 획이 화면 가장자리에 닿았다.
       (회원가입·아이디찾기 계열은 Auth.css 가 이미 16 을 줘서 32 에서
        시작한다. 두 진영이 16 / 32 로 갈리는 건 따로 볼 일이다.) */
    @media (max-width: 768px) {

        #container.inquiry #content .content_title {
            padding-left: 16px;
            padding-right: 16px;
        }
    }

/* ---- 입력 눈금 ----
   2026-09-16 — 단일 입력에 걸어 두었던 360px 상한을 걷는다.

   원래 의도는 '아이디 6~15자' 같은 짧은 값에 666px 을 주면 얼마나 쓰면
   되는지 신호가 사라진다는 것이었다. 회원가입 기업회원 화면을 실측해 보니
   그 신호보다 잃는 것이 컸다.

     아이디 · 비밀번호 · 비밀번호확인 · 회사명   360   규칙 적용
     담당자명                                666   readonly 라 규칙에서 빠짐
     사업자등록번호 · 휴대전화 · 이메일          666   묶음 입력이라 제외

   여덟 줄 중 넷만 360 이고 나머지는 666 이다. 담당자명이 빠진 것은 본인인증
   팝업으로 채우는 칸이라 readonly 이기 때문이지 값이 짧아서가 아니다.
   뒤의 네 줄은 칸 세 개 · 본인인증 버튼 · 도메인 선택이 들어 있어 폭을 줄일
   수 없다. 그러면 오른쪽 끝을 가지런히 하는 길은 하나뿐이다 — 단일 입력도
   칸을 채우게 하는 것.

   '얼마나 쓰면 되는가'는 이미 자리표시자가 말해 준다
   ("영문자, 숫자 6~15자" · "영문자, 숫자, 특수문자 조합 8~16자").
   폭으로 다시 말할 이유가 없고, 그 대가로 폼의 오른쪽 끝이 들쭉날쭉했다.

   걷어내면 Auth.css 의 .inputs > input { flex: 1 1 0 } 이 살아나 칸을 채운다. */

/* ---- 카드 간격 ----
   16px 이었다. 카드 안쪽 패딩이 24~26px 이라 바깥 간격이 안쪽보다 좁아
   덩어리 구분이 약했다. 안쪽과 같은 눈금으로 올린다. */
#container:is(.content-sign-up, .account_find) #content .wrapper > section:not(.section-buttons),
#container.account_find #content .con > .section {
    margin-bottom: 24px;
}

/* ---- 하단 버튼 ----
   PC 에서만 취소 257 : 가입완료 453 으로 갈렸다(모바일은 326 : 326).
   강조는 색이 이미 하고 있으므로 폭으로 또 하지 않는다. */
#container:is(.content-sign-up, .account_find) #content .section-buttons {
    display: flex;
    gap: 12px;
}

    #container:is(.content-sign-up, .account_find) #content .section-buttons > button {
        flex: 1 1 0;
        min-width: 0;
    }


/* ==========================================================================
   체크박스 · 라디오 라벨 — 누르는 면

   390px 실측(회원탈퇴): 라벨 높이가 20px 이다. 손가락 기준(44)의 절반도
   안 된다. 같은 화면군인 광고문의는 .checkbox 래퍼가 있어 44 가 나오는데,
   탈퇴·약관처럼 input + label 만 있는 곳은 레거시 그대로 20 이었다.
   래퍼 유무로 누르는 면이 갈리면 안 된다.

   글자 크기는 건드리지 않고 높이만 채운다. 인라인 문장 속 라벨을 건드리지
   않도록 체크박스/라디오 바로 뒤에 오는 라벨만 잡는다.
   데스크톱은 마우스라 그대로 둔다.
   ========================================================================== */
@media (max-width: 768px) {

    #container:is(.service_history, .pay_processing, .coupon, .relax_policy, .member_modify,
                   .withdraw_info, .pay_finish, .payment, .recommend, .withdraw,
                   .faq, .notice, .inquiry, .terms, .content-sign-up,
                   .account_find):not(.blog) :is(input[type=checkbox], input[type=radio]) + label {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }
}


/* ==========================================================================
   고객지원 — FAQ 아코디언 · 공지 상세 · 목록 버튼

   세 화면이 레거시 게시판 규칙을 그대로 쓴다.
   ========================================================================== */

/* ---- FAQ 답변 본문 ----
   레거시 .accor_con 은 line-height 를 안 준다. 초기화 CSS 가
   body 에 line-height:1 을 걸어 두어서 그게 내려온다.
   1920px 실측: 글자 15px 에 줄간격 15px — 두 줄만 돼도 글자가
   서로 붙는다. 답변은 에디터로 넣는 긴 글이라 이게 제일 크다.
   아래 여백 50px / 위 20px 도 비대칭이라 같이 맞춘다.

   서비스 이용 내역의 문의 아코디언도 같은 규칙을 쓰지만
   로그인 화면이라 눈으로 못 봤다. 확인한 화면만 잡는다. */
#container.faq .list_accor .accor_con {
    padding: 18px 20px 20px;
    background: var(--mc-tint, #f4f7fe);
    font-size: 14px;
    line-height: 1.7;
    color: var(--mc-body, #4a5468);
}

/* 질문은 목록의 주 텍스트다. 레거시는 #606f80(보조 회색)으로
   둔게 답변(#333)보다 흐렸다. 잍크색으로 올린다. */
#container.faq .list_accor .accor_title {
    color: var(--mc-ink, #0b1220);
    font-weight: 500;
}

    #container.faq .list_accor .accor_title:hover {
        color: var(--mc-primary, #3b5bfd);
    }

/* ---- 공지 상세 머리리 ----
   제목이 th 의 13px muted 색을 물려받아 24px 회색으로 나온다.
   글 제목이 날짜보다 흐릴 이유가 없다. */
#container .tb_style.board thead th .post_title {
    padding: 0;
    color: var(--mc-ink, #0b1220);
    font-weight: 700;
    letter-spacing: -.02em;
}

#container .tb_style.board thead th .post_date {
    margin-top: 8px;
    padding: 0;
}

/* th 는 가운데 정렬인데 안의 두 줄은 왼쪽 정렬이라
   기준선이 둘이었다. 머리말 전체를 왼쪽으로 모은다. */
#container .tb_style.board thead th:has(.post_title) {
    text-align: left;
}

/* ---- 공지 상세 — 읽는 칸의 여백 ----
   이 카드는 표가 아니라 글을 읽는 자리인데 셀 여백이 데이터 표 기준이었다.
   1440 실측  머리 14/16 · 본문 15/16   (레거시 .post_detail 25/20 을
              리뉴얼 공통 규칙 .tb_style:is(.basic,.board) tbody 가 덮었다)
   390 실측   머리 12/4 · 본문 4        (page-chrome.css 의 목록 표 압축
              규칙이 .tb_style 전체를 잡아 상세까지 걸렸다. 그 4px 은
              목록의 링크가 이미 상하 12px 를 갖고 있어 겹침을 줄이려던
              값이라, 링크가 없는 상세 본문에서는 글자가 칸에 붙는다.)
   사이트 카드 관례(24px 안팎)에 맞춘다. 본문은 한 줄짜리 공지가 얇은 띠로
   보이지 않게 최소 높이를 준다. 목록 표는 .post_title/.post_detail 이 없어
   이 규칙에 걸리지 않는다. */
#container .tb_style.board thead th:has(.post_title) {
    padding: 20px 24px;
}

#container .tb_style.board tbody td.post_detail {
    /* 표 칸에서는 min-height 가 무시된다(실측: 160 을 줘도 80 그대로).
       칸의 height 는 최소 높이로 동작하므로 그쪽을 쓴다. */
    height: 160px;
    padding: 28px 24px;
    line-height: 1.7;
    vertical-align: top;
}

@media (max-width: 768px) {

    #container .tb_style.board thead th:has(.post_title) {
        padding: 16px 18px;
    }

    #container .tb_style.board tbody td.post_detail {
        height: 120px;
        padding: 22px 18px;
    }
}

@media (max-width: 768px) {

    /* ---- FAQ 글쓰기 버튼 ----
       position:absolute 로 붙어 있어 .section 의 좌우 16px 여백을
       빠져나간다. 390px 실측: 목록은 16~374 인데 버튼은 250~390
       — 화면 오른쪽 끝에 붙어 여백이 없다. */
    #container.faq .section .btn.second {
        right: 16px;
    }

    /* ---- 페이징 ----
       칸 44 + 간격 4 = 48. 358px 안에 7칸만 들어가서
       15칸짜리 공지 목록이 7+7+1 로 끊겨 마지막 » 가 세 번째 줄에
       혼자 남았다. 간격만 걷어 한 줄에 8칸을 넣고 두 줄로 맞춘다.
       누르는 면 44 는 그대로 둔다. */
    #container:is(.faq, .notice, .service_history, .inquiry):not(.blog)
        :is(.pagination, .PagedList-pager) {
        gap: 0;
    }
}

/* ==========================================================================
   약관 상세 박스가 잘려 보이던 것

   레거시(css.css)가 .btn-dropdown + dl.active 에 max-height:300px 과
   overflow:auto 를 건다. 실측하면 이렇다.

     1440   개인정보 수집 833px  ->  533px 숨음
            마케팅 198 · 광고성 283      다 보임
      390   개인정보 수집 855px  ->  555px 숨음
            마케팅 324 -> 24px 숨음 · 광고성 416 -> 116px 숨음

   스크롤은 되지만 '더 있다'는 신호가 없어 마지막 줄이 반만 보인 채로 끝난다.
   24px 만 숨는 경우가 가장 나쁘다 — 한 줄이 잘린 것으로만 보인다.

   두 가지를 한다.
     상한을 420px 로 올려 짧은 둘(324 · 416)은 스크롤 없이 다 보이게 하고,
     넘치는 것에는 위아래 그림자를 띄워 더 있다는 것을 보이게 한다.
     그림자는 배경과 같은 색 덮개를 local 로, 그림자를 scroll 로 깔아
     끝에 닿으면 저절로 사라진다 — JS 가 필요 없다.
   60vh 를 같이 건 것은 낮은 화면에서 상자가 화면을 다 먹지 않게 하기 위함이다. */
#container:is(.content-sign-up, .inquiry, .member_modify) .btn-dropdown + dl.active {
    /* 페이드 덮개는 상자 바탕과 같은 색이어야 한다. 바탕이 화면마다 다르므로
       (아래 '광고문의만 상세 상자가 안 보이던 것' 참고) 변수로 빼서 한 곳만 바꾼다.
       그라데이션의 투명 끝은 transparent 대신 같은 색의 alpha 0 을 쓴다 —
       transparent 는 rgba(0,0,0,0) 이라 브라우저에 따라 회색을 거쳐 어두워진다. */
    --dd-bg: #f3f6f9;
    --dd-bg-0: rgba(243, 246, 249, 0);
    max-height: min(420px, 60vh);
    /* scrollbar-width 는 파이어폭스에서만 막대를 얇게 만든다. 크롬은 겹침
       스크롤바라 스크롤하는 동안에만 잠깐 보인다 — 실측으로 확인했다
       (offsetWidth - clientWidth = 0, 스크롤 중 캡처에도 막대 없음).
       그래서 신호는 위아래 페이드가 진다. ::-webkit-scrollbar 로 막대를
       상시 노출하려 해 봤으나 이 환경에서 아무 일도 하지 않아 걷었다. */
    scrollbar-width: thin;
    background-image:
        linear-gradient(var(--dd-bg) 34%, var(--dd-bg-0)) top / 100% 22px no-repeat local,
        linear-gradient(var(--dd-bg-0), var(--dd-bg) 66%) bottom / 100% 22px no-repeat local,
        radial-gradient(farthest-side at 50% 0, rgba(11, 18, 32, .16), rgba(11, 18, 32, 0))
            top / 100% 9px no-repeat scroll,
        radial-gradient(farthest-side at 50% 100%, rgba(11, 18, 32, .16), rgba(11, 18, 32, 0))
            bottom / 100% 9px no-repeat scroll;
}




/* ==========================================================================
   광고문의만 약관 상세 상자가 안 보이던 것

   레거시(css.css:5578)가 .btn-dropdown + dl 에 #f3f6f9 를 준다. 이 회색은
   흰 바탕을 전제로 고른 값이다 — 회원가입에서는 바깥이 흰색이라 1.085:1 로
   상자가 또렷하다.

   그런데 광고문의는 약관 절이 틴트 카드(--mc-tint #f4f7fe) 위에 앉는다.
   실측하면 상세 rgb(243,246,249) 대 바깥 rgb(244,247,254) 로 대비가
   1.011:1 — 두 색이 사실상 같아서 펼쳐도 상자가 나타난 줄 모른다.

   회원가입은 멀쩡하므로 건드리지 않고, 광고문의에서만 관계를 뒤집는다.
   틴트 카드 안의 흰 판 — 이 저장소가 다른 곳에서도 쓰는 짝이다.
   ========================================================================== */
#container.inquiry .btn-dropdown + dl {
    background-color: #fff;
}

#container.inquiry .btn-dropdown + dl.active {
    --dd-bg: #fff;
    --dd-bg-0: rgba(255, 255, 255, 0);
    border: 1px solid var(--mc-line, #e7ebf5);
    border-radius: var(--mc-radius-sm, 12px);
}

/* ==========================================================================
   광고문의 폼은 자기 CSS 가 안 실린다

   css/AdInquire/Inquiry.css 는 선택 화면(AdInquireRegister.cshtml)에만
   링크돼 있다. 정작 폼이 있는 AdInquireNonMemberRegister ·
   AdInquireMemberRegister 에는 없다. 그래서 아래 규칙들을 전역인 이 파일에
   둔다. #container.inquiry 로 묶여 있어 다른 화면에는 닿지 않는다.
   ========================================================================== */
/* ==========================================================================
   광고문의 폼 — 빈 칸이 채워진 것처럼 보이던 것

   실측(390)

     유형 select 미선택      color rgb(11,18,32)     ← 본문과 같은 잉크색
     입력 자리표시자          없음                     ← 회원가입은 규칙을 적어 준다
     섹션 제목 H4.l_box      text-align: center      ← 라벨 · 안내는 모두 왼쪽
     도메인 select 래퍼      inline-block 169px 고정

   select 는 아직 고르지 않았는데 글자가 본문과 같은 색이라 이미 답한 것처럼
   읽힌다. 입력 칸들은 자리표시자가 아예 없어 무엇을 넣어야 하는지 알 수 없다
   (회원가입은 "영문자, 숫자 6~15자" 처럼 적어 준다). 후자는 문구를 새로
   쓰는 일이라 여기서는 손대지 않는다.
   ========================================================================== */


/* 2) select 도 고르기 전에는 자리표시자다.
      첫 옵션(value="")이 선택된 동안만 흐리게 하고, 목록 안 글자는 잉크색으로
      되돌린다 — 안 그러면 펼친 목록이 통째로 흐려진다. */
#container.inquiry select:has(option[value=""]:checked) {
    color: var(--mc-muted, #7c87a0);
}

    #container.inquiry select option {
        color: var(--mc-ink, #0b1220);
    }

/* 3) 섹션 제목만 가운데였다. 라벨 · 필수 안내 · 입력이 모두 왼쪽이라
      제목만 축이 달랐다. 회원가입도 왼쪽이다.

      .section_title 까지 붙여 제목에만 건다. 처음엔 .l_box 로만 뒀는데,
      이 클래스는 광고문의 첫 화면의 회원/비회원 선택 카드에도 붙어 있다
      (문의 폼의 .l_box 는 전부 h4.l_box.section_title, 카드만 div.l_box).
      2 id 라 Inquiry.css 의 가운데 정렬(1 id)을 이겨서 두 카드 중 회원 쪽만
      왼쪽으로 틀어졌다 — 실측 1440: 회원 좌여백 29 / 우여백 337,
      비회원 174 / 174. */
#container.inquiry #content .l_box.section_title {
    text-align: left;
}

/* 4) 이메일 도메인 선택이 좁은 화면에서 다음 줄 왼쪽에만 남았다.
      래퍼가 inline-block 169px 고정이라 오른쪽 189px 이 비었다.
      한 줄을 다 쓰게 한다 — 같은 화면의 '유형' select 와 같은 폭이 된다. */
@media (max-width: 768px) {
    #container.inquiry .select_wrap {
        display: block;
        width: 100%;
    }

        #container.inquiry .select_wrap select {
            width: 100%;
        }
}


/* ---- 페이징 마무리 ----
   검수(공지사항·FAQ vs 블로그)에서 두 벌이 갈려 있었다.

     활성 칸   파랑 #2b5bff  vs  잉크 #111827
     화살표    테두리 없는 꺾쇠  vs  흰 칸 + 테두리
     칸 크기   44px / r10     vs  40px / r8

   맞추는 기준 :
     · 활성 칸은 '누르는 것' 이 아니라 '지금 여기' 라는 상태다 → 파랑을 남긴다.
       (버튼은 무채색, 상태는 파랑 — 이 페이지 전체가 쓰는 규칙)
     · 화살표는 칸을 줘야 누를 수 있는 곳으로 읽힌다 → 블로그 쪽을 가져온다.
   ------------------------------------------------------------------------ */

/* 화살표에 칸을 준다 — 지금은 회색 꺾쇠만 떠 있어 버튼으로 안 읽힌다 */
#container:is(.service_history, .pay_processing, .coupon, .relax_policy, .member_modify,
               .withdraw_info, .pay_finish, .payment, .recommend, .withdraw,
               .faq, .notice, .inquiry):not(.blog) :is(.pagination, .PagedList-pager)
    :is(.PagedList-skipToFirst, .PagedList-skipToPrevious,
        .PagedList-skipToNext, .PagedList-skipToLast) a {
    border-color: var(--mc-border, #e7ebf5);
    background: #fff;
    color: var(--mc-muted, #7c87a0);
}

    #container:is(.service_history, .pay_processing, .coupon, .relax_policy, .member_modify,
               .withdraw_info, .pay_finish, .payment, .recommend, .withdraw,
               .faq, .notice, .inquiry):not(.blog) :is(.pagination, .PagedList-pager)
        :is(.PagedList-skipToFirst, .PagedList-skipToPrevious,
            .PagedList-skipToNext, .PagedList-skipToLast) a:hover {
        border-color: var(--mc-border, #e7ebf5);
        background: var(--mc-tint, #f4f7fe);
        color: var(--mc-ink, #0b1220);
    }

    /* 갈 수 없는 방향은 칸 없이 흐리게 — 눌리는 것과 구분한다 */
    #container:is(.service_history, .pay_processing, .coupon, .relax_policy, .member_modify,
               .withdraw_info, .pay_finish, .payment, .recommend, .withdraw,
               .faq, .notice, .inquiry):not(.blog) :is(.pagination, .PagedList-pager)
        .disabled :is(a, span) {
        border-color: transparent;
        background: none;
        color: #c3cad8;
        cursor: default;
    }

/* 좁은 화면 — 한 줄로 유지한다.

   실측(390px) : 칸 14개 x 44px + gap = 616px 가 358px 안에 들어가지 못해
                 두 줄로 접혔다. 위 줄 "<< < 1 2 3 4 5 6", 아래 줄 "7 8 9 10 ... > >>".
                 화살표가 양 끝에서 갈라지고 숫자 줄도 끊겨 어디로 가는지 안 보였다.
   해법 : 처음·마지막(<< >>)을 걷고, 숫자는 현재 쪽 ±2 만 남긴다.
          이전·다음으로 계속 넘길 수 있으므로 갈 수 있는 곳이 줄지는 않는다.
          남는 칸 7개 x 44 + gap 24 = 332px < 358px. */
@media (max-width: 600px) {

    #container:is(.service_history, .pay_processing, .coupon, .relax_policy, .member_modify,
               .withdraw_info, .pay_finish, .payment, .recommend, .withdraw,
               .faq, .notice, .inquiry):not(.blog) :is(.pagination, .PagedList-pager) :is(.PagedList-skipToFirst, .PagedList-skipToLast),
    #container:is(.service_history, .pay_processing, .coupon, .relax_policy, .member_modify,
               .withdraw_info, .pay_finish, .payment, .recommend, .withdraw,
               .faq, .notice, .inquiry):not(.blog) :is(.pagination, .PagedList-pager) .PagedList-ellipses {
        display: none;
    }

    /* 현재 쪽 ±2 와 이전·다음만 남기고 감춘다.
       '전부 감추고 되살리기' 로 쓰면 되살리는 쪽 특정도가 낮아 져서
       한 칸만 남는다(실측: 390px 에서 "< 1 >"). 한 규칙으로 뺀다. */
    #container:is(.service_history, .pay_processing, .coupon, .relax_policy, .member_modify,
               .withdraw_info, .pay_finish, .payment, .recommend, .withdraw,
               .faq, .notice, .inquiry):not(.blog) :is(.pagination, .PagedList-pager) > li:not(.active):not(.active + li):not(.active + li + li):not(:has(+ li.active)):not(:has(+ li + li.active)):not(.PagedList-skipToPrevious):not(.PagedList-skipToNext) {
        display: none;
    }

    #container:is(.service_history, .pay_processing, .coupon, .relax_policy, .member_modify,
               .withdraw_info, .pay_finish, .payment, .recommend, .withdraw,
               .faq, .notice, .inquiry):not(.blog) :is(.pagination, .PagedList-pager) {
        flex-wrap: nowrap;
        gap: 4px;
    }
}

/* ==========================================================================
   콘텐츠 랜딩 하단 CTA

   같은 클래스(.btn_r.fin)가 컨테이너에 따라 두 얼굴이었다.
     기능 화면(page-chrome 대상)   #111    · 56h · r10  · 16px/700
     콘텐츠 랜딩(대상 밖)          #0045db · 60h · r35  · 20px/400

   #0045db 는 header-responsive.css 주석이 이미 '이 사이트 어디에도 없는 값'
   이라 적어 두고 퀵메뉴에서 --mc-grad 로 바꾼 값이다. 같은 기준을 적용한다.
   랜딩은 tokens.css 가 --mc-grad 를 쓰라고 정해 둔 세계라 잉크로 가지 않는다.

   크기(340x60)는 그대로 둔다 — 랜딩의 마지막 행동이라 기능 화면 버튼보다
   커도 된다. r35 는 60px 높이에서 이미 알약으로 잘리므로 토큰으로만 바꾼다.
   글자는 20px/400 이었다. 400 은 버튼 굵기가 아니고 20px 은 스케일에서
   '절 제목' 자리라, 18px/700 으로 내린다.
   ========================================================================== */
#container:is(.viral_marketing, .blog_marketing, .press_marketing, .insta_marketing,
               .facebook, .real_review, .hot_reiview, .intellectual,
               .service_fee, .google_ads_intro, .diad_pro_manual,
               .detail_package) :is(.btn_r.fin, .btn.fin) {
    border: 0;
    border-radius: var(--mc-radius-pill, 999px);
    background: var(--mc-grad, linear-gradient(96deg, #2b5bff 8%, #7c3aed 92%));
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    box-shadow: 0 14px 30px -12px rgba(76, 104, 255, .5);
    transition: box-shadow .15s ease, filter .15s ease;
}

    #container:is(.viral_marketing, .blog_marketing, .press_marketing, .insta_marketing,
                   .facebook, .real_review, .hot_reiview, .intellectual,
                   .service_fee, .google_ads_intro, .diad_pro_manual,
                   .detail_package) :is(.btn_r.fin, .btn.fin):hover {
        filter: brightness(1.05);
        box-shadow: 0 18px 36px -12px rgba(76, 104, 255, .58);
    }