document.addEventListener('DOMContentLoaded', () => {
  const nav = document.querySelector('.lnblist');
  if (!nav) return;

  // hover-bg 요소 확보
  let hoverEl = nav.querySelector('.hover-bg');
  if (!hoverEl) {
    hoverEl = document.createElement('li');
    hoverEl.className = 'hover-bg';
    hoverEl.setAttribute('aria-hidden', 'true');
    nav.appendChild(hoverEl);
  }

  const items = Array.from(nav.querySelectorAll('li')).filter(li => !li.classList.contains('hover-bg'));
  if (!items.length) return;

  // 현재 페이지 파일명 가져오기
  const currentPage = window.location.pathname.split('/').pop(); // e.g., "intro02.html"

  // active 메뉴 찾기: URL과 href 일치하는 li
  let currentIndex = items.findIndex(li => {
    const link = li.querySelector('a');
    if (!link) return false;
    const href = link.getAttribute('href');
    // URL 비교
    return href === currentPage;
  });

  // 해당 페이지에 맞는 메뉴가 없으면 첫번째로 fallback
  if (currentIndex === -1) currentIndex = 0;

  const activeItem = items[currentIndex];
  const activeLink = activeItem.querySelector('a');

  // 모든 메뉴에서 active 제거 후 현재 페이지 메뉴에만 적용
  items.forEach(li => li.querySelector('a')?.classList.remove('active'));
  if (activeLink) activeLink.classList.add('active');

  // hover-bg 이동 함수
  function moveTo(index) {
    const target = items[index];
    if (!target) return;
    hoverEl.style.width = `${target.offsetWidth}px`;
    hoverEl.style.height = `${target.offsetHeight}px`;
    hoverEl.style.transform = `translateY(-50%) translateX(${target.offsetLeft}px)`;
  }

  // 초기 위치
  const prevTransition = hoverEl.style.transition;     // 혹시 인라인 지정돼 있었으면 보관
  hoverEl.style.transition = 'none';
  moveTo(currentIndex);
  // 강제 리플로우로 스타일 확정
  // eslint-disable-next-line no-unused-expressions
  hoverEl.offsetWidth;
  // 다음 프레임에 트랜지션 복구 (이후부터는 부드럽게 이동)
  requestAnimationFrame(() => {
    hoverEl.style.transition = prevTransition || '';   // 빈 문자열이면 CSS에서 지정한 값 사용
  });
  
  // 각 메뉴 hover 이벤트
  items.forEach((li, index) => {
    li.addEventListener('mouseenter', () => {
      moveTo(index);
      if (li !== activeItem && activeLink) {
        activeLink.classList.remove('active');
      }
    });
    li.addEventListener('mouseleave', () => {
      if (activeLink && !activeLink.classList.contains('active')) {
        activeLink.classList.add('active');
      }
    });
  });

  nav.addEventListener('mouseleave', () => {
    moveTo(currentIndex);
    if (activeLink) activeLink.classList.add('active');
  });

  window.addEventListener('resize', () => moveTo(currentIndex));
});

// 아코디언 기능
document.addEventListener("DOMContentLoaded", () => {
  const items = document.querySelectorAll(".accordion-item");
  const headers = document.querySelectorAll(".accordion-header");

    if (items.length > 0) {
    items[0].classList.add("active");
  }
  
  headers.forEach(header => {
    header.addEventListener("click", () => {
      const item = header.parentElement;

      // 이미 열려있는 경우 닫기
      if (item.classList.contains("active")) {
        item.classList.remove("active");
      } else {
        // 다른 아코디언 닫기
        document.querySelectorAll(".accordion-item").forEach(i => i.classList.remove("active"));
        // 클릭한 아코디언 열기
        item.classList.add("active");
      }
    });
  });
});

// 카드 플립 기능
// document.addEventListener("DOMContentLoaded", () => {
//   const flips = document.querySelectorAll(".vision-flip");

//   flips.forEach(flip => { 
//     flip.addEventListener("click", () => {

//        if (flip.classList.contains("active")) {
//         flip.classList.remove("active");
//         return;
//         } 
        
//         document.querySelectorAll(".vision-flip.active")
//           .forEach(el => el.classList.remove("active"));
          
//         flip.classList.add("active");
//        });
//       });
//     });



//탭 메뉴
$(function () {
  // ---- 탭 전환은 그대로 ----
  $('.group-tab-btn').on('click', function () {
    var activeTab = $(this).attr('data-tab');
    $('.group-tab-btn').removeClass('on').attr('aria-selected', 'false');
    $(this).addClass('on').attr('aria-selected', 'true');
    $('.group-con').removeClass('on');
    $('#' + activeTab).addClass('on');
  });

  // ---- 카드 플립: active만 사용 (모바일 터치 대응) ----
  const EVT = window.PointerEvent ? 'pointerup' : 'touchend';
  let lastTs = 0;

  function toggleBox(e) {
    // 카드 안 링크/버튼은 그대로 동작시키려면 return
    // (링크가 전체 카드를 감싸 네비게이션되는 경우, 아래 prevent로 막아야 flip이 보입니다)
    if ($(e.target).closest('button,[role="button"],input,textarea,select,label').length) return;

    // 링크가 카드 영역에서 터치되면 네비게이션 방지 (모바일에서 특히 필요)
    const a = $(e.target).closest('a')[0];
    if (a) e.preventDefault();

    const $box = $(this);
    const on = !$box.hasClass('active');

    $('.group-profile-box').removeClass('active');
    if (on) $box.addClass('active');
  }

  // 메인: pointerup 또는 touchend
  $(document).on(EVT, '.group-profile-box', function (e) {
    lastTs = Date.now();
    toggleBox.call(this, e);
  });

  // 폴백: click (바로 직전 메인 이벤트가 있으면 무시해 중복 방지)
  $(document).on('click', '.group-profile-box', function (e) {
    if (Date.now() - lastTs < 300) return;
    toggleBox.call(this, e);
  });

  // 터치 최적화(인라인로; CSS 수정 없이)
  $('.group-profile-box').each(function () {
    this.style.touchAction = this.style.touchAction || 'manipulation';
    this.style.webkitTapHighlightColor = 'transparent';
    this.style.pointerEvents = 'auto';
  });
});



$(document).ready(function () {
  const tabHeaders = $('.director-tab .tab-header');
  const tabContents = $('.director-tab .tab-content');

  // 초기 활성화
  tabHeaders.first().addClass('active');
  tabContents.first().addClass('active');

  // 클릭 이벤트
  tabHeaders.on('click', function () {
    const index = $(this).index();

    tabHeaders.removeClass('active');
    $(this).addClass('active');

    tabContents.removeClass('active');
    tabContents.eq(index).addClass('active');
  });
});