@charset "UTF-8";

.event-benefit-template{
    /* 아이콘 탭 */
    .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));
        }
        .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;
    }
    /* 핸들 (수직선) */
    .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.562 * var(--ratio));
        height: calc(41.563 * 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));
    }
    /* // 전후 비교 슬라이드 */

    /* 구독 Days 특별 혜택 버튼 위치 */
    .sub-days-perks .c-img-accordion__trigger-btn {
        top: 82%;
        left: 33%;
        width: 27%;
        height: 25%;
    }
    .sub-days-perks .c-img-accordion--open .c-img-accordion__trigger-btn {
        top: 20.5%;
        left: 35%;
        width: 25%;
        height: 6%;
    }
    /* // 구독 Days 특별 혜택 버튼 위치 */

    /* 툴팁 커스텀 */
    /* .appliance-care-guide {
        .c-tooltip:has(.tooltip-wrap) {
            display: inline-flex;
            align-items: center;
            vertical-align: middle;
            margin-top: calc(-3 * var(--ratio));
            padding-left: calc(5 * var(--ratio));
        }
        .c-tooltip .tooltip-wrap {
            width: calc(16 * var(--ratio));
            height: calc(16 * var(--ratio));
        }
        .c-tooltip .tooltip-wrap .ui_tooltip-target {
            opacity: 1;
            width: calc(16 * var(--ratio));
            height: calc(16 * var(--ratio));
        }
        .tooltip-wrap .btn-close {
            display: flex;
            align-items: center;
            justify-content: center;
            top: calc(10 * var(--ratio));
            right: calc(10 * var(--ratio));
        }
        .tooltip-wrap .btn-close::after {
            width: calc(16 * var(--ratio));
            height: calc(16 * var(--ratio));
            filter: invert(1);
        }
        .c-tooltip .tooltip-wrap .tooltip-box {
            padding: 0;
            top: calc(60 * var(--ratio));
            left: calc(50 * var(--ratio));
            max-width: calc(280 * var(--ratio));
        }
    } */
    /* // 툴팁 커스텀 */

    /* YouTube 플레이어 */
    /* 크기 조절: --player-scale 값만 변경하면 됨 (1(2배수) = 100%, 0.7 = 70%) */
    .c-yt-player {
        --player-scale: 0.7;
        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: 50%;
        left: 48.2%;
        transform: translate(-50%, -50%);
        z-index: 2;
        background: transparent;
        border: none;
        width: calc(65 * var(--ratio));
        height: calc(62.4 * var(--ratio));
        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 플레이어 */

    /* gray-mode */
    .gray-mode {
        background: #F4F4F4;
    }
    /* // gray-mode */

    /* 인스타그램 임베드 */
    /* 크기 조절: --insta-scale 값만 변경하면 됨 (1(2배수) = 100%, 0.7 = 70%) */
    .insta-wrap {
        --insta-scale: 0.7; /* 크기 조절: 이 값만 변경하면 너비·높이 모두 자동 적용 */
        width: calc(350 * var(--ratio) * var(--insta-scale));
        max-width: 100%;
        margin: 0 auto;
        /* 로드 전 swiper 높이 확보 — 인스타 릴스 원본 비율 350:621 기준 */
        min-height: calc(595 * var(--ratio) * var(--insta-scale));
    }
    .insta-wrap .instagram-media {
        width: 100% !important;
        min-width: 0 !important;
    }
    /* // 인스타그램 임베드 */

    /* 구독하기 제품 레이아웃 */
        .sub-product:first-child {
            padding-top: calc(32 * var(--ratio));
        }
        .sub-product {
            .l-article__inner {
                padding-top: calc(20 * var(--ratio));
                padding-bottom: calc(40 * var(--ratio));
            }
        }
    /* // 구독하기 제품 레이아웃 */

}