@import url('style.css'); 

body { background: #fff !important; }

/* =========================================
   [ 1. 서브페이지 전용 헤더 (높이 117px) ]
========================================= */
.sub-page-header {
    position: fixed; top: 0; left: 0; width: 100%;
    z-index: 1000; display: flex; flex-direction: column; align-items: center; justify-content: center;
    border-bottom: 1px solid rgba(255,255,255,0.2);
    background-image: url('/kr/assets/images/about/about_banner.png');
    background-size: cover; background-position: center;
}
.sub-header-inner {
    display: flex; justify-content: space-between; align-items: center; 
    width: 100%; max-width: 1400px; margin: 0 auto; padding: 0 30px; margin-bottom: 5px;
	padding-top: 20px !important; /* 💡 이 줄을 추가 (상단 여백 확보) */
}

.header-logo img { height: 35px; }

/* [ 2. 메인 메뉴 및 서브메뉴(드롭다운) - PC 전용 한 줄 출력 고정 ] */
.gnb-nav-sub { display: flex; justify-content: center; width: 100%; margin-top: 5px; }
.gnb-nav-sub > ul { display: flex; gap: 60px; list-style: none; margin: 0; padding: 0; }
.gnb-nav-sub > ul > li { position: relative !important; }
.gnb-nav-sub > ul > li > a { font-size: 1.05rem; font-weight: bold; color: #fff; text-decoration: none; display: block; }

.gnb-nav-sub .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-sub > ul > li:hover .submenu { display: block !important; }

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

.gnb-nav-sub .submenu li a { 
    display: block !important;
    padding: 10px 20px !important; 
    font-size: 0.95rem !important; 
    color: #fff !important; 
    text-decoration: none !important; 
    white-space: nowrap !important;       /* 링크 내부 텍스트 줄바꿈 원천 차단 */
    word-break: keep-all !important;
}

.gnb-nav-sub .submenu li a:hover { color: #fff !important; background: rgba(255,255,255,0.2); }
/* [ 3. 유틸리티 및 아이콘 ] */
.header-right-sub { display: flex; align-items: center; gap: 20px; font-size: 0.9rem; color: #fff; }
.sub-menu-toggle { display: none; cursor: pointer; font-size: 28px; }
.lang-wrap { display: flex; align-items: center; cursor: pointer; }

/* [ 4. 경로(Breadcrumb) 스타일 ] */
.sub-top-bar { max-width: 1400px; margin: 0 auto; padding: 0px 30px; }
.page-path-new { 
    text-align: right; 
    font-size: 0.9rem; 
    color: #666; 
    display: flex; 
    justify-content: flex-end; 
    align-items: center; 
    margin-bottom: 5px; 
}
.page-path-new a { color: #666; text-decoration: none; margin: 0 5px; }
.page-path-new span { color: #333; font-weight: bold; margin-left: 5px; }
.page-title-new { display: none; }

/* [ 공통: 모든 서브 페이지의 기본 여백 ] */
.sub-content-wrap {
    width: 100%; max-width: 1400px; margin: 0 auto; 
    padding: 150px 30px 60px; 
    box-sizing: border-box;
}

/* [인트로 페이지 배경 확장 설정] */
.intro-page {
    background: linear-gradient(rgba(245, 245, 245, 0.7), rgba(245, 245, 245, 0.7)), 
                url('/kr/assets/images/about/subbg_img1.png') no-repeat center top !important;
    background-size: cover !important;
    background-attachment: fixed !important; 
}
.intro-page .sub-content-wrap {
    background: none !important; 
    margin: 0 auto;
}

.history-page {
    background: linear-gradient(rgba(245, 245, 245, 0.7), rgba(245, 245, 245, 0.7)), 
                url('/kr/assets/images/about/subbg_img1.png') no-repeat center top !important;
    background-size: cover !important;
    background-attachment: fixed !important; 
}
.history-page .sub-content-wrap {
    background: none !important; 
    margin: 0 auto;
}

/* [ 프로덕트/채용 페이지 전용 ] */
.product-page .sub-content-wrap,
.careers-page .sub-content-wrap {
    background: #fff !important;
	padding-top: 80px !important; 
}

.sub-top-bar { 
    max-width: 1400px; 
    margin: 0 auto; 
    padding: 0 30px; 
    margin-bottom: 10px !important; 
}

.overview-container { display: flex; flex-direction: column; gap: 70px; padding: 20px 0 80px 0; max-width: 1000px; margin: 0 auto; }
.overview-row { display: flex; align-items: center; gap: 50px; }
.circle-badge {
    flex-shrink: 0; width: 170px; height: 170px; background-color: #3b4961; border-radius: 50%;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    color: #fff; box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
.badge-kor { font-size: 1.4rem; font-weight: bold; margin-bottom: 5px; }
.badge-eng { font-size: 1rem; color: #ccc; }
.text-content { flex: 1; }
.blue-title { color: #326ba8; font-size: 1.5rem; margin-bottom: 15px; font-weight: bold; }
.text-content p { color: #555; line-height: 1.7; font-size: 1.05rem; word-break: keep-all; }


/* ==========================================================
   [ 5. 모바일 반응형 설정 (992px 이하) - 햄버거 메뉴 및 서브메뉴 정렬 ]
   ========================================================== */
.mobile-only {
    display: none !important;
}

@media (max-width: 992px) {
    .header-right-sub a:not(.sub-menu-toggle) {
        display: none !important;
    }
	.mobile-only {
        display: block !important;
    }
    .sub-menu-toggle {
        display: block !important;
        color: #fff !important;
    }
    
    /* 모바일 전체 메뉴 박스: 우측 정렬 적용 */
    .gnb-nav-sub { 
        display: none !important; 
        position: absolute !important; 
        top: 117px !important; 
        left: 0 !important; 
        width: 100% !important; 
        background: rgba(0,0,0,0.95) !important; 
        padding: 30px 40px !important; 
        z-index: 999 !important;
        text-align: right !important;
    }
    
    .gnb-nav-sub.active { display: block !important; }
    
    .gnb-nav-sub > ul { 
        display: flex !important; 
        flex-direction: column !important; 
        align-items: flex-end !important; /* 우측 정렬 */
        gap: 25px !important; 
        padding: 0 !important; 
    }

    .gnb-nav-sub > ul > li {
        width: 100% !important;
        text-align: right !important;
        position: static !important; 
    }

    .gnb-nav-sub > ul > li > a {
        font-size: 1.2rem !important;
        display: inline-block !important;
    }

    /* 서브메뉴: 절대 위치 해제하여 겹침 없이 아래로 펼침 */
    .gnb-nav-sub .submenu { 
        display: block !important; 
        position: static !important; 
        background: none !important; 
        text-align: right !important; 
        padding-top: 8px !important; 
        padding-left: 0 !important; 
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        white-space: normal !important;
    }
    
    .gnb-nav-sub .submenu li {
        width: 100% !important;
        text-align: right !important;
        margin-bottom: 4px !important;
        white-space: normal !important;
    }

    .gnb-nav-sub .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-sub .submenu li a:hover {
        color: #fff !important;
        background: none !important;
    }
}


/* [ 6. 기타 컴포넌트 스타일 ] */
.text-content img {
    display: block;
    max-width: 100%; 
    height: auto;
    border-radius: 8px;  
}

/* 연혁 페이지 양쪽 배치 스타일 */
.history-container { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    padding: 60px 0; 
}
.history-title { 
    font-size: 2.2rem; 
    font-weight: bold; 
    margin-bottom: 60px; 
    color: #111; 
}

.timeline { 
    position: relative; 
    width: 100%; 
    max-width: 900px; 
    display: flex; 
    flex-direction: column; 
    gap: 50px; 
    margin: 0 auto; 
    padding: 40px 0;
}

.timeline::before { 
    content: ''; 
    position: absolute; 
    top: 0; 
    left: 50%; 
    width: 2px; 
    height: 100%; 
    background-color: #ccc; 
    transform: translateX(-50%); 
    z-index: 0; 
}

.timeline-item { 
    position: relative; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    width: 100%; 
}

.timeline-item .circle { 
    width: 30px; 
    height: 30px; 
    border-radius: 50%; 
    z-index: 1;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    flex-shrink: 0;
}

.timeline-item .left-content {
    position: absolute;
    right: calc(50% + 25px); 
    display: flex;
    align-items: center;
    gap: 15px;
    text-align: right;
    white-space: nowrap;
}

.timeline-item .right-content {
    position: absolute;
    left: calc(50% + 25px);
    display: flex;
    align-items: center;
    text-align: left;
    width: max-content; 
    white-space: nowrap; 
}

.timeline .desc { 
    color: #111; 
    font-weight: bold; 
    font-size: 1.1rem; 
}
.timeline .date { 
    color: #00bfff; 
    font-weight: bold; 
    font-size: 1.1rem; 
}
.timeline .sub-desc {
    color: #555;
    font-size: 0.95rem;
    line-height: 1.4;
}

@media (max-width: 768px) {
    .timeline::before { left: 20px; }
    .timeline-item { justify-content: flex-start; padding-left: 50px; }
    .timeline-item .circle { position: absolute; left: 6px; }
    .timeline-item .left-content, 
    .timeline-item .right-content {
        position: static;
        width: 100%;
        text-align: left;
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }
}

.fade-in {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}
.fade-in.active {
    opacity: 1;
    transform: translateY(0);
}

.location-container { max-width: 1000px; margin: 0 auto; padding: 50px 20px; display: flex; flex-direction: column; gap: 40px; }
.location-card { display: flex; gap: 30px; border: 1px solid #eee; padding: 20px; border-radius: 8px; align-items: flex-start; }
.location-img { width: 400px; flex-shrink: 0; }
.location-img img { width: 100%; border-radius: 5px; }
.location-info { display: flex; flex-direction: column; gap: 15px; }
.map-btn { display: inline-block; width: 120px; padding: 8px; border: 1px solid #ddd; text-align: center; font-size: 0.9rem; text-decoration: none; color: #333; }
.info-row { font-size: 1rem; line-height: 1.6; color: #555;}
.label { display: inline-block; width: 50px; padding: 2px 6px; font-size: 0.8rem; font-weight: bold; color: #fff; border-radius: 3px; margin-right: 10px; background-color: #333; text-align: center !important;}
.label.tel { background-color: #28a745;} 
.label.fax { background-color: #fd7e14;} 

@media (max-width: 768px) {
    .location-card { flex-direction: column; }
    .location-img { width: 100%; }
}

.talent-container { max-width: 1000px; margin: 50px auto; padding: 20px; }
.talent-group { display: flex; align-items: center; gap: 40px; margin-bottom: 80px; padding-bottom: 40px; border-bottom: 1px solid #eee; }
.people-page .sub-page-header { background-image: url('/kr/assets/images/careers/careers_banner.png') !important; }
.talent-main-box { width: 200px; height: 160px; border: 1px solid #ccc; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.talent-main-box h3 { font-size: 1.8rem; color: #1a237e; margin-bottom: 10px; }
.talent-details { flex: 1; display: flex; flex-direction: column; gap: 20px; }
.detail-item { display: flex; align-items: center; gap: 15px; font-size: 0.95rem; color: #333; }
.badge { padding: 5px 12px; color: #fff; font-weight: bold; border-radius: 2px; flex-shrink: 0; }
.badge.blue { background-color: #1a237e; }
.badge.gray { background-color: #333; }

@media (max-width: 768px) {
    .talent-group { flex-direction: column; text-align: center; }
    .talent-main-box { width: 100%; height: auto; padding: 20px; }
}

.job-list-table { width: 100%; border-collapse: collapse; margin-top: 20px; }
.job-list-table th { border-top: 2px solid #333; border-bottom: 1px solid #ccc; padding: 15px; background: #f9f9f9; }
.job-list-table td { border-bottom: 1px solid #eee; padding: 15px; text-align: center; }
.job-list-table .td-subject { text-align: left; }
.job-list-table .td-subject a { text-decoration: none; color: #333; font-weight: bold; }

/* [ 프로덕트 상세 레이아웃 완벽 격리 ] */
.product-detail-container { 
    display: flex !important; 
    flex-direction: row !important; 
    gap: 40px !important; 
    align-items: flex-end !important; 
    max-width: 1200px !important; 
    margin: 40px auto !important; 
    background: #fff !important; 
}
.product-img { 
    flex: 0 0 40% !important; 
    max-width: 40% !important;
    background: #fff !important; 
    padding: 0 !important; 
    display: flex !important; 
    align-items: flex-end !important; 
    justify-content: center !important;	
}
.product-img img { 
    max-width: 100% !important; 
    max-height: 100% !important; 
    object-fit: contain !important; 
}
.product-info { 
    flex: 0 0 55% !important; 
	color: #333 !important;
	justify-content: flex-end !important; 
}
.product-info .sub-title {
    font-weight: bold !important;
	flex-grow: 1 !important;
	font-size: 1rem !important;	
}
.product-info .spec-list li,
.product-info .spec-list li span,
.product-info .spec-list li .label,
.product-info .spec-list li .value {
    color: #333 !important; 
    background-color: transparent !important;
}
.tm-sup { vertical-align: super; font-size: 0.6em; font-weight: normal; }
.sub-rms {
    font-size: 0.7em !important;    
    vertical-align: baseline !important; 
    position: relative !important;
    top: 6px !important;            
    margin-left: 1px !important;    
    line-height: 1 !important;
}
.spec-list { color: #333 !important; }

.product-detail-container .spec-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border-top: 2px solid #333 !important;
    width: 100% !important;
}
.product-detail-container .spec-list li {
    display: flex !important;
    min-height: 50px !important;
    border-bottom: 1px solid #ddd !important;
    align-items: stretch !important; 
    margin: 0 !important;
    padding: 0 !important;
}
.product-detail-container .spec-list li .label {
    width: 180px !important;
    background-color: #f8f8f8 !important;
    color: #333 !important;
    font-weight: bold !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-right: 1px solid #ddd !important;
    flex-shrink: 0 !important;
	font-size: 1rem !important;
}
.product-detail-container .spec-list li .value {
    flex-grow: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 15px !important;
    color: #333 !important;
    font-weight: 500 !important;
}
.product-detail-container .spec-list li.rowspan-layout { min-height: 100px !important; }
.product-detail-container .spec-list li.rowspan-layout .value-wrapper { display: flex !important; flex-direction: column !important; flex-grow: 1 !important; }
.product-detail-container .spec-list li.rowspan-layout .value-row { display: flex !important; flex: 1 !important; width: 100% !important; border-bottom: 1px solid #ddd !important; }
.product-detail-container .spec-list li.rowspan-layout .value-row:last-child { border-bottom: none !important; }
.product-detail-container .spec-list li.rowspan-layout .value-row .col {
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 15px !important;
	font-weight: bold !important;
    color: #333 !important;
    border-right: 1px solid #ddd !important;
}
.product-detail-container .spec-list li.rowspan-layout .value-row .col:last-child { border-right: none !important; }

/* 모달 스타일 */
.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; }