$(document).ready(function () {

    // 팝업 열기 (.pj_item 클릭 시)
    $('.swiper-wrapper').on('click', '.pj_item', function () {
        let $clickedItem = $(this);
        let popId = $clickedItem.data('pop');
        let $popup = $('#' + popId);

        // 복제 슬라이드일 경우 real index로 원본 참조
        let realIndex = $clickedItem.closest('.swiper-slide')[0].dataset.swiperSlideIndex;
        let $originalItem = $('.swiper-wrapper .swiper-slide:not(.swiper-slide-duplicate) .pj_item').eq(realIndex);

        // 복제 여부 상관없이 기본 처리
        let $source = $originalItem.length ? $originalItem : $clickedItem;

        // 콘텐츠 추출
        let imgSrc = $source.find('img').attr('src');
        let titleText = $source.find('.tit').text();
        let descripText = $source.find('.descript').text();
        let descripInfo = $source.find('.info').html();

        // 팝업 콘텐츠 삽입
        $popup.find('.img img').attr('src', imgSrc);
        $popup.find('.tit').text(titleText);
        $popup.find('.descrip').text(descripText);
        $popup.find('.info').html(descripInfo);

        // 팝업 오픈 전 기존 스타일 초기화
        let $popInner = $popup.find('.pop_inner');
        let $layer = $popup.find('.layer');
        $popInner.css('position', '');
        $layer.css({ 'position': '', 'top': '' });

        // 팝업 오픈
        $popup.addClass('on');
        $('body').addClass('scroll-lock');

        // 팝업이 보이고 난 후 높이 비교 & 스타일 적용
        setTimeout(function () {
            let innerHeight = $popInner.height();
            let layerHeight = $layer.outerHeight(true);

            if (layerHeight > innerHeight) {
                $popInner.css('position', 'relative');
                $layer.css({
                    'position': 'absolute',
                    'top': '60px'
                });
            }
        }, 0); // DOM paint 후 실행

        // 현재 index 저장
        $popup.data('currentIndex', parseInt(realIndex, 10));
    });

    // 팝업 닫기
    $('#popProject .close').click(function () {
        $(this).attr('href', 'javascript:void(0);');
        let $popup = $(this).closest('#popProject');
        $popup.removeClass('on');
        $('body').removeClass('scroll-lock');

        // 스타일 초기화 (안 해도 되긴 하지만 깔끔하게 처리)
        $popup.find('.pop_inner').css('position', '');
        $popup.find('.layer').css({ 'position': '', 'top': '' });
    });

});