Fix mobile layout shift and menu overflow (comprehensive CSS normalization)

static/css/mobile_custom.css

@@ -72,14 +72,17 @@
         background-color: rgba(30, 41, 59, 0.6) !important;
         backdrop-filter: blur(10px);
         border: 1px solid rgba(255, 255, 255, 0.08);
-        border-radius: 50rem !important; /* Pill shape container */
+        border-radius: 10px !important;
-        padding: 6px !important;
+        padding: 4px !important;
         box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2) !important;
-        display: inline-flex !important; /* Fit content */
+        display: flex !important; /* Changed from inline-flex to prevent horizontal stretching */
-        flex-wrap: wrap; /* allow wrap on small screens */
+        flex-wrap: nowrap !important; /* Force scrollable row */
-        justify-content: center;
+        overflow-x: auto !important;
-        width: auto !important; /* Prevent full width */
+        -webkit-overflow-scrolling: touch;
-        margin-top: 2px !important; /* Reduced for modularity */
+        width: 100% !important; /* Max width constraint */
+        max-width: 100% !important;
+        box-sizing: border-box !important;
+        margin-top: 2px !important;
     }
 
     /* Override for the fallback above to be tighter */
@@ -102,11 +105,13 @@
     }
 
     ul.nav.nav-pills .nav-link {
-        border-radius: 50rem !important;
+        border-radius: 6px !important;
-        padding: 6px 16px !important;
+        padding: 6px 12px !important;
         color: #94a3b8 !important; /* Muted text */
         font-weight: 600;
         transition: all 0.3s ease;
+        white-space: nowrap !important; /* Necessary for scrollable items */
+        font-size: 12px !important;
     }
 
     ul.nav.nav-pills .nav-link:hover {
@@ -121,15 +126,39 @@
         box-shadow: 0 4px 12px rgba(37, 99, 235, 0.4);
     }
     
-    /* Layout Expansion on Mobile */
+    /* Layout Expansion on Mobile - Critical Fix for Horizontal Shift */
-    .container, .container-fluid, .row, form, #main_container {
+    html, body {
+        overflow-x: hidden !important;
+        width: 100vw !important;
+        position: relative;
+    }
+
+    .container, .container-fluid, #main_container {
         width: 100% !important; 
         max-width: 100% !important;
-        padding-left: 8px !important; 
+        padding-left: 5px !important; 
-        padding-right: 8px !important;
+        padding-right: 5px !important;
         margin-left: 0 !important; 
         margin-right: 0 !important;
         box-sizing: border-box !important;
+        overflow-x: hidden !important; /* Prevent internal bleed from stretching body */
+    }
+
+    .row {
+        margin-left: 0 !important;
+        margin-right: 0 !important;
+        width: 100% !important;
+    }
+
+    [class*="col-"] {
+        padding-left: 5px !important;
+        padding-right: 5px !important;
+    }
+    
+    form {
+        width: 100% !important;
+        margin: 0 !important;
+        box-sizing: border-box !important;
     }
     
     /* Card/Table Container Fix */

templates/anime_downloader_anilife_queue.html

@@ -92,20 +92,12 @@
         .queue-btn-top { flex: 1; justify-content: center; font-size: 11px !important; padding: 10px !important; }
         .queue-meta { font-size: 10px; margin-top: 4px; }
         
-        /* Force container padding reduction for mobile queue */
+        /* Ensure breadcrumb span doesn't force width */
-        #main_container { padding-left: 2px !important; padding-right: 2px !important; }
+        #menu_module_div span.nav-link {
-        
+            overflow: hidden;
-        /* Fix navigation pills overflow */
+            text-overflow: ellipsis;
-        #menu_module_div .nav-pills, #menu_page_div .nav-pills {
+            max-width: 150px;
-            flex-wrap: nowrap !important;
-            overflow-x: auto !important;
-            -webkit-overflow-scrolling: touch;
             white-space: nowrap !important;
-            display: flex !important;
-        }
-        #menu_module_div .nav-link, #menu_page_div .nav-link {
-            padding: 8px 12px !important;
-            font-size: 12px !important;
         }
         
         /* Header buttons wrap and layout */
@@ -116,13 +108,7 @@
             min-width: 120px;
         }
         
-        /* Ensure breadcrumb span doesn't force width */
+        /* Ensure breadcrumb span doesn't force width - moved up */
-        #menu_module_div span.nav-link {
-            overflow: hidden;
-            text-overflow: ellipsis;
-            max-width: 200px;
-            white-space: nowrap;
-        }
     }
 
     .mobile-queue-card {

templates/anime_downloader_anilife_request.html

@@ -11,20 +11,10 @@ body {
     background-attachment: fixed !important;
 }
 
-/* Global Container Margin Overrides */
+/* Global Container Margin Overrides - mobile_custom.css와 통합 */
 #main_container {
     width: 100% !important;
     max-width: 100% !important;
-    padding-left: 2px !important;   /* 15px -> 2px */
-    padding-right: 2px !important;  /* 15px -> 2px */
-    margin-left: 0 !important;
-    margin-right: 0 !important;
-}
-.container, .container-fluid:not(.anilife-common-wrapper) {
-    width: 100% !important;
-    max-width: 100% !important;
-    padding-left: 0 !important;
-    padding-right: 0 !important;
 }
 </style>
 
@@ -775,27 +765,12 @@ body {
     
     /* 모바일 반응형 - Bootstrap 모든 레이아웃 강제 덮어쓰기 */
     @media (max-width: 768px) {
-        /* 상단 서브메뉴가 SJVA 메인 navbar에 가려지지 않도록 여백 추가 */
-        ul.nav.nav-pills.bg-light {
-            margin-top: 60px !important;
-            flex-wrap: nowrap !important;
-            overflow-x: auto !important;
-            -webkit-overflow-scrolling: touch;
-            display: flex !important;
-            width: 100% !important;
-            border-radius: 10px !important;
-        }
-        ul.nav.nav-pills .nav-link {
-            padding: 8px 12px !important;
-            font-size: 11px !important;
-            white-space: nowrap !important;
-        }
-        
         /* Ensure breadcrumb span doesn't force width */
         #menu_module_div span.nav-link {
             overflow: hidden;
             text-overflow: ellipsis;
-            max-width: 200px;
+            max-width: 150px;
+            white-space: nowrap !important;
         }
         
         /* 입력창 크기 최적화 */