/* ==========================================================================
   visualize-2026.css — 和モダン親しみキット v2 (2026-05-03 改定)

   コンセプト: 桜 / 抹茶 / 空 / クリームの和モダン基調。紫・濃茶グラデは廃止。
   「おしゃれ・親しみ・ポップだが落ち着き」の演出に絞り、長文ページを
   最後まで読ませる reading aid (蛍光マーカー風 / 章番号 / 装飾区切り) を追加。
   各ページの HTML class はそのまま動く後方互換 (viz-callout / viz-inline-cta 等)。
   ========================================================================== */

/* ----------------------------------------------------------------------
   0. 和モダンパレット (このファイル内専用 CSS 変数)
      tokens-2026.css の --c-primary 等が居る場合はそちらを優先 fallback。
   ---------------------------------------------------------------------- */
:root {
  --viz-cream:        #fdf8f3;
  --viz-cream-soft:   #faf3eb;
  --viz-sakura:       #f4d5d5;
  --viz-sakura-deep:  #d99a9a;
  --viz-matcha:       #d4e3d0;
  --viz-matcha-deep:  #8eb087;
  --viz-sora:         #d8e7ee;
  --viz-sora-deep:    #8aabbb;
  --viz-yamabuki:     #f0d088;       /* 山吹色 (差し色アクセント・控えめに) */
  --viz-shu:          #f5b8a3;       /* 朱赤系 coral */
  --viz-text-warm:    #3a2a20;       /* 温かみのあるダークブラウン */
  --viz-text-mute:    #76685c;
  --viz-line-soft:    #ebe2d6;
}

/* ----------------------------------------------------------------------
   1. 帯アクセント (h1 直下)
   ---------------------------------------------------------------------- */
.viz-accent-bar {
  height: 6px;
  background: linear-gradient(90deg,
    var(--viz-sakura, #f4d5d5) 0%,
    var(--c-primary, #c78b8b) 35%,
    var(--viz-yamabuki, #f0d088) 60%,
    var(--c-primary, #c78b8b) 85%,
    var(--viz-sakura, #f4d5d5) 100%
  );
  margin: 0 0 var(--space-4, 24px);
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(199, 139, 139, 0.15);
}

/* ----------------------------------------------------------------------
   2. callout / pro-tip / warning / info
      和紙風の控えめカラーで、左に縦帯アクセント
   ---------------------------------------------------------------------- */
.viz-callout {
  border-radius: 14px;
  padding: 22px 26px 22px 30px;
  margin: 28px 0;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  font-size: var(--fz-sm, 14.5px);
  line-height: 1.85;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--viz-line-soft);
  color: var(--viz-text-warm);
}
.viz-callout::before {
  content: '';
  position: absolute;
  top: 14px; bottom: 14px; left: 0;
  width: 5px;
  border-radius: 2px;
}
.viz-callout__icon {
  flex-shrink: 0;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  font-size: 17px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}
.viz-callout__body { flex: 1; min-width: 0; }
.viz-callout__title {
  display: block;
  font-weight: 700;
  margin: 0 0 6px;
  letter-spacing: 0.04em;
  font-size: var(--fz-base, 15.5px);
  color: var(--viz-text-warm);
}
.viz-callout__body p { margin-bottom: 8px; }
.viz-callout__body p:last-child { margin-bottom: 0; }

/* バリアント: 桜 (POINT / TIP) */
.viz-callout--tip {
  background: linear-gradient(135deg, #fff7f3 0%, #ffe9e0 100%);
  border-color: #f5d4cc;
}
.viz-callout--tip::before { background: var(--viz-shu, #f5b8a3); }
.viz-callout--tip .viz-callout__icon { color: #c8694e; }

/* バリアント: 空 (INFO / 補足) */
.viz-callout--info {
  background: linear-gradient(135deg, #f4f8fb 0%, #e6eef4 100%);
  border-color: #d4e0e8;
}
.viz-callout--info::before { background: var(--viz-sora-deep, #8aabbb); }
.viz-callout--info .viz-callout__icon { color: #4d7e94; }

/* バリアント: 朱 (WARNING / 注意) — 強く出さず、淡い珊瑚 */
.viz-callout--warning {
  background: linear-gradient(135deg, #fff8f1 0%, #ffe8d4 100%);
  border-color: #f3d4b1;
}
.viz-callout--warning::before { background: #d68a3a; }
.viz-callout--warning .viz-callout__icon { color: #b56a1e; }

/* バリアント: 抹茶 (SUCCESS / OK サイン) */
.viz-callout--success {
  background: linear-gradient(135deg, #f5f8f3 0%, #e6eee2 100%);
  border-color: #cfe0c8;
}
.viz-callout--success::before { background: var(--viz-matcha-deep, #8eb087); }
.viz-callout--success .viz-callout__icon { color: #4f7843; }

/* バリアント: ブランド (アクセントカラー強め) */
.viz-callout--brand {
  background: linear-gradient(135deg, #fdf2f2 0%, #f8e0e0 100%);
  border-color: #f0c8c8;
}
.viz-callout--brand::before { background: var(--c-primary, #c78b8b); }
.viz-callout--brand .viz-callout__icon { color: var(--c-primary-ink, #8b5656); }

/* ----------------------------------------------------------------------
   3. 画像プレースホルダー (発注スロット — 和紙風)
   ---------------------------------------------------------------------- */
.viz-imgplaceholder {
  border: 2px dashed #e0d4c4;
  background:
    repeating-linear-gradient(
      45deg,
      #fdf8f3 0px, #fdf8f3 12px,
      #f9f1e8 12px, #f9f1e8 24px
    );
  border-radius: 14px;
  padding: 32px 24px;
  text-align: center;
  margin: 24px 0;
  color: var(--viz-text-mute);
  font-size: var(--fz-sm, 14px);
  line-height: 1.7;
}
.viz-imgplaceholder__icon {
  font-size: 36px;
  color: var(--viz-sakura-deep, #d99a9a);
  margin-bottom: 8px;
  opacity: 0.6;
}
.viz-imgplaceholder__label {
  display: inline-block;
  background: linear-gradient(135deg, var(--viz-sakura-deep, #d99a9a) 0%, var(--c-primary, #c78b8b) 100%);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 4px 12px;
  border-radius: 999px;
  margin-bottom: 10px;
  text-transform: uppercase;
}
.viz-imgplaceholder__caption {
  font-weight: 700;
  color: var(--viz-text-warm);
  margin: 8px 0 6px;
  font-size: var(--fz-base, 15.5px);
}
.viz-imgplaceholder__prompt {
  display: block;
  margin-top: 12px;
  padding: 10px 14px;
  background: #fff;
  border-radius: 8px;
  border: 1px solid var(--viz-line-soft);
  color: var(--viz-text-mute);
  font-size: 12px;
  font-family: 'Noto Sans Mono', monospace;
  line-height: 1.6;
  text-align: left;
}
.viz-imgplaceholder--hero {
  aspect-ratio: 16 / 7;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 20% 30%, rgba(244, 213, 213, 0.5) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(212, 227, 208, 0.4) 0%, transparent 50%),
    var(--viz-cream, #fdf8f3);
  border: 2px dashed var(--viz-sakura-deep, #d99a9a);
}

/* ----------------------------------------------------------------------
   4. 統計チップ (stat)
   ---------------------------------------------------------------------- */
.viz-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px;
  margin: 28px 0;
}
.viz-stat {
  background: #fff;
  border: 1px solid var(--viz-line-soft);
  border-radius: 14px;
  padding: 18px;
  text-align: center;
  transition: transform .2s, border-color .2s, box-shadow .2s;
  position: relative;
}
.viz-stat::after {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--viz-sakura, #f4d5d5), var(--viz-yamabuki, #f0d088));
  border-radius: 14px 14px 0 0;
  opacity: 0; transition: opacity .2s;
}
.viz-stat:hover {
  transform: translateY(-3px);
  border-color: var(--viz-sakura-deep, #d99a9a);
  box-shadow: 0 8px 20px rgba(199, 139, 139, 0.12);
}
.viz-stat:hover::after { opacity: 1; }
.viz-stat__num {
  display: block;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 700;
  font-family: var(--font-serif, "Noto Serif JP", serif);
  color: var(--c-primary-ink, #8b5656);
  line-height: 1.1;
}
.viz-stat__num small { font-size: 0.6em; color: var(--viz-text-mute); font-weight: 500; margin-left: 2px; }
.viz-stat__label {
  display: block;
  font-size: 12px;
  color: var(--viz-text-mute);
  margin-top: 6px;
  letter-spacing: 0.04em;
}

/* ----------------------------------------------------------------------
   5. h2 装飾 (アイコン + 章番号)
   ---------------------------------------------------------------------- */
.viz-h2-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--viz-sakura, #f4d5d5), #fff);
  color: var(--c-primary-ink, #8b5656);
  font-size: 15px;
  margin-right: 12px;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(199, 139, 139, 0.15);
}

/* 章番号 — 大きい縦書き風数字 (新規) */
.viz-chap-mark {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-family: var(--font-serif, "Noto Serif JP", serif);
  color: var(--viz-sakura-deep, #d99a9a);
  margin-right: 12px;
}
.viz-chap-mark__num {
  font-size: 1.6em;
  font-weight: 700;
  line-height: 1;
}
.viz-chap-mark__label {
  font-size: 0.6em;
  color: var(--viz-text-mute);
  letter-spacing: 0.15em;
  font-weight: 500;
}

/* ----------------------------------------------------------------------
   6. インライン CTA カード (記事中盤の重要ページ遷移誘導)
      和モダン: クリーム地 + ピンク alert dot + 桜トーン
   ---------------------------------------------------------------------- */
.viz-inline-cta {
  margin: 36px 0;
  padding: 26px 28px;
  background: linear-gradient(135deg, var(--viz-cream, #fdf8f3) 0%, #fff 100%);
  border-radius: 18px;
  border: 1px solid var(--viz-sakura, #f4d5d5);
  box-shadow: 0 6px 20px rgba(199, 139, 139, 0.08);
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  position: relative;
  overflow: hidden;
}
.viz-inline-cta::before {
  content: '';
  position: absolute;
  top: -40px; right: -40px;
  width: 140px; height: 140px;
  background: radial-gradient(circle, var(--viz-sakura, #f4d5d5) 0%, transparent 70%);
  opacity: 0.5;
  pointer-events: none;
}
.viz-inline-cta__icon {
  flex-shrink: 0;
  width: 56px; height: 56px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--viz-sakura-deep, #d99a9a) 0%, var(--c-primary, #c78b8b) 100%);
  color: #fff;
  display: grid; place-items: center;
  font-size: 22px;
  box-shadow: 0 6px 14px rgba(199, 139, 139, 0.3);
  position: relative; z-index: 1;
}
.viz-inline-cta__body { flex: 1; min-width: 240px; position: relative; z-index: 1; }
.viz-inline-cta__title {
  display: block;
  font-weight: 700;
  font-size: 17px;
  margin: 0 0 4px;
  color: var(--viz-text-warm);
  font-family: var(--font-serif, "Noto Serif JP", serif);
}
.viz-inline-cta__desc {
  font-size: var(--fz-sm, 14px);
  color: var(--viz-text-mute);
  margin: 0;
  line-height: 1.65;
}
.viz-inline-cta__btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 24px;
  background: var(--c-primary-ink, #8b5656) !important;
  color: #fff !important;
  border-radius: 999px;
  text-decoration: none !important;
  font-weight: 700;
  font-size: var(--fz-sm, 14px);
  transition: transform .15s, box-shadow .15s, background-color .15s;
  position: relative; z-index: 1;
}
.viz-inline-cta__btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(139, 86, 86, 0.25);
  background: var(--c-primary, #c78b8b) !important;
  color: #fff !important;
}

/* ----------------------------------------------------------------------
   7. 比較カード (Good vs Bad / Before/After)
   ---------------------------------------------------------------------- */
.viz-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 28px 0;
}
@media (max-width: 600px) {
  .viz-compare { grid-template-columns: 1fr; }
}
.viz-compare__card {
  border-radius: 14px;
  padding: 22px;
  border: 1.5px solid;
  background: #fff;
}
.viz-compare__card--bad { border-color: #f3d4b1; background: linear-gradient(135deg, #fff8f1 0%, #fff 100%); }
.viz-compare__card--good { border-color: #cfe0c8; background: linear-gradient(135deg, #f5f8f3 0%, #fff 100%); }
.viz-compare__head {
  display: flex; align-items: center; gap: 10px;
  font-weight: 700; font-size: 14.5px;
  margin: 0 0 12px;
}
.viz-compare__card--bad .viz-compare__head { color: #b56a1e; }
.viz-compare__card--good .viz-compare__head { color: #4f7843; }
.viz-compare__icon {
  width: 28px; height: 28px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 14px;
  color: #fff;
}
.viz-compare__card--bad .viz-compare__icon { background: #d68a3a; }
.viz-compare__card--good .viz-compare__icon { background: var(--viz-matcha-deep, #8eb087); }
.viz-compare__card ul { margin: 0; padding-left: 20px; font-size: var(--fz-sm, 14px); line-height: 1.85; }
.viz-compare__card li { margin: 5px 0; color: var(--viz-text-warm); }

/* ----------------------------------------------------------------------
   8. icon-list (チェックリスト風 / 番号付き)
   ---------------------------------------------------------------------- */
.viz-iconlist { list-style: none; padding: 0; margin: 18px 0; }
.viz-iconlist li {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 10px 0;
  border-bottom: 1px dashed var(--viz-line-soft);
  font-size: var(--fz-sm, 14.5px);
  line-height: 1.75;
  color: var(--viz-text-warm);
}
.viz-iconlist li:last-child { border-bottom: 0; }
.viz-iconlist li::before {
  content: '✓';
  flex-shrink: 0;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--viz-matcha-deep, #8eb087);
  color: #fff;
  display: grid; place-items: center;
  font-size: 12px;
  font-weight: 700;
  margin-top: 2px;
}
.viz-iconlist--num { counter-reset: viznum; }
.viz-iconlist--num li { counter-increment: viznum; }
.viz-iconlist--num li::before {
  content: counter(viznum);
  background: linear-gradient(135deg, var(--viz-sakura-deep, #d99a9a), var(--c-primary, #c78b8b));
  font-family: var(--font-serif, serif);
}

/* ----------------------------------------------------------------------
   9. 折りたたみ FAQ
   ---------------------------------------------------------------------- */
.viz-faq {
  background: #fff;
  border: 1px solid var(--viz-line-soft);
  border-radius: 14px;
  margin-bottom: 14px;
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s;
}
.viz-faq:hover {
  border-color: var(--viz-sakura-deep, #d99a9a);
  box-shadow: 0 4px 12px rgba(199, 139, 139, 0.08);
}
.viz-faq summary {
  padding: 18px 22px;
  cursor: pointer;
  font-weight: 600;
  display: flex; align-items: center; gap: 12px;
  list-style: none;
  position: relative;
  color: var(--viz-text-warm);
}
.viz-faq summary::-webkit-details-marker { display: none; }
.viz-faq summary::before {
  content: 'Q.';
  font-family: var(--font-serif, serif);
  color: var(--viz-sakura-deep, #d99a9a);
  font-size: 18px;
  font-weight: 700;
}
.viz-faq summary::after {
  content: '+';
  margin-left: auto;
  font-size: 22px;
  color: var(--c-primary, #c78b8b);
  transition: transform .2s;
  width: 24px;
  text-align: center;
}
.viz-faq[open] summary::after { content: '−'; }
.viz-faq__body {
  padding: 0 22px 20px 50px;
  font-size: var(--fz-sm, 14.5px);
  line-height: 1.85;
  color: var(--viz-text-warm);
  position: relative;
}
.viz-faq__body::before {
  content: 'A.';
  position: absolute;
  left: 22px;
  top: 0;
  font-family: var(--font-serif, serif);
  color: var(--viz-matcha-deep, #8eb087);
  font-size: 18px;
  font-weight: 700;
}

/* ----------------------------------------------------------------------
   10. ピル (chip / tag)
   ---------------------------------------------------------------------- */
.viz-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.viz-pill {
  display: inline-block;
  padding: 5px 12px;
  background: var(--viz-cream-soft, #faf3eb);
  color: var(--viz-text-warm);
  border: 1px solid var(--viz-line-soft);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.viz-pill--filled {
  background: linear-gradient(135deg, var(--viz-sakura, #f4d5d5), var(--c-primary, #c78b8b));
  color: #fff;
  border-color: transparent;
}
.viz-pill--matcha { background: var(--viz-matcha, #d4e3d0); color: #4f7843; border-color: #cfe0c8; }
.viz-pill--sora   { background: var(--viz-sora, #d8e7ee); color: #4d7e94; border-color: #d4e0e8; }
.viz-pill--yamabuki { background: var(--viz-yamabuki, #f0d088); color: #6b4f1c; border-color: #e0bf75; }

/* ==========================================================================
   読ませるためのアクセント (新規 v2)
   ========================================================================== */

/* ----------------------------------------------------------------------
   11. 蛍光ペン風マーカー (文中ハイライト)
       <span class="viz-marker">ここに大事な一文</span>
   ---------------------------------------------------------------------- */
.viz-marker {
  background: linear-gradient(transparent 60%, rgba(240, 208, 136, 0.55) 60%);
  padding: 0 2px;
  font-weight: 600;
  color: var(--viz-text-warm);
}
.viz-marker--sakura { background: linear-gradient(transparent 60%, rgba(244, 213, 213, 0.85) 60%); }
.viz-marker--matcha { background: linear-gradient(transparent 60%, rgba(212, 227, 208, 0.85) 60%); }
.viz-marker--sora   { background: linear-gradient(transparent 60%, rgba(216, 231, 238, 0.85) 60%); }

/* ----------------------------------------------------------------------
   12. 装飾セクション区切り (花柄シルエット風 / 桜)
       <div class="viz-divider"></div> で挿入
   ---------------------------------------------------------------------- */
.viz-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 48px 0;
  color: var(--viz-sakura-deep, #d99a9a);
  font-size: 14px;
}
.viz-divider::before,
.viz-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--viz-line-soft, #ebe2d6), transparent);
}
.viz-divider__mark {
  margin: 0 14px;
  font-size: 18px;
  opacity: 0.7;
}
/* 桜マーク (CSS only) */
.viz-divider__mark::before {
  content: '❀';
}

/* ----------------------------------------------------------------------
   13. リード段落 (各章冒頭の太字導入文・読み始め誘発)
       <p class="viz-lead">この記事を読み終えると○○がわかります。</p>
   ---------------------------------------------------------------------- */
.viz-lead {
  font-size: var(--fz-base, 16px);
  line-height: 1.95;
  color: var(--viz-text-warm);
  font-weight: 500;
  border-left: 3px solid var(--c-primary, #c78b8b);
  padding: 8px 0 8px 18px;
  margin: 18px 0 26px;
  font-family: var(--font-serif, "Noto Serif JP", serif);
}

/* ----------------------------------------------------------------------
   14. プログレスドット (章末で次セクションへ視線を誘導)
       <div class="viz-progress"><span></span><span></span><span></span></div>
   ---------------------------------------------------------------------- */
.viz-progress {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 28px 0;
}
.viz-progress span {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--viz-line-soft, #ebe2d6);
}
.viz-progress span.is-active { background: var(--c-primary, #c78b8b); transform: scale(1.4); }

/* ----------------------------------------------------------------------
   15. 章末 next-link (「→ 次のセクションへ」)
       <a class="viz-next" href="#sec-3">次のセクションへ進む</a>
   ---------------------------------------------------------------------- */
.viz-next {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 18px 0 32px;
  padding: 8px 0;
  color: var(--c-primary-ink, #8b5656);
  text-decoration: none;
  font-size: var(--fz-sm, 14px);
  font-weight: 600;
  border-bottom: 1px solid transparent;
  transition: border-color .15s, gap .15s;
}
.viz-next::after {
  content: '→';
  transition: transform .15s;
}
.viz-next:hover {
  border-bottom-color: var(--c-primary, #c78b8b);
  gap: 10px;
  color: var(--c-primary-ink, #8b5656);
}

/* ----------------------------------------------------------------------
   16. 引用 (blockquote 風 — 章途中の読み深め)
       <blockquote class="viz-quote">…</blockquote>
   ---------------------------------------------------------------------- */
.viz-quote {
  position: relative;
  margin: 28px 0;
  padding: 22px 28px 22px 56px;
  background: var(--viz-cream-soft, #faf3eb);
  border-radius: 12px;
  font-size: var(--fz-base, 15.5px);
  line-height: 1.85;
  color: var(--viz-text-warm);
  font-style: italic;
}
.viz-quote::before {
  content: '"';
  position: absolute;
  left: 18px; top: 6px;
  font-size: 50px;
  font-family: var(--font-serif, "Noto Serif JP", serif);
  color: var(--viz-sakura-deep, #d99a9a);
  line-height: 1;
  font-weight: 700;
  opacity: 0.6;
}
.viz-quote cite {
  display: block;
  margin-top: 10px;
  font-style: normal;
  font-size: 13px;
  color: var(--viz-text-mute);
}
.viz-quote cite::before { content: '— '; }

/* ----------------------------------------------------------------------
   17. キーポイント要約 box (記事末尾 / 章末)
       <div class="viz-summary"><h3>このセクションの要点</h3><ul>…</ul></div>
   ---------------------------------------------------------------------- */
.viz-summary {
  margin: 32px 0;
  padding: 24px 28px;
  background:
    linear-gradient(135deg, var(--viz-cream, #fdf8f3) 0%, #fff 100%);
  border: 1px solid var(--viz-sakura, #f4d5d5);
  border-radius: 14px;
  position: relative;
}
.viz-summary::before {
  content: '✦';
  position: absolute;
  top: -14px; left: 22px;
  background: var(--viz-sakura-deep, #d99a9a);
  color: #fff;
  width: 28px; height: 28px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 14px;
  font-weight: 700;
}
.viz-summary h3,
.viz-summary > strong:first-child {
  display: block;
  font-family: var(--font-serif, "Noto Serif JP", serif);
  color: var(--viz-text-warm);
  font-size: var(--fz-base, 15.5px);
  margin: 0 0 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.viz-summary ul {
  list-style: none;
  margin: 0; padding: 0;
}
.viz-summary li {
  position: relative;
  padding: 6px 0 6px 24px;
  font-size: var(--fz-sm, 14.5px);
  line-height: 1.75;
  color: var(--viz-text-warm);
}
.viz-summary li::before {
  content: '◆';
  position: absolute;
  left: 0; top: 8px;
  color: var(--c-primary, #c78b8b);
  font-size: 11px;
}

/* ----------------------------------------------------------------------
   18. 読了プログレスバー (page top 固定・スクロール率を可視化)
       <div class="viz-readbar"><div class="viz-readbar__fill" data-readbar></div></div>
       (要 JS: 後述の inline script で更新)
   ---------------------------------------------------------------------- */
.viz-readbar {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 3px;
  background: rgba(199, 139, 139, 0.1);
  z-index: 100;
  pointer-events: none;
}
.viz-readbar__fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--viz-sakura-deep, #d99a9a), var(--c-primary, #c78b8b), var(--viz-yamabuki, #f0d088));
  transition: width .12s ease-out;
}

/* ----------------------------------------------------------------------
   19. mobile 調整
   ---------------------------------------------------------------------- */
@media (max-width: 600px) {
  .viz-callout { padding: 18px 18px 18px 24px; gap: 12px; }
  .viz-callout__icon { width: 30px; height: 30px; font-size: 14px; }
  .viz-inline-cta { flex-direction: column; align-items: flex-start; padding: 22px; }
  .viz-inline-cta__body { min-width: 0; width: 100%; }
  .viz-inline-cta__btn { width: 100%; justify-content: center; }
  .viz-imgplaceholder--hero { aspect-ratio: 4 / 3; padding: 24px 18px; }
}

/* ----------------------------------------------------------------------
   20. レガシー紫/茶グラデの上書き (和モダンに統一)
       各ページの inline <style> で定義されている #6A1B9A 0% → #9C27B0 100%
       (パープル) を、--c-primary / sakura / cream の和モダン版で上書き。
   ---------------------------------------------------------------------- */
.cta-section,
.guide-hero {
  background: linear-gradient(135deg,
    var(--c-primary, #c78b8b) 0%,
    var(--viz-sakura-deep, #d99a9a) 50%,
    var(--c-primary-ink, #8b5656) 100%
  ) !important;
  box-shadow: 0 10px 30px rgba(199, 139, 139, 0.18) !important;
}
.guide-hero h1, .cta-section h2 {
  color: #fff !important;
}

/* h2 アクセント線・カード hover・アイコン色 を上書き */
.guide-section h2,
.faq-section h2 {
  border-left-color: var(--c-primary, #c78b8b) !important;
}
.paper-card:hover {
  border-color: var(--c-primary, #c78b8b) !important;
  box-shadow: 0 10px 30px rgba(199, 139, 139, 0.15) !important;
}
.step-card__num {
  background: linear-gradient(135deg, var(--viz-sakura-deep, #d99a9a), var(--c-primary, #c78b8b)) !important;
}
.link-card:hover {
  border-color: var(--c-primary, #c78b8b) !important;
  color: var(--c-primary-ink, #8b5656) !important;
  box-shadow: 0 8px 24px rgba(199, 139, 139, 0.15) !important;
}
.link-card i { color: var(--c-primary, #c78b8b) !important; }
.cta-btn--primary {
  background: #fff !important;
  color: var(--c-primary-ink, #8b5656) !important;
}
.cta-btn--primary:hover {
  color: var(--c-primary-ink, #8b5656) !important;
  background: var(--viz-cream, #fdf8f3) !important;
}
.cta-btn--secondary {
  background: transparent !important;
  border: 2px solid #fff !important;
  color: #fff !important;
}
.cta-btn--secondary:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  color: #fff !important;
}

/* blog: rich-content 系の濃ブラウン/紫見出しも sakura に */
.h2-block-num,
.tab-btn.active,
.toc-link.active {
  background: linear-gradient(135deg, var(--viz-sakura-deep, #d99a9a), var(--c-primary, #c78b8b)) !important;
}
.h2-block-num { color: #fff !important; }

/* ハブページ独自の .gh-cta-inline は濃すぎる wine-red グラデなので
   cream → sakura の薄グラデに置換、文字は ink で読みやすく */
.gh-cta-inline {
  background: linear-gradient(135deg,
    var(--viz-cream, #fdf8f3) 0%,
    var(--viz-sakura, #f4d5d5) 100%
  ) !important;
  border: 1px solid var(--viz-sakura-deep, #d99a9a) !important;
  box-shadow: 0 8px 20px rgba(217, 154, 154, 0.15) !important;
}
.gh-cta-inline__title,
.gh-cta-inline__desc { color: var(--viz-text-warm, #3a2a20) !important; opacity: 1 !important; }
.gh-cta-inline__icon {
  background: rgba(217, 154, 154, 0.25) !important;
  color: var(--c-primary-ink, #8b5656) !important;
}
.gh-cta-inline__btn {
  background: var(--c-primary-ink, #8b5656) !important;
  color: #fff !important;
}
.gh-cta-inline__btn:hover {
  background: var(--c-primary, #c78b8b) !important;
  color: #fff !important;
}

/* チャット・チップ・タグ系の紫を和モダンに */
[class*="-purple"],
[style*="#6A1B9A"],
[style*="#9C27B0"] {
  /* インライン style override は限定的なので、コンテンツの class で対応 */
}

/* ダークモード: 現サイトはライトオンリーなのでスキップ */