/* 1. 웹 폰트 로드 (하이원 원추리체 B) */
@font-face {
    font-family: 'Wanted Sans';
    src: url('/kr/assets/fonts/WantedSans-Medium.woff2') format('woff2'),
         url('/kr/assets/fonts/WantedSans-Medium.woff') format('woff'),
         url('/kr/assets/fonts/WantedSans-Medium.ttf') format('truetype');
    font-weight: 500; /* Medium 두께 */
    font-style: normal;
}

/* 2. 기본 초기화 및 사이트 전체 폰트 적용 */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { 
    font-family: 'Wanted Sans', sans-serif !important; /* 사이트 전체 기본 폰트로 강제 지정 */
    font-weight: 500; /* Medium 적용 */
    color: #fff; 
    min-height: 100vh; 
    display: flex; 
    flex-direction: column; 
    background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url('/kr/assets/images/banner1.jpg') center/cover fixed; 
}

/* 3. 헤더 영역 */
.main-header { 
    position: fixed; top: 0; width: 100%; z-index: 1000; 
    padding: 0px 30px 10px 30px; 
    background: rgba(0,0,0,0.1); 
    transition: background 0.3s ease;
    display: flex; flex-direction: column; 
}

.main-header:hover { background: rgba(0,0,0,0.5) !important; } 
.main-header.scrolled { background: rgba(0,0,0,1) !important; } 

/* 3-1. 헤더 상단 (로고 및 유틸리티) */
.header-top-row { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    width: 100%; 
    max-width: 1400px; /* 💡 푸터와 동일한 최대 폭 설정 */
    margin: 0 auto;    /* 💡 중앙 정렬 */
    padding-top: 20px; 
}
.header-logo img { height: 35px; }

.header-right { display: flex; align-items: center; gap: 20px; }
.header-utils { display: flex; align-items: center; gap: 15px; font-size: 0.9rem; }
.util-link { color: #fff !important; text-decoration: none !important; border: none !important; }

/* 언어 선택 메뉴 스타일 */
.lang-wrap { position: relative; }
.lang-menu {
    display: none; position: absolute; top: 100%; right: 0; 
    background: rgba(0,0,0,0.8); min-width: 100px; padding: 5px 0; 
    list-style: none; margin-top: 15px;
}
.lang-menu.active { display: block; }
.lang-menu li a { display: block; padding: 10px 15px; font-size: 0.85rem; color: #fff; text-decoration: none; text-align: center; }
.lang-menu li a:hover { background: rgba(255,255,255,0.2); }

/* 3-2. 헤더 하단 (메인 메뉴) */
.gnb-nav { 
    width: 100%; 
    max-width: 1400px; /* 💡 메뉴도 푸터/헤더상단과 동일한 폭 제한 */
    margin: 10px auto 0 auto; /* 💡 중앙 정렬 */
    display: flex; 
    justify-content: center; 
}
.gnb-nav > ul { display: flex; gap: 60px; list-style: none; }
.gnb-nav > ul > li { position: relative; }
.gnb-nav > ul > li > a { font-size: 1.1rem; font-weight: bold; color: #fff; text-decoration: none; }

/* 3-3. 서브 메뉴 (PC) */
.submenu {
    display: none; position: absolute; top: 100%; left: 0;
    background: rgba(0,0,0,0.8); min-width: 180px; padding: 10px 0; list-style: none;
}
.gnb-nav > ul > li:hover .submenu { display: block; }
.submenu li a { display: block; padding: 10px 20px; font-size: 0.9rem !important; color: #fff; text-decoration: none; }
.submenu li a:hover { background: rgba(255,255,255,0.2); }

/* 햄버거 버튼 (PC에서는 숨김) */
.menu-toggle { display: none; cursor: pointer; font-size: 28px; }

/* 4. 메인 영역 제품 이미지 */
.product-images { display: flex; justify-content: center; gap: 40px; margin-top: 40px; }
.product-images img { width: 300px; height: auto; }

/* 5. 푸터 영역 (채용공고 등 서브 페이지와 동일한 넉넉한 여백 적용) */
.main-footer { 
    background: rgba(0, 0, 0, 0.8) !important; 
    color: #fff; 
    padding: 40px 60px !important; /* 상하 패딩을 키워 넉넉하게 확보 */
}

.footer-wrap { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    max-width: 1400px; 
    margin: 0 auto; 
    line-height: 1.8 !important; /* 텍스트 줄간격 넓히기 */
}

.footer-right { margin-left: auto; text-align: right; }
.footer-right img { height: 30px; width: auto; }

.copyright { 
    text-align: center; 
    margin-top: 25px !important; /* 카피라이트와 본문 사이 간격 확보 */
    font-size: 0.75rem; 
    letter-spacing: 0.5px;
}
/* 6. 페이드 인 애니메이션 */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
.fade-in-element { animation: fadeIn 1.5s ease-out forwards; opacity: 0; }
.text-delay { animation-delay: 0.3s; }
.image-delay { animation-delay: 0.8s; }

/* ==========================================================
   1. PC 화면 전용: Product 서브메뉴 한 줄 출력 강제 설정
   ========================================================== */
@media (min-width: 993px) {
    .gnb-nav > ul > li {
        position: relative !important;
    }

    .gnb-nav .submenu {
        display: none; 
        position: absolute !important; 
        top: 100% !important; 
        left: 0 !important;
        background: rgba(0,0,0,0.9) !important; 
        width: max-content !important;        
        min-width: max-content !important;    
        max-width: none !important;           
        padding: 10px 0 !important; 
        list-style: none !important;
        white-space: nowrap !important;       
    }

    .gnb-nav .submenu li {
        width: 100% !important;
        white-space: nowrap !important;
    }

    .gnb-nav .submenu li a { 
        display: block !important;
        padding: 10px 20px !important; 
        font-size: 0.9rem !important; 
        color: #fff !important; 
        text-decoration: none !important; 
        white-space: nowrap !important;       
        word-break: keep-all !important;
    }

    .gnb-nav > ul > li:hover .submenu {
        display: block !important;
    }
	
	.gnb-nav .mobile-only {
        display: none !important;
    }
    .gnb-nav {
        display: flex !important; /* PC에서는 항상 가로로 노출 */
    }
}



/* ==========================================================
   2. 모바일 반응형 설정 (992px 이하)
   ========================================================== */
@media (max-width: 992px) {
    .header-utils { display: none !important; }
    .menu-toggle { display: block !important; }
    
    /* 평소에는 모바일 메뉴를 화면에서 숨김 */
    .gnb-nav { 
        display: none !important; 
        position: absolute !important; 
        top: 80px !important; 
        left: 0 !important; 
        width: 100% !important; 
        background: rgba(0,0,0,0.95) !important; 
        padding: 30px 40px !important; 
        z-index: 999 !important;
    }
    
    /* 햄버거 버튼을 눌러 .active가 붙었을 때만 나타남 */
    .gnb-nav.active { 
        display: block !important; 
    }
    
    .gnb-nav.active > ul { 
        display: flex !important; 
        flex-direction: column !important; 
        align-items: flex-end !important; 
        gap: 30px !important; 
        padding: 0 !important; 
    }
    
    .gnb-nav > ul > li {
        width: 100% !important;
        text-align: right !important;
        position: static !important; 
    }
    
    .gnb-nav > ul > li > a {
        font-size: 1.2rem !important;
        display: inline-block !important;
    }

    /* 모바일 서브메뉴 겹침 방지 및 우측 정렬 */
    .gnb-nav .submenu { 
        display: block !important; 
        position: static !important; 
        background: none !important; 
        text-align: right !important; 
        padding-top: 10px !important; 
        padding-left: 0 !important; 
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        white-space: normal !important;
    }
    
    .gnb-nav .submenu li {
        width: 100% !important;
        text-align: right !important;
        margin-bottom: 5px !important;
        white-space: normal !important;
    }

    .gnb-nav .submenu li a { 
        padding: 4px 0 !important; 
        font-size: 0.95rem !important; 
        color: #ccc !important; 
        display: inline-block !important;
        white-space: normal !important;
    }
    
    .gnb-nav .submenu li a:hover {
        color: #fff !important;
        background: none !important;
    }
	
    /* 모바일 전용 언어 메뉴 노출 및 우측 정렬 */
    .gnb-nav .mobile-only {
        display: block !important;
        width: 100% !important;
        text-align: right !important;
    }
    
    .gnb-nav .mobile-only .submenu {
        display: block !important;
        position: static !important;
        background: none !important;
        padding: 5px 0 !important;
        margin-top: 5px !important;
        text-align: right !important;
    }
}


/* ==========================================================
   3. 모달 공통 스타일
   ========================================================== */
.modal { position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); }
.modal-content { 
    background: #fff; width: 500px; max-width: 90%; max-height: 80vh; 
    margin: 50px auto; padding: 30px; border-radius: 12px; color: #333;
    position: relative; overflow-y: auto; box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}
.close-btn { position: absolute; right: 20px; top: 15px; font-size: 28px; cursor: pointer; }