@charset "utf-8";

/* ==========================================================================
   기본 레이아웃 및 서브 공통
   ========================================================================== */
#sub-page-container { width: 100%; overflow: hidden; }
.inner-container { max-width: 1200px; margin: 0 auto; padding: 0 20px; box-sizing: border-box; }

/* 상단 비주얼 */
.sub-visual { height: 400px; display: flex; align-items: center; justify-content: center; text-align: center; color: #fff; }
.sub-visual .en-title { font-size: 18px; font-weight: 300; letter-spacing: 2px; margin-bottom: 10px; opacity: 0.9; }
.sub-visual .main-title { font-size: 42px; font-weight: 700; letter-spacing: -1px; }

/* 서브 탭 메뉴 */
.sub-tab-nav { border-bottom: 1px solid #e2e2e2; background: #fff; }
.tab-list { display: flex; justify-content: center; list-style: none; padding: 0; margin: 0; }
.tab-list li { width: 180px; text-align: center; }
.tab-list li a { display: block; padding: 25px 0; font-size: 18px; color: #999; text-decoration: none; position: relative; transition: 0.3s; }
.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; }

/* 콘텐츠 헤더 */
.content-header { padding: 80px 0 50px; text-align: center; }
.content-header .page-title { font-size: 36px; font-weight: 700; color: #333; margin-bottom: 15px; }
.content-header .title-underline { width: 40px; height: 3px; background: #102476; margin: 0 auto; }


/* ==========================================================================
   4. 메인 인트로 (배경 이미지가 담긴 1200px 박스 영역)
   ========================================================================== */
.special-intro { padding: 40px 0; background: #fff; }
.intro-bg-area { overflow: hidden; }
.intro-overlay-box { padding: 120px 20px; text-align: center; }
.intro-main-copy { font-size: 34px; color: #102476; font-weight: 700; margin-bottom: 25px; letter-spacing: -1px; }
.v-line { width: 1px; height: 45px; background: #102476; margin: 0 auto 25px; opacity: 0.5; }
.intro-sub-copy { font-size: 20px; color: #333; line-height: 1.8; word-break: keep-all; font-weight: 500; }

/* ==========================================================================
   5. YEONHAP SPECIAL 리스트 (시안 최종 반영 버전)
   ========================================================================== */
.special-list-wrapper { padding: 80px 0; background: #fff; }
.special-item { padding: 30px 0; }
/* 이미지와 카드의 높이를 강제로 일치시킴 */
.item-flex { display: flex; align-items: stretch; justify-content: center; gap: 0; }
.item-flex.reverse { flex-direction: row-reverse; }
/* 이미지 박스 */
.item-img { flex: 0 0 580px; overflow: hidden; }
.item-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 텍스트 카드 디자인 수정 */
.item-text-card { flex: 0 0 520px; background: #fff; display: flex; flex-direction: column; /* [수정] 텍스트를 하단으로 배치하기 위해 flex-end 사용 */
    justify-content: flex-end; box-shadow: 20px 20px 50px rgba(0,0,0,0.06); /* [수정] 상단 파란색 라인 제거 */
    border-top: none; box-sizing: border-box; }
/* 내부 텍스트 여백 조절 */
.card-inner { padding: 60px 50px 40px 50px; /* 하단 여백을 충분히 주어 시안과 맞춤 */
}
/* 텍스트 요소들 */
.sub-num { display: block; font-size: 15px; color: #102476; margin-bottom: 15px; border-left: 3px solid #102476; padding-left: 12px; }
.sub-num strong { font-size: 22px; margin-left: 5px; font-weight: 800; }
.item-text-card h4 { font-size: 28px; color: #102476; font-weight: 900; margin-bottom: 20px; letter-spacing: -1px; }
.item-text-card p { font-size: 17px; color: #666; line-height: 1.7; word-break: keep-all; }

/* ==========================================================================
   반응형 모바일 (768px ~ 991px 미만)
   ========================================================================== */
@media screen and (max-width: 991px) {
    .sub-visual { height: 250px; }
    .sub-visual .main-title { font-size: 30px; }
    .tab-list li { width: 25%; }
    .tab-list li a { font-size: 14px; padding: 15px 0; }
    .content-header { padding: 50px 0 30px; }
    .content-header .page-title { font-size: 28px; }   
    .intro-overlay-box { padding: 60px 20px; }
    .intro-main-copy { font-size: 24px; }
    .intro-sub-copy { font-size: 16px; }

    .special-item { padding: 0px 0; }
    .item-flex, .item-flex.reverse { flex-direction: column; align-items: center; }
    .item-img { flex: 0 0 auto; width: 100%; height: 350px; }
    .item-text-card { flex: 0 0 auto; width: 100%; justify-content: flex-start; /* 모바일에서는 다시 상단 정렬 */}
    .card-inner { padding: 40px 25px; }
    .item-text-card h4 { font-size: 24px; }
}