:root {
  color-scheme: light;
  --diagram-text: #111827;
  --diagram-muted: #475569;
  --diagram-line: #dbe3ec;
  --diagram-paper: #ffffff;
  --diagram-panel: #f8fafc;
  --diagram-panel-strong: #f1f5f9;
  --diagram-success: #047857;
  --diagram-success-bg: #ecfdf5;
  --diagram-warning: #b45309;
  --diagram-warning-bg: #fffbeb;
  --diagram-danger: #b91c1c;
  --diagram-danger-bg: #fef2f2;
  --diagram-info: #1d4ed8;
  --diagram-info-bg: #eff6ff;
  --diagram-accent: #4f46e5;
  --track: var(--diagram-accent);
  --track-strong: var(--diagram-accent);
  --text: var(--diagram-text);
  --ink: var(--diagram-text);
  --muted: var(--diagram-muted);
  --line: var(--diagram-line);
  --border: var(--diagram-line);
  --paper: var(--diagram-paper);
  --surface: var(--diagram-paper);
  --panel: var(--diagram-panel);
  --head: var(--diagram-panel-strong);
  --diagram-space-1: 4px;
  --diagram-space-2: 8px;
  --diagram-space-3: 12px;
  --diagram-space-4: 16px;
  --diagram-space-5: 20px;
  --diagram-radius-sm: 6px;
  --diagram-radius: 8px;
  --diagram-font-body: 13px;
  --diagram-font-small: 12px;
  --diagram-font-title: 24px;
}

html[data-diagram-theme="dark"] {
  color-scheme: dark;
  --diagram-text: #f4f4f5;
  --diagram-muted: #b6c2d2;
  --diagram-line: rgba(255, 255, 255, 0.16);
  --diagram-paper: #111317;
  --diagram-panel: #181b21;
  --diagram-panel-strong: #20242c;
  --diagram-success: #86efac;
  --diagram-success-bg: rgba(34, 197, 94, 0.1);
  --diagram-warning: #fcd34d;
  --diagram-warning-bg: rgba(245, 158, 11, 0.1);
  --diagram-danger: #fca5a5;
  --diagram-danger-bg: rgba(239, 68, 68, 0.1);
  --diagram-info: #93c5fd;
  --diagram-info-bg: rgba(59, 130, 246, 0.12);
  --diagram-accent: #a5b4fc;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: transparent;
}

body {
  min-width: 0;
  color: var(--text, var(--ink, var(--diagram-text)));
  font-family:
    Pretendard, "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic",
    "Segoe UI", sans-serif;
  line-height: 1.5;
  word-break: keep-all;
  overflow-wrap: break-word;
}

.diagram {
  width: 100%;
  max-width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: var(--paper);
  color: var(--text);
  contain: layout paint;
}

:where(.diagram) {
  padding: clamp(12px, 1.8vw, 16px);
}

.diagram,
.diagram * {
  min-width: 0;
  max-width: 100%;
}

.diagram[data-diagram-system="v1"] :where(h1, h2, h3, p) {
  margin-block-start: 0;
}

.diagram[data-diagram-system="v1"] h1 {
  font-size: var(--diagram-font-title);
  line-height: 1.24;
  letter-spacing: 0;
}

.diagram[data-diagram-system="v1"] .diagram-header {
  display: grid;
  gap: 6px;
  margin-bottom: var(--diagram-space-4);
}

.diagram[data-diagram-system="v1"] .diagram-eyebrow {
  width: fit-content;
  padding: 2px var(--diagram-space-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  color: var(--track-strong, var(--track));
  font-size: var(--diagram-font-small);
  font-weight: 800;
  line-height: 1.35;
}

.diagram[data-diagram-system="v1"] .diagram-lead {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}

.diagram[data-diagram-system="v1"] .diagram-grid {
  display: grid;
  grid-template-columns: repeat(var(--diagram-columns, 3), minmax(0, 1fr));
  gap: var(--diagram-space-3);
}

.diagram[data-diagram-system="v1"] .diagram-card {
  display: grid;
  gap: 7px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.diagram[data-diagram-system="v1"] .diagram-card > :where(h2, h3, strong) {
  color: var(--text);
  font-size: 14px;
  line-height: 1.4;
}

.diagram[data-diagram-system="v1"] .diagram-card > :where(p, span, code) {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.diagram[data-diagram-system="v1"] .diagram-table {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.diagram[data-diagram-system="v1"] .diagram-table :where(th, td) {
  padding: 10px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
  text-align: left;
  vertical-align: top;
}

.diagram[data-diagram-system="v1"] .diagram-table th {
  background: var(--head);
  color: var(--text);
  font-weight: 800;
}

.diagram[data-diagram-system="v1"] .diagram-table tr:last-child > * {
  border-bottom: 0;
}

.diagram[data-diagram-system="v1"] .diagram-takeaway {
  margin-top: var(--diagram-space-4);
  padding: var(--diagram-space-3);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.diagram[data-diagram-system="v1"] :where(p, li, td, th) {
  overflow-wrap: break-word;
}

html
  .diagram[data-diagram-system="v1"]
  :is(code, kbd, samp, small, sub, sup, [class*="-inline-code"]) {
  font-size: max(12px, 0.92em);
}

.diagram[data-diagram-system="v1"]
  :where([class$="-side-key"], [class*="-side-key "]) {
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: keep-all;
}

.diagram[data-diagram-system="v1"] :where(table) {
  width: 100%;
  border-collapse: collapse;
}

.diagram[data-diagram-system="v1"] :where(img, svg, canvas, video) {
  display: block;
  max-width: 100%;
  height: auto;
}

.diagram[data-diagram-system="v1"]
  :where([data-tone="success"], [data-state="success"]) {
  color: var(--diagram-success);
  background: var(--diagram-success-bg);
}

.diagram[data-diagram-system="v1"]
  :where([data-tone="warning"], [data-state="warning"]) {
  color: var(--diagram-warning);
  background: var(--diagram-warning-bg);
}

.diagram[data-diagram-system="v1"]
  :where([data-tone="danger"], [data-state="danger"]) {
  color: var(--diagram-danger);
  background: var(--diagram-danger-bg);
}

@media (max-width: 720px) {
  :root {
    --diagram-font-title: 21px;
  }

  .diagram[data-diagram-system="v1"] .diagram-grid {
    grid-template-columns: 1fr;
  }

  .diagram[data-diagram-system="v1"] .diagram-table :where(th, td) {
    padding: 8px;
    font-size: 12px;
  }
}

@media (max-width: 360px) {
  :root {
    --diagram-font-title: 20px;
  }
}

@media (max-width: 720px) {
  .diagram[data-diagram-system="v1"] {
    gap: 8px !important;
    padding: 16px !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
  }

  .diagram[data-diagram-system="v1"] :where(h1) {
    margin: 0 !important;
    font-size: 20px !important;
    line-height: 1.25 !important;
  }

  .diagram[data-diagram-system="v1"] :where(h2, h3) {
    margin: 0 !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
  }

  .diagram[data-diagram-system="v1"]
    :where(p, li, dt, dd, th, td, span, strong, b, code, small) {
    font-size: 12px !important;
    line-height: 1.4 !important;
  }

  .diagram[data-diagram-system="v1"]
    :where([class*="lead"], [class*="intro"], .diagram-lead) {
    font-size: 14px !important;
    line-height: 1.55 !important;
  }
}

@media (max-width: 360px) {
  .diagram[data-diagram-system="v1"] :where(h1) {
    font-size: 20px !important;
  }
}

/* The shared palette is authoritative over legacy inline light-only skins. */
html body .diagram.diagram[data-diagram-system="v1"] {
  --text: var(--diagram-text) !important;
  --ink: var(--diagram-text) !important;
  --muted: var(--diagram-muted) !important;
  --subtle: var(--diagram-muted) !important;
  --line: var(--diagram-line) !important;
  --border: var(--diagram-line) !important;
  --paper: var(--diagram-paper) !important;
  --bg: var(--diagram-paper) !important;
  --surface: var(--diagram-panel) !important;
  --panel: var(--diagram-panel) !important;
  --card: var(--diagram-panel) !important;
  --soft: var(--diagram-panel) !important;
  --head: var(--diagram-panel-strong) !important;
  --surface-strong: var(--diagram-panel-strong) !important;
  border-color: var(--line) !important;
  background: var(--paper) !important;
  color: var(--text) !important;
}

html body .diagram.diagram[data-diagram-system="v1"] * {
  border-color: var(--line) !important;
  background-color: transparent !important;
  background-image: none !important;
  color: var(--text) !important;
}

html[data-diagram-theme]
  body
  .diagram.diagram.diagram[data-diagram-system="v1"]
  :where(
    article,
    th,
    pre,
    code,
    [class*="card"],
    [class*="panel"],
    [class*="box"],
    [class*="node"],
    [class*="cell"],
    [class*="item"],
    [class*="lane"],
    [class*="band"],
    [class*="note"],
    [class*="rule"],
    [class*="metric"],
    [class*="slot"]
  ) {
  background-color: var(--panel) !important;
}

html[data-diagram-theme]
  body
  .diagram.diagram.diagram[data-diagram-system="v1"]
  :where(
    p,
    li,
    dd,
    td,
    small,
    [class*="lead"],
    [class*="copy"],
    [class*="desc"],
    [class*="caption"]
  ) {
  color: var(--muted) !important;
}

html[data-diagram-theme]
  body
  .diagram.diagram.diagram[data-diagram-system="v1"]
  :where(
    [class*="eyebrow"],
    [class*="kicker"],
    [class*="badge"],
    [class*="tag"],
    [class*="label"],
    [class*="chip"]
  ) {
  color: var(--track-strong) !important;
}

html[data-diagram-theme]
  body
  .diagram.diagram.diagram[data-diagram-system="v1"]
  :where(
    [data-tone="success"],
    [data-tone="green"],
    [data-tone="good"],
    [data-tone="ok"],
    [data-state="success"],
    [data-state="green"],
    [data-state="good"],
    [data-state="ok"]
  ) {
  --diagram-tone-color: var(--diagram-success);
  --diagram-tone-bg: var(--diagram-success-bg);
  background-color: var(--diagram-success-bg) !important;
  color: var(--diagram-success) !important;
}

html[data-diagram-theme]
  body
  .diagram.diagram.diagram[data-diagram-system="v1"]
  :where(
    [data-tone="warning"],
    [data-tone="warn"],
    [data-tone="amber"],
    [data-tone="caution"],
    [data-state="warning"],
    [data-state="warn"],
    [data-state="amber"],
    [data-state="caution"]
  ) {
  --diagram-tone-color: var(--diagram-warning);
  --diagram-tone-bg: var(--diagram-warning-bg);
  background-color: var(--diagram-warning-bg) !important;
  color: var(--diagram-warning) !important;
}

html[data-diagram-theme]
  body
  .diagram.diagram.diagram[data-diagram-system="v1"]
  :where(
    [data-tone="danger"],
    [data-tone="bad"],
    [data-tone="error"],
    [data-tone="red"],
    [data-tone="rose"],
    [data-state="danger"],
    [data-state="bad"],
    [data-state="error"],
    [data-state="red"],
    [data-state="rose"]
  ) {
  --diagram-tone-color: var(--diagram-danger);
  --diagram-tone-bg: var(--diagram-danger-bg);
  background-color: var(--diagram-danger-bg) !important;
  color: var(--diagram-danger) !important;
}

html[data-diagram-theme]
  body
  .diagram.diagram.diagram[data-diagram-system="v1"]
  :where(
    [data-tone="info"],
    [data-tone="blue"],
    [data-state="info"],
    [data-state="blue"]
  ) {
  --diagram-tone-color: var(--diagram-info);
  --diagram-tone-bg: var(--diagram-info-bg);
  background-color: var(--diagram-info-bg) !important;
  color: var(--diagram-info) !important;
}

html[data-diagram-theme]
  body
  .diagram.diagram.diagram[data-diagram-system="v1"]
  :where([data-tone], [data-state])
  :where(
    h1,
    h2,
    h3,
    strong,
    b,
    [class*="label"],
    [class*="title"],
    [class*="key"]
  ) {
  color: var(--diagram-tone-color, var(--text)) !important;
}

html[data-diagram-theme]
  body
  .diagram.diagram.diagram[data-diagram-system="v1"]
  [class*="bar"]
  > span {
  min-width: max-content !important;
  white-space: nowrap;
  background-color: var(--diagram-tone-bg, var(--panel)) !important;
  color: var(--diagram-tone-color, var(--text)) !important;
}

html body .diagram.diagram[data-diagram-system="v1"] table {
  width: 100% !important;
  max-width: 100% !important;
  table-layout: fixed;
}

html body .diagram.diagram[data-diagram-system="v1"] :where(th, td) {
  min-width: 0 !important;
  overflow-wrap: anywhere;
  word-break: break-word;
}