/* ========================= */
/* #region 공통 요소 */
/* ========================= */
/* c-chip */
.c-chip {
    display: flex;
    justify-content: center;
    width:fit-content;
    padding: calc(4 * var(--ratio)) calc(12 * var(--ratio));
    margin: 0 auto;
    align-items: center;
    gap: calc(4 * var(--ratio));
    border-radius:100px;
    background: var(--gray-white);

    .c-chip__title {
        color: var(--gray-black);
        font-size: calc(14 * var(--ratio));
        font-weight: 600;
        line-height: 140%;
        letter-spacing: -0.03em;
    }
    .c-chip__desc{
        color: var(--gray-g40);
        font-size: calc(14 * var(--ratio));
        font-weight: 500;
        line-height: 140%;
        letter-spacing: -0.03em;
    }
}
/* // c-chip */

/* Atomic CSS */
.u-center-text {
    text-align: center;
}
.bold {
    font-weight: 700 !important;
}
.c-text--red {
    color: #FD312E;
}
/* // Atomic CSS */

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

/* 적립 혜택 리스트 상세 페이지 플로팅 백버튼 */
.reward-benefits__back-btn.reward-benefits__back-btn {
    --ai-icon-top: 116px;
    --bottom-gap: 20px;

    display: none;
    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: 0;
    border-radius: 200px;
    background: #111;
    cursor: pointer;
}
body:has(.btn-floating-wrap.scroll) .reward-benefits__back-btn {
    --ai-icon-top: 188px;
    --bottom-gap: 20px;
    bottom: calc(var(--ai-icon-top, 0px) + var(--bottom-gap, 0px));
}
@media screen and (width <= 767px) {
   .reward-benefits__back-btn.reward-benefits__back-btn  {
        --bottom-gap: 8px;
        --ai-icon-top: 92px;
        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: 142px;
        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: 92px;
        --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: 142px;
        --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));
    }
}
/* // 적립 혜택 리스트 상세 페이지 플로팅 백버튼 */

/* 적립 혜택 목록 클릭 시 상세 노출 */
.reward-benefits {
    position: relative;
    .reward-benefits__list {
        display: flex;
        flex-direction: column;
        gap: calc(4 * var(--ratio));
        list-style: none;
    }
    .reward-benefits__item {
        list-style: none;
    }
    .reward-benefits__button {
        display: block;
        width: 100%;
        padding: 0;
        border: 0;
        background: transparent;
        cursor: pointer;
    }
    .reward-benefits__button img {
        display: block;
        width: 100%;
        height: auto;
    }
    .reward-benefits__panel {
        display: none;
    }
    .reward-benefits__panel img {
        display: block;
        width: 100%;
        height: auto;
    }
    &.is-detail-view {
        .reward-benefits__list {
            display: none;
        }
        .reward-benefits__panel.is-active {
            display: block;
        }
        .reward-benefits__back-btn {
            display: inline-flex;
        }
    }
}
/* // 적립 혜택 목록 클릭 시 상세 노출 */

.event-benefit-template {
    .main-kv {
        aspect-ratio: 780/414;
    }
    /* 링크 */
    .content-link {
        position: absolute;
    }
    .content-link--01-pc,
    .content-link--01-mo {
        width: 88%;
        height: 11.7%;
        top: 82%;
        left: 6%;
    }
    .content-link--01-pc {
        display: block;
    }
    .content-link--01-mo {
        display: none;
    }
    @media screen and (width <= 767px) {
        .content-link--01-pc {
            display: none;
        }
        .content-link--01-mo {
            display: block;
        }
    }
    .content-link--02 {
        width: 40%;
        height: 27.7%;
        top: 44%;
        left: 4%;
    }
    /* // 링크 */
    .affiliate-card-intro {
        .c-responsive-video {
            border-radius: calc(16 * var(--ratio));
            overflow: hidden;
        }
    }
    .affiliate-summary {
        .c-list {
            justify-content: center;
            flex-direction: row;
        }
    }
    .affiliate-card-discount-tier {
        .l-article__inner {
            row-gap: calc(8 * var(--ratio));
        }
    }

}