: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-ch11-ch11-3-lead { margin-top: 7px; }
.net-ch11-ch11-3-flow {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  border: 1px solid var(--line);
  border-radius:8px;
  overflow: hidden;
}
.net-ch11-ch11-3-step {
  min-width: 0;
  padding: 10px;
  background: var(--panel);
}
.net-ch11-ch11-3-step + .net-ch11-ch11-3-step { border-left: 1px solid var(--line); }
.net-ch11-ch11-3-step b, .net-ch11-ch11-3-note b {
  display: block;
  color: var(--track-strong);
  font-size:12px;
  line-height: 1.3;
}
.net-ch11-ch11-3-step strong { margin-top: 5px; }
.net-ch11-ch11-3-step span { display: block; margin-top: 3px; }
.net-ch11-ch11-3-matrix {
  display: grid;
  border: 1px solid var(--line);
  border-radius:8px;
  overflow: hidden;
}
.net-ch11-ch11-3-row {
  display: grid;
  grid-template-columns: var(--columns);
}
.net-ch11-ch11-3-row + .net-ch11-ch11-3-row { border-top: 1px solid var(--line); }
.net-ch11-ch11-3-cell {
  min-width: 0;
  padding: 8px 10px;
  background: var(--paper);
}
.net-ch11-ch11-3-cell + .net-ch11-ch11-3-cell { border-left: 1px solid var(--line); }
.net-ch11-ch11-3-head .net-ch11-ch11-3-cell {
  background: var(--tint);
  color: var(--ink);
  font-weight: 850;
}
.net-ch11-ch11-3-row:not(.net-ch11-ch11-3-head) .net-ch11-ch11-3-cell:first-child {
  color: var(--track-strong);
  font-weight: 850;
}
.net-ch11-ch11-3-note {
  display: grid;
  gap: 4px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius:8px;
  background: var(--green-tint);
}
code {
  padding: 1px 4px;
  border: 1px solid var(--line);
  border-radius:5px;
  background: var(--tint);
  color: var(--ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .94em;
}
@media (max-width: 760px) {
  .diagram { padding: 14px; gap: 10px; }
  h1 { font-size:20px; }
  .net-ch11-ch11-3-flow { grid-template-columns: 1fr; }
  .net-ch11-ch11-3-step + .net-ch11-ch11-3-step { border-left: 0; border-top: 1px solid var(--line); }
  .net-ch11-ch11-3-row { grid-template-columns: var(--columns-mobile); }
  .net-ch11-ch11-3-cell { padding: 7px 6px; }
}
@media (max-width: 360px) {
  .diagram { padding: 12px; }
  h1 { font-size:19px; }
}
/* connected sequence */
.net-ch11-ch11-3-flow{column-gap:30px!important}.net-ch11-ch11-3-flow>*{position:relative}.net-ch11-ch11-3-flow>*:not(:last-child)::after{content:"→";position:absolute;z-index:2;right:-24px;top:50%;transform:translateY(-50%);color:var(--accent);font-size:18px;font-weight:900}
@media(max-width:720px){.net-ch11-ch11-3-flow{grid-template-columns:1fr!important;row-gap:30px!important}.net-ch11-ch11-3-flow>*:not(:last-child)::after{content:"↓";right:auto;top:auto;left:50%;bottom:-26px;transform:translateX(-50%)}}