/* ══════════════════════════════════════════════════════════════════
   KiT 브랜드 (primary #0066FF) — 색은 KiT, 레이아웃·질감은 Logto 문서 참고
   (표면색 상단바 + 로고 칩 + 라운드 검색, 상단 텍스트 메뉴, 사이드바
    아이콘·라운드 필, 은은한 그라데이션)
   ══════════════════════════════════════════════════════════════════ */

/* ── 브랜드 토큰 ──
   색 값 상당수는 CMS [테마 색상](theme-colors.yml → theme-colors.css)이 뒤에서 덮어쓴다.
   여기 값은 생성 파일이 없을 때의 기본값. 필/그라데이션은 포인트 색에서 자동 파생(color-mix). */
:root {
  --md-primary-fg-color: #0066FF;
  --md-primary-fg-color--light: #2A7EFD;
  --md-primary-fg-color--dark: #005AE2;
  --md-accent-fg-color: #005AE2;
  --kit-surface-border: rgba(0, 20, 60, 0.10);
  --kit-pill-hover: color-mix(in srgb, var(--md-primary-fg-color) 6%, transparent);
  --kit-pill-active: color-mix(in srgb, var(--md-primary-fg-color) 10%, transparent);
  --kit-grad: color-mix(in srgb, var(--md-primary-fg-color) 12%, transparent);
  /* 검색창 아이콘·placeholder — 라이트 모드는 흰 헤더 위라 진하게 */
  --kit-search-fg: rgba(0, 0, 0, 0.62);
  --kit-search-placeholder: rgba(0, 0, 0, 0.48);
}
[data-md-color-scheme="slate"] {
  --md-primary-fg-color: #2A7EFD;
  --md-accent-fg-color: #77AEFF;
  --md-default-bg-color: #16181d;
  --kit-surface-border: rgba(255, 255, 255, 0.09);
  --kit-pill-hover: color-mix(in srgb, var(--md-accent-fg-color) 8%, transparent);
  --kit-pill-active: color-mix(in srgb, var(--md-accent-fg-color) 14%, transparent);
  --kit-grad: color-mix(in srgb, var(--md-accent-fg-color) 14%, transparent);
  /* 다크 모드는 기존 톤 유지 */
  --kit-search-fg: var(--md-default-fg-color--light);
  --kit-search-placeholder: var(--md-default-fg-color--light);
}

/* ── 상단바: 표면색 + 하단 보더 (Logto 스타일) ── */
.md-header {
  background-color: var(--md-default-bg-color);
  color: var(--md-default-fg-color);
  border-bottom: 1px solid var(--kit-surface-border);
  box-shadow: none;
}
.md-header--shadow { box-shadow: 0 1px 8px rgba(0, 0, 0, 0.06); }
.md-header__title { color: var(--md-default-fg-color); font-weight: 700; }
.md-header__button { color: var(--md-default-fg-color--light); }
.md-header__button:hover { color: var(--md-primary-fg-color); }

/* 로고: 흰 K를 파란 라운드 칩 위에 (Logto 로고 박스처럼, 브랜드 유지) */
.md-header__button.md-logo {
  background: var(--md-primary-fg-color);
  border-radius: 9px;
  padding: 5px;
  margin: 0.2rem 0.4rem 0.2rem 0.2rem;
}
.md-header__button.md-logo img { width: 1.1rem; height: 1.1rem; }

/* 검색: 라운드 필 + 보더 */
.md-search__form {
  background-color: var(--kit-pill-hover);
  border: 1px solid var(--kit-surface-border);
  border-radius: 10px;
}
.md-search__form:hover { background-color: var(--kit-pill-active); }
.md-search__input { color: var(--md-default-fg-color); }
.md-search__input::placeholder,
.md-search__icon { color: var(--md-default-fg-color--light); }
/* ⚠️ 데스크톱(≥60em)에서 Material은 헤더가 '컬러 배경'이라 가정해 돋보기 아이콘·placeholder를
   --md-primary-bg-color(흰색)로 칠한다. 우리 헤더는 흰 배경이라 라이트 모드에서 흰색이 되어 안 보인다.
   → 같은 미디어쿼리 안에서 모드별 톤으로 덮어쓴다 (라이트는 더 진하게, 다크는 기존 톤 유지). */
@media screen and (min-width: 60em) {
  .md-search__input + .md-search__icon { color: var(--kit-search-fg); }
  .md-search__input::placeholder { color: var(--kit-search-placeholder); }
}
[data-md-toggle="search"]:checked ~ .md-header .md-search__form {
  background-color: var(--md-default-bg-color);
  border-color: var(--md-primary-fg-color);
}

/* ── 상단 텍스트 메뉴(탭): 표면 이어붙이고 활성=파란 밑줄 ── */
.md-tabs {
  background-color: var(--md-default-bg-color);
  color: var(--md-default-fg-color--light);
  border-bottom: 1px solid var(--kit-surface-border);
}
.md-tabs__link { opacity: 1; color: var(--md-default-fg-color--light); font-size: 0.72rem; }
.md-tabs__link:hover { color: var(--md-primary-fg-color); }
.md-tabs__item--active .md-tabs__link,
.md-tabs__link--active {
  color: var(--md-primary-fg-color);
  font-weight: 700;
  box-shadow: inset 0 -2px 0 var(--md-primary-fg-color);
}

/* ── 본문 배경: 좌상단 은은한 블루 그라데이션 (Logto 배경 질감) ── */
.md-main {
  background:
    radial-gradient(55rem 26rem at 12% -6%, var(--kit-grad), transparent 62%),
    radial-gradient(40rem 20rem at 95% -10%, var(--kit-grad), transparent 55%);
}

/* ── 좌측 사이드바: 라운드 필 + 아이콘 ── */
.md-nav--primary .md-nav__link {
  border-radius: 8px;
  padding: 0.28rem 0.5rem;
  margin: 0.08rem 0;
}
.md-nav--primary .md-nav__link:hover { background: var(--kit-pill-hover); color: var(--md-primary-fg-color); }
.md-nav--primary .md-nav__item .md-nav__link--active,
.md-nav--primary .md-nav__link--active {
  background: var(--kit-pill-active);
  color: var(--md-primary-fg-color);
  font-weight: 700;
}

/* ── 사이드바 = 선택된 탭의 하위 그룹만.
   GNB 4탭(Docs / API Reference / Resources / Support) 구조에서는 Material의 기본 동작
   (.md-nav--lifted가 활성 탭 외의 트리를 숨김)이 그대로 정답이라, 예전의 '전체 트리 복원'
   규칙을 제거했다. 탭이 곧 최상위 구분이므로 사이드바에 다른 탭 트리를 함께 두면 중복이다.
   ⚠️ 접기 화살표는 Material 기본 규칙(.md-nav__icon:after 90° 회전, ▸→▾)을 그대로 쓴다.
   .md-nav__icon(span)을 추가로 회전시키면 :after 회전과 합쳐져 180°(◂)가 되므로 금지. ── */
@media screen and (min-width: 76.25em) {
  /* 그룹(Get started·Authentication·Guides) 하위 항목 들여쓰기 */
  .md-nav--lifted .md-nav__item--nested > .md-nav > .md-nav__list { padding-left: 1.3rem; }
}

/* ── 좌측 정렬 (Logto 레이아웃): 헤더·본문 그리드 폭 제한 해제 → 로고·사이드바가 좌측 끝에 붙는다 ── */
:root { --kit-header-h: 3rem; }
.md-header__inner { max-width: none; padding: 0 0.8rem; min-height: var(--kit-header-h); }
.md-main__inner.md-grid { max-width: none; margin: 0; }
.md-sidebar--primary { margin-left: 0.2rem; }
/* 본문 칼럼: 중앙 정렬 (좁은 화면에서는 좌우 0.8rem 여백 확보) */
.md-content__inner { width: calc(100% - 1.6rem); max-width: 50rem; margin: 0 auto 1.2rem; }

/* ── 본문 중앙 + 목차 인접 (Logto 레이아웃): 남는 공간을 좌우 auto 마진이 균등 흡수해
   [사이드바 | 여백 | 본문 | 목차 | 여백] 배치가 된다 — 본문이 화면 중앙, 목차는 본문 바로 옆 ── */
@media screen and (min-width: 76.25em) {
  .md-content { flex: 0 1 53rem; min-width: 0; margin-left: auto; }
  .md-sidebar--secondary { margin-right: auto; }
  /* 좌측 사이드바 경계선 (헤더 아래 전체 높이) */
  .md-sidebar--primary { border-right: 1px solid var(--kit-surface-border); }
}

/* ── 사이드바 전체 높이 사용 (Logto): 헤더 아래 = 사이드바 영역.
   Material JS가 옛 2줄 헤더 기준으로 계산해 인라인으로 박는 높이를 무시한다. ── */
@media screen and (min-width: 76.25em) {
  .md-sidebar--primary,
  .md-sidebar--secondary {
    top: var(--kit-header-h);
    height: calc(100vh - var(--kit-header-h));
  }
  .md-sidebar--primary .md-sidebar__scrollwrap,
  .md-sidebar--secondary .md-sidebar__scrollwrap {
    height: 100% !important; /* JS 인라인 높이 오버라이드 */
    max-height: none;
  }
  .md-sidebar__inner { padding-bottom: 2rem; } /* 마지막 항목 여유 */
}

/* ── 한 줄 헤더: extra.js가 .md-tabs를 헤더 안(로고·타이틀 오른쪽)으로 이동시킨다 ── */
.md-header__title { flex: 0 0 auto; margin-left: 0.2rem; }
.md-header__title .md-header__topic { position: static; transform: none; }
.md-header__title .md-header__topic + .md-header__topic { display: none; }
.md-header .md-tabs {
  flex: 1 1 auto;
  border-bottom: none;
  background: transparent;
  margin-left: 0.325rem; /* 타이틀→첫 항목 간격 = 항목 간 간격과 동일하도록 실측 보정 (타이틀 내부 여백 9px 상쇄) */
  width: auto;
  overflow-x: auto;
}
.md-header .md-tabs .md-grid { margin: 0; max-width: none; } /* 내부 래퍼의 중앙 정렬 해제 — 로고 옆에 바로 붙인다 */
.md-header .md-tabs .md-tabs__list { margin: 0; display: flex; }
.md-header .md-tabs .md-tabs__item { height: auto; padding: 0 0.7rem; }
.md-header .md-tabs .md-tabs__link { margin-top: 0; padding: 1em 0; }

/* ── 최상위 항목(홈 + 섹션 7) 아이콘 — Logto처럼 top-level에만.
   nth-child 순서는 mkdocs.yml nav 순서와 1:1 (변경 시 함께 수정). currentColor 마스크라 테마 색 추종 ── */
.md-nav--primary > .md-nav__list > .md-nav__item > .md-nav__link { font-weight: 600; }
.md-nav--primary > .md-nav__list > .md-nav__item > .md-nav__link::before {
  content: "";
  display: inline-block;
  width: 0.85rem;
  height: 0.85rem;
  margin-right: 0.5rem;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask: var(--kit-icon) no-repeat center / contain;
  mask: var(--kit-icon) no-repeat center / contain;
}
.md-nav--primary > .md-nav__list > .md-nav__item:nth-child(1) > .md-nav__link { --kit-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 10.5L12 3l9 7.5'/><path d='M5 9.5V21h5v-6h4v6h5V9.5'/></svg>"); }
.md-nav--primary > .md-nav__list > .md-nav__item:nth-child(2) > .md-nav__link { --kit-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 21v-18'/><path d='M5 4h11l-2.5 3.5L16 11H5'/></svg>"); }
.md-nav--primary > .md-nav__list > .md-nav__item:nth-child(3) > .md-nav__link { --kit-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='7.5' cy='15.5' r='3.5'/><path d='M10.5 12.5L21 2'/><path d='M16 7l3 3'/></svg>"); }
.md-nav--primary > .md-nav__list > .md-nav__item:nth-child(4) > .md-nav__link { --kit-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20V3H6.5A2.5 2.5 0 0 0 4 5.5v14z'/><path d='M4 19.5A2.5 2.5 0 0 0 6.5 22H20v-5'/></svg>"); }
.md-nav--primary > .md-nav__list > .md-nav__item:nth-child(5) > .md-nav__link { --kit-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M8 8l-4 4 4 4'/><path d='M16 8l4 4-4 4'/></svg>"); }
.md-nav--primary > .md-nav__list > .md-nav__item:nth-child(6) > .md-nav__link { --kit-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 8l-9-5-9 5 9 5 9-5z'/><path d='M3 8v8l9 5 9-5V8'/><path d='M12 13v8'/></svg>"); }
.md-nav--primary > .md-nav__list > .md-nav__item:nth-child(7) > .md-nav__link { --kit-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M9.3 9a2.7 2.7 0 0 1 5.4.5c0 1.8-2.7 2.2-2.7 4'/><path d='M12 17h.01'/></svg>"); }
.md-nav--primary > .md-nav__list > .md-nav__item:nth-child(8) > .md-nav__link { --kit-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3l8 3v6c0 5-3.4 8-8 9-4.6-1-8-4-8-9V6l8-3z'/></svg>"); }

/* 하위 페이지 링크는 아이콘 없이 들여쓰기·차분한 톤 (Logto 하위 항목 스타일) */
.md-nav--primary .md-nav .md-nav__link { font-weight: 400; }

/* 1뎁스(최상위) 항목: 어떤 상태에서도 배경·그림자 없음 — 글자 색만 변경 (Logto 절제).
   Material 기본·본 파일의 pill 규칙보다 우선하도록 !important로 고정.
   배경 필은 실제 활성 "페이지"(하위 링크)에만 남긴다. */
.md-nav--primary > .md-nav__list > .md-nav__item > .md-nav__link {
  background: none !important;
  box-shadow: none !important;
}
.md-nav--primary > .md-nav__list > .md-nav__item > .md-nav__link:hover,
.md-nav--primary > .md-nav__list > .md-nav__item > .md-nav__link--active,
.md-nav--primary > .md-nav__list > .md-nav__item--active > .md-nav__link {
  color: var(--md-primary-fg-color);
}

/* 사이드바 섹션 제목(볼드 라벨) 톤 */
.md-nav__title { color: var(--md-default-fg-color--light); }

/* ── 본문 소소한 정돈 ── */
.md-typeset h1 { color: var(--md-primary-fg-color); font-weight: 800; letter-spacing: -0.02em; }

/* ── 공지 목록(blog excerpt) 아이템: 제목·날짜·구분·요약의 배치·크기·두께를
   다른 글과 통일 (스타일은 전역 규칙 — CMS는 텍스트만 편집). ── */
.md-post--excerpt { padding: 1.1rem 0; border-bottom: 1px solid var(--kit-surface-border); }
.md-post--excerpt:first-of-type { padding-top: 0.3rem; }

/* 메타(날짜 · 구분): 제목 위 작은 캡션 */
.md-post--excerpt .md-post__meta { margin-bottom: 0.3rem; }
.md-post--excerpt .md-post__meta .md-meta__list { font-size: 0.68rem; color: var(--md-default-fg-color--light); }
/* 구분(카테고리)을 작은 브랜드 칩으로 */
.md-post--excerpt .md-post__meta .md-meta__link {
  display: inline-block;
  padding: 0.02rem 0.5rem;
  border-radius: 1rem;
  background: var(--kit-pill-active);
  color: var(--md-primary-fg-color);
  font-weight: 600;
  text-decoration: none;
}

/* 제목 — 브랜드 블루·볼드 (기본은 굵기 300·흐린 회색) */
.md-post--excerpt .md-post__content > h1,
.md-post--excerpt .md-post__content > h2,
.md-post--excerpt .md-post__content > h3 {
  font-size: 1.2rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em;
  line-height: 1.35;
  margin: 0 0 0.35rem !important;
}
.md-post--excerpt .md-post__content > h1, .md-post--excerpt .md-post__content > h1 > a,
.md-post--excerpt .md-post__content > h2, .md-post--excerpt .md-post__content > h2 > a,
.md-post--excerpt .md-post__content > h3, .md-post--excerpt .md-post__content > h3 > a {
  color: var(--md-primary-fg-color) !important;
}
.md-post--excerpt .md-post__content > h1 > a:hover,
.md-post--excerpt .md-post__content > h2 > a:hover,
.md-post--excerpt .md-post__content > h3 > a:hover {
  color: var(--md-accent-fg-color) !important;
  text-decoration: underline;
}

/* 요약 — 보조 톤·2줄 클램프 */
.md-post--excerpt .md-post__content > p {
  font-size: 0.8rem;
  color: var(--md-default-fg-color--light);
  line-height: 1.6;
  margin: 0 0 0.5rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 계속 읽기 — 작은 브랜드 링크 */
.md-post--excerpt .md-post__action { margin: 0; }
.md-post--excerpt .md-post__action a { font-size: 0.72rem; font-weight: 600; }
.md-typeset table:not([class]) th { background-color: var(--kit-pill-hover); }
.md-typeset pre > code { border-radius: 10px; }
.kit-badge { display: inline-block; background: var(--md-primary-fg-color); color: #fff; font-size: 0.7rem; font-weight: 700; padding: 0.15rem 0.6rem; border-radius: 1rem; vertical-align: middle; }

/* ── 안내 박스(admonition) 색 — CMS [테마 색상]에서 편집 가능 ─────────────
   question: Material 기본(#64dd17, 형광 라임)이 너무 밝아 채도 낮춘 그린이 기본값.
   note/info: Material 기본값과 동일하게 시작 — CMS에서 바꾸면 여기 변수로 반영된다.
   배경은 본색에서 자동 파생(color-mix)이라 CMS에선 색 하나만 고르면 된다. */
:root {
  --kit-question-color: #2f9a5f;
  --kit-note-color: #448aff;
  --kit-info-color: #00b8d4;
  --kit-admonition-bg-mix: 8%;
}
[data-md-color-scheme="slate"] {
  --kit-question-color: #55a97c;
  --kit-admonition-bg-mix: 10%;
}
.md-typeset .admonition.question, .md-typeset details.question,
.md-typeset .admonition.help, .md-typeset details.help,
.md-typeset .admonition.faq, .md-typeset details.faq {
  border-color: var(--kit-question-color);
}
.md-typeset .question > .admonition-title, .md-typeset .question > summary,
.md-typeset .help > .admonition-title, .md-typeset .help > summary,
.md-typeset .faq > .admonition-title, .md-typeset .faq > summary {
  background-color: color-mix(in srgb, var(--kit-question-color) var(--kit-admonition-bg-mix), transparent);
}
.md-typeset .question > .admonition-title::before, .md-typeset .question > summary::before,
.md-typeset .help > .admonition-title::before, .md-typeset .help > summary::before,
.md-typeset .faq > .admonition-title::before, .md-typeset .faq > summary::before {
  background-color: var(--kit-question-color);
}
.md-typeset details.question > summary::after,
.md-typeset details.help > summary::after,
.md-typeset details.faq > summary::after {
  background-color: var(--kit-question-color);
  color: var(--kit-question-color);
}
.md-typeset .admonition.note, .md-typeset details.note {
  border-color: var(--kit-note-color);
}
.md-typeset .note > .admonition-title, .md-typeset .note > summary {
  background-color: color-mix(in srgb, var(--kit-note-color) var(--kit-admonition-bg-mix), transparent);
}
.md-typeset .note > .admonition-title::before, .md-typeset .note > summary::before {
  background-color: var(--kit-note-color);
}
.md-typeset .admonition.info, .md-typeset details.info,
.md-typeset .admonition.todo, .md-typeset details.todo {
  border-color: var(--kit-info-color);
}
.md-typeset .info > .admonition-title, .md-typeset .info > summary,
.md-typeset .todo > .admonition-title, .md-typeset .todo > summary {
  background-color: color-mix(in srgb, var(--kit-info-color) var(--kit-admonition-bg-mix), transparent);
}
.md-typeset .info > .admonition-title::before, .md-typeset .info > summary::before,
.md-typeset .todo > .admonition-title::before, .md-typeset .todo > summary::before {
  background-color: var(--kit-info-color);
}

/* ── 본문 인라인 색 팔레트 — CMS 본문에서 **글자**{ .kit-point } 형태로 사용 (attr_list) ──
   서비스에서 쓰는 모든 색 계열을 이름으로 제공한다. 포인트·박스 계열은 테마 색상 변수를
   참조해 CMS [테마 색상]과 다크모드를 자동으로 따라가고, 경고 계열은 고정(모드별 가독 조정). */
.md-typeset .kit-point { color: var(--md-primary-fg-color); }
.md-typeset .kit-accent { color: var(--md-accent-fg-color); }
.md-typeset .kit-blue { color: var(--kit-note-color); }
.md-typeset .kit-cyan { color: var(--kit-info-color); }
.md-typeset .kit-green { color: var(--kit-question-color); }
.md-typeset .kit-ok { color: var(--kit-status-ok, #16a34a); }
.md-typeset .kit-yellow { color: #a16207; }
.md-typeset .kit-orange { color: #ea580c; }
.md-typeset .kit-red { color: #dc2626; }
.md-typeset .kit-muted { color: var(--md-default-fg-color--light); }
[data-md-color-scheme="slate"] .md-typeset .kit-yellow { color: #facc15; }
[data-md-color-scheme="slate"] .md-typeset .kit-orange { color: #fb923c; }
[data-md-color-scheme="slate"] .md-typeset .kit-red { color: #f87171; }

/* ── 서버 상태 위젯 (resources/status) ────────────────────────────────
   초록=정상 / 노랑=성능 저하 / 빨강=주요 장애·응답 없음 (업계 관례 색상) */
#kit-status {
  border: 1px solid var(--kit-surface-border, var(--md-default-fg-color--lightest));
  border-radius: 12px;
  padding: 1rem 1.2rem;
  margin: 1rem 0 1.5rem;
}
.kit-status__overall {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  font-weight: 700;
}
.kit-status__dot {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: var(--md-default-fg-color--lighter);
  flex: none;
}
/* 정상·성능 저하 색은 CMS [테마 색상]에서 편집 가능, 빨강(장애)은 경고 계열이라 고정 */
.kit-status__overall[data-state="ok"] .kit-status__dot {
  background: var(--kit-status-ok, #16a34a);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--kit-status-ok, #16a34a) 18%, transparent);
}
.kit-status__overall[data-state="degraded"] .kit-status__dot {
  background: var(--kit-status-degraded, #f59e0b);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--kit-status-degraded, #f59e0b) 18%, transparent);
}
.kit-status__overall[data-state="outage"] .kit-status__dot,
.kit-status__overall[data-state="down"] .kit-status__dot { background: #ef4444; box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.18); }
.md-typeset .kit-status__meta {
  margin: 0.7rem 0 0;
  font-size: 0.66rem;
  color: var(--md-default-fg-color--light);
}

/* ── Mermaid 다이어그램 다크모드 대비 보정 ─────────────────────────────
   Material 내장 Mermaid는 --md-mermaid-* 변수로 테마를 입힌다.
   slate(다크)에서 선·글자가 배경에 묻히지 않도록 대비를 끌어올린다. */
[data-md-color-scheme="slate"] {
  --md-mermaid-edge-color: #9db8e8;
  --md-mermaid-node-bg-color: rgba(76, 130, 247, 0.22);
  --md-mermaid-node-fg-color: #e8edf6;
  --md-mermaid-label-bg-color: transparent;
  --md-mermaid-label-fg-color: #e8edf6;
  --md-mermaid-sequence-actor-bg-color: rgba(76, 130, 247, 0.22);
  --md-mermaid-sequence-actor-fg-color: #e8edf6;
  --md-mermaid-sequence-actor-border-color: #4c82f7;
  --md-mermaid-sequence-actor-line-color: #5f6c88;
  --md-mermaid-sequence-actorman-bg-color: transparent;
  --md-mermaid-sequence-actorman-line-color: #9db8e8;
  --md-mermaid-sequence-message-fg-color: #dfe6f2;
  --md-mermaid-sequence-message-line-color: #9db8e8;
  --md-mermaid-sequence-number-bg-color: #0066ff;
  --md-mermaid-sequence-number-fg-color: #ffffff;
  --md-mermaid-sequence-label-bg-color: rgba(76, 130, 247, 0.28);
  --md-mermaid-sequence-label-fg-color: #e8edf6;
  --md-mermaid-sequence-loop-bg-color: transparent;
  --md-mermaid-sequence-loop-fg-color: #dfe6f2;
  --md-mermaid-sequence-loop-border-color: #5f6c88;
  --md-mermaid-sequence-note-bg-color: #2a3550;
  --md-mermaid-sequence-note-fg-color: #e8edf6;
  --md-mermaid-sequence-note-border-color: #5f6c88;
}