/*! 2024. 5. 2. 오후 4:59:26 */
/******/ (() => { // webpackBootstrap
var __webpack_exports__ = {};
(() => {
  const { EventManager, utils } = ShopbySkin;

  // 상단 카테고리 slider 초기화
  EventManager.fire('INIT_CATEGORY_SLIDER', {
    direction: 'horizontal',
    effect: 'slide',
    slidesPerView: 'auto',
  });

  const { createPageScriptInstance } = utils;
  const pageScriptInstance = createPageScriptInstance('MOBILE');
	// 외부스크립트 등록 기능. 삭제금지
  pageScriptInstance.appendPageScript('PAGE_SCRIPT', 'MAIN');

  EventManager.on('ON_API', (data) => {
    const { mallName = '' } = data?.mallConfig?.mall || {};

    const titleEl = document.head.querySelector('title');

    if (titleEl instanceof HTMLElement) {
      titleEl.innerText = mallName;
    }
  });
})();

/******/ })()
;
setTimeout(() => {
    const apBrand = (function () {
        let currentIndex = null;
        let wheelObserver = null;
        let anchorTrigger = null;
        let isScrolling = false;
        let isWheelSlides = false;

        const anchorAttr = '[data-scroll-anchor]';
        const anchorSections = document.querySelectorAll(`#main ${anchorAttr}`);
        //console.log(anchorSections);
        const inner = document.querySelector('.ap-post__inner');
        const kv = document.querySelector('.ap-section--kv');
        //const intro = document.querySelector('.ap-section--intro');
        const videoS = document.querySelector('.ap-section--video');
        //const info = document.querySelector('.ap-section--info');
        //const pillar = document.querySelector('.ap-section--pillar');
        // const product = document.querySelector(".ap-section--product");
        const end = document.querySelector('.ap-section--end');
        const productClassName = 'ap-section--product';
        const productImgSwipers = [];
        const scrollToOffsetY = 0;

        // 誘몃뵒�댁옘由� 泥댄겕
        const mm = gsap.matchMedia();
        const options = {
            isMobile: "(max-width: 720px)",
            isDesktop: "(min-width: 721px)",
            isTablet: "(max-width: 1440px) and (orientation: portrait)",
        };

        const isAnchor = function (section) {
            if (section) {
                const dataAnchor = section.dataset.scrollAnchor;
                const dataIgnore = section.dataset.anchorIgnore;
                const dataAnchorAutoTarget = section.dataset.anchorAutoTarget;
                let result = null;

                mm.add(options, (ctx) => {
                    ctx.revert();
                    const { isMobile, isDesktop, isTablet } = ctx.conditions;
                    
                    if (dataAnchor && dataAnchor === 'true') {
                        const targetSection = section.querySelector(dataAnchorAutoTarget);
                        const getPos = targetSection && targetSection.getBoundingClientRect();
                        const deviceCheck = (isMobile && dataIgnore === 'mobile') || (isTablet && dataIgnore === 'mobile') || (isDesktop && dataIgnore === 'pc');

                        if (deviceCheck || dataIgnore === 'auto') {
                            result = false;
                        } else {
                            result = true;
                        }
                    }
                });
                
                return result;
            }
        };

        const isTouchEvt = function (e) {
            return e.touches && e.touches.length > 0;
        };

        const preventScroll = {
            disableObserver: function () {
                if (wheelObserver.isEnabled) {
                    wheelObserver.disable();
                    
                    debugConsole.update();
                }
            },
            enableObserver: function () {
                if (!wheelObserver.isEnabled) {
                    wheelObserver.enable();
                    
                    debugConsole.update();
                }
            }
        }

        const setCurrentIndex = function () {
            anchorSections.forEach((section, index) => {
                anchorTrigger = ScrollTrigger.create({
                    trigger: section,
                    id: `section${index}`,
                    start: `top-=1px top`,
                    end: 'bottom top',
                    onToggle: (self) => {
                        if (self.isActive) {
                            setToggleObserver(self);

                            debugConsole.update();
                        }
                    },
                    onUpdate: (self) => {
                        if (self.isActive) {
                            if (currentIndex !== index) {
                                currentIndex = index;
            
                                debugConsole.update();
                            }
                        }
                    },
                    onRefresh: (self) => {
                        if (self.isActive) {
                            currentIndex = index;
            
                            debugConsole.update();
                        }
                    },
                    invalidateOnRefresh: true,
                    preventOverlaps: true,
                    // markers: true

                });
            });
        };

        const setToggleObserver = function(st) {
            if (isScrolling) return;

            if (st.direction === -1) {
                if (!isAnchor(anchorSections[currentIndex])) {
                    // wheelObserver 鍮꾪솢�깊솕 - �쇰컲 �ㅽ겕濡ㅻ줈 蹂�寃�
                    preventScroll.disableObserver();
                } else {
                    preventScroll.enableObserver();
                }
            } else {
                if (!isAnchor(anchorSections[currentIndex]) || currentIndex === anchorSections.length - 1) {
                    // wheelObserver 鍮꾪솢�깊솕 - �쇰컲 �ㅽ겕濡ㅻ줈 蹂�寃�
                    preventScroll.disableObserver();
                } else {
                    preventScroll.enableObserver();
                }
            }
        };

        const setAnimateEffect = (function() {
            const createScrollTrigger = function(trigger, start, end, scrub = false, pin = false, animation = null) {
                ScrollTrigger.create({
                    trigger,
                    start,
                    end,
                    scrub,
                    pin,
                    animation,
                    toggleActions: 'play pause play reverse',
                    invalidateOnRefresh: true,
                    // markers:true,
                });
            }
            
            const kvEffect = function() {
            const header = kv.querySelector('.ap-section__header');
            const logo = header.querySelector('.ap-logo');
            const svg = logo.querySelector('svg');
            const paths = svg.querySelectorAll('.st0'); // Select all path elements
            const title = kv.querySelector('.ap-section__title');

                mm.add(options, (ctx) => {
                    ctx.revert();
                    const { isMobile } = ctx.conditions;

                    gsap.set(kv, { position: 'relative' });
                    gsap.set(logo, { zIndex: 1 });

                    const tl = gsap
                    .timeline()
                    .to(svg, {
                        scale: isMobile ? 1.6 : 3.76,
                        opacity: 0,
                        duration: 10,
                        ease: 'none',
                        delay: 0,
                        zIndex: 1,
                    })
                    .to(gsap.utils.toArray(paths), { // Convert NodeList to array
                        fill: '#fff',
                        duration: 10,
                        stagger: 0.1, // Add stagger effect to animate each path separately
                    }, '<')
                    //.fromTo(title, { yPercent: 20, opacity: 0}, { yPercent: 0, opacity: 1 }, '+=0.1');

                    createScrollTrigger(header, "top top", "bottom top", 1, logo, tl);
                });
            }

            const introEffect = function() {
                const body = videoS.querySelector('.ap-section__body');
                //const h2 = intro.querySelector('.ap-section__title');
                const videoWrapper = videoS.querySelector('.ap-video__wrapper');
                const videoEle = videoS.querySelector('.ap-video img');
                //const videoEleMo = videoS.querySelector('.ap-video video.only-mo');

                // const pauseVideo = function(video) {
                //     video.pause();
                //     video.currentTime = 0;
                // };

                const createST = function(clipPath, videoEle) {
                    const playAnimation = () => gsap.to(videoWrapper, { clipPath: 'circle(80% at 50% 50%)', ease: 'none' });
                    const resetClipPath = () => gsap.to(videoWrapper, {clipPath});

                    gsap.set(videoWrapper, { clipPath });

                    
                    ScrollTrigger.create({
                        trigger: videoS.querySelector('.ap-video'),
                        start: 'top-=2px top',
                        end: 'bottom top',
                        //onLeave: () => pauseVideo(videoEle),
                        onLeaveBack: () => {
                            //pauseVideo(videoEle);
                            resetClipPath();
                        },
                        onEnter: () => {
                            //videoEle.play();
                            playAnimation();
                        },
                        //onEnterBack: () => videoEle.play(),
                    });
                }

                //gsap.fromTo(h2, { opacity: 0, y: 50 }, { opacity: 1, y: 0, duration: 1, ease: 'power2.out', scrollTrigger: h2 });

                mm.add(options, (ctx) => {
                    ctx.revert();
                    const { isMobile } = ctx.conditions;

                    createST("circle(20% at 50% 50%)", videoEle);
                });
                //createScrollTrigger(body, "top-=60% top", "bottom top", false, false, tl);
            };

            const endEffect = function() {
                createScrollTrigger(end.querySelector(".ap-section__body"), "top top", "bottom top", null, false, null);
            }

            const onInit = function() {
                kvEffect();
                introEffect();
                //pillarEffect();
                //infoEffect();
                endEffect();
            }
            
            return {
                init: onInit
            }
        })();

        const scrollToSection = function (index) {
            const targetSection = anchorSections[index] || anchorSections[currentIndex];
            //console.log(targetSection);
            let setOffsetObj = { y: targetSection, offsetY: 0 };

            if (isScrolling && !isAnchor(targetSection)) return;
            
            gsap.to(window, {
                duration: 1,
                scrollTo: setOffsetObj,
                ease: 'power2.inOut', // 遺��쒕윭�� �ㅽ겕濡ㅼ쓣 �꾪븳 easing
                onStart: () => {
                    isScrolling = true;

                    debugConsole.update();
                },
                onComplete: () => {
                    currentIndex = index;
                    isScrolling = false;

                    if (!isAnchor(anchorSections[currentIndex]) || currentIndex === anchorSections.length - 1) {
                        // wheelObserver 鍮꾪솢�깊솕 - �쇰컲 �ㅽ겕濡ㅻ줈 蹂�寃�
                        preventScroll.disableObserver();
                    } else {
                        preventScroll.enableObserver();
                    }

                    debugConsole.update();
                },
            });
        };

        const scrollToPrevSection = function (observer) {
            if (currentIndex >= 0) {
                const currentSection = anchorSections[currentIndex];
                //const isProductSection = currentSection && currentSection.classList.contains(productClassName);
                const isSectionInView = Math.trunc(currentSection.getBoundingClientRect().top) < scrollToOffsetY;

                const goPrevSection = function () {
                    const prevIndex = currentIndex > 0 ? currentIndex - 1 : currentIndex;
                    
                    if (isSectionInView) {
                        scrollToSection(currentIndex);
                    } else {
                        scrollToSection(prevIndex);
                    }
                };

                
                    goPrevSection();
            }
        };
        const scrollToNextSection = function (observer) {
            if (currentIndex < anchorSections.length - 1) {
                const currentSection = anchorSections[currentIndex];
                //const isProductSection = currentSection && currentSection.classList.contains(productClassName);
                const isSectionInView = Math.trunc(currentSection.getBoundingClientRect().top) < scrollToOffsetY;

                const goNextSection = function () {
                    const nextIndex = currentIndex + 1;
                    scrollToSection(nextIndex);
                };

                
                    goNextSection();
            }
        };

        const wheelEvt = function () {
            wheelObserver = ScrollTrigger.observe({
                target: window,
                type: 'wheel,touch,pointer',
                dragMinimum: 30,
                tolerance: 30,
                lockAxis: true, // drag �쒗븳 - �띿뒪�� �좏깮�� �꾪븳 �붾㈃ �쒕옒洹� �됱쐞 �� 怨좊젮
                preventDefault: true,
                onUp: (self) => {
                    const e = self.event;

                    if (isScrolling) return;

                    if (currentIndex !== null) {
                        if (isTouchEvt(e)) {
                            // touch �대깽�� �쇰븣�� 諛섎� 諛⑺뼢 - mobile only
                            scrollToNextSection(self);
                        } else {
                            scrollToPrevSection(self);
                        }
                        
                        debugConsole.update();
                    }
                },
                onDown: (self) => {
                    const e = self.event;

                    if (isScrolling) return;

                    if (currentIndex !== null) {
                        if (isTouchEvt(e)) {
                            // touch �대깽�� �쇰븣�� 諛섎� 諛⑺뼢 - mobile only
                            scrollToPrevSection(self);
                        } else {
                            if (wheelObserver.isEnabled) {
                                scrollToNextSection(self);
                            }
                        }

                        debugConsole.update();
                    }
                }
            });
        };

        // �붾쾭源낆슜 �ㅽ겕由쏀듃
        const debugConsole = (function () {
            let consoleEl = null;

            const onUpdate = function () {
                if (consoleEl) {
                    if (consoleEl.querySelector('.log')) {
                        consoleEl.querySelector('.log').textContent = `
                            currentIndex: ${currentIndex} / 
                            isScrolling : ${isScrolling} / 
                            isWheelSlides : ${isWheelSlides} / 
                            wheelObserver.isEnabled : ${wheelObserver && wheelObserver.isEnabled}
                        `;
                    }

                    if (consoleEl.querySelectorAll('button').length > 0) {
                        consoleEl.querySelectorAll('button').forEach((button, index) => {
                            if (index === currentIndex) {
                                button.classList.add('is-active');
                            } else {
                                button.classList.remove('is-active');
                            }
                        });
                    }
                }
            };

            const onInit = function () {
                const newEl = document.createElement('div');
                newEl.classList.add('debug-console');
                document.body.appendChild(newEl);
                consoleEl = document.querySelector('.debug-console');

                if (consoleEl) {
                    let html = '';

                    html += '<p class="log"></p>';
                    anchorSections.forEach((section, index) => {
                        const isActive = index === currentIndex ? 'is-active' : '';
                        html += `<button type="button" onclick="apBrand.toSection(${index})" class="${isActive}">${index}</button>`;
                    });
                    consoleEl.insertAdjacentHTML('beforeend', html);
                    onUpdate();
                }
            };

            return {
                init: onInit,
                update: onUpdate,
            };
        })();

        const onInit = function () {
            //gsap.registerPlugin(ScrollTrigger, ScrollToPlugin);
            
            setAnimateEffect.init();
            //setProductPillars();
            wheelEvt();
            setCurrentIndex();
            AOS.init();

            // debugConsole.init(); // 媛쒕컻 �묒뾽�� - 諛고룷�쒖뿉�� 二쇱꽍 泥섎━
        };

        ScrollTrigger.config({
            autoRefreshEvents: 'visibilitychange,DOMContentLoaded,load',
            limitCallbacks: true
        });
        
        let resizeTimer;
        window.addEventListener('resize', function() {
            clearTimeout(resizeTimer);

            resizeTimer = setTimeout(() => {
                ScrollTrigger.refresh();
                AOS.refresh()
            }, 250);
        });
        
        return {
            init: onInit,
            toSection: scrollToSection,
        };
    })();
   apBrand.init();
   //모바일 디바이스 기기 기준 height 100%
    const setVh = () => {
      let vh = window.innerHeight * 0.01;
      document.documentElement.style.setProperty('--vh', `${vh}px`);
    }
    setVh();
    window.addEventListener('resize', setVh);
}, 100);