/* ============================================================
   보고서 편집기 — 도식 · 이미지 · 플로팅 툴바 · 갤러리 · 슬래시
   (앱 보고서 편집 표준 · `상태/계약/app-editor.md`)

   정본은 `genffice-tripreport/web/fig.css` 다. `.gv-fig--*` 이름은 genffice-docs
   `figures/css.py` 를 따른다 — 배치를 인라인 style 이 아니라 **class 로만** 하는 것이
   그 설계의 요점이라 이 파일이 곧 「표현할 수 있는 배치의 전부」다.
   편집 UI 는 `rx-` 로 가른다 — 앱의 `.gcell` 같은 이름과 겹치지 않게.
   ============================================================ */

/* ---------- 도식 래퍼 ---------- */
.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; }
.doc-sec::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-text:empty::before { content: ""; }
.doc-editing .gv-fig-text:empty::before { content: "캡션"; color: #b4b4bd; }
.gv-fig-note { margin-top: 5px; font-size: 10px; color: #777; line-height: 1.6; }
.gv-fig-note::before { content: "* "; }
.doc-editing .gv-fig { outline: 1px dashed transparent; outline-offset: 5px; }
.doc-editing .gv-fig:hover { outline-color: var(--accent-border); cursor: pointer; }
.gv-fig.sel { outline: 2px solid var(--accent) !important; outline-offset: 5px; }
.doc-editing [contenteditable="false"] { user-select: none; }
.rx-guard { min-height: 1.2em; }
.gv-none, .gv-slot { padding: 24px; text-align: center; font-size: 11px; color: #999; background: #f6f6f8; border-radius: 4px; line-height: 1.5; }
.gv-slot { display: grid; place-items: center; border: 1px dashed #d6d6dd; }

/* ---------- 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; 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; }
.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; }
.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.solo img { height: auto; object-fit: contain; }
.gv-phgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px 15px; }
.gv-phgrid figure { margin: 0; }
.gv-phgrid figcaption { margin-top: 5px; text-align: center; font-size: 11px; color: #333; font-weight: 600; }

/* ---------- 갤러리 썸네일 — 실제 렌더 결과를 축소한다 ---------- */
.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%; }
.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-tlv .t span, .gv-thumb .gv-num .t span, .gv-thumb .gv-ck .t span { display: none; }
.rx-thumb-img { height: 86px; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 4px; background: #f3f5f5; color: #7fa7a2; }
.rx-thumb-img.n4 svg { width: 30px; height: 22px; }
.rx-thumb-img.n4 { padding: 0 34px; }

/* ---------- 도식 플로팅 툴바 ---------- */
.rx-figbar { position: fixed; z-index: 400; display: flex; align-items: center; gap: 3px; padding: 5px 7px; border-radius: var(--r-8); background: var(--bg-panel); border: 1px solid var(--border-2); box-shadow: var(--sh-3); }
.rx-figbar[hidden], .rx-slash[hidden], .rx-ov[hidden] { display: none !important; }
.rx-g { display: inline-flex; gap: 2px; }
.rx-sep { width: 1px; height: 17px; background: var(--border-2); margin: 0 2px; }
.rx-b { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 24px; height: 24px; padding: 0 5px; border: 1px solid transparent; border-radius: var(--r-4); background: transparent; color: var(--text-2); font: inherit; font-size: var(--fs-10); font-weight: 600; cursor: pointer; }
.rx-b:hover { background: var(--bg-hover); color: var(--text-1); }
.rx-b.on { background: var(--accent-subtle); color: var(--accent-text); }
.rx-b svg, .rx-ins svg { width: 13px; height: 13px; }
.rx-b.wide { padding: 0 8px; font-size: var(--fs-11); }
.rx-b.danger:hover { background: var(--danger-subtle); color: var(--danger); }
.rx-fs { height: 24px; border: 1px solid var(--border-2); border-radius: var(--r-4); background: var(--bg-panel); font: inherit; font-size: var(--fs-11); font-weight: 600; color: var(--text-1); padding: 0 4px; cursor: pointer; }
.rx-ins { display: inline-flex; align-items: center; gap: 2px; }
.rx-ins .eb-b.wide { display: inline-flex; align-items: center; gap: 4px; width: auto; padding: 0 9px; font-weight: 600; }

/* ---------- 슬래시 명령 ---------- */
.rx-slash { position: fixed; z-index: 400; width: 250px; max-height: 270px; overflow-y: auto; padding: 5px; border-radius: var(--r-8); background: var(--bg-panel); border: 1px solid var(--border-2); box-shadow: var(--sh-3); }
.rx-sh { padding: 5px 8px 6px; font-size: var(--fs-10); font-weight: 700; color: var(--text-3); }
.rx-sh code { background: var(--bg-subtle); padding: 0 4px; border-radius: 3px; color: var(--accent-text); }
.rx-si { display: block; width: 100%; text-align: left; border: 0; border-radius: var(--r-6); background: transparent; padding: 6px 8px; font: inherit; cursor: pointer; }
.rx-si:hover, .rx-si:first-of-type { background: var(--bg-hover); }
.rx-si b { display: block; font-size: var(--fs-12); font-weight: 650; }
.rx-si span { display: block; font-size: var(--fs-10); color: var(--text-3); }
.rx-sf { padding: 6px 8px 3px; font-size: 9px; color: var(--text-3); border-top: 1px solid var(--border-1); margin-top: 4px; }

/* ---------- 모달 ---------- */
.rx-ov { position: fixed; inset: 0; z-index: 500; display: grid; place-items: center; background: rgba(20, 20, 26, .38); padding: 24px; }
.rx-modal { display: flex; flex-direction: column; width: min(620px, 100%); max-height: calc(100vh - 48px); border-radius: var(--r-10); background: var(--bg-panel); box-shadow: var(--sh-3); overflow: hidden; }
.rx-modal.wide { width: min(900px, 100%); }
.rx-mh { flex: 0 0 auto; display: flex; align-items: flex-start; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--border-1); }
.rx-mh > div { flex: 1; min-width: 0; }
.rx-mh h3 { font-size: var(--fs-15); font-weight: 650; margin: 0; }
.rx-md { font-size: var(--fs-11); color: var(--text-3); margin-top: 2px; }
.rx-x { border: 0; background: transparent; font-size: 20px; line-height: 1; color: var(--text-3); cursor: pointer; padding: 2px 6px; border-radius: var(--r-6); }
.rx-x:hover { background: var(--bg-hover); color: var(--text-1); }
.rx-mb { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 18px; }
.rx-mf { flex: 0 0 auto; display: flex; justify-content: flex-end; gap: 7px; padding: 12px 18px; border-top: 1px solid var(--border-1); background: var(--bg-sidebar); }
.rx-lb { font-size: var(--fs-10); font-weight: 700; color: var(--text-3); letter-spacing: .02em; margin: 0 0 6px; }
.rx-lbd { font-weight: 400; color: var(--text-3); }
.rx-note { font-size: var(--fs-10); color: var(--text-3); line-height: 1.7; margin: 8px 0 12px; }
.rx-none { padding: 20px 4px; font-size: var(--fs-11); color: var(--text-3); }
.rx-in { width: 100%; box-sizing: border-box; border: 1px solid var(--border-2); border-radius: var(--r-6); background: var(--bg-app); padding: 7px 10px; font: inherit; font-size: var(--fs-12); color: var(--text-1); outline: none; }
.rx-in:focus, .rx-spec:focus { border-color: var(--accent); box-shadow: var(--ring); }
.rx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(146px, 1fr)); gap: 9px; }
.rx-cell { display: block; text-align: left; border: 1px solid var(--border-2); border-radius: var(--r-8); background: var(--bg-panel); padding: 8px; cursor: pointer; font: inherit; }
.rx-cell:hover { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-subtle); }
.rx-cell .gv-thumb { background: #fff; border-radius: var(--r-4); overflow: hidden; }
.rx-cell b { display: block; font-size: var(--fs-11); font-weight: 650; margin-top: 7px; }
.rx-cell span { display: block; font-size: 9.5px; color: var(--text-3); line-height: 1.5; margin-top: 1px; }
.rx-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.rx-chip { border: 1px solid var(--border-2); border-radius: 20px; background: var(--bg-panel); padding: 3px 10px; font: inherit; font-size: var(--fs-11); font-weight: 600; color: var(--text-2); cursor: pointer; }
.rx-chip:hover { border-color: var(--accent-border); background: var(--accent-subtle); color: var(--accent-text); }
.rx-chip.on { border-color: transparent; background: var(--accent); color: #fff; }
.rx-g2 { display: grid; grid-template-columns: 1.05fr 1fr; gap: 18px; }
.rx-g2 > div { min-width: 0; }
.rx-spec { width: 100%; box-sizing: border-box; height: 210px; resize: vertical; border: 1px solid var(--border-2); border-radius: var(--r-6); background: var(--bg-app); padding: 9px 10px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; line-height: 1.6; color: var(--text-1); outline: none; }
.rx-spec.tall { height: 300px; }
.rx-spec.bad { border-color: var(--danger); background: var(--danger-subtle); }
.rx-ro { border: 1px solid var(--border-1); border-radius: var(--r-6); background: var(--bg-subtle); padding: 9px 10px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10.5px; line-height: 1.6; color: var(--text-2); max-height: 150px; overflow: auto; white-space: pre-wrap; margin: 0; }
.rx-prev { border: 1px solid var(--border-1); border-radius: var(--r-6); background: #fff; padding: 14px; font-size: 13px; color: #111; }
.rx-prev .gv-fig { margin: 0; width: 100% !important; float: none !important; }
.rx-drop { display: block; border: 1.5px dashed var(--border-3); border-radius: var(--r-8); padding: 16px; text-align: center; cursor: pointer; background: var(--bg-app); }
.rx-drop:hover, .rx-drop.over { border-color: var(--accent); background: var(--accent-subtle); }
.rx-drop b { display: block; font-size: var(--fs-12); font-weight: 650; margin-bottom: 3px; }
.rx-drop span { display: block; font-size: var(--fs-10); color: var(--text-3); }
.rx-url { display: flex; gap: 6px; margin-top: 8px; }
.rx-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.rx-pim { position: relative; border: 1px solid var(--border-2); border-radius: var(--r-6); padding: 5px; background: var(--bg-panel); }
.rx-pim img { display: block; width: 100%; height: 72px; object-fit: cover; border-radius: var(--r-4); }
.rx-pim input { width: 100%; box-sizing: border-box; margin-top: 5px; border: 1px solid var(--border-1); border-radius: var(--r-4); font: inherit; font-size: var(--fs-10); padding: 2px 5px; }
.rx-pim .rx-b { position: absolute; top: 8px; right: 8px; background: var(--bg-panel); }