/* 레이아웃 CSS */
.rows_gnb_wrap {border-top:1px solid rgba(255,255,255,0.2); padding-top: 10px; margin-top: 20px;}

/* ★ 추가: 모든 헤더 요소에 box-sizing 적용 (우측 여백 삐져나감 방지) */
#header *, #header *::before, #header *::after { box-sizing: border-box; }

/* =========================================================
   [수정] 스크롤 시 부드러운 스티키 헤더 (데스크탑만)
   ========================================================= */
@media all and (min-width:1025px) {
    /* 1. 헤더 전체 고정 래퍼 */
    #header {
        position: fixed !important;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 1000;
        /* 스크롤 전: 완벽한 불투명 흰색 배경 */
        background-color: rgba(255, 255, 255, 0.75) !important;		
	    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
        box-shadow: 0 1px 0 rgba(0,0,0,0.05);
        transition: background-color 0.3s ease, backdrop-filter 0.3s ease, box-shadow 0.3s ease;
    }

    #header .gnb_wrap {
        background-color: transparent !important;
        background: none !important;
    }
    
    #header a, #header span {
        color: #333 !important;
        transition: color 0.2s ease-in-out, opacity 0.2s ease-in-out;
    }
    #header a:hover, #header span:hover {
        color: #25282B !important;
        opacity: 0.6;
    }
    
    #header button svg,
    #header button svg path,
    #header .search_top_wrap svg path,
    #header .tog_wrap svg path,
    #header .snb_wrap a svg,
    #header .snb_wrap a svg path,
    #header .snb_wrap a svg rect,
    #header .snb_wrap a svg circle {
        fill: #333 !important;
        color: #333 !important;
        transition: fill 0.2s ease-in-out, opacity 0.2s ease-in-out, color 0.2s ease-in-out;
    }
    
    #header button:hover svg,
    #header button:hover svg path,
    #header .search_top_wrap button:hover svg path,
    #header .tog_wrap a:hover svg path,
    #header .snb_wrap a:hover svg,
    #header .snb_wrap a:hover svg path,
    #header .snb_wrap a:hover svg rect,
    #header .snb_wrap a:hover svg circle {
        fill: #25282B !important; 
        color: #25282B !important;
        opacity: 0.6 !important; 
    }

    .gnb_wrap > .inner:first-child {
        max-height: 150px; 
        overflow: hidden;
        background-color: transparent !important; 
        transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
                    padding-top 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
                    padding-bottom 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
                    margin-top 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
                    margin-bottom 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
                    opacity 0.3s ease,
                    transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        opacity: 1;
        transform: translateY(0);
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .gnb_wrap .rows_gnb_wrap {
        margin-top: 0 !important;
        padding-top: 15px !important;
        padding-bottom: 15px !important;
        transition: padding 0.3s ease;
        border-top: none;
        background-color: transparent !important;
    }
    
    #header.scrolled {
	    padding-top: 5px;
        background-color: #ffffff !important; 
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    }
    
    #header.scrolled .gnb_wrap > .inner:first-child {
        max-height: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        opacity: 0 !important;
        transform: translateY(-20px); 
    }
    
    #header.scrolled .gnb_wrap .rows_gnb_wrap {
        padding-top: 15px !important;
        padding-bottom: 15px !important;
    }
}

.row_gnbs {position: relative;}
.row_gnbs .cbp-hrmenu > ul, .cbp-hrmenu .cbp-hrsub-inner {padding-left: 0px; padding-right: 0px;}
.row_gnbs .cbp-hrmenu > ul > li {padding-left: 0px; padding-right: 30px;}
.row_gnbs .cbp-hrmenu > ul {float:none !important; line-height: 100%;}
.gnb_wrap .row_gnbs nav {float:none;}
.row_gnbs .cbp-hrmenu .cbp-hrsub {top:40px;}

/* =========================================================
   검색창 및 my 버튼 테두리 문제 해결 영역
   ========================================================= */
.search_top_wrap {float:left; position: relative; width: 280px;}
.search_top_wrap input {
    border:1px solid #ddd; 
    background-color: #fff; 
    border-radius: 60px; 
    height:40px; 
    width: 100%; 
    color:#000; 
    padding: 0 15px;
    box-sizing: border-box; /* ★ 가로 스크롤 버그 해결 핵심 */
}
.search_top_wrap input::placeholder{font-family:'font-R',sans-serif; color:#999;}
.search_top_wrap button {position: absolute; top:11px; right:15px;}
.search_top_wrap input:focus {border:1px solid #25282B !important; outline: none;}
.search_top_wrap_inner {position: relative;}

/* my 버튼 테두리 문제 해결 (항상 보이도록 처리) */
.gnb_wrap .snb_wrap .my_btn_wrap .btn_round {
    border: 1px solid #ddd !important;
}

/* 게시판 fixed 버튼 위치조정 */
.rb_bbs_wrap .btns_gr_wrap {top:185px !important;}

.co_header0 .rows_gnb_wrap {border-top:1px solid rgba(0,0,0,0.05);}
.co_header0 .search_top_wrap input {background-color: rgba(0,0,0,0.05);}
.ser_display_none .search_top_wrap_inner {display: none;}

@media all and (max-width:1024px) {
    .rows_gnb_wrap {display: none;}
    .search_top_wrap {width: 30%;}
    .gnb_wrap .snb_wrap .qm_wrap a {width: auto; padding-left: 0px; margin-left: 20px;}
    .gnb_wrap .tog_wrap {margin-right: 20px;}

    /* 1.0.1 { */
    .mobile_cb {clear: both;}
    
    /* ★ 모바일 우측 여백 삐져나감 100% 방지 */
    html, body { overflow-x: hidden; }
    
    .search_top_wrap {
        display: block; 
        float:none !important; 
        width: 100%; 
        margin-top: 10px;
        margin-bottom: 10px;
        box-sizing: border-box;
    }
    
    .gnb_wrap .snb_wrap .my_btn_wrap {display: block;margin-left: 20px;}
    .gnb_wrap .snb_wrap .my_btn_wrap .btn_round.arr_bg {display: none;}
    .gnb_wrap .snb_wrap .my_btn_wrap .btn_round {padding-left: 15px; padding-right: 15px; height:35px;}
    .gnb_wrap .snb_wrap .qm_wrap a span {left: 10px;}
    /* } */
    
    /* 1.1.1 { */
    /* 헤더 컨테이너 넓이 제한 보정 */
    #header .gnb_wrap .inner {
        width: 100% !important;
        padding-left: 15px !important; 
        padding-right: 15px !important;
        box-sizing: border-box;
    }
    /* } */

    /* =========================================================
       ★ 모바일/태블릿 슬라이드(캐러셀) 세로 높이 최적화
       ========================================================= */
    .rb_carousel, .rb_carousel .rb_carousel_img, .rb_carousel .rb_carousel_img > li {
        height: 60vh !important; /* 기기 화면 높이의 60% 비율로 알맞게 맞춤 */
        min-height: 400px !important; /* 텍스트가 잘리지 않도록 최소 높이 보장 */
        max-height: 650px !important; /* 너무 늘어나지 않도록 최대 높이 보장 */
    }
    
    .rb_carousel .bg { height: 100% !important; }
    
    /* 슬라이드 내 텍스트 모바일 사이즈 자동 가독성 조정 */
    .rb_carousel .slogan .inner span.text1 {
        font-size: clamp(24px, 6vw, 36px) !important;
        line-height: 1.3 !important;
        word-break: keep-all;
    }
    .rb_carousel .slogan .inner p.text2_sub {
        font-size: clamp(14px, 3vw, 16px) !important;
        margin-top: 15px !important;
        word-break: keep-all;
    }
}

/* 스마트폰 세로모드 추가 보정 */
@media all and (max-width:768px) {
    .rb_carousel, .rb_carousel .rb_carousel_img, .rb_carousel .rb_carousel_img > li {
        height: 65vh !important;
        min-height: 450px !important;
    }
}

/* =========================================================
   캐러셀 꽉 찬 화면 (Full Screen) 설정
   ========================================================= */
/* PC, 모바일 공통으로 높이를 화면 100%로 강제 고정 */
.rb_carousel, 
.rb_carousel .rb_carousel_img, 
.rb_carousel .rb_carousel_img > li {
    height: 100vh !important;
    min-height: 100vh !important;
    max-height: none !important; /* 기존에 걸려있던 최대 높이 제한 해제 */
}

/* 배경 동영상/이미지도 100% 꽉 차게 설정 */
.rb_carousel .bg {
    height: 100% !important;
}

/* =========================================================
   [수정] 1025px ~ 1430px 구간: inner 고정폭 → 유동폭 전환
   (PHP 인라인 width가 뷰포트보다 커서 메뉴가 좌측으로 밀리는 문제 해결)
   ========================================================= */
@media all and (min-width: 1025px) and (max-width: 1430px) {

    /* 로고/검색/버튼 영역 */
    .gnb_wrap > .inner:first-child {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
        box-sizing: border-box !important;
    }

    /* ★ 메뉴 네비게이션 영역 */
    .rows_gnb_wrap .inner.row_gnbs {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
        box-sizing: border-box !important;
    }

    /* 메뉴 항목 간격이 너무 넓으면 자연스럽게 줄어들도록 */
    .row_gnbs .cbp-hrmenu > ul > li {
        padding-right: 20px;
    }
}