.gv-fig { margin: 5mm 0; padding: 0; break-inside: avoid; page-break-inside: avoid; }
.gv-fig > .gv-fig-canvas { line-height: 0; }
.gv-fig svg { display: block; width: 100%; height: auto; max-height: 200mm; overflow: visible; }
.gv-fig-title { font-size: 1.05em; font-weight: 700; margin: 0 0 2.5mm; }

.gv-fig--center { margin-left: auto; margin-right: auto; }
.gv-fig--right { margin-left: auto; margin-right: 0; }
.gv-fig--left { margin-left: 0; margin-right: auto; }
.gv-fig--w25 { width: 25%; }
.gv-fig--w33 { width: 33%; }
.gv-fig--w50 { width: 50%; }
.gv-fig--w66 { width: 66%; }
.gv-fig--w75 { width: 75%; }
.gv-fig--w100 { width: 100%; }
.gv-fig--wrap-left { float: left; margin: 1mm 6mm 3mm 0; }
.gv-fig--wrap-right { float: right; margin: 1mm 0 3mm 6mm; }
.gv-fig--break-before { break-before: page; page-break-before: always; }
.gv-fig--break-after { break-after: page; page-break-after: always; }

/* A float must not leak past the next heading or figure, which is what makes
   "흐름 끊기" work without storing a clear-block in the Markdown. */
.doc-body h1, .doc-body h2, .doc-body h3, .doc-body h4,
.doc-body figure, .doc-body table { clear: both; }

.gv-fig-cap {
  margin: 2mm 0 0; font-size: .82em; line-height: 1.5; color: #6b6b7b;
  break-before: avoid; page-break-before: avoid;
}
.gv-fig-num { font-weight: 700; margin-right: .35em; }

/* HTML 도식은 본문 안에 있으므로 프리셋의 요소 규칙을 그대로 물려받는다.
   `.body-report-serif th{background:#0b4f8a;color:#fff}` 하나 때문에 비교표의 행
   머리가 칠해지고, `ul{margin-left:6mm}` 때문에 체크리스트가 들여쓰기된다. 그래서
   도식이 쓰는 요소를 먼저 중립화하고, 개별 규칙은 모두 `.gv-fig`를 앞에 붙여
   프리셋(0,1,1)과 이 리셋(0,1,1)보다 높은 명시도(0,2,x)를 갖게 한다.
   순서에도 의존하지 않으므로 CSS 결합 순서가 바뀌어도 깨지지 않는다. */
.gv-fig table { width: 100%; border-collapse: collapse; margin: 0; }
.gv-fig th, .gv-fig td { background: none; color: inherit; border: 0; padding: 0;
                         vertical-align: middle; }
.gv-fig ul, .gv-fig ol { margin: 0; padding: 0; list-style: none; }
.gv-fig li { margin: 0; }
.gv-fig p { margin: 0; }

/* 하이라인만 고정 중립색을 쓴다. 의미를 지닌 색은 렌더러가 인라인으로 넣는다
   (팔레트는 문서마다 다르고 CSS는 그것을 알 수 없다). */
.gv-fig .gv-lines li {
  position: relative; padding-left: 3.6mm; margin: 0 0 1.1mm;
  font-size: .84em; line-height: 1.5; word-break: keep-all;
}
.gv-fig .gv-lines li:last-child { margin-bottom: 0; }
.gv-fig .gv-dot {
  position: absolute; left: 0; top: .52em; width: 1.5mm; height: 1.5mm;
  border-radius: 50%; background: #888;
}

.gv-fig .gv-kpi { display: flex; gap: 3mm; align-items: stretch; }
.gv-fig .gv-kpi-card {
  flex: 1 1 0; min-width: 0; padding: 3mm 3.5mm;
  background: #fbfbfd; border: 1px solid #e6e6ee; border-top: 2.5px solid #888;
  border-radius: 1mm; display: flex; flex-direction: column; gap: .8mm;
}
.gv-fig .gv-kpi-label { font-size: .78em; font-weight: 600; color: #6b6b7b; letter-spacing: .01em; }
.gv-fig .gv-kpi-value { font-size: 1.9em; font-weight: 800; line-height: 1.1; letter-spacing: -.02em; }
.gv-fig .gv-kpi-unit { font-size: .45em; font-weight: 600; margin-left: .25em; }
.gv-fig .gv-kpi-desc { font-size: .74em; color: #8a8a95; }

.gv-fig .gv-stat { display: flex; align-items: stretch; padding: 3mm 0;
                   border-top: 1px solid #e4e4ec; border-bottom: 1px solid #e4e4ec; }
.gv-fig .gv-stat-cell {
  flex: 1 1 0; min-width: 0; padding: 0 3mm; text-align: center;
  display: flex; flex-direction: column; gap: .6mm;
}
.gv-fig .gv-stat-cell + .gv-stat-cell { border-left: 1px solid #e4e4ec; }
.gv-fig .gv-stat-value { font-size: 1.55em; font-weight: 800; line-height: 1.15;
                         letter-spacing: -.02em; }
.gv-fig .gv-stat-unit { font-size: .5em; font-weight: 600; margin-left: .2em; }
.gv-fig .gv-stat-label { font-size: .76em; color: #6b6b7b; word-break: keep-all; }

.gv-fig .gv-callout { padding: 3mm 4mm; border-left: 3px solid #888; border-radius: 0 1mm 1mm 0; }
.gv-fig .gv-callout-tag { display: block; font-size: .74em; font-weight: 700;
                          letter-spacing: .04em; margin-bottom: 1mm; }
.gv-fig .gv-callout-body { font-size: .92em; line-height: 1.65; word-break: keep-all; }

.gv-fig .gv-step { display: flex; gap: 3mm; padding: 0 0 2.6mm; break-inside: avoid; }
.gv-fig .gv-step:last-child { padding-bottom: 0; }
.gv-fig .gv-step-no {
  flex: 0 0 auto; width: 6mm; height: 6mm; border-radius: 50%; background: #888;
  color: #fff; font-size: .8em; font-weight: 700; line-height: 6mm; text-align: center;
}
.gv-fig .gv-step-body { min-width: 0; }
.gv-fig .gv-step-label { margin: .4mm 0 .6mm; font-size: .95em; font-weight: 700;
                         word-break: keep-all; }
.gv-fig .gv-step-desc { font-size: .84em; line-height: 1.55; color: #6b6b7b;
                        word-break: keep-all; }

.gv-fig .gv-tl { margin-left: 16mm; padding-left: 4mm; border-left: 1px solid #e0e0e8; }
.gv-fig .gv-tl-row { position: relative; padding: 0 0 3mm; break-inside: avoid; }
.gv-fig .gv-tl-row:last-child { padding-bottom: 0; }
/* 12mm에서 끝난다. 마커의 흰 테두리가 13.6mm부터 시작하므로 그보다 넓으면
   연도의 마지막 글자가 그 테두리에 가려진다. */
.gv-fig .gv-tl-when {
  position: absolute; left: -20mm; top: 0; width: 12mm; text-align: right;
  font-size: .8em; font-weight: 700;
}
.gv-fig .gv-tl-mark {
  position: absolute; left: -5.2mm; top: .35em; width: 2.4mm; height: 2.4mm;
  border-radius: 50%; background: #888; box-shadow: 0 0 0 1.2mm #fff;
}
.gv-fig .gv-tl-label { margin-bottom: .5mm; font-size: .94em; font-weight: 700;
                       word-break: keep-all; }
.gv-fig .gv-tl-desc { font-size: .83em; line-height: 1.55; color: #6b6b7b;
                      word-break: keep-all; }

.gv-fig .gv-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5mm; }
.gv-fig .gv-quad {
  padding: 2.8mm 3.2mm; background: #fcfcfd; border: 1px solid #e6e6ee;
  border-top: 2.5px solid #888; border-radius: 1mm; break-inside: avoid;
}
.gv-fig .gv-quad--matrix { border-top-width: 1px; }
.gv-fig .gv-quad-head { font-size: .82em; font-weight: 700; margin-bottom: 1.6mm;
                        letter-spacing: .01em; }

.gv-fig .gv-matrix { display: grid; grid-template-columns: 7mm 1fr; gap: 1.5mm; }
.gv-fig .gv-matrix .gv-grid2 { grid-column: 2; }
.gv-fig .gv-axis-y {
  grid-column: 1; grid-row: 1; writing-mode: vertical-rl; transform: rotate(180deg);
  text-align: center; font-size: .78em; font-weight: 600; white-space: nowrap;
}
.gv-fig .gv-axis-x { grid-column: 2; text-align: center; font-size: .78em; font-weight: 600; }

.gv-fig .gv-compare { font-size: .85em; }
.gv-fig .gv-compare th, .gv-fig .gv-compare td {
  padding: 1.9mm 2.4mm; border-bottom: 1px solid #e4e4ec; text-align: center;
  word-break: keep-all;
}
.gv-fig .gv-compare thead th { color: #fff; font-weight: 600; background: #888; border-bottom: 0; }
.gv-fig .gv-compare tbody th { text-align: left; font-weight: 600; white-space: nowrap; }
.gv-fig .gv-compare .gv-best { font-size: .7em; margin-right: .3em; vertical-align: .1em; }

.gv-fig .gv-check-row {
  display: flex; align-items: baseline; gap: 2.2mm; padding: 1.6mm 0;
  border-bottom: 1px solid #eeeef4; font-size: .88em; break-inside: avoid;
}
.gv-fig .gv-check-row:last-child { border-bottom: 0; }
.gv-fig .gv-check-mark {
  flex: 0 0 auto; width: 4.4mm; height: 4.4mm; line-height: 4.2mm; text-align: center;
  border: 1px solid #888; border-radius: .8mm; font-size: .8em; font-weight: 700;
}
.gv-fig .gv-check-label { font-weight: 600; word-break: keep-all; }
.gv-fig .gv-check-desc { color: #8a8a95; font-size: .88em; word-break: keep-all; }

/* A spec we cannot draw still has to show up, and the Markdown behind it is
   never discarded — losing the user's data is worse than an ugly card. */
.gv-fig--error > .gv-fig-error {
  padding: 4mm; border: 1px dashed #c22b2b; border-radius: 1mm;
  background: #fdf6f6; color: #8c1c1c; font-size: .85em; line-height: 1.6;
}
.gv-fig .gv-fig-error strong { display: block; margin-bottom: 1mm; }
.gv-fig .gv-fig-error pre {
  margin: 2mm 0 0; padding: 2mm; background: #fff; border: 1px solid #eedcdc;
  border-radius: .8mm; font-size: .88em; white-space: pre-wrap; word-break: break-all;
  color: #6b6b7b; max-height: 40mm; overflow: hidden;
}