Bump version to 0.7.7: Fix Linkkf headers and Anilife speed optimization

README.md

@@ -83,6 +83,41 @@
 ---
 
 ## 📝 변경 이력 (Changelog)
+ 
+### v0.7.7 (2026-01-19)
+- **Linkkf 추출 핵심 보강 및 Anilife 고속화**:
+    - **전용 헤더 처리**: Linkkf 스트리밍 영상(m3u8) 추출 시 Referer 헤더가 유실되던 문제를 CDP 타입 래핑(`zd.cdp.network.Headers()`)으로 완벽 해결.
+    - **Anilife 퍼포먼스**: 애니라이프 영상 추출 시 불필요한 대기 시간을 제거하고 네비게이션 전략을 최적화하여 추출 속도를 개선했습니다.
+    - **GDM 연동 안정성**: yt-dlp 호출 시 `--add-header` 옵션을 통해 모든 보안 파라미터를 정확히 전달하도록 보강했습니다.
+
+### v0.7.6 (2026-01-12)
+- **모바일 상단 메뉴 스크롤 힌트 도입**: 
+    - 메뉴가 가로로 길어질 때 우측에 은은한 페이드 효과를 추가하여 '더 많은 메뉴'가 있음을 직관적으로 알 수 있도록 개선했습니다.
+    - 아주 가늘고 투명한 스크롤바 가이드를 추가하여 모던한 감성을 더했습니다.
+    - CSS 구문 최적화 및 미디어 쿼리 중복을 정리했습니다.
+
+### v0.7.5 (2026-01-12)
+- **모바일 레이아웃 가로 핏 완벽 최적화**: 
+    - 화면이 70%만 보이고 오른쪽으로 밀리던 현상을 해결하기 위해 전역적인 너비 정규화(`width: 100%`)와 오버플로우 차단을 적용했습니다.
+    - 모바일 브라우저 렌더링 오류를 유발하는 `background-attachment: fixed` 속성을 모바일 한정으로 해제했습니다.
+    - 모든 요소에 `box-sizing: border-box`를 강제하여 패딩으로 인한 너비 확장을 방지했습니다.
+    - 에피소드 그리드를 모바일 1열 배치로 최적화하여 오버플로우를 원천 차단했습니다.
+
+### v0.7.4 (2026-01-12)
+- **모바일 레이아웃 시프트 최종 수정**: 
+    - 부트스트랩 `row`의 음수 마진으로 인해 화면이 오른쪽으로 밀려 보이던 현상을 정규화 작업을 통해 해결했습니다.
+    - `html`, `body` 레벨에서 가로 오버플로우를 차단하고 전역적인 단위 대응(`100vw`)을 적용하여 안정적인 가로 핏을 구현했습니다.
+    - 상단 메뉴(브레드크럼)가 부모 너비를 확장시키지 않도록 `display` 속성을 개선했습니다.
+
+### v0.7.3 (2026-01-12)
+- **Anilife 모바일 UI 최적화 (프리미엄 개편)**:
+    - **분석 페이지**: 가로 여백을 최소화(15px -> 2px)하여 모바일 가독성 증대.
+    - **큐 페이지**: 기존 테이블 레이아웃을 모바일 전용 **카드형 레이아웃**으로 전면 교체. 파일명과 진행률 바를 강조하고 2단 정보 그리드를 도입하여 가시성 확보.
+    - **오버플로우 수정**: 상단 메뉴(브레드크럼) 가로 스크롤 적용 및 액션 버튼 자동 줄바꿈 배치를 통해 화면 넘침 해결.
+- **Linkkf 안정화 및 자막 연동**:
+    - **자막 자동화**: GDM(v0.2.30+) 연동을 통해 비디오와 자막을 동시에 안전하게 다운로드.
+    - **경로 정규화**: 저장 경로 내 중복 구분자(`//./`) 발생 문제를 원천 해결.
+    - **추출 성능**: 비디오 URL 추출 시 타임아웃 및 예외 처리를 강화하여 UI 프리징 방지.
 
 ### v0.7.2 (2026-01-11)
 - **Linkkf 자막 전용 다운로드 지원**:

info.yaml

@@ -1,5 +1,5 @@
 title: "애니 다운로더"
-version: 0.7.2
+version: 0.7.7
 package_name: "anime_downloader"
 developer: "projectdx"
 description: "anime downloader"

mod_linkkf.py

@@ -924,9 +924,9 @@ class LogicLinkkf(AnimeModuleBase):
             logger.info(f"Extracting video URL from: {playid_url}")
             
             # Step 1: playid 페이지에서 iframe src 추출 (cloudscraper 사용)
-            html_content = LogicLinkkf.get_html(playid_url)
+            html_content = LogicLinkkf.get_html(playid_url, timeout=15)
             if not html_content:
-                logger.error(f"Failed to fetch playid page: {playid_url}")
+                logger.error(f"Failed to fetch playid page (Timeout or Error): {playid_url}")
                 return None, None, None
                 
             soup = BeautifulSoup(html_content, "html.parser")
@@ -958,9 +958,9 @@ class LogicLinkkf(AnimeModuleBase):
                 logger.info(f"Found player iframe: {iframe_src}")
                 
                 # Step 2: iframe 페이지에서 m3u8 URL과 vtt URL 추출
-                iframe_content = LogicLinkkf.get_html(iframe_src)
+                iframe_content = LogicLinkkf.get_html(iframe_src, timeout=15)
                 if not iframe_content:
-                    logger.error(f"Failed to fetch iframe content: {iframe_src}")
+                    logger.error(f"Failed to fetch iframe content (Timeout or Error): {iframe_src}")
                     return None, iframe_src, None
                 
                 # m3u8 URL 패턴 찾기 (더 정밀하게)
@@ -1951,7 +1951,7 @@ class LogicLinkkf(AnimeModuleBase):
             # Prepare GDM options
             gdm_options = {
                 "url": entity.url,
-                "save_path": entity.savepath,
+                "save_path": os.path.normpath(entity.savepath),
                 "filename": entity.filename,
                 "source_type": gdm_source_type,
                 "caller_plugin": f"{P.package_name}_{self.name}",
@@ -1965,7 +1965,7 @@ class LogicLinkkf(AnimeModuleBase):
                     "source": "linkkf"
                 },
                 "headers": entity.headers,
-                "subtitles": entity.vtt,
+                "subtitles": getattr(entity, 'vtt', None),
                 "connections": download_threads,
             }
             

static/css/anilife.css

@@ -14,6 +14,12 @@ body {
     color: #e0e7ff !important;
 }
 
+@media (max-width: 768px) {
+    body {
+        background-attachment: scroll !important; /* Fixed background causes shift on some mobile browsers */
+    }
+}
+
 /* Common Layout Wrapper - Responsive */
 .anilife-common-wrapper {
     max-width: 100%;

static/css/mobile_custom.css

@@ -54,82 +54,125 @@
     font-weight: 600 !important;
 }
 
-/* Common Mobile Responsive Fixes */
+/* Common Mobile Responsive Fixes - Comprehensive Normalization */
 @media (max-width: 768px) {
-    body { 
-        padding-top: 5px !important; 
+    *, ::before, ::after {
+        box-sizing: border-box !important;
+    }
+    
+    html, body { 
+        width: 100% !important;
+        max-width: 100% !important;
+        margin: 0 !important;
+        padding: 0 !important;
+        overflow-x: hidden !important;
+        position: relative !important;
+        -webkit-text-size-adjust: 100%;
+        touch-action: manipulation;
+    }
+
+    /* Layout Expansion on Mobile - Critical Fix for Horizontal Shift */
+    .container, .container-fluid, #main_container {
+        width: 100% !important; 
+        max-width: 100% !important;
+        min-width: 0 !important;
+        padding-left: 6px !important; 
+        padding-right: 6px !important;
+        margin-left: 0 !important; 
+        margin-right: 0 !important;
+        box-sizing: border-box !important;
         overflow-x: hidden !important;
     }
 
-    /* Compact Navbar */
+    .row {
+        margin-left: 0 !important;
+        margin-right: 0 !important;
+        width: 100% !important;
+        display: flex;
+        flex-wrap: wrap;
+    }
+
+    [class*="col-"] {
+        padding-left: 4px !important;
+        padding-right: 4px !important;
+        min-width: 0 !important;
+    }
+
+    /* Compact Navbar Fix */
     .navbar {
+        width: 100% !important;
+        max-width: 100% !important;
         padding-top: 0.25rem !important;
         padding-bottom: 0.25rem !important;
+        margin: 0 !important;
     }
     
-    /* Global Navigation Pills Fix & Premium Styling */
+    /* Scroll Hint Container Fix */
+    #menu_module_div, #menu_page_div {
+        position: relative;
+        width: 100% !important;
+        overflow: hidden;
+    }
+
+    /* Gradient Hint to indicate more items (Scroll Hint) */
+    #menu_module_div::after, #menu_page_div::after {
+        content: '';
+        position: absolute;
+        top: 4px; bottom: 4px; right: 0;
+        width: 40px;
+        background: linear-gradient(to right, transparent, rgba(30, 41, 59, 0.9));
+        pointer-events: none;
+        z-index: 10;
+        border-top-right-radius: 8px;
+        border-bottom-right-radius: 8px;
+    }
+
+    /* Navigation Pills Styling */
     ul.nav.nav-pills.bg-light {
         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 */
-        padding: 6px !important;
-        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2) !important;
-        display: inline-flex !important; /* Fit content */
-        flex-wrap: wrap; /* allow wrap on small screens */
-        justify-content: center;
-        width: auto !important; /* Prevent full width */
-        margin-top: 2px !important; /* Reduced for modularity */
+        border-radius: 8px !important;
+        padding: 4px !important;
+        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
+        display: flex !important;
+        flex-wrap: nowrap !important;
+        overflow-x: auto !important;
+        -webkit-overflow-scrolling: touch;
+        width: 100% !important;
+        max-width: 100% !important;
+        box-sizing: border-box !important;
+        margin-top: 2px !important;
+        justify-content: flex-start !important;
+        scrollbar-width: thin; /* Firefox */
     }
 
-    /* Override for the fallback above to be tighter */
-    ul.nav.nav-pills.bg-light {
-        margin-top: 4px !important;
+    /* Subtle scrollbar hint for mobile */
+    ul.nav.nav-pills.bg-light::-webkit-scrollbar {
+        height: 3px;
     }
-
-    /* Tighten spacing between 2nd and 3rd level menus */
-    #menu_module_div ul.nav.nav-pills.bg-light {
-        margin-bottom: 2px !important;
-    }
-    
-    #menu_page_div ul.nav.nav-pills.bg-light {
-        margin-top: -4px !important;
-        margin-bottom: 12px !important;
+    ul.nav.nav-pills.bg-light::-webkit-scrollbar-thumb {
+        background: rgba(255, 255, 255, 0.15);
+        border-radius: 10px;
     }
 
     ul.nav.nav-pills .nav-item {
-        margin: 0 2px;
+        flex: 0 0 auto !important;
     }
 
     ul.nav.nav-pills .nav-link {
-        border-radius: 50rem !important;
-        padding: 6px 16px !important;
-        color: #94a3b8 !important; /* Muted text */
+        border-radius: 6px !important;
+        padding: 6px 14px !important;
+        color: #94a3b8 !important;
         font-weight: 600;
         transition: all 0.3s ease;
-    }
-
-    ul.nav.nav-pills .nav-link:hover {
-        background-color: rgba(255, 255, 255, 0.1);
-        color: #fff !important;
-        transform: translateY(-1px);
+        white-space: nowrap !important;
+        font-size: 11px !important;
     }
 
     ul.nav.nav-pills .nav-link.active {
         background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
         color: #fff !important;
-        box-shadow: 0 4px 12px rgba(37, 99, 235, 0.4);
-    }
-    
-    /* Layout Expansion on Mobile */
-    .container, .container-fluid, .row, form, #main_container {
-        width: 100% !important; 
-        max-width: 100% !important;
-        padding-left: 8px !important; 
-        padding-right: 8px !important;
-        margin-left: 0 !important; 
-        margin-right: 0 !important;
-        box-sizing: border-box !important;
     }
     
     /* Card/Table Container Fix */
@@ -137,7 +180,7 @@
         width: 100% !important;
         margin-left: 0 !important;
         margin-right: 0 !important;
-        border-radius: 12px !important;
+        border-radius: 8px !important;
     }
 }
 

templates/anime_downloader_anilife_queue.html

@@ -77,6 +77,82 @@
     /* Smooth Load */
     .content-cloak { opacity: 0; transition: opacity 0.5s ease-out; }
     .content-cloak.visible { opacity: 1; }
+
+    /* Mobile Friendly Card Layout - Revamped */
+    .mobile-queue-container { display: none; flex-direction: column; gap: 8px; padding: 2px; width: 100% !important; margin: 0 !important; }
+    
+    @media (max-width: 768px) {
+        .table-responsive-custom { display: none; }
+        .mobile-queue-container { display: flex; }
+        .queue-header-container { 
+            flex-direction: column; align-items: flex-start; gap: 8px; 
+            margin-top: 50px; padding: 10px 5px !important; margin-bottom: 10px;
+        }
+        .header-buttons { width: 100%; display: flex; gap: 8px; }
+        .queue-btn-top { flex: 1; justify-content: center; font-size: 11px !important; padding: 10px !important; }
+        .queue-meta { font-size: 10px; margin-top: 4px; }
+        
+        /* Ensure breadcrumb span doesn't force width */
+        #menu_module_div span.nav-link {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            max-width: 150px;
+            white-space: nowrap !important;
+        }
+        
+        /* Header buttons wrap and layout */
+        .queue-header-container { padding-top: 60px !important; }
+        .header-buttons { flex-wrap: wrap !important; gap: 6px !important; }
+        .queue-btn-top { 
+            flex: 1 1 45% !important; /* Allow two buttons per row if space exists, or wrap */
+            min-width: 120px;
+        }
+        
+        /* Ensure breadcrumb span doesn't force width - moved up */
+    }
+
+    .mobile-queue-card {
+        background: linear-gradient(135deg, rgba(6, 78, 59, 0.4) 0%, rgba(2, 44, 34, 0.6) 100%);
+        border: 1px solid rgba(16, 185, 129, 0.25);
+        border-radius: 10px;
+        padding: 12px 10px;
+        box-shadow: 0 4px 15px rgba(0,0,0,0.3);
+        width: 100% !important;
+        box-sizing: border-box;
+    }
+    
+    .mobile-card-top { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 10px; }
+    .mobile-card-idx-badge { 
+        background: rgba(16, 185, 129, 0.2); color: #6ee7b7; font-size: 10px; 
+        padding: 2px 6px; border-radius: 4px; font-weight: 800; border: 1px solid rgba(16, 185, 129, 0.3);
+    }
+    .mobile-card-filename { color: #ecfdf5; font-weight: 700; font-size: 13.5px; line-height: 1.4; word-break: break-all; flex: 1; }
+    
+    .mobile-card-progress-section { 
+        background: rgba(0,0,0,0.2); padding: 10px; border-radius: 8px; margin-bottom: 10px; 
+        border: 1px solid rgba(255,255,255,0.05);
+    }
+    .mobile-progress-label { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
+    .mobile-status-text { font-size: 11px; font-weight: 800; text-transform: uppercase; }
+    .mobile-percent-text { font-size: 14px; font-weight: 900; color: #10b981; }
+    
+    .mobile-progress-bar-container { height: 8px; background: rgba(0,0,0,0.5); border-radius: 4px; overflow: hidden; margin-top: 2px; }
+    .mobile-progress-bar { background: linear-gradient(90deg, #10b981, #34d399); height: 100%; border-radius: 4px; transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
+    
+    .mobile-card-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 10px; }
+    .mobile-stat-item { 
+        display: flex; align-items: center; gap: 5px; font-size: 11px; color: #94a3b8; 
+        background: rgba(0,0,0,0.15); padding: 5px 8px; border-radius: 6px;
+    }
+    .mobile-stat-item i { color: #10b981; width: 12px; text-align: center; }
+    
+    .mobile-card-actions { display: flex; gap: 8px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,0.05); justify-content: flex-end; }
+    .mobile-action-btn { 
+        padding: 8px 15px; border-radius: 6px; border: none; font-size: 12px; font-weight: 700; 
+        display: flex; align-items: center; gap: 6px; transition: opacity 0.2s;
+    }
+    .mobile-action-btn.btn-stop { background: rgba(239, 68, 68, 0.25); color: #f87171; border: 1px solid rgba(239, 68, 68, 0.3); }
+    .mobile-action-btn.btn-delete { background: rgba(245, 158, 11, 0.2); color: #fbbf24; border: 1px solid rgba(245, 158, 11, 0.3); }
 </style>
 
 <div class="content-cloak">
@@ -112,6 +188,9 @@
             <tbody id="list"></tbody>
         </table>
     </div>
+
+    <!-- Mobile Card View -->
+    <div id="mobile_list" class="mobile-queue-container"></div>
 </div>
 
 <script type="text/javascript">
@@ -222,14 +301,20 @@ function on_start() {
 
 function renderList(data) {
     $("#list").html('');
+    $("#mobile_list").html('');
     if (!data || data.length == 0) {
+        let empty_msg = "<div style='text-align:center; padding: 40px; color: #6ee7b7;'>다운로드 대기 중인 작업이 없습니다.</div>";
         $("#list").html("<tr><td colspan='10' style='text-align:center; padding: 40px; color: #6ee7b7;'>다운로드 대기 중인 작업이 없습니다.</td></tr>");
+        $("#mobile_list").html(empty_msg);
     } else {
         var str = '';
+        var m_str = '';
         for(var i in data) {
             str += make_item(data[i]);
+            m_str += make_mobile_item(data[i]);
         }
         $("#list").html(str);
+        $("#mobile_list").html(m_str);
     }
 }
 
@@ -311,6 +396,52 @@ function make_item1(data) {
     return str;
 }
 
+function make_mobile_item(data) {
+    var status_class = 'status-wait';
+    if (data.status_str === 'DOWNLOADING') status_class = 'status-downloading';
+    else if (data.status_str === 'COMPLETED') status_class = 'status-completed';
+    else if (data.status_str === 'STOP') status_class = 'status-fail';
+
+    var str = '<div class="mobile-queue-card" id="mobile_card_'+data.idx+'">';
+    
+    // Top Section: Index and Filename
+    str += '  <div class="mobile-card-top">';
+    str += '    <div class="mobile-card-idx-badge">#' + data.idx + '</div>';
+    str += '    <div class="mobile-card-filename">' + data.filename + '</div>';
+    str += '  </div>';
+    
+    // Progress Section
+    str += '  <div class="mobile-card-progress-section">';
+    str += '    <div class="mobile-progress-label">';
+    str += '      <div class="mobile-status-text ' + status_class + '-text">' + data.status_kor + '</div>';
+    str += '      <div id="m_percent_' + data.idx + '" class="mobile-percent-text">' + data.percent + '%</div>';
+    str += '    </div>';
+    str += '    <div class="mobile-progress-bar-container">';
+    str += '      <div id="m_progress_bar_' + data.idx + '" class="mobile-progress-bar" style="width:' + data.percent + '%"></div>';
+    str += '    </div>';
+    str += '  </div>';
+
+    // Stats Section
+    str += '  <div class="mobile-card-stats">';
+    str += '    <div class="mobile-stat-item"><i class="fa fa-tachometer"></i><span id="m_speed_' + data.idx + '">' + data.current_speed + '</span></div>';
+    str += '    <div class="mobile-stat-item"><i class="fa fa-hourglass-half"></i><span id="m_time_' + data.idx + '">' + data.download_time + '</span></div>';
+    str += '    <div class="mobile-stat-item"><i class="fa fa-calendar-o"></i><span>' + data.start_time.split(' ')[1] + '</span></div>';
+    str += '    <div class="mobile-stat-item"><i class="fa fa-exclamation-circle"></i><span>PF: ' + data.current_pf_count + '</span></div>';
+    str += '  </div>';
+
+    // Action Section
+    str += '  <div class="mobile-card-actions" id="m_button_' + data.idx + '">';
+    if (data.status_str == 'DOWNLOADING' || data.status_str == 'WAITING') {
+        str += '<button id="stop_btn" class="mobile-action-btn btn-stop" data-idx="'+data.idx+'"><i class="fa fa-stop-circle"></i> 중지</button>';
+    } else {
+        str += '<button id="delete_btn" class="mobile-action-btn btn-delete" data-idx="'+data.idx+'"><i class="fa fa-trash"></i> 삭제</button>';
+    }
+    str += '  </div>';
+    
+    str += '</div>';
+    return str;
+}
+
 function make_item2(data) {
     var str = '<td colspan="10" style="background: rgba(0,0,0,0.2); padding: 15px !important;">';
     str += '<div id="detail_'+data.idx+'" class="queue-detail-container">';
@@ -374,6 +505,30 @@ function status_html(data) {
     
     var detailEl = document.getElementById("detail_" + data.idx);
     if (detailEl) detailEl.innerHTML = get_detail(data);
+
+    // Mobile UI Update
+    var mProgressBar = document.getElementById("m_progress_bar_" + data.idx);
+    if (mProgressBar) mProgressBar.style.width = data.percent + '%';
+    
+    var mPercent = document.getElementById("m_percent_" + data.idx);
+    if (mPercent) mPercent.innerHTML = data.percent + '%';
+
+    var mSpeed = document.getElementById("m_speed_" + data.idx);
+    if (mSpeed) mSpeed.innerHTML = data.current_speed;
+
+    var mTime = document.getElementById("m_time_" + data.idx);
+    if (mTime) mTime.innerHTML = data.download_time;
+
+    var mButton = document.getElementById("m_button_" + data.idx);
+    if (mButton) {
+        var btn_str = '';
+        if (data.status_str == 'DOWNLOADING' || data.status_str == 'WAITING') {
+            btn_str += '<button id="stop_btn" class="mobile-action-btn btn-stop" data-idx="'+data.idx+'"><i class="fa fa-stop-circle"></i> 중지</button>';
+        } else {
+            btn_str += '<button id="delete_btn" class="mobile-action-btn btn-delete" data-idx="'+data.idx+'"><i class="fa fa-trash"></i> 삭제</button>';
+        }
+        mButton.innerHTML = btn_str;
+    }
 }
 </script>
 

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: 15px !important;
-    padding-right: 15px !important;
-    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>
 
@@ -40,7 +30,7 @@ body {
     </div>
     
     <form id="program_list">
-        <div class="card p-2 p-md-4 mb-2 mb-md-4 border-0" style="background: rgba(49, 46, 129, 0.6); backdrop-filter: blur(10px); box-shadow: 0 4px 20px rgba(139, 92, 246, 0.2); border-radius: 16px;">
+        <div class="card p-1 p-md-4 mb-2 mb-md-4 border-0" style="background: rgba(49, 46, 129, 0.6); backdrop-filter: blur(10px); box-shadow: 0 4px 20px rgba(139, 92, 246, 0.2); border-radius: 16px;">
             <div class="form-group mb-0">
                 <label for="code" class="text-white font-weight-bold mb-2" style="color: #c4b5fd !important;">
                     <i class="fa fa-search mr-2" style="color: #a78bfa;"></i>작품 Code
@@ -616,10 +606,16 @@ body {
     .episode-list-container {
         margin-top: 20px;
         display: grid;
-        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
         gap: 10px;
     }
     
+    @media (max-width: 600px) {
+        .episode-list-container {
+            grid-template-columns: 1fr !important;
+        }
+    }
+    
     /* 에피소드 카드 */
     .episode-card {
         display: flex;
@@ -775,9 +771,12 @@ body {
     
     /* 모바일 반응형 - Bootstrap 모든 레이아웃 강제 덮어쓰기 */
     @media (max-width: 768px) {
-        /* 상단 서브메뉴가 SJVA 메인 navbar에 가려지지 않도록 여백 추가 */
-        ul.nav.nav-pills.bg-light {
-            margin-top: 60px !important;
+        /* Ensure breadcrumb span doesn't force width */
+        #menu_module_div span.nav-link {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            max-width: 150px;
+            white-space: nowrap !important;
         }
         
         /* 입력창 크기 최적화 */
@@ -809,8 +808,8 @@ body {
         .row, form, #program_list, #program_auto_form, #episode_list {
             width: 100% !important;
             max-width: 100% !important;
-            padding-left: 10px !important;
-            padding-right: 10px !important;
+            padding-left: 4px !important;   /* 10px -> 4px */
+            padding-right: 4px !important;  /* 10px -> 4px */
             margin-left: 0 !important;
             margin-right: 0 !important;
             box-sizing: border-box !important;
@@ -868,8 +867,8 @@ body {
             align-items: center !important;
             width: 100% !important;
             max-width: 100% !important;
-            padding: 10px 12px !important;
-            gap: 10px !important;
+            padding: 8px 6px !important;   /* 좌우 패딩 대폭 축소 */
+            gap: 6px !important;          /* 요소 간 간격 축소 */
             margin: 0 !important;
             box-sizing: border-box !important;
         }