/* ==========================================================================
   광고상품 소개 페이지(Views/AdProduct/*) — 좁은 화면

   왜 필요했나 (390px 실측, 22개 화면 중 20개가 가로로 밀렸다)
     Content/css/css.css 가 이 화면들의 뼈대를 고정폭으로 잡아 둔다.
       .sub_content_except .tag_tab .tag_list   width 1080px  (14개 화면)
       .process_list.large                      width 1050px  (12개 화면)
     둘 다 display:table + float 조합이라 폭을 풀어 주는 것만으로는
     줄바꿈이 되지 않는다. flex 로 바꾼 뒤 감싸야 한다.

   화살표를 지우는 이유
     li:not(:last-child):before 의 배경 이미지는 원 오른쪽 끝
     (left: 125px / 178px) 에 절대배치된 가로 화살표다.
     여러 줄로 접히면 줄 끝에서 허공을 가리키므로 좁은 화면에서는 감춘다.

   기준폭
     css/common/tokens.css 의 표와 같은 768px.

   특정도
     원본이 .sub_content_except .tag_tab .tag_list (0,3,0) 까지 올라가고
     .network_edn .process_list.large li .process_round 처럼 (0,4,1) 도 있어서
     #container 를 붙여 아이디로 이긴다.
   ========================================================================== */

/* ==========================================================================
   요일 뒤에 '일' 이 한 번 더 붙던 것 (폭과 무관 — PC 도 같다)

   bundle.css 에 유틸리티 한 쌍이 있다.
     .price::after { content: "원" }   숫자에 단위를 붙이는 용도
     .day::after   { content: "일" }
   광고상품 프로세스 원은 <span class="day">월요일</span> 처럼 요일 라벨에
   같은 클래스를 쓰고 있어 화면에 '월요일일' 로 나온다.
   41곳 · 5개 화면(네이버 트렌드몰·트렌드픽·남성·플레이펀·트렌드상품).
   숫자 일수에 쓰는 다른 자리는 그대로 두고 이 자리에서만 끈다.
   ========================================================================== */
#container .process_round .day::after {
    content: none;
}

@media (max-width: 768px) {

    /* ---- 제목이 낱말 가운데서 끊기던 것 ----
       "구글광고를 제/안합니다" 처럼 쪼개진다. Ads/intro-responsive.css 가
       .content-ads 에만 걸어 둔 것과 같은 처리다. */

    #container .sub_content_except :is(.content_title, .section_title, .con_title, .sub_title, h2, h3, h4, h5) {
        word-break: keep-all;
    }

    /* ---- 상품 탭 (tag_tab / tag_list) ----
       .sub_content_inwrap 을 쓰는 9개 화면(솔루션 매뉴얼·주요기능, DaumAdam)도
       같은 마크업이다. PC 쪽은 page-chrome.css 가 맞춰 두었고, 여기서는
       라벨 180px 칸을 풀어 세로로 쌓는 처리를 같이 받게 한다. */

    #container :is(.sub_content_except, .sub_content_inwrap) .tag_tab {
        padding: 16px;
    }

    /* 라벨을 블록으로 내리지 않는다.
       솔루션 화면은 두 번째 줄의 라벨이 <strong>&nbsp;</strong> 자리맞춤이라
       블록으로 두면 빈 줄 하나가 통째로 생긴다(390px 실측 74px).
       라벨도 태그와 같은 줄에 흘리면 자리맞춤은 4px 로 사라진다. */
    #container :is(.sub_content_except, .sub_content_inwrap) .tag_tab .tag_list {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 6px 10px;
        width: auto;
        margin: 12px 0 0;
        padding: 0;
    }

        #container :is(.sub_content_except, .sub_content_inwrap) .tag_tab .tag_list:first-child {
            margin-top: 0;
        }

        #container :is(.sub_content_except, .sub_content_inwrap) .tag_tab .tag_list > strong {
            flex: 0 0 auto;
            width: auto;
            margin: 0;
            font-size: 14px;
            font-weight: 700;
        }

        #container :is(.sub_content_except, .sub_content_inwrap) .tag_tab .tag_list ul {
            /* 줄 사이가 6px 이었다. 칩 높이를 40 으로 올리면서 오탭이 나지 않게
               세로 간격도 함께 벌린다. */
            gap: 8px;
            margin-left: 0;
        }

            #container :is(.sub_content_except, .sub_content_inwrap) .tag_tab .tag_list ul li {
                float: none;
                margin-left: 0;
            }

                /* 이 칩은 장식이 아니라 실제 이동 링크다(#서비스소개 → 해당 화면).
                   실측 112x28 — 누르는 면이 28px 이고 인접 칩과 6px 밖에
                   떨어져 있지 않아 오탭이 난다. 배경이 없는 글자 칩이라
                   높이를 40 으로 올려도 보이는 모습은 그대로다. */
                #container :is(.sub_content_except, .sub_content_inwrap) .tag_tab .tag_list ul li a {
                    display: inline-flex;
                    align-items: center;
                    min-height: 40px;
                    padding: 4px 8px;
                    font-size: 14px;
                    line-height: 1.4;
                }

    /* ---- 진행 단계 (process_list) ---- */

    #container .process_list,
    #container .process_list.large {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px 12px;
        width: auto;
        margin: 24px 0;
    }

        #container .process_list > li,
        #container .process_list.large > li {
            float: none;
            width: calc(50% - 6px);
            margin-left: 0;
        }

            /* 가로 배치를 전제로 한 화살표 */
            #container .process_list > li:not(:last-child)::before,
            #container .process_list.large > li:not(:last-child)::before,
            #container .process_list > li .green_box.arrow::before {
                display: none;
            }

            /* flex-direction 을 column 으로 두는 것이 중요하다.
               원 안이 <strong>STEP 01</strong> + 텍스트인 화면(NetworkEdn)이 있고
               기본값 row 로 두면 둘이 좌우로 갈라져 원 밖으로 밀려난다.
               원본은 display:table-cell 이라 그 문제가 없었다. */
            #container .process_list > li .process_round,
            #container .process_list.large > li .process_round {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                width: 140px;
                height: 140px;
                margin: 0 auto;
                padding: 0 12px;
                font-size: 14px;
                line-height: 1.4;
            }

                /* 12.5px 이었다. 390px 화면에서 읽기 어려운 크기라 13 으로 올린다
                   (원 안 본문이 14px 이므로 라벨은 한 단 아래). */
                #container .process_list > li .process_round :is(.day, strong) {
                    font-size: 12px;
                }

            #container .process_list > li .process_text {
                padding: 12px 0 0;
            }

                #container .process_list > li .process_text .text {
                    font-size: 12px;
                    line-height: 1.5;
                }

            #container .process_list > li .green_box {
                width: auto;
                margin-top: 12px;
            }
}

/* ==========================================================================
   여기부터는 뼈대가 아니라 화면별로 남은 밀림이다.
   위 두 규칙을 넣고 다시 재서 (390px) 남은 것만 잡는다.
   ========================================================================== */

@media (max-width: 768px) {

    /* ---- .content-service 계열의 단계 목록 ----
       SSGSpecialChoice 10px · TmonSmartClick 157px · EleventhFocusClick 102px
       EleventhBrandingAds 332px

       ul 이 flex + justify-content:space-between 에 li 가 flex:1 이라
       단계 수만큼 가로로 늘어선다. 2열로 접는다.
       ul::before 는 원들을 잇는 가로선인데 줄이 접히면 첫 줄만 가로지르므로 감춘다. */

    #container .content-service .section-process ul {
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 18px 12px;
    }

        #container .content-service .section-process ul::before {
            display: none;
        }

        #container .content-service .section-process li {
            flex: 0 0 calc(50% - 6px);
            gap: 0.6rem;
            padding: 0;
        }

            #container .content-service .section-process h5 {
                /* aspect-ratio 2/1 은 폭이 500px 일 때를 전제로 한 비율이다 */
                width: 100%;
                min-height: 62px;
                padding: 10px;
                aspect-ratio: auto;
                font-size: 14px;
            }

    /* ---- .content-service 의 글/이미지 2단 ---- */

    #container .content-service .list_item {
        flex-wrap: wrap;
        gap: 1.25rem;
    }

        #container .content-service .list_item .text_area {
            flex: 1 1 100%;
            width: auto;
            padding-top: 0;
        }

        #container .content-service .list_item .image {
            flex: 1 1 100%;
        }

    /* ---- GoogleAdsIntroduction 의 원형 다이어그램 (밀림 197px) ----
       .google_offer 는 높이 800px 에 배경 이미지를 깔고 항목 6개를
       그 위에 절대배치한 그림이다. 폭이 줄면 배치가 성립하지 않는다.
       배경을 내리고 번호 목록으로 되돌린다. */

    #container.google_ads_intro .google_offer {
        height: auto;
        padding: 24px 0 32px;
        background-image: none;
    }

        #container.google_ads_intro .google_offer .google_ads_logo {
            position: static;
            width: 107px;
            margin: 18px auto 0;
        }

        #container.google_ads_intro .google_offer .ads_needs {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 18px 12px;
            margin-top: 24px;
        }

            #container.google_ads_intro .google_offer .ads_needs li,
            #container.google_ads_intro .google_offer .ads_needs li[class^="item"] {
                display: block;
                position: static;
                margin-left: 0;
                font-size: 14px;
                line-height: 1.45;
                white-space: normal;
            }

                #container.google_ads_intro .google_offer .ads_needs li::before {
                    display: block;
                    padding-right: 0;
                    font-size: 24px;
                    line-height: 1.2;
                }
}

/* ==========================================================================
   360~600px 사이에서만 드러난 것들.
   390px 한 폭만 재면 놓친다 — .list_ico 는 480px 에서 가장 크게 밀렸다.
   ========================================================================== */

@media (max-width: 768px) {

    /* ---- .choocha 의 단계 설명 (360px 에서 4px) ----
       .choocha .process_list li .process_text 가 178px 로 못박혀 있어
       li 를 좁혀도 설명글이 따라 좁아지지 않는다. */

    #container .process_list > li .process_text {
        width: auto;
    }

    /* ---- 아이콘 옆에 글을 붙이는 목록 (.list_ico) ----
       li 에 padding-left 190~205px 를 주고 그 자리에 배경 아이콘을 깐다.
       480px 에서는 남는 폭이 19px 뿐이라 글자가 li 밖으로 삐져나왔다.
       아이콘을 위로 올리고 글을 아래에 둔다.
       GoogleAdsIntroduction 과 SnsMarketing 6개 화면이 함께 쓴다. */

    #container .list_ico li,
    #container .list_ico li:nth-child(odd),
    #container .list_ico li:nth-child(even) {
        float: none;
        width: 100%;
        min-height: 0;
        margin-top: 28px;
        padding: 84px 0 0;
        background-position: center top;
        background-size: 72px auto;
        text-align: center;
    }

        #container .list_ico li .txt_area {
            padding-top: 0;
        }

    /* ---- 여러 칸으로 쪼개는 목록 ----
       third·quarter·fifth·sixth 는 좁은 화면에서 한 칸이 60~90px 이 된다. */

    #container .list_divide:is(.third, .quarter, .fifth, .sixth) > * {
        width: 50%;
    }

    /* ---- GoogleAdsIntroduction 입찰 방식 3칸 (360px 에서 13px) ---- */

    #container.google_ads_intro .tender_price .bg_box_list > li {
        display: block;
        width: 100%;
        margin: 70px 0 24px;
    }

        /* 제목은 박스 위에 절대배치돼 있다. width 를 주면 li 의 좌우 안여백만큼
           오른쪽으로 넘치므로 left/right 로 잡는다. */
        #container.google_ads_intro .tender_price .bg_box_list > li h5 {
            left: 0;
            right: 0;
            width: auto;
        }

        /* 세 박스 높이를 맞추려고 넣은 값이다. 세로로 쌓이면
           박스마다 빈 자리만 남는다. */
        #container.google_ads_intro .tender_price .bg_box_list > li .tender_type {
            min-height: 0;
            padding: 0;
        }

    /* 용어설명 4줄이 2단으로 붙어 있어 좁은 화면에서 읽기 어렵다 */
    #container.google_ads_intro .tender_price .descript ul li {
        display: block;
        width: auto;
        margin-bottom: 8px;
    }
}

@media (max-width: 768px) {

    /* ---- 네모 박스 목록 (.bg_box_list) ----
       li 가 344px 정사각(KakaoStory·open_market) 또는 350px(GoogleAds) 로
       못박혀 있고 inline-block 으로 가로에 늘어선다. 360px 에서 밀렸다.
       ::after 는 세로 가운데를 맞추려고 넣은 height:100% 채움이라 필요 없어진다. */

    #container .bg_box_list > li {
        display: block;
        width: auto;
        height: auto;
        margin: 0 0 12px;
        padding: 22px 16px;
    }

        #container .bg_box_list > li::after {
            display: none;
        }

        #container .bg_box_list > li .inner {
            display: block;
        }
}


/* ==========================================================================
   노출위치 블록 (.thum_define_list / .tab_con) — 7개 화면

   왜 1차 조사에서 안 잡혔나
     바깥이 overflow:hidden 이라 문서 폭은 그대로였고(가로 밀림 0건),
     글자 크기·터치 타깃·잘림 어느 항목에도 걸리지 않았다.
     안에서만 조용히 뭉갰다. 눈으로 봤어야 했다.

   무엇이 깨졌나
     .list_item 이 display:table 이고 왼쪽 이미지 칸(.thum)이 고정폭이다.
       .choocha .exposed_coocha            610 x 358
       .open_market .thum_define_list .thum 645 x 371 / 421 / 366
       .n_shopping_window .tab_con .thum    530 x 376
     390px 화면에서 글자 칸(.text_area)이 35px 로 눌려
     '노출영역' 이 '노출 / 영역' 으로 갈리고 dd 하나가 16줄이 됐다.

   이미지 위 / 글자 아래로 쌓는다. .thum 은 배경 이미지라 CSS 가 비율을
   알 수 없어 원본 치수에서 계산한 padding-bottom 을 각각 준다.
   ========================================================================== */
@media (max-width: 768px) {

    #container :is(.thum_define_list .list_item, .n_shopping_window .tab_con) {
        display: block;
        padding: 24px 0;
    }

        #container :is(.thum_define_list .list_item, .n_shopping_window .tab_con) > .thum {
            display: block;
            width: 100%;
            height: 0;
            background-size: contain;
            background-position: center top;
        }

            #container.choocha .thum_define_list .thum.exposed_coocha {
                padding-bottom: 58.7%;      /* 358 / 610 */
            }

            #container.open_market .thum_define_list .thum.exposed_pc {
                padding-bottom: 57.5%;      /* 371 / 645 */
            }

            #container.open_market .thum_define_list .thum.exposed_mobile {
                padding-bottom: 65.3%;      /* 421 / 645 */
            }

            #container.open_market .thum_define_list .thum.exposed_outside {
                padding-bottom: 56.7%;      /* 366 / 645 */
            }

            #container.n_shopping_window .tab_con .thum {
                padding-bottom: 70.9%;      /* 376 / 530 */
            }

        #container :is(.thum_define_list .list_item, .n_shopping_window .tab_con) > .text_area {
            display: block;
            width: auto;
            margin-top: 18px;
        }
}

/* ==========================================================================
   본문 타이포 — 아홉 단 스케일과 토큰으로

   실측(22개 화면)
     .con_title      38px / 600 / #0e1838
     .section_title  30px / 500 / #0e1838
     .con_text       17px / 400 / #000

   38·30·17px 은 tokens.css 파일 끝의 아홉 단(10·12·14·16·18·20·24·28·32)에
   없는 값이고, #0e1838·#000 도 토큰 밖이다. 같은 클래스(.section_title)를
   쓰는 마이페이지 15개 화면은 이미 20px/700 을 받고 있어, 한 이름이 화면마다
   다르게 보이는 상태였다.

   page-chrome.css 의 대상 목록에 이 컨테이너들을 넣는 방법도 있지만
   (그 파일 주석이 안내하는 확장 방식) 그러면 입력·버튼·표까지 한꺼번에
   바뀌어 레거시 레이아웃(.process_list · .thum_define_list)이 깨질 위험이 크다.
   여기서는 글자만 맞춘다. 배치는 건드리지 않는다.

   아래 16개 컨테이너는 모두 Views/AdProduct 전용이라 다른 화면에 번지지 않는다.
   ========================================================================== */
#container:is(.open_market, .n_keyword, .n_shopping, .n_shopping_window,
               .n_store, .n_trand_mall, .n_trand_product, .n_hotdeal,
               .n_men, .n_pay, .n_play_fun, .trand_pick, .choocha,
               .kakao_story, .network_edn, .google_ads_intro,
               .daum_adam, .daum_nate) .con_title,
#container:is(.open_market, .n_keyword, .n_shopping, .n_shopping_window,
               .n_store, .n_trand_mall, .n_trand_product, .n_hotdeal,
               .n_men, .n_pay, .n_play_fun, .trand_pick, .choocha,
               .kakao_story, .network_edn, .google_ads_intro,
               .daum_adam, .daum_nate) .section .con_title {
    font-size: 32px;
    font-weight: 800;
    letter-spacing: var(--mc-tracking, -.02em);
    color: var(--mc-ink, #0b1220);
}

#container:is(.open_market, .n_keyword, .n_shopping, .n_shopping_window,
               .n_store, .n_trand_mall, .n_trand_product, .n_hotdeal,
               .n_men, .n_pay, .n_play_fun, .trand_pick, .choocha,
               .kakao_story, .network_edn, .google_ads_intro,
               .daum_adam, .daum_nate) .section_title,
#container:is(.open_market, .n_keyword, .n_shopping, .n_shopping_window,
               .n_store, .n_trand_mall, .n_trand_product, .n_hotdeal,
               .n_men, .n_pay, .n_play_fun, .trand_pick, .choocha,
               .kakao_story, .network_edn, .google_ads_intro,
               .daum_adam, .daum_nate) .section .section_title {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: var(--mc-tracking, -.02em);
    color: var(--mc-ink, #0b1220);
}

#container:is(.open_market, .n_keyword, .n_shopping, .n_shopping_window,
               .n_store, .n_trand_mall, .n_trand_product, .n_hotdeal,
               .n_men, .n_pay, .n_play_fun, .trand_pick, .choocha,
               .kakao_story, .network_edn, .google_ads_intro,
               .daum_adam, .daum_nate) .con_text {
    font-size: 16px;
    line-height: 1.7;
    color: var(--mc-body, #4a5468);
}