/* ==================================== */
/* 🚀 모바일 반응형 레이아웃 시작 (화면 너비 768px 이하) */
/* ==================================== */

@media screen and (max-width: 768px) {
    /* 1. 상단 내비게이션 컨테이너를 보이게 하고 스크롤 가능하게 설정 */
    .area_navbar {
        display: block !important; /* 혹시 display: none;으로 숨겨져 있다면 강제로 보이게 함 */
        width: 100%;
        overflow-x: auto; /* 가로 스크롤 활성화 (핵심) */
        overflow-y: hidden; /* 세로 스크롤은 비활성화 */
        -webkit-overflow-scrolling: touch; /* iOS에서 부드러운 스크롤 */
    }

    /* 2. 메뉴 항목이 들어있는 <ul> 요소에 줄바꿈 방지 적용 */
    .area_navbar .list_sitemenu {
        white-space: nowrap; /* 메뉴 항목들이 절대 줄바꿈되지 않게 함 (핵심) */
        display: flex; /* Flexbox로 가로 정렬 보장 */
        padding: 0 10px; /* 좌우 패딩을 주어 메뉴가 가장자리에 붙지 않게 함 */
        /* 필요하다면 <li>의 너비도 조정 가능 */
    }
    
    /* 3. 메뉴 항목 버튼 요소의 너비 조정 */
    .area_navbar .list_sitemenu li {
        display: inline-block; /* 가로 배열 유지 */
        flex-shrink: 0; /* 메뉴 항목이 찌그러지지 않도록 방지 */
        padding: 0 10px; /* 메뉴 항목 간 간격 조정 */
        width: auto !important; /* 고정된 PC 너비가 있다면 해제 */
    }
    
    /* 4. 이전/다음 메뉴 보기 버튼 숨기기 (모바일에서는 스크롤을 사용하므로 불필요) */
    .area_navbar .btn_list_prev,
    .area_navbar .btn_list_next {
        display: none;
    }

    /* 5. 메뉴 이름 텍스트가 잘리지 않도록 조정 */
    .area_navbar .menu_name {
        display: block;
    }
    .area_navbar .menu_name .text {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* 1. 기본 요소 설정: 모든 미디어 요소가 화면을 넘지 않도록 합니다. */
    img, 
    iframe, 
    video, 
    object {
        max-width: 100%;
        height: auto; /* 이미지의 비율을 유지 */
    }

    /* 2. 주 컨테이너: 고정된 PC 너비를 해제하고 전체 너비를 사용합니다. */
    .wrap,
    .fc_container,
    .container,
    .area_inner {
        width: 100% !important; 
        max-width: 100% !important; 
        /* 좌우 여백을 주어 콘텐츠가 화면 가장자리에 붙지 않도록 합니다. */
        padding-left: 15px; 
        padding-right: 15px;
        box-sizing: border-box; /* 패딩이 전체 너비에 포함되도록 함 */
        margin-left: auto;
        margin-right: auto;
    }

    /* 3. 헤더 및 내비게이션 (GNB) 처리 */
    .header {
        position: relative; /* PC에서 fixed 등 복잡한 설정이 있었다면 재설정 */
        height: auto;
    }

    /* PC에서 가로로 길게 늘어져 있던 메뉴 영역 숨김 */
    /* .area_navbar {
        display: none; 
    } */

    /* 전체보기 버튼(사이드 메뉴 토글) 영역은 필요하므로 유지 */
    .area_global {
        /* 필요에 따라 레이아웃 조정 (예: 오른쪽 정렬 유지) */
    }

    /* 4. 주요 콘텐츠 영역 (Main Area) 재배치 */
    .main_area .inner, 
    .fcdeck_ct {
        /* PC에서 사용된 컬럼 레이아웃(float, flex, grid 등)을 해제하고 세로로 쌓이게 합니다. */
        float: none;
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        padding: 0;
        display: block;
    }
    
    /* 카드 컴포넌트 간의 간격 조정 */
    .uio_box {
        margin-bottom: 20px;
    }

    /* 5. 상단 이미지 영역 (Spot Area) 조정 */
    .section_spot {
        /* 높이 고정 해제 및 패딩/마진 조정 */
        padding-bottom: 0;
    }
    
    .spot_homesite {
        padding: 15px; /* 내부 정보 영역 패딩 조정 */
        position: relative; /* PC에서 absolute였을 경우를 대비 */
        bottom: auto;
    }
    
    /* 6. 사이드 메뉴 (전체보기 메뉴) */
    .side_menu {
        /* 모바일에서는 화면 전체를 덮도록 설정되어 있을 가능성이 높으므로, 특별한 조정은 불필요. */
        /* 필요하다면 너비를 300px 등으로 고정할 수 있습니다. */
    }

}
/* --- 모바일 반응형 스타일 끝 --- */