/* ✅ Mobile Top Dropdown (Bootstrap 독립) */
:root {
  --mnav-bg: rgba(33,37,41,.97);
  --mnav-overlay: rgba(0,0,0,.5);
  --mnav-radius: 14px;
  --mnav-dur: .3s;
}

/* 모바일 전용 (≥992px에서는 숨김 처리 옵션은 맨 아래 주석 참고) */
@media (max-width: 991.98px) {
  .mnav { position: relative; z-index: 1000; }

  .mnav__toggler{
    appearance:none; border:0; background:#212529; color:#fff;
    padding:.6rem .9rem; border-radius:.6rem; font-size:1rem;
  }

  /* 오버레이 */
  .mnav__overlay{
    position: fixed; inset: 0; background: var(--mnav-overlay);
    opacity: 0; transition: opacity var(--mnav-dur) ease; z-index: 1010;
  }
  .mnav__overlay.is-open{ opacity:1; }
  .mnav__overlay[hidden]{ display:none; }

  /* 패널: 위에서 아래로 */
  .mnav__panel{
    position: fixed; top:0; left:0; right:0; z-index: 1020;
    background: var(--mnav-bg);
    padding: 1.1rem 1.25rem 1.4rem;
    max-height: 80vh; overflow-y: auto;
    border-bottom-left-radius: var(--mnav-radius);
    border-bottom-right-radius: var(--mnav-radius);
    box-shadow: 0 8px 18px rgba(0,0,0,.22);

    transform: translateY(-100%);
    transition: transform var(--mnav-dur) ease-in-out;
  }
  .mnav__panel.is-open{ transform: translateY(0); }
  .mnav__panel[hidden]{ display:none; }

  /* 아이템 순차 등장 */
  .mnav__list{ list-style:none; margin:0; padding:.25rem 0 0; }
  .mnav__item{
    opacity:0; transform: translateY(-8px);
    transition: opacity .28s ease, transform .28s ease;
    transition-delay: calc(.05s * var(--i, 0));
  }
  .mnav__panel.is-open .mnav__item{ opacity:1; transform: translateY(0); }

  .mnav__link{
    display:block; padding:.9rem 0; color:#f8f9fa; text-decoration:none;
    border-bottom:1px solid rgba(255,255,255,.08);
  }
  .mnav__link:active{ opacity:.75; }
}

/* 데스크톱에서 이 컴포넌트 자체를 숨기고 싶으면 해제:
@media (min-width: 992px){
  .mnav, .mnav__toggler, .mnav__overlay, .mnav__panel{ display:none !important; }
}
*/
@media (min-width: 992px){
  .mnav, .mnav__overlay, .mnav__panel { display: none !important; }
}