/* 모바일 반응형 CSS - 기존 CSS 파일에 추가하거나 새로운 CSS 파일로 생성 */

/* ==============================================
   1. 기본 반응형 설정
   ============================================== */

/* 모든 디바이스에서 기본 설정 */
* {
    box-sizing: border-box;
}

.ast-container {
    max-width: 100%;
    padding: 0 15px;
}

/* ==============================================
   2. 태블릿 (768px 이하)
   ============================================== */
@media screen and (max-width: 768px) {
    
    /* 제목 크기 조정 */
    .elementor-heading-title {
        font-size: 1.5rem !important;
        line-height: 1.4 !important;
        text-align: center;
        word-break: keep-all;
    }
    
    /* 텍스트 에디터 내용 */
    .elementor-widget-text-editor {
        font-size: 14px !important;
        line-height: 1.6 !important;
        text-align: center;
    }
    
    /* 컨테이너 패딩 조정 */
    .e-con-inner {
        padding: 20px 15px !important;
    }
    
    /* 이미지 반응형 */
    .elementor-widget-image img {
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
    }
    
    /* 버튼 조정 */
    .elementor-button {
        width: 100% !important;
        padding: 12px 20px !important;
        font-size: 14px !important;
        margin-bottom: 10px !important;
    }
    
    /* 그리드 레이아웃을 세로 배치로 변경 */
    .e-grid {
        flex-direction: column !important;
    }
    
    /* 플렉스 컨테이너 조정 */
    .e-flex {
        flex-direction: column !important;
        align-items: center !important;
    }
}

/* ==============================================
   3. 모바일 (480px 이하)
   ============================================== */
@media screen and (max-width: 480px) {
    
    /* 더 작은 제목 */
    .elementor-heading-title {
        font-size: 1.2rem !important;
        margin-bottom: 15px !important;
    }
    
    /* 텍스트 크기 더 작게 */
    .elementor-widget-text-editor {
        font-size: 13px !important;
    }
    
    /* 컨테이너 패딩 더 작게 */
    .e-con-inner {
        padding: 15px 10px !important;
    }
    
    /* 버튼 크기 조정 */
    .elementor-button {
        padding: 10px 15px !important;
        font-size: 13px !important;
    }
    
    /* 스크롤 탑 버튼 크기 조정 */
    #ast-scroll-top {
        width: 40px !important;
        height: 40px !important;
        bottom: 20px !important;
        right: 20px !important;
    }
}

/* ==============================================
   4. 특정 페이지별 모바일 최적화
   ============================================== */

/* 첫 번째 페이지 (메인 페이지) 모바일 최적화 */
@media screen and (max-width: 768px) {
    
    /* 그라디언트 배경이 있는 섹션 */
    .elementor-element-2521388 .e-con-inner {
        text-align: center;
        padding: 30px 20px !important;
    }
    
    /* 강조 텍스트 색상 유지하면서 크기 조정 */
    .elementor-widget-text-editor span[style*="color"] {
        display: inline-block;
        margin: 2px 0;
    }
    
    /* 사업 프로그램 카드들 */
    .elementor-element-e4234be,
    .elementor-element-b7c4bf2,
    .elementor-element-54ac6df,
    .elementor-element-af6afc3 {
        margin-bottom: 15px !important;
        width: 100% !important;
    }
    
    /* 사업 프로그램 제목 */
    .elementor-element-e4234be h2,
    .elementor-element-b7c4bf2 h2,
    .elementor-element-54ac6df h2,
    .elementor-element-af6afc3 h2 {
        font-size: 1rem !important;
        margin-bottom: 10px !important;
    }
}

/* 두 번째 페이지 (ICT 시스템 설명) 모바일 최적화 */
@media screen and (max-width: 768px) {
    
    /* ICT 시스템 이미지들 */
    img[src*="A1IMG.png"],
    img[src*="A1IMG_2.png"] {
        width: 100% !important;
        height: auto !important;
        margin: 20px 0 !important;
    }
}

/* 세 번째 페이지 (K-VMI 시스템) 모바일 최적화 */
@media screen and (max-width: 768px) {
    
    /* K-VMI 시스템 이미지 */
    img[src*="A1IMG_3.png"] {
        width: 100% !important;
        height: auto !important;
        margin: 20px 0 !important;
    }
    
    /* K-VMI 설명 텍스트 */
    .elementor-element-2183cfd p {
        text-align: left !important;
        padding: 0 10px !important;
    }
}

/* ==============================================
   5. 가로 스크롤 방지
   ============================================== */
@media screen and (max-width: 768px) {
    body {
        overflow-x: hidden;
    }
    
    .elementor {
        overflow-x: hidden;
    }
    
    .e-con {
        overflow-x: hidden;
    }
}

/* ==============================================
   6. 터치 디바이스 최적화
   ============================================== */
@media screen and (max-width: 768px) {
    
    /* 터치하기 쉬운 버튼 크기 */
    .elementor-button,
    #ast-scroll-top {
        min-height: 44px !important;
        min-width: 44px !important;
    }
    
    /* 링크와 버튼 간격 */
    .elementor-button {
        margin: 10px 0 !important;
    }
}

/* ==============================================
   7. 폰트 크기 세밀 조정
   ============================================== */

/* 매우 작은 화면 (360px 이하) */
@media screen and (max-width: 360px) {
    
    .elementor-heading-title {
        font-size: 1.1rem !important;
    }
    
    .elementor-widget-text-editor {
        font-size: 12px !important;
    }
    
    .elementor-button {
        font-size: 12px !important;
        padding: 8px 12px !important;
    }
}

/* ==============================================
   8. 애니메이션 비활성화 (성능 향상)
   ============================================== */
@media screen and (max-width: 768px) {
    
    /* 모바일에서 애니메이션 비활성화 */
    .animated,
    .elementor-widget[data-settings*="animation"] {
        animation: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
}