/* ============================================================
   CLL JAPAN — 記事ページ 白背景版（single-v2.css）
   DAY99 新規作成

   ■ 位置づけ
     旧 single.css は無改変のまま残す。あちらは About / AI Pick が
     引き続き使用しており、本ファイルは is_single() のみに読み込まれる。
     ロールバックは functions.php の enqueue 分岐を戻すだけで完了する。

   ■ 色の出典
     すべてモックアップ（cll_pc_mock / cll_sp_mock / cll_sp_fixednav）から採取。
     値は assets/css/variables.css のトークンを参照し、直書きしない。
     ⚠️ 本ファイルは :root を持たない。variables.css（wp_head priority 1）が
        全ページに供給する白系トークンをそのまま使う。これが「白化の1本目」。

   ■ 構成
     1. ベース / レイアウト
     2. 記事タイトル
     3. ヒーロー画像
     4. どのフェチに刺さる動画か
     5. 情報ボックス共通（分類 / 詳細）
     6. CLL レビュー
     7. VPN CTA
     8. 関連動画
     9. コメント欄
    10. フッター
    11. レスポンシブ（768px以上 = PC）
============================================================ */


/* ------------------------------------------------------------
   1. ベース / レイアウト
------------------------------------------------------------ */
body {
  background:             var(--bg-primary);
  color:                  var(--text-primary);
  font-family:            var(--font-main);
  line-height:            1.8;
  -webkit-font-smoothing: antialiased;
}

/* WordPress / 親テーマのデフォルト要素を抑止
   （用途：Hello Elementor と WP 標準スタイルへの防御的上書き。§32-3 の方針に従い残す） */
.site-header,
.site-branding,
.entry-title,
.page-title { display: none !important; }

#article-wrapper {
  max-width: 980px;
  margin:    0 auto;
  padding:   0 18px 80px;
}


/* ------------------------------------------------------------
   2. 記事タイトル
------------------------------------------------------------ */
#article-header {
  padding-top: 20px;
}
.article-title {
  font-size:      24px;
  font-weight:    700;
  line-height:    1.45;
  color:          var(--text-primary);
  border-bottom:  1px solid var(--border-light);
  padding-bottom: 12px;
  margin:         0 0 16px;
}
/* カテゴリー（女優名）バッジ */
.article-category {
  display:         inline-block;
  font-size:       12px;
  font-weight:     700;
  color:           var(--accent);
  text-decoration: none;
  margin-bottom:   8px;
}
.article-category:hover { text-decoration: underline; }

/* バイライン（レーベル｜品番） */
.cll-byline {
  font-size: 13px;
  color:     var(--text-secondary);
  margin:    0 0 16px;
}


/* ------------------------------------------------------------
   3. ヒーロー画像（パッケージ画像）
   モックの金枠 3px はブランドのサイン要素として維持する。
------------------------------------------------------------ */
.article-thumbnail {
  border:     3px solid var(--gold);
  background: var(--bg-placeholder);
  margin:     0 0 16px;
  line-height: 0;
}
.article-thumbnail img {
  width:   100%;
  height:  auto;
  display: block;
}


/* ------------------------------------------------------------
   4. どのフェチに刺さる動画か
------------------------------------------------------------ */
#cll-fetish-hook {
  background: var(--bg-panel);
  padding:    16px;
  margin:     0 0 16px;
}
.cll-fh-title {
  font-size:     16px;
  font-weight:   700;
  color:         var(--text-primary);
  text-align:    center;
  margin:        0 0 10px;
}
.cll-fh-chips {
  display:         flex;
  flex-wrap:       wrap;
  gap:             8px;
  justify-content: center;
  margin-bottom:   10px;
}
.cll-fh-chip {
  background:      var(--bg-card);
  border:          1px solid #d7c48a;
  color:           #8a6d1a;
  border-radius:   14px;
  padding:         3px 12px;
  font-size:       13px;
  text-decoration: none;
  transition:      border-color var(--transition), color var(--transition);
}
.cll-fh-chip:hover {
  border-color: var(--accent);
  color:        var(--accent);
}
.cll-fh-text {
  font-size:   14px;
  color:       #444444;
  line-height: 1.85;
  margin:      0;
}
.cll-fh-text p { margin: 0 0 8px; }
.cll-fh-text p:last-child { margin-bottom: 0; }


/* ------------------------------------------------------------
   5. 情報ボックス共通（この作品の分類 / 動画の詳細）
------------------------------------------------------------ */
.cll-box {
  border:        1px solid var(--border);
  margin-bottom: 16px;
  background:    var(--bg-card);
}
.cll-box-head {
  font-weight:   700;
  font-size:     15px;
  padding:       10px 14px;
  background:    var(--bg-placeholder);
  border-bottom: 1px solid var(--border);
  color:         var(--text-primary);
}
.cll-box table {
  width:           100%;
  border-collapse: collapse;
}
.cll-box td {
  padding:       9px 14px;
  font-size:     15px;
  border-bottom: 1px solid var(--border-table);
  vertical-align: top;
}
.cll-box tr:last-child td { border-bottom: none; }
.cll-box td.cll-k {
  color:      var(--text-secondary);
  width:      38%;
  background: var(--bg-subtle);
  font-size:  14px;
}
.cll-box td.cll-v { color: var(--text-primary); }
.cll-box td.cll-v a {
  color:           var(--accent-blue);
  text-decoration: none;
}
.cll-box td.cll-v a:hover { text-decoration: underline; }

/* 値なしの行 */
.cll-box tr.cll-empty td.cll-v { color: var(--text-faint); }

/* 分類タグのセパレータ（複数選択軸） */
.cll-v-sep { color: var(--text-faint); padding: 0 2px; }

/* 「この組み合わせは他に◯本 →」帯
   ⚠️ DAY99時点では出力していない（cll_related_json 未計算のため）。
      隣接ナビを結線したら表示条件を外すこと。 */
.cll-box-note {
  margin:    0 14px 12px;
  font-size: 13px;
  background: var(--bg-panel);
  padding:   6px 10px;
  color:     var(--accent-blue);
}
.cll-box-note a { color: var(--accent-blue); text-decoration: none; }
.cll-box-note a:hover { text-decoration: underline; }


/* ------------------------------------------------------------
   6. CLL レビュー
------------------------------------------------------------ */
#cll-review {
  margin:     0 0 16px;
  padding:    18px;
  background: var(--bg-panel);
  font-size:  15px;
  color:      var(--text-primary);
}
#cll-review .cll-rev-title {
  font-size:   16px;
  font-weight: 700;
  text-align:  center;
  margin:      0 0 12px;
}
#cll-review .cll-body-i18n p { margin: 0 0 12px; line-height: 1.85; }
#cll-review .cll-body-i18n p:last-child { margin-bottom: 0; }
#cll-review .cll-body-i18n h2 {
  font-size:   15px;
  font-weight: 700;
  margin:      18px 0 8px;
  color:       var(--text-primary);
}
#cll-review .cll-pr-note {
  font-size: 12px;
  color:     var(--text-muted);
}
#cll-review .cll-affiliate-link a {
  color:           var(--accent-blue);
  text-decoration: none;
  font-weight:     600;
}
#cll-review .cll-affiliate-link a:hover { text-decoration: underline; }
#cll-review .cll-affiliate-widget { margin: 12px 0; }

/* スコア（cll_score_overall が入っている記事のみ表示される） */
.cll-rev-scores {
  display:        flex;
  align-items:    center;
  gap:            14px;
  justify-content: center;
  border-bottom:  1px solid var(--border);
  padding-bottom: 12px;
  margin-bottom:  14px;
  flex-wrap:      wrap;
}
.cll-rev-num {
  font-size:   32px;
  font-weight: 800;
  line-height: 1;
  color:       var(--accent);
}
.cll-rev-num span {
  font-size:   14px;
  font-weight: 600;
  color:       var(--text-muted);
}
.cll-starbar { position: relative; display: inline-block; white-space: nowrap; }
.cll-starbar-base { color: var(--border); letter-spacing: 2px; }
.cll-starbar-fill {
  position: absolute;
  top: 0; left: 0;
  overflow: hidden;
  color: var(--gold);
  letter-spacing: 2px;
}


/* ------------------------------------------------------------
   7. VPN CTA
   ⚠️ モックには存在しないが、記事ページ唯一のNordVPN導線のため残置（事業判断）。
      白背景に合わせて再配色。リンク生成はPHP側（言語別サブディレクトリ）。
------------------------------------------------------------ */
#cta-vpn {
  margin:        0 0 16px;
  border:        1px solid var(--border);
  background:    var(--bg-card);
  overflow:      hidden;
}
#cta-vpn .vpn-topbar {
  height:     3px;
  width:      100%;
  background: var(--accent-blue);
}
#cta-vpn .vpn-inner { padding: 16px; }
#cta-vpn .cta-vpn-badge {
  display:        inline-block;
  font-size:      10px;
  font-weight:    700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color:          var(--accent-blue);
  margin-bottom:  4px;
}
#cta-vpn .cta-vpn-title {
  font-size:   17px;
  font-weight: 700;
  color:       var(--text-primary);
  margin:      0 0 8px;
  line-height: 1.35;
}
#cta-vpn .cta-vpn-desc {
  font-size:   13px;
  color:       var(--text-secondary);
  line-height: 1.7;
  margin:      0 0 14px;
}
#cta-vpn .vpn-feats {
  display:       flex;
  flex-direction: column;
  gap:           8px;
  margin-bottom: 16px;
}
#cta-vpn .vpn-feat {
  font-size: 13px;
  color:     var(--text-secondary);
  padding-left: 16px;
  position: relative;
}
#cta-vpn .vpn-feat::before {
  content:  "\2713";
  position: absolute;
  left:     0;
  color:    var(--accent-blue);
  font-weight: 700;
}
#cta-vpn .cta-vpn-btn {
  display:         block;
  width:           100%;
  box-sizing:      border-box;
  background:      var(--accent-blue);
  color:           #ffffff;
  font-size:       15px;
  font-weight:     700;
  padding:         14px 20px;
  text-align:      center;
  text-decoration: none;
  border-radius:   var(--radius-sm);
  transition:      opacity var(--transition);
}
#cta-vpn .cta-vpn-btn:hover { opacity: 0.88; }
#cta-vpn .cta-vpn-note {
  font-size:  11px;
  color:      var(--text-muted);
  margin:     8px 0 0;
  text-align: center;
}


/* ------------------------------------------------------------
   8. 関連動画
------------------------------------------------------------ */
#cll-related {
  margin:     0 0 16px;
  padding:    18px;
  background: var(--bg-panel);
}
.cll-rel-title {
  font-size:   16px;
  font-weight: 700;
  color:       var(--text-primary);
  margin:      0 0 12px;
}
.cll-rel-grid {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   10px;
}
.cll-rel-card {
  display:         flex;
  gap:             12px;
  background:      var(--bg-card);
  border:          1px solid var(--border);
  padding:         10px;
  text-decoration: none;
  transition:      border-color var(--transition);
}
.cll-rel-card:hover { border-color: var(--accent); }
.cll-rel-thumb {
  width:      120px;
  height:     84px;
  flex:       none;
  background: var(--bg-placeholder);
  border:     1px solid var(--border-light);
  overflow:   hidden;
}
.cll-rel-thumb img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
}
.cll-rel-name {
  font-size:   14px;
  font-weight: 700;
  line-height: 1.5;
  color:       var(--text-primary);
  margin:      0;
}
.cll-rel-meta {
  font-size: 12px;
  color:     var(--text-secondary);
  margin:    4px 0 0;
}


/* ------------------------------------------------------------
   9. コメント欄
------------------------------------------------------------ */
#comments {
  margin-top:    20px;
  border-top:    1px solid var(--border-light);
  padding-top:   16px;
}
#comments .comment-reply-title,
#comments .comments-title {
  font-size:   17px;
  font-weight: 700;
  color:       var(--text-primary);
  margin:      0 0 6px;
}
#comments .comment-notes,
#comments .logged-in-as {
  font-size: 13px;
  color:     var(--text-muted);
  margin:    6px 0 10px;
}
#comments textarea,
#comments input[type="text"],
#comments input[type="email"],
#comments input[type="url"] {
  width:         100%;
  box-sizing:    border-box;
  border:        1px solid #cccccc;
  border-radius: var(--radius-sm);
  padding:       10px;
  font-size:     14px;
  font-family:   var(--font-main);
  color:         var(--text-primary);
  background:    var(--bg-card);
  margin-bottom: 10px;
}
#comments textarea { min-height: 110px; }
#comments .form-submit input[type="submit"] {
  background:    var(--accent);
  color:         #ffffff;
  border:        none;
  border-radius: var(--radius-sm);
  padding:       11px 26px;
  font-size:     14px;
  font-weight:   700;
  cursor:        pointer;
}
#comments .form-submit input[type="submit"]:hover { background: var(--accent-hover); }
#comments .comment-list {
  list-style: none;
  margin:     0 0 20px;
  padding:    0;
}
#comments .comment-list li {
  border-bottom: 1px solid var(--border-light);
  padding:       12px 0;
}
#comments .comment-author {
  font-size:   13px;
  font-weight: 700;
  color:       var(--text-primary);
}
#comments .comment-meta {
  font-size: 12px;
  color:     var(--text-muted);
}




/* ------------------------------------------------------------
   11. レスポンシブ（768px以上 = PC）
------------------------------------------------------------ */
@media (min-width: 768px) {

  #article-wrapper { padding: 0 24px 100px; }

  .article-title { font-size: 28px; }

  /* 「この作品の分類」と「動画の詳細」を横並びに */
  .cll-box-row {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   20px;
    align-items:           start;
  }

  .cll-fh-text { font-size: 15px; }

  .cll-rel-grid { grid-template-columns: 1fr 1fr; }

}
/* ============================================================
   SP固定ボトムナビ — DAY102 / 統合マスター §116-2（DAY100確定仕様）

   ■ 設計ルール
     - 変数は .cll-bnav スコープに閉じる。:root には一切足さない。
       （§117-4 の恒久ルール。fetish-search.css の :root で記事ページを
        道連れ暗転させた DAY101④ の事故と同型を作らないため）
     - グローバルトークンは var(--x, フォールバック) で参照する。
       variables.css が読まれない状況でも単体で破綻しない。
     - button のブラウザ既定スタイルはこのコンポーネント内で明示的に打ち消す。
       （DAY67「ピンク枠・押下時ピンク背景」＝ category.css に button リセットが
        無かった事故。グローバルなリセットの有無に依存しない）
     - SPのみ表示。769px以上ではPC側のナビが担当するため非表示。
       ブレークポイント 768px は top.css / top-v2.css と統一。

   ■ 挙動は inc/bottom-nav-scripts.php（全ページ出力）が担当。
     このCSSは見た目のみを持つ。
   ============================================================ */

/* PCでは出さない（既定で非表示にし、SPでのみ display を与える） */
.cll-bnav {
  display: none;
}

@media (max-width: 768px) {

  .cll-bnav {
    /* --- コンポーネント固有の値。ここから外へは出さない --- */
    --bnav-height: 56px;
    --bnav-bg:     var(--bg-primary,     #ffffff);
    --bnav-border: var(--border,         #dddddd);
    --bnav-text:   var(--text-secondary, #666666);
    --bnav-active: var(--accent,         #b3141b);

    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;

    /* iPhone のホームインジケータ領域ぶんを内側に確保する。
       env() 未対応ブラウザでは 0px にフォールバックし高さは 56px のまま */
    height: calc(var(--bnav-height) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    margin: 0;

    background: var(--bnav-bg);
    border-top: 1px solid var(--bnav-border);
    box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.06);

    /* variables.css の階層定義。--z-elevated は「ページネーション・ボトムナビ」用 */
    z-index: var(--z-elevated, 100);
  }

  .cll-bnav__item {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;

    /* --- button の既定スタイルを打ち消す（DAY67の再発防止） --- */
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
    font: inherit;

    font-size: 10px;
    line-height: 1;
    letter-spacing: 0;
    color: var(--bnav-text);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color var(--transition, 0.18s ease);
  }

  .cll-bnav__icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
  }

  /* ラベルは13言語で長さが変わる。はみ出しを起こさず省略する */
  .cll-bnav__label {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* アクティブ（現在地）＝赤。初期状態ではどのボタンにも付けない。
     TOP・検索ページへ展開する際にサーバー側判定で is-active を付与する */
  .cll-bnav__item.is-active {
    color: var(--bnav-active);
  }

  /* 押下フィードバック */
  .cll-bnav__item:active {
    color: var(--bnav-active);
  }

  /* キーボード操作時の可視フォーカス */
  .cll-bnav__item:focus-visible {
    outline: 2px solid var(--bnav-active);
    outline-offset: -2px;
  }

  /* 固定バーに本文末尾（コメント欄・フッター）が隠れないよう下端に逃げを作る。
     .cll-bnav のローカル変数はここからは参照できないため 56px を直書きする */
  body.single {
    padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
  }
}

/* 動きを減らす設定を尊重する */
@media (prefers-reduced-motion: reduce) {
  .cll-bnav__item {
    transition: none;
  }
}
/* ============================================
   コメント募集の呼びかけ（DAY106）
   本文は inc/comment-cta-i18n.php（13言語・専用ファイル方式）。
============================================ */
.cll-comment-cta {
  margin: 28px 0 20px;
  padding: 18px 20px;
  background: #fffbef;
  border: 2px solid var(--gold, #c9a227);
  border-radius: 10px;
}
.cll-comment-cta .cta-line1 {
  margin: 0;
  font-size: 15px; font-weight: 700; line-height: 1.7;
  color: #8a6d1a;
}
.cll-comment-cta .cta-line2 {
  margin: 8px 0 0;
  font-size: 15px; font-weight: 700; line-height: 1.7;
  color: var(--accent, #e50914);
}

/* DAY128: PR表記をバイライン直下（#article-header）へ集約したため、
   #cll-review 側と同じ見た目を新しい位置にも与える。既存237行は無改変。 */
#article-header .cll-pr-note {
  font-size: 12px;
  color:     var(--text-muted);
  margin:    6px 0 0;
}

/* DAY128: MGS CTA（①レビュー直下／②記事末尾）。中央ぞろい・赤系で
   VPN CTA（紺）と視覚的に分離する。スマホ固定はしない（ボトムナビと競合するため）。 */
.cll-mgs-cta {
  margin:     28px 0;
  text-align: center;
}
.cll-mgs-cta-btn {
  display:         inline-block;
  max-width:       100%;
  box-sizing:      border-box;
  padding:         16px 32px;
  background:      var(--accent, #b3141b);
  color:           #fff;
  font-size:       17px;
  font-weight:     700;
  line-height:     1.4;
  text-decoration: none;
  border-radius:   6px;
}
.cll-mgs-cta-btn:hover,
.cll-mgs-cta-btn:focus {
  opacity: .88;
  color:   #fff;
}
.cll-mgs-cta-sub {
  margin:    10px 0 0;
  font-size: 12px;
  color:     var(--text-muted);
}
@media (max-width: 600px) {
  .cll-mgs-cta-btn {
    display:   block;
    padding:   16px 20px;
    font-size: 16px;
  }
}

/* DAY128: MGSサンプル画像（CLLレビュー直前）。PC3列／SP2列。
   画像は image.mgstage.com から直接読み込む（自サーバーへ複製しない）。 */
.cll-samples {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   8px;
  margin:                24px 0;
}
.cll-samples .cll-sample {
  display:     block;
  line-height: 0;
}
.cll-samples img {
  width:         100%;
  height:        auto;
  display:       block;
  border-radius: 4px;
}
@media (max-width: 600px) {
  .cll-samples {
    grid-template-columns: repeat(2, 1fr);
    gap:                   6px;
  }
}

/* DAY128-2: サンプル画像の縦横比を揃える（MGSの画像は縦横比が一定でないため）。
   上の .cll-samples img より後に置くことで height:auto を上書きする。 */
.cll-samples img {
  aspect-ratio: 16 / 9;
  object-fit:   cover;
  height:       auto;
}

/* DAY128-3: サンプル画像の拡大表示（ライトボックス）。
   JS無効時は素の <a> としてMGSへ遷移するため、導線は消えない。 */
.cll-samples .cll-sample { cursor: zoom-in; }
.cll-lb {
  position:        fixed;
  inset:           0;
  z-index:         99999;
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-direction:  column;
  gap:             16px;
  padding:         24px;
  background:      rgba(0, 0, 0, .88);
}
.cll-lb[hidden] { display: none; }
.cll-lb-inner {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  gap:             16px;
  max-width:       100%;
}
.cll-lb-img {
  max-width:  min(1100px, 92vw);
  max-height: 74vh;
  width:      auto;
  height:     auto;
  object-fit: contain;
  border-radius: 4px;
}
.cll-lb-cta {
  display:         inline-block;
  padding:         14px 28px;
  background:      var(--accent, #b3141b);
  color:           #fff;
  font-size:       16px;
  font-weight:     700;
  text-decoration: none;
  border-radius:   6px;
}
.cll-lb-close {
  position:    absolute;
  top:         12px;
  right:       16px;
  width:       44px;
  height:      44px;
  background:  transparent;
  border:      0;
  color:       #fff;
  font-size:   32px;
  line-height: 1;
  cursor:      pointer;
}