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-2-frame{
  display:grid;
  gap:12px;
  padding:18px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--paper);
}
.ubp-ch5-ch5-2-head{display:grid;gap:8px}
h1{
  color:var(--text);
  font-size:25px;
  font-weight:850;
  line-height:1.18;
}
.ubp-ch5-ch5-2-lead{color:var(--muted);font-size:14px}
.ubp-ch5-ch5-2-flow{
  display:grid;
  grid-template-columns:repeat(var(--count),minmax(110px,1fr));
  gap:13px;
}
.ubp-ch5-ch5-2-step,.ubp-ch5-ch5-2-card,.ubp-ch5-ch5-2-panel,.ubp-ch5-ch5-2-state,.ubp-ch5-ch5-2-target,.ubp-ch5-ch5-2-source,.ubp-ch5-ch5-2-root{
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--surface);
}
.ubp-ch5-ch5-2-step{
  position:relative;
  display:grid;
  gap:7px;
  min-height:104px;
  padding:11px;
}
.ubp-ch5-ch5-2-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-2-step h2,.ubp-ch5-ch5-2-card h2,.ubp-ch5-ch5-2-panel h2,.ubp-ch5-ch5-2-state h2,.ubp-ch5-ch5-2-target h2,.ubp-ch5-ch5-2-source h2,.ubp-ch5-ch5-2-center h2,.ubp-ch5-ch5-2-root h2{
  color:var(--text);
  font-size:15px;
  font-weight:850;
  line-height:1.35;
}
.ubp-ch5-ch5-2-step p,.ubp-ch5-ch5-2-card p,.ubp-ch5-ch5-2-card span,.ubp-ch5-ch5-2-panel span,.ubp-ch5-ch5-2-state p,.ubp-ch5-ch5-2-target p,.ubp-ch5-ch5-2-source p,.ubp-ch5-ch5-2-center p,.ubp-ch5-ch5-2-root p,.ubp-ch5-ch5-2-note{
  color:var(--muted);
  font-size:13px;
}
.ubp-ch5-ch5-2-cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:10px;
}
.ubp-ch5-ch5-2-card{
  display:grid;
  gap:7px;
  padding:11px;
}
.ubp-ch5-ch5-2-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-2-split{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.ubp-ch5-ch5-2-panel{
  display:grid;
  gap:8px;
  padding:12px;
}
.ubp-ch5-ch5-2-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-2-pair:first-of-type{border-top:0}
.ubp-ch5-ch5-2-pair strong,.ubp-ch5-ch5-2-term{
  color:var(--track-strong);
  font-size:13px;
  font-weight:850;
}
.ubp-ch5-ch5-2-hub{
  display:grid;
  grid-template-columns:1fr minmax(170px,.75fr) 1fr;
  gap:10px;
  align-items:center;
}
.ubp-ch5-ch5-2-source,.ubp-ch5-ch5-2-center,.ubp-ch5-ch5-2-target,.ubp-ch5-ch5-2-root{padding:12px}
.ubp-ch5-ch5-2-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-2-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-2-targets,.ubp-ch5-ch5-2-model{
  display:grid;
  gap:10px;
}
.ubp-ch5-ch5-2-states{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(130px,1fr));
  gap:10px;
}
.ubp-ch5-ch5-2-state{display:grid;gap:6px;padding:11px}
.ubp-ch5-ch5-2-matrix{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  border:1px solid var(--line);
  border-radius:8px;
  overflow:hidden;
}
.ubp-ch5-ch5-2-matrix th,.ubp-ch5-ch5-2-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-2-matrix th{
  color:var(--text);
  background:var(--surface);
  font-weight:850;
}
.ubp-ch5-ch5-2-matrix tr:last-child td{border-bottom:0}
.ubp-ch5-ch5-2-matrix th:last-child,.ubp-ch5-ch5-2-matrix td:last-child{border-right:0}
.ubp-ch5-ch5-2-note{
  padding:10px 11px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--surface);
}
@media (max-width: 640px){
  .ubp-ch5-ch5-2-frame{padding:14px;gap:10px}
  h1{font-size:22px}
  .ubp-ch5-ch5-2-lead{font-size:13px}
  .ubp-ch5-ch5-2-flow,.ubp-ch5-ch5-2-split,.ubp-ch5-ch5-2-hub{grid-template-columns:1fr}
  .ubp-ch5-ch5-2-step{min-height:0}
  .ubp-ch5-ch5-2-step:not(:last-child)::after{display:none}
}
@media (max-width: 360px){
  .ubp-ch5-ch5-2-frame{padding:12px}
  h1{font-size:20px}
  .ubp-ch5-ch5-2-pair{grid-template-columns:1fr;gap:2px}
  .ubp-ch5-ch5-2-matrix th,.ubp-ch5-ch5-2-matrix td{padding:8px;font-size:12px}
}