/* ══════════════════════════════════════════════════════════
   女優詳細。**モックの .dt パネルに寸法を合わせてある。**
   本実装は実ページなので、パネルの代わりに本文が右から入る。
   ══════════════════════════════════════════════════════════ */
/* モックの .dt__in と同じ。**ここだけは 1200px で中央に置く。**
   一覧はカードを端まで敷き詰めるが、詳細は読みものなので幅を切る */
@keyframes dtIn{from{transform:translateX(100%)}to{transform:none}}
.content[data-view="actress"]{
  max-width:1200px;margin:0 auto;padding:0 16px 90px;
  /* 開くときだけ右から入る。**閉じるときは何もしない**（履歴を戻すと
     前の一覧がそのまま復元されるので、動かすと逆に引っかかる） */
  animation:dtIn .3s cubic-bezier(.22,.9,.25,1);
}
/**
 * 閉じる動き。**大きく動かさない。**
 * 横へ大きくスライドさせると、抜けた跡に地の色が見えて別の画面が出たように見える。
 * 少しだけ右へ寄せながら薄くする。**戻り先は履歴から瞬時に復元される**ので、
 * 消えたところに一覧がそのまま在る。
 */
@keyframes dtOut{to{opacity:0;transform:translateX(3%)}}
.content[data-view="actress"].is-leaving{animation:dtOut .18s ease-in forwards}

@media (prefers-reduced-motion: reduce){
  .content[data-view="actress"],
  .content[data-view="actress"].is-leaving{animation:none}
}

/* モックの .dt__hd。ヘッダーの下に貼り付いて、戻る／× を常に出す */
.dt__exits{position:sticky;top:52px;z-index:5;display:flex;align-items:center;gap:10px;height:52px;
  margin:0 -16px;padding:0 16px;
  background:var(--veil);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.dt__exits .btn-exit{min-height:34px;height:34px;padding:0 13px 0 10px;
  border-radius:var(--r-data);font-size:12.5px;letter-spacing:.04em;color:var(--fg-dim)}
.dt__x{margin-left:auto;display:grid;place-items:center;width:38px;height:38px;
  border-radius:50%;border:1px solid var(--line-btn);color:var(--fg-dim);font-size:19px;line-height:1;
  transition:border-color .16s,color .16s,background .16s}
.dt__x:hover{border-color:var(--signal);color:var(--signal);background:var(--tint-1)}

.dt__hd{display:flex;gap:16px;padding:22px 0 18px}
/* **写真は 125×125 が上限。拡大しない。** 枠を大きくしても荒くなるだけである */
.dt__ph{flex:0 0 125px;width:125px;height:125px;object-fit:cover;
  background:linear-gradient(158deg,var(--ink-3),var(--ink))}
.dt__id{flex:1;min-width:200px}
.dt__name{font-family:var(--font-serif);font-size:26px;font-weight:900;letter-spacing:.04em;line-height:1.25}
.dt__ruby{font-family:var(--font-num);font-size:10.5px;color:var(--fg-mute);letter-spacing:.12em;margin-top:5px}
.dt__tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:12px}
.dt__tags .chip{min-height:32px;padding:6px 10px;font-size:12px}
.dt__fav{display:inline-flex;align-items:center;gap:8px;height:40px;min-height:40px;padding:0 17px;margin-top:14px;
  border:1px solid var(--line-2);border-radius:var(--r-data);font-size:13px;color:var(--fg-dim);
  transition:border-color .16s,color .16s,background .16s}
.dt__fav:hover{border-color:var(--sale);color:var(--sale)}
.dt__fav.is-on{border-color:var(--sale);color:var(--sale);background:var(--sale-bg)}

/* モックの .dt__tbl と同じ見え方にする（構造は dl のまま） */
.dt__spec{display:grid;grid-template-columns:104px 1fr;margin:4px 0 22px}
.dt__spec dt{padding:10px 0;border-bottom:1px solid var(--line);
  font-size:12px;font-weight:400;color:var(--fg-mute)}
.dt__spec dd{padding:10px 0;border-bottom:1px solid var(--line);
  font-family:var(--font-num);font-size:13px}

.dt__pick{margin:22px 0}
.dt__pickt{font-family:var(--font-serif);font-size:15px;font-weight:700;letter-spacing:.09em;
  margin-bottom:12px}
.dt__pick .btn-run{width:100%;text-align:center}
.dt__works{margin:20px 0}
.dt__empty{font-size:13px;color:var(--fg-dim)}

.work{position:relative;display:block;width:132px;flex:0 0 auto;background:var(--ink-2);
  border-radius:var(--r-data);overflow:hidden;padding-bottom:8px}
.work__img{width:100%;display:block}
.work__vr{position:absolute;right:5px;top:5px;padding:2px 6px;font-size:10px;border-radius:var(--r-data)}
/* 作品タイトルは長文なので副文字ではなく主文字で組む（5-14 ③） */
.work__t{display:block;padding:7px 8px 0;font-size:12px;color:var(--fg);line-height:1.45}
.work__id,.work__d{display:block;padding:0 8px;font-size:10.5px;color:var(--fg-mute)}
.work__price{display:block;padding:4px 8px 0;font-size:12.5px}
.work__price del{color:var(--fg-mute)}
.work__off{color:var(--fixed-sale)}
.dt__salescope{margin-top:8px;font-size:11px;color:var(--fg-mute)}
.dt__salescope a{text-decoration:underline;color:var(--signal)}
/* ── 固定CTA（3-11③）。**本文の底に貼り付く。** 画面幅によらず出す ── */
.dtbar{position:sticky;bottom:0;z-index:6;margin:0 -16px;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  background:var(--veil);backdrop-filter:blur(14px);border-top:1px solid var(--line);
  display:flex;align-items:center;gap:12px}
.cta{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:54px;
  border-radius:var(--r-exec);font-size:14.5px;font-weight:700;letter-spacing:.05em;
  transition:filter .18s,background .18s,color .18s,border-color .18s}
.cta--main{background:var(--signal-bg);color:var(--on-signal)}
.cta--main:hover{filter:brightness(1.07)}
.cta small{font-weight:400;font-size:11px;opacity:.75}
.dtbar .cta{flex:1;height:48px;margin:0;font-size:14px}

/**
 * サンプル動画（3-10）。
 *
 * **再生ボタンはサンプル動画がある作品にだけ出す。** ファセット層 11,352人の
 * うち 10,608人（93%）が持っている。無い作品にボタンを置くと、
 * 押しても何も起きないものを見せることになる。
 */
/**
 * **常に出す。** ホバーで出す作りにしたら、見えないという指摘を受けた。
 * サンプル動画があること自体が分からなければ、押されようがない。
 * 目立たせすぎないよう、地は半透明の黒に留めてホバーで濃くする。
 */
.work__play{position:absolute;left:50%;top:52px;translate:-50% 0;z-index:3;
  display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.55);color:#fff;
  transition:background .16s,border-color .16s}
/* **ホバーで動かさない。** 押す先がずれる（モックの .ply__nav と同じ約束） */
.work__play:hover{background:rgba(0,0,0,.88);border-color:#fff}

.ply{position:fixed;inset:0;z-index:1400;display:grid;place-items:center;padding:16px;
  background:rgba(0,0,0,.86);opacity:0;transition:opacity .18s ease}
.ply.is-open{opacity:1}
/* **プレイヤーの実寸は 720×480。** 枠をそれより広げると、
   先方のページの地色（白）が上下に帯として出る */
.ply__box{width:100%;max-width:720px;
  transform:scale(.975);transition:transform .2s cubic-bezier(.2,.85,.3,1)}
.ply.is-open .ply__box{transform:none}
.ply__hd{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.ply__t{font-size:12.5px;color:#f4f2ee;min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.ply__x{margin-left:auto;display:grid;place-items:center;width:38px;height:38px;
  border-radius:50%;border:1px solid rgba(255,255,255,.28);color:#fff;flex:0 0 auto}
.ply__x:hover{background:rgba(255,255,255,.12)}
/* **プレイヤーは 720×480 で来る。** 枠の比率をそれに合わせる（黒帯を出さない） */
.ply__stage{position:relative;width:100%;aspect-ratio:720/480;background:#000;overflow:hidden}
.ply__f{width:100%;height:100%;border:0;display:block}
.ply__note{margin:12px 0 0;text-align:center;color:#cfccc6;font-size:11.5px;line-height:2}
.ply__note a{color:var(--signal);text-decoration:underline}

@media (prefers-reduced-motion:reduce){
  .ply,.ply__box{transition:none}
}

/**
 * 名前とお気に入りの右に置く1本ぶんのサンプル（3-10）。
 *
 * **開いた時点では静止画だけ。** iframe を最初から置くと、
 * ページを開いただけで FANZA へ通信が出る。押されてから差し替える。
 */
.dt__hd{flex-wrap:wrap}
.dt__smp{flex:0 0 auto;width:min(360px,100%);margin-left:auto}
.smp{position:relative}
.smp__btn{display:block;width:100%;padding:0;line-height:0;position:relative;
  background:var(--ink-3);border:1px solid var(--line);border-radius:var(--r-data);
  overflow:hidden;transition:border-color .16s}
.smp__btn:hover{border-color:var(--line-2)}
/* プレイヤーは 720×480 で来る。静止画も同じ比率で置いて、押した瞬間にずれないようにする */
.smp__img{width:100%;height:auto;aspect-ratio:720/480;object-fit:cover;display:block;opacity:.92}
/* **ホバーで動かさない。** 押す先がずれると、狙った位置を外す */
.smp__play{position:absolute;left:50%;top:50%;translate:-50% -50%;
  display:grid;place-items:center;width:54px;height:54px;border-radius:50%;
  background:rgba(0,0,0,.58);border:1px solid rgba(255,255,255,.62);color:#fff;
  transition:background .16s,border-color .16s}
.smp__btn:hover .smp__play{background:rgba(0,0,0,.86);border-color:#fff}
.smp__stage{width:100%;aspect-ratio:720/480;background:#000;
  border:1px solid var(--line);border-radius:var(--r-data);overflow:hidden}
.smp__f{width:100%;height:100%;border:0;display:block}
.smp__cap{margin:6px 0 0;font-size:10.5px;letter-spacing:.1em;color:var(--fg-mute);
  font-family:var(--font-num)}

@media (max-width:760px){
  /* 狭い画面では名前の下に回す。横に並べると名前もタグも潰れる */
  .dt__smp{flex-basis:100%;width:100%;margin-left:0;margin-top:14px}
}