/* web-diagram template styles — 다이어그램 + 접근성 텍스트 대체 (자체 완결) */
:root {
  --ink: #1f2123; --muted: #6b7074; --line: #d9dcdf; --bg: #fafbfc; --orange: #e98300;
  --go-bg:#e8f5ea; --go-line:#7cbe84; --nogo-bg:#fbeae8; --nogo-line:#e09a90;
  --handoff-bg:#e2f1f3; --handoff-line:#7cbdc7; --hold-bg:#fbf2dd; --hold-line:#dcc079;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: Pretendard, system-ui, -apple-system, sans-serif; color: var(--ink); background: var(--bg); line-height: 1.5; }
.wrap { max-width: 1040px; margin: 0 auto; padding: 28px 20px 60px; }
h1 { font-size: 24px; margin: 0 0 6px; }
.lead { color: var(--muted); margin: 0 0 22px; }

.diagram-wrap { position: relative; background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.diagram-toolbar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 12px 18px; border-bottom: 1px solid var(--line); }
.diagram-hint { font-size: 13px; color: var(--muted); font-weight: 600; }
.legend { display: flex; gap: 16px; flex-wrap: wrap; margin-left: auto; }
.legend__item { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; }
.legend__sw { width: 14px; height: 14px; border-radius: 4px; border: 1px solid rgba(0,0,0,.15); }
.sw-go { background: var(--go-bg); border-color: var(--go-line); }
.sw-nogo { background: var(--nogo-bg); border-color: var(--nogo-line); }
.sw-handoff { background: var(--handoff-bg); border-color: var(--handoff-line); }
.sw-hold { background: var(--hold-bg); border-color: var(--hold-line); }

.diagram-canvas { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
#flow-diagram { width: 100%; height: 640px; min-width: 640px; }
.diagram-fallback { display: none; padding: 28px 18px; color: var(--muted); }
.diagram-wrap.is-fallback #flow-diagram { display: none; }
.diagram-wrap.is-fallback .diagram-fallback { display: block; }

.diagram-controls { position: absolute; right: 14px; bottom: 14px; display: flex; flex-direction: column; gap: 6px; }
.diagram-ctrl-btn { width: 38px; height: 38px; border: 1px solid var(--line); background: #fff; border-radius: 9px; font-size: 18px; cursor: pointer; color: var(--ink); }
.diagram-ctrl-btn:hover { border-color: var(--orange); }
.diagram-ctrl-btn:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.diagram-ctrl-btn.is-on { background: var(--orange); border-color: var(--orange); color: #fff; }

.note { font-size: 13px; color: var(--muted); }
.evidence { margin-top: 16px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.evidence > summary { cursor: pointer; padding: 12px 16px; font-weight: 600; }
.evidence__body { padding: 0 18px 16px; }
.evidence__body ol { margin: 0; padding-left: 20px; }
.js-only { color: var(--orange); }