/* 手機側邊欄抽屜:打開/關閉 + 遮罩
 * 真凶:Tailwind v4 用獨立的 `translate` CSS 屬性(translate:-100%)藏側邊欄,
 * 不是 transform。所以必須覆蓋 translate。 */
@media (max-width: 767px) {
  /* 預設:藏到螢幕外(與 Tailwind 一致),加上過渡 */
  aside {
    translate: -100% 0 !important;
    transform: none !important;
    transition: translate .28s ease !important;
  }
  /* 打開:滑入 */
  html.bt-drawer-open aside {
    translate: 0 0 !important;
  }
  /* 遮罩 */
  #bt-drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 39;
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility .25s ease;
  }
  html.bt-drawer-open #bt-drawer-backdrop {
    opacity: 1;
    visibility: visible;
  }
  /* 打開時鎖定背景滾動 */
  html.bt-drawer-open,
  html.bt-drawer-open body {
    overflow: hidden;
  }
}