/* ══════════════════════════════════════════════════════════
   一覧。**寸法・配色・動きは mockups/filter-mock.html に揃えてある。**
   ══════════════════════════════════════════════════════════ */

/* ── 適用中チップ（5-1 原則4）。ヘッダーの下に追従して残る ── */
.chiprow{position:sticky;top:52px;z-index:30;display:flex;gap:6px;padding:9px 14px;
  overflow-x:auto;scrollbar-width:none;
  background:var(--veil);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.chiprow::-webkit-scrollbar{display:none}
.tok{flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;height:27px;padding:0 8px 0 10px;
  border:1px solid var(--tok-line);background:var(--tok-bg);color:var(--on-sel);
  border-radius:var(--r-data);font-size:12px;white-space:nowrap;
  animation:tokIn .2s cubic-bezier(.2,.8,.3,1)}
.tok__x{display:grid;place-items:center;width:15px;height:15px;border-radius:var(--r-data);
  color:var(--sel-sub);font-size:14px;line-height:1;transition:background .15s,color .15s}
.tok__x:hover{background:var(--sel-hover);color:var(--on-sel)}
.chiprow__clear{flex:0 0 auto;height:27px;padding:0 10px;border:1px solid var(--line-2);
  border-radius:var(--r-data);color:var(--fg-mute);font-size:12px;
  transition:color .16s,border-color .16s}
.chiprow__clear:hover{color:var(--fg-dim);border-color:var(--fg-mute)}

/* ── 件数は一番大きく出す（5-1 原則5）。数字が主役 ── */
.bar{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;
  padding:18px 14px 14px;border-bottom:1px solid var(--line)}
@media (min-width:900px){ .bar{padding:24px 20px 16px} }
.bar__n{display:flex;align-items:baseline;gap:6px;line-height:1;font-size:15px;color:var(--fg-dim)}
.bar__n b{font-family:var(--font-num);font-weight:500;font-size:clamp(34px,10vw,46px);
  letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--fg);
  transition:color .3s}
/* 数え直している間だけ差し色にする。止まると地の色へ戻る */
.bar__n b.is-ticking,.rail__n b.is-ticking{color:var(--signal)}
.bar__sort{margin-left:auto}
.bar__sort select{background:none;border:1px solid var(--line);border-radius:var(--r-data);
  height:32px;padding:0 11px;font-size:12.5px;color:var(--fg-dim);cursor:pointer;
  transition:border-color .16s}
.bar__sort select:hover{border-color:var(--line-2)}
.shuffle{border:1px solid var(--line);border-radius:var(--r-data);height:32px;padding:0 12px;
  font-size:12.5px;color:var(--fg-dim);transition:border-color .16s,color .16s}
.shuffle:hover{border-color:var(--signal);color:var(--signal)}

/* ── グリッド。**端まで敷き詰める。** 中央寄せも最大幅も持たない ── */
.grid{display:grid;gap:var(--grid-gap);grid-template-columns:repeat(3,1fr);padding:var(--grid-gap)}
@media (min-width:900px){ .grid{grid-template-columns:repeat(auto-fill,minmax(178px,1fr))} }

/* **min-width:0 を必ず置く。** グリッドの子は既定が auto なので、
   折り返さない長い名前（「晶エリー（新井エリー、大沢佑香）」など）が
   列そのものを押し広げ、その1枚だけ2列ぶんの幅になる */
.card{position:relative;display:block;min-width:0;background:var(--ink-2);
  animation:cardIn .32s cubic-bezier(.2,.8,.3,1) backwards;
  transition:background .18s}
.card:hover{background:var(--ink-3)}
.card__ph{position:relative;display:grid;place-items:center;aspect-ratio:3/4;overflow:hidden;
  background:linear-gradient(158deg,var(--ink-3),var(--ink))}
/**
 * **写真は 125×125 の正方形しか無い**（DMM が返す最大。image_small は 65×65）。
 * カードの 3:4 枠いっぱいに広げると 178px 幅で 1.4倍に伸び、目に見えて荒くなる。
 * **原寸を超えて拡大せず、枠の中央に置く。** 余白は地のグラデーションが受ける。
 */
.card__ph img{grid-area:1/1;display:block;width:min(100%,125px);height:auto;
  aspect-ratio:1;object-fit:cover;align-self:center;justify-self:center}
/* 写真の粒状。並んだときに均一な板に見えないようにする */
.card__ph::after{content:"";position:absolute;inset:0;opacity:.5;mix-blend-mode:overlay;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E")}
/**
 * 顔写真が無い人のパッケージ。
 *
 * **顔写真と同じ 125px の正方形に収める**（寸法は上の .card__ph img のまま）。
 * 枠いっぱいに出すと、煽り文とジャケットの原色が並んで一覧が
 * 「女優のデータベース」ではなくDVDの売り場になり、隣の顔写真カードの
 * 静けさを食ってしまう。並びの規則を崩さないことを優先する。
 *
 * 寄せ方だけは絵に合わせて変える。横長は表4と表1が横に連結されていて
 * **表紙は右半分**（ps.jpg との画素差で確認：右 14,926 / 左 45,930）。
 * 縦長は表紙単体なので寄せない。判定は実寸で（list.js の markPackageAspect）。
 */
/* 縦は少し上を見る。表紙は上半分に顔、下半分に文字が来る作りが多い */
/* 寄せ方は一覧でも詳細でも同じ。判定は list.js の markPackageAspect が実寸で行う */
img.is-pkg{object-position:50% 30%}
img.is-pkg.is-wide{object-position:75% 30%}
/* 作品もない人はここが見える。地のグラデーションだけを残す */
.card__noimg{grid-area:1/1;width:100%;height:100%}

.card__name{display:block;padding:7px 8px 0;font-family:var(--font-serif);font-size:13.5px;
  font-weight:700;letter-spacing:.02em;line-height:1.35;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card__meta{display:block;padding:3px 8px 9px;font-family:var(--font-num);font-size:10px;
  color:var(--fg-mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* 写真の上に乗る要素はテーマに追従させない（5-14④）。ライトで白地に白文字になる */
.card__badge,.card__vr,.card__sale{position:absolute;z-index:2;font-family:var(--font-num);
  font-size:9px;letter-spacing:.1em;padding:2px 5px;background:var(--fixed-badge-bg);
  color:var(--fixed-on-badge);border-radius:0}
.card__badge{left:0;top:0;color:var(--fixed-live)}
.card__vr{left:0;bottom:0;background:var(--fixed-vr-bg);color:var(--fixed-on-vr);font-weight:500}
.card__sale{left:0;bottom:0;background:var(--fixed-sale);color:var(--fixed-on-sale);font-weight:500}
.card__vr ~ .card__sale{left:auto;right:0}

.card__fav{position:absolute;right:3px;top:3px;z-index:3;display:grid;place-items:center;
  width:30px;height:30px;border-radius:50%;
  background:var(--fixed-thumb-veil);color:#fff;backdrop-filter:blur(3px);
  transition:background .16s,color .16s,transform .16s}
.card__fav:hover{background:var(--fixed-thumb-veil-h)}
.card__fav:active{transform:scale(.88)}
.card__fav.is-on{color:var(--fixed-fav);background:rgba(13,13,15,.8)}
.card__fav.is-on svg{animation:heartBeat .5s ease-in-out}
.card__fav svg{display:block}

.more{display:block;width:calc(100% - 28px);margin:20px 14px 60px;height:46px;
  border:1px solid var(--line-2);border-radius:var(--r-data);color:var(--fg-dim);
  font-size:13px;letter-spacing:.06em;transition:border-color .18s,color .18s}
.more:hover{border-color:var(--signal-dim);color:var(--signal)}

.zero{padding:44px 16px;text-align:center}
.zero__t{font-size:16px;margin-bottom:8px}
.zero__p{font-size:13px;color:var(--fg-dim);margin-bottom:18px}
.zero__btns{display:flex;flex-direction:column;gap:10px;align-items:stretch;max-width:420px;margin:0 auto}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
}