/* ============ 변수 (최종 톤 고정) ============ */
:root {
  --nav-accent: #2a3d66;
  --nav-accent-hover: #324a7a;
  --nav-accent-press: #223355;
  --nav-accent-ring: rgba(42, 61, 102, 0.35);
  --nav-on-accent: #fff;
  --nav-text: #333;
  --submenu-bg: #fff;
  --shadow: rgba(0, 0, 0, 0.14);
  --gap: 18px;
  --submenu-min: 210px;
  --submenu-gap: 18px;
  --hover-bridge: 22px;
  --menu-in-speed: 0.48s;
  --menu-out-speed: 0.9s;
  /* Glass – 원본 최종치 */
  --glass-blur: 5px;
  --glass-top: rgba(255, 255, 255, 0.22);
  --glass-bot: rgba(255, 255, 255, 0.1);
  --glass-edge: rgba(255, 255, 255, 0.38);
  --glass-vign: rgba(0, 0, 0, 0.06);
  --glass-glare: rgba(255, 255, 255, 0.8);
  --glass-sat: 0.2;
  --submenu-hover-pop: #00c8b4; /* 청록: 세련+시인성↑ */
}

/* ============ 메뉴바 ============ */
#mainNav {
  position: absolute;
  top: 30px;
  left: 350px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  gap: var(--gap);
  align-items: center;
  font-family: "Pretendard", system-ui, -apple-system, "Segoe UI", Roboto,
    sans-serif;
  white-space: nowrap;
}
#mainNav > li {
  position: relative;
  list-style: none;
  font-size: 15px;
  font-weight: 400;
  color: #222;
  flex-shrink: 0;
}
#mainNav > li::after {
  content: "";
  position: absolute;
  left: -6px;
  right: -6px;
  top: 100%;
  height: var(--hover-bridge);
  pointer-events: auto;
}

/* 대메뉴 링크 (배경 채움 없음이 기본 동작) */
#mainNav >  li > a {
  font-family: "Pretendard", sans-serif;
}
#mainNav > li > a {
  position: relative;
  display: inline-block;
  overflow: hidden;
  padding: 10px 15px;
  top: 10px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.2px;
  color: var(--nav-text);
  text-decoration: none;
  border-radius: 8px;
  background-color: transparent;
  transition: background-color 0.25s ease, color 0.25s ease;
}
/* 오버레이 */
#mainNav > li > a::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.06),
    rgba(255, 255, 255, 0)
  );
  opacity: 0;
  transition: opacity 0.25s ease;
}
/* 밑줄 */
#mainNav > li > a::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 6px;
  height: 2px;
  pointer-events: none;
  background: var(--nav-accent);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.25s ease;
}
/* hover/active — 배경 칠하지 않음(무력화 결과를 기본 동작으로 반영) */
#mainNav > li:hover > a {
  color: var(--nav-text);
}
#mainNav > li:hover > a::before {
  opacity: 1;
}
#mainNav > li:hover > a::after {
  transform: scaleX(1);
}
#mainNav > li > a:active {
  color: var(--nav-text);
}
#mainNav > li > a:active::before {
  opacity: 0.85;
}

/* ============ 드롭다운 (li>div>ul) ============ */
#mainNav > li > div > ul {
  position: absolute;
  top: calc(100% + var(--submenu-gap));
  left: 50%;
  transform: translate3d(-50%, 8px, 0);
  transform-origin: top center;
  backface-visibility: hidden;
  will-change: transform, opacity, backdrop-filter;
  min-width: var(--submenu-min);
  width: max-content;
  margin: 0;
  padding: 6px;
  list-style: none;
  border-radius: 8px;
  text-align: center;
  z-index: 1000;
  overflow: hidden;

  /* 보임/숨김(transition) */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.26s ease, transform 0.26s cubic-bezier(0.2, 0.8, 0.2, 1);

  /* 추가로 애니메이션도 사용(원본 템포 유지) */
  animation: menuOut var(--menu-out-speed) cubic-bezier(0.4, 0, 1, 1) both;

  /* Glass 설정 */
  background: transparent;
  isolation: isolate; /* ::before와 분리 */
  box-shadow: 0 16px 28px rgba(0, 0, 0, 0.473), 0 6px 12px rgba(0, 0, 0, 0.445);
  backdrop-filter: blur(var(--glass-blur)) saturate(150%) contrast(105%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(150%) contrast(105%);
}
#mainNav > li:hover > div > ul,
#mainNav > li:focus-within > div > ul {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate3d(-50%, 0, 0);
  animation: menuIn var(--menu-in-speed) cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

/* 배경 카드(::before) — 스케일만 여기서 */
#mainNav > li > div > ul::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 8px;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
      180deg,
      var(--glass-top) 0%,
      var(--glass-bot) 100%
    ),
    radial-gradient(
      120% 80% at 50% -10%,
      rgba(255, 255, 255, 0.35),
      transparent 60%
    );
  border: 1px solid var(--glass-edge);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 -1px 0 rgba(255, 255, 255, 0.08),
    inset 0 20px 30px var(--glass-vign);
  transform-origin: top center;
  opacity: 0;
  transform: scale(0.95);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
}
#mainNav > li:hover > div > ul::before,
#mainNav > li:focus-within > div > ul::before {
  animation: panelScaleIn var(--menu-in-speed) cubic-bezier(0.2, 0.8, 0.2, 1)
    both;
}
#mainNav > li:not(:hover) > div > ul::before {
  animation: panelScaleOut var(--menu-out-speed) cubic-bezier(0.4, 0, 1, 1) both;
}

/* 글레어(::after) */
#mainNav > li > div > ul::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 8px;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    115deg,
    transparent 40%,
    var(--glass-glare) 50%,
    transparent 60%
  );
  background-size: 220% 220%;
  opacity: 0;
  transition: opacity 0.35s ease, background-position 0.9s ease;
}
#mainNav > li:hover > div > ul::after,
#mainNav > li:focus-within > div > ul::after {
  opacity: 0.55;
  background-position: 120% 0;
}

/* 드롭 항목 */
#mainNav > li > div > ul > li > a {
  position: relative;
  z-index: 2;
  display: block;
  white-space: nowrap;
  padding: 10px 16px;
  border-radius: 6px;
  font-size: 14px;
  font-weight:500 !important;
  color: #fff;
  text-decoration: none;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.87);
  background-color: transparent;
  transition: background-color 0.22s ease, color 0.22s ease;
}
#mainNav > li > div > ul > li > a::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0.1),
    rgba(255, 255, 255, 0)
  );
  opacity: 0;
  transition: opacity 0.22s ease;
}
#mainNav > li > div > ul > li > a:hover {
  /* Fallback: 색상 미지원 브라우저 대비 */
  background-color: var(--submenu-hover-pop) !important;

  /* 지원 브라우저: 살짝 깊이감 있는 그라데이션 */
  background: linear-gradient(
    180deg,
    color-mix(in oklab, var(--submenu-hover-pop) 92%, white 8%),
    color-mix(in oklab, var(--submenu-hover-pop) 82%, black 18%)
  ) !important;

  color: #fff !important;
  /* 텍스트가 ‘뿌옇게’ 보이지 않도록 그림자 약화 */
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25) !important;

  /* 경계선/입체감으로 또렷함 추가 */
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28),
    0 6px 12px rgba(0, 0, 0, 0.18) !important;
  transition: background-color 0.22s ease, color 0.22s ease,
    box-shadow 0.22s ease !important;
}
#mainNav > li > div > ul > li > a:hover::before {
  opacity: 1;
}
#mainNav > li > div > ul > li > a:active {
  background-color: var(--nav-accent-press);
  color: var(--nav-on-accent);
}

/* 2열: ‘제품소개’만 */
#mainNav > li:nth-child(2) > div > ul {
  column-count: 2;
  column-gap: 12px;
  padding: 6px 8px;
  width: auto;
  max-width: 520px;
  text-align: left;
}
#mainNav > li:nth-child(2) > div > ul > li {
  break-inside: avoid;
}

/* 나머지 슬림 폭 */
#mainNav > li:not(:nth-child(2)) > div > ul {
  min-width: auto;
  width: fit-content;
  padding: 6px 10px;
  text-align: center;
}

/* 접근성 & 모션 */
#mainNav a:focus {
  outline: none;
}
#mainNav a:focus-visible {
  outline: none;
  border-radius: 6px;
  box-shadow: 0 0 0 3px var(--nav-accent-ring);
  transition: box-shadow 0.18s ease;
}
@media (prefers-reduced-motion: reduce) {
  #mainNav * {
    transition: none !important;
    animation: none !important;
  }
}

/* ============ 키프레임 (8px 오프셋 유지) ============ */
@keyframes menuIn {
  from {
    opacity: 0;
    transform: translate3d(-50%, 8px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(-50%, 0, 0);
  }
}
@keyframes menuOut {
  from {
    opacity: 1;
    transform: translate3d(-50%, 0, 0);
  }
  to {
    opacity: 0;
    transform: translate3d(-50%, 8px, 0);
  }
}
@keyframes panelScaleIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes panelScaleOut {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.98);
  }
}

/* --- DARK GLASS: 블러 + 얇은 어둡기 스크림 --- */
#mainNav > li > div > ul {
  backdrop-filter: blur(var(--glass-blur)) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) !important;
}
#mainNav > li > div > ul::before {
  /* 유백 그라데이션 대신 어두운 스크림으로 대비 확보 */
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.22) 0%,
    rgba(0, 0, 0, 0.14) 100%
  ) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important; /* 가장자리만 살짝 */
  box-shadow: none !important; /* 필요시 그대로 둬도 OK */
}
/* 글레어가 너무 밝으면 살짝 낮춤 */
#mainNav > li > div > ul::after {
  opacity: 0.35 !important;
}

/* 드롭다운 항목 텍스트 그림자 선명화 */
#mainNav > li > div > ul > li > a {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55) !important; /* 퍼짐↓, 대비 유지 */
}
#mainNav > li > div > ul > li > a {
  font-weight: 500;
}
/* 1) 블러 반경 키우기: 유리감↑ (성능 여유 있으면 22~28px) */
:root {
  --glass-blur: 14px;
}

/* 2) 블러에 '살짝' 선명도만 추가(밝기X) → 유백기 없이 유리감 */
#mainNav > li > div > ul {
  backdrop-filter: blur(var(--glass-blur)) saturate(120%) contrast(108%) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(120%) contrast(108%) !important;
}

/* 3) Dark overlay를 '가장자리 위주'로: 중앙은 더 투명 → 유리 깊이감↑ */
#mainNav > li > div > ul::before {
  background: radial-gradient(
    120% 100% at 50% 0%,
    rgba(0, 0, 0, 0.06) 0%,
    rgba(0, 0, 0, 0.12) 55%,
    rgba(0, 0, 0, 0.18) 100%
  ) !important; /* 중앙 밝게, 에지 살짝 어둡게 */
  border: 1px solid rgba(255, 255, 255, 0.18) !important; /* 얇은 유리 가장자리 */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22),
    /* 안쪽 윗면 하이라이트 */ inset 0 -1px 0 rgba(255, 255, 255, 0.08) !important;
}

/* 4) 글레어 조금만 강화 → 유리 표면 반사광 체감↑ */
:root {
  --glass-glare: rgba(255, 255, 255, 0.82);
}
#mainNav > li > div > ul::after {
  opacity: 0.45 !important;
}
#mainNav a:focus-visible {
  border-radius: 6px;
  box-shadow: 0 0 0 3px var(--submenu-hover-pop);
  transition: box-shadow 0.2s ease;
}