:root{
  color-scheme:light;
  --track:#0061ff;
  --track-strong:#0756c7;
  --track-tint:#eff6ff;
  --paper:#fff;
  --surface:#f8fafc;
  --line:#d9e2ef;
  --line-strong:#a8b6c9;
  --text:#0f172a;
  --muted:#475569;
}
html[data-diagram-theme="dark"]{
  color-scheme:dark;
  --track:#7fb0ff;
  --track-strong:#bfdbfe;
  --track-tint:rgba(127,176,255,.15);
  --paper:#111113;
  --surface:#18181b;
  --line:#343a40;
  --line-strong:#52525b;
  --text:#f4f4f5;
  --muted:#d4d4d8;
}
body{
  color:var(--text);
  font-family: Pretendard, "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", "Segoe UI", sans-serif;
  word-break:keep-all;
  overflow-wrap:anywhere;
  letter-spacing:0;
  line-height:1.48;
}
h1,h2,p{margin:0}
.ubp-ch5-ch5-4-frame{
  display:grid;
  gap:12px;
  padding:18px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--paper);
}
.ubp-ch5-ch5-4-head{display:grid;gap:8px}
.ubp-ch5-ch5-4-badge{
  display:inline-flex;
  width:fit-content;
  min-height:24px;
  align-items:center;
  padding:3px 9px;
  border:1px solid color-mix(in srgb,var(--track) 36%,var(--line));
  border-radius:7px;
  background:var(--track-tint);
  color:var(--track-strong);
  font-size:12px;
  font-weight:850;
}
h1{
  color:var(--text);
  font-size:25px;
  font-weight:850;
  line-height:1.18;
}
.ubp-ch5-ch5-4-lead{color:var(--muted);font-size:14px}
.ubp-ch5-ch5-4-flow{
  display:grid;
  grid-template-columns:repeat(var(--count),minmax(110px,1fr));
  gap:13px;
}
.ubp-ch5-ch5-4-step,.ubp-ch5-ch5-4-card,.ubp-ch5-ch5-4-panel,.ubp-ch5-ch5-4-state,.ubp-ch5-ch5-4-target,.ubp-ch5-ch5-4-source,.ubp-ch5-ch5-4-root{
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--surface);
}
.ubp-ch5-ch5-4-step{
  position:relative;
  display:grid;
  gap:7px;
  min-height:104px;
  padding:11px;
}
.ubp-ch5-ch5-4-step:not(:last-child)::after{
  content:"→";
  position:absolute;
  top:50%;
  right:-16px;
  transform:translateY(-50%);
  padding:0 3px;
  background:var(--paper);
  color:var(--track-strong);
  font-size:18px;
  font-weight:900;
}
.ubp-ch5-ch5-4-step h2,.ubp-ch5-ch5-4-card h2,.ubp-ch5-ch5-4-panel h2,.ubp-ch5-ch5-4-state h2,.ubp-ch5-ch5-4-target h2,.ubp-ch5-ch5-4-source h2,.ubp-ch5-ch5-4-center h2,.ubp-ch5-ch5-4-root h2{
  color:var(--text);
  font-size:15px;
  font-weight:850;
  line-height:1.35;
}
.ubp-ch5-ch5-4-step p,.ubp-ch5-ch5-4-card p,.ubp-ch5-ch5-4-card span,.ubp-ch5-ch5-4-panel span,.ubp-ch5-ch5-4-state p,.ubp-ch5-ch5-4-target p,.ubp-ch5-ch5-4-source p,.ubp-ch5-ch5-4-center p,.ubp-ch5-ch5-4-root p,.ubp-ch5-ch5-4-note{
  color:var(--muted);
  font-size:13px;
}
.ubp-ch5-ch5-4-cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:10px;
}
.ubp-ch5-ch5-4-card{
  display:grid;
  gap:7px;
  padding:11px;
}
.ubp-ch5-ch5-4-card span{
  display:inline-flex;
  width:fit-content;
  padding:2px 7px;
  border:1px solid var(--line-strong);
  border-radius:6px;
  background:var(--paper);
  color:var(--track-strong);
  font-weight:750;
}
.ubp-ch5-ch5-4-split{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.ubp-ch5-ch5-4-panel{
  display:grid;
  gap:8px;
  padding:12px;
}
.ubp-ch5-ch5-4-pair{
  display:grid;
  grid-template-columns:minmax(90px,.34fr) minmax(0,1fr);
  gap:8px;
  padding:7px 0;
  border-top:1px solid var(--line);
}
.ubp-ch5-ch5-4-pair:first-of-type{border-top:0}
.ubp-ch5-ch5-4-pair strong,.ubp-ch5-ch5-4-term{
  color:var(--track-strong);
  font-size:13px;
  font-weight:850;
}
.ubp-ch5-ch5-4-hub{
  display:grid;
  grid-template-columns:1fr minmax(170px,.75fr) 1fr;
  gap:10px;
  align-items:center;
}
.ubp-ch5-ch5-4-source,.ubp-ch5-ch5-4-center,.ubp-ch5-ch5-4-target,.ubp-ch5-ch5-4-root{padding:12px}
.ubp-ch5-ch5-4-source::after{
  content:"호출";
  display:inline-flex;
  width:fit-content;
  margin-top:8px;
  padding:2px 7px;
  border:1px solid color-mix(in srgb,var(--track) 30%,var(--line));
  border-radius:6px;
  color:var(--track-strong);
  background:var(--paper);
  font-size:12px;
  font-weight:850;
}
.ubp-ch5-ch5-4-center{
  display:grid;
  gap:6px;
  justify-items:center;
  text-align:center;
  padding:12px;
  border:1px solid color-mix(in srgb,var(--track) 35%,var(--line));
  border-radius:8px;
  background:var(--track-tint);
}
.ubp-ch5-ch5-4-targets,.ubp-ch5-ch5-4-model{
  display:grid;
  gap:10px;
}
.ubp-ch5-ch5-4-states{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(130px,1fr));
  gap:10px;
}
.ubp-ch5-ch5-4-state{display:grid;gap:6px;padding:11px}
.ubp-ch5-ch5-4-matrix{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  border:1px solid var(--line);
  border-radius:8px;
  overflow:hidden;
}
.ubp-ch5-ch5-4-matrix th,.ubp-ch5-ch5-4-matrix td{
  padding:9px 11px;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  text-align:left;
  vertical-align:top;
  font-size:13px;
}
.ubp-ch5-ch5-4-matrix th{
  color:var(--text);
  background:var(--surface);
  font-weight:850;
}
.ubp-ch5-ch5-4-matrix tr:last-child td{border-bottom:0}
.ubp-ch5-ch5-4-matrix th:last-child,.ubp-ch5-ch5-4-matrix td:last-child{border-right:0}
.ubp-ch5-ch5-4-note{
  padding:10px 11px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--surface);
}
@media (max-width: 640px){
  .ubp-ch5-ch5-4-frame{padding:14px;gap:10px}
  h1{font-size:22px}
  .ubp-ch5-ch5-4-lead{font-size:13px}
  .ubp-ch5-ch5-4-flow,.ubp-ch5-ch5-4-split,.ubp-ch5-ch5-4-hub{grid-template-columns:1fr}
  .ubp-ch5-ch5-4-step{min-height:0}
  .ubp-ch5-ch5-4-step:not(:last-child)::after{display:none}
}
@media (max-width: 360px){
  .ubp-ch5-ch5-4-frame{padding:12px}
  h1{font-size:20px}
  .ubp-ch5-ch5-4-pair{grid-template-columns:1fr;gap:2px}
  .ubp-ch5-ch5-4-matrix th,.ubp-ch5-ch5-4-matrix td{padding:8px;font-size:12px}
}