fix(comment-cards): 저장 표시 회색 톤이 다크 테마에서 안 보이던 문제

- surface-2는 다크에서 배경과 거의 같아 color-mix로 텍스트색을 섞어 확실한 회색으로
- 왼쪽 accent 바 + 흐림(opacity)로 저장 여부를 한눈에 구분
- 렌더 루프에서 카드마다 lucide.createIcons()를 호출하던 것 제거(전체 스캔 반복 방지)

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

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

@@ -160,7 +160,7 @@
       saveBtn.type = 'button';
       saveBtn.className = 'cc-iconbtn';
       saveBtn.addEventListener('click', (e) => { e.stopPropagation(); window.downloadCard(card, c); });
-      setSaveBtn(saveBtn, savedIds.has(c.__id));
+      setSaveBtn(saveBtn, savedIds.has(c.__id), false);
       actions.appendChild(saveBtn);
 
       card.appendChild(head);
@@ -371,15 +371,16 @@
 
   /* ------------------------- 캡처/복사/저장 ------------------------- */
 
-  // 카드 저장 버튼의 저장 전/후 모습
+  // 카드 저장 버튼의 저장 전/후 모습.
-  function setSaveBtn(btn, saved) {
+  // renderCards 루프에서는 renderIcons=false — 아이콘은 렌더 끝에 한 번만 그린다(카드 수만큼 전체 스캔 방지).
+  function setSaveBtn(btn, saved, renderIcons) {
     btn.classList.toggle('saved', saved);
     btn.innerHTML = saved
       ? '<i data-lucide="check" style="width:13px;height:13px;"></i> 저장됨'
       : '<i data-lucide="download" style="width:13px;height:13px;"></i> 저장';
     btn.setAttribute('aria-label', saved ? '저장 완료 (다시 저장하려면 클릭)' : 'PNG 파일로 저장');
     btn.title = saved ? '이미 저장한 카드 · 다시 저장하려면 클릭' : 'PNG 파일로 저장 (캡컷에서 불러오기)';
-    if (window.lucide) window.lucide.createIcons();
+    if (renderIcons && window.lucide) window.lucide.createIcons();
   }
 
   // 저장 완료 표시: 카드 회색 톤(.saved) + 버튼 '저장됨'. 캡처 이미지엔 반영 안 됨(captureBlob에서 제외).
@@ -388,7 +389,7 @@
     if (cid !== undefined) savedIds.add(Number(cid));
     cardEl.classList.add('saved');
     const btn = cardEl.querySelector('.cc-actions .cc-iconbtn');
-    if (btn) setSaveBtn(btn, true);
+    if (btn) setSaveBtn(btn, true, true);
   }
 
   async function captureBlob(cardEl) {

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

@@ -50,10 +50,13 @@
             border-radius:6px; font-size:12px; font-weight:600; padding:.4rem .6rem; cursor:pointer;
             line-height:1; min-height:32px; display:inline-flex; align-items:center; gap:.25rem; }
         .cc-iconbtn:hover { color:var(--text); border-color:var(--primary, #6366f1); }
-        /* 저장 완료 표시 — 화면 전용(캡처 시 .saved를 벗겨서 찍으므로 PNG엔 안 남음) */
+        /* 저장 완료 표시 — 화면 전용(캡처 시 .saved를 벗겨서 찍으므로 PNG엔 안 남음)
-        .comment-card.saved { background:var(--surface-2); border-color:var(--border);
+           surface-2는 다크 테마에서 차이가 거의 없어, 텍스트 색을 섞어 두 테마 모두에서 확실히 회색이 되게 함 */
-            box-shadow:inset 3px 0 0 var(--text-3); opacity:.9; }
+        .comment-card.saved { background:var(--surface-2);
-        .cc-iconbtn.saved { background:var(--surface); color:var(--text-3); }
+            background:color-mix(in srgb, var(--text) 14%, var(--surface));
+            border-color:var(--text-3); box-shadow:inset 4px 0 0 var(--primary); opacity:.72; }
+        .comment-card.saved:hover { opacity:.9; }
+        .cc-iconbtn.saved { background:var(--surface); color:var(--text-3); border-color:var(--text-3); }
         /* 복사 완료 토스트 — 카드 밖(body)에 떠서 캡처 이미지에 안 찍힘 */
         .cc-toast { position:fixed; left:50%; bottom:2rem; transform:translateX(-50%) translateY(1rem);
             background:var(--text); color:var(--surface); padding:.6rem 1.1rem; border-radius:999px;