/* ========================= */
/* #region 파일 목적 */
/* ========================= */
/* 
gt.yang 2026.06.15 : 이벤트/혜택 > 라이브 > 라이브 상세 > 모바일 일원화 변환에 따른 공통 CSS 
*/
/* #endregion */



/* ========================= */
/* #region reset */
/* ========================= */
@font-face {
    font-family: 'Pretendard';
    font-weight: 900;
    font-display: swap;
    src: url(/kr/event/promotions/fonts/Pretendard-Black.subset.woff2) format('woff2');
}
@font-face {
    font-family: 'Pretendard';
    font-weight: 800;
    font-display: swap;
    src: url(/kr/event/promotions/fonts/Pretendard-ExtraBold.subset.woff2) format('woff2');
}
@font-face {
    font-family: 'Pretendard';
    font-weight: 700;
    font-display: swap;
    src: url(/kr/event/promotions/fonts/Pretendard-Bold.subset.woff2) format('woff2');
}
@font-face {
    font-family: 'Pretendard';
    font-weight: 600;
    font-display: swap;
    src: url(/kr/event/promotions/fonts/Pretendard-SemiBold.subset.woff2) format('woff2');
}
@font-face {
    font-family: 'Pretendard';
    font-weight: 500;
    font-display: swap;
    src: url(/kr/event/promotions/fonts/Pretendard-Medium.subset.woff2) format('woff2');
}
@font-face {
    font-family: 'Pretendard';
    font-weight: 300;
    font-display: swap;
    src: url(/kr/event/promotions/fonts/Pretendard-Light.subset.woff2) format('woff2');
}
@font-face {
    font-family: 'Pretendard';
    font-weight: 200;
    font-display: swap;
    src: url(/kr/event/promotions/fonts/Pretendard-ExtraLight.subset.woff2) format('woff2');
}
@font-face {
    font-family: 'Pretendard';
    font-weight: 100;
    font-display: swap;
    src: url(/kr/event/promotions/fonts/Pretendard-Thin.subset.woff2) format('woff2');
}

.event-benefit-template {
    max-width: var(--container-max-width);
    margin: 0 auto;
}
.event-benefit-template * {
    font-family: 'Pretendard', sans-serif;
}
.event-benefit-template picture {
    display: block;
}
.event-benefit-template img {
    width: 100%;
}
/* #endregion */

/* ========================= */
/* #region 전체 공통 변수 */
/* ========================= */
.event-benefit-template {
    --container-max-width: 780px;
    --design-base-width: 390; /* 모바일 디자인 기준 너비 */
    --fixed-vw: min(100vw, var(--container-max-width));
    --ratio: calc(var(--fixed-vw) / var(--design-base-width));

    --gray-black: #000;
    --gray-g40: #262626;
    --gray-g30: #777;
    --gray-g20: #cacaca;
    --gray-g10: #f4f4f4;
    --gray-white: #fff;

    --warm-gray-30: #bfb8ae;
    --warm-gray-20: #e3e0dc;
    --warm-gray-10: #f1efec;

    --spacing-standard-gutter: calc(20 * var(--ratio));
}
/* #endregion */

/* ========================= */
/* #region Layout */
/* ========================= */
.l-section {
    .l-section__inner {
        display: flex;
        flex-direction: column;
        position: relative;
        width: 100%;
        padding: 0;
        row-gap: 0;
    }

    .l-section__inner--mo-gutter,
    .u-mo-gutter {
        padding-right: var(--spacing-standard-gutter);
        padding-left: var(--spacing-standard-gutter);
    }

    .l-section__content-wrap {
        display: flex;
        flex-direction: column;
        width: 100%;
        row-gap: var(--spacing-standard-gutter);
    }

    .l-section__content {
        position:relative;
        display: flex;
        width: 100%;
        flex-direction: column;
        row-gap: 0;
    }

    .l-section__box {
        position: relative;
        display: flex;
        flex-direction: column;
        width: 100%;
        row-gap: 0;
    }

    .u-mo-gutter {
        padding-right: var(--spacing-standard-gutter);
        padding-left: var(--spacing-standard-gutter);

        .c-title {
            margin-right: 0;
            margin-left: 0;
        }
        .c-list {
            margin-right: 0;
            margin-left: 0;
        }
        .c-product__list {
            margin-right: 0;
            margin-left: 0;
        }
        .c-tab__list {
            padding-right: 0;
            padding-left: 0;
        }
    }
}
/* #endregion */

/* ========================= */
/* #region 버튼 */
/* ========================= */
.c-button--text {
    .c-button__inner {
        text-align: center;
    }
    .c-button__label {
        position: relative;
        color: var(--primary-black);
        font-size: calc(12 * var(--ratio));
        font-weight: 500;
        line-height: 140%;
        letter-spacing: -0.04em;

        .dark-mode & {
            color: var(--lge-gray-g00);
        }

        &::after {
            content: '';
            position: absolute;
            top: 50%;
            right: 0;
            transform: translateY(-50%);
            transform-origin: center;
            transition: transform 0.3s;
        }
    }
}
.c-button--text-arrow-down {
    .c-button__label {
        padding-right: calc(18 * var(--ratio));
        &::after {
            width: calc(16 * var(--ratio));
            height: calc(16 * var(--ratio));
            transform: translateY(-50%) rotate(180deg);
            background: url(/kr/event/promotions/images/icon-new-line-chevron-up-black.svg) no-repeat;
            background-size: contain;
        }

        .dark-mode &::after {
            background: url(/kr/event/promotions/images/icon-new-line-chevron-up-white.svg) no-repeat;
            background-size: contain;
        }
    }
}

.c-button--text-underline {
    .c-button__label {
        border-bottom: solid calc(1 * var(--ratio)) var(--primary-black);

        .dark-mode & {
            border-bottom: solid calc(1 * var(--ratio)) var(--lge-gray-g00);
        }
    }
}

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

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

    .c-button__icon--arrow-down-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;
    }
    .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);
    }
}
/* #endregion */

/* ========================= */
/* #region List */
/* ========================= */
.c-list {
    display: flex;
    flex-direction: column;
    padding: 0;
    margin-right: calc(20 * var(--ratio));
    margin-left: calc(20 * var(--ratio));
    .c-list__item {
        position: relative;
        word-break: keep-all;
        &::before {
            content: '';
            position: absolute;
            border-radius: 100px;
        }
    }
}

.c-list--normal {
    row-gap: calc(2 * var(--ratio));

    .c-list__item {
        padding-left: calc(12 * var(--ratio));
        color: var(--gray-g40);
        font-size: calc(12 * var(--ratio));
        font-weight: 400;
        line-height: 140%;
        letter-spacing: -0.04em;

        .dark-mode & {
            color: var(--gray-g20);
        }

        &::before {
            top: calc(7 * var(--ratio));
            left: calc(3 * var(--ratio));
            width: calc(2 * var(--ratio));
            height: calc(2 * var(--ratio));
            background-color: var(--gray-g40);
        }

        .dark-mode &::before {
            background-color: var(--gray-g20);
        }
    }
    
}
/* #endregion */

/* ========================= */
/* #region toggle */
/* ========================= */
.c-toggle {
    .c-toggle__content {
        position: relative;
        display: none;
    }
    &.on .c-toggle__content {
        display: flex;
        flex-direction: column;
    }

    .c-toggle__title {
        margin-bottom: calc(2 * var(--ratio));
        color: var(--primary-black);
        font-size: calc(13 * var(--ratio));
        font-weight: 600;
        line-height: 140%;
        letter-spacing: -0.04em;
    }
    .c-toggle__sub-title {
        margin-bottom: calc(2 * var(--ratio));
        color: var(--gray-g40);
        font-size: calc(12 * var(--ratio));
        font-weight: 400;
        line-height: 140%;
        letter-spacing: -0.04em;

        .dark-mode & {
            color: var(--gray-g20);
        }
    }
}

.c-toggle--normal {
    .c-toggle__content {
        margin-top: calc(16 * var(--ratio));
    }

    .c-toggle__content-wrap {
        position: relative;
        display: flex;
        flex-direction: column;
        row-gap: calc(8 * var(--ratio));
    }

    .c-toggle__content--box {
        padding: calc(20 * var(--ratio)) calc(16 * var(--ratio));
        border-radius: calc(8 * var(--ratio));
    }

    .c-toggle__content--white-bg {
        background-color: var(--gray-white);
    }

    .c-toggle__content--gray-bg {
        background-color: var(--gray-g10);
    }

    .c-button__icon {
        transition: transform 0.25s;
    }
    
    &.on .c-button__label::after {
        transform: translateY(-50%) rotate(0deg);
    }
}
/* #endregion */

/* ========================= */
/* #region 방송 보기/종료/신청 영역 (전체 공통 영역) */
/* ========================= */
.event-benefit-template.off-white #l-button{
    background-color: #F1EFEC;
}

.event-benefit-template #l-button:not(:has( .lls-sec)) {
    display: flex;
    padding: calc(20 * var(--ratio)) 0;
    justify-content: center;
    align-items: center;
    column-gap: calc(12 * var(--ratio));
    position: initial;
    transform: initial;
    margin: 0;
    text-align: initial;
    
}
.event-benefit-template #l-button:has( .lls-sec){
    display: block;
    padding: calc(20 * var(--ratio)) 0;
    position: initial;
    transform: initial;
    margin: 0;
    text-align: initial;
}
.event-benefit-template #l-button .lls-sec{
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    column-gap: calc(12 * var(--ratio));
    margin: 0;
    padding: 0;

}
.event-benefit-template #l-button .c-button {
    display: flex;
    width: calc(169 * var(--ratio));
    height: calc(44 * var(--ratio));
    padding: 0;
    justify-content: center;
    align-items: center;
    gap: calc(4 * var(--ratio));
    font-size: calc(14 * var(--ratio));
    font-weight: 700;
    line-height: 140%;
    letter-spacing: -0.04em;
    border-radius: 100px;
}
.event-benefit-template #l-button .c-button:focus {
    outline: 2px var(--gray-black) auto;
    outline-offset: 4px;
}
.event-benefit-template #l-button .c-button--default {
    border: solid calc(1 * var(--ratio)) var(--gray-black);
    color: var(--gray-black);
    background-color: transparent;
}
.event-benefit-template #l-button .c-button--bg-white-txt-black {
    color: var(--gray-black);
    border-color: var(--gray-white);
    background-color: var(--gray-white);
}
.event-benefit-template #l-button .c-button--bg-black-txt-white {
    color: var(--gray-white);
    border-color: var(--gray-black);
    background-color: var(--gray-black);
}
/* #endregion */

/* ========================= */
/* #region 개별 배너 링크 (전체 공통 영역) */
/* ========================= */
.c-banner--individual {
    display: block;
    position: absolute;
    top: 1.4%;
    left: 5.7%;
    width: 89%;
    height: 85%;
    border-radius: calc(14 * var(--ratio));
    overflow: hidden;
}
/* #endregion */

/* ========================= */
/* #region 카카오톡 채널 알림 안내 (전체 공통 영역) */
/* ========================= */
/* .event-benefit-template .kakao-talk-channel {
    position: relative;
}
.event-benefit-template .kakao-talk-channel__linker {
    position: absolute;
    bottom: 13%;
    left: 13.8%;
    width: 72.5%;
    height: 10.4%;
    outline-offset: 2px;
}
@media screen and (max-width: 767px){
    .event-benefit-template .kakao-talk-channel__linker {
        bottom: 11.6%;
        left: 6.8%;
        width: 86.5%;
        height: 14%;
    }
} */
/* #endregion */

/* ========================= */
/* #region 유틸리티 */
/* ========================= */

.u-mo-gutter {
    padding-left: var(--spacing-standard-gutter);
    padding-right: var(--spacing-standard-gutter);
}

.event-benefit-template .padding-t--m32 {padding-top: calc(32 * var(--ratio));}
.event-benefit-template .padding-t--m64 {padding-top: calc(64 * var(--ratio));}

.event-benefit-template .padding-b--m32 {padding-bottom: calc(32 * var(--ratio));}
.event-benefit-template .padding-b--m64 {padding-bottom: calc(64 * var(--ratio));}

@media screen and (min-width: 768px) {
    .event-benefit-template .hidden-pc {
        display: none !important;
    }
}

@media screen and (max-width: 767px) {
    .event-benefit-template .hidden-mo {
        display: none !important;
    }
}
/* #endregion */