/* 개발 화면 전용 */
.kofa-dev-page { width: var(--kofa-layout-safe-width); margin-inline: auto; padding-block: calc(var(--kofa-space-base) * 2); }

/* 개발 목록 — 안내와 배포 정보 */
.kofa-dev-dashboard__header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 20px; }
.kofa-dev-dashboard__header h1 { margin: 0; font-size: 24px; line-height: 1.4; }
.kofa-dev-dashboard__header p { margin: 0; color: #626970; font-size: 14px; }
.kofa-dev-dashboard__deployment { margin-top: 20px; padding: 16px 20px; border: 1px solid #dbe0e5; border-radius: 8px; background: #f7f9fb; }
.kofa-dev-dashboard__deployment h2 { margin: 0 0 12px; font-size: 16px; }
.kofa-dev-dashboard__deployment dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 24px; margin: 0; }
@media (max-width: 1279px) {
  .kofa-dev-dashboard__deployment dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 599px) {
  .kofa-dev-dashboard__deployment dl { grid-template-columns: minmax(0, 1fr); }
}
.kofa-dev-dashboard__deployment dt { margin-bottom: 2px; color: #626970; font-size: 12px; }
.kofa-dev-dashboard__deployment dd { margin: 0; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.kofa-dev-dashboard__commit { grid-column: 1 / -1; padding-top: 10px; border-top: 1px solid #dbe0e5; }
.kofa-dev-dashboard__backend { margin-top: 12px; padding: 16px 20px; border: 1px solid #dbe0e5; border-radius: 8px; background: #f7f9fb; }
.kofa-dev-dashboard__backend h2 { margin: 0 0 12px; font-size: 16px; }
.kofa-dev-dashboard__backend-author { margin-left: 6px; color: #626970; font-size: 13px; font-weight: 400; }
.kofa-dev-dashboard__backend-notice { margin: -6px 0 12px; color: #626970; font-size: 13px; }
.kofa-dev-dashboard__backend-empty { margin: 0; color: #626970; font-size: 14px; }
.kofa-dev-dashboard__backend-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.kofa-dev-dashboard__backend-commit { display: grid; grid-template-columns: 72px 128px minmax(0, 1fr); gap: 12px; align-items: baseline; font-size: 14px; line-height: 1.5; }
@media (max-width: 599px) {
  .kofa-dev-dashboard__backend-commit { grid-template-columns: 72px minmax(0, 1fr); }
}
.kofa-dev-dashboard__backend-hash { color: #3d4349; font-size: 13px; }
.kofa-dev-dashboard__backend-time { color: #626970; font-size: 13px; }
.kofa-dev-dashboard__backend-subject { overflow-wrap: anywhere; }
@media (max-width: 599px) {
  .kofa-dev-dashboard__backend-subject { grid-column: 1 / -1; }
}
.kofa-dev-dashboard__backend-more { margin-top: 12px; }

.kofa-dev-links {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: var(--kofa-space-base);
  margin-top: var(--kofa-space-base);
}

.kofa-dev-links__title {
  margin: 0 0 0.5rem;
  font-size: 1rem;
}

.kofa-dev-links__list {
  display: grid;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.kofa-dev-links__url {
  color: GrayText;
  font-size: 0.875em;
}

.kofa-dev-links__notice {
  color: var(--kofa-color-text-03);
}

.kofa-dev-links__toc { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 20px; padding-bottom: 20px; border-bottom: 1px solid #dbe0e5; }
.kofa-dev-links__toc a { display: inline-block; padding: 8px 12px; border: 1px solid #dbe0e5; border-radius: 6px; background: #fff; color: #344353; font-size: 14px; line-height: 1.4; text-decoration: none; }
.kofa-dev-links__toc a:hover { background: #edf1f5; }
.kofa-dev-links__toc a:focus-visible { outline: var(--kofa-outline-focus-width) solid var(--kofa-color-focus-ring); outline-offset: var(--kofa-outline-focus-offset); }
.kofa-dev-links__toc .kofa-dev-links__primary { border-color: #344353; background: #344353; color: #fff; }
.kofa-dev-links__toc .kofa-dev-links__primary:hover { background: #243241; }
.kofa-dev-links__total { margin-left: auto; color: #626970; font-size: 13px; }
.kofa-dev-links__view { margin-top: 28px; scroll-margin-top: 200px; }
.kofa-dev-links__view-title { margin: 0; font-size: 20px; }

.kofa-dev-links__owner { margin-top: 12px; }
.kofa-dev-dashboard__categories { display: grid; gap: 12px; margin-top: 12px; }

.kofa-dev-links__count {
  color: var(--kofa-color-text-03);
  font-size: var(--kofa-typo-body-3-size);
  font-weight: var(--kofa-font-weight-regular);
}

.kofa-dev-links__tag {
  display: inline-block;
  margin-left: 4px;
  padding: 0 6px;
  border: 1px solid var(--kofa-color-divider-02);
  border-radius: var(--kofa-radius-4);
  color: var(--kofa-color-text-03);
  font-size: 12px;
  white-space: nowrap;
}

/* 데이터 연동 실행 상태(지금 서버가 읽은 provider 값). 진행 칩과 구분해 채움으로 그린다. */
.kofa-dev-links__run {
  display: inline-block;
  margin-left: 4px;
  padding: 0 6px;
  border-radius: var(--kofa-radius-4);
  font-size: 12px;
  white-space: nowrap;
}

.kofa-dev-links__run--mock {
  background: var(--kofa-color-amber-100);
  color: var(--kofa-color-text-01);
}

.kofa-dev-links__run--real {
  background: var(--kofa-color-success-700);
  color: var(--kofa-color-text-white);
}

.kofa-dev-links__run--none {
  background: var(--kofa-color-gray-100);
  color: var(--kofa-color-text-03);
}

/* 영문지원(page-inventory.tsv `영문지원` 열). 영문에서 열리는 화면은 영문 주소로 새 창 링크를 건다. */
.kofa-dev-links__english {
  display: inline-block;
  margin-left: 4px;
  padding: 0 6px;
  border-radius: var(--kofa-radius-4);
  font-size: 12px;
  white-space: nowrap;
  text-decoration: none;
}

.kofa-dev-links__english--both {
  background: var(--kofa-color-border-information);
  color: var(--kofa-color-text-white);
}

.kofa-dev-links__english--english-only {
  background: var(--kofa-color-border-primary);
  color: var(--kofa-color-text-white);
}

.kofa-dev-links__english--korean-only {
  background: var(--kofa-color-gray-100);
  color: var(--kofa-color-text-03);
}

.kofa-dev-links__providers { width: 100%; table-layout: fixed; border-collapse: collapse; border: 1px solid #dbe0e5; font-size: 13px; line-height: 1.5; }
.kofa-dev-links__providers th { padding: 10px 12px; border-bottom: 1px solid #bec8d2; background: #edf1f5; color: #344353; font-weight: 600; text-align: left; }
.kofa-dev-links__providers td { padding: 10px 12px; border-bottom: 1px solid #dbe0e5; text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.kofa-dev-links__providers th:nth-child(1) { width: 28%; }
.kofa-dev-links__providers th:nth-child(2) { width: 28%; }
.kofa-dev-links__providers th:nth-child(3) { width: 8%; }
.kofa-dev-links__providers tbody tr:nth-child(even) { background: #f7f9fb; }
.kofa-dev-links__providers code { font-size: 12px; }
@media (max-width: 599px) {
  .kofa-dev-links__providers th { padding: 8px 6px; font-size: 12px; }
  .kofa-dev-links__providers td { padding: 8px 6px; font-size: 12px; }
  .kofa-dev-links__providers th:nth-child(3) { width: 14%; }
}

/* 진행 단계 칩. 순서: 계약, 퍼블시작, 퍼블완료, 반응형, Mock, 실연동, 최종검수. 원천은 page-inventory.tsv. */
.kofa-dev-links__tag--contract {
  border-color: var(--kofa-color-gray-500);
  color: var(--kofa-color-text-01);
}

.kofa-dev-links__tag--publishing-started {
  border-style: dashed;
  border-color: var(--kofa-color-border-information);
  color: var(--kofa-color-text-information);
}

.kofa-dev-links__tag--publishing {
  border-color: var(--kofa-color-border-information);
  color: var(--kofa-color-text-information);
}

.kofa-dev-links__tag--responsive {
  border-color: var(--kofa-color-border-secondary-red);
  color: var(--kofa-color-text-secondary-red);
}

.kofa-dev-links__tag--mock {
  border-color: var(--kofa-color-border-secondary-amber);
  color: var(--kofa-color-text-secondary-amber);
}

.kofa-dev-links__tag--real {
  border-color: var(--kofa-color-border-success);
  color: var(--kofa-color-text-success);
}

.kofa-dev-links__tag--final-review {
  border-color: var(--kofa-color-border-primary);
  background: var(--kofa-color-border-primary);
  color: var(--kofa-color-text-white);
}

/* 개발용 컴포넌트 모음 페이지. 운영 배포 전 삭제한다. */
.kofa-dev-components {
  display: grid;
  gap: calc(var(--kofa-space-base) * 3);
}

.kofa-dev-components__section {
  display: grid;
  justify-items: start;
  gap: var(--kofa-space-base);
  padding-top: calc(var(--kofa-space-base) * 2);
  border-top: 1px solid var(--kofa-color-divider-02);
}

@media (max-width: 1279px) {
  .kofa-dev-components__section { min-width: 0; grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 1279px) {
  .kofa-dev-components__section > * { min-width: 0; max-width: 100%; }
}

.kofa-dev-components__section--static-page {
  justify-items: stretch;
}

.kofa-dev-components__title {
  margin: 0;
  font-size: var(--kofa-typo-headline-3-size);
}

.kofa-dev-components__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--kofa-space-base);
  align-items: flex-start;
}

.kofa-dev-components__code {
  max-width: 100%;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.kofa-dev-components__caption {
  margin: 0;
  color: var(--kofa-color-text-03);
  font-size: var(--kofa-typo-body-3-size);
}

.kofa-dev-components__image-placeholder-demo {
  width: min(100%, 480px);
  aspect-ratio: 16 / 9;
  border-radius: var(--kofa-radius-8);
}

.kofa-dev-components__table-cell-demo {
  display: grid;
  grid-template-columns: repeat(3, 120px);
  align-items: start;
  gap: 16px;
}

@media (max-width: 1279px) {
  .kofa-dev-components__table-cell-demo { width: min(100%, 392px); grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* 개발용 아이콘 모음 페이지. 운영 배포 전 삭제한다. */
.kofa-dev-icons-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--kofa-space-base);
  padding-bottom: calc(var(--kofa-space-base) * 1.5);
  border-bottom: 1px solid var(--kofa-color-divider-02);
}

.kofa-dev-icons-hero h1 {
  margin: 0;
  font-size: var(--kofa-typo-headline-5-size);
}

.kofa-dev-icons-hero strong {
  color: var(--kofa-color-text-03);
  font-size: var(--kofa-typo-body-4-size);
}

.kofa-dev-icons-preview {
  margin-top: calc(var(--kofa-space-base) * 2);
}

.kofa-dev-icons-preview h2 {
  margin: 0 0 var(--kofa-space-base);
  font-size: var(--kofa-typo-headline-4-size);
}

.kofa-dev-icons-preview__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.kofa-dev-icons-preview__sample {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--kofa-color-divider-02);
  border-radius: var(--kofa-radius-8);
}

.kofa-dev-icons-preview__sample img {
  display: block;
  max-width: 24px;
  max-height: 24px;
}

.kofa-dev-icons-group {
  margin-top: calc(var(--kofa-space-base) * 3);
}

.kofa-dev-icons-group__header {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: var(--kofa-space-base);
}

.kofa-dev-icons-group__header h2 {
  margin: 0;
  font-size: var(--kofa-typo-headline-4-size);
}

.kofa-dev-icons-group__header span {
  color: var(--kofa-color-text-03);
  font-size: var(--kofa-typo-body-3-size);
}

.kofa-dev-icons-group__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  gap: 8px;
}

.kofa-dev-icons-card {
  display: grid;
  justify-items: center;
  gap: 6px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--kofa-color-divider-02);
  border-radius: var(--kofa-radius-8);
  color: inherit;
  text-align: center;
  text-decoration: none;
}

.kofa-dev-icons-card__preview {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--kofa-radius-6);
  background: var(--kofa-color-gray-50);
}

.kofa-dev-icons-card__preview img {
  display: block;
  max-width: 40px;
  max-height: 40px;
}

.kofa-dev-icons-card strong {
  font-size: var(--kofa-typo-body-3-size);
  overflow-wrap: anywhere;
}

.kofa-dev-icons-card code {
  color: var(--kofa-color-text-03);
  font-size: 11px;
  overflow-wrap: anywhere;
}

/* 개발용 컴포넌트 모음 분류와 토큰 목록 */
.kofa-dev-components__toc {
  display: flex;
  flex-wrap: wrap;
  gap: var(--kofa-space-base);
  margin-bottom: calc(var(--kofa-space-base) * 2);
}

.kofa-dev-components__group {
  display: grid;
  gap: calc(var(--kofa-space-base) * 2);
}
@media (max-width: 1279px) {
  .kofa-dev-components__group { min-width: 0; grid-template-columns: minmax(0, 1fr); }
}

.kofa-dev-components__group-title {
  margin: 0;
  font-size: var(--kofa-typo-headline-5-size);
}

.kofa-dev-tokens {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: 8px;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.kofa-dev-tokens--typography {
  grid-template-columns: minmax(0, 1fr);
}

.kofa-dev-tokens__item {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--kofa-color-divider-02);
  border-radius: var(--kofa-radius-8);
}

.kofa-dev-tokens__item code {
  font-size: 12px;
  overflow-wrap: anywhere;
}

.kofa-dev-tokens__swatch {
  height: 32px;
  border: 1px solid var(--kofa-color-divider-02);
  border-radius: var(--kofa-radius-4);
}

.kofa-dev-tokens__radius {
  width: 48px;
  height: 32px;
  border: 1px solid var(--kofa-color-gray-500);
}

.kofa-dev-tokens__type {
  line-height: var(--kofa-line-height-base);
}

.kofa-dev-tokens__value {
  color: var(--kofa-color-text-03);
  font-size: 12px;
  overflow-wrap: anywhere;
}

/* 개발 — 페이지 진행상황 표 */
.kofa-dev-table { padding-block: 32px; }
.kofa-dev-table__header { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.kofa-dev-table__header h1 { margin: 0; font-size: 28px; }
.kofa-dev-table__description { margin-block: 16px 24px; color: #58585a; }
.kofa-dev-table__filters { display: flex; align-items: end; gap: 12px; flex-wrap: wrap; }
.kofa-dev-table__filters label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.kofa-dev-table__filters select { min-width: 140px; height: 40px; padding: 8px; border: 1px solid #ccc; border-radius: 6px; background: #fff; color: #222; }
.kofa-dev-table__filters input { width: 260px; max-width: 100%; height: 40px; padding: 8px; border: 1px solid #ccc; border-radius: 6px; }
.kofa-dev-table__filters button { height: 40px; padding-inline: 16px; border: 1px solid #ccc; border-radius: 6px; background: #fff; cursor: pointer; }
.kofa-dev-table__count { margin-block: 16px 8px; font-size: 14px; }
.kofa-dev-table__scroll { overflow-x: auto; border: 1px solid #d4d4d4; }
.kofa-dev-table__grid { width: 100%; min-width: 1420px; table-layout: fixed; border-collapse: separate; border-spacing: 0; font-size: 13px; line-height: 1.5; }
.kofa-dev-table__grid th { padding: 10px 12px; border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; white-space: nowrap; text-align: left; }
.kofa-dev-table__grid td { padding: 10px 12px; border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; white-space: nowrap; }
.kofa-dev-table__grid thead th { position: sticky; top: 0; z-index: 2; border-top: 2px solid #7d8794; border-bottom: 2px solid #7d8794; background: #d9e2ec; }
.kofa-dev-table__grid thead th:first-child { border-left: 2px solid #7d8794; }
.kofa-dev-table__grid thead th:last-child { border-right: 2px solid #7d8794; }
.kofa-dev-table__grid tbody tr { background: #fff; }
.kofa-dev-table__grid tbody tr:nth-child(even) { background: #f7f9fb; }
.kofa-dev-table__grid tbody tr:hover { background: #eef5ff; }
.kofa-dev-table__grid a { color: #184e91; text-decoration: underline; text-underline-offset: 3px; }
.kofa-dev-table__name { position: sticky; left: 140px; z-index: 1; white-space: normal; background: inherit; }
.kofa-dev-table__grid thead .kofa-dev-table__name { z-index: 3; }
.kofa-dev-table__grid .kofa-dev-table__stage { text-align: center; padding-inline: 4px; }
.kofa-dev-table__status { display: inline-block; padding: 3px 7px; border-radius: 4px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.kofa-dev-table__status--complete { background: #d9f0df; color: #185c32; }
.kofa-dev-table__status--partial { background: #dceafa; color: #184e91; }
.kofa-dev-table__status--in-progress { background: #fff0c2; color: #775400; }
.kofa-dev-table__status--not-started { background: #e9eaec; color: #50545b; }
.kofa-dev-table__status--not-applicable { color: #73767b; }
.kofa-dev-table__status--unrecorded { color: #73767b; font-weight: 400; }
.kofa-dev-table__grid .kofa-dev-table__remarks { white-space: normal; overflow-wrap: anywhere; }

.kofa-dev-table__screen-reader { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.kofa-dev-table-page { box-sizing: border-box; width: 100%; padding-inline: 24px; }
.kofa-dev-table__grid .kofa-dev-table__url { white-space: normal; overflow-wrap: anywhere; }
.kofa-dev-table__name-column { width: 180px; }
.kofa-dev-table__url-column { width: 320px; }
.kofa-dev-table__owner-column { width: 72px; }
.kofa-dev-table__category-column { width: 140px; }
.kofa-dev-table__stage-column { width: 72px; }
.kofa-dev-table__remarks-column { width: auto; }
.kofa-dev-table__api-count { display: block; margin: 8px auto 0; padding: 0; border: 0; background: transparent; color: #184e91; font-size: 12px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.kofa-dev-table__dialog { width: min(calc(100% - 32px), 820px); }
.kofa-dev-table__api-list { list-style: none; margin: 16px 0; padding: 0; max-height: 60vh; overflow-y: auto; }
.kofa-dev-table__api-item { padding: 12px 4px; border-bottom: 1px solid #ddd; }
.kofa-dev-table__api-item p { margin: 6px 0 0; color: #58585a; font-size: 13px; }
.kofa-dev-table__api-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

.kofa-dev-table__grid .kofa-dev-table__category { position: sticky; left: 0; z-index: 1; vertical-align: middle; text-align: center; white-space: normal; background: #edf1f5; }
.kofa-dev-table__grid thead .kofa-dev-table__category { z-index: 3; background: #d9e2ec; }
.kofa-dev-table__category-note { display: block; margin-top: 4px; color: #73767b; font-size: 11px; font-weight: 400; }

.kofa-dev-table__grid tbody .kofa-dev-table__category { border: 2px solid #7d8794; }
.kofa-dev-table__grid tbody tr:first-child > :is(th, td),
.kofa-dev-table__grid .kofa-dev-table__group-start > :is(th, td) { border-top: 2px solid #7d8794; }
.kofa-dev-table__grid tbody tr:last-child > :is(th, td),
.kofa-dev-table__grid .kofa-dev-table__group-end > :is(th, td) { border-bottom: 2px solid #7d8794; }
.kofa-dev-table__grid tbody tr > :last-child { border-right: 2px solid #7d8794; }


.kofa-dev-api { max-width: 1520px; margin: 0 auto; padding: 38px 36px 60px; }
@media (max-width: 700px) {
  .kofa-dev-api { padding: 24px 16px; }
}
.kofa-dev-api__eyebrow { margin: 0 0 8px; color: #617088; font-size: 12px; font-weight: 700; letter-spacing: 1px; }
.kofa-dev-api__heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
@media (max-width: 700px) {
  .kofa-dev-api__heading { display: block; }
}
.kofa-dev-api__title { margin: 0; font-size: 30px; line-height: 1.4; letter-spacing: -1px; }
@media (max-width: 700px) {
  .kofa-dev-api__title { font-size: 25px; }
}
.kofa-dev-api__subtitle { color: #637087; margin: 9px 0 0; }
.kofa-dev-api__prototype { display: inline-block; border: 1px solid #ced6e5; border-radius: 6px; padding: 5px 11px; color: #637087; white-space: nowrap; background: white; }
@media (max-width: 700px) {
  .kofa-dev-api__prototype { margin-top: 14px; }
}
.kofa-dev-api__nav { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 26px 0 22px; }
.kofa-dev-api__nav-link { display: inline-block; text-decoration: none; padding: 9px 17px; background: #fff; border: 1px solid #cfd7e5; border-radius: 6px; color: #37435a; font-weight: 600; }
.kofa-dev-api__nav-link--active { color: white; background: #234dc4; border-color: #234dc4; }
.kofa-dev-api__summary { display: flex; flex-wrap: wrap; gap: 8px 24px; padding: 16px 20px; background: #fff; border: 1px solid #dce2eb; border-radius: 8px; }
.kofa-dev-api__summary strong { font-size: 20px; margin-left: 6px; }
.kofa-dev-api__complete { color: #23734e; }
.kofa-dev-api__warning { color: #885600; }
.kofa-dev-api [hidden] { display: none; }
.kofa-dev-api__filters { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 20px; margin: 20px 0 0; padding: 10px 16px 14px; border: 1px solid #dce2eb; border-radius: 8px; }
.kofa-dev-api__filters legend { padding: 0 5px; color: #59677e; font-size: 13px; }
.kofa-dev-api__filters label { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; font-size: 14px; }
.kofa-dev-api__filters input { width: 16px; height: 16px; margin: 0; accent-color: #234dc4; }
.kofa-dev-api__criteria { margin: 15px 0; color: #59677e; font-size: 13px; }
.kofa-dev-api__toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin: 23px 0 13px; }
.kofa-dev-api__toolbar p { margin: 0; color: #66748b; font-size: 12px; }
.kofa-dev-api__controls { display: flex; gap: 7px; }
.kofa-dev-api__control { background: white; border: 1px solid #cfd7e5; border-radius: 5px; padding: 6px 12px; color: #37435a; cursor: pointer; font-size: 12px; }
.kofa-dev-api__group { margin-bottom: 22px; background: white; border: 1px solid #dce2eb; border-radius: 9px; overflow: hidden; }
.kofa-dev-api__group-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 17px 21px; background: #eaf0fa; cursor: pointer; list-style: none; }
.kofa-dev-api__group-head::-webkit-details-marker { display: none; }
.kofa-dev-api__group-head::after { content: '›'; color: #66748b; font-size: 24px; line-height: 26px; }
.kofa-dev-api__group[open] > .kofa-dev-api__group-head { border-bottom: 1px solid #dce2eb; }
.kofa-dev-api__group[open] > .kofa-dev-api__group-head::after { content: '⌄'; }
.kofa-dev-api__group-title { display: flex; align-items: center; flex: 1; flex-wrap: wrap; gap: 13px; margin: 0; font-size: 18px; }
.kofa-dev-api__group-divider { color: #8a98ad; font-size: 14px; font-weight: 400; }
.kofa-dev-api__group-count { font-size: 12px; color: #627087; }
.kofa-dev-api__table { width: 100%; border-collapse: collapse; text-align: left; table-layout: fixed; }
@media (max-width: 700px) {
  .kofa-dev-api__table { display: block; }
}
.kofa-dev-api__table th { background: #fafbfd; padding: 10px 20px; font-size: 12px; color: #637087; font-weight: 600; border-bottom: 1px solid #e4e8ef; }
.kofa-dev-api__table td { padding: 20px; vertical-align: top; border-bottom: 1px solid #e4e8ef; }
@media (max-width: 700px) {
  .kofa-dev-api__table td { padding: 15px; border-bottom: 0; }
}
.kofa-dev-api__table tbody tr:last-child td { border-bottom: none; }
.kofa-dev-api__page-col { width: 230px; }
.kofa-dev-api__page-name { font-weight: 700; margin: 1px 0 0; font-size: 15px; }
.kofa-dev-api__small { color: #69768b; font-size: 12px; margin: 5px 0; overflow-wrap: anywhere; }
.kofa-dev-api__page-count { margin-top: 14px; font-size: 12px; color: #69768b; }
@media (max-width: 700px) {
  .kofa-dev-api__page-count { margin-top: 5px; }
}
.kofa-dev-api__method { display: inline-block; color: #1a6a4a; background: #e9f5ef; border-radius: 4px; font: 700 11px ui-monospace, monospace; padding: 2px 6px; margin-right: 8px; }
.kofa-dev-api__endpoint { display: block; font: 12px/1.7 ui-monospace, SFMono-Regular, monospace; margin-top: 5px; overflow-wrap: anywhere; }
.kofa-dev-api__status { display: inline-block; font-size: 12px; font-weight: 700; color: #23734e; background: #eef7f1; border: 1px solid #cce4d4; border-radius: 20px; padding: 3px 10px; white-space: nowrap; }
.kofa-dev-api__status--review { color: #885600; background: #fff2d8; border-color: #edd39b; }
.kofa-dev-api__api { border: 1px solid #dce2eb; border-radius: 7px; margin-bottom: 12px; }
.kofa-dev-api__api:last-child { margin-bottom: 0; }
.kofa-dev-api__api-summary { display: flex; align-items: flex-start; gap: 13px; padding: 15px 17px; cursor: pointer; list-style: none; }
@media (max-width: 700px) {
  .kofa-dev-api__api-summary { flex-wrap: wrap; padding: 13px; gap: 8px; }
}
.kofa-dev-api__api-summary::-webkit-details-marker { display: none; }
.kofa-dev-api__api-summary::before { content: '›'; color: #66748b; font-size: 24px; line-height: 26px; width: 10px; flex-shrink: 0; }
.kofa-dev-api__api[open] > .kofa-dev-api__api-summary::before { content: '⌄'; }
.kofa-dev-api__api-title { flex: 1; min-width: 0; }
@media (max-width: 700px) {
  .kofa-dev-api__api-title { flex-basis: calc(100% - 25px); }
}
.kofa-dev-api__api-meta { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-top: 7px; }
.kofa-dev-api__http { color: #587465; font: 11px ui-monospace, monospace; }
.kofa-dev-api__fold { color: #69768b; font-size: 11px; }
.kofa-dev-api__fold-close { display: none; }
.kofa-dev-api__api[open] .kofa-dev-api__fold-open { display: none; }
.kofa-dev-api__api[open] .kofa-dev-api__fold-close { display: inline; }
.kofa-dev-api__api-body { border-top: 1px solid #e4e8ef; padding: 17px; }
@media (max-width: 700px) {
  .kofa-dev-api__api-body { padding: 13px; }
}
.kofa-dev-api__review-summary { margin: 0 0 15px; color: #59677e; font-size: 13px; }
.kofa-dev-api__result-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 9px; }
@media (max-width: 700px) {
  .kofa-dev-api__result-head { display: block; }
}
.kofa-dev-api__section-title { margin: 0; color: #37435a; font-size: 13px; }
.kofa-dev-api__json { margin: 0; padding: 16px 18px; max-height: 265px; overflow: auto; border: 1px solid #dfe5ee; border-radius: 6px; background: #f7f9fc; color: #26354d; font: 12px/1.8 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.kofa-dev-api__json--response { max-height: none; }
.kofa-dev-api__json--review { border-color: #e6c477; background: #fffaf0; }
.kofa-dev-api__check { margin-top: 12px; background: #fff8e9; border-left: 3px solid #d5a23a; padding: 14px 16px; border-radius: 0 4px 4px 0; }
.kofa-dev-api__check-title { margin: 0 0 7px; font-size: 13px; font-weight: 700; color: #83540c; }
.kofa-dev-api__check-text { margin: 5px 0 0; font-size: 12px; color: #6f6249; }
.kofa-dev-api__discussion { margin: 11px 0 0; padding-top: 10px; border-top: 1px solid #ebd9b0; color: #554a36; font-size: 12px; }
.kofa-dev-api__requirements { margin-top: 17px; border: 1px solid #dfe5ee; border-radius: 5px; overflow-x: auto; }
.kofa-dev-api__requirements-table { width: 100%; border-collapse: collapse; font-size: 12px; text-align: left; }
@media (max-width: 700px) {
  .kofa-dev-api__requirements-table { min-width: 530px; }
}
.kofa-dev-api__requirements-table th { padding: 8px 10px; background: #f5f7fb; color: #66748b; font-weight: 600; }
.kofa-dev-api__requirements-table td { padding: 9px 10px; border-top: 1px solid #e5e9f0; overflow-wrap: anywhere; vertical-align: top; }
.kofa-dev-api__requirements-table code { font: 11px/1.7 ui-monospace, monospace; }
.kofa-dev-api__details { margin-top: 11px; color: #69758a; font-size: 12px; }
.kofa-dev-api__details summary { cursor: pointer; }
.kofa-dev-api__details pre { margin-top: 9px; }
.kofa-dev-api__footnote { background: #eaf0fb; border-radius: 8px; margin-top: 20px; padding: 16px 20px; color: #52627e; font-size: 12px; }
.kofa-dev-api__footnote p { margin: 4px 0; }
.kofa-dev-api__sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.kofa-dev-api__value { max-height: 100px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; margin: 5px 0; font: 11px/1.6 ui-monospace, monospace; }
.kofa-dev-api summary:focus-visible, .kofa-dev-api button:focus-visible, .kofa-dev-api a:focus-visible { outline: var(--kofa-outline-focus-width) solid var(--kofa-color-focus-ring); outline-offset: var(--kofa-outline-focus-offset); }
@media (max-width: 700px) {
  .kofa-dev-api__table colgroup, .kofa-dev-api__table thead { display: none; }
}
@media (max-width: 700px) {
  .kofa-dev-api__table tbody, .kofa-dev-api__table tr, .kofa-dev-api__table td { display: block; width: 100%; }
}
@media (max-width: 700px) {
  .kofa-dev-api__table tr { border-bottom: 1px solid #e4e8ef; }
}
@media (max-width: 700px) {
  .kofa-dev-api__table tr:last-child { border-bottom: 0; }
}
@media (max-width: 700px) {
  .kofa-dev-api__api-summary > .kofa-dev-api__status { margin-left: 18px; }
}