/* ==========================================
   COMMON STYLE (공통 스타일)
   (용도: 모든 페이지에서 공통으로 사용하는 변수, 헤더, 푸터, 팝업 정의)
   ========================================== */

@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");
@import url("https://cdn.jsdelivr.net/gh/moonspam/NanumSquareNeo@1.0.0/nanumsquareneo.css");

:root {
    /* [변수] 메인 포인트 컬러 (청록색) | 색상 코드를 바꾸면 사이트 전체 포인트 색 변경 */
    --primary-color: #008c95;
    
    /* [변수] 어두운 포인트 컬러 (호버용) | 마우스 올렸을 때 진해지는 색상 */
    --primary-dark: #005f6b;
    
    /* [변수] 보조 컬러 (그라데이션용) | 밝은 청록색 */
    --secondary-color: #26a69a;
    
    /* [변수] 기본 배경색 | 아주 연한 회색 (완전 흰색보다 눈이 편함) */
    --light-bg: #f4f7f6;
    
    /* [변수] 본문 텍스트 색상 | 진한 회색 (검정색에 가까움) */
    --text-main: #231f20;
    
    /* [변수] 설명 텍스트 색상 | 중간 회색 */
    --text-light: #777;
    
    /* [변수] 흰색 고정값 */
    --white: #ffffff;
    
    /* [변수] 기본 폰트 설정 */
    --font-main: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
    
    /* [변수] 콘텐츠 최대 너비 | 1200px 이상으로 안 늘어나게 제한 */
    --max-width: 1320px;
    
    /* [변수] 모서리 둥글기 | 버튼, 카드 등의 모서리 (숫자를 키우면 더 둥글어짐) */
    --border-radius: 8px;
}

html {
    /* [기능] 스크롤 이동을 부드럽게 설정 (앵커 이동 시) */
    scroll-behavior: smooth;
    
    /* [기능] 스크롤 시 헤더 높이(80px)만큼 띄우고 멈춤 (내용 가림 방지) */
    scroll-padding-top: 80px;
}

/* --- 초기화 및 유틸리티 --- */
* {
    margin: 0; padding: 0; box-sizing: border-box; /* 여백 초기화 및 박스 크기 계산 방식 통일 */
}

body {
    font-family: var(--font-main); /* 전체 폰트 적용 */
    color: var(--text-main); /* 기본 글자색 적용 */
    line-height: 1.6; /* 줄 간격 (글자 크기의 1.6배) | 가독성 조절 */
    background-color: var(--light-bg); /* 배경색 적용 */
}

/* --- 가로 방향 스크롤 UI 숨김 --- */
html, body {
    max-width: 100%;

}

a {
    text-decoration: none; /* 링크 밑줄 제거 */
    color: inherit; /* 부모 요소의 색상 상속 */
    transition: 0.3s; /* 색상 변경 시 0.3초 동안 부드럽게 */
}

ul { list-style: none; /* 리스트 앞의 점(불릿) 제거 */ }
h1, h2, h3 { font-weight: 700; /* 제목 태그는 무조건 굵게 */ }

.container {
    max-width: var(--max-width); /* 너비 제한 (1200px) */
    margin: 0 auto; /* 좌우 중앙 정렬 */
    padding: 0 20px; /* 모바일에서 좌우 여백 확보 */
}


/* 헤더 / 푸터 너비 예외 적용 */
.header-container,
.footer-content {
    max-width: 1320px;
}


.section-padding {
    padding: 50px 0; /* 섹션 위아래 여백 50px | 간격 조절 시 수정 */
}

/* --- 공통 버튼 스타일 --- */
.btn {
    padding: 12px 32px; /* 버튼 크기 (상하 12, 좌우 32) */
    border-radius: var(--border-radius); /* 모서리 둥글게 */
    font-weight: 700; /* 글자 굵게 */
    display: inline-block; /* 크기 값을 가질 수 있게 설정 */
    cursor: pointer; /* 마우스 올리면 손가락 모양 */
    transition: all 0.3s ease; /* 애니메이션 효과 */
}

.btn-primary {
    background: var(--primary-color); /* 배경색 */
    color: var(--white); /* 글자색 */
    border: 2px solid var(--primary-color); /* 테두리 */
}

.btn-primary:hover {
    background: var(--secondary-color); /* 호버 시 배경 밝게 */
    border-color: var(--secondary-color); /* 테두리도 밝게 */
    transform: translateY(-2px); /* 버튼 살짝 위로 뜸 */
    box-shadow: 0 5px 15px rgba(0, 140, 149, 0.3); /* 그림자 효과 */
}

.btn-outline {
    border: 2px solid var(--white); /* 흰색 테두리 */
    color: var(--white); /* 흰색 글자 */
    margin-left: 10px; /* 왼쪽 버튼과의 간격 */
}

.btn-outline:hover {
    background: var(--white); /* 호버 시 흰 배경 채움 */
    color: var(--primary-dark); /* 글자는 어두운 색으로 반전 */
}

.btn-primary-outline {
    border: 1px solid var(--primary-color); /* 얇은 테두리 */
    color: var(--primary-color); /* 글자색 */
    padding: 8px 20px; /* 약간 작은 크기 */
    border-radius: 20px; /* 둥근 알약 모양 */
    font-weight: 700;
}

/* --- 헤더 (상단 메뉴바) --- */
.header {
    position: fixed; /* 화면 상단 고정 */
    top: 0; width: 100%; /* 너비 꽉 채움 */
    z-index: 1000; /* 모든 요소보다 위에 위치 */
    padding: 20px 0; /* 상하 여백 */
    transition: 0.3s; /* 배경색 변경 애니메이션 */
    background: transparent; /* 평소엔 투명 */
}

.header.scrolled {
    background: rgba(255, 255, 255, 0.98); /* 스크롤 시 흰색 배경 (약간 투명) */
    box-shadow: 0 2px 20px rgba(0,0,0,0.1); /* 하단 그림자 추가 */
    padding: 20px 0; /* 높이 약간 축소 */
}

.header-container {
    display: grid; /* 가로 배치 */
    grid-template-columns: 260px 1fr 260px;
    align-items: center; /* 세로 중앙 정렬 */
}

.nav {
    display: flex;
    justify-content: center;
}




/* ==================================================
   [추가] 서브 페이지 전용 헤더 스타일
   (목적: 배경 이미지와 상관없이 흰색 로고 가독성 확보)
   ================================================== */

/* 1. 서브 페이지의 헤더 (스크롤 전 기본 상태) */
body.sub-page header {
    /* 방법 A: 반투명한 검은색 배경을 깔아줌 (가장 무난함)
    background-color: rgba(0, 0, 0, 0.3); */
    
    /* 방법 B: 위에서 아래로 떨어지는 그림자 효과 (조금 더 고급스러움) */
    background: linear-gradient(to bottom, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%); 
    background-color: transparent; 

    /* 하단에 아주 연한 경계선 추가 (선택사항) */
    border-bottom: none;
    /*border-bottom: 1px solid rgba(255, 255, 255, 0.15);*/
}

/* 2. 서브 페이지라도 '스크롤을 내리면' 다시 흰색 배경으로 변해야 함 */
body.sub-page header.scrolled {
    background-color: #fff; /* 흰색으로 덮어쓰기 */
    border-bottom: 1px solid #ddd;
    box-shadow: 0 5px 10px rgba(0,0,0,0.1);
}

/* --- 로고 (White/Green 교차) --- */
.logo {
    position: relative; width: 150px; height: 40px; /* 로고 영역 크기 */
    display: flex; align-items: center; margin-top: -15px; /* 위치 미세 조정 */
}

.logo img {
    position: absolute; top: 0; left: 0; width: 100%; height: auto; /* 이미지 겹치기 */
    transition: opacity 0.3s; /* 페이드 효과 */
}

.logo-white { opacity: 1; z-index: 2; /* 흰색 로고 기본 보임 */ }
.logo-green { opacity: 0; z-index: 1; /* 녹색 로고 숨김 */ }

.header.scrolled .logo-white { opacity: 0; /* 스크롤 시 흰색 숨김 */ }
.header.scrolled .logo-green { opacity: 1; /* 스크롤 시 녹색 보임 */ }

/* --- 네비게이션 메뉴 --- */
.nav ul {
    display: flex; /* 가로 나열 */
    gap: 70px; /* 메뉴 사이 간격 (넓게 설정됨) */
}

.nav a {
    color: var(--white); /* 기본 흰색 글씨 */
    font-weight: 700; /* 굵게 */
    font-size: 1.2rem; /* 글자 크기 키움 */
    opacity: 0.9; /* 약간 투명하게 */
}

.nav ul li a {
    display: inline-block;
    min-width: 110px;      /* 필요 시 88~110px 사이로 미세조정 */
    text-align: center;
}

/* ==========================================
   [추가] 헤더 서브 메뉴 (Dropdown) 스타일
   ========================================== */

/* 1. 상위 메뉴 아이템 설정 */
.nav-item-has-sub {
    position: relative; /* 서브 메뉴 위치 기준점 */
    padding-bottom: 20px; /* 마우스 이동 시 끊김 방지용 투명 영역 확보 */
    margin-bottom: -20px; /* 레이아웃 영향 없도록 마진 상쇄 */
}

/* 2. 서브 메뉴 박스 기본 스타일 (숨김 상태) */
.nav .nav-sub-menu {
    position: absolute;
    top: 100%; /* 부모 요소 바로 아래 */
    left: 50%;
    transform: translateX(-50%) translateY(10px); /* 중앙 정렬 + 살짝 아래에서 시작 */
    
    width: 170px; /* 서브 메뉴 폭 */
    background-color: rgba(255, 255, 255, 0.98); /* 거의 불투명한 흰색 배경 */
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15); /* 부드러운 그림자 */
    padding: 10px 0; /* 상하 여백 */
    
    display: flex;
    flex-direction: column; /* 세로 정렬 */
    gap: 0; /* 항목 간격 없음 (padding으로 조절) */
    
    opacity: 0;
    visibility: hidden;
    pointer-events: none; /* 숨겨진 상태에서 클릭 방지 */
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); /* 부드러운 등장 효과 */
    z-index: 100;
}

/* 3. 상위 메뉴 호버 시 서브 메뉴 노출 (애니메이션) */
/* 단, 현재 페이지(.disable-dropdown)일 때는 열리지 않음 */
.nav-item-has-sub:not(.disable-dropdown):hover .nav-sub-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0); /* 제자리로 올라옴 */
}

/* 4. 서브 메뉴 링크 스타일 재정의 */
/* 기존 .nav a 스타일(흰색/굵게 등)을 덮어씌워야 함 */
.nav .nav-sub-menu li {
    display: block;
    width: 100%;
}

.nav .nav-sub-menu a {
    display: block;
    color: #333 !important; /* 무조건 짙은 회색 (배경이 흰색이므로) */
    font-size: 0.95rem;     /* 본문보다 약간 작게 */
    font-weight: 700;       /* 너무 굵지 않게 */
    text-align: center;
    padding: 10px 10px;
    min-width: auto;        /* 기존 min-width 해제 */
    opacity: 1;
    transition: all 0.2s ease;
    border-radius: 4px;
    margin: 1px 5px;        /* 내부 여백 */
    width: auto;
}

/* 5. 서브 메뉴 호버 효과 */
.nav .nav-sub-menu a:hover {
    background-color: #f0fbfc; /* 연한 청록색 배경 */
    color: var(--primary-color) !important; /* 글자색 강조 */
    transform: translateX(3px); /* 살짝 오른쪽 이동 효과 */
}



.header.scrolled .nav a { color: var(--text-main); /* 스크롤 시 검은 글씨 */ }
.nav a:hover { color: var(--primary-color); opacity: 1; /* 호버 시 색상 변경 */ }
.header.scrolled .nav a:hover { color: var(--primary-color); /* 스크롤 상태 호버 */ }

/* --- [특수] About/Products/Clients 등 서브 페이지용 헤더 설정 --- */
/* .about-page, .contact-page 등 body 클래스에 따라 헤더 스타일 강제 조정 */
body.about-page .header,
body.product-page .header,
body.clients-page .header,
body.contact-page .header {
    background: transparent; box-shadow: none; border-bottom: none;
}
/* 서브 페이지에서도 스크롤하면 흰색으로 변함 */
body.about-page .header.scrolled,
body.product-page .header.scrolled,
body.clients-page .header.scrolled,
body.contact-page .header.scrolled {
    background: rgba(255, 255, 255, 0.98); box-shadow: 0 2px 20px rgba(0,0,0,0.1);
}


/* 서브 메뉴 바 */

@keyframes wipeRight {
    from {
        width: 0%
    }
    to {
        width: 100%;
    }
}

@keyframes slideInText {
    from {
        opacity: 0;
        transform: translate(-30px);
    }
    to {
        opacity: 1;
        transform: translate(0);
    }
}

.sub-nav-bar {
    background: transparent;    
    position: sticky; top: 80px; z-index: 990; /* 스크롤 시 상단 고정 */
}

.sub-nav-bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: var(--white);
    border-bottom: 1px solid #ddd;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    z-index: -1;
    width: 0%;
    animation: wipeRight 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

.sub-nav-bar .container { display: flex; justify-content: center; gap: 30px; }

.sub-nav-bar a {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    height: 100%;
    min-height: 42px;  
    font-weight: 700; color: var(--text-light); 
    border-bottom: none;
    position: relative;
    white-space: nowrap;
    opacity: 0;
    animation: slideInText 0.5s ease-out forwards;
}
.sub-nav-bar a:nth-child(1) { animation-delay: 0.2s; }
.sub-nav-bar a:nth-child(2) { animation-delay: 0.3s; }
.sub-nav-bar a:nth-child(3) { animation-delay: 0.4s; }
.sub-nav-bar a:nth-child(4) { animation-delay: 0.5s; }
.sub-nav-bar a:nth-child(5) { animation-delay: 0.6s; }
.sub-nav-bar a:nth-child(6) { animation-delay: 0.7s; }
.sub-nav-bar a:nth-child(7) { animation-delay: 0.8s; }

.sub-nav-bar a:not(.main-brand-item)::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: -15px;
    right: -15px;
    height: 3px;
    background: var(--primary-color);
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* 호버 또는 활성화(active) 시 밑줄 색상 표시 */
.sub-nav-bar a:hover, .sub-nav-bar a.active {
    color: var(--primary-color); 
}
.sub-nav-bar a:hover::after, .sub-nav-bar a.active::after{
    opacity: 1;
}

/* [추가] 서브 메뉴바 메인 브랜드 (BMGuard) 디자인 - for products.php */
.sub-nav-bar a.main-brand-item {
    display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
    padding: 0 30px 0 0; margin-right: 20px;
    border-bottom: none; border-right: 1px solid #ddd;
    text-align: left; height: auto; 
}
.sub-nav-bar a.main-brand-item:hover, .sub-nav-bar a.main-brand-item.active {
    border-bottom: none; color: inherit;
}
.main-brand-item .brand {
    font-size: 1.3rem; font-weight: 900; color: var(--primary-color);
    line-height: 1; margin-top: 0px; margin-bottom: 1px;
}
.main-brand-item .slogan {
    font-size: 0.6rem; color: #888; font-weight: 500;
    letter-spacing: -0.3px; text-transform: uppercase; line-height: 1;
}



/* --- 푸터 (Footer) --- */
.footer {
    background: #0E2D3D; /* 짙은 남색 배경 */
    color: rgba(255,255,255,0.7); /* 연한 회색 글씨 */
    padding: 10px 0; /* 얇은 푸터 */
    position: relative;
}
/* 푸터 컨테이너 (버튼 위치 기준점) */
.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative; /* [핵심] 절대 위치(Absolute) 기준점 설정 */
}
.footer-left {
    display: flex; align-items: center; /* 로고와 텍스트 가로 정렬 */
}

.footer-left .logo-white {
    height: 45px; width: auto; margin-bottom: 5px; margin-right: 20px; display: block;
}

.footer-left p {
    font-size: 1.5rem; font-weight: 700; color: #ffffff; margin-top: 4px; /* 회사명 스타일 */
}

/* ==========================================
   [수정] 푸터 레이아웃 (텍스트 + 버튼 가로 배치)
   ========================================== */

/* 2. 오른쪽 텍스트 영역 (기존 위치 고정) */
.footer-right {
    text-align: right;
    font-size: 0.8rem;
    /* 버튼이 빠져나갔으므로 Flex나 Gap 불필요, 순수 텍스트만 유지 */
}

.footer-info-text p {
    margin-bottom: 2px;
    line-height: 1.35;
    letter-spacing: -0.2px;

}

.footer-info-text p:last-child {
    margin-bottom: 0;
}

.footer a { color: var(--white); text-decoration: underline; /* 이메일 링크 등 */ }


/* [추가] 스텔스 방문자 카운터 스타일 */
.stealth-counter {
    position: absolute;
    bottom: 2px;       /* 바닥에 딱 붙임 */
    right: 5px;        /* 우측 스크롤바 바로 옆 */
    z-index: 10;       /* 다른 요소보다 위에 */
    
    font-size: 10px;   /* 알아볼 수 있는 최소 크기 */
    font-family: monospace; /* 숫자 간격 일정하게 */
    line-height: 1;
    
    /* [핵심] 배경색과 동일하게 하여 숨김 */
    color: #0E2D3D;    
    
    /* 드래그(선택) 가능하도록 설정 */
    user-select: text; 
    cursor: default;
}

/* 드래그했을 때(선택 시) 글자 색상 반전 */
.stealth-counter::selection {
    background: #ffffff;
    color: #000000;
}


/* ==========================================
   [GLOBAL] 공통 팝업(모달) 스타일
   ========================================== */
.modal-overlay {
    display: none; /* 기본 숨김 */
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; /* 전체 화면 덮음 */
    background: rgba(0, 0, 0, 0.5); /* 반투명 검은 배경 */
    z-index: 9999; /* 최상위 레이어 */
    align-items: center; justify-content: center; /* 중앙 정렬 */
}

.modal-overlay.active { display: flex; /* 활성화 시 보임 (Flex) */ }

.modal-box {
    background: #fff; padding: 40px 30px; border-radius: 12px;
    width: 90%; max-width: 400px; /* 팝업 크기 제한 */
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3); /* 그림자 */
    animation: popUp 0.3s ease-out; /* 팝업 등장 애니메이션 */
    position: relative;
}

@keyframes popUp {
    from { transform: scale(0.8); opacity: 0; } /* 작고 투명하게 시작 */
    to { transform: scale(1); opacity: 1; } /* 원래 크기로 */
}

.modal-box h3 {
    margin-bottom: 15px; color: var(--primary-dark); font-size: 1.5rem; font-weight: 700;
}
.modal-box p { margin-bottom: 30px; color: #555; font-size: 1.1rem; line-height: 1.5; }

.modal-close-btn {
    background: var(--primary-color); color: #fff; border: none;
    padding: 12px 50px; border-radius: 6px; font-size: 1rem; font-weight: 700;
    cursor: pointer; transition: 0.3s;
}
.modal-close-btn:hover { background: var(--secondary-color); }


/* ==========================================
   [추가] 헤더 전용 '제품 문의' 버튼 스타일
   ========================================== */
.btn-header-cta {
    padding: 10px 25px;       /* 버튼 크기 */
    border-radius: 5px;      /* 둥근 알약 모양 */
    font-weight: 700;
    transition: all 0.3s ease;
    display: inline-block;
    text-align: center;
    line-height: 1.2;
}

/* 제품 문의 버튼 간격 (PC 기본) */
.btn-header-cta i {
    margin-right: 12px;
}

/* --- 모바일 메뉴 버튼은 PC에서 보이지 않도록 --- */
.btn-mobile-menu { 
    display: none; 
}


/* 1. 스크롤 전 (배경이 어두울 때): 흰색 바탕 + 메인 컬러 글씨 */
.header .btn-header-cta {
    background-color: #ffffff;
    color: var(--primary-color);
    border: 2px solid #ffffff;
}

.header .btn-header-cta:hover {
    background-color: #f0f0f0; /* 호버 시 살짝 어두운 흰색 */
    border-color: #f0f0f0;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

/* 2. 스크롤 후 (배경이 흰색일 때): 메인 컬러 바탕 + 흰색 글씨 */
.header.scrolled .btn-header-cta {
    background-color: var(--primary-color);
    color: #ffffff;
    border: 2px solid var(--primary-color);
}

.header.scrolled .btn-header-cta:hover {
    background-color: var(--primary-dark);
    border-color: var(--primary-dark);
    box-shadow: 0 5px 15px rgba(0, 140, 149, 0.4);
}

/* ==========================================
   [추가] 헤더 우측 액션 그룹 (사이트맵 + 제품 문의)
   ========================================== */
.header-cta-group {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    justify-content: flex-end;
    
}

/* ==========================================
   [추가] 헤더용 사이트맵 + 다국어 버튼 (사각형 테두리 + 아이콘)
   ========================================== */
.btn-sitemap-header {
    width: 42px;
    height: 42px;
    border-radius: 5px;
    padding: 0;

    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.85);
    color: rgba(255, 255, 255, 0.95);

    display: inline-flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 1.4rem;
}

.btn-sitemap-header:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
    transform: translateY(-2px);
}

/* 키보드 포커스 접근성(선택이지만 권장) */
.btn-sitemap-header:focus-visible {
    outline: 3px solid rgba(0, 140, 149, 0.35);
    outline-offset: 3px;
}

/* 스크롤 후(헤더가 흰 배경일 때): 메뉴 텍스트와 동일하게 어두운 톤 */
.header.scrolled .btn-sitemap-header {
    border-color: rgba(35, 31, 32, 0.35);
    color: var(--text-main);
}

.header.scrolled .btn-sitemap-header:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

/* ==========================================
   [추가] 헤더용 다국어 토글 (지구본 + KOR/ENG)
   ========================================== */
.lang-switcher {
    position: relative;
    width: 42px;
    height: 42px;
}

/* 지구본 버튼은 기존 사이트맵 버튼 스타일 재사용 */
.btn-lang-header {
    position: relative;
    z-index: 2; /* 확장 패널 위로 */
}

/* 확장 직사각형 패널 */
.lang-pill {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    height: 42px;
    width: 42px; /* 닫힌 상태: 사실상 숨김 */
    border-radius: 5px;

    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.85);

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 10px;

    opacity: 0;
    pointer-events: none;
    z-index: 1;

    transition: width 0.28s ease,
                opacity 0.18s ease,
                transform 0.28s ease,
                border-color 0.3s ease;

    flex-wrap: nowrap;   /* [추가] 줄바꿈 금지 */
    overflow: visible;   /* [추가] 타원 밖으로 나가도 보이게 */
}

/* 열림 상태: 좌우로 벌어지는 타원형
   단, 우측(사이트맵 버튼) 클릭 영역을 덮지 않도록 전체를 약간 좌측으로 이동 */
.lang-switcher.open .lang-pill {
    width: 82px;
    transform: translate(calc(-50% - 21px), -50%);
    opacity: 1;
    pointer-events: auto;
}

/* 열림 상태에서 중앙(지구본) 버튼의 이중 테두리 느낌 완화 */
.lang-switcher.open .btn-lang-header {
    border-color: transparent;
}

/* 열림 상태에서 지구본 hover로 위로 뜨는 효과는 정렬을 깨므로 비활성 */
.lang-switcher.open .btn-lang-header:hover {
    transform: none;
}

/* KOR/ENG 버튼 */
.lang-opt {
    width: 34px;
    height: 34px;
    border-radius: 4px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.85);
    color: rgba(255, 255, 255, 0.95);

    font-size: 1.15rem;
    
    font-weight: 800;
    letter-spacing: 0.2px;
    padding: 0;
    overflow: hidden;

    transition: all 0.3s ease;

    flex: 0 0 34px;      /* [추가] 폭 고정 */
    flex-shrink: 0;      /* [추가] 절대 줄지 않게 */
}

.lang-opt:hover {
    background-color: var(--primary-color);
    border-color: #FFF;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);    
}

/* 스크롤 후(헤더 흰 배경): 메뉴 텍스트와 동일 톤으로 변경 */
.header.scrolled .lang-pill {
    border-color: rgba(35, 31, 32, 0.35);
}

.header.scrolled .lang-opt {
    border-color: rgba(35, 31, 32, 0.35);
    color: var(--text-main);
}

.header.scrolled .lang-opt:hover {
    background-color: var(--primary-color);
    border-color: rgba(35, 31, 32, 0.35);
    color: #fff;
}


/* [추가] 열림 상태에서는 지구본 버튼이 클릭을 가로채지 않도록 숨김/비활성 */
.lang-switcher.open .btn-lang-header {
    opacity: 0;
    pointer-events: none;
}

/* [추가] 열림 상태에서 패널을 버튼보다 위로 */
.lang-switcher.open .lang-pill {
    z-index: 3;
}


/* ==========================================
   [추가] 버튼 통통 튀는 애니메이션 (Bouncing)
   ========================================== */

/* 1. 애니메이션 동작 정의 (위아래로 둥실둥실) */
@keyframes bouncing-btn {
    0% { transform: translateY(0); }
    50% { transform: translateY(-6px); } /* 6px 만큼 위로 올라감 */
    100% { transform: translateY(0); }
}

/* 2. 애니메이션을 적용할 클래스 */
.btn-bouncing {
    animation: bouncing-btn 1.5s infinite ease-in-out; /* 1.5초마다 무한 반복 */
    
    /* 효과 강조: 그림자도 같이 움직이게 하려면 아래 속성 추가 (선택사항) */
    box-shadow: 0 5px 15px rgba(0, 140, 149, 0.4); 
}

/* 마우스를 올렸을 때는 정신사나우니까 멈추게 할까요? (선택사항) */
.btn-bouncing:hover {
    animation-play-state: paused;
}

/* 3. 사이트맵 버튼 (컨테이너 밖으로 밀어내기) */
.btn-sitemap-trigger {
    /* [핵심] 절대 위치로 배치하여 기존 레이아웃에 영향 없음 */
    position: absolute;
    top: 50%;
    transform: translateY(-50%); /* 세로 중앙 정렬 */
    
    /* [핵심] 오른쪽 밖으로 130px 만큼 밀어냄 (버튼폭 + 간격) */
    right: -130px; 
    
    /* 버튼 디자인 (직사각형 + 아이콘) */
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: rgba(255, 255, 255, 0.7);
    height: 36px;            /* 높이 살짝 키움 */
    padding: 0 15px;
    border-radius: 4px;      /* 약간 각진 모서리 */
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.85rem;
    font-weight: 500;
    white-space: nowrap;     /* 줄바꿈 방지 */
}

.btn-sitemap-trigger span {
    padding-top: 1px;
    letter-spacing: 0.5px;
}

/* 호버 효과 */
.btn-sitemap-trigger:hover {
    border-color: var(--primary-color);
    background: var(--primary-color);
    color: #fff;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

/* 2. 전체 화면 오버레이 */
.sitemap-overlay {
    display: none; /* 기본 숨김 */
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 9999;
    
    /* [핵심] 불투명 배경 + 블러 처리 */
    background: rgba(14, 45, 61, 0.92); /* Footer 색상의 92% 불투명도 */
    backdrop-filter: blur(8px);         /* 배경 흐림 효과 */
    -webkit-backdrop-filter: blur(8px);
    
    opacity: 0;
    transition: opacity 0.4s ease;
    overflow-y: auto; /* 내용이 길면 스크롤 */
}

.sitemap-overlay.active {
    display: block;
    opacity: 1;
}

/* 닫기 버튼 (우측 상단) */
.sitemap-close-btn {
    position: absolute; top: 40px; right: 40px;
    background: transparent; border: none;
    color: #fff; font-size: 2.5rem; cursor: pointer;
    transition: 0.3s;
    z-index: 10001;
}
.sitemap-close-btn:hover { color: var(--primary-color); transform: scale(1.1); }

/* 사이트맵 컨텐츠 레이아웃 */
.sitemap-container {
    padding-top: 100px; padding-bottom: 80px;
    color: #fff;
}

.sitemap-header {
    border-bottom: 1px solid rgba(255,255,255,0.1);
    margin-bottom: 50px; padding-bottom: 20px;
}
.sitemap-header h2 { font-size: 2.5rem; color: #fff; letter-spacing: 2px; margin-bottom: 5px; }
.sitemap-header p { font-size: 1rem; color: var(--primary-color); font-weight: 300; }

/* 5열 그리드 레이아웃 */
.sitemap-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* 5개 메뉴 */
    gap: 30px;
}

/* 개별 컬럼 스타일 */
.sitemap-col h3 {
    font-size: 1.4rem; margin-bottom: 25px; padding-bottom: 15px;
    border-bottom: 2px solid var(--primary-color);
    display: inline-block; width: 100%;
}
.sitemap-col h3 a { color: #fff; text-decoration: none; }
.sitemap-col h3 a:hover { color: var(--primary-color); }

.sitemap-col ul li { margin-bottom: 12px; }
.sitemap-col ul li a {
    color: rgba(255,255,255,0.6); font-size: 1.05rem; transition: 0.3s;
    display: inline-block; position: relative;
}

/* 서브메뉴 호버 효과 */
.sitemap-col ul li a:hover {
    color: #fff; transform: translateX(5px);
}
.sitemap-col ul li a:hover::before {
    content: '›'; position: absolute; left: -15px; color: var(--primary-color);
}

/* 모바일 언어 선택 버튼 - PC에서는 숨기기 */
.btn-mobile-lang {
    display: none;
}
.mo-only {
    display: none;
}

@media (max-width: 1024px) {

    html, body {   
    overflow-x: hidden; /* 모바일 가로 스크롤 방지 */
}


    /* <br> 코드는 모바일 환경에선 기본 무효 / 예외는 각 css 파일에서 설정 */
    br { display: none; }

    .mo-only {
        display: inline;
    }

    /* [C] 모바일 헤더는 항상 흰색 (스크롤 상태와 무관) */
    .header {
        background: rgba(255, 255, 255, 0.98) !important;
        box-shadow: 0 2px 20px rgba(0,0,0,0.1) !important;
    }

    /* 로고는 항상 녹색(화이트 로고 숨김) */
    .header .logo-white { opacity: 0 !important; }
    .header .logo-green { opacity: 1 !important; }

    /* 헤더 레이아웃: grid -> flex */
    .header-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    /* 로고 */
    .logo {
        height: 42px;
        margin-top: 0;
    }
    .logo img {
        height: 100%;
        width: auto;
    }

    /* PC 상단 텍스트 메뉴는 기본 숨김 */
    .nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;

        background: rgba(255,255,255,0.98);
        border-bottom: 1px solid rgba(0,0,0,0.08);
        box-shadow: 0 8px 24px rgba(0,0,0,0.12);
        padding: 8px 0;
        z-index: 999;
    }
    .nav.active { display: block; }

    /* 모바일 메뉴는 4개 “상위 메뉴만” 보이도록(서브메뉴 숨김) */
    .nav .nav-sub-menu {
        display: none ;
    }
    .nav ul {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .nav ul li a {
        width: 100%;
        text-align: left;

        padding: 14px 18px;
        border-bottom: 1px solid rgba(0,0,0,0.06);

        color: var(--text-main);
        opacity: 1;
        font-size: 1.05rem;
    }
    .nav ul li:last-child a { border-bottom: none; }

    /* 모바일 우측 액션 그룹 */
    .header-cta-group {
        width: auto;
        justify-content: flex-end;
        gap: 3px;
    }

    /* 모바일에서는 언어/사이트맵(PC용 아이콘 버튼) 숨김 */
    .lang-switcher,
    .btn-sitemap-header {
        display: none;
    }

    /* 제품 문의 버튼 */
    .btn-header-cta {
        width: auto;
        height: 42px;
        padding: 10px ;

        display: inline-flex;
        align-items: center;
        justify-content: center;

        background: transparent !important;
        border: 2px solid rgba(35,31,32,0.35) !important;

        /* 공통 CSS의 scrolled 상태에서 color: #fff로 바뀌는 것을 모바일에서 고정 */
        color: var(--primary-color) !important;
    }
    .btn-header-cta strong {
        font-size: 90%;
    }
    .btn-header-cta i {
        margin-right: 5px;
        color: var(--primary-color) !important;
    }

    /* 모바일 전용 언어 선택 버튼 (한국어 페이지에선 ENG / 영어 페이지에선 KOR) */
    .btn-mobile-lang {
        display: flex !important;
        align-items: center;
        justify-content: center;
        
        /* 햄버거 버튼(.btn-mobile-menu)과 동일한 스타일 적용 */
        width: 42px !important;    /* 가로 고정 */
        height: 42px !important;   /* 세로 고정 */
        background: transparent;
        border: 2px solid rgba(35, 31, 32, 0.35); /* 테두리 색상 */
        border-radius: 5px;
        color: var(--primary-color);
        
        /* 텍스트 스타일 */
        font-size: 20px !important; /* 공간이 좁으므로 글자 크기 조정 */
        font-weight: 800;
        text-decoration: none;
        box-sizing: border-box;
        
        /* 찌그러짐 방지 (필수) */
        flex: 0 0 auto !important;
        flex-shrink: 0 !important;
        
        transition: all 0.3s ease;
    }

    /* 모바일 전용 언어 선택 버튼 호버 시 포인트 컬러 적용 */
    .btn-mobile-lang:hover,
    .btn-mobile-lang:active {
        border-color: var(--primary-color);
        color: var(--primary-color);
    }

    /* 햄버거 버튼: 정사각형 아이콘 버튼 (흰 헤더 기준 가독성 고정) */
    .btn-mobile-menu {
        display: inline-flex;
        width: 42px;
        height: 42px;
        padding: 0;

        align-items: center;
        justify-content: center;

        background: transparent;
        border: 2px solid rgba(35, 31, 32, 0.35) !important;
        border-radius: 5px !important;
        color: var(--text-main) !important;

        cursor: pointer;
        transition: all 0.3s ease;
        font-size: 1.4rem;
    }

    .btn-mobile-menu:hover {
        border-color: var(--primary-color);
        color: var(--primary-color);
        transform: translateY(-2px);
    }

    .footer {
        padding: 24px 0; /* 모바일에서 여백 확보(필요시 20~28px 조절) */
    }

    .footer-content {
        flex-direction: column;      /* 가로 → 세로 */
        align-items: center;
        text-align: center;
        gap: 14px;                   /* 1(로고)~2(회사명)~3(정보) 기본 간격 */
    }

    .footer-left {
        flex-direction: column;      /* 로고 위, 회사명 아래 */
        align-items: center;
    }

    .footer-left .logo-white {
        margin: 0 0 8px 0;           /* 로고-회사명 간격 */
        height: 44px;                /* 필요시 40~48px 범위 */
    }

    .footer-left p {
        margin: 0;
        font-size: 1.2rem;           /* PC(1.5rem) 대비 모바일 적정값 */
        line-height: 1.2;
    }

    .footer-right {
        text-align: center;
        font-size: 0.85rem;          /* 가독성 보정(필요시 조절) */
    }

    .footer-info-text {
        margin-top: 6px;             /* 회사명(중단)과 정보(하단) 사이 추가 간격 */
    }

    .footer-info-text p {
        margin-bottom: 6px;
    }

    .footer-info-text p:last-child {
        margin-bottom: 0;
    }

}

/* --- 가로 폭 좁은 핸드폰 (Z폴드 5 접힌 화면 등) 제품문의 버튼 텍스트 숨김 --- */
@media (max-width: 350px) {
    .btn-header-cta strong {
        display: none;
    }
    .btn-header-cta i {
        margin-right: 0px;
    }
}