/*
 * Pointworks Navigation Mega Menu - Two-Step Display
 * Step 1: Brand selection | Step 2: Product list
 */

:root {
  --nav-primary: #1a2332;
  --nav-accent: #3095b4;
  --nav-text: #2d3748;
  --nav-text-light: #718096;
  --nav-bg: #ffffff;
  --nav-border: #e2e8f0;
  --nav-shadow: rgba(0, 0, 0, 0.08);
  --nav-hover-bg: #f7fafc;
  --nav-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --font-korean: 'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont, 'Malgun Gothic', '맑은 고딕', sans-serif;
}

/* Header and content z-index hierarchy */
main,
.body-container,
.body-container-wrapper {
  position: relative;
  z-index: 1;
}

.header,
.header-section {
  position: relative;
  z-index: 9998;
}

/* Enhanced Main Navigation */
.mainmenu {
  position: relative;
  font-family: var(--font-korean) !important;
}

.mainmenu .hs-menu-wrapper>ul {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mainmenu .hs-menu-item {
  position: relative;
}

.mainmenu .hs-menu-item.has-dropdown {
  z-index: 10000 !important;
}

.mainmenu .hs-menu-item>a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 1.25rem;
  color: var(--nav-text);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  border-radius: 0.5rem;
  transition: var(--nav-transition);
  position: relative;
  font-family: var(--font-korean) !important;
}

.mainmenu .hs-menu-item>a:hover {
  color: var(--nav-accent);
  background-color: var(--nav-hover-bg);
}

/* Dropdown Indicator */
.mainmenu .hs-menu-item.has-dropdown>a::after {
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 0.375rem;
  border-left: 0.3125rem solid transparent;
  border-right: 0.3125rem solid transparent;
  border-top: 0.3125rem solid currentColor;
  transition: transform 0.25s ease;
}

.mainmenu .hs-menu-item.has-dropdown.active>a::after,
.mainmenu .hs-menu-item.has-dropdown:hover>a::after {
  transform: rotate(180deg);
}

/* Mega Menu Container */
.nav-mega-menu {
  position: absolute;
  top: calc(100% + 0.75rem);
  left: 50%;
  transform: translateX(-50%) translateY(-0.625rem);
  background: var(--nav-bg);
  border: 0.0625rem solid var(--nav-border);
  border-radius: 0.75rem;
  box-shadow:
    0 0.625rem 1.875rem -0.1875rem var(--nav-shadow),
    0 0.25rem 0.375rem -0.125rem rgba(0, 0, 0, 0.05);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    visibility 0.3s;
  z-index: 9999 !important;
  display: flex;
  min-width: 28rem;
  font-family: var(--font-korean) !important;
}

.mainmenu .hs-menu-item:hover .nav-mega-menu,
.mainmenu .hs-menu-item.active .nav-mega-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  z-index: 10001 !important;
}

/* Left Side - Brand Selection */
.mega-menu-brands {
  width: 10rem;
  padding: 1.25rem;
  border-right: 0.0625rem solid var(--nav-border);
  background: #f8fafc;
  border-radius: 0.75rem 0 0 0.75rem;
}

.mega-menu-brands-title-link {
  text-decoration: none;
  display: block;
  margin: 0 0 0.75rem 0;
  padding: 0.5rem;
  border-radius: 0.5rem;
  transition: background-color 0.2s ease;
}

.mega-menu-brands-title-link:hover {
  background-color: rgba(48, 149, 180, 0.08);
}

.mega-menu-brands-title-link:hover .mega-menu-brands-title {
  color: var(--nav-primary);
}

.mega-menu-brands-title {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--nav-text-light);
  margin: 0;
  padding: 0;
  font-family: var(--font-korean) !important;
}

.mega-menu-brand-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.mega-menu-brand-item {
  margin: 0;
  padding: 0;
}

.mega-menu-brand-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem;
  background: transparent;
  border: none;
  border-radius: 0.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--nav-text);
  text-align: left;
  cursor: pointer;
  transition: var(--nav-transition);
  font-family: var(--font-korean) !important;
}

.mega-menu-brand-btn:hover {
  background-color: white;
  color: var(--nav-accent);
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.05);
}

.mega-menu-brand-btn.active {
  background-color: var(--nav-accent);
  color: white;
}

.mega-menu-brand-arrow {
  width: 0.875rem;
  height: 0.875rem;
  transition: transform 0.25s ease;
  opacity: 0.5;
  flex-shrink: 0;
}

.mega-menu-brand-btn.active .mega-menu-brand-arrow {
  opacity: 1;
}

/* Right Side - Product Display */
.mega-menu-products {
  flex: 1;
  padding: 1.5rem;
  min-width: 16rem;
  max-width: 22rem;
}

.mega-menu-brand-section {
  display: none;
  animation: fadeInSlide 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.mega-menu-brand-section.active {
  display: block;
}

@keyframes fadeInSlide {
  from {
    opacity: 0;
    transform: translateX(-0.5rem);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.mega-menu-brand-title {
  font-family: var(--font-korean) !important;
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--nav-primary);
  margin: 0 0 1.25rem 0;
  padding-left: 1rem;
  border-left: 0.25rem solid var(--nav-accent);
  line-height: 1.3;
}

/* Category Sections */
.mega-menu-category {
  margin-bottom: 1.25rem;
}

.mega-menu-category:last-child {
  margin-bottom: 0;
}

.mega-menu-category-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--nav-accent);
  margin: 0 0 0.625rem 0;
  padding: 0;
  font-family: var(--font-korean) !important;
}

/* Product List */
.mega-menu-product-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.mega-menu-product-item {
  margin: 0;
  padding: 0;
}

.mega-menu-product-link {
  display: block;
  padding: 0.375rem 0;
  color: var(--nav-text-light);
  font-size: 0.875rem;
  text-decoration: none;
  transition: var(--nav-transition);
  line-height: 1.5;
  font-family: var(--font-korean) !important;
}

.mega-menu-product-link:hover {
  color: var(--nav-accent);
  padding-left: 0.5rem;
}

/* View All Link */
.mega-menu-view-all {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: 1.5rem;
  padding: 0.625rem 1.25rem;
  background: linear-gradient(135deg, var(--nav-accent) 0%, #2a7a94 100%);
  color: white !important;
  text-decoration: none;
  border-radius: 0.5rem;
  font-weight: 600;
  font-size: 0.875rem;
  transition: var(--nav-transition);
  box-shadow: 0 0.25rem 0.75rem rgba(48, 149, 180, 0.25);
  font-family: var(--font-korean) !important;
}

.mega-menu-view-all svg {
  color: white !important;
  fill: none;
  stroke: white;
}

.mega-menu-view-all:hover {
  transform: translateY(-0.125rem);
  box-shadow: 0 0.375rem 1rem rgba(48, 149, 180, 0.35);
}

.mega-menu-view-all svg {
  width: 0.875rem;
  height: 0.875rem;
  transition: transform 0.25s ease;
}

.mega-menu-view-all:hover svg {
  transform: translateX(0.1875rem);
}

/* Responsive Design */
@media (max-width: 62rem) {
  .nav-mega-menu {
    position: fixed;
    left: 1rem;
    right: 1rem;
    top: 5rem;
    transform: none;
    min-width: unset;
    max-width: unset;
    max-height: calc(100vh - 6.5rem);
    overflow-y: auto;
    flex-direction: column;
  }

  .mainmenu .hs-menu-item:hover .nav-mega-menu,
  .mainmenu .hs-menu-item.active .nav-mega-menu {
    transform: none;
  }

  .mega-menu-brands {
    width: 100%;
    border-right: none;
    border-bottom: 0.0625rem solid var(--nav-border);
    border-radius: 0.75rem 0.75rem 0 0;
  }

  .mega-menu-brand-list {
    flex-direction: row;
    gap: 0.5rem;
  }

  .mega-menu-products {
    max-width: 100%;
  }
}

@media (max-width: 48rem) {
  .mega-menu-brands {
    padding: 1rem;
  }

  .mega-menu-brand-list {
    flex-direction: column;
  }

  .mega-menu-products {
    padding: 1.25rem;
  }
}



/* ============================================
   MOBILE RESPONSIVE OVERRIDES
   모바일에서 legacy 메뉴 시스템 사용
   ============================================ */

@media (max-width: 991px) {

  /* Mega menu 완전히 숨김 */
  .nav-mega-menu {
    display: none !important;
    visibility: hidden !important;
  }

  /* Legacy 모바일 메뉴 - 초기 상태 시킴 */
  .mainmenu.js-enabled .hs-menu-flow-horizontal {
    display: none !important;
    max-height: 0 !important;
    overflow: hidden !important;
    transition: max-height 0.3s ease-in-out !important;
  }

  /*
   * 햄버거 클릭 시 메뉴 표시
   * #mobile-menu ID는 mobile-menu-accessibility.js에서 동적으로 부여됨
   */
  body.mobile-open #mobile-menu,
  body.mobile-open .mainmenu.js-enabled .hs-menu-flow-horizontal {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    max-height: none !important;

    /*
     * 위치 수정: 메뉴 영역을 헤더 바로 아래에 고정
     * bottom 제거하여 콘텐츠 높이만큼만 차지하도록 변경
     */
    position: fixed !important;
    top: 130px !important;
    /* 헤더 대략적 높이 (Top strip + Logo area) */
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: auto !important;
    max-height: calc(100vh - 130px) !important;
    /* 헤더 아래 남은 공간만 사용 */

    background: #ffffff !important;
    z-index: 99999 !important;
    overflow-y: auto !important;
    padding: 20px 0 40px 0 !important;
    /* 하단 여백 추가 */
    box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.1);
    box-sizing: border-box !important;
    margin: 0 !important;
    border-top: 1px solid #eee;
  }

  /* 메뉴 내부 리스트 스타일 재정비 */
  body.mobile-open #mobile-menu>ul,
  body.mobile-open .mainmenu.js-enabled .hs-menu-flow-horizontal>ul {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 0 20px !important;
    /* 좌우 여백 추가 */
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  /* 리스트 아이템 */
  body.mobile-open #mobile-menu>ul>li,
  body.mobile-open .mainmenu.js-enabled .hs-menu-flow-horizontal>ul>li {
    width: 100% !important;
    display: block !important;
    border-bottom: 1px solid #f5f5f5;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* 모바일에서 불필요한 요소 숨김 */
  .header__language-switcher,
  .header-section .bottom-part .right-part .header-btn {
    display: none;
  }

  /* 터치 타겟 크기 최적화 */
  .mainmenu .hs-menu-flow-horizontal>ul>li a {
    min-height: 50px;
    display: flex;
    align-items: center;
    padding: 15px 0;
    /* 좌우 여백은 부모 UL에서 처리 */
    width: 100%;
    box-sizing: border-box;
    font-size: 18px;
    font-weight: 500;
    color: #333 !important;
    text-decoration: none;
  }

  .mainmenu .hs-menu-flow-horizontal>ul>li.active>a,
  .mainmenu .hs-menu-flow-horizontal>ul>li a:hover {
    color: #3095b4 !important;
  }
}

/* 태블릿 (768px 이하) */
@media (max-width: 768px) {

  /* 햄버거 버튼 약간 크게 */
  a.mobile-trigger {
    width: 48px;
    height: 48px;
  }

  /* 헤더 높이가 모바일에서 다를 수 있으므로 조정 (필요 시) */
  body.mobile-open #mobile-menu,
  body.mobile-open .mainmenu.js-enabled .hs-menu-flow-horizontal {
    top: 110px !important;
    /* 모바일에서는 헤더가 조금 더 작을 수 있음 */
  }
}

/*
 * 햄버거 버튼과 로고 수직 정렬 개선
 * 모바일 환경에서 햄버거 버튼을 로고와 같은 높이로 정렬
 * 로고 크기는 기존대로 유지 (234px)
 */
@media (max-width: 991px) {
  /*
   * .bottom-part를 position relative로 설정하여
   * 햄버거 버튼이 이 영역을 기준으로 위치하도록 함
   */
  .header-section .bottom-part {
    position: relative !important;
    min-height: 60px !important;
    /* 최소 높이 확보 */
  }

  /*
   * 햄버거 버튼을 .bottom-part 영역 내에서 수직 중앙 정렬
   * top: 50%와 transform: translateY(-50%)를 사용하여
   * 버튼을 정확히 중앙에 배치
   * !important를 사용하여 template-main.css의 기본 스타일을 오버라이드
   */
  a.mobile-trigger {
    position: absolute !important;
    top: 50% !important;
    right: 15px !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
  }

  /*
   * 로고가 포함된 container를 flex로 중앙 정렬
   * 햄버거 버튼도 같은 수직 중심선에 정렬됨
   */
  .header-section .bottom-part .container {
    display: flex !important;
    align-items: center !important;
    min-height: 60px !important;
  }

  /*
   * 로고 영역 정렬 및 크기 조정
   * 모바일에서는 화면 비율에 맞게 크게 표시
   */
  .header-section .bottom-part .left-part {
    display: flex !important;
    align-items: center !important;
    width: 70% !important;
    /* 화면의 70% 차지 (햄버거 버튼은 오른쪽에 absolute 배치) */
  }

  /*
   * 로고를 모바일에서 기존 크기로 표시
   * 234px 유지하되, 화면이 작으면 자동 축소
   */
  .header-section .bottom-part .left-part .logo {
    width: 234px !important;
    max-width: 100% !important;
    /* 화면보다 크면 자동 축소 */
  }

  .header-section .bottom-part .left-part .logo img {
    width: 100% !important;
    height: auto !important;
    /* 비율 유지하며 크기 조정 */
  }
}

/* 작은 모바일 화면 (480px 이하) */
@media (max-width: 480px) {
  /* 작은 화면에서는 햅버거 버튼을 오른쪽 여백 줄임 */
  a.mobile-trigger {
    right: 10px !important;
  }
}

/* ============================================
   모바일 제품 메뉴 아코디언 스타일
   ============================================ */

@media (max-width: 991px) {
  /* 모바일 제품 서브메뉴 컨테이너 */
  .mobile-product-submenu {
    max-height: 0;
    overflow: hidden;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    transition: max-height 0.4s ease-in-out;
  }

  /* 제품 메뉴가 열렸을 때 */
  .mobile-submenu-open .mobile-product-submenu {
    max-height: 2000px;
    /* 충분히 큰 값으로 설정 */
  }

  /* 제품 메뉴 아이템에 화살표 추가 */
  .mobile-submenu-open > a::after {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 0.5rem;
    border-left: 0.3125rem solid transparent;
    border-right: 0.3125rem solid transparent;
    border-top: 0.3125rem solid currentColor;
    vertical-align: middle;
  }

  /* 브랜드 리스트 */
  .mobile-brand-list {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .mobile-brand-item {
    margin: 0;
    padding: 0;
    border-bottom: 1px solid #e2e8f0;
  }

  .mobile-brand-item:last-child {
    border-bottom: none;
  }

  /* 브랜드 버튼 */
  .mobile-brand-button {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 20px;
    background: white;
    border: none;
    font-size: 16px;
    font-weight: 600;
    color: var(--nav-text);
    text-align: left;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: var(--font-korean);
  }

  .mobile-brand-button:active {
    background: #f1f5f9;
  }

  /* 브랜드 콘텐츠 (로고 + 텍스트) */
  .mobile-brand-content {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
  }

  /* 브랜드 로고 */
  .mobile-brand-logo {
    width: 60px;
    height: auto;
    max-height: 30px;
    object-fit: contain;
  }

  .mobile-brand-content span {
    font-size: 16px;
    font-weight: 600;
  }

  /* 브랜드 화살표 */
  .mobile-brand-arrow {
    width: 16px;
    height: 16px;
    transition: transform 0.3s ease;
    color: var(--nav-text-light);
  }

  .mobile-brand-item.active .mobile-brand-arrow {
    transform: rotate(180deg);
    color: var(--nav-accent);
  }

  .mobile-brand-item.active .mobile-brand-button {
    color: var(--nav-accent);
    background: #f8fafc;
  }

  /* 제품 리스트 */
  .mobile-product-list {
    max-height: 0;
    overflow: hidden;
    padding: 0 20px;
    background: white;
    transition: max-height 0.4s ease-in-out, padding 0.4s ease-in-out;
  }

  .mobile-brand-item.active .mobile-product-list {
    max-height: 1500px;
    /* 충분히 큰 값 */
    padding: 10px 20px 15px 20px;
  }

  /* 카테고리 */
  .mobile-category {
    margin-bottom: 20px;
  }

  .mobile-category:last-of-type {
    margin-bottom: 15px;
  }

  .mobile-category-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--nav-accent);
    margin: 0 0 8px 0;
    padding: 0;
    font-family: var(--font-korean);
  }

  /* 제품 항목 */
  .mobile-products {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .mobile-products li {
    margin: 0;
    padding: 0;
  }

  .mobile-products a {
    display: block;
    padding: 8px 0 8px 10px;
    color: var(--nav-text-light);
    font-size: 14px;
    text-decoration: none;
    transition: var(--nav-transition);
    border-left: 2px solid transparent;
    font-family: var(--font-korean);
  }

  .mobile-products a:active {
    color: var(--nav-accent);
    border-left-color: var(--nav-accent);
    background: #f8fafc;
  }

  /* 전체보기 링크 */
  .mobile-view-all {
    display: inline-block;
    margin-top: 10px;
    padding: 10px 15px;
    background: linear-gradient(135deg, var(--nav-accent) 0%, #2a7a94 100%);
    color: white !important;
    text-decoration: none;
    border-radius: 6px;
    font-weight: 600;
    font-size: 14px;
    transition: var(--nav-transition);
    font-family: var(--font-korean);
  }

  .mobile-view-all:active {
    transform: scale(0.98);
    opacity: 0.9;
  }
}