eapim-portal/src/main/resources/static/plugins/swaggerUI/djb-swagger-testbed.css

/* ─────────────────────────────────────────────────────────────────────────── */
/*  DJB Swagger Testbed overlay                                                */
/*  - 기본 라이브 응답 표(.live-responses-table) 숨김 (스니펫은 유지)            */
/*  - 실행한 operation 안에 세로 적층 커스텀 응답 패널(.djb-response-grid)       */
/*  - D2Coding 우선 monospace fallback                                          */
/*  포탈 통합용. PoC(rinjae-works/swagger-poc/css/overlay.css) 에서 응답 파트만 */
/*  발췌·클래스화(단일 ID → 다중 op 대응).                                        */
/* ─────────────────────────────────────────────────────────────────────────── */

/* D2Coding 은 시스템에 설치된 경우에만 사용 (local()). 미설치 시 fallback 체인 사용. */
@font-face {
  font-family: "D2Coding";
  src: local("D2Coding"),
       local("D2Coding-Regular"),
       local("D2Coding ligature");
  font-display: swap;
}

:root {
  --djb-mono: "D2Coding", "Menlo", "Consolas", "Courier New", monospace;
  --djb-border: #d0d7de;
  --djb-bg: #ffffff;
  --djb-bg-alt: #f6f8fa;
  --djb-text: #1f2328;
  --djb-text-muted: #6e7781;
  --djb-ok: #1f883d;
  --djb-warn: #bf8700;
  --djb-err: #cf222e;
  --djb-accent: #0969da;
}

/* ─── Swagger UI 기본 응답영역 통째 숨김 ──────────────────────────────────────
   요청 스니펫은 내장(.request-snippets, 실행 후·응답영역 내부·밝은 테마) 대신
   상시 다크 패널(#djb-snippet-panel, djb-swagger-snippet-panel.js)로 대체하고,
   응답 결과는 커스텀 그리드(.djb-response-grid)로 대체한다.
   최종 순서: 파라미터 → 요청 본문 → Execute → 요청 스니펫(패널) → 응답 그리드. */
.swagger-ui .responses-wrapper { display: none !important; }
.swagger-ui .request-snippets   { display: none !important; }

/* ─── 상시 요청 스니펫 패널 (PoC overlay.css #djb-snippet-panel) ─────────────── */
.swagger-ui #djb-snippet-panel {
  margin: 16px;
  padding: 12px 16px 16px;
  background: var(--djb-bg);
  border: 1px solid var(--djb-border);
  border-radius: 8px;
}
.swagger-ui #djb-snippet-panel .djb-sn-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.swagger-ui #djb-snippet-panel .djb-sn-header h4 {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--djb-text);
}
.swagger-ui #djb-snippet-panel .djb-sn-hint {
  color: var(--djb-text-muted);
  font-size: 11px;
}
.swagger-ui #djb-snippet-panel .djb-sn-copy {
  margin-left: auto;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  background: var(--djb-bg-alt);
  border: 1px solid var(--djb-border);
  border-radius: 4px;
  cursor: pointer;
  color: var(--djb-text);
}
.swagger-ui #djb-snippet-panel .djb-sn-copy:hover { background: #eaeef2; }
.swagger-ui #djb-snippet-panel .djb-sn-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--djb-border);
}
.swagger-ui #djb-snippet-panel .djb-sn-tab {
  background: transparent;
  border: 1px solid transparent;
  border-bottom: none;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--djb-text-muted);
  cursor: pointer;
  border-radius: 4px 4px 0 0;
  white-space: nowrap;
}
.swagger-ui #djb-snippet-panel .djb-sn-tab:hover { color: var(--djb-text); }
.swagger-ui #djb-snippet-panel .djb-sn-tab.active {
  color: var(--djb-accent);
  border-color: var(--djb-border);
  background: var(--djb-bg);
  margin-bottom: -1px;
}
.swagger-ui #djb-snippet-panel .djb-sn-code {
  margin: 0;
  padding: 12px;
  background: #0d1117;
  color: #e6edf3;
  border-radius: 6px;
  max-height: 360px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-all;
  font-family: var(--djb-mono);
  font-size: 12.5px;
  line-height: 1.55;
}

/* 한글 라벨이 길어도 깨지지 않도록 */
.swagger-ui .opblock .opblock-summary-path,
.swagger-ui .opblock-tag,
.swagger-ui table thead tr th,
.swagger-ui .parameter__name,
.swagger-ui .parameter__type {
  word-break: keep-all;
}

/* ─── 커스텀 응답 그리드: 헤더 → 본문 → 메타 세로 적층 (opblock 마다 1개) ── */
.swagger-ui .djb-response-grid {
  margin: 16px;
  padding: 16px;
  background: var(--djb-bg);
  border: 1px solid var(--djb-border);
  border-radius: 8px;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "headers"
    "body"
    "meta";
  gap: 12px;
  color: var(--djb-text);
}
.swagger-ui .djb-response-grid.djb-error { border-color: var(--djb-err); background: #fff8f8; }

.swagger-ui .djb-response-grid .cell-headers { grid-area: headers; min-width: 0; }
.swagger-ui .djb-response-grid .cell-body    { grid-area: body;    min-width: 0; }
.swagger-ui .djb-response-grid .cell-meta    {
  grid-area: meta;
  display: flex;
  align-items: center;
  gap: 16px;
  padding-top: 8px;
  border-top: 1px dashed var(--djb-border);
}

.swagger-ui .djb-response-grid .cell-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--djb-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
}

.swagger-ui .djb-response-grid .empty {
  color: var(--djb-text-muted);
  font-size: 13px;
  padding: 8px 0;
}

/* Header 테이블 */
.swagger-ui .djb-response-grid .hdr-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  table-layout: fixed;
}
.swagger-ui .djb-response-grid .hdr-table th,
.swagger-ui .djb-response-grid .hdr-table td {
  border-bottom: 1px solid var(--djb-border);
  padding: 6px 8px;
  text-align: left;
  vertical-align: top;
  word-break: break-all;
}
.swagger-ui .djb-response-grid .hdr-table thead th {
  background: var(--djb-bg-alt);
  font-weight: 600;
}
.swagger-ui .djb-response-grid .hdr-table td.hdr-name {
  font-weight: 600;
  color: var(--djb-text);
  width: 40%;
}
.swagger-ui .djb-response-grid .hdr-table td.hdr-val {
  font-family: var(--djb-mono);
  font-size: 12px;
  color: var(--djb-text);
}

/* Body 탭 */
.swagger-ui .djb-response-grid .body-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--djb-border);
  margin-bottom: 8px;
}
.swagger-ui .djb-response-grid .body-tab {
  background: transparent;
  border: 1px solid transparent;
  border-bottom: none;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--djb-text-muted);
  cursor: pointer;
  border-radius: 4px 4px 0 0;
}
.swagger-ui .djb-response-grid .body-tab:hover { color: var(--djb-text); }
.swagger-ui .djb-response-grid .body-tab.active {
  color: var(--djb-accent);
  border-color: var(--djb-border);
  background: var(--djb-bg);
  margin-bottom: -1px;
}

.swagger-ui .djb-response-grid .body-panels {
  position: relative;
  min-height: 80px;
}
.swagger-ui .djb-response-grid .body-panel {
  display: none;
  margin: 0;
  padding: 12px;
  background: #0d1117;
  color: #e6edf3;
  border-radius: 6px;
  max-height: 360px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-all;
  font-size: 12.5px;
  line-height: 1.55;
}
.swagger-ui .djb-response-grid .body-panel.active { display: block; }
.swagger-ui .djb-response-grid .mono { font-family: var(--djb-mono); }

/* Meta 칩 / 시간 */
.swagger-ui .djb-response-grid .status-chip {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  font-family: var(--djb-mono);
  color: #fff;
}
.swagger-ui .djb-response-grid .status-chip.ok      { background: var(--djb-ok); }
.swagger-ui .djb-response-grid .status-chip.warn    { background: var(--djb-warn); }
.swagger-ui .djb-response-grid .status-chip.err     { background: var(--djb-err); }
.swagger-ui .djb-response-grid .status-chip.neutral { background: var(--djb-text-muted); }

.swagger-ui .djb-response-grid .time {
  font-family: var(--djb-mono);
  font-size: 12px;
  color: var(--djb-text-muted);
}

/* ─── 다크 코드 패널 텍스트 선택 가독성 ──────────────────────────────────────
   기본 ::selection 색이 어두운 배경(#0d1117)과 겹쳐 선택한 글자가 안 보이므로,
   선택 영역 배경/글자색을 명시한다. (요청 스니펫 코드 + 응답 본문 패널) */
.swagger-ui #djb-snippet-panel .djb-sn-code::selection,
.swagger-ui #djb-snippet-panel .djb-sn-code ::selection,
.swagger-ui .djb-response-grid .body-panel::selection,
.swagger-ui .djb-response-grid .body-panel ::selection {
  background: #2f5c9e;
  color: #ffffff;
}