@charset "utf-8";

/*-------------------------------------------------------------------
    파일정의 : 메인 스타일
-------------------------------------------------------------------*/
/* 공통 */
.main{-webkit-text-size-adjust: none !important;
    -moz-text-size-adjust: none !important;
    -ms-text-size-adjust: none !important;
    text-size-adjust: none !important;
}

.main [class^='sec']{}
.main [class^='sec'] .tit-sec{}

/* 섹션 */
.main {
    height: calc(100vh - var(--header-height));
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.main .history-swiper {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.main .history-swiper .container {
    position: relative;
    max-width: 128rem;
    width: 100%;
    margin: 0 auto;
}
.main .history-swiper .title-area {
    position: absolute;
    left: var(--container-gutter-x);
    top: 0;
    transform: translateY(-100%);
    padding-left: 2rem;
    height: 15.5rem;
    border-left: 0.1rem solid #000000;
}
.main .history-swiper .title-area .text-number,
.main .history-swiper .title-area .title-chapter {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 1s cubic-bezier(0.23, 1, 0.32, 1), transform 1s cubic-bezier(0.23, 1, 0.32, 1);
    will-change: opacity, transform;
}
.main .history-swiper .title-area .text-number {
    width: fit-content;
    border: 0.1rem solid #000000;
    border-radius: 0.5rem;
    padding: 0 1rem;
    line-height: 2.5rem;
    font-size: 1.4rem;
    font-weight: 700;
}
.main .history-swiper .title-area .title-chapter {
    margin-top: 1.2rem;
    font-size: 2.6rem;
    line-height: 1.347;
    font-weight: 700;
}
.main .history-swiper .title-area .text-number.active,
.main .history-swiper .title-area .title-chapter.active {
    opacity: 1;
    transform: translateY(0);
}
.main .history-swiper .year-display {
    position: absolute;
    top: 1.8rem;
    right: var(--container-gutter-x);
    z-index: 1;
    display: flex;
    font-size: 14rem; 
    color: var(--color-primary);
    /* 🔴 수정됨: 14rem 고정 대신 1em으로 변경 (글자가 커지면 박스 높이도 같이 커짐) */
    height: 1em; 
    line-height: 1;
    overflow: hidden; /* 여기서 잘라주더라도 높이가 1em이므로 글자는 온전히 보입니다 */
    transform: translateY(-100%);
    font-family: 'DreamscapeSans';
    text-align: center;
}

.main .history-swiper .year-display .digit-wrapper {
    position: relative;
    height: 1em;
    width: 0.6em;
    text-align: center;
    /* 🟢 추가됨: 각 숫자 칸 밖으로 벗어나는 긴 띠(strip)를 개별적으로 숨겨줍니다 */
    overflow: hidden; 
}

.main .history-swiper .year-display .digit-wrapper.static-char {
    display: flex;
    align-items: center;
    justify-content: center;
    /* 🟢 추가됨: 하이픈(-)이 잘리는 것을 방지 */
    overflow: visible; 
}

.main .history-swiper .year-display .digit-wrapper .digit-strip {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
}

.main .history-swiper .year-display .digit-wrapper .digit-strip div {
    height: 1em;
    /* 🟢 추가됨: 상하 여백을 완벽하게 제거하여 JS 계산 시 오차 방지 */
    line-height: 1; 
    display: flex;
    justify-content: center;
    align-items: center;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
}
.main .history-swiper .swiper {
    padding-top: 2rem;
    height: 52.739%;
}
.main .history-swiper .swiper .swiper-wrapper {
    height: 100%;
}
.main .history-swiper .swiper .swiper-wrapper .swiper-slide {
    width: auto;
}
.main .history-swiper .swiper .swiper-wrapper .swiper-slide img {
    height: 100%;
}
.main .history-swiper .swiper .custom-pagination-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2rem;
    background-color: #D9D9D9;
    z-index: 1;
}
.main .history-swiper .swiper .custom-pagination-container .custom-progressbar-fill {
    height: 100%;
    background: var(--color-primary);
    width: 0%;
    transition: width 0.3s ease-out;
    position: relative;
    z-index: 1;
}
.main .history-swiper .swiper .custom-pagination-container .tick-mark {
    position: absolute;
    bottom: 0;
    width: 0.1rem;
    height: 1rem;
    background-color: #fff;
    z-index: 1;
    pointer-events: none;
}
.main .history-swiper .swiper .deco-guide {
    position: absolute;
    top: 3.7rem;
    left: 8%;
    width: 9.3rem;
    height: 9.3rem;
    background: url('../img/main/deco_guide.svg') no-repeat center/100%;
    z-index: 2;
    animation: moveLeftRight 1.5s ease-in-out infinite;
}
@keyframes moveLeftRight {
    0% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(15px);
    }
    100% {
        transform: translateX(0);
    }
}

@media screen and (max-width: 1180px) {
    .main .history-swiper .container {
        flex: none;
        height: 38.888%;
        min-height: 35rem;
    }
    .main .history-swiper .title-area {
        top: 14.987%;
        left: 50%;
        transform: translateX(-50%);
        padding-left: 0;
        padding-bottom: 0;
        border-left: 0;
        width: 100%;
        height: auto;
    }
    .main .history-swiper .title-area .text-number {
        margin: 0 auto;
    }
    .main .history-swiper .title-area .title-chapter {
        text-align: center;
    }
    .main .history-swiper .year-display {
        top: auto;
        bottom: -1.5rem;
        transform: translateX(-50%);
        left: 50%;
        right: auto;
        font-size: 11.7rem;
        height: 1em;
    }
    .main .history-swiper .swiper {
        height: auto;
        flex: 1 0;
    }
}

@media screen and (max-width: 640px) {
    .main .history-swiper .container {
        height: 37.071%;
        min-height: 32.5rem;
    }
    
    .main .history-swiper .year-display {
        font-size: 15vw; 
        height: 1.4em; 
        bottom: -0.8rem;
        width: 90%;
    }

    .main .history-swiper .year-display .digit-wrapper {
        height: 1.4em; 
        width: 0.85em; 
    }

    .main .history-swiper .year-display .digit-wrapper .digit-strip div {
        height: 1.4em; 
        padding-top: 0.15em; 
    }

    .main .history-swiper .year-display .digit-wrapper.static-char {
        padding-top: 0.15em;
    }

    .main .history-swiper .title-area .title-chapter {
        font-size: 7vw; 
        line-height: 1.35;
        letter-spacing: -0.05em; 
    }
    
    .main .history-swiper .title-area .text-number {
        font-size: 4vw; 
        line-height: 2;
    }
}