/* ==========================================================================
   광고대행 소개 화면 — 디자인 공통 레이어

   대상은 Views/Ads 의 17개 뷰다. 내용만 다르고 마크업 어휘가 같다.
     .content-ads > ul.tabs + .wrapper > section > (.image + .texts)
     절 종류는 section-intro 16 · section-process 16 · section-contact 16
     (뒤 둘은 _AdsProcess / _AdsContact 파샬이라 한 벌만 존재한다)
   그래서 뷰를 하나도 고치지 않고 CSS 한 장으로 17개를 같이 바꾼다.
   page-chrome.css 가 51개 화면에, Auth.css 가 로그인·회원가입에 한 것과 같다.

   무엇이 이 화면을 옛날로 보이게 했나 (실측 /Ads/NaverSearch 1440)

     절 사이       padding-bottom:10vh + margin-bottom:10vh + 1px #ddd 실선
                   창 높이로 간격이 변하고, 절마다 실선이 그어진다.
                   회원가입에서 걷어낸 12vh 와 같은 문제다.
     절 안 간격     gap: 2vh 5vw          -> 창 크기에 따라 20~72px 로 출렁인다
     본문           18px / rgb(0,0,0)     -> 순수 검정은 이 사이트 어디에도 없다
     제목           h2 40px               -> 타입 스케일(…24·28·32) 밖
     보조 색        #5048d7               -> 토큰 밖 보라. 강조가 --mc-grad 와 갈린다
     소개 카드      1px #e3e6e9 / radius 8 / 배경 없음 / 그림자 없음
     상세 칩        border:1px solid(현재색) / radius 3 / slategray
     이미지         max-width 360 의 맨 이미지. 흰 바탕에 그냥 떠 있다
     과정 카드      #F4F3FE / #EBEAFF / #736CEE / #5048D7
     문의 띠        #333 바탕 + #5048d7 알약 + 30/40px

   토큰은 css/common/tokens.css 를 따른다. 값을 새로 만들지 않는다.

   이 파일은 _Layout.cshtml 에서 intro-responsive.css 보다 먼저 읽는다.
   좁은 화면 규칙이 뒤에 와야 이 레이어를 덮을 수 있다.
   ========================================================================== */

/* ---- 뿌리 ---- */
.content-ads {
    font-size: 18px;
    line-height: 1.6;
    color: var(--mc-body, #4a5468);
    letter-spacing: -.01em;
}

/* ---- 절 사이 ----
   실선을 걷고 여백으로 나눈다. 새 화면들은 절을 선으로 자르지 않는다.
   10vh 는 900px 창에서 90px, 1200px 창에서 120px 이었다. 고정값으로 묶는다. */
.content-ads .wrapper > section:not(:last-of-type) {
    padding-bottom: 96px;
    margin-bottom: 96px;
    border-bottom: 0;
}

/* .wrapper 의 위 여백을 없앤다.
   레거시는 padding: 10vh 0 이라 창 높이로 여백이 변했고(900px 창에서 90px),
   히어로를 화면 끝까지 번지게 한 뒤로는 그 90px 이 하위 탭과 히어로 사이의
   흰 틈으로 남았다. 위쪽 여백은 히어로가 자기 패딩으로 갖는다.
   아래쪽만 고정값으로 바꾼다. 좌우는 건드리지 않는다(좁은 화면 거터). */
.content-ads .wrapper {
    padding-top: 0;
    padding-bottom: 96px;
}

/* align-items 는 건드리지 않는다. .section-intro 는 flex-direction:column 이라
   center 를 주면 안쪽 카드 열이 내용 폭으로 줄어든다(실측 카드 288 -> 215px). */
.content-ads .wrapper > section {
    gap: 28px 64px;
}

/* ---- 이미지 ----
   맨 이미지가 흰 바탕에 떠 있어 어디까지가 그림인지 경계가 없었다.
   옅은 판에 앉힌다. 스와이퍼 안쪽 이미지는 건드리지 않는다
   (슬라이드마다 판이 생기면 오히려 시끄럽다). */
.content-ads .wrapper > section > .image {
    box-sizing: border-box;
    max-width: 452px;
    padding: 28px;
    background: var(--mc-tint, #f4f7fe);
    border: 1px solid var(--mc-border, #e7ebf5);
    border-radius: var(--mc-radius-lg, 20px);
}

    /* 세로로 쌓이는 절에서는 상한을 푼다.
       앱광고(.content-ads.apps section { flex-direction: column })와 .vertical 이
       그렇다. 글과 나란히 놓이지 않으므로 452px 로 묶을 이유가 없고,
       원본이 가로로 긴 화면 갈무리(토스 1129x518, 버즈빌 1149x474,
       당근 4047x2129)라 452 로 묶으면 알아볼 수 없게 작아졌다. */
    .content-ads.apps .wrapper > section > .image,
    .content-ads .wrapper > section.vertical > .image {
        max-width: 100%;
    }

    /* 뷰가 이미지에 인라인 style 로 음수 마진을 주는 곳이 있다
       (NaverSearch: margin-bottom:-5vh). 판 안에서는 그만큼 삐져나온다.
       인라인은 !important 로만 이긴다. */
    .content-ads .wrapper > section > .image > img {
        margin: 0 !important;
        max-width: 100%;
        height: auto;
    }

/* ---- 글 ---- */
.content-ads .wrapper > section > .texts {
    flex: 1 1 380px;
    gap: 20px;
}

    /* 세로로 쌓이는 절에서는 basis 380px 이 폭이 아니라 높이로 먹는다.
       내용이 110px 인 글 묶음이 380px 로 늘어나 아래에 빈 자리가 생겼다
       (실측 .section-spec: 절 573px 중 글 묶음이 380px). 이 절들에서는 푼다. */
    .content-ads .wrapper > section.section-intro > .texts,
    .content-ads .wrapper > section.section-spec > .texts,
    .content-ads .wrapper > section.vertical > .texts,
    .content-ads.apps .wrapper > section > .texts {
        flex: 0 0 auto;
    }

.content-ads h2 {
    font-size: 32px;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -.03em;
    color: var(--mc-ink, #0b1220);
}

    /* 제목 밑 한 줄짜리 유형 표기(파워링크 유형 등) */
    .content-ads h2 + small {
        font-size: 14px;
        font-weight: 700;
        letter-spacing: 0;
        color: var(--mc-blue, #2b5bff);
    }

.content-ads h3 {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--mc-ink, #0b1220);
}

.content-ads .texts p {
    font-size: 16px;
    color: var(--mc-body, #4a5468);
}

/* ---- 상세 칩 ----
   border:1px solid 만 적어 두어 테두리가 글자색(slategray)을 따라갔다.
   radius 3 도 스케일 밖이다. */
.content-ads strong.details {
    gap: 6px;
    padding: 2px 0;
}

    .content-ads strong.details span {
        padding: 5px 10px;
        font-size: 13px;
        font-weight: 600;
        color: var(--mc-body, #4a5468);
        background: var(--mc-tint, #f4f7fe);
        border: 1px solid var(--mc-border, #e7ebf5);
        border-radius: var(--mc-radius-xs, 6px);
    }

/* ---- 설명 목록(.info) ----
   레거시 값은 #f3f6f9 / #636669 / radius 1rem 으로 토큰 밖이다.
   비즈보드의 '노출지면' 이 이미 쓰고 있고, 아래 .section-spec 도 같이 쓴다. */
.content-ads .info {
    gap: 10px;
    padding: 22px 24px;
    font-size: 15px;
    line-height: 1.65;
    color: var(--mc-body, #4a5468);
    background-color: var(--mc-tint, #f4f7fe);
    border: 1px solid #e2e8f6;
    border-radius: var(--mc-radius, 16px);
}

    .content-ads .info strong {
        font-weight: 700;
        color: var(--mc-ink, #0b1220);
    }

/* ---- 설명만 있는 절 ----
   그림 없이 제목 + 설명 + 목록으로만 이뤄진 절. 글줄이 1200px 을 다 쓰면
   읽기 어려우므로 폭을 묶고 가운데로 모은다. */
.content-ads .wrapper > section.section-spec {
    flex-direction: column;
    align-items: center;
    gap: 26px;
}

    .content-ads .section-spec > .texts {
        align-items: center;
        max-width: 760px;
        text-align: center;
    }

        /* 눈썹 글씨(노출지면 · 소재 · 랜딩 …). h2 앞에 오는 형태라
           h2 + small 규칙이 닿지 않아 여태 기본값으로 남아 있었다.
           매체 색을 쓰지 않는다 — 카카오 노랑(#FEE500)은 흰 바탕 대비가 1.2 라
           글자로 쓰면 읽히지 않는다. 매체 색은 장식 면에만 쓴다. */
        .content-ads .texts > div > small {
            display: block;
            margin-bottom: 6px;
            font-size: 13px;
            font-weight: 700;
            letter-spacing: .02em;
            color: var(--mc-blue, #2b5bff);
        }

    .content-ads .section-spec > .info {
        box-sizing: border-box;
        width: 100%;
        max-width: 880px;
    }

/* ==========================================================================
   첫 절: 소개 — 페이지별 히어로

   17개가 같은 마크업이라 지금까지 화면마다 구분되는 데가 없었다.
   맨 위 절을 판으로 세우고, 그 판의 색만 매체별로 바꾼다.

   매체별 브랜드 색을 한동안 썼다가 걷었다. 화면마다 색이 달라지니 사이트가
   여러 곳처럼 보이고, 카카오 노랑(#FEE500)처럼 흰 바탕에서 못 쓰는 색이
   섞여 규칙도 갈렸다. 모든 화면이 사이트 색 하나를 쓴다.

   뷰의 매체 클래스(naver · kakao · google · gmarket · eleventh · coupang · apps)는
   지우지 않고 둔다. 나중에 화면별로 무언가를 달리할 일이 생기면 그대로 쓰면 된다.
   지금은 아무 규칙도 걸려 있지 않다.

   /Ads/Gmarket 은 .content-ads 를 쓰지 않는 자체 체계(gm-*)라 여기 해당 없다.
   ========================================================================== */
.content-ads {
    --ads-brand: var(--mc-blue, #2b5bff);
    --ads-brand-rgb: 43, 91, 255;
}

/* .section-intro 는 화면마다 자식이 다르다(.texts 만 있는 곳 12개,
   .texts + ul 2개, h2 가 직계인 곳 3개). 절 자체를 히어로로 삼으면 셋 다 받는다.

   번짐은 화면 끝까지 간다. 처음에는 본문 열(1200) 안에 둥근 판으로 뒀는데
   상자로 읽혀서, /Ads/Gmarket 의 히어로(.gm-hero-aurora, 화면 밖까지 번진다)와
   말이 달랐다. 여기도 같은 말로 맞춘다.

   100vw 는 세로 스크롤바 폭까지 포함해서 그만큼 가로가 넘칠 수 있다.
   .content-ads 에 overflow-x: clip 을 건다. clip 은 hidden 과 달리 스크롤
   컨테이너를 만들지 않으므로 안쪽 하위 탭의 sticky 가 그대로 산다. */
.content-ads {
    overflow-x: clip;
}

.content-ads .wrapper > section.section-intro {
    position: relative;
    gap: 44px;
}

    /* 절 사이 여백(96px)은 번짐 밖에 둔다. 안쪽 여백만 여기서 준다. */
    /* :not(:last-of-type) 를 뗐다(2026-09-29). 예전엔 뒤에 운영 프로세스 절이 늘 있어 조건이 항상 참이었는데,
       프로세스를 하단 장면(_AdsContact)으로 옮기자 첫 절 하나뿐인 화면(실적 최대화 캠페인)에서 여백이 사라졌다. */
    .content-ads .wrapper > section.section-intro {
        padding: 74px 0 78px;
    }

    /* 화면 끝까지 가는 번짐. 매체 색을 쓰는 두 면 중 하나다. */
    .content-ads .wrapper > section.section-intro::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 50%;
        width: 100vw;
        margin-left: -50vw;
        background-color: var(--mc-tint, #f4f7fe);
        background-image:
            linear-gradient(180deg, rgba(255, 255, 255, 0) 58%, rgba(255, 255, 255, .9) 100%);
        pointer-events: none;
    }


        /* ::before 가 흐름 뒤가 아니라 앞에 깔리므로 내용은 한 층 올린다 */
        .content-ads .wrapper > section.section-intro > * {
            position: relative;
            z-index: 1;
        }

    .content-ads .section-intro h2 {
        font-size: 36px;
    }

    .content-ads .section-intro > div {
        gap: 40px;
    }

    .content-ads .section-intro ul {
        gap: 20px;
    }

        /* 카드 안 두 줄은 한 문장을 끊어 놓은 것이다. bundle.css 가
           .content-ads .section-intro p 에 flex column + gap:1rem 을 걸어
           줄 높이 22.5px 짜리 두 줄이 39px 간격으로 놓였다(실측) — 문단 사이만큼
           벌어져 별개 문장처럼 읽혔다. 줄 간격은 line-height 가 정한다.

           또 카드는 한 줄에서 높이를 맞추느라 제 내용(191)보다 컸고(238),
           남는 47px 이 전부 글자 아래로 몰려 카드 아래가 비었다
           (위 48 · 원↔글자 18 · 글자 아래 78). 파란 원이 li::before 로
           top:32px 에 고정돼 있어 내용 전체를 가운데로 옮길 수는 없다.
           글자가 남는 자리를 차지하고 그 안에서 가운데에 서게 한다. */
        .content-ads .section-intro ul li p {
            gap: 0;
            flex: 1;
            justify-content: center;
        }

        /* 테두리만 있던 칸을 카드로 세운다 */
        .content-ads .section-intro ul li {
            gap: 18px;
            padding: 32px 22px;
            font-size: 15px;
            line-height: 1.55;
            color: var(--mc-body, #4a5468);
            background: var(--mc-surface, #fff);
            border: 1px solid var(--mc-border, #e7ebf5);
            border-radius: var(--mc-radius, 16px);
            box-shadow: var(--mc-shadow-card, 0 8px 24px -8px rgba(25, 31, 40, .08));
        }

            /* 아이콘 원본이 fill="#e3e3e3" 단색 패스라 흰 바탕에서도 거의 안 보였다.
               광고문의 회원 카드가 이미 쓰는 방식 — 파란 원에 흰 아이콘 — 으로 맞춘다.

               img 라서 fill 을 바꿀 수 없어 brightness(0) 으로 검게 만든 뒤
               invert 로 흰색을 얻는다(원본 색과 무관하게 같은 결과다). 다만 filter 는
               그 요소의 배경·그림자까지 함께 처리하므로, 같은 요소에 파란 배경을 주면
               그것도 흰색이 되어 원이 사라진다. 원은 li::before 로 따로 그린다.
               ::before 는 absolute 라 flex 아이템이 되지 않는다. */
            .content-ads .section-intro ul li {
                position: relative;
            }

                .content-ads .section-intro ul li::before {
                    content: "";
                    position: absolute;
                    top: 32px;
                    left: 50%;
                    width: 64px;
                    height: 64px;
                    margin-left: -32px;
                    background: var(--mc-blue, #2b5bff);
                    border-radius: 50%;
                    box-shadow: 0 10px 22px -10px rgba(43, 91, 255, .55);
                }

            .content-ads .section-intro ul li img {
                position: relative;
                z-index: 1;
                width: 34px;
                height: 34px;
                /* 34 + 15*2 = 64 = 원 지름 */
                margin: 15px 0;
                filter: brightness(0) invert(1);
            }

/* ---- 하위 탭 ----
   회색 띠(#f3f6f9)에 글자만 진해지던 것을, 상단 탭(page-chrome.css)과 같은
   말로 바꾼다 — 흰 띠에 글자 폭 밑줄. 붙는 위치는 intro-responsive.css 가 정한다. */
.content-ads .tabs {
    gap: 26px;
    padding: 0 20px;
    background-color: var(--mc-surface, #fff);
    border-bottom: 1px solid var(--mc-border, #e7ebf5);
    box-shadow: var(--mc-shadow-xs, 0 1px 2px rgba(11, 18, 32, .05));
}

    .content-ads .tabs li {
        position: relative;
        padding: 14px 6px;
        font-size: 15px;
        font-weight: 500;
        line-height: 20px;
        color: var(--mc-body, #4a5468);
    }

        /* 레거시가 content:none 으로 껐던 표시선을 되살린다 */
        .content-ads .tabs li::before {
            content: "";
            left: 0;
            width: 100%;
            height: 3px;
            border-radius: 3px 3px 0 0;
            background-color: transparent;
            transform: none;
            transition: background-color .15s ease;
        }

        .content-ads .tabs li:hover:not(.active)::before {
            background-color: var(--mc-border, #e7ebf5);
        }

        .content-ads .tabs li:hover,
        .content-ads .tabs li.active {
            font-weight: 700;
            color: var(--mc-ink, #0b1220);
        }

        .content-ads .tabs li.active::before {
            background-color: var(--mc-ink, #0b1220);
        }

/* ==========================================================================
   마감 구역 — 운영 프로세스 + 광고 상담

   왜 어둡게, 왜 하나로

   여태 네 번 고쳤지만 전부 '밝은 바탕에 얇은 내용을 어떻게 배치할까' 안에서만
   움직였다. 문제의 뿌리는 배치가 아니라 내용이 얇다는 것이다 — 단계마다 두 줄,
   요약 한 줄, 선언 두 줄이 전부인데 1200px 에 펴 놓으니 무엇을 해도 성겼다.

   바탕을 어둡게 하면 같은 내용이 훨씬 무겁게 앉는다. 이 사이트의 제품 화면
   (순위추적 · 스마트MD · 자동입찰)이 이미 검정 바탕을 쓰므로 새 언어가 아니다.
   연한 라벤더 3D 그림도 흰 바탕에서는 흐렸는데 어두운 바탕에서는 또렷해진다
   (상담 폼에서 같은 판단을 했다).

   프로세스와 상담은 붙어 있는 두 절이다. 하나로 묶으면 페이지가
   '내용(밝음) -> 마감(어두움)' 두 막으로 정리된다. 지금까지는 밝은 띠 ->
   어두운 띠로 배경이 두 번 바뀌었다.

   함께 사라지는 것
     왼쪽 열 아래 2/3 가 비던 것 (2열을 버리고 제목을 가로로)
     줄 안에서 제목과 그림 사이가 500px 넘게 비던 것 (세로 배치)
   ========================================================================== */

/* 두 절 사이에 흰 틈이 생기지 않게 한다 */
.content-ads .wrapper {
    padding-bottom: 0;
}

.content-ads .wrapper > section.section-process {
    position: relative;
    display: block;
    /* 아래도 위와 같게. 한때 40 — 이 절과 광고 상담 띠가 한 잉크 구역이던 때의 값이라,
       밝은 절로 돌아간 뒤에는 회색 판이 글 바로 아래서 잘리고 광원 띠가 들이닥쳐 뚝 끊겨 보였다. */
    padding: 104px 0 104px;
}

    /* 화면 끝까지 가는 판.
       한때 잉크(#0b1220)였다. 바로 아래 .section-contact 도 같은 잉크라
       프로세스 519 + CTA 341 = 860px 가 경계 없이 한 덩어리 검정으로 읽혔고
       닫는 CTA 가 전혀 도드라지지 않았다(실측 1440, 두 띠 사이 간격 0).
       내용은 밝게 · 닫는 CTA 만 어둡게 — 메인 화면과 같은 리듬으로 되돌린다.
       아래 글자·아이콘 색도 함께 뒤집었다. */
    .content-ads .wrapper > section.section-process::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 50%;
        z-index: 0;
        width: 100vw;
        margin-left: -50vw;
        /* 바탕은 페이지 머리 절 · 목업 판과 같은 연파랑 틴트. 한때 중립 회색 #f7f8f9 였는데
           이 페이지의 밝은 면이 모두 차가운 파랑 계열이라 이 판만 탁해 보였고, 아래쪽 광원(파랑)과도
           판 안에서 온도가 갈렸다. */
        background-color: #f4f7fe;
        /* 아래 광고 상담 띠(청록 · 파랑 · 보라 광원)로 넘어가는 다리. 판 아래쪽에만 같은 세 광원을
           18% 로 옅게 비추고 바탕을 한 단 내려(#ecf0fb), 회색 판에서 광원 띠로 뚝 끊기지 않게 한다.
           10% 는 거의 보이지 않아 다리 역할을 못 했다. 위쪽 절반은 그대로 #f4f7fe. */
        /* (2026-09-29) 청록 · 보라까지 세 색을 비췄더니 밝은 바탕에서는 빛이 아니라 얼룩으로 읽혔다
           (PC 는 좌우 아래에 따로 뭉치고, 모바일은 보라가 5단계 옆에 걸렸다). 세 색은 CTA 안에만 두고
           여기서는 파랑 한 가지를 판 아래 30% 안쪽에 12% 로만 비춘다. */
        background-image:
            radial-gradient(70% 30% at 50% 100%, rgba(37, 99, 255, .12) 0%, rgba(37, 99, 255, 0) 100%),
            linear-gradient(180deg, #f4f7fe 0%, #f4f7fe 55%, #ecf0fb 100%);
        pointer-events: none;
    }

    .content-ads .wrapper > section.section-process > * {
        position: relative;
        z-index: 1;
    }

/* ---- 제목 ---- */
.content-ads .section-process header {
    align-items: center;
    gap: 6px;
    margin: 0 0 56px;
    text-align: center;
    font-size: 18px;
}

    /* 34 -> 32. 광고대행 H2 가 36(머리말) / 32(절 제목) / 34(여기) 세 크기였다.
       34 는 같은 '절 제목' 인데 32 와 2px 차이라 화면을 옮길 때만 들썩였다. */
    .content-ads .section-process header h2 {
        gap: 4px;
        font-size: 32px;
        line-height: 1.25;
        text-align: center;
        word-break: keep-all;
    }

        .content-ads .section-process header h2 > span {
            font-weight: 500;
            color: var(--mc-muted, #7c87a0);
        }

        .content-ads .section-process header strong {
            font-weight: 800;
            color: var(--mc-ink, #0b1220);
        }

/* ---- 다섯 칸 — 번호 · 그림 · 제목 ----
   마크업은 small(Step N) · strong(제목) · img 순서다. 보이는 순서는
   번호 -> 라벨 -> 그림 -> 제목 이라 order 로 세운다. 누를 수 있는 것이 없어
   키보드 순서에 영향이 없다. */
.content-ads .section-process .process {
    counter-reset: gm-step;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0 20px;
    padding: 0;
}

    .content-ads .section-process .process li {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0;
        aspect-ratio: auto;
        min-height: 0;
        margin: 0;
        padding: 0;
        text-align: center;
        background: none;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        overflow: visible;
    }

        /* 01 ~ 05. 빈 자리를 번호가 채운다. */
        #container .content-ads .section-process .process li::before {
            counter-increment: gm-step;
            content: counter(gm-step, decimal-leading-zero);
            order: 1;
            position: static;
            width: auto;
            height: auto;
            margin: 0;
            border: 0;
            border-radius: 0;
            transform: none;
            background: none;
            /* 큰 번호는 46px 800 이라 3:1 이면 된다. .22 는 1.98 이었다. */
            color: #c3cad8;
            font-size: 46px;
            font-weight: 800;
            line-height: 1;
            letter-spacing: -.05em;
            box-shadow: none;
        }

        .content-ads .section-process .process li small {
            order: 2;
            align-self: center;
            height: auto;
            margin: 10px 0 0;
            padding: 0;
            border-radius: 0;
            background: none;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: .06em;
            text-transform: uppercase;
            /* 11px 이라 4.5 가 필요하다. .34 는 3.08 이었다. */
            color: var(--mc-muted, #7c87a0);
        }

        /* #container 를 붙인다. responsive-base.css 가 1240 이하에서
           #container img { height: auto } 를 걸어 두는데 id 가 붙어 특이도가
           높다. 클래스만 쓰면 그 구간에서만 높이가 풀린다. */
        /* 그림을 아이콘으로 바꿨다.
           원래 쓰던 3D 일러스트(process_1~5.png)는 흰 바탕을 전제로 그려
           밝은 회색 그림자가 구워져 있다. 검정 위에 바로 놓으면 겉돌고,
           흰 판에 앉히면 '흰 네모 다섯 개'로 보였다. 다섯 장의 각도와 조명도
           서로 달라 한 줄로 서면 들쭉날쭉했다.

           이 사이트가 이미 쓰는 아이콘(Content/images/ads/ico_*.svg, Material
           Symbols 한 벌)으로 바꾼다. 같은 굵기 · 같은 시점이라 다섯이 한 벌로
           읽히고, 단색 패스라 흰색으로 돌려 어두운 판에 그대로 앉는다.
           fill 을 바꿀 수 없으니 brightness(0) 로 검게 만든 뒤 invert 로
           흰색을 얻는다 — 원본 색과 무관하게 같은 결과다. filter 는 배경까지
           처리하므로 원은 li::after 로 따로 그린다. */
        /* 원은 아이콘을 감싼 span 이 그린다.
           처음에는 li::after 를 절대 배치해 원을 그리고 아이콘은 흐름에
           두었는데, margin-top 은 li 상단이 아니라 제 흐름 위치에서 재는
           값이라 아이콘이 원 아래로 70px 쯤 내려가 따로 놀았다.
           span 으로 감싸면 원과 아이콘이 같은 상자가 되어 어긋날 일이 없고,
           좁은 화면의 그리드 배치도 한 칸으로 끝난다. */
        /* 클래스 이름에 주의. 레거시 번들에 .ico { min-height: 90px } 가 있어
           처음 쓴 .ico 는 원이 세로로 늘어난 타원이 됐다. */
        .content-ads .section-process .process li .step-icon {
            order: 3;
            display: flex;
            align-items: center;
            justify-content: center;
            box-sizing: border-box;
            width: 68px;
            height: 68px;
            margin: 24px 0 20px;
            border-radius: 50%;
            background-color: #fff;
            border: 1px solid var(--mc-border, #e7ebf5);
            box-shadow: 0 6px 16px -8px rgba(11, 18, 32, .18);
        }

        #container .content-ads .section-process .process li .step-icon img {
            /* 레거시가 이 img 를 li 오른쪽 아래에 절대 배치한다(130px 짜리
               일러스트 자리였다). 풀지 않으면 아이콘만 상자 밖으로 나간다. */
            position: static;
            width: 32px;
            height: 32px;
            margin: 0;
            padding: 0;
            /* SVG 의 fill 은 바깥에서 못 바꾼다. brightness(0) 으로 검게 만든다.
               (판이 어둡던 때는 뒤에 invert 를 붙여 흰색을 얻었는데, 판이
               밝아지면서 흰 원 위에 흰 아이콘이 되어 사라졌다.)
               filter 는 제 배경까지 처리하므로 원은 span 이 따로 그린다. */
            filter: brightness(0);
            opacity: .82;
        }

        /* 레거시가 단계 사이에 꺾쇠를 그린다. 이 판에서는 쓰지 않는다. */
        .content-ads .section-process .process li::after {
            content: none;
        }

        .content-ads .section-process .process li strong {
            order: 4;
            /* 04 만 한 줄이라 설명 줄 시작이 혼자 올라갔다. 두 줄을 비워 둔다. */
            min-height: 2.9em;
            font-size: 18px;
            font-weight: 700;
            line-height: 1.45;
            letter-spacing: -.02em;
            color: var(--mc-ink, #0b1220);
        }

        /* 설명 한 줄. 단계마다 두 줄뿐이던 것을 채운다. */
        .content-ads .section-process .process li p {
            order: 5;
            max-width: 210px;
            margin: 10px auto 0;
            font-size: 14px;
            line-height: 1.6;
            letter-spacing: -.02em;
            color: var(--mc-body, #4a5468);
        }

        /* 레거시는 4·5 에만 따로 손을 댄다 —
             margin-left: 2.5rem, 보라 배경
             ::before  삼각형(content:"", position:absolute, width/height 0,
                       border-left: .75rem solid, transform)
             strong    color: white     small  color: #C1BDFF
           :nth-of-type 이 붙어 기본 규칙보다 특이도가 높다. 하나씩 되돌린다.
           (이 판에서는 글자가 원래 흰색이라 strong 은 문제가 안 되지만,
            content 와 자리는 그대로 두면 04·05 번호가 사라진다.) */
        .content-ads .section-process .process li:nth-of-type(4),
        .content-ads .section-process .process li:nth-of-type(5) {
            margin-left: 0;
            background: none;
        }

            #container .content-ads .section-process .process li:nth-of-type(4)::before,
            #container .content-ads .section-process .process li:nth-of-type(5)::before {
                content: counter(gm-step, decimal-leading-zero);
                position: static;
                top: auto;
                left: auto;
                width: auto;
                height: auto;
                border: 0;
                transform: none;
            }

            .content-ads .section-process .process li:nth-of-type(4) small,
            .content-ads .section-process .process li:nth-of-type(5) small {
                color: var(--mc-muted, #7c87a0);
            }

            /* bundle.css 가 4·5 번 제목만 color:white 로 따로 잡는다(레거시에서
               이 둘이 어두운 카드였다). 판이 밝아졌으니 나머지와 같은 잉크로. */
            .content-ads .section-process .process li:nth-of-type(4) strong,
            .content-ads .section-process .process li:nth-of-type(5) strong {
                color: var(--mc-ink, #0b1220);
            }

/* ---- 요약 ---- */
.content-ads .section-process .info {
    display: block;
    box-sizing: border-box;
    max-width: 760px;
    margin: 56px auto 0;
    padding: 0;
    text-align: center;
    font-size: 16px;
    line-height: 1.65;
    color: var(--mc-body, #4a5468);
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

    .content-ads .section-process .info strong {
        font-weight: 700;
        color: var(--mc-ink, #0b1220);
    }

/* ---- 광고 상담 — 같은 구역의 마지막 줄 ---- */
.content-ads .section-contact {
    position: relative;
    background-color: var(--mc-ink, #0b1220);
    background-image: none;
}

    /* 글 위, 버튼 아래, 가운데. 마지막 절이라 좌우로 벌리는 것보다
       가운데로 모으는 편이 마무리로 읽힌다. */
    .content-ads .section-contact .wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 34px;
        /* 위아래 같게. 한때 56 / 104 였다 — 위 프로세스 절이 같은 잉크 띠였을 때
           그 아래 여백 40 과 더해 96 으로 아래(104)와 맞춘 값이다. 프로세스가 밝은 절로
           돌아가고 이 띠가 광원을 가진 독립 띠가 되며 위만 좁아 보였다. 합(160)은 그대로. */
        padding-top: 80px;
        padding-bottom: 80px;
    }

    .content-ads .section-contact h3 {
        align-items: center;
        gap: 12px;
        margin: 0;
        text-align: center;
    }

        .content-ads .section-contact h3 span {
            font-size: 17px;
            font-weight: 400;
            letter-spacing: -.01em;
            color: rgba(255, 255, 255, .58);
        }

        .content-ads .section-contact h3 span:last-child,
        .content-ads .section-contact h3 strong {
            font-size: 38px;
            font-weight: 800;
            line-height: 1.2;
            letter-spacing: -.04em;
            color: #fff;
        }

    .content-ads .section-contact a {
        display: inline-flex;
        flex: none;
        align-items: center;
        justify-content: center;
        height: 64px;
        padding: 0 48px;
        font-size: 17px;
        font-weight: 700;
        letter-spacing: -.01em;
        color: #fff;
        border-radius: var(--mc-radius-pill, 999px);
        background: var(--mc-grad, linear-gradient(96deg, #2b5bff 8%, #7c3aed 92%));
        box-shadow: 0 16px 36px -14px rgba(76, 104, 255, .9);
        transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
    }

        .content-ads .section-contact a:hover {
            transform: translateY(-2px);
            filter: brightness(1.06);
            box-shadow: 0 22px 44px -14px rgba(76, 104, 255, 1);
        }

        .content-ads .section-contact a:active {
            transform: translateY(0);
        }

/* ---- 스와이퍼 ----
   점과 화살표만 토큰 색으로. 슬라이드 안쪽은 건드리지 않는다.
   레거시가 점에 !important 를 박아 뒀다. */
.content-ads .swiper .swiper-pagination-bullet-active {
    background: var(--mc-blue, #2b5bff) !important;
}

/* 누르는 면
   점은 8x8 이고 서로 8px 떨어져 있었다(실측 8개 화면 전부). 보이는 크기는
   그대로 두고 누르는 면만 넓힌다 — 상담 폼 닫기 버튼과 같은 방식이다.
   점 사이를 8 -> 20 으로 벌려야 옆 점의 누르는 면과 겹치지 않는다
   (중심 간 거리 16 -> 28, 누르는 면 28 이므로 딱 닿는다). */
/* 간격은 margin 으로 못 준다. Swiper 11 의
     .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet
   이 3 클래스로 내 규칙과 특이도가 같은데, 그 CSS 는 뷰 안에서 CDN 으로
   나중에 읽혀 동점일 때 이긴다. Swiper 가 읽는 변수로 준다. */
.content-ads .swiper {
    --swiper-pagination-bullet-horizontal-gap: 10px;
}

.content-ads .swiper .swiper-pagination-bullet {
    position: relative;
}

    .content-ads .swiper .swiper-pagination-bullet::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 28px;
        height: 32px;
        transform: translate(-50%, -50%);
    }

/* 화살표는 Swiper 기본값이 27x44 다(--swiper-navigation-size 44 에서 폭만
   27 로 줄인 값). 세로는 되는데 가로가 모자란다. 44 로 맞춘다. */
.content-ads .swiper .swiper-button-prev,
.content-ads .swiper .swiper-button-next {
    width: 44px;
    height: 44px;
}

.content-ads .swiper .swiper-button-prev::after,
.content-ads .swiper .swiper-button-next::after {
    font-size: 1.5rem;
    color: var(--mc-blue, #2b5bff);
}

/* ==========================================================================
   거터 — 769~1240 구간에 좌우 여백이 없었다

   본문 열은 1200px 고정이고, 그보다 좁아지면 화면 폭을 그대로 쓴다.
   좌우 여백은 768 이하에서만 16px 이 들어와, 834 · 1024 같은 태블릿 폭에서는
   글이 화면 끝에 딱 붙었다(실측 834: 본문 글 left 0).
   CTA 의 .wrapper 는 반대로 내용 폭까지 쪼그라들었다(실측 1240: 613px).
   둘 다 한 곳에서 맞춘다.
   ========================================================================== */
@media (max-width: 1240px) {

    .content-ads > .wrapper,
    .content-ads .section-contact > .wrapper {
        box-sizing: border-box;
        /* responsive-base.css 가 body .wrapper 에 width 를 !important 로 박아 둔다
           (그 파일에 이유가 적혀 있다). !important 는 !important 로만 이긴다.
           이것이 없으면 CTA 의 .wrapper 가 내용 폭까지 쪼그라든다
           (실측 834: 669px — 글과 버튼을 합친 너비). */
        width: 100% !important;
        max-width: var(--mc-content, 1200px);
        margin-left: auto;
        margin-right: auto;
        padding-left: 28px;
        padding-right: 28px;
    }
}

@media (max-width: 768px) {

    .content-ads > .wrapper,
    .content-ads .section-contact > .wrapper {
        padding-left: 18px;
        padding-right: 18px;
    }

    /* intro-responsive.css 가 이 폭에서 .content-ads .wrapper 에
       padding: 6vh 1rem 을 준다. 축약이라 아래 여백이 되살아나 마감 구역
       한가운데(프로세스와 상담 사이)에 흰 틈이 생긴다(실측 60px). */
    .content-ads > .wrapper {
        padding-bottom: 0;
    }

    /* 같은 파일이 .content-ads .section-contact 에 padding: 6vh 0 도 준다.
       1000px 창에서 60px 이라 요약 줄과 CTA 사이가 72 가 아니라 132 가 됐다.
       위아래 여백은 안쪽 .wrapper 가 정하므로 절에서는 걷어낸다. */
    /* #container 를 붙인다. 특이도가 같으면 나중에 실리는 파일이 이긴다. */
    #container .content-ads .section-contact {
        padding-top: 0;
        padding-bottom: 0;
    }
}

/* ==========================================================================
   좁은 화면 — 세로 리듬만 줄인다. 나머지는 intro-responsive.css 가 정한다.
   ========================================================================== */
@media (max-width: 1024px) {

    .content-ads .wrapper > section:not(:last-of-type) {
        padding-bottom: 64px;
        margin-bottom: 64px;
    }

    /* 히어로 안쪽 여백은 특이도가 높아 위 폭별 규칙이 덮지 못한다. 직접 준다. */
    .content-ads .wrapper > section.section-intro {
        gap: 34px;
    }

        .content-ads .wrapper > section.section-intro {
            padding: 56px 0 58px;
        }

    /* 다섯 칸을 한 열로 내린다. 같은 어두운 판 위에 세로 목록이 된다.
       5칸을 그대로 두면 한 칸이 60px 이라 '광고 / 의뢰 / 광고 / 설계' 처럼
       글자 단위로 꺾인다(390 실측). */
    .content-ads .wrapper > section.section-process {
        /* 위 :not(:last-of-type) 규칙이 주는 margin-bottom: 64px 가
           같은 어두운 구역 안의 절 사이에 그대로 얹혀 136px 이 됐다. */
        margin-bottom: 0;
        padding: 64px 0 64px;
    }

    .content-ads .section-process header {
        margin-bottom: 32px;
    }

        .content-ads .section-process header h2 {
            font-size: 26px;
        }

    .content-ads .section-process .process {
        grid-template-columns: 1fr;
        gap: 0;
    }

        .content-ads .section-process .process li {
            display: grid;
            /* 2행이다. 1행은 번호 · 제목, 2행은 STEP 라벨 · 설명.
               제목을 1~2행에 걸치게 두면 한 줄짜리 04 만 설명과의 간격이
               혼자 20px 벌어진다(행 높이를 번호+라벨이 정하기 때문). */
            grid-template-columns: 56px 1fr 62px;
            grid-template-rows: auto auto;
            align-items: start;
            column-gap: 14px;
            padding: 16px 0;
            text-align: left;
            border-top: 1px solid rgba(255, 255, 255, .1);
        }

            .content-ads .section-process .process li:last-child {
                border-bottom: 1px solid rgba(255, 255, 255, .1);
            }

            #container .content-ads .section-process .process li::before {
                grid-column: 1;
                grid-row: 1 / span 2;
                align-self: center;
                font-size: 28px;
            }

            /* 좁은 화면에서는 'STEP 1' 을 뺀다. 바로 위 '01' 과 같은 말이고,
               둘을 세로로 쌓으면 제목 줄 수에 따라 라벨 위치가 행마다 달라진다.
               데스크톱은 자리가 넉넉해 그대로 둔다. */
            .content-ads .section-process .process li small {
                display: none;
            }

            .content-ads .section-process .process li strong {
                grid-column: 2;
                grid-row: 1;
                /* 여기서는 줄 수가 달라도 그리드가 맞춰 주므로 필요 없다.
                   남겨 두면 행 높이만 늘어난다. */
                min-height: 0;
                font-size: 16px;
            }

            .content-ads .section-process .process li .step-icon {
                grid-column: 3;
                grid-row: 1 / span 2;
                width: 52px;
                height: 52px;
                margin: 0;
                justify-self: end;
                align-self: center;
            }

            #container .content-ads .section-process .process li .step-icon img {
                width: 24px;
                height: 24px;
            }

            .content-ads .section-process .process li p {
                grid-column: 2;
                grid-row: 2;
                max-width: none;
                margin: 4px 0 0;
                font-size: 13px;
                text-align: left;
            }

    .content-ads .section-process .info {
        margin-top: 36px;
        font-size: 14px;
    }

    /* 좌우 여백은 거터 절이 정하므로 longhand 만 쓴다. */
    .content-ads .section-contact .wrapper {
        gap: 28px;
        /* 위아래 같게(한때 40 / 72, 합 112 유지) */
        padding-top: 56px;
        padding-bottom: 56px;
    }

        .content-ads .section-contact h3 span:last-child,
        .content-ads .section-contact h3 strong {
            font-size: 26px;
        }

        .content-ads .section-contact a {
            /* 100% 만 주면 1024 에서 966px 짜리 띠가 된다. 좁은 화면에서
               폭을 꽉 채우는 건 390 까지다. */
            width: 100%;
            max-width: 340px;
            height: 56px;
            padding: 0;
        }


    .content-ads h2,
    .content-ads .section-intro h2,
    .content-ads .section-process header h2,
    .content-ads .section-contact h3 strong {
        font-size: 26px;
    }
}

@media (max-width: 768px) {

    .content-ads .wrapper > section:not(:last-of-type) {
        padding-bottom: 48px;
        margin-bottom: 48px;
    }

    .content-ads .wrapper > section > .image {
        max-width: 100%;
        padding: 18px;
    }

    .content-ads .wrapper {
        padding-bottom: 56px;
    }

    .content-ads .wrapper > section.section-intro {
        gap: 28px;
    }


        .content-ads .wrapper > section.section-intro {
            padding: 44px 0 46px;
        }


    .content-ads .section-intro ul li {
        padding: 24px 18px;
    }

        /* 원은 li 의 위 패딩에 맞춰 그리고 한 단 줄인다.
           아이콘 크기는 intro-responsive.css 가 32px 로 맞춘다. */
        .content-ads .section-intro ul li::before {
            top: 24px;
            width: 60px;
            height: 60px;
            margin-left: -30px;
        }



    .content-ads h2,
    .content-ads .section-intro h2,
    .content-ads .section-process header h2,
    .content-ads .section-contact h3 strong {
        font-size: 24px;
    }
}

/* ---- 광고 상담 띠 — 메인 문의 밴드와 같은 광원 (2026-09-28) ----
   잉크 단색(#0b1220)이 바로 아래 푸터(같은 남색)와 한 덩어리로 읽혀 닫는 CTA 가 서지 않았다.
   메인 .mcx .contact 와 같은 청록 · 파랑 · 보라 광원을 깔아 푸터와 가르고, 사이트의 마지막
   장면을 메인과 맞춘다. 광원 위에서는 그라데이션 버튼이 묻혀 흰 알약 + 잉크 글자로 바꾼다. */
.content-ads .section-contact {
    overflow: hidden;
    isolation: isolate;
    background-color: #0a0d14;
}

    .content-ads .section-contact::before {
        content: "";
        position: absolute;
        inset: -20%;
        z-index: -1;
        pointer-events: none;
        background:
            radial-gradient(52% 58% at 18% 72%, #16c8e0 0%, rgba(22, 200, 224, 0) 62%),
            radial-gradient(48% 52% at 44% 46%, #2563ff 0%, rgba(37, 99, 255, 0) 64%),
            radial-gradient(46% 56% at 78% 26%, #8b3ce8 0%, rgba(139, 60, 232, 0) 62%),
            radial-gradient(40% 44% at 92% 84%, #4a20a8 0%, rgba(74, 32, 168, 0) 66%),
            #0a0d14;
        filter: saturate(1.08);
    }

    .content-ads .section-contact a {
        background: #fff;
        color: var(--mc-ink, #0b1220);
        box-shadow: 0 16px 36px -18px rgba(3, 8, 24, .6);
    }

        .content-ads .section-contact a:hover {
            filter: none;
            box-shadow: 0 22px 44px -18px rgba(3, 8, 24, .7);
        }

/* ==========================================================================
   광고대행 하단 — 다크 피날레 (2026-09-29, _AdsContact)

   운영 프로세스와 광고 상담을 짙은 광원 한 장면에. 시안 design/ads-bottom/index.html (C).
   · 판 바닥 파랑 광원 55% — 짙은 판이 푸터(#12151c) 바로 위까지 내려와 같은 남색으로
     붙어 보이지 않게 경계를 밝힌다(시안 45% 에서 올림).
   · 제목 색은 사이트 공통 h2/h3 규칙이 잉크로 덮어써 #container 로 한 단 올려 받는다.
   · 옛 .section-process / .section-contact 규칙은 더는 그려지지 않는다(되돌릴 때를 위해 남긴다).
   ========================================================================== */
.content-ads .ads-fin {
    /* 옛 번들이 .content-ads section { display:flex; justify-content:center; gap } 과
       .content-ads section > div { display:flex } 를 걸어, 제목 · 설명 · 카드 · 상담이 한 줄로
       옆으로 늘어섰다. 배치와 글꼴(제목 · 굵은 글자에 Roboto 계열)을 여기서 명시해 막는다. */
    display: block;
    gap: 0;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 112px 20px 96px;
    font-family: var(--mc-font, 'Pretendard', sans-serif);
    color: #fff;
}

    /* 위 콘텐츠와 띄운다. 짙은 장면은 경계가 선명해 맞닿으면 콘텐츠에 딱 붙어 보였다(18개 중 대부분 0px).
       콘텐츠 틀(.wrapper) 다음에 올 때만 — 지마켓 · ChatGPT 는 위 절이 색 있는 전폭 배경이라
       띄우면 흰 띠가 낀다. 그 둘은 맞댄다. */
    .content-ads > .wrapper + .ads-fin {
        margin-top: clamp(64px, 8vw, 104px);
    }

    .content-ads .ads-fin h2,
    .content-ads .ads-fin h3,
    .content-ads .ads-fin strong,
    .content-ads .ads-fin b {
        font-family: inherit;
    }

    .content-ads .ads-fin::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        pointer-events: none;
        background:
        radial-gradient(40% 30% at 85% 8%, rgba(139, 60, 232, .45), rgba(139, 60, 232, 0) 70%),
        radial-gradient(45% 30% at 10% 92%, rgba(22, 200, 224, .38), rgba(22, 200, 224, 0) 70%),
        radial-gradient(60% 40% at 50% 100%, rgba(37, 99, 255, .55), rgba(37, 99, 255, 0) 70%),
        #0a0d14;
    }

.content-ads .ads-fin > .ads-fin__in {
    display: block;
    max-width: var(--mc-content, 1200px);
    margin: 0 auto;
}

.content-ads .ads-fin__lab {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .02em;
    color: #8fb0ff;
}

#container .content-ads .ads-fin h2 {
    margin: 10px 0 0;
    font-size: clamp(26px, 3.2vw, 40px);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -.02em;
    color: #fff;
}

.content-ads .ads-fin__lead {
    max-width: 48ch;
    margin: 14px 0 0;
    font-size: clamp(15px, 1.2vw, 17px);
    line-height: 1.7;
    color: #aab4c8;
    word-break: keep-all;
}

    .content-ads .ads-fin__lead b {
        font-weight: 700;
        color: #fff;
    }

.content-ads .ads-fin__steps {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
    margin: 48px 0 0;
    padding: 0;
    list-style: none;
}

    .content-ads .ads-fin__steps li {
        margin: 0;
        padding: 24px 22px 26px;
        border-radius: 18px;
        background: rgba(255, 255, 255, .05);
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
    }

    .content-ads .ads-fin__steps .no {
        display: block;
        font-size: 13px;
        font-weight: 800;
        color: #8fb0ff;
        font-variant-numeric: tabular-nums;
    }

    .content-ads .ads-fin__steps .ic {
        display: grid;
        place-items: center;
        width: 44px;
        height: 44px;
        margin-top: 18px;
        border-radius: 12px;
        background: rgba(255, 255, 255, .08);
    }

        .content-ads .ads-fin__steps .ic img {
            display: block;
            width: 22px;
            height: 22px;
            filter: brightness(0) invert(1);
            opacity: .9;
        }

    #container .content-ads .ads-fin__steps strong {
        display: block;
        margin-top: 18px;
        font-size: 17px;
        font-weight: 700;
        line-height: 1.4;
        color: #fff;
    }

    .content-ads .ads-fin__steps p {
        margin: 8px 0 0;
        font-size: 14px;
        line-height: 1.65;
        color: #aab4c8;
        word-break: keep-all;
    }

.content-ads .ads-fin__cta {
    margin-top: 72px;
    padding-top: 56px;
    border-top: 1px solid rgba(255, 255, 255, .12);
    text-align: center;
}

    #container .content-ads .ads-fin__cta h3 {
        margin: 0 0 28px;
        font-size: clamp(24px, 2.6vw, 34px);
        font-weight: 700;
        line-height: 1.35;
        color: #fff;
    }

        #container .content-ads .ads-fin__cta h3 span {
            display: block;
            margin-bottom: 6px;
            font-size: .55em;
            font-weight: 500;
            color: rgba(255, 255, 255, .7);
        }

    .content-ads .ads-fin__cta form {
        display: inline;
    }

.content-ads .ads-fin__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 52px;
    padding: 0 32px;
    border-radius: var(--mc-radius-pill, 999px);
    background: #fff;
    font-size: 16px;
    font-weight: 700;
    color: var(--mc-ink, #0b1220);
    text-decoration: none;
    box-shadow: 0 16px 36px -18px rgba(3, 8, 24, .6);
    transition: transform .15s ease, box-shadow .15s ease;
}

    .content-ads .ads-fin__btn:hover {
        transform: translateY(-2px);
        color: var(--mc-ink, #0b1220);
        box-shadow: 0 22px 44px -18px rgba(3, 8, 24, .7);
    }

@media (max-width: 1024px) {
    .content-ads .ads-fin__steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

        /* 2열에서 다섯째 카드 옆이 비어 보여 한 줄을 다 쓰게 한다(한 열인 768 이하에선 차이 없음) */
        .content-ads .ads-fin__steps li:last-child {
            grid-column: 1 / -1;
        }
}

/* 좁은 화면 — 한 열, 아이콘은 왼쪽 칸. 카드 안쪽 16 · 사이 8 로 짙은 면 길이를 줄인다 */
@media (max-width: 768px) {
    .content-ads .ads-fin {
        padding: 64px 16px 56px;
    }

    .content-ads .ads-fin__steps {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
        margin-top: 32px;
    }

        .content-ads .ads-fin__steps li {
            display: grid;
            grid-template-columns: 44px minmax(0, 1fr);
            column-gap: 14px;
            padding: 16px;
        }

        .content-ads .ads-fin__steps .no {
            grid-column: 2;
        }

        .content-ads .ads-fin__steps .ic {
            grid-row: 1 / 4;
            margin-top: 0;
        }

        #container .content-ads .ads-fin__steps strong {
            margin-top: 4px;
        }

        .content-ads .ads-fin__steps p {
            grid-column: 2;
        }

    .content-ads .ads-fin__cta {
        margin-top: 44px;
        padding-top: 40px;
    }

    .content-ads .ads-fin__btn {
        width: 100%;
    }
}

/* ---- 캐러셀 이미지 무대 (common.js 가 .has-stage · --ads-stage 를 붙인다) ----
   이미지(또는 이미지 묶음)를 무대 높이 안 세로 가운데에, 좌우 버튼을 무대 중앙에. */
/* 줄바꿈 슬라이드(11번가 모바일)는 늘어난 높이가 줄 사이로 나뉘어 이미지가 내려갔다 — 줄을 위부터 쌓는다 */
#container .content-ads .swiper.has-stage .swiper-slide {
    align-content: flex-start;
}

#container .content-ads .swiper.has-stage .swiper-slide > :first-child {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--ads-stage);
    flex: none;
}

    /* 사이트 공통 #container img { height:auto } (id) 가 이겨 이미지가 첫 자식인 슬라이드만 무대 높이를 못 받았다 */
    #container .content-ads .swiper.has-stage .swiper-slide > img:first-child {
        width: 100%;
        object-fit: contain;
    }

#container .content-ads .swiper.has-stage .swiper-button-prev,
#container .content-ads .swiper.has-stage .swiper-button-next {
    top: calc(var(--ads-stage-top, 0px) + var(--ads-stage) / 2);
    margin-top: -22px;
}

/* 앱광고 탭(.app-anchors)은 섹션 앵커다. 고정 헤더 + 탭 줄 아래에서 멈추게 한다 */
.content-ads.apps section[id] {
    scroll-margin-top: calc(var(--mc-header-h, 108px) + 64px);
}

/* ---- 좁은 화면 캐러셀 좌우 버튼 (2026-09-29) ----
   768 이하에서는 그림이 캐러셀 폭을 거의 다 써서, 무대 가운데에 둔 44px 버튼이 그림 양끝을
   덮었다(옥션 AI매출업 · 노출보장형의 두 장 묶음). 버튼을 아래 점 줄 양끝으로 내린다.
   점 줄(.swiper-pagination, 높이 26 · bottom 0)을 9px 올리고 그만큼 캐러셀 아래를 늘려
   44px 버튼과 점의 중심을 맞춘다 — 버튼 누르는 자리는 44px 그대로다. */
@media (max-width: 768px) {
    #container .content-ads .swiper > .swiper-wrapper {
        margin-bottom: 9px;
    }

    #container .content-ads .swiper > .swiper-pagination {
        bottom: 9px;
    }

    #container .content-ads .swiper .swiper-button-prev,
    #container .content-ads .swiper .swiper-button-next,
    #container .content-ads .swiper.has-stage .swiper-button-prev,
    #container .content-ads .swiper.has-stage .swiper-button-next {
        top: auto;
        bottom: 0;
        margin-top: 0;
    }
}

/* ---- 앱광고 좁은 화면 (2026-09-29) ----
   1) 제목이 설명 아래로 밀렸다. intro-responsive.css 가 768 이하에서 .texts 를 order:-1 로
      맨 앞에 올리는데, 다른 화면은 제목이 .texts 안에 있고 앱광고만 절 바로 밑(h2)에 있다.
      제목을 그보다 앞(-2)에 둬서 제목 → 설명 → 그림 순서로 읽히게 한다.
   2) 가로로 긴 설명 그림(토스 1129 · 당근 4047 · 캐시워크 · OK캐쉬백 · 페이코 746 ·
      버즈빌 1149px)이 폰 폭 316px 로 줄어 표 안 글자가 3~4px 이 됐다. 600 이하에서는
      글자를 읽을 수 있는 폭(720px)으로 두고 카드 안에서 옆으로 밀어 보게 한다. */
@media (max-width: 768px) {
    .content-ads.apps .wrapper > section > h2 {
        order: -2;
    }
}

@media (max-width: 600px) {
    .content-ads.apps :is(#toss, #karrot, #cashwalk, #okcashback, #payco, #buzzvil) > .image {
        justify-content: flex-start;
        overflow-x: auto;
        overscroll-behavior-x: contain;
    }

        #container .content-ads.apps :is(#toss, #karrot, #cashwalk, #okcashback, #payco, #buzzvil) > .image > img {
            flex: none;
            width: 720px;
            max-width: none;
            max-height: none;
        }

    .content-ads.apps :is(#toss, #karrot, #cashwalk, #okcashback, #payco, #buzzvil)::after {
        content: "좌우로 밀어서 보세요";
        margin-top: -8px;
        font-size: 13px;
        color: var(--mc-sub, #6b7280);
        text-align: center;
    }
}