:root {
        --accent-weak: #edf4ff;
        --ok: #0f766e;
      }

      html,
      body {
        margin: 0;
        background: transparent;
      }

      body {
        color: var(--ink);
        font-family: Pretendard, "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", "Segoe UI", sans-serif;
      }

      .diagram {
        max-width: 1080px;
        margin: 0 auto;
        padding: 16px;
      }

      .net-ch4-ch4-1-shell {
        display: grid;
        gap: 14px;
        border: 1px solid var(--border);
        border-radius:8px;
        background: var(--paper);
        padding: 16px;
      }

      .net-ch4-ch4-1-heading {
        display: grid;
        gap: 5px;
      }

      h1 {
        margin: 0;
        font-size:21px;
        line-height: 1.25;
        letter-spacing: 0;
      }

      .net-ch4-ch4-1-summary,
      p {
        margin: 0;
        font-size:14px;
        line-height: 1.55;
      }

      .net-ch4-ch4-1-summary {
        color: var(--muted);
      }

      .field-map,
      .sequence,
      .encap-stack,
      .signal-path {
        display: grid;
        gap: 10px;
      }

      .net-ch4-ch4-1-data-table {
        width: 100%;
        border: 1px solid var(--border);
        border-collapse: collapse;
        table-layout: fixed;
        background: var(--paper);
      }

      .net-ch4-ch4-1-data-table th,
      .net-ch4-ch4-1-data-table td {
        border: 1px solid var(--border);
        padding: 9px 10px;
        text-align: left;
        vertical-align: top;
        font-size:13px;
        line-height: 1.45;
        overflow-wrap: break-word;
        word-break: keep-all;
      }

      .net-ch4-ch4-1-data-table thead th {
        background: var(--track-tint);
        color: var(--muted);
        font-weight: 800;
      }

      .net-ch4-ch4-1-data-table tbody th {
        color: var(--accent);
        font-weight: 800;
      }

      .field-map {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        border: 1px solid var(--border);
        border-radius:8px;
        overflow: hidden;
        background: var(--paper);
      }

      .field-cell {
        display: grid;
        gap: 4px;
        min-width: 0;
        border-right: 1px solid var(--border);
        border-bottom: 1px solid var(--border);
        padding: 10px;
        background: var(--track-tint);
      }

      .field-cell b,
      .field-cell span,
      .field-cell small {
        min-width: 0;
        overflow-wrap: break-word;
        word-break: keep-all;
      }

      .field-cell b {
        font-size:14px;
      }

      .field-cell span {
        color: var(--accent);
        font-weight: 800;
      }

      .field-cell small {
        color: var(--muted);
        font-size:12px;
        line-height: 1.4;
      }

      .sequence {
        list-style: none;
        margin: 0;
        padding: 0;
        border: 1px solid var(--border);
        border-radius:8px;
        overflow: hidden;
      }

      .sequence li {
        display: grid;
        grid-template-columns: 42px minmax(0, 1fr);
        gap: 10px;
        align-items: start;
        min-width: 0;
        padding: 10px;
        background: var(--paper);
      }

      .sequence li + li {
        border-top: 1px solid var(--border);
      }

      .sequence b,
      .sequence strong {
        display: block;
        margin-bottom: 3px;
      }

      .sequence strong {
        color: var(--accent);
        font-size:13px;
      }

      .sequence div {
        min-width: 0;
      }

      .num {
        display: inline-grid;
        place-items: center;
        width: 30px;
        height: 26px;
        border: 1px solid var(--border);
        border-radius:6px;
        background: var(--paper);
        color: var(--accent);
      }

      .readout {
        border-top: 1px solid var(--border);
        padding-top: 8px;
        color: var(--muted);
        font-weight: 700;
      }

      .signal-path > .readout {
        grid-column: 1 / -1;
        margin: 0 12px 12px;
      }

      .encap-stack {
        border: 1px solid var(--border);
        border-radius:8px;
        padding: 12px;
      }

      .encap-row {
        display: grid;
        grid-template-columns: 72px minmax(0, 1fr) 76px;
        gap: 10px;
        align-items: center;
      }

      .encap-row b,
      .encap-row small {
        color: var(--muted);
        font-weight: 800;
      }

      .packet {
        display: grid;
        min-width: 0;
        border: 1px solid var(--border);
        border-radius:7px;
        overflow: hidden;
        background: var(--paper);
      }

      .packet span {
        min-width: 0;
        border-right: 1px solid var(--border);
        padding: 9px 8px;
        text-align: center;
        font-size:13px;
        font-weight: 800;
        overflow-wrap: break-word;
        word-break: keep-all;
      }

      .packet span:last-child {
        border-right: 0;
      }

      .app-data {
        grid-template-columns: 1fr;
      }

      .segment {
        grid-template-columns: 1fr 2.4fr;
      }

      .datagram {
        grid-template-columns: 0.9fr 1fr 2.2fr;
      }

      .frame {
        grid-template-columns: 1.25fr 0.9fr 0.9fr 1.55fr 0.55fr;
      }

      .packet span:first-child,
      .frame span:last-child {
        background: var(--accent-weak);
        color: #17345f;
      }

      .signal-path {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        border: 1px solid var(--border);
        border-radius:8px;
        overflow: hidden;
      }

      .signal-stage {
        display: grid;
        gap: 8px;
        align-content: start;
        min-width: 0;
        border-right: 1px solid var(--border);
        padding: 11px;
        background: var(--paper);
      }

      .signal-stage:last-of-type {
        border-right: 0;
      }

      .signal-stage b {
        color: var(--accent);
      }

      .bits {
        display: grid;
        grid-template-columns: repeat(8, 1fr);
        gap: 3px;
      }

      .bits span {
        display: grid;
        place-items: center;
        min-height: 28px;
        border: 1px solid var(--border);
        border-radius:5px;
        font-weight: 800;
      }

      .restored span {
        border-color: #99d2ca;
        color: var(--ok);
      }

      .wave {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        align-items: end;
        gap: 4px;
        min-height: 72px;
        padding: 8px;
        border: 1px solid var(--border);
        border-radius:7px;
        background: var(--track-tint);
      }

      .wave span {
        display: block;
        min-height: 16px;
        border: 1px solid #7aa5d8;
        border-radius:5px 5px 2px 2px;
        background: #dcecff;
      }

      .wave span:nth-child(1),
      .wave span:nth-child(4) {
        height: 56px;
      }

      .wave span:nth-child(2),
      .wave span:nth-child(6) {
        height: 24px;
      }

      .wave span:nth-child(3),
      .wave span:nth-child(7) {
        height: 44px;
      }

      .wave span:nth-child(5) {
        height: 34px;
      }

      dl {
        display: grid;
        gap: 8px;
        margin: 0;
      }

      dl div {
        border: 1px solid var(--border);
        border-radius:7px;
        padding: 8px;
        background: var(--track-tint);
      }

      dt {
        color: var(--ok);
        font-weight: 800;
      }

      dd {
        margin: 3px 0 0;
        color: var(--muted);
        font-size:13px;
        line-height: 1.4;
      }

      code {
        font-family:
          ui-monospace,
          SFMono-Regular,
          Consolas,
          "Liberation Mono",
          monospace;
        font-size: 0.92em;
      }

      html[data-diagram-theme="dark"] {
        --accent-weak: rgba(138, 180, 255, 0.16);
        --ok: #5eead4;
      }

      html[data-diagram-theme="dark"] .packet span:first-child,
      html[data-diagram-theme="dark"] .frame span:last-child {
        color: #dbeafe;
      }

      @media (max-width: 640px) {
        .diagram {
          padding: 12px;
        }

        .net-ch4-ch4-1-shell {
          padding: 12px;
          gap: 12px;
        }

        h1 {
          font-size:18px;
        }

        .net-ch4-ch4-1-summary,
        p {
          font-size:13px;
        }

        .field-map,
        .encap-stack,
        .signal-path {
          grid-template-columns: 1fr;
        }

        .net-ch4-ch4-1-data-table,
        .net-ch4-ch4-1-data-table thead,
        .net-ch4-ch4-1-data-table tbody,
        .net-ch4-ch4-1-data-table tr,
        .net-ch4-ch4-1-data-table th,
        .net-ch4-ch4-1-data-table td {
          display: block;
          width: 100%;
        }

        .net-ch4-ch4-1-data-table thead {
          display: none;
        }

        .net-ch4-ch4-1-data-table tr {
          border-bottom: 1px solid var(--border);
        }

        .net-ch4-ch4-1-data-table tr:last-child {
          border-bottom: 0;
        }

        .net-ch4-ch4-1-data-table th,
        .net-ch4-ch4-1-data-table td {
          border: 0;
          display: grid;
          grid-template-columns: 92px minmax(0, 1fr);
          gap: 8px;
          padding: 8px 10px;
        }

        .net-ch4-ch4-1-data-table th::before,
        .net-ch4-ch4-1-data-table td::before {
          content: attr(data-label);
          color: var(--muted);
          font-weight: 800;
        }

        .encap-row {
          grid-template-columns: 1fr;
          gap: 5px;
          border-bottom: 1px solid var(--border);
          padding-bottom: 10px;
        }

        .encap-row:last-of-type {
          border-bottom: 0;
          padding-bottom: 0;
        }

        .packet,
        .segment,
        .datagram,
        .frame {
          grid-template-columns: 1fr;
        }

        .packet span {
          border-right: 0;
          border-bottom: 1px solid var(--border);
        }

        .packet span:last-child {
          border-bottom: 0;
        }

        .signal-stage {
          border-right: 0;
          border-bottom: 1px solid var(--border);
        }

        .signal-stage:last-of-type {
          border-bottom: 0;
        }
      }