/* 공통 */




/* ================ */
/* 개별 영역 // */
/* ================ */
.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;
            }
        }
    }

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


.c-button__icon-right{
    transform: rotate(-90deg);
}

.c-custom-scrollbar.c-custom-scrollbar{
    padding: 0;
}

.c-tab--main-sticky{
    &.c-tab--1depth {
        .c-tab__item {
            .c-tab__button{
                padding: 0 calc(8*var(--ratio));
            }
        }
    }
}

.c-tab__inner{
    background-color: #fff;
}

.c-tab--3depth-type01 {
    .c-tab__inner {
        padding: calc(12 * var(--ratio)) 0 !important;
    }
}

.is-hidden-tab{
    display: none;
}



.l-article__banner{
    position: relative;
    .l-alrticle__banner-link{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
}


.shadow_box{
    box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.12);
    border-radius: calc(14 * var(--ratio));
}

.c-swiper.c-swiper {
    .swiper-container{
        padding: 0;
    }
}


.c-product__badge--coupon-discount{
    color: white;
    background-color: #e53935;
}

.video__box{
    overflow: hidden;
    border-radius: calc(16*var(--ratio));
}

.c-coupon--black {
    .c-coupon__benefit {
        color: #fff;
    }
}


.c-list--normal {
    margin-left: calc(5*var(--ratio))!important;
    & .c-list__item {
        &.c-list__item-noDot{
            padding-left: 0!important;
            &::before {
                display: none!important;
            }
        }
    }
}

/* 공통 */


/*******************************************/
/* 공통 헤딩배너/쿠폰타입/타이머타입 */
/*******************************************/

.event-benefit-template .c-product__badge--time-left{
	display: none;
}
.c-coupon {
    .c-coupon__ico--link {
        &.black-ico{
            background: url(/kr/event/promotions/images/icon-new-black-link.svg) center / calc(20 * var(--ratio)) no-repeat;
        }
    }
}

.l-article__banner-container{
    &.banner_txt_type01 {
        .l-article__banner-content{
            background-color: #EFE5C3;
            border-radius: calc(24 * var(--ratio)) calc(24 * var(--ratio)) 0px 0px;
            .l-article__banner-inner {
                min-height: calc(120 * var(--ratio));
                display: flex;
                align-items: center;
                .l-banner__title {
                    display: flex;
                    flex-direction: column;
                    gap: calc(2 * var(--ratio));
                    margin-left: calc(36 * var(--ratio));
                    .l-banner_title_desc {
                        font-size: calc(16 * var(--ratio));
                        font-weight: 600;
                        line-height: 1.4;
                        letter-spacing: -0.04em;
                        color: #9D0A09;
                    }
                    .l-banner_title_title {
                        font-size: calc(26 * var(--ratio));
                        font-weight: 700;
                        line-height: 1.4;
                        letter-spacing: -0.04em;
                        color: #262626;
                    }
                }
                .l-banner__ico {
                    width: calc(94*var(--ratio));
                    margin-left: auto;
                    margin-right: calc(20*var(--ratio));
                    img{
                        display: block;
                        width: 100%;
                    }
                }
            }
        }
    }
    
    &.banner_txt_type02 {
        .l-article__banner-content{
            background-color: #EFE5C3;
            border-radius: calc(24 * var(--ratio)) calc(24 * var(--ratio)) 0px 0px;
            height: calc(192 * var(--ratio));
            .l-article__banner-inner {
                padding-top: calc(12 * var(--ratio));
                .l-article__banner-inner-top{
                    display: flex;
                    flex-direction: row;
                    width: 100%;
                    padding-bottom: calc(12*var(--ratio));
                    .l-banner__title {
                        display: flex;
                        height: unset;
                        flex-direction: column;
                        gap: calc(2 * var(--ratio));
                        justify-content: center;
                        margin-left: calc(36 * var(--ratio));
                        min-width: 0;
                        .l-banner_title_desc {
                            font-size: calc(16 * var(--ratio));
                            font-weight: 600;
                            line-height: 1.4;
                            letter-spacing: -0.04em;
                            color: #9D0A09;
                        }
                        
                        .l-banner_title_title {
                            font-size: calc(26 * var(--ratio));
                            font-weight: 700;
                            line-height: 1.4;
                            letter-spacing: -0.04em;
                            color: #000;
                        }
                    }
                    .l-banner__ico {
                        width: calc(94*var(--ratio));
                        margin-left: auto;
                        margin-right: calc(20*var(--ratio));
                        img{
                            display: block;
                            width: 100%;
                        }
                    }
                }
                
                .c-timer {
                    max-width: calc(342 * var(--ratio));
                    flex: 0 0 100%;
                    margin-left: auto;
                    margin-right: auto;
                    margin-bottom: calc(32 * var(--ratio));
                }
            }
        }
        &.dark-mode{
            .l-article__banner-content {
                background-color: #000;
                .l-article__banner-inner {
                    .l-banner__title {
                        .l-banner_title_desc {
                    color: #FD312E;
                        }
                        .l-banner_title_title {
                            color: #fff;
                        }
                    }
                }
            }
        }
    }
}



.l-article__banner-container {
    &.banner_txt_type02 {
        .l-article__banner-content {
            .l-article__banner-inner {
                margin: 0 auto;
                padding-left: 0;
                padding-right: 0;
                display: flex;
                justify-content: space-between;
                align-items: center;
                flex-wrap: wrap;
                align-content: flex-start;
            }
        }
    }
}



.c-coupon__banner {
    background-color: #FD312E;
    mask-image: unset;
    height: calc(55 * var(--ratio));
    border-radius: calc(4 * var(--ratio));
    .c-coupon__benefit {
        width: auto;
        padding: 0 calc(21 * var(--ratio)) 0 calc(19 * var(--ratio));
    }
    
    .c-coupon__title {
        min-width: calc(222 * var(--ratio));
        margin: calc(15 * var(--ratio)) 0px;
    }
    
    .c-coupon__title-main {
        font-size: calc(14 * var(--ratio));
        color: var(--lge-gray-g00);
        line-height: 1;
    }
    
    .c-coupon__title-desc {
        color: var(--lge-gray-g00);
    }
    
    .c-coupon__button-box {
        width: calc(60 * var(--ratio));
    }
    
    .c-coupon__button-text {
        color: var(--lge-gray-g00);
    }
    
    .c-coupon__ico--coupon {
        background: url(/kr/event/promotions/images/icon-new-red-coupon.svg) center / calc(28 * var(--ratio)) no-repeat;
    }
}

.c-point__banner{
    background-color: #262626;
    mask-image: unset;
    height: calc(55 * var(--ratio));
    border-radius: calc(4 * var(--ratio));
    .c-coupon__benefit {
        width: auto;
        padding: 0 calc(20 * var(--ratio)) 0 calc(20 * var(--ratio));
    }
    
    .c-coupon__title {
        min-width: calc(222 * var(--ratio));
        margin: calc(15 * var(--ratio)) 0px;
    }
    
    .c-coupon__title-main {
        font-size: calc(14 * var(--ratio));
        color: var(--lge-gray-g00);
        line-height: 1;
    }
    
    .c-coupon__title-desc {
        color: var(--lge-gray-g00);
    }
    
    .c-coupon__button-box {
        width: calc(60 * var(--ratio));
    }
    
    .c-coupon__button-text {
        color: var(--lge-gray-g00);
    }
    .c-coupon__ico--point {
        width: calc(28 * var(--ratio));
        height: calc(28 * var(--ratio));
        background: url(/kr/event/2026/09/18_namdalge_sale_subs/images/ico_point_flat.svg) center / calc(28 * var(--ratio)) no-repeat;
    }
}


.c-timer {
    &.c-timer--type01 {
        color: #fff;
        font-weight: 500;
        font-size: calc(11 * var(--ratio));
        gap: calc(4 * var(--ratio));
        line-height: 1.4;
        background: url('/kr/event/promotions/images/ico_white_bg_timer.svg') left center/calc(16 * var(--ratio)) no-repeat;
        padding-left: calc(20 * var(--ratio));
    }
    &.c-timer--type02 {
        position: unset;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        color: #fff;
        font-weight: 800;
        background-color: #2B2B2B;
        font-size: calc(18 * var(--ratio));
        line-height: calc(20 * var(--ratio));
        left: calc(20 * var(--ratio));
        right: calc(20 * var(--ratio));
        bottom: calc(24 * var(--ratio));
        padding: calc(16 * var(--ratio)) calc(20 * var(--ratio));
        border-radius: calc(8 * var(--ratio));
        max-width: calc(350 * var(--ratio));
        width: 100%;
        height: auto;

        .c-timer__title {
            font-size: calc(15 * var(--ratio));
            font-weight: 600;
        }

        .c-timer__content-wrap {
            display: flex;
            gap: calc(8 * var(--ratio));

            .c-timer__icon {
                display: flex;
                width: calc(18 * var(--ratio));
                height: calc(18 * var(--ratio));
                background: url('/kr/event/promotions/images/ico_white_timer.svg') center/calc(18 * var(--ratio)) no-repeat;
                margin-top: calc(1 * var(--ratio));
            }

            .c-timer__content {
                display: flex;
                gap: calc(2 * var(--ratio));

                .c-timer__box {
                    display: flex;
                    flex-direction: row;
                    gap: calc(2 * var(--ratio));

                    &::after {
                        content: ':';
                        line-height: calc(16 * var(--ratio));
                    }

                    &:last-child {
                        &::after {
                            display: none;
                        }
                    }
                }
            }

            .c-timer__unit {
                font-size: 0;
                display: none;
            }
        }
    }
    &.c-timer--type03 {
        position: unset;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        color: #fff;
        font-weight: 800;
        background-color: #FD312E;
        font-size: calc(18 * var(--ratio));
        line-height: calc(20 * var(--ratio));
        left: calc(20 * var(--ratio));
        right: calc(20 * var(--ratio));
        bottom: calc(24 * var(--ratio));
        padding: calc(17 * var(--ratio)) calc(20 * var(--ratio));
        border-radius: calc(8 * var(--ratio));
        border: none;
        max-width: calc(350 * var(--ratio));
        width: 100%;
        height: auto;

        .c-timer__title {
            font-size: calc(14 * var(--ratio));
            font-weight: 600;
        }

        .c-timer__content-wrap {
            display: flex;
            gap: calc(6 * var(--ratio));

            .c-timer__icon {
                display: flex;
                width: calc(18 * var(--ratio));
                height: calc(18 * var(--ratio));
                background: url('/kr/event/promotions/images/ico_white_timer.svg') center/calc(18 * var(--ratio)) no-repeat;
                margin-top: calc(1 * var(--ratio));
            }

            .c-timer__content {
                display: flex;
                gap: calc(2 * var(--ratio));

                .c-timer__box {
                    display: flex;
                    flex-direction: row;
                    gap: calc(2 * var(--ratio));

                    &::after {
                        content: ':';
                        line-height: calc(20 * var(--ratio));
                    }

                    &:last-child {
                        &::after {
                            display: none;
                        }
                    }
                }
            }

            .c-timer__unit {
                font-size: 0;
                display: none;
            }
        }
    }

    &.c-timer--type04 {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        font-weight: 600;
        font-size: calc(14 * var(--ratio));
        line-height: calc(20 * var(--ratio));
        max-width: calc(350 * var(--ratio));
        width: 100%;
        height: calc(40 * var(--ratio));
        border-radius: calc(8 * var(--ratio));
        padding: calc(10 * var(--ratio)) calc(20 * var(--ratio));

        .c-timer__title {
            font-size: calc(14 * var(--ratio));
            font-weight: 600;
        }

        .c-timer__content-wrap {
            display: flex;
            gap: calc(4 * var(--ratio));

            .c-timer__icon {
                display: flex;
                width: calc(20 * var(--ratio));
                height: calc(20 * var(--ratio));
                background: url('/kr/event/promotions/images/ico_red_bg_timer.svg') center/calc(20 * var(--ratio)) no-repeat;
            }

            .c-timer__content {
                display: flex;
                gap: calc(2 * var(--ratio));

                .c-timer__box {
                    display: flex;
                    flex-direction: row;
                    gap: calc(1 * var(--ratio));

                    &::after {
                        content: ':';
                        line-height: calc(20 * var(--ratio));
                    }

                    &:last-child {
                        &::after {
                            display: none;
                        }
                    }
                }
            }

            .c-timer__unit {
                font-size: 0;
                display: none;
            }
        }
    }
    
}

/*******************************************/
/* 공통 헤딩배너/쿠폰타입/타이머타입 */
/*******************************************/







/* 혜택모음 */
.l-article-benefits{
    .l-article__content{
        .link_benefits_button{
            position: absolute;
            &.link_benefits_01{
                top: 0;
                left: 0;
                width: calc(111 * var(--ratio));
                height: calc(116 * var(--ratio));
            }
            &.link_benefits_02{
                top: 0;
                left: calc(120 * var(--ratio));
                width: calc(111 * var(--ratio));
                height: calc(116 * var(--ratio));
            }
            &.link_benefits_03{
                top: 0;
                right: 0;
                width: calc(111 * var(--ratio));
                height: calc(116 * var(--ratio));
            }
            &.link_benefits_04{
                top: calc(124 * var(--ratio));
                left: 0;
                width: calc(111 * var(--ratio));
                height: calc(116 * var(--ratio));
            }
            &.link_benefits_05{
                top: calc(124 * var(--ratio));
                left: calc(120 * var(--ratio));
                width: calc(111 * var(--ratio));
                height: calc(116 * var(--ratio));
            }
            &.link_benefits_06{
                top: calc(124 * var(--ratio));
                right: 0;
                width: calc(111 * var(--ratio));
                height: calc(116 * var(--ratio));
            }
        }
    }
}
/* // 혜택모음 */


/* 혜택 자세히 보기 */

.l-article-more-benefits{
    .c-title__flex{
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: calc(8 * var(--ratio));
        justify-content: center;
        .c-title--badge{
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: calc(4 * var(--ratio));
            font-size: calc(12 * var(--ratio));
            font-weight: 500;
            line-height: 1.4;
            color: #fff;
            background-color: #FD312E;
            padding: calc(2*var(--ratio)) calc(6*var(--ratio));
        }
    }
    .coupon-benefits-list{
        display: flex;
        flex-direction: column;
        row-gap: calc(10*var(--ratio));
    }
    .dark-mode{
        background-color: #000;
    }
    .c-img-accordion__trigger-btn{
        position: absolute;
        width: calc(320 * var(--ratio));
        height: calc(38 * var(--ratio));
        bottom: calc(122 * var(--ratio));
        left: calc(16 * var(--ratio));
    }
    .guide_link_button{
        position: absolute;
        width: calc(302 * var(--ratio));
        height: calc(44 * var(--ratio));
        bottom: calc(20 * var(--ratio));
        left: calc(24 * var(--ratio));
    }
    .l-alrticle__banner-link__big{
        position: absolute;
        top: 64%;
        left: 6%;
        width: 88%;
        height: 22%;
    }
}

/* // 혜택 자세히 보기 */


/* 첫 구독 SALE */
.l-article-first-subs{
    .j-img-swiper{
        .swiper-container{
            padding: 0;
        }
    }
}
/* // 첫 구독 SALE */




/* 제휴 혜택 */
.l-article-coalition{

    .c-swiper.c-swiper {
        .swiper-container{
            padding: 0;
            .swiper-button-disabled {
                pointer-events: unset!important;
                cursor: pointer!important;
                opacity: 1!important;
                display: block!important;
            }
            .button_coalition_link{
                position: absolute;
                bottom: 0;
                width: 100%;
                height: 14%;
            }
        }
        .swiper-pagination-bullets {
            width: 100%!important;
        }
        .swiper-navigation{
            width: 100%;
            max-width: calc(350*var(--ratio));
            height: calc(22*var(--ratio));
            position: absolute;
            & > button{
                position: absolute;
                display: block!important;
                opacity: 1;
                width: calc(22*var(--ratio));
                height: calc(22*var(--ratio));
                display: block!important;
                box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.12);
                border-radius: 100%;
                z-index: 2;
                &.swiper-navigation-button--prev{
                    background: url(/kr/event/2026/09/18_namdalge_sale_subs/images/ico_arrow_left.svg);
                    background-position: center;
                    background-size: cover;
                    transform:none!important;
                    top: calc(161*var(--ratio));
                    left: calc(-11*var(--ratio));;
                }
                &.swiper-navigation-button--next{
                    background: url(/kr/event/2026/09/18_namdalge_sale_subs/images/ico_arrow_right.svg);
                    background-position: center;
                    background-size: cover;
                    transform:none!important;
                    top: calc(161*var(--ratio));
                    right: calc(-11*var(--ratio));;
                }
            }
        }
    }
}

/* // 제휴 혜택 */





/* 구독 추천 > 선납할인 */
.l-article-early{
    .c-title{
        position: relative;
        .c-tooltip{
            position: absolute;
            top: 0;
            left: calc(196*var(--ratio));
        }
    }
}

    /* #region 전후 비교 슬라이드 */
    .c-compare-slider {
        position: relative;
        overflow: hidden;
        border-radius: calc(12 * var(--ratio));
        cursor: ew-resize;
        user-select: none;
        -webkit-user-select: none;
        touch-action: pan-y;
        --compare-pos: 50%;
    }
    /* After 이미지 (하단 레이어 - 컨테이너 높이 기준) */
    .c-compare-slider__img--after {
        display: block;
        width: 100%;
    }
    .c-compare-slider__img--after img {
        display: block;
        width: 100%;
        height: auto;
        pointer-events: none;
    }
    /* Before 이미지 (상단 레이어 - 왼쪽 영역만 노출) */
    .c-compare-slider__img--before {
        position: absolute;
        inset: 0;
        clip-path: inset(0 calc(100% - var(--compare-pos)) 0 0);
    }
    .c-compare-slider__img--before img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        pointer-events: none;
    }
    /* Before 어두운 오버레이 */
    .c-compare-slider__img--before::after {
        content: '';
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.35);
        pointer-events: none;
        z-index: 1;
    }
    /* 비교 슬라이더 내부 c-lazy-media 래퍼: 공통 max-width 무력화 + before 레이어 가득 채움 */
    .c-compare-slider__img .c-lazy-media {
        max-width: none;
        width: 100%;
    }
    .c-compare-slider__img--before .c-lazy-media {
        height: 100%;
    }
    /* 핸들 (수직선) */
    .c-compare-slider__handle {
        position: absolute;
        top: 0;
        bottom: 0;
        left: var(--compare-pos);
        transform: translateX(-50%);
        width: calc(2 * var(--ratio));
        display: flex;
        align-items: center;
        justify-content: center;
        pointer-events: none;
    }
    /* 드래그 버튼 (원형) */
    .c-compare-slider__btn {
        position: relative;
        z-index: 1;
        width: calc(41.562 * var(--ratio));
        height: calc(41.562 * var(--ratio));
        pointer-events: all;
        cursor: ew-resize;
        flex-shrink: 0;
        outline: none;
    }
    .c-compare-slider__btn svg,
    .c-compare-slider__btn img {
        width: calc(41 * var(--ratio));
        height: calc(41 * var(--ratio));
        display: block;
    }
    /* Before / After 라벨 */
    .c-compare-slider__label {
        position: absolute;
        top: calc(16 * var(--ratio));
        padding: calc(4 * var(--ratio)) calc(8 * var(--ratio));
        border-radius: calc(8 * var(--ratio));
        background: rgba(255, 255, 255, 0.60);
        color: var(--black, #000);
        text-align: center;
        font-family: Pretendard;
        font-size: calc(15.313 * var(--ratio));
        font-style: normal;
        font-weight: 500;
        line-height: 130%;
        letter-spacing: calc(-0.547 * var(--ratio));
        pointer-events: none;
        white-space: nowrap;
    }
    .c-compare-slider__label--before {
        left: calc(16 * var(--ratio));
    }
    .c-compare-slider__label--after {
        right: calc(16 * var(--ratio));
    }
    /* #endregion */