/* codex-lint-normalize */
:root{--track:#3178c6;}
html[data-diagram-theme="dark"]{--track:#6ea8de;}
html,
body{margin:0;padding:0;overflow:hidden;background:transparent;}
body{overflow-wrap:anywhere;}
.diagram{width:100%;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--paper);contain:layout paint;}
.diagram,.diagram *{max-width:100%;}
@media (max-width: 760px){}
@media (max-width: 360px){}
/* /codex-lint-normalize */

/* codex-quality-baseline */
:root{--track:#3178c6;--track-strong:#3178c6;}
html[data-diagram-theme="dark"]{--track:#6ea8de;--track-strong:#6ea8de;}
*,*::before,*::after{box-sizing:border-box;}
html,
body{margin:0;padding:0;overflow:hidden;background:transparent;}
body{overflow-wrap:break-word;}
.diagram{width:100%;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--paper);contain:layout paint;}
.diagram,.diagram *{max-width:100%;}
@media (max-width: 760px){}
@media (max-width: 360px){}
[class*="step-no"],[class*="step-number"],[class*="step-index"]{border:1px solid var(--line);background:var(--paper);color:var(--track);}
/* /codex-quality-baseline */
:root{color-scheme:light;--track:#3178c6;--track-strong:#245f9e;--track-tint:#eff6ff;--paper:#ffffff;--surface:#f8fafc;--line:#d9e2ef;--line-strong:#94a3b8;--text:#0f172a;--muted:#475569}
html[data-diagram-theme="dark"]{color-scheme:dark;--track:#6ea8de;--track-strong:#bfdbfe;--track-tint:rgba(110,168,222,.16);--paper:#111113;--surface:#18181b;--line:#343a40;--line-strong:#52525b;--text:#f4f4f5;--muted:#a1a1aa}
body{color:var(--text);font-family: Pretendard, "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", "Segoe UI", sans-serif;line-height:1.55;word-break:keep-all;overflow-wrap:anywhere}
h1{font-size:26px;line-height:1.18;letter-spacing:0;margin:0 0 8px;font-weight:850;color:var(--text)}
h1,h2,p{margin-top:0}
.ts-ch4-ch4-4-frame{display:grid;gap:0;border:1px solid var(--line);border-radius:8px;padding:20px;background:var(--paper)}
.ts-ch4-ch4-4-badge{display:inline-flex;align-items:center;justify-self:start;border:1px solid color-mix(in srgb,var(--track) 34%,var(--line));background:var(--track-tint);color:var(--track-strong);border-radius:7px;padding:4px 9px;font-size:12px;font-weight:800;margin-bottom:10px}
.ts-ch4-ch4-4-lead{margin:0;color:var(--muted);font-size:15px}
.ts-ch4-ch4-4-path,.ts-ch4-ch4-4-cards,.ts-ch4-ch4-4-states,.ts-ch4-ch4-4-layers,.ts-ch4-ch4-4-timeline{display:grid;gap:10px;margin-top:18px}
.ts-ch4-ch4-4-path{grid-template-columns:repeat(var(--cols,4),minmax(0,1fr))}
.ts-ch4-ch4-4-cards{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.ts-ch4-ch4-4-states{grid-template-columns:repeat(auto-fit,minmax(118px,1fr))}
.ts-ch4-ch4-4-layers{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.ts-ch4-ch4-4-timeline{grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}
.ts-ch4-ch4-4-step,.ts-ch4-ch4-4-card,.ts-ch4-ch4-4-state,.ts-ch4-ch4-4-layer,.ts-ch4-ch4-4-time{position:relative;border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:12px;min-width:0}
.ts-ch4-ch4-4-path .ts-ch4-ch4-4-step{min-height:112px}
.ts-ch4-ch4-4-step:not(:last-child)::after{content:"→";position:absolute;right:-14px;top:50%;transform:translateY(-50%);color:var(--line-strong);font-weight:900;background:var(--paper);padding:0 2px}
.ts-ch4-ch4-4-loop{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:18px}
.ts-ch4-ch4-4-loop .ts-ch4-ch4-4-step::after{content:"↻";right:-15px;color:var(--track)}
.ts-ch4-ch4-4-loop .ts-ch4-ch4-4-step:last-child::after{content:"↺";right:8px;top:10px;transform:none;background:transparent}
.ts-ch4-ch4-4-num,.ts-ch4-ch4-4-label{display:block;color:var(--track);font-size:12px;font-weight:850;margin-bottom:6px}
.ts-ch4-ch4-4-name{font-weight:850;color:var(--text);font-size:17px;margin-bottom:5px}
.ts-ch4-ch4-4-desc{color:var(--muted);font-size:14px}
.ts-ch4-ch4-4-matrix{width:100%;border-collapse:separate;border-spacing:0;margin-top:12px;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.ts-ch4-ch4-4-matrix th,.ts-ch4-ch4-4-matrix td{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top;font-size:14px}
.ts-ch4-ch4-4-matrix th{background:var(--surface);color:var(--text);font-weight:850}
.ts-ch4-ch4-4-matrix tr:last-child td{border-bottom:0}
.ts-ch4-ch4-4-matrix th:last-child,.ts-ch4-ch4-4-matrix td:last-child{border-right:0}
.ts-ch4-ch4-4-term{color:var(--track);font-weight:850;white-space:nowrap}
.ts-ch4-ch4-4-note{margin:12px 0 0;border:1px solid var(--line);border-radius:8px;background:var(--surface);padding:11px 12px;color:var(--muted);font-size:14px}
.ts-ch4-ch4-4-note b{color:var(--track)}
code{font-family:"SFMono-Regular",Consolas,"Liberation Mono",monospace;background:var(--track-tint);border:1px solid color-mix(in srgb,var(--track) 30%,var(--line));border-radius:6px;padding:1px 4px;color:var(--track-strong);overflow-wrap:anywhere}
@media (max-width:640px){
  .ts-ch4-ch4-4-frame{padding:16px}
  h1{font-size:24px}
  .ts-ch4-ch4-4-path,.ts-ch4-ch4-4-loop,.ts-ch4-ch4-4-cards,.ts-ch4-ch4-4-states,.ts-ch4-ch4-4-layers,.ts-ch4-ch4-4-timeline{grid-template-columns:1fr}
  .ts-ch4-ch4-4-path .ts-ch4-ch4-4-step{min-height:auto}
  .ts-ch4-ch4-4-step:not(:last-child)::after,.ts-ch4-ch4-4-loop .ts-ch4-ch4-4-step::after,.ts-ch4-ch4-4-loop .ts-ch4-ch4-4-step:last-child::after{content:"";display:none}
}
@media (max-width:360px){
  .ts-ch4-ch4-4-frame{padding:14px}
  h1{font-size:22px}
  .ts-ch4-ch4-4-lead{font-size:14px}
  .ts-ch4-ch4-4-matrix th,.ts-ch4-ch4-4-matrix td{padding:8px 9px;font-size:13px}
  .ts-ch4-ch4-4-term{white-space:normal}
}
/* codex-gold-ts-ch4-soft-theme */
:root {
  --track: #3178c6;
  --track-strong: #3178c6;
  --track-tint: #eff6ff;
  --ts-gold-line: #bfdbfe;
  --ts-gold-line-strong: #93c5fd;
  --ts-gold-paper: #ffffff;
  --ts-gold-surface: #f8fafc;
  --ts-gold-surface-strong: #eaf3ff;
  --ts-gold-text: #111827;
  --ts-gold-muted: #475569;
  --line: #bfdbfe;
  --line-strong: #bfdbfe;
  --paper: #ffffff;
  --surface: #f8fafc;
  --surface-strong: #eaf3ff;
  --node: #ffffff;
  --text: #111827;
  --ink: #111827;
  --muted: #475569;
  --subtle: #64748b;
}
html[data-diagram-theme="dark"] {
  --track: #6ea8de;
  --track-strong: #8bbbe8;
  --track-tint: rgba(110, 168, 222, 0.12);
  --ts-gold-line: rgba(110, 168, 222, 0.28);
  --ts-gold-line-strong: rgba(110, 168, 222, 0.38);
  --ts-gold-paper: #111113;
  --ts-gold-surface: #171a20;
  --ts-gold-surface-strong: rgba(110, 168, 222, 0.13);
  --ts-gold-text: #f4f4f5;
  --ts-gold-muted: #b6c2d2;
  --line: rgba(110, 168, 222, 0.28);
  --line-strong: rgba(110, 168, 222, 0.32);
  --paper: #111113;
  --surface: #171a20;
  --surface-strong: rgba(110, 168, 222, 0.13);
  --node: #111113;
  --text: #f4f4f5;
  --ink: #f4f4f5;
  --muted: #b6c2d2;
  --subtle: #94a3b8;
}
.diagram {
  border-color: var(--ts-gold-line) !important;
  background: var(--ts-gold-paper) !important;
  color: var(--ts-gold-text) !important;
  box-shadow: none !important;
}
.diagram :where([class*="wrap"], [class*="body"], [class*="content"]) {
  background: transparent !important;
}
.diagram :where(
  [class*="head"],
  [class*="hero"],
  [class*="intro"],
  [class*="panel"],
  [class*="section"],
  [class*="summary"],
  [class*="note"],
  [class*="result"],
  [class*="compare"],
  [class*="matrix"],
  [class*="checks"],
  [class*="snippet"],
  [class*="side"]
) {
  border-color: var(--ts-gold-line) !important;
}
.diagram :where(
  [class*="card"],
  [class*="type"],
  [class*="item"],
  [class*="tile"],
  [class*="box"],
  [class*="step"],
  [class*="row"],
  [class*="cell"],
  [class*="case"],
  [class*="node"],
  [class*="choice"],
  [class*="rule"],
  [class*="check"],
  [class*="axis"],
  [class*="entry"],
  [class*="option"],
  [class*="lane"]
) {
  border-color: color-mix(in srgb, var(--track) 24%, var(--ts-gold-line)) !important;
}
.diagram :where(
  [class*="card"],
  [class*="type"],
  [class*="item"],
  [class*="tile"],
  [class*="box"],
  [class*="step"],
  [class*="case"],
  [class*="choice"],
  [class*="rule"],
  [class*="check"],
  [class*="option"],
  [class*="lane"]
) {
  background: color-mix(in srgb, var(--ts-gold-paper) 90%, var(--track-tint)) !important;
}
.diagram :where(
  [class*="kicker"],
  [class*="badge"],
  [class*="tag"],
  [class*="pill"],
  [class*="label"],
  [class*="key"],
  [class*="num"]
) {
  border-color: color-mix(in srgb, var(--track) 34%, var(--ts-gold-line)) !important;
  background: color-mix(in srgb, var(--track) 8%, transparent) !important;
  color: var(--track-strong) !important;
}
.diagram :where(h1, h2, h3, strong, b, [class*="title"], [class*="accent"], [class*="important"]) {
  color: color-mix(in srgb, var(--track-strong) 18%, var(--ts-gold-text)) !important;
}
.diagram :where([class*="lead"], [class*="text"], [class*="desc"], [class*="sub"], p) {
  color: var(--ts-gold-muted) !important;
}
.diagram :where(table, .table) {
  border-color: var(--ts-gold-line) !important;
}
.diagram :where(th, [class*="thead"], [class*="header"]) {
  background: color-mix(in srgb, var(--track) 7%, var(--ts-gold-surface)) !important;
}
.diagram :where(pre, code, [class*="code"]) {
  border-color: color-mix(in srgb, var(--track) 22%, var(--ts-gold-line)) !important;
  background: color-mix(in srgb, var(--ts-gold-paper) 84%, var(--track-tint)) !important;
  color: var(--ts-gold-text) !important;
}
html[data-diagram-theme="dark"] .diagram {
  background: #111113 !important;
}
html[data-diagram-theme="dark"] .diagram :where([class*="wrap"], [class*="body"], [class*="content"]) {
  background: #171a20 !important;
}
html[data-diagram-theme="dark"] .diagram :where(
  [class*="card"],
  [class*="type"],
  [class*="item"],
  [class*="tile"],
  [class*="box"],
  [class*="step"],
  [class*="case"],
  [class*="choice"],
  [class*="rule"],
  [class*="check"],
  [class*="option"],
  [class*="lane"]
) {
  background: color-mix(in srgb, #111113 88%, var(--track-tint)) !important;
}
/* /codex-gold-ts-ch4-soft-theme */

/* visual-stability-2 */
:root{
  --vs2-paper:#ffffff;
  --vs2-ink:var(--ink, var(--text, #111827));
  --vs2-muted:var(--muted, #475569);
  --vs2-track:var(--track, #2563eb);
  --vs2-line:color-mix(in srgb, var(--vs2-track) 24%, #d9e2ee);
  --vs2-line-muted:color-mix(in srgb, var(--vs2-track) 12%, #e6ebf2);
  --vs2-fill:color-mix(in srgb, var(--vs2-paper) 96%, var(--vs2-track));
  --vs2-note:color-mix(in srgb, var(--vs2-paper) 97%, var(--vs2-track));
}
html[data-diagram-theme="dark"]{
  --vs2-paper:#111113;
  --vs2-ink:var(--ink, var(--text, #f4f4f5));
  --vs2-muted:var(--muted, #a1a1aa);
  --vs2-line:rgba(255,255,255,.14);
  --vs2-line-muted:rgba(255,255,255,.095);
  --vs2-fill:color-mix(in srgb, var(--vs2-paper) 94%, var(--vs2-track));
  --vs2-note:color-mix(in srgb, var(--vs2-paper) 96%, var(--vs2-track));
}
.diagram{
  background:var(--vs2-paper)!important;
  color:var(--vs2-ink)!important;
  border-color:var(--vs2-line)!important;
  box-shadow:none!important;
}
.diagram[class]{
  background:var(--vs2-paper)!important;
}
.diagram :where(
  header,
  [class$="-hero"], [class$="__hero"],
  [class$="-head"], [class$="__head"],
  [class$="-header"], [class$="__header"],
  [class$="-wrap"], [class$="__wrap"],
  [class$="-stage"], [class$="__stage"],
  [class$="-canvas"], [class$="__canvas"],
  [class$="-surface"], [class$="__surface"],
  [class$="-scene"], [class$="__scene"]
){
  background:transparent!important;
  border-color:var(--vs2-line)!important;
  box-shadow:none!important;
}
.diagram :where(
  [class$="-badge"], [class$="__badge"],
  [class$="-eyebrow"], [class$="__eyebrow"],
  [class$="-kicker"], [class$="__kicker"],
  [class$="-chip"], [class$="__chip"],
  [class$="-tag"], [class$="__tag"],
  [class$="-label"], [class$="__label"]
){
  background:var(--vs2-fill)!important;
  border-color:var(--vs2-line)!important;
  color:var(--vs2-track)!important;
  box-shadow:none!important;
}
.diagram :where(
  [class$="-note"], [class$="__note"],
  [class$="-takeaway"], [class$="__takeaway"],
  [class$="-summary"], [class$="__summary"],
  [class$="-footer"], [class$="__footer"]
){
  background:var(--vs2-note)!important;
  border-color:var(--vs2-line)!important;
  box-shadow:none!important;
}
.diagram :where(
  [class$="-lane"][data-kind], [class$="__lane"][data-kind],
  [class$="-card"][data-kind], [class$="__card"][data-kind],
  [class$="-panel"][data-kind], [class$="__panel"][data-kind],
  [class$="-box"][data-kind], [class$="__box"][data-kind],
  [class$="-case"][data-kind], [class$="__case"][data-kind]
){
  background:var(--vs2-paper)!important;
  border-color:var(--vs2-line)!important;
}
.diagram :where(
  [class$="-grid"], [class$="__grid"],
  [class$="-cards"], [class$="__cards"],
  [class$="-columns"], [class$="__columns"],
  [class$="-panels"], [class$="__panels"],
  [class$="-steps"], [class$="__steps"],
  [class$="-flow"], [class$="__flow"],
  [class$="-lanes"], [class$="__lanes"],
  [class$="-rows"], [class$="__rows"]
){
  gap:max(var(--existing-gap, 0px), clamp(12px, 1.6vw, 18px))!important;
}
.diagram [class$="-card"], .diagram [class$="__card"],
.diagram [class$="-panel"], .diagram [class$="__panel"],
.diagram [class$="-box"], .diagram [class$="__box"],
.diagram [class$="-rule"], .diagram [class$="__rule"],
.diagram [class$="-effect"], .diagram [class$="__effect"],
.diagram [class$="-table-card"], .diagram [class$="__table-card"]{
  background:var(--vs2-paper)!important;
  border-color:var(--vs2-line)!important;
  box-shadow:none!important;
}
.diagram :where(table, [class$="-matrix"], [class$="__matrix"], [class$="-sheet"], [class$="__sheet"]){
  border-color:var(--vs2-line)!important;
  box-shadow:none!important;
}
.diagram :where(th,td,tr,[class$="-row"],[class$="__row"]){
  border-color:var(--vs2-line-muted)!important;
}
.diagram :where(tbody tr,tbody th,tbody td,[class$="-table-row"],[class$="__table-row"],[class$="-data-row"],[class$="__data-row"]){
  background:var(--vs2-paper)!important;
}
.diagram :where(thead th,[class$="-colhead"],[class$="__colhead"],[class$="-matrix-head"],[class$="__matrix-head"]){
  background:var(--vs2-fill)!important;
  border-color:var(--vs2-line)!important;
}
html[data-diagram-theme="dark"] .diagram :where(tbody th,td,tr,[class$="-row"],[class$="__row"]){
  background:transparent!important;
}
.diagram :where([class$="-arrow"], [class$="__arrow"], [class$="-connector"], [class$="__connector"]){
  color:var(--vs2-track)!important;
  border-color:var(--vs2-line)!important;
  box-shadow:none!important;
}
.diagram header,
.diagram [class$="-hero"], .diagram [class$="__hero"],
.diagram [class$="-head"], .diagram [class$="__head"],
.diagram [class$="-header"], .diagram [class$="__header"],
.diagram [class$="-wrap"], .diagram [class$="__wrap"],
.diagram [class$="-stage"], .diagram [class$="__stage"],
.diagram [class$="-canvas"], .diagram [class$="__canvas"],
.diagram [class$="-surface"], .diagram [class$="__surface"],
.diagram [class$="-scene"], .diagram [class$="__scene"]{
  background:transparent!important;
  border-color:var(--vs2-line)!important;
  box-shadow:none!important;
}
.diagram [class$="-lane"][data-kind], .diagram [class$="__lane"][data-kind],
.diagram [class$="-card"][data-kind], .diagram [class$="__card"][data-kind],
.diagram [class$="-panel"][data-kind], .diagram [class$="__panel"][data-kind],
.diagram [class$="-box"][data-kind], .diagram [class$="__box"][data-kind],
.diagram [class$="-case"][data-kind], .diagram [class$="__case"][data-kind]{
  background:var(--vs2-paper)!important;
  border-color:var(--vs2-line)!important;
}
.diagram table,
.diagram [class$="-matrix"], .diagram [class$="__matrix"],
.diagram [class$="-sheet"], .diagram [class$="__sheet"]{
  border-color:var(--vs2-line)!important;
  box-shadow:none!important;
}
.diagram th,
.diagram td,
.diagram tr,
.diagram [class$="-row"], .diagram [class$="__row"]{
  border-color:var(--vs2-line-muted)!important;
}
.diagram tbody tr,
.diagram tbody th,
.diagram tbody td,
.diagram [class$="-table-row"], .diagram [class$="__table-row"],
.diagram [class$="-data-row"], .diagram [class$="__data-row"]{
  background:var(--vs2-paper)!important;
}
.diagram thead th,
.diagram [class$="-colhead"], .diagram [class$="__colhead"],
.diagram [class$="-matrix-head"], .diagram [class$="__matrix-head"],
.diagram [class$="-sheet-head"], .diagram [class$="__sheet-head"]{
  background:var(--vs2-fill)!important;
  border-color:var(--vs2-line)!important;
}
html[data-diagram-theme="dark"] .diagram svg :where([class*="-line"], [class*="__line"], [class*="-edge"], [class*="__edge"]){
  stroke:rgba(255,255,255,.28)!important;
}
@media(max-width:720px){
  .diagram :where([class$="-arrow"], [class$="__arrow"], [class$="-connector"], [class$="__connector"]){
    position:static!important;
    transform:none!important;
  }
}
/* /visual-stability-2 */

    /* codex-frame-color-audit:start */
    :root {
      --diagram-frame-line: color-mix(
        in srgb,
        var(--track, var(--track-strong, #6366f1)) 48%,
        #dfe5eb
      );
    }

    html[data-diagram-theme="dark"],
    html.dark {
      --diagram-frame-line: color-mix(
        in srgb,
        var(--track, var(--track-strong, #a5b4fc)) 58%,
        transparent
      );
    }

    .diagram.diagram.diagram.diagram.diagram {
      border: 1px solid var(--diagram-frame-line) !important;
    }
    /* codex-frame-color-audit:end */