:root { --max-w: 1200px; --gap: 0.75rem; --bd: #e5e7eb; }
* { box-sizing: border-box; }
body { font-family: system-ui, -apple-system, "Segoe UI", "Noto Sans JP", sans-serif; line-height: 1.5; margin: 0; }
header, footer { padding: 1rem; background: #fafafa; border-bottom: 1px solid var(--bd); }
footer { border-top: 1px solid var(--bd); border-bottom: none; }
h1 { font-size: 1.25rem; margin: 0 0 .25rem; }
#app { max-width: var(--max-w); margin: 1rem auto; padding: 0 1rem; }
.section { margin: 1.25rem 0 2rem; }
.section h2 { font-size: 1.1rem; margin: 0 0 .5rem; }
.table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.table th, .table td { border: 1px solid var(--bd); padding: .5rem; vertical-align: top; }
.table th { background: #f5f5f5; position: sticky; top: 0; }
.transcript { min-width: 14em; white-space: pre-wrap; }
audio { width: 220px; max-width: 100%; display: block; }
.controls { display: flex; gap: .5rem; align-items: center; }
.badge { font-size: .8em; color: #555; }
@media (max-width: 840px) {
  .table { font-size: 0.9rem; }
  .transcript { min-width: 10em; }
}