/* 글 본문 도식(Editorial::VisualRenderer). 가이드 글 쪽(marketing/guides/show)이 도식이 있는 글에서만 읽는다.
   모양은 사람이 만든 가이드 그림(content/guide/art/_base.css)과 같은 말: 옅은 판 위 그림 머리(작은 이름 · 제목) → 흰 카드 · 번호 · 화살표 → 판 밖 캡션 한 줄.
   글 칸(640) 안 HTML 이라 폰에서도 글자가 그대로 읽힌다. 639 이하는 가로 흐름 · 갈래 · 비교가 세로로 쌓인다.
   본문(.ct-prose)의 문단 · 목록 여백과 목록 표시는 그림 안에서 쓰지 않는다. */
.ct-prose > .gfig{margin-top:var(--s-32)}
.ct-prose > .gfig + :not(h2,h3){margin-top:var(--s-32)}
.gfig{display:grid;gap:var(--s-12);margin:0}
.gfig__panel{display:grid;gap:var(--s-20);min-width:0;padding:var(--s-32);border-radius:var(--r-lg);background:var(--canvas-alt);box-shadow:0 0 0 1px var(--line)}
.gfig__head{display:grid;gap:var(--s-4)}
.ct-prose .gfig p{margin:0}
.ct-prose .gfig :is(ol,ul){margin:0;padding:0;list-style:none}
.ct-prose .gfig li{margin:0}
.gfig__kicker{color:var(--ink-muted);font-weight:600}
.gfig__title{color:var(--ink);font-weight:700;text-wrap:balance}
.gfig__cap{margin:0;color:var(--ink-muted)}

/* 카드 · 번호 · 화살표 */
.gfig-card{display:grid;align-content:start;gap:var(--s-6);min-width:0;padding:var(--s-16);border-radius:var(--r-md);background:var(--surface);box-shadow:0 0 0 1px var(--line),var(--sh-xs)}
.gfig-card__t{color:var(--ink);font-weight:600}
.gfig-card__d{color:var(--ink-body)}
.gfig-num{display:inline-grid;place-items:center;flex:none;width:var(--s-24);height:var(--s-24);border-radius:var(--r-full);background:var(--accent);color:var(--accent-ink);font-weight:700;font-variant-numeric:tabular-nums}
.gfig-arrow{color:var(--ink-subtle)}

/* 가로 흐름: 카드 | 화살표 칸 | 카드. 카드는 같은 높이로 늘고 화살표는 칸 가운데 */
.gfig-flow{display:grid;align-items:stretch}
.gfig-flow--2{grid-template-columns:minmax(0,1fr) var(--s-40) minmax(0,1fr)}
.gfig-flow--3{grid-template-columns:minmax(0,1fr) var(--s-32) minmax(0,1fr) var(--s-32) minmax(0,1fr)}
.gfig-flow__card .gfig-num{margin-bottom:var(--s-4)}
.gfig-flow__arrow{display:grid;place-items:center}

/* 세로 순서 · 일정: 왼쪽 번호 줄 + 카드. 번호 아래 선이 다음 번호까지 이어진다 */
.gfig-vsteps{display:grid;gap:var(--s-12)}
.gfig-vstep{position:relative;display:grid;grid-template-columns:var(--s-24) minmax(0,1fr);column-gap:var(--s-16);align-items:start}
.gfig-vstep > .gfig-num{margin-top:var(--s-16)}
.gfig-vstep::before{content:"";position:absolute;left:calc(var(--s-12) - 1px);top:calc(var(--s-40) + var(--s-4));bottom:calc(var(--s-4) - var(--s-28));width:2px;background:var(--line-strong)}
.gfig-vstep:last-child::before{display:none}
.gfig-when{color:var(--accent-text);font-weight:600}

/* 비교: 열 머리 아래 줄마다 왼쪽 → 오른쪽. 오른쪽(바꾼 쪽)이 굵다 */
.gfig-cmp{gap:0;padding:0;overflow:hidden}
.gfig-cmp__row{display:grid;grid-template-columns:minmax(0,1fr) var(--s-24) minmax(0,1fr);column-gap:var(--s-12);align-items:start;padding:var(--s-12) var(--s-16);border-top:1px solid var(--line)}
.gfig-cmp__row--named{grid-template-columns:minmax(0,.7fr) minmax(0,1fr) var(--s-24) minmax(0,1fr)}
.gfig-cmp__head{border-top:0;background:var(--surface-alt);color:var(--ink-muted);font-weight:600}
.gfig-cmp__name{color:var(--ink);font-weight:600}
.gfig-cmp__from{color:var(--ink-muted)}
.gfig-cmp__to{color:var(--ink);font-weight:600}
.gfig-cmp__arrow{display:grid;place-items:center;height:var(--s-20);color:var(--accent-text)}
.gfig-cmp__arrow .gfig-arrow{color:inherit}
.gfig-cmp__m{display:none}

/* 갈래: 질문 카드 → 갈래선 → 갈래 카드. 갈래선은 칸마다 가운데 세로선 + 첫 칸 가운데부터 끝 칸 가운데까지 가로선 */
.gfig-tree{--fork-gap:var(--s-12);display:grid;justify-items:center}
.gfig-tree__q{max-width:100%;padding:var(--s-12) var(--s-20);border-radius:var(--r-md);background:var(--ink);color:var(--surface);font-weight:600;text-align:center;text-wrap:balance}
.gfig-fork{position:relative;display:grid;width:100%;height:var(--s-24);column-gap:var(--fork-gap)}
.gfig-tree__arms{display:grid;column-gap:var(--fork-gap);width:100%}
.gfig-tree--2 :is(.gfig-fork,.gfig-tree__arms){grid-template-columns:repeat(2,minmax(0,1fr))}
.gfig-tree--3 :is(.gfig-fork,.gfig-tree__arms){grid-template-columns:repeat(3,minmax(0,1fr))}
.gfig-fork::before{content:"";position:absolute;left:50%;top:0;width:2px;height:50%;margin-left:-1px;background:var(--line-strong)}
.gfig-fork > i{position:relative;display:block}
.gfig-fork > i::before{content:"";position:absolute;left:50%;top:50%;bottom:0;width:2px;margin-left:-1px;background:var(--line-strong)}
.gfig-fork > i::after{content:"";position:absolute;top:50%;left:calc(var(--fork-gap) / -2);right:calc(var(--fork-gap) / -2);height:2px;margin-top:-1px;background:var(--line-strong)}
.gfig-fork > i:first-child::after{left:calc(50% - 1px)}
.gfig-fork > i:last-child::after{right:calc(50% - 1px)}
.gfig-arm__name{justify-self:start;padding:var(--s-2) var(--s-8);border-radius:var(--r-xs);background:var(--accent-soft);color:var(--accent-text);font-weight:600}

/* 층: 위에서 아래로 카드, 사이 아래 화살표. 근거 이름표는 카드 머리 오른쪽 */
.gfig-layers{display:grid}
.gfig-card__head{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:var(--s-4) var(--s-12)}
.gfig-cite{display:inline-flex;align-items:center;padding:var(--s-2) var(--s-8);border-radius:var(--r-xs);background:var(--tint);color:var(--ink-muted);font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
.gfig-layers__arrow{display:grid;place-items:center;height:var(--s-28)}
.gfig-layers__arrow .gfig-arrow{transform:rotate(90deg)}

/* 표: 흰 카드 안 표(좁은 화면은 본문 표처럼 줄이 카드로 쌓인다) */
.gfig-table{overflow-x:auto;border-radius:var(--r-md);background:var(--surface);box-shadow:0 0 0 1px var(--line)}
.gfig-table .ct-table{min-width:0}

@media (max-width:639px){
  .gfig__panel{gap:var(--s-16);padding:var(--s-20) var(--s-16)}
  .gfig-flow--2,.gfig-flow--3{grid-template-columns:minmax(0,1fr)}
  .gfig-flow__arrow{height:var(--s-28)}
  .gfig-flow__arrow .gfig-arrow{transform:rotate(90deg)}
  .gfig-cmp__head,.gfig-cmp__arrow{display:none}
  .gfig-cmp__row,.gfig-cmp__row--named{grid-template-columns:minmax(0,1fr);row-gap:var(--s-6);border-top:1px solid var(--line)}
  .gfig-cmp__rows > li:first-child{border-top:0}
  .gfig-cmp__m{display:block;color:var(--ink-muted);font-weight:500}
  .gfig-fork{display:none}
  .gfig-tree{row-gap:var(--s-12)}
  .gfig-tree__q{justify-self:stretch}
  .gfig-tree--2 .gfig-tree__arms,.gfig-tree--3 .gfig-tree__arms{grid-template-columns:minmax(0,1fr);row-gap:var(--s-12)}
  .gfig-table{overflow:visible;background:none;box-shadow:none}
}