: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-4-lead { margin-top: 7px; }
.net-ch13-ch13-4-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-4-step { min-width: 0; padding: 10px; background: var(--panel); }
.net-ch13-ch13-4-step + .net-ch13-ch13-4-step { border-left: 1px solid var(--line); }
.net-ch13-ch13-4-step b, .net-ch13-ch13-4-note b { display: block; color: var(--track-strong); font-size:12px; line-height: 1.3; }
.net-ch13-ch13-4-step strong { margin-top: 5px; }
.net-ch13-ch13-4-step span { display: block; margin-top: 3px; }
.net-ch13-ch13-4-matrix { display: grid; border: 1px solid var(--line); border-radius:8px; overflow: hidden; }
.net-ch13-ch13-4-row { display: grid; grid-template-columns: var(--columns); }
.net-ch13-ch13-4-row + .net-ch13-ch13-4-row { border-top: 1px solid var(--line); }
.net-ch13-ch13-4-cell { min-width: 0; padding: 8px 10px; background: var(--paper); }
.net-ch13-ch13-4-cell + .net-ch13-ch13-4-cell { border-left: 1px solid var(--line); }
.net-ch13-ch13-4-head .net-ch13-ch13-4-cell { background: var(--tint); color: var(--ink); font-weight: 850; }
.net-ch13-ch13-4-row:not(.net-ch13-ch13-4-head) .net-ch13-ch13-4-cell:first-child { color: var(--track-strong); font-weight: 850; }
.net-ch13-ch13-4-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-4-flow { grid-template-columns: 1fr; }
  .net-ch13-ch13-4-step + .net-ch13-ch13-4-step { border-left: 0; border-top: 1px solid var(--line); }
  .net-ch13-ch13-4-row { grid-template-columns: var(--columns-mobile); }
  .net-ch13-ch13-4-cell { padding: 7px 6px; }
}
@media (max-width: 360px) {
  .diagram { padding: 12px; }
  h1 { font-size:19px; }
}
/* connected sequence */
.net-ch13-ch13-4-flow{column-gap:30px!important}.net-ch13-ch13-4-flow>*{position:relative}.net-ch13-ch13-4-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-ch13-ch13-4-flow{grid-template-columns:1fr!important;row-gap:30px!important}.net-ch13-ch13-4-flow>*:not(:last-child)::after{content:"↓";right:auto;top:auto;left:50%;bottom:-26px;transform:translateX(-50%)}}