/* ==========================================================================
   고정폭 무력화 레이어 — 반응형 공통 기반

   bundle.css / css.css 는 사이트 전역을 1080px 고정폭으로 묶어 둔다.
   이 규칙들이 살아 있는 한 어떤 페이지도 좁은 화면에 맞출 수 없으므로,
   브레이크포인트 아래에서만 폭 제약을 푼다.

   왜 bundle.css 를 직접 고치지 않는가
     bundle.css 는 Content/scss/css.scss 에서 컴파일되는 325KB 산출물이다.
     여기를 건드리면 리디자인 대상이 아닌 페이지(메인·블로그·솔루션 소개)까지
     전역 회귀 위험을 진다. 덮어쓰는 편이 되돌리기도 쉽다.

   기준점 (2026-09-11 본문 폭을 1200 으로 올리며 1120 → 1240)
     콘텐츠 1200px + 좌우 여백 20px = 1240px. 이보다 넓으면 데스크톱 그대로,
     좁아질 때만 이 레이어가 개입한다.

   로드 순서: bundle.css -> css.css -> tokens.css -> responsive-base.css -> 페이지별 CSS
   ========================================================================== */

/* ==========================================================================
   데스크톱 본문 폭 — 1080 → 1200 (2026-09-11)

   왜
     1600px 화면 실측에서 본문 폭이 네 갈래였다.
       레거시(광고상품·Ads·SNS·고객지원·약관)  1080
       자동입찰 · 지마켓 광고관리               1132
       순위추적                                 1072
     좁기도 하고 제각각이기도 해서 한 값(1200)으로 모은다.

   어디를 바꾸나
     bundle.css / css.css 는 생성물이라 손대지 않는다(Web Compiler 가 덮어쓴다).
     두 파일이 1080 을 박아 둔 선택자를 여기서 같은 선택자로 덮는다.
     이 파일은 css.css 뒤에 로드되므로 같은 특이도면 이긴다.

   메인(#container.main)은 제외한다
     히어로 슬라이더 아트워크가 1080 슬롯에 맞춰져 있고 index_pc.css 가
     따로 조판한다. #wrap / .header 의 min-width 만 올라가므로 메인 본문은
     1080 그대로 가운데 선다 — 보이는 변화가 없다.
   ========================================================================== */

#wrap,
.header,
.header .header_bar {
    min-width: var(--mc-content, 1200px);
}

.inwrap,
#container .section,
.sections,
.sub_content_except .content_tab ul,
.sub_content_except .tag_tab .tag_list,
#container.google_ads_intro .ads_type .ads_way .slick-slide {
    width: var(--mc-content, 1200px);
}

/* 태그 바의 회색 띠. 레거시가 padding-left:89px 로 가운데 정렬을 흉내 냈다
   (1080 캔버스 기준). 안쪽 .tag_list 는 margin:0 auto 라 그 89px 안에서
   중앙을 잡으므로, 폭을 1200 으로 올리면 89 + 1200 = 1289 가 되어
   1280 화면에서 9px 이 넘쳤다(광고상품 14개 + 진짜리뷰).
   패딩을 걷고 진짜 중앙 정렬로 돌린다. */
#container .sub_content_except .tag_tab {
    padding-left: 0;
}

/* body .wrapper 만 레거시가 !important 로 박아 뒀다(css.css · bundle.css 양쪽).
   !important 는 !important 로만 이긴다. 다른 아홉 곳은 필요 없다. */
body .wrapper {
    width: var(--mc-content, 1200px) !important;
}

/* 본문 1200 + 좌우 여백 20 = 1240. 이 아래부터 반응형 레이어가 개입한다
   (1080 시절 기준점은 1120 이었다). */
@media (max-width: 1240px) {

    /* ---- 최상위 차단막 ----
       #wrap 의 min-width 가 살아 있으면 아래 어떤 규칙도 효과가 없다. */
    #wrap {
        min-width: 0;
    }

    /* ---- 헤더 ---- sticky 헤더와 내부 바 */
    .header,
    .header .header_bar {
        min-width: 0;
    }

    /* ---- 콘텐츠 컨테이너 ----
       고정폭을 최대폭으로 바꾸고 좌우 여백을 준다. */
    .inwrap,
    #container .section,
    #container.main .inner,
    .sections {
        width: auto;
        max-width: var(--mc-content, 1080px);
        padding-left: var(--mc-pad, 20px);
        padding-right: var(--mc-pad, 20px);
    }

    /* ---- .con / .section 이 없는 화면 ----
       위 거터는 .section 에 건다. 그런데 솔루션 매뉴얼·주요기능 8개 화면과
       AdProduct/DaumAdam 은 #content > .sub_content_inwrap 바로 아래에
       내용을 두고 .section 을 쓰지 않는다. 그래서 390px 에서 제목과 태그가
       L0 으로 화면 끝에 붙었다(#자동입찰, #서비스소개, 주요기능 …).

       .sub_content_inwrap 에 거터를 주고, 안에 .section 이 있는 화면
       (Policy/EmailPrivacy, 매뉴얼 3개)에서 16+16 이 되지 않도록
       안쪽 .section 의 좌우 패딩은 없앤다. 거터는 한 겹만 둔다. */
    #container .sub_content_inwrap {
        padding-left: var(--mc-pad, 20px);
        padding-right: var(--mc-pad, 20px);
    }

        #container .sub_content_inwrap .section {
            padding-left: 0;
            padding-right: 0;
        }

    #container.main .section {
        min-width: 0;
    }

    /* bundle.css 에서 !important 로 걸려 있어 같은 강도로 받아야 한다. */
    body .wrapper {
        width: auto !important;
        max-width: var(--mc-content, 1080px);
    }

    /* ---- 서브 탭 ----
       탭 목록이 1080px 고정이라 넘칠 때 가로 스크롤로 흘린다. */
    .sub_content_except .content_tab ul {
        width: auto;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    /* ---- 이미지 ---- 컨테이너를 넘지 않게 */
    #container img {
        max-width: 100%;
        height: auto;
    }

    /* ---- 표 ----
       레거시 표는 대부분 고정폭 colgroup 을 쓴다. 칸을 무너뜨리지 않고
       가로 스크롤로 흘리는 편이 안전하다. 페이지별로 1단 카드형으로
       바꿀 표는 각 페이지 CSS 에서 따로 처리한다. */
    #container .tb_style {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

        /* display:block 을 준 <table> 은 안쪽에 익명 표 상자를 하나 만든다.
           그 익명 상자는 shrink-to-fit 이라 내용 너비까지만 자란다.
           칸이 블록으로 풀리는 표(폼·카드형)는 문제가 없지만, 칸이 표 칸으로
           남는 표는 오른쪽이 빈 채로 남는다.
           공지 상세 390px 실측: 표 16~374 인데 제목 칸은 17~305 —
           회색 제목 띠가 오른쪽 70px 을 못 채우고 끊겼다.

           고정폭 colgroup 이 없는 표는 애초에 넘칠 이유가 없으니
           스크롤 상자로 만들지 않는다(뷰 전수: tb_style 73개 중 3개). */
        #container .tb_style:not(:has(colgroup)) {
            display: table;
            width: 100%;
            overflow: visible;
        }
}

/* ==========================================================================
   html / body 에 overflow-x:hidden 을 걸지 않는다

   가로 밀림을 덮는 안전망으로 넣었다가 제거했다. 레거시 레이아웃이
   html 에 height:100% 를 주는데, 여기에 overflow-x:hidden 이 붙으면
   overflow-y 가 auto 로 승격되어 body 가 스크롤 컨테이너가 된다.
   그러면 window 스크롤이 죽어 페이지가 스크롤되지 않고,
   window.scroll 에 붙은 헤더 show/hide 스크립트도 동작하지 않는다.
   (실측: html scrollHeight 844 인데 body scrollHeight 3656)

   가로 밀림은 덮지 않고 원인이 되는 고정폭을 각 레이어에서 직접 푼다.
   ========================================================================== */