@charset "utf-8";


/* 작업용 */
/* a, button {
    background-color: #2d90217a !important;
} */
/* // 작업용 */

/*=================================*/
/* #region 전체 공통 커스텀 */
/*=================================*/

.event-benefit-template {

.c-product__list {
    display: block;
    height: 0;
}

}

.popup-wrap {
    max-width: 800px;

    .point-color {
        color:var(--primary-active-red); 
    }

    img {
        width: 100%;
    }

    .btn-close {
        top: calc(32 * var(--ratio));
        right: calc(28 * var(--ratio));
        width: calc(24 * var(--ratio));
        height: calc(24 * var(--ratio));
        background: url(/kr/event/2025/05/13_more_buy_more_save/resources/icon_close_btn.svg) no-repeat;
        background-size: contain;
        &::before {
            display: none;
        }
    }

    .relative-area {
        position: relative;
    }
    .hidden-pc {
        display: none;
    }

    .l-article {
        height: auto;
        max-height: 706px;
        padding-bottom: 0;
        overflow-y: auto;

        &::after {
            display: none;
        }
    }

    .l-article__inner {
        row-gap : calc(24 * var(--ratio));
    }

    .c-title__main {
        position: relative;
        font-size: calc(22 * var(--ratio));
        font-weight: 700;
        line-height: 140%;
        letter-spacing: -0.04em;
    }

    .c-title__sub-main {
        font-size: calc(18 * var(--ratio));
        font-weight: 600;
        line-height: 140%;
        letter-spacing: -0.03em;
    }

    .c-tab__item {
        &:first-child {
            margin-left: initial;
        }
    }
    .popup-wrap__custom-close-btn {
        display: flex;
        width: 310px;
        height: 48px;
        margin: 16px auto 0;
        justify-content: center;
        align-items: center;
        border-radius: 8px;
        border: 1px solid #111;
        color: #111;
        font-size: 14px;
        font-weight: 500;
        line-height: 20px;
        transition: background-color 0.3s ease;

        &:hover {
            background-color: #F4F4F4;
        }
    }

    @media (max-width: 767px) {
        .hidden-mo {
            display: none;
        }
        .hidden-pc {
            display: block;
        }

        .l-article {
            /* height: calc(100% - 62px);
            max-height: calc(100% - 62px); */
            max-height: 100vh;
            max-height: 100dvh;
        }
        .l-article__content {
            padding: 0;
        }

        .btn-close {
            top: calc(32 / 390 * 100vw);
            right: calc(28 / 390 * 100vw);
            width: calc(24 / 390 * 100vw);
            height: calc(24 / 390 * 100vw);
            &::before {
                width: calc(24 / 390 * 100vw);
                height: calc(24 / 390 * 100vw);
                background-size: contain;
            }
        }

        .popup-wrap__custom-close-btn {
            width: calc(310 / 390 * 100vw);
            height: calc(44 / 390 * 100vw);
            margin: calc(8 / 390 * 100vw) auto 0;
            border-radius: calc(8 / 390 * 100vw);
            font-size: calc(16 / 390 * 100vw);
            font-weight: 600;
            line-height: 113.638%;
            letter-spacing: calc(-0.34 / 390 * 100vw);
        }
    }
}

/* #region 우측 하단 플로팅 버튼 */
.reward-benefits__back-btn:focus-visible {
    outline: 3px solid #3b82f6;
    outline-offset: 2px;
}
.reward-benefits__back-btn {
    display: inline-flex;
    --ai-icon-top: 116px;
    --bottom-gap: 20px;
    position: fixed;
    right: 48px;
    bottom: calc(var(--ai-icon-top, 0px) + var(--bottom-gap, 0px));
    z-index: 110;
    width: 56px;
    height: 56px;
    justify-content: center;
    align-items: center;
    aspect-ratio: 1/1;
    color: #FFF;
    font-size: 14px;
    font-weight: 700;
    line-height: 100%;
    letter-spacing: -0.28px;
    border-radius: 200px;
    background: #111;
}
body:has(.btn-floating-wrap.scroll) .reward-benefits__back-btn {
    --ai-icon-top: 170px;
    --bottom-gap: 20px;
    bottom: calc(var(--ai-icon-top, 0px) + var(--bottom-gap, 0px));
}
@media screen and (width <= 767px) {
    /* 앱인 경우 */
    .reward-benefits__back-btn {
        --bottom-gap: 8px;
        --ai-icon-top: 160px;
        right: 14px;
        bottom: calc(var(--ai-icon-top, 0px) + var(--bottom-gap, 0px) + env(safe-area-inset-bottom));
        z-index: 97;
        width: 40px;
        height: 40px;
        font-size: 10px;
        letter-spacing: -0.4px;
    }
    body:has(.btn-floating-wrap.scroll) .reward-benefits__back-btn {
        --bottom-gap: 8px;
        --ai-icon-top: 210px;
        bottom: calc(var(--ai-icon-top, 0px) + var(--bottom-gap, 0px) + env(safe-area-inset-bottom));
    }
    /* // 앱인 경우 */

    /* 웹인 경우 */
    .mdevice:not(.app) .reward-benefits__back-btn {
        --bottom-gap: 8px;
        --ai-icon-top: 110px;
        --mobile-status-bar-height: 56px;
        bottom: calc(var(--mobile-status-bar-height, 0px) + var(--ai-icon-top, 0px) + var(--bottom-gap, 0px) + env(safe-area-inset-bottom));
    }

    .mdevice:not(.app) body:has(.btn-floating-wrap.scroll) .reward-benefits__back-btn {
        --ai-icon-top: 160px;
        --mobile-status-bar-height: 56px;
        --bottom-gap: 8px;
        bottom: calc(var(--mobile-status-bar-height, 0px) + var(--ai-icon-top, 0px) + var(--bottom-gap, 0px) + env(safe-area-inset-bottom));
    }
    /* // 웹인 경우 */
}
/* #endregion */

.c-coupon {
    .c-coupon__ico--red {
        background: url('/kr/event/promotions/images/icon-new-white-coupon.svg') center/calc(28 * var(--ratio)) no-repeat;
    }
}

/*=================================*/
/* #endregion
/*=================================*/


/*=================================*/
/* #region 개별 영역 처리 */
/*=================================*/

/* #region 모달 */
#multi-buy-benefit-modal-03 {
    .l-article__inner {
        row-gap: 0;
    }
    .c-tab--3depth-type01 {
        margin : calc(24 * var(--ratio)) 0 calc(12 * var(--ratio));
    }
    .c-title__sub-main {
        margin-bottom: calc(8 * var(--ratio)); 
    }
    .c-list--normal {
        margin-top: calc(4 * var(--ratio)); 
    }
}
/* #endregion */

.multi-buy-benefit {
    .multi-buy-benefit__btn {
        position: absolute;
    }
    .multi-buy-benefit__btn--01 {
        top: 25%;
        left: 1.8%;
        width: 46.2%;
        height: 22%;
    }
    .multi-buy-benefit__btn--02 {
        top: 25%;
        left: 52.8%;
        width: 46.2%;
        height: 22%;
    }
    .multi-buy-benefit__btn--03 {
        top: 78%;
        left: 1.5%;
        width: 29.2%;
        height: 21%;
    }
    .multi-buy-benefit__btn--04 {
        top: 78%;
        left: 35.5%;
        width: 29.2%;
        height: 21%;
    }
    .multi-buy-benefit__btn--05 {
        top: 78%;
        left: 69.5%;
        width: 29.2%;
        height: 21%;
    }
}

.best-multi-item-fit {

    .best-multi-item-fit__coupon-wrap {
        row-gap: calc(10 * var(--ratio));
        width: fit-content;
        margin: 0 calc(75 * var(--ratio));
    }

    .swiper-slide {
        /* width: calc(316 * var(--ratio)) !important; */
    }

    .best-multi-item-fit__link {
        position: absolute;
    }

    .best-multi-item-fit__link--01 {
        top: 84%;
        left: 5%;
        width: 90%;
        height: 12%;
    }

    .best-multi-item-fit__link--02{
        top: 49%;
        left: 19%;
        width: 32%;
        height: 6%;
    }

    .best-multi-item-fit__link--03{
        top: 49%;
        left: 66%;
        width: 32%;
        height: 6%;
    }

    .best-multi-item-fit__link--04{
        top: 62.4%;
        left: 19%;
        width: 32%;
        height: 6%;
    }
    .best-multi-item-fit__link--05{
        top: 62.4%;
        left: 66%;
        width: 32%;
        height: 6%;
    }
}

.check-more-next-tab {
    .check-more-next-tab__linker {
        position: absolute;
    }
    .check-more-next-tab__linker--01 {
        top: 0%;
        left: 5%;
        width: 90%;
        height: 47%;
    }
    .check-more-next-tab__linker--02 {
        top: 53%;
        left: 5%;
        width: 90%;
        height: 47%;
    }
}

.multi-faq {
    .l-article__content {
        width: 100%;
        max-width: 1146px;
        margin: 0 auto;
    }
}
/*=================================*/
/* // #endregion */
/*=================================*/