.words-tabs { display: flex; margin-bottom: 24px; }
.words-tabs .navigation-item { width: auto; min-height: 44px; padding: 8px 32px; }
.words-controls { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 24px; margin-bottom: 28px; }
.words-controls .chapter-search { margin: 0; }
.words-controls select { width: 100%; min-width: 0; padding: 10px 18px; border: 1px solid var(--border); border-radius: 9px; background: white; color: var(--navy); font: inherit; cursor: pointer; }
.words-chapter { margin-bottom: 12px; padding: 22px 24px; border: 1px solid #c4e4ce; border-radius: 8px; background: #eefaf1; font-size: 18px; line-height: 1.55; }
.words-chapter h2 { margin: 0 0 8px; color: #245c3c; font-size: 28px; line-height: 1.4; }
.words-chapter .words-chapter-title { margin: 0 0 22px; }
.words-table th, .words-table td { padding: 7px 18px; }
.words-table th:nth-child(1) { width: 32%; }
.words-table th:nth-child(2) { width: 34%; }
.words-table th:nth-child(3) { width: 19%; }
.words-table th:last-child, .words-table td:last-child { padding: 0; text-align: center; }
.words-table tbody tr:nth-child(even) { background: transparent; }
.words-table .pronunciation { height: 44px; }
.navigation a:hover, .words-tabs a:hover { border-color: #608bac; }
.navigation a:not(.is-current):hover { background: #f5faff; }
.words-controls input:hover, .words-controls select:hover { border-color: #608bac; }
@media (max-width: 900px) {
  .words-controls { grid-template-columns: minmax(0, 1fr) 160px; gap: 16px; }
  .words-chapter { font-size: 16px; }
  .words-table th, .words-table td { padding-right: 12px; padding-left: 12px; }
}
@media (max-width: 600px) {
  .words-tabs .navigation-item { flex: 1; padding: 8px 12px; }
  .words-controls { grid-template-columns: minmax(0, 1fr); gap: 10px; margin-bottom: 20px; }
  .words-controls select { min-height: 44px; }
  .words-chapter { padding: 14px 12px; font-size: 14px; }
  .words-chapter h2 { font-size: 22px; }
  .words-chapter .words-chapter-title { margin-bottom: 16px; }
  /* 同じ表の意味構造を保ち、各語を2段のコンパクトな行にする。 */
  .words-table, .words-table tbody { display: block; }
  .words-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .words-table tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto 44px; align-items: center; padding: 6px 8px; column-gap: 8px; }
  .words-table tbody tr + tr { border-top: 1px solid #dce8f2; }
  .words-table tbody tr td, .words-table tbody tr:first-child td { border: 0; padding: 0; }
  .words-table td:nth-child(1) { grid-column: 1 / 3; grid-row: 1; }
  .words-table td:nth-child(2) { grid-column: 1; grid-row: 2; }
  .words-table td:nth-child(3) { grid-column: 2; grid-row: 2; }
  .words-table td:last-child { grid-column: 3; grid-row: 1 / 3; }
}