@charset "utf-8";
/* overview 스킨 전용 style */

/* 커튼: 인트로와 동일하게 상·하반 분리 후 위·아래로 이동 */
#overview-curtain.is-open .overview-curtain-top {
    transform: translateY(-100%);
}

#overview-curtain.is-open .overview-curtain-bottom {
    transform: translateY(100%);
}

#overview-curtain.overview-curtain--hidden {
    visibility: hidden;
    pointer-events: none;
}

/* 중앙 패널 → 클립 모핑. 인트로는 중앙(translate 0), is-step2부터 패널·클립 창 함께 100px 하강 */
.center-panel {
    transition: clip-path 1.5s cubic-bezier(0.76, 0, 0.24, 1),
        transform 1.5s cubic-bezier(0.76, 0, 0.24, 1);
    will-change: clip-path, transform;
    clip-path: inset(0% 0% 0% 0%);
    transform: translateY(0);
}

/* 모핑 후 가운데 이미지 노출 영역 (PC 시안 750×203px, 중앙 정렬) */
#overview-section-1 {
    --overview-clip-w: 750px;
    --overview-clip-h: 203px;
}

#overview-section-1.is-step2 .center-panel {
    clip-path: inset(30% 28% 30% 28%);
    transform: translateY(50px);
}

@media (min-width: 1024px) {
    #overview-section-1.is-step2 .center-panel {
        clip-path: inset(
            calc((100% - var(--overview-clip-h)) / 2)
            max(0px, calc((100% - var(--overview-clip-w)) / 2))
            calc((100% - var(--overview-clip-h)) / 2)
            max(0px, calc((100% - var(--overview-clip-w)) / 2))
        );
        transform: translateY(50px);
    }
}

.panel-img {
    transition: transform 1.5s cubic-bezier(0.76, 0, 0.24, 1);
    will-change: transform;
}

#overview-section-1.is-step2 .panel-img {
    transform: scale(0.4);
}

/* 텍스트 행: 인트로는 중앙, 모핑(is-step2) 후 패널과 동일하게 100px 하강 */
.overview-text-row {
    box-sizing: border-box;
    transform: translateY(0);
    transition: transform 1.5s cubic-bezier(0.76, 0, 0.24, 1);
}

#overview-section-1.is-step2 .overview-text-row {
    transform: translateY(50px);
}

/* 좌·우: 인트로와 최종 카피 겹침 (그리드 동일 셀) */
.overview-side-stack {
    position: relative;
    display: grid;
    grid-template-areas: "stack";
    align-items: center;
    justify-items: center;
}

.overview-side-stack > * {
    grid-area: stack;
    max-width: 100%;
}

.overview-phase-intro {
    position: relative;
    z-index: 2;
}

.overview-phase-final {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    visibility: hidden;
    pointer-events: none;
}

@media (min-width: 1024px) {
    .overview-side-stack--left {
        justify-items: start;
    }

    .overview-side-stack--left .overview-phase-final {
        align-items: flex-start;
    }

    .overview-side-stack--right {
        justify-items: end;
    }

    .overview-side-stack--right .overview-phase-final {
        align-items: flex-start;
    }
}

/* 최종 카피는 레이아웃이 벌어진 뒤에만 노출 (인트로 퇴장 중 좌우 이동 방지) */
#overview-section-1.is-step2-spread .overview-phase-final {
    visibility: visible;
}

/* 인트로: 흰색 (이미지 위) */
.overview-phase-intro p,
.overview-phase-intro span:not(.overview-ko-rule) {
    color: #ffffff;
}

.overview-phase-intro .overview-ko-rule {
    width: 36px;
    height: 1px;
    align-self: baseline;
    background-color: #ffffff;
}

#overview-section-1.is-step2 .overview-phase-intro {
    z-index: 1;
}

#overview-section-1.is-step2-spread .overview-phase-final {
    z-index: 3;
}

/* 최종(시안): 본문색 — 애니 전에는 안 보임 */
.overview-final-left p {
    color: #212121;
}

.overview-final-right p,
.overview-final-right span:not(.overview-ko-rule--final) {
    color: #212121;
}

.overview-ko-rule--final {
    width: 36px;
    height: 1px;
    align-self: baseline;
    background-color: #212121;
}

/* 하단 카피: 좌우 최종 텍스트 이후 지연 노출 */
.overview-bottom-copy {
    position: absolute;
    left: 50%;
    top: calc(50% + 205px);
    transform: translateX(-50%) !important;
    z-index: 4;
    opacity: 0;
    filter: blur(10px);
}

.overview-bottom-copy p {
    color: #212121;
}

/* 매직 스페이서 */
.magic-spacer {
    box-sizing: border-box;
    width: 1px;
    flex: 0 0 auto;
    transition: height 1.5s cubic-bezier(0.76, 0, 0.24, 1),
        min-height 1.5s cubic-bezier(0.76, 0, 0.24, 1),
        flex-grow 1.5s cubic-bezier(0.76, 0, 0.24, 1),
        flex-basis 1.5s cubic-bezier(0.76, 0, 0.24, 1);
}

@media (min-width: 1024px) {
    .magic-spacer {
        width: auto;
        height: 1px;
        flex-grow: 0;
        flex-shrink: 0;
        flex-basis: 4rem;
        min-width: 0;
    }

    @media (min-width: 1280px) {
        .magic-spacer {
            flex-basis: 6rem;
        }
    }

    /* PC 스프레드: 3열 그리드 고정(좌 텍스트 / 중앙 750px / 우 텍스트) */
    #overview-section-1.is-step2-spread .overview-text-row {
        display: grid;
        grid-template-columns: minmax(320px, 1fr) var(--overview-clip-w) minmax(320px, 1fr);
        align-items: center;
        column-gap: 1.75rem;
        justify-content: center;
    }

    #overview-section-1.is-step2-spread .overview-side-stack--left {
        width: 100%;
        max-width: 420px;
        justify-self: start;
    }

    #overview-section-1.is-step2-spread .overview-side-stack--right {
        width: 100%;
        max-width: 420px;
        justify-self: end;
    }

    #overview-section-1.is-step2-spread .magic-spacer {
        width: 100%;
        height: 1px;
        min-width: 0;
        overflow: hidden;
    }

    .overview-copy-left p,
    .overview-final-left p {
        white-space: nowrap;
    }
}

@media (max-width: 1023px) {
    /* LNB 위치 및 텍스트 콤팩트화 (오버랩 완벽 차단) */
    .overview-top-nav {
        top: 15% !important;
    }
    .overview-top-nav ul {
        gap: 0.75rem !important;
        font-size: 14px !important;
        flex-wrap: wrap;
        width: 100%;
        justify-content: center;
    }
    .overview-top-nav h2 {
        text-align: center;
        width: 100% !important;
        margin-bottom: 12px !important;
        font-size: 26px !important;
    }
    .overview-top-nav .font-vogue {
        display: block;
        text-align: center;
    }

    /* 이미지의 실제 비율을 PC처럼 가로로 길게(16:9 뷰) 맞춤 */
    #overview-section-1.is-step2 .panel-img {
        transform: scale(0.85); /* 0.4에서 0.85로 키워 가로 폭을 꽉 채움 */
    }

    /* 이미지가 가로로 넓어짐에 따라 마스킹(클립)도 가로 85% 비율에 완벽 일치시킴 */
    #overview-section-1.is-step2 .center-panel {
        clip-path: inset(42.5% 5% 42.5% 5%); /* 높이를 15%로 더 슬림하게 줄여 위아래 여백 최소화 */
        transform: translateY(6vh); /* 헤더를 피하기 위한 약한 하단 시프트 */
    }

    /* 텍스트 줄 간격을 맞춰주는 스페이서 */
    #overview-section-1.is-step2-spread .magic-spacer {
        width: 1px;
        height: 15vh; /* 이미지 높이(15%)에 딱 맞추면서 상하 간격을 타이트하게 조임 */
        flex: 0 0 auto;
    }

    /* 텍스트 컨테이너 높이를 맞춰 스페이서가 정확히 정중앙에 위치하게 함 */
    .overview-side-stack--left,
    .overview-side-stack--right {
        min-height: auto;
        padding-top: 10px;
        padding-bottom: 10px;
        width: 100%;
    }
    
    .overview-side-stack--left {
        align-items: end; /* 영문 카피: 가로형 이미지 바로 윗선 탑재 */
    }
    
    .overview-side-stack--right {
        align-items: start; /* 한글 카피: 가로형 이미지 바로 아랫선 탑재 */
    }

    /* 전체 행 위치 동기화 */
    #overview-section-1.is-step2 .overview-text-row {
        transform: translateY(6vh);
    }

    /* 모바일 텍스트 겹침 완화 */
    .overview-final-left p {
        font-size: 1.3rem !important; 
        line-height: 1.15;
        margin-top: 4px !important;
    }
}

/* === 블러 인 (인트로 + 최종 공통 키프레임) === */
@keyframes overviewBlurInUp {
    0% {
        filter: blur(16px);
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        filter: blur(0);
        opacity: 1;
        transform: translateY(0);
    }
}

/* === 블러 아웃 (인트로 퇴장: 이동 없이 블러+페이드만) === */
@keyframes overviewBlurOut {
    0% {
        filter: blur(0);
        opacity: 1;
    }
    100% {
        filter: blur(16px);
        opacity: 0;
    }
}

/* ----- 인트로 좌측 블러 인 ----- */
.overview-copy-left.blur-anim-target p {
    opacity: 0;
    filter: blur(16px);
    transform: translateY(20px);
    will-change: filter, opacity, transform;
}

.overview-hero--show-left:not(.intro-finished) .overview-copy-left.blur-anim-target p {
    animation-name: overviewBlurInUp;
    animation-duration: 1.2s;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
}

.overview-hero--show-left .overview-copy-left.blur-anim-target p:nth-child(1) {
    animation-delay: 0s;
}

.overview-hero--show-left .overview-copy-left.blur-anim-target p:nth-child(2) {
    animation-delay: 0.3s;
}

/* ----- 인트로 우측 블러 인 ----- */
.overview-copy-right.blur-anim-target p {
    opacity: 0;
    filter: blur(16px);
    transform: translateY(20px);
    will-change: filter, opacity, transform;
}

.overview-hero--show-right:not(.intro-finished) .overview-copy-right.blur-anim-target p {
    animation-name: overviewBlurInUp;
    animation-duration: 1.1s;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
}

/* 인트로 애니메이션이 끝난 후 강제로 고정하여 DOM 재렌더링 시 리플레이 방지 */
#overview-hero.intro-finished .overview-copy-left.blur-anim-target p,
#overview-hero.intro-finished .overview-copy-right.blur-anim-target p {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
}

.overview-hero--show-right .overview-copy-right.blur-anim-target p:nth-child(1) {
    animation-delay: 0s;
}

.overview-hero--show-right .overview-copy-right.blur-anim-target p:nth-child(2) {
    animation-delay: 0.3s;
}

.overview-hero--show-right .overview-copy-right.blur-anim-target p:nth-child(3) {
    animation-delay: 0.6s;
}

.overview-hero--show-right .overview-copy-right.blur-anim-target p:nth-child(4) {
    animation-delay: 0.9s;
}

/* ----- 스텝2: 인트로 역블러 아웃 ----- */
#overview-section-1.is-step2 .overview-phase-intro.blur-anim-target p {
    animation-name: overviewBlurOut;
    animation-duration: 0.85s;
    animation-timing-function: ease-in;
    animation-fill-mode: forwards;
}

#overview-section-1.is-step2 .overview-copy-left.blur-anim-target p:nth-child(1) {
    animation-delay: 0s;
}

#overview-section-1.is-step2 .overview-copy-left.blur-anim-target p:nth-child(2) {
    animation-delay: 0.08s;
}

#overview-section-1.is-step2 .overview-copy-right.blur-anim-target p:nth-child(1) {
    animation-delay: 0s;
}

#overview-section-1.is-step2 .overview-copy-right.blur-anim-target p:nth-child(2) {
    animation-delay: 0.06s;
}

#overview-section-1.is-step2 .overview-copy-right.blur-anim-target p:nth-child(3) {
    animation-delay: 0.12s;
}

#overview-section-1.is-step2 .overview-copy-right.blur-anim-target p:nth-child(4) {
    animation-delay: 0.18s;
}

/* ----- 스텝2: 최종 카피 블러 인 (살짝 늦게 등장) ----- */
.overview-phase-final.overview-final-left p,
.overview-phase-final.overview-final-right p {
    opacity: 0;
    filter: blur(16px);
    transform: translateY(16px);
    will-change: filter, opacity, transform;
}

#overview-section-1.is-step2-spread .overview-final-left p {
    animation-name: overviewBlurInUp;
    animation-duration: 1.05s;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
}

#overview-section-1.is-step2-spread .overview-final-left p:nth-child(1) {
    animation-delay: 0.08s;
}

#overview-section-1.is-step2-spread .overview-final-left p:nth-child(2) {
    animation-delay: 0.2s;
}

#overview-section-1.is-step2-spread .overview-final-left p:nth-child(3) {
    animation-delay: 0.32s;
}

#overview-section-1.is-step2-spread .overview-final-right p {
    animation-name: overviewBlurInUp;
    animation-duration: 1s;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
}

#overview-section-1.is-step2-spread .overview-final-right p:nth-child(1) {
    animation-delay: 0.12s;
}

#overview-section-1.is-step2-spread .overview-final-right p:nth-child(2) {
    animation-delay: 0.24s;
}

#overview-section-1.is-step2-spread .overview-final-right p:nth-child(3) {
    animation-delay: 0.36s;
}

#overview-section-1.is-step2-spread .overview-final-right p:nth-child(4) {
    animation-delay: 0.48s;
}

#overview-section-1.is-step2-spread .overview-bottom-copy {
    top: calc(50% + 305px);
    transition: top 1.5s cubic-bezier(0.76, 0, 0.24, 1);
    animation: overviewBlurInUp 0.9s ease-out 1.6s forwards;
}

@media (max-width: 1023px) {
    .overview-bottom-copy {
        top: calc(50% + 200px);
        width: calc(100% - 3rem);
    }

    /* 바텀 카피가 위쪽 한글 본문(프리미엄 등)과 겹치지 않게 화면 최하단으로 무조건 고정 */
    #overview-section-1.is-step2-spread .overview-bottom-copy {
        top: auto !important; 
        bottom: 3% !important; 
    }
}

/* ===== Section 2: 이미지 아코디언 (PC 시안: max 1680 × 높이 770, 간격 10px, 오른쪽 끝 정렬) ===== */
@keyframes overviewArcReveal {
    from {
        opacity: 0;
        transform: translate3d(0, 24px, 0) scale(0.985);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
}

#overview-section-2:not(.overview-section-2--arc-visible) .overview-arc-accordion {
    opacity: 0;
    transform: translate3d(0, 20px, 0);
    pointer-events: none;
}

#overview-section-2.overview-section-2--arc-visible .overview-arc-accordion {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition: opacity 0.65s ease, transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: auto;
}

#overview-section-2:not(.overview-section-2--arc-visible) .overview-arc-item {
    opacity: 0;
    transform: translate3d(20px, 0, 0);
}

#overview-section-2.overview-section-2--arc-visible .overview-arc-item {
    animation: overviewArcReveal 0.75s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

#overview-section-2.overview-section-2--arc-visible .overview-arc-item:nth-child(1) {
    animation-delay: 0.12s;
}

#overview-section-2.overview-section-2--arc-visible .overview-arc-item:nth-child(2) {
    animation-delay: 0.2s;
}

#overview-section-2.overview-section-2--arc-visible .overview-arc-item:nth-child(3) {
    animation-delay: 0.28s;
}

#overview-section-2.overview-section-2--arc-visible .overview-arc-item:nth-child(4) {
    animation-delay: 0.36s;
}

#overview-section-2.overview-section-2--arc-visible .overview-arc-item:nth-child(5) {
    animation-delay: 0.44s;
}

#overview-section-2.overview-section-2--arc-visible .overview-arc-item:nth-child(6) {
    animation-delay: 0.52s;
}

#overview-section-2.overview-section-2--arc-visible .overview-arc-item:nth-child(7) {
    animation-delay: 0.6s;
}

@media (prefers-reduced-motion: reduce) {
    #overview-section-2:not(.overview-section-2--arc-visible) .overview-arc-accordion,
    #overview-section-2:not(.overview-section-2--arc-visible) .overview-arc-item {
        opacity: 1;
        transform: none;
        pointer-events: auto;
    }

    #overview-section-2.overview-section-2--arc-visible .overview-arc-item {
        animation: none;
    }
}

.overview-arc-accordion {
    display: flex;
    align-items: stretch;
    max-width: 1680px;
    width: min(1680px, 100%);
    margin-left: 0;
    margin-right: 0;
    flex-shrink: 1;
    gap: 10px;
    height: 770px;
}

.overview-arc-item {
    position: relative;
    overflow: hidden;
    border-radius: 0;
    flex: 0.42;
    min-width: 0;
    cursor: pointer;
    transition: flex 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    opacity: 0;
    transform: translateY(30px);
}

#overview-section-2.is-animated .overview-arc-item {
    animation: arcFadeInUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

#overview-section-2.is-animated .overview-arc-item:nth-child(1) { animation-delay: 0.1s; }
#overview-section-2.is-animated .overview-arc-item:nth-child(2) { animation-delay: 0.2s; }
#overview-section-2.is-animated .overview-arc-item:nth-child(3) { animation-delay: 0.3s; }
#overview-section-2.is-animated .overview-arc-item:nth-child(4) { animation-delay: 0.4s; }
#overview-section-2.is-animated .overview-arc-item:nth-child(5) { animation-delay: 0.5s; }
#overview-section-2.is-animated .overview-arc-item:nth-child(6) { animation-delay: 0.6s; }
#overview-section-2.is-animated .overview-arc-item:nth-child(7) { animation-delay: 0.7s; }

@keyframes arcFadeInUp {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.overview-arc-item:focus {
    outline: none;
}

.overview-arc-item.is-active {
    flex: 5.2;
}

.overview-arc-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
    transform: scale(1.1);
    transition: filter 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.overview-arc-item:not(.is-active) .overview-arc-image {
    filter: brightness(0.6);
}

.overview-arc-item:hover:not(.is-active) .overview-arc-image {
    filter: brightness(0.8);
}

.overview-arc-item.is-active .overview-arc-image {
    transform: scale(1);
    filter: brightness(1);
}

@media (max-width: 1023px) {
    .overview-arc-wrap {
        padding-top: 5rem;
        padding-bottom: 5rem;
        justify-content: center;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .overview-arc-accordion {
        height: 60vh; /* 모바일 화면에 맞춰 높이 조절 */
        min-height: 360px;
        max-height: 500px;
        width: 100%;
        max-width: none;
        display: flex; /* PC와 동일하게 수평 아코디언 유지 */
        gap: 5px;
    }

    /* 모바일에서는 터치 영역을 그나마 확보하기 위해 비율을 약간 조정 */
    .overview-arc-item {
        flex: 1; /* 비활성 상태일 때의 기본 폭 비율 */
        border-radius: 2px; /* 살짝 둥글게 */
    }

    .overview-arc-item.is-active {
        flex: 8; /* 활성 상태일 때의 폭 배수 (모바일 뷰어 폭에 차지하는 비율) */
    }
}

/* ===== Section 3: 그리드 애니메이션 ===== */
.grid-fade-up {
    opacity: 0;
    transform: translateY(40px);
}

#overview-section-3.is-animated .grid-fade-up {
    animation: arcFadeInUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

#overview-section-3.is-animated .grid-fade-up.delay-100 { animation-delay: 0.1s; }
#overview-section-3.is-animated .grid-fade-up.delay-200 { animation-delay: 0.2s; }
#overview-section-3.is-animated .grid-fade-up.delay-300 { animation-delay: 0.3s; }
#overview-section-3.is-animated .grid-fade-up.delay-400 { animation-delay: 0.4s; }
#overview-section-3.is-animated .grid-fade-up.delay-500 { animation-delay: 0.5s; }
#overview-section-3.is-animated .grid-fade-up.delay-600 { animation-delay: 0.6s; }
#overview-section-3.is-animated .grid-fade-up.delay-700 { animation-delay: 0.7s; }
#overview-section-3.is-animated .grid-fade-up.delay-800 { animation-delay: 0.8s; }

/* ===== 상단 네비게이션 애니메이션 ===== */
.overview-nav-anim-target {
    opacity: 0;
    filter: blur(16px);
    transform: translateY(16px);
    will-change: filter, opacity, transform;
}
/* is-step2-spread (화면이 벌어지고 최종 텍스트가 나올 때) 같이 등장! */
#overview-section-1.is-step2-spread .overview-nav-anim-target {
    animation-name: overviewBlurInUp;
    animation-duration: 1s;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
    animation-delay: 0.1s;
}