/* 헤더 축약 모드 — 1025~1399px (2026-10-12)
 * 이 폭에서는 PC 헤더(로고·메뉴 7개·로그인 아이콘·KR)가 한 줄에 들어가지 않아
 * 아이콘이 메뉴와 겹치고 헤더가 화면을 넘쳤다(1366px 실측). 그래서 모바일처럼
 * KR + 삼선(햄버거) 헤더와 모바일 메뉴 패널(아코디언)을 쓴다.
 * 아래 규칙은 uploads/saero-migration/theme/saero/css/common.css 의 1024px 이하
 * 헤더·패널 규칙을 그대로 옮긴 것(공용 파일은 수정하지 않음). 1024px 이하·1400px
 * 이상은 이 파일과 무관하다. 글자 크기 기준(html 13px)은 옮기지 않았다 — 헤더만
 * 바꾸고 본문은 데스크톱 그대로 둔다.
 */
@media (min-width:1025px) and (max-width:1399px) {

/* 데스크톱 규칙 되돌리기 (common.css "@media (min-width:1025px)" 블록) */
#hamberger { display: block; }
.ht-inner__left, .ht-inner__center, .ht-inner__right { flex: 0 1 auto; }
.ht-inner__center { justify-content: center; }
.gnb-dropdown-bar { display: none; }

/* 헤더·패널 안의 PC/모바일 전용 요소 전환 (전역 .pc_cont_1024/.m_cont_1024는 그대로) */
.main-header .pc_cont_1024, .gnb-outer .pc_cont_1024 { display: none; opacity: 0; visibility: hidden; }
.main-header .m_cont_1024, .gnb-outer .m_cont_1024 { display: block; opacity: 1; visibility: visible; }

/* 로그인 아이콘은 오른쪽 칸과 함께 숨고, 패널 하단 "로그인 / 회원가입"을 쓴다(saero-members) */
.saero-sitemap-acct { display: block; }

/* common.css 795행 @media (max-width:1024px) 블록에서 */
.main-header { z-index: 17;}	
	.ht-inner { padding: 0 1.8rem 0;}

    .logo > a > .logo_w {max-width: 100%; }
    .logo > a > .logo_b {max-width: 100%; }
    .language { margin: 0 2rem 0 0rem;}
    .language > span {font-size: 1rem;}
	.lang-select-list { left: 9%;}
    .lang-select-list li { font-size: 1rem;}
    .lang-select-list li.active { font-size: 1rem;}
	.main-header .hoverDownIcon_w {  width: 10px; margin-left: 0.7rem;}
	.main-header .hoverDownIcon_b {   width: 10px; margin-left: 0.7rem;}
    .m_header_call a { display: block; width: 1.8rem; height: 1.8rem; background: url("/wp-content/uploads/saero-migration/theme/saero/img/m_header_call.png") 50% 50%/100% no-repeat; }
    .scrolled .m_header_call a { display: block; width: 1.8rem; height: 1.8rem; background: url("/wp-content/uploads/saero-migration/theme/saero/img/m_header_call_b.png") 50% 50%/100% no-repeat; }
    .open .scrolled .m_header_call a { display: block; width: 1.8rem; height: 1.8rem; background: url("/wp-content/uploads/saero-migration/theme/saero/img/m_header_call.png") 50% 50%/100% no-repeat; }

/* common.css 844행 @media (max-width:1024px) 블록에서 */
/* .hamberger { display: none;}
    .hamberger.hamberger_m { display: block;} */
    .scrolled .hamberger_box .line {background: #4f4f4f; }
    .scrolled .hamberger_box .line::before, .scrolled .hamberger_box .line::after { background: #4f4f4f; }

/* common.css 906행 @media (max-width:1024px) 블록에서 */
.gnb-dropdown-bar{ display:none; }

/* common.css 938행 @media (max-width:1024px) 블록에서 */
body.page-id-82 .hamberger_box .line { background: #4f4f4f !important; }
	body.page-id-82 .scrolled .hamberger_box .line::before,
	body.page-id-82 .scrolled .hamberger_box .line::after { background: #4f4f4f !important; }

/* common.css 1080행 @media (max-width:1024px) 블록에서 */
.gnb-outer.open { z-index: 17;}

        .ht-inner__left{width: 35%;height: 100%;}
        .ht-inner__center{width: 40%; align-items: center;}
        .ht-inner__right {width: 35%;}
        .gnb-menu-list.pc_cont_1024{display: none;}
        .gnb-menu-list.m_cont_1024{display: block; background: none; visibility: visible; opacity: 1; overflow-y: auto; height: 100%;}
        .gnb-inner {height: 100%; align-items: flex-start; padding-top: 5rem; display: block;}
    
        .gnb-menu-list-wrap{position:relative; width:100%; height:100%; padding:7rem 0 1rem; display:flex; flex-direction:column; justify-content:flex-start; align-items:flex-start;}
        .gnb-menu-list{position:relative; width:100%; display:block; width:100%; height:auto; padding:0 0 ; overflow-x:hidden; overflow-y:auto;;}
        .gnb-menu-list-m{display:none;}
    
        /* width */
        .gnb-menu-list::-webkit-scrollbar {
            width:5px;
        }
        /* Track */
        .gnb-menu-list::-webkit-scrollbar-track {
            background: rgba(240, 240, 240, 0);
        }
        /* Handle */
        .gnb-menu-list::-webkit-scrollbar-thumb {
            background: #fff;
            border-radius: 10px;
            -webkit-border-radius: 10px;
            -moz-border-radius: 10px;
            -ms-border-radius: 10px;
            -o-border-radius: 10px;
        }
        /* Handle on hover */
        .gnb-menu-list::-webkit-scrollbar-thumb:hover {
            background: #fff;
        }
    
	.gnb-menu-list::before { display: none;}

        /* 모바일 GNB 아코디언(2026-09-20): 1층 7개만 기본 노출, 클릭한
           1층 하나의 2층만 펼친다. 기존 .gnb-menu-depth1/2는 원본 마크업
           (직접 만든 li 구조) 전용으로 짜여 있었고 실제 wp_nav_menu() 출력
           (menu-item/sub-menu 클래스, depth=2)과 맞지 않아 재사용하지
           않는다 — 대신 실제 출력되는 .m_cont_1024 li.menu-item에 새로
           스코프해서 짠다. 색상은 이 패널이 이미 쓰는 값 그대로 재사용:
           #fff(기본 텍스트), rgba(255,255,255,0.5)/0.25(구분선, 위 .gnb-outer
           배경 위에서 쓰던 값), #a3bcc6(.gnb-menu-depth2 hover와 동일 포인트색). */
        .gnb-menu-list.m_cont_1024 > li.menu-item {
            border-bottom: 1px solid rgba(255,255,255,0.5);
        }
        .gnb-menu-list.m_cont_1024 > li.menu-item > a {
            position: relative;
            display: block;
            width: 100%;
            padding: 1.1rem 2rem 1.1rem 0;
            font-family: 'Pretendard-Bold';
            font-size: 1.05rem;
            font-weight: 700;
            color: #fff;
            text-decoration: none;
        }
        .gnb-menu-list.m_cont_1024 > li.menu-item-has-children > a::after {
            content: '';
            position: absolute;
            top: 50%; right: 0.2rem;
            width: 8px; height: 8px;
            border-right: 2px solid #fff;
            border-bottom: 2px solid #fff;
            transform: translateY(-70%) rotate(45deg);
            transition: transform 0.3s ease;
        }
        .gnb-menu-list.m_cont_1024 > li.menu-item-has-children.gnb-acc-open > a::after {
            transform: translateY(-30%) rotate(225deg);
        }
        .gnb-menu-list.m_cont_1024 .sub-menu {
            list-style: none;
            margin: 0;
            padding: 0;
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.35s ease;
        }
        .gnb-menu-list.m_cont_1024 .sub-menu > li {
            border-top: 1px solid rgba(255,255,255,0.25);
        }
        .gnb-menu-list.m_cont_1024 .sub-menu > li > a {
            display: block;
            padding: 0.85rem 0 0.85rem 1rem;
            font-family: 'Pretendard-Regular';
            font-weight: 300;
            font-size: 1rem;
            color: #fff;
            text-decoration: none;
        }
        .gnb-menu-list.m_cont_1024 .sub-menu > li > a:hover,
        .gnb-menu-list.m_cont_1024 .sub-menu > li > a:active {
            color: #a3bcc6;
        }

        /* 모바일 GNB 패널 상단 바(2026-09-20): X(닫기)/로고/다국어 한 줄
           배치. .gnb-title의 원래 CSS는 display:block뿐이라 ul.left/
           center/right가 세로로 쌓여 있었다(로그인 유무에 따라 실제로
           행이 늘었다 줄었다 했다) — flex로 세 칸을 한 줄에 고정한다.
           색상은 패널이 이미 쓰는 값(#fff, rgba(255,255,255,0.5) 구분선)만
           재사용. */
        .gnb-title {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-bottom: 1rem;
        }
        .gnb-title ul.left,
        .gnb-title ul.center,
        .gnb-title ul.right {
            width: auto;
            display: flex;
            align-items: center;
        }
        .gnb-title ul.left { flex: 0 0 auto; }
        .gnb-title ul.center { flex: 1 1 auto; justify-content: center; }
        .gnb-title ul.right { flex: 0 0 auto; justify-content: flex-end; }
        .gnb-title ul.left #hamberger222 {
            width: 2.5rem;
            height: 2.5rem;
        }
        .gnb-panel-logo {
            display: inline-flex;
        }
        .gnb-panel-logo img {
            height: 1.75rem;
            width: auto;
        }
        /* 헤더용 .language 여백(margin:0 2rem 0 0, common.css:942)은
           햄버거 옆 공간을 위해 잡힌 값이라 이 좁은 상단 바에서는 과하다
           — 320px에서 로고와 겹치지 않도록 이 컨텍스트에서만 초기화. */
        .gnb-title ul.right .language {
            margin: 0;
        }
        /* hoverDownIcon_b/_w 표시 전환 규칙(.main-header .hoverDownIcon_b
           {display:none}, .scrolled.main-header .hoverDownIcon_b{display:
           block} 등, 위쪽 946-950행 부근)은 전부 .main-header 조상에
           스코프돼 있어 #gnb 패널 안에서는 적용되지 않는다 — 그 결과
           화살표 두 개(검정·흰색)가 동시에 보인다. 패널 배경은 항상
           어두운 사진이므로 흰 화살표만, .main-header가 스크롤 전(투명)
           일 때와 같은 기본값으로 고정한다. */
        .gnb-title .hoverDownIcon_b { display: none; }
        .gnb-title .hoverDownIcon_w { display: inline-block; }

        .gnb-menu-depth1{position: relative; width:100%; height:auto; margin-left:0; display: block; overflow: hidden; font-size: 1.5rem; border-bottom: 1px solid rgba(255, 255, 255, 0.5); }
        /* .gnb-menu-depth1.on{height:auto; } */
        .gnb-menu-depth1::after{display: none;}
        .gnb-menu-depth1-last{margin:0 auto 6%;}
        .gnb-menu-depth1 > a {
            position:relative; display:inline-block; width:100%; text-align: left; font-size: 1.5rem; padding: 1.5rem 0 1.5rem;

        }
        .gnb-menu-depth1 > a::after {content:'+'; display: block; position:absolute; top:50%;  right:1rem; width:auto; height:auto; font-size: 3rem;color:#fff; transform: translateY(-50%) translateZ(0); -webkit-transform: translateY(-50%) translateZ(0); -moz-transform: translateY(-50%) translateZ(0); -ms-transform: translateY(-50%) translateZ(0); -o-transform: translateY(-50%) translateZ(0); transition: transform 0.3s; font-family: 'Pretendard Variable'; font-weight: 100;}
        .gnb-menu-depth1.on > a::after{transform: translateY(-50%) translateZ(0) rotate(45deg); }
        
        .gnb-outer { width: 100%; height: 100vh; background: url("/wp-content/uploads/saero-migration/theme/saero/img/gnb-inner-bg.jpg") 50% 50%/cover no-repeat; }
        .gnb-outer.open .gnb-menu-list > li:nth-child(1) > a {opacity:1; transform: translateY(0px); transition:transform 1s 0.8s ease, opacity 1s 0.8s ease;}
        .gnb-outer.open .gnb-menu-list > li:nth-child(2) > a {opacity:1; transform: translateY(0px); transition:transform 1s 0.9s ease, opacity 1s 0.9s ease;}
        .gnb-outer.open .gnb-menu-list > li:nth-child(3) > a {opacity:1; transform: translateY(0px); transition:transform 1s 1.0s ease, opacity 1s 1.0s ease;}
        .gnb-outer.open .gnb-menu-list > li:nth-child(4) > a {opacity:1; transform: translateY(0px); transition:transform 1s 1.1s ease, opacity 1s 1.1s ease;}
        .gnb-outer.open .gnb-menu-list > li:nth-child(5) > a {opacity:1; transform: translateY(0px); transition:transform 1s 1.2s ease, opacity 1s 1.2s ease;}
        .gnb-outer.open .gnb-menu-list > li:nth-child(6) > a {opacity:1; transform: translateY(0px); transition:transform 1s 1.3s ease, opacity 1s 1.3s ease;}
        .gnb-outer.open .gnb-menu-list > li:nth-child(7) > a {opacity:1; transform: translateY(0px); transition:transform 1s 1.3s ease, opacity 1s 1.3s ease;}
        .gnb-menu-depth1:hover > a {color: #fff;}
        .gnb-menu-depth1.on > a {color: #dfa967;  }
    
        .gnb-menu-depth2{height:auto; display: none; padding:0rem 0rem 1rem; transform: none;}
        .gnb-menu-depth2 > li {padding:0; margin-bottom: 10px;width: 100%; text-align: left;}
        .gnb-menu-depth2 > li > a {display:block; width:auto;  padding:6px 1rem; font-size: 1.3rem; font-weight:400; letter-spacing:-0.02em;}
        .gnb-menu-depth2 li + li { margin-left: 0;}
        .gnb-menu-depth2 li i{position: relative; margin-left: 5px; transform: none;}
        
        .login_wrap { padding-bottom: 0; margin-right: 0; padding-top: 2rem; margin-left: 1rem; }
        .gnb_number_wrap{padding-top: 10px;}
        .gnb-menu-list-wrap{height: 100vh;}

/* common.css 1891행 @media (max-width:1024px) 블록에서 */
.ht-top-banner { display: none; }
	.ht-inner__right { display: none;}
	.ht-inner__center { justify-content: flex-end; }

}

/* 메뉴 패널(모바일 + 축약 헤더 공통, 1399px 이하) — 2026-10-12
 * 메뉴 목록이 패널 높이의 100%로 잡혀 위쪽 여백만큼 넘치고, 그 아래의
 * "로그인 / 회원가입"(saero-members)이 화면 밖으로 밀렸다(1000×800 실측
 * 864px). 목록은 내용 높이만큼만 차지하고, 길어지면 목록 안에서 스크롤. */
@media (max-width:1399px) {
.gnb-outer .gnb-menu-list.m_cont_1024 { height: auto; max-height: calc(100% - 6rem); }
}