.grammar-search { display: flex; gap: 12px; margin: 24px 0; }
.grammar-search input[type=search] { min-width: 0; flex: 1; padding: 10px 12px; border: 1px solid var(--dx-rule); background: var(--dx-paper); color: var(--dx-ink); font: inherit; }
.grammar-search button { padding: 10px 16px; border: 1px solid var(--dx-rule); background: none; color: var(--dx-ink); font: inherit; }
.grammar-list { list-style: none; margin: 0; padding: 0; }
.grammar-list li { border-top: 1px solid var(--dx-rule); }
.grammar-list a { display: grid; grid-template-columns: minmax(120px, 1fr) 2fr; gap: 24px; padding: 16px 0; color: var(--dx-ink); text-decoration: none; }
.grammar-form { font-family: var(--dx-han); font-size: 22px; }
.grammar-pages { display: flex; gap: 24px; justify-content: center; margin: 32px 0; }
.grammar-example { padding: 12px 0 24px; border-top: 1px solid var(--dx-rule); }
.grammar-ja { font-family: var(--dx-han); font-size: 24px; line-height: 1.8; }
.grammar-example mark { background: color-mix(in srgb, var(--dx-jade) 20%, transparent); color: inherit; }
.jb-levels a[aria-current=page] { color: var(--dx-jade); font-weight: 600; }
.grammar-list a:focus-visible, .grammar-search button:focus-visible { outline: 2px solid var(--dx-jade); outline-offset: 4px; }
@media (max-width: 600px) { .grammar-list a { grid-template-columns: 1fr; gap: 8px; } }