* {
    box-sizing: border-box;
}

/* 공통 스타일 (header, main, section, footer 등) */
.container header,
.container main,
.container section,
.container footer {
    width: 100%;
    padding: 16px;
    box-sizing: border-box; /* 패딩, 보더까지 폭에 포함시키도록 */
}

/* 섹션 별도 스타일: 레이아웃 구분을 위해 배경색, 여백 등 지정 */
.container section {
    max-width: 1200px; /* 필요에 따라 최대 폭 제한 */
    margin: 0 auto;    /* 가운데 정렬 */
    background-color: #fafafa; /* 살짝 다른 배경색 */
}

/* 작은 화면 (최대 480px) */
@media (max-width: 480px) {
    .container header,
    .container main,
    .container section,
    .container footer {
        padding: 8px;
    }

    .container section {
        max-width: 100%;
        margin: 0; /* 작은 화면에서는 좌우 여백을 없애거나 최소화 */
    }
}

/* 중간 화면 (481px ~ 768px) */
@media (min-width: 481px) and (max-width: 768px) {
    .container header,
    .container main,
    .container section,
    .container footer {
        padding: 12px;
    }

    .container section {
        max-width: 600px; /* 태블릿용 적당한 폭 */
    }
}

/* 큰 화면 (769px 이상) */
@media (min-width: 769px) {
    .container header,
    .container main,
    .container section,
    .container footer {
        padding: 16px; /* 기본값 유지 */
    }

    .container section {
        max-width: 1200px; /* 데스크톱용 폭 */
    }
}

/* ========== 모바일 폰트 크기 제한 (임시 해결책) ========== */
/* 시스템 글자 크기를 최대로 설정해도 읽기 가능한 레이아웃 유지 */

/* WebView 감지 및 폰트 크기 조정 */
/* Android WebView는 wv 또는 WebView를 포함 */
@supports (-webkit-overflow-scrolling: touch) {
    /* iOS WebView */
    html {
        -webkit-text-size-adjust: 100% !important;
        text-size-adjust: 100% !important;
    }
}

/* Android WebView 대응 */
html {
    /* WebView에서 텍스트 크기 자동 조정 비활성화 */
    -webkit-text-size-adjust: 100% !important;
    -moz-text-size-adjust: 100% !important;
    -ms-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
}

@media screen and (max-width: 768px) {
    /* 루트 폰트 크기 제한 */
    html {
        font-size: 16px !important;
        max-font-size: 16px !important;
    }
    
    /* 전체 요소에 최대 폰트 크기 제한 */
    * {
        max-font-size: 20px !important; /* 일부 브라우저 지원 */
    }
    
    /* 본문 텍스트 */
    body, p, div, span, li, td, th {
        font-size: min(1em, 16px) !important;
    }
    
    /* 제목 요소 */
    h1 {
        font-size: min(1.5em, 24px) !important;
    }
    
    h2, .title-large {
        font-size: min(1.3em, 21px) !important;
    }
    
    h3, .title-medium {
        font-size: min(1.2em, 19px) !important;
    }
    
    h4, h5, h6, .title-small {
        font-size: min(1.1em, 18px) !important;
    }
    
    /* 버튼과 입력 요소 */
    button, input, select, textarea {
        font-size: min(1em, 16px) !important;
    }
    
    /* 작은 텍스트 요소 */
    small, .small-text, .caption {
        font-size: min(0.875em, 14px) !important;
    }
    
    /* 네비게이션 요소 */
    nav, .nav-item, .menu-item {
        font-size: min(1em, 16px) !important;
    }
}

/* 가로 모드일 때는 좀 더 여유 있게 */
@media screen and (max-width: 768px) and (orientation: landscape) {
    body, p, div, span, li, td, th {
        font-size: min(1em, 18px) !important;
    }
    
    h1 {
        font-size: min(1.5em, 26px) !important;
    }
}