/* assets/css/breeds.css - 🐕 견종 백과 (v2.8.0) + 위키 문서 아래 "주의할 질환 / 잘 걸리는 견종" */

.br-search { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.br-search input[type=search] { flex: 1 1 220px; min-width: 0; }
.br-search select { flex: 0 0 auto; width: auto; }

.br-filters { display: grid; gap: 8px; margin: 0 0 12px; }
.br-filter { display: flex; align-items: center; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.br-filter::-webkit-scrollbar { display: none; }
.br-filter-label { flex: none; width: 4.2em; font-size: 13.5px; font-weight: 700; color: var(--pw-text-2); }
.br-filter a { flex: none; padding: 6px 12px; border: 1px solid var(--pw-border); border-radius: 999px; background: var(--pw-surface);
    font-size: 14px; color: var(--pw-text); text-decoration: none; white-space: nowrap; }
.br-filter a small { color: var(--pw-muted); }
.br-filter a:hover { border-color: var(--pw-brand); }
.br-filter a.is-on { background: var(--pw-brand); border-color: var(--pw-brand); color: #fff; }
.br-filter a.is-on small { color: rgba(255, 255, 255, .85); }

.br-count { margin: 4px 0 10px; font-size: 14px; color: var(--pw-text-2); }

.br-grid { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.br-card { display: flex; flex-direction: column; background: var(--pw-surface); border: 1px solid var(--pw-border); border-radius: var(--pw-radius);
    overflow: hidden; box-shadow: var(--pw-shadow); transition: transform .15s, border-color .15s; }
.br-card:hover { transform: translateY(-2px); border-color: var(--pw-border-strong); }
.br-card-link { display: block; color: inherit; text-decoration: none; flex: 1; }
.br-photo { position: relative; aspect-ratio: 4 / 3; background: var(--pw-surface-2); overflow: hidden; }
.br-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.br-photo.is-empty { display: grid; place-items: center; font-size: 48px; opacity: .55; }
.br-rank { position: absolute; left: 8px; top: 8px; padding: 2px 8px; border-radius: 999px; background: rgba(42, 36, 32, .78); color: #fff; font-size: 12px; font-weight: 700; }
.br-body { padding: 10px 12px 12px; }
.br-name { margin: 0; font-size: 17px; line-height: 1.3; color: var(--pw-text); }
.br-en { margin: 2px 0 0; font-size: 12.5px; color: var(--pw-muted); }
.br-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; margin: 8px 0 0; font-size: 13px; }
.br-facts div { display: flex; gap: 6px; min-width: 0; }
.br-facts .br-wide { grid-column: 1 / -1; }
.br-facts dt { flex: none; color: var(--pw-muted); }
.br-facts dd { margin: 0; color: var(--pw-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.br-credit { margin: 0; padding: 0 12px 8px; font-size: 11.5px; color: var(--pw-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.br-help { margin-top: 8px; }
.br-help p { margin: 4px 0 10px; }
.br-source { margin: 12px 0 0; font-size: 12.5px; color: var(--pw-muted); line-height: 1.6; }

@media (max-width: 520px) {
    .br-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .br-name { font-size: 15.5px; }
    .br-facts { grid-template-columns: 1fr; font-size: 12.5px; }
    .br-facts .br-wide { display: none; }
    .br-search select { flex: 1 1 auto; }
}