* { box-sizing: border-box; }
      .diagram,
      .diagram * {
        max-width: 100%;
      }
      html,
      body {
        margin: 0;
        padding: 0;
        overflow: hidden;
        background: transparent;
      }
      body {
        color: var(--ink);
        font-family: Pretendard, "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", "Segoe UI", sans-serif;
      }
      .diagram {
        width: 100%;
        max-width: 920px;
        margin: 0 auto;
        border: 1px solid var(--line);
        border-radius:8px;
        overflow: hidden;
        background: var(--paper);
        contain: layout paint;
      }
      .next-ch9-ch9-1-root {
        padding: 16px;
        overflow-wrap: anywhere;
      }
      h1 {
        margin: 10px 0 8px;
        color: var(--ink);
        font-size:24px;
        line-height: 1.25;
        letter-spacing: 0;
      }
      p {
        margin: 0;
        color: var(--muted);
        font-size:14px;
        line-height: 1.65;
      }
      .next-ch9-ch9-1-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 8px;
        margin-top: 14px;
      }
      .next-ch9-ch9-1-card {
        min-width: 0;
        border: 1px solid var(--line);
        border-radius:8px;
        padding: 10px;
        background: var(--panel);
      }
      .next-ch9-ch9-1-card b {
        display: block;
        margin-bottom: 6px;
        color: var(--accent);
        font-size:12px;
        line-height: 1.35;
      }
      .next-ch9-ch9-1-card strong {
        display: block;
        margin-bottom: 4px;
        color: var(--ink);
        font-size:15px;
        line-height: 1.35;
      }
      .next-ch9-ch9-1-card span {
        display: block;
        color: var(--muted);
        font-size:12px;
        line-height: 1.5;
      }
      .next-ch9-ch9-1-matrix {
        margin-top: 10px;
        overflow: hidden;
        border: 1px solid var(--line);
        border-radius:8px;
      }
      .next-ch9-ch9-1-row {
        display: grid;
        grid-template-columns: 120px 1fr 1fr;
      }
      .next-ch9-ch9-1-row > div {
        min-width: 0;
        padding: 9px 10px;
        border-top: 1px solid var(--line);
        border-left: 1px solid var(--line);
        color: var(--muted);
        font-size:13px;
        line-height: 1.5;
      }
      .next-ch9-ch9-1-row > div:first-child {
        border-left: 0;
        color: var(--accent);
        font-weight: 800;
      }
      .next-ch9-ch9-1-head > div {
        border-top: 0;
        background: var(--head);
        color: var(--ink);
        font-weight: 800;
      }
      .next-ch9-ch9-1-note {
        margin-top: 10px;
        border: 1px solid var(--line);
        border-radius:8px;
        padding: 10px 12px;
        background: var(--panel);
        color: var(--muted);
        font-size:13px;
        line-height: 1.6;
      }
      .next-ch9-ch9-1-note b {
        color: var(--accent);
      }
      @media (max-width: 640px) {
        .next-ch9-ch9-1-root { padding: 13px; }
        h1 { font-size:21px; line-height: 1.28; }
        p { font-size:13px; line-height: 1.6; }
        .next-ch9-ch9-1-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
        .next-ch9-ch9-1-card { padding: 9px; }
        .next-ch9-ch9-1-row { grid-template-columns: 82px 1fr 1fr; }
        .next-ch9-ch9-1-row > div { padding: 8px 7px; font-size:12px; line-height: 1.45; }
      }
      @media (max-width: 360px) {
        .next-ch9-ch9-1-root { padding: 10px; }
        h1 { font-size:19px; }
        .next-ch9-ch9-1-grid { grid-template-columns: 1fr; }
        .next-ch9-ch9-1-row { grid-template-columns: 72px 1fr 1fr; }
        .next-ch9-ch9-1-row > div { padding: 7px 4px; font-size:12px; }
      }

/* codex-next-ch6-ch9-mobile-layout-guard */
@media (max-width: 560px) {
  .diagram :where(
    [class*="__states"], [class*="-states"],
    [class*="__state"], [class*="-state"],
    [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*="__track"], [class*="-track"],
    [class*="__lanes"], [class*="-lanes"],
    [class*="__side"], [class*="-side"],
    [class*="__side-list"], [class*="-side-list"],
    [class*="__stage"], [class*="-stage"],
    [class*="__map"], [class*="-map"],
    [class*="__board"], [class*="-board"],
    [class*="__pipeline"], [class*="-pipeline"],
    [class*="__swimlane"], [class*="-swimlane"],
    [class*="__rule-board"], [class*="-rule-board"],
    [class*="__layer"], [class*="-layer"],
    [class*="__sequence"], [class*="-sequence"],
    [class*="__nodes"], [class*="-nodes"],
    [class*="__chain"], [class*="-chain"],
    [class*="__files"], [class*="-files"],
    [data-layout="grid"]
  ) {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-auto-flow: row !important;
  }

  .diagram :where(
    [class*="__arrow"], [class*="-arrow"],
    [class*="__connector"], [class*="-connector"]
  ) {
    position: static !important;
    inset: auto !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    transform: none !important;
  }

  .diagram :where(
    [class*="__badge"], [class*="-badge"],
    [class*="__tag"], [class*="-tag"],
    [class*="__chip"], [class*="-chip"],
    [class*="__pill"], [class*="-pill"],
    [class*="__label"], [class*="-label"],
    [class*="__key"], [class*="-key"]
  ) {
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: keep-all !important;
  }

  .diagram :where(pre, code, kbd, [class*="__code"], [class*="-code"]) {
    white-space: pre-wrap !important;
    overflow-wrap: anywhere !important;
  }
}
/* /codex-next-ch6-ch9-mobile-layout-guard */