:root { --good:#ecfdf5; --warn:#fff7ed; }
      html[data-diagram-theme="dark"] { --good:#10251f; --warn:#2a1d10; }
      * { box-sizing: border-box; }
      html, body { margin:0; padding:0; background:transparent; overflow:hidden; }
      body { color:var(--text); font-family: Pretendard, "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", "Segoe UI", sans-serif; word-break:keep-all; overflow-wrap:anywhere; letter-spacing:0; }
      .diagram { width:100%; display:grid; gap:12px; padding:14px; border:1px solid var(--line); border-radius:8px; background:var(--paper); overflow:hidden; contain:layout paint; }
      .diagram, .diagram * { min-width:0; max-width:100%; }
      h1, h2, p { margin:0; }
      .next-ch11-ch11-3-hero { display:grid; grid-template-columns:minmax(0,1fr) minmax(210px,.38fr); gap:12px; padding:14px; border:1px solid var(--line); border-radius:8px; background:var(--surface); }
      .next-ch11-ch11-3-intro { display:grid; gap:8px; align-content:start; }
      .next-ch11-ch11-3-badge { display:inline-flex; width:fit-content; min-height:24px; align-items:center; padding:3px 8px; border:1px solid var(--line-strong); border-radius:6px; background:var(--panel); color:var(--text); font-size:12px; font-weight:850; line-height:1.35; }
      h1 { font-size:22px; line-height:1.26; font-weight:850; }
      .next-ch11-ch11-3-lead { color:var(--muted); font-size:12.8px; line-height:1.5; }
      .next-ch11-ch11-3-summary { display:grid; gap:7px; }
      .next-ch11-ch11-3-summary div { display:grid; grid-template-columns:64px minmax(0,1fr); gap:8px; align-items:start; padding:8px; border:1px solid var(--line); border-radius:7px; background:var(--panel); }
      .next-ch11-ch11-3-summary strong, .next-ch11-ch11-3-summary span { font-size:12.3px; line-height:1.35; }
      .next-ch11-ch11-3-summary strong { color:var(--text); }
      .next-ch11-ch11-3-summary span { color:var(--muted); }
      .next-ch11-ch11-3-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
      .next-ch11-ch11-3-cards article { display:grid; gap:6px; align-content:start; min-height:116px; padding:12px; border:1px solid var(--line); border-radius:8px; background:var(--panel); }
      .next-ch11-ch11-3-cards article:nth-child(1) { background: var(--track-tint); }
      .next-ch11-ch11-3-cards article:nth-child(2) { background: var(--good); }
      .next-ch11-ch11-3-cards article:nth-child(3) { background: var(--warn); }
      .next-ch11-ch11-3-cards span { width:fit-content; padding:2px 7px; border:1px solid var(--line-strong); border-radius:6px; background:var(--paper); color:var(--muted); font-size:12px; font-weight:850; line-height:1.35; }
      .next-ch11-ch11-3-cards strong { color:var(--text); font-size:14px; line-height:1.35; }
      .next-ch11-ch11-3-cards p { color:var(--muted); font-size:12.3px; line-height:1.48; }
      .next-ch11-ch11-3-bottom { display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); gap:10px; }
      .next-ch11-ch11-3-flow, .next-ch11-ch11-3-checks { margin:0; padding:12px; border:1px solid var(--line); border-radius:8px; background:var(--surface); list-style:none; }
      .next-ch11-ch11-3-flow { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
      .next-ch11-ch11-3-flow li { display:grid; grid-template-columns:34px minmax(0,1fr); gap:7px; align-items:start; padding:8px; border:1px solid var(--line); border-radius:7px; background:var(--panel); }
      .next-ch11-ch11-3-flow strong { display:inline-flex; justify-content:center; align-items:center; min-height:22px; border-radius:6px; background:var(--code); color:var(--text); font-size:12px; line-height:1; }
      .next-ch11-ch11-3-flow span { color:var(--text); font-size:12.2px; line-height:1.38; }
      .next-ch11-ch11-3-checks { display:grid; gap:7px; }
      .next-ch11-ch11-3-checks li { padding:8px 9px; border:1px solid var(--line); border-radius:7px; background:var(--panel); color:var(--muted); font-size:12.2px; line-height:1.42; }
      .next-ch11-ch11-3-checks li:first-child { color:var(--text); border-color:var(--line-strong); }
      @media (max-width: 820px) { .next-ch11-ch11-3-hero, .next-ch11-ch11-3-bottom { grid-template-columns:1fr; } .next-ch11-ch11-3-cards { grid-template-columns:repeat(2,minmax(0,1fr)); } }
      @media (max-width: 560px) { html, body { overflow:auto; } .diagram { gap:10px; padding:10px; } .next-ch11-ch11-3-hero { padding:10px; } h1 { font-size:19px; } .next-ch11-ch11-3-lead { font-size:12.3px; } .next-ch11-ch11-3-summary div, .next-ch11-ch11-3-cards, .next-ch11-ch11-3-flow { grid-template-columns:1fr; } .next-ch11-ch11-3-cards article { min-height:0; padding:10px; } .next-ch11-ch11-3-flow, .next-ch11-ch11-3-checks { padding:10px; } }
      @media (max-width: 360px) { .diagram { padding:8px; } h1 { font-size:18px; } .next-ch11-ch11-3-badge, .next-ch11-ch11-3-cards span { width:100%; justify-content:flex-start; } }