/* 장르 색상 표현 */
.wt-legend { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.wt-legend-item { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface2); color: var(--soft); font-size: 12px; font-weight: 800; }
.wt-legend-item i { width: 10px; height: 10px; border-radius: 3px; }
.wt-legend-item.on { border-color: var(--ac); color: var(--ac); background: var(--acSoft); }
.wt-legend-item.clear { color: var(--dim); }

.wt-card { position: relative; padding-left: 18px; overflow: hidden; }
.wt-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 8px; background: var(--stripe, var(--line)); }
.wt-card::after { content: ""; position: absolute; right: 10px; top: 10px; width: 9px; height: 9px; border-radius: 50%; background: var(--blend, transparent); opacity: .85; }
.wt-card-genres { display: block; color: var(--dim); font-size: 11px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wt-dots { display: inline-flex; gap: 3px; }
.wt-dots i { width: 8px; height: 8px; border-radius: 2px; display: block; }

.wt-genre-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; font-size: 12px; font-weight: 850; color: var(--gc); background: color-mix(in srgb, var(--gc) 16%, transparent); border: 1px solid color-mix(in srgb, var(--gc) 40%, transparent); }
.wt-genre-chip::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--gc); }