/*
 * 記事内パーツのスタイル（オーバーレイリンク / CTAボタン / 評価ボックス / セール枠）
 *
 * 【なぜテーマに同梱するか】
 * これらはもともと「追加CSS」として運用されていたが、WordPressのCustomizer追加CSSは
 * テーマごとに保存される（custom_css投稿がテーマのスラッグに紐づく）。
 * そのためテーマを切り替えると旧テーマ側へ取り残され、記事内の
 *   .mo-link-overlay（画像上の透明リンク）
 *   .fanza-cta-btn（アフィリエイト誘導ボタン）
 * が一切スタイルされなくなる。
 *
 * オーバーレイは position:absolute; inset:0 が効いて初めてクリック可能な領域になるため、
 * CSSが消えると <a> が幅0・高さ0のインライン要素になり、リンクが「機能しなくなる」。
 *
 * テーマに同梱すればテーマ切替やCustomizerの状態に依存しなくなるので、ここへ置く。
 * 内容は運用中の 追加のcss_overlay.css をそのまま取り込んでいる。
 */

/* ==========================================================
   mens-oasis.com ブランドカラー & コンポーネントCSS v2
   Cocoon「外観 > デザイン設定 > 追加CSS」へ全文貼り付け（既存内容を丸ごと置き換え）

   既存105記事のCTAクラス名(.fanza-cta-*)はそのまま維持し、
   配色のみ新ブランドカラー(ネイビー×オレンジ)に更新。
   → 既存記事のHTMLは一切書き換え不要。このCSS差し替えだけで
     過去記事・新規記事すべてのCTAが一括でリブランドされる。
   ========================================================== */

:root {
  --moe-navy: #0F172A;
  --moe-navy-soft: #1E293B;
  --moe-orange: #F97316;
  --moe-orange-dark: #C2570C;
  --moe-red: #EF4444;
  --moe-red-dark: #B91C1C;
  --moe-gold: #D4AF37;
  --moe-bg: #FFFFFF;
  --moe-bg-soft: #F8FAFC;
  --moe-border: #E5E7EB;
  --moe-text: #1F2937;
  --moe-text-soft: #6B7280;
}

/* ---------- 広告表記（新規パーツ） ---------- */
.ad-disclosure {
  background: var(--moe-bg-soft);
  border: 1px solid var(--moe-border);
  border-radius: 6px;
  padding: 12px 14px;
  margin: 14px 0 20px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--moe-text);
}
.ad-disclosure strong {
  color: var(--moe-navy);
}

/* ---------- 評価スコアボックス（新規パーツ） ---------- */
.review-score-box {
  background: var(--moe-bg);
  border: 2px solid var(--moe-navy);
  border-radius: 10px;
  padding: 18px 18px 16px;
  margin: 22px 0;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
}
.review-score-box .score-total {
  margin: 0 0 12px;
  font-weight: bold;
  color: var(--moe-navy);
  font-size: 18px;
}
.review-score-box .score-total .score-num {
  color: var(--moe-gold);
  font-size: 22px;
}
.review-score-box ul {
  margin: 0;
  padding-left: 0;
  line-height: 2;
  font-size: 15px;
  color: var(--moe-text);
  list-style: none;
}
.review-score-box ul li {
  display: flex;
  justify-content: space-between;
  max-width: 280px;
  border-bottom: 1px dashed var(--moe-border);
  padding: 4px 0;
}
.review-score-box .star {
  color: var(--moe-gold);
  letter-spacing: 1px;
}

/* ---------- CTAボックス（既存クラス名を維持、配色のみ更新） ---------- */
.fanza-cta-box {
  background: #FFF7ED;
  border: 2px solid var(--moe-orange);
  border-radius: 14px;
  padding: 18px;
  margin: 24px 0;
  text-align: center;
}
.fanza-cta-eyebrow {
  font-size: 13px;
  font-weight: bold;
  color: var(--moe-navy);
  margin: 0 0 6px;
}
.fanza-cta-lead {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 14px;
  color: #9A3412;
}
.fanza-cta-btn {
  display: block;
  background: var(--moe-orange);
  color: #fff !important;
  padding: 15px 18px;
  border-radius: 10px;
  font-weight: bold;
  text-decoration: none;
  box-shadow: 0 4px 10px rgba(0,0,0,0.18);
}
.fanza-cta-btn:hover,
.fanza-cta-btn:active {
  opacity: 0.88;
  transform: translateY(-2px);
  transition: 0.2s;
}
.fanza-cta-note {
  font-size: 12px;
  color: #777;
  margin-top: 10px;
}

/* セール対象作品用バリエーション（.fanza-cta-box に .fanza-cta-sale を追加するだけで切替） */
.fanza-cta-box.fanza-cta-sale {
  background: #FEF2F2;
  border-color: var(--moe-red);
}
.fanza-cta-box.fanza-cta-sale .fanza-cta-lead {
  color: #991B1B;
}
.fanza-cta-box.fanza-cta-sale .fanza-cta-btn {
  background: var(--moe-red);
}

/* ---------- モバイル調整 ---------- */
@media (max-width: 480px) {
  .fanza-cta-btn {
    font-size: 15px;
    padding: 14px 12px;
  }
  .review-score-box ul li {
    max-width: 100%;
  }
}
/* ---------- 文字サイズ調整 ---------- */
.article h2,
.article h3,
.entry-title {
  font-weight: 700;
}

/* ---------- インデックストップのCSS ---------- */
.top-sale-box {
  background: #fff7f0;
  border: 2px solid #ff8a3d;
  border-radius: 12px;
  padding: 16px;
  margin: 0 0 20px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.06);
}

.top-sale-label {
  display: inline-block;
  background: #ff5a1f;
  color: #fff;
  font-size: 13px;
  font-weight: bold;
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 8px;
}

.top-sale-title {
  font-size: 20px;
  margin: 6px 0 8px;
  line-height: 1.4;
}

.top-sale-text {
  margin: 0 0 8px;
  font-size: 15px;
  line-height: 1.7;
}

.top-sale-deadline {
  margin: 0 0 12px;
  font-weight: bold;
  color: #d93600;
}

.top-sale-button {
  display: block;
  text-align: center;
  background: #ff5a1f;
  color: #fff;
  font-weight: bold;
  text-decoration: none;
  padding: 12px;
  border-radius: 8px;
}

.top-sale-button:hover {
  opacity: 0.85;
}

/* ==========================================================
   FANZAリンク・オーバーレイ構造
   表示本体とアフィリエイトリンクを別DOMに分離する。
   リンク要素が非表示になっても画像・CTAの見た目は残る。
   ========================================================== */
.mo-link-overlay-wrap {
  position: relative;
}

.mo-link-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: block;
  width: 100%;
  height: 100%;
  background: transparent;
  border: 0;
  border-radius: inherit;
  font-size: 0;
  line-height: 0;
  text-indent: -9999px;
  overflow: hidden;
}

.mo-link-overlay:focus-visible {
  outline: 3px solid var(--moe-orange);
  outline-offset: -3px;
}

.mo-cta-overlay-wrap {
  border-radius: 10px;
}

.mo-cta-visual {
  pointer-events: none;
  user-select: none;
}

.mo-product-image-wrap .mo-link-overlay,
.mens-oasis-fanza-sample-image .mo-link-overlay {
  cursor: pointer;
}

/* WordPress編集画面でオーバーレイが操作を邪魔する場合はリンクを無効化 */
.block-editor-page .mo-link-overlay,
.editor-styles-wrapper .mo-link-overlay {
  pointer-events: none;
}

/* ============================================================
   MEN'S OASIS 記事レイアウト（暗色背景）への適合
   記事内ボックスは元々ライト背景向けに作られているため、
   暗色ページ上でも「カード」として成立するよう最小限だけ補正する。
   ボックス内部の配色は元のまま変更しない。
   ============================================================ */

.mo-editorial-body .review-score-box,
.mo-editorial-body .fanza-cta-box,
.mo-editorial-body .top-sale-box,
.mo-editorial-body .ad-disclosure {
    box-shadow: 0 6px 22px rgba(0, 0, 0, .35);
}

/* 暗色背景では本文リンクの金色を使うが、CTAボタン内は白のままにする */
.mo-editorial-body .fanza-cta-btn,
.mo-editorial-body .top-sale-button {
    color: #fff !important;
    text-decoration: none !important;
}

.mo-editorial-body .fanza-cta-box a:not(.fanza-cta-btn),
.mo-editorial-body .top-sale-box a:not(.top-sale-button) {
    color: var(--moe-orange-dark);
}

/* オーバーレイの親が position を失わないよう保険をかける
   （テーマ側のレイアウトがwrapのpositionを上書きしても効くように） */
.mo-editorial-body .mo-link-overlay-wrap,
.mo-editorial-body .mo-cta-overlay-wrap,
.mo-editorial-body .mens-oasis-fanza-sample-image {
    position: relative;
}

/* 記事内の画像がはみ出さないように（catalog.css は max-width を持たない） */
.mo-editorial-body img {
    max-width: 100%;
}

/* 記事本文の販売元ボタン (v0.25.0)
   旧 Content Studio はインラインstyleで同じ見た目を作っていたが、
   本文にstyleが焼き付くとテーマ側で直せなくなる（147本を一括で直す手段が無い）。
   クラス1つにして、見た目はここで持つ。 */
.mo-article-cta { display:block; margin:22px auto; padding:15px 20px; max-width:520px;
  background:linear-gradient(135deg,#c9a227,#e1c45d); color:#111 !important;
  border-radius:10px; text-align:center; font-weight:700; text-decoration:none;
  box-shadow:0 6px 18px rgba(8,27,58,.18); }
.mo-article-cta:hover { filter:brightness(1.06); text-decoration:none; }
/* 本文に差し込んだサンプル画像 */
.mo-editorial-body figure.wp-block-image img { border-radius:8px; }

/* ------------------------------------------------------------------
   記事下の「フェチから作品を探す」
   作品ページ・女優ページは既に出している。フェチ検索への入口が
   記事から無かったので足した。作品数の多い分類だけを並べる。
   ------------------------------------------------------------------ */
.mo-post-fetish-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.mo-post-fetish-link {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 10px 14px;
    background: var(--mo-panel, #0e141b);
    border: 1px solid var(--mo-line, #293440);
    border-radius: 999px;
    color: var(--mo-text, #f5f1e8);
    text-decoration: none;
    line-height: 1.4;
}

.mo-post-fetish-link:hover,
.mo-post-fetish-link:focus-visible {
    border-color: var(--mo-gold, #f4c24f);
    color: var(--mo-gold, #f4c24f);
}

.mo-post-fetish-name {
    font-size: 14px;
    font-weight: 700;
}

/* 件数は補助情報。分類名より弱く見せる。 */
.mo-post-fetish-count {
    font-size: 12px;
    color: var(--mo-muted, #9aa5b1);
}

@media (max-width: 480px) {
    .mo-post-fetish-links { gap: 8px; }
    .mo-post-fetish-link { padding: 8px 12px; }
    .mo-post-fetish-name { font-size: 13px; }
}

/* ------------------------------------------------------------------
   本文の読みやすさ

   実測して決めた値。参考にしたのは読み手が挙げたサイトで、
   そちらは 16px / 行間1.8 / 1行45文字。
   こちらは 14px / 行間1.85 / 1行50文字だったので、
   **行間ではなく文字の大きさ**が主因だった。

   焼き込み済みの記事はインラインstyleのほうが強いので、
   PHP側（mo-child-legacy-skin.php）で書き換えている。
   ここは、これから書く記事とインライン指定の無い段落に効く。
   ------------------------------------------------------------------ */
.mo-editorial-body {
    font-size: 16px;
    line-height: 1.9;
    /* 日本語は字間を少し開けると行を追いやすい */
    letter-spacing: .02em;
}

.mo-editorial-body p,
.mo-editorial-body li {
    font-size: 1em;
    line-height: 1.9;
}

/* 段落の切れ目は行の切れ目よりはっきり広く取る。
   同じくらいだと文章が一つの塊に見える。 */
.mo-editorial-body p {
    margin: 0 0 1.5em;
}

.mo-editorial-body li + li { margin-top: .5em; }

/*
 * 見出しの見た目は catalog.css:449 で決めている（そちらが後に読まれる）。
 * ここで font-size を書いても効かないので書かない。
 * 2箇所に書くと、片方が黙って死んでいることに気づけなくなる。
 */
.mo-editorial-body h2 { line-height: 1.5; }
.mo-editorial-body h3 { line-height: 1.6; }

/* 1行が長いと目が戻れなくなる。日本語は40〜45字が読みやすい。 */
.mo-editorial-body > p,
.mo-editorial-body > ul,
.mo-editorial-body > ol,
.mo-editorial-body > h2,
.mo-editorial-body > h3 {
    max-width: 44em;
}

@media (max-width: 600px) {
    .mo-editorial-body { font-size: 16px; line-height: 1.85; }
    /* 見出しの大きさは catalog.css の値を上書きする必要があるので詳細度を上げる */
    .mo-editorial-body h2.mo-editorial-body h2,
    body .mo-editorial-body h2 { font-size: 25px; margin-top: 2em; }
    body .mo-editorial-body h3 { font-size: 20px; }
}

/* ------------------------------------------------------------------
   本文の中の「白い箱」を暗くする

   実測（本番の記事）で、いちばん読めなかったのは表だった。

     td   文字 #d4d9df / 地 rgb(250,251,252)      コントラスト比 1.37
     td   文字 #d4d9df / 地 rgba(91,192,222,.07)  コントラスト比 1.47

   これらは**本文に焼き込まれた色ではない**ので、
   mo-child-legacy-skin.php の読み替えでは届かない。

     tr の縞          Cocoon本体のCSS
     rgba(...)        インラインだが対応表は16進数しか見ていない
     目次・吹き出し    Cocoon／目次プラグインのCSS

   どれもCSSの層の話なので、ここで上書きする。
   インライン指定に勝つ必要があるものだけ !important を付ける。
   ------------------------------------------------------------------ */

/* 表。Cocoonが奇数行に明るい地を敷くので、まず全部を透明に戻してから
   偶数行だけ暗い縞にする。インラインの rgba() にも勝たせる。 */
.mo-editorial-body table tr,
.mo-editorial-body table tr:nth-child(odd),
.mo-editorial-body table tr:nth-child(even) {
    background: transparent !important;
}

.mo-editorial-body table tr:nth-child(even) {
    background: #101820 !important;
}

.mo-editorial-body table th,
.mo-editorial-body table td {
    color: var(--mo-text, #f5f1e8);
    border-color: #293440 !important;
}

/* 見出し行は本文より明るく。表の中で何が項目名かが分かるように。 */
.mo-editorial-body table th {
    background: #16202b !important;
    color: #f5f1e8;
}

/* 吹き出し。白い地に白い文字で消えていた。 */
.mo-editorial-body .speech-balloon {
    background: #0e141b !important;
    border-color: #293440 !important;
    color: var(--mo-text, #f5f1e8);
}

.mo-editorial-body .speech-balloon::before,
.mo-editorial-body .speech-balloon::after {
    border-right-color: #0e141b !important;
    border-left-color: #0e141b !important;
}

/* 目次。記事の中で白い箱がひとつだけ浮いていた。 */
.mo-editorial-body .rtoc-mokuji-content,
.mo-editorial-body .rtoc-mokuji-box {
    background: #0e141b !important;
    border-color: #293440 !important;
}

.mo-editorial-body .rtoc-mokuji-content a,
.mo-editorial-body .rtoc-mokuji-content span {
    color: var(--mo-text, #f5f1e8);
}

.mo-editorial-body .rtoc-mokuji-title,
.mo-editorial-body .rtoc-mokuji-content .rtoc-mokuji-title span {
    color: #f5f1e8;
}

.mo-editorial-body .rtoc_open_close {
    background: #16202b !important;
    color: var(--mo-text, #f5f1e8) !important;
    border-color: #293440 !important;
}