feat(sidebar): add backdrop for improved sidebar interaction

src/components/layout/MainLayout.tsx

@@ -759,6 +759,15 @@ export function MainLayout() {
       </header>
 
       <div className="main-body">
+        <button
+          type="button"
+          className={`sidebar-backdrop ${sidebarOpen ? 'visible' : ''}`}
+          onClick={() => setSidebarOpen(false)}
+          aria-label={t('common.close')}
+          aria-hidden={!sidebarOpen}
+          tabIndex={sidebarOpen ? 0 : -1}
+        />
+
         <aside
           className={`sidebar ${sidebarOpen ? 'open' : ''} ${sidebarCollapsed ? 'collapsed' : ''}`}
         >

src/styles/layout.scss

@@ -442,6 +442,29 @@
   }
 }
 
+.sidebar-backdrop {
+  display: none;
+  border: 0;
+  padding: 0;
+  margin: 0;
+  background: rgb(15 23 42 / 0.18);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity $transition-fast;
+
+  @media (max-width: $breakpoint-mobile) {
+    display: block;
+    position: fixed;
+    inset: var(--header-height) 0 0;
+    z-index: $z-dropdown - 1;
+
+    &.visible {
+      opacity: 1;
+      pointer-events: auto;
+    }
+  }
+}
+
 .sidebar {
   width: 240px;
   background: var(--bg-primary);