:root {
  --tint: #eef7fa;
  --good: #ecfdf5;
}
html[data-diagram-theme="dark"] {
  --tint: #10242a;
  --good: #0f241c;
}
*, *::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;
  letter-spacing: 0;
  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 { color: var(--muted); font-size:12px; line-height: 1.45; }
strong { color: var(--ink); font-size:13px; line-height: 1.35; }
.net-ch7-ch7-1-lead { margin-top: 7px; }
.net-ch7-ch7-1-board { display: grid; gap: 8px; }
.net-ch7-ch7-1-board.net-ch7-ch7-1-flow, .net-ch7-ch7-1-board.net-ch7-ch7-1-decision, .net-ch7-ch7-1-board.net-ch7-ch7-1-sequence, .net-ch7-ch7-1-board.net-ch7-ch7-1-window { grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); }
.net-ch7-ch7-1-board.net-ch7-ch7-1-compare, .net-ch7-ch7-1-board.net-ch7-ch7-1-field { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.net-ch7-ch7-1-node {
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius:8px;
  background: var(--panel);
}
.net-ch7-ch7-1-node b { display: block; color: var(--track-strong); font-size:12px; line-height: 1.3; }
.net-ch7-ch7-1-node strong { display: block; margin-top: 5px; }
.net-ch7-ch7-1-node span { display: block; margin-top: 3px; }
.net-ch7-ch7-1-table { display: grid; border: 1px solid var(--line); border-radius:8px; overflow: hidden; }
.net-ch7-ch7-1-row { display: grid; grid-template-columns: minmax(118px, .46fr) repeat(2, minmax(0, 1fr)); }
.net-ch7-ch7-1-row.two { grid-template-columns: minmax(118px, .42fr) minmax(0, 1fr); }
.net-ch7-ch7-1-row + .net-ch7-ch7-1-row { border-top: 1px solid var(--line); }
.net-ch7-ch7-1-cell { min-width: 0; padding: 8px 10px; background: var(--paper); font-size:12px; line-height: 1.42; color: var(--muted); }
.net-ch7-ch7-1-cell + .net-ch7-ch7-1-cell { border-left: 1px solid var(--line); }
.net-ch7-ch7-1-head .net-ch7-ch7-1-cell { background: var(--tint); color: var(--ink); font-weight: 850; }
.net-ch7-ch7-1-row:not(.net-ch7-ch7-1-head) .net-ch7-ch7-1-cell:first-child { color: var(--track-strong); font-weight: 850; }
.net-ch7-ch7-1-note { display: grid; gap: 4px; padding: 10px; border: 1px solid var(--line); border-radius:8px; background: var(--good); }
.net-ch7-ch7-1-note b { color: var(--track-strong); font-size:12px; }
@media (max-width: 760px) {
  .diagram { padding: 14px; gap: 10px; }
  h1 { font-size:20px; }
  .net-ch7-ch7-1-board.net-ch7-ch7-1-flow, .net-ch7-ch7-1-board.net-ch7-ch7-1-decision, .net-ch7-ch7-1-board.net-ch7-ch7-1-sequence, .net-ch7-ch7-1-board.net-ch7-ch7-1-window { grid-template-columns: 1fr; }
  .net-ch7-ch7-1-board.net-ch7-ch7-1-compare, .net-ch7-ch7-1-board.net-ch7-ch7-1-field { grid-template-columns: 1fr 1fr; }
  .net-ch7-ch7-1-row { grid-template-columns: minmax(86px, .38fr) repeat(2, minmax(0, 1fr)); }
  .net-ch7-ch7-1-row.two { grid-template-columns: minmax(96px, .42fr) minmax(0, 1fr); }
  .net-ch7-ch7-1-row + .net-ch7-ch7-1-row { border-top: 1px solid var(--line); }
  .net-ch7-ch7-1-cell { padding: 7px 6px; font-size:12px; line-height: 1.38; }
}
@media (max-width: 360px) {
  .diagram { padding: 12px; }
  h1 { font-size:19px; }
}

/* ch7-1-worker-visual-stability */
:root{
  --ch7-vs-line:color-mix(in srgb, var(--track) 14%, #dce5ec);
  --ch7-vs-line-muted:color-mix(in srgb, var(--track) 7%, #edf2f6);
  --ch7-vs-fill:color-mix(in srgb, var(--paper) 98%, var(--track));
  --ch7-vs-note:color-mix(in srgb, var(--paper) 96%, var(--track));
}
html[data-diagram-theme="dark"]{
  --ch7-vs-line:rgba(255,255,255,.105);
  --ch7-vs-line-muted:rgba(255,255,255,.065);
  --ch7-vs-fill:rgba(255,255,255,.025);
  --ch7-vs-note:rgba(94,234,212,.08);
}
.net-ch7-ch7-1-root{
  border-color:var(--ch7-vs-line)!important;
}
.net-ch7-ch7-1-root :where(.net-ch7-ch7-1-board,.net-ch7-ch7-1-field,.net-ch7-ch7-1-flow,.net-ch7-ch7-1-visual){
  background:transparent!important;
  box-shadow:none!important;
}
.net-ch7-ch7-1-root :where(.net-ch7-ch7-1-node,.net-ch7-ch7-1-table,.net-ch7-ch7-1-row,.net-ch7-ch7-1-cell,.net-ch7-ch7-1-note,.net-ch7-ch7-1-vNote,.net-ch7-ch7-1-packetCut){
  border-color:var(--ch7-vs-line)!important;
  box-shadow:none!important;
}
.net-ch7-ch7-1-root :where(.net-ch7-ch7-1-row,.net-ch7-ch7-1-cell){
  border-color:var(--ch7-vs-line-muted)!important;
}
.net-ch7-ch7-1-root :where(.net-ch7-ch7-1-node){
  background:var(--paper)!important;
}
.net-ch7-ch7-1-root :where(.net-ch7-ch7-1-head){
  background:var(--ch7-vs-fill)!important;
}
.net-ch7-ch7-1-root :where(.net-ch7-ch7-1-note,.net-ch7-ch7-1-vNote){
  background:var(--ch7-vs-note)!important;
}
html[data-diagram-theme="dark"] .net-ch7-ch7-1-root :where(.net-ch7-ch7-1-row,.net-ch7-ch7-1-cell){
  border-color:var(--ch7-vs-line-muted)!important;
}
.net-ch7-ch7-1-root .net-ch7-ch7-1-arrow{
  min-width:22px;
  border:0!important;
  background:transparent!important;
  color:var(--track-strong)!important;
}
.net-ch7-ch7-1-datagramBoundary .net-ch7-ch7-1-pathRun{
  grid-template-columns:minmax(0,1fr) 32px minmax(0,1fr) 32px minmax(0,1fr)!important;
  gap:12px!important;
  background:transparent!important;
  border:0!important;
}
.net-ch7-ch7-1-mtuBudget .net-ch7-ch7-1-packetCut{
  background:transparent!important;
  border-color:var(--ch7-vs-line)!important;
}
.net-ch7-ch7-1-mtuBudget .net-ch7-ch7-1-packetCut > div{
  background:var(--paper)!important;
  border-color:var(--ch7-vs-line-muted)!important;
}
@media(max-width:560px){
  .net-ch7-ch7-1-datagramBoundary .net-ch7-ch7-1-pathRun{
    grid-auto-flow:row!important;
    grid-auto-columns:auto!important;
    grid-template-columns:1fr!important;
    gap:8px!important;
  }
  .net-ch7-ch7-1-datagramBoundary .net-ch7-ch7-1-arrow{
    min-height:18px;
    height:18px;
    font-size:0!important;
  }
  .net-ch7-ch7-1-datagramBoundary .net-ch7-ch7-1-arrow::before{
    content:"↓";
    font-size:15px;
    line-height:1;
  }
}
/* /ch7-1-worker-visual-stability */