/* mobile-fixes.css */
/* 기존 디자인은 건드리지 않고 모바일 반응형만 추가 */

/* 기본 박스 모델 설정 (기존 스타일과 충돌 방지) */
@media (max-width: 768px) {
    /* 전체 페이지 가로 스크롤 방지 */
    html {
        overflow-x: hidden;
    }
    
    body {
        overflow-x: hidden;
        max-width: 100%;
    }
    
    /* 모든 요소의 박스 사이징 조정 */
    * {
        box-sizing: border-box;
    }
    
    /* 컨테이너 요소들 반응형 */
    .container, 
    .main-content,
    .content,
    .wrapper {
        max-width: 100%;
        padding-left: 15px;
        padding-right: 15px;
        overflow-x: hidden;
    }
    
    /* 텍스트 요소 반응형 처리 */
    h1, h2, h3, h4, h5, h6, 
    p, span, div, li {
        word-wrap: break-word;
        word-break: keep-all;
        overflow-wrap: break-word;
        max-width: 100%;
    }
    
    /* 테이블 반응형 */
    table {
        width: 100%;
        overflow-x: auto;
        display: block;
        white-space: nowrap;
    }
    
    table thead, 
    table tbody, 
    table tfoot {
        display: table;
        width: 100%;
    }
    
    /* 이미지 반응형 */
    img {
        max-width: 100%;
        height: auto;
    }
    
    /* 차트 컨테이너만 반응형 처리 */
    canvas {
        max-width: 100% !important;
        height: auto !important;
    }
    
    /* 차트를 감싸는 div 요소들 */
    div[id*="chart"], 
    div[class*="chart"],
    .chart-container,
    div:has(canvas) {
        max-width: 100%;
        overflow: hidden;
    }
    
    /* 버튼 반응형 (기존 스타일 유지하면서) */
    button, 
    .btn,
    a.btn,
    input[type="submit"],
    input[type="button"] {
        max-width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    /* 폼 요소 반응형 */
    input, 
    textarea, 
    select {
        max-width: 100%;
        width: 100%;
        box-sizing: border-box;
    }
    
    /* 플렉스 레이아웃이 있는 경우 */
    .flex,
    .d-flex,
    [style*="display: flex"],
    [style*="display:flex"] {
        flex-wrap: wrap;
    }
    
    /* 그리드 레이아웃이 있는 경우 */
    .grid,
    .d-grid,
    [style*="display: grid"],
    [style*="display:grid"] {
        grid-template-columns: 1fr;
    }
}

/* 매우 작은 화면 대응 */
@media (max-width: 480px) {
    /* 패딩 조정 */
    .container, 
    .main-content,
    .content,
    .wrapper {
        padding-left: 10px;
        padding-right: 10px;
    }
    
    /* 폰트 크기가 너무 큰 경우 조정 */
    h1 {
        font-size: calc(1.5rem + 0.5vw);
        line-height: 1.2;
    }
    
    h2 {
        font-size: calc(1.3rem + 0.3vw);
        line-height: 1.2;
    }
    
    h3 {
        font-size: calc(1.1rem + 0.2vw);
        line-height: 1.2;
    }
}

/* 가로 스크롤 방지를 위한 추가 설정 */
@media (max-width: 768px) {
    /* 절대 위치 요소들 조정 */
    [style*="position: absolute"],
    [style*="position:absolute"] {
        max-width: calc(100vw - 30px);
    }
    
    /* 고정 너비가 설정된 요소들 */
    [style*="width: "],
    [style*="min-width: "] {
        max-width: 100% !important;
    }
    
    /* 마진이 음수인 요소들 */
    [style*="margin-left: -"],
    [style*="margin-right: -"] {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* 패딩이 너무 큰 요소들 */
    [style*="padding-left: "],
    [style*="padding-right: "] {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}