@font-face{font-family:'Pretendard';font-weight:400;font-display:swap;src:local('Pretendard Regular'),url('../../fonts/pretendard-regular.woff2') format('woff2');}

    @font-face{font-family:'Pretendard';font-weight:600;font-display:swap;src:local('Pretendard SemiBold'),url('../../fonts/pretendard-semibold.woff2') format('woff2');}



    :root {

        --bl-arrow-color: #ffffff;

        --bl-arrow-bg: rgba(30,41,59,0.4);

        --bl-close-btn-color: #ffffff;

        --bl-close-btn-bg: rgba(30,41,59,0.8);

        --bl-close-btn-border: rgba(255,255,255,0.2);

        --bl-close-btn-radius: 8px;

    }



    body.bl-popup-open { overflow: hidden !important; position: fixed; width: 100%; height: 100%; }



    #bl-popup-group {

        font-family:'Pretendard', sans-serif;

        position: fixed !important;

        top: 0 !important;

        left: 0 !important;

        width: 100% !important;

        height: 100% !important;

        z-index: 99999 !important;

        display: flex !important;

        flex-direction: column !important;

        justify-content: center !important;

        align-items: center !important;

        background-color: rgba(0,0,0,0.75);

                opacity: 0;

        visibility: hidden;

        transition: opacity .35s cubic-bezier(.4,0,.2,1), visibility .35s;

        padding: 20px;

        box-sizing: border-box;

    }

    #bl-popup-group.ready { opacity: 1; visibility: visible; }



    /* Animation transitions */

    .bl-pc-content, .bl-slider-container {

        transition: transform .35s cubic-bezier(.34, 1.56, 0.64, 1), opacity .35s ease;

        opacity: 0;

    }



        /* Fade */

    #bl-popup-group .bl-pc-content { transform: translate(0px, 0px); }

    #bl-popup-group .bl-slider-container { transform: translate(0px, 0px); }

    #bl-popup-group.ready .bl-pc-content { opacity: 1; }

    #bl-popup-group.ready .bl-slider-container { opacity: 1; }

    

    /* ─── PC Stacked Layout Styles ─── */

    .bl-pc-content {

        position: relative;

        display: flex;

        flex-direction: column;

        align-items: center;

        max-width: 90vw;

    }

    .bl-pc-popups {

        display: flex;

        flex-wrap: wrap;

        gap: 20px;

        justify-content: center;

        align-items: flex-start;

    }

    .bl-pc-popups .bl-popup-card {

        width: 350px;

        max-height: 82vh;

        background: #ffffff;

        border-radius: 12px;

        overflow: hidden;

        box-shadow: 0 20px 40px rgba(0,0,0,0.3);

        display: flex;

        flex-direction: column;

    }

    .bl-pc-popups .bl-popup-item {

        width: 100%;

        overflow-y: auto;

    }

    .bl-pc-popups img.bl-img {

        width: 100%;

        height: auto;

        display: block;

        object-fit: contain;

    }



    /* ─── Shared Popup Card Styles ─── */

    .bl-popup-card {

        background: #ffffff;

        border-radius: 12px;

        overflow: hidden;

        box-shadow: 0 15px 35px rgba(0,0,0,0.2);

        display: flex;

        flex-direction: column;

        position: relative;

    }

    .bl-popup-card-footer {

        padding: 16px 20px;

        background: #ffffff;

        text-align: center;

        border-top: 1px solid #f1f5f9;

    }

    .bl-popup-card-title {

        margin: 0 0 12px 0 !important;

        font-size: 15px;

        font-weight: 700;

        color: #1e293b;

        line-height: 1.4;

    }

    .bl-popup-card-btn {

        display: block;

        width: 100%;

        padding: 10px 12px;

        border: 1px solid #cbd5e1;

        border-radius: 8px;

        font-size: 13px;

        font-weight: 600;

        color: #475569;

        text-decoration: none !important;

        transition: all 0.2s ease;

        background: #ffffff;

        box-sizing: border-box;

    }

    .bl-popup-card-btn:hover {

        background: #f8fafc;

        border-color: #94a3b8;

        color: #1e293b;

    }



    /* ─── Close Buttons: Floated Style ─── */

    .bl-popup-close-all {

        align-self: center;

        background: rgba(15,23,42,0.6);

        border: 1px solid rgba(255,255,255,0.15);

        color: #ffffff;

        padding: 8px 18px;

        border-radius: 20px;

        font-size: 12px;

        font-weight: 600;

        cursor: pointer;

        transition: all 0.2s ease;

        margin-bottom: 10px;

        backdrop-filter: blur(4px);

    }

    .bl-popup-close-all:hover {

        background: rgba(15,23,42,0.85);

        border-color: rgba(255,255,255,0.3);

    }



    /* ─── Close Buttons: Bottom Bar Style ─── */

    .bl-popup-bottom-bar {

        display: flex;

        background: #1e1e1e;

        height: 44px;

        line-height: 44px;

        font-size: 12px;

        color: #ffffff;

        border-top: 1px solid rgba(255,255,255,0.05);

    }

    .bl-popup-bottom-bar-left {

        flex: 1;

        padding-left: 18px;

        cursor: pointer;

        font-weight: 500;

        opacity: 0.9;

        transition: opacity 0.2s ease;

    }

    .bl-popup-bottom-bar-left:hover { opacity: 1; }

    .bl-popup-bottom-bar-right {

        padding: 0 18px;

        background: #2b2b2b;

        cursor: pointer;

        font-weight: 700;

        transition: background-color 0.2s ease;

        border-left: 1px solid rgba(255,255,255,0.1);

    }

    .bl-popup-bottom-bar-right:hover { background: #3d3d3d; }



    .bl-bottom-controls { display: flex; justify-content: center; width: 100%; margin-top: 20px; }

    .bl-hide-today-label { display: flex; align-items: center; cursor: pointer; transition: color .2s ease; font-weight: 500; text-shadow: 0 1px 2px rgba(0,0,0,0.5); color:#fff; font-size: 14px !important; }

    .bl-hide-today-label:hover { color: #fde68a; }

    .bl-hide-today-label input { margin-right: 8px; width: 16px; height: 16px; cursor: pointer; accent-color: var(--bl-primary, #6366f1); }



    /* ─── Unified Slider Layout Styles (PC/Mobile) ─── */

    .bl-slider-container {

        display: none;

        flex-direction: column;

        align-items: center;

        position: relative;

    }

    

    /* Mobile slider styles default */

    @media (max-width:900px){

        .bl-pc-content { display: none !important; }

        .bl-slider-container {

            display: flex !important;

            width: 85vw;

            max-width: 290px;

        }

        .bl-swiper {

            height: auto;

            max-height: 70vh;

        }

    }



    /* PC slider mode styles override */

    

    .bl-swiper {

        overflow: hidden;

        border-radius: 12px;

        width: 100%;

        box-shadow: 0 15px 35px rgba(0,0,0,0.35);

        position: relative;

    }

        .bl-swiper { height: auto !important; }

    .swiper-slide { height: auto !important; }

    .swiper-slide .bl-popup-card { height: auto !important; }

    .bl-popup-item { height: auto !important; }

    

    .swiper-slide {

        display: flex;

        justify-content: center;

        align-items: center;

        height: 100%;

        box-sizing: border-box;

    }

    .swiper-slide .bl-popup-card {

        width: 100%;

        height: 100%;

    }

    .swiper-slide .bl-popup-item img.bl-img {

        width: 100%;

        height: auto;

        display: block;

        object-fit: contain;

    }

    .swiper-slide .bl-popup-text-card {

        height: 100%;

        max-height: 70vh;

        padding: 20px;

        overflow-y: auto;

        box-sizing: border-box;

    }



    /* Autoplay Story Progress Bar */

    .bl-popup-progress-bar {

        position: absolute;

        top: 0;

        left: 0;

        width: 100%;

        height: 4px;

        background: rgba(255, 255, 255, 0.15);

        z-index: 15;

        overflow: hidden;

    }

    .bl-popup-progress-inner {

        height: 100%;

        background: var(--bl-primary, #6366f1);

        width: 0%;

    }



    /* Swiper Navigation & Pagination */

    .bl-swiper-outer-wrapper {

        position: relative;

        width: 100%;

    }

    

    .swiper-button-prev-pop, .swiper-button-next-pop {

        position: absolute;

        top: 50%;

        transform: translateY(-50%);

        width: 42px;

        height: 42px;

        border-radius: 50%;

        background: var(--bl-arrow-bg) !important;

        color: var(--bl-arrow-color) !important;

        display: flex;

        align-items: center;

        justify-content: center;

        border: none;

        cursor: pointer;

        z-index: 10;

        transition: all 0.2s ease;

        box-shadow: 0 4px 10px rgba(0,0,0,0.2);

    }

    .swiper-button-prev-pop::after, .swiper-button-next-pop::after { display: none; }

    .swiper-button-prev-pop:hover, .swiper-button-next-pop:hover { opacity: 0.9; transform: translateY(-50%) scale(1.05); }

    .swiper-button-prev-pop:active, .swiper-button-next-pop:active { transform: translateY(-50%) scale(0.95); }

    

    .swiper-button-prev-pop { left: -55px; }

    .swiper-button-next-pop { right: -55px; }



    @media (max-width: 900px) {

        .swiper-button-prev-pop { left: 10px; }

        .swiper-button-next-pop { right: 10px; }

    }



    /* Bullet Dots Pagination */

    .swiper-pagination2 {

        display: flex;

        justify-content: center;

        gap: 6px;

        margin: 10px 0;

        z-index: 10;

        width: auto !important;

        position: static !important;

    }

    .swiper-pagination2 .swiper-pagination-bullet {

        width: 8px;

        height: 8px;

        background: #ffffff !important;

        opacity: 0.45;

        border-radius: 50%;

        display: inline-block;

        cursor: pointer;

        transition: all 0.3s ease;

        margin: 0 !important;

    }

    .swiper-pagination2 .swiper-pagination-bullet-active {

        background: #ffffff !important;

        opacity: 1;

        width: 22px !important;

        border-radius: 4px !important;

    }

    

    /* Fraction Pagination */

    .swiper-pagination2.swiper-pagination-fraction {

        color: #ffffff;

        font-size: 13px;

        font-weight: 600;

        text-shadow: 0 1px 2px rgba(0,0,0,0.5);

    }



    /* ─── Close Buttons: Slider Bottom Style ─── */

    .bl-slider-bottom-controls {

        display: flex;

        gap: 10px;

        margin-top: 15px;

        justify-content: center;

        width: 100%;

    }

    .bl-slider-bottom-controls .bl-slider-btn {

        background: var(--bl-close-btn-bg);

        color: var(--bl-close-btn-color);

        border: 1px solid var(--bl-close-btn-border);

        border-radius: var(--bl-close-btn-radius);

        padding: 10px 22px;

        font-size: 13px;

        font-weight: 600;

        cursor: pointer;

        outline: none;

        box-shadow: 0 4px 12px rgba(0,0,0,0.2);

        transition: all 0.2s ease;

        backdrop-filter: blur(4px);

    }

    .bl-slider-bottom-controls .bl-slider-btn:hover {

        opacity: 0.9;

        transform: translateY(-1px);

    }

    .bl-slider-bottom-controls .bl-slider-btn:active {

        transform: translateY(0);

    }