/* ==========================================================================
   광고 문의 — 회원/비회원 선택 (AdInquireRegister)

   고치기 전 (실측)
     390px  문서 2178px. 비회원 카드가 290x445 L84, 회원은 358x445 L16 이었다.
            레거시가 .r_box 에 margin-left:68px, width:405px 을 준다.
            page-chrome 이 width 만 풀어 줘서 들여쓰기가 남았다.
     1280px 카드 405x418, 모서리 각지고 그림자 없음. 버튼 160px.
     공통   카드 패딩 185px 0 90px. 회색 선화 PNG 두 장을 배경으로 깔고
            그 자리를 비워 둔 값이다. 445px 중 275px 가 빈 자리였다.
            설명문만 왼쪽 정렬이라 제목·아이콘·버튼과 축이 어긋났다.
            버튼 둘이 똑같이 생겨 무엇을 고를지가 없었다.

   생김새와 배치는 모든 폭에 공통으로 두고, 좁은 화면에서는 크기만 줄인다.
   ========================================================================== */

/* ---- 리드문 · 연락처 ---- */

#container.inquiry:not(.blog):not(.pcx) .section_title {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.6;
    color: var(--mc-body, #4a5468);
    word-break: keep-all;
}

/* 레거시가 이 섹션을 컬럼 플렉스 + gap:2rem 로 잡는다.
   그런데 클리어픽스가 넣은 ::before/::after (content:" "; display:table) 가
   플렉스 컨테이너 안에서는 아이템이 된다. 높이는 0 이지만 gap 은 붙는다.
     아이템 넷(0 + 리드문 + 연락처 + 0) + gap 세 번
   그래서 위아래로 2rem 씩 빈 자리가 생겼다. 둘을 없앤다. */
#container.inquiry .section_header {
    min-height: 0;
    height: auto;
    gap: 20px;
    justify-content: flex-start;
}

    #container.inquiry .section_header::before,
    #container.inquiry .section_header::after {
        display: none;
    }

#container.inquiry .section_contact {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding-top: 0;
}

    /* 두 링크 사이의 세로 막대. 칩으로 바꾸면 구분자가 필요 없다. */
    #container.inquiry .section_contact > span {
        display: none;
    }

    /* 마크업에 style="font-size:20px" 이 박혀 있어 !important 로 받는다 */
    #container.inquiry .section_contact > a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 48px;
        padding: 0 20px;
        border: 1px solid var(--mc-border, #e7ebf5);
        border-radius: var(--mc-radius-pill);
        background-color: var(--mc-surface, #fff);
        font-size: 16px !important;
        font-weight: 700;
        color: var(--mc-ink, #0b1220);
        transition: border-color .15s ease, color .15s ease;
    }

        #container.inquiry .section_contact > a:hover {
            border-color: var(--mc-blue, #2b5bff);
            color: var(--mc-blue, #2b5bff);
        }

/* ---- 카드 두 장 ---- */

#container.inquiry .member_certify {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    width: auto;
    max-width: var(--mc-content, 1080px);
    margin: 32px auto 0;
}

    #container.inquiry .member_certify :is(.l_box, .r_box) {
        /* 레거시: width 405 / margin-left 68 / max-height 445 / padding 185 0 90 */
        width: auto;
        max-height: none;
        margin: 0;
        padding: 40px 28px 32px;
        border: 1px solid var(--mc-border, #e7ebf5);
        border-radius: var(--mc-radius, 16px);
        background-color: var(--mc-surface, #fff);
        /* 축약을 쓰면 위에서 준 배경색까지 지워진다. 아이콘 PNG 만 걷는다. */
        background-image: none;
        box-shadow: var(--mc-shadow-xs);
        text-align: center;
        transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
    }

        #container.inquiry .member_certify :is(.l_box, .r_box):hover {
            border-color: #b9c6e8;
            box-shadow: 0 18px 40px -22px rgba(11, 18, 32, .3);
            transform: translateY(-2px);
        }

        /* ---- 아이콘 배지 ----
           레거시는 회색 선화 PNG 두 장(99x73, 97x64)을 카드 배경으로 깔았다.
           화면의 다른 요소는 브랜드 색인데 아이콘만 회색이라 겉돌았다.
           흐름 안의 배지로 다시 그린다. 새로 받을 파일이 없다.
             회원   --mc-grad 배지에 흰 사람   (권하는 쪽. 버튼도 같은 그라디언트)
             비회원 --mc-tint 배지에 파란 봉투 (보조. 버튼도 흰 배경) */
        #container.inquiry .member_certify :is(.l_box, .r_box)::before {
            content: "";
            display: block;
            width: 72px;
            height: 72px;
            margin: 0 auto 18px;
            border-radius: 50%;
            background-repeat: no-repeat;
            background-position: center;
            background-size: 34px 34px;
        }

        /* 레이어 순서와 크기를 함께 준다.
           background-size 를 하나만 쓰면 그라디언트까지 34x34 로 잘려
           아이콘 뒤에 네모 자국이 남는다(실측). 앞 레이어가 위에 온다. */
        #container.inquiry .member_certify .l_box::before {
            background-color: var(--mc-blue, #2b5bff);
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='%23ffffff'%3E%3Cpath d='M480-480q-66 0-113-47t-47-113q0-66 47-113t113-47q66 0 113 47t47 113q0 66-47 113t-113 47ZM160-160v-112q0-34 17.5-62.5T224-378q62-31 126-46.5T480-440q66 0 130 15.5T736-378q29 15 46.5 43.5T800-272v112H160Z'/%3E%3C/svg%3E"),
                              linear-gradient(96deg, rgba(43, 91, 255, 0) 8%, rgba(124, 58, 237, .9) 92%);
            background-size: 34px 34px, cover;
            background-position: center, center;
            box-shadow: 0 12px 24px -10px rgba(43, 91, 255, .55);
        }

        #container.inquiry .member_certify .r_box::before {
            background-color: var(--mc-tint, #f4f7fe);
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='%232b5bff'%3E%3Cpath d='M160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h640q33 0 56.5 23.5T880-720v480q0 33-23.5 56.5T800-160H160Zm320-280L160-640v400h640v-400L480-440Zm0-80 320-200H160l320 200Z'/%3E%3C/svg%3E");
            box-shadow: inset 0 0 0 1px var(--mc-border, #e7ebf5);
        }

        /* components.css 398행이
             #container:is(...):not(.blog):not(.pcx) .sub_title  (1,4,0) 로 17px 을 준다.
           :not(.pcx) 를 붙여 (1,5,0) 으로 받는다. */
        #container.inquiry:not(.pcx) .member_certify .sub_title {
            margin: 0 0 10px;
            padding: 14px 0 0;
            /* 레거시(bundle.css 6679)가 border-top: 1px solid #2b2d3a 를 준다.
               제목 위에 짧은 실선 하나가 뜨는데 구분선도 장식도 아니다.
               회원탈퇴 본인인증 카드에서 걷어낸 것과 같은 잔재다. */
            border-top: 0;
            font-size: 20px;
        }

        /* 제목·아이콘·버튼은 가운데인데 설명만 왼쪽이었다 */
        #container.inquiry .member_certify .con_text {
            margin: 0;
            padding: 0;
            font-size: 14px;
            line-height: 1.6;
            text-align: center;
            color: var(--mc-body, #4a5468);
            word-break: keep-all;
        }

        #container.inquiry .member_certify .btn_r {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            min-height: 52px;
            margin-top: 22px;
            padding: 0 16px;
            border-radius: var(--mc-radius-sm, 10px);
            font-size: 16px;
            font-weight: 700;
        }

        /* 두 버튼이 똑같이 생기면 무엇을 고를지가 없다.
           회원이 권하는 쪽이다(문의 현황을 마이페이지에서 볼 수 있다). */
        #container.inquiry .member_certify .l_box .btn_r {
            border: 0;
            background-color: var(--mc-cta, #111);
            background-image: none;
            color: #fff;
            box-shadow: 0 10px 22px -10px rgba(43, 91, 255, .55);
        }

        #container.inquiry .member_certify .r_box .btn_r {
            border: 1px solid var(--mc-border, #e7ebf5);
            background-color: var(--mc-surface, #fff);
            color: var(--mc-ink, #0b1220);
        }


/* ==========================================================================
   좁은 화면 — 배치는 위와 같다. 한 열로 세우고 크기만 줄인다.
   ========================================================================== */

@media (max-width: 768px) {

    /* ---- 세로 리듬 ----
       390px 실측(고치기 전) 제목 위 70px, 연락처 → 카드 100px, 문서 2178px.
       화면 하나에 제목 · 리드문 · 연락처 · 카드 둘뿐인데 빈 자리가 그만큼이었다. */

    /* 제목 위 여백은 건드리지 않는다. 한때 32px 로 줄였는데, 전수 조사에서
       .sub_content_except 를 쓰는 나머지 70개 화면이 전부 70px 이라
       이 화면만 38px 위로 올라와 있었다(390px 실측 T134 vs T172). */

    /* 제목 아래 여백도 기준값(20px)을 쓴다. 12px 은 이 화면만 달랐다. */

    #container.inquiry:not(.blog) .section_header {
        gap: 18px;
        margin-top: 0;
        padding-bottom: 0;
    }

    #container.inquiry:not(.blog) .section:not(.section_header) {
        margin-top: 0;
        padding-top: 0;
    }

    /* components.css 380행이
         #container:is(...):not(.blog):not(.pcx) :is(.con_title, .section_title)
       으로 클래스 넷 (1,4,0) 을 잡는다. 같은 모양으로 받아야 이긴다. */
    #container.inquiry:not(.blog):not(.pcx) .section_title {
        font-size: 16px;
    }

    #container.inquiry:not(.blog) .section_contact > a {
        min-height: 44px;
        padding: 0 16px;
        font-size: 14px !important;
    }

    #container.inquiry:not(.blog) .member_certify {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
        margin-top: 28px;
    }

        #container.inquiry:not(.blog) .member_certify :is(.l_box, .r_box) {
            padding: 24px 20px 20px;
        }

            #container.inquiry:not(.blog) .member_certify :is(.l_box, .r_box)::before {
                width: 64px;
                height: 64px;
                margin-bottom: 14px;
                background-size: 30px 30px;
            }

                /* 회원 배지는 레이어가 둘이라 크기도 둘로 준다 */
                #container.inquiry:not(.blog) .member_certify .l_box::before {
                    background-size: 30px 30px, cover;
                }

            #container.inquiry:not(.blog):not(.pcx) .member_certify .sub_title {
                font-size: 16px;
            }

            #container.inquiry:not(.blog) .member_certify .con_text {
                font-size: 14px;
            }

            #container.inquiry:not(.blog) .member_certify .btn_r {
                min-height: 48px;
                margin-top: 18px;
                font-size: 14px;
            }
}

/* 연락처 칩과 회원/비회원 카드가 붙어 보이던 것(390px 실측 간격 0).
   page-chrome.css 의 #container.inquiry .section > .box_area:first-child { margin-top:0 }
   (1,4,0) 이 아래 모바일 .member_certify margin-top:28px(1,3,0)을 이겨 0 이 됐다.
   PC 는 .section padding-top 32px 이 이미 간격을 만들어 그대로 둔다(1440 실측 32px).
   그 규칙은 문의 폼 화면의 중복 여백을 걷는 용도라, 이 선택 화면의 카드만 모바일에서 다시 받는다. */
@media (max-width: 768px) {
    #container.inquiry:not(.blog) .section > .member_certify.box_area:first-child {
        margin-top: 28px;
    }
}