/*!
 * DMM Auto Poster ― 投稿用スタイル (post.css)
 * -----------------------------------------------------------------------------
 * 公開中サイトの style.css（fanza-shiro_style.css）から、投稿本文に必要な
 * クラスだけを抽出し、重複・テーマ依存（body.single の段組レイアウト等）を排除して
 * 再構築したものです。
 *
 * 設計方針:
 *   - どのテーマでも崩れにくいよう、本文要素は基本的に幅100%・縦積みで完結させる。
 *   - 色やサイズは CSS 変数（:root）にまとめ、後から「レイアウト・入力」タブで
 *     上書きできるようにする想定（将来拡張）。
 *   - クラス名は実HTML（ユーザー提供）に完全一致させています。
 * -----------------------------------------------------------------------------
 */

:root {
  --dmmap-accent: #e60033;       /* FANZA レッド */
  --dmmap-orange: #ff6a04;       /* 購入ボタン */
  --dmmap-orange-2: #ff9448;
  --dmmap-link: #1a73e8;         /* 内部リンク */
  --dmmap-radius: 6px;
  --dmmap-gap: 15px;
}

/* 本文全体の土台（テーマの余白に左右されにくくする） */
.dmmap-content,
.media-stack,
.fanza-large-gallery,
.fanza-appeal-section,
.fanza-faq-section,
.video-info,
.details-section,
.fanza-footer-section {
  box-sizing: border-box;
}

/* =========================================================
 * サンプル動画（.media-stack > .sample-video.video-box）
 * ========================================================= */
.media-stack {
  text-align: center;
  margin-bottom: 40px;
}

.sample-video.video-box {
  position: relative;
  width: 100%;
  margin: 0 auto 10px;
  background: #000;
  border-radius: var(--dmmap-radius);
  overflow: hidden;
  line-height: 0;
}

.sample-video.video-box video,
.sample-video.video-box iframe {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 16 / 9;
  background: #000;
}

/* サンプル動画が無い場合のフォールバック画像（FB[B]対応） */
.fanza-video-fallback {
  width: 100%;
  margin: 0 auto 10px;
  border-radius: var(--dmmap-radius);
  overflow: hidden;
  line-height: 0;
}

.fanza-video-fallback-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--dmmap-radius);
}

/* 再生ボタン（中央オーバーレイ） */
.sample-video.video-box .play-button {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 90px;
  height: 90px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, opacity 0.2s ease;
  z-index: 2;
}

.sample-video.video-box .play-button:hover {
  background: rgba(230, 0, 51, 0.8);
}

/* 再生中はボタンを隠す（JS で .is-playing を付与） */
.sample-video.video-box.is-playing .play-button {
  opacity: 0;
  pointer-events: none;
}

.sample-video.video-box .play-icon {
  display: block;
  width: 0;
  height: 0;
  border-left: 28px solid rgba(255, 255, 255, 0.95);
  border-top: 18px solid transparent;
  border-bottom: 18px solid transparent;
  margin-left: 6px;
}

/* フル動画ボタン / クーポンリンク */
.fanza-full-btn {
  margin: 20px 0 15px;
}

.fanza-coupon-link {
  margin-bottom: 10px;
  text-align: center;
}

.fanza-coupon-lead {
  display: block;
  font-size: 0.9em;
  color: #333;
  font-weight: bold;
  margin-bottom: 5px;
}

.fanza-coupon-a {
  color: var(--dmmap-accent);
  font-weight: bold;
  text-decoration: underline;
  font-size: 1.1em;
}

/* =========================================================
 * 共通ボタン（.fanza-button.fanza-button-fanza）
 * ========================================================= */
.fanza-button {
  width: 100%;
  margin: 10px 0;
}

.fanza-button a {
  display: inline-block;
  width: 100%;
  box-sizing: border-box;
  padding: 14px 20px;
  text-align: center;
  text-decoration: none;
  font-weight: 700;
  font-size: 1.05rem;
  border-radius: var(--dmmap-radius);
  color: #fff;
  background: linear-gradient(to bottom, var(--dmmap-orange), var(--dmmap-orange-2));
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.18);
  transition: all 0.25s ease;
}

.fanza-button a:hover {
  background: linear-gradient(to bottom, #ea6103, var(--dmmap-orange));
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
}

/* =========================================================
 * セクション見出し
 * ========================================================= */
.fanza-section-title {
  font-size: 1.3rem;
  font-weight: 700;
  margin: 30px 0 15px;
  padding: 10px 12px;
  border-left: 5px solid var(--dmmap-accent);
  background: #f7f7f7;
  line-height: 1.4;
}

.fanza-appeal-icon {
  margin-right: 8px;
  color: var(--dmmap-accent);
}

/* =========================================================
 * サンプル画像ギャラリー（縦積み）
 * ========================================================= */
.fanza-large-gallery {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: var(--dmmap-gap);
}

.fanza-large-gallery .gallery-large-img {
  width: 100%;
  height: auto;
  border-radius: 4px;
  display: block;
}

.fanza-textlink {
  margin-top: 20px;
  text-align: center;
}

.fanza-textlink-a {
  font-weight: bold;
  text-decoration: underline;
  font-size: 1.1em;
  color: var(--dmmap-accent);
}

/* =========================================================
 * 無料訴求セクション
 * ========================================================= */
.fanza-appeal-section {
  margin: 30px 0;
  padding: 20px;
  border: 2px solid var(--dmmap-accent);
  border-radius: 8px;
  background: #fff7f8;
}

.fanza-appeal-desc,
.fanza-appeal-step-desc {
  line-height: 1.8;
  margin: 10px 0;
}

.fanza-appeal-step-title {
  font-size: 1.15rem;
  font-weight: 700;
  margin: 18px 0 8px;
  color: var(--dmmap-accent);
}

.fanza-appeal-btn-wrap,
.fanza-appeal-btn-wrap-bottom {
  text-align: center;
  margin: 14px 0;
}

.fanza-appeal-btn {
  display: inline-block;
  width: 100%;
  box-sizing: border-box;
  padding: 14px 16px;
  text-align: center;
  text-decoration: none;
  font-weight: 700;
  border-radius: var(--dmmap-radius);
  color: #fff;
}

.fanza-appeal-btn-red {
  background: var(--dmmap-accent);
}

.fanza-appeal-btn-red:hover {
  background: #c5002b;
}

.fanza-appeal-btn-orange {
  background: linear-gradient(to bottom, var(--dmmap-orange), var(--dmmap-orange-2));
}

.fanza-appeal-btn-orange:hover {
  background: linear-gradient(to bottom, #ea6103, var(--dmmap-orange));
}

/* =========================================================
 * 基本情報まとめ（FAQ）
 * ========================================================= */
.fanza-faq-section {
  margin: 40px 0;
}

.fanza-faq-section h3 {
  font-size: 1.1rem;
  margin: 16px 0 8px;
}

.fanza-faq-answer {
  font-weight: bold;
  font-size: 1.1em;
  color: var(--dmmap-accent);
}

/* =========================================================
 * 紹介文（read-toggle / blockquote）
 * ========================================================= */
.video-info {
  margin-top: 20px;
}

.read-toggle {
  display: none;
}

/* 既定では4行でクランプし、チェックで全表示 */
.read-more-wrapper {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  line-height: 1.8;
  transition: max-height 0.3s ease;
}

.read-toggle:checked ~ .read-more-wrapper {
  -webkit-line-clamp: unset;
  display: block;
  overflow: visible;
}

.read-more-button {
  display: inline-block;
  cursor: pointer;
  margin-top: 0.8em;
  padding-left: 1.2em;
  position: relative;
  color: var(--dmmap-link);
  font-weight: 600;
}

.read-more-button::before {
  content: "▼";
  position: absolute;
  left: 0;
  top: 0;
  transition: transform 0.3s ease;
  font-size: 1rem;
}

.read-toggle:checked ~ .read-more-button::before {
  transform: rotate(180deg);
}

/* チェック時は「続きを読む」を「閉じる」に差し替え */
.read-toggle:checked ~ .read-more-button {
  font-size: 0;
}

.read-toggle:checked ~ .read-more-button::after {
  content: "閉じる";
  font-size: 1rem;
}

/* 自動紹介文 */
.fanza-auto-intro {
  margin-bottom: 15px;
  line-height: 1.9;
}

.fanza-auto-intro span {
  display: inline;
}

/* 引用（コピーコンテンツ評価防止） */
.fanza-intro-quote {
  margin: 15px 0;
  padding: 14px 18px;
  border-left: 4px solid #ccc;
  background: #f7f7f7;
  color: #555;
  border-radius: 0 4px 4px 0;
}

.fanza-intro-quote .full-description {
  line-height: 1.9;
}

/* =========================================================
 * 作品情報テーブル（dl.fanza-details）
 * ========================================================= */
.details-section {
  margin: 24px 0;
}

.fanza-details {
  margin: 1em 0;
  line-height: 1.6;
  border: 1px solid #e5e5e5;
  border-radius: var(--dmmap-radius);
  overflow: hidden;
}

.fanza-details > div {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 10px 14px;
  border-top: 1px solid #eee;
}

.fanza-details > div:first-child {
  border-top: none;
}

.fanza-details .spacer {
  display: none; /* テーマ依存の余白調整は不要 */
}

.fanza-details dt {
  font-weight: 700;
  width: 120px;
  flex-shrink: 0;
  color: #333;
}

.fanza-details dd {
  margin: 0;
  flex: 1;
  min-width: 0;
  word-break: break-word;
}

.fanza-details a {
  color: var(--dmmap-link);
  text-decoration: none;
  transition: color 0.2s ease;
}

.fanza-details a:hover {
  color: #1557b0;
  text-decoration: underline;
}

/* =========================================================
 * フッター（ジャケット / 購入 / お気に入り / 関連）
 * ========================================================= */
.fanza-footer-section {
  margin: 30px 0 40px;
}

.fanza-jacket-section {
  text-align: center;
  margin-bottom: 14px;
}

.fanza-jacket-section img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  display: inline-block;
}

.post-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  margin: 12px 0;
}

.fanza-like-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 14px 16px;
  border: 2.5px solid #ccc;
  border-radius: 5px;
  background: #fff;
  color: #000;
  cursor: pointer;
  transition: all 0.25s ease;
  flex: 1;
  box-shadow: 2px 2px #dae2f3;
}

.fanza-like-button .heart-icon {
  font-size: 1.3rem;
  color: #ccc;
}

.fanza-like-button.liked {
  background: #f54a5d;
  border-color: #f54a5d;
  color: #fff;
}

.fanza-like-button.liked .heart-icon {
  color: #fff;
}

.fanza-liked-list-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 14px 16px;
  border-radius: 5px;
  background: #333;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
}

.fanza-liked-list-link:hover {
  background: #000;
  color: #fff;
}

.fanza-related-shortcodes-wrap {
  margin-top: 30px;
}

/* =========================================================
 * 関連作品（テーマ側ショートコード出力用。最低限のフォールバック）
 * ========================================================= */
.fanza-related-box {
  margin-top: 24px;
}

.fanza-related-title {
  font-size: 1.2rem;
  font-weight: 700;
  margin: 18px 0 12px;
}

.fanza-related-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.fanza-related-item a {
  text-decoration: none;
  color: inherit;
}

.fanza-related-thumb {
  width: 100%;
  height: auto;
  border-radius: 4px;
  display: block;
}

.fanza-related-post-title {
  font-size: 0.85rem;
  margin: 6px 0 0;
  line-height: 1.4;
}

/* =========================================================
 * レスポンシブ
 * ========================================================= */
@media screen and (max-width: 767px) {
  .post-actions {
    flex-direction: column;
  }

  .fanza-like-button,
  .fanza-liked-list-link {
    width: 100%;
    box-sizing: border-box;
    justify-content: center;
  }

  .fanza-details dt {
    width: 96px;
  }

  .sample-video.video-box .play-button {
    width: 70px;
    height: 70px;
  }
}

/* 平均評価の星（黄色・大きめ） */
.dmmap-stars { color: #f5a623; letter-spacing: -7px; font-size: 2.2rem; }

/* スペーサーブロック（block_order に spacer を入れた箇所に挿入。複数指定可） */
.dmmap-spacer { height: 12px; }

/* 紹介文スタイルA: 省略リンクの「続きを確認する」 */
.fanza-intro-continue { margin: 8px 0 0; }
.fanza-intro-continue a { font-weight: 600; }

/* =========================================================
 * 漫画フロア（comic-single.php）用スタイル ― v0.4.0 で追加
 *   既存クラスは変更せず、comic 専用クラスと試し読みボタンの色だけ追加する。
 * ========================================================= */

/* ① ジャケット書影（縦長・中央寄せ・最大幅300px はテンプレート側 inline でも指定） */
.fanza-comic-jacket {
  margin: 0 auto 14px;
  text-align: center;
}
.fanza-comic-jacket img {
  border-radius: var(--dmmap-radius);
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.18);
}

/* ② 試し読みボタン（購入=オレンジ と区別するため青緑系にする） */
.fanza-button-trial a {
  background: linear-gradient(to bottom, #2aa9a0, #1f867f);
}
.fanza-button-trial a:hover {
  background: linear-gradient(to bottom, #1f867f, #14615c);
}

/* ⑤ 作品情報テーブルの前後の余白（漫画は動画が無いぶん詰まらないよう調整） */
.fanza-comic-entry .details-section { margin-top: 18px; }

/* ⑥ フッター（購入・試し読みボタンを縦に並べる） */
.fanza-comic-footer { margin-top: 20px; }

/* =========================================================
 * 漫画系 訴求セクション（comic-single.php の comic_appeal ブロック）― v0.4.1 タスク③
 *   動画向け .fanza-appeal-section とは別クラス。動画クーポン対象外コンテンツ向け。
 * ========================================================= */
.fanza-comic-appeal-section {
  margin: 24px 0;
  padding: 16px 18px;
  background: #fff8f0;
  border: 1px solid #f0d8be;
  border-radius: var(--dmmap-radius);
}
.fanza-comic-appeal-title {
  font-size: 1.25rem;
  line-height: 1.5;
  margin: 0 0 10px;
}
.fanza-comic-appeal-desc {
  margin: 0 0 16px;
  font-size: 0.95rem;
  line-height: 1.8;
}
.fanza-comic-appeal-step {
  margin: 0 0 18px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid #efe3d5;
  border-radius: var(--dmmap-radius);
}
.fanza-comic-appeal-step-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #d9534f;
  margin: 0 0 6px;
}
.fanza-comic-appeal-lead {
  font-weight: 700;
  margin: 0 0 6px;
}
.fanza-comic-appeal-step-desc {
  margin: 0 0 12px;
  font-size: 0.92rem;
  line-height: 1.8;
}
.fanza-comic-appeal-safe-title {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 18px 0 6px;
}
.fanza-comic-appeal-safe-desc {
  margin: 0 0 12px;
  font-size: 0.92rem;
  line-height: 1.8;
}
/* 訴求ボタン（全てページ自身のアフィリリンク） */
.fanza-comic-appeal-btn-wrap {
  text-align: center;
  margin: 10px 0 0;
}
.fanza-comic-appeal-btn {
  display: inline-block;
  padding: 12px 20px;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  border-radius: var(--dmmap-radius);
  background: linear-gradient(to bottom, #ff7a3c, #e8551a);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
.fanza-comic-appeal-btn:hover {
  background: linear-gradient(to bottom, #e8551a, #c9430f);
  color: #fff;
}

/* =========================================================
 * 関連コンテンツ ショートコード（Shortcodes.php）― v0.4.1 タスク④
 * ========================================================= */
.fanza-related-block {
  margin: 22px 0;
}
.fanza-related-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 12px;
  padding-left: 10px;
  border-left: 4px solid #e8551a;
}
.fanza-related-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.fanza-related-item {
  margin: 0;
}
.fanza-related-link {
  display: block;
  text-decoration: none;
  color: inherit;
}
.fanza-related-thumb-wrap img,
.fanza-related-thumb {
  width: 100%;
  height: auto;
  border-radius: var(--dmmap-radius);
  display: block;
}
.fanza-related-name {
  display: block;
  margin-top: 6px;
  font-size: 0.85rem;
  line-height: 1.5;
}
@media (max-width: 600px) {
  .fanza-related-list {
    grid-template-columns: repeat(2, 1fr);
  }
}