:root {
  --md-text-font: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --md-code-font: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --md-primary-fg-color: #065f46;
  --md-primary-fg-color--light: #047857;
  --md-primary-fg-color--dark: #064e3b;
  --md-accent-fg-color: #047857;
}
[data-md-color-scheme="default"] {
  --md-default-bg-color: #fcfcfa;
  --md-code-bg-color: #f0f3f1;
}
[data-md-color-scheme="slate"] {
  --md-default-bg-color: #111b1b;
  --md-accent-fg-color: #6ee7b7;
  --md-typeset-a-color: #6ee7b7;
}
.md-header { box-shadow: none; }
.md-banner { background: #162a24; font-size: .65rem; }
.md-banner a { color: #a7f3d0; margin-left: .5rem; }
.md-tabs { border-bottom: 1px solid #ffffff20; }
.md-typeset { font-size: .8rem; line-height: 1.7; }
.md-typeset h1, .md-typeset h2 { font-weight: 650; letter-spacing: -.03em; }
.md-typeset h1 { color: var(--md-default-fg-color); }
.md-typeset h2 { margin-top: 2rem; }
.md-typeset a { text-underline-offset: .2em; }
.md-typeset a:focus-visible { outline: 2px solid var(--md-accent-fg-color); outline-offset: 4px; }
.md-typeset .md-button { border-radius: .35rem; font-size: .72rem; }
.ip-hero { padding: 2.5rem 0 1.7rem; max-width: 48rem; }
.ip-eyebrow { text-transform: uppercase; letter-spacing: .15em; font-size: .6rem; font-weight: 750; color: var(--md-accent-fg-color); }
.md-typeset .ip-hero h1 { font-size: clamp(2rem, 4.8vw, 3.5rem); line-height: 1.08; margin: .7rem 0 1rem; max-width: 16ch; }
.ip-hero > p:not(.ip-eyebrow) { max-width: 36rem; font-size: 1rem; }
.ip-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.3rem; }
.ip-facts { display: flex; flex-wrap: wrap; gap: .6rem 1.8rem; padding: 1rem 0; margin-bottom: 1rem; border-block: 1px solid var(--md-default-fg-color--lightest); font-size: .65rem; }
.ip-diagram { max-width: 100%; overflow-x: auto; margin: 1.4rem 0; border: 1px solid var(--md-default-fg-color--lightest); border-radius: .6rem; background: #f0f5f2; }
.ip-diagram:focus-visible { outline: 2px solid var(--md-accent-fg-color); outline-offset: 3px; }
.ip-diagram p { margin: 0; }
.md-typeset .ip-diagram img { display: block; width: 100%; min-width: 880px; max-width: none; }
.ip-flow { display: grid; grid-template-columns: 1fr auto 1.25fr auto 1fr; gap: .75rem; align-items: center; margin: 1.2rem 0; padding: 1.4rem; background: var(--md-code-bg-color); border: 1px solid var(--md-default-fg-color--lightest); border-radius: .6rem; }
.ip-flow div { padding: .8rem; border: 1px solid var(--md-default-fg-color--lightest); border-radius: .35rem; background: var(--md-default-bg-color); }
.ip-flow b, .ip-flow small { display: block; }
.ip-flow small { margin-top: .3rem; color: var(--md-default-fg-color); font-size: .65rem; }
.ip-flow .ip-gateway { border-color: var(--md-accent-fg-color); }
.ip-arrow { color: var(--md-accent-fg-color); font-size: 1.2rem; }
.md-typeset .grid.cards > ul > li { border-radius: .5rem; padding: 1.2rem; }
.md-typeset .grid.cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.md-typeset .grid.cards > ul > li:hover { box-shadow: none; border-color: var(--md-accent-fg-color); }
.md-typeset table:not([class]) { font-size: .7rem; }
.md-typeset code { border-radius: .2rem; }
html[lang="ko"] .md-typeset { word-break: keep-all; overflow-wrap: anywhere; }
html[lang="ko"] .md-typeset pre { word-break: normal; overflow-wrap: normal; }
.ip-actions > p { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0; }
.md-footer { margin-top: 2rem; }
@media (max-width: 600px) {
  .ip-hero { padding-top: 1rem; }
  .ip-flow { grid-template-columns: 1fr; text-align: center; padding: 1rem; }
  .ip-arrow { transform: rotate(90deg); }
  .md-banner a { display: block; margin-left: 0; }
  .md-typeset .grid.cards { grid-template-columns: 1fr; }
}

.ip-performance-controls { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; margin: 1rem 0 .5rem; }
.ip-performance-controls label { font-weight: 650; }
.ip-performance-controls input { min-width: 0; width: 16rem; max-width: 100%; padding: .55rem .65rem; border: 1px solid var(--md-default-fg-color--light); border-radius: .3rem; background: var(--md-default-bg-color); color: var(--md-default-fg-color); font: inherit; }
.ip-performance-controls output { font-size: .7rem; }
.ip-performance-table tr[hidden] { display: none; }
.ip-performance-table td:first-child { min-width: 10rem; font-weight: 600; }
.ip-performance-table :focus-visible { outline: 2px solid var(--md-accent-fg-color); outline-offset: 3px; }