/* ============================================================
   ADT ブログ「Vivid」拡張スタイル — 新しい記事専用
   ─────────────────────────────────────────────────────────────
   site.css（全社共通・和紙クラシック）はそのまま。
   このファイルは blog/_template.html から新規に読み込み、
   新しい記事（カラフル・イラスト入り）だけに効かせる。
   既存の公開済み記事はこのファイルを読み込まないので影響なし。
   docs/01_DESIGN_SPEC.md §9b 参照。
   ============================================================ */
:root{
  --v-blue:#2F6FED;   --v-blue-bg:#EBF2FF;
  --v-green:#1AA179;  --v-green-bg:#E8FAF3;
  --v-amber:#E08A00;  --v-amber-bg:#FFF6E5;
  --v-purple:#8B5CF6; --v-purple-bg:#F4EFFF;
  --v-pink:#EC5C9D;   --v-pink-bg:#FFEEF6;
}

/* ---------- 本文をひとまわり読みやすく ---------- */
.prose.vivid p,.prose.vivid li{font-size:15.5px;line-height:1.95}
.prose.vivid h2{
  display:flex;align-items:center;gap:12px;
  font-size:23px;margin:56px 0 18px;
}
.prose.vivid h2 .num{
  flex:none;width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:'Inter',sans-serif;font-size:14px;font-weight:500;color:#fff;
  background:var(--v-blue);
}
.prose.vivid h3{font-size:17px;color:var(--v-blue)}

/* ---------- カラフル・ハイライト（本文中の強調語） ---------- */
.prose.vivid mark{background:none;padding:0 2px;font-weight:500}
.prose.vivid mark.hl-blue{color:var(--v-blue)}
.prose.vivid mark.hl-green{color:var(--v-green)}
.prose.vivid mark.hl-amber{color:var(--v-amber)}
.prose.vivid mark.hl-purple{color:var(--v-purple)}
.prose.vivid mark.hl-pink{color:var(--v-pink)}

/* ---------- コールアウトボックス（4色×用途） ---------- */
.callout{
  display:flex;gap:16px;align-items:flex-start;
  border-radius:16px;padding:20px 22px;margin:28px 0;
  border:1px solid transparent;
}
.callout .co-ico{
  flex:none;width:34px;height:34px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;font-size:17px;
}
.callout .co-body h4{font-size:14px;font-weight:600;margin-bottom:4px;letter-spacing:.02em}
.callout .co-body p{font-size:14px;font-weight:400;margin:0;color:var(--ink);opacity:.85}
.callout--tip{background:var(--v-green-bg);border-color:rgba(26,161,121,.18)}
.callout--tip .co-ico{background:var(--v-green);color:#fff}
.callout--tip .co-body h4{color:var(--v-green)}
.callout--note{background:var(--v-blue-bg);border-color:rgba(47,111,237,.18)}
.callout--note .co-ico{background:var(--v-blue);color:#fff}
.callout--note .co-body h4{color:var(--v-blue)}
.callout--warn{background:var(--v-amber-bg);border-color:rgba(224,138,0,.2)}
.callout--warn .co-ico{background:var(--v-amber);color:#fff}
.callout--warn .co-body h4{color:var(--v-amber)}
.callout--trivia{background:var(--v-purple-bg);border-color:rgba(139,92,246,.18)}
.callout--trivia .co-ico{background:var(--v-purple);color:#fff}
.callout--trivia .co-body h4{color:var(--v-purple)}

/* ---------- マスコット（説明キャラ） ---------- */
.mascot-row{display:flex;gap:18px;align-items:flex-start;margin:30px 0}
.mascot-row .mascot{flex:none;width:64px;height:64px}
.mascot-row .bubble{
  position:relative;background:#fff;border:1px solid var(--line);
  border-radius:4px 16px 16px 16px;padding:16px 20px;box-shadow:var(--shadow);
  font-size:14px;color:var(--ink);flex:1;
}
.mascot-row .bubble b{color:var(--v-blue)}

/* ---------- 実践ステップ（POINTS 用・番号入りタイムライン） ---------- */
.steps{list-style:none;margin:26px 0;padding:0;counter-reset:step}
.steps li{
  counter-increment:step;position:relative;padding:6px 0 22px 52px;
  border-left:2px solid var(--line);margin-left:19px;font-size:14.5px;color:var(--ink);
}
.steps li:last-child{border-left-color:transparent;padding-bottom:2px}
.steps li::before{
  content:counter(step);position:absolute;left:-21px;top:0;
  width:40px;height:40px;border-radius:50%;color:#fff;font-weight:600;font-size:15px;
  display:flex;align-items:center;justify-content:center;font-family:'Inter',sans-serif;
}
.steps li:nth-child(4n+1)::before{background:var(--v-blue)}
.steps li:nth-child(4n+2)::before{background:var(--v-green)}
.steps li:nth-child(4n+3)::before{background:var(--v-amber)}
.steps li:nth-child(4n+4)::before{background:var(--v-purple)}
.steps li b{display:block;font-size:15px;margin-bottom:4px}

/* ---------- 比較表（色分け） ---------- */
.prose.vivid table.cmp th{background:var(--v-blue);color:#fff;font-weight:500}
.prose.vivid table.cmp td:first-child{font-weight:500;color:var(--v-blue);background:var(--v-blue-bg)}

/* ---------- まとめボックス ---------- */
.summary-box{
  background:linear-gradient(135deg,var(--v-blue-bg),var(--v-purple-bg));
  border-radius:18px;padding:28px 30px;margin:40px 0;
}
.summary-box h3{color:var(--v-blue);font-size:16px;margin-bottom:14px}
.summary-box ul{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.summary-box li{padding-left:28px;position:relative;font-size:14.5px}
.summary-box li::before{content:"✓";position:absolute;left:0;color:var(--v-green);font-weight:700}

/* ---------- points（要点3つ）をカラフル化 ---------- */
.prose.vivid + .points,.points.vivid{
  background:#fff;border-left:none;border:1px solid var(--line);
  box-shadow:var(--shadow);
}
.points.vivid li::before{content:"";width:8px;height:8px;border-radius:50%;top:14px}
.points.vivid li:nth-child(4n+1)::before{background:var(--v-blue)}
.points.vivid li:nth-child(4n+2)::before{background:var(--v-green)}
.points.vivid li:nth-child(4n+3)::before{background:var(--v-amber)}
.points.vivid li:nth-child(4n+4)::before{background:var(--v-purple)}

/* ---------- 図解カード（sap-btp-cap-intro 等の SVG 図解の共通枠） ---------- */
.diagram-card{
  background:#fff;border:1px solid var(--line);border-radius:18px;
  padding:26px 24px 20px;margin:30px 0;box-shadow:var(--shadow);
}
.diagram-card svg{width:100%;height:auto;display:block}
.diagram-card figcaption{margin-top:14px;font-size:13px;color:var(--muted);text-align:center}

@media(max-width:640px){
  .prose.vivid h2{font-size:20px}
  .mascot-row{flex-direction:column;align-items:center;text-align:center}
  .mascot-row .bubble{border-radius:16px}
}