/* ==========================================================================
   광고대행·솔루션 소개 페이지 — 좁은 화면

   출처
     모바일 프로젝트 MC_mobile/.../Content/scss/_ads.scss 의
     @media screen and (max-width: 640px) 블록.
     두 프로젝트의 뷰는 #container 래퍼 하나만 다르고 마크업이 같아서
     그대로 옮겨도 맞는다(NaverSearch 기준 324행 vs 322행).

   가져오지 않은 것
     .content / .content_title / .content_tab
       공통 뼈대라 css/common/page-chrome.css 가 이미 전역으로 정의한다.
       여기서 또 정의하면 화면마다 갈린다.
     .content-solution.shopping
       PC 에는 그 마크업을 쓰는 뷰가 없다.
     .content-ads padding / .content-ads .section-contact align-content
       SCSS 에서 속성명이 셀렉터 자리에 들어간 오타. 무효 규칙이다.

   기준폭
     원본은 640px 이지만 이 프로젝트의 표(css/common/tokens.css)에 맞춰
     768px 로 올렸다. 2단이 1단으로 접히는 지점이 768 이다.

   왜 필요했나 (실측 390px)
     /Ads/NaverSearch    가로 밀림 148px  — .texts 가 flex:0 0 40% 로
                         묶여 523px 를 요구했다
     /Ads/KakaoKeywords  가로 밀림 103px
   ========================================================================== */

@media (max-width: 768px) {

  .content-ads {
    font-size: 16px;
    word-break: keep-all;
  }
  .content-ads.eleventh .swiper .swiper-slide {
    flex-wrap: wrap;
  }
  .content-ads.eleventh .swiper .swiper-slide img {
    order: -2 !important;
  }
  .content-ads .swiper .image {
    gap: 0.5rem;
  }
  .content-ads .swiper .image img {
    max-width: 45%;
  }
  .content-ads strong.details {
    justify-content: center;
  }
  .content-ads strong.details span {
    font-size: 14px;
  }
  .content-ads h2 {
    font-size: 24px;
    font-weight: 600;
  }
  .content-ads h3 {
    margin-bottom: 5px !important;
    font-size: 20px !important;
    font-weight: 600;
  }
  .content-ads h3::after {
    content: none;
  }
  .content-ads ul:not(.swiper-wrapper, .tabs) {
    flex-wrap: wrap;
  }
  .content-ads section:not(:last-of-type) {
    padding-bottom: 4vh;
    margin-bottom: 4vh;
  }
  .content-ads section img {
    max-height: 50vh;
    width: auto;
    height: auto;
  }
  .content-ads section .info {
    font-size: 14px;
  }
  .content-ads section .texts {
    flex: 1 1 auto;
    align-items: center;
    text-align: center;
    gap: 1.5rem;
    order: -1 !important;
  }
  .content-ads section .texts p {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }
  /* 세로 여백은 더 이상 여기서 주지 않는다. intro-design.css 가 절마다
     직접 갖고, 마감 구역(프로세스+상담)은 아래 여백이 0 이어야 한다 —
     6vh(1000px 창에서 60px)가 그대로 두 절 사이의 흰 틈이 됐다.
     좌우도 거터 절이 정하므로 축약을 쓰지 않는다. */
  .content-ads .wrapper {
    padding-top: 0;
    padding-bottom: 0;
  }
  .content-ads .tabs {
    gap: 1.5rem;
    padding: 0.75rem 1rem;
    overflow-x: auto;
    flex-wrap: nowrap;
    /* top 은 파일 끝의 '하위 탭 고정 위치' 절에서 폭별로 정한다 */
    justify-content: flex-start;
    /* 원본에는 없다. 모바일은 오버레이 스크롤바라 자리를 안 먹지만
       PC 브라우저에서는 탭 아래 회색 막대가 그대로 보인다. */
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

    .content-ads .tabs::-webkit-scrollbar {
      display: none;
    }
  .content-ads .tabs li {
    flex: 0 0 auto;
    font-size: 14px;
    font-weight: 600;
  }
  .content-ads .tabs li.active {
    font-weight: 700;
  }
  .content-ads .section-intro {
    gap: 2rem;
  }
  .content-ads .section-intro strong {
    color: #333;
  }
  .content-ads .section-intro > div {
    gap: 1rem;
    flex-wrap: wrap;
  }
  .content-ads .section-intro ul li {
    padding: 1rem;
    min-width: 45%;
    gap: 0.5rem;
  }
  /* 아이콘은 intro-design.css 가 그리는 파란 원(좁은 화면 60px) 안에 앉는다.
     원본 50px 은 원을 꽉 채운다. 32 + 위아래 14 = 60 으로 맞춘다. */
  .content-ads .section-intro ul li img {
    width: 32px;
    height: 32px;
    margin: 14px 0;
  }
  .content-ads .section-process header {
    margin-bottom: 0;
  }
  .content-ads .section-process .process {
    flex-direction: column;
    padding: 1rem;
  }
  .content-ads .section-process .process li {
    aspect-ratio: unset;
  }
  /* 레거시는 4·5 앞에만 삼각형을 두고 그 자리로 margin-top:2rem 을 비웠다.
     intro-design.css 가 모든 칸 사이에 같은 꺾쇠를 그리므로 그 자리는 필요 없다.
     남겨 두면 3->4, 4->5 만 간격이 넓어진다. */
  .content-ads .section-process .process li:nth-of-type(4), .content-ads .section-process .process li:nth-of-type(5) {
    margin-left: 0;
    margin-top: 0;
  }
  .content-ads .section-process .process li strong {
    font-size: 20px;
  }
  .content-ads .section-process .info {
    font-size: 16px;
    margin-top: 0;
    text-align: center;
  }
  .content-ads .section-contact {
    padding: 6vh 0;
  }
  .content-ads .section-contact a {
    font-size: 18px;
  }
  .content-ads .section-contact h3 {
    margin-bottom: 0.5rem !important;
  }
  .content-ads .section-contact h3 span {
    font-size: 24px;
  }
}

/* ==========================================================================
   솔루션 소개 페이지 — 고정폭 풀기

   모바일 프로젝트에 대응 화면이 없어 직접 잡았다.
   전용 CSS 가 있는 화면(KeywordExpansionIntro 등)은 그 파일에서 처리하고,
   여기에는 레거시 CSS(bundle/css.css)만 쓰는 화면을 담는다.
   ========================================================================== */

@media (max-width: 768px) {

    /* 실측: .list_box.left 가 755px 고정이라 화면을 396px 밀어냈다
       (/AdSolution/WaveServiceFunction) */
    #container.service_function .list_box {
        width: auto;
        max-width: 100%;
    }

    /* 실측: 요금 비교 묶음 ul 이 800px 고정이라 213px 밀어냈다
       (/AdSolution/TrendServiceFee). 두 칸을 세로로 쌓는다. */
    #container.service_fee .section-price .wrapper > ul {
        width: auto;
        max-width: 100%;
        flex-wrap: wrap;
    }

        #container.service_fee .section-price .wrapper > ul > li {
            flex: 1 1 100%;
            max-width: 100%;
        }

    /* 단계 목록(li 144px)이 한 줄로 늘어서 오른쪽 끝이 578px 까지 갔다.
       두 개씩 접으면 375 안에 들어간다. */
    #container.service_fee ul.process {
        flex-wrap: wrap;
        justify-content: center;
        /* 줄 끝 항목의 연결선(::before, 폭 144px)이 밖으로 뻗는다.
           장식이라 잘라도 무방하다. clip 은 스크롤 컨테이너를 만들지 않는다. */
        overflow-x: clip;
    }
}

/* 좁은 화면 — 탭 바로 아래 첫 묶음의 위 여백
   .content-ads .wrapper 의 6vh(844 높이에서 50.6px)를 32px 로 줄여 뒀었다.
   지금은 첫 묶음이 화면 끝까지 번지는 히어로라 그 32px 이 탭 줄과 히어로
   사이의 흰 틈으로 남는다(실측 390: 14개 화면 모두 32px). 데스크톱은 이미
   0 이다. 0 으로 맞춘다 — 위 여백은 히어로가 자기 패딩으로 갖는다. */
@media (max-width: 768px) {
    .content-ads > .wrapper:first-of-type {
        padding-top: 0;
    }
}

/* 카카오 키워드광고만 좁은 화면에서 그림과 글이 한 줄에 남았다.
   레거시가 이 화면에만 flex-wrap: nowrap 을 준다(bundle.css).
     .content-ads.kakao-keywords section { flex-wrap: nowrap }
   그래서 390 에서 그림 199px · 글 95px 로 눌렸다. 다른 화면처럼 접히게 한다. */
@media (max-width: 1024px) {
    .content-ads.kakao-keywords .wrapper > section {
        flex-wrap: wrap;
    }
}

/* ==========================================================================
   하위 탭(.content-ads .tabs · 광고소개/사이트검색/…) 고정 위치

   이 탭은 스크롤 스파이다(script.js 가 section 위치에 따라 .active 를 옮긴다).
   레거시 bundle.css 는 sticky top:168px 로 붙인다 — 헤더가 168px 이던 시절 값이다.

   지금 화면 위쪽에는 세 층이 겹쳐 붙는다.
     .header               sticky top:0     z 2000
     .sub_content_except   sticky           z 1999   제목 + 상단 탭(검색광고/성과형)
     .content-ads .tabs    sticky           z 1000   하위 탭
   하위 탭의 z 가 가장 낮으므로 위 두 층의 아래에서 시작해야 보인다.
   레거시 값 168 은 .sub_content_except 가 붙는 구간 안이라 스크롤하면
   상단 탭 뒤로 들어가 사라진다(실측 /Ads/NaverSearch 1440: 하위 탭 168~216,
   상단 탭 묶음 43~222 → 완전히 가림).

   .sub_content_except 가 붙었을 때 아래 끝(실측, scrollY 900)
     ≥1025   43 + 179 = 222      헤더 113, 패딩 70 되돌림(page-chrome.css)
     769~1024  -25 + 173 = 148   헤더 45
     ≤768     13 + 123 = 136     헤더 45, 패딩 32
   그 값을 top 으로 준다. 위 층의 높이가 바뀌면 여기도 같이 바꿔야 한다.
   ========================================================================== */
.content-ads .tabs {
  top: 222px;
}

@media (max-width: 1024px) {
  .content-ads .tabs {
    top: 148px;
  }
}

@media (max-width: 768px) {
  .content-ads .tabs {
    top: 136px;
  }
}

/* 광고대행 화면끼리 상단에 붙는 것이 달랐다

   실측 1440, 스크롤 1500
     14개 화면        제목 묶음(제목 + 1단계 탭)이 sticky   113~222
     11번가 · 앱광고   제목 묶음이 static 이라 제목이 스크롤로 사라지고
                      하위 탭만 sticky                     113~162

   두 화면에서 1단계 탭을 걷은 뒤 page-chrome.css 의 규칙이 걸린 탓이다 —
     #content .sub_content_except:not(:has(.content_tab, .bulletin_tab, .tag_tab))
   탭이 없으면 붙잡을 것이 없다는 판단인데, 광고대행 화면에서는 그 아래
   하위 탭이 따로 붙으므로 제목만 혼자 사라져 화면끼리 어긋났다.

   광고대행 화면의 제목 묶음은 탭이 있든 없든 붙잡는다. 하위 탭은 그 묶음
   바로 아래에 붙인다. */
/* page-chrome.css 가 이제 제목 묶음을 놓아 주고 탭만 붙인다.
   여기서 묶음을 다시 sticky 로 만들면 제목이 또 따라 올라온다.
   탭이 없는 화면(11번가·앱광고)에서 제목만 혼자 사라지던 어긋남은
   이제 '어느 화면에서도 제목은 흘러간다' 로 한 방향이 됐다. */
#content .sub_content_except:has(+ .content-ads) {
  position: static;
}
/* 768 이하에서 page-chrome.css 는 이 묶음의 padding-top 을 32 로 줄이고
   top 도 헤더 - 32 로 같이 내린다(내용이 45px 헤더 바로 아래에서 시작).
   위 규칙은 미디어쿼리가 없고 특이도가 높아 그 조정을 덮었다 — 모바일에서
   스크롤하면 묶음이 -25 에 붙어 제목 글자(7~31)가 헤더(0~45) 뒤로 전부
   들어갔다(390 실측, 광고대행 17개 화면 전부). ChatGPT 광고처럼 이 규칙에
   안 걸리는 화면은 45 에서 시작해 멀쩡했다. 같은 값으로 따라간다. */
@media (max-width: 768px) {
  #content .sub_content_except:has(+ .content-ads) {
    top: auto;
  }
}

/* 탭이 없는 묶음은 제목의 아래 마진(.content_title margin-bottom: 28px)이
   묶음 밖으로 상쇄돼 빠져나간다. 그래서 묶음이 제목 바로 밑에서 끝났다.
   flow-root 로 상쇄를 막으면 탭이 있는 화면과 같은 자리에서 끝난다.
   padding 으로 채우면 마진까지 살아나 28 이 아니라 56 이 붙는다(실측). */
#content .sub_content_except:not(:has(.content_tab, .bulletin_tab, .tag_tab)):has(+ .content-ads) {
  display: flow-root;
}

/* 하위 탭(앱광고 · 11번가)은 헤더 바로 아래에 붙는다.

   전에는 175 / 101 / 89 로 박아 뒀다. 제목 묶음이 통째로 sticky 이던 시절,
   '묶음이 끝나는 자리' 를 실측해 적은 값이다.
   지금은 묶음이 흐르고 탭 줄만 헤더 아래(--mc-header-h)에 붙으므로,
   같은 값을 쓰지 않으면 앱광고만 헤더에서 67px 떠 있었다(1440 실측).
   탭이 있는 화면과 같은 기준을 쓴다 — 헤더 높이가 바뀌면 함께 따라간다. */
#content .sub_content_except:not(:has(.content_tab, .bulletin_tab, .tag_tab)) + .content-ads .tabs {
  top: var(--mc-header-h, 108px);
}