/* 네임스페이스 */
.hsmega { position: relative; font-size: 15px; }
.hsmega * { box-sizing: border-box; }
.hsmega .hsmega-level { list-style: none; margin: 0; padding: 0; }

/* 1뎁스 가로 메뉴 */
.hsmega .hsmega-level-1 { display: flex; gap: 8px; }
.hsmega .hsmega-item { position: relative; }

/* 링크 */
.hsmega .hsmega-link {
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .6rem .8rem;
  text-decoration: none;
  white-space: nowrap;
  border-radius: 8px;
  transition: background .15s ease, color .15s ease;
  font-size: 16px;
  line-height: 24px;
  color: #8D97A5;
  font-weight: 600;
      cursor: pointer;
}
.hsmega .hsmega-level-1 > .hsmega-item > .hsmega-link { background: #fff; }
.hsmega .hsmega-level-1 > .hsmega-item > .hsmega-link:hover, 
.hsmega .hsmega-level-2 > .hsmega-item > .hsmega-link:hover,
.hsmega .hsmega-level-3 > .hsmega-item > .hsmega-link:hover  { 
  background: #fff; 
  color: #1771F8;
}

/* 서브메뉴 박스 */
.hsmega .hsmega-level-2,
.hsmega .hsmega-level-3 {
  position: absolute;
  top: 0;
  left: 100%;
  min-width: 240px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 0px;
  padding: 6px;
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
  display: none;
  z-index: 1000;
}
.hsmega .hsmega-level-1 > .hsmega-item > .hsmega-level-2 { top: 100%; left: 0; }

/* 호버 열림 */
.hsmega .hsmega-item:hover > .hsmega-level-2,
.hsmega .hsmega-item:hover > .hsmega-level-3 { display: block; }

/* 화살표 표시 */
.hsmega .hsmega-item.has-children > .hsmega-link::after {
  content: "";
  display: inline-block;
  margin-left: .35rem;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 6px solid currentColor; /* ▶ */
  opacity: .7;
  transition: transform .15s ease, opacity .15s ease;
}
.hsmega .hsmega-level-1 > .hsmega-item.has-children > .hsmega-link::after {
  border-left: 0;
  border-top: 6px solid currentColor;   /* ▼ */
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  border-bottom: 0;
}
.hsmega .hsmega-level-1 > .hsmega-item:hover > .hsmega-link::after { transform: rotate(180deg); opacity: 1; }
.hsmega .hsmega-level-2 > .hsmega-item:hover > .hsmega-link::after { transform: translateX(2px); opacity: 1; }

/* 서브제목(카테고리/상품 공용) */
.hsmega .hsmega-subtitle {
  font-size: 0.9em;
  opacity: .75;
  margin-left: .35rem;
}

/* 2뎁스 아이템을포지셔닝 기준으로 */
.hsmega .hsmega-level-2 > .hsmega-item { position: relative; }

/* 3뎁스 패널이 살짝 겹치도록 해서 마우스 이동 중 끊김 방지 */
.hsmega .hsmega-level-3 {
  top: 0;
  left: calc(100% - 8px); 
  z-index: 1002;
}

/* 2뎁스 패널 오른쪽에 여백을 줘서 3뎁스와 자연스럽게 겹치도록 */
.hsmega .hsmega-level-2 { padding-right: 8px; }

/* 호버 열림 유지(재확인) */
.hsmega .hsmega-item:hover > .hsmega-level-2,
.hsmega .hsmega-item:hover > .hsmega-level-3 { display: block; }
.hsmega .hsmega-level-2 > .hsmega-item { position: relative; }

.hsmega .hsmega-level-3 {
  position: absolute;
  top: 0;
  left: calc(100% - 8px); /* 살짝 겹치게 해서 hover gap 제거 */
  min-width: 240px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 0px;
  padding: 6px;
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
  display: none;
  z-index: 1002;            /* 3뎁스가 2뎁스 위로 */
  overflow: visible !important;
}

/* ▼ 2뎁스 패널도 가려지지 않게 보정 */
.hsmega .hsmega-level-2 {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1001;
  padding-right: 8px;       /* 3뎁스와 살짝 겹치게 */
  overflow: visible !important;
}

/* ▼ hover 시 확실히 보이도록 (부모-자식 관계에 한정) */
/* .hsmega .hsmega-item:hover > .hsmega-level-2,
.hsmega .hsmega-item:hover > .hsmega-level-3 { display: block !important; } */
.hsmega .hsmega-level-2,
.hsmega .hsmega-level-3 { display: none; }



/* ▼ 테마가 ul/li를 flex로 바꿔 놓은 경우 대비(수직 리스트 고정) */
/* .hsmega .hsmega-level-2,
.hsmega .hsmega-level-3 { display: block; } */
.hsmega .hsmega-item:hover > .hsmega-level-2,
.hsmega .hsmega-item:hover > .hsmega-level-3 { display: block; }
.hsmega .hsmega-level-2 > li,
.hsmega .hsmega-level-3 > li { display: block; }

/* ▼ 테마가 visibility/opacity/pointer-events로 숨기는 경우 무력화 */
.hsmega .hsmega-level-2,
.hsmega .hsmega-level-3 {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: none !important;
}

/* ▼ 상위 메뉴/컨테이너가 자식 overflow를 자르는 경우 방지 */
.hsmega,
.hsmega .hsmega-level-1,
.hsmega .hsmega-level-2 > .hsmega-item { overflow: visible !important; }

/* === auto flip 지원 (왼쪽으로 열기) === */
.hsmega .open-left > .hsmega-level-2 { left: auto; right: 0; }
.hsmega .open-left > .hsmega-level-3 { left: auto; right: calc(100% - 8px); }

/* 마지막 항목은 기본적으로 왼쪽으로 열리게 (안전장치) */
.hsmega .hsmega-level-1 > .hsmega-item:last-child > .hsmega-level-2 { left: auto; right: 0; }
.hsmega .hsmega-level-2 > .hsmega-item:last-child > .hsmega-level-3 { left: auto; right: calc(100% - 8px); }

.hsmega .open-left > .hsmega-level-2 { left: auto; right: 0; }
.hsmega .open-left > .hsmega-level-3 { left: auto; right: calc(100% - 8px); }

/* 측정용: 실제 너비 계산만 하고 화면엔 안 보이게 */
.hsmega .hsmega-measure {
  display: block !important;
  visibility: hidden !important;
  pointer-events: none !important;
  position: absolute !important;
}
.hsmega .hsmega-level-1 > .hsmega-item.is-current > .hsmega-link {
  color: #1771F8;
  text-decoration: underline;
  text-underline-offset: 10px;
}
@media (max-width: 1260px) {
    .hsmega.mobile-collapsed .hsmega-level-1 > .hsmega-item { display: none; }
  .hsmega.mobile-collapsed .hsmega-level-1 > .hsmega-item.is-current { display: block; }
  /* 전체보기 토글 버튼 */
  .hsmega-mobile-toggle {
    display: block;
    width: 100%;
    text-align: center;
    padding: .75rem 1rem;
    font-size: 15px;
    line-height: 1.2;
    background: #f4f7fc;
    color: #1F2328;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 0;          /* 사각형 유지 */
    margin-bottom: 8px;
  }
  .hsmega-mobile-toggle:active { opacity: .9; }
    .hsmega.show-all .hsmega-level-1 {
    display: flex;
    flex-direction: column;
    gap: 0; /* 항목 간 간격 제거 (원하는 경우 조정) */
  }
  .hsmega.show-all .hsmega-level-1 > .hsmega-item {
    display: block;
    border-bottom: 1px solid #eee;
  }
  .hsmega.show-all .hsmega-level-1 > .hsmega-item:last-child {
    border-bottom: none;
  }
}

/* 데스크탑으로 돌아오면 원복 */
@media (min-width: 1261px) {
  .hsmega-mobile-toggle { display: none; }
  .hsmega.mobile-collapsed .hsmega-level-1 > .hsmega-item { display: block; }
}