/* 透明シンフォニア モデルカード（テンプレート挿入用）CSS v1.2
   対応：差し替え（v1.1 → v1.2／プラグイン v1.6.2）

   v1.2（2026-08-07・利用者指示）：名前の文字色をSNSの札に合わせた。

   ★このファイルの色指定は v1.1 まで一度も効いていなかった。
     スニペット ID18「全ページ背景・共通デザイン基盤」が

         #main_contents p, … { color: var(--tsym-ink-body)  !important; }
         #main_contents a, … { color: var(--tsym-ink-head2) !important; }

     を出しており、!important のため常にそちらが勝っていた。実測（Edge CDP）：

         名前     指定 #d97f9c → 実際 rgb(63,54,52)   = #3F3634（--tsym-ink-body）
         SNSの札  指定 #c97992 → 実際 rgb(179,76,95)  = #B34C5F（--tsym-ink-head2）

     つまり「名前だけ色がずれて見える」のは、名前が本文色・札が見出し色を
     当てられていたため。CSSファイルの値どうしを見比べても原因は分からない。

   ・対処：名前に var(--tsym-ink-head2) を !important で当てて札と揃える。
     ベタ書きの色ではなく札と同じ変数を使うので、サイトの配色を変えたときに
     名前と札が一緒に動く（片方だけ取り残されない）。
     セレクターは :is(#main_col,…) .cp-model-block .cp-model-name = (1,2,0) で
     ID18 の #main_contents p = (1,0,1) より詳細度が高いため、
     同じ !important どうしならこちらが勝つ。
   ★合わせる相手は「SNSの札」。出演者見出し（#9A5560 ＝ --tsym-ink-lead）ではない。

   v1.1（2026-08-06・利用者指示）：
   ・色をCLPのピンクカードに合わせた（カラーピック元＝CLPサイトCSS clp_css.css）。
       名前         #d97f9c（.cp-model-name）★v1.2で #c97992 へ変更
       リンクの札   背景 #fff4f7 / 枠 #f1c7d3 / 文字 #c97992（--cp-pink-dark）
       画像         角丸14px・影 0 10px 24px rgba(0,0,0,.05)（.cp-model-photo）
   ・配置を平日撮影会と同じ「画像が上・CTAが下」にした
     （HTML側＝CLPスニペット ID=128 v1.2 が 名前→画像→リンク の順で送ってくる）。

   ・カードのあるページだけで読み込まれる（本文に cp-model-block か [template）。
   ・テーマ TENJIKU は #main_col h3 / #main_col a のようにID詳細度で当ててくるため、
     :is(#main_col, #site_wrap, #container, #content, body) を前置きして負けないようにする。
   ・画像はCLP側で1:1にクロップ焼き込み済みのものを受信しているため、
     正方形の枠に object-fit:cover を当てるだけでクロップ位置が再現される
     （CLPのようなJSでの位置補正は不要）。
*/

:is(#main_col, #site_wrap, #container, #content, body) .cp-model-block {
  box-sizing: border-box;
  width: 320px;
  max-width: 100%;
  margin: 0 0 20px;
}

:is(#main_col, #site_wrap, #container, #content, body) .cp-model-block *,
:is(#main_col, #site_wrap, #container, #content, body) .cp-model-block *::before,
:is(#main_col, #site_wrap, #container, #content, body) .cp-model-block *::after {
  box-sizing: border-box;
}

/* ---------- 名前（色はSNSの札と同じ #c97992／v1.2） ---------- */

:is(#main_col, #site_wrap, #container, #content, body) .cp-model-block .cp-model-head {
  margin: 0 0 4px;
}

:is(#main_col, #site_wrap, #container, #content, body) .cp-model-block .cp-model-name {
  margin: 0 0 4px;
  padding: 0;
  /* v1.2：SNSの札（.cp-model-links a）と同じ変数を使う。
     !important なのは ID18 の #main_contents p が !important で
     --tsym-ink-body（#3F3634）を当ててくるため。冒頭のコメント参照。 */
  color: var(--tsym-ink-head2, #B34C5F) !important;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.03em;
}

/* wpautop 対策。
   画像を包む .cp-model-photo-frame は <span>（インライン要素）なので、
   本文が wpautop を通ると <p> で包まれることが実測で確認できている。
   その <p> の余白が入ると画像の位置がずれるため、直接の子の p だけ余白を消す。
   名前の <p class="cp-model-name"> は .cp-model-head の中なのでここには当たらない。 */
:is(#main_col, #site_wrap, #container, #content, body) .cp-model-block > p:not(.cp-model-name) {
  margin: 0;
  padding: 0;
  line-height: 0;
}

/* ---------- 画像（上・CLPの .cp-model-photo と同じ装飾） ---------- */

:is(#main_col, #site_wrap, #container, #content, body) .cp-model-block .cp-model-photo-frame {
  display: block;
  position: relative;
  width: 320px;
  max-width: 100%;
  margin: 0 0 10px;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 14px;
  background: #fff4f7;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.05);
}

:is(#main_col, #site_wrap, #container, #content, body) .cp-model-block .cp-model-photo-frame > img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  margin: 0;
  object-fit: cover;
  object-position: center;
  border: 0;
  border-radius: inherit;
}

/* aspect-ratio が使えない古い環境では、正方形をパディングで作る */
@supports not (aspect-ratio: 1 / 1) {
  :is(#main_col, #site_wrap, #container, #content, body) .cp-model-block .cp-model-photo-frame {
    height: 0;
    padding-top: 100%;
  }
  :is(#main_col, #site_wrap, #container, #content, body) .cp-model-block .cp-model-photo-frame > img {
    position: absolute;
    inset: 0;
    height: 100%;
  }
}

/* ---------- SNSリンク（下＝CTA・CLPのピンクの札と同じ） ---------- */

:is(#main_col, #site_wrap, #container, #content, body) .cp-model-block .cp-model-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
}

:is(#main_col, #site_wrap, #container, #content, body) .cp-model-block .cp-model-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 7px 14px;
  border: 1px solid #f1c7d3;
  border-radius: 999px;
  background: #fff4f7;
  color: #c97992;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  text-decoration: none;
}

/* hover はCLPのカードにも定義が無いため付けない（色を推測で作らない） */

/* wpautop が万一 <br> を差し込んでも並びが崩れないようにする（保険） */
:is(#main_col, #site_wrap, #container, #content, body) .cp-model-block .cp-model-links br {
  display: none;
}

/* ---------- スマホ ---------- */

@media (max-width: 699px) {
  :is(#main_col, #site_wrap, #container, #content, body) .cp-model-block,
  :is(#main_col, #site_wrap, #container, #content, body) .cp-model-block .cp-model-photo-frame {
    width: 100%;
  }
  :is(#main_col, #site_wrap, #container, #content, body) .cp-model-block .cp-model-name {
    font-size: 22px;
  }
}