/*==================================================
  모바일 가로 스크롤 문제 해결 CSS
==================================================*/

/* 전체 뷰포트 제한 */
html, body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 모든 요소 박스 사이징 */
*, *::before, *::after {
    box-sizing: border-box !important;
}

@media screen and (max-width: 992px) {
    
    /* 메인 컨테이너 너비 제한 */
    .container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        margin: 0 !important;
        overflow-x: hidden !important;
    }
    
    /* 섹션 너비 제한 */
    section {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
    
    /* 모든 div 요소 너비 제한 */
    div {
        max-width: 100% !important;
    }
    
    /* 헤더 너비 고정 */
    .header {
        width: 100% !important;
        max-width: 100% !important;
        left: 0 !important;
        right: 0 !important;
        margin: 0 !important;
    }
    
    /* 네비게이션 바 */
    .navbar {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    /* Hero 섹션 너비 제한 */
    .hero-section,
    .hero-slide,
    .hero-content,
    .hero-bg {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
    
    /* 이미지 너비 제한 */
    img {
        max-width: 100% !important;
        height: auto !important;
        display: block !important;
    }
    
    /* 테이블 반응형 처리 */
    table {
        max-width: 100% !important;
        display: block !important;
        overflow-x: auto !important;
    }
    
    /* 버튼 그룹 */
    .hero-buttons,
    .cta-buttons,
    .auth-buttons,
    .btn-group {
        width: 100% !important;
        max-width: 100% !important;
        flex-wrap: wrap !important;
    }
    
    /* Swiper 컨테이너 */
    .swiper,
    .swiper-container,
    .swiper-wrapper,
    .swiper-slide {
        max-width: 100% !important;
        overflow: hidden !important;
    }
    
    /* 그리드 레이아웃 */
    .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
        max-width: 100% !important;
    }
    
    .col, [class*="col-"] {
        padding-left: 15px !important;
        padding-right: 15px !important;
        max-width: 100% !important;
    }
    
    /* 카드 요소 */
    .card,
    .category-item,
    .product-card,
    .company-card,
    .service-card {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* 푸터 너비 제한 */
    .footer,
    .footer-top,
    .footer-bottom,
    .footer-links-container {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
    
    /* 모달 너비 제한 */
    .modal,
    .modal-dialog,
    .modal-content {
        max-width: calc(100% - 20px) !important;
        margin: 10px !important;
    }
    
    /* Pre, Code 블록 */
    pre, code {
        max-width: 100% !important;
        overflow-x: auto !important;
        word-wrap: break-word !important;
    }
    
    /* 긴 텍스트 처리 */
    p, h1, h2, h3, h4, h5, h6, span, a, li, td, th {
        word-wrap: break-word !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
        hyphens: auto !important;
        max-width: 100% !important;
    }
    
    /* 절대 위치 요소 제한 */
    [style*="position: absolute"],
    [style*="position:absolute"] {
        max-width: 100% !important;
    }
    
    /* Fixed 요소 제한 */
    [style*="position: fixed"],
    [style*="position:fixed"] {
        max-width: 100% !important;
    }
    
    /* 인라인 스타일 덮어쓰기 */
    [style*="width"] {
        max-width: 100% !important;
    }
    
    /* 패딩/마진으로 인한 넘침 방지 */
    * {
        box-sizing: border-box !important;
    }
    
    /* 가로 스크롤바 숨기기 (필요시) */
    ::-webkit-scrollbar-horizontal {
        display: none !important;
    }
    
    /* CTA 섹션 */
    .cta-section,
    .cta-container,
    .cta-content {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    
    /* 통계 섹션 */
    .stats-section,
    .stats-grid {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* 서비스 섹션 */
    .service-section,
    .service-content,
    .service-features,
    .service-image {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    /* 카테고리 그리드 */
    .categories-grid,
    .products-grid,
    .companies-grid {
        width: 100% !important;
        max-width: 100% !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 15px !important;
        padding: 0 !important;
    }
    
    /* 모바일 메뉴 위치 조정 */
    .mobile-menu {
        max-width: 85% !important;
        right: -100% !important;
    }
    
    .mobile-menu.active {
        right: 0 !important;
        max-width: 85% !important;
    }
    
    /* Back to top 버튼 위치 */
    .back-to-top {
        right: 15px !important;
        bottom: 15px !important;
    }
    
    /* 섹션 헤더 */
    .section-header,
    .section-title,
    .section-subtitle,
    .section-desc {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}

/* 극소형 디바이스 (320px) */
@media screen and (max-width: 375px) {
    .container {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    
    .col, [class*="col-"] {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    
    .section-header,
    .section-title,
    .section-subtitle,
    .section-desc {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
}

/* 가로 모드 대응 */
@media screen and (max-width: 992px) and (orientation: landscape) {
    html, body {
        overflow-x: hidden !important;
    }
    
    .container {
        max-width: 100% !important;
    }
}