@charset "utf-8";
/* ============================================================
   [v9_bom01] 반응형 깨짐 보정 — RESPONSIVE FIX
   파일: css/v9_bom01_responsive_fix.css
   로드: head.sub.php 에서 v9_bom01_theme.css(99) 이후 우선순위 100 으로 로드
   목적: 메인 섹션별 인라인 <style> 의 누락/오류 보정 + 서브/게시판 보정
   원칙: 인라인 스타일보다 늦게 로드되어도 확실히 적용되도록 필요한 곳에 !important
   ============================================================ */

/* ------------------------------------------------------------
   0. 전역 가로 넘침 방지 (안전망)
   ------------------------------------------------------------ */
html, body { max-width: 100%; overflow-x: hidden; }
.v9_bom01-wrap { max-width: 100%; overflow-x: hidden; }
.v9_bom01-wrap img,
.v9_bom01-wrap video,
.v9_bom01-wrap iframe { max-width: 100%; }
/* 게시글 본문 내 붙여넣은 표/이미지 넘침 방지 */
#bo_v_con table { max-width: 100%; }
#bo_v_con { overflow-x: auto; }

/* ============================================================
   1. 태블릿 (max-width: 1024px) — 누락 보정
   ============================================================ */
@media (max-width: 1024px) {
    .v9_bom01-container { padding: 0 28px; }

    /* HERO */
    .v9_bom01-hero { min-height: 760px; }
    .v9_bom01-hero__title { font-size: 44px !important; }
    .v9_bom01-hero__desc  { font-size: 19px; }

    /* 통계 4칸 → 태블릿에서 너무 좁음 (theme 에 1024 누락) */
    .v9_bom01-stats__inner { grid-template-columns: repeat(2, 1fr) !important; gap: 40px 0 !important; padding: 48px 32px !important; }
    .v9_bom01-stats__item:nth-child(2)::after { display: none; }
    .v9_bom01-stats__num { font-size: 46px !important; }

    /* WORKS 제목 (theme 1024 미적용) */
    .v9_bom01-works { padding: 90px 0; }
    .v9_bom01-works__title { font-size: 44px !important; }

    /* CTA */
    .v9_bom01-cta__inner { padding: 64px 48px !important; }
    .v9_bom01-cta__title { font-size: 40px !important; }
    .v9_bom01-cta__content { max-width: 100%; }

    /* 서비스 카드 헤드 정렬 */
    .v9_bom01-service__list { grid-template-columns: 1fr 1fr !important; }
}

/* ============================================================
   2. 모바일 (max-width: 768px) — 핵심 보정
   ============================================================ */
@media (max-width: 768px) {
    .v9_bom01-container { padding: 0 20px; }

    /* HERO */
    .v9_bom01-hero { min-height: 600px; }
    .v9_bom01-hero__title { font-size: 30px !important; line-height: 1.25; }
    .v9_bom01-hero__desc  { font-size: 16px; line-height: 1.65; }
    .v9_bom01-hero__cta { flex-direction: column; align-items: stretch; }
    .v9_bom01-hero__cta .v9_bom01-btn { width: 100%; justify-content: center; }

    /* 섹션 공통 제목 — 60px 계열 강제 축소 */
    .v9_bom01-works__title { font-size: 28px !important; }
    .v9_bom01-cta__title   { font-size: 26px !important; }

    /* WORKS — 인라인 <style> 의 깨진 규칙(.title{flex}) 보정 */
    .v9_bom01-works { padding: 64px 0; }
    .v9_bom01-works__head { flex-direction: column !important; align-items: flex-start !important; gap: 18px !important; }
    .v9_bom01-works__title { flex-direction: row !important; } /* h2 오규칙 무력화 */
    .v9_bom01-works__sub { font-size: 15px; }
    .v9_bom01-works__name { font-size: 22px; }
    /* 모바일에서는 hover 가 없으므로 설명 텍스트 항상 노출 */
    .v9_bom01-works__txt { opacity: 1 !important; max-height: none !important; margin-top: 6px !important; font-size: 13px; }
    .v9_bom01-works__caption { padding: 24px; }

    /* 통계 2칸 — 가운데 세로 구분선 정리 */
    .v9_bom01-stats__inner { grid-template-columns: repeat(2, 1fr) !important; gap: 36px 0 !important; padding: 40px 22px !important; }
    .v9_bom01-stats__item:nth-child(2)::after,
    .v9_bom01-stats__item:nth-child(even)::after { display: none !important; }
    .v9_bom01-stats__num { font-size: 36px !important; }
    .v9_bom01-stats__label { font-size: 14px; }

    /* CTA */
    .v9_bom01-cta { padding: 40px 0 72px; }
    .v9_bom01-cta__inner { padding: 44px 24px !important; border-radius: 20px; }

    /* ABOUT / SERVICE / PROCESS / STORY 제목 통일 축소 */
    .v9_bom01-about__title,
    .v9_bom01-service__title,
    .v9_bom01-process__title,
    .v9_bom01-story__title { font-size: 28px !important; }

    /* SERVICE 1칸 */
    .v9_bom01-service__list { grid-template-columns: 1fr !important; }

    /* STORY 플로팅 박스 정상 흐름 배치 */
    .v9_bom01-story__float { position: static !important; margin-top: 20px !important; max-width: none !important; }

    /* 서브 페이지 히어로 */
    .v9_bom01-phero { padding: 110px 0 50px; }
    .v9_bom01-phero__title { font-size: 30px !important; }
    .v9_bom01-phero__desc { font-size: 15px; }
    .v9_bom01-phero__bgtext { font-size: 64px !important; right: 16px; }

    /* 서브 공통 섹션 / 비교표 */
    .v9_bom01-sec { padding: 56px 0; }
    .v9_bom01-sec__title { font-size: 26px !important; }
    .v9_bom01-scope { -webkit-overflow-scrolling: touch; }
    .v9_bom01-subcta__title { font-size: 24px !important; }
    .v9_bom01-subcta__btns { flex-direction: column; }
    .v9_bom01-subcta__btns .v9_bom01-btn { width: 100%; justify-content: center; }

    /* 푸터 */
    .v9_bom01-footer__top { grid-template-columns: 1fr !important; gap: 28px !important; }
    .v9_bom01-footer__bottom { flex-direction: column; align-items: flex-start; gap: 10px; }

    /* 게시판 검색/탭 줄바꿈 */
    .v9_bom01-board__bar { flex-direction: column; align-items: stretch; gap: 14px; }
    .v9_bom01-board__search input { width: 100%; }
}

/* ============================================================
   3. 소형 폰 (max-width: 480px) — 신규 보정 티어
   ============================================================ */
@media (max-width: 480px) {
    .v9_bom01-container { padding: 0 16px; }

    .v9_bom01-hero__title { font-size: 26px !important; }

    /* 통계 1칸 — 360px 급에서 2칸은 숫자 줄바꿈 발생 */
    .v9_bom01-stats__inner { grid-template-columns: 1fr !important; gap: 28px 0 !important; }
    .v9_bom01-stats__item::after { display: none !important; }
    .v9_bom01-stats__num { font-size: 40px !important; }

    .v9_bom01-works__title,
    .v9_bom01-cta__title,
    .v9_bom01-about__title,
    .v9_bom01-service__title,
    .v9_bom01-process__title,
    .v9_bom01-story__title,
    .v9_bom01-phero__title,
    .v9_bom01-sec__title { font-size: 23px !important; }

    .v9_bom01-phero__bgtext { display: none; } /* 소형에서 워터마크 숨김(넘침 방지) */
    .v9_bom01-cta__inner { padding: 36px 18px !important; }

    /* 게시판 글쓰기/리스트 버튼 폭 확보 */
    .v9_bom01-pager a { min-width: 38px; height: 38px; font-size: 14px; }
}