/*
    Author	: hyojeong yang
    Date	: 2025.11.11
    Project	: 다채움
*/
var toggleCommonFunc = function (opt) {
    opt.obj = opt.obj;

    $(opt.obj).toggleClass(opt.className);

    if ($(opt.obj).hasClass(opt.className)) {
        opt.hasClass()

    } else {
        opt.noneClass();
    }
}

/**
 *
 * @param opt {
 * pc : function
 * mo : function
 * ta : fucntion
 * }
 */
var ssmFunc = function (opt) {
    var ssmPc = (opt.hasOwnProperty('pc') && opt.pc) ? true : false;
    var ssmTa = (opt.hasOwnProperty('ta') && opt.ta) ? true : false;
    var ssmMo = (opt.hasOwnProperty('mo') && opt.mo) ? true : false;

    if (ssmPc) {
        ssm.addState({
            id: 'pc',
            query: '(min-width: 1280px)',
            onEnter: function () {
                opt.pc();
            },
        });
    }
    if (ssmTa) {
        ssm.addState({
            id: 'ta',
            query: '(min-width: 768px) and (max-width: 1279px)',
            onEnter: function () {
                opt.ta();
            },
        });
    }
    if (ssmMo) {
        ssm.addState({
            id: 'mo',
            query: '(max-width: 767px)',
            onEnter: function () {
                opt.mo();
            },
        });
    }
};

//이미지 줌 src 세팅
var zoomPopup = function (el) {
    $(".popup-zoom").find("img").attr("src", $(el).closest("figure").find("img").attr("src"));
    popupOpen("popupZoom");
}


//popup open
// var popupOpen = function (target) {
//     var $pop = $('[data-popup="' + target + '"]');
//     $pop.css({
//         'display': 'flex'
//     });
//     if ($pop.hasClass('popup-alert-area')) {
//         $el = $pop.find('.popup-alert');
//         TweenMax.fromTo($el, .3, { css: { scale: .8, opacity: 0 }, ease: Quad.easeInOut }, { css: { scale: 1, opacity: 1 }, ease: Quad.easeInOut });
//     }
//     else {
//         TweenMax.fromTo($pop, .3, { css: { scale: .8, opacity: 0 }, ease: Quad.easeInOut }, { css: { scale: 1, opacity: 1 }, ease: Quad.easeInOut });
//     }
//     $('.layer').hide();
//     $('.dim').show();
//     $('body').css({ 'overflow-y': 'hidden' });
// }

// //popup close
// var popupClose = function (target) {
//     var $pop = $('[data-popup="' + target + '"]');
//     if ($pop.hasClass('popup-alert-area')) {
//         $el = $pop.find('.popup-alert');
//         TweenMax.fromTo($el, .3, { css: { scale: 1, opacity: 1 }, ease: Quad.easeInOut }, { css: { scale: .8, opacity: 0 }, ease: Quad.easeInOut });
//     }
//     else {
//         TweenMax.fromTo($pop, .3, { css: { scale: 1, opacity: 1 }, ease: Quad.easeInOut }, { css: { scale: .8, opacity: 0 }, ease: Quad.easeInOut });
//     }
//     $pop.fadeOut(200);
//     $('.dim, .layer').fadeOut(200);
//     $('body').css({ 'overflow-y': 'auto' });
// }
var openPopups = [];
var dimZIndex = 97;
var popupOpen = function (target) {
    var $pop = $('[data-popup="' + target + '"]');

    if ($pop.hasClass('popup-alert-area')) {
        $pop.css({'display': 'flex'});
        return;
    } else {
        openPopups.push(target);
        dimZIndex += 2;
        $pop.css({'display': 'flex', 'z-index': dimZIndex + 1});
        $('.dim').css({'z-index': dimZIndex}).show();
        $('body').css({'overflow-y': 'hidden'});
    }
};

var popupClose = function (target) {
    var $pop = $('[data-popup="' + target + '"]');
    if ($pop.hasClass('popup-alert-area')) {
        $pop.fadeOut(200);
        return;
    } else {
        openPopups = openPopups.filter(item => item !== target);
        if (openPopups.length === 0) {
            $('body').css({'overflow-y': 'auto'});
            $pop.add('.dim').fadeOut(100);
            dimZIndex = 97;
        } else {
            dimZIndex -= 2;
            $pop.fadeOut(200, function () {
                $('.dim').css({'z-index': dimZIndex});
            });
        }
    }
};
$('.pop-close').on('click', function () {
    var target = $(this).closest($('[class^=popup][data-popup]')).data('popup');
    popupClose(target);
});
$('.dim').on('click', function () {
    if (openPopups.length > 0) {
        var topPopup = openPopups[openPopups.length - 1];
        popupClose(topPopup);
    }
});

//layer open
var layerOpen = function (target, el) {
    var $layer = $('[data-layer="' + target + '"]'),
        $el = $(el),
        offsetTop = $el.offset().top + ($el.height() / 2 - 20),
        offsetLeft = $el.offset().left + ($el.width() + 20);
    $layer.css({"top": offsetTop, "left": offsetLeft}).fadeIn(200);
}

//layer close
var layerClose = function (target) {
    var $layer = $('[data-layer="' + target + '"]');
    $layer.fadeOut(200);
}

//toast 
var toastTimer;
var toastShow = function (message) {
    clearTimeout(toastTimer);

    $(".toast").text(message);
    $(".toast").removeClass("is-hidden").removeClass("is-hide").addClass("is-show");

    toastTimer = setTimeout(function () {
        toastHide();
    }, 2000);
}
var toastHide = function () {
    clearTimeout(toastTimer);

    $(".toast").removeClass("is-show").addClass("is-hide");

    toastTimer = setTimeout(function () {
        $(".toast").addClass("is-hidden");
    }, 1000);
}

const checkIsSticky = () => {
    const header = document.querySelector('.site-header');
    if (!header) return;
    if (window.scrollY > 10) {
        header.classList.add('is-sticky');
    } else {
        header.classList.remove('is-sticky');
    }
}

if (jQuery) (function ($) {
    //common
    //$.extend($.fn, {
    //    Func: function () {
    //        var init = function (obj) {

    //        };
    //        $(this).each(function () {
    //            init(this);
    //        });
    //        return $(this);
    //    }
    //});

    //component
    //popup
    // $.extend($.fn, {
    //     popupFunc: function () {
    //         var init = function (obj) {
    //             var $btn = $('.popup, .popup-zoom').find('.pop-close');
    //             $(document).on('click', $btn, function (e) {
    //                 var $target = $(e.target);
    //                 if ($target.is($btn)) {
    //                     $pop = $target.closest('.popup, .popup-zoom');
    //                     $pop.fadeOut(200);
    //                     // TweenMax.fromTo($pop, .3, { css: { scale: 1, opacity: 1 }, ease: Quad.easeInOut }, { css: { scale: .8, opacity: 0 }, ease: Quad.easeInOut });
    //                     $('.dim').fadeOut(200);
    //                     $('body').css({ 'overflow-y': 'auto' });
    //                 }
    //             });

    //             $('.dim').on('click', function (e) {
    //                 $pop = $('[data-popup], .popup');
    //                 $pop.fadeOut(200);
    //                 // TweenMax.fromTo($pop, .3, { css: { scale: 1, opacity: 1 }, ease: Quad.easeInOut }, { css: { scale: .8, opacity: 0 }, ease: Quad.easeInOut });
    //                 $('body').css({ 'overflow-y': 'auto' });
    //                 $(this).hide();
    //             });
    //         };
    //         init(this);
    //         return $(this);
    //     }
    // });
    //accordion
    $.extend($.fn, {
        accordionFunc: function () {
            var init = function (obj) {
                var $btn = $(obj).find('li').find('.btn-accordion-toggle');
                $(document).on('click', '.btn-accordion-toggle', function (e) {

                    var $target = $(e.target);
                    var $btn = $(this);
                    var $area = $target.parents('.accordion');

                    if(!$area.hasClass('toggle-each')) {
                        $target.closest('li').siblings('li').removeClass('is-active');
                    }

                    toggleCommonFunc({
                        obj: $target.closest('li'),
                        className: 'is-active',
                        hasClass: function (obj) {
                            //$(obj).removeClass('is-active');
                            // TweenMax.fromTo('.accordion-txt-area', .5, {opacity: 0}, {opacity: 1});
                            $btn.html('열기');
                            $target.html('닫기');
                        },
                        noneClass: function (obj) {
                            // TweenMax.fromTo('.accordion-txt-area', .5, {opacity: 1}, {opacity: 0});
                            $btn.html('열기');
                        }
                    });
                });
            };
            init(this);
            return $(this);
        }
    });
    //section accordion
    $.extend($.fn, {
        sectionAccordionFunc: function () {
            var init = function (obj) {
                $(document).on('click', '.btn-section-accordion-toggle', function (e) {
                    var $btn = $(this);
                    var $area = $(this).closest('.section-accordion');
                    toggleCommonFunc({
                        obj: $area,
                        className: 'is-close',
                        hasClass: function (obj) {
                            $btn.html('열기');
                        },
                        noneClass: function (obj) {
                            $btn.html('접기');
                        }
                    });
                });
            };
            init(this);
            return $(this);
        }
    });

    //tabsNormalFunc
    $.extend($.fn, {
    tabsNormalFunc: function () {
            var init = function (obj) {
    var showTab = function (tabSelector) {
        $(tabSelector).addClass('is-active');

        // Show corresponding tabs-cont
        var $tabsNav = $(tabSelector).find("[class^='tabs-nav'] a.is-active");
        if ($tabsNav.length > 0) {
            var tabHref = $tabsNav.attr('href');
            
            // Ensure tabHref is valid
            if (tabHref && tabHref.startsWith('#')) {
                var $tabsCont = $(tabSelector).find('.tabs-cont' + tabHref);
                $tabsCont.addClass('is-active');
            }
        }
    };

    var showInitialTabs = function () {
        // 초기 설정
        var $currentTab = $(obj).children("[class^='tabs-nav']").find('a.is-active');
        var $currentTabCont = $currentTab.attr('href');
        
        if ($currentTabCont && $currentTabCont.startsWith('#')) {
            showTab($currentTabCont);
        }

        // 중첩된 탭 처리
        $(obj).find('.tabs-normal').not(':first').each(function () {
            init(this);
        });
    };

    var setActiveTab = function (tabLink) {
        if (!$(tabLink).hasClass("is-active")) {
            const tabsNav = $(tabLink).closest("[class^='tabs-nav']");
            tabsNav.find('a').removeClass("is-active").removeAttr("title");
            $(tabLink).addClass("is-active").attr("title", "선택됨");
        }
    };

    var hideTabs = function (tabsContainer) {
        $(tabsContainer).find('.tabs-cont').removeClass('is-active').removeAttr("title");
    };

    var handleTabClick = function (e) {
        var $tabLink = $(this);
        var $tabsNormal = $tabLink.closest('.tabs-normal');

        setActiveTab($tabLink);
        hideTabs($tabsNormal);

        var $activeTab = $tabLink.attr('href');
        if ($activeTab && $activeTab.startsWith('#')) {
            showTab($activeTab);
        }

        e.preventDefault();
    };

    $(document).on('click', ".tabs-normal .tabs-nav-lg a,  .tabs-normal .tabs-nav a, .tabs-normal .tabs-nav-sm a, .tabs-normal .tabs-nav-xsm a,.tabs-normal .tabs-nav-img a, .tabs-normal .tabs-nav-mn a", handleTabClick);

    showInitialTabs();
};

    $(this).each(function () {
        init(this);
    });
        return $(this);
    }
});

    //toggleFunc
    $.extend($.fn, {
        toggleFunc: function () {
            var init = function (obj) {
                var $currentTab = $(obj).find("[data-toggle]").find('a.is-active').attr('href');
                $($currentTab).show();
                $(document).on('click', '[data-toggle]', function (e) {
                    val = $(this).data('toggle');
                    $el = $('[data-toggleobj="' + val + '"]');
                    $btn = $('[data-toggle="' + val + '"]');
                    toggleCommonFunc({
                        obj: $btn,
                        className: 'is-active',
                        hasClass: function (obj) {
                            $el.css({'display': 'flex'});
                            TweenMax.fromTo($el, .5, {opacity: 0}, {opacity: 1});
                        },
                        noneClass: function (obj) {
                            TweenMax.fromTo($el, .5, {opacity: 1}, {opacity: 0});
                            $el.css({'display': 'none'});
                        }
                    });
                });
            };
            init(this);
            return $(this);
        }
    });

    //btnToggleFunc
    $.extend($.fn, {
        btnToggleFunc: function () {
            var init = function (obj) {
                $(document).on('click', '.btn-toggle', function (e) {
                    $btn = $(this);
                    toggleCommonFunc({
                        obj: $btn,
                        className: 'is-active',
                        hasClass: function (obj) {
                        },
                        noneClass: function (obj) {
                        }
                    });
                });
            };
            init(this);
            return $(this);
        }
    });

    //tipFunc
    $.extend($.fn, {
        tipFunc: function () {
            var init = function (obj) {
                var txt = $(obj).find("[data-tip]:checked").data('tip');
                $tip = $(obj).find('.tip-txt');
                $tip.css({
                    'display': 'flex'
                }).html(txt);
                $(document).on('click', '[data-tip]', function (e) {
                    txt = $(this).data('tip');
                    $area = $(this).closest('.tip-area');
                    $tip = $area.find('.tip-txt');
                    $tip.css({
                        'display': 'flex'
                    }).html(txt);
                });
            };
            init(this);
            return $(this);
        }
    });

    //etcFunc
    $.extend($.fn, {
        etcFunc: function () {
            var init = function (obj) {
                $(document).on('click', '.btn-etc-fnc', function (e) {
                    $area = $(this).closest('.etc-fnc-area');
                    $el = $area.find('.etc-fnc');
                    $('.etc-fnc-area').removeClass('is-active');
                    toggleCommonFunc({
                        obj: $area,
                        className: 'is-active',
                        hasClass: function (obj) {
                            $elArea = $el.closest('.etc-fnc-area');
                            // TweenMax.fromTo($el, .5, {opacity: 0}, {opacity: 1});
                            $('.etc-fnc-area').not($elArea).removeClass('is-active');
                        },
                        noneClass: function (obj) {
                            // TweenMax.fromTo($el, .5, {opacity: 1}, {opacity: 0});
                        }
                    });
                });
                $(document).click(function (e) {
                    if (!$(e.target).is('.btn-etc-fnc')) {
                        $('.etc-fnc-area').removeClass('is-active');
                    }
                });
            };
            init(this);
            return $(this);
        }
    });

    
     //tooltipFunc
     $.extend($.fn, {
        tooltipFunc: function () {
            var init = function (obj) {

                $(document).on('click', '.btn-tooltip', function (e) {
                    $area = $(this).closest('.tooltip');
                    $('.tooltip').removeClass('is-active');
                    toggleCommonFunc({
                        obj: $area,
                        className: 'is-active',
                        hasClass: function (obj) {
                        },
                        noneClass: function (obj) {
    
                        }
                    });
                });
                $(document).click(function (e) {
                    if (!$(e.target).is('.btn-tooltip')) {
                        $('.tooltip').removeClass('is-active');
                    }
                });
            };
            init(this);
            return $(this);
        }
    });

    $.extend($.fn, {
        navFunc: function () {
            var init = function (obj) {
                var $nav = $(obj);
                ssmFunc({
                    pc: function () {
                        $('.btn-nav-open').on('click', function () {
                            //$nav.addClass('is-active');
                            $nav.fadeIn();
                        });

                        $('.btn-nav-close, .dim').on('click', function () {
                            //$nav.removeClass('is-active');
                            $nav.fadeOut();
                        });
                    },
                    ta: function () {
                        $('.btn-nav-open').on('click', function () {
                            TweenMax.fromTo($nav, .3, {opacity: 0}, {opacity: 1});
                            $nav.addClass('is-active');
                            mNavOpen();
                        });
                        $('.btn-nav-close, .dim').on('click', function () {
                            $nav.removeClass('is-active');
                            mNavClose();
                        });
                    },
                    mo: function () {
                        $('.btn-nav-open').on('click', function () {
                            TweenMax.fromTo($nav, .3, {opacity: 0}, {opacity: 1});
                            $nav.addClass('is-active');
                            mNavOpen();
                        });
                        $('.btn-nav-close, .dim').on('click', function () {
                            $nav.removeClass('is-active');
                            mNavClose();
                        });
                    }
                });

                var mNavOpen = function () {
                    TweenMax.fromTo($('.site-nav .nav-util, .site-nav > ul'), .4, {
                        xPercent: 100,
                        opacity: 0
                    }, {xPercent: 0, opacity: 1});
                    $('.btn-nav-close').fadeIn();
                }

                var mNavClose = function () {
                    TweenMax.fromTo($('.site-nav .nav-util, .site-nav > ul'), .4, {
                        xPercent: 0,
                        opacity: 0
                    }, {xPercent: 100, opacity: 1});
                    $('.btn-nav-close').fadeOut();
                }
            };
            init(this);
            return $(this);
        }
    });

    // swiper
    $.extend($.fn, {
        mnVisualSwiper: function (obj) {
            var init = function (obj) {
                var $el = $(obj).find('.swiper');
                var $btnPrev = $(obj).find('.swiper-button-prev')[0];
                var $btnNext = $(obj).find('.swiper-button-next')[0];
                var $btnPlayStop = $(obj).find('.swiper-btn-playstop-toggle')[0];
                var $progress = $(obj).find('.swiper-progress-bar')[0];
                var isPaused = false; // 재생 상태를 추적하는 변수

                var swiper = new Swiper($el[0], {
                    effect:'fade',
                    fadeEffect: {
                        crossFade: true 
                    },
                    preloadImages: true,
                    autoplay: {
                        delay: 4000,
                        disableOnInteraction: false,
                    },
                    loop: true,
                    loopedSlides: 0,
                    speed: 1000,
                    slidesPerView: 1,
                    initialSlide: 0,
                    watchSlidesProgress: true,
                    navigation: {
                        prevEl: $btnPrev,
                        nextEl: $btnNext
                    },
                    on: {
                        slideChangeTransitionStart: function() {
                            if (!isPaused) {
                                $progress.style.transition = 'none';
                                $progress.style.width = '0%';
                            }
                        },
                        slideChangeTransitionEnd: function() {
                            if (!isPaused) {
                                setTimeout(() => {
                                    $progress.style.transition = 'width 4s linear';
                                    $progress.style.width = '100%';
                                }, 10);
                            }
                        }
                    }
                });

                // 중지 버튼 클릭 이벤트
                $($btnPlayStop).on('click', function() {
                    if (isPaused) {
                        // 슬라이드 재생
                        swiper.autoplay.start();
                        $progress.style.transition = 'width 4s linear';
                        $progress.style.width = '100%';
                        $(this).removeClass('is-stop').text('중지'); // 버튼 텍스트 변경
                        isPaused = false;
                    } else {
                        // 슬라이드 정지
                        swiper.autoplay.stop();
                        $progress.style.transition = 'none';
                        $progress.style.width = '0%'; // 프로그레스 바를 0으로 설정
                        $(this).addClass('is-stop').text('재생'); // 버튼 텍스트 변경
                        isPaused = true;
                    }
                });
            }
            init(this);
            return $(this);
        }
    });
    
    $.extend($.fn, {
        mnNoticeSwiper: function () {
            var init = function (obj) {
                var $el = $(obj).find('.swiper');
                var $btnPrev = $(obj).find('.swiper-button-prev')[0];
                var $btnNext = $(obj).find('.swiper-button-next')[0];
                var $btnPlayStop = $(obj).find('.swiper-btn-playstop-toggle')[0];
                var $progress = $(obj).find('.swiper-progress-bar')[0];              
                var isPaused = false; // 재생 상태를 추적하는 변수
                var swiper = new Swiper($el[0], {
                    preloadImages: true,
                    autoplay: {
                        delay: 3000,
                        disableOnInteraction: false,
                    },
                    loop: true,
                    loopedSlides: 0,
                    speed: 1000,
                    slidesPerView: 1,
                    initialSlide: 0,
                    watchSlidesProgress: true,
                    navigation: {
                        prevEl: $btnPrev,
                        nextEl: $btnNext
                    },
                    on: {
                        slideChangeTransitionStart: function() {
                            if (!isPaused) {
                                $progress.style.transition = 'none';
                                $progress.style.width = '0%';
                            }
                        },
                        slideChangeTransitionEnd: function() {
                            if (!isPaused) {
                                setTimeout(() => {
                                    $progress.style.transition = 'width 4s linear';
                                    $progress.style.width = '100%';
                                }, 10);
                            }
                        }
                    }
                });
                // 중지 버튼 클릭 이벤트
                $($btnPlayStop).on('click', function() {
                    if (isPaused) {
                        // 슬라이드 재생
                        swiper.autoplay.start();
                        $progress.style.transition = 'width 4s linear';
                        $progress.style.width = '100%';
                        $(this).removeClass('is-stop').text('중지'); // 버튼 텍스트 변경
                        isPaused = false;
                    } else {
                        // 슬라이드 정지
                        swiper.autoplay.stop();
                        $progress.style.transition = 'none';
                        $progress.style.width = '0%'; // 프로그레스 바를 0으로 설정
                        $(this).addClass('is-stop').text('재생'); // 버튼 텍스트 변경
                        isPaused = true;
                    }
                });
            }
            init(this);
            return $(this);
        }
    });      
    
    $.extend($.fn, {
        mnQuickSwiper: function () {
            var init = function (obj) {
                var $el = $(obj).find('.swiper');
                var $btnPrev = $(obj).find('.swiper-button-prev')[0];
                var $btnNext = $(obj).find('.swiper-button-next')[0];
                var swiper = new Swiper($el[0], {
                    preloadImages: true,
                    slidesPerView: 1,      // 한 번에 표시할 슬라이드 개수
                    loop: true,
                    loopedSlides: 0,
                    speed: 500,
                    slidesPerView: 1,
                    initialSlide: 0,
                    watchSlidesProgress: true,
                    navigation: {
                        prevEl: $btnPrev,
                        nextEl: $btnNext
                    },
                });
            }
            init(this);
            return $(this);
        }
    }); 
})(jQuery);

$(window).on('load', function () {
    //jquery-ui
    /*$('.datepicker').datepicker({
        showOn: "both",
        buttonImage: "../../../images/user/common/ico_cal.svg",
        buttonText: "기간 선택",
        // buttonImageOnly: true,
        changeMonth: true,
        changeYear: true
    });

    $(window).on('scroll', function () {
        $('#ui-datepicker-div').hide();
    });
*/
    //component
    //accordionFunc
    $('.accordion, .accordion-nav, .accordion-list').accordionFunc();
    $('.tabs-normal').tabsNormalFunc();
    //$('.popup').popupFunc();
    $('[data-toggle]').toggleFunc();
    $('.btn-toggle').btnToggleFunc();

    //func
    $('.etc-fnc-area').etcFunc();
    $('.tooltip').tooltipFunc();

    //swiper
    $('.mn-visual').mnVisualSwiper();
    $('.mn-notice').mnNoticeSwiper();
    $('.mn-quick').mnQuickSwiper();

    //input date 클릭시 달력 열림
    $('input[type=date]').on('focus', function() {
        this.showPicker();
    });

    setTimeout(function () {
        checkIsSticky();
    }, 100);

});
window.onscroll = () => {
    checkIsSticky();
}


// 메인 독서통계
const mnBookLegendPlugin = {
    id: 'mnBookLegendPlugin',
    afterDraw: (chart) => {
        const { ctx } = chart;
        const datasets = chart.data.datasets;

        datasets.forEach((dataset, index) => {
            const meta = chart.getDatasetMeta(index);
            const lastPoint = meta.data[meta.data.length - 1];

            if (lastPoint) {
                const label = dataset.label;
                const fontSize = 10;
                const paddingTop = 4;
                const paddingBottom = 4;
                const paddingLeft = 8;
                const paddingRight = 8;

                // 텍스트 측정
                ctx.font = `${fontSize}px Pretendard`;
                const textWidth = ctx.measureText(label).width;
                const textHeight = fontSize;

                // 범례 박스의 너비와 높이 계산
                const boxWidth = textWidth + paddingLeft + paddingRight;
                const boxHeight = textHeight + paddingTop + paddingBottom;

                // 범례 박스 위치 지정
                let x = lastPoint.x - boxWidth / 2; // 중앙 정렬
                let y = lastPoint.y - boxHeight / 2;

                // 차트의 경계와 비교하여 범례 박스 위치 조정
                if (x < 0) {
                    x = 0;
                }
                if (y < 0) {
                    y = 0;
                }
                if (x + boxWidth > chart.width) {
                    x = chart.width - boxWidth;
                }
                if (y + boxHeight > chart.height) {
                    y = chart.height - boxHeight;
                }

                // 배경 사각형 그리기
                ctx.save();
                ctx.fillStyle = dataset.borderColor;
                ctx.beginPath();
                ctx.roundRect(x, y, boxWidth, boxHeight, textHeight);
                ctx.fill();
                ctx.restore();

                // 텍스트 그리기
                ctx.save();
                ctx.font = `${fontSize}px Pretendard`;
                ctx.fillStyle = '#FFF';
                ctx.textAlign = 'center';
                ctx.textBaseline = 'middle';
                ctx.fillText(label, x + boxWidth / 2, y + boxHeight / 2);
                ctx.restore();
            }
        });
    }
};

const mnBookDatasetConfig = {
    fill: false,
    pointRadius: 0,
    borderWidth: 1.6,
    tension: 0.4
};

const createMnBookChart = ({ id, labels, datasets }) => {
    const ctx = document.getElementById(id).getContext('2d');

    // 데이터셋에 공통 설정과 색상 추가
    const datasetWithConfig = datasets.map((dataset, index) => {
        const colors = ['#358AEB', '#004BA0']; // 색상 배열
        return {
            ...mnBookDatasetConfig,
            ...dataset, // 전달된 데이터셋 설정을 오버라이드
            borderColor: colors[index % colors.length] // 데이터셋 순서에 따른 색상 지정
        };
    });

    const config = {
        type: 'line',
        data: { labels, datasets: datasetWithConfig },
        options: {
            animation: false,
            scales: {
                y: {
                    ticks: {
                        stepSize: 5,
                        maxTicksLimit: 5,
                        color: '#999',
                        font: {
                            family: 'Pretendard',
                            size: 10,
                            style: 'normal',
                            weight: '400',
                            lineHeight: 1,
                        },
                        textAlign: 'center'
                    },
                    grid: {
                        color: '#EFEFEF',
                        borderColor: 'transparent',
                        borderWidth: 0
                    }
                },
                x: {
                    ticks: {
                        color: '#999',
                        font: {
                            family: 'Pretendard',
                            size: 10,
                            style: 'normal',
                            weight: '400',
                            lineHeight: 1,
                        },
                        textAlign: 'center'
                    },
                    grid: {
                        display: false
                    }
                }
            },
            plugins: {
                legend: {
                    display: false
                }
            }
        },
        plugins: [mnBookLegendPlugin]
    };
    return new Chart(ctx, config);
};