style: dedupe to shared components (publish badge, filter selects, gap token)

- publish.html: status column uses shared .badge (badge-muted/warning/
  success) instead of its own .st-badge inline-color span
- collection.html / discover.html: drop .filter-sel rules now that the
  shared `select` styling covers them (row-sel kept for compact inline)
- style.css: .gap-2 uses var(--space-2) for token consistency

No behavior change; follow-up cleanup from the design-uplift review.

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

src/main/resources/static/css/style.css

@@ -36,7 +36,7 @@ ul {
 }
 
 .gap-2 {
-    gap: 0.5rem;
+    gap: var(--space-2);
 }
 
 .gap-4 {

src/main/resources/templates/collection.html

@@ -128,8 +128,6 @@
         </div>
 
         <style>
-            .filter-sel { padding:8px; height:42px; background:rgba(255,255,255,0.05); border:1px solid var(--glass-border); border-radius:var(--radius-md); color:white; outline:none; }
-            .filter-sel option { background:#1e1e2d; color:white; }
             .hidden { display:none !important; }
             .row-sel { padding:4px 6px; background:rgba(255,255,255,0.05); border:1px solid var(--glass-border); border-radius:6px; color:white; font-size:0.8rem; outline:none; }
             .row-sel option { background:#1e1e2d; color:white; }

src/main/resources/templates/discover.html

@@ -99,8 +99,6 @@
         </div>
 
         <style>
-            .filter-sel { padding:8px; height:42px; background:rgba(255,255,255,0.05); border:1px solid var(--glass-border); border-radius:var(--radius-md); color:white; outline:none; }
-            .filter-sel option { background:#1e1e2d; color:white; }
             .row-sel { padding:4px 6px; background:rgba(255,255,255,0.05); border:1px solid var(--glass-border); border-radius:6px; color:white; font-size:0.8rem; outline:none; }
             .row-sel option { background:#1e1e2d; color:white; }
         </style>

src/main/resources/templates/publish.html

@@ -41,13 +41,12 @@
 
         <style>
             .tab.active { border-color:#7C3AED; color:#fff; }
-            .st-badge { font-size:0.7rem; padding:2px 8px; border-radius:999px; font-weight:bold; }
         </style>
 
         <script th:inline="javascript">
             /*<![CDATA[*/
             let curStatus = '';
-            const ST = { DRAFT:{t:'작성중',c:'#64748b'}, READY:{t:'발행대기',c:'#f59e0b'}, PUBLISHED:{t:'발행완료',c:'#10b981'} };
+            const ST = { DRAFT:{t:'작성중',cls:'badge-muted'}, READY:{t:'발행대기',cls:'badge-warning'}, PUBLISHED:{t:'발행완료',cls:'badge-success'} };
 
             function esc(s){ return (s==null?'':String(s)).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;'); }
             async function api(url, opts){
@@ -73,11 +72,11 @@
                 document.getElementById('cnt').textContent = data.length + '건';
                 if(data.length===0){ body.innerHTML = '<tr><td colspan="6" class="p-8 text-center text-muted">발행 패키지가 없습니다. 재가공 화면에서 발행안을 저장하세요.</td></tr>'; return; }
                 body.innerHTML = data.map(p=>{
-                    const st = ST[p.status] || {t:p.status,c:'#64748b'};
+                    const st = ST[p.status] || {t:p.status,cls:'badge-muted'};
                     const sched = p.scheduledAt ? String(p.scheduledAt).substring(0,16).replace('T',' ') : '-';
                     const urlCell = p.publishedUrl ? `<a href="${esc(p.publishedUrl)}" target="_blank" class="hover:underline" style="color:#60a5fa;">열기</a>` : '-';
                     return `<tr style="border-bottom:1px solid var(--glass-border);">
-                        <td class="p-3"><span class="st-badge" style="background:${st.c}22; color:${st.c};">${st.t}</span></td>
+                        <td class="p-3"><span class="badge ${st.cls}">${st.t}</span></td>
                         <td class="p-3 text-sm">${esc(p.platform||'')}</td>
                         <td class="p-3 text-sm" style="max-width:360px;"><div style="display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;">${esc(p.title||'(제목 없음)')}</div></td>
                         <td class="p-3 text-sm text-muted">${sched}</td>