/** Shopify CDN: Minification failed

Line 16:0 Unexpected "{"
Line 16:1 Expected identifier but found "%"
Line 17:37 Expected identifier but found whitespace
Line 21:10 Expected identifier but found "%"
Line 22:0 Unexpected "{"
Line 22:1 Expected identifier but found "%"
Line 26:0 Unexpected "{"
Line 26:1 Expected identifier but found "%"
Line 26:16 Unexpected "="
Line 26:68 Expected identifier but found "%"
... and 192 more hidden warnings

**/
{% comment %}
  Renders a mega menu for the header.
  PC: hover on any nav item → full mega menu panel
  PC: hover on search icon → search panel
  Mobile: fixed top tab bar → click tab → show submenu panel
  Usage: {% render 'header-dropdown-menu' %}
{% endcomment %}



{%- comment -%} ===================== PC NAV ===================== {%- endcomment -%}
<nav class='lumen-nav' id='LumenPCNav' aria-label='주요 메뉴'>
  <ul class='list-menu list-menu--inline' role='list'>
    {%- for link in section.settings.menu.links -%}
      <li>
        <a
          id='HeaderMenu-{{ link.handle }}'
          href='{{ link.url }}'
          class='header__menu-item list-menu__item link link--text focus-inset'
          {% if link.current %}aria-current='page'{% endif %}
          data-menu-handle='{{ link.handle }}'
        >
          <span{% if link.current %} class='header__active-menu-item'{% endif %}>
            {{- link.title | escape -}}
          </span>
        </a>
      </li>
    {%- endfor -%}
  </ul>
</nav>

{%- comment -%} ===================== PC MEGA MENU PANEL ===================== {%- endcomment -%}
<div class='mega-panel' id='MegaPanel' role='navigation' aria-label='전체 메뉴'>
  <div class='mega-panel__inner'>

    {%- comment -%}
      좌측 배너 — 메뉴별 탭 슬롯
      각 메뉴 handle에 맞는 배너 이미지를 section.settings에서 읽어
      data-banner-handle 속성으로 JS가 활성 탭을 전환함
      첫 번째 슬롯이 기본 활성
    {%- endcomment -%}
    <div class='mega-panel__banner'>
      {%- for link in section.settings.menu.links -%}
        {%- assign b_img_key   = 'menu_banner_' | append: link.handle | append: '_image' -%}
        {%- assign b_title_key = 'menu_banner_' | append: link.handle | append: '_title' -%}
        {%- assign b_link_key  = 'menu_banner_' | append: link.handle | append: '_link' -%}
        <a
          class='mega-panel__banner-slot{% if forloop.first %} is-active{% endif %}'
          href='{{ section.settings[b_link_key] | default: link.url }}'
          data-banner-handle='{{ link.handle }}'
        >
          {%- if section.settings[b_img_key] != blank -%}
            <img
              class='mega-panel__banner-img'
              src='{{ section.settings[b_img_key] | image_url: width: 520 }}'
              alt='{{ section.settings[b_title_key] | default: link.title | escape }}'
              width='351'
              height='248'
              loading='lazy'
            >
            {%- if section.settings[b_title_key] != blank -%}
              <span class='mega-panel__banner-title'>{{ section.settings[b_title_key] | escape }}</span>
            {%- endif -%}
          {%- else -%}
            <div class='mega-panel__banner-placeholder'></div>
          {%- endif -%}
        </a>
      {%- endfor -%}
    </div>

    {%- comment -%} 우측 4컬럼 링크 {%- endcomment -%}
    <div class='mega-panel__container'>
      {%- for link in section.settings.menu.links -%}
        {%- if link.links != blank -%}
          <div class='mega-panel__col' data-col-handle='{{ link.handle }}'>
            <ul class='mega-panel__sublist' role='list'>
              {%- for childlink in link.links -%}
                <li>
                  <a
                    href='{{ childlink.url }}'
                    class='mega-panel__sublink{% if childlink.current %} mega-panel__sublink--active{% endif %}'
                    {% if childlink.current %}aria-current='page'{% endif %}
                  >
                    {{- childlink.title | escape -}}
                  </a>
                </li>
              {%- endfor -%}
            </ul>
          </div>
        {%- endif -%}
      {%- endfor -%}
    </div>

  </div>
</div>

{%- comment -%} ===================== PC SEARCH PANEL ===================== {%- endcomment -%}
<div class='search-panel' id='SearchPanel' role='dialog' aria-label='{{ 'general.search.search' | t }}'>
  <div class='search-panel__inner'>
    <form action='{{ routes.search_url }}' method='get' role='search'>
      <input type='hidden' name='type' value='product'>
      <div class='search-panel__input-wrap'>
        <input
          class='search-panel__input'
          type='search'
          name='q'
          id='PCSearchInput'
          placeholder='{{ 'general.search.search' | t }}'
          autocomplete='off'
          aria-label='{{ 'general.search.search' | t }}'
        >
        <button type='submit' class='search-panel__submit' aria-label='{{ 'general.search.search' | t }}'>
          <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22' fill='none' aria-hidden='true'>
            <circle cx='9.5' cy='9.5' r='8.75' stroke='#000' stroke-width='0.5'/>
            <line x1='15.7' y1='15.7' x2='21' y2='21' stroke='#000' stroke-width='0.5' stroke-linecap='round'/>
          </svg>
        </button>
      </div>
    </form>
    <div class='search-panel__body'>
      <div>
        <p class='search-panel__keywords-title'>NOW TRENDING</p>
        <ul class='search-panel__keywords' role='list'>
          {%- for i in (1..5) -%}
            {%- assign kw_key = 'search_keyword_' | append: i -%}
            {%- if section.settings[kw_key] != blank -%}
              <li>
                <a href='{{ routes.search_url }}?q={{ section.settings[kw_key] | url_encode }}&type=product'>
                  {{- section.settings[kw_key] -}}
                </a>
              </li>
            {%- endif -%}
          {%- endfor -%}
        </ul>
      </div>
      <div class='search-panel__banners'>
        {%- if section.settings.search_banner_1_image != blank -%}
          <a href='{{ section.settings.search_banner_1_url | default: '#' }}' class='search-panel__banner-item'>
            <img
              src='{{ section.settings.search_banner_1_image | image_url: width: 400 }}'
              alt='{{ section.settings.search_banner_1_label | default: '' | escape }}'
              width='200' height='200' loading='lazy'
            >
            <span>{{ section.settings.search_banner_1_label | default: '' }}</span>
          </a>
        {%- endif -%}
        {%- if section.settings.search_banner_2_image != blank -%}
          <a href='{{ section.settings.search_banner_2_url | default: '#' }}' class='search-panel__banner-item'>
            <img
              src='{{ section.settings.search_banner_2_image | image_url: width: 400 }}'
              alt='{{ section.settings.search_banner_2_label | default: '' | escape }}'
              width='200' height='200' loading='lazy'
            >
            <span>{{ section.settings.search_banner_2_label | default: '' }}</span>
          </a>
        {%- endif -%}
      </div>
    </div>
  </div>
</div>

{%- comment -%} ===================== MOBILE NAV ===================== {%- endcomment -%}
<div class='mobile-nav' id='MobileMegaNav'>

  {%- comment -%} 모바일 검색 패널 {%- endcomment -%}
  <div class='mobile-nav__search-panel' id='MobileSearchPanel'>
    <form action='{{ routes.search_url }}' method='get' role='search'>
      <input type='hidden' name='type' value='product'>
      <div class='mobile-nav__search-input-wrap'>
        <input
          class='mobile-nav__search-input'
          type='search'
          name='q'
          id='MobileSearchInput'
          placeholder='{{ 'general.search.search' | t }}'
          autocomplete='off'
          aria-label='{{ 'general.search.search' | t }}'
        >
        <button type='submit' class='mobile-nav__search-submit' aria-label='{{ 'general.search.search' | t }}'>
          <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22' fill='none' aria-hidden='true'>
            <circle cx='9.5' cy='9.5' r='8.75' stroke='#000' stroke-width='0.5'/>
            <line x1='15.7' y1='15.7' x2='21' y2='21' stroke='#000' stroke-width='0.5' stroke-linecap='round'/>
          </svg>
        </button>
      </div>
    </form>

    <div class='mobile-nav__trending-wrap'>
      <p class='mobile-nav__keywords-title'>NOW TRENDING</p>
      <ul class='mobile-nav__keywords' role='list'>
        {%- for i in (1..5) -%}
          {%- assign kw_key = 'search_keyword_' | append: i -%}
          {%- if section.settings[kw_key] != blank -%}
            <li>
              <a href='{{ routes.search_url }}?q={{ section.settings[kw_key] | url_encode }}&type=product'>
                {{- section.settings[kw_key] -}}
              </a>
            </li>
          {%- endif -%}
        {%- endfor -%}
      </ul>
    </div>

    <div class='mobile-nav__search-banners'>
      {%- if section.settings.search_banner_1_image != blank -%}
        <a href='{{ section.settings.search_banner_1_url | default: '#' }}' class='mobile-nav__search-banner'>
          <img
            src='{{ section.settings.search_banner_1_image | image_url: width: 400 }}'
            alt='{{ section.settings.search_banner_1_label | default: '' | escape }}'
            width='200' height='200' loading='lazy'
          >
          <span>{{ section.settings.search_banner_1_label | default: '' }}</span>
        </a>
      {%- endif -%}
      {%- if section.settings.search_banner_2_image != blank -%}
        <a href='{{ section.settings.search_banner_2_url | default: '#' }}' class='mobile-nav__search-banner'>
          <img
            src='{{ section.settings.search_banner_2_image | image_url: width: 400 }}'
            alt='{{ section.settings.search_banner_2_label | default: '' | escape }}'
            width='200' height='200' loading='lazy'
          >
          <span>{{ section.settings.search_banner_2_label | default: '' }}</span>
        </a>
      {%- endif -%}
    </div>
  </div>

  {%- comment -%} 대메뉴 탭 바 {%- endcomment -%}
  <div class='mobile-nav__tabs' id='MobileNavTabs' role='tablist'>
    {%- for link in section.settings.menu.links -%}
      <button
        class='mobile-nav__tab{% if forloop.first %} is-active{% endif %}'
        role='tab'
        aria-selected='{% if forloop.first %}true{% else %}false{% endif %}'
        aria-controls='MobilePanel-{{ link.handle }}'
        data-handle='{{ link.handle }}'
        id='MobileTab-{{ link.handle }}'
        type='button'
      >
        {{- link.title | escape -}}
      </button>
    {%- endfor -%}
  </div>

  {%- comment -%} 패널 목록 {%- endcomment -%}
  <div class='mobile-nav__panels' id='MobileNavPanels'>
    {%- for link in section.settings.menu.links -%}
      <div
        class='mobile-nav__panel{% if forloop.first %} is-active{% endif %}'
        id='MobilePanel-{{ link.handle }}'
        role='tabpanel'
        aria-labelledby='MobileTab-{{ link.handle }}'
      >
        {%- comment -%}
          배너 이미지 — PC 메가메뉴와 공용 key
          key 규칙: menu_banner_{handle}_image / _title / _link
        {%- endcomment -%}
        {%- assign banner_image_key = 'menu_banner_' | append: link.handle | append: '_image' -%}
        {%- assign banner_label_key = 'menu_banner_' | append: link.handle | append: '_title' -%}
        {%- assign banner_url_key   = 'menu_banner_' | append: link.handle | append: '_link' -%}

        {%- if section.settings[banner_image_key] != blank -%}
          <a href='{{ section.settings[banner_url_key] | default: link.url }}' class='mobile-nav__panel-banner'>
            <img
              src='{{ section.settings[banner_image_key] | image_url: width: 800 }}'
              alt='{{ section.settings[banner_label_key] | default: link.title | escape }}'
              loading='lazy'
              width='375'
              height='208'
            >
            {%- if section.settings[banner_label_key] != blank -%}
              <span class='mobile-nav__panel-banner-label'>
                {{- section.settings[banner_label_key] | escape -}}
              </span>
            {%- endif -%}
          </a>
        {%- endif -%}

        {%- comment -%} 소메뉴 리스트 {%- endcomment -%}
        {%- if link.links != blank -%}
          <ul class='mobile-nav__sublist' role='list'>
            {%- for childlink in link.links -%}
              <li>
                <a
                  href='{{ childlink.url }}'
                  class='mobile-nav__sublink{% if childlink.current %} mobile-nav__sublink--active{% endif %}'
                  {% if childlink.current %}aria-current='page'{% endif %}
                >
                  {{- childlink.title | escape -}}
                </a>
              </li>
            {%- endfor -%}
          </ul>
        {%- endif -%}
      </div>
    {%- endfor -%}
  </div>

</div>

<script>
  (function () {
    /* ── 헤더 높이 → CSS 변수 ── */
    function setPanelTop() {
      var header = document.querySelector('header, .header, .site-header, [data-section-type="header"]');
      if (header) {
        var h = header.getBoundingClientRect().bottom;
        document.documentElement.style.setProperty('--mega-panel-top', h + 'px');
      }
    }
    setPanelTop();
    window.addEventListener('resize', setPanelTop);
    window.addEventListener('scroll', setPanelTop, { passive: true });

    var pcNav        = document.getElementById('LumenPCNav');
    var megaPanel    = document.getElementById('MegaPanel');
    var searchPanel  = document.getElementById('SearchPanel');
    var mobileNavEl  = document.getElementById('MobileMegaNav');
    var headerWrapper = document.querySelector('.header-wrapper');

    function setHeaderOpen()   { if (headerWrapper) headerWrapper.classList.add('panel-open'); }
    function setHeaderClosed() { if (headerWrapper) headerWrapper.classList.remove('panel-open'); }

    function positionAllCols() {
      if (!pcNav || !megaPanel) return;
      var container = megaPanel.querySelector('.mega-panel__container');
      if (!container) return;
      var containerLeft = container.getBoundingClientRect().left;

      pcNav.querySelectorAll('[data-menu-handle]').forEach(function (item) {
        var handle = item.dataset.menuHandle;
        var col = megaPanel.querySelector('[data-col-handle="' + handle + '"]');
        if (!col) return;
        col.style.left = Math.max(0, item.getBoundingClientRect().left - containerLeft) + 'px';
      });
    }
    window.addEventListener('resize', function () {
      if (megaPanel && megaPanel.classList.contains('is-visible')) positionAllCols();
    });

    function alignSearchPanel() {
      if (window.innerWidth < 1200) return;
      var searchInner = document.querySelector('.search-panel__inner');
      var searchBody  = document.querySelector('.search-panel__body');
      if (!pcNav || !searchInner || !searchBody) return;
      var navLeft   = pcNav.getBoundingClientRect().left;
      var innerLeft = searchInner.getBoundingClientRect().left;
      searchBody.style.marginLeft = Math.max(0, navLeft - innerLeft) + 'px';
    }
    alignSearchPanel();
    window.addEventListener('resize', alignSearchPanel);

    /* ── PC 메가 메뉴 ── */
    if (pcNav && megaPanel) {
      var menuCloseTimer;

      function openMega(handle) {
        clearTimeout(menuCloseTimer);
        closeSearch();
        megaPanel.classList.add('is-visible');
        setHeaderOpen();
        positionAllCols();
        /* 배너 슬롯 전환 */
        if (handle) {
          var slots = megaPanel.querySelectorAll('.mega-panel__banner-slot');
          slots.forEach(function(slot) {
            slot.classList.toggle('is-active', slot.dataset.bannerHandle === handle);
          });
          /* 모바일 패널 배너도 동기화 */
          var mPanelBanners = document.querySelectorAll('.mobile-nav__panel-banner');
          mPanelBanners.forEach(function(b) {
            b.style.display = b.closest('[id]') && b.closest('[id]').id === 'MobilePanel-' + handle ? '' : '';
          });
        }
      }
      function scheduleMegaClose() {
        menuCloseTimer = setTimeout(function () {
          megaPanel.classList.remove('is-visible');
          setHeaderClosed();
        }, 150);
      }

      /* 메뉴 전체 진입 시 첫 번째 handle로 열기 */
      pcNav.addEventListener('mouseenter', function(e) {
        var firstItem = pcNav.querySelector('[data-menu-handle]');
        openMega(firstItem ? firstItem.dataset.menuHandle : null);
      });
      /* 개별 메뉴 아이템 hover → 해당 배너로 전환 */
      pcNav.querySelectorAll('[data-menu-handle]').forEach(function(item) {
        item.addEventListener('mouseenter', function() {
          openMega(item.dataset.menuHandle);
        });
      });
      pcNav.addEventListener('mouseleave', scheduleMegaClose);
      megaPanel.addEventListener('mouseenter', function () { clearTimeout(menuCloseTimer); });
      megaPanel.addEventListener('mouseleave', scheduleMegaClose);
    }

    /* ── PC 검색 패널 ── */
    function openSearch() {
      closeMenu();
      if (searchPanel) {
        searchPanel.classList.add('is-visible');
        setTimeout(function () {
          var input = document.getElementById('PCSearchInput');
          if (input) input.focus();
        }, 50);
      }
      setHeaderOpen();
    }
    function closeSearch() {
      if (searchPanel) searchPanel.classList.remove('is-visible');
      if (!megaPanel || !megaPanel.classList.contains('is-visible')) setHeaderClosed();
    }
    function closeMenu() {
      if (megaPanel) megaPanel.classList.remove('is-visible');
      if (!searchPanel || !searchPanel.classList.contains('is-visible')) setHeaderClosed();
    }

    /* ── 검색 아이콘 클릭 (이벤트 위임) ── */
    document.addEventListener('click', function (e) {
      var trigger = e.target.closest('.header__icon--search, [data-search-toggle]');
      if (!trigger) return;
      e.preventDefault();
      e.stopPropagation();

      if (window.innerWidth >= 1200) {
        if (searchPanel) {
          if (searchPanel.classList.contains('is-visible')) {
            closeSearch();
          } else {
            openSearch();
          }
        }
      } else {
        var mobileSearch = document.getElementById('MobileSearchPanel');
        var tabsEl   = document.getElementById('MobileNavTabs');
        var panelsEl = document.getElementById('MobileNavPanels');
        var isOpen   = mobileSearch && mobileSearch.classList.contains('is-active');

        if (isOpen) {
          if (mobileSearch) mobileSearch.classList.remove('is-active');
          if (tabsEl)   tabsEl.style.display = '';
          if (panelsEl) panelsEl.style.display = '';
          if (mobileNavEl) mobileNavEl.classList.remove('is-open');
          setHeaderClosed();
        } else {
          if (mobileNavEl) mobileNavEl.classList.add('is-open');
          setHeaderOpen();
          if (tabsEl)   tabsEl.style.display = 'none';
          if (panelsEl) panelsEl.style.display = 'none';
          if (mobileSearch) mobileSearch.classList.add('is-active');
          setTimeout(function () {
            var input = document.getElementById('MobileSearchInput');
            if (input) input.focus();
          }, 100);
        }
      }
    }, true);

    /* ── ESC 닫기 ── */
    document.addEventListener('keydown', function (e) {
      if (e.key !== 'Escape') return;
      closeSearch();
      closeMenu();
      var mobileSearch = document.getElementById('MobileSearchPanel');
      if (mobileSearch) mobileSearch.classList.remove('is-active');
      if (mobileNavEl)  mobileNavEl.classList.remove('is-open');
      setHeaderClosed();
    });

    /* ── 외부 클릭 닫기 (PC) ── */
    document.addEventListener('click', function (e) {
      if (window.innerWidth < 1200) return;
      var inNav    = pcNav       && pcNav.contains(e.target);
      var inMega   = megaPanel   && megaPanel.contains(e.target);
      var inSearch = searchPanel && searchPanel.contains(e.target);
      if (!inNav && !inMega && !inSearch) {
        closeSearch();
        closeMenu();
      }
    });

    /* ── 모바일 탭 전환 ── */
    var mobileTabs   = document.querySelectorAll('#MobileNavTabs .mobile-nav__tab');
    var mobilePanels = document.querySelectorAll('#MobileNavPanels .mobile-nav__panel');

    mobileTabs.forEach(function (tab) {
      tab.addEventListener('click', function () {
        var handle = tab.dataset.handle;

        mobileTabs.forEach(function (t) {
          t.classList.remove('is-active');
          t.setAttribute('aria-selected', 'false');
        });
        tab.classList.add('is-active');
        tab.setAttribute('aria-selected', 'true');

        mobilePanels.forEach(function (p) { p.classList.remove('is-active'); });
        var target = document.getElementById('MobilePanel-' + handle);
        if (target) target.classList.add('is-active');

        /* PC 메가메뉴 배너 슬롯도 동기화 */
        if (megaPanel) {
          var slots = megaPanel.querySelectorAll('.mega-panel__banner-slot');
          slots.forEach(function(slot) {
            slot.classList.toggle('is-active', slot.dataset.bannerHandle === handle);
          });
        }

        var mobileSearch = document.getElementById('MobileSearchPanel');
        if (mobileSearch) mobileSearch.classList.remove('is-active');
      });
    });

    /* ── 모바일 햄버거 → mobile-nav 토글 ── */
    var headerDrawerEl = document.querySelector('header-drawer');
    if (headerDrawerEl && mobileNavEl) {
      headerDrawerEl.addEventListener('click', function (e) {
        if (window.innerWidth >= 1200) return;
        var btn = e.target.closest('.header__icon--menu, summary');
        if (!btn) return;
        e.preventDefault();
        e.stopPropagation();
        var isOpen = mobileNavEl.classList.contains('is-open');
        mobileNavEl.classList.toggle('is-open');
        if (isOpen) { setHeaderClosed(); } else { setHeaderOpen(); }
      }, true);
    }

    /* ── Shopify 섹션 리로드 대응 ── */
    document.addEventListener('shopify:section:load', function () { setPanelTop(); positionAllCols(); alignSearchPanel(); });
  })();
</script>