.event-benefit-template{
/* ================ */
/* 공통 영역 // */
/* ================ */
[data-tab-type="scroll"] + .c-tab__content > .c-tab__panel{
    flex-direction: column;
}
/* ================ */
/* // 공통 영역 */
/* ================ */



/* ================ */
/* 개별 영역 // */
/* ================ */
.c-custom-accordion__area--fade{
    height: calc(150 * var(--ratio));
    &::after{
        bottom: calc(-60 * var(--ratio));
        height: calc(140 * var(--ratio));
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) -3.09%, #FFF 56.54%);
    }
}
.guide-linker{
    position: absolute;
    bottom: 14%;
    left: 10%;
    width: 80%;
    height: 21%;
}
.benefits-linker{
    position: absolute;
    bottom: 5%;
    right: 6%;
    width: 88%;
    height: 8%;
}
.l-img-accordion-manager{
    position: relative;
    .tradein-notice-trigger{
        position: absolute;
        width: 40%;
        left: 30%;
        &[aria-expanded="false"]{
            bottom: 6%;
            height: 5%;
        }
        &[aria-expanded="true"]{
            bottom: 4.3%;
            height: 3%;
        }
    }
}
.more-benefit-view .c-swiper{
    .swiper-container{padding:0;}
}

.lineup-wrap{ 
    .c-swiper{
        .swiper-container .swiper-slide{width:calc(171 * var(--ratio));}
    }
}
#sticky-scroll-3depth-tab-content-02{
    margin-top:calc(-16 * var(--ratio));
}

/* ================ */
/* // 개별 영역 */
/* ================ */
}
/* 모달 딤 배경 영역 */
.ui_modal_dim {
    opacity: 0.2 !important;
}
/* // 모달 딤 배경 영역 */

/* 제휴카드 신청 가이드 팝업 */
#partner-card-guide-popup {
    box-sizing: border-box;
    width: 912px;
    max-width: 100vw;
    min-height: 0 !important;
    max-height: 90vh;
    padding: 40px 28px;
    border-radius: 20px;
    /* 팝업 자체는 스크롤시키지 않고 .partner-card-guide__cards 내부에서만 스크롤 */
    flex-direction: column;
    overflow: hidden;

    &[style*="display: block"] {
        display: flex !important;
    }

    @media (max-width: 767px) {
        max-height: none;
        height: 100vh;
        height: 100svh;
      	height: 100dvh;
        padding: 19px 20px 42px;
        border-radius: 0;
        box-shadow: none;
    }

    .partner-card-guide {
        --partner-card-guide-ink: #111111;
        --partner-card-guide-ink-strong: #101722;
        --partner-card-guide-muted: #666666;
        --partner-card-guide-accent: #fd312e;
        --partner-card-guide-card-bg: #f3f5f7;
        --partner-card-guide-badge-bg: #dee1e5;
        --partner-card-guide-badge-num: #8f9298;

        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        align-items: center;
        gap: 32px;
        min-height: 0;
        word-break: keep-all;
        overflow-wrap: break-word;

        @media (max-width: 767px) {
            gap: 20px;
            justify-content: flex-start;
        }
    }

    .partner-card-guide__title-area {
        display: flex;
        flex: 0 0 auto;
        flex-direction: column;
        align-items: center;
        align-self: stretch;
        gap: 32px;
        text-align: center;

        @media (max-width: 767px) {
            align-self: stretch;
            gap: 29px;
        }
    }

    .partner-card-guide__eyebrow {
        margin: 0;
        font-weight: 600;
        font-size: 16px;
        letter-spacing: -0.2px;
        color: var(--partner-card-guide-ink-strong);
        line-height: 22px;
    }

    /* 음수 마진으로 팝업 테두리까지 확장해 PC 전용 헤더 바로 사용 */
    .partner-card-guide__eyebrow--pc {
        display: flex;
        align-items: center;
        align-self: stretch;
        height: 72px;
        margin: -40px -28px 0;
        padding: 0 40px;
        box-sizing: border-box;
        text-align: left;
        border-bottom: 1px solid var(--00-Color-Usage-02-Body-Line, #EFF0F2);
        border-radius: 20px 20px 0 0;
        color: var(--00-color-usage-01-text-basic, #111);
        font-family: Pretendard;
        font-size: 20px;
        font-style: normal;
        line-height: 28px;
        letter-spacing: -0.4px;

        @media (max-width: 767px) {
            display: none;
        }
    }

    .partner-card-guide__eyebrow--mobile {
        display: none;

        @media (max-width: 767px) {
            display: block;
            align-self: flex-start;
            width: 100%;
            text-align: left;
        }
    }

    .partner-card-guide__headline {
        margin: 0;
        font-weight: 700;
        font-size: 22px;
        letter-spacing: -0.88px;
        color: #000;
        line-height: 1.4;
        white-space: nowrap;

        @media (max-width: 767px) {
            font-size: 24px;
            letter-spacing: -0.5px;
            white-space: normal;
        }

        span {
            @media (max-width: 767px) {
                display: block;
            }
        }
    }

    .partner-card-guide__cards {
        display: flex;
        flex: 1 1 auto;
        gap: 20px;
        width: 100%;
        /* 콘텐츠 원래 높이(PC 279px) 상한 : 뷰포트가 줄면 이 영역만 축소되면서 내부 스크롤 */
        max-height: 279px;
        min-height: 0;
        align-items: flex-start;
        justify-content: center;
        flex-wrap: nowrap;
        overflow-x: hidden; 
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;

        /* 두 카드를 하나의 회색 박스로 합치고 점선으로 구분 */
        @media (max-width: 767px) {
            justify-content: flex-start;
            flex-direction: column;
            gap: 0;
            max-height: 478px;
            background: var(--partner-card-guide-card-bg);
            border-radius: 16px;
        }
    }

    .partner-card-guide__card {
        flex: 1 1 406px;
        min-width: 0;
        max-width: 406px;
        /* 부모가 축소돼도 카드 배경은 원래 높이 유지 → 배경 잘림 방지, 넘치는 만큼 부모가 스크롤 */
        min-height: 279px;
        background: var(--partner-card-guide-card-bg);
        border-radius: 16px;
        padding: 22px 20px;
        box-sizing: border-box;

        @media (max-width: 767px) {
            position: relative;
            flex: none;
            width: 100%;
            max-width: none;
            min-height: 0;
            height: auto;
            background: transparent;
            border-radius: 0;
            padding: 22px 16px 20px;
        }

        &:nth-of-type(2) {
            @media (max-width: 767px) {
                padding: 20px 16px 22px;
            }
        }

        /* 카드 패딩(좌우 16px)만큼 안쪽으로 들어온 구분선 */
        & + &::before {
            @media (max-width: 767px) {
                content: "";
                position: absolute;
                top: 0;
                left: 16px;
                right: 16px;
                border-top: 1px dashed #d3d7dd;
            }
        }
    }

    .partner-card-guide__card-header {
        margin-bottom: 10px;
    }

    .partner-card-guide__card-head-row {
        display: flex;
        align-items: center;
        gap: 7px;
    }

    .partner-card-guide__icon {
        width: 20px;
        height: 20px;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .partner-card-guide__label {
        font-weight: 600;
        font-size: 16px;
        line-height: 22px;
        color: var(--partner-card-guide-ink);
        @media (max-width: 767px) {
            font-size: 17px;
            line-height: 20px;
        }
    }

    .partner-card-guide__card-subtitle {
        margin: 2px 0 0 27px;
        font-weight: 400;
        font-size: 14px;
        letter-spacing: -0.21px;
        color: var(--partner-card-guide-accent);
        line-height: 20px;
        @media (max-width: 767px) {
            font-weight: 500;
            font-size: 13px;
            letter-spacing: -0.195px;
            line-height: 140%;
        }
    }

    .partner-card-guide__steps {
        list-style: none;
        margin: 0;
        padding: 0;
        counter-reset: step;
    }

    .partner-card-guide__step {
        position: relative;
        padding-left: 28px;
        padding-bottom: 12px;

        &:last-child {
            padding-bottom: 0;
        }

        &::before {
            counter-increment: step;
            content: counter(step);
            position: absolute;
            left: 0;
            top: 0;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: var(--partner-card-guide-badge-bg);
            color: var(--partner-card-guide-badge-num);
            font-weight: 700;
            font-size: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* 스텝 배지를 잇는 연결선 */
        &:not(:last-child)::after {
            content: "";
            position: absolute;
            left: 9.5px;
            top: 20px;
            bottom: 0;
            width: 1px;
            background: var(--partner-card-guide-badge-bg);
        }
    }

    /* 개별 신청 카드만 PC에서 스텝 간격을 14px로 고정 (마지막 스텝 포함) */
    @media (min-width: 768px) {
        .partner-card-guide__card:nth-of-type(2) .partner-card-guide__step {
            padding-bottom: 14px;

            &:last-child {
                padding-bottom: 14px;
            }
        }
    }

    .partner-card-guide__step-text {
        margin: 0;
        font-weight: 400;
        font-size: 14px;
        color: var(--partner-card-guide-ink);
        line-height: 20px;
        @media (max-width: 767px) {
            font-weight: 500;
            letter-spacing: -0.21px;
            line-height: 1.4;
        }

        strong {
            font-weight: 400;

            @media (max-width: 767px) {
                font-weight: 700;
            }
        }
    }

    .partner-card-guide__subnotes {
        list-style: none;
        margin: 4px 0 0;
        padding: 0;
    }

    .partner-card-guide__break--pc {
        @media (max-width: 767px) {
            display: none;
        }
    }

    .partner-card-guide__subnote {
        position: relative;
        padding-left: 9px;
        font-weight: 400;
        font-size: 12px;
        color: var(--partner-card-guide-muted);
        line-height: 1.4;
        margin-top: 2px;
        margin-bottom: 2px;

        &::before {
            content: "";
            position: absolute;
            left: 0;
            top: 8px;
            width: 3px;
            height: 3px;
            border-radius: 50%;
            background: var(--partner-card-guide-muted);
        }
    }

    .partner-card-guide__close-btn {
        flex: 0 0 auto;
        margin-top: 8px;
        border: none;
        cursor: pointer;
        background: var(--partner-card-guide-ink);
        color: #fff;
        height: 48px;
        width: 148px;
        max-width: 100%;
        border-radius: 14px;
        font-family: inherit;
        font-weight: 500;
        font-size: 15px;
        letter-spacing: -0.2px;

        @media (max-width: 767px) {
            width: 100%;
            margin-top: 4px;
            font-size: 14px;
        }
    }

    .partner-card-guide__window-close-btn.btn-close {
        width: 30px;
        height: 30px;
        /* 72px 헤더 바 안에서 세로 중앙 정렬 */
        top: 21px;

        &::before {
            width: 30px;
            height: 30px;
            background-size: 30px;
        }

        @media (max-width: 767px) {
            width: 24px;
            height: 24px;
            top: 15px;

            &::before {
                width: 24px;
                height: 24px;
                background-size: 24px;
            }
        }
    }

}
/* // 제휴카드 신청 가이드 팝업 */

/* 대표 제휴카드 요약 팝업 */
#partner-card-summary-popup {
    box-sizing: border-box;
    width: 912px;
    max-width: 100vw;
    min-height: 0 !important;
    max-height: 90vh;
    padding: 40px 28px;
    border-radius: 20px;
    /* 팝업 자체는 스크롤시키지 않고 .partner-card-summary__table-scroll 내부에서만 스크롤 */
    flex-direction: column;
    overflow: hidden;

    /* vcui가 열릴 때만 inline style="display:block"을 주입 : 닫힌 상태(기본 display:none)는 그대로 두고 열렸을 때만 flex로 전환 */
    &[style*="display: block"] {
        display: flex !important;
    }

    @media (max-width: 767px) {
        max-height: none;
        height: 100vh;
        height: 100svh;
      	height: 100dvh;
        padding: 20px 0 42px;
        border-radius: 0;
        box-shadow: none;
    }

    .partner-card-summary {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        align-items: center;
        gap: 24px;
        min-height: 0;
        word-break: keep-all;
        overflow-wrap: break-word;

        @media (max-width: 767px) {
            align-items: stretch;
            gap: 20px;
        }
    }

    .partner-card-summary__eyebrow {
        display: none;
        flex: 0 0 auto;
        margin: 0;
        font-weight: 600;
        font-size: 16px;
        letter-spacing: -0.2px;
        color: #101722;

        @media (max-width: 767px) {
            display: block;
            padding: 0 20px;
        }
    }

    .partner-card-summary__head {
        display: flex;
        flex: 0 0 auto;
        flex-direction: column;
        align-items: center;
        align-self: stretch;
        gap: 5px;
        text-align: center;

        @media (min-width: 768px) {
            gap: 32px;
        }

        @media (max-width: 767px) {
            text-align: left;
            padding: 0 20px;
            margin-top: 9px;
        }
    }

    .partner-card-summary__kicker {
        display: flex;
        align-items: center;
        align-self: stretch;
        height: 72px;
        margin: -40px -28px 0;
        padding: 0 40px;
        box-sizing: border-box;
        text-align: left;
        border-bottom: 1px solid var(--00-Color-Usage-02-Body-Line, #EFF0F2);
        border-radius: 20px 20px 0 0;
        color: var(--00-color-usage-01-text-basic, #111);
        font-family: Pretendard;
        font-weight: 600;
        font-size: 20px;
        font-style: normal;
        line-height: 28px;
        letter-spacing: -0.4px;

        @media (max-width: 767px) {
            display: none;
        }
    }

    .partner-card-summary__title {
        margin-bottom: 8px;
        font-weight: 700;
        font-size: 22px;
        letter-spacing: -0.88px;
        color: #000;
        line-height: 1.4;
        white-space: nowrap;

        @media (max-width: 767px) {
            font-size: 24px;
            letter-spacing: -0.5px;
            white-space: normal;
            margin-bottom: 0;
        }
    }

    /* 가로 스크롤 컨테이너 : 실제 <table> 하나를 감싸므로 행 높이는 항상 자동으로 일치 */
    .partner-card-summary__table-scroll {
        position: relative;
        flex: 0 1 auto;
        width: 100%;
        max-width: 832px;
        /* 오늘 기준 테이블 높이(PC) 상한 : 뷰포트가 줄면 이 영역만 축소되면서 내부 스크롤 */
        max-height: 642px;
        min-height: 0;
        overflow-x: auto;
        overflow-y: auto;
        border: 1px solid #ddd;
        border-radius: 2px;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;

        @media (max-width: 767px) {
            max-width: 708px;
            max-height: 550px;
            border-left: none;
            border-right: none;
            border-radius: 0;
        }
    }

    .partner-card-summary__table {
        width: 100%;
        background: #fff;
        border-collapse: separate;
        border-spacing: 0;
        table-layout: fixed;
    }

    .partner-card-summary__col--label {
        width: 106px;
        @media (max-width: 767px) {
            width: 90px;
        }
    }

    .partner-card-summary__col--data-first {
        width: 143px;
        @media (max-width: 767px) {
            width: 130px;
        }
    }

    /* min-width 대신 고정 width 사용 : fixed 테이블에서 col의 min-width는 iOS Safari가 무시해 열이 찌그러짐 */
    .partner-card-summary__col--data {
        width: 143px;
        @media (max-width: 767px) {
            width: 120px;
        }
    }

    .partner-card-summary__cell {
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        padding: 16px 3px 16px 14px;
        font-weight: 400;
        text-align: left;
        vertical-align: middle;
        letter-spacing: -0.235px;
        @media (max-width: 767px) {
            padding: 14px 3px 14px 12px;
            letter-spacing: -0.2px;
        }
    }

    .partner-card-summary__table tbody tr:last-child > .partner-card-summary__cell {
        border-bottom: none;
    }

    .partner-card-summary__table thead tr > .partner-card-summary__cell {
        border-bottom: 1.175px solid rgba(0, 0, 0, 0.07);
    }

    .partner-card-summary__cell--col-first {
        padding-left: 15px;
        @media (max-width: 767px) {
            padding-left: 20px;
        }
    }

    .partner-card-summary__cell--label {
        /* position: sticky;
        left: 0;
        z-index: 2;
        box-shadow: 1px 0 0 rgba(0, 0, 0, 0.06); */
        background: #f3f5f7;
        text-align: center;
        font-size: 14px;
        color: #000;
        line-height: 1.5;
        padding: 0;
        @media (max-width: 767px) {
            font-size: 13px;
        }
    }

    .partner-card-summary__cell--label-head {
        background: #727780;
        color: #fff;
        font-weight: 500;
        line-height: 1.4;
    }

    .partner-card-summary__cell--label-rec {
        @media (min-width: 768px) {
            padding-top: 18px;
            padding-bottom: 18px;
        }
    }

    /* 카드 헤더 셀 : --pad-x 로 썸네일 좌측 여백 및 카드명 좌우 여백을 함께 제어 */
    .partner-card-summary__cell--card-head {
        --pad-x: 12px;
        background: #8f9298;
        padding: 28px 0 22px;
        @media (max-width: 767px) {
            padding: 24px 0 19px;
        }
    }

    .partner-card-summary__cell--card-head-first {
        --pad-x: 15px;
        @media (max-width: 767px) {
            --pad-x: 20px;
        }
    }

    .partner-card-summary__thumb {
        width: 84px;
        height: 53px;
        margin-left: var(--pad-x);
        border-radius: 4px;
        overflow: hidden;

        @media (max-width: 767px) {
            width: 72px;
            height: 44px;
        }

        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }
    }

    .partner-card-summary__card-name {
        width: 100%;
        padding: 0 var(--pad-x);
        text-align: left;
        margin-top: 14px;
        @media (max-width: 767px) {
            margin-top: 12px;
        }
    }

    .partner-card-summary__card-brand {
        font-size: 14px;
        font-weight: 500;
        color: #eff0f2;
        line-height: 1.4;
        margin: 0 0 2.35px;
        @media (max-width: 767px) {
            font-size: 12px;
            margin: 0 0 2px;
        }
    }

    .partner-card-summary__card-title {
        font-size: 14px;
        font-weight: 600;
        color: #fff;
        line-height: 1.3;
        margin: 0;
        white-space: nowrap;
        @media (max-width: 767px) {
            font-size: 13px;
        }
    }

    .partner-card-summary__cell--rec {
        color: #067f9d;
        font-size: 14px;
        line-height: 1.4;
        padding-top: 14px;
        padding-bottom: 18px;
        @media (max-width: 767px) {
            font-size: 13px;
            padding-top: 12px;
            padding-bottom: 16px;
        }

        p {
            margin: 0;
        }
    }

    .partner-card-summary__fee-row {
        display: flex;
        flex-direction: column;

        & + & {
            margin-top: 8px;

            @media (min-width: 768px) {
                margin-top: 10px;
            }
        }

        &:last-child {
            @media (min-width: 768px) {
                margin-bottom: 11px;
            }
        }
    }

    /* 행마다 항목 수가 달라 상단 기준으로 통일 */
    .partner-card-summary__cell--fee {
        vertical-align: top;
    }

    .partner-card-summary__fee-cap {
        font-size: 14px;
        color: #777;
        line-height: 1.4;
        @media (max-width: 767px) {
            font-size: 12px;
        }
    }

    .partner-card-summary__fee-amt {
        font-size: 14px;
        font-weight: 500;
        color: #111;
        line-height: 1.4;
    }

    .partner-card-summary__fee-amt--hot {
        color: #fd312e;
        font-weight: 600;
    }

    .partner-card-summary__cell--period {
        font-size: 14px;
        color: #000;
        line-height: 1.4;
        padding-top: 19px;
        padding-bottom: 19px;
        @media (max-width: 767px) {
            padding-top: 12px;
            padding-bottom: 12px;
        }
        p {
            margin: 0;
        }
    }

    /* 첫 데이터 열(2줄 표기)만 줄 사이 간격 확보 : 기본 3px, PC에서는 4.7px로 확대 */
    .partner-card-summary__cell--period.partner-card-summary__cell--col-first p + p {
        margin-top: 3px;
        @media (min-width: 768px) {
            margin-top: 4.7px;
        }
    }

    .partner-card-summary__cell--total {
        background: #f3f5f7;
    }

    /* '혜택 총액' 행의 라벨 셀 : --total 셀 앞에 오는 --label 셀 하나뿐이라 :has 로 특정 */
    .partner-card-summary__cell--label:has(+ .partner-card-summary__cell--total) {
        background: linear-gradient(0deg, rgba(0, 0, 0, 0.06) 0%, rgba(0, 0, 0, 0.06) 100%), #F3F5F7;
    }

    .partner-card-summary__cell--label small {
        font-size: 14px;
        color: #666;
        @media (max-width: 767px) {
            font-size: 12px;
        }
    }

    .partner-card-summary__total-sum {
        font-size: 14px;
        font-weight: 600;
        color: #067f9d;
        line-height: 1.4;
        margin: 0;
    }

    .partner-card-summary__total-per {
        font-size: 14px;
        color: #777;
        line-height: 1.4;
        margin: 0;
        @media (max-width: 767px) {
            font-size: 13px;
        }
    }

    .partner-card-summary__cell--annual {
        font-size: 14px;
        color: #000;
        line-height: 1.4;
        padding-top: 15.5px;
        padding-bottom: 15.5px;
        @media (max-width: 767px) {
            padding-top: 12px;
            padding-bottom: 12px;
        }
    }

    .partner-card-summary__link-all {
        flex: 0 0 auto;
        border: none;
        background: none;
        cursor: pointer;
        font-weight: 500;
        font-size: 16px;
        letter-spacing: -0.64px;
        line-height: 22px;
        color: #111;
        border-bottom: 1px solid #111;
        padding: 0 0 1px;

        @media (max-width: 767px) {
            display: block;
            align-self: center;
            margin-top: 4px;
        }
    }

    .partner-card-summary__close-btn {
        flex: 0 0 auto;
        border: none;
        cursor: pointer;
        background: #111;
        color: #fff;
        height: 48px;
        width: 124px;
        max-width: 100%;
        border-radius: 14px;
        font-family: inherit;
        font-weight: 500;
        font-size: 15px;
        letter-spacing: -0.2px;

        @media (max-width: 767px) {
            width: calc(100% - 40px);
            align-self: center;
            margin-top: 8px;
        }
    }

    .partner-card-summary__window-close-btn.btn-close {
        width: 30px;
        height: 30px;
        /* 72px 헤더 바 안에서 세로 중앙 정렬 */
        top: 21px;

        &::before {
            width: 30px;
            height: 30px;
            background-size: 30px;
        }

        @media (max-width: 767px) {
            width: 24px;
            height: 24px;
            top: 15px;

            &::before {
                width: 24px;
                height: 24px;
                background-size: 24px;
            }
        }
    }

}
/* // 대표 제휴카드 요약 팝업 */