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