.genre-intro { margin: 18px 0 12px; font-size: 14px; color: #555; }
.genre-index { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 26px; }
.genre-index a { display: inline-block; padding: 7px 12px; border: 1px solid #d5d5d5; background: #f5f5f5; color: #333; font-size: 13px; font-weight: 700; }
.genre-index a:hover { border-color: #3474e8; color: #3474e8; }
.genre-group { margin: 28px 0 36px; border-top: 2px solid #333; }
.genre-group h2 { margin: 0; padding: 12px 2px 9px; font-size: 21px; line-height: 1.4; }
.genre-group h2 a:hover { color: #3474e8; }
.genre-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 14px; margin: 0; padding: 0; list-style: none; }
.genre-links li { min-width: 0; border-bottom: 1px solid #ececec; }
.genre-links a { display: block; padding: 8px 3px; color: #286fb0; font-size: 14px; overflow-wrap: anywhere; }
.genre-links a:hover { background: #f5f8fb; text-decoration: underline; }
@media (max-width: 650px) { .genre-links { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .genre-links { grid-template-columns: 1fr; } }