/**
 * 헤더 UI 오버라이드 — 모바일 메뉴 좌측 슬라이드 + 딤 백드롭 (3사 통일, 2026-08-11)
 *  - 베이스 CSS(풀폭 패널)는 외부(스니펫/DB)에 있어 여기서 !important 로 확정 오버라이드.
 *  - JS(js/header-ui.js)의 display 인라인 토글은 무력화하고 transform/visibility 로 개폐.
 *  - 표준 = 인트라/이슈데이 좌측 슬라이드 min(86vw, 360px).
 */

#mobile-menu.mobile-menu {
  display: block !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  bottom: 0 !important;
  right: auto !important;
  width: min(86vw, 360px) !important;
  max-width: min(86vw, 360px) !important;
  height: 100dvh !important;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  z-index: 100000 !important;
  transform: translateX(-105%);
  visibility: hidden;
  transition: transform 0.28s ease, visibility 0s linear 0.28s;
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.45);
}
#mobile-menu.mobile-menu.active {
  transform: none;
  visibility: visible;
  transition: transform 0.28s ease;
}

/* 딤 백드롭 — 패널 아래, 클릭 시 닫힘(외부클릭) */
.mobile-menu-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.28s ease, visibility 0s linear 0.28s;
  z-index: 99999;
}
.mobile-menu-backdrop.active {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.28s ease;
}

@media (prefers-reduced-motion: reduce) {
  #mobile-menu.mobile-menu,
  #mobile-menu.mobile-menu.active,
  .mobile-menu-backdrop,
  .mobile-menu-backdrop.active {
    transition: none;
  }
}