/* ============================================================
   도식 스타일 — genffice-tripreport `web/fig.css` 의 도식 부분을 옮겨 왔다

   `.gv-fig--*` 클래스가 곧 「사용자가 표현할 수 있는 배치의 전부」다. 배치를
   인라인 style 로 주지 않는다. 화면의 편집 패널과 보고서 HTML 이 이 파일을 같이 싣는다.
   ============================================================ */

.gv-figroot, .gv-fig {
  --accent: #1d3557; --accent-border: #9fb4cc; --accent-subtle: #eef3f8; --accent-text: #1d3557;
  --text-1: #18181b; --text-2: #3f3f46; --text-3: #71717a; --border-1: #e4e4e7; --border-2: #d4d4d8;
  --bg-panel: #fff; --bg-subtle: #f6f7f9; --bg-hover: #f1f3f6;
  --success: #126b2f; --success-subtle: #e8f5ec; --warning: #a15c00; --warning-subtle: #fff6e5;
  --danger: #b42318; --danger-subtle: #fdecea;
  --fs-10: 10px; --fs-11: 11px; --fs-12: 12px; --fs-13: 13px; --r-4: 4px; --r-6: 6px; --r-8: 8px;
}

/* ============================================================
   도식 래퍼
   ============================================================ */

.gv-fig {
  position: relative;
  margin: 16px 0 18px;
  break-inside: avoid;
  border-radius: 3px;
}
.gv-fig--center { margin-left: auto; margin-right: auto; }
.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: 6px 18px 12px 0; }
.gv-fig--wrap-right { float: right; margin: 6px 0 12px 18px; }
.gv-fig--wrap-left::after, .gv-fig--wrap-right::after { content: ""; display: table; clear: both; }

.gv-fig-title { font-size: 12.5px; font-weight: 700; color: #18181b; margin-bottom: 7px; }
.gv-fig-canvas { line-height: 0; }
.gv-fig-canvas svg { display: block; width: 100%; height: auto; }
.gv-fig-canvas > *:not(svg) { line-height: 1.6; }

.gv-fig-cap { margin-top: 7px; text-align: center; font-size: 11px; color: #444; line-height: 1.6; }
.gv-fig-num { font-weight: 700; color: #18181b; margin-right: 3px; }
.gv-fig-text:empty { display: none; }
.gv-fig-shot { font-style: normal; font-size: 10px; color: #7a7a85; margin-left: 5px; }
.gv-fig-note { margin-top: 5px; font-size: 10px; color: #777; line-height: 1.6; }
.gv-fig-note::before { content: "* "; }

/* 자동 도식 표식 — 편집 중에만 보인다 */
.gv-fig-src {
  position: absolute; top: -7px; right: -6px; z-index: 3;
  padding: 0 5px; border-radius: 20px;
  border: 1px solid var(--accent-border); background: var(--accent-subtle);
  font-size: 9px; font-weight: 700; color: var(--accent-text);
  opacity: 0; transition: opacity .15s;
}
.page.editing .gv-fig-src { opacity: 1; }

.page.editing .gv-fig { outline: 1px dashed transparent; outline-offset: 5px; }
.page.editing .gv-fig:hover { outline-color: var(--accent-border); cursor: pointer; }
.gv-fig.sel { outline: 2px solid var(--accent) !important; outline-offset: 5px; }
.cebreak { min-height: 1px; margin: 0; }
.page:not(.editing) .cebreak { display: none; }

/* 편집 중 Enter 로 생긴 빈 문단. 비어 있으면 저장되지 않으므로
   (docs 직렬화의 isBlank) 편집을 끝내면 지면에서 사라진다. */
.newp { margin: 5px 0 5px 20px; font-size: 12.5px; min-height: 1.4em; }
.newp:empty::before, .newp > br:only-child::before { content: ""; }

.gv-none { padding: 24px; text-align: center; font-size: 11px; color: #999; background: #f6f6f8; border-radius: 4px; }

/* ============================================================
   HTML 도식
   ============================================================ */

/* 지표 카드 · 통계 스트립 */
.gv-kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 9px; }
.gv-kpi .c { border: 1px solid #dfe5e4; border-left: 3px solid var(--accent); border-radius: 4px; background: #f7fafa; padding: 11px 13px; }
.gv-kpi .v { font-size: 25px; font-weight: 700; color: #0b4a45; letter-spacing: -.02em; line-height: 1.15; }
.gv-kpi .v i { font-size: 12px; font-weight: 600; font-style: normal; margin-left: 2px; color: #4b7a75; }
.gv-kpi .l { font-size: 11px; color: #4b4b55; margin-top: 4px; font-weight: 600; }
.gv-kpi .d { font-size: 10px; color: #7a7a85; margin-top: 2px; }

.gv-strip { display: flex; flex-wrap: wrap; gap: 0; border: 1px solid #dfe5e4; border-radius: 4px; overflow: hidden; }
.gv-strip .c { flex: 1; min-width: 100px; padding: 10px 13px; border-right: 1px solid #e8eceb; }
.gv-strip .c:last-child { border-right: 0; }
.gv-strip .l { display: block; font-size: 10px; color: #7a7a85; font-weight: 600; }
.gv-strip .v { display: block; font-size: 19px; font-weight: 700; color: #0b4a45; margin-top: 1px; }
.gv-strip .v i { font-size: 11px; font-weight: 600; font-style: normal; margin-left: 2px; color: #4b7a75; }

/* 체크리스트 */
.gv-ck { list-style: none; margin: 0; padding: 0; border: 1px solid #dfe5e4; border-radius: 4px; overflow: hidden; }
.gv-ck li { display: flex; align-items: flex-start; gap: 9px; padding: 9px 12px; border-bottom: 1px solid #edf0ef; font-size: 12px; }
.gv-ck li:last-child { border-bottom: 0; }
.gv-ck .b {
  flex: 0 0 auto; width: 16px; height: 16px; margin-top: 1px; display: grid; place-items: center;
  border: 1.4px solid #c9cfce; border-radius: 3px; font-size: 11px; font-weight: 700; color: #fff;
}
.gv-ck li.on .b { background: var(--accent); border-color: var(--accent); }
.gv-ck .t { flex: 1; min-width: 0; }
.gv-ck .t b { font-weight: 650; }
.gv-ck .t span { display: block; font-size: 10.5px; color: #7a7a85; margin-top: 2px; }
.gv-ck .s { flex: 0 0 auto; font-size: 10px; font-weight: 700; color: #9a9aa4; }
.gv-ck li.on .s { color: var(--accent); }

/* 번호 단계 */
.gv-num { list-style: none; margin: 0; padding: 0; }
.gv-num li { display: flex; gap: 11px; padding: 0 0 14px; position: relative; }
.gv-num li:not(:last-child)::before { content: ""; position: absolute; left: 13px; top: 28px; bottom: 2px; width: 1.5px; background: #dfe5e4; }
.gv-num .n {
  flex: 0 0 auto; width: 27px; height: 27px; display: grid; place-items: center; z-index: 1;
  border-radius: 50%; background: var(--accent); color: #fff; font-size: 12px; font-weight: 700;
}
.gv-num .t { flex: 1; min-width: 0; padding-top: 3px; }
.gv-num .t b { font-size: 12.5px; font-weight: 700; }
.gv-num .t em { font-style: normal; font-size: 10px; font-weight: 700; color: var(--accent-text); background: var(--accent-subtle); border-radius: 20px; padding: 1px 7px; margin-left: 6px; }
.gv-num .t span { display: block; font-size: 11.5px; color: #55555f; margin-top: 3px; line-height: 1.65; }

/* 세로 연혁 */
.gv-tlv { list-style: none; margin: 0; padding: 0; }
.gv-tlv li { display: flex; gap: 10px; padding: 0 0 15px; position: relative; }
.gv-tlv li:not(:last-child)::before { content: ""; position: absolute; left: 62px; top: 14px; bottom: 0; width: 1.5px; background: #dfe5e4; }
.gv-tlv .w { flex: 0 0 56px; text-align: right; font-size: 11px; font-weight: 700; color: var(--accent-text); padding-top: 1px; }
.gv-tlv .dot { flex: 0 0 auto; width: 9px; height: 9px; margin-top: 5px; border-radius: 50%; background: #fff; border: 2.4px solid var(--accent); z-index: 1; }
.gv-tlv .t { flex: 1; min-width: 0; }
.gv-tlv .t b { font-size: 12.5px; font-weight: 700; }
.gv-tlv .t span { display: block; font-size: 11.5px; color: #55555f; margin-top: 2px; line-height: 1.65; }

/* 2×2 매트릭스 · SWOT */
.gv-mx .ay { font-size: 10px; font-weight: 700; color: #7a7a85; margin-bottom: 4px; }
.gv-mx .axx { font-size: 10px; font-weight: 700; color: #7a7a85; margin-top: 4px; text-align: right; }
.gv-mx .grid, .gv-swot { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.gv-mx .q, .gv-swot .q { border: 1px solid #dfe5e4; border-radius: 4px; padding: 9px 11px; background: #fafbfb; }
.gv-mx .q b, .gv-swot .q b { display: block; font-size: 11px; font-weight: 700; margin-bottom: 5px; }
.gv-mx .q ul, .gv-swot .q ul { list-style: none; margin: 0; padding: 0; }
.gv-mx .q li, .gv-swot .q li { font-size: 11.5px; color: #3c3c46; padding: 1.5px 0 1.5px 10px; position: relative; line-height: 1.6; }
.gv-mx .q li::before, .gv-swot .q li::before { content: "·"; position: absolute; left: 2px; color: #9a9aa4; }
.gv-mx .q0 { border-left: 3px solid var(--accent); }
.gv-mx .q1, .gv-mx .q2 { border-left: 3px solid #a9c9c5; }
.gv-mx .q3 { border-left: 3px solid #d8d8de; }
.gv-swot .s { border-left: 3px solid #167c3c; } .gv-swot .s b { color: #167c3c; }
.gv-swot .w { border-left: 3px solid #c22b2b; } .gv-swot .w b { color: #c22b2b; }
.gv-swot .o { border-left: 3px solid var(--accent); } .gv-swot .o b { color: var(--accent-text); }
.gv-swot .t { border-left: 3px solid #9a5700; } .gv-swot .t b { color: #9a5700; }

/* 비교표 — 지면의 표(.tb)와 구분되는 도식 표다 */
.gv-tc { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.gv-tc th, .gv-tc td { border: 1px solid #ccd3d2; padding: 7px 9px; vertical-align: top; line-height: 1.6; }
.gv-tc thead th { background: #eef3f2; font-weight: 700; text-align: center; font-size: 11px; }
.gv-tc tbody th { background: #fafbfb; text-align: left; font-weight: 650; }
.gv-tc .mk { color: var(--accent); font-weight: 700; margin-right: 4px; }

/* 콜아웃 */
.gv-call { display: flex; gap: 10px; border-radius: 4px; padding: 11px 13px; border: 1px solid; }
.gv-call .i { flex: 0 0 auto; font-size: 14px; line-height: 1.4; }
.gv-call .b { flex: 1; min-width: 0; font-size: 12px; line-height: 1.75; }
.gv-call .b b { display: block; font-weight: 700; margin-bottom: 2px; }
.gv-call[data-k="warn"] { border-color: #f0d9b8; background: #fdf7ee; color: #6b4406; }
.gv-call[data-k="info"] { border-color: var(--accent-border); background: var(--accent-subtle); color: #0b4a45; }
.gv-call[data-k="ok"] { border-color: #bfe3cb; background: #f0f9f3; color: #14602f; }
.gv-call[data-k="note"] { border-color: #dcdce2; background: #f8f8fa; color: #46464f; }

/* 사진 */
.gv-ph { border: 1px solid #c9c9d2; border-radius: 3px; overflow: hidden; }
.gv-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gv-ph-cap { margin-top: 5px; text-align: center; font-size: 11px; color: #333; }
.gv-ph-meta { margin-top: 5px; text-align: center; font-size: 10px; color: #7a7a85; }
.gv-phgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px 15px; }
.gv-phgrid.two { grid-template-columns: 1fr 1fr; }
.gv-phgrid figure { margin: 0; }
.gv-phgrid figcaption { margin-top: 5px; text-align: center; font-size: 11px; color: #333; font-weight: 600; }
.page.editing .gv-phgrid figure:hover .gv-ph { outline: 2px solid var(--accent-border); }

/* 갤러리 썸네일 — 실제 렌더 결과를 축소해 넣는다.
   고정 도형 썸네일을 쓰지 않는 이유는 프리셋 피커에서 실물과 어긋나 오해를 유발한
   경험이 있기 때문이다 (docs 설계문서 §5.3). 대신 「축소해도 무엇인지 알아보게」가 목표다. */
.gv-thumb { width: 100%; margin: 0; pointer-events: none; }
.gv-thumb .gv-fig-canvas {
  height: 86px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.gv-thumb .gv-fig-canvas svg { width: 100%; height: 100%; }
.gv-thumb .gv-fig-canvas > *:not(svg) { zoom: .5; width: 200%; }

/* 여러 항목을 담는 HTML 도식은 썸네일에서 가로로 편다 — 세로로 쌓이면 첫 항목만 보인다 */
.gv-thumb .gv-kpi { grid-template-columns: repeat(3, 1fr); }
.gv-thumb .gv-kpi .d, .gv-thumb .gv-ck .s { display: none; }
.gv-thumb .gv-ck li, .gv-thumb .gv-num li, .gv-thumb .gv-tlv li { padding-bottom: 5px; }
.gv-thumb .gv-tlv .t span, .gv-thumb .gv-num .t span, .gv-thumb .gv-ck .t span { display: none; }
.gv-thumb .gv-mx .q li:nth-child(n+3), .gv-thumb .gv-swot .q li:nth-child(n+3) { display: none; }
.gv-thumb .gv-tc td { max-width: 90px; overflow: hidden; }
.gv-thumb .gv-ph { height: 74px !important; }
.gv-thumb .gv-ph-cap, .gv-thumb .gv-phgrid figcaption { display: none; }
.gv-thumb .gv-phgrid { gap: 7px; }

/* ---------- 이미지 — IR 도해는 자르지 않고 통째로 ---------- */
.gv-ph { border: 1px solid #c9ced8; border-radius: 3px; overflow: hidden; background: #fff; text-align: center; line-height: 0; }
.gv-ph img { width: 100%; height: auto; object-fit: contain; display: block; margin: 0 auto; }
.gv-phgrid.n3 { grid-template-columns: 1fr 1fr 1fr; }
.gv-ph-src { margin-top: 4px; text-align: center; font-size: 10px; color: #555; line-height: 1.5; }
.gv-fig--image .gv-fig-title, .gv-fig--image-pair .gv-fig-title, .gv-fig--image-grid .gv-fig-title {
  text-align: center; border: 1px solid #c9ced8; border-bottom: 0; background: #eef1f6; padding: 3px 8px;
  margin-bottom: 0; font-size: 11.5px; }
.gv-fig--image .gv-fig-title + .gv-fig-canvas .gv-ph { border-top-left-radius: 0; border-top-right-radius: 0; }
.figslot { display: flex; align-items: center; justify-content: center; border: 1px dashed #c9ced8; color: #8a8f99; font-size: 11px; line-height: 1.4; }
@media print { .gv-fig { break-inside: avoid; page-break-inside: avoid; } }