/* menu_click_indicator.css
   - PC(≥992px)에서만 동작
   - 메뉴 항목을 클릭할 때, 해당 항목 아래에 슬라이드되는 밑줄 애니메이션
   - 기존 스타일에는 영향 최소화 (모바일/기타 레이아웃 그대로)
*/
@media (min-width: 768px){
  header.site-header nav.navigation{ position: relative !important; }
  header.site-header nav.navigation > ul{ position: relative !important; }

  /* 이동하는 단일 바(요소)는 JS에서 주입: <span class="menu-underline"></span> */
  header.site-header nav.navigation > ul .menu-underline{
    position: absolute !important;
    left: 0 !important;
    bottom: -3px !important;                 /* 헤더 하단 라인과 겹치지 않게 약간 위 */
    height: 3px !important;
    width: 0 !important;
    background: #fff !important;             /* 데스크톱 헤더의 글자색(흰색)에 맞춤 */
    border-radius: 2px !important;
    transform: translateX(0) !important;
    transition:
      transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important,
      width 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important,
      opacity 0.2s ease !important;
    opacity: 0 !important;
    pointer-events: none !important;
    z-index: 9999 !important;                   /* 드롭다운/텍스트보다 위 */
    box-shadow: 0 0 8px rgba(255,255,255,0.3) !important;
    display: block !important;
  }

  /* 메뉴 a 요소는 줄바꿈 방지 권장(사이트에 이미 선언돼 있어도 중복 안전) */
  header.site-header nav.navigation > ul > li > a{
    white-space: nowrap;
    display: inline-block;
  }
}

/* 선택적으로, 모바일은 효과 비활성(아래 라인 필요 시 이 구간 제거 후 별도 색상 지정) */
@media (max-width: 767px){
  header.site-header nav.navigation > ul .menu-underline{ display: none; }
}

:root{ --dd-gap: 8px; } /* 6~12px 사이로 취향 조절 */

@media (min-width: 768px){
  header.site-header .navigation > ul > li{ position: relative; }

  /* 드롭다운(서브메뉴) 살짝 아래로 */
  header.site-header .navigation > ul > li > ul.dropdown,
  header.site-header nav.navigation ul li .sub-menu{
    top: calc(100% + var(--dd-gap)) !important;
  }
}


/* ===== THEME: underline color/thickness/glow (append) ===== */
:root{
  /* 원하는 값으로 바꿔도 됨 */
  --menu-underline-color: #fff; /* 단색 - 헤더가 흰색이므로 흰색으로 변경 */
  --menu-underline-gradient: none; /* 예: linear-gradient(90deg,#ff5252 0%,#ffa252 100%) */
  --menu-underline-height: 3px;    /* 두께 */
  --menu-underline-bottom: -3px;   /* 위치 미세조정 */
  --menu-underline-opacity: 0.9;     /* 0~1 - 살짝 투명하게 */
  --menu-underline-shadow: 0 0 8px rgba(255,255,255,.3); /* glow. 흰색 글로우 */
}

@media (min-width: 768px){
  header.site-header nav.navigation > ul .menu-underline{
    height: var(--menu-underline-height) !important;
    bottom: var(--menu-underline-bottom) !important;
    opacity: var(--menu-underline-opacity) !important;
    background: var(--menu-underline-color) !important;
    background-image: var(--menu-underline-gradient) !important;
    box-shadow: var(--menu-underline-shadow) !important;
    display: block !important;
    visibility: visible !important;
  }
  
  /* 디버깅용 - 항상 보이게 하기 */
  header.site-header nav.navigation > ul .menu-underline{
    background: red !important;
    opacity: 0.5 !important;
    width: 100px !important;
  }
}