/* 図解・グラフの共通部品（.gx-）。DICE公式サイトとAGORAの、両方で同じものを使う。
   色は、読み込み先のサイトの色（DICE：--dn-*／AGORA：--color-*）を、そのまま引き継ぐ。どちらも無いときの予備の色も持つ。
   濃淡だけに頼らず、ラベルと数字を必ず併記（色が見分けにくい方にも読める）。
   使う所：scripts/dice_next_charts.py（DICEサイトの生成）・static/effects.html・static/adoption-guide.html・static/js/effects-calc.js */
.gx {
  --gx-bg: var(--dn-bg, var(--color-bg, #ffffff));
  --gx-surface: var(--dn-surface, var(--color-surface, #ffffff));
  --gx-soft: var(--dn-soft, var(--color-surface-muted, #eff2f8));
  --gx-ink: var(--dn-ink, var(--color-text, #1c2438));
  --gx-muted: var(--dn-muted, var(--color-text-sub, #566078));
  --gx-line: var(--dn-line, var(--color-border, #dfe3ec));
  --gx-navy: var(--dn-navy, var(--color-heading, #14264b));
  --gx-accent: var(--dn-action, #c81e6b);
  --gx-c1: #14264b; --gx-c2: #c81e6b; --gx-c3: #3f6bb5; --gx-c4: #8aa4d1; --gx-c5: #7a5aa6; --gx-c6: #b8c3d9;
  font-family: inherit; color: var(--gx-ink); line-height: 1.8; min-width: 0;
}
body.dice-dark .gx, html.dark .gx, :root[data-theme="dark"] .gx {
  --gx-c1: #8aa4d1; --gx-c2: #ee5f98; --gx-c3: #5b8be0; --gx-c4: #3a4b78; --gx-c5: #a58bd1; --gx-c6: #6a7799;
}
.gx *, .gx *::before, .gx *::after { box-sizing: border-box; }
.gx .c1 { --c: var(--gx-c1); } .gx .c2 { --c: var(--gx-c2); } .gx .c3 { --c: var(--gx-c3); }
.gx .c4 { --c: var(--gx-c4); } .gx .c5 { --c: var(--gx-c5); } .gx .c6 { --c: var(--gx-c6); }
.gx h3 { margin: 0; }

.gx-note { margin: 24px 0 0; max-width: 44em; font-size: 15px; color: var(--gx-muted); line-height: 1.9; border: 1px solid var(--gx-line); background: var(--gx-soft); padding: 12px 16px; }
.gx-chart-title { font-size: 15px; font-weight: 700; color: var(--gx-ink); margin: 0 0 14px; }

/* 大きな数字 */
.gx-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0 0 40px; padding: 0; list-style: none; }
.gx-stats li { background: var(--gx-surface); border: 1px solid var(--gx-line); padding: 22px 22px 20px; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.gx-stats b { font-size: clamp(38px, 5vw, 56px); line-height: 1; color: var(--gx-navy); font-variant-numeric: tabular-nums; font-weight: 700; }
.gx-stats small { font-size: 14px; color: var(--gx-muted); }
.gx-stats span { flex-basis: 100%; font-size: 14px; color: var(--gx-muted); line-height: 1.7; }

.gx-chart-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 40px; align-items: start; }
.gx-chart-grid > div { min-width: 0; }

/* 横棒グラフ */
.gx-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.gx-bars li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; }
.gx-bar-label { grid-column: 1 / -1; font-size: 14px; line-height: 1.6; color: var(--gx-ink); }
.gx-bar-track { height: 16px; background: var(--gx-soft); border-radius: 2px; overflow: hidden; min-width: 0; }
.gx-bar-fill { display: block; height: 100%; background: var(--c, var(--gx-c1)); border-radius: 2px; min-width: 2px; transition: width .35s ease; }
.gx-bar-val { font-variant-numeric: tabular-nums; font-size: 14px; color: var(--gx-ink); white-space: nowrap; }
.gx-bar-val b { font-size: 18px; margin-right: 2px; }
.gx-bar-val small { color: var(--gx-muted); }

/* 円グラフ（ドーナツ） */
.gx-donut { display: grid; gap: 16px; justify-items: center; }
.gx-donut svg { width: min(240px, 70%); height: auto; }
.gx-arc-base { stroke: var(--gx-soft); }
.gx-arc { stroke: var(--c, var(--gx-c1)); transition: stroke-dasharray .35s ease, stroke-dashoffset .35s ease; }
.gx-donut-num { font-size: 24px; font-weight: 700; fill: var(--gx-navy); font-variant-numeric: tabular-nums; }
.gx-donut-unit { font-size: 7px; fill: var(--gx-muted); }
.gx-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; width: 100%; }
.gx-legend li { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: 14px; line-height: 1.5; }
.gx-legend b { font-variant-numeric: tabular-nums; }
.gx-dot { width: 12px; height: 12px; border-radius: 2px; background: var(--c, var(--gx-c1)); display: inline-block; }

/* 順番の図（矢印つき） */
.gx-flow { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0; counter-reset: gx-step; }
.gx-flow li { position: relative; background: var(--gx-surface); border: 1px solid var(--gx-line); border-left-width: 0; padding: 18px 16px 18px 20px; min-width: 0; counter-increment: gx-step; display: flex; flex-direction: column; gap: 6px; }
.gx-flow li:first-child { border-left-width: 1px; }
.gx-flow li::before { content: counter(gx-step); font-size: 13px; color: var(--gx-muted); }
.gx-flow li:not(:last-child)::after { content: ""; position: absolute; right: -9px; top: 50%; width: 16px; height: 16px; background: var(--gx-surface); border-top: 1px solid var(--gx-line); border-right: 1px solid var(--gx-line); transform: translateY(-50%) rotate(45deg); z-index: 1; }
.gx-flow b { font-size: 15px; line-height: 1.5; color: var(--gx-navy); }
.gx-flow span { font-size: 13px; line-height: 1.7; color: var(--gx-muted); }
.gx-flow.is-old li { background: var(--gx-soft); }
.gx-flow.is-old li:not(:last-child)::after { background: var(--gx-soft); }
.gx-flow.is-new li { border-top: 3px solid var(--gx-accent); }

/* 比べる図 */
.gx-vs { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 16px; align-items: stretch; }
.gx-vs-col { background: var(--gx-surface); border: 1px solid var(--gx-line); padding: 24px 24px 22px; min-width: 0; }
.gx-vs-col.is-old { background: var(--gx-soft); }
.gx-vs-col.is-new { border-top: 3px solid var(--gx-accent); }
.gx-vs-col h3 { font-size: 20px; margin-bottom: 12px; color: var(--gx-navy); }
.gx-vs-col ul { margin: 0; padding-left: 1.2em; display: grid; gap: 8px; font-size: 15px; line-height: 1.8; }
.gx-vs-arrow { align-self: center; font-size: 28px; color: var(--gx-muted); }

/* 状態の表（使えます／一部／これから） */
.gx-states { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--gx-line); }
.gx-states li { display: grid; grid-template-columns: 5.5em minmax(0, 1fr); gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--gx-line); align-items: start; }
.gx-states b { font-size: 16px; color: var(--gx-navy); }
.gx-states p { margin: 4px 0 0; font-size: 14px; color: var(--gx-muted); line-height: 1.8; }
.gx-state { display: inline-block; text-align: center; font-size: 12px; font-weight: 700; padding: 3px 0; border: 1px solid var(--gx-navy); color: var(--gx-navy); letter-spacing: .06em; }
.gx-state.is-ok { background: var(--gx-navy); color: var(--gx-bg); }
.gx-state.is-part { border-style: dashed; }
.gx-state.is-next { border-color: var(--gx-muted); color: var(--gx-muted); }

/* 守りの層（外側ほど左に寄せ、内側ほど段を下げる） */
.gx-layers { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.gx-layers li { display: grid; grid-template-columns: 5em minmax(0, 1fr); gap: 18px; align-items: start; background: var(--gx-surface); border: 1px solid var(--gx-line); padding: 18px 20px; }
.gx-layers li:nth-child(2) { margin-inline: 14px; } .gx-layers li:nth-child(3) { margin-inline: 28px; }
.gx-layers li:nth-child(4) { margin-inline: 42px; } .gx-layers li:nth-child(5) { margin-inline: 56px; }
.gx-layer-tag { font-weight: 700; font-size: 15px; color: var(--gx-bg); background: var(--gx-navy); text-align: center; padding: 4px 0; }
.gx-layers b { font-size: 16px; color: var(--gx-navy); }
.gx-layers p { margin: 4px 0 0; font-size: 14px; color: var(--gx-muted); line-height: 1.8; }

/* 図（SVG）。狭い画面では、積み重ねのカードに切り替える（字が小さくなりすぎるため） */
.gx-fig { margin: 0; }
.gx-fig svg { width: 100%; height: auto; display: block; }
.gx-fig figcaption { margin-top: 12px; font-size: 14px; color: var(--gx-muted); line-height: 1.8; max-width: 44em; }
.gx-fig text { font-family: inherit; font-size: 14px; fill: var(--gx-ink); text-anchor: middle; }
.gx-fig text.h { font-weight: 700; font-size: 16px; fill: var(--gx-navy); }
.gx-fig text.s { font-size: 12px; fill: var(--gx-muted); }
.gx-fig-org rect, .gx-fig-store rect { fill: var(--gx-surface); stroke: var(--gx-line); stroke-width: 1.5; }
.gx-fig-me circle { fill: var(--gx-navy); }
.gx-fig-me text { fill: var(--gx-bg); font-weight: 700; }
.gx-fig-me text.s { fill: var(--gx-bg); opacity: .8; }
.gx-fig-base rect { fill: var(--gx-soft); stroke: var(--gx-line); }
.gx-fig-agora rect { fill: var(--gx-surface); stroke: var(--gx-accent); stroke-width: 2.5; }
.gx-fig-lines path { stroke: var(--gx-muted); stroke-width: 1.5; fill: none; }
.gx-fig-m { display: none; list-style: none; margin: 0; padding: 0; gap: 10px; }
.gx-fig-m li { background: var(--gx-surface); border: 1px solid var(--gx-line); padding: 14px 16px; display: grid; gap: 4px; }
.gx-fig-m li.is-me { background: var(--gx-navy); border-color: var(--gx-navy); }
.gx-fig-m li.is-me b, .gx-fig-m li.is-me span { color: var(--gx-bg); }
.gx-fig-m li.is-base { background: var(--gx-soft); }
.gx-fig-m li.is-agora { border: 2px solid var(--gx-accent); }
.gx-fig-m b { font-size: 15px; color: var(--gx-navy); }
.gx-fig-m span { font-size: 13px; color: var(--gx-muted); line-height: 1.7; }

/* 計算機・前提の編集 */
.gx-calc { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 20px; }
.gx-calc label { display: grid; gap: 6px; font-size: 14px; color: var(--gx-ink); min-width: 0; }
.gx-calc label.is-wide { grid-column: 1 / -1; }
.gx-calc input[type=number] { width: 100%; min-height: 46px; padding: 0 12px; font-size: 18px; font-family: inherit; border: 1px solid var(--gx-line); background: var(--gx-surface); color: var(--gx-ink); border-radius: 4px; font-variant-numeric: tabular-nums; }
.gx-calc input[type=range] { width: 100%; accent-color: var(--gx-accent); }
.gx-calc small { color: var(--gx-muted); font-size: 12px; }
.gx-details { margin-top: 24px; border: 1px solid var(--gx-line); background: var(--gx-surface); }
.gx-details > summary { cursor: pointer; padding: 14px 18px; font-weight: 700; color: var(--gx-navy); }
.gx-details > div { padding: 4px 18px 18px; }
.gx-assume { display: grid; gap: 0; }
.gx-assume-row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.6fr) minmax(0, 1.4fr); gap: 8px 16px; padding: 14px 0; border-top: 1px solid var(--gx-line); align-items: start; }
.gx-assume-row:first-child { border-top: 0; }
.gx-assume-row > b { color: var(--gx-navy); font-size: 15px; line-height: 1.6; }
.gx-assume-row > p { margin: 0; font-size: 13px; color: var(--gx-muted); line-height: 1.8; }
.gx-assume-in { display: flex; flex-wrap: wrap; gap: 8px 14px; }
.gx-assume-in label { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--gx-ink); }
.gx-assume-in input { width: 5.2em; min-height: 38px; padding: 0 8px; font-size: 15px; font-family: inherit; border: 1px solid var(--gx-line); background: var(--gx-bg); color: var(--gx-ink); border-radius: 4px; font-variant-numeric: tabular-nums; }
.gx-share { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 16px; }
.gx-share input { flex: 1 1 18em; min-width: 0; min-height: 40px; padding: 0 10px; font-size: 13px; font-family: inherit; border: 1px solid var(--gx-line); background: var(--gx-surface); color: var(--gx-ink); border-radius: 4px; }
.gx-btn { min-height: 40px; padding: 0 16px; font-size: 14px; font-family: inherit; font-weight: 700; border: 1px solid var(--gx-navy); background: transparent; color: var(--gx-navy); border-radius: 4px; cursor: pointer; }
.gx-btn:hover { background: var(--gx-navy); color: var(--gx-bg); }
.gx-evidence { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.gx-evidence > div { background: var(--gx-surface); border: 1px solid var(--gx-line); padding: 22px 24px; min-width: 0; }
.gx-evidence h3 { font-size: 17px; margin-bottom: 10px; color: var(--gx-navy); }
.gx-evidence ul, .gx-evidence ol { margin: 0; padding-left: 1.3em; display: grid; gap: 8px; font-size: 14px; line-height: 1.8; }

/* 表 */
.gx-table-wrap { overflow-x: auto; }
.gx-table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.8; }
.gx-table th, .gx-table td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--gx-line); vertical-align: top; }
.gx-table thead th { background: var(--gx-soft); color: var(--gx-navy); }
.gx-table tbody th { width: 14em; font-weight: 700; color: var(--gx-navy); }

@media (max-width: 980px) {
  .gx-chart-grid, .gx-evidence { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .gx-assume-row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .gx-flow { grid-auto-flow: row; grid-auto-columns: auto; }
  .gx-flow li { border-left-width: 1px; border-top-width: 0; }
  .gx-flow li:first-child { border-top-width: 1px; }
  .gx-flow li:not(:last-child)::after { right: auto; left: 50%; top: auto; bottom: -9px; transform: translateX(-50%) rotate(135deg); }
  .gx-flow.is-new li { border-top-width: 0; border-color: var(--gx-accent); }
  .gx-flow.is-new li:first-child { border-top-width: 1px; }
}
@media (max-width: 680px) {
  .gx-stats, .gx-calc { grid-template-columns: minmax(0, 1fr); }
  .gx-vs { grid-template-columns: minmax(0, 1fr); }
  .gx-vs-arrow { transform: rotate(90deg); justify-self: center; }
  .gx-states li { grid-template-columns: 4.6em minmax(0, 1fr); gap: 12px; }
  .gx-layers li { grid-template-columns: minmax(0, 1fr); gap: 8px; margin-inline: 0 !important; }
  .gx-layer-tag { justify-self: start; padding: 2px 14px; }
  .gx-table, .gx-table tbody, .gx-table tr, .gx-table th, .gx-table td { display: block; }
  .gx-table thead { display: none; }
  .gx-table tbody th { width: auto; border-bottom: 0; padding-bottom: 0; }
  .gx-fig-d { display: none; }
  .gx-fig-m { display: grid; }
}
@media (prefers-reduced-motion: reduce) { .gx-bar-fill, .gx-arc { transition: none; } }