@charset "UTF-8";

.event-benefit-template{
    .no-gap {
        row-gap: 0 !important;
    }

    /* 추천 제휴 카드 영역 슬라이드 */
    /* 슬라이드 좌우 패딩값 제거 */
    .j-recommend-card-swiper {
        .swiper-container {
            padding: 0;
        }
    }
    /* 첫 번째 탭 패널 활성화 시, CTA 버튼 상단 패딩 수정 */
    .recommend-card {
        #switch-tab-2depth-content-01 {
            > .c-tab__panel:first-of-type.active ~ .c-button {
                padding-top: calc(32 * var(--ratio));
            }
        }
    }
    /* // 추천 제휴 카드 영역 슬라이드 */

    /* 구독 추천 탭 영역 내 상단 배너 */
    .heading-banner {
        margin-top: calc(20 * var(--ratio));
    }
    /* // 구독 추천 탭 영역 내 상단 배너 */

    /* 아이콘 탭 */
    .c-tab--icon {
        .c-tab__list {
            gap: calc(20 * var(--ratio));
        }
        .c-tab__item {
            border: none;
            background-color: transparent;
            opacity: 1;
            &.active {
                background-color: transparent;
                opacity: 1;
                .c-tab__button {
                    color: inherit;
                }
                .icon-normal { display: none; }
                .icon-active { display: block; }
            }
        }
        .c-tab__button {
            flex-direction: column;
            gap: calc(4 * var(--ratio));
            padding: 0;
            color: inherit;
        }
        .c-tab__button img {
            width: calc(65 * var(--ratio));
            height: calc(65 * var(--ratio));
        }
        /* 아이콘에 c-lazy-media 적용 시 래퍼 크기를 기존 아이콘 크기로 고정 */
        .c-tab__button .c-lazy-media {
            width: calc(65 * var(--ratio));
            height: calc(65 * var(--ratio));
            max-width: none;
        }
        .c-tab__button .c-lazy-media__element {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }
        /* // 아이콘에 c-lazy-media 적용 시 래퍼 크기를 기존 아이콘 크기로 고정 */
        .icon-normal { display: block; }
        .icon-active { display: none; }
        .c-tab__button-text {
            font-size: calc(12 * 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 */

    /* YouTube 플레이어 */
    /* 크기 조절: --player-scale 값만 변경하면 됨 (1(2배수) = 100%, 0.7 = 70%) */
    .c-yt-player {
        --player-scale: 1;
        position: relative;
        display: block;
        margin: 0 auto;
        width: 100%;
        max-width: calc(var(--w) * 1px * var(--player-scale));
        aspect-ratio: var(--w) / var(--h);
        border-radius: calc(16 * var(--ratio));
        overflow: hidden;
    }
    .c-yt-player__thumb {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: 1;
        transition: opacity 0.3s;
    }
    .c-yt-player__iframe {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        border: none;
        visibility: hidden;
    }
    .c-yt-player__play-btn {
        position: absolute;
        top: 0;
        left: 0;
       /*  transform: translate(-50%, -50%); */
        z-index: 2;
        background: transparent;
        border: none;
        width: 100%;
        height: 100%;
        cursor: pointer;
    }
    .c-yt-player--playing .c-yt-player__iframe {
        visibility: visible;
    }
    .c-yt-player--playing .c-yt-player__thumb,
    .c-yt-player--playing .c-yt-player__play-btn {
        opacity: 0;
        pointer-events: none;
    }
    /* // YouTube 플레이어 */

    /* 혜택 영역 링크 */
    .special-purchase-benefits {
        .special-purchase-benefits__linker {
            position: absolute;
            width: 29.7%;
            height: 45.5%;

            &.special-purchase-benefits__linker--01 {
            top: 1.3%;
            left: 1.1%;
            }
            &.special-purchase-benefits__linker--02 {
                top: 1%;
                left: 35.28%;
            }
            &.special-purchase-benefits__linker--03 {
                top: 1%;
                left: 69.3%;
            }
            &.special-purchase-benefits__linker--04 {
                top: 53.6%;
                left: 1%;
            }
            &.special-purchase-benefits__linker--05 {
                top: 53.6%;
                left: 35.28%;
            }
            &.special-purchase-benefits__linker--06 {
                top: 53.6%;
                left: 69.4%;
            }
        }
    }
    /* // 혜택 영역 링크 */

    /* 툴팁 */
        .ranking-eyebrow-row {
            display: flex;
            justify-content: end;
            align-items: center;
        }
        .c-tooltip--ranking-basis {
            .tooltip-wrap {
                width: auto;
                height: auto;
            }
            .ui_tooltip-target {
                display: inline-flex;
                align-items: center;
                gap: calc(4 * var(--ratio));
                width: auto;
                height: auto;
                background-image: none;
                color: #111;
                font-size: calc(12 * var(--ratio));
                font-weight: 400;
                line-height: 1;
                letter-spacing: calc(-0.2 * var(--ratio));
                &::before {
                    content: '';
                    display: inline-block;
                    background: url(/kr/event_rental/2026/09/01_subscription_total_promotion/images/icon_tooltip_notice.svg) no-repeat;
                    background-size: contain;
                    width: calc(20 * var(--ratio));
                    height: calc(20 * var(--ratio));
                    flex-shrink: 0;
                }
            }
            .c-tooltip__line {
                background-image: linear-gradient(to right, var(--Gray-G30, #CACACA) 33.33%, rgba(255, 255, 255, 0) 0%);
                background-size: calc(6 * var(--ratio)) 1px;
            }
            .tooltip-box {
                top: calc(25 * var(--ratio));
                left: calc(-180 * var(--ratio));
                background: #F4F4F4;
                z-index: 8;
                /* pc-only는 br 요소에만 적용 */
                .pc-only:not(br) { display: revert; }
                br.pc-only { display: none; }
            }
            .c-list {
                margin: 0;
            }
            @media screen and (max-width: 767px) {
                .tooltip-box {
                    top: calc(40 * var(--ratio));
                    left: calc(20 * var(--ratio));
                }
            }
        }
    /* // 툴팁 */
    /* 0원~ 추천 툴팁 */
    .subscribe-recommend-appliance {
        .c-tooltip--ranking-basis {
            .ui_tooltip-target {
                &::before {
                    width: calc(14 * var(--ratio));
                    height: calc(14 * var(--ratio));
                }
            }
        }
        .c-tooltip {
            position: absolute;
            top: 25.2%;
            left: 61.6%;
        }
        .c-list {
            margin: 0;
        }
        @media screen and (max-width: 767px) {
            .tooltip-box {
                top: calc(20 * var(--ratio));
                left: calc(-200 * var(--ratio));
                br.pc-only { display: none; }
            }
        }
    }
    /* // 0원~ 추천 툴팁 */

    /* 2뎁스 위로 툴팁 박스 지나감 해결 */
    .c-tab--2depth-type01[data-tab-sticky="2depth"] {
        z-index: 9 !important;
    }
    /* // 2뎁스 위로 툴팁 박스 지나감 해결 */

    /* #region 한가위 세일, 0원~ 추천 가전 영역 */
    .subscribe-sale,
    .subscribe-recommend-appliance {
        width: 100%;
        .l-article__inner {
            row-gap: calc(4 * var(--ratio));
        }
        .c-tab__panel + .c-tab__panel {
            margin-top: calc(20 * var(--ratio));
        }
        .c-product {
            width: 100%;
        }
    }
    /* #endregion */

    /* AI Chat 영역 링크 */
    .ai__linker{
        position:absolute;
        width: 91.5%;
        height: 17.3%;
        left: 4.2%;
        &.ai__linker--01{
            top: 6.3%;
            height: 23%;
        }
        &.ai__linker--02{
            top: 35.3%;
        }
        &.ai__linker--03{
            top: 55.5%;
        }
        &.ai__linker--04{
            top: 76.3%;
        }
    } 
    /* // AI Chat 영역 링크 */

    /* 케어서비스 최하단 배너 링크 */
    .sale-event__linker {
        position: absolute;
        top: 43%;
        left: 5%;
        width: 30%;
        height: 29%;
    }
    /* // 케어서비스 최하단 배너 링크 */

    /* 베스트 랭킹 영역 */
    .best-ranking {
        width: 100%;
        .ranking-eyebrow {
            color: var(--00-color-usage-01-text-basic, #111);
            font-family: Pretendard;
            font-size: calc(17 * var(--ratio));
            font-style: normal;
            font-weight: 600;
            line-height: calc(24 * var(--ratio));
            letter-spacing: calc(-0.3 * var(--ratio));
            
        }
        .l-title__eyebrow--ranking {
            justify-content: end;
        }
        .tooltip-box {
            background-color: var(--lge-gray-g10);
        }
        .c-tooltip__line {
            background-image: linear-gradient(to right, var(--Gray-G30, #CACACA) 33.33%, rgba(255, 255, 255, 0) 0%);
            background-size: calc(6 * var(--ratio)) 1px;
        }
    }
    /* // 베스트 랭킹 영역 */

}