:root,
.contents-editor-admin,
.ce-student-shell,
.ce-algorithm-visual-renderer {
  --ce-color-page: #f4f7fb;
  --ce-color-surface: #ffffff;
  --ce-color-surface-soft: #f8fbff;
  --ce-color-surface-strong: #eef3f8;
  --ce-color-ink: #111827;
  --ce-color-muted: #5d6d84;
  --ce-color-line: #d6e0ec;
  --ce-color-line-soft: #e4eaf2;
  --ce-color-line-strong: #98aac1;
  --ce-color-accent: #2563eb;
  --ce-color-accent-soft: #eaf1ff;
  --ce-color-good: #0f766e;
  --ce-color-good-soft: #e7f7f1;
  --ce-color-warn: #b46500;
  --ce-color-warn-soft: #fff4db;
  --ce-color-danger: #b91c1c;
  --ce-color-danger-soft: #fff0f0;
  --ce-color-violet: #6d5bd0;
  --ce-color-violet-soft: #f0edff;

  --ce-font-sans: "Segoe UI", "Noto Sans KR", "Malgun Gothic", Arial, sans-serif;
  --ce-font-size-body: 14px;
  --ce-line-height-body: 1.55;
  --ce-line-height-reading: 1.75;

  --ce-radius-xs: 6px;
  --ce-radius-sm: 7px;
  --ce-radius-md: 8px;
  --ce-radius-lg: 10px;
  --ce-radius-pill: 999px;

  --ce-space-1: 4px;
  --ce-space-2: 6px;
  --ce-space-3: 8px;
  --ce-space-4: 10px;
  --ce-space-5: 12px;
  --ce-space-6: 14px;
  --ce-space-7: 16px;
  --ce-space-8: 18px;
  --ce-space-9: 20px;
  --ce-space-10: 24px;
  --ce-space-11: 28px;
  --ce-space-12: 32px;

  --ce-shadow-card: 0 1px 2px rgba(15, 23, 42, 0.05), 0 8px 22px rgba(15, 23, 42, 0.06);
  --ce-shadow-panel: 0 20px 42px rgba(17, 24, 39, 0.08);
  --ce-focus-ring: rgba(37, 99, 235, 0.22);

  --ce-layout-sidebar-width: 240px;
  --ce-layout-toc-width: 250px;
  --ce-layout-helper-width: 260px;
  --ce-layout-document-min-width: 620px;
  --ce-layout-canvas-min-height: 520px;
  --ce-layout-student-max-width: 1180px;
  --ce-layout-design-max-width: 1500px;

  --ce-visual-stage-bg: #f8fbff;
  --ce-visual-grid-line: #dfe8f3;
  --ce-visual-grid-size: 24px;
  --ce-visual-node-fill: #ffffff;
  --ce-visual-node-stroke: #8ea4c0;
  --ce-visual-node-active-fill: #eaf1ff;
  --ce-visual-edge-stroke: #5f728b;
  --ce-visual-edge-active-stroke: #2563eb;
  --ce-visual-node-stroke-width: 2;
  --ce-visual-node-active-stroke-width: 3;
  --ce-visual-edge-width: 2.4;
  --ce-visual-edge-active-width: 3;
  --ce-visual-arrow-marker-width: 5.4;
  --ce-visual-arrow-marker-height: 5.4;
  --ce-visual-arrow-ref-x: 8.2;
  --ce-visual-arrow-ref-y: 5;
  --ce-visual-edge-linecap: round;
  --ce-visual-edge-linejoin: round;
  --ce-visual-edge-label-offset: 4;
  --ce-visual-label-plate-fill: rgba(255, 255, 255, 0.94);
  --ce-visual-label-plate-stroke: #c8d5e5;
  --ce-visual-text-fill: #102033;
  --ce-visual-stage-min-width: 100;
  --ce-visual-stage-min-height: 70;
  --ce-visual-stage-padding: 8;
  --ce-visual-shape-radius: 1.6;
  --ce-visual-table-cell-min-width: 40px;
  --ce-visual-table-cell-min-height: 32px;
  --ce-visual-chart-mark-radius: 1.3;
  --ce-visual-chart-mark-active-radius: 1.8;
  --ce-visual-wrapper-box-padding: 6;
  --ce-visual-wrapper-box-radius: 2;

  --ce-breakpoint-narrow: 390px;
  --ce-breakpoint-mobile: 768px;
  --ce-breakpoint-tablet: 1024px;
  --ce-breakpoint-desktop: 1440px;

  --ce-page: var(--ce-color-page);
  --ce-surface: var(--ce-color-surface);
  --ce-surface-soft: var(--ce-color-surface-soft);
  --ce-surface-strong: var(--ce-color-surface-strong);
  --ce-ink: var(--ce-color-ink);
  --ce-text: var(--ce-color-ink);
  --ce-muted: var(--ce-color-muted);
  --ce-line: var(--ce-color-line);
  --ce-border: var(--ce-color-line);
  --ce-border-soft: var(--ce-color-line-soft);
  --ce-accent: var(--ce-color-accent);
  --ce-accent-soft: var(--ce-color-accent-soft);
  --ce-good: var(--ce-color-good);
  --ce-good-soft: var(--ce-color-good-soft);
  --ce-warn: var(--ce-color-warn);
  --ce-warn-soft: var(--ce-color-warn-soft);
  --ce-danger: var(--ce-color-danger);
  --ce-danger-soft: var(--ce-color-danger-soft);
  --ce-card-shadow: var(--ce-shadow-card);
  --ce-focus: var(--ce-focus-ring);
}

.contents-editor-admin,
.ce-student-shell {
  font-family: var(--ce-font-sans);
}