/************************************************
 * 초기화
 ************************************************/
function fn_init() {
    //팝업
    fn_selectListWebPopupJson();
    //인스타그램 리스트
    fn_selectListWebInstagramJson();

    //상단, 하단 배너
    fn_selectListWebMainBannerTypeAJson();
    fn_selectListWebMainBannerTypeBJson();
}

/************************************************
 * 팝업 마스킹 관련 함수들 (새로 추가)
 ************************************************/

// 배경 마스킹 표시
function showBackgroundMask() {
    const mask = document.querySelector('.popup-background-mask');
    if (mask) {
        mask.classList.add('active');
    }

    // body에 popup-open 클래스 추가 (스크롤 비활성화 및 블러 효과)
    document.body.classList.add('popup-open');

    console.log('Background mask activated');
}

// 배경 마스킹 제거
function hideBackgroundMask() {
    const mask = document.querySelector('.popup-background-mask');
    if (mask) {
        mask.classList.remove('active');
    }

    // body에서 popup-open 클래스 제거
    document.body.classList.remove('popup-open');

    console.log('Background mask deactivated');
}

/************************************************
 * content1 스와이퍼
 ************************************************/
const cont1Urls = [
    'https://petit.madeu.co.kr/webservice/selectServiceIntro.do?categoryNo=4' // 첫 번째 슬라이드 URL
    , 'https://petit.madeu.co.kr/webservice/selectServiceIntro.do?categoryNo=1'  // 두 번째 슬라이드 URL
    , 'https://petit.madeu.co.kr/webservice/selectServiceIntro.do?categoryNo=5'  // 세 번째 슬라이드 URL
    , 'https://petit.madeu.co.kr/index'  // 네 번째 슬라이드 URL
    , 'https://petit.madeu.co.kr/webservice/selectServiceIntro.do?categoryNo=1'  // 다섯 번째 슬라이드 URL
    // 필요시 추가
];

const bullet1 = ['레이저리프팅', '쉬다주사(Face)', '스컬트라', '스킨부스터', '필러']

const useCont1Loop = bullet1.length > 5; // slidesPerView(1.3)보다 많을 때만 loop
const cont1Swiper = new Swiper('.cont1_swiper', {
    loop: useCont1Loop,
    slidesPerView: 'auto',
    spaceBetween: 10,
    autoplay: {
        disableOnInteraction: false,
    },
    pagination: {
        el: '.cont1_swiper_pagination',
        clickable: true,
        renderBullet: function (index, className) {
            return '<div class="' + className + '"><span>' + (bullet1[index]) + '</span></div>';
        }
    },
    on: {
        init: function () {
            document.querySelectorAll('.cont1_swiper .swiper-slide').forEach(function (slide, idx) {
                slide.style.cursor = 'pointer';
                slide.setAttribute('data-url', cont1Urls[idx] || cont1Urls[0]);
                slide.addEventListener('click', function () {
                    const url = slide.getAttribute('data-url');
                    if (url) window.open(url, '_blank');
                });
            });
        },
        slideChange: function () {
            document.querySelectorAll('.cont1_swiper .swiper-slide').forEach(function (slide, idx) {
                slide.style.cursor = 'pointer';
                slide.setAttribute('data-url', cont1Urls[idx] || cont1Urls[0]);
                slide.onclick = function () {
                    const url = slide.getAttribute('data-url');
                    if (url) window.open(url, '_blank');
                };
            });
        }
    }
});

/************************************************
 * content2 스와이퍼
 ************************************************/
const cont2Urls = [
    'https://petit.madeu.co.kr/webservice/selectServiceDetailIntro.do?categoryDivCd=03&categoryNo=4&postNo=8' // 첫 번째 슬라이드 URL
    , 'https://petit.madeu.co.kr/webservice/selectServiceDetailIntro.do?categoryDivCd=03&categoryNo=4&postNo=2'  // 두 번째 슬라이드 URL
    , 'https://petit.madeu.co.kr/webservice/selectServiceDetailIntro.do?categoryDivCd=03&categoryNo=4&postNo=10'  // 세 번째 슬라이드 URL
    , 'https://petit.madeu.co.kr/webservice/selectServiceDetailIntro.do?categoryDivCd=03&categoryNo=4&postNo=3'  // 네 번째 슬라이드 URL
    , 'https://petit.madeu.co.kr/webservice/selectServiceDetailIntro.do?categoryDivCd=03&categoryNo=4&postNo=4'  // 다섯 번째 슬라이드 URL
];

const bullet2 = ['써마지FLX', '울쎄라', '온다리프팅', '티타늄리프팅', '튠페이스']

const useCont2Loop = bullet2.length > 5; // slidesPerView(1.3)보다 많을 때만 loop
const cont2Swiper = new Swiper('.cont2_swiper', {
    loop: useCont2Loop,
    slidesPerView: 'auto',
    spaceBetween: 10,
    autoplay: {
        disableOnInteraction: false,
    },
    pagination: {
        el: '.cont2_swiper_pagination',
        clickable: true,
        renderBullet: function (index, className) {
            return '<div class="' + className + '"><span>' + (bullet2[index]) + '</span></div>';
        }
    },
    on: {
        init: function () {
            document.querySelectorAll('.cont2_swiper .swiper-slide').forEach(function (slide, idx) {
                slide.style.cursor = 'pointer';
                slide.setAttribute('data-url', cont2Urls[idx] || cont2Urls[0]);
                slide.addEventListener('click', function () {
                    const url = slide.getAttribute('data-url');
                    if (url) window.open(url, '_blank');
                });
            });
        },
        slideChange: function () {
            document.querySelectorAll('.cont2_swiper .swiper-slide').forEach(function (slide, idx) {
                slide.style.cursor = 'pointer';
                slide.setAttribute('data-url', cont2Urls[idx] || cont2Urls[0]);
                slide.onclick = function () {
                    const url = slide.getAttribute('data-url');
                    if (url) window.open(url, '_blank');
                };
            });
        }
    }
});

/****************************************************************************
* 팝업 리스트 조회 (마스킹 기능 추가)
****************************************************************************/
function fn_selectListWebPopupJson() {
    let formData = new FormData();

    $.ajax({
        url: encodeURI('/webpopup/selectListWebPopup.do'),
        data: formData,
        dataType: 'json',
        processData: false,
        contentType: false,
        type: 'POST',
        async: true,
        success: function (data) {
            if (data.msgCode == '0') {
                //쿠기값 확인
                let cookiedata = document.cookie;
                if (cookiedata.indexOf("popup=done") < 0) {
                    $('.popup').addClass('open');

                    // *** 배경 마스킹 활성화 추가 ***
                    showBackgroundMask();

                    let totalCount = data.rows.length;
                    if (0 < totalCount) {
                        let popupContentList = $('#popupContentList');
                        let popupTabList = $('#popupTabList');

                        popupContentList.empty();
                        popupTabList.empty();

                        for (let i = 0; i < Math.min(data.rows.length, 5); i++) {
                            let isActive = i === 0 ? ' active' : '';
                            const isMobile = window.innerWidth <= 768;
                            const imgPath = isMobile ? (data.rows[i].m_filePath || data.rows[i].filePath) : data.rows[i].filePath;

                            // 탭 콘텐츠 생성
                            let contentHTML = '';
                            contentHTML += '<div role="tabpanel" class="tab-pane' + isActive + '" id="content' + (i + 1) + '">';
                            contentHTML += '<a href="' + data.rows[i].url + '" target="_blank" rel="noopener">';
                            contentHTML += '<img src="' + CDN_URL + imgPath + '" alt="event_con' + (i + 1) + '" />';
                            contentHTML += '</a>';
                            contentHTML += '</div>';
                            popupContentList.append(contentHTML);

                            // 탭 리스트 생성 (data-toggle 제거하고 클릭 이벤트 직접 처리)
                            let tabHTML = '';
                            tabHTML += '<li role="presentation"' + (isActive ? ' class="active"' : '') + '>';
                            tabHTML += '<a href="#content' + (i + 1) + '" role="tab" id="contentTitle' + (i + 1) + '" data-target="content' + (i + 1) + '">';
                            tabHTML += fn_addBrAfterFirstWord(data.rows[i].title);
                            tabHTML += '</a>';
                            tabHTML += '</li>';
                            popupTabList.append(tabHTML);
                        }

                        // 탭 클릭 이벤트 수동 구현
                        setupTabEvents();
                        setupPopupCloseEvents();
                    }
                } else {
                    $('.popup').removeClass('open');
                    hideBackgroundMask();  // 추가
                }
            } else if ('-2' == data.msgCode) {
                modalEvent.danger("로그인 오류", data.msgDesc, function () {
                    fn_leftFormAction('/weblogin/logout.do');
                });
            } else {
                modalEvent.danger("조회 오류", data.msgDesc);
            }

        },
        error: function (xhr, status, error) {
            modalEvent.danger("조회 오류", "조회 중 오류가 발생하였습니다. 잠시후 다시시도하십시오.");
        },
        beforeSend: function () {
            // 로딩열기
            $(".loading-image-layer").show();
        },
        complete: function () {
            // 로딩닫기
            $(".loading-image-layer").hide();
        }
    });
}

// 탭 이벤트 설정 함수 추가
function setupTabEvents() {
    $('#popupTabList a[role="tab"]').off('click').on('click', function (e) {
        e.preventDefault();

        const targetId = $(this).data('target');

        // 모든 탭과 콘텐츠에서 active 클래스 제거
        $('#popupTabList li').removeClass('active');
        $('#popupContentList .tab-pane').removeClass('active');

        // 클릭된 탭과 해당 콘텐츠에 active 클래스 추가
        $(this).parent('li').addClass('active');
        $('#' + targetId).addClass('active');
    });
}

// 팝업 닫기 이벤트들을 설정하는 함수
function setupPopupCloseEvents() {
    // 기존 이벤트 리스너 제거 후 새로 추가
    const closeBtn = document.getElementById('btnPopupClose');
    if (closeBtn) {
        // 기존 이벤트 리스너 복제본 생성하여 교체
        const newCloseBtn = closeBtn.cloneNode(true);
        closeBtn.parentNode.replaceChild(newCloseBtn, closeBtn);

        // 새로운 이벤트 리스너 추가
        newCloseBtn.addEventListener('click', function () {
            //체크박스 확인
            const todayCheckbox = document.getElementById('today');

            if (todayCheckbox.checked) {
                setCookie('done', 1);
            } else {
                $('.popup').removeClass('open');
                hideBackgroundMask();
            }
        });
    }
}

function fn_addBrAfterFirstWord(input) {
    // 문자열을 공백 기준으로 나눔
    const words = input.trim().split(" ");

    // 단어가 2개 이상일 때 첫 번째 단어 뒤에 <br class="mb"/> 추가
    if (words.length > 1) {
        return `${words[0]}<br class="mb"/> ${words.slice(1).join(" ")}`;
    }
    return input;
}

//쿠키데이터 설정 function (마스킹 기능 추가)
function setCookie(value, expiredays) {
    let todayDate = new Date();
    todayDate.setDate(todayDate.getDate() + expiredays);
    document.cookie = "popup=" + escape(value) + "; path=/; expires=" + todayDate.toGMTString() + ";";
    $('.popup').removeClass('open');

    // *** 배경 마스킹 제거 추가 ***
    hideBackgroundMask();
}

/****************************************************************************
 * 메인 배너 리스트 조회
 ****************************************************************************/
function fn_selectListWebMainBannerTypeAJson() {
    let formData = new FormData();
    formData.append('bannerType', 'PT');

    $.ajax({
        url: encodeURI('/webmainbanner/selectListWebMainBanner.do'),
        data: formData,
        dataType: 'json',
        processData: false,
        contentType: false,
        type: 'POST',
        async: true,
        success: function (data) {
            if (data.msgCode == '0') {
                let totalCount = data.rows.length;
                if (0 < totalCount) {
                    let listHTML = '';
                    let backgroundColorArr = ['#FC7687', '#ffafba', '#a94e4e', '#e1a28d'];

                    for (let i = 0; i < data.rows.length; i++) {
                        const backgroundColor = backgroundColorArr[i % backgroundColorArr.length];
                        const currentSlideIndex = i + 1; // 슬라이드 번호 (1부터 시작)
                        const currentAriaLabel = `${currentSlideIndex} / ${data.rows.length}`; // 동적으로 aria-label 설정
                        // 이미지와 링크를 a 태그로 감싸기 (url 파라미터 사용)
                        listHTML += '<div class="swiper-slide" style="background:' + backgroundColor + ';" aria-label="' + currentAriaLabel + '">';
                        listHTML += '   <a href="' + data.rows[i].url + '" target="_blank" rel="noopener">';
                        listHTML += '       <img class="pc" src="' + CDN_URL + data.rows[i].webFilePath + '" alt="banner' + (i + 1) + '" />';
                        listHTML += '       <img class="mb" src="' + CDN_URL + data.rows[i].mobileFilePath + '" alt="banner' + (i + 1) + '" />';
                        listHTML += '   </a>';
                        listHTML += '</div>';
                    }
                    $("#mainBannerList").html(listHTML).trigger("create");

                    /************************************************
                     * main_banner 스와이퍼
                     ************************************************/
                    const useMainBannerLoop = totalCount > 1; // slidesPerView(1)보다 많을 때만 loop
                    const mainBannerSwiper = new Swiper('.main_banner_swiper', {
                        loop: useMainBannerLoop,
                        slidesPerView: 1,
                        autoplay: {
                            disableOnInteraction: false,
                        },
                        pagination: {
                            el: '.main_banner_pagination',
                            clickable: true,
                            renderBullet: function (index, className) {
                                return `<span class="${className}" style="flex: 1;"></span>`;
                            },
                        },
                        on: {
                            init: function () {
                                adjustBulletWidth();
                                updateActiveBullets(this.activeIndex);
                            },
                            slideChange: function () {
                                updateActiveBullets(this.realIndex);
                            },
                        },
                    });

                    ///////// swiper-pagination-bullet 넓이 동적 조정 /////////
                    function adjustBulletWidth() {
                        const bullets = document.querySelectorAll('.main_banner_pagination .swiper-pagination-bullet');
                        const paginationWidth = 490;
                        const bulletWidth = paginationWidth / bullets.length;

                        bullets.forEach(bullet => {
                            bullet.style.width = `${bulletWidth}px`;
                        });
                    }

                    ///////// 활성화된 swiper-pagination-bullet 업데이트 /////////
                    function updateActiveBullets(activeIndex) {
                        const bullets = document.querySelectorAll('.mainbannerpagination .swiper-pagination-bullet');
                        bullets.forEach(bullet => bullet.classList.remove('swiper-pagination-bullet-active'));  // 먼저 모두 제거
                        if (bullets[activeIndex]) {
                            bullets[activeIndex].classList.add('swiper-pagination-bullet-active');  // 하나만 추가
                        }
                    }

                } else { $("#mainBannerList").empty(); }
            } else if ('-2' == data.msgCode) {
                modalEvent.danger("로그인 오류", data.msgDesc, function () {
                    fn_leftFormAction('/weblogin/logout.do');
                });
            } else {
                modalEvent.danger("조회 오류", data.msgDesc);
            }

        },
        error: function (xhr, status, error) {
            modalEvent.danger("조회 오류", "조회 중 오류가 발생하였습니다. 잠시후 다시시도하십시오.");
        },
        beforeSend: function () {
            // 로딩열기
            $(".loading-image-layer").show();
        },
        complete: function () {
            // 로딩닫기
            $(".loading-image-layer").hide();
        }
    });
}

/****************************************************************************
 * 서브 배너 이벤트 리스트 조회
 ****************************************************************************/
function fn_selectListWebMainBannerTypeBJson() {
    let formData = new FormData();
    formData.append('bannerType', 'PB');

    $.ajax({
        url: encodeURI('/webmainbanner/selectListWebMainBanner.do'),
        data: formData,
        dataType: 'json',
        processData: false,
        contentType: false,
        type: 'POST',
        async: true,
        success: function (data) {
            if (data.msgCode == '0') {
                let totalCount = data.rows.length;

                if (0 < totalCount) {
                    let listHTML = '';
                    let backgroundColorArr = ['#666', '#999', '#ddd'];

                    for (let i = 0; i < data.rows.length; i++) {
                        const backgroundColor = backgroundColorArr[i % backgroundColorArr.length];
                        const currentSlideIndex = i + 1; // 슬라이드 번호 (1부터 시작)
                        const currentAriaLabel = `${currentSlideIndex} / ${data.rows.length}`; // 동적으로 aria-label 설정
                        // 이미지와 링크를 a 태그로 감싸기 (url 파라미터 사용)
                        listHTML += '<div class="swiper-slide" style="background:' + backgroundColor + ';" aria-label="' + currentAriaLabel + '">';
                        listHTML += '   <a href="' + data.rows[i].url + '" target="_blank" rel="noopener">';
                        listHTML += '       <img class="pc" src="' + CDN_URL + data.rows[i].webFilePath + '" alt="banner' + (i + 1) + '" />';
                        listHTML += '       <img class="mb" src="' + CDN_URL + data.rows[i].mobileFilePath + '" alt="banner' + (i + 1) + '" />';
                        listHTML += '       <button class="detail_btn">Detail view ></button>';
                        listHTML += '   </a>';
                        listHTML += '</div>';
                    }
                    $("#subBannerList").html(listHTML).trigger("create");

                    /************************************************
                     * sub_banner 스와이퍼
                     ************************************************/
                    const useSubBannerLoop = totalCount > 1; // slidesPerView(1)보다 많을 때만 loop
                    const subBannerSwiper = new Swiper('.sub_banner_swiper', {
                        loop: useSubBannerLoop,
                        slidesPerView: 1,
                        autoplay: {
                            disableOnInteraction: false,
                        },
                        pagination: {
                            el: '.sub_banner_pagination',
                            clickable: true,
                            renderBullet: function (index, className) {
                                return `<span class="${className}" style="flex: 1;"></span>`;
                            },
                        },
                        on: {
                            init: function () {
                                adjustSubBulletWidth();
                                updateSubActiveBullets(this.activeIndex);
                            },
                            slideChange: function () {
                                updateSubActiveBullets(this.realIndex);
                            },
                        },
                    });

                    ///////// swiper-pagination-bullet 넓이 동적 조정 /////////
                    function adjustSubBulletWidth() {
                        const bullets = document.querySelectorAll('.sub_banner_pagination .swiper-pagination-bullet');
                        const paginationWidth = 490;
                        const bulletWidth = paginationWidth / bullets.length;

                        bullets.forEach((bullet) => {
                            bullet.style.width = `${bulletWidth}px`;
                        });
                    }

                    ///////// 활성화된 swiper-pagination-bullet 업데이트 /////////
                    function updateSubActiveBullets(activeIndex) {
                        const bullets = document.querySelectorAll('.sub_banner_pagination .swiper-pagination-bullet');

                        bullets.forEach((bullet, index) => {
                            if (index <= activeIndex) {
                                bullet.classList.add('swiper-pagination-bullet-active');
                            } else {
                                bullet.classList.remove('swiper-pagination-bullet-active');
                            }
                        });
                    }

                } else { $("#subBannerList").empty(); }
            } else if ('-2' == data.msgCode) {
                modalEvent.danger("로그인 오류", data.msgDesc, function () {
                    fn_leftFormAction('/weblogin/logout.do');
                });
            } else {
                modalEvent.danger("조회 오류", data.msgDesc);
            }

        },
        error: function (xhr, status, error) {
            modalEvent.danger("조회 오류", "조회 중 오류가 발생하였습니다. 잠시후 다시시도하십시오.");
        },
        beforeSend: function () {
            // 로딩열기
            $(".loading-image-layer").show();
        },
        complete: function () {
            // 로딩닫기
            $(".loading-image-layer").hide();
        }
    });
}

/****************************************************************************
 * 인스타그램 피드 리스트 조회 (백엔드 API 사용)
 ****************************************************************************/
function fn_selectListWebInstagramJson() {
    let formData = new FormData();
    $.ajax({
        url: encodeURI('/webinstagram/selectListWebInstagram.do'),
        data: formData,
        dataType: 'json',
        processData: false,
        contentType: false,
        type: 'POST',
        async: true,
        success: function (data) {
            if (data.msgCode == '0') {
                let totalCount = data.rows.length;
                if (0 < totalCount) {
                    let listHTML = '';
                    for (let i = 0; i < data.rows.length; i++) {
                        const currentSlideIndex = i + 1;
                        const currentAriaLabel = `${currentSlideIndex} / ${data.rows.length}`;
                        let mediaUrl = data.rows[i].media_url;
                        let permalink = data.rows[i].permalink;
                        let mediaType = data.rows[i].media_type || '';
                        let thumbnailUrl = data.rows[i].thumbnail_url || mediaUrl;
                        listHTML += '<div class="swiper-slide" aria-label="' + currentAriaLabel + '">';
                        listHTML += '   <a href="' + permalink + '" target="_blank" rel="noopener">';
                        if (mediaType === 'VIDEO' || mediaType === 'REEL') {
                            listHTML += '       <img src="' + thumbnailUrl + '" alt="instagram' + (i + 1) + '" />';
                        } else {
                            listHTML += '       <img src="' + mediaUrl + '" alt="instagram' + (i + 1) + '" />';
                        }
                        listHTML += '   </a>';
                        listHTML += '</div>';
                    }
                    $("#instagramList").html(listHTML).trigger("create");
                    // 커스텀 내비게이션과 연동
                    initInstagramCustomNav(data);
                }
            } else if ('-2' == data.msgCode) {
                modalEvent.danger("로그인 오류", data.msgDesc, function () {
                    fn_leftFormAction('/weblogin/logout.do');
                });
            } else {
                modalEvent.danger("조회 오류", data.msgDesc);
            }
        },
        error: function (xhr, status, error) {
            modalEvent.danger("조회 오류", "조회 중 오류가 발생하였습니다. 잠시후 다시시도하십시오.");
        },
        beforeSend: function () {
            // 로딩열기
            $(".loading-image-layer").show();
        },
        complete: function () {
            // 로딩닫기
            $(".loading-image-layer").hide();
        }
    });
}

/**********************************
 * instagram 스와이퍼 + 커스텀 내비게이션 (썸네일 3개 고정) - 수정버전
 **********************************/
function initInstagramCustomNav(data) {
    const totalCount = data.rows.length;
    if (totalCount === 0) return;

    // 썸네일은 최대 5개로 고정
    const maxThumbs = 3;
    const showThumbs = Math.min(totalCount, maxThumbs);
    let currentActiveIndex = 0; // 현재 활성 인덱스 추적

    // 썸네일 버튼 생성 (활성 상태 포함)
    function createThumbnails(startIndex = 0) {
        let thumbsHTML = '';
        for (let i = 0; i < showThumbs; i++) {
            const dataIndex = (startIndex + i) % totalCount;
            const mediaUrl = data.rows[dataIndex].media_url;
            const thumbnailUrl = data.rows[dataIndex].thumbnail_url || mediaUrl;
            const isActive = dataIndex === currentActiveIndex ? 'active' : '';
            thumbsHTML += `<div class="custom-swiper-thumb ${isActive}" data-index="${dataIndex}">
                <img src="${thumbnailUrl}" alt="thumb${dataIndex + 1}" />
            </div>`;
        }
        document.querySelector('.custom-swiper-thumbs').innerHTML = thumbsHTML;
    }

    // 초기 썸네일 생성
    createThumbnails(0);

    // Swiper 인스턴스
    setTimeout(function () {
        const instagramSwiper = new Swiper('.instagram_swiper', {
            loop: true,
            autoplay: {
                disableOnInteraction: false,
            },
            breakpoints: {
                768: {
                    slidesPerView: 3.2,
                    spaceBetween: 20,
                },
                0: {
                    slidesPerView: 2.1,
                    spaceBetween: 5,
                },
            },
            on: {
                slideChange: function () {
                    const newIndex = this.realIndex % totalCount;
                    currentActiveIndex = newIndex; // 활성 인덱스 업데이트

                    // 콘텐츠가 5개보다 많은 경우 썸네일 순환 업데이트
                    if (totalCount > maxThumbs) {
                        // 현재 활성 썸네일이 보이는지 확인
                        const visibleThumbs = Array.from(document.querySelectorAll('.custom-swiper-thumb'));
                        const isActiveVisible = visibleThumbs.some(thumb =>
                            parseInt(thumb.dataset.index) === currentActiveIndex
                        );

                        // 활성 썸네일이 보이지 않으면 썸네일 업데이트
                        if (!isActiveVisible) {
                            updateThumbnailsForIndex(currentActiveIndex);
                        } else {
                            // 보이면 활성 상태만 업데이트
                            updateCustomThumbActive(currentActiveIndex);
                        }
                    } else {
                        updateCustomThumbActive(currentActiveIndex);
                    }
                }
            }
        });

        // 좌우 버튼 이벤트
        document.querySelector('.custom-swiper-btn.prev').onclick = function () {
            instagramSwiper.slidePrev();
        };
        document.querySelector('.custom-swiper-btn.next').onclick = function () {
            instagramSwiper.slideNext();
        };

        // 썸네일 클릭 이벤트
        document.querySelector('.custom-swiper-thumbs').onclick = function (e) {
            const thumb = e.target.closest('.custom-swiper-thumb');
            if (thumb) {
                const targetIndex = parseInt(thumb.dataset.index);
                instagramSwiper.slideToLoop(targetIndex);
            }
        };

        // 현재 슬라이드에 맞춰 썸네일 업데이트
        function updateThumbnailsForIndex(activeIndex) {
            if (totalCount <= maxThumbs) return;

            // 현재 활성 인덱스를 중심으로 썸네일 배치
            let startIndex = activeIndex - Math.floor(maxThumbs / 2);
            if (startIndex < 0) startIndex = totalCount + startIndex;

            createThumbnails(startIndex);
        }

        // 활성 썸네일 표시
        function updateCustomThumbActive(activeIdx) {
            document.querySelectorAll('.custom-swiper-thumb').forEach(function (thumb) {
                const thumbIndex = parseInt(thumb.dataset.index);
                thumb.classList.toggle('active', thumbIndex === activeIdx);
            });
        }

        // 초기 활성 상태 설정
        updateCustomThumbActive(0);
    }, 0);
}

// 초기화 실행
fn_init();

// 기존 팝업 닫기 버튼 이벤트 (마스킹 기능 추가)
document.getElementById('btnPopupClose').addEventListener('click', function () {
    $('.popup').removeClass('open');
    // *** 배경 마스킹 제거 추가 ***
    hideBackgroundMask();
});

// 추가 이벤트 리스너들 (새로 추가)
document.addEventListener('DOMContentLoaded', function () {
    // ESC 키로 팝업 닫기
    document.addEventListener('keydown', function (e) {
        if (e.key === 'Escape' && document.querySelector('.popup.open')) {
            $('.popup').removeClass('open');
            hideBackgroundMask();
        }
    });

    // 마스크 영역 클릭 시 팝업 닫기 (선택사항)
    const mask = document.querySelector('.popup-background-mask');
    if (mask) {
        mask.addEventListener('click', function () {
            $('.popup').removeClass('open');
            hideBackgroundMask();
        });
    }
});