/* ══ 金継ぎ追補スタイル（キャスティング.com テストページ共通・2026-09-01）══
   対象3ページ: performers.html / coming-soon.html / index.html
   元の規則と同じセレクタで後から上書きする。:root の変数は触らない。
   ①〜③=破れと乱れの修理（naoshi の自動処方＋手仕事）／④=演者カードの縦組み（依頼の本体）
   🔴 本体HTMLは <head> に link を1行足すだけ。中身は1行も書き換えていない。 */

/* ───────── ① 破れ: 低コントラスト（床4.5へ） ───────── */
.head .sub { color: #5C5342; }
.crumb { color: #5C5342; }
.crumb a { color: #5C5342; }
/* ⚠ `.foot` は2つのページで地の色が正反対（coming-soon=アイボリー地の div／
   01_LPテストの index=ネイビー地の footer）。共通で濃い色を当てると後者が読めなくなる
   （実際に比2.1まで落とす後退を作ってしまい、再計測で見つけて要素名で分けた）。 */
div.foot { color: #5C5342; }       /* coming-soon.html＝アイボリー地 */
.p-card .st { color: #5C5342; }
.others h2 { color: #5C5342; }

/* ⚠ 手仕事: naoshi は金 #B89A4A を #5C5342（茶灰）へ潰す処方を出したが手で差し替えた。
   金はこのLPの役割色（アイボリー×ネイビー×金の格式路線）。色相44°と彩度を保ち、
   明度だけ 50.6%→33% に落とした #786530 を当てる（地#F7F3EA で比5.18／地#FDFBF6 で比5.57）。
   飾りの菱形・罫線の金は --gold のまま＝金の印象は保つ（文字ではないので床の対象外）。 */
.title .en { color: #786530; }
.p-card .gn { color: #786530; }

/* ───────── ② 破れ: 極小文字（12px以上へ） ───────── */
#testbar { font-size: 12px; }
.head .brand { font-size: 16px; }
.head .sub { font-size: 12px; }
.crumb { font-size: 12px; }
.title .en { font-size: 12px; }
.note { font-size: 12px; }
.foot { font-size: 12px; }         /* coming-soon.html / 01_LPテストの index.html 共通（大きさは両方12pxでよい） */
.foot .todo { font-size: 12px; }   /* 01_LPテストの index.html（10px・色はネイビー地向けのまま触らない） */
#testbar button { font-size: 12px; }
.p-card .gn { font-size: 12px; }
.p-card .st { font-size: 12px; }
.others a { font-size: 13px; }
.fixed-cta .l2 { font-size: 13px; }
.modal .note { font-size: 12px; }  /* index.html の仮モーダル内（閉じている間は計測に出ないが同じ仕様でそろえる） */

/* ───────── ③ 乱れ: 角丸の種類を3種へ・似て非なる色を寄せる ───────── */
.note { border-radius: 10px; }
.back { border-radius: 10px; }
#testbar { color: #F7F3EA; }
.others a[aria-current] { color: #F7F3EA; }

/* ⚠ 地色の統合は演者一覧だけに効かせる（#list を持つページ＝performers.html）。
   coming-soon.html の .note は var(--card) ＝「カード地」の役割色なので潰さない。
   点数の都合より役割の判断を先にする（SKILL.md の掟）。 */
body:has(#list) .note { background-color: #F7F3EA; }
body:has(#list) .p-card .ph { background-color: #F7F3EA; }

/* ───────── ④ 手仕事: 演者カードを縦組みに、写真を主役の大きさへ ─────────
   依頼「演者紹介が横長が嫌。写真もちゃんともっと大きくしてほしい。
        ここでしか演者のイメージわからんのにこれだとどんな人間かわからん」
   見立て【問い2 主役】＝人を選ぶページで、人の顔が一番小さい要素になっていた。

   ⚠ 縦組みにするのは「写真が届いている方」だけ。
   写真がまだ無い方まで縦長にすると、アイコンだけの巨大な空枠が並んで
   かえって見苦しくなる（修理1巡目で実際に出た。スクショで確認して差し戻した）。
   写真の有無は既存の .has-photo で分かるので :has() で振り分ける＝HTMLは無改変。 */
.p-card:has(.ph.has-photo) {
  padding: 0;
  overflow: hidden;
}
.p-card:has(.ph.has-photo) .p-head { display: block; }

/* 写真: 74px四方 → カード幅いっぱいの縦長（4:5）。面積で約29倍 */
.p-card .ph.has-photo {
  flex: none;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  border: 0;
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
  background: #F7F3EA;
}
.p-card .ph img {
  /* 枠が大きくなったので拡大は不要。顔が中心に来る位置だけ指定 */
  transform: none;
  object-position: 50% 12%;
}

/* 名前まわり: 写真の下に置き、名前を大きく */
.p-card:has(.ph.has-photo) .info { padding: 14px 16px 0; }
.p-card:has(.ph.has-photo) .nm { font-size: 21px; }
.p-card .nm.blank { font-size: 17px; }

/* プロフィール本文（縦組みのカードだけ左右に余白を足す） */
.p-card:has(.ph.has-photo) .bio {
  margin: 13px 16px 16px;
  padding-top: 13px;
}

/* PC（760px以上）は2列。1枚が縦に伸びすぎるのを防ぐ */
@media (min-width: 760px) {
  .list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    align-items: start;
  }
}

/* PCで演者カードが細くなりすぎるので3列に（2026-09-07・代表指摘「PCで幅が足りない」の対処） */
@media (min-width: 1080px) {
  .list { grid-template-columns: repeat(3, 1fr); gap: 18px; }
}