/* V12｜分類按鈕與活動宣傳圖同色；數量獨立顯示，標示「件」。
   這份覆蓋檔在 detail-v11.css 後載入，無須修改舊版樣式。 */
:root{
  --filter-all:#268E84;
  --filter-art:var(--museum-art,#F0AA20);
  --filter-writing:var(--museum-text,#39B54A);
  --filter-cosplay:var(--museum-cos,#EF856D);
}
/* 副標與「下一件作品倒數」之間保留呼吸空間 */
.gallery-heading + .release-notice:not([hidden]){
  margin-top:26px;
}
/* 把分類名稱和作品件數拆成兩個清晰的視覺元素 */
.filters{column-gap:10px;row-gap:10px;align-items:center}
.filter-btn,
.filter-btn[data-category="全部作品"],
.filter-btn[data-category="繪圖"],
.filter-btn[data-category="文章"],
.filter-btn[data-category="Cosplay"]{
  --filter-tone:var(--filter-all);
  --filter-ink:#236E67;
  display:inline-flex;align-items:center;justify-content:center;
  gap:9px;
  min-height:40px;
  padding:5px 7px 5px 15px;
  border-radius:999px;
  border:2px solid transparent;
  background:var(--filter-tone);
  color:#fff;
  font-size:12px;font-weight:800;letter-spacing:.01em;
  line-height:1.3;
  white-space:nowrap;
  text-shadow:0 1px 2px rgba(45,57,48,.27);
  box-shadow:0 2px 0 rgba(59,94,77,.10);
  transition:filter .18s, box-shadow .18s, transform .18s;
}
.filter-btn[data-category="繪圖"]{--filter-tone:var(--filter-art);--filter-ink:#925C05}
.filter-btn[data-category="文章"]{--filter-tone:var(--filter-writing);--filter-ink:#237B39}
.filter-btn[data-category="Cosplay"]{--filter-tone:var(--filter-cosplay);--filter-ink:#AA4D3D}
.filter-btn[data-category="全部作品"]{--filter-tone:var(--filter-all);--filter-ink:#20746D}
.filter-label{display:inline-block;white-space:nowrap}
.filter-count{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:39px;
  padding:5px 9px;
  border-radius:999px;
  background:#FFFDF8;
  color:var(--filter-ink);
  font-size:11px;
  line-height:1;
  letter-spacing:0;
  font-weight:850;
  font-variant-numeric:tabular-nums;
  text-shadow:none;
  white-space:nowrap;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.045);
}
.filter-btn[data-category][aria-pressed="true"],
.filter-btn[data-category]:hover{
  background:var(--filter-tone);
  border-color:#FFFDF6;
  color:#fff;
  filter:brightness(.98);
  text-shadow:0 1px 2px rgba(45,57,48,.27);
  box-shadow:0 0 0 2px var(--filter-tone),0 5px 11px rgba(32,68,61,.13);
}
.filter-btn[data-category]:hover:not([aria-pressed="true"]){filter:brightness(1.06);transform:translateY(-1px)}
.filter-btn:focus-visible{outline:3px solid #225E62;outline-offset:5px}
/* 小手機橫向捲動時，標籤仍能完整顯示，不擠壓文章卡片。 */
@media(max-width:760px){
  .gallery-heading + .release-notice:not([hidden]){margin-top:21px}
  .filters{gap:9px;padding:5px 4px 9px}
  .filter-btn[data-category]{flex:0 0 auto;min-height:39px;padding:5px 7px 5px 12px;gap:7px;font-size:11px}
  .filter-count{font-size:10px;padding:5px 8px;min-width:35px}
}
/* 手機採 2×2 排列，避免最後的 Cosplay 被橫向捲動藏起來。 */
@media(max-width:540px){
  .filters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;overflow:visible;padding:4px 2px 8px}
  .filter-btn[data-category]{width:100%;min-width:0;justify-content:space-between}
}
@media(prefers-reduced-motion:reduce){.filter-btn{transition:none}.filter-btn:hover{transform:none!important}}