/* ==============================================
   가로 하위 접근성 메뉴 스킨 (horizontal a11y submenu)
   - 1뎁스 호버/포커스 시 100vw 흰색 배경 드롭다운
   - 좌측 데코 영역 없음, 순수 메뉴만 출력
   - 키보드 Tab: JS 라우팅으로 1뎁스 → 그 메뉴의 2/3뎁스 → 다음 1뎁스 순차 이동
   - WCAG 2.1 / KWCAG 2.2 준수

   --- 옵션(CSS 변수) — head.php 에서 주입 ---
   --ha-marker-size       : 라인 두께 / 도트 지름
   --ha-marker-color      : 마커 컬러
   --ha-marker-offset     : 헤더 하단 라인 모드에서 미세 오프셋
   --ha-panel-pt / pb     : 2뎁스 패널 상단/하단 패딩
   --ha-panel-bg          : 2뎁스 패널 배경
   --ha-d3-pt / pb / bg   : 3뎁스 패널(panel 모드) 패딩 / 배경

   --- 헤더에 붙는 옵션 클래스 ---
   .ha-marker-{none|line|dot}        : 1뎁스 활성 표시 타입
   .ha-mpos-{under-text|header-bottom}: 마커 위치
   .ha-align-{inner-left|depth1-left|center}: 2뎁스 글자 정렬 모드 (배경은 항상 100vw)
   .ha-d3-{inline|panel}              : 3뎁스 표시 방식
============================================== */

/* ===== 2뎁스 흰 배경 패널 ===== */
.horiz-a11y-submenu-wrap {
  position: fixed;
  top: var(--header-h, 100px);
  left: 0;
  width: 100vw;
  background: var(--ha-panel-bg, #fff);
  /* ★ 뒷배경 블러 — head.php가 --ha-panel-backdrop-blur 변수 주입 시에만 적용 */
  -webkit-backdrop-filter: blur(var(--ha-panel-backdrop-blur, 0px));
  backdrop-filter: blur(var(--ha-panel-backdrop-blur, 0px));
  border-top: 1px solid #eee;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  z-index: 99999;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
}
.horiz-a11y-submenu-wrap.active,
.horiz-a11y-submenu-wrap.focus-within-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* 헤더↔서브메뉴 사이 투명 브릿지 */
.horiz-a11y-submenu-wrap.active::before,
.horiz-a11y-submenu-wrap.focus-within-open::before {
  content: '';
  position: absolute;
  top: -40px;
  left: 0;
  width: 100%;
  height: 40px;
}

/* 내부 inner — 좌측 데코 없음, 순수 메뉴 + 패딩 옵션 적용 */
.horiz-a11y-submenu-inner {
  display: block;
  padding-top: var(--ha-panel-pt, clamp(20px, 3vw, 40px));
  padding-bottom: var(--ha-panel-pb, clamp(20px, 3vw, 40px));
}

/* 2뎁스 가로 리스트 */
.horiz-a11y-submenu-list {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: flex-start;
  gap: clamp(25px, calc(2.34vw + 17.5px), 55px);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 2뎁스 아이템 (세로 칼럼: 2뎁스 + 인라인 3뎁스) */
.horiz-a11y-submenu-item {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.horiz-a11y-submenu-item > a {
  display: block;
  padding: 6px 0;
  font-size: var(--top2d-font-size, 15px);
  font-weight: 700;
  color: #222;
  text-decoration: none;
  transition: color 0.2s ease;
  white-space: nowrap;
}
.horiz-a11y-submenu-item > a:hover,
.horiz-a11y-submenu-item > a:focus-visible {
  color: var(--primary, #4f46e5);
}

/* 키보드 포커스 표시 */
.horiz-a11y-submenu-item > a:focus-visible,
.horiz-a11y-depth3-list li a:focus-visible {
  outline: 2px solid var(--primary, #4f46e5);
  outline-offset: 2px;
  border-radius: 2px;
}

/* 3뎁스 인라인 리스트 */
.horiz-a11y-depth3-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 8px 0 0 0;
}
.horiz-a11y-depth3-list li a {
  display: block;
  padding: 5px 0;
  font-size: calc(var(--top2d-font-size, 15px) * 0.87);
  font-weight: 400;
  color: #666;
  text-decoration: none;
  transition: color 0.2s ease;
  white-space: nowrap;
}
.horiz-a11y-depth3-list li a:hover,
.horiz-a11y-depth3-list li a:focus-visible {
  color: var(--primary, #4f46e5);
}

/* 기존 sublist 숨김 (가로메뉴 모드 — PC 메뉴만) */
.header.horiz-a11y-menu .gnb.pc > .menu > li > .sublist,
.header.horiz-a11y-menu .gnb.tablet1 > .menu > li > .sublist,
.header.horiz-a11y-menu .gnb.tablet2 > .menu > li > .sublist {
  display: none !important;
}

/* 헤더 배경 처리 */
.header.horiz-a11y-submenu-open {
  background-color: #fff !important;
}
.header.horiz-a11y-submenu-open.opacity {
  background-color: #fff !important;
}

/* 1뎁스 a 포커스 표시 */
.header.horiz-a11y-menu .gnb.pc > .menu > li > a:focus-visible {
  outline: 2px solid var(--primary, #4f46e5);
  outline-offset: 4px;
  border-radius: 2px;
}

/* ============================================
   ① 1뎁스 활성 표시 (active marker)
============================================ */

/* ★★ 1뎁스 활성 마커 — JS 가 <div class="ha-marker"> 를 1뎁스 li 안에 삽입.
   :before / :after 는 head 스킨의 기본 CSS (style.css 의 a:before 가 라인) 와 충돌하므로
   별도 DOM 데코로 격리. CSS 는 이 .ha-marker 만 제어. */

/* 부모 li 는 position:relative 보장 (이미 기본 CSS에 있지만 안전) */
.header.horiz-a11y-menu .gnb.pc > .menu > li {
  position: relative;
}
/* 헤더-하단 모드는 조상 overflow:hidden 이 마커 잘라먹지 않도록 visible 강제 */
.header.horiz-a11y-menu.ha-mpos-header-bottom,
.header.horiz-a11y-menu.ha-mpos-header-bottom .head_inner,
.header.horiz-a11y-menu.ha-mpos-header-bottom .gnb,
.header.horiz-a11y-menu.ha-mpos-header-bottom .gnb.pc,
.header.horiz-a11y-menu.ha-mpos-header-bottom .gnb.pc > .menu,
.header.horiz-a11y-menu.ha-mpos-header-bottom .gnb.pc > .menu > li {
  overflow: visible !important;
}

/* 기본 — 마커 div 자체는 숨김 (모드별 룰이 켜줌) */
.header.horiz-a11y-menu .gnb.pc > .menu > li > .ha-marker {
  display: none;
  pointer-events: none;
  position: absolute;
  z-index: 100002;       /* 2뎁스 패널(99999) 위로 */
}

/* === 마커 OFF === */
.header.horiz-a11y-menu.ha-marker-none .gnb.pc > .menu > li > .ha-marker { display: none !important; }
/* OFF 일 때 style.css 의 기본 a:before 라인은 그대로 동작 (사용자가 일부러 끈 것) */
.header.horiz-a11y-menu.ha-marker-none .gnb.pc > .menu > li > a:before {
  display: revert;
}

/* === 라인 + under-text (글자 바로 아래) === */
.header.horiz-a11y-menu.ha-marker-line.ha-mpos-under-text .gnb.pc > .menu > li > a:before {
  display: none !important;
}
.header.horiz-a11y-menu.ha-marker-line.ha-mpos-under-text .gnb.pc > .menu > li > .ha-marker {
  display: block;
  left: 0;
  right: 0;
  bottom: 20%;
  height: var(--ha-marker-size, 2px);
  background: var(--ha-marker-color, var(--primary, #4f46e5));
  width: 0;
  transition: width 0.25s ease;
}
.header.horiz-a11y-menu.ha-marker-line.ha-mpos-under-text .gnb.pc > .menu > li:hover > .ha-marker,
.header.horiz-a11y-menu.ha-marker-line.ha-mpos-under-text .gnb.pc > .menu > li:focus-within > .ha-marker,
.header.horiz-a11y-menu.ha-marker-line.ha-mpos-under-text .gnb.pc > .menu > li.horiz-a11y-active > .ha-marker {
  width: 100%;
}

/* === 라인 + header-bottom (헤더 바닥선) === */
.header.horiz-a11y-menu.ha-marker-line.ha-mpos-header-bottom .gnb.pc > .menu > li > a:before {
  display: none !important;
}
.header.horiz-a11y-menu.ha-marker-line.ha-mpos-header-bottom .gnb.pc > .menu > li > .ha-marker {
  display: block;
  left: 0;
  right: 0;
  bottom: var(--ha-marker-offset, 0px);
  height: var(--ha-marker-size, 2px);
  background: var(--ha-marker-color, var(--primary, #4f46e5));
  transform: scaleX(0);
  transform-origin: center center;
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.25s ease;
}
.header.horiz-a11y-menu.ha-marker-line.ha-mpos-header-bottom .gnb.pc > .menu > li:hover > .ha-marker,
.header.horiz-a11y-menu.ha-marker-line.ha-mpos-header-bottom .gnb.pc > .menu > li:focus-within > .ha-marker,
.header.horiz-a11y-menu.ha-marker-line.ha-mpos-header-bottom .gnb.pc > .menu > li.horiz-a11y-active > .ha-marker {
  opacity: 1;
  transform: scaleX(1);
}

/* === 도트 + under-text (글자 바로 아래) === */
.header.horiz-a11y-menu.ha-marker-dot.ha-mpos-under-text .gnb.pc > .menu > li > a:before {
  display: none !important;
}
.header.horiz-a11y-menu.ha-marker-dot.ha-mpos-under-text .gnb.pc > .menu > li > .ha-marker {
  display: block;
  left: 50%;
  bottom: var(--ha-marker-offset, -6px);
  width: var(--ha-marker-size, 8px);
  height: var(--ha-marker-size, 8px);
  border-radius: 50%;
  background: var(--ha-marker-color, var(--primary, #4f46e5));
  transform: translateX(-50%) scale(0);
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.25s ease;
}
.header.horiz-a11y-menu.ha-marker-dot.ha-mpos-under-text .gnb.pc > .menu > li:hover > .ha-marker,
.header.horiz-a11y-menu.ha-marker-dot.ha-mpos-under-text .gnb.pc > .menu > li:focus-within > .ha-marker,
.header.horiz-a11y-menu.ha-marker-dot.ha-mpos-under-text .gnb.pc > .menu > li.horiz-a11y-active > .ha-marker {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}

/* === 도트 + header-bottom (헤더 바닥선) === */
.header.horiz-a11y-menu.ha-marker-dot.ha-mpos-header-bottom .gnb.pc > .menu > li > a:before {
  display: none !important;
}
.header.horiz-a11y-menu.ha-marker-dot.ha-mpos-header-bottom .gnb.pc > .menu > li > .ha-marker {
  display: block;
  left: 50%;
  bottom: var(--ha-marker-offset, 0px);
  width: var(--ha-marker-size, 8px);
  height: var(--ha-marker-size, 8px);
  border-radius: 50%;
  background: var(--ha-marker-color, var(--primary, #4f46e5));
  transform: translateX(-50%) scale(0);
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.25s ease;
}
.header.horiz-a11y-menu.ha-marker-dot.ha-mpos-header-bottom .gnb.pc > .menu > li:hover > .ha-marker,
.header.horiz-a11y-menu.ha-marker-dot.ha-mpos-header-bottom .gnb.pc > .menu > li:focus-within > .ha-marker,
.header.horiz-a11y-menu.ha-marker-dot.ha-mpos-header-bottom .gnb.pc > .menu > li.horiz-a11y-active > .ha-marker {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}

/* ============================================
   ② 2뎁스 정렬 모드
   - 배경(.horiz-a11y-submenu-wrap)은 항상 100vw
   - inner 의 padding-left/right 만 JS 가 동적 주입
============================================ */
/* JS 가 .horiz-a11y-submenu-list 의 padding-left / max-width / justify-content 를 채움 */

/* center 모드는 CSS 만으로도 보장 */
.header.horiz-a11y-menu.ha-align-center .horiz-a11y-submenu-list {
  justify-content: center;
}

/* ============================================
   ④ 3뎁스 panel 모드 (2뎁스 hover/focus 시 아래로 슬라이드)
============================================ */
/* inline 모드: 기존 .horiz-a11y-depth3-list 그대로 사용 */
/* panel 모드: 3뎁스 인라인 리스트는 숨기고, 별도 .horiz-a11y-d3-panel 사용 */
.header.horiz-a11y-menu.ha-d3-panel .horiz-a11y-depth3-list { display: none !important; }

.horiz-a11y-d3-panel {
  position: fixed;
  left: 0;
  width: 100vw;
  background: var(--ha-d3-bg, #f8f8f8);
  border-top: 1px solid #eee;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  z-index: 99998; /* 2뎁스 wrap 보다 한 단계 아래 */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
}
.horiz-a11y-d3-panel.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.horiz-a11y-d3-panel-inner {
  padding-top: var(--ha-d3-pt, clamp(16px, 2vw, 28px));
  padding-bottom: var(--ha-d3-pb, clamp(16px, 2vw, 28px));
}
.horiz-a11y-d3-panel-list {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: clamp(16px, 1.5vw, 28px);
  list-style: none;
  margin: 0;
  padding: 0;
}
.horiz-a11y-d3-panel-list li a {
  display: block;
  padding: 4px 0;
  font-size: calc(var(--top2d-font-size, 15px) * 0.92);
  font-weight: 400;
  color: #555;
  text-decoration: none;
  transition: color 0.2s ease;
  white-space: nowrap;
}
.horiz-a11y-d3-panel-list li a:hover,
.horiz-a11y-d3-panel-list li a:focus-visible {
  color: var(--primary, #4f46e5);
}
.horiz-a11y-d3-panel-list li a:focus-visible {
  outline: 2px solid var(--primary, #4f46e5);
  outline-offset: 2px;
  border-radius: 2px;
}

/* 스크린리더 전용 텍스트 */
.horiz-a11y-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ===== 반응형 ===== */
@media screen and (max-width: 1024px) {
  .horiz-a11y-submenu-wrap,
  .horiz-a11y-d3-panel {
    display: none !important;
  }
}