/* 공통 버튼 숨김 처리 */
#btn-m-left,
#btn-m-right,
.btn-left-toggle,
.btn-right-toggle {
    display: none;
}


/* 1024px 이하 (태블릿 및 iPad Mini 대응) */
/* 1240px 이하 (태블릿 및 1180px 해상도 대응) */
@media screen and (max-width: 1240px) {
    /* 1. 우측 토글 버튼 표시 및 오른쪽 패널 숨김 */
    .btn-right-toggle {
        display: block;
    }

    .container-wrap .container-right {
        position: fixed;
        top: 0;
        right: -280px;
        width: 260px;
        height: 100vh;
        background: #fff;
        z-index: 999;
        box-shadow: -2px 0 10px rgba(0,0,0,0.1);
        transition: right 0.3s ease;
        padding: 20px;
        box-sizing: border-box;
        overflow-y: auto;
    }

    /* 2. 왼쪽 패널은 기본 노출 */
    .container-wrap .container-left {
        display: block !important;
        position: relative !important;
        left: 0 !important;
        float: left;
        width: 260px !important;
        height: auto;
        box-shadow: none;
    }

    /* 3. 중앙 영역 크기 조절 */
    .container-wrap .container-center {
        width: calc(100% - 280px) !important;
        margin-left: 20px !important;
        padding-right: 20px !important;
        float: left;
        transition: width 0.3s;
    }

    /* 4. 우측 패널 열렸을 때 동작 */
    .container-wrap.open-right .container-right {
        right: 0;
    }

    .container-wrap.open-right .btn-right-toggle {
        right: 260px;
    }

        .container-wrap.open-right .btn-right-toggle::before {
            transform: rotate(135deg);
            margin-left: -5px;
        }

    /* 헤더 레이아웃 유지 */
    #header .w1600 .center.search-box {
        position: relative;
        left: 0;
        transform: none;
        width: 100%;
        max-width: 100%;
        margin-top: 15px;
        clear: both;
    }

    #header .w1600.str.clear,
    #header .header-02 {
        display: flex !important;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        width: 100% !important;
        padding: 10px 15px;
        box-sizing: border-box;
    }

    #header .logo-div {
        margin-right: auto;
        position: relative;
        z-index: 10;
    }

    #header .center.search-box {
        position: relative !important;
        left: 0 !important;
        transform: none !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-top: 15px;
        order: 3;
        clear: both;
    }

        #header .center.search-box .input-box {
            width: 100%;
        }
}

/* =========================================
   768px 이하 (iPad Mini 세로 및 모바일 대응)
   ========================================= */
@media screen and (max-width: 768px) {
    /* 1. 좌측 화살표 토글 버튼 노출 */
    .btn-left-toggle {
        display: flex !important;
        align-items: center;
        justify-content: center;
        position: fixed;
        left: 0;
        top: 40%;
        width: 30px;
        height: 60px;
        background: #005AAB;
        z-index: 1000;
        border: none;
        border-radius: 0 5px 5px 0;
        cursor: pointer;
        box-shadow: 2px 0 5px rgba(0,0,0,0.2);
        transition: left 0.3s ease;
    }

        /* 화살표(>) 그리기 */
        .btn-left-toggle::before {
            content: '';
            display: inline-block;
            width: 8px;
            height: 8px;
            border-top: 2px solid #fff;
            border-right: 2px solid #fff;
            transform: rotate(45deg);
            margin-right: 4px;
            transition: transform 0.3s;
        }

    /* 2. 왼쪽 패널 화면 밖으로 숨기기 및 슬라이드 준비 */
    .container-wrap .container-left {
        position: fixed !important;
        top: 0;
        left: -280px !important;
        width: 260px !important;
        height: 100vh;
        background: #fff;
        z-index: 999;
        box-shadow: 2px 0 10px rgba(0,0,0,0.1);
        transition: left 0.3s ease;
        padding: 20px;
        box-sizing: border-box;
        overflow-y: auto;
    }

    /* 3. 중앙 영역 100% 확장 (왼쪽 메뉴가 숨겨졌으므로) */
    .container-wrap .container-center {
        width: 100% !important;
        margin-left: 0 !important;
        padding: 0 15px !important;
    }

    /* 4. 좌측 패널 열렸을 때 (.open-left) 동작 */
    .container-wrap.open-left .container-left {
        left: 0 !important;
    }

    .container-wrap.open-left .btn-left-toggle {
        left: 260px !important;
    }
        /* 패널 열리면 화살표 방향 반전(<) */
        .container-wrap.open-left .btn-left-toggle::before {
            transform: rotate(225deg);
            margin-right: 0;
            margin-left: 4px;
        }

    .container-wrap .container-center {
        width: 100% !important;
        margin-left: 0 !important;
        /* 기존 padding: 0 15px !important; 에서 상단 여백(20px) 추가 */
        padding: 20px 15px 0 15px !important;
    }
}


/* 태블릿 및 노트북(1440px 이하) 화면 대응: 안전한 Flex 배치 */
@media screen and (max-width: 1440px) {
    /* 1. 유동적 너비 설정 */
    .w1600, .w1400, .w1200, .w850, .w800, .w-800px, .w700, .w550, .container-wrap {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        box-sizing: border-box !important;
    }

    body, html {
        overflow-x: hidden;
        width: 100%;
    }

    /* =========================================
       3. 헤더 레이아웃 (Flex 충돌 방지 및 안전한 배치)
       ========================================= */
    #header .w1600.str.clear {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center;
    }

        /* 기존 float 해제용 가상요소가 flex 아이템이 되어 레이아웃을 깨는 현상 방지 */
        #header .w1600.str.clear::before,
        #header .w1600.str.clear::after {
            display: none !important;
        }

    /* 햄버거 버튼 & 로고 (크기 축소 방지) */
    #header .btn-nav {
        flex-shrink: 0 !important;
    }

    #header .logo-div {
        flex-shrink: 0 !important;
        margin-right: 20px !important;
    }

    /* 검색창 영역: 남는 공간 차지하되 최대 550px 제한 */
    #header .center.search-box {
        flex: 1; /* 남는 공간 유연하게 차지 */
        max-width: 550px !important;
        margin-top: 0 !important;
        margin-right: auto !important; /* 우측 메뉴를 오른쪽 끝으로 밀어냄 */
        display: block !important;
        order: 0 !important;
    }

        /* 기존 돋보기 버튼의 절대위치(absolute) 방식을 존중하여 밀착 */
        #header .center.search-box .input-box {
            position: relative !important;
            display: block !important;
            width: 100% !important;
        }

            #header .center.search-box .input-box label {
                display: block !important;
                width: 100% !important;
            }

            #header .center.search-box .input-box input {
                width: 100% !important;
                padding-right: 50px !important; /* 돋보기 버튼이 올라갈 우측 여백을 미리 확보 */
                box-sizing: border-box !important;
            }

        /* 돋보기 버튼: 우측 끝에 겹쳐 올림 (간격 제로) */
        #header .center.search-box .search-btn {
            position: absolute !important;
            top: 50% !important;
            right: 5px !important; /* 입력창 우측 끝에 밀착 */
            transform: translateY(-50%) !important;
            float: none !important;
            display: block !important;
            z-index: 10;
        }

    /* 우측 사용자 메뉴 */
    #header .hd-r-list {
        flex-shrink: 0 !important;
        display: flex !important;
        align-items: center;
        float: none !important;
        margin-left: auto !important;
    }

    /* 4. 서브 메뉴 스와이프 */
    .header-sub-menu02 .w1200,
    #sub-menu-con-warp {
        overflow-x: auto;
        white-space: nowrap;
        padding-bottom: 5px;
    }

    .header-sub-menu02 .sub-menu-list {
        min-width: max-content;
    }

    .sub-menu-con li {
        display: inline-block;
        float: none;
    }
}

/* 1024px 이하 (iPad 세로 모드 및 모바일 대응) */
@media screen and (max-width: 1024px) {
    /* 헤더 영역 줄바꿈 허용 */
    #header .w1600.str.clear {
        flex-wrap: wrap !important;
    }

    /* 검색창을 밑으로 내리고 가로 크기를 100%로 확장 */
    #header .center.search-box {
        flex: 0 0 100% !important; /* 상위 flex: 1 속성 무효화 및 100% 차지 */
        width: 100% !important;
        max-width: 100% !important;
        margin-top: 15px !important;
        margin-right: 0 !important;
        order: 3 !important; /* 로고와 우측 메뉴 아래로 순서 배치 */
        clear: both;
    }

        #header .center.search-box .input-box {
            width: 100%;
        }
}

/* 태블릿(iPad Mini 등) 및 모바일 대응을 위한 공통 레이아웃 수정 */
@media screen and (max-width: 1240px) {
    /* 1. 고정 너비 해제 및 화면에 맞게 100% 적용 */
    .w1200 {
        width: 100% !important;
        max-width: 1240px;
        padding: 0 20px;
        box-sizing: border-box;
    }

    .w700 {
        width: 100% !important;
        max-width: 700px;
        padding: 0 20px;
        box-sizing: border-box;
    }

    .w550, .w850, .w800, .w-800px {
        width: 100% !important;
        padding: 0 20px;
        box-sizing: border-box;
    }
    /* 2. 검색창 영역 패딩 조정 */
    #main-container .search-wrap {
        padding: 25% 0 100px;
    }
    /* 3. 푸터(하단) 영역 레이아웃 유연하게 조정 */
    #footer .div01-li {
        float: none;
        width: 100%;
        margin-bottom: 20px;
        text-align: center;
    }

        #footer .div01-li.str {
            width: 100%;
            margin: 0 auto;
            max-width: 400px;
        }

    /* 하단 텍스트 중앙 정렬 */
    .div02 .info_inline {
        text-align: center !important;
    }
}