/* =========================================================
   COLUMN PERSONALITY DETAIL
   personality_detail* スラッグのコラム本文を、診断結果ページ
   （personality.css の .pg-result-area 内 .pg-detail-section）
   と同じ「白カードを並べる」構造で見せる。
   .cd-card--personality .cd-body 配下にスコープ。

   配色方針:
   - セクション: 白カード + 薄い罫線（pg-detail-section 同等）
   - 見出しラベル: 控えめなテキスト + 薄い下罫 + 先頭にブルーのアイコン
     （pg-detail-label 同等）
   - 本文: 通常テキスト、strong は控えめなゴールドの下半分ハイライト
   - cd-case: 薄ベージュ + ゴールド左罫（pg-scene 同等）
   - cd-feature-list: 白の小カードを並べる
   - cd-toc: 薄クリーム + ベージュ罫
   - キャッチ（cd-catch）: 中央寄せ太字 + 両脇に短いゴールドの水平線
   - 末尾CTA（.cd-cta）: ここだけブルー → ネイビーのグラデ

   セクション運用:
   - Excel本文側で h2 + 続く要素を <section class="cd-personality-section">
     でラップする方針
   - 見出しは <h2 class="cd-personality-label" id="sX">
       <i class="ph-fill ph-star-four"></i>テキスト</h2>
     とし、アイコンはブルーで統一
   ========================================================= */

/* ---------- ローカル変数 ---------- */
.cd-card--personality {
  --clp-gold: var(--color-lavender);
  --clp-gold-strong: var(--color-lavender-deep);
  --clp-text-soft: var(--color-lavender-text);
  --clp-beige: var(--color-lavender-soft);
  --clp-beige-bd: var(--color-lavender-border);
  --clp-cream-bg: linear-gradient(180deg, #fafbff 0%, #ffffff 100%);
}

/* タイトルアイコン（カード上部のリーディングアイコン）はブルー側に */
.cd-card--personality .cd-title-icon {
  color: var(--clr-brand);
}

/* =========================================================
   キャッチ（cd-catch）
   中央寄せ太字 + 両脇に短い水平線（ゴールド）
   ========================================================= */
.cd-card--personality .cd-body .cd-catch {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 4px auto var(--sp-md);
  padding: 0;
  text-align: center;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: 0.04em;
  color: var(--clr-text);
  background: none;
  border: 0;
  border-radius: 0;
}
.cd-card--personality .cd-body .cd-catch::before,
.cd-card--personality .cd-body .cd-catch::after {
  content: '';
  flex: 0 0 auto;
  width: 28px;
  height: 1px;
  background: var(--clp-gold);
}

/* キャッチ直後のリード文（最初の段落） */
.cd-card--personality .cd-body .cd-catch + p {
  font-size: 0.95rem;
  line-height: 1.9;
  color: var(--clr-text);
  text-align: left;
  margin-bottom: var(--sp-lg);
  padding: 0;
}

/* =========================================================
   セクション（cd-personality-section）
   ─ 通常コラム（.cd-card--personality のみ）: 線囲みなし。
     h2 + その配下のpを論理的にまとめるラッパとしてだけ機能する。
   ─ 取扱説明書（.cd-card--personality-detail も付く）: 白カード + 薄罫 + 角丸 + パディング
     pg-detail-section 同等の装飾。
   ========================================================= */

/* 通常コラム共通：枠なし、レイアウトのためのマージンだけ。
   枠で囲まれていないぶん、節と節の間隔は控えめにして「区切り感」を抑える。 */
.cd-card--personality .cd-body .cd-personality-section {
  margin: var(--sp-sm) 0;
}

/* 取扱説明書専用：白カード化（こちらは枠があるので margin を確保） */
.cd-card--personality-detail .cd-body .cd-personality-section {
  margin: var(--sp-md) 0;
  border: 1px solid var(--clr-border);
  border-radius: var(--r-md);
  padding: 16px 18px;
  background: var(--clr-white);
}

/* セクション内の最初/最後の要素のマージン調整（取扱説明書のみカード内余白制御） */
.cd-card--personality-detail .cd-body .cd-personality-section > :first-child {
  margin-top: 0;
}
.cd-card--personality-detail .cd-body .cd-personality-section > :last-child {
  margin-bottom: 0;
}

/* =========================================================
   見出しラベル（cd-personality-label / 兼 h2）
   pg-detail-label 同等：控えめテキスト + 薄い下罫 + ブルーのアイコン
   ========================================================= */
.cd-card--personality .cd-body .cd-personality-label,
.cd-card--personality .cd-body h2.cd-personality-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  padding: 0 0 10px;
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.45;
  color: var(--clr-text);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--clr-border);
  border-radius: 0;
}
.cd-card--personality .cd-body .cd-personality-label i,
.cd-card--personality .cd-body h2.cd-personality-label i {
  color: var(--clr-brand);
  font-size: 1rem;
  flex-shrink: 0;
}

/* 通常コラムのh2先頭の数字プレフィックス（01・02・03…） */
.cd-card--personality .cd-body .cd-personality-label .cd-personality-num {
  font-family: var(--font-en);
  font-size: 0.85em;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--clr-brand);
  flex-shrink: 0;
  line-height: 1;
}

/* h2（cd-personality-label が付いていない素のh2 — 互換） */
.cd-card--personality .cd-body h2:not(.cd-personality-label) {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: var(--sp-lg) 0 12px;
  padding: 0 0 8px;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  line-height: 1.4;
  color: var(--clr-text-muted);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--clr-border);
  border-radius: 0;
}
.cd-card--personality .cd-body h2:not(.cd-personality-label)::before {
  content: '\e8d4'; /* fallback: visually unicode bullet — actual icon not injected */
  display: none;
}

/* =========================================================
   H3（pg-detail-sub に寄せた小ラベル）
   ========================================================= */
.cd-card--personality .cd-body h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  margin: var(--sp-md) 0 8px;
  padding: 0;
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.5;
  color: var(--clp-text-soft);
  border: 0;
  background: none;
}
.cd-card--personality .cd-body h3::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--clp-gold);
  flex-shrink: 0;
}

/* =========================================================
   段落
   ========================================================= */
.cd-card--personality .cd-body p {
  font-size: 0.95rem;
  line-height: 1.9;
  margin-bottom: 1.2em;
  color: var(--clr-text);
}
.cd-card--personality .cd-body p strong {
  color: var(--clr-text);
  font-weight: inherit;
  background: none;
  padding: 0;
  text-decoration: underline;
  text-decoration-color: var(--clp-gold);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}

/* 注記（段落の中身が丸ごと <em>）— 免責文・相談窓口の案内など。
   本文(0.95rem)より一段小さくして、補足であることを視覚的に示す。 */
.cd-card--personality .cd-body p:has(> em:only-child) {
  font-size: var(--fs-xs); /* 0.75rem */
  line-height: 1.8;
  color: var(--clr-text-muted);
}
.cd-card--personality .cd-body p:has(> em:only-child) em {
  font-style: normal;
}

/* =========================================================
   ケーススタディ（cd-case）— pg-scene 同等
   ベージュ背景 + ゴールド左罫
   ========================================================= */
.cd-card--personality .cd-body .cd-case {
  position: relative;
  margin: 12px 0 var(--sp-md);
  padding: 12px 14px 12px 16px;
  background: var(--clp-beige);
  border: 0;
  border-left: 3px solid var(--clp-gold);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  font-size: 0.92rem;
  line-height: 1.8;
  color: var(--clr-text);
}
.cd-card--personality .cd-body .cd-case em {
  display: inline-block;
  margin: 0 0 6px;
  padding: 0;
  background: none;
  color: var(--clp-text-soft);
  font-size: var(--fs-xs);
  font-weight: 800;
  font-style: normal;
  letter-spacing: 0.1em;
  border: 0;
  border-radius: 0;
}
.cd-card--personality .cd-body .cd-case em::before {
  content: '— ';
  color: var(--clp-gold-strong);
}

/* =========================================================
   フィーチャーリスト（cd-feature-list）
   白の小カードを縦に並べる
   ========================================================= */
.cd-card--personality .cd-body .cd-feature-list {
  list-style: none;
  padding: 0;
  margin: 8px 0 var(--sp-md);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cd-card--personality .cd-body .cd-feature-list li {
  position: relative;
  padding: 10px 12px 10px 28px;
  background: var(--clr-white);
  border: 1px solid var(--clr-border);
  border-radius: var(--r-sm);
  line-height: 1.7;
  font-size: 0.92rem;
  color: var(--clr-text);
  transition: border-color var(--tr), box-shadow var(--tr);
}
.cd-card--personality .cd-body .cd-feature-list li::before {
  content: '';
  position: absolute;
  left: 12px;
  top: 1.05em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--clp-gold);
}
.cd-card--personality .cd-body .cd-feature-list li:hover {
  border-color: var(--clp-gold);
  box-shadow: 0 4px 12px rgba(212, 169, 122, 0.15);
}
.cd-card--personality .cd-body .cd-feature-list li strong {
  display: block;
  margin-bottom: 4px;
  color: var(--clr-text);
  font-weight: 700;
  background: none;
  padding: 0;
}

/* =========================================================
   向く職業の例（cd-personality-jobs / cd-personality-job）
   personality.css の .pg-detail-jobs / .pg-detail-job と同等：
   箇条書きビュレットを外して、各項目に「—」プレフィックスを表示
   ========================================================= */
.cd-card--personality .cd-body .cd-personality-jobs {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 4px 0 var(--sp-md);
  padding: 0;
}
.cd-card--personality .cd-body .cd-personality-jobs .cd-personality-job {
  font-size: 0.95rem;
  color: var(--clr-text);
  padding: 2px 0;
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 0;
  border-radius: 0;
  line-height: 1.7;
}
.cd-card--personality .cd-body .cd-personality-jobs .cd-personality-job::before {
  content: '—';
  color: var(--clr-text-muted);
  font-size: 0.85rem;
  flex-shrink: 0;
}

/* =========================================================
   目次（cd-toc）— ベージュ系に寄せる
   ========================================================= */
.cd-card--personality .cd-body .cd-toc {
  background: var(--clp-cream-bg);
  border: 1px solid var(--clp-beige-bd);
  border-radius: var(--r-md);
  padding: var(--sp-md) var(--sp-lg);
  margin: var(--sp-md) 0 var(--sp-xl);
}
.cd-card--personality .cd-body .cd-toc-title {
  color: var(--clp-text-soft);
  font-weight: 800;
  letter-spacing: 0.06em;
}
.cd-card--personality .cd-body .cd-toc-title i {
  color: var(--clr-brand);
}
.cd-card--personality .cd-body .cd-toc .cd-toc-list a {
  color: var(--clr-text);
}
.cd-card--personality .cd-body .cd-toc .cd-toc-list a:hover,
.cd-card--personality .cd-body .cd-toc .cd-toc-list a:hover .cd-toc-arrow {
  color: var(--clr-brand);
}
.cd-card--personality .cd-body .cd-toc .cd-toc-list li {
  border-top-color: var(--clp-beige-bd);
}
.cd-card--personality .cd-body .cd-toc-num {
  color: var(--clr-brand);
  font-weight: 800;
}

/* スムーズスクロール（H2アンカー遷移時） */
html { scroll-behavior: smooth; }
.cd-card--personality .cd-body h2[id] {
  scroll-margin-top: calc(var(--header-h, 80px) + 16px);
}

/* =========================================================
   末尾CTA（.cd-cta）— personality.css の .pg-start-btn と同仕様
   ブルー×ティール基調、ふわっと光るパルス + ホバー時のシャイン
   ========================================================= */
.cd-card--personality .cd-body .cd-cta {
  text-align: center;
  margin-top: var(--sp-xl);
  margin-bottom: var(--sp-md);
}
/* 取扱説明書のとき、cd-cta がセクション最終要素になり親側で margin-bottom: 0 が当たって
 * 「もう一度診断する」ボタンが下端にぴったり張り付く問題を解消。
 * セクション内でも CTA 直下に呼吸スペースを確保する。 */
.cd-card--personality-detail .cd-body .cd-personality-section > .cd-cta:last-child {
  margin-bottom: var(--sp-md);
}
/* .cd-back / .lower-back-btn / .qd-back と同じピル形状に揃える。
 * これらの「戻る」系ボタンと縦に並んだ／隣接したときの不揃いを解消し、
 * サイト内の二次アクションボタンのリズムを統一する。 */
.cd-card--personality .cd-body .cd-cta a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: min(100%, 236px);
  width: auto;
  position: relative;
  overflow: hidden;
  margin: 0 auto;
  padding: 10px 28px;
  background: var(--clr-white);
  color: var(--clr-text-muted);
  border: 1.5px solid var(--clr-border);
  border-radius: var(--r-full);
  font-size: var(--fs-base);
  font-weight: 500;
  font-family: var(--font-jp);
  text-align: center;
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  transition: color var(--tr), border-color var(--tr), background-color var(--tr);
}
.cd-card--personality .cd-body .cd-cta a i {
  color: var(--clr-brand);
  font-size: 0.9em;
  line-height: 1;
  display: flex;
  align-items: center;
}
@media (hover: hover) {
  .cd-card--personality .cd-body .cd-cta a:hover {
    color: var(--clr-brand);
    border-color: var(--clr-brand);
    background: var(--clr-brand-light);
  }
}
.cd-card--personality .cd-body .cd-cta a:active {
  transform: scale(0.97);
}
/* シャイン */
.cd-card--personality .cd-body .cd-cta a::after {
  content: none;
}
@media (hover: hover) {
  .cd-card--personality .cd-body .cd-cta a:hover::after {
    animation: none;
  }
}

/* =========================================================
   SP調整
   ========================================================= */
@media (max-width: 767px) {
  .cd-card--personality .cd-body .cd-catch {
    font-size: 0.95rem;
    gap: 10px;
  }
  .cd-card--personality .cd-body .cd-catch::before,
  .cd-card--personality .cd-body .cd-catch::after {
    width: 20px;
  }
  .cd-card--personality .cd-body .cd-catch + p {
    font-size: 0.94rem;
    line-height: 1.85;
  }
  .cd-card--personality .cd-body .cd-personality-section {
    padding: 14px 14px;
    margin: var(--sp-sm) 0;
  }
  .cd-card--personality .cd-body .cd-personality-label,
  .cd-card--personality .cd-body h2.cd-personality-label,
  .cd-card--personality .cd-body h2:not(.cd-personality-label) {
    font-size: 0.95rem;
    letter-spacing: 0.04em;
  }
  .cd-card--personality .cd-body h3 {
    font-size: 0.88rem;
  }
  .cd-card--personality .cd-body p {
    font-size: 0.94rem;
    line-height: 1.85;
  }
  .cd-card--personality .cd-body .cd-feature-list li {
    padding: 9px 10px 9px 24px;
    font-size: 0.9rem;
  }
  .cd-card--personality .cd-body .cd-personality-jobs .cd-personality-job {
    font-size: 0.92rem;
  }
  .cd-card--personality .cd-body .cd-feature-list li::before {
    left: 10px;
  }
  .cd-card--personality .cd-body .cd-case {
    padding: 10px 12px 10px 14px;
    margin: 8px 0 var(--sp-sm);
    font-size: 0.9rem;
  }
  .cd-card--personality .cd-body .cd-toc {
    padding: var(--sp-sm) var(--sp-md);
  }
  .cd-card--personality .cd-body .cd-cta {
    margin-top: var(--sp-lg);
    margin-bottom: var(--sp-lg);
  }
}