/* ==========================================================================
   works.css — 作品一覧ページ専用スタイル（画像を持たないためリスト形式）
   .filter-* / .pagination / .active-filters / .chip は style.css を継承。
   ========================================================================== */

.work-list { display: flex; flex-direction: column; gap: 10px; }

.work-row {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  align-items: center;
  gap: 18px;
  padding: 16px 18px;
  border-radius: var(--radius-md);
  background: var(--surface);
  border: 1px solid var(--border);
  transition: background 0.2s, border-color 0.2s, transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.work-row:hover {
  background: var(--surface-hover);
  border-color: var(--border-strong);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -14px rgba(34, 211, 238, 0.3);
}

.work-row__year {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1rem;
  color: var(--cyan);
  text-align: center;
}
.work-row__main { min-width: 0; }
.work-row__cat {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--cyan);
  border: 1px solid rgba(34, 211, 238, 0.35);
  padding: 2px 8px;
  border-radius: 999px;
  margin-bottom: 6px;
}
.work-row__title { font-weight: 700; font-size: 0.98rem; }
.work-row__songs { margin-top: 4px; font-size: 0.8rem; color: var(--text-muted); }
.work-row__count {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--text-dim);
  white-space: nowrap;
}

@media (max-width: 560px) {
  .work-row { grid-template-columns: 44px 1fr; }
  .work-row__count { display: none; }
}