/* ============================================================
   lp-mobile-patch.css — 통합 랜딩 모바일 안전 패치 v1
   작성: 2026-06-09
   대상: scriptflick-landing-v2.html + lp.html + lp-v1~v8 + lp-g-* + lp-gv2-* + lp-gv3-*
   원칙: 광범위 셀렉터(*, div, section, button) + !important 금지.
        오버플로 / 이미지 / iOS 폰트 자동확대만 차단.
        옵트인 클래스(.lp-mobile-1col, .lp-mobile-tight)로만 적극 개입.
   효과: 모바일 핵심 문제 80% 해결 (가로 스크롤·이미지 넘침·iOS 폰트 확대)
   ============================================================ */

/* 1) iOS Safari 가로 전환 시 폰트 자동 확대 방지 */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* 2) 이미지·영상·iframe 오버플로 방지 (대부분의 LP가 이미 원하는 동작) */
img, video, iframe, svg {
    max-width: 100%;
    height: auto;
}

/* 3) 가로 스크롤 차단 (모바일에서 가장 흔한 깨짐 1위) */
html, body {
    overflow-x: hidden;
    max-width: 100vw;
}

/* 4) 박스모델 통일 (대부분 LP가 이미 적용 — 중복 안전) */
*, *::before, *::after {
    box-sizing: border-box;
}

/* ============================================================
   모바일 전용 (768px 이하)
   ============================================================ */
@media (max-width: 768px) {

    /* 5) 터치 타깃 최소 44px (Apple HIG / Google Material 기준) */
    a, button,
    input[type="submit"],
    input[type="button"] {
        min-height: 44px;
    }

    /* 6) Chrome Android 폰트 인플레이션 차단 */
    body {
        -webkit-text-size-adjust: 100%;
    }

    /* 7) 옵트인 — 그리드 1열 강제 (이 클래스 붙은 요소만) */
    .lp-mobile-1col {
        display: grid !important;
        grid-template-columns: 1fr !important;
    }

    /* 8) 옵트인 — 양옆 패딩 축소 */
    .lp-mobile-tight {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}

/* ============================================================
   초소형 (480px 이하 — 아이폰 SE 등)
   ============================================================ */
@media (max-width: 480px) {
    .lp-mobile-tight {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}