@charset "utf-8";
.event-benefit-template {

    /* 더보기 */
    .benefit-accordion {
        .c-tab--3depth .c-tab__list {padding-bottom: 2px;}
        .c-custom-accordion__area--first{
            --header-height:calc(20 * var(--ratio));
        }
        .c-custom-accordion__area--fade {
            height: calc(87 * var(--ratio));

            &::after {
                height: calc(97 * var(--ratio));
                top: auto;
                bottom: calc(-45 * var(--ratio));
                background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) -3.09%, #FFF 56.54%);
            }
        }

        [data-accordion-toggle="true"] {
            &:has([data-tab-sticky="2depth"]) {
                [data-expand-scroll-dest], [data-expand-scroll-target] {
                    scroll-margin-top: calc(var(--header-height) + var(--sticky-main-switch-height) + var(--sticky-main-sticky-height) + calc(60 * var(--ratio)));
                }
            }
        }
    }
    /* // 더보기 */

    /* 링크 */
    .special-purchase-benefits {
        .special-purchase-benefits__linker {
            position: absolute;
        }
        .special-purchase-benefits__linker--01 {
            top: 72%;
            left: 1.6%;
            width: 28.1%;
            height: 24.1%;
        }
        .special-purchase-benefits__linker--02 {
            top: 72%;
            left: 36%;
            width: 28.1%;
            height: 24.1%;
        }
        .special-purchase-benefits__linker--03 {
            top: 72%;
            left: 70.33%;
            width: 28.1%;
            height: 24.1%;
        }
    }
    /* // 링크 */

    /* 슬라이드 */
    .tv-slide {

    }
    /* // 슬라이드 */

    /* 여백이 제품 가림 수정 */
    /* .c-tab--3depth {
        & .c-tab__inner {
            [data-tab-sticky="2depth"] & {
                padding: var(--spacing-group-connect) var(--spacing-standard-gutter);
                margin-bottom: calc(2 * var(--ratio));
            }
        }
        &[data-tab-sticky="2depth"] {
            margin-left: calc(-1 * var(--spacing-standard-gutter));
            margin-right: calc(-1 * var(--spacing-standard-gutter));
            background: #fff;
        }
    } */
    /* // 여백이 제품 가림 수정 */

    /* 개발창 모바일에서 스티키 레이아웃 잘림 현상 수정 */
    [data-tab-sticky="2depth"] {
    /*  position: sticky;
        top: calc(var(--header-height) + var(--sticky-main-switch-height) + var(--sticky-main-sticky-height)); */
        transform: translateZ(0);
        backface-visibility: hidden;
        will-change: transform;
    }
    /* 개발창 모바일에서 스티키 레이아웃 잘림 현상 수정 */

    /* ai 링크 */
    .ai-link {
        position: absolute;
        /* background: tomato;
        opacity: 0.5; */
    }
    .ai-linker-01 {
        width: calc(292 * var(--ratio));
        height: calc(40 * var(--ratio));
        top: 41.5%;
        left: 8%;
    }
    .ai-linker-02 {
        width: calc(292 * var(--ratio));
        height: calc(40 * var(--ratio));
        top: 58.5%;
        left: 8%;
    }
    .ai-linker-03 {
        width: calc(292 * var(--ratio));
        height: calc(40 * var(--ratio));
        top: 76%;
        left: 8%;
    }
    /* // ai 링크 */

    /* tv-slide (synced-tab-slider 너비 지정 + 슬라이드 이미지 위 영상 오버레이) */
    .tv-slide {
        .swiper-container {
            padding: 0;
        }
        .swiper-slide {
            width: calc(350 * var(--ratio));
        }

        /* 슬라이드 프레임: 이미지가 높이를 결정, 영상은 absolute로 올려롬 */
        /* .tv-slide__frame {
            position: relative;
            width: 100%;
        }
        .tv-slide__bg {
            display: block;
            width: 100%;
        }
        .tv-slide__bg img {
            display: block;
            width: 100%;
            height: auto;
        } */
        /* 영상 영역: 이미지 안의 화면 영역에 맞게 조정(top/left/width/height 그대로 넘겨서 워키) */
        .tv-slide__video {
            position: absolute;
            top: 0%;
            left: 0%;
            width: calc(350 * var(--ratio));
            height: calc(198 * var(--ratio));
            aspect-ratio: auto;
            background-size: cover;
            background-position: center;
        }
        .tv-slide__video .c-responsive-video__element {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: calc(13 * var(--ratio));
        }
    }
    /* // tv-slide */

    /* 툴팁 */
    .ranking-eyebrow-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-top: calc(10 * var(--ratio));
    }

    .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/2026/05/04_whisen_early_ssensale/images/icon_tooltip_notice_black.svg) no-repeat;
                background-size: contain;
                width: calc(14 * var(--ratio));
                height: calc(14 * var(--ratio));
                flex-shrink: 0;
            }
        }

        .c-tooltip__title {
            margin-bottom: calc(11 * var(--ratio));
        }

        .tooltip-box {
            top: calc(25 * var(--ratio));
        }

        @media screen and (max-width: 767px) {
            .tooltip-box {
                top: calc(140 * var(--ratio));
                left: calc(20 * var(--ratio));
            }
        }
    }
    /* 툴팁이 메인 메뉴를 가리는 문제 해결 : 메인 1뎁스(9) 보다 작게 처리 */
    .tooltip-box {
        z-index: 7;
    }
    /* // 툴팁이 메인 메뉴를 가리는 문제 해결 */

    /* // 툴팁 */

    /* 개별 수정 */
    .no-gap {
        row-gap: 0 !important;
    }

    .c-button__icon--arrow-right-white {
        width: calc(16 * var(--ratio));
        height: calc(16 * var(--ratio));
        background: url(/kr/event/promotions/images/icon-new-line-chevron-down-white.svg) no-repeat;
        background-size: contain;
        transform: rotate(270deg);
    }

    kakao-friend-coupon.l-article__inner {
        row-gap: 0;
        .c-title__main {
            display: none;
        }
    }

    .banner__liker--01 {
        position: absolute;
        top: 41%;
        left: 2.33%;
        width: 28.1%;
        height: 24.1%;
    }
    /* // 개별 수정 */
    .tv-products {
        .c-tab[data-tab-content="2depth-sticky-02"] {
            .c-tab__item:is(:nth-child(3), :nth-child(4), :nth-child(5)) {
                .c-tab__button {
                    letter-spacing: -0.06em;
                    padding: calc(13 * var(--ratio)) calc(5 * var(--ratio));
                }
            }
        }
    }
    
    .c-custom-accordion__btn-wrap:has([aria-expanded="true"]) {
        /* margin-top: calc(32 * var(--ratio)); */
    }
}