@charset "utf-8";

/* [1] 공통 레이아웃 - 중앙 정렬 강제 보정 */
#sub-page-container { width: 100%; overflow: hidden; text-align: center; }
.sub-visual { height: 400px; display: flex; align-items: center; justify-content: center; text-align: center; color: #fff; }

/* [2] 탭 메뉴 - 디자인 복구 및 스크롤바 제거 */
.sub-tab-nav { border-bottom: 1px solid #e2e2e2; background: #fff; width: 100%; position: relative; z-index: 50; }
.tab-list { 
    display: flex; 
    justify-content: center; 
    max-width: 1200px; 
    margin: 0 auto; 
    list-style: none; 
    padding: 0; 
    overflow-x: auto; 
    overflow-y: hidden; 
    white-space: nowrap; 
    -webkit-overflow-scrolling: touch; 
    scrollbar-width: none; 
    -ms-overflow-style: none;
}
.tab-list::-webkit-scrollbar { display: none; }

.tab-list li { flex: 0 0 auto; }
.tab-list li a { 
    display: block; 
    padding: 20px 25px; 
    font-size: 18px; 
    color: #999; 
    text-decoration: none; 
    position: relative; 
    transition: 0.3s;
    line-height: 1.5;
}
.tab-list li a.active { color: #102476; font-weight: 700; }
.tab-list li a.active::after { 
    content: ''; position: absolute; bottom: -1px; left: 0; width: 100%; height: 3px; background: #102476; 
}

/* [3] 상단 텍스트 및 정의 영역 */
.equipment-intro-section { padding-bottom: 50px; }
.content-header { padding: 80px 0 20px; width: 100%; text-align: center; }
.content-header .page-title { font-size: 36px; font-weight: 400; color: #000; margin-bottom: 15px; }
.content-header .page-title strong { font-weight: 700; }
.content-header .title-underline { width: 40px; height: 3px; background: #102476; margin: 0 auto; }

.section-top-header { margin-top: 50px; margin-bottom: 30px; }
.definition-container { text-align: center; margin: 0 auto 100px; max-width: 1000px; padding: 0 20px; }
.def-txt { font-size: 20px; color: #444; line-height: 1.8; font-weight: 500; display: inline-block; word-break: keep-all; }

/* [4] 슬라이더 및 이미지 카드 내 가두기 */
.equipment-slider-section { background: #f8f8f8; padding: 120px 0; }
.equipment-slider-wrap { position: relative; max-width: 1200px; margin: 0 auto; padding: 0 100px; }
.sub-equip-swiper { overflow: hidden !important; width: 100%; }

.sub-equip-swiper .swiper-slide { transition: all 0.4s; opacity: 0.3; transform: scale(0.8); }
.sub-equip-swiper .swiper-slide-active { opacity: 1; transform: scale(1); z-index: 10; }

/* 카드를 세로로 길게 설정 (PC 버전) */
.slide-item { 
    background: #fff; border: 1px solid #eee; border-radius: 15px; padding: 40px 30px; text-align: center; 
    box-shadow: 0 15px 35px rgba(0,0,0,0.05); 
    height: 420px; /* 카드 전체 높이 */
    display: flex; flex-direction: column; justify-content: center; align-items: center; 
}

.img-box { height: 240px; width: 100%; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; overflow: hidden; }
.img-box img { max-width: 85%; max-height: 100%; object-fit: contain; }

.equip-name { font-size: 20px; font-weight: 700; color: #222; margin-top: 15px; border-top: 1px solid #f0f0f0; padding-top: 20px; width: 100%; }

/* [5] 화살표 버튼 위치 고정 */
.sub-equip-prev, .sub-equip-next { color: #102476 !important; position: absolute; top: 50%; transform: translateY(-50%); z-index: 100; width: 50px !important; height: 50px !important; }
.sub-equip-prev { left: 30px; }
.sub-equip-next { right: 30px; }
.sub-equip-prev::after, .sub-equip-next::after { font-size: 30px !important; font-weight: 900; }

/* [6] 하단 설명 영역 - PC 버전 (3줄 고정) */
.selected-equip-desc { text-align: center; margin-top: 80px; width: 100%; }
.selected-equip-desc::before { content: ''; display: block; width: 1px; height: 60px; background: #ddd; margin: 0 auto 30px; }
.blue-tag { display: inline-block; background: #102476; color: #fff; padding: 10px 60px; font-size: 20px; font-weight: 700; margin-bottom: 25px; }

.desc-text { 
    font-size: 19px; color: #444; line-height: 1.7; 
    max-width: 550px; /* PC에서 자연스럽게 3줄 유도 */
    min-height: 5.1em; /* PC: 3줄 높이 강제 확보 */
    margin: 0 auto; font-weight: 500; word-break: keep-all; display: block;
}

/* [7] 공통 특징 영역 유지 */
.feature-section { padding: 100px 0; background: #fff; width: 100%; }
.feature-row { display: flex; align-items: center; justify-content: center; gap: 80px; max-width: 1200px; margin: 0 auto; }
.feature-row.reverse { flex-direction: row-reverse; }
.feature-img { flex: 0 0 320px; }
.feature-img img { width: 100%; border-radius: 50%; box-shadow: 0 20px 40px rgba(0,0,0,0.1); }
.feature-text { flex: 0 0 500px; text-align: left; }
.feature-text .num { font-size: 28px; font-weight: 900; color: #102476; margin-bottom: 15px; display: block; }
.feature-text h4 { font-size: 32px; font-weight: 800; color: #111; margin-bottom: 20px; }
.feature-text p { font-size: 18px; color: #555; line-height: 1.7; word-break: keep-all; }

/* [8] 반응형 모바일 최적화 (991px 이하) */
@media screen and (max-width: 991px) {
    .sub-visual { height: 250px; }
    .sub-visual .main-title { font-size: 30px; }

    /* 탭 메뉴: 가로 스크롤 모드 */
    .tab-list { justify-content: flex-start; padding: 0 20px; }
    .tab-list li a { font-size: 15px; padding: 15px 15px; }

    .content-header { padding: 50px 0 20px; }
    .content-header .page-title { font-size: 28px; }
    .definition-container { margin-bottom: 60px; }
    .def-txt { font-size: 16px; line-height: 1.6; }

    /* 모바일 슬라이더 최적화 */
    .equipment-slider-section { padding: 60px 0; }
    .equipment-slider-wrap { padding: 0 20px; }
    .sub-equip-prev, .sub-equip-next { display: none; } /* 모바일 화살표 숨김 */

    .slide-item { height: 320px; padding: 20px; } /* 모바일 카드 높이 축소 */
    .img-box { height: 160px; }
    .equip-name { font-size: 16px; padding-top: 10px; }

    .selected-equip-desc { margin-top: 40px; }
    .selected-equip-desc::before { height: 40px; margin-bottom: 20px; }
    .blue-tag { padding: 8px 40px; font-size: 16px; margin-bottom: 15px; }

    /* 모바일: 텍스트 높이 고정 해제 및 자연스러운 확장 */
    .desc-text { 
        font-size: 15px; line-height: 1.6; 
        min-height: auto; 
        height: auto; 
        padding: 0 15px; 
        max-width: 100%; /* 모바일은 너비 제한 해제 */
    }
    .desc-text br { display: none; } /* 모바일 강제 줄바꿈 무시 */

    /* 특징 섹션 세로 배치 */
    .feature-section { padding: 60px 0; }
    .feature-row, .feature-row.reverse { flex-direction: column; gap: 30px; text-align: center; }
    .feature-img { flex: 0 0 auto; width: 220px; }
    .feature-text { flex: 0 0 auto; width: 100%; text-align: center; }
    .feature-text h4 { font-size: 24px; margin-bottom: 15px; }
}