:root{--edge:#dbe3ef}
*{box-sizing:border-box}html,body{margin:0;background:transparent}body{font-family: Pretendard, "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", "Segoe UI", sans-serif;color:var(--ink)}
.diagram{width:min(1080px,100%);margin:0 auto;padding:20px;word-break:keep-all;overflow-wrap:break-word}.nest-ch3-ch3-1-surface{display:grid;gap:16px}
.nest-ch3-ch3-1-header{padding:18px;border:1px solid var(--edge);border-radius:8px;background:#fff}
.nest-ch3-ch3-1-mark{margin:0 0 6px;color:var(--accent);font-size:12px;font-weight:800;text-transform:uppercase}h1{margin:0;font-size:25px;line-height:1.24;letter-spacing:0}.nest-ch3-ch3-1-lead{margin:10px 0 0;color:var(--muted);font-size:14px;line-height:1.62}.nest-ch3-ch3-1-summary{margin:14px 0 0;padding:10px 12px;border:1px solid var(--edge);border-radius:8px;background:#f8fafc;color:#334155;font-size:13px;line-height:1.55}.nest-ch3-ch3-1-summary strong{font-weight:800;color:#0f172a}.nest-ch3-ch3-1-summary span{display:block;margin-top:4px;color:var(--muted)}
.nest-ch3-ch3-1-section{display:grid;gap:12px;padding:16px;border:1px solid var(--edge);border-radius:8px;background:var(--paper)}.nest-ch3-ch3-1-section>h2{margin:0;font-size:16px;line-height:1.35}
.sequence{display:grid;grid-template-columns:repeat(auto-fit,minmax(142px,1fr));gap:10px}.step{position:relative;min-height:118px;padding:12px;border:1px solid var(--edge);border-radius:8px;background:#fff}.step::after{content:"→";position:absolute;top:12px;right:-11px;z-index:2;width:22px;height:22px;border:1px solid var(--edge);border-radius:6px;background:#fff;color:#64748b;font-weight:800;text-align:center;line-height:20px}.step:last-child::after{display:none}
.num{display:inline-grid;place-items:center;width:28px;height:28px;margin-bottom:9px;border-radius:6px;background:#e0f2fe;color:#0369a1;font-size:13px;font-weight:900}.step strong,.nest-ch3-ch3-1-panel strong,.side strong,.result strong{display:block;font-size:14px;line-height:1.35}.step p,.nest-ch3-ch3-1-panel p,.side p,.result p{margin:7px 0 0;color:var(--muted);font-size:12.5px;line-height:1.5}
.nest-ch3-ch3-1-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px}.nest-ch3-ch3-1-panel{padding:13px;border:1px solid var(--edge);border-radius:8px;background:var(--track-tint)}.nest-ch3-ch3-1-panel em{display:inline-block;margin-bottom:7px;padding:4px 7px;border-radius:6px;background:#fff;color:var(--accent);font-size:12px;font-style:normal;font-weight:800}
.split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.side{min-height:150px;padding:14px;border:1px solid var(--edge);border-radius:8px;background:#fff}.before{background:#fff7ed;border-color:#fed7aa}.after{background:#ecfdf5;border-color:#bbf7d0}.tag{display:inline-block;margin-bottom:8px;padding:4px 8px;border-radius:6px;background:rgba(255,255,255,.72);color:var(--accent);font-size:12px;font-weight:800}
.code{margin:10px 0 0;padding:10px;border:1px solid #cbd5e1;border-radius:8px;background:#0f172a;color:#e2e8f0;font-family:"Cascadia Code",Consolas,monospace;font-size:12px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}.resultGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px}.result{padding:14px;border:1px solid var(--edge);border-radius:8px;background:#fff}.ok{background:#ecfdf5;border-color:#bbf7d0}.warn{background:#fffbeb;border-color:#fde68a}.stop{background:#fff7ed;border-color:#fed7aa}
.nest-ch3-ch3-1-matrix{overflow:hidden}table{width:100%;border-collapse:collapse;font-size:12.5px}th,td{padding:10px;border:1px solid var(--edge);text-align:left;vertical-align:top;line-height:1.5}th{background:#f1f5f9;color:#334155;font-weight:800}td{color:#334155;background:#fff}.note{padding:12px 14px;border:1px solid #bfdbfe;border-radius:8px;background:#eff6ff;color:#1e3a8a;font-size:13px;line-height:1.55}
html[data-diagram-theme="dark"] body{color:var(--text,#e5e7eb)}html[data-diagram-theme="dark"] .nest-ch3-ch3-1-header,html[data-diagram-theme="dark"] .nest-ch3-ch3-1-section,html[data-diagram-theme="dark"] .step,html[data-diagram-theme="dark"] .side,html[data-diagram-theme="dark"] .result,html[data-diagram-theme="dark"] td{background:var(--card,#18181b);border-color:var(--border,rgba(255,255,255,.12))}html[data-diagram-theme="dark"] .nest-ch3-ch3-1-panel{background:var(--panel,#111113);border-color:var(--border,rgba(255,255,255,.12))}html[data-diagram-theme="dark"] .nest-ch3-ch3-1-lead,html[data-diagram-theme="dark"] .step p,html[data-diagram-theme="dark"] .nest-ch3-ch3-1-panel p,html[data-diagram-theme="dark"] .side p,html[data-diagram-theme="dark"] .result p,html[data-diagram-theme="dark"] td{color:var(--muted,#a1a1aa)}
@media(max-width:720px){.diagram{padding:14px}.nest-ch3-ch3-1-header{grid-template-columns:1fr;padding:14px}h1{font-size:21px}.nest-ch3-ch3-1-lead{font-size:13px}.nest-ch3-ch3-1-summary{font-size:12.5px}.nest-ch3-ch3-1-section{padding:13px}.sequence,.nest-ch3-ch3-1-grid,.split{grid-template-columns:1fr}.step{min-height:auto}.step::after{display:none}table,thead,tbody,tr,th,td{display:block}thead{display:none}tr{margin-bottom:10px;border:1px solid var(--edge);border-radius:8px;overflow:hidden}td{display:grid;grid-template-columns:94px minmax(0,1fr);gap:8px;border-width:0 0 1px 0}td:last-child{border-bottom:0}td::before{content:attr(data-head);color:var(--accent);font-weight:800}}

/* ch3-1 dark flow tone */
html[data-diagram-theme="dark"] .nest-ch3-ch3-1-step::after,
html[data-diagram-theme="dark"] .step::after {
  background: var(--card, #18181b) !important;
  border-color: var(--border, rgba(255, 255, 255, .16)) !important;
  color: color-mix(in srgb, var(--track) 64%, #f8fafc) !important;
}
html[data-diagram-theme="dark"] .nest-ch3-ch3-1-num,
html[data-diagram-theme="dark"] .num {
  background: color-mix(in srgb, var(--track) 16%, var(--card, #18181b)) !important;
  border-color: var(--border, rgba(255, 255, 255, .16)) !important;
}
/* /ch3-1 dark flow tone */