/* fish_style.css */
.fish-sort-controls { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.fish-sort-controls button { background: #fff; border: 1px solid #ddd; padding: 8px 14px; font-size: 13px; cursor: pointer; border-radius: 4px; transition: 0.2s; }
.fish-sort-controls button.active { background: #333; color: #fff; border-color: #333; }
.fish-grid-container { display: grid; width: 100%; border-top: 1px solid #ddd; border-left: 1px solid #ddd; background: #fff; margin-bottom: 20px; }
/* カラム数はHTML側のクラスで制御できるようにポメ */
.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
@media (min-width: 1024px) { .pccols-3 { grid-template-columns: repeat(3, 1fr); } }

.fish-item { border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; display: flex; flex-direction: column; }
.fish-thumb { aspect-ratio: 4 / 3; background: #f5f5f5; overflow: hidden; position: relative; }
.fish-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fish-body { padding: 10px 8px; display: flex; flex-direction: column; flex-grow: 1; }
.fish-name { font-size: 0.95rem; font-weight: bold; line-height: 1.4; margin-bottom: 4px; }
.status-badge { display: inline-block; padding: 2px 6px; border-radius: 3px; font-size: 0.7rem; border: 1px solid; font-weight: bold; width: fit-content; margin-top: 4px; }
.fish-cat-title { width: 100%; background: #666; color: #fff; padding: 8px 12px; font-size: 0.9rem; font-weight: bold; border-left: 1px solid #ddd; border-right: 1px solid #ddd; }
.fish-accordion summary { background: #eee; padding: 12px; font-size: 0.9rem; cursor: pointer; font-weight: bold; list-style: none; border: 1px solid #ddd; border-top: none; }