diff --git a/src/main/resources/static/css/style.css b/src/main/resources/static/css/style.css
index e558acc..ec9e68b 100644
--- a/src/main/resources/static/css/style.css
+++ b/src/main/resources/static/css/style.css
@@ -285,10 +285,20 @@ body.sidebar-collapsed #mainContent { margin-left: var(--sidebar-collapsed-width
 
     :root { --sidebar-collapsed-width: 0px; }
     .sidebar { transform: translateX(-100%); }
-    .sidebar:not(.collapsed) { transform: translateX(0); width: 100%; background: var(--surface); }
+    .sidebar:not(.collapsed) { transform: translateX(0); width: 280px; max-width: 86vw; background: var(--side-bg); box-shadow: var(--shadow-lg); }
     body.sidebar-collapsed #mainContent { margin-left: 0; }
     #mainContent { margin-left: 0 !important; }
 
+    /* 모바일에서 펼쳤을 때(오버레이) 라벨/텍스트 다시 표시 + 좌측 정렬 */
+    .sidebar:not(.collapsed) .brand-text,
+    .sidebar:not(.collapsed) .nav-text,
+    .sidebar:not(.collapsed) .nav-section,
+    .sidebar:not(.collapsed) .user-info,
+    .sidebar:not(.collapsed) .theme-toggle span { display: revert; }
+    .sidebar:not(.collapsed) .nav-item { justify-content: flex-start; padding: 0.6rem 0.9rem; }
+    .sidebar:not(.collapsed) .nav-icon { margin-right: 0.7rem; }
+    .sidebar:not(.collapsed) .theme-toggle { justify-content: flex-start; }
+
     .video-header-image { width: 100% !important; height: auto !important; aspect-ratio: 16/9; margin-bottom: 1rem; }
     .stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; width: 100%; }
     .tabs-container { overflow-x: auto; padding-bottom: 0.5rem; margin-bottom: 1rem; -webkit-overflow-scrolling: touch; }
diff --git a/src/main/resources/templates/layout/base.html b/src/main/resources/templates/layout/base.html
index e800652..1629e05 100644
--- a/src/main/resources/templates/layout/base.html
+++ b/src/main/resources/templates/layout/base.html
@@ -22,8 +22,8 @@
     <link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,700;12..96,800&family=Hanken+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@500;700&display=swap" rel="stylesheet">
 
     <!-- CSS (v= 캐시 버스팅 — CSS 바뀌면 숫자 올리기) -->
-    <link rel="stylesheet" th:href="@{/css/variables.css(v=20260617)}">
-    <link rel="stylesheet" th:href="@{/css/style.css(v=20260617)}">
+    <link rel="stylesheet" th:href="@{/css/variables.css(v=20260617b)}">
+    <link rel="stylesheet" th:href="@{/css/style.css(v=20260617b)}">
 
     <!-- Lucide Icons (CDN for simplicity in SSR) -->
     <script src="https://unpkg.com/lucide@latest"></script>
@@ -48,7 +48,7 @@
     </div>
 
     <!-- JS -->
-    <script th:src="@{/js/common.js(v=20260617)}"></script>
+    <script th:src="@{/js/common.js(v=20260617b)}"></script>
     <script>
         lucide.createIcons();
     </script>