:root {
        --strong: #0f8096;
      }
      html[data-diagram-theme="dark"] {
        --strong: #67e8f9;
      }
      *, *::before, *::after { box-sizing: border-box; }
      html, body { margin: 0; padding: 0; overflow: hidden; background: transparent; }
      body {
        color: var(--ink);
        font-family: Pretendard, "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", "Segoe UI", sans-serif;
        word-break: keep-all;
        overflow-wrap: anywhere;
      }
      .diagram {
        display: grid;
        gap: 12px;
        width: 100%;
        padding: 16px;
        border: 1px solid var(--line);
        border-radius:8px;
        background: var(--paper);
        overflow: hidden;
        contain: layout paint;
      }
      .diagram, .diagram * { max-width: 100%; }
      h1, p { margin: 0; }
      h1 { margin-top: 7px; font-size:22px; line-height: 1.3; letter-spacing: 0; }
      p, span, td, th { color: var(--muted); font-size:12px; line-height: 1.42; }
      strong { display: block; color: var(--ink); font-size:13px; line-height: 1.35; }
      code { padding: 1px 4px; border: 1px solid var(--line); border-radius:5px; background: var(--track-tint); color: var(--ink); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .94em; }
      .net-ch12-ch12-1-lead { margin-top: 7px; }
      .net-ch12-ch12-1-flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line); border-radius:8px; overflow: hidden; }
      .net-ch12-ch12-1-step { min-width: 0; padding: 10px; background: var(--panel); }
      .net-ch12-ch12-1-step + .net-ch12-ch12-1-step { border-left: 1px solid var(--line); }
      .net-ch12-ch12-1-step b, .net-ch12-ch12-1-layer b, .net-ch12-ch12-1-note b { display: block; color: var(--track-strong); font-size:12px; line-height: 1.3; }
      .net-ch12-ch12-1-step strong, .net-ch12-ch12-1-layer strong { margin-top: 5px; }
      .net-ch12-ch12-1-step span, .net-ch12-ch12-1-layer span { display: block; margin-top: 3px; }
      .net-ch12-ch12-1-layers { display: grid; border: 1px solid var(--line); border-radius:8px; overflow: hidden; }
      .net-ch12-ch12-1-layer { display: grid; grid-template-columns: 34px minmax(120px, .55fr) minmax(0, 1fr); gap: 8px; align-items: center; min-width: 0; padding: 9px 10px; background: var(--panel); }
      .net-ch12-ch12-1-layer + .net-ch12-ch12-1-layer { border-top: 1px solid var(--line); }
      .net-ch12-ch12-1-matrix { display: grid; border: 1px solid var(--line); border-radius:8px; overflow: hidden; }
      .net-ch12-ch12-1-row { display: grid; grid-template-columns: 118px minmax(0, 1fr) minmax(0, 1fr); }
      .net-ch12-ch12-1-row + .net-ch12-ch12-1-row { border-top: 1px solid var(--line); }
      .net-ch12-ch12-1-cell { min-width: 0; padding: 8px 10px; background: var(--paper); }
      .net-ch12-ch12-1-cell + .net-ch12-ch12-1-cell { border-left: 1px solid var(--line); }
      .net-ch12-ch12-1-head .net-ch12-ch12-1-cell { background: var(--track-tint); color: var(--ink); font-weight: 850; }
      .net-ch12-ch12-1-row:not(.net-ch12-ch12-1-head) .net-ch12-ch12-1-cell:first-child { color: var(--track-strong); font-weight: 850; }
      .net-ch12-ch12-1-note { display: grid; gap: 4px; padding: 10px; border: 1px solid var(--line); border-radius:8px; background: var(--green-tint); }
      @media (max-width: 760px) {
        .diagram { padding: 14px; gap: 10px; }
        h1 { font-size:20px; }
        .net-ch12-ch12-1-flow { grid-template-columns: 1fr; }
        .net-ch12-ch12-1-step + .net-ch12-ch12-1-step { border-left: 0; border-top: 1px solid var(--line); }
        .net-ch12-ch12-1-layer { grid-template-columns: 28px minmax(92px, .48fr) minmax(0, 1fr); padding: 8px 7px; }
        .net-ch12-ch12-1-row { grid-template-columns: 86px minmax(0, 1fr) minmax(0, 1fr); }
        .net-ch12-ch12-1-cell { padding: 7px 6px; }
        .net-ch12-ch12-1-head .net-ch12-ch12-1-cell:nth-child(n+4), .net-ch12-ch12-1-row .net-ch12-ch12-1-cell:nth-child(n+4) { display: none; }
      }
      @media (max-width: 360px) {
        .diagram { padding: 12px; }
        h1 { font-size:19px; }
        p, span, td, th { font-size:12px; }
      }