/* ============================================================
   広告カード（ナビゲータ紹介型・アコーディオン式）
   相談スレ詳細（体験談一覧）・記事本文ショートコード共通
   ============================================================ */

.ad-card {
  /* カテゴリ色（未指定時はフィーチャーアクセント）。塗り・見出し・ボタンで共用。 */
  --ad-cat-color: var(--color-featured-accent);
  /* 展開した本文の先頭に確保する余白＝1行分。
     上部「閉じる」ボタンの下マージンと二重がけにならないよう控えめにする。 */
  --ad-body-top-gap: calc(var(--line-height-relaxed) * var(--font-size-base));
  /* ナビゲータのアバター径（体験談のユーザーアイコンと同じ50px）。 */
  --ad-navi-size: 50px;
  background: color-mix(in srgb, var(--ad-cat-color) 5%, var(--color-base-1));
  border: 1px solid var(--color-featured-border);
  border-radius: var(--radius-lg);
  /* 下のボタン下余白をさらに1行分詰める（下だけ控えめに） */
  padding: var(--space-6) var(--space-6) var(--space-1);
  box-shadow: var(--shadow-sm);
}

.ad-card[data-thread-cat="ningen"] {
  --ad-cat-color: var(--cat-ningen-text);
}

.ad-card[data-thread-cat="career"] {
  --ad-cat-color: var(--cat-career-text);
}

.ad-card[data-thread-cat="skill"] {
  --ad-cat-color: var(--cat-skill-text);
}

.ad-card[data-thread-cat="hataraki"] {
  --ad-cat-color: var(--cat-hataraki-text);
}

.ad-card[data-thread-cat="kachi"] {
  --ad-cat-color: var(--cat-kachi-text);
}

/* タイトル上の小さな「コーナー」ラベル（さりげなく中央配置） */
.ad-card__pr-label {
  display: block;
  width: fit-content;
  margin: 0 auto var(--space-3);
  padding: var(--space-1) var(--space-4);
  background: var(--ad-cat-color);
  color: var(--color-text-inverse);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
  letter-spacing: 0.04em;
  border-radius: var(--radius-sm);
}

.ad-card__title {
  margin: 0 0 var(--space-4);
  /* カテゴリカラー（スレ文脈は data-thread-cat、記事等は既定の featured-accent） */
  color: var(--ad-cat-color);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
}

/* 注記（※…広告リンクを含みます 等）: 小さめ・グレー */
.ad-card .ad-card__note {
  color: var(--color-text-secondary);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-relaxed);
}

.ad-card__navi {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.ad-card__avatar {
  width: var(--space-10);
  height: var(--space-10);
  border-radius: var(--radius-full);
  object-fit: cover;
  border: 1px solid var(--color-border-light);
  flex: 0 0 auto;
}

.ad-card__navi-name {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

.ad-card__lead {
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
}

.ad-card__action {
  display: flex;
  justify-content: center;
  margin-top: var(--space-6);
}

/* 開く／閉じるの出し分け（display:flex が UA の [hidden] を上書きしてしまうため明示） */
.ad-card__action[hidden] {
  display: none;
}

/* 展開時の「閉じる」ボタンはカード下端と近くなりすぎないよう少し下余白を持たせる */
.ad-card__action--close {
  margin-bottom: var(--space-3);
}

.ad-card__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  padding: var(--space-3) var(--space-8);
  border: 1px solid var(--ad-cat-color);
  border-radius: var(--radius-full);
  background: var(--color-base-1);
  color: var(--ad-cat-color);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.ad-card__toggle:hover,
.ad-card__toggle:focus-visible {
  background: var(--ad-cat-color);
  color: var(--color-text-inverse);
}

.ad-card__body {
  margin-top: var(--space-4);
  /* 展開直後に本文が詰まって見えないよう、先頭に3行分の余白を確保する */
  padding-top: var(--ad-body-top-gap);
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
}

/* 本文（管理者入力 HTML）の基本タイポグラフィ */
.ad-card__body > :first-child {
  margin-top: 0;
}

.ad-card__body > :last-child {
  margin-bottom: 0;
}

.ad-card__body p {
  margin: 0 0 var(--space-4);
}

/* h2: カテゴリ色の行網掛け＋白抜き（デフォルトはフィーチャーアクセント色）。
   見出しの前後に十分な余白を取る。 */
.ad-card__body h2 {
  margin: var(--space-10) 0 var(--space-6);
  padding: var(--space-2) var(--space-4);
  background: var(--color-featured-accent);
  color: var(--color-text-inverse);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-base);
  border-radius: var(--radius-sm);
}

.ad-card[data-thread-cat="ningen"] .ad-card__body h2 {
  background: var(--cat-ningen-text);
}

.ad-card[data-thread-cat="career"] .ad-card__body h2 {
  background: var(--cat-career-text);
}

.ad-card[data-thread-cat="skill"] .ad-card__body h2 {
  background: var(--cat-skill-text);
}

.ad-card[data-thread-cat="hataraki"] .ad-card__body h2 {
  background: var(--cat-hataraki-text);
}

.ad-card[data-thread-cat="kachi"] .ad-card__body h2 {
  background: var(--cat-kachi-text);
}

/* h3: カテゴリカラーの太字＋見出し全体に下線（網掛けなし）。
   見出し前の余白を1行分多めに取る。 */
.ad-card__body h3 {
  margin: var(--space-12) 0 var(--space-4);
  padding-bottom: var(--space-2);
  color: var(--color-featured-accent);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  border-bottom: 2px solid currentColor;
}

.ad-card[data-thread-cat="ningen"] .ad-card__body h3 {
  color: var(--cat-ningen-text);
}

.ad-card[data-thread-cat="career"] .ad-card__body h3 {
  color: var(--cat-career-text);
}

.ad-card[data-thread-cat="skill"] .ad-card__body h3 {
  color: var(--cat-skill-text);
}

.ad-card[data-thread-cat="hataraki"] .ad-card__body h3 {
  color: var(--cat-hataraki-text);
}

.ad-card[data-thread-cat="kachi"] .ad-card__body h3 {
  color: var(--cat-kachi-text);
}

.ad-card__body h4 {
  margin: var(--space-6) 0 var(--space-3);
  color: var(--color-featured-accent);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
}

.ad-card__body a {
  color: var(--color-accent-2);
  text-decoration: underline;
}

.ad-card__body img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
}

.ad-card__body ul,
.ad-card__body ol {
  margin: 0 0 var(--space-4);
  padding-left: var(--space-6);
}

/* ナビゲータ台詞: アバター＋吹き出し（チャット風）
   blockquote 自体を吹き出しにし、アバターは ::before、尻尾は ::after で描画する。
   → 導入文（素テキスト）／本文（<p> あり）どちらでも吹き出しになる。
   アバターサイズは体験談のユーザーアイコン（50px）に揃える。 */
.ad-card .ad-card__navi-note {
  position: relative;
  /* 上: タイトルとの間を1行分詰める / 下: すぐ下に文章が来るよう詰める
     左: アバター＋すき間の分だけ空け、吹き出しはその右に置く */
  margin: var(--space-4) 0 var(--space-2) calc(var(--ad-navi-size) + var(--space-3));
  padding: var(--space-4);
  background: var(--color-base-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
}

/* 吹き出し内に <p> 記法で書かれた場合の余白調整 */
.ad-card .ad-card__navi-note > :first-child {
  margin-top: 0;
}

.ad-card .ad-card__navi-note > :last-child {
  margin-bottom: 0;
}

.ad-card .ad-card__navi-note p {
  margin: 0 0 var(--space-3);
}

/* アバター: 吹き出しの左外側に配置 */
.ad-card .ad-card__navi-note::before {
  content: "";
  position: absolute;
  top: 0;
  left: calc(-1 * (var(--ad-navi-size) + var(--space-3)));
  width: var(--ad-navi-size);
  height: var(--ad-navi-size);
  border-radius: var(--radius-full);
  background-image: var(--ad-navi-avatar, url("../../images/ai-avatar.png"));
  background-size: cover;
  background-position: center;
  border: 1px solid var(--color-border-light);
}

/* 尻尾: 角を回転させた四角形で枠線付きの三角（左向き）を作る */
.ad-card .ad-card__navi-note::after {
  content: "";
  position: absolute;
  top: 16px;
  left: -7px;
  width: 12px;
  height: 12px;
  background: var(--color-base-1);
  border-left: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  transform: rotate(45deg);
}

/* 展開時の演出: 上品にふわっとフェードイン（わずかに下から立ち上げる） */
@keyframes ad-card-fade-in {
  0% {
    opacity: 0;
    transform: translateY(8px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.ad-card.is-expanded .ad-card__body:not([hidden]) {
  animation: ad-card-fade-in 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

@media (prefers-reduced-motion: reduce) {
  .ad-card.is-expanded .ad-card__body:not([hidden]) {
    animation: none;
  }
}

/* ── 段階表示（H3 ブロック単位）──────────────────────────
   本文は JS で H3 起点のブロックに包まれ、1ブロック目のみ表示。
   スクロールで末尾センチネルが入るたびに次ブロックを順次表示する。 */
.ad-card__block.is-pending {
  display: none;
}

/* ブロック内の先頭/末尾要素の余白を本文端で詰める（ラッパ越しでも維持） */
.ad-card__body > .ad-card__block:first-child > :first-child {
  margin-top: 0;
}

.ad-card__block.is-revealing {
  animation: ad-card-fade-in 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

/* スクロール検知用の透明センチネル（高さのみ） */
.ad-card__reveal-sentinel {
  height: 1px;
  margin: 0;
  padding: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .ad-card__block.is-revealing {
    animation: none;
  }
}

/* SP: アバターを上・吹き出しを下に積む（添付2枚目のレイアウト） */
@media (max-width: 768px) {
  .ad-card .ad-card__navi-note {
    /* 左の空きをやめ、上にアバター分の空きを確保する */
    margin-left: 0;
    margin-top: calc(var(--ad-navi-size) + var(--space-6));
  }

  /* アバターを吹き出しの上に配置 */
  .ad-card .ad-card__navi-note::before {
    top: calc(-1 * (var(--ad-navi-size) + var(--space-2)));
    left: var(--space-2);
  }

  /* 尻尾を上向き（アバター方向）に付け替える */
  .ad-card .ad-card__navi-note::after {
    top: -7px;
    left: 24px;
    border-left: 1px solid var(--color-border);
    border-bottom: 0;
    border-top: 1px solid var(--color-border);
  }
}

/* PC */
@media (min-width: 769px) {
  .ad-card {
    /* 下のボタン下余白をさらに1行分詰める（下だけ控えめに） */
    padding: var(--space-8) var(--space-8) var(--space-1);
  }

  .ad-card__title {
    font-size: var(--font-size-xl);
  }

  .ad-card__lead {
    font-size: var(--font-size-base);
  }
}

/* ============================================================
   広告内 余白ユーティリティ（導入文・本文の h / p / blockquote 等で使用）
   例) <p class="mt60">         … 上に 60px の余白
       <h3 class="mt60 mb90">   … 上に 60px・下に 90px の余白
   ・10px 刻み（0〜160px）。.ad-card 配下に限定。
   ・クラス2つ分の詳細度で要素既定マージンを上書きする（!important 不要）。
   ============================================================ */
.ad-card .mt0 { margin-top: 0; }
.ad-card .mt10 { margin-top: 10px; }
.ad-card .mt20 { margin-top: 20px; }
.ad-card .mt30 { margin-top: 30px; }
.ad-card .mt40 { margin-top: 40px; }
.ad-card .mt50 { margin-top: 50px; }
.ad-card .mt60 { margin-top: 60px; }
.ad-card .mt70 { margin-top: 70px; }
.ad-card .mt80 { margin-top: 80px; }
.ad-card .mt90 { margin-top: 90px; }
.ad-card .mt100 { margin-top: 100px; }
.ad-card .mt110 { margin-top: 110px; }
.ad-card .mt120 { margin-top: 120px; }
.ad-card .mt140 { margin-top: 140px; }
.ad-card .mt160 { margin-top: 160px; }

.ad-card .mb0 { margin-bottom: 0; }
.ad-card .mb10 { margin-bottom: 10px; }
.ad-card .mb20 { margin-bottom: 20px; }
.ad-card .mb30 { margin-bottom: 30px; }
.ad-card .mb40 { margin-bottom: 40px; }
.ad-card .mb50 { margin-bottom: 50px; }
.ad-card .mb60 { margin-bottom: 60px; }
.ad-card .mb70 { margin-bottom: 70px; }
.ad-card .mb80 { margin-bottom: 80px; }
.ad-card .mb90 { margin-bottom: 90px; }
.ad-card .mb100 { margin-bottom: 100px; }
.ad-card .mb110 { margin-bottom: 110px; }
.ad-card .mb120 { margin-bottom: 120px; }
.ad-card .mb140 { margin-bottom: 140px; }
.ad-card .mb160 { margin-bottom: 160px; }