feat(comment-cards): 타임라인 분석에 시간순 정렬 옵션 추가

많이 언급된 타임라인 섹션에 '언급순/시간순' 선택 추가.
시간순은 선별된 상위 구간을 재생 순서대로 재정렬해 보여줌.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

src/main/resources/static/js/comment-cards.js

@@ -229,8 +229,10 @@
     if (!all || !all.length) { box.style.display = 'none'; box.innerHTML = ''; return; }
 
     const weighted = !!($('ccWeighted') && $('ccWeighted').checked);
+    const tlSort = ($('ccTlSort') && $('ccTlSort').value) || 'count';
     const stats = computeStats(all);
-    const tl = computeTimeline(all);
+    let tl = computeTimeline(all);                                  // 언급 많은 순 top-N 선별
+    if (tlSort === 'time') tl = tl.slice().sort((a, b) => a.sec - b.sec); // 선별본을 시간순 재정렬
     const words = computeWords(all, weighted);
     const vid = window.__videoId;
 
@@ -247,7 +249,11 @@
       + '</div>';
 
     // 타임라인
-    html += '<div class="cc-an-sec"><h4>⏱ 많이 언급된 타임라인</h4>';
+    html += '<div class="cc-an-sec"><div class="cc-an-sechead"><h4>⏱ 많이 언급된 타임라인</h4>'
+      + '<select id="ccTlSort" class="cc-mini-select">'
+      + '<option value="count"' + (tlSort === 'count' ? ' selected' : '') + '>언급순</option>'
+      + '<option value="time"' + (tlSort === 'time' ? ' selected' : '') + '>시간순</option>'
+      + '</select></div>';
     if (tl.length) {
       const mx = tl[0].cnt;
       html += '<div class="cc-bars">' + tl.map(t => {
@@ -304,6 +310,8 @@
     });
     const wt = $('ccWeighted');
     if (wt) wt.addEventListener('change', () => renderAnalytics(window.__all));
+    const tls = $('ccTlSort');
+    if (tls) tls.addEventListener('change', () => renderAnalytics(window.__all));
   }
 
   /* ------------------------- 캡처/복사/저장 ------------------------- */

src/main/resources/templates/comment-cards.html

@@ -58,6 +58,8 @@
         .cc-an-sec h4 { font-size:13.5px; font-weight:600; color:var(--text-2); margin:0 0 .5rem; }
         .cc-an-sechead { display:flex; align-items:center; justify-content:space-between; gap:.6rem; }
         .cc-wlabel { font-size:12px; color:var(--text-2); display:flex; align-items:center; gap:.3rem; cursor:pointer; }
+        .cc-mini-select { background:var(--surface-2); color:var(--text); border:1px solid var(--border);
+            border-radius:8px; padding:.25rem .5rem; font-size:12px; cursor:pointer; }
         .cc-an-empty { color:var(--text-3); font-size:13px; margin:.2rem 0; }
         .cc-bars { display:flex; flex-direction:column; gap:.35rem; }
         .cc-bar-row { display:grid; grid-template-columns:76px 1fr 52px; align-items:center; gap:.5rem; font-size:12.5px; }
@@ -114,7 +116,7 @@
 <th:block layout:fragment="script">
     <!-- DOM→이미지 캡처 (Task 5에서 사용). blur 필터 지원 위해 modern-screenshot 사용. -->
     <script src="https://cdn.jsdelivr.net/npm/modern-screenshot@4/dist/index.js"></script>
-    <script th:src="@{/js/comment-cards.js(v=20260708)}"></script>
+    <script th:src="@{/js/comment-cards.js(v=20260708b)}"></script>
 </th:block>
 </body>
 </html>