/**
 * shindan-pages.css
 * 診断ページ(single-sb_shindan / single-sb_result)専用スタイル
 * .sb-shindan-scope クラスでスコープを限定し、他ページに影響しない
 *
 * 2026-05-20朝 絵文字を削除しSVGアイコンに統一(ECDAO指摘修正)
 *
 * @package shindan-buzz
 */

/* ============================================================
   個人情報の取り扱いセクション
   ============================================================ */

.sb-shindan-scope .sb-shindan-privacy {
  margin: 32px 0;
  padding: 24px;
  border-radius: 16px;
  background: var(--sb-bg, #f9fafb);
  border: 1px solid var(--sb-border, #e5e7eb);
}

/* この診断を友達にシェア:結果ページ同様のアイコンタイルをミニマムな囲いで(ECDAO 2026-05-21) */
.sb-shindan-scope .sb-shindan-share {
  margin: 32px 0;
  padding: 24px;
  border-radius: 16px;
  background: #2e3e4f;
  border: 1px solid #2e3e4f;
}

.sb-shindan-scope .sb-shindan-privacy .sb-shindan-section-h2 {
  margin: 0 0 16px;
  font-size: 15px;
  font-weight: 700;
  color: var(--sb-text, #1f2937);
  display: flex;
  align-items: center;
  gap: 8px;
}

/* h2 内の SVG アイコン(sb_icon で付与される .sb-svg を制御) */
.sb-shindan-scope .sb-shindan-privacy .sb-shindan-section-h2 .sb-svg {
  flex-shrink: 0;
  color: var(--sb-accent, #fbbf24);
}

.sb-shindan-scope .sb-shindan-privacy-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.sb-shindan-scope .sb-shindan-privacy-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  background: #ffffff;
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--sb-text, #1f2937);
}

/* li 内の SVG アイコン(緑チェック) */
.sb-shindan-scope .sb-shindan-privacy-list li .sb-svg {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 3px;
  padding: 2px;
  background: #10b981;
  color: #ffffff;
  border-radius: 50%;
  box-sizing: border-box;
}

.sb-shindan-scope .sb-shindan-privacy-list li strong {
  display: inline;
  margin-right: 4px;
  color: var(--sb-text, #1f2937);
  font-weight: 700;
}

.sb-shindan-scope .sb-shindan-privacy-note {
  margin: 14px 0 0;
  font-size: 11px;
  color: var(--sb-text-muted, #6b7280);
  text-align: center;
}

.sb-shindan-scope .sb-shindan-privacy-note a {
  color: var(--sb-link, #3b82f6);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.sb-shindan-scope .sb-shindan-privacy-note a:hover {
  text-decoration: none;
}

/* ============================================================
   Disclaimer(注意事項・免責)補強セクション
   ============================================================ */

.sb-shindan-scope .sb-shindan-disclaimer {
  margin: 24px 0;
  padding: 20px 24px;
  border-radius: 14px;
  background: var(--sb-bg, #f9fafb);
  border-left: 0;
}

.sb-shindan-scope .sb-shindan-disclaimer .sb-shindan-section-h2 {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 700;
  color: var(--sb-text, #1f2937);
  display: flex;
  align-items: center;
  gap: 6px;
}

/* 診断系 section-h2 の ::before 装飾を無効化(ECDAO指示 2026-05-20) */
.sb-shindan-scope .sb-shindan-section-h2::before {
  display: none;
}

/* h2 内の SVG アイコン(注意マーク) */
.sb-shindan-scope .sb-shindan-disclaimer .sb-shindan-section-h2 .sb-svg {
  flex-shrink: 0;
  color: var(--sb-accent, #fbbf24);
}

.sb-shindan-scope .sb-shindan-disclaimer p {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.8;
  color: var(--sb-text-muted, #4b5563);
}

.sb-shindan-scope .sb-shindan-disclaimer p:last-child {
  margin-bottom: 0;
}

.sb-shindan-scope .sb-shindan-disclaimer strong {
  color: var(--sb-text, #1f2937);
  font-weight: 700;
}

.sb-shindan-scope .sb-shindan-disclaimer a {
  color: var(--sb-link, #3b82f6);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.sb-shindan-scope .sb-shindan-disclaimer a:hover {
  text-decoration: none;
}

/* ============================================================
   レスポンシブ調整
   ============================================================ */

@media (max-width: 640px) {
  .sb-shindan-scope .sb-shindan-privacy {
    padding: 20px;
  }

  .sb-shindan-scope .sb-shindan-privacy .sb-shindan-section-h2 {
    font-size: 16px;
  }

  .sb-shindan-scope .sb-shindan-privacy-list li {
    font-size: 13px;
    padding: 10px 12px;
  }

  .sb-shindan-scope .sb-shindan-disclaimer {
    padding: 16px 20px;
  }

  .sb-shindan-scope .sb-shindan-disclaimer .sb-shindan-section-h2 {
    font-size: 15px;
  }

  .sb-shindan-scope .sb-shindan-disclaimer p {
    font-size: 13px;
  }
}
/* ============================================================
   ニックネーム入力欄(診断前画面)
   shindanbuzz.css のデフォルトはダーク背景前提だが、
   実装上は白背景の上に置かれるため、白背景でも視認できるよう上書き
   ============================================================ */

.sb-shindan-scope .sb-quiz-nickname-input {
  background: #ffffff;
  color: #1a1a24;
  border: 1px solid #d1d5db;
  font-size: 15px;
  transition: background 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}

.sb-shindan-scope .sb-quiz-nickname-input::placeholder {
  color: #9ca3af;
  font-weight: 400;
}

.sb-shindan-scope .sb-quiz-nickname-input:focus {
  background: #ffffff;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(255, 214, 10, 0.25);
}
/* ニックネーム入力欄のラベル(白背景でも読める色に上書き) */
.sb-shindan-scope .sb-quiz-nickname-label {
  color: #6b7280;
}
/* ============================================================
   結果ページ 2カラムヒーロー(2026-05-20朝 新デザイン)
   左:結果カード画像 / 右:情報 + シェア + 親診断カード
   モバイル(〜768px)で縦積み
   ============================================================ */

/* ●●さんの診断結果ピル(最上部、中央配置) */
.sb-shindan-scope .sb-result-greeting-bar {
  display: flex;
  justify-content: center;
  margin: 0 0 24px;
}

.sb-shindan-scope .sb-result-greeting-pill {
  margin: 0;
  padding: 8px 20px;
  background: #1a1a24;
  color: #ffffff;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.02em;
}

.sb-shindan-scope .sb-result-greeting-name {
  color: var(--accent, #FFD60A);
  font-weight: 700;
}

/* PC:2カラムグリッド(左:カード画像 / 右:情報+シェア+親診断カード)
   モバイル(〜768px):1カラム縦積み
   サイドバー無し前提でヒーロー部分は2カラムフル幅で広く使える */
.sb-shindan-scope .sb-result-hero-2col {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 32px;
  margin: 0 0 40px;
  align-items: start;
}

@media (max-width: 768px) {
  .sb-shindan-scope .sb-result-hero-2col {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

/* 左カラム:結果カード画像 */
.sb-shindan-scope .sb-result-hero-card {
  position: relative;
  animation: sb-card-reveal 0.72s cubic-bezier(0.2, 1.05, 0.35, 1) both;
  will-change: transform, opacity, filter;
}

/* 結果カード登場:ぼやけた状態から上から落ちてドンッと弾む(ECDAO確定 2026-05-21) */
@keyframes sb-card-reveal {
  0%   { transform: translateY(-480px) scale(0.9);  opacity: 0; filter: blur(12px); }
  45%  { opacity: 1; }
  60%  { filter: blur(0); }
  80%  { transform: translateY(10px) scale(1.03); }
  100% { transform: translateY(0) scale(1);  opacity: 1; filter: blur(0); }
}

/* 動きを減らす設定の端末ではアニメを無効化 */
@media (prefers-reduced-motion: reduce) {
  .sb-shindan-scope .sb-result-hero-card { animation: none; }
}

.sb-shindan-scope .sb-result-hero-card .sb-result-card-figure {
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.08);
}

.sb-shindan-scope .sb-result-hero-card .sb-result-card-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.sb-shindan-scope .sb-result-hero-card .sb-result-card-placeholder {
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #f3f4f6;
  border-radius: 16px;
  text-align: center;
  padding: 24px;
}

/* 情報パネル(カード画像の下に縦積み) */
.sb-shindan-scope .sb-result-hero-info {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 600px;
  width: 100%;
  margin: 0 auto;
  align-items: stretch;
  /* text-align: left !important; */
}

/* ピル群(○○さんの結果 / カテゴリ / 診断名) */
.sb-shindan-scope .sb-result-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  justify-content: left;
}

.sb-shindan-scope .sb-result-pill {
  margin: 0;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.sb-shindan-scope .sb-result-pill--name {
  background: #1a1a24;
  color: #ffffff;
}

.sb-shindan-scope .sb-result-pill--name span[data-sb-name] {
  color: var(--accent, #FFD60A);
  font-weight: 700;
}

.sb-shindan-scope .sb-result-pill--cat {
  background: #f3e8ff;
  color: #6b21a8;
}

.sb-shindan-scope .sb-result-pill--dx {
  background: #ffe4e6;
  color: #be123c;
}

/* タイトル(タイプ名) */
.sb-shindan-scope .sb-result-hero-info .sb-result-title {
  margin: 4px 0 0;
  font-size: 28px;
  font-weight: 800;
  line-height: 1.4;
  color: #1a1a24;
  letter-spacing: -0.01em;
  text-align: left;
}

@media (max-width: 768px) {
  .sb-shindan-scope .sb-result-hero-info .sb-result-title {
    font-size: 24px;
  }
}

/* キャッチコピー */
.sb-shindan-scope .sb-result-hero-info .sb-result-catchphrase {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.7;
  color: #4b5563;
  text-align: left;
  /* border-bottom: 1px #cbcbcb75 solid; */
  /* padding-bottom: 10px; */
}

/* レア度(横並び、中央配置) */
.sb-shindan-scope .sb-result-hero-info .sb-result-rarity {
  margin: 4px 0;
  /* display: inline-flex; */
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  background: #fffbeb;
  border-radius: 10px;
}

.sb-shindan-scope .sb-result-hero-info .sb-result-rarity-label {
  font-family: var(--font-mont, sans-serif);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: #92400e;
}

.sb-shindan-scope .sb-result-hero-info .sb-result-rarity-stars {
  font-size: 16px;
  letter-spacing: 0.1em;
  color: var(--accent, #FFD60A);
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.1));
}

/* シェアカウンタ(シェアボタンの下に配置) */
.sb-shindan-scope .sb-result-hero-info .sb-result-share-counter {
  margin: 8px 0 0;
  font-size: 13px;
  color: #6b7280;
  text-align: center;
}

.sb-shindan-scope .sb-result-hero-info .sb-result-share-counter strong {
  color: #ef4444;
  font-weight: 700;
  font-size: 15px;
  margin: 0 2px;
}

/* シェアラベル */
.sb-shindan-scope .sb-result-hero-info .sb-result-share-label {
  margin: 4px 0 0;
  font-size: 13px;
  font-weight: 600;
  color: #4b5563;
  text-align: center;
  background: #f3f3f3;
  padding: 10px;
}

/* お気に入りボタン */
.sb-shindan-scope .sb-result-hero-info .sb-result-fav {
  margin: 8px 0 0;
  display: flex;
  justify-content: center;
}

/* 「○○さんが行った診断はコレ」見出し(左右に細い水平線) */
.sb-shindan-scope .sb-result-parent-heading {
  margin: 24px 0 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  font-weight: 600;
  color: #4b5563;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.sb-shindan-scope .sb-result-parent-heading::before,
.sb-shindan-scope .sb-result-parent-heading::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #d1d5db;
}

.sb-shindan-scope .sb-result-parent-heading span[data-sb-name] {
  color: #1a1a24;
  font-weight: 700;
}

/* 親診断カード(右カラム下部) */
.sb-shindan-scope .sb-result-parent-card {
  display: flex;
  gap: 12px;
  padding: 12px;
  background: #f1f1f1;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}

.sb-shindan-scope .sb-result-parent-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
  border-color: var(--accent, #FFD60A);
}

.sb-shindan-scope .sb-result-parent-card-thumb {
  flex-shrink: 0;
  width: 100px;
  height: 100px;
  border-radius: 10px;
  overflow: hidden;
  background: #f3f4f6;
}

.sb-shindan-scope .sb-result-parent-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sb-shindan-scope .sb-result-parent-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  min-width: 0;
}

.sb-shindan-scope .sb-result-parent-card-title {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  color: #1a1a24;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sb-shindan-scope .sb-result-parent-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.sb-shindan-scope .sb-result-parent-card-meta-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  background: #ffffff;
  color: #4b5563;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
}

.sb-shindan-scope .sb-result-parent-card-meta-pill--buzz {
  background: #000000;
  color: #ffffff;
}

/* シェアボタンエリア(横一列7個:X / LINE / Threads / FB / はてブ / Pinterest / コピー) */
.sb-shindan-scope .sb-result-hero-info .sb-result-share {
  margin: 0;
}

.sb-shindan-scope .sb-result-hero-info .sb-result-share-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}


/* デスクトップで余裕があるので2カラムの gap も少し増やす */
@media (min-width: 769px) {
  .sb-shindan-scope .sb-result-hero-2col {
    gap: 40px;
  }
}

/* シェアボタンのテキストを少し小さく、高さもコンパクトに(右カラム内に綺麗に収める) */
@media (min-width: 769px) {
  .sb-shindan-scope .sb-result-hero-info .sb-result-share-btn {
    padding: 12px 6px;
    font-size: 11px;
  }
}
/* ============================================================
   SP(〜768px)時:左寄せ統一(hero-info に max-width: 600px が効く)
   ECDAO指示 2026-05-20:中央寄せ廃止、サイズ調整のみ
   ============================================================ */
@media (max-width: 768px) {
  /* タイトルSP用サイズ */
  .sb-shindan-scope .sb-result-hero-info .sb-result-title {
    font-size: 24px;
  }

  /* キャッチコピーSP用サイズ */
  .sb-shindan-scope .sb-result-hero-info .sb-result-catchphrase {
    font-size: 12px;
  }

  /* シェアラベルSP用 */
  .sb-shindan-scope .sb-result-hero-info .sb-result-share-label {
    margin: 4px 0 0;
    font-size: 11px;
    font-weight: 600;
    color: #4b5563;
    text-align: center;
    background: #f3f3f3;
    padding: 6px;
  }

  /* RARITY枠SP用padding */
  .sb-shindan-scope .sb-result-hero-info .sb-result-rarity {
    padding: 10px 20px;
  }

  /* SP時はピルを少し大きく */
  .sb-shindan-scope .sb-result-pill {
    padding: 6px 16px;
    font-size: 13px;
  }
}
/* お気に入りボタン(カード左上、既存 .sb-card-fav-btn の position: absolute を効かせるため relative 化) */
.sb-shindan-scope .sb-result-hero-card {
  position: relative;
}
/* ============================================================
   ECDAO追加 2026-05-20:結果ページ section-h2 装飾 + media 統合
   ============================================================ */

/* セクション見出し:背景 + 左アクセントバー(::after) */
.sb-shindan-scope .sb-result-section-h2 {
  display: block;
  font-size: 18px;
  font-weight: 700;
  line-height: var(--lh-tight);
  color: var(--t1-dark);
  background: #F4F5F8;
  border-radius: 6px;
  padding: 16px 20px 16px 36px;
  margin: 44px 0 22px;
  position: relative;
}

.sb-shindan-scope .sb-result-section-h2::before {
  display: none !important;
}

.sb-shindan-scope .sb-result-section-h2::after {
  content: "";
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 22px;
  background: #1a1a24;
  border-radius: 9999px;
}

/* 640px:プライバシー・免責の文字サイズ調整 */
@media (max-width: 640px) {
  .sb-shindan-scope .sb-shindan-disclaimer p {
    font-size: 11px;
  }

  .sb-shindan-scope .sb-shindan-privacy-list li {
    font-size: 12px;
    padding: 10px 12px;
  }
}

/* 480px:見出しと装飾バーの微調整 */
@media (max-width: 480px) {
  .sb-shindan-scope .sb-shindan-section-h2,
  .sb-shindan-scope .sb-result-section-h2 {
    padding: 14px 12px 14px 28px;
    margin: 32px 0 16px;
    font-size: 16px;
  }

  .sb-shindan-scope .sb-result-section-h2::after {
    left: 10px;
    height: 20px;
  }
}

/* ============================================================
   シェアボタン:案A 白円+ブランド色アイコン(診断前・診断後 共通)
   ECDAO確定 2026-05-21:原色ベタタイル、白円に統一。
   末尾に置くことで既存のブランド色背景・タイル指定を後勝ちで上書き。
   ============================================================ */
.sb-shindan-scope .sb-result-hero-info .sb-result-share-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-start;
}
.sb-shindan-scope .sb-result-hero-info .sb-result-share-btn,
.sb-shindan-scope .sb-shindan-share .sb-result-share-btn {
  width: 48px;
  height: 48px;
  padding: 0;
  background: #ffffff;
  border-radius: 50%;
  box-shadow: 0 1px 4px rgb(0 0 0 / 8%);
}
.sb-shindan-scope .sb-result-hero-info .sb-result-share-btn:hover,
.sb-shindan-scope .sb-shindan-share .sb-result-share-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
  filter: none;
}
.sb-shindan-scope .sb-result-hero-info .sb-result-share-btn .sb-svg,
.sb-shindan-scope .sb-shindan-share .sb-result-share-btn .sb-svg {
  width: 22px;
  height: 22px;
}
.sb-shindan-scope .sb-result-share-btn--x         { color: #000000; }
.sb-shindan-scope .sb-result-share-btn--line      { color: #06c755; }
.sb-shindan-scope .sb-result-share-btn--threads   { color: #000000; }
.sb-shindan-scope .sb-result-share-btn--facebook  { color: #1877f2; }
.sb-shindan-scope .sb-result-share-btn--hatena    { color: #00a4de; }
.sb-shindan-scope .sb-result-share-btn--pinterest { color: #e60023; }
.sb-shindan-scope .sb-result-share-btn--copy      { color: #6b7280; }
.sb-shindan-scope .sb-result-share-btn--copy.is-copied { background: #10b981; border-color: #10b981; color: #ffffff; }

/* ============================================================
   診断前・診断中のシェア:ダークデザイン(ECDAO確定 2026-05-21)
   重要:すべて .sb-shindan-share 配下にスコープ。
   .sb-sec-* / .sb-result-share-btn を汎用で変えないので、
   関連・お気に入り・ランキング等の白背景セクション、
   および結果ページhero(案A白円)とは一切干渉しない。
   ============================================================ */
.sb-shindan-scope .sb-shindan-share .sb-sec-head { text-align: center; align-items: center; }
.sb-shindan-scope .sb-shindan-share .sb-sec-title { color: #ffffff; text-align: center; }
.sb-shindan-scope .sb-shindan-share .sb-sec-sub { color: rgba(255, 255, 255, 0.58); }
/* kicker は白上書きの対象外=.sb-main p のグレーに落ちていた。
   .sb-shindan-share 配下のこの1本だけ金(--accent-dark = #C9A700)に戻す。
   class3つで .sb-main p に確実に勝ち、他セクションの .sb-sec-kicker には一切波及しない。 */
.sb-shindan-scope .sb-shindan-share .sb-sec-kicker { color: var(--accent-dark); }
/* ＼ SHARE ／ の装飾(擬似要素なのでHTMLは無変更・本文SHAREはそのまま) */
.sb-shindan-scope .sb-shindan-share .sb-sec-kicker::before { content: "＼"; margin-right: 0.45em; }
.sb-shindan-scope .sb-shindan-share .sb-sec-kicker::after  { content: "／"; margin-left: 0.45em; }
.sb-shindan-scope .sb-shindan-share .sb-shindan-share-btns { justify-content: center; }
/* ボタンはダーク円(結果ページheroの白円は無傷) */
.sb-shindan-scope .sb-shindan-share .sb-result-share-btn { background: #1b3047; box-shadow: none; }
/* ダーク円で消える黒系アイコンを白に(LINE緑・FB青はそのまま映える) */
.sb-shindan-scope .sb-shindan-share .sb-result-share-btn--x,
.sb-shindan-scope .sb-shindan-share .sb-result-share-btn--threads { color: #ffffff; }
.sb-shindan-scope .sb-shindan-share .sb-result-share-btn--copy { color: #cbd5e1; }

/* 関連診断セクションの余白(干渉なし・ECDAO指定) */
.sb-shindan-scope .sb-shindan-related { margin: 40px 0 0 0; }

/* ============================================================
   結果ページ シェアエリア:淡色ボックス + 角丸タイル(カードカラー統一)
   ECDAO確定 2026-05-23:結果heroのみ対象。
   診断前/中の .sb-shindan-share ダーク円とは別スコープ=一切干渉しない。
   ============================================================ */
/* ラベル+アイコン+カウンターを淡色ボックスでまとめる(背景=カードカラー薄ティント) */
.sb-shindan-scope .sb-result-hero-info .sb-result-share-box {
  margin: 6px 0 0;
  padding: 16px 14px;
  border-radius: 16px;
  background: #f7f8fa; /* フォールバック(color-mix非対応時) */
  background: color-mix(in srgb, var(--sb-card-accent, #f5f5f5) 7%, #fff);
  border: 1px solid rgba(0, 0, 0, 0.05); /* フォールバック */
  border-color: color-mix(in srgb, var(--sb-card-accent, #000000) 14%, transparent);
}
/* ＼ SHARE ／ キッカー(金) */
.sb-shindan-scope .sb-result-hero-info .sb-result-share-kicker {
  font-family: var(--font-mont), var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.15em;
  color: var(--accent-dark);
  text-align: center;
  margin: 0 0 8px;
}
.sb-shindan-scope .sb-result-hero-info .sb-result-share-kicker::before { content: "＼ "; }
.sb-shindan-scope .sb-result-hero-info .sb-result-share-kicker::after  { content: " ／"; }
/* 箱の中はセンター。ラベルのSP用グレーpillを打ち消す */
.sb-shindan-scope .sb-result-hero-info .sb-result-share-box .sb-result-share-label {
  margin: 0 0 12px;
  text-align: center;
  background: none;
  padding: 0;
}
.sb-shindan-scope .sb-result-hero-info .sb-result-share-box .sb-result-share-counter {
  text-align: center;
  margin: 12px 0 0;
}
/* 7個を1段に詰める */
.sb-shindan-scope .sb-result-hero-info .sb-result-share-btns {
  flex-wrap: nowrap;
  justify-content: center;
  gap: 7px;
}
/* 白円、薄グレー角丸タイル(結果heroのみ上書き)。
   アイコン色はブランド色のまま(既存の --x/--line 等が生きる)=識別性優先 */
.sb-shindan-scope .sb-result-hero-info .sb-result-share-btn {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  background: #f0f1f3;
  box-shadow: none;
}
.sb-shindan-scope .sb-result-hero-info .sb-result-share-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  background: #eaebee;
  filter: none;
}
.sb-shindan-scope .sb-result-hero-info .sb-result-share-btn .sb-svg {
  width: 21px;
  height: 21px;
}
/* コピー完了(緑)は維持。4クラスで上のベースに確実に勝つ */
.sb-shindan-scope .sb-result-hero-info .sb-result-share-btn--copy.is-copied {
  background: #10b981;
  color: #ffffff;
}
/* SP:アイコン小さく(36px)・余白詰め */
@media (max-width: 768px) {
  .sb-shindan-scope .sb-result-hero-info .sb-result-share-box { padding: 14px 10px; }
  .sb-shindan-scope .sb-result-hero-info .sb-result-share-btns { gap: 6px; }
  .sb-shindan-scope .sb-result-hero-info .sb-result-share-btn {
    width: 36px;
    height: 36px;
    border-radius: 9px;
  }
  .sb-shindan-scope .sb-result-hero-info .sb-result-share-btn .sb-svg {
    width: 18px;
    height: 18px;
  }
}

/* ============================================================
   バズレッドのフォロー導線(結果ページ・シェアボックス直後)
   ECDAO確定 2026-05-25:@shindanbuzz / バズレッドの声で期待感を出す。
   4ndan式の心ないテンプレ羅列ではなく、人格のある誘導(診断BUZZ流)。
   ============================================================ */
.sb-shindan-scope .sb-result-follow {
  margin: 20px 0 0;
  padding: 16px 14px 14px;
  border-radius: 16px;
  background: #fbfaf7;
  border: 1px solid #efece4;
}
/* バズレッドの吹き出し(アイコン+台詞) */
.sb-shindan-scope .sb-result-follow-bubble {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0 0 14px;
}
/* 円形クロップ=元画像の黒背景を消す */
.sb-shindan-scope .sb-result-follow-avatar {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  background: #1a1a24;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.sb-shindan-scope .sb-result-follow-speech {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: #2a2a32;
  align-self: center;
}
.sb-shindan-scope .sb-result-follow-sign {
  display: inline-block;
  margin-left: 2px;
  font-weight: 700;
  color: var(--accent-dark);
  white-space: nowrap;
}
/* Xフォローボタン(黒・ブランド) */
.sb-shindan-scope .sb-result-follow-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  padding: 12px 16px;
  border-radius: 12px;
  background: #000;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.sb-shindan-scope .sb-result-follow-btn .sb-svg {
  width: 18px;
  height: 18px;
  color: #fff;
}
.sb-shindan-scope .sb-result-follow-btn:hover {
  background: #1a1a24;
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}
@media (max-width: 768px) {
  .sb-shindan-scope .sb-result-follow { padding: 14px 12px 12px; }
  .sb-shindan-scope .sb-result-follow-avatar { width: 48px; height: 48px; }
  .sb-shindan-scope .sb-result-follow-speech { font-size: 13px; }
  .sb-shindan-scope .sb-result-follow-btn { font-size: 14px; padding: 11px 14px; }
}

/* ============================================================
   シークレット(★7「可能性の塊」)演出 b:控えめな特別感
   ECDAO確定 2026-05-25:カード画像が主役・ページは脇役。
   バズレッド=赤いヒーローに一貫させ、赤×薄赤のグローで特別枠を主張(★6までの金とは明確に区別)。
   ※実物投入後に強さ・色を微調整する前提の初期値。
   ============================================================ */
/* ページ全体にうっすら赤グロー(カードと喧嘩しない極薄・バズレッドの赤) */
.sb-shindan-scope.sb-result.is-secret {
  position: relative;
}
.sb-shindan-scope.sb-result.is-secret::before {
  content: "";
  position: absolute;
  inset: -40px -20px auto -20px;
  height: 320px;
  background: radial-gradient(
    60% 70% at 50% 0%,
    rgba(239, 68, 68, 0.12) 0%,
    rgba(239, 68, 68, 0.05) 45%,
    transparent 75%
  );
  pointer-events: none;
  z-index: 0;
}
/* 中身は前面に */
.sb-shindan-scope.sb-result.is-secret > * {
  position: relative;
  z-index: 1;
}
/* レア度の★を赤グロー付きに(★7の特別感・バズレッドの赤) */
.sb-shindan-scope.sb-result.is-secret .sb-result-rarity-stars {
  filter: drop-shadow(0 0 6px rgba(239, 68, 68, 0.5));
}
/* deep_dive 濃枠は深い赤(白文字の可読性を確保するため真紅にはしない)・枠線を赤に */
.sb-shindan-scope.sb-result.is-secret .sb-result-deep-dive {
  background: linear-gradient(135deg, #3a1212 0%, #2a1410 100%);
  border-color: rgba(239, 68, 68, 0.4);
}
.sb-shindan-scope.sb-result.is-secret .sb-result-deep-dive,
.sb-shindan-scope.sb-result.is-secret .sb-result-deep-dive * {
  color: #fff;
}
/* カード画像のまわりにごく薄い赤リング(完成形カードを引き立てる程度) */
.sb-shindan-scope.sb-result.is-secret .sb-result-card-img,
.sb-shindan-scope.sb-result.is-secret .sb-result-hero-card img {
  box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.4), 0 8px 28px rgba(239, 68, 68, 0.22);
}

/* ============================================================
   コラム記事(single.php / .sb-column-scope)
   editorial/magazine 路線。診断ページの派手さと作り分け、
   独自テキストを最後まで読ませる「読み物」デザイン。
   ブランド統一は黄アクセント(--accent)を最小限に効かせる。
   ============================================================ */
.sb-column-scope {
  /* メインカラム(約1040px)の全幅を使う。読み幅は本文(.sb-column-prose)側で制御。 */
  max-width: none;
  margin: 30px 0 40px;
}
.sb-column-article {
  background: var(--bg-light, #fff);
  border: 1px solid #ECECF1;
  border-radius: 16px;
  padding: 44px 48px 36px;
}

/* ----- ヘッダー ----- */
.sb-column-head {
  margin-bottom: 28px;
  padding-bottom: 22px;
  border-bottom: 1px solid #F0F0F4;
}
.sb-column-pill {
  display: inline-block;
  font-family: var(--font-mont, sans-serif);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--accent-dark, #C9A700);
  background: var(--accent-light, #FFF8DC);
  border-radius: 999px;
  padding: 5px 14px;
  text-decoration: none;
  transition: background .15s ease;
}
.sb-column-pill:hover {
  background: #FCEFB8;
}
.sb-column-title {
  font-size: 27px;
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: .01em;
  color: var(--t1-dark, #1a1a24);
  margin: 16px 0 14px;
}
.sb-column-meta {
  font-family: var(--font-inter, sans-serif);
  font-size: 13px;
  color: var(--t3-dark, #8a8a96);
}
.sb-column-meta-sep {
  margin: 0 7px;
  opacity: .6;
}

/* ----- 本文(読み物タイポグラフィ) ----- */
.sb-column-prose {
  font-family: var(--font-sans, sans-serif);
  font-size: 16px;
  line-height: 1.9;
  color: var(--t1-dark, #1a1a24);
}
.sb-column-prose > * + * {
  margin-top: 1.25em;
}
.sb-column-prose h2 {
  font-size: 21px;
  font-weight: 800;
  line-height: 1.55;
  color: var(--t1-dark, #1a1a24);
  margin: 2.2em 0 .9em;
  padding-left: 14px;
  border-left: 4px solid var(--accent, #FFD60A);
}
.sb-column-prose h3 {
  font-size: 17.5px;
  font-weight: 700;
  color: var(--t1-dark, #1a1a24);
  margin: 1.8em 0 .7em;
}
.sb-column-prose p {
  margin: 0;
}
.sb-column-prose a {
  color: var(--accent-dark, #C9A700);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  font-weight: 600;
}
.sb-column-prose a:hover {
  color: var(--t1-dark, #1a1a24);
}
.sb-column-prose ul,
.sb-column-prose ol {
  margin: 18px 0 22px;
  padding-left: 0;
  list-style: none;
}
.sb-column-prose li {
  position: relative;
  padding: 8px 0 8px 28px;
  line-height: 1.9;
}
.sb-column-prose li + li {
  border-top: 1px dashed rgba(0, 0, 0, 0.08);
  margin-top: 0;
}
.sb-column-prose ul > li::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 17px;
  width: 9px;
  height: 9px;
  background: var(--accent, #FFD60A);
  border-radius: 50%;
}
.sb-column-prose ol {
  counter-reset: sb-col-ol;
}
.sb-column-prose ol > li {
  counter-increment: sb-col-ol;
}
.sb-column-prose ol > li::before {
  content: counter(sb-col-ol);
  position: absolute;
  left: 0;
  top: 10px;
  width: 22px;
  height: 22px;
  background: var(--accent, #FFD60A);
  color: #1a1a24;
  font-size: 12px;
  font-weight: 800;
  line-height: 22px;
  text-align: center;
  border-radius: 50%;
}
.sb-column-prose blockquote {
  margin: 1.6em 0;
  padding: 14px 20px;
  background: #FAFAFC;
  border-left: 3px solid #Dcdce4;
  border-radius: 0 8px 8px 0;
  color: var(--t2-dark, #4a4a56);
}
/* 関連記事の見出し(本文末尾の ## 関連記事)も h2 で自然に拾われる */

/* ----- 記事下CTA ----- */
.sb-column-cta {
  margin-top: 40px;
  padding: 26px 24px;
  text-align: center;
  background: linear-gradient(135deg, #FFFBEC 0%, #FFF6D6 100%);
  border: 1px solid #F2E4A8;
  border-radius: 14px;
}
.sb-column-cta-lead {
  font-size: 15px;
  font-weight: 700;
  color: var(--t1-dark, #1a1a24);
  margin: 0 0 14px;
}
.sb-column-cta-btn {
  display: inline-block;
  font-family: var(--font-mont, sans-serif);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .03em;
  color: #1a1a24;
  background: var(--accent, #FFD60A);
  border-radius: 999px;
  padding: 13px 36px;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(255, 214, 10, .35);
  transition: transform .15s ease, box-shadow .15s ease;
}
.sb-column-cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 7px 20px rgba(255, 214, 10, .45);
}

/* ----- スマホ ----- */
@media (max-width: 600px) {
  .sb-column-article {
    padding: 26px 20px 24px;
    border-radius: 12px;
  }
  .sb-column-title {
    font-size: 23px;
  }
  .sb-column-prose {
    font-size: 16px;
    line-height: 1.9;
  }
  .sb-column-prose h2 {
    font-size: 19px;
  }
}

/* ============================================================
   コラム一覧(category.php / .sb-column-scope)
   single.php と同じ editorial 路線。記事カードのリスト。
   ============================================================ */
.sb-column-archive-head {
  margin-bottom: 30px;
  padding-bottom: 22px;
  border-bottom: 1px solid #e5e5e5;
}
.sb-column-archive-kicker {
  font-family: var(--font-mont, sans-serif);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .18em;
  color: var(--accent-dark, #C9A700);
  margin: 0 0 6px;
}
.sb-column-archive-title {
  font-size: 26px;
  font-weight: 800;
  color: var(--t1-dark, #1a1a24);
  margin: 0 0 10px;
}
.sb-column-archive-desc {
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--t2-dark, #4a4a56);
  margin: 0;
}

.sb-column-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.sb-column-card {
  background: var(--bg-light, #fff);
  border: 1px solid #ECECF1;
  border-radius: 14px;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.sb-column-card:hover {
  border-color: var(--accent, #FFD60A);
  box-shadow: 0 6px 20px rgba(0,0,0,.06);
  transform: translateY(-2px);
}
.sb-column-card-link {
  display: block;
  padding: 22px 24px;
  text-decoration: none;
}
.sb-column-card-date {
  display: block;
  font-family: var(--font-inter, sans-serif);
  font-size: 12.5px;
  color: var(--t3-dark, #8a8a96);
  margin-bottom: 7px;
}
.sb-column-card-title {
  font-size: 18.5px;
  font-weight: 800;
  line-height: 1.55;
  color: var(--t1-dark, #1a1a24);
  margin: 0 0 9px;
}
.sb-column-card-excerpt {
  font-size: 14px;
  line-height: 1.8;
  color: var(--t2-dark, #4a4a56);
  margin: 0 0 12px;
}
.sb-column-card-more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mont, sans-serif);
  font-size: 13px;
  font-weight: 700;
  color: var(--accent-dark, #C9A700);
}

/* ページネーション */
.sb-column-pagination {
  margin-top: 32px;
}
.sb-column-pagination .nav-links {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}
.sb-column-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid #E4E4EA;
  font-family: var(--font-inter, sans-serif);
  font-weight: 600;
  color: var(--t2-dark, #4a4a56);
  text-decoration: none;
}
.sb-column-pagination .page-numbers.current {
  background: var(--accent, #FFD60A);
  border-color: var(--accent, #FFD60A);
  color: #1a1a24;
}
.sb-column-pagination .page-numbers:hover:not(.current) {
  border-color: var(--accent, #FFD60A);
}
.sb-column-empty {
  padding: 40px 0;
  text-align: center;
  color: var(--t3-dark, #8a8a96);
}

@media (max-width: 600px) {
  .sb-column-list { grid-template-columns: 1fr; }
  .sb-column-archive-title { font-size: 22px; }
  .sb-column-card-link { padding: 18px 18px; }
  .sb-column-card-title { font-size: 17px; }
}

/* ============================================================
   Xシェア補助: カード画像保存 + コピペ文(結果ページ share-box 内)
   正方形カードをXに画像添付で綺麗に出すための動線。
   ============================================================ */
.sb-shindan-scope .sb-result-hero-info .sb-result-cardshare {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed rgba(0,0,0,0.1);
}
.sb-shindan-scope .sb-result-hero-info .sb-result-cardshare-lead {
  font-size: 12px;
  color: var(--t3-dark, #8a8a96);
  margin: 0 0 8px;
  text-align: center;
}
.sb-shindan-scope .sb-result-hero-info .sb-result-cardshare-dl {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  justify-content: center;
  box-sizing: border-box;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 700;
  color: #1a1a24;
  background: var(--accent, #FFD60A);
  border-radius: 10px;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease;
}
.sb-shindan-scope .sb-result-hero-info .sb-result-cardshare-dl:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255,214,10,.4);
}
.sb-shindan-scope .sb-result-hero-info .sb-result-cardshare-copy {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}
.sb-shindan-scope .sb-result-hero-info .sb-result-cardshare-text {
  flex: 1;
  min-width: 0;
  resize: none;
  font-size: 12px;
  line-height: 1.5;
  padding: 8px 10px;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 8px;
  background: #fff;
  color: var(--t2-dark, #4a4a56);
  font-family: var(--font-sans, sans-serif);
}
.sb-shindan-scope .sb-result-hero-info .sb-result-cardshare-copybtn {
  flex-shrink: 0;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 700;
  color: var(--t2-dark, #4a4a56);
  background: #fff;
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
.sb-shindan-scope .sb-result-hero-info .sb-result-cardshare-copybtn:hover {
  border-color: var(--accent, #FFD60A);
  color: #1a1a24;
}

/* ============================================================
   トースト通知(コピー成功等のフィードバック・全ページ共通)
   ============================================================ */
.sb-toast {
  position: fixed;
  left: 50%;
  bottom: 32px;
  transform: translateX(-50%) translateY(20px);
  z-index: 9999;
  max-width: 90vw;
  padding: 13px 24px;
  background: rgba(26, 26, 36, 0.95);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  border-radius: 999px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}
.sb-toast.is-show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ============================================================
   診断前 .sb-shindan-lead 内の見出し干渉打ち消し(2026-06-01)
   素の .sb-result-section-h2 の margin が広いので、leadスコープ内で詰める。
   ============================================================ */
.sb-shindan-lead .sb-result-section-h2 {
  margin: 0 0 12px;
  font-size: 17px;
}
.sb-shindan-lead .sb-result-section-h2::before {
  background: var(--accent, #FFD60A);
}

/* ============================================================
   この診断について(.sb-shindan-intro-body) のリスト装飾
   ai_article 内の <ul><li><ol> を読みやすくする(2026-06-01)
   ============================================================ */
.sb-shindan-intro-body ul,
.sb-shindan-intro-body ol {
  margin: 14px 0 18px;
  padding-left: 0;
  list-style: none;
}
.sb-shindan-intro-body li {
  position: relative;
  padding: 6px 0 6px 26px;
  line-height: 1.85;
}
.sb-shindan-intro-body li + li {
  border-top: 1px dashed rgba(0, 0, 0, 0.08);
}
.sb-shindan-intro-body ul > li::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 14px;
  width: 8px;
  height: 8px;
  background: var(--accent, #FFD60A);
  border-radius: 50%;
}
.sb-shindan-intro-body ol {
  counter-reset: sb-ol;
}
.sb-shindan-intro-body ol > li {
  counter-increment: sb-ol;
}
.sb-shindan-intro-body ol > li::before {
  content: counter(sb-ol);
  position: absolute;
  left: 0;
  top: 8px;
  width: 20px;
  height: 20px;
  background: var(--accent, #FFD60A);
  color: #1a1a24;
  font-size: 11px;
  font-weight: 800;
  line-height: 20px;
  text-align: center;
  border-radius: 50%;
}
.sb-shindan-intro-body h3 {
  position: relative;
  padding-left: 14px;
  border-left: 4px solid var(--accent, #FFD60A);
  margin-top: 28px;
}

/* ============================================================

/* ============================================================
   C路線「雑誌エディトリアル」デザイン採用版(2026-06-01)
   診断「この診断について」(.sb-shindan-intro-body) と
   コラム本文(.sb-column-prose) の小見出し・リストを統一。
   上の黄色版や古いリストCSSはこの後勝ちで上書きされる。
   ============================================================ */

/* --- 小見出し: 上下細罫線+右に "—" アクセント --- */
.sb-shindan-intro-body h2,
.sb-shindan-intro-body h3,
.sb-column-prose h2,
.sb-column-prose h3 {
  border-left: none;
  padding: 18px 0 14px 0;
  margin: 40px 0 22px;
  border-top: 1px solid #1a1a24;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  font-size: 17px;
  font-weight: 700;
  color: #1a1a24;
  letter-spacing: 0.04em;
  position: relative;
}
.sb-shindan-intro-body h2::after,
.sb-shindan-intro-body h3::after,
.sb-column-prose h2::after,
.sb-column-prose h3::after {
  content: "—";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(0, 0, 0, 0.2);
  font-size: 14px;
}

/* --- リスト: 左に大きな "01・02" 金色細書体 + 字下げ + 極細罫線 --- */
.sb-shindan-intro-body ul,
.sb-shindan-intro-body ol,
.sb-column-prose ul,
.sb-column-prose ol {
  list-style: none;
  padding: 0;
  margin: 22px 0 28px;
  counter-reset: sb-c-ol;
}
.sb-shindan-intro-body li,
.sb-column-prose li {
  position: relative;
  padding: 14px 0 14px 60px;
  line-height: 1.85;
  border-top: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  counter-increment: sb-c-ol;
  background: none;
  margin-top: 0;
}
.sb-shindan-intro-body li:last-child,
.sb-column-prose li:last-child {
  border-bottom: none;
}
.sb-shindan-intro-body li::before,
.sb-column-prose li::before,
.sb-shindan-intro-body ul > li::before,
.sb-shindan-intro-body ol > li::before,
.sb-column-prose ul > li::before,
.sb-column-prose ol > li::before {
  content: "0" counter(sb-c-ol);
  position: absolute;
  left: 0;
  top: 14px;
  width: 44px;
  height: auto;
  font-family: "Inter", "Helvetica Neue", sans-serif;
  font-size: 22px;
  font-weight: 300;
  color: #B8860B;
  letter-spacing: 0;
  background: none;
  border-radius: 0;
  box-shadow: none;
  text-align: left;
  line-height: 1;
}

/* ============================================================
   (1) 結果カード「実力の輝き」エリア強化(2026-06-01)
   スキル名拡大+3行リストのインパクト強化。
   ============================================================ */
.sb-shindan-scope .sb-result-skill-name {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.4;
}
.sb-shindan-scope .sb-result-skill-desc {
  font-size: 14px;
  margin-top: 4px;
  color: var(--t2-dark, #4a4a56);
}
.sb-shindan-scope .sb-result-three-lines {
  margin-top: 18px;
  padding: 0;
  list-style: none;
}
.sb-shindan-scope .sb-result-line {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 4px;
  font-size: 15px;
  line-height: 1.8;
  font-weight: 500;
}
.sb-shindan-scope .sb-result-line + .sb-result-line {
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}
.sb-shindan-scope .sb-result-line-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--card-color, #B8860B);
  color: #fff;
  margin-top: 2px;
}
.sb-shindan-scope .sb-result-line-icon svg {
  width: 18px;
  height: 18px;
}
.sb-shindan-scope .sb-result-line-text {
  flex: 1;
}

/* ============================================================
   (2) バズレンジャー一言ブロック リデザイン(2026-06-01)
   - 縦バー削除(.sb-result-section-h2::before を消す)
   - 背景をレンジャーカラー(淡色)に=吹き出し感
   - data-ranger属性で色切替(red/purple/pink/green/yellow)
   ============================================================ */
.sb-result-extra--ranger {
  position: relative;
  margin-top: 36px;
  padding: 24px 26px;
  border-radius: 16px;
  background: var(--ranger-bg, #FAFAFC);
  border: 1px solid var(--ranger-border, rgba(0, 0, 0, 0.08));
}
/* 縦バーを消す(このセクション内の見出しに限定) */
/* ::before(.sb-shindan-lead用) と ::after(.sb-shindan-scope用) の両方を確実に消す */
.sb-result-extra--ranger .sb-result-section-h2 {
  margin: 0;
  color: #ffffff;
  font-size: 16px;
  font-weight: 800;
  background: #4b5563;
  padding: 10px 40px;
  border-radius: 999px;
  display: inline-block;
}
.sb-result-extra--ranger .sb-result-section-h2::before,
.sb-result-extra--ranger .sb-result-section-h2::after,
.sb-result-extra--ranger .sb-result-extra-rangerhead .sb-result-section-h2::before,
.sb-result-extra--ranger .sb-result-extra-rangerhead .sb-result-section-h2::after {
  display: none !important;
  content: none !important;
}
/* レンジャーアイコン+見出しを横並び */
.sb-result-extra-rangerhead {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}
.sb-result-extra-ranger-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff;
  padding: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
/* 本文 */
.sb-result-extra--ranger .sb-result-extra-body {
  font-size: 14.5px;
  line-height: 1.95;
  color: var(--t1-dark, #1a1a24);
}
/* 下のプロフィール枠は色控えめに */
.sb-result-extra--ranger .sb-result-ranger-profile {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--ranger-border, rgba(0, 0, 0, 0.1));
}

/* レンジャーカラー定義(--ranger-bg/border/color を結果ページ用にチューニング) */
.sb-result-extra--ranger[data-ranger="red"] {
  --ranger-bg: #FFF1F1;
  --ranger-border: rgba(220, 38, 38, 0.18);
  --ranger-color: #B91C1C;
}
.sb-result-extra--ranger[data-ranger="purple"] {
  --ranger-bg: #F5F0FE;
  --ranger-border: rgba(139, 92, 246, 0.20);
  --ranger-color: #6D28D9;
}
.sb-result-extra--ranger[data-ranger="pink"] {
  --ranger-bg: #FEF1F7;
  --ranger-border: rgba(244, 114, 182, 0.22);
  --ranger-color: #BE185D;
}
.sb-result-extra--ranger[data-ranger="green"] {
  --ranger-bg: #F0FDF4;
  --ranger-border: rgba(34, 197, 94, 0.22);
  --ranger-color: #15803D;
}
.sb-result-extra--ranger[data-ranger="yellow"] {
  --ranger-bg: #FEFCE8;
  --ranger-border: rgba(234, 179, 8, 0.28);
  --ranger-color: #A16207;
}
/* ============================================================
   コラム/AI記事の表(.sb-col-table-wrap でラップ・横スクロール対応)
   列見出し=背景 #1f2937 / 文字 白(ECDAO指定)。PC=収まる / スマホ=横スクロール
   ============================================================ */
.sb-col-table-wrap {
  margin: 24px 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid #ECECF1;
  border-radius: 12px;
}
.sb-col-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 1.7;
  background: #fff;
}
.sb-col-table th,
.sb-col-table td {
  padding: 12px 16px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid #ECECF1;
}
.sb-col-table thead th {
  background: #1f2937;
  color: #ffffff;
  font-weight: 700;
  letter-spacing: 0.03em;
  white-space: nowrap;
  border-bottom: none;
}
.sb-col-table tbody tr:nth-child(even) {
  background: var(--bg-content-soft, #F7F7FA);
}
.sb-col-table tbody th {
  font-weight: 700;
  color: var(--t1-dark, #1a1a24);
  white-space: nowrap;
}
.sb-col-table tbody tr:last-child th,
.sb-col-table tbody tr:last-child td {
  border-bottom: none;
}
@media (max-width: 640px) {
  .sb-col-table th,
  .sb-col-table td { white-space: nowrap; }
}

/* ============================================================
   コラムのアイキャッチ(記事ヒーロー + 一覧カードのサムネ)
   ============================================================ */
.sb-column-eyecatch {
  margin: 0 0 28px;
  border-radius: 14px;
  overflow: hidden;
  background: var(--bg-content-soft, #F7F7FA);
}
.sb-column-eyecatch-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.sb-column-card { overflow: hidden; }
.sb-column-card-thumb {
  display: block;
  margin: -22px -24px 16px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--bg-content-soft, #F7F7FA);
}
.sb-column-card-thumb-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.sb-column-card:hover .sb-column-card-thumb-img { transform: scale(1.05); }
@media (max-width: 640px) {
  .sb-column-card-thumb { margin: -18px -18px 14px; }
}
/* ============================================================
   結果ページ: シェアの下の文脈リンク(つくり手の現場の声へ1本・憲法9-3)
   ============================================================ */
.sb-result-colnote {
  margin: 24px 0 0;
  padding: 16px 22px;
  background: #1f2937;
  border-left: 0;
  border-radius: 12px;
}
.sb-result-colnote-lead {
  margin: 0 0 6px;
  font-size: 13px;
  line-height: 1.8;
  color: #c9a700 !important;
}
.sb-result-colnote-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
}
.sb-result-colnote-link:hover { text-decoration: underline; }

/* ============================================================
   コラム一覧: 上部の思想文(つくり手の現場の声・憲法7-1)
   ============================================================ */
.sb-column-philosophy {
  margin: 0 0 32px;
  padding: 18px 22px;
  background: #1f2937;
  border-left: 0;
  border-radius: 12px;
}
.sb-column-philosophy p {
  margin: 0;
  font-size: 13px;
  line-height: 1.9;
  color: #fff;
}
/* ============================================================
   診断ページ: Pinterest保存ブロック(_sb_pin_image がある時だけ表示)
   ============================================================ */
.sb-shindan-pin { margin-top: 40px; }
.sb-shindan-pin-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.sb-shindan-pin-thumb {
  display: block;
  width: 200px;
  max-width: 62%;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(20, 20, 40, 0.12);
  line-height: 0;
}
.sb-shindan-pin-thumb img {
  display: block;
  width: 100%;
  height: auto;
}
.sb-shindan-pin-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  border-radius: 999px;
  background: #E60023;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  transition: opacity 0.2s ease;
}
.sb-shindan-pin-btn:hover { opacity: 0.88; }
/* ============================================================
   診断ページ: 個人情報・注意事項(コンパクト版・2026-06)
   旧リスト+2セクションを要点2文に畳んだ際の専用スタイル
   ============================================================ */
.sb-shindan-scope .sb-shindan-privacy--compact {
  padding: 18px 20px;
}
.sb-shindan-scope .sb-shindan-privacy--compact .sb-shindan-privacy-note {
  margin: 0 0 10px;
  line-height: 1.8;
}
.sb-shindan-scope .sb-shindan-privacy--compact .sb-shindan-privacy-note:last-child {
  margin-bottom: 0;
}
.sb-shindan-scope .sb-shindan-privacy--compact .sb-svg {
  vertical-align: -2px;
  margin-right: 4px;
}