/* ==========================================================================
   og-card-showcase.css — 店舗紹介の直前に置く「OG Card加盟店」紹介カード
   --------------------------------------------------------------------------
   店主の指示（2026-08-19）に基づく新規ブロック。旧 og-menu-preview（黒地の
   OG Menu案内）と旧 og-next-step（気になりましたか？＋3ボタン）を、
   OG CARD対応店舗に限りこの1枚に統合する。非対応店舗は従来どおり
   next-step.css の素のブロックだけを出す（このCSSは読み込まれない）。

   左: OG Card LP本体のヒーローカード（エフェクト込み・無改変）をiframeで埋め込む。
       中身は class-og-card-content.php が実店舗データ無しでそのまま出す
       「表示見本」。カードのCSS/画像はOG VIP CARD/og-card-lp-static-v2 から
       無改変でコピーしている（assets/embeds/）。カード下のサンプル注記と
       外側シャドウは、この埋め込みでは出さない（assets/embeds/og-card-hero.html
       側で個別に打ち消している）。
   右: 店舗からのコメント（Codex側の管理画面から取得予定。今はサンプル文）、
       「気になりましたか？」の問いかけ、3つの行動（保存／地図／OG Cardとは？）。

   ★2026-08-19 追記: !important の理由
   このカードは記事本文（.single-box）の内側に出力される。テーマの
   `.single-box p{font-size:18px;line-height:1.8em;margin-bottom:25px}` と
   `.single-box h2{text-align:center;padding:1.2em 2.8em;margin:72px 0 56px}`
   （角の装飾つき）は「クラス+要素」でこちらの単一クラスより詳細度が高く、
   素の指定では負けて本文と同じ見た目が漏れてくる。影響するプロパティだけ
   !important で明示的に勝たせている。
   ========================================================================== */

.og-card-showcase {
  margin: 40px 0;
  border: 1px solid var(--og-gold);
  background: var(--og-paper);
  font-family: var(--og-font);
  overflow: hidden;
}

.og-card-showcase__head {
  margin: 0 !important;
  padding: 14px 20px;
  background: var(--og-ivory);
  border-bottom: 1px solid rgba(201, 166, 98, .4);
  color: var(--og-ink);
  font-size: 16px !important;
  line-height: 1.5 !important;
  font-weight: 700;
  letter-spacing: .01em;
}

/* テーマの .single-box strong のマーカー背景を打ち消す（card-badge.css参照）。 */
.og-card-showcase__head strong {
  background: none !important;
  font-size: inherit !important;
  padding: 1px 4px;
  color: var(--og-forest);
  font-weight: 800;
}

.og-card-showcase__body {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  padding: 26px 20px 28px;
}

/* --------------------------------------------------------------------------
   左: カード見本
   -------------------------------------------------------------------------- */
.og-card-showcase__visual { min-width: 0; }

.og-card-showcase__frame {
  display: block;
  width: 100%;
  border: 0;
  /* JSが実高さに合わせて上書きする。読み込み前のガタつき防止に仮の高さを持つ。 */
  height: 300px;
  transition: height .18s ease;
}

/* --------------------------------------------------------------------------
   右: コメント・CTA
   -------------------------------------------------------------------------- */
.og-card-showcase__info { min-width: 0; }

.og-card-showcase__comment {
  padding: 16px 16px 15px;
  border: 1px solid var(--og-line);
  background: var(--og-paper);
}

.og-card-showcase__comment-label {
  margin: 0 0 8px !important;
  color: var(--og-muted);
  font-size: 11px !important;
  line-height: 1.4 !important;
  font-weight: 700;
  letter-spacing: .12em;
}

.og-card-showcase__comment-text {
  margin: 0 !important;
  color: var(--og-ink-soft);
  font-size: 14.5px !important;
  line-height: 1.85 !important;
}

/* ★2026-08-19 改訂: 見出し上の飾りを ::before の疑似要素からやめた。
   テーマの .single-box h2::before/::after は「クラス+要素+疑似要素」で
   詳細度が高く、width/height/border-radius だけテーマ側（46px・角丸12px）が
   勝ってしまい、意図した細い線ではなく丸い金色の箱になっていた
   （プロパティ単位で勝ち負けが混ざる、疑似要素との詳細度勝負は再発しやすい）。
   実要素（.og-card-showcase__eyebrow）に置き換え、記事内の他の見出し
   （NEXT STEP／OG Card Members）と同じ「アイボー＋見出し」の型に揃える。 */
/* .og-hud（font-family/letter-spacing/text-transform/font-weight）はテーマの
   .single-box p と競合しないのでそのまま効く。font-size/line-height/margin
   だけテーマの方が詳細度で勝つため、ここで !important をつけて上書きする。 */
.og-card-showcase__eyebrow {
  margin: 28px 0 10px !important;
  font-size: 11px !important;
  line-height: 1.4 !important;
  text-align: center;
  /* ゴールドは淡い色で、この面（明るい紙色）では文字として読みにくいため、
     他のアイボー（NEXT STEP等）と同じフォレストグリーンにする。 */
  color: var(--og-forest-line);
}

.og-card-showcase__question {
  margin: 0 0 20px !important;
  padding: 0 !important;
  text-align: center !important;
  color: var(--og-ink);
  font-size: 21px !important;
  line-height: 1.55 !important;
  font-weight: 700;
  letter-spacing: .02em;
}

.og-card-showcase__question::before,
.og-card-showcase__question::after {
  content: none !important;
}

.og-card-showcase__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 8px;
  margin: 0;
}

/* 3つとも同じ高さに揃える。align-items:stretch だけでは環境によって
   効かないことがあったため、各ボタン側にも明示しておく。 */
.og-card-showcase__actions .og-btn {
  flex: 1 1 100%;
  align-self: stretch;
  height: auto;
}

@media (min-width: 480px) {
  .og-card-showcase__actions .og-btn { flex: 1 1 calc(50% - 8px); }
}

@media (min-width: 860px) {
  .og-card-showcase__body {
    grid-template-columns: 300px 1fr;
    align-items: start;
    padding: 30px 26px 30px;
  }
  .og-card-showcase__actions .og-btn { flex: 1 1 0; }
}