From 921c24f143efc315109e455cf8701dc6fc7c36a6 Mon Sep 17 00:00:00 2001
From: "hehihoho3@gmail.com" <hehihoho3@gmail.com>
Date: Wed, 17 Jun 2026 06:56:50 +0900
Subject: [PATCH] =?UTF-8?q?fix(ui):=20=EB=AA=A8=EB=B0=94=EC=9D=BC=20?=
 =?UTF-8?q?=EA=B9=A8=EC=A7=90=20=EC=88=98=EC=A0=95=20=E2=80=94=20=ED=91=9C?=
 =?UTF-8?q?=20=EC=B9=B4=EB=93=9C=EB=B7=B0=20opt-in,=20=EB=8C=80=EC=8B=9C?=
 =?UTF-8?q?=EB=B3=B4=EB=93=9C=20=EB=B0=98=EC=9D=91=ED=98=95,=20CSS=20?=
 =?UTF-8?q?=EC=BA=90=EC=8B=9C=EB=B2=84=EC=8A=A4=ED=8C=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

폰에서 화면이 깨지던 문제 수정.
- 전역 반응형 표 '카드뷰'가 모든 table에 적용돼, data-label 없는 목록 표
  (수집함·발굴·발행 등)가 거대한 행으로 변해 페이지가 32만px로 늘어남.
  → 카드뷰를 .rcards opt-in 으로 스코프. 그 클래스 가진 레거시 표
  (multi_channel_videos·videos)만 카드뷰, 나머지는 모바일에서 가로 스크롤.
- 대시보드: 모바일(≤680px) 미디어쿼리 추가 — 마스트헤드 세로 정렬, 긴
  브레드크럼 숨김, 떡상 리더보드 액션 버튼을 아랫줄 우측 정렬, 숫자 축소.
- base.html: CSS/JS 링크에 v= 캐시버스팅 — 배포 후 브라우저가 옛 CSS를
  캐시해 스타일이 깨지는 것 방지(CSS 변경 시 버전 올리기).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 src/main/resources/static/css/style.css       | 23 ++++++++++---------
 src/main/resources/templates/dashboard.html   | 15 ++++++++++++
 src/main/resources/templates/layout/base.html |  8 +++----
 .../templates/multi_channel_videos.html       |  2 +-
 src/main/resources/templates/videos.html      |  2 +-
 5 files changed, 33 insertions(+), 17 deletions(-)

diff --git a/src/main/resources/static/css/style.css b/src/main/resources/static/css/style.css
index fe71b9c..e558acc 100644
--- a/src/main/resources/static/css/style.css
+++ b/src/main/resources/static/css/style.css
@@ -302,18 +302,19 @@ body.sidebar-collapsed #mainContent { margin-left: var(--sidebar-collapsed-width
 }
 .mobile-menu-btn { display: none; }
 
-/* Mobile responsive tables (card view) */
+/* Mobile responsive tables (card view) — OPT-IN via .rcards (tables with data-label).
+   기타 표는 카드뷰 미적용 → 카드의 overflow-x:auto 로 가로 스크롤(거대 행 방지). */
 @media (max-width: 768px) {
-    table, thead, tbody, th, td, tr { display: block; }
-    thead tr { position: absolute; top: -9999px; left: -9999px; }
-    tr { margin-bottom: 1rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 1rem; }
-    td { border: none; position: relative; padding-left: 50% !important; padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; min-height: 2rem; display: flex; align-items: center; text-align: right; justify-content: flex-end; }
-    td::before { content: attr(data-label); position: absolute; left: 1rem; width: 45%; padding-right: 10px; white-space: nowrap; text-align: left; font-weight: bold; color: var(--text-muted); }
-    td[data-label="Video"] { padding-left: 0 !important; display: block; text-align: left; }
-    td[data-label="Video"]::before { display: none; }
-    td[data-label="Rank"] { display: inline-block; padding: 0 !important; margin-bottom: 0.5rem; width: auto; }
-    td[data-label="Rank"]::before { display: none; }
-    td[data-label="Rank"] span { font-size: 0.875rem !important; background: var(--accent-soft); padding: 2px 8px; border-radius: 4px; color: var(--text-muted); border: 1px solid var(--border); }
+    .rcards, .rcards thead, .rcards tbody, .rcards th, .rcards td, .rcards tr { display: block; }
+    .rcards thead tr { position: absolute; top: -9999px; left: -9999px; }
+    .rcards tr { margin-bottom: 1rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 1rem; }
+    .rcards td { border: none; position: relative; padding-left: 50% !important; padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; min-height: 2rem; display: flex; align-items: center; text-align: right; justify-content: flex-end; }
+    .rcards td::before { content: attr(data-label); position: absolute; left: 1rem; width: 45%; padding-right: 10px; white-space: nowrap; text-align: left; font-weight: bold; color: var(--text-muted); }
+    .rcards td[data-label="Video"] { padding-left: 0 !important; display: block; text-align: left; }
+    .rcards td[data-label="Video"]::before { display: none; }
+    .rcards td[data-label="Rank"] { display: inline-block; padding: 0 !important; margin-bottom: 0.5rem; width: auto; }
+    .rcards td[data-label="Rank"]::before { display: none; }
+    .rcards td[data-label="Rank"] span { font-size: 0.875rem !important; background: var(--accent-soft); padding: 2px 8px; border-radius: 4px; color: var(--text-muted); border: 1px solid var(--border); }
 }
 
 /* ===== Shared components ===== */
diff --git a/src/main/resources/templates/dashboard.html b/src/main/resources/templates/dashboard.html
index 71191f2..4c38675 100644
--- a/src/main/resources/templates/dashboard.html
+++ b/src/main/resources/templates/dashboard.html
@@ -178,6 +178,21 @@
             .fd-vmodal-frame iframe{ width:100%; height:100%; border:0; display:block; }
 
             @media (max-width:1100px){ .fd-cols{ grid-template-columns:1fr; } .fd-actions{ grid-template-columns:1fr; } .fd-act{ border-right:none; border-bottom:1.5px solid var(--fd-rule-strong); } }
+            @media (max-width:680px){
+                .fd-dash{ margin:-1.25rem; }
+                .fd-masthead{ flex-direction:column; align-items:stretch; gap:8px; padding:16px 16px 12px; }
+                .fd-masthead .fd-tick{ display:none; }            /* 긴 브레드크럼/라벨 숨김 */
+                .fd-masthead h1{ font-size:26px; }
+                .fd-meta{ display:flex; align-items:center; gap:12px; }
+                .fd-meta .fd-big{ margin:0; }
+                .fd-body{ padding:16px 16px 28px; }
+                .fd-num{ font-size:44px; }
+                .fd-act{ padding:16px 16px; }
+                /* 리더보드 행: 배율까지 한 줄, 액션 버튼은 아랫줄 우측 정렬 */
+                .fd-lead{ grid-template-columns:24px 46px 1fr auto; column-gap:10px; }
+                .fd-lead .fd-actcell{ grid-column:1 / -1; justify-content:flex-end; opacity:1; padding-top:2px; }
+                .fd-lead .fd-t{ white-space:normal; max-width:none; }
+            }
         </style>
 
         <script th:inline="javascript">
diff --git a/src/main/resources/templates/layout/base.html b/src/main/resources/templates/layout/base.html
index 96f221f..e800652 100644
--- a/src/main/resources/templates/layout/base.html
+++ b/src/main/resources/templates/layout/base.html
@@ -21,9 +21,9 @@
     <!-- Editorial identity (dashboard) -->
     <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 -->
-    <link rel="stylesheet" th:href="@{/css/variables.css}">
-    <link rel="stylesheet" th:href="@{/css/style.css}">
+    <!-- CSS (v= 캐시 버스팅 — CSS 바뀌면 숫자 올리기) -->
+    <link rel="stylesheet" th:href="@{/css/variables.css(v=20260617)}">
+    <link rel="stylesheet" th:href="@{/css/style.css(v=20260617)}">
 
     <!-- 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}"></script>
+    <script th:src="@{/js/common.js(v=20260617)}"></script>
     <script>
         lucide.createIcons();
     </script>
diff --git a/src/main/resources/templates/multi_channel_videos.html b/src/main/resources/templates/multi_channel_videos.html
index 02c6ff5..636f8e8 100644
--- a/src/main/resources/templates/multi_channel_videos.html
+++ b/src/main/resources/templates/multi_channel_videos.html
@@ -94,7 +94,7 @@
 
         <!-- Video List Table -->
         <div class="card p-0" style="overflow-x: auto;">
-            <table class="w-full" style="border-collapse: collapse; text-align: left;">
+            <table class="w-full rcards" style="border-collapse: collapse; text-align: left;">
                 <thead style="background: var(--surface-2); border-bottom: 1px solid var(--glass-border);">
                     <tr>
                         <th class="p-4 text-sm font-bold text-muted"><input type="checkbox" id="selectAll" onclick="toggleSelectAll(this.checked)" title="전체 선택"></th>
diff --git a/src/main/resources/templates/videos.html b/src/main/resources/templates/videos.html
index 20e6919..78e0c1d 100644
--- a/src/main/resources/templates/videos.html
+++ b/src/main/resources/templates/videos.html
@@ -100,7 +100,7 @@
 
         <!-- Video List Table -->
         <div class="card p-0" style="overflow-x: auto;">
-            <table class="w-full" style="border-collapse: collapse; text-align: left;">
+            <table class="w-full rcards" style="border-collapse: collapse; text-align: left;">
                 <thead style="background: var(--surface-2); border-bottom: 1px solid var(--glass-border);">
                     <tr>
                         <th class="p-4 text-sm font-bold text-muted"><input type="checkbox" id="selectAll" onclick="toggleSelectAll(this.checked)" title="전체 선택"></th>