:root {
  --tint: #eef7fa;
}
html[data-diagram-theme="dark"] {
  --tint: #10242a;
}
*, *::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: break-word;
}
.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; color: var(--ink); 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; }
.net-ch13-ch13-2-lead { margin-top: 7px; }
.net-ch13-ch13-2-flow { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); border: 1px solid var(--line); border-radius:8px; overflow: hidden; }
.net-ch13-ch13-2-step { min-width: 0; padding: 10px; background: var(--panel); }
.net-ch13-ch13-2-step + .net-ch13-ch13-2-step { border-left: 1px solid var(--line); }
.net-ch13-ch13-2-step b, .net-ch13-ch13-2-note b { display: block; color: var(--track-strong); font-size:12px; line-height: 1.3; }
.net-ch13-ch13-2-step strong { margin-top: 5px; }
.net-ch13-ch13-2-step span { display: block; margin-top: 3px; }
.net-ch13-ch13-2-matrix { display: grid; border: 1px solid var(--line); border-radius:8px; overflow: hidden; }
.net-ch13-ch13-2-row { display: grid; grid-template-columns: var(--columns); }
.net-ch13-ch13-2-row + .net-ch13-ch13-2-row { border-top: 1px solid var(--line); }
.net-ch13-ch13-2-cell { min-width: 0; padding: 8px 10px; background: var(--paper); }
.net-ch13-ch13-2-cell + .net-ch13-ch13-2-cell { border-left: 1px solid var(--line); }
.net-ch13-ch13-2-head .net-ch13-ch13-2-cell { background: var(--tint); color: var(--ink); font-weight: 850; }
.net-ch13-ch13-2-row:not(.net-ch13-ch13-2-head) .net-ch13-ch13-2-cell:first-child { color: var(--track-strong); font-weight: 850; }
.net-ch13-ch13-2-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-ch13-ch13-2-flow { grid-template-columns: 1fr; }
  .net-ch13-ch13-2-step + .net-ch13-ch13-2-step { border-left: 0; border-top: 1px solid var(--line); }
  .net-ch13-ch13-2-row { grid-template-columns: var(--columns-mobile); }
  .net-ch13-ch13-2-cell { padding: 7px 6px; }
}
@media (max-width: 360px) {
  .diagram { padding: 12px; }
  h1 { font-size:19px; }
}