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

/* unrealbp-ch5-savegame-surface-tighten */
.diagram :where([class*="ubp-ch5-ch5-3"][class*="root"], [class*="ubp-ch5-ch5-3"][class*="shell"], [class*="ubp-ch5-ch5-3"][class*="scope"], [class*="ubp-ch5-ch5-3"][class*="wrap"], [class*="ubp-ch5-ch5-3"][class*="body"], [class*="ubp-ch5-ch5-3"][class*="content"], [class*="ubp-ch5-ch5-3"][class*="main"]) {
  background: transparent !important;
  box-shadow: none !important;
}
.diagram :where([class*="ubp-ch5-ch5-3"][class*="hero"], [class*="ubp-ch5-ch5-3"][class*="head"], [class*="ubp-ch5-ch5-3"][class*="intro"], [class*="ubp-ch5-ch5-3"][class*="header"], [class*="ubp-ch5-ch5-3"][class*="top"]) {
  background: transparent !important;
}
.diagram :where([class*="ubp-ch5-ch5-3"][class*="panel"], [class*="ubp-ch5-ch5-3"][class*="card"], [class*="ubp-ch5-ch5-3"][class*="step"], [class*="ubp-ch5-ch5-3"][class*="node"], [class*="ubp-ch5-ch5-3"][class*="item"], [class*="ubp-ch5-ch5-3"][class*="layer"], [class*="ubp-ch5-ch5-3"][class*="metric"], [class*="ubp-ch5-ch5-3"][class*="action"], [class*="ubp-ch5-ch5-3"][class*="data"], [class*="ubp-ch5-ch5-3"][class*="note"], [class*="ubp-ch5-ch5-3"][class*="row"]) {
  background: var(--vs2-paper, #fff) !important;
  border-color: color-mix(in srgb, var(--track) 15%, var(--vs2-line, #d9e2ee)) !important;
  box-shadow: none !important;
}
.diagram :where([class*="ubp-ch5-ch5-3"][class*="eyebrow"], [class*="ubp-ch5-ch5-3"][class*="tag"], [class*="ubp-ch5-ch5-3"][class*="badge"], [class*="ubp-ch5-ch5-3"][class*="marker"], [class*="ubp-ch5-ch5-3"][class*="label"]) {
  background: var(--vs2-note, color-mix(in srgb, var(--track) 6%, #fff)) !important;
  border-color: color-mix(in srgb, var(--track) 22%, var(--vs2-line, #d9e2ee)) !important;
}
html[data-diagram-theme="dark"] .diagram :where([class*="ubp-ch5-ch5-3"][class*="panel"], [class*="ubp-ch5-ch5-3"][class*="card"], [class*="ubp-ch5-ch5-3"][class*="step"], [class*="ubp-ch5-ch5-3"][class*="node"], [class*="ubp-ch5-ch5-3"][class*="item"], [class*="ubp-ch5-ch5-3"][class*="layer"], [class*="ubp-ch5-ch5-3"][class*="metric"], [class*="ubp-ch5-ch5-3"][class*="action"], [class*="ubp-ch5-ch5-3"][class*="data"], [class*="ubp-ch5-ch5-3"][class*="note"], [class*="ubp-ch5-ch5-3"][class*="row"]) {
  background: var(--vs2-paper, #111113) !important;
  border-color: rgba(148, 163, 184, 0.22) !important;
}
html[data-diagram-theme="dark"] .diagram :where(table, th, td, tr, [class*="ubp-ch5-ch5-3"][class*="cell"], [class*="ubp-ch5-ch5-3"][class*="row"]) {
  border-color: rgba(148, 163, 184, 0.2) !important;
}
/* /unrealbp-ch5-savegame-surface-tighten */
/* unrealbp-ch5-savegame-specific-surfaces */
.diagram[class*="ubp-ch5-ch5-3"] :where([class*="layout"], [class*="head"], [class*="savefile"], [class*="runtime-map"], [class*="matrix"], [class*="board"], [class*="loop"], [class*="items"], [class*="tags"], [class*="footer"], [class*="grid"]) {
  background: transparent !important;
  box-shadow: none !important;
}
.diagram[class*="ubp-ch5-ch5-3"] :where([class*="slot"], [class*="stage"], [class*="matrix-cell"], [class*="state"], [class*="focus"], [class*="fact"], [class*="data-item"], [class*="operation"], [class*="phase"], [class*="command"], [class*="branch"], [class*="guard"]) {
  background: var(--vs2-paper, #fff) !important;
  border-color: color-mix(in srgb, var(--track) 14%, var(--vs2-line, #d9e2ee)) !important;
  box-shadow: none !important;
}
html[data-diagram-theme="dark"] .diagram[class*="ubp-ch5-ch5-3"] :where([class*="slot"], [class*="stage"], [class*="matrix-cell"], [class*="state"], [class*="focus"], [class*="fact"], [class*="data-item"], [class*="operation"], [class*="phase"], [class*="command"], [class*="branch"], [class*="guard"]) {
  background: var(--vs2-paper, #111113) !important;
  border-color: rgba(148, 163, 184, 0.22) !important;
}
/* /unrealbp-ch5-savegame-specific-surfaces */