@charset "UTF-8";

.event-benefit-template{
    /* 타이틀 교체 전에는 제목 영역만 숨기고, 완료 후 노출 */
    [data-scroll-destination="subscription-basic-benefits"] {
        > subscription-basic-benefits {
            .c-title.c-title--normal {
                visibility: hidden;
            }

            &[data-title-replaced-done="true"] {
                .c-title.c-title--normal {
                    visibility: visible;
                }
            }
        }
    }

    /* 아이콘 탭 */
    .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));
        }
    }
    /* // 아이콘 탭 */

    /*전후 비교 슬라이드 */
    .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));
    }
    /* // 전후 비교 슬라이드 */

    /* 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: 28.5%;
            height: 11.5%;
            &.special-purchase-benefits__linker--01 {
            top: 35%;
            left: 1.5%;
            }
            &.special-purchase-benefits__linker--02 {
                top: 35%;
                left: 35.88%;
            }
            &.special-purchase-benefits__linker--03 {
                top: 35%;
                left: 70.2%;
            }
            &.special-purchase-benefits__linker--04 {
                top: 86.6%;
                left: 1.5%;
            }
            &.special-purchase-benefits__linker--05 {
                top: 86.6%;
                left: 35.88%;
            }
            &.special-purchase-benefits__linker--06 {
                top: 86.6%;
                left: 70.2%;
            }
        }
    }
    /* // 혜택 영역 링크 */

    /* 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 영역 링크 */

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

    /* 베스트 랭킹 영역 */
    .best-ranking {
        .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));
            
        }
        /* 툴팁 */
        .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/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__line {
                background-image: linear-gradient(to right, #CACACA 33.33%, rgba(255, 255, 255, 0) 0%);
                background-size: calc(6 * var(--ratio)) calc(2 * var(--ratio));
            }
            .tooltip-box {
                top: calc(25 * var(--ratio));
                left: calc(-180 * var(--ratio));
                background: #F4F4F4;
                /* pc-only는 br 요소에만 적용 */
                .pc-only:not(br) { display: revert; }
                br.pc-only { display: none; }
            }
            @media screen and (max-width: 767px) {
                .tooltip-box {
                    top: calc(40 * var(--ratio));
                    left: calc(20 * var(--ratio));
                    z-index: 5;
                    br.pc-only { display: none; }
                }
            }
        }
        /* // 툴팁 */
    }
    /* // 베스트 랭킹 영역 */

}