/* =========================================================================
   Trust Source — Works #001〜 専用CSS  v3（既存Works詳細レイアウト整合）
   - 既存 single.php / .post-erea / .card-blog / .btn の中に自然に同居させる
   - 基準 1rem=10px・赤基調（v2 を維持）。緑なし。新色なし（var(--c-*) 継承）
   - How Panel / Evidence は content 列内 100%（全幅独自パネル感を弱める）
   - すべて .ts-unit 配下にスコープ
   ========================================================================= */

.ts-unit { color: var(--c-font); }

/* ---------- Dek（タイトル下の Creative リード。巨大Heroの代替） ---------- */
.ts-dek { border-left: 4px solid var(--c-main); padding: .2em 0 .2em 1.2em; margin: 1em 0 .5em; }
.ts-dek-lead { font-size: clamp(1.8rem, 2.6vw, 2.2rem); font-weight: 700; line-height: 1.6; color: var(--c-font); margin: 0 0 .5em; }
.ts-dek-sub { font-size: 1.6rem; line-height: 1.8; color: #555; margin: 0 0 .6em; }
.ts-dek-tag { display: inline-block; font-size: 1.3rem; font-weight: 600; color: var(--c-main); border: 1px solid var(--c-sub); border-radius: 999px; padding: .25em 1em; }

/* ---------- 本文中の見出し（投稿本文 <h2>）＝ 赤・下線で .h-2 に接続 ---------- */
.ts-unit .post-erea h2 {
  color: var(--c-head);
  font-size: clamp(2.2rem, 4vw, 3rem);
  font-weight: 700;
  line-height: 1.4;
  border-bottom: 2px solid var(--c-border);
  padding-bottom: .25em;
  margin: 2em 0 .7em;
}

/* 共通の小キッカー＋見出し（How / Evidence のラベル） */
.ts-unit .ts-kicker { color: var(--c-main); font-weight: 700; font-size: 2rem; margin: 0 0 .4em; }
.ts-unit .ts-h2 { color: var(--c-head); font-size: clamp(2.2rem, 4vw, 3rem); font-weight: 700; line-height: 1.4; margin: 0 0 .5em; }
.ts-unit .ts-lead { font-size: 1.7rem; line-height: 1.85; margin: 0 0 1.2em; }

/* =========================================================================
   How Panel（Fact）— content 列内・カードトーン・bullet 撤廃・◎ は badge
   ========================================================================= */
.ts-how { background: var(--c-bg); border-radius: 12px; padding: 2.8rem 2.2rem; margin: 3rem 0; }
.ts-how-head { margin: 0 0 1.8rem; }
.ts-how-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.4rem; align-items: stretch; }
/* 4カードのベース外枠は均一。moved の意味は項目の ◎ badge が担う（カード枠では表さない） */
.ts-how-layer { background: var(--c-white); border: 1px solid var(--c-border); border-radius: 10px; padding: 1.8rem; filter: drop-shadow(0 1px 3px rgba(0,0,0,.10)); }
.ts-how-layer-head { border-bottom: 1px solid var(--c-border); padding-bottom: .7em; margin-bottom: .8em; }
.ts-how-label { display: block; font-weight: 700; font-size: 2rem; line-height: 1.3; }
.ts-how-en { display: block; font-size: 1.3rem; color: var(--c-main); letter-spacing: .06em; margin-top: .2em; }
.ts-how-desc { display: block; font-size: 1.4rem; color: #666; margin-top: .4em; line-height: 1.5; }

/* bullet を確実に消す（.post-erea ul 0,1,1 に勝つ 0,3,0 指定）＋ 項目を row 化 */
.ts-unit .post-erea .ts-how-items { list-style: none; margin: 0; padding-left: 0; }
.ts-unit .post-erea .ts-how-items li { margin: 0; }
.ts-how-item { font-size: 1.6rem; line-height: 1.6; padding: .5em 0; display: flex; gap: .6em; align-items: baseline; border-top: 1px solid var(--c-bg); }
.ts-how-item:first-child { border-top: 0; }
.ts-how-item.is-moved { font-weight: 700; }
/* ◎ を独立した moved badge に（bullet と衝突しない） */
.ts-how-item .ts-mark { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 2.2rem; height: 2.2rem; border-radius: 999px; background: var(--c-bg-pink); color: var(--c-head); font-size: 1.3rem; font-weight: 700; line-height: 1; }
.ts-how-item-label { flex: 0 1 auto; }
.ts-how-foot { margin: 1.8rem 0 0; font-size: 1.4rem; color: #555; }
.ts-how-foot .ts-mark { display: inline-flex; align-items: center; justify-content: center; width: 1.9rem; height: 1.9rem; border-radius: 999px; background: var(--c-bg-pink); color: var(--c-head); font-size: 1.2rem; font-weight: 700; vertical-align: middle; }

/* =========================================================================
   Evidence（証拠）— content 列内・白面＋赤上罫・ピンク強調・灰/赤バー
   ========================================================================= */
.ts-evidence { background: var(--c-white); border: 1px solid var(--c-border); border-top: 4px solid var(--c-head); border-radius: 10px; padding: 2.8rem 2.2rem; margin: 3rem 0; }
.ts-ev-head { margin: 0 0 1.6rem; }
.ts-ev-tablewrap { overflow-x: auto; }
.ts-ev-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.ts-ev-source { caption-side: top; text-align: left; font-size: 1.4rem; color: #555; padding: 0 0 .8em; }
.ts-ev-table th, .ts-ev-table td { border-bottom: 1px solid var(--c-border); padding: .8em .8em; text-align: right; font-size: 1.6rem; }
.ts-ev-table thead th { background: var(--c-bg); font-size: 1.5rem; color: var(--c-font); font-weight: 700; }
.ts-ev-table th[scope="row"] { text-align: left; font-weight: 500; }
.ts-ev-table tr.is-emphasis { background: var(--c-bg-pink); }
.ts-ev-table tr.is-emphasis th[scope="row"] { font-weight: 700; }
.ts-ev-table tr.is-emphasis .ts-ev-change { color: var(--c-head); font-weight: 700; }
.ts-ev-note { display: block; font-size: 1.3rem; color: #666; font-weight: 400; line-height: 1.5; }

.ts-ev-graph { margin: 2.4rem 0 0; }
.ts-ev-graph-cap { font-size: 1.5rem; font-weight: 700; margin: 0 0 .8em; }
.ts-ev-graph svg { width: 100%; height: auto; }
.ts-svg-label { font-size: 16px; fill: var(--c-font); }
.ts-svg-val { font-size: 14px; fill: #555; }
.ts-svg-before { fill: #cfcfcf; }
.ts-svg-after { fill: var(--c-main); }
.ts-ev-graph-foot { font-size: 1.3rem; color: #555; margin: .8em 0 0; line-height: 1.6; }

.ts-ev-reading { font-size: 1.7rem; line-height: 1.9; margin: 2.2rem 0; }

/* 限界注記（小さくしない＝サイズで対等な重量・ニュートラル面） */
.ts-ev-limit { background: var(--c-bg); border: 1px solid var(--c-border); border-left: 5px solid var(--c-sub); border-radius: 6px; padding: 2rem 2.2rem; margin: 2.4rem 0 0; }
.ts-ev-limit-head { font-size: 1.7rem; font-weight: 700; margin: 0 0 .8em; }
.ts-ev-limit-list { margin: 0 0 1em; padding-left: 1.3em; }
.ts-ev-limit-list li { font-size: 1.6rem; line-height: 1.85; margin: .6em 0; }
.ts-ev-limit-foot { font-size: 1.6rem; line-height: 1.85; margin: 0; }

/* ---------- Atmosphere Asset（画像があれば表示・無ければ非描画） ---------- */
.ts-asset { margin: 2.4rem 0; }
.ts-asset img { width: 100%; height: auto; border-radius: 10px; display: block; }
.ts-asset-cap { font-size: 1.3rem; color: #555; margin: .6em 0 0; }

/* =========================================================================
   Continue CTA（3つの改善カード＋相談ボタン・売り込まない）
   ========================================================================= */
.ts-cta-invite { font-size: 1.7rem; line-height: 1.9; margin: 0 0 1.8rem; }
.ts-cta-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr)); gap: 1.6rem; }
.ts-cta-card { display: flex; flex-direction: column; gap: .5em; background: var(--c-white); border: 1px solid var(--c-border); border-top: 3px solid var(--c-head); border-radius: 10px; padding: 1.8rem; text-decoration: none; color: var(--c-font); filter: drop-shadow(0 1px 3px rgba(0,0,0,.10)); transition: transform .2s, box-shadow .2s; }
.ts-cta-card:hover { transform: translateY(-3px); }
.ts-cta-card-title { font-size: 1.9rem; font-weight: 700; color: var(--c-head); }
.ts-cta-card-desc { font-size: 1.5rem; line-height: 1.7; color: var(--c-font); }
.ts-cta-card-more { font-size: 1.4rem; color: var(--c-link); margin-top: auto; }
.ts-cta-card-more::after { content: " →"; }

/* =========================================================================
   匿名注記（14px 以上・ニュートラル）
   ========================================================================= */
.ts-anon { margin: 3rem 0 0; }
.ts-anon-note { font-size: 1.4rem; color: #555; line-height: 1.9; border-top: 1px solid var(--c-border); padding-top: 1.6rem; }

/* =========================================================================
   レスポンシブ（SP）
   ========================================================================= */
@media (max-width: 768px) {
  .ts-how { padding: 2rem 1.4rem; }
  .ts-how-grid { grid-template-columns: 1fr; gap: 1.2rem; }
  .ts-evidence { padding: 2rem 1.4rem; }
  .ts-ev-table th, .ts-ev-table td { padding: .6em .5em; font-size: 1.5rem; }
  .ts-cta-cards { grid-template-columns: 1fr; }
}