feat: improve card catalog and add outfit effect filters

src/lib/components/CardCatalogHeader.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+  import CardsNav from './CardsNav.svelte';
+
+  export let active: 'cards' | 'outfits';
+  export let count: number;
+  export let total: number;
+  export let unit: '장' | '벌';
+</script>
+
+<header class="catalog-header">
+  <div class="heading">
+    <h1>카드 목록</h1>
+    <p class="total" aria-label={`${count} / ${total}${unit}`}>
+      <strong>{count}</strong>
+      {#if count === total}{unit}{:else}<span>/ {total}{unit}</span>{/if}
+    </p>
+  </div>
+  <p class="description">카드와 의상 효과를 한 행에서 비교하세요.</p>
+</header>
+<CardsNav {active} />
+
+<style>
+  .heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
+  h1 { margin: 0; font-size: var(--page-title-size); line-height: 1.15; letter-spacing: -.045em; }
+  .description { margin: 10px 0 0; color: #969fb0; font-size: var(--page-description-size); line-height: 1.6; }
+  .total { flex-shrink: 0; margin: 0; padding: 9px 14px; border: 1px solid #303746; border-radius: 999px; color: #969fb0; background: #191f2b; font-size: 13px; line-height: 24px; font-variant-numeric: tabular-nums; }
+  .total strong { margin-right: 3px; color: #edf0f6; font-size: 18px; }
+  .total span { color: #969fb0; }
+  @media (max-width: 680px) { .total { padding: 6px 10px; } }
+</style>