/* ===== Dimode CMS Sticky 충돌 방지 (매우 중요) ===== */
/* sticky 동작을 막는 CMS 부모 태그들의 overflow 속성을 강제로 해제합니다. */
.page-content,
.dimode-theme,
.dimode-component,
.dimode-unit,
.dimode-sort,
.row,
.col-sm-12 {
    overflow: visible !important;
}

*:has(.history-layout) {
    overflow: visible !important;
}

/* ===== 연혁 페이지 – 2단 스크롤스파이 레이아웃 ===== */

/* 2단 컨테이너 */
.history-layout {
    display: flex;
    align-items: flex-start;
    gap: 0;
    max-width: 960px;
    margin: 0 auto;
    padding: 0 40px 80px;
}

/* ── 좌측: 마일스톤 내비게이션 (sticky) ── */
.history-nav {
    position: -webkit-sticky; /* 사파리 호환성 */
    position: sticky;
    top: 120px;
    width: 220px;
    flex-shrink: 0;
    padding-right: 40px;
    border-right: 1px solid #E6E6E6;
    
    /* ★ 추가됨: 메뉴바가 부모 높이만큼 늘어나는 것을 방지하여 sticky가 고장나지 않게 함 */
    align-self: flex-start;
    height: max-content;
}

/* 내부 트랙 (비례 스크롤용, JS가 translateY 제어) */
.history-nav__track {
    display: flex;
    flex-direction: column;
    will-change: transform;
    transition: transform 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.history-nav__item {
    display: block;
    width: 100%;
    padding: 12px 16px;
    margin-bottom: 2px;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    position: relative;
    transition: color 0.4s cubic-bezier(0.25, 0.1, 0.25, 1),
                background 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.history-nav__title {
    display: block;
    font-family: 'NanumSquare', sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.4em;
    color: #AAAAAA;
    word-break: keep-all;
    transition: color 0.4s cubic-bezier(0.25, 0.1, 0.25, 1),
                font-weight 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.history-nav__period {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: #CCCCCC;
    margin-top: 2px;
    transition: color 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* 스크롤 썸 (회색 트랙 위에서 비례 이동) */
.history-nav__thumb {
    position: absolute;
    right: -2px;
    top: 0;
    width: 3px;
    height: 40px;
    background: #1F1F1F;
    border-radius: 1.5px;
    transition: top 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
    z-index: 1;
}

/* 활성 상태 */

.history-nav__item.is-active .history-nav__title {
    color: #1F1F1F;
    font-weight: 700;
}

.history-nav__item.is-active .history-nav__period {
    color: #5F7E00;
}

/* 호버 */
.history-nav__item:not(.is-active):hover .history-nav__title {
    color: #666;
}

/* ── 우측: 타임라인 콘텐츠 ── */
.history-content {
    flex: 1;
    min-width: 0;
    padding-left: 48px;
}

/* 마일스톤 섹션 */
.history-section {
    padding-bottom: 64px;
    margin-bottom: 0;
}

.history-section:last-child {
    padding-bottom: 0;
}

.history-section__title {
    font-family: 'Noto Serif KR', serif;
    font-size: 24px;
    font-weight: 400;
    line-height: 1.5em;
    letter-spacing: -0.035em;
    color: #1F1F1F;
    margin-bottom: 32px;
    word-break: keep-all;
}

/* 연도 그룹 */
.history-year {
    position: relative;
    margin-bottom: 32px;
    padding-left: 28px;
}

.history-year:last-child {
    margin-bottom: 0;
}

.history-year::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 12px;
    bottom: -32px;               /* margin-bottom(32px) 구간까지 연장 → 연도 간 끊김 없음 */
    width: 1px;
    background: #E6E6E6;
}

.history-year:last-child::before {
    bottom: 0;                   /* 마지막 연도는 콘텐츠 끝까지만 */
}

.history-year__label {
    position: relative;
    font-family: 'Noto Serif KR', serif;
    font-size: 24px;
    font-weight: 400;
    color: #1F1F1F;
    line-height: 1;
    margin-bottom: 16px;
}

.history-year__label::before {
    content: '';
    position: absolute;
    left: -28px;
    top: 7px;
    width: 9px;
    height: 9px;
    background: #1F1F1F;
    border-radius: 50%;
}

/* 개별 연혁 아이템 */
.history-item {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #F5F5F5;
}

.history-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}

.history-item::before {
    content: '';
    position: absolute;
    left: -26px;                 /* 선 중앙(4.5px)에 도트 중앙 정렬: 28-26=2, 2+2.5=4.5 */
    top: 8px;
    width: 5px;
    height: 5px;
    background: #D9D9D9;
    border-radius: 50%;
}

/* 아이템 텍스트 */
.history-item__body {
    flex: 1;
    min-width: 0;
}

.history-item__date {
    font-family: 'NanumSquare', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #5F7E00;
    margin-bottom: 4px;
}

.history-item__text {
    font-family: 'NanumSquare', sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.75em;
    color: #1F1F1F;
    word-break: keep-all;
}

/* 아이템 이미지 */
.history-item__image {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

/* 프로필 사진: 가로 나열 */
.history-item__profiles {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* 행사 사진: 한 줄에 하나씩 */
.history-item__events {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.history-item__image--empty {
    display: none;
}

/* 공통 figure */
.history-photo {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.history-photo img {
    display: block;
    border-radius: 0;
}

.history-photo figcaption {
    font-family: 'NanumSquare', sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5em;
    letter-spacing: -0.03em;
    color: #888;
}

/* 프로필 사진: 고정 폭, 자동 높이 */
.history-photo--profile img {
    width: 120px;
    height: auto;
}

/* 가로형 행사사진: 고정 높이, 자동 폭 */
.history-photo--landscape img {
    width: 100%;
    height: auto;
}

/* 세로형 행사사진: 고정 폭, 자동 높이 */
.history-photo--portrait img {
    width: 300px;
    height: auto;
    object-fit: cover;
}

/* ===== 반응형 (태블릿 960px) ===== */
@media (max-width: 960px) {
    .history-layout {
        padding: 0 24px 60px;
    }

    .history-nav {
        width: 180px;
        padding-right: 24px;
    }

    .history-content {
        padding-left: 32px;
    }

    .history-nav__title {
        font-size: 14px;
    }

    .history-photo--landscape img {
        width: 100%;
        height: auto;
    }

    .history-photo--portrait img {
        width: 180px;
    }
}

/* ===== 반응형 (모바일 720px) ===== */
@media (max-width: 720px) {
    .history-layout {
        flex-direction: column;
        padding: 0 20px 48px;
    }

    /* 모바일: 마일스톤 내비 → 상단 수평 스크롤 */
    .history-nav {
        position: -webkit-sticky !important;
        position: sticky !important;
        top: 92px !important;
        width: 100%;
        padding-right: 0;
        border-right: none;
        border-bottom: 1px solid #E6E6E6;
        background: #fff;
        z-index: 10;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .history-nav::-webkit-scrollbar {
        display: none;
    }

    .history-nav__track {
        flex-direction: row;
        transform: none !important;
    }

    .history-nav__item {
        flex-shrink: 0;
        padding: 12px 16px;
        margin-bottom: 0;
        white-space: nowrap;
    }

    .history-nav__item::before {
        right: auto;
        left: 0;
        top: auto;
        bottom: -1px;
        width: 100%;
        height: 3px;
        transform: translateY(0) scaleX(0);
    }

    .history-nav__item.is-active::before {
        transform: translateY(0) scaleX(1);
    }

    .history-nav__period {
        display: none;
    }

    .history-content {
        padding-left: 0;
        padding-top: 24px;
    }

    .history-section__title {
        font-size: 20px;
    }

    .history-year {
        padding-left: 22px;
    }

    .history-year__label {
        font-size: 20px;
    }

    .history-year__label::before {
        left: -22px;
        top: 6px;
        width: 7px;
        height: 7px;
    }

    .history-year::before {
        left: 3px;
    }

    .history-item::before {
        left: -19px;
        width: 4px;
        height: 4px;
    }

    .history-item {
        flex-direction: column;
        gap: 10px;
    }

    .history-photo--landscape img {
        width: 100%;
        height: auto;
    }

    .history-photo--portrait img {
        width: 100%;
    }

    .history-item__text {
        font-size: 14px;
    }
}