@charset "utf-8";
 /* ================= 1. 헤리티지 타이틀 ================= */
.heritage-header {
    text-align: center;
    padding: 0px 0 100px;
}
.heritage-header .ht-title {
    font-size: 50px;  
    font-weight: 700;
    color: #111;
    margin-bottom: 40px;
}
.heritage-header .ht-subtitle {
    font-size: 30px;  
    font-weight: 300;
    color: #333;
    line-height: 1.4;
    letter-spacing: -1px;
}
.heritage-header .ht-subtitle span{ font-weight:700;}
/* ================= 2. 100% 풀와이드 배너 ================= */
.heritage-banner {
    width: 100%;
    height: 600px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 120px;
}
.heritage-banner .banner-bg {
    position: absolute; top:0; left:0; width:100%; height:100%;
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* 패럴랙스 효과로 공간감 부여 */
    z-index: 1;
}
.heritage-banner::after { /* 이미지 위 어두운 오버레이 */
    content: ''; position: absolute; top:0; left:0; width:100%; height:100%;
    background: rgba(0,0,0,0.5); z-index: 2;
}
.heritage-banner .banner-text {
    position: relative;
    z-index: 3;
    color: #fff;
    font-size: 32px;
    font-weight: 500;
    text-align: center;
    line-height: 1.5;
}

/* ================= 3. 연혁 타임라인 (Sticky + Scroll) ================= */
.heritage-timeline {
    padding-bottom: 100px;
}
.timeline-container {
    display: flex;
    gap: 80px;
    position: relative;
}

/* --- 좌측: Sticky 영역 --- */
.timeline-left {
    width: 45%;
}
.sticky-wrapper {
    position: sticky;
    top: 150px; /* 헤더 높이 등을 고려하여 화면 중앙쯤 걸치게 조절 */
    height: 600px; 
    position: -webkit-sticky;
}

/* 좌측 페이드 인/아웃 되는 개별 아이템들 */
.era-visual {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    opacity: 0; /* 기본적으로 숨김 */
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}
.era-visual.active {
    opacity: 1; /* 활성화될 때만 보임 (Fade 효과) */
    visibility: visible;
}
.era-visual img {
    max-width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: 15px;
    margin-bottom: 30px;
}
.era-visual h4 {
    font-size: 30px; font-weight: 300; color: #111; margin-bottom: 15px; line-height: 1.4;
}
.era-visual h4 strong { font-weight: 700; }
.era-visual p {
    font-size: 16px; color: #666; line-height: 1.6;
}

/* --- 우측: 스크롤 영역 --- */
.timeline-right {
    width: 55%;
    position: relative;
    padding-top: 50px;
    padding-bottom: 3vh; /* 마지막 항목이 화면 상단으로 올라갈 수 있도록 여백 확보 */
}
.timeline-line {
    position: absolute;
    top: 0; bottom: 0;
    left: 0;
    width: 1px;
    background-color: #ddd; /* 세로 가이드라인 */
}

/* 시대별 묶음 박스 */
.era-content {
    margin-bottom: 120px;
}
.year-group {
    position: relative;
    padding-left: 50px;
    margin-bottom: 60px;
}
/* 타임라인 포인트 (동그라미) */
.year-group::before {
    content: ''; position: absolute; top: 10px; left: -4px;
    width: 9px; height: 9px; border-radius: 50%;
    background-color: #a78864; /* 브라운 포인트 */
}
 

/* --- 좌측: Sticky 영역 --- */
.timeline-left {
    width: 50%;
    position: relative; /* 자식 요소의 기준점 */
}
.sticky-wrapper {
    position: sticky;
    top: 150px; 
    height: 700px; /* 좌측 컨텐츠가 들어갈 충분한 높이 확보 */
}

/* [핵심] 4개의 구역이 정확히 같은 위치에서 겹쳐지도록 absolute 처리 */
.era-visual {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s ease, visibility 0.6s ease; /* 자연스러운 Cross-fade */ 
}
.era-visual.active {
    opacity: 1;
    visibility: visible;
    z-index: 2; /* 활성화된 구역을 맨 위로 */
}

.era-visual img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: 15px;
    margin-bottom: 30px;
}
.era-visual .era-year {
    font-size: 30px; font-weight: 700; color: #111; margin-bottom: 10px;
}
.era-visual .era-tit {
    font-size: 42px; font-weight: 700; color: #111; margin-bottom: 20px;
}
.era-visual .era-desc {
    font-size: 20px; color: #666; line-height: 1.6;
}

/* --- 우측: 스크롤 영역 (기존과 동일하게 유지하되 간격 튜닝) --- */
.timeline-right {
    width: 55%;
    position: relative;
    padding-top: 50px;
    padding-bottom: 0vh; 
}
.timeline-line {
    position: absolute; top: 0; bottom: 0; left: 0;
    width: 1px; background-color: #ddd; 
}

/* 시대별 묶음 박스 */
.era-content {
    margin-bottom: 50px; /* 구역(1982, 2000 등) 간격을 넓혀 Fade 타이밍을 여유있게 확보 */
}
.year-group {
    position: relative; padding-left: 50px; margin-bottom: 60px;
}
.year-group::before {
    content: ''; position: absolute; top: 12px; left: -4px;
    width: 9px; height: 9px; border-radius: 50%; background-color: #a78864; 
}
.year-group h5 {
    font-size: 30px; font-weight: 700; color: #a78864; margin-bottom: 20px;
}
.year-group ul li {
    font-size: 20px; color: #444; margin-bottom: 15px; line-height: 1.5; display: flex;
}

.year-group ul li span{display:block;}
.year-group ul li .date {
    width:110px; font-weight: 700; color: #111; flex-shrink: 0;
}

.year-group ul li .inn{  }
.year-group ul li .inn p{  color:#8d6a4d; }