@charset "utf-8";
/* ------------------------------------------------------------------
   모바일 최적화
   - 이 사이트는 별도 모바일 테마 없이 반응형 데스크톱 테마를 그대로 쓴다.
   - korean-ui.css 다음에 로드되므로 같은 우선순위면 이 파일이 이긴다.
   - 목표: 섹션마다 과하게 커지는 블록을 줄이고, 가로 스크롤을 없앤다.
------------------------------------------------------------------ */

/* ── 공통: 가로 넘침 차단 ── */
@media (max-width: 1200px) {
    html, body { overflow-x: hidden !important; max-width: 100% !important; }
    img, iframe, video, table { max-width: 100% !important; }
    #wrap, #total_wrap { overflow-x: clip !important; }
}

@media (max-width: 768px) {

    /* ── 히어로 + 배경 영상 ──
       유튜브 iframe 을 100%×100% 로 두면 16:9 가 유지되면서 위아래 검은 띠가 생긴다.
       컨테이너 높이를 기준으로 16:9 크기를 직접 계산해 화면을 꽉 채운다(cover). */
    .main_visual {
        --hero-h: min(118vw, 560px) !important;
        height: var(--hero-h) !important;
        min-height: 0 !important;
    }
    .video_wrap { overflow: hidden !important; }
    .video_wrap iframe {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        width: calc(var(--hero-h, 118vw) * 1.7778) !important;
        height: var(--hero-h, 118vw) !important;
        min-width: 100% !important;
        transform: translate(-50%, -50%) !important;
    }
    /* 히어로 문구 */
    .swiper-slide {
        padding: 0 20px !important;
        font-size: 21px !important;
        font-weight: 800 !important;
        line-height: 1.42 !important;
        letter-spacing: -.03em !important;
        word-break: keep-all !important;
    }
    .scroll-indicator { bottom: 16px !important; }
    .scroll-text { font-size: 11px !important; }

    /* ── 섹션 공통 여백 통일 ── */
    .ai_scan,
    .region_zones,
    .iso_story,
    .main_visual_bottom,
    .mb_section {
        padding-top: 52px !important;
        padding-bottom: 56px !important;
        padding-right: 18px !important;
        padding-left: 18px !important;
    }
    .scan_title,
    .pub_title,
    .iso_story_title,
    .cap_title,
    .mb_heading {
        font-size: 26px !important;
        line-height: 1.24 !important;
    }
    .scan_lead,
    .pub_intro,
    .iso_story_lead,
    .cap_intro {
        font-size: 14.5px !important;
        line-height: 1.68 !important;
    }

    /* ── 실시간 분석 섹션 ── */
    .scan_grid { gap: 14px !important; }
    .console_body {
        min-height: 210px !important;
        max-height: 210px !important;
        padding: 13px 14px !important;
        gap: 5px !important;
        font-size: 11.5px !important;
    }
    .c_line { gap: 6px !important; }
    .c_line .c_ts { font-size: 10.5px !important; }
    .c_line.c_code { font-size: 11px !important; }
    .c_line.c_code > span:last-child {
        padding-left: 9px !important;
        word-break: break-all !important;
        overflow-wrap: anywhere !important;
    }
    .console_name { font-size: 11px !important; }
    .scan_meters { padding: 18px 16px !important; gap: 13px !important; }
    .rg_row { padding: 6px 9px !important; }
    .rg_name { font-size: 13px !important; }
    .rg_state { font-size: 11px !important; }
    .meter_name { font-size: 13px !important; }
    .meter_val { font-size: 13.5px !important; }
    .scan_chart { height: 78px !important; gap: 9px !important; }
    .ch_bar { max-width: 36px !important; }
    .ch_bar::after { top: -17px !important; font-size: 10px !important; }
    .ch_name { font-size: 10.5px !important; }
    .scan_kw { padding: 5px 10px !important; font-size: 12px !important; }
    .scan_kws { min-height: 0 !important; }
    .res_card { padding: 17px 18px !important; }
    .res_tit { font-size: 16px !important; }
    .res_desc { font-size: 13.5px !important; }

    /* ── 권역 커버리지 카드 (진주·사천 / 거제·통영 / 남해) ── */
    .pub_grid { gap: 14px !important; }
    .pub_card,
    .pub_card:nth-child(2) {
        display: block !important;   /* 이미지 위 / 글 아래로 확실히 분리 */
    }
    .pub_visual,
    .pub_card:nth-child(2) .pub_visual,
    .pub_card:nth-child(3) .pub_visual {
        height: 168px !important;
        min-height: 0 !important;
    }
    .pub_cover,
    .pub_card:nth-child(2) .pub_cover { height: 100% !important; }
    .pub_visual::before { font-size: 40px !important; }
    .pub_info { padding: 17px 18px !important; }
    .pub_book_title { font-size: 19px !important; }
    .pub_author { font-size: 12.5px !important; }
    .pub_desc { font-size: 13.5px !important; line-height: 1.66 !important; }

    /* ── 전담 운영 ── */
    .iso_cert,
    .iso_cert + .iso_cert { padding: 16px 14px !important; }
    .iso_cert_name { font-size: 17px !important; }
    .iso_cert_status { font-size: 12.5px !important; }

    /* ── 역량 이미지 8장 ──
       1열 전체폭이면 세로로 2,000px 넘게 늘어난다.
       2열 + 고정 비율 크롭으로 스크롤 길이를 절반 이하로 줄인다. */
    .main_visual_bottom .main_timg {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }
    .cap_frame {
        aspect-ratio: 4 / 3 !important;
        overflow: hidden !important;
    }
    .main_visual_bottom .main_timg img {
        height: 100% !important;
        object-fit: cover !important;
    }
    .cap_caption { gap: 8px !important; padding: 11px 12px !important; }
    .cap_caption span { font-size: 10px !important; }
    .cap_caption strong { font-size: 12.5px !important; line-height: 1.35 !important; word-break: keep-all !important; }

    /* ── 서비스 / 서비스 지역 카드 ── */
    .mb_service { padding: 20px 18px !important; }
    .mb_service_tit { font-size: 17px !important; }
    .mb_service_desc { font-size: 13.5px !important; }
    .mb_press_card { padding: 17px 18px !important; }
    .mb_press_meta { font-size: 13px !important; }
    .mb_press_tit { font-size: 13.5px !important; line-height: 1.6 !important; }

    /* ── 신뢰 지표 / 채널 ── */
    .mb_stat_num { font-size: 27px !important; }
    .mb_stat_label { font-size: 12.5px !important; }
    .mb_channel { padding: 7px 13px !important; font-size: 12.5px !important; }
    .mb_cta { width: 100% !important; box-sizing: border-box !important; text-align: center !important; }
}

/* ── 좁은 폰 ── */
@media (max-width: 400px) {
    .main_visual { --hero-h: 126vw !important; }
    .swiper-slide { font-size: 19px !important; }
    .ai_scan,
    .region_zones,
    .iso_story,
    .main_visual_bottom,
    .mb_section {
        padding-right: 14px !important;
        padding-left: 14px !important;
    }
    .scan_title,
    .pub_title,
    .iso_story_title,
    .cap_title,
    .mb_heading { font-size: 23px !important; }
    .console_body { min-height: 190px !important; max-height: 190px !important; font-size: 11px !important; }
    .scan_chart { height: 68px !important; gap: 7px !important; }
    .ch_name { font-size: 9.5px !important; }
    .pub_visual,
    .pub_card:nth-child(2) .pub_visual,
    .pub_card:nth-child(3) .pub_visual { height: 148px !important; }
    .cap_caption strong { font-size: 11.5px !important; }
}