@charset "utf-8";
/* ツギドレ ディスカバリーUI改善設計 v1 — 正本デザインへの追加・上書き分だけを持つ
   読み込み順：base-main.css（第3.1回 styles.css の複製）→ base-work-detail.css（第2.1回 work-detail.css の複製）→ このファイル
   実装班へ渡すのは「このファイルに相当する差分」。正本の2ファイルは変更しない。
   ・無彩色、角丸なし、1px罫線、左揃え、黒地の主要ボタン（正本の基本を維持）
   ・新しいヘッダー・ナビは作らない */

/* =========================================================
   0. モック専用（本番へは持ち込まない）
   ========================================================= */
.mock-bar{
  position:sticky; top:0; z-index:200; display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px;
  padding:6px 16px; background:#15171a; color:#f7f7f6; font-family:var(--mono); font-size:11px; letter-spacing:.06em;
}

.mock-bar strong{color:#f7f7f6;}
.mock-bar label{display:inline-flex; align-items:center; gap:6px; cursor:pointer;}
.mock-bar select{font:inherit; padding:3px 6px; background:#f7f7f6; color:#15171a; border:1px solid #cfd0cf; border-radius:0;}
.mock-bar .mock-vw{margin-left:auto; opacity:.8;}

/* =========================================================
   1. 作品棚のカード（正本 .card を拡張：作品名リンク／出演者／メーカー／代表価格／FANZA）
   ========================================================= */
/* パッケージ画像は本物の詳細リンク。クイック表示だけを独立ボタンにする。 */
.card{position:relative;}
.card-link{display:block; text-decoration:none; color:inherit; cursor:pointer;}
.card-link:focus-visible{outline:none;}
.card-link:focus-visible .card-pkg{outline:2px solid var(--focus); outline-offset:2px;}
.card-link .card-pkg{display:block;}
a.fp-pkg{display:block; text-decoration:none; color:inherit;}
a.fp-pkg:focus-visible{outline:2px solid var(--focus); outline-offset:2px;}
.card-quick{display:none; width:100%; min-height:44px; margin-top:8px; padding:0 10px; align-items:center; justify-content:center; gap:8px; border:1px solid var(--line); background:var(--surface); color:var(--ink-soft); font:inherit; font-size:13px; letter-spacing:.02em; cursor:pointer;}
.card-quick:hover{border-color:var(--ink); color:var(--ink);}
.card-quick:focus-visible{outline:2px solid var(--focus); outline-offset:2px;}
.card-quick[aria-expanded="true"]{background:var(--ink); color:var(--surface); border-color:var(--ink);}
.card-quick-mark{font-family:var(--mono); font-size:12px; line-height:1;}
@media (hover:none), (max-width:860px){.card-quick{display:flex;}}
.card.is-active .card-quick{visibility:hidden;}
a.card-title{display:-webkit-box; text-decoration:none; color:var(--ink);}
a.card-title:hover,a.card-title:focus-visible{color:var(--slate); text-decoration:underline; text-underline-offset:3px;}
.card-cast{min-height:1.6em;}
.card-maker{display:block; margin-top:2px; font-size:12px; line-height:1.6; color:var(--ink-mute); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.card-info{display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin-top:8px; padding-top:8px; border-top:1px solid var(--line-soft);}
/* 正本の .card-price は棚では display:none なので、代表価格は別名 .card-rep にする */
.card-rep{font-size:15.5px; line-height:1.3; font-weight:700; color:var(--ink); white-space:nowrap;}
.card-rep .card-rep-fmt{margin-left:5px; font-size:11.5px; font-weight:400; color:var(--ink-mute); letter-spacing:.02em;}
.card-rep-none{font-size:12.5px; font-weight:400; color:var(--ink-mute);}
.card-store{flex:0 0 auto; font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; line-height:1; padding:5px 6px; border:1px solid var(--line); color:var(--ink-soft); background:var(--surface);}
/* 浮動詳細で覆う範囲（正本は作品名・出演者。追加した行も隠す） */
.card.is-active .card-maker,.card.is-active .card-info{visibility:hidden;}
.card.is-out .card-maker,.card.is-out .card-info{color:var(--ink-mute);}
.card.is-out .card-rep{color:var(--ink-mute);}
/* 好みの印（正本 .card-mark を使う。KEEP＝興味あり） */
.card-mark[hidden]{display:none;}
.card-pkg{aspect-ratio:var(--pkg-ratio);}
.card-pkg img[data-src]:not([src]){opacity:0;}

/* セール価格は同じ価格行の対だけを表示する共通部品。 */
:root{--sale:#b3261e;}
.pz{display:inline-flex; align-items:baseline; flex-wrap:wrap; gap:2px 8px; max-width:100%;}
.pz-now{font-weight:700; color:var(--ink);}
.pz-sale{font-weight:700; color:var(--sale); text-decoration:none;}
.pz-reg{color:var(--ink-mute); text-decoration:line-through; font-weight:400;}
.pz-off{display:inline-block; align-self:center; border:1px solid var(--sale); color:var(--sale); font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; line-height:1; padding:4px 5px; white-space:nowrap;}
.pz-tag{display:inline-block; align-self:center; background:var(--ink); color:var(--surface); font-size:10.5px; letter-spacing:.14em; line-height:1; padding:4px 6px; white-space:nowrap;}
.pz-fmt{color:var(--ink-mute); font-weight:400;}
.pz-card .pz-now,.pz-card .pz-sale{font-size:15.5px; line-height:1.3;}
.pz-card .pz-reg{font-size:11.5px;}
.pz-card .pz-fmt{font-size:11.5px;}
.pz-card .pz-off{font-size:10px; padding:3px 4px;}
.pz-card .pz-tag{display:none;}
.card-rep .pz{gap:2px 6px;}
.pz-panel .pz-now,.pz-panel .pz-sale{font-size:22px; line-height:1.3;}
.pz-panel .pz-reg{font-size:12.5px;}
.pz-panel .pz-fmt{font-size:12px;}
.pz-detail .pz-now,.pz-detail .pz-sale{font-size:30px; line-height:1.3;}
.pz-detail .pz-reg{font-size:14px;}
.pz-detail .pz-fmt{display:inline-flex; align-items:center; min-height:24px; padding:0 8px; border:1px solid var(--ink); font-size:12px; line-height:1; color:var(--ink); letter-spacing:.04em; align-self:center;}
.pz-detail .pz-off{font-size:12px; padding:5px 7px;}
.pz-detail .pz-tag{font-size:11px; padding:5px 7px;}
.pz-table .pz-now,.pz-table .pz-sale{font-size:13.5px;}
.pz-table .pz-reg{font-size:12px;}
.pz-table .pz-fmt{display:none;}
.wd-sum-sale-note{color:var(--ink-soft);}
.wd-table tr.is-sale-row th{box-shadow:inset 3px 0 0 var(--sale);}
.card-rep-sale{display:none;}
.rail-empty{flex:0 0 auto; list-style:none; display:flex; flex-direction:column; gap:6px; min-width:min(100%,520px); padding:22px 20px; border:1px dashed var(--ink-mute); background:var(--surface);}
.rail-empty-title{font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--ink-mute);}
.rail-empty-text{font-size:14px; line-height:1.7; color:var(--ink-soft);}

/* v1.5.0 パッケージ画像：API返却画像を加工せず、常に全体を中央へ表示する。 */
.card-pkg img,.fp-pkg img{object-fit:contain; object-position:center;}
.card-pkg img[data-quality="limited"],.fp-pkg img[data-quality="limited"],.wd-pkg-frame img[data-quality="limited"]{margin:auto;}
.rail{scrollbar-gutter:stable;}
.card{display:flex; flex-direction:column;}
.card-info{margin-top:auto; padding-top:8px;}
.card.is-selecting .card-pkg{background:var(--surface);}
.card-pkg{position:relative;}
.card-ltag,.fp-ltag{position:absolute; left:0; top:100%; margin-top:4px; font-family:var(--mono); font-size:10px; letter-spacing:.14em; line-height:1; padding:3px 6px; border:1px solid var(--line); color:var(--ink-mute); background:var(--surface); white-space:nowrap;}
.card[data-orient="portrait"] .card-pkg,.card[data-orient="none"] .card-pkg,.card[data-orient="pending"] .card-pkg{aspect-ratio:var(--pkg-ratio);}
.card[data-orient="landscape"] .card-pkg{aspect-ratio:var(--img-ratio,800 / 538); height:auto;}
.card[data-orient="landscape"] .card-pkg img{width:100%; height:100%;}
.card[data-orient="landscape"] .card-title{margin-top:30px; -webkit-line-clamp:3; min-height:4.5em;}
.card[data-orient="landscape"] .card-cast{white-space:normal; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;}
.card[data-orient="none"] .card-pkg{position:relative;}
#fp .fp-pkg{position:relative;}
#fp[data-orient="portrait"] .fp-pkg{aspect-ratio:var(--img-ratio,210 / 300); width:312px; height:auto;}
#fp[data-orient="landscape"]{width:820px; grid-template-columns:440px minmax(0,1fr); padding:20px 18px; gap:0 18px;}
#fp[data-orient="landscape"] .fp-pkg{width:440px; aspect-ratio:var(--img-ratio,800 / 538); height:auto;}
#fp[data-orient="landscape"] .fp-pkg img{width:100%; height:100%;}
#fp[data-orient="landscape"] .fp-body{min-width:300px;}
#fp[data-orient="none"] .fp-pkg,#fp[data-orient="pending"] .fp-pkg{aspect-ratio:var(--pkg-ratio); width:312px;}
.fp-ltag{margin-top:6px;}
.wd-pkg-tabs{display:flex; gap:0; margin:0 0 10px; border:1px solid var(--line); background:var(--surface);}
.wd-pkg-tabs[hidden]{display:none;}
.wd-pkg-tab{flex:1 1 0; min-height:44px; padding:0 12px; border:0; background:transparent; color:var(--ink-soft); font:inherit; font-size:13.5px; cursor:pointer;}
.wd-pkg-tab + .wd-pkg-tab{border-left:1px solid var(--line);}
.wd-pkg-tab[aria-selected="true"]{background:var(--ink); color:var(--surface); font-weight:700;}
.wd-pkg-tab:focus-visible{outline:2px solid var(--focus); outline-offset:-3px;}
.wd-hero.has-switch.is-portrait,.wd-hero.has-switch.is-landscape{grid-template-columns:560px minmax(0,1fr);}
.wd-hero.has-switch .wd-pkg-frame[data-kind="portrait"]{width:400px; margin-left:auto; margin-right:auto;}
.wd-hero.has-switch .wd-pkg-frame[data-kind="landscape"]{width:560px;}
.wd-pkg-frame[data-kind] img{object-fit:contain;}
/* 画像なし（3サイズとも欠損） */
.card-noimg{display:grid; place-items:center; position:absolute; inset:0; border:1px dashed var(--ink-mute); color:var(--ink-mute); font-family:var(--mono); font-size:11px; letter-spacing:.14em; background:var(--surface);}

/* =========================================================
   2. 浮動詳細パネル（正本 .fp を再利用。中身の項目を実データに合わせる）
   ========================================================= */
.fp-title a{display:block; color:inherit; text-decoration:none;}
.fp-title a:hover,.fp-title a:focus-visible{color:var(--slate); text-decoration:underline; text-underline-offset:3px;}
.fp-cast{margin:0 0 4px; font-size:13.5px; line-height:1.7; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.fp-cast .fp-k,.fp-maker .fp-k,.fp-date .fp-k{font-size:11.5px; color:var(--ink-mute); margin-right:6px;}
.fp-maker,.fp-date{margin:0 0 4px; font-size:13px; line-height:1.7; color:var(--ink-soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.fp-price{margin:10px 0 0; padding:10px 0 0; border-top:1px solid var(--line-soft); display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 10px;}
.fp-price-now{font-size:22px; font-weight:700; line-height:1.3; color:var(--ink);}
.fp-price-fmt{font-size:12px; color:var(--ink-mute);}
.fp-price-sale{font-size:12.5px; color:var(--ink-mute); text-decoration:line-through;}
.fp-price-more{font-size:12px; color:var(--ink-soft);}
.fp-price-more a{color:var(--ink);}
.fp-store{margin:6px 0 0; display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:12.5px; color:var(--ink-soft);}
.fp-store .card-store{color:var(--ink);}
.fp-genres{max-height:none; margin-top:10px;}
.fp-genres li{padding:0;}
.fp-genres a{display:inline-flex; align-items:center; min-height:32px; padding:0 9px; color:var(--ink-soft); text-decoration:none;}
.fp-genres a:hover{color:var(--ink); text-decoration:underline; text-underline-offset:3px;}
/* 操作：詳細を見る（主）／FANZA（PR）／興味あり／興味なし／閉じる */
/* 1行目：詳細を見る（主）／FANZAで購入（PR）　2行目：興味あり／興味なし／閉じる　3行目：ESCの案内 */
.fp-acts{grid-template-columns:1fr 1fr 88px; gap:8px;}
.fp-acts .bb{white-space:nowrap;}
.fp-acts .bb-main{grid-column:1; grid-row:1;}
.fp-acts .bb-buy{grid-column:2 / 4; grid-row:1; border-color:var(--ink); color:var(--ink); font-weight:600;}
.fp-acts .bb-buy .wd-pr{margin-right:6px; min-width:26px; height:18px; font-size:10.5px;}
.fp-acts [data-act="yes"]{grid-column:1; grid-row:2;}
.fp-acts [data-act="no"]{grid-column:2; grid-row:2;}
.fp-acts .bb-close{grid-column:3; grid-row:2;}
.fp-esc{grid-column:1 / 4; grid-row:3; text-align:right; margin-top:-2px;}
.fp-acts .bb-buy[hidden]{display:none;}
.fp-noimg{position:absolute; inset:0; display:grid; place-items:center; border:1px dashed var(--ink-mute); color:var(--ink-mute); font-family:var(--mono); font-size:11px; letter-spacing:.14em;}

/* =========================================================
   3. 作品詳細ページ（正本 .wd-* を再利用。パッケージの枠と情報の優先順位を変える）
   ========================================================= */
/* 枠の比率を固定しない。画像の実寸に合わせて枠を作る（縦横比は画像のまま、上下の余白を作らない） */
.wd-pkg-frame{aspect-ratio:auto; height:auto; min-height:0;}
.wd-pkg-frame img{height:auto; width:100%; object-fit:contain;}
.wd-pkg-frame.is-noimage{aspect-ratio:var(--pkg-ratio);}
/* 読み込み前の高さ確保。カタログに images.width/height があればそれを使う。無ければ横長の既定値 */
.wd-pkg-frame.is-pending{aspect-ratio:800 / 538;}
.wd-pkg-frame.is-pending img{position:absolute; inset:0; height:100%;}
.wd-hero.is-landscape{grid-template-columns:560px minmax(0,1fr);}
.wd-hero.is-landscape .wd-pkg-frame{width:560px;}
.wd-hero.is-portrait{grid-template-columns:400px minmax(0,1fr);}
.wd-hero.is-portrait .wd-pkg-frame{width:400px;}
.wd-pkg-cap{font-size:11.5px;}
.wd-pkg-view{margin:8px 0 0; font-size:12.5px;}
.wd-pkg-view button{font:inherit; font-size:12.5px; min-height:44px; padding:0 12px; border:1px solid var(--line); background:var(--surface); color:var(--ink); cursor:pointer;}
.wd-pkg-view button:hover{border-color:var(--ink);}

/* 情報の優先順位：作品名 → 代表価格 → PR導線 → 発売日・収録時間 → 出演者ほか */
.wd-title{font-size:26px; line-height:1.5; margin-bottom:10px;}
.wd-sum{padding:14px 18px;}
.wd-sum-now{font-size:30px;}
.wd-sum-fmt{display:inline-flex; align-items:center; min-height:24px; padding:0 8px; border:1px solid var(--ink); font-size:12px; line-height:1; color:var(--ink); letter-spacing:.04em;}
.wd-sum-sale{font-size:13.5px; color:var(--ink-mute); text-decoration:line-through;}
.wd-sum-note{font-size:12px;}
.wd-sum-more{display:flex; flex-wrap:wrap; gap:0 16px;}
.wd-store{display:flex; align-items:center; gap:10px; margin:0 0 12px; font-size:12.5px; color:var(--ink-soft);}
.wd-meta{margin-bottom:14px;}
.wd-kv-row{grid-template-columns:120px minmax(0,1fr); padding:9px 0;}
.wd-kv dd{font-size:14px; line-height:1.8;}
.wd-kv .wd-more-people{margin-left:8px; font-size:12.5px; color:var(--ink-mute);}
/* 興味あり／なし：主要情報の下に補助的に置く */
.wd-interest{margin:16px 0 0; padding:14px 0 0; border-top:1px solid var(--line-soft);}
.wd-interest-h{font-size:12.5px; color:var(--ink-mute); font-weight:400;}
.wd-int-btns{max-width:420px;}
.wd-int{min-height:44px; padding:0 10px; font-size:13px;}

/* ---------- サンプル画像ギャラリー ---------- */
.ui-gal-head{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:0 0 10px;}
.ui-gal-count{font-family:var(--mono); font-size:12px; letter-spacing:.1em; color:var(--ink-mute); white-space:nowrap;}
.ui-gal-hint{font-size:12px; color:var(--ink-mute);}
.ui-gal-tools{display:flex; align-items:center; gap:14px;}
.ui-gal-rail{
  display:flex; gap:12px; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory;
  padding:12px 0 12px; border-top:1px solid var(--line-soft); scrollbar-width:thin; -webkit-overflow-scrolling:touch;
  outline-offset:4px;
}
.ui-gal-item{flex:0 0 auto; margin:0; scroll-snap-align:start; position:relative;}
.ui-gal-item button{
  display:block; height:200px; min-width:120px; padding:0; border:1px solid var(--line); background:var(--surface);
  cursor:pointer; position:relative; font:inherit; color:var(--ink-mute);
}
.ui-gal-item button:hover{border-color:var(--ink);}
.ui-gal-item img{display:block; height:100%; width:auto; max-width:360px;}
.ui-gal-item .ui-gal-n{
  position:absolute; left:0; bottom:0; font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; line-height:1;
  padding:5px 7px; background:var(--ink); color:var(--surface);
}
.ui-gal-item.is-loading button{width:150px;}
.ui-gal-item.is-loading button::before{content:"読み込み中"; position:absolute; inset:0; display:grid; place-items:center; font-size:12px;}
.ui-gal-item.is-loading img{opacity:0; position:absolute; inset:0; width:100%;}
.ui-gal-item.is-error{display:none;}
.ui-gal-rail::after{content:""; flex:0 0 4px;}

/* ---------- 画像の拡大表示 ---------- */
.ui-modal{position:fixed; inset:0; z-index:90; display:grid; place-items:center; padding:16px; background:rgba(21,23,26,.86);}
.ui-modal[hidden]{display:none;}
.ui-modal-panel{position:relative; box-sizing:border-box; display:grid; grid-template-rows:22px minmax(0,1fr) 44px; gap:10px; width:min(calc(100vw - 32px),1200px); height:calc(100vh - 32px); height:calc(100dvh - 32px); background:var(--surface); border:1px solid var(--ink); padding:12px 14px 14px;}
.ui-modal-head{display:flex; align-items:center; justify-content:space-between; gap:12px; min-width:0; overflow:hidden;}
.ui-modal-title{margin:0; font-size:13px; font-weight:400; color:var(--ink-soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0;}
.ui-modal-count{flex:0 0 auto; white-space:nowrap; font-family:var(--mono); font-size:12px; letter-spacing:.1em; color:var(--ink);}
.ui-modal-stage{position:relative; display:grid; place-items:center; min-width:0; min-height:0; overflow:hidden;}
.ui-modal-stage img{display:block; max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; object-position:center;}
.ui-modal-acts{display:grid; grid-template-columns:44px minmax(0,1fr) 44px auto; gap:8px; align-items:center; min-width:0;}
.ui-modal-acts .railbtn{border:1px solid var(--line); width:44px; height:44px;}
.ui-modal-acts .ui-modal-hint{font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; color:var(--ink-mute); text-align:center;}
.ui-modal-close{min-height:44px; padding:0 14px; border:1px solid var(--ink); background:var(--ink); color:var(--surface); font:inherit; font-size:13px; cursor:pointer;}
body[data-modal="open"]{overflow:hidden;}

/* ---------- サンプル動画 ---------- */
.ui-video{border:1px solid var(--line); background:var(--surface); padding:16px 18px;}
.ui-video-row{display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px;}
.ui-video-note{margin:8px 0 0; font-size:12.5px; line-height:1.75; color:var(--ink-mute);}
.ui-video-stage{margin-top:14px;}
.ui-video-stage[hidden]{display:none;}
.ui-video-frame{display:block; width:100%; max-width:720px; aspect-ratio:720 / 480; border:0; background:var(--ink);}
.ui-video-stub{display:grid; place-items:center; width:100%; max-width:720px; aspect-ratio:720 / 480; background:var(--ink); color:var(--surface); font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-align:center; padding:16px;}
.ui-video-alt{margin:10px 0 0; font-size:12.5px;}
.ui-video-alt a{display:inline-flex; align-items:center; min-height:44px; padding:0 12px; border:1px solid var(--line); background:var(--bg); color:var(--ink); text-decoration:none;}
.ui-video-alt a:hover{border-color:var(--ink);}

/* ---------- 販売形式ごとの価格比較 ---------- */
.wd-table tr.is-rep th,.wd-table tr.is-rep td{background:var(--surface);}
.wd-table tr.is-rep th{box-shadow:inset 3px 0 0 var(--ink); padding-left:10px;}
.wd-rep-tag{display:inline-block; margin-left:8px; font-family:var(--mono); font-size:10px; letter-spacing:.14em; padding:3px 5px; border:1px solid var(--ink); color:var(--ink); vertical-align:middle;}
.wd-table .wd-price-cell{font-weight:700; white-space:nowrap;}
.wd-table .wd-buy{display:inline-flex; align-items:center; min-height:40px; padding:0 10px; border:1px solid var(--ink); color:var(--ink); text-decoration:none; font-size:12.5px; white-space:nowrap;}
.wd-table .wd-buy .wd-pr{min-width:24px; height:16px; font-size:10px; margin-right:6px;}
.wd-table .wd-buy:hover{background:var(--ink); color:var(--surface);}

/* ---------- 作品情報（取得済みの事実だけ） ---------- */
.ui-facts .wd-kv-row{grid-template-columns:160px minmax(0,1fr);}

/* ---------- 関連作品：メイン棚と同じ部品（.shelf/.rail/.card） ---------- */
.ui-related{border-bottom:0; padding-bottom:0;}
.ui-related .shelf-head{margin-bottom:8px;}

/* ---------- クレジット ---------- */
.ui-credit{margin:28px 0 0; padding:14px 0 0; border-top:1px solid var(--line); font-size:12px; line-height:1.7; color:var(--ink-mute);}
.ui-credit a{color:inherit;}

/* =========================================================
   4. スマートフォン（860px以下）
   ========================================================= */
@media (max-width:860px){
  /* モック用バーは1行に詰める（本番には無い） */
  .mock-bar{padding:4px 10px; gap:6px 10px; font-size:10px;}
  .mock-bar > span:not(.mock-vw){display:none;}
  .mock-bar label{gap:4px;}
  .mock-bar select{font-size:10px; padding:2px 4px; max-width:190px;}
  /* 棚：カード236px。次のカードの端が見えるので横に送れることが分かる */
  .card-info{margin-top:6px; padding-top:6px;}
  .card-rep{font-size:14.5px;}
  .card-maker{font-size:11.5px;}
  .pz-card .pz-now,.pz-card .pz-sale{font-size:14.5px;}
  .pz-panel .pz-now,.pz-panel .pz-sale{font-size:20px;}
  .pz-detail .pz-now,.pz-detail .pz-sale{font-size:24px;}
  .card-quick{min-height:44px; font-size:13px;}
  /* 下部パネル（正本 .fp の固定表示）に代表価格とFANZAを足す */
  .fp{max-height:72vh;}
  .fp-title{font-size:16.5px; -webkit-line-clamp:3;}
  .fp-cast,.fp-maker,.fp-date{white-space:normal; font-size:12.5px;}
  .fp-price{margin-top:8px; padding-top:8px;}
  .fp-price-now{font-size:20px;}
  .fp-genres{display:none;}   /* 分類は詳細ページで。シートは主要情報だけ */
  /* 1行目：FANZAで購入（PR・全幅）　2行目：詳細を見る／閉じる　3行目：興味あり／興味なし
     正本のスマホ用 .fp-acts .bb は grid-column:auto !important なので、ここも !important で置く */
  .fp-acts{grid-template-columns:1fr 1fr; gap:8px;}
  .fp-acts .bb{padding:0 6px; min-height:48px;}
  .fp-acts .bb-buy{grid-column:1 / -1 !important; grid-row:1 !important;}
  .fp-acts .bb-main{grid-column:1 !important; grid-row:2 !important;}
  .fp-acts .bb-close{grid-column:2 !important; grid-row:2 !important;}
  .fp-acts [data-act="yes"]{grid-column:1 !important; grid-row:3 !important;}
  .fp-acts [data-act="no"]{grid-column:2 !important; grid-row:3 !important;}
  .fp-esc{display:none;}

  /* 詳細：画像→作品名→代表価格→PR導線→発売日・収録時間→出演者ほか（1カラム。向きの指定より優先） */
  .wd-hero,.wd-hero.is-landscape,.wd-hero.is-portrait{grid-template-columns:minmax(0,1fr); gap:12px 0;}
  .wd-hero.is-landscape .wd-pkg-frame,.wd-hero.is-portrait .wd-pkg-frame,.wd-pkg-frame{width:100%;}
  .wd-hero.is-portrait .wd-pkg-frame{width:min(60.5vw,236px);}
  .wd-pkg-frame.is-noimage{width:min(60.5vw,236px);}
  /* スマホは画像そのものを押して拡大する（別ボタンを出さず、主要情報を上へ寄せる） */
  .wd-pkg-view{display:none;}
  .wd-pkg-frame[role="button"]{cursor:zoom-in;}
  .wd-pkg-cap{margin-top:4px;}
  .wd-title{font-size:20px; line-height:1.5;}
  .wd-sum-now{font-size:24px;}
  .wd-cta .btn{width:100%; min-height:52px;}
  .wd-kv-row{grid-template-columns:96px minmax(0,1fr);}
  .wd-int{font-size:12.5px; padding:0 6px;}
  .ui-gal-item button{height:150px;}
  .ui-gal-item img{max-width:270px;}
  .ui-gal-rail{margin:0 calc(var(--pad) * -1); padding-left:var(--pad); padding-right:var(--pad);}
  .ui-gal-tools .rail-nav{display:none;}
  .ui-modal{padding:0;}
  .ui-modal-panel{max-width:100vw; width:100vw; height:100vh; height:100dvh; border:0; padding:10px 12px calc(12px + env(safe-area-inset-bottom,0px)); grid-template-rows:22px minmax(0,1fr) 104px;}
  .ui-modal-stage{min-width:0;}
  .ui-modal-stage img{max-width:100%; max-height:100%;}
  .ui-modal-acts{grid-template-columns:48px 1fr 48px; grid-template-rows:auto auto; gap:8px;}
  .ui-modal-acts .railbtn{width:48px; height:48px;}
  .ui-modal-acts .railbtn:first-child{grid-column:1; grid-row:1;}
  .ui-modal-acts .railbtn:nth-child(3){grid-column:3; grid-row:1;}
  .ui-modal-acts .ui-modal-hint{display:none;}
  .ui-modal-close{grid-column:1 / -1; grid-row:2; min-height:48px;}
  .ui-video{padding:12px 14px;}
  .ui-video .btn{width:100%;}
  .ui-facts .wd-kv-row{grid-template-columns:96px minmax(0,1fr);}
  .wd-table caption{display:block; width:100%; max-width:100%; white-space:normal; line-height:1.7;}
}
@media (prefers-reduced-motion:reduce){
  .rail,.ui-gal-rail{scroll-behavior:auto !important;}
}
@media (max-width:860px){
  .card[data-orient="landscape"] .card-title{margin-top:26px;}
  #fp[data-orient="landscape"]{width:auto; grid-template-columns:1fr; padding:16px 20px 20px; gap:10px 0;}
  #fp[data-orient="landscape"] .fp-pkg{width:100%; grid-column:1; grid-row:1; margin-bottom:22px;}
  #fp[data-orient="landscape"] .fp-body{grid-column:1; grid-row:2; min-width:0;}
  #fp[data-orient="landscape"] .fp-acts{grid-column:1; grid-row:3;}
  #fp[data-orient="portrait"] .fp-pkg{width:112px;}
  .wd-hero.has-switch.is-portrait,.wd-hero.has-switch.is-landscape{grid-template-columns:minmax(0,1fr);}
  .wd-hero.has-switch .wd-pkg-frame[data-kind="portrait"]{width:min(60.5vw,236px);}
  .wd-hero.has-switch .wd-pkg-frame[data-kind="landscape"]{width:100%;}
  .wd-pkg-tabs{width:100%;}
  .wd-pkg-tab{min-height:44px; font-size:13px;}
}

/* =========================================================
   v1.8.0 横長高画質作品棚・本番統合
   ========================================================= */
:is(.rail-track,.grid) > .card{
  box-sizing:border-box; flex:0 0 352px; width:352px; min-width:352px; height:418px;
  gap:0; overflow:hidden; background:var(--surface);
}
:is(.rail-track,.grid) > .card .card-link{flex:0 0 auto; margin:0;}
:is(.rail-track,.grid) > .card .card-pkg{
  box-sizing:border-box; display:block; position:relative; width:352px; height:250px; aspect-ratio:auto !important;
  overflow:hidden; border:1px solid var(--line); background:var(--surface);
}
:is(.rail-track,.grid) > .card .card-pkg img{display:block; width:100%; height:100%; object-fit:contain; object-position:center;}
:is(.rail-track,.grid) > .card .card-title{
  display:-webkit-box; min-height:48px; max-height:48px; margin:6px 12px 0; overflow:hidden;
  font-size:15px; line-height:24px; -webkit-box-orient:vertical; -webkit-line-clamp:2;
}
:is(.rail-track,.grid) > .card .card-cast{min-height:22px; max-height:22px; margin:5px 12px 0; font-size:12.5px; line-height:22px;}
:is(.rail-track,.grid) > .card .card-maker{height:22px; min-height:22px; margin:2px 12px 0; font-size:12px; line-height:22px;}
:is(.rail-track,.grid) > .card .card-info{
  flex:0 0 53px; min-height:53px; box-sizing:border-box; display:flex; align-items:center; gap:8px;
  margin:7px 12px 0; padding:6px 0 0; border-top:1px solid var(--line-soft);
}
:is(.rail-track,.grid) > .card .card-rep{flex:1 1 auto; min-width:0; overflow:hidden; font-size:14px; line-height:18px; white-space:normal;}
:is(.rail-track,.grid) > .card .card-rep .pz{display:-webkit-box; overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:2;}
:is(.rail-track,.grid) > .card .card-rep .pz-now,:is(.rail-track,.grid) > .card .card-rep .pz-sale{font-size:15px;}
:is(.rail-track,.grid) > .card .card-rep .pz-fmt{font-size:11px;}
:is(.rail-track,.grid) > .card .card-store{font-size:10px;}
:is(.rail-track,.grid) > .card .card-quick{
  display:flex; flex:0 0 44px; width:44px; min-width:44px; height:44px; min-height:44px; margin:0; padding:0;
  font-size:0; gap:0;
}
:is(.rail-track,.grid) > .card .card-quick-mark{font-size:15px;}
:is(.rail-track,.grid) > .card .card-quick > span:not(.card-quick-mark){position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%);}
:is(.rail-track,.grid) > .card.is-active .card-maker,:is(.rail-track,.grid) > .card.is-active .card-info{visibility:visible;}
:is(.rail-track,.grid) > .card.is-active .card-quick{visibility:visible;}
:is(.rail-track,.grid) > .card[data-orient] .card-title{margin-top:6px; min-height:48px; max-height:48px; -webkit-line-clamp:2;}
:is(.rail-track,.grid) > .card[data-orient] .card-cast{display:block; -webkit-line-clamp:initial; white-space:nowrap;}
:is(.rail-track,.grid) > .card[data-orient="landscape"] .card-pkg,
:is(.rail-track,.grid) > .card[data-orient="portrait"] .card-pkg,
:is(.rail-track,.grid) > .card[data-orient="square"] .card-pkg,
:is(.rail-track,.grid) > .card[data-orient="unknown"] .card-pkg,
:is(.rail-track,.grid) > .card[data-orient="none"] .card-pkg,
:is(.rail-track,.grid) > .card[data-orient="pending"] .card-pkg{width:352px; height:250px; aspect-ratio:auto !important;}
#fp.fp{
  position:fixed; inset:auto; z-index:160; box-sizing:border-box; width:864px; max-width:calc(100vw - 32px);
  grid-template-columns:440px minmax(0,1fr); gap:0 18px; padding:20px; transform:none;
}
#fp .fp-pkg,#fp[data-orient] .fp-pkg{
  grid-column:1; grid-row:1 / span 2; box-sizing:border-box; width:440px; height:312px; aspect-ratio:auto;
  margin:0; overflow:hidden;
}
#fp .fp-pkg img{display:block; width:100%; height:100%; object-fit:contain; object-position:center;}
#fp .fp-body{grid-column:2; grid-row:1; min-width:0;}
#fp .fp-acts{grid-column:2; grid-row:2; align-self:end;}
#fp[data-orient="none"] .fp-pkg,#fp[data-orient="pending"] .fp-pkg{width:440px; height:312px; aspect-ratio:auto;}
.wd-hero,.wd-hero.is-landscape,.wd-hero.is-portrait,.wd-hero.has-switch.is-landscape,.wd-hero.has-switch.is-portrait{grid-template-columns:560px minmax(0,1fr); gap:0 32px;}
.wd-pkg-frame,.wd-pkg-frame.is-pending,.wd-pkg-frame.is-noimage{
  box-sizing:border-box; display:block; width:560px; height:396px; min-height:0; aspect-ratio:800 / 565;
  overflow:hidden; position:relative;
}
.wd-pkg-frame img{display:block; width:100%; height:100%; object-fit:contain; object-position:center;}
.wd-pkg-frame.is-pending img{position:absolute; inset:0;}
.wd-hero.has-switch .wd-pkg-frame[data-kind="portrait"],.wd-hero.has-switch .wd-pkg-frame[data-kind="landscape"]{width:560px; margin:0;}

@media (min-width:861px) and (max-width:927px){
  #fp.fp{grid-template-columns:minmax(0,1fr); width:calc(100vw - 32px); max-height:calc(100vh - 32px); overflow:auto;}
  #fp .fp-pkg,#fp[data-orient] .fp-pkg{grid-column:1; grid-row:1; width:min(440px,100%); height:auto; aspect-ratio:800 / 567;}
  #fp .fp-body{grid-column:1; grid-row:2; margin-top:14px;}
  #fp .fp-acts{grid-column:1; grid-row:3;}
}
@media (hover:none), (max-width:860px){
  .rail-track{gap:0 12px;}
  :is(.rail-track,.grid) > .card{flex-basis:calc(100vw - 64px); width:calc(100vw - 64px); min-width:calc(100vw - 64px); height:auto; min-height:0; overflow:visible;}
  :is(.rail-track,.grid) > .card .card-link{width:100%;}
  :is(.rail-track,.grid) > .card .card-pkg,:is(.rail-track,.grid) > .card[data-orient] .card-pkg{
    width:100%; height:auto; aspect-ratio:800 / 565 !important; overflow:hidden;
  }
  :is(.rail-track,.grid) > .card .card-pkg img{position:absolute; inset:0; width:100%; height:100%;}
  :is(.rail-track,.grid) > .card .card-title{min-height:48px; max-height:48px; margin:8px 12px 0;}
  :is(.rail-track,.grid) > .card .card-cast{margin:5px 12px 0;}
  :is(.rail-track,.grid) > .card .card-maker{margin:3px 12px 0;}
  :is(.rail-track,.grid) > .card .card-info{flex:0 0 auto; min-height:0; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; margin:8px 12px 12px; padding:8px 0 0;}
  :is(.rail-track,.grid) > .card .card-quick{grid-column:1 / -1; width:100%; min-width:0; height:44px; min-height:44px; margin:0; padding:0 10px; font-size:13px;}
  :is(.rail-track,.grid) > .card .card-quick > span:not(.card-quick-mark){position:static; width:auto; height:auto; overflow:visible; clip-path:none;}
  #fp.fp{position:fixed; inset:auto 0 0; z-index:180; width:100%; max-width:none; max-height:85vh; overflow:auto; display:grid; grid-template-columns:minmax(0,1fr); gap:10px; padding:16px 20px calc(20px + env(safe-area-inset-bottom,0px));}
  #fp .fp-pkg,#fp[data-orient] .fp-pkg{grid-column:1; grid-row:1; width:min(100%,440px); height:auto; aspect-ratio:800 / 567; margin:0 auto;}
  #fp .fp-body{grid-column:1; grid-row:2; min-width:0;}
  #fp .fp-acts{grid-column:1; grid-row:3;}
  .wd-hero,.wd-hero.is-landscape,.wd-hero.is-portrait,.wd-hero.has-switch.is-landscape,.wd-hero.has-switch.is-portrait{grid-template-columns:minmax(0,1fr); gap:12px 0;}
  .wd-pkg-frame,.wd-pkg-frame.is-pending,.wd-pkg-frame.is-noimage{width:min(100%,calc(100vw - 40px)); height:auto; aspect-ratio:800 / 565;}
  .wd-pkg-frame img{position:absolute; inset:0; width:100%; height:100%;}
  .wd-hero.has-switch .wd-pkg-frame[data-kind="portrait"],.wd-hero.has-switch .wd-pkg-frame[data-kind="landscape"]{width:min(100%,calc(100vw - 40px));}
  .wd-pkg-tabs{width:min(100%,calc(100vw - 40px));}
}

/* v1.8.4: listing cards share the shelf geometry; columns follow available width. */
.grid{grid-template-columns:repeat(auto-fill,352px); gap:24px;}
@media (min-width:861px) and (max-width:1000px){
  body[data-page="listing"] .header-inner{flex-wrap:wrap; row-gap:8px; padding-top:8px; padding-bottom:8px;}
}
@media (hover:none), (max-width:860px){
  .grid{grid-template-columns:minmax(0,1fr); gap:24px;}
  .grid > .card{width:min(100%,calc(100vw - 64px)); min-width:0;}
}

/* v1.8.5: three large landscape packages fill the desktop content width. */
@media (hover:hover) and (min-width:861px){
  :root{--shelf-columns:3; --shelf-card-width:calc((min(var(--wrap),100vw) - var(--pad) * 2 - 48px) / 3);}
  .grid{grid-template-columns:repeat(var(--shelf-columns),minmax(0,1fr));}
  :is(.rail-track,.grid) > .card{
    flex-basis:var(--shelf-card-width); width:var(--shelf-card-width); min-width:var(--shelf-card-width);
    height:calc(var(--shelf-card-width) * 565 / 800 + 168px);
  }
  :is(.rail-track,.grid) > .card .card-pkg,
  :is(.rail-track,.grid) > .card[data-orient] .card-pkg{
    width:var(--shelf-card-width); height:calc(var(--shelf-card-width) * 565 / 800); aspect-ratio:auto !important;
  }
}
@media (hover:hover) and (min-width:861px) and (max-width:1159px){
  :root{--shelf-columns:2; --shelf-card-width:calc((min(var(--wrap),100vw) - var(--pad) * 2 - 24px) / 2);}
}

/* v1.8.6: usable filter controls without changing card geometry. */
.filter-foot{position:sticky; bottom:0; background:var(--surface); z-index:2;}
.listing-empty{grid-column:1 / -1;}
.ck:has(input:disabled){cursor:default; color:var(--ink-mute);}
@media(max-width:860px){.filter-panel{z-index:190;}.filter-back{z-index:189;}}