/* 다이어그램 색: 역할별. 회색=유저·전화망, 청록=Stringee, 분홍=화면(admin, www), 주황=api, 보라=우리 시스템 묶음 */
  :root {
    --d-gray-fill:#F1EFE8; --d-gray-stroke:#5F5E5A; --d-gray-title:#444441; --d-gray-sub:#5F5E5A;
    --d-teal-fill:#E1F5EE; --d-teal-stroke:#0F6E56; --d-teal-title:#085041; --d-teal-sub:#0F6E56;
    --d-pink-fill:#FBEAF0; --d-pink-stroke:#993556; --d-pink-title:#72243E; --d-pink-sub:#993556;
    --d-coral-fill:#FAECE7; --d-coral-stroke:#993C1D; --d-coral-title:#712B13; --d-coral-sub:#993C1D;
    --d-purple-fill:#EEEDFE; --d-purple-stroke:#534AB7; --d-purple-title:#3C3489;
    --d-arrow:#5F5E5A;
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --d-gray-fill:#444441; --d-gray-stroke:#B4B2A9; --d-gray-title:#D3D1C7; --d-gray-sub:#B4B2A9;
      --d-teal-fill:#085041; --d-teal-stroke:#5DCAA5; --d-teal-title:#9FE1CB; --d-teal-sub:#5DCAA5;
      --d-pink-fill:#72243E; --d-pink-stroke:#ED93B1; --d-pink-title:#F4C0D1; --d-pink-sub:#ED93B1;
      --d-coral-fill:#712B13; --d-coral-stroke:#F0997B; --d-coral-title:#F5C4B3; --d-coral-sub:#F0997B;
      --d-purple-fill:#26215C; --d-purple-stroke:#AFA9EC; --d-purple-title:#CECBF6;
      --d-arrow:#B4B2A9;
    }
  }
  svg { width: 100%; height: auto; display: block; font-family: inherit; }
  svg text { font-size: 14px; }
  svg .th { font-weight: 500; }
  svg .ts { font-size: 12px; }
  svg .arr { stroke: var(--d-arrow); stroke-width: 1.5; fill: none; }
  svg marker path { stroke: var(--d-arrow); }
  .c-gray rect { fill: var(--d-gray-fill); stroke: var(--d-gray-stroke); }
  .c-gray .th { fill: var(--d-gray-title); } .c-gray .ts { fill: var(--d-gray-sub); }
  .c-teal rect { fill: var(--d-teal-fill); stroke: var(--d-teal-stroke); }
  .c-teal .th { fill: var(--d-teal-title); } .c-teal .ts { fill: var(--d-teal-sub); }
  .c-pink rect { fill: var(--d-pink-fill); stroke: var(--d-pink-stroke); }
  .c-pink .th { fill: var(--d-pink-title); } .c-pink .ts { fill: var(--d-pink-sub); }
  .c-coral rect { fill: var(--d-coral-fill); stroke: var(--d-coral-stroke); }
  .c-coral .th { fill: var(--d-coral-title); } .c-coral .ts { fill: var(--d-coral-sub); }
  .c-purple rect { fill: var(--d-purple-fill); stroke: var(--d-purple-stroke); }
  .c-purple .th { fill: var(--d-purple-title); }
  .legend { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 0; padding: 0; list-style: none; }
  .legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; border: 1px solid; }
  figure { margin: 0; }
  figcaption { margin-top: 8px; }
  svg .arr.data { stroke-dasharray: 5 4; }
  .legend svg.ln { display: inline-block; width: 34px; height: 10px; margin-right: 6px; vertical-align: middle; }
  table.cmp { width: 100%; border-collapse: collapse; font-size: 13px; }
  table.cmp th, table.cmp td { text-align: left; vertical-align: top; padding: 8px 10px; border-bottom: 1px solid var(--line); }
  table.cmp thead th { color: var(--muted); font-weight: 600; }
  table.cmp tbody th { color: var(--muted); font-weight: 500; white-space: nowrap; }