/* ==============================================
   드롭다운 메뉴 스타일 2 (dropdown2)
   - 다크 배경 말풍선 (삼각형 화살표)
   - hover 시 우측 밀림 + — 아이콘 + 라운드 배경
   - 대메뉴 rolling text 모션
============================================== */

/* ===== CSS 변수 ===== */
.header.dropdown2-menu {
  --dd2-bg: #1a1a1a;
  --dd2-radius: 12px;
  --dd2-arrow-size: 8px;
  --dd2-pad-x: 12px;
  --dd2-pad-y: 12px;
  --dd2-item-pad-x: 12px;
  --dd2-item-pad-y: 8px;
  --dd2-item-radius: 8px;
  --dd2-font-size: var(--top2d-font-size, 14px);
  --dd2-font-weight: 600;
  --dd2-color: rgba(255,255,255,0.85);
  --dd2-hover-bg: var(--primary, #2563eb);
  --dd2-hover-color: #fff;
  --dd2-color-depth3: rgba(255,255,255,0.55);
  --dd2-transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===== 서브리스트 컨테이너 ===== */
.header.dropdown2-menu .gnb:not(.tablet2):not(.mo) .menu > li > .sublist {
  position: absolute !important;
  top: 100% !important;
  left: 50% !important;
  min-width: 180px;
  background: var(--dd2-bg) !important;
  border: none !important;
  border-radius: var(--dd2-radius) !important;
  padding: var(--dd2-pad-y) var(--dd2-pad-x) !important;
  box-shadow: 0 10px 40px rgba(0,0,0,0.25);
  /* 애니메이션 */
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateX(-50%) translateY(12px) !important;
  transition: opacity var(--dd2-transition), transform var(--dd2-transition), visibility var(--dd2-transition);
  z-index: 100 !important;
}

/* hover 시 표시 */
.header.dropdown2-menu .gnb:not(.tablet2):not(.mo) .menu > li:hover > .sublist,
.header.dropdown2-menu .gnb:not(.tablet2):not(.mo) .menu > li.open > .sublist {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateX(-50%) translateY(4px) !important;
}

/* ===== 삼각형 화살표 (말풍선) ===== */
.header.dropdown2-menu .gnb:not(.tablet2):not(.mo) .menu > li > .sublist::before {
  content: '';
  position: absolute;
  top: calc(-1 * var(--dd2-arrow-size));
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: var(--dd2-arrow-size) solid transparent;
  border-right: var(--dd2-arrow-size) solid transparent;
  border-bottom: var(--dd2-arrow-size) solid var(--dd2-bg);
}

/* ===== 1뎁스↔서브메뉴 투명 브릿지 (hover 끊김 방지) ===== */
.header.dropdown2-menu .gnb:not(.tablet2):not(.mo) .menu > li > .sublist::after {
  content: '';
  position: absolute;
  top: -20px;
  left: 0;
  width: 100%;
  height: 20px;
}

/* ===== 서브메뉴 아이템 (2뎁스) ===== */
.header.dropdown2-menu .gnb:not(.tablet2):not(.mo) .sublist .subitem {
  list-style: none;
}

.header.dropdown2-menu .gnb:not(.tablet2):not(.mo) .sublist .subitem > a {
  display: flex;
  align-items: center;
  width: 100%;
  padding: var(--dd2-item-pad-y) var(--dd2-item-pad-x) !important;
  font-size: var(--dd2-font-size) !important;
  font-weight: var(--dd2-font-weight) !important;
  color: var(--dd2-color) !important;
  text-decoration: none !important;
  border-radius: var(--dd2-item-radius);
  position: relative;
  white-space: nowrap;
  transition: background var(--dd2-transition), color var(--dd2-transition);
  background: transparent;
  box-sizing: border-box;
}

/* — 대시 아이콘 (hover 전에는 숨김) */
.header.dropdown2-menu .gnb:not(.tablet2):not(.mo) .menu > li > .sublist > .subitem > a::before {
  content: '\2014';
  display: inline-block;
  width: 0;
  overflow: hidden;
  opacity: 0;
  margin-right: 0;
  font-weight: 400;
  transition: width var(--dd2-transition), opacity var(--dd2-transition), margin var(--dd2-transition);
}

/* hover 시: 대시 등장 + 라운드 배경 */
.header.dropdown2-menu .gnb:not(.tablet2):not(.mo) .menu > li > .sublist > .subitem > a:hover,
.header.dropdown2-menu .gnb:not(.tablet2):not(.mo) .menu > li > .sublist > .subitem:hover > a {
  background: var(--dd2-hover-bg) !important;
  color: var(--dd2-hover-color) !important;
}

/* 2뎁스 대시: 8px (반으로 줄임) — 대시 색상 = 글씨색 */
.header.dropdown2-menu .gnb:not(.tablet2):not(.mo) .menu > li > .sublist > .subitem > a:hover::before,
.header.dropdown2-menu .gnb:not(.tablet2):not(.mo) .menu > li > .sublist > .subitem:hover > a::before {
  width: 8px;
  opacity: 1;
  margin-right: 4px;
  color: currentColor;
}

/* ===== 3뎁스 공통 (inline + flyout 공유) ===== */
.header.dropdown2-menu .gnb:not(.tablet2):not(.mo) .sublist .subitem > .sublist::before,
.header.dropdown2-menu .gnb:not(.tablet2):not(.mo) .sublist .subitem > .sublist::after {
  display: none;
}
.header.dropdown2-menu .gnb:not(.tablet2):not(.mo) .sublist .subitem > .sublist .subitem > a {
  font-weight: 400 !important;
  font-size: calc(var(--dd2-font-size) * 0.9) !important;
  color: var(--dd2-color-depth3, rgba(255,255,255,0.55)) !important;
  padding: 6px var(--dd2-item-pad-x) !important;
  display: flex;
  align-items: center;
  width: 100%;
  text-decoration: none !important;
  border-radius: var(--dd2-item-radius);
  white-space: nowrap;
  transition: background var(--dd2-transition), color var(--dd2-transition);
  background: transparent;
  box-sizing: border-box;
}
.header.dropdown2-menu .gnb:not(.tablet2):not(.mo) .sublist .subitem > .sublist .subitem > a:hover {
  background: var(--dd2-hover-bg) !important;
  color: var(--dd2-hover-color) !important;
}
/* 3뎁스 대시 아이콘 */
.header.dropdown2-menu .gnb:not(.tablet2):not(.mo) .sublist .subitem > .sublist .subitem > a::before {
  content: '\2014';
  display: inline-block;
  width: 0;
  overflow: hidden;
  opacity: 0;
  margin-right: 0;
  font-weight: 400;
  transition: width var(--dd2-transition), opacity var(--dd2-transition), margin var(--dd2-transition);
}
.header.dropdown2-menu .gnb:not(.tablet2):not(.mo) .sublist .subitem > .sublist .subitem > a:hover::before {
  width: 16px;
  opacity: 1;
  margin-right: 6px;
}

/* ===== 3뎁스 모드A: inline (2뎁스 밑, 기본) ===== */
.header.dropdown2-menu.dd2-depth3-inline .gnb:not(.tablet2):not(.mo) .sublist .subitem > .sublist {
  position: static !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: none !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0;
  min-width: auto;
  border-radius: 0 !important;
}
/* inline 모드: 3뎁스 왼쪽 들여쓰기 */
.header.dropdown2-menu.dd2-depth3-inline .gnb:not(.tablet2):not(.mo) .sublist .subitem > .sublist .subitem > a {
  padding-left: calc(var(--dd2-item-pad-x) + 14px) !important;
}

/* ===== 3뎁스 모드B: flyout (우측 별도 박스) ===== */
.header.dropdown2-menu.dd2-depth3-flyout .gnb:not(.tablet2):not(.mo) .sublist .subitem {
  position: relative;
}
.header.dropdown2-menu.dd2-depth3-flyout .gnb:not(.tablet2):not(.mo) .sublist .subitem > .sublist {
  position: absolute !important;
  top: 0 !important;
  left: 100% !important;
  margin-left: 6px;
  min-width: 160px;
  background: var(--dd2-depth3-bg, var(--dd2-bg)) !important;
  border: none !important;
  border-radius: var(--dd2-radius) !important;
  padding: var(--dd2-pad-y) var(--dd2-pad-x) !important;
  box-shadow: 0 10px 40px rgba(0,0,0,0.25);
  /* 숨김 */
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateX(8px) !important;
  transition: opacity var(--dd2-transition), transform var(--dd2-transition), visibility var(--dd2-transition);
  z-index: 101 !important;
}
/* flyout: 2뎁스 hover 시 3뎁스 표시 */
.header.dropdown2-menu.dd2-depth3-flyout .gnb:not(.tablet2):not(.mo) .sublist .subitem:hover > .sublist {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateX(0) !important;
}
/* flyout: 좌측 화살표 (말풍선) */
.header.dropdown2-menu.dd2-depth3-flyout .gnb:not(.tablet2):not(.mo) .sublist .subitem > .sublist::before {
  display: block !important;
  content: '' !important;
  position: absolute;
  top: 14px;
  left: calc(-1 * var(--dd2-arrow-size));
  width: 0;
  height: 0;
  border-top: var(--dd2-arrow-size) solid transparent;
  border-bottom: var(--dd2-arrow-size) solid transparent;
  border-right: var(--dd2-arrow-size) solid var(--dd2-depth3-bg, var(--dd2-bg));
}
/* flyout: 투명 브릿지 (2뎁스↔3뎁스 hover 끊김 방지) */
.header.dropdown2-menu.dd2-depth3-flyout .gnb:not(.tablet2):not(.mo) .sublist .subitem > .sublist::after {
  display: block !important;
  content: '' !important;
  position: absolute;
  top: 0;
  left: -12px;
  width: 12px;
  height: 100%;
}

/* ===== 기존 드롭다운 스타일 오버라이드 ===== */
.header.dropdown2-menu .gnb:not(.tablet2):not(.mo) .menu > li {
  position: relative;
}

/* 기존 서브리스트 배경/border 리셋 */
.header.dropdown2-menu .gnb:not(.tablet2):not(.mo) .sublist {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* ===== Rolling Text (대메뉴 모션) ===== */

/* a.depth1 자체는 기존 패딩/위치 유지 */
.header.dropdown2-menu .gnb:not(.tablet2):not(.mo) .menu > li.cell > a.depth1 {
  position: relative;
}

/* 기존 언더라인 숨기고 → 동그란 dot으로 교체 */
.header.dropdown2-menu .gnb:not(.tablet2):not(.mo) .menu > li.cell > a.depth1::before {
  content: '' !important;
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  background: var(--dd2-hover-bg, var(--primary, #2563eb)) !important;
  position: absolute !important;
  bottom: auto !important;
  top: calc(100% - 26px) !important;
  left: 50% !important;
  transform: translateX(-50%) scale(0) !important;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  z-index: 101 !important;
}
.header.dropdown2-menu .gnb:not(.tablet2):not(.mo) .menu > li.cell:hover > a.depth1::before {
  transform: translateX(-50%) scale(1) !important;
  width: 10px !important;
}

/* 마스크: 글자 1줄 높이만 보이는 영역 (a 내부 span) */
.header.dropdown2-menu .gnb:not(.tablet2):not(.mo) .menu > li.cell > a.depth1 .rt-mask {
  display: inline-flex;
  flex-direction: column;
  overflow: hidden;
  height: 1.2em;
  line-height: 1.2;
}

/* 텍스트 블록 (원본 + 복제): 각각 정확히 1줄 높이, 세로로 쌓임 */
.header.dropdown2-menu .gnb:not(.tablet2):not(.mo) .menu > li.cell > a.depth1 .rt-block {
  display: flex;
  white-space: nowrap;
  flex-shrink: 0;
  height: 1.2em;
  line-height: 1.2;
}

/* 개별 글자 */
.header.dropdown2-menu .gnb:not(.tablet2):not(.mo) .menu > li.cell > a.depth1 .rt-letter {
  display: inline-block;
  transition: transform 0.5s cubic-bezier(0.76, 0, 0.24, 1);
}

/* hover 시 글자 위로 이동 (자기 높이만큼) */
.header.dropdown2-menu .gnb:not(.tablet2):not(.mo) .menu > li.cell:hover > a.depth1 .rt-letter {
  transform: translateY(-100%);
}

/* 글자별 캐스케이드 딜레이 */
.header.dropdown2-menu .gnb:not(.tablet2):not(.mo) .menu > li.cell > a.depth1 .rt-letter:nth-child(1) { transition-delay: 0s; }
.header.dropdown2-menu .gnb:not(.tablet2):not(.mo) .menu > li.cell > a.depth1 .rt-letter:nth-child(2) { transition-delay: 0.02s; }
.header.dropdown2-menu .gnb:not(.tablet2):not(.mo) .menu > li.cell > a.depth1 .rt-letter:nth-child(3) { transition-delay: 0.04s; }
.header.dropdown2-menu .gnb:not(.tablet2):not(.mo) .menu > li.cell > a.depth1 .rt-letter:nth-child(4) { transition-delay: 0.06s; }
.header.dropdown2-menu .gnb:not(.tablet2):not(.mo) .menu > li.cell > a.depth1 .rt-letter:nth-child(5) { transition-delay: 0.08s; }
.header.dropdown2-menu .gnb:not(.tablet2):not(.mo) .menu > li.cell > a.depth1 .rt-letter:nth-child(6) { transition-delay: 0.1s; }
.header.dropdown2-menu .gnb:not(.tablet2):not(.mo) .menu > li.cell > a.depth1 .rt-letter:nth-child(7) { transition-delay: 0.12s; }
.header.dropdown2-menu .gnb:not(.tablet2):not(.mo) .menu > li.cell > a.depth1 .rt-letter:nth-child(8) { transition-delay: 0.14s; }
.header.dropdown2-menu .gnb:not(.tablet2):not(.mo) .menu > li.cell > a.depth1 .rt-letter:nth-child(9) { transition-delay: 0.16s; }
.header.dropdown2-menu .gnb:not(.tablet2):not(.mo) .menu > li.cell > a.depth1 .rt-letter:nth-child(10) { transition-delay: 0.18s; }
.header.dropdown2-menu .gnb:not(.tablet2):not(.mo) .menu > li.cell > a.depth1 .rt-letter:nth-child(11) { transition-delay: 0.2s; }
.header.dropdown2-menu .gnb:not(.tablet2):not(.mo) .menu > li.cell > a.depth1 .rt-letter:nth-child(12) { transition-delay: 0.22s; }

/* ===== 반응형 ===== */
@media screen and (max-width: 1024px) {
  .header.dropdown2-menu .gnb .menu > li.cell > a.depth1 .rt-mask {
    overflow: visible;
    flex-direction: row;
    height: auto;
  }
  .header.dropdown2-menu .gnb .menu > li.cell > a.depth1 .rt-block:last-child {
    display: none;
  }
  .header.dropdown2-menu .gnb .menu > li.cell:hover > a.depth1 .rt-letter {
    transform: none;
  }
}