/*
 * 記事内パーツのスタイル（オーバーレイリンク / 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;
}

/* ==================================================================
   女優フォーマットの記事（Article Studio v0.11.0 が書き出すマークアップ）

   **記事診断プラグインと対になっている。**
   あちらはクラス名だけを書き出し、見た目はここで決める。
   クラス名を変えるときは両方を直すこと。

   インラインstyleを本文へ焼き込まない方針にしたのは、
   旧 Content Studio が焼き込んだせいで、サイトをダークにしたとき
   141本が明るいまま取り残されたため（docs/DECISIONS.md）。
   ここに置いておけば、デザインを変えても過去記事は書き換えずに済む。

   CSSが読まれなくても、見出し・段落・リンクとして読める
   HTMLになっている。崩れても文章は失われない。
   ================================================================== */

/* ---- プロフィール ---- */
.mo-editorial-body .mo-person { margin: 26px 0 0; }

.mo-editorial-body .mo-profile {
    display: flex;
    gap: 18px;
    padding: 18px;
    background: #0e141b;
    border: 1px solid #293440;
    border-radius: 12px 12px 0 0;
}

.mo-editorial-body .mo-profile-photo {
    flex: none;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #5b6874;
    background: #141c25;
}

.mo-editorial-body .mo-profile-body { flex: 1; min-width: 0; }

.mo-editorial-body .mo-profile-name {
    margin: 0 0 2px;
    color: #f5f1e8;
    font-family: Georgia, "Yu Mincho", serif;
    font-size: 21px;
    font-weight: 700;
}

.mo-editorial-body .mo-profile-kana {
    margin: 0 0 12px;
    color: #9aa5b1;
    font-size: 12.5px;
}

.mo-editorial-body .mo-stat-row { display: flex; flex-wrap: wrap; gap: 8px; }

.mo-editorial-body .mo-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 7px 11px;
    background: #141c25;
    border-radius: 8px;
    min-width: 72px;
}

.mo-editorial-body .mo-stat-label { color: #7e8996; font-size: 10.5px; letter-spacing: .04em; }

/* 数字は等幅にする。桁がそろわないと比べにくい。 */
.mo-editorial-body .mo-stat-value {
    color: #f4c24f;
    font-size: 15px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.mo-editorial-body .mo-badge-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }

.mo-editorial-body .mo-badge {
    padding: 4px 11px;
    background: #141c25;
    border: 1px solid #293440;
    border-radius: 999px;
    color: #ebd492;
    font-size: 12px;
}

/* ---- 人のコメント（地を一段上げて「編集部の声」だと分かるように） ---- */
.mo-editorial-body .mo-person-comment {
    margin-top: -1px;
    padding: 14px 16px;
    background: #141c25;
    border: 1px solid #293440;
    border-top: none;
    color: #f5f1e8;
    font-size: 14px;
    line-height: 1.85;
}

/* ---- 代表作 ---- */
.mo-editorial-body .mo-person-works {
    margin-top: -1px;
    padding: 12px 14px 14px;
    background: #0e141b;
    border: 1px solid #293440;
    border-top: none;
    border-radius: 0 0 12px 12px;
}

.mo-editorial-body .mo-works-label,
.mo-editorial-body .mo-shots-label {
    display: block;
    margin: 0 0 8px;
    color: #7e8996;
    font-size: 11px;
    letter-spacing: .04em;
}

.mo-editorial-body .mo-work-row {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px;
    margin-bottom: 8px;
    background: #141c25;
    border: 1px solid #293440;
    border-radius: 8px;
}

.mo-editorial-body .mo-work-row-thumb {
    flex: none;
    width: 46px;
    height: 64px;
    border-radius: 4px;
    object-fit: cover;
    /* 通常作品のパッケージは表紙＋裏表紙の合成画像。表紙側だけ出す。 */
    object-position: 100% 50%;
    background: #1c2733;
}

/* min-width:0 が無いと、長いタイトルで横に伸びて省略が効かない */
.mo-editorial-body .mo-work-row-body { flex: 1; min-width: 0; }

.mo-editorial-body .mo-work-row-title {
    display: block;
    margin: 0 0 2px;
    color: #f5f1e8;
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.5;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mo-editorial-body .mo-work-row-meta { display: block; color: #9aa5b1; font-size: 12px; }
.mo-editorial-body .mo-work-row-go { flex: none; color: #9aa5b1; font-size: 12px; }

/* ---- サンプル画像 ---- */
.mo-editorial-body .mo-shots-wrap { margin: 0 0 10px; padding: 0 2px; }
.mo-editorial-body .mo-shots { display: flex; gap: 7px; }

.mo-editorial-body .mo-shots .mo-shot {
    flex: 1;
    min-width: 0;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: 5px;
    border: 1px solid #293440;
    background: #141c25;
}

/* ---- ボタン2種 ----
   金の塗り＝販売元（お金が動く外部リンク）
   枠線＝サイト内の回遊
   色ではなく「塗りか枠か」で分ける。金を回遊にも使うと、
   どれが購入なのかが分からなくなる。 */
.mo-editorial-body .mo-btn-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }

.mo-editorial-body .mo-btn-nav,
.mo-editorial-body .mo-btn-buy {
    flex: 1 1 220px;
    padding: 12px 14px;
    border-radius: 8px;
    text-align: center;
    font-size: 13.5px;
    font-weight: 700;
}

.mo-editorial-body .mo-btn-nav {
    background: transparent;
    border: 1px solid #5b6874;
    color: #f5f1e8;
}

.mo-editorial-body .mo-btn-buy {
    background: #f4c24f;
    color: #1a1408;
}

.mo-editorial-body .mo-btn-note { margin: 8px 0 0; color: #7e8996; font-size: 11px; }

/* ---- 5人の一覧 ---- */
.mo-editorial-body .mo-actress-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 12px 0 8px;
}

.mo-editorial-body .mo-actress-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: #0e141b;
    border: 1px solid #293440;
    border-radius: 10px;
}

.mo-editorial-body .mo-actress-rank {
    flex: none;
    width: 26px;
    text-align: center;
    color: #7e8996;
    font-family: Georgia, "Yu Mincho", serif;
    font-size: 17px;
    font-weight: 700;
}

.mo-editorial-body .mo-avatar-sm {
    flex: none;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid #5b6874;
    background: #1c2733;
}

.mo-editorial-body .mo-actress-row-body { flex: 1; min-width: 0; }

.mo-editorial-body .mo-actress-row-name {
    display: block;
    margin: 0 0 2px;
    color: #f5f1e8;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
}

.mo-editorial-body .mo-actress-row-meta {
    display: block;
    color: #9aa5b1;
    font-size: 12px;
    line-height: 1.5;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mo-editorial-body .mo-actress-row-jump {
    flex: none;
    padding: 7px 11px;
    border: 1px solid #293440;
    border-radius: 6px;
    color: #9aa5b1;
    font-size: 12px;
}

/* ---- 記事末尾の回遊カード ---- */
.mo-editorial-body .mo-explore-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 10px;
    margin-top: 14px;
}

.mo-editorial-body .mo-explore-card {
    padding: 14px 16px;
    background: #0e141b;
    border: 1px solid #293440;
    border-radius: 10px;
}

.mo-editorial-body .mo-explore-card b {
    display: block;
    margin-bottom: 3px;
    color: #f5f1e8;
    font-size: 14px;
}

.mo-editorial-body .mo-explore-card .mo-cta-visual span {
    display: block;
    color: #9aa5b1;
    font-size: 12.5px;
    line-height: 1.6;
}

@media (max-width: 600px) {
    .mo-editorial-body .mo-profile { flex-direction: column; }
    .mo-editorial-body .mo-work-row-go { display: none; }
}

/* ---- 新作への期待（Article Studio の hype 型） ---- */
.mo-editorial-body .mo-hype-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 12px;
}

.mo-editorial-body .mo-hype-fact {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 12px;
    background: #141c25;
    border: 1px solid #293440;
    border-radius: 8px;
    min-width: 96px;
}

.mo-editorial-body .mo-hype-fact-label { color: #7e8996; font-size: 10.5px; letter-spacing: .04em; }

.mo-editorial-body .mo-hype-fact-value {
    color: #f5f1e8;
    font-size: 14px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* 配信前は価格も形式も確定していない。そのことを本文で断る。 */
.mo-editorial-body .mo-hype-note {
    margin: 0 0 18px;
    padding: 10px 13px;
    background: #141c25;
    border-left: 3px solid #f4c24f;
    border-radius: 0 6px 6px 0;
    color: #9aa5b1;
    font-size: 13px;
    line-height: 1.75;
}

/* ==================================================================
   作品カード（Article Studio v0.14.0）

   カード → 編集部コメント → サンプル画像 の3段を、境界線だけで
   繋いで1つの塊に見せる。バラバラの部品に見えると、どれがどの作品の
   話なのか分からなくなる。
   ================================================================== */
.mo-editorial-body .mo-work-unit { margin: 22px 0; }

.mo-editorial-body .mo-work-card {
    display: flex;
    gap: 14px;
    padding: 15px;
    background: #0e141b;
    border: 1px solid #293440;
    border-radius: 12px 12px 0 0;
}

.mo-editorial-body .mo-work-card-thumb {
    flex: none;
    width: 120px;
    height: 168px;
    border-radius: 6px;
    object-fit: cover;
    /* FANZAの通常作品は表紙＋裏表紙の合成画像。表紙側だけ出す。 */
    object-position: 100% 50%;
    background: #141c25;
}

.mo-editorial-body .mo-work-card-body { flex: 1; min-width: 0; }

.mo-editorial-body .mo-work-card-title {
    margin: 0 0 6px;
    color: #f5f1e8;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.55;
}

.mo-editorial-body .mo-work-card-rank {
    color: #f4c24f;
    font-family: Georgia, "Yu Mincho", serif;
    margin-right: 8px;
}

.mo-editorial-body .mo-work-card-meta {
    margin: 0 0 12px;
    color: #9aa5b1;
    font-size: 13px;
    line-height: 1.7;
}

.mo-editorial-body .mo-work-card-prices { margin: 0 0 12px; }

.mo-editorial-body .mo-price-line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 3px 0;
    color: #f4c24f;
    font-size: 13.5px;
    font-weight: 700;
}

/* 数字は等幅。桁がそろわないと比べにくい。 */
.mo-editorial-body .mo-price-value { font-variant-numeric: tabular-nums; }

/* カードの中のボタンは全幅。カード外の2択ボタンとは並び方が違う。 */
.mo-editorial-body .mo-work-card-body .mo-btn-buy { display: block; flex: none; }

/* 編集部コメント。地を一段上げて「人の声」だと分かるようにする。 */
.mo-editorial-body .mo-work-comment {
    margin-top: -1px;
    padding: 14px 16px;
    background: #141c25;
    border: 1px solid #293440;
    border-top: none;
    color: #f5f1e8;
    font-size: 14px;
    line-height: 1.85;
}

/* サンプル画像はひとまとめ。地をカードと同じに戻して縞にする。 */
.mo-editorial-body .mo-work-shots {
    margin-top: -1px;
    padding: 12px 14px 14px;
    background: #0e141b;
    border: 1px solid #293440;
    border-top: none;
    border-radius: 0 0 12px 12px;
}

.mo-editorial-body .mo-work-shots .mo-shots-wrap { margin: 0; padding: 0; }

.mo-editorial-body .mo-work-shots .mo-shot {
    aspect-ratio: 3 / 2;
    border-radius: 6px;
}

@media (max-width: 600px) {
    .mo-editorial-body .mo-work-card { flex-direction: column; }
    .mo-editorial-body .mo-work-card-thumb { width: 100%; height: 220px; }
}