@charset "utf-8";

/* Main Visual Slider */
.mv-wrap {
    display: none; /* 숨김 처리 - 단일 배경 이미지로 대체 */
    position: relative;
    z-index: 0;
    padding: 55px 0;
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease 0.2s, transform 0.6s ease 0.2s;
}

/* Main Visual Single Background Image */
.mv-single {
    position: relative;
    z-index: 1;
    width: 100%;
    height: var(--mv-height, 600px);
    margin-top: calc(var(--header-height, 100px) * -1);
    background-image: url(../img/main_visual_bg.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: var(--color-primary); /* Fallback 배경색 */
}

.mv-single__content {
    position: absolute;
    top: 50%;
    left: max(var(--layout-screen-margin, 24px), calc(50% - (var(--layout-max-width, 1200px) / 2 + var(--layout-screen-margin, 24px))));
    right: max(var(--layout-screen-margin, 24px), calc(50% - (var(--layout-max-width, 1200px) / 2 + var(--layout-screen-margin, 24px))));
    transform: translateY(-50%);
    z-index: 10;
    text-align: center;
    max-width: calc(var(--layout-max-width, 1200px) + (var(--layout-screen-margin, 24px) * 2));
    padding: 0 var(--layout-screen-margin, 24px);
    box-sizing: border-box;
}

.mv-single__title {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--color-white);
    margin: 0 0 var(--gap-4, 16px) 0;
    text-shadow: 0 2px 8px rgba(0,0,0,0.3);
    line-height: 1.2;
}

.mv-single__subtitle {
    font-size: 1.25rem;
    font-weight: 400;
    color: rgba(255,255,255,0.9);
    margin: 0;
    text-shadow: 0 1px 4px rgba(0,0,0,0.3);
    line-height: 1.5;
    transition-delay: 0.2s;
}
.mv-wrap::before {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    top: 0;
    bottom: 0;
    background: #F9F9FA;
    z-index: -1;
}

.mv-wrap.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.mv-swiper {
    position: relative;
    border-radius: 32px;
    overflow: hidden;
    box-shadow: 28px 28px 50px #0D275016;
    box-sizing: border-box;
    border: none;
    width: 100%;
    max-width: 1200px;
    height: 560px;
    margin: 0 auto;
    background: #1F203B;
}

.mv-card {
    position: relative;
    display: block;
    height: 100%;
    color: #fff;
}

.mv-card__text {
    position: absolute;
    left: 48px;
    right: 48px;
    bottom: 96px;
    z-index: 1;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.mv-card__section {
    font-size: 15px;
    font-weight: 500;
    text-transform: uppercase;
}

.mv-card__title {
    font-size: 2.625rem;
    font-weight: 500;
    margin: 0;
}

.mv-card__summary {
    font-size: 1.125rem;
    font-weight: 400;
    margin-bottom: 14px;
}

.mv-card__cta a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 30px;
    border-radius: 999px;
    border: 1px solid #c5cad6;
    color: #ffffff;
    font-size: 13px;
    transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.mv-card__cta a:hover {
    background: #ffffff;
    color: #14203b;
}

.mv-card__image {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.mv-card__image a,
.mv-card__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mv-card__image::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(160deg, rgba(11, 25, 50, 0.2) 0%, rgba(10, 20, 40, 0.05) 35%, rgba(76, 44, 66, 0.35) 100%);
}

.mv-card__image--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f0f2f6;
    color: #8490a5;
    font-size: 15px;
}

.mv-card--empty .mv-card__text {
    justify-content: center;
    text-align: center;
}

/* Dock layout: left icons — center progress — right fraction */
.mv-dock { position:absolute; left:48px; right:48px; bottom:48px; display:flex; align-items:center; gap:14px; z-index:5; color:#fff; }
.mv-controls { display:flex; align-items:center; gap:12px; }
.mv-button { background:none; border:0; padding:0; width:auto; height:auto; color:#fff; opacity:0.9; }
.mv-button:hover { opacity:1; }
.mv-button--pause.is-paused { opacity:0.6; }
.mv-progress { flex:1; height:2px; margin:0 8px; background:rgba(255,255,255,.18); border-radius:2px; overflow:hidden; position:relative; }
.mv-progress__bar { position:absolute; left:0; top:0; bottom:0; width:100%; height:2px; background:rgba(255,255,255,.9); transform-origin:left center; transform:scaleX(0); transition:transform .1s linear; }
.mv-fraction { margin-left:auto; font-size:.875rem; opacity:.85; }

.mv-button__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-family: 'FontAwesome';
    font-size: 18px;
    line-height: 1;
    font-weight: normal;
    color: inherit;
}

.mv-button--prev .mv-button__icon::before {
    content: '\f104';
}

.mv-button--next .mv-button__icon::before {
    content: '\f105';
}

.mv-fraction {
    font-weight: 600;
    font-size: 15px;
    min-width: 70px;
    text-align: center;
}



/* CTA (자세히 보기) 페이드인 및 간격 */
.mv-card__summary { margin-bottom: 14px; }
.mv-card__cta a { opacity: 0; transform: translateY(14px); }
@keyframes mv-fade-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.swiper-slide-active .mv-card__cta a { animation: mv-fade-up .6s ease .25s both; }

/* Title & Summary fade-in (initial state + active trigger) */
.mv-card__title, .mv-card__summary { opacity: 0; transform: translateY(14px); }
.swiper-slide-active .mv-card__title { animation: mv-fade-up .6s ease .05s both; }
.swiper-slide-active .mv-card__summary { animation: mv-fade-up .6s ease .15s both; }

/* Swiper 미초기화 폴백: 텍스트/CTA/도크 강제 노출 */
.mv-swiper:not(.swiper-initialized) .mv-card__title,
.mv-swiper:not(.swiper-initialized) .mv-card__summary,
.mv-swiper:not(.swiper-initialized) .mv-card__cta a {
    opacity: 1;
    transform: none;
}
.mv-swiper:not(.swiper-initialized) .mv-dock { display: flex; }

@media (max-width: 1024px) {
    :root {
        --mv-height: 500px;
    }

    .mv-single__title {
        font-size: 2rem;
    }

    .mv-single__subtitle {
        font-size: 1rem;
    }

    .mv-wrap {
        padding: 55px 20px;
        transform: translateY(12px);
    }
    /* 헤더 고정(75px) 오프셋 반영 */
    .main-page .mv-wrap { padding-top: calc(55px + 75px); }
    /* 태블릿 높이: 500px 고정 */
    .mv-swiper { height: 500px; }

    .mv-card {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .mv-card__image {
        /* 절대배치 + inset:0로 컨테이너 전체를 덮도록 유지 (모바일에서도 높이 지정 금지) */
        order: 1;
    }

    .mv-card__text {
        left: 32px;
        right: 32px;
        bottom: 80px;
        padding: 0;
    }

    .mv-dock {
        position: absolute;
        left: 32px;
        right: 32px;
        bottom: 24px;
        width: auto;
        margin-bottom: 0;
    }

  
}

@media (max-width: 768px) {
    :root {
        --mv-height: 400px;
    }

    .mv-single__title {
        font-size: 1.75rem;
    }

    .mv-single__subtitle {
        font-size: 0.9375rem;
    }

    .mv-wrap {
        padding: 20px;
    }
    /* mv-dock을 슬라이드 내부 하단에 고정 */
    .mv-dock { position: absolute; left: 20px; right: 20px; bottom: 24px; }
    /* 스몰 태블릿 높이: 420px 고정 */
    .mv-swiper { height: 420px; }
    .mv-controls { gap:10px; }

    .mv-card__image { /* 높이 지정 제거: 컨테이너 전체 커버 */ }

    .mv-card__text {
        left: 20px;
        right: 20px;
        bottom: 72px;
        padding: 0;
        gap: 16px;
    }

    .mv-fraction {
        min-width: 64px;
        white-space: nowrap;
        font-size: 13px;
    }

    .mv-card__summary {
        font-size: 14px;
    }

    .mv-controls {
        gap: 8px;
        justify-content: center;
    }

    .mv-button {
        width: 38px;
        height: 38px;
    }
}

@media (max-width: 360px) {
    :root {
        --mv-height: 350px;
    }

    .mv-single__title {
        font-size: 1.5rem;
    }

    .mv-single__subtitle {
        font-size: 0.875rem;
    }

    .mv-wrap {
        padding: 16px;
    }
    /* 모바일(≤360) 높이: 360px 고정 */
    .mv-swiper { height: 360px; }

    .mv-card__image { /* 높이 지정 제거: 컨테이너 전체 커버 */ }

    .mv-card__text {
        left: 20px;
        right: 20px;
        bottom: 72px;
        padding: 0;
        gap: 16px;
    }

    .mv-card__title {
        font-size: 26px;
    }

    .mv-card__summary {
        font-size: 14px;
    }

    .mv-controls {
        gap: 8px;
        justify-content: center;
    }

    .mv-button {
        width: 38px;
        height: 38px;
    }
}