@charset "utf-8";
/* ツギドレ 作品詳細ページ（第1回）
   基準デザイン：案3「無機質なグリッド」＝ Phase1第8.1回／Phase2第3.1回
   無彩色・角丸なし・細い罫線・左揃え・グリッド・黒地の主要ボタン。
   色の変数・文字種・ボタン・ヘッダー・フッターは styles.css をそのまま使う。
   このファイルは作品詳細と状態確認ページで足りない部分だけを持つ。
   work.html と work-states.html だけが読み込む（一覧・ホームには影響しない）。 */

/* ---------- 画面上部の告知（・JavaScript無効・データの時点） ---------- */
.wd-banner{
  margin:0; padding:10px 14px;
  border-left:2px solid var(--ink); background:var(--surface);
  font-size:13px; line-height:1.75; color:var(--ink-soft);
}
.wd-banner + .wd-banner{margin-top:8px;}
.wd-banner strong{color:var(--ink);}
.wd-banner a{color:var(--ink);}
.wd-banners{padding:14px 0 0;}

/* ---------- 全体の枠 ---------- */
.wd{padding:18px 0 48px;}
.wd-sec{padding:26px 0 0; margin-top:26px; border-top:1px solid var(--line);}
.wd-sec > h2{
  margin:0 0 4px; font-size:18px; font-weight:700; line-height:1.6;
}
.wd-sec > .wd-sec-sub{
  margin:0 0 16px; font-size:13px; line-height:1.8; color:var(--ink-mute); max-width:44em;
}
.wd-sec > .wd-sec-sub:last-child{margin-bottom:0;}

/* ---------- 主要情報（PCは2カラム／スマホは縦積み） ---------- */
.wd-hero{
  display:grid; grid-template-columns:400px minmax(0,1fr); gap:0 44px;
  align-items:start; padding:20px 0 6px;
}
.wd-pkg{margin:0; position:relative;}
/* 枠の比率を先に確保する。画像の有無で高さが変わらない */
.wd-pkg-frame{
  position:relative; display:block; width:400px; max-width:100%;
  aspect-ratio:var(--pkg-ratio);
  border:1px solid var(--line); background:var(--surface);
}
.wd-pkg-frame img{display:block; width:100%; height:100%; object-fit:contain; object-position:center;}
.wd-pkg-flag{
  position:absolute; left:0; top:0;
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; line-height:1;
  padding:7px 9px; background:var(--ink); color:var(--surface);
}
/* 画像が無い／取得できていないときの代替。文字と枠だけで作る */
.wd-pkg-alt{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:flex-start; justify-content:space-between; padding:16px;
  background:var(--surface);
}
/* 画像がある状態と見分けられるよう、代替表示の側にだけ出す印 */
.wd-alt-noimg{
  align-self:flex-end; font-family:var(--mono); font-size:11px; letter-spacing:.16em;
  line-height:1; padding:6px 8px; border:1px solid var(--ink-mute); color:var(--ink-mute);
}
/* 画像が無い枠は、罫線を破線にして一覧のカードとも見分けられるようにする */
.wd-pkg-frame.is-noimage{border-style:dashed; border-color:var(--ink-mute);}
.wd-pkg-alt .wd-alt-init{
  font-family:var(--mono); font-size:56px; line-height:1; color:var(--ink);
  border:1px solid var(--ink); padding:14px 18px; margin-top:auto;
}
.wd-pkg-alt .wd-alt-msg{
  margin:auto 0 0; font-size:12.5px; line-height:1.7; color:var(--ink-mute);
}
.wd-pkg-cap{margin:8px 0 0; font-size:12px; line-height:1.7; color:var(--ink-mute);}

.wd-main{min-width:0;}
.wd-title{margin:0 0 12px; font-size:27px; line-height:1.55; font-weight:700;}
.wd-meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px;
  margin:0 0 18px; font-size:14.5px; line-height:1.8; color:var(--ink-soft);
}
.wd-meta .wd-meta-k{font-size:12px; color:var(--ink-mute);}
.wd-meta a{color:var(--ink);}
.wd-meta .wd-sep{color:var(--line);}
/* 状態は色だけで表さない。必ず文字で書く */
.wd-state{
  display:inline-flex; align-items:center; font-family:var(--mono);
  font-size:11.5px; letter-spacing:.1em; line-height:1;
  padding:6px 9px; border:1px solid var(--ink); color:var(--ink);
}
.wd-state-ended{background:var(--ink); color:var(--surface);}
.wd-state-unknown{border-color:var(--line); color:var(--ink-mute);}

/* ---------- 価格の要約 ---------- */
.wd-sum{border:1px solid var(--ink); background:var(--surface); padding:16px 18px; margin:0 0 18px;}
.wd-sum-k{display:block; font-family:var(--mono); font-size:11px; letter-spacing:.16em; color:var(--ink-mute); margin-bottom:6px;}
.wd-sum-row{display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 12px;}
.wd-sum-now{font-size:26px; font-weight:700; line-height:1.3; color:var(--ink);}
.wd-sum-reg{font-size:13.5px; color:var(--ink-mute); text-decoration:line-through;}
.wd-sum-off{font-size:12px; line-height:1; padding:5px 7px; background:var(--ink); color:var(--surface); font-family:var(--mono); letter-spacing:.08em;}
.wd-sum-left{font-size:12px; line-height:1; padding:4px 7px; border:1px solid var(--ink); color:var(--ink);}
.wd-sum-none{font-size:16px; font-weight:700; color:var(--ink);}
.wd-sum-note{margin:8px 0 0; font-size:12.5px; line-height:1.75; color:var(--ink-mute);}
.wd-sum-more{margin:8px 0 0; font-size:12.5px; line-height:1.75;}
.wd-sum-more a{color:var(--ink);}

/* ---------- FANZAへの導線 ---------- */
.wd-cta{margin:0 0 10px;}
.wd-cta .btn{min-width:min(100%,420px);}
.wd-cta-off{
  border:1px solid var(--line); background:var(--surface); padding:14px 16px;
  font-size:14px; line-height:1.85; color:var(--ink-soft); margin:0;
}
.wd-cta-off strong{display:block; color:var(--ink); font-size:15px; margin-bottom:4px;}
.wd-cta{margin-bottom:18px;}

/* 広告であることの表示。長い説明文をやめ、CTAの中の枠付き「PR」だけで示す。
   ・リンクの内側に置くので、読み上げの名前は「PR FANZAの販売ページへ進む」になる
   ・色はボタンの文字色そのまま（currentColor）。薄い色にしない
   ・角丸なし・無彩色・1pxの罫線という全体のデザインに合わせる */
.wd-pr{
  flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
  min-width:30px; height:20px; padding:0 6px; margin-right:10px;
  border:1px solid currentColor; border-radius:0;
  font-size:12px; font-weight:700; letter-spacing:.12em; line-height:1;
}
.wd-cta-label{display:inline-block;}
.wd-cta-go{white-space:normal;}

/* ---------- 興味あり／なし（この試作では保存しない） ---------- */
.wd-interest{border-top:1px solid var(--line-soft); padding:16px 0 0; margin:0 0 20px;}
.wd-interest-h{margin:0 0 10px; font-size:13px; font-weight:700; color:var(--ink);}
.wd-int-btns{display:flex; flex-wrap:wrap; gap:0; border:1px solid var(--line);}
.wd-int{
  flex:1 1 auto; min-height:48px; min-width:44px; padding:0 16px;
  border:0; border-right:1px solid var(--line); background:transparent;
  font:inherit; font-size:13.5px; color:var(--ink-soft); cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
}
.wd-int:last-child{border-right:0;}
.wd-int:hover{background:var(--surface); color:var(--ink);}
.wd-int[aria-pressed="true"]{background:var(--ink); color:var(--surface); font-weight:700;}
.wd-int[disabled]{opacity:.45; cursor:default;}
.wd-int[disabled]:hover{background:transparent; color:var(--ink-soft);}
.wd-int-state{margin:10px 0 0; font-size:12.5px; line-height:1.75; color:var(--ink-mute);}
.wd-int-state strong{color:var(--ink);}

/* ---------- 基本情報の表 ---------- */
.wd-kv{margin:0; border-top:1px solid var(--line);}
.wd-kv-row{
  display:grid; grid-template-columns:150px minmax(0,1fr); gap:0 20px;
  padding:11px 0; border-bottom:1px solid var(--line-soft); align-items:baseline;
}
.wd-kv dt{margin:0; font-size:13px; color:var(--ink-mute);}
.wd-kv dd{margin:0; font-size:14.5px; line-height:1.85; color:var(--ink); min-width:0;}
.wd-kv dd a{color:var(--ink);}
.wd-kv .wd-kv-mute{color:var(--ink-mute); font-size:13px;}

/* ---------- 分類・特徴のリンク ---------- */
.wd-chips{display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:0; padding:0;}
.wd-chips li{display:block;}
.wd-chip{
  display:inline-flex; align-items:center; min-height:38px; padding:0 12px;
  border:1px solid var(--line); background:var(--surface);
  font-size:13.5px; line-height:1.5; color:var(--ink); text-decoration:none;
}
.wd-chip:hover{border-color:var(--ink); background:var(--bg);}
.wd-chip-plain{color:var(--ink-mute); background:transparent; cursor:default;}
/* ツギドレ独自の特徴。公式分類と混同しないよう左の太い罫線で区別する */
.wd-chip-feat{border-left:3px solid var(--ink);}
.wd-chips-inline{gap:6px;}
.wd-chips-inline .wd-chip{min-height:34px; padding:0 10px; font-size:13px;}

/* ---------- 価格・販売形式の表 ---------- */
.wd-tablewrap{overflow-x:auto; -webkit-overflow-scrolling:touch; border-top:1px solid var(--line);}
.wd-table{width:100%; border-collapse:collapse; font-size:13.5px;}
.wd-table caption{text-align:left; font-size:12.5px; color:var(--ink-mute); padding:0 0 10px;}
.wd-table th,.wd-table td{
  padding:11px 14px 11px 0; text-align:left; vertical-align:top;
  border-bottom:1px solid var(--line-soft); line-height:1.7;
}
.wd-table thead th{
  font-size:12px; color:var(--ink-mute); font-weight:400; white-space:nowrap;
  border-bottom:1px solid var(--line);
}
.wd-table tbody th{font-weight:700; color:var(--ink); font-size:13.5px;}
.wd-table .wd-num{white-space:nowrap;}
.wd-table .wd-strike{color:var(--ink-mute); text-decoration:line-through;}
.wd-table .wd-sale{font-weight:700;}
.wd-table .wd-none{color:var(--ink-mute);}
.wd-table .wd-fmtnote{display:block; margin-top:4px; font-size:12px; color:var(--ink-mute);}
.wd-tnote{margin:12px 0 0; font-size:12.5px; line-height:1.8; color:var(--ink-mute); max-width:46em;}
.wd-desc{margin:0; font-size:14.5px; line-height:1.95; color:var(--ink-soft); max-width:40em;}

/* ---------- 価格の推移 ---------- */
.wd-hist + .wd-hist{margin-top:26px; padding-top:22px; border-top:1px solid var(--line-soft);}
.wd-hist-h{margin:0 0 10px; font-size:14.5px; font-weight:700;}
.wd-spark{
  display:block; width:100%; max-width:560px; height:auto;
  border:1px solid var(--line); background:var(--surface); margin:0 0 12px;
}
.wd-hist-note{margin:0 0 12px; font-size:12.5px; line-height:1.8; color:var(--ink-mute);}

/* ---------- 推薦理由 ---------- */
.wd-reasons{list-style:none; margin:0; padding:0; border-top:1px solid var(--line);}
.wd-reasons li{
  display:grid; grid-template-columns:200px minmax(0,1fr); gap:0 20px;
  padding:12px 0; border-bottom:1px solid var(--line-soft); align-items:baseline;
}
.wd-reason-k{font-size:13.5px; font-weight:700; color:var(--ink);}
.wd-reason-v{font-size:13px; line-height:1.8; color:var(--ink-mute);}

/* ---------- 関連作品 ---------- */
.wd-rel{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:26px var(--card-gap);
  list-style:none; margin:0; padding:0;
}
.wd-rc{display:block; text-decoration:none; color:inherit;}
.wd-rc-why{
  display:inline-block; margin:0 0 8px; font-family:var(--mono);
  font-size:10.5px; letter-spacing:.1em; line-height:1;
  padding:5px 7px; border:1px solid var(--line); color:var(--ink-mute);
}
.wd-rc-pkg{
  display:block; position:relative; border:1px solid var(--line); background:var(--surface);
  aspect-ratio:var(--pkg-ratio);
}
.wd-rc-pkg img{display:block; width:100%; height:100%; object-fit:contain; object-position:center;}
.wd-rc-flag{
  position:absolute; left:0; top:0; font-family:var(--mono); font-size:10.5px;
  letter-spacing:.14em; line-height:1; padding:6px 8px; background:var(--ink); color:var(--surface);
}
.wd-rc-title{
  display:-webkit-box; margin:10px 0 4px; font-size:14.5px; line-height:1.6; font-weight:700;
  color:var(--ink); min-height:3em; overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:2;
}
.wd-rc-cast{display:block; font-size:12.5px; line-height:1.6; color:var(--ink-mute);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.wd-rc:hover .wd-rc-title{color:var(--slate);}
.wd-rc:focus-visible{outline:2px solid var(--focus); outline-offset:3px;}

/* ---------- 見つからないとき ---------- */
.wd-missing{padding:40px 0 48px; max-width:44em;}
.wd-missing h1{margin:0 0 14px; font-size:26px; line-height:1.5;}
.wd-missing p{margin:0 0 18px; font-size:15px; line-height:1.9; color:var(--ink-soft);}

/* ---------- 確認用の状態表示（?debug=state のときだけ） ---------- */
.wd-debug{border:1px dashed var(--ink-mute); padding:14px 16px; margin:26px 0 0;}
.wd-debug h2{margin:0 0 10px; font-size:14px;}
.wd-debug dl{margin:0; font-size:12.5px; line-height:1.8;}
.wd-debug div{display:grid; grid-template-columns:200px 1fr; gap:0 16px;}
.wd-debug dt{color:var(--ink-mute);}
.wd-debug dd{margin:0; font-family:var(--mono);}

/* ---------- 状態確認ページ ---------- */
.wd-states{list-style:none; margin:0; padding:0; border-top:1px solid var(--line);}
.wd-states li{padding:16px 0; border-bottom:1px solid var(--line-soft);}
.wd-states h3{margin:0 0 4px; font-size:16px; font-weight:700; line-height:1.6;}
.wd-states h3 a{color:var(--ink);}
.wd-states p{margin:0; font-size:14px; line-height:1.85; color:var(--ink-soft); max-width:46em;}
.wd-states .wd-st-no{
  display:inline-block; min-width:2.4em; font-family:var(--mono); font-size:12px;
  letter-spacing:.1em; color:var(--ink-mute);
}

/* ================================================================ スマートフォン */
@media (max-width:860px){
  .wd-hero{grid-template-columns:1fr; gap:16px 0; padding:14px 0 4px;}
  .wd-pkg-frame{width:min(50vw,190px);}
  .wd-pkg-alt{padding:12px;}
  .wd-pkg-alt .wd-alt-init{font-size:34px; padding:10px 12px;}
  .wd-title{font-size:20px; line-height:1.5; margin-bottom:10px;}
  .wd-meta{font-size:13.5px; margin-bottom:14px; gap:6px 10px;}
  .wd-sum{padding:14px 15px;}
  .wd-sum-now{font-size:23px;}
  .wd-cta .btn{width:100%; min-width:0;}
  .wd-sec{padding:22px 0 0; margin-top:22px;}
  .wd-sec > h2{font-size:16.5px;}
  .wd-kv-row{grid-template-columns:1fr; gap:2px; padding:10px 0;}
  .wd-reasons li{grid-template-columns:1fr; gap:2px;}
  .wd-int{flex:1 1 100%; border-right:0; border-bottom:1px solid var(--line);}
  .wd-int:last-child{border-bottom:0;}

  /* 表は横スクロールさせず、1行ずつ縦に積む */
  /* 表はページ全体ではなく、この枠の中だけで横に動く（通常は動かない） */
  .wd-tablewrap{overflow-x:auto; border-top:0;}
  .wd-table,.wd-table tbody,.wd-table tr,.wd-table th,.wd-table td{display:block; width:auto;}
  .wd-table thead{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0);}
  .wd-table tbody tr{border-top:1px solid var(--line); padding:12px 0 4px;}
  .wd-table tbody th{padding:0 0 8px; border-bottom:0; font-size:15px;}
  .wd-table tbody td{
    display:grid; grid-template-columns:7em minmax(0,1fr); gap:0 10px;
    padding:5px 0; border-bottom:0; overflow-wrap:anywhere;
  }
  .wd-table tbody td::before{
    content:attr(data-label); font-size:12px; color:var(--ink-mute); line-height:1.7;
  }
  .wd-rel{grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px var(--card-gap);}
  .wd-debug div{grid-template-columns:1fr;}
}

/* ---------- JavaScriptの有無で出し分ける（html.js は head で付く） ----------
   静的HTMLは1作品分だけを持つ。JavaScriptが動くときは work-detail.js が丸ごと描き直す。 */
.wd-nojs-hide{display:none;}
.js .wd-nojs-hide{display:block;}
.wd-nojs-only{display:block;}
.js .wd-nojs-only{display:none;}

/* ---------- 操作領域を44px以上にそろえる ----------
   参照元（第3.1回）のパンくず40px・検索ボタン40px・フッター項目の幅は変更していない。
   このファイルを読む2ページ（作品詳細・状態一覧）だけで上書きする。
   サイト全体へ適用するかは段階5で判断する。 */
body[data-page="work-detail"] .crumb a,
body[data-page="work-states"] .crumb a{min-height:44px; min-width:44px; justify-content:center;}
body[data-page="work-detail"] .search-go,
body[data-page="work-states"] .search-go{min-height:44px;}
body[data-page="work-detail"] .footer-nav a,
body[data-page="work-states"] .footer-nav a{min-width:44px; justify-content:flex-start;}

.wd-chip{min-height:44px;}
.wd-chips-inline .wd-chip{min-height:44px;}
/* 文中の分類リンクも、押せる高さを確保する */
.wd-meta a,
.wd-kv dd > a{display:inline-flex; align-items:center; min-height:44px;}
.wd-sum-more a{display:inline-flex; align-items:center; min-height:44px;}
/* 告知の中のリンクは、文のあとに独立した1行として置く */
.wd-banner-acts{display:flex; flex-wrap:wrap; gap:8px; margin:8px 0 0;}
.wd-banner-acts a{
  display:inline-flex; align-items:center; min-height:44px; padding:0 12px;
  border:1px solid var(--line); background:var(--bg); font-size:12.5px;
  color:var(--ink); text-decoration:none;
}
.wd-banner-acts a:hover{border-color:var(--ink);}

/* ---------- スマホで主要情報を上へ寄せる ----------
   依頼の「パッケージは大きく」と「タイトル・価格・ボタンを初期表示付近に」は
   同じ縦位置を取り合う。ここでは余白と行数だけを詰め、情報は削っていない。 */
@media (max-width:860px){
  /* 長い作品名でパンくずが2行になるのを避ける */
  body[data-page="work-detail"] .crumb-inner{flex-wrap:nowrap; overflow:hidden;}
  body[data-page="work-detail"] .crumb a{white-space:nowrap; flex:0 0 auto;}
  body[data-page="work-detail"] #wdCrumb{
    min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .wd-banners{padding:10px 0 0;}
  .wd{padding:10px 0 40px;}
  .wd-hero{padding:10px 0 4px; gap:12px 0;}
  /* 一覧のカード（236px）と同じ大きさにそろえ、詳細のパッケージを主役にする */
  .wd-pkg-frame{width:min(60.5vw,236px);}
  .wd-pkg{display:flex; flex-direction:column; align-items:center;}
  .wd-pkg-cap{text-align:center; max-width:236px;}
  .wd-pkg-cap{margin-top:6px; font-size:11.5px; line-height:1.6;}
  /* スマホでは上の告知とパッケージの印と重なるので、この1行は省く */
  .wd-main .eyebrow{display:none;}
  .wd-meta{gap:4px 10px; margin-bottom:10px;}
  .wd-sum{padding:12px 14px; margin-bottom:14px;}
  .wd-sum-note{margin-top:6px;}
  .wd-sum-more{margin-top:4px;}
}

/* ---------- スマホの追従CTA ----------
   常時は出さない。本文のCTAが画面の上へ通り過ぎたときだけ JavaScript が hidden を外す。
   画面下部を覆いすぎないよう1行だけにする。PCでは使わない。 */
.wd-sticky{
  position:fixed; left:0; right:0; bottom:0; z-index:65;
  background:var(--bg); border-top:1px solid var(--ink);
  padding:8px 0 calc(8px + env(safe-area-inset-bottom, 0px));
  display:none;
}
.wd-sticky[hidden]{display:none !important;}
.wd-sticky-inner{display:flex; align-items:center; gap:12px;}
.wd-sticky .btn{flex:1 1 auto; min-height:48px; width:auto; padding:0 16px; font-size:14px;}
.wd-sticky .wd-pr{margin-right:8px;}
@media (max-width:860px){
  .wd-sticky:not([hidden]){display:block;}
  /* 追従CTAが出ているあいだ、最後の節が隠れないように余白を足す */
  body[data-page="work-detail"] .site-footer{padding-bottom:88px;}
}