/* ──────────────────────────────────────────────────────────────
   NOT A HOTEL 白エディトリアル 図解プリミティブ（共有・16:9充填版）
   engine/slide.css + theme/ampl-modern.css の上で使う。
   各図解は .fig-slide の中で「見出し=上 / 図解=残り全部を充填」する。
   細線・円ノード・グレーパネル・mono番号・blue(#2f6bff)を最小限の差し色に。
   ────────────────────────────────────────────────────────────── */

/* 図解スライドの土台（NOT A HOTEL流）：
   見出しは左揃え。中身は天地センターで均等余白にフレーム（端まで詰めない）。
   図解はゆとりある一定高で構える。 */
.fig-slide .body { justify-content: center !important; gap: 28px; height: 100%; }
.fig-slide .lead { flex: 0 0 auto; text-align: left; align-items: flex-start; max-width: none; gap: 10px; }
.fig-slide .lead h2 { font-size: 2.4rem; font-weight: 900; line-height: 1.18; text-align: left; }
.fig-slide .lead p { color: var(--color-muted); font-size: var(--text-base); line-height: 1.7; text-align: left; max-width: 920px; }
/* 図解本体（.lead の次の要素）＝ゆとりある一定高で天地センターに構える */
.fig-slide .lead + .nd-flow,
.fig-slide .lead + .nd-steps,
.fig-slide .lead + .nd-ba,
.fig-slide .lead + .nd-compare,
.fig-slide .lead + .nd-matrix,
.fig-slide .lead + .nd-pyramid,
.fig-slide .lead + .nd-funnel,
.fig-slide .lead + .nd-kpi,
.fig-slide .lead + .nd-layers,
.fig-slide .lead + .nd-cards,
.fig-slide .lead + .nd-relation,
.fig-slide .lead + .nd-score,
.fig-slide .lead + .nd-summary,
.fig-slide .lead + .nd-gap,
.fig-slide .lead + .nd-waterfall,
.fig-slide .lead + .nd-trend {
  flex: 0 0 auto; width: 100%; height: 360px; max-height: 100%; margin-top: 2px;
  display: flex; flex-direction: column; justify-content: center;
}

.nd-cap { font-family: var(--font-mono); font-weight: 700; font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; color: var(--color-faint); }

/* 横フロー：円ノード＋細線矢印 */
.nd-flow { flex-direction: row !important; align-items: center; gap: 0; }
.nd-flow .step { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; }
.nd-flow .dot { width: 88px; height: 88px; border-radius: 50%; border: 2px solid var(--color-fg); display: grid; place-items: center; font-family: var(--font-mono); font-weight: 800; font-size: 1.5rem; }
.nd-flow .step.hi .dot { background: var(--color-fg); color: #fff; }
.nd-flow .step h3 { font-size: 1.3rem; font-weight: 900; }
.nd-flow .step p { font-size: 1rem; line-height: 1.6; color: var(--color-muted); }
.nd-flow .arrow { flex: 0 0 64px; align-self: flex-start; margin-top: 43px; position: relative; height: 2px; }
.nd-flow .arrow::before { content: ""; position: absolute; inset: 0; border-top: 2px solid var(--color-line); }
.nd-flow .arrow::after { content: ""; position: absolute; right: 0; top: 50%; transform: translateY(-50%) rotate(45deg); width: 10px; height: 10px; border-top: 2px solid var(--color-blue); border-right: 2px solid var(--color-blue); }

/* 縦ステップ */
.nd-steps { justify-content: space-between !important; gap: 0; }
.nd-steps .row { display: grid; grid-template-columns: 110px 1fr; gap: var(--sp-lg); align-items: center; flex: 1; border-bottom: 1px solid var(--color-hair); }
.nd-steps .row:last-child { border-bottom: none; }
.nd-steps .no { font-family: var(--font-mono); font-weight: 900; font-size: 3.4rem; line-height: 1; color: var(--color-num); }
.nd-steps h3 { font-size: 1.6rem; font-weight: 900; }
.nd-steps p { font-size: 1.17rem; margin-top: 6px; color: var(--color-muted); }

/* before → after */
.nd-ba { flex-direction: row !important; align-items: stretch !important; }
.nd-ba { display: grid !important; grid-template-columns: 1fr 72px 1fr; }
.nd-ba .card { background: var(--color-panel); border-radius: var(--radius); padding: var(--sp-lg); display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.nd-ba .card.after { background: var(--color-fg); color: #fff; }
.nd-ba .card .lbl { font-family: var(--font-mono); font-weight: 800; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--color-faint); }
.nd-ba .card.after .lbl { color: rgba(255,255,255,.55); }
.nd-ba .card h3 { font-size: 1.7rem; font-weight: 900; }
.nd-ba .card.after h3 { color: #fff; }
.nd-ba .card p { font-size: 1.17rem; line-height: 1.65; color: var(--color-muted); }
.nd-ba .card.after p { color: rgba(255,255,255,.82); }
.nd-ba .mid { display: grid; place-items: center; }
.nd-ba .mid span { font-size: 2rem; color: var(--color-blue); font-weight: 700; }

/* 比較表 */
.nd-compare { justify-content: stretch !important; border-top: 2px solid var(--color-fg); }
.nd-compare .r { display: grid; align-items: center; flex: 1; padding: 0 10px; border-bottom: 1px solid var(--color-hair); }
.nd-compare .r.head { flex: 0 0 40px; border-bottom: 1.5px solid var(--color-line); }
.nd-compare .r.head span { font-family: var(--font-mono); font-weight: 800; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--color-faint); }
.nd-compare .r .k { font-weight: 700; font-size: 1.2rem; color: var(--color-fg); }
.nd-compare .r .v { text-align: center; font-size: 1.2rem; color: var(--color-muted); }
.nd-compare .r .v.yes { color: var(--color-blue); font-weight: 900; }
.nd-compare .r .v.no { color: var(--color-faint); }
.nd-compare .r .v.best { font-weight: 900; color: var(--color-fg); }

/* 2x2 マトリクス（中央で大きく） */
.nd-matrix { align-items: center !important; }
.nd-matrix .box { position: relative; height: 100%; aspect-ratio: 16 / 9; width: auto; max-width: 100%; margin: 0 auto; }
.nd-matrix .grid { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.nd-matrix .q { border: 1.5px solid var(--color-hair); padding: 22px 26px; display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.nd-matrix .q .t { font-weight: 900; font-size: 1.45rem; }
.nd-matrix .q .d { font-size: 1rem; color: var(--color-muted); }
.nd-matrix .q.hi { background: var(--color-panel); }
.nd-matrix .ax-x, .nd-matrix .ax-y { position: absolute; font-family: var(--font-mono); font-weight: 800; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--color-faint); }
.nd-matrix .ax-x.l { left: 0; bottom: -26px; } .nd-matrix .ax-x.r { right: 0; bottom: -26px; }
.nd-matrix .ax-y.t { left: -22px; top: 0; writing-mode: vertical-rl; } .nd-matrix .ax-y.b { left: -22px; bottom: 0; writing-mode: vertical-rl; }

/* ピラミッド */
.nd-pyramid { align-items: center !important; gap: 14px; }
.nd-pyramid .lv { background: var(--color-panel); border-radius: 10px; padding: 20px 30px; display: flex; align-items: center; gap: 18px; text-align: left; }
.nd-pyramid .lv:nth-child(1) { width: 46%; background: var(--color-fg); color: #fff; }
.nd-pyramid .lv:nth-child(2) { width: 70%; }
.nd-pyramid .lv:nth-child(3) { width: 94%; }
.nd-pyramid .lv .n { font-family: var(--font-mono); font-weight: 800; font-size: .9rem; opacity: .6; }
.nd-pyramid .lv .t { font-weight: 900; font-size: 1.5rem; }
.nd-pyramid .lv .d { font-size: 1rem; color: var(--color-muted); margin-left: auto; }
.nd-pyramid .lv:nth-child(1) .d { color: rgba(255,255,255,.7); }

/* ファネル */
.nd-funnel { align-items: center !important; justify-content: space-between !important; gap: 12px; }
.nd-funnel .s { background: var(--color-panel); border-radius: 8px; padding: 0 28px; display: flex; align-items: center; justify-content: space-between; flex: 1; }
.nd-funnel .s:nth-child(1) { width: 100%; } .nd-funnel .s:nth-child(2) { width: 82%; }
.nd-funnel .s:nth-child(3) { width: 64%; } .nd-funnel .s:nth-child(4) { width: 46%; }
.nd-funnel .s:last-child { background: var(--color-fg); color: #fff; }
.nd-funnel .s .t { font-weight: 800; font-size: 1.25rem; }
.nd-funnel .s .v { font-family: var(--font-mono); font-weight: 900; font-size: 1.7rem; }

/* KPI 大数字（3つ・縦に大きく） */
.nd-kpi { flex-direction: row !important; align-items: stretch !important; gap: var(--sp-lg); }
.nd-kpi .k { flex: 1; border-top: 2px solid var(--color-fg); padding-top: 22px; display: flex; flex-direction: column; }
.nd-kpi .k .n { font-family: var(--font-mono); font-weight: 900; font-size: 5.6rem; line-height: 1; letter-spacing: -.02em; }
.nd-kpi .k .n small { font-size: 2rem; font-weight: 700; margin-left: 4px; }
.nd-kpi .k .lb { font-weight: 700; font-size: 1.3rem; margin-top: auto; }
.nd-kpi .k .ds { font-size: 1rem; color: var(--color-muted); margin-top: 8px; }
.nd-kpi .k.accent .n { color: var(--color-blue); }

/* レイヤー */
.nd-layers { justify-content: space-between !important; gap: 14px; }
.nd-layers .ly { border: 1.5px solid var(--color-line); border-radius: 12px; padding: 0 26px; display: flex; align-items: center; gap: 22px; flex: 1; }
.nd-layers .ly .tag { font-family: var(--font-mono); font-weight: 800; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--color-faint); width: 120px; flex: 0 0 120px; }
.nd-layers .ly .t { font-weight: 900; font-size: 1.5rem; }
.nd-layers .ly .d { font-size: 1rem; color: var(--color-muted); margin-left: auto; }
.nd-layers .ly.top { background: var(--color-fg); color: #fff; border-color: var(--color-fg); }
.nd-layers .ly.top .tag, .nd-layers .ly.top .d { color: rgba(255,255,255,.6); }

/* 3カード（縦に伸びる） */
.nd-cards { flex-direction: row !important; align-items: stretch !important; gap: var(--sp-md); }
.nd-cards .c { flex: 1; background: var(--color-panel); border-radius: var(--radius); padding: var(--sp-lg); display: flex; flex-direction: column; justify-content: center; gap: 14px; }
.nd-cards .c .n { font-family: var(--font-mono); font-weight: 800; font-size: .8rem; letter-spacing: .14em; color: var(--color-faint); }
.nd-cards .c h3 { font-size: 1.7rem; font-weight: 900; }
.nd-cards .c p { font-size: 1.17rem; line-height: 1.6; color: var(--color-muted); }

/* 相関（中心＋衛星ノード・大きく） */
.nd-relation { align-items: stretch !important; }
.nd-relation .box { position: relative; flex: 1; min-height: 0; }
.nd-relation .core, .nd-relation .sat { position: absolute; border-radius: 50%; display: grid; place-items: center; text-align: center; }
.nd-relation .core { width: 160px; height: 160px; left: 50%; top: 50%; transform: translate(-50%,-50%); background: var(--color-fg); color: #fff; font-weight: 900; font-size: 1.3rem; z-index: 2; }
.nd-relation .sat { width: 124px; height: 124px; border: 2px solid var(--color-fg); font-weight: 700; font-size: 1.15rem; background: #fff; z-index: 2; }
.nd-relation .sat.s1 { left: 6%; top: 2%; } .nd-relation .sat.s2 { right: 6%; top: 2%; }
.nd-relation .sat.s3 { left: 6%; bottom: 2%; } .nd-relation .sat.s4 { right: 6%; bottom: 2%; }
.nd-relation svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }

/* 推移（折れ線・SVGで充填） */
.nd-trend svg { width: 100%; height: 100%; display: block; }
.nd-trend .axis { stroke: var(--color-line); stroke-width: 1.5; }
.nd-trend .grid { stroke: var(--color-hair); stroke-width: 1; }
.nd-trend .ln { fill: none; stroke: var(--color-blue); stroke-width: 3; }
.nd-trend .dot { fill: #fff; stroke: var(--color-blue); stroke-width: 2.5; }
.nd-trend .vlab { font-family: var(--font-mono); font-weight: 800; font-size: 17px; fill: var(--color-fg); }
.nd-trend .xlab { font-family: var(--font-mono); font-weight: 700; font-size: 15px; fill: var(--color-muted); }

/* ウォーターフォール（SVGで充填） */
.nd-waterfall svg { width: 100%; height: 100%; display: block; }
.nd-waterfall .bar-base { fill: var(--color-fg); }
.nd-waterfall .bar-up { fill: #c9c9cc; }
.nd-waterfall .bar-down { fill: #e3e3e6; }
.nd-waterfall .bar-end { fill: var(--color-blue); }
.nd-waterfall .conn { stroke: var(--color-line); stroke-width: 1; stroke-dasharray: 2 3; }
.nd-waterfall .blab { font-family: var(--font-mono); font-weight: 800; font-size: 18px; fill: var(--color-fg); }
.nd-waterfall .xlab { font-family: var(--font-sans); font-weight: 700; font-size: 15px; fill: var(--color-muted); }

/* ギャップ（横バー・縦に分散） */
.nd-gap { justify-content: center !important; gap: 26px; }
.nd-gap .g { display: grid; grid-template-columns: 280px 1fr 100px; align-items: center; gap: 18px; }
.nd-gap .g .lab { font-weight: 700; font-size: 1.2rem; }
.nd-gap .g .track { height: 44px; background: var(--color-panel2); border-radius: 8px; position: relative; }
.nd-gap .g .fill { position: absolute; left: 0; top: 0; bottom: 0; background: #c9c9cc; border-radius: 8px; }
.nd-gap .g.emph .fill { background: var(--color-fg); }
.nd-gap .g .val { font-family: var(--font-mono); font-weight: 900; font-size: 1.5rem; text-align: right; }
.nd-gap .gaplab { align-self: flex-end; font-family: var(--font-mono); font-weight: 800; font-size: 1.2rem; color: var(--color-blue); letter-spacing: .08em; padding-left: 0; margin-top: 6px; }

/* KPI スコアカード（信号機色・縦に大きく） */
.nd-score { flex-direction: row !important; align-items: stretch !important; gap: 16px; }
.nd-score .m { flex: 1; border: 1.5px solid var(--color-line); border-radius: 14px; padding: 24px 26px; display: flex; flex-direction: column; }
.nd-score .m .lb { font-family: var(--font-mono); font-weight: 700; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--color-faint); }
.nd-score .m .v { font-family: var(--font-mono); font-weight: 900; font-size: 3.4rem; line-height: 1.05; margin-top: 10px; }
.nd-score .m .meta { display: flex; justify-content: space-between; align-items: baseline; margin-top: auto; padding-top: 16px; font-size: 1rem; color: var(--color-muted); }
.nd-score .m .dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 8px; vertical-align: middle; }
.nd-score .m.good .dot { background: #2f9e44; } .nd-score .m.good .v { color: var(--color-fg); }
.nd-score .m.watch .dot { background: #e0a23a; }
.nd-score .m.risk .dot { background: #e0312e; } .nd-score .m.risk .v { color: #c92a2a; }

/* サマリーストリップ（3列・縦に分散して充填） */
.nd-summary { flex-direction: row !important; align-items: stretch !important; gap: 0; border-top: 2px solid var(--color-fg); }
.nd-summary .b { flex: 1; padding: var(--sp-lg) var(--sp-lg) var(--sp-lg) 0; border-right: 1px solid var(--color-hair); display: flex; flex-direction: column; }
.nd-summary .b:last-child { border-right: none; }
.nd-summary .b:not(:first-child) { padding-left: var(--sp-lg); }
.nd-summary .b .no { font-family: var(--font-mono); font-weight: 800; font-size: .8rem; color: var(--color-faint); }
.nd-summary .b .claim { font-weight: 900; font-size: 1.7rem; line-height: 1.3; margin: 14px 0 16px; }
.nd-summary .b .proof { font-size: 1.17rem; color: var(--color-muted); line-height: 1.75; }
.nd-summary .b .impl { font-size: 1.2rem; font-weight: 700; color: var(--color-fg); margin-top: auto; padding-top: 16px; border-top: 1px solid var(--color-hair); }