/**
 * NextBio Website - Header Styles
 */

/* Header 기본 스타일 */
#header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    transition: background 0.2s ease, border-bottom 0.2s ease;
    background: transparent;
}

#header.header-default {
    background: transparent;
    padding: 0 240px;
}

#header.header-scrolled {
    background: #ffffff;
    border-bottom: none;
    padding: 0 240px;
}

/* 서브페이지는 기본적으로 흰색 헤더 사용 (메인페이지 호버시 나타나는 헤더와 동일) */
body:not(.main-page) #header {
    background: #ffffff;
    border-bottom: none;
}

body:not(.main-page) #header.header-scrolled {
    background: #ffffff !important;
    border-bottom: none !important;
}

/* 서브페이지 메뉴 텍스트는 검은색, 1단계 굵게 */
body:not(.main-page) #header .menu-li2 {
    color: #000000;
    font-family: var(--font-family-suit);
    font-weight: 700;
    font-size: 20px;
    line-height: 30px;
}

/* menu-li2가 링크일 때 스타일 */
#header .menu-li2,
#header .menu-li2:link,
#header .menu-li2:visited {
    text-decoration: none;
    color: inherit;
    display: block;
    cursor: pointer;
}

#header .menu-li2:hover {
    text-decoration: none;
}

body:not(.main-page) #header .lan-icon path {
    fill: black;
}

/* 서브페이지 햄버거 색상은 .ham-icon color로 적용됨 */

body:not(.main-page) #header .lang-selector {
    border-color: #dfdfdf;
}

/* 서브페이지 로고 색상 변경 - 흰색 텍스트만 #808284로 */
body:not(.main-page) #header .logo-wt path[fill="white"] {
    fill: #808284 !important;
}

/* 서브페이지 헤더 호버 시 로고 색상 (기본 로고와 동일하게 유지) */
body:not(.main-page) #header.megamenu-open .logo-wt path[fill="white"] {
    fill: #808284 !important;
}

/* 메인페이지는 기본적으로 투명 헤더 */
body.main-page #header.header-default {
    background: transparent !important;
    background-color: transparent !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

body.main-page #header.header-default .header,
body.main-page #header.header-default .nav-wrap,
body.main-page #header.header-default .nav,
body.main-page #header.header-default .side {
    background: transparent !important;
    background-color: transparent !important;
}

/* 메인페이지에서 호버 시 흰색 헤더 (색상만 변경, 레이아웃 유지) */
body.main-page #header.header-scrolled {
    background: #ffffff !important;
    background-color: #ffffff !important;
    border-bottom: 1px solid #dfdfdf !important;
    padding: 0 240px !important;
    transition: background 0.2s ease, border-bottom 0.2s ease;
}

#header .header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    position: relative;
    padding: 0;
    background: transparent;
}

/* 메인페이지에서 헤더 내부 요소도 투명 */
body.main-page #header .header {
    background: transparent !important;
    background-color: transparent !important;
}

/* Logo */
#header .logo {
    flex-shrink: 0;
    width: 130px;
    height: 32px;
    position: relative;
}

#header .logo a {
    display: block;
    width: 100%;
    height: 100%;
}

#header .logo-wt {
    width: 100%;
    height: 100%;
    display: block;
}

/* 스크롤 시 로고 변경 */
#header.header-scrolled .logo-wt path[fill="white"] {
    fill: #808284;
}

/* Navigation Wrap */
#header .nav-wrap {
    display: flex;
    flex-direction: row;
    gap: 40px;
    align-items: center;
    justify-content: flex-start;
    flex-shrink: 0;
    position: relative;
}

#header .nav {
    display: flex;
    flex-direction: row;
    gap: 0;
    align-items: center;
    justify-content: flex-start;
    flex-shrink: 0;
    position: relative;
}

/* Menu Items - 1뎁스 메뉴 시작위치를 메가메뉴 열과 맞추기 위해 좌측 정렬 + 동일 좌우 여백 */
#header .menu-li {
    padding: 30px 16px;
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
    justify-content: flex-start;
    flex-shrink: 0;
    position: relative;
    cursor: pointer;
    box-sizing: border-box;
    width: 190px;
    min-width: 190px;
    max-width: 190px;
}

#header .menu-li2 {
    text-align: left;
}

/* 1뎁스 메뉴 동일 박스 모델 (INFRA는 별도로 칸 좁힘) */
#header .menu-li.menu-company,
#header .menu-li.menu-technology,
#header .menu-li.menu-oem,
#header .menu-li.menu-community {
    width: 190px;
    min-width: 190px;
    max-width: 190px;
    padding-left: 16px;
    padding-right: 16px;
}

/* INFRA: 열 너비 140px, 좌·우 여백 16px 동일(시각적 균형), 왼쪽 정렬 */
#header .menu-li.menu-infra {
    width: 140px;
    min-width: 140px;
    max-width: 140px;
    padding-left: 16px !important;
    padding-right: 16px !important;
    padding-inline: 16px;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box;
    justify-content: flex-start;
}
#header .menu-li.menu-infra .menu-li2 {
    text-align: left;
}

/* 호버시 헤더 (메가메뉴 표시 시) 활성 메뉴 스타일 - 밑줄 제거 */
#header.header-hover .menu-li.active,
#header.megamenu-open .menu-li.active {
    border-bottom: none;
}

#header.header-hover .menu-li.active .menu-li2,
#header.megamenu-open .menu-li.active .menu-li2 {
    color: #8dc63f;
}

/* 호버시 헤더 (메가메뉴 표시 시) 메뉴 항목 width는 기본값 유지 (위치 변경 없음) */
/* width 통일 제거 - 기본 헤더와 동일한 위치 유지 */

/* 호버 시 메뉴 항목 색상 변경 (메가메뉴 표시 시) */
#header.megamenu-open .menu-li2 {
    color: #000000;
    transition: color 0.3s ease;
}

#header.megamenu-open .menu-li:hover .menu-li2 {
    color: #8dc63f;
}

/* 1뎁스 메뉴 호버시 밑줄 제거 (active가 아닌 경우만) */
#header.megamenu-open .menu-li:hover:not(.active) {
    border-bottom: none !important;
}

/* 메인페이지에서 호버 시 헤더 배경 전환 */
body.main-page #header.megamenu-open {
    background: #ffffff !important;
    background-color: #ffffff !important;
    border-bottom: 1px solid #dfdfdf !important;
}

/* 서브페이지에서 메가메뉴 열릴 때만 헤더 아래 가로선 표시 */
body:not(.main-page) #header.megamenu-open {
    border-bottom: 1px solid #dfdfdf !important;
}

/* 호버 시 로고 색상 변경 (메인페이지만 적용) */
body.main-page #header.megamenu-open .logo-wt path[fill="white"] {
    fill: #808284;
}

#header.header-default .menu-li2 {
    color: #ffffff;
    text-align: left;
    font-family: var(--font-family-suit);
    font-weight: 600;
    font-size: 20px;
    line-height: 30px;
    position: relative;
}

#header.header-scrolled .menu-li2 {
    color: #000000;
    font-family: var(--font-family-suit);
    font-weight: 700;
    font-size: 20px;
    line-height: 30px;
}

#header .menu-li.active {
    border-bottom: none;
}

#header.header-default .menu-li.active .menu-li2 {
    color: #8dc63f;
}

#header.header-scrolled .menu-li.active .menu-li2 {
    color: #8dc63f;
}

/* Side (Language & Menu) */
#header .side {
    display: flex;
    flex-direction: row;
    gap: 20px;
    align-items: flex-start;
    justify-content: flex-start;
    flex-shrink: 0;
    position: relative;
}

/* Language Selector */
#header .lang-selector {
    position: relative;
    border-right: 1px solid #dfdfdf;
    padding-right: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
}

#header.header-default .lang-selector {
    border-color: rgba(255, 255, 255, 0.3);
}

#header .lan-icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

#header.header-default .lan-icon path {
    fill: white;
}

#header.header-scrolled .lan-icon path {
    fill: black;
}

#header .lang-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 11px; /* 글로벌 아이콘(22px) 중앙에 드롭다운 중앙 정렬 */
    transform: translateX(-50%);
    margin-top: 12px;
    background: #ffffff;
    border-radius: 6px;
    border: 1px solid #dfdfdf;
    padding: 12px 20px;
    flex-direction: column;
    gap: 6px;
    min-width: 80px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 1001;
}

/* 언어 드롭다운은 JavaScript로 제어 */

#header .lang-item {
    color: #808284;
    text-align: center;
    font-family: var(--font-family-suit);
    font-weight: 600;
    font-size: 18px;
    line-height: 26px;
    font-weight: 600;
    padding: 4px 0;
    transition: color 0.3s ease;
    text-decoration: none;
}

#header .lang-item:hover,
#header .lang-item.active {
    color: #8dc63f;
}

/* Hamburger Menu - 햄버거 ↔ X 자연스러운 전환 */
#header .ham-menu-btn {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

#header .ham-menu-btn .ham-icon,
#header .ham-menu-btn .ham-close-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.25s ease;
}

#header .ham-menu-btn .ham-close-icon {
    opacity: 0;
    pointer-events: none;
}

#header .ham-menu-btn.is-open .ham-icon {
    opacity: 0;
    pointer-events: none;
}

#header .ham-menu-btn.is-open .ham-close-icon {
    opacity: 1;
    pointer-events: auto;
}

#header .ham-menu {
    width: 24px;
    height: 22px;
    flex-shrink: 0;
}

#header .ham-close-icon svg {
    width: 28px;
    height: 28px;
}

/* 햄버거 아이콘 색상 (currentColor 사용) */
#header.header-default .ham-icon {
    color: white;
}

#header.header-scrolled .ham-icon {
    color: black;
}

body:not(.main-page) #header .ham-icon {
    color: black;
}

#header .ham-menu-btn:hover:not(.is-open) .ham-icon {
    color: #8dc63f !important;
}

body:not(.main-page) #header .ham-menu-btn:hover:not(.is-open) .ham-icon {
    color: #8dc63f !important;
}

/* 사이드메뉴 열림 시: 기존 헤더와 동일한 높이·패딩·위치 유지, 어두운 배경, 로고·글로벌·X 화이트 */
#header.sidebar-open {
    background: rgba(0, 0, 0, 0.95) !important;
    border-bottom: none !important;
    z-index: 10002;
    padding: 0 240px;
    min-height: 92px;
}

/* 로고·글로벌·X가 있는 .header를 사이드바보다 위에 그리기, 레이아웃은 기존과 동일 유지 */
#header.sidebar-open .header {
    position: relative;
    z-index: 10003;
    isolation: isolate;
    background: transparent;
    width: 100%;
    min-height: 92px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* 가로 메뉴는 공간만 유지하고 숨김 → 글로벌·X 위치가 기존과 동일하게 유지됨 */
#header.sidebar-open .nav {
    visibility: hidden;
    pointer-events: none;
}

/* 사이드메뉴 열림 시 로고: 원래 흰색이던 텍스트만 흰색, 아이콘(초록·파랑·주황)은 HTML 기본값 유지 */
#header.sidebar-open .logo-wt path[fill="white"] {
    fill: #ffffff !important;
}

/* 피그마: 사이드메뉴 열림 시 글로벌 아이콘 검정 */
#header.sidebar-open .lan-icon path {
    fill: #000000 !important;
}

/* 피그마: 사이드메뉴 열림 시 X 아이콘 주황·파랑 (두 선) */
#header.sidebar-open .ham-close-icon .ham-close-line1 {
    stroke: #F5821F !important;
}
#header.sidebar-open .ham-close-icon .ham-close-line2 {
    stroke: #00AEEF !important;
}
#header.sidebar-open .ham-menu-btn .ham-close-icon {
    color: transparent;
}

/* 피그마: 사이드메뉴 열림 시 글로벌 영역 테두리 (검정 아이콘에 맞춤) */
#header.sidebar-open .lang-selector {
    border-color: #dfdfdf;
}

#header.sidebar-open .lang-dropdown {
    background: #ffffff;
    border: 1px solid #dfdfdf;
}

#header.sidebar-open .lang-item {
    color: #000000;
}

#header.sidebar-open .lang-item.active {
    color: #8dc63f;
}

/* Megamenu (피그마 디자인 참고) - 헤더와 동일 좌우 여백, 메뉴 텍스트와 열 정렬 */
#header .megamenu {
    display: none !important;
    visibility: hidden;
    position: fixed;
    top: 92px;
    left: 0;
    right: 0;
    background: #ffffff;
    border-top: 1px solid #dfdfdf;
    padding: 0 240px;
    flex-direction: row;
    gap: 0;
    align-items: stretch; /* 세로 전체 높이에 맞춤 */
    justify-content: flex-start;
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    box-sizing: border-box;
    opacity: 0;
    transform: translateY(-20px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s 0.2s;
    z-index: 999;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    will-change: opacity, transform;
    pointer-events: none;
    min-height: auto;
    height: auto;
    margin-top: -1px;
}

/* 로고 너비만큼 왼쪽 스페이서 → 헤더 .header의 로고 영역과 동일 */
#header .megamenu::before {
    content: '';
    display: block;
    width: 130px;
    flex-shrink: 0;
}

/* 헤더가 space-between이므로 로고~nav 사이 가변 공간을 동일하게 맞춤 → 메뉴 텍스트와 열 정렬 */
#header .megamenu-spacer {
    flex: 1 1 0;
    min-width: 0;
}

/* 메가메뉴가 표시될 때 */
#header .megamenu[style*="display: flex"],
#header .megamenu[style*="display:flex"] {
    display: flex !important;
    visibility: visible !important;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s 0s;
}

#header .megamenu[style*="display: flex"],
#header .megamenu[style*="display:flex"],
#header.megamenu-open .megamenu {
    opacity: 1 !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
}

/* Submenu Wrap - 1뎁스 메뉴와 동일 좌우 여백(16px)으로 시작위치 맞춤, 열 너비 고정 */
#header .submenu-wrap {
    border: none;
    padding: 40px 16px;
    display: none;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
    justify-content: flex-start;
    flex: 0 0 190px;
    width: 190px;
    min-width: 190px;
    max-width: 190px;
    box-sizing: border-box;
    position: relative;
    opacity: 0;
    transition: opacity 0.25s ease, background-color 0.3s ease;
    min-height: auto; /* 내용에 맞게 자동 조정 */
    height: 100%; /* 메가메뉴 전체 높이에 맞춤 */
    overflow: visible; /* 모든 내용이 보이도록 */
    max-height: none; /* 높이 제한 제거 */
    align-self: stretch; /* 세로 전체 높이 적용 */
}

#header .submenu-wrap[style*="display: flex"],
#header .submenu-wrap[style*="display:flex"],
#header.megamenu-open .submenu-wrap[style*="display: flex"],
#header.megamenu-open .submenu-wrap[style*="display:flex"] {
    opacity: 1 !important;
    visibility: visible !important;
    display: flex !important;
}

/* 메가메뉴가 열려있을 때 모든 submenu-wrap 내부 요소 보이기 */
#header.megamenu-open .submenu-wrap[style*="display: flex"] *,
#header.megamenu-open .submenu-wrap[style*="display:flex"] *,
#header .submenu-wrap[style*="display: flex"] *,
#header .submenu-wrap[style*="display:flex"] * {
    opacity: 1 !important;
    visibility: visible !important;
}

/* 메가메뉴와 서브메뉴의 높이 제한 제거 */
#header .megamenu,
#header .submenu-wrap {
    max-height: none !important;
    overflow: visible !important;
}

/* submenu-li 요소는 항상 보이도록 */
#header .submenu-li {
    opacity: 1 !important;
    visibility: visible !important;
    display: flex !important;
}

/* 메가메뉴가 열려있을 때 모든 submenu-li는 확실히 보이도록 */
#header.megamenu-open .submenu-wrap[style*="display: flex"] .submenu-li,
#header.megamenu-open .submenu-wrap[style*="display:flex"] .submenu-li,
#header.megamenu-open .submenu-wrap .submenu-li,
#header .submenu-wrap[style*="display: flex"] .submenu-li,
#header .submenu-wrap[style*="display:flex"] .submenu-li {
    opacity: 1 !important;
    visibility: visible !important;
    display: flex !important;
}

/* submenu-li2, submenu-li3도 확실히 보이도록 */
#header.megamenu-open .submenu-li2,
#header.megamenu-open .submenu-li3,
#header .submenu-wrap[style*="display: flex"] .submenu-li2,
#header .submenu-wrap[style*="display:flex"] .submenu-li2,
#header .submenu-wrap[style*="display: flex"] .submenu-li3,
#header .submenu-wrap[style*="display:flex"] .submenu-li3 {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
}

#header .submenu-wrap:first-child {
    border-left: none;
}

/* 메가메뉴 열 너비·여백 (INFRA는 별도로 칸 좁힘) */
#header .submenu-wrap.submenu-company,
#header .submenu-wrap.submenu-technology,
#header .submenu-wrap.submenu-oem,
#header .submenu-wrap.submenu-community {
    flex: 0 0 190px;
    width: 190px;
    min-width: 190px;
    max-width: 190px;
    padding-left: 16px;
    padding-right: 16px;
    margin-left: 0;
    margin-right: 0;
    box-sizing: border-box;
}

/* INFRA 메가메뉴 열: 너비만 160px로 줄여 오른쪽 여백 과다 방지, 좌·우 16px 동일 */
/* INFRA 메가메뉴 열: 너비 140px, 좌·우 여백 16px 동일 */
#header .submenu-wrap.submenu-infra {
    flex: 0 0 140px;
    width: 140px;
    min-width: 140px;
    max-width: 140px;
    padding-left: 16px !important;
    padding-right: 16px !important;
    padding-inline: 16px;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box;
}

#header .submenu-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
    justify-content: flex-start;
    flex-shrink: 0;
    position: relative;
    width: 100%;
}

#header .submenu-subgroup {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
    justify-content: flex-start;
    flex-shrink: 0;
    position: relative;
    width: 100%;
    margin-top: 4px;
}

/* Submenu Wrap2 (피그마 디자인) */
#header .submenu-wrap2 {
    border: none;
    padding: 30px 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
    justify-content: flex-start;
    align-self: stretch;
    flex-shrink: 0;
    width: 190px;
    position: relative;
}

#header .submenu-li {
    display: flex !important;
    flex-direction: row;
    gap: 10px;
    align-items: center;
    justify-content: flex-start;
    flex-shrink: 0;
    position: relative;
    width: 100%;
    opacity: 1 !important;
    visibility: visible !important;
    padding: 4px 0; /* 클릭 영역 확대 */
    transition: opacity 0.2s ease;
}

#header .submenu-li2 {
    color: #808284;
    text-align: left;
    font-family: var(--font-family-suit);
    font-weight: 400;
    font-size: 18px;
    line-height: 26px;
    position: relative;
    text-decoration: none;
    transition: color 0.3s ease;
    width: 100%;
}

#header .submenu-li2:hover {
    color: #8dc63f;
    text-decoration: none;
}

#header .submenu-li3 {
    color: #808284;
    text-align: left;
    font-family: var(--font-family-suit);
    font-weight: 400;
    font-size: 18px;
    line-height: 26px;
    position: relative;
    text-decoration: none;
    transition: color 0.3s ease;
    width: 100%;
}

#header .submenu-li3:hover {
    color: #8dc63f;
    text-decoration: none;
}

/* 메가메뉴 호버 시 열 배경색 (세로 전체) */
#header .submenu-wrap:hover {
    background-color: rgba(205, 246, 149, 0.2);
}

/* 반응형 */
@media (max-width: 1920px) {
    #header .megamenu {
        padding-left: 240px;
        padding-right: 240px;
        max-width: 1920px;
    }
}

@media (max-width: 1440px) {
    #header.header-default,
    #header.header-scrolled {
        padding: 0 120px;
    }
    
    #header.sidebar-open {
        padding: 0 120px;
    }
    
    body.main-page #header.header-scrolled {
        padding: 0 120px !important;
    }
    
    #header .megamenu {
        padding-left: 120px;
        padding-right: 120px;
        max-width: 1440px;
    }
}

@media (max-width: 1024px) {
    #header.header-default,
    #header.header-scrolled {
        padding: 0 40px;
    }
    
    #header.sidebar-open {
        padding: 0 40px;
    }
    
    body.main-page #header.header-scrolled {
        padding: 0 40px !important;
    }
    
    #header .nav-wrap {
        gap: 20px;
    }
    
    #header .menu-li {
        padding: 20px 16px;
    }
    
    #header .menu-li2 {
        font-size: 18px;
        line-height: 26px;
    }
    
    #header .megamenu {
        padding-left: 0;
        flex-wrap: wrap;
        max-width: 100%;
    }
    
    #header .submenu-wrap {
        width: 50%;
        border-width: 0 1px 1px 0;
    }
}

@media (max-width: 768px) {
    body {
        padding-top: 70px;
    }
    
    #header.header-default,
    #header.header-scrolled {
        padding: 0 20px;
    }
    
    body.main-page #header.header-scrolled {
        padding: 0 20px !important;
    }
    
    #header .nav {
        display: none;
    }
    
    #header .lang-selector {
        border-right: none;
        padding-right: 0;
    }
    
    #header .lang-dropdown {
        left: 10px; /* 모바일 글로벌 아이콘(20px) 중앙 정렬 */
        transform: translateX(-50%);
        right: auto;
    }
    
    #header .megamenu {
        display: none !important;
    }
    
    /* 모바일 헤더 높이 조정 */
    #header .header {
        height: 70px;
        min-height: 70px;
    }
    
    #header .logo {
        width: 100px;
        height: 24px;
    }
    
    #header .logo a {
        display: flex;
        align-items: center;
        height: 100%;
    }
    
    #header .side {
        gap: 16px;
    }
    
    #header .ham-menu-btn {
        width: 24px;
        height: 20px;
        padding: 0;
    }
    
    #header .ham-menu {
        width: 24px;
        height: 20px;
    }
    
    #header .lang-selector {
        gap: 8px;
    }
    
    #header .lan-icon {
        width: 20px;
        height: 20px;
    }
    
    /* 모바일에서 헤더 배경 항상 흰색 */
    #header.header-default,
    #header.header-scrolled {
        background: #ffffff !important;
        border-bottom: 1px solid #dfdfdf;
    }
    
    /* 모바일에서 메뉴 텍스트 항상 검은색 */
    #header .menu-li2 {
        color: #000000 !important;
    }
    
    /* 모바일 서브페이지에서 로고 색상 - 항상 회색 */
    body:not(.main-page) #header .logo-wt path[fill="white"] {
        fill: #808284 !important;
    }
    
    /* 모바일 메인페이지에서 로고 색상 - PC와 동일하게 (기본: 흰색, 스크롤: 회색) */
    body.main-page #header.header-default .logo-wt path[fill="white"] {
        fill: white !important;
    }
    
    body.main-page #header.header-scrolled .logo-wt path[fill="white"] {
        fill: #808284 !important;
    }
    
    /* 모바일 서브페이지에서 언어 아이콘 색상 - 항상 회색 */
    body:not(.main-page) #header .lan-icon path {
        fill: #808284 !important;
    }
    
    /* 모바일 메인페이지에서 언어 아이콘 색상 - PC와 동일하게 (기본: 흰색, 스크롤: 검은색) */
    body.main-page #header.header-default .lan-icon path {
        fill: white !important;
    }
    
    body.main-page #header.header-scrolled .lan-icon path {
        fill: black !important;
    }
    
    /* 모바일 햄버거 아이콘 색상 (.ham-icon currentColor) */
    body:not(.main-page) #header .ham-icon {
        color: #808284 !important;
    }
    
    body.main-page #header.header-default .ham-icon {
        color: white !important;
    }
    
    body.main-page #header.header-scrolled .ham-icon {
        color: black !important;
    }
    
    #header .ham-menu-btn:hover:not(.is-open) .ham-icon {
        color: #8dc63f !important;
    }
    
    body.main-page #header .ham-menu-btn:hover:not(.is-open) .ham-icon {
        color: #8dc63f !important;
    }
    
    /* 모바일에서도 사이드메뉴 열림 시 헤더 어두운 배경·화이트 로고/아이콘 유지, 높이·패딩은 기존 헤더와 동일 */
    #header.sidebar-open {
        background: rgba(0, 0, 0, 0.95) !important;
        border-bottom: none !important;
        padding: 0 20px;
        min-height: 70px;
    }
    
    #header.sidebar-open .header {
        min-height: 70px;
    }
    
    #header.sidebar-open .logo-wt path[fill="white"] {
        fill: #ffffff !important;
    }
    
    /* 피그마: 모바일에서도 사이드메뉴 열림 시 글로벌 검정, X 주황·파랑 */
    #header.sidebar-open .lan-icon path {
        fill: #000000 !important;
    }
    
    #header.sidebar-open .ham-close-icon .ham-close-line1 {
        stroke: #F5821F !important;
    }
    #header.sidebar-open .ham-close-icon .ham-close-line2 {
        stroke: #00AEEF !important;
    }
    
    /* 모바일에서 헤더 호버 비활성화 */
    #header.header-hover,
    #header.megamenu-open {
        background: #ffffff !important;
        border-bottom: 1px solid #dfdfdf !important;
    }
    
    #header.megamenu-open .menu-li2 {
        color: #000000 !important;
    }
    
    #header.megamenu-open .menu-li:hover .menu-li2 {
        color: #000000 !important;
    }
    
    #header.megamenu-open .menu-li.active .menu-li2 {
        color: #8dc63f !important;
    }
    
    /* 모바일에서 메가메뉴 완전히 숨김 */
    #header .megamenu {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
        opacity: 0 !important;
    }
    
    /* 모바일에서 헤더 호버 효과 완전히 비활성화 */
    #header .menu-li:hover {
        border-bottom: none !important;
    }
    
    #header .menu-li:hover .menu-li2 {
        color: #000000 !important;
    }
    
    /* 모바일에서 메가메뉴 관련 클래스 제거 */
    #header.header-hover,
    #header.megamenu-open {
        background: #ffffff !important;
        border-bottom: 1px solid #dfdfdf !important;
    }
    
    #header.megamenu-open .megamenu {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
        opacity: 0 !important;
    }
}

/* 모바일 사이드메뉴 */
.mobile-sidebar {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    pointer-events: none;
}

.mobile-sidebar.active {
    display: block;
    pointer-events: auto;
}

.mobile-sidebar-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.mobile-sidebar.active .mobile-sidebar-overlay {
    opacity: 1;
}

.mobile-sidebar-content {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 280px;
    max-width: 85vw;
    background: #ffffff;
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
    transform: translateX(100%);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.mobile-sidebar.active .mobile-sidebar-content {
    transform: translateX(0);
}

.mobile-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    border-bottom: 1px solid #dfdfdf;
    flex-shrink: 0;
}

.mobile-sidebar-header .logo {
    width: 100px;
    height: 24px;
}

.mobile-sidebar-close {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.mobile-sidebar-menu {
    flex: 1;
    padding: 20px 0;
    display: flex;
    flex-direction: column;
}

.mobile-menu-item {
    border-bottom: 1px solid #f5f5f5;
}

.mobile-menu-link {
    display: block;
    padding: 18px 20px;
    color: #000000;
    font-family: var(--font-family-suit);
    font-weight: 600;
    font-size: 18px;
    line-height: 26px;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.mobile-menu-link:hover,
.mobile-menu-link:active {
    background-color: #f8f8f8;
    color: #8dc63f;
}

/* 아코디언 메뉴 스타일 */
.mobile-menu-item-has-sub {
    position: relative;
}

.mobile-menu-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;
}

.mobile-menu-toggle span {
    flex: 1;
}

.mobile-menu-arrow {
    width: 12px;
    height: 8px;
    flex-shrink: 0;
    margin-left: 12px;
    transition: transform 0.3s ease;
    transform: rotate(0deg);
}

.mobile-menu-item-has-sub.active .mobile-menu-arrow {
    transform: rotate(180deg);
}

.mobile-menu-item-has-sub.active .mobile-menu-toggle {
    color: #8dc63f;
    background-color: #f8f8f8;
}

.mobile-submenu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.3s ease;
    background-color: #fafafa;
    opacity: 0;
}

.mobile-menu-item-has-sub.active .mobile-submenu {
    max-height: 1000px;
    opacity: 1;
}

.mobile-submenu-link {
    display: block;
    padding: 14px 20px 14px 40px;
    color: #666666;
    font-family: var(--font-family-suit);
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
    border-top: 1px solid #f0f0f0;
    position: relative;
}

.mobile-submenu-link:first-child {
    border-top: none;
}

.mobile-submenu-link:hover,
.mobile-submenu-link:active {
    background-color: #f5f5f5;
    color: #8dc63f;
}

/* PC/모바일 공통: 햄버거 클릭 시 사이드메뉴 표시 (.active 시 display: block) */

/* ========== PC 전용 사이드메뉴 (호버 시 메가메뉴 기준 디자인) ========== */
.pc-sidebar {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10001;
    pointer-events: none;
}

.pc-sidebar.active {
    display: block;
    pointer-events: auto;
}

.pc-sidebar-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: transparent;
    cursor: pointer;
}

.pc-sidebar-inner {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: row;
}

.pc-sidebar-left {
    width: 728px;
    min-width: 728px;
    background: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../img/left.png) center center / cover no-repeat;
    display: flex;
    flex-direction: column;
    padding-top: 240px;
    padding-left: 240px;
    box-sizing: border-box;
}

.pc-sidebar-menu-wrap {
    display: flex;
    flex-direction: column;
    gap: 60px;
    align-items: flex-start;
}

.pc-sidebar-menu-li {
    color: #ffffff;
    font-family: var(--font-family-suit);
    font-size: 32px;
    line-height: 40px;
    font-weight: 700;
    text-decoration: none;
    transition: opacity 0.25s ease, color 0.25s ease;
}

.pc-sidebar-menu-li:hover {
    color: #ffffff;
    opacity: 1;
}

.pc-sidebar-menu-li:not(.active) {
    opacity: 0.6;
}

.pc-sidebar-menu-li.active {
    opacity: 1;
}

.pc-sidebar-right {
    flex: 1;
    background: #ffffff;
    position: relative;
    overflow: hidden;
    min-width: 0;
}

.pc-sidebar-deco {
    position: absolute;
    width: 1092px;
    height: 1092px;
    left: 586px;
    top: 340px;
    pointer-events: none;
}

.pc-sidebar-deco svg {
    width: 100%;
    height: 100%;
}

.pc-sidebar-submenu-wrap {
    position: relative;
    padding: 240px 0 0 122px;
    box-sizing: border-box;
    z-index: 1;
}

.pc-sidebar-submenu-panel {
    display: none;
    flex-direction: column;
    gap: 48px;
}

.pc-sidebar-submenu-panel.active {
    display: flex;
}

.pc-sidebar-submenu-group {
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: flex-start;
}

/* 회사소개·연혁: 기본은 회색, 호버 시에만 연두색 + 하위탭 노출 */
.pc-sidebar-submenu-hover-group {
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: flex-start;
    margin-bottom: -12px; /* 회사소개·연혁과 CI 간격 축소 */
}

.pc-sidebar-submenu-title {
    color: #808284;
    font-family: var(--font-family-suit);
    font-size: 24px;
    line-height: 32px;
    font-weight: 700;
    transition: color 0.2s ease;
}

.pc-sidebar-submenu-hover-group:hover .pc-sidebar-submenu-title {
    color: #8dc63f;
}

.pc-sidebar-submenu-tabs {
    display: flex;
    flex-direction: column;
    gap: 0;
    align-items: flex-start;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.25s ease, opacity 0.25s ease;
}

.pc-sidebar-submenu-hover-group:hover .pc-sidebar-submenu-tabs {
    max-height: 280px;
    opacity: 1;
}

.pc-sidebar-submenu-tab {
    color: #808284;
    font-family: var(--font-family-suit);
    font-size: 18px;
    line-height: 26px;
    font-weight: 400;
    text-decoration: none;
    transition: color 0.2s ease;
}

.pc-sidebar-submenu-tab:hover {
    color: #8dc63f;
}

.pc-sidebar-submenu-item {
    color: #808284;
    font-family: var(--font-family-suit);
    font-size: 24px;
    line-height: 32px;
    font-weight: 700;
    text-decoration: none;
    transition: color 0.2s ease;
}

.pc-sidebar-submenu-item:hover {
    color: #8dc63f;
}

/* 모바일/태블릿에서는 PC 사이드메뉴 절대 비표시 (.active 여부 무관) */
@media (max-width: 1024px) {
    .pc-sidebar,
    .pc-sidebar.active {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
}

/* PC에서만 PC 사이드메뉴 표시 (모바일 사이드메뉴는 1024px 이하에서만) */
@media (min-width: 1025px) {
    .pc-sidebar.active {
        display: block;
        visibility: visible;
        pointer-events: auto;
    }
}