/* 공통 펫 목록 필터·정렬(pet-filter.js) — 도감 · 방치 펫 목록 · 던전 편성이 같은 모양을 쓴다.
   칩은 `.chip`(style.css), 정렬 줄은 `.pet-sort-bar`·`.pet-sort-btns`(dungeon.css) 를 그대로 빌린다 —
   예전 정렬 막대와 도감 칩이 픽셀 단위로 같아 보이게 하려는 것이다. 여기는 그 둘을 한 부품으로 묶는 칸만 둔다.
   ⚠ 전역 `.hidden`·`[hidden]` 규칙이 없는 저장소다 — display 를 주는 요소는 숨김도 직접 준다. */
.pf{display:flex;flex-direction:column;gap:6px;margin:8px 2px 0;min-width:0}
.pf.hidden{display:none}
.pf-bar{display:flex;align-items:center;gap:5px;min-width:0}
/* width:0 — 검색칸은 남는 자리를 채우기만 한다. 기본 폭(size=20)이 줄의 최소 폭이 되면 아이폰에서 판이 화면보다 넓어졌다(10-13) */
.pf-search{flex:1;width:0;min-width:0;min-height:30px;padding:5px 8px;border:2px solid var(--line);background:var(--panel2);
  color:var(--ink);font:10px "Galmuri9","Galmuri11",sans-serif;border-radius:0;-webkit-appearance:none;appearance:none}
.pf-search::placeholder{color:var(--muted);opacity:.8}
.pf-search:focus{outline:none;border-color:var(--gold-lo)}
.pf-toggle,.pf-open,.pf-reset{flex:none;display:inline-flex;align-items:center;gap:4px;min-height:30px;padding:4px 8px;
  border:2px solid var(--line);background:var(--panel2);color:var(--muted);font:700 10px "Galmuri9","Galmuri11",sans-serif;
  cursor:pointer;touch-action:manipulation;white-space:nowrap}
.pf-toggle:disabled,.pf-reset:disabled{opacity:.45;cursor:default}
/* 샤이니만 — 켜면 카드의 샤이니 테두리(#fff6b0)와 같은 금빛으로 */
.pf-toggle.active{color:#fff6b0;border-color:#e8c552;background:#4a3a1c;box-shadow:0 0 8px rgba(255,226,122,.25)}
.pf-num{font-weight:700;color:var(--ink)}
.pf-toggle.active .pf-num{color:#fff6b0}
.pf-open.active,.pf-open.is-open{color:var(--gold);border-color:var(--gold-lo)}
.pf-badge{display:inline-grid;place-items:center;min-width:15px;height:15px;padding:0 3px;background:var(--gold);color:#2a1d0c;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif}
.pf-badge[hidden]{display:none}
.pf-panel{display:flex;flex-direction:column;gap:5px;padding:6px;border:2px solid var(--line);background:var(--bg)}
.pf-panel[hidden]{display:none}
.pf-static .pf-panel{padding:0;border:0;background:none}
.pf-row{display:flex;align-items:flex-start;gap:5px;min-width:0}
.pf-row[hidden]{display:none}
.pf-label{flex:none;width:24px;padding-top:7px;color:var(--muted);font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif}
.pf-chips{flex:1;min-width:0;display:flex;flex-wrap:wrap;gap:4px}
/* 9px·좁은 여백 — 390px 폰에서 등급·종족·역할 줄이 한 줄에 들어가게 잰 값이다(정렬 단추·조합 칩과 같은 글자 크기). */
.pf-chips .chip{display:inline-flex;align-items:center;gap:3px;min-height:26px;padding:4px 6px;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;touch-action:manipulation}
.pf-dot{flex:none;width:5px;height:5px}
.pf-foot{display:flex;justify-content:flex-end}
.pf-foot .pf-reset{min-height:26px}
/* 정렬 줄 — 예전 막대 모양 그대로, 개수만 오른쪽 끝에 붙인다. */
.pf .pf-sort{margin:0;min-width:0}
/* 늘 펼친 도감은 정렬 기준이 7개다 — 가로 스크롤에 숨기지 않고 줄을 바꾼다(390px 에서 셋이 가려졌다). */
.pf-static .pf-sort{align-items:flex-start}
.pf-static .pf-sort .pet-sort-label{padding-top:7px}
.pf-static .pet-sort-btns{flex-wrap:wrap;overflow:visible}
.pf-static .pf-count{padding-top:7px}
.pf-count{flex:none;margin-left:auto;padding-left:4px;color:var(--muted);font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;white-space:nowrap}
.pf.is-filtering .pf-count{color:var(--gold)}
/* 조건에 맞는 것이 없을 때 목록 자리 — 격자 목록 안에 들어가므로 칸을 가로질러 선다. */
.pf-empty{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;gap:9px;padding:22px 0;
  color:var(--muted);font-size:12px;font-family:"Galmuri11","Galmuri9",sans-serif;text-align:center}