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

/* visual-stability-3-local */
:root{
  --vs3-track:#0e7490;
  --vs3-paper:#ffffff;
  --vs3-ink:#111827;
  --vs3-muted:#475569;
  --vs3-line:#e2e8f0;
  --vs3-line-muted:#edf2f7;
  --vs3-fill:#f8fafc;
  --vs3-note:color-mix(in srgb, #ffffff 96%, var(--vs3-track));
}
html[data-diagram-theme="dark"]{
  --vs3-track:#67e8f9;
  --vs3-paper:#111113;
  --vs3-ink:#f4f4f5;
  --vs3-muted:#a1a1aa;
  --vs3-line:rgba(255,255,255,.105);
  --vs3-line-muted:rgba(255,255,255,.075);
  --vs3-fill:rgba(255,255,255,.035);
  --vs3-note:rgba(103,232,249,.055);
}
body{
  color:var(--vs3-ink)!important;
}
.diagram.net-ch14-ch14-1-root{
  gap:14px!important;
  padding:16px!important;
  background:var(--vs3-paper)!important;
  border-color:var(--vs3-line)!important;
  box-shadow:none!important;
}
.diagram.net-ch14-ch14-1-root :where(header, .net-ch14-ch14-1-header, .net-ch14-ch14-1-structure){
  background:transparent!important;
}
.diagram.net-ch14-ch14-1-root :where(h1, strong, b){
  color:var(--vs3-ink)!important;
}
.diagram.net-ch14-ch14-1-root :where(p, span, td, th, .net-ch14-ch14-1-lead){
  color:var(--vs3-muted)!important;
}
.net-ch14-ch14-1-type{
  background:transparent!important;
  border-color:color-mix(in srgb, var(--vs3-track) 22%, var(--vs3-line))!important;
  color:var(--vs3-track)!important;
}
.net-ch14-ch14-1-matrix{
  gap:0!important;
  background:var(--vs3-paper)!important;
  border-color:var(--vs3-line)!important;
}
.net-ch14-ch14-1-row{
  background:var(--vs3-paper)!important;
}
.net-ch14-ch14-1-row + .net-ch14-ch14-1-row{
  border-top-color:var(--vs3-line-muted)!important;
}
.net-ch14-ch14-1-cell{
  background:var(--vs3-paper)!important;
  border-color:var(--vs3-line-muted)!important;
  color:var(--vs3-muted)!important;
}
.net-ch14-ch14-1-cell + .net-ch14-ch14-1-cell{
  border-left-color:var(--vs3-line-muted)!important;
}
.net-ch14-ch14-1-head .net-ch14-ch14-1-cell{
  background:var(--vs3-fill)!important;
  border-color:var(--vs3-line)!important;
  color:var(--vs3-ink)!important;
}
.net-ch14-ch14-1-row:not(.net-ch14-ch14-1-head) .net-ch14-ch14-1-cell:first-child{
  color:var(--vs3-track)!important;
}
.net-ch14-ch14-1-note{
  background:var(--vs3-note)!important;
  border-color:var(--vs3-line)!important;
}
.net-ch14-ch14-1-note b{
  color:var(--vs3-track)!important;
}
html[data-diagram-theme="dark"] .net-ch14-ch14-1-type{
  border-color:rgba(103,232,249,.22)!important;
}
@media(max-width:520px){
  .diagram.net-ch14-ch14-1-root{
    gap:12px!important;
    padding:12px!important;
  }
  .diagram.net-ch14-ch14-1-root h1{
    font-size:18px!important;
    line-height:1.32!important;
  }
  .net-ch14-ch14-1-lead{
    font-size:12.5px!important;
  }
  .net-ch14-ch14-1-matrix{
    display:grid!important;
    gap:8px!important;
    border:0!important;
    background:transparent!important;
    overflow:visible!important;
  }
  .net-ch14-ch14-1-matrix .net-ch14-ch14-1-row.net-ch14-ch14-1-head{
    display:none!important;
  }
  .net-ch14-ch14-1-matrix .net-ch14-ch14-1-row{
    display:grid!important;
    grid-template-columns:1fr!important;
    border:1px solid var(--vs3-line)!important;
    border-radius:8px!important;
    overflow:hidden!important;
  }
  .net-ch14-ch14-1-matrix .net-ch14-ch14-1-row + .net-ch14-ch14-1-row{
    border-top:1px solid var(--vs3-line)!important;
  }
  .net-ch14-ch14-1-matrix .net-ch14-ch14-1-cell{
    border-left:0!important;
    border-top:1px solid var(--vs3-line-muted)!important;
    padding:8px 10px!important;
  }
  .net-ch14-ch14-1-matrix .net-ch14-ch14-1-cell:first-child{
    border-top:0!important;
  }
  .net-ch14-ch14-1-matrix .net-ch14-ch14-1-cell::before{
    content:attr(data-label);
    display:block;
    margin-bottom:3px;
    color:var(--vs3-track);
    font-size:12px;
    font-weight:850;
    line-height:1.2;
  }
  .net-ch14-ch14-1-matrix .net-ch14-ch14-1-cell:not([data-label])::before{
    content:none;
  }
}
/* /visual-stability-3-local */