/* ME6 V4 API Test System Styles */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  /* Dark theme — blue 계열을 모두 dark gray 로 교체 */
  --primary: #4a5566;          /* (구) #2563eb */
  --primary-dark: #2d3748;     /* (구) #1e40af */
  --primary-light: #3a4556;    /* (구) #dbeafe (라이트 강조 → 다크에서 한 단계 밝게) */
  --primary-fg: #e5e9ef;       /* primary 위에 쓰는 글자색 */
  --success: #16a34a;
  --success-light: #1e3a2b;    /* (구) #dcfce7 — 다크 배경용으로 어두운 녹색 */
  --success-fg: #4ade80;
  --danger: #dc2626;
  --danger-light: #3a1e1e;     /* (구) #fee2e2 */
  --danger-fg: #f87171;
  --warning: #f59e0b;
  --warning-light: #3a2e15;    /* (구) #fef3c7 */
  --warning-fg: #fbbf24;
  --info: #6c7a8a;             /* (구) #0891b2 — info 도 blue 계열이라 회색 */
  --info-light: #2a3340;
  --info-fg: #a8b3c1;

  /* 다크 패널 톤 (사이드바와 일관성) */
  --panel-bg: #1e2a3a;         /* 카드/패널 기본 — 사이드바 시작색과 동일 */
  --panel-bg-2: #243345;       /* 카드 내부 sub 영역 */
  --panel-bg-3: #2c3a4d;       /* hover/active */
  --panel-border: #2a3a4d;
  --panel-border-strong: #3a4a5e;
  --body-bg: #16202d;          /* body 전체 배경 (사이드바보다 약간 진하게) */

  /* 다크 톤에서 사용하는 그레이 (글자/보더용) — 원래 라이트 톤은 의미 반전 */
  --gray-50: #16202d;          /* (구) #f9fafb — body 배경 */
  --gray-100: #1e2a3a;         /* (구) #f3f4f6 — 카드 배경 */
  --gray-200: #2a3a4d;         /* (구) #e5e7eb — 보더 */
  --gray-300: #3a4a5e;         /* (구) #d1d5db — 보더 강 */
  --gray-400: #6c7a8a;         /* 중간 톤 — 보조 텍스트 */
  --gray-500: #8a96a8;         /* 일반 텍스트 보조 */
  --gray-600: #a8b3c1;         /* 일반 텍스트 */
  --gray-700: #c5cdd8;         /* 강조 텍스트 */
  --gray-800: #e5e9ef;         /* (구) #1f2937 — 주 텍스트 (반전) */
  --gray-900: #f5f7fa;         /* (구) #111827 — 헤딩 */

  --radius: 8px;
  --radius-sm: 4px;
  --shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.4);
  --shadow: 0 4px 6px -1px rgba(0,0,0,0.5), 0 2px 4px -1px rgba(0,0,0,0.35);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.6);
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Pretendard', 'Apple SD Gothic Neo',
    'Malgun Gothic', Arial, sans-serif;
  background: var(--body-bg);
  color: var(--gray-800);
  line-height: 1.5;
  min-height: 100vh;
}

/* Header — 다크 그라디언트 (사이드바 톤과 통일)
   border-bottom 제거: 탭바(.app-tabs)의 border-bottom 1개만 남겨 라인 1줄로 통합 */
.app-header {
  background: linear-gradient(135deg, #0f1620 0%, #1e2a3a 60%, #243345 100%);
  color: var(--gray-900);
  padding: 24px 0;
  box-shadow: var(--shadow);
}

.header-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.brand {
  display: flex;
  align-items: center;
  gap: 16px;
}

.brand-icon {
  font-size: 36px;
  opacity: 0.9;
}

.brand h1 {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.brand .subtitle {
  font-size: 13px;
  opacity: 0.85;
  margin-top: 2px;
}

.header-meta {
  display: flex;
  gap: 8px;
}

.badge {
  background: rgba(255, 255, 255, 0.2);
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  backdrop-filter: blur(4px);
}

.badge-secondary {
  background: rgba(255, 255, 255, 0.15);
}

/* Main */
.main-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Card */
.card {
  background: white;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--gray-200);
  overflow: hidden;
}

.card-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--gray-200);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  background: var(--gray-50);
}

.card-header h2 {
  font-size: 16px;
  font-weight: 600;
  color: var(--gray-800);
  display: flex;
  align-items: center;
  gap: 8px;
}

.card-header h2 i {
  color: var(--primary);
}

.header-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.card-body {
  padding: 20px;
}

/* Form */
.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}

.form-row:last-of-type {
  margin-bottom: 20px;
}

.form-group {
  display: flex;
  flex-direction: column;
}

.form-group.full {
  grid-column: 1 / -1;
}

.form-group label {
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-700);
  margin-bottom: 6px;
}

.form-group label small {
  font-weight: 400;
  color: var(--gray-500);
}

.required {
  color: var(--danger);
}

.form-group input,
.form-group select,
.form-group textarea {
  padding: 10px 12px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-sm);
  font-size: 14px;
  background: white;
  transition: all 0.15s;
  font-family: inherit;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-light);
}

.input-with-action {
  position: relative;
  display: flex;
}

.input-with-action input {
  flex: 1;
  padding-right: 44px;
}

.input-with-action .btn-icon {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 16px;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
  white-space: nowrap;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-primary {
  background: var(--primary);
  color: white;
}

.btn-primary:hover:not(:disabled) {
  background: var(--primary-dark);
}

.btn-success {
  background: var(--success);
  color: white;
}

.btn-success:hover:not(:disabled) {
  background: #15803d;
}

.btn-secondary {
  background: white;
  color: var(--gray-700);
  border: 1px solid var(--gray-300);
}

.btn-secondary:hover:not(:disabled) {
  background: var(--gray-100);
  border-color: var(--gray-400);
}

.btn-ghost {
  background: transparent;
  color: var(--gray-600);
}

.btn-ghost:hover:not(:disabled) {
  background: var(--gray-100);
}

.btn-danger {
  background: var(--danger);
  color: white;
}

.btn-icon {
  background: transparent;
  border: none;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--gray-500);
  transition: all 0.15s;
}

.btn-icon:hover {
  background: var(--gray-100);
  color: var(--gray-800);
}

.form-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* Connection Status */
.connection-status {
  font-size: 13px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 12px;
  background: var(--gray-100);
  color: var(--gray-600);
}

.connection-status i {
  font-size: 10px;
}

.connection-status.connected {
  background: var(--success-light);
  color: var(--success);
}

.connection-status.error {
  background: var(--danger-light);
  color: var(--danger);
}

.conn-result {
  margin-top: 16px;
}

.conn-result:empty {
  display: none;
}

.conn-result .alert {
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  line-height: 1.5;
}

.alert-success {
  background: var(--success-light);
  color: var(--success);
  border-left: 3px solid var(--success);
}

.alert-error {
  background: var(--danger-light);
  color: var(--danger);
  border-left: 3px solid var(--danger);
}

.alert-info {
  background: var(--info-light);
  color: var(--info);
  border-left: 3px solid var(--info);
}

.alert pre {
  margin-top: 8px;
  font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
  font-size: 12px;
  background: rgba(255, 255, 255, 0.5);
  padding: 8px;
  border-radius: var(--radius-sm);
  white-space: pre-wrap;
  word-break: break-all;
}

/* Suite Options */
.suite-options {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 12px 14px;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  margin-bottom: 16px;
}

.opt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  cursor: pointer;
  user-select: none;
}

.opt input[type='checkbox'] {
  cursor: pointer;
}

/* Test Categories */
.test-categories {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.category {
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.category-header {
  background: var(--gray-50);
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}

.category-header:hover {
  background: var(--gray-100);
}

.category-header .cat-name {
  flex: 1;
  font-weight: 600;
  font-size: 14px;
  color: var(--gray-800);
}

.category-header .cat-count {
  font-size: 12px;
  color: var(--gray-500);
  background: white;
  padding: 2px 8px;
  border-radius: 10px;
  border: 1px solid var(--gray-200);
}

.category-header .toggle-icon {
  transition: transform 0.2s;
  color: var(--gray-400);
}

.category.expanded .toggle-icon {
  transform: rotate(90deg);
}

.category-tests {
  display: none;
  padding: 8px;
  background: white;
}

.category.expanded .category-tests {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.test-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  transition: background 0.15s;
}

.test-item:hover {
  background: var(--gray-50);
}

.test-item input[type='checkbox'] {
  cursor: pointer;
}

.test-item .method-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 3px;
  min-width: 50px;
  text-align: center;
  font-family: 'Menlo', monospace;
}

.method-GET { background: #dbeafe; color: #1e40af; }
.method-POST { background: #dcfce7; color: #15803d; }
.method-PUT { background: #fef3c7; color: #b45309; }
.method-PATCH { background: #fed7aa; color: #c2410c; }
.method-DELETE { background: #fee2e2; color: #b91c1c; }

.test-item .test-path {
  font-family: 'Menlo', monospace;
  font-size: 12px;
  color: var(--gray-600);
  word-break: break-all;
}

.test-item .test-name {
  flex: 1;
  color: var(--gray-700);
}

/* Progress */
.progress-bar-wrap {
  margin-bottom: 16px;
}

.progress-bar {
  height: 8px;
  background: var(--gray-200);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 10px;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary) 0%, var(--success) 100%);
  transition: width 0.3s ease;
}

.progress-stats {
  display: flex;
  gap: 16px;
  font-size: 13px;
  color: var(--gray-600);
  flex-wrap: wrap;
}

.progress-stats strong {
  color: var(--gray-900);
  font-weight: 700;
}

.stat-pass { color: var(--success); }
.stat-fail { color: var(--danger); }
.stat-skip { color: var(--warning); }

/* Result List */
.result-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.empty-state {
  text-align: center;
  padding: 40px 20px;
  color: var(--gray-400);
}

.empty-state i {
  font-size: 48px;
  margin-bottom: 12px;
  opacity: 0.5;
}

.result-item {
  display: grid;
  grid-template-columns: auto auto 1fr auto auto auto;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  background: white;
  transition: all 0.15s;
  font-size: 13px;
}

.result-item:hover {
  border-color: var(--gray-300);
  box-shadow: var(--shadow-sm);
}

.result-item.pass { border-left: 3px solid var(--success); }
.result-item.fail { border-left: 3px solid var(--danger); }
.result-item.skip { border-left: 3px solid var(--warning); }
.result-item.run { border-left: 3px solid var(--info); }
.result-item.pending { border-left: 3px solid var(--gray-300); }

.result-item .status-icon {
  width: 24px;
  text-align: center;
}

.status-pass { color: var(--success); }
.status-fail { color: var(--danger); }
.status-skip { color: var(--warning); }
.status-run { color: var(--info); }
.status-pending { color: var(--gray-400); }

.result-item .res-name {
  font-weight: 600;
  color: var(--gray-800);
  word-break: break-word;
}

.result-item .res-path {
  font-family: 'Menlo', monospace;
  font-size: 11px;
  color: var(--gray-500);
  margin-top: 2px;
}

.result-item .res-meta {
  font-size: 11px;
  color: var(--gray-500);
}

.result-item .res-status-code {
  font-family: 'Menlo', monospace;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 3px;
}

.code-2xx { background: var(--success-light); color: var(--success); }
.code-3xx { background: var(--info-light); color: var(--info); }
.code-4xx { background: var(--warning-light); color: #b45309; }
.code-5xx { background: var(--danger-light); color: var(--danger); }

.result-item .res-detail-btn {
  padding: 4px 10px;
  font-size: 11px;
}

.result-cell-main {
  display: flex;
  flex-direction: column;
}

/* Modal */
.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(2px);
}

.modal-content {
  position: relative;
  background: white;
  border-radius: var(--radius);
  width: 100%;
  max-width: 900px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-lg);
}

.modal-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--gray-200);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--gray-50);
  border-radius: var(--radius) var(--radius) 0 0;
}

.modal-header h3 {
  font-size: 15px;
  font-weight: 600;
  word-break: break-all;
}

.modal-body {
  padding: 20px;
  overflow-y: auto;
  flex: 1;
}

.detail-section {
  margin-bottom: 18px;
}

.detail-section h4 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gray-500);
  margin-bottom: 6px;
  font-weight: 700;
}

.detail-section pre,
.detail-section .kv {
  background: var(--gray-900);
  color: #e2e8f0;
  padding: 12px;
  border-radius: var(--radius-sm);
  font-family: 'Menlo', 'Monaco', monospace;
  font-size: 12px;
  line-height: 1.5;
  overflow-x: auto;
  max-height: 300px;
  white-space: pre-wrap;
  word-break: break-word;
}

.detail-section.kv-section .kv {
  background: var(--gray-50);
  color: var(--gray-700);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 16px;
  font-size: 12px;
}

.detail-section.kv-section .kv strong {
  color: var(--gray-900);
}

.detail-meta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  padding: 10px 12px;
  background: var(--gray-50);
  border-radius: var(--radius-sm);
  font-size: 12px;
  margin-bottom: 16px;
}

.detail-meta-item {
  display: flex;
  flex-direction: column;
}

.detail-meta-item small {
  color: var(--gray-500);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.detail-meta-item strong {
  font-size: 13px;
  color: var(--gray-800);
  font-family: 'Menlo', monospace;
}

.assertion-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.assertion-list li {
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  background: var(--gray-50);
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.assertion-list li.pass {
  background: var(--success-light);
  color: #14532d;
}

.assertion-list li.fail {
  background: var(--danger-light);
  color: #7f1d1d;
}

.assertion-list li i {
  margin-top: 3px;
}

/* Footer */
.app-footer {
  text-align: center;
  padding: 20px;
  color: var(--gray-500);
  font-size: 12px;
  border-top: 1px solid var(--gray-200);
  background: white;
}

/* Loading Spinner */
.spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid var(--gray-200);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Toast */
.app-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: var(--gray-900);
  color: white;
  padding: 12px 20px;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  font-size: 14px;
  font-weight: 500;
  z-index: 200;
  opacity: 0;
  transition: all 0.3s ease;
  max-width: 90%;
  text-align: center;
}

.app-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.app-toast.toast-success {
  background: var(--success);
}

.app-toast.toast-error {
  background: var(--danger);
}

/* Responsive */
@media (max-width: 768px) {
  .header-inner { padding: 0 16px; }
  .brand h1 { font-size: 18px; }
  .main-container { padding: 16px; }
  .card-header { padding: 12px 14px; }
  .card-body { padding: 14px; }
  .result-item {
    grid-template-columns: auto 1fr auto;
    gap: 8px;
  }
  .result-item .res-meta { display: none; }
}

/* ============================================================
 *  보안 콘솔 추가 스타일 — 로그인 / 탭 / 보안 / 설정
 * ============================================================ */

/* ----- 로그인 페이지 ----- */
.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #1e3a8a 0%, #4c1d95 50%, #831843 100%);
  padding: 20px;
}
.login-card {
  width: 100%;
  max-width: 460px;
  background: white;
  border-radius: 14px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}
.login-header {
  text-align: center;
  padding: 32px 24px 20px;
  background: linear-gradient(135deg, var(--gray-800), var(--gray-900));
  color: white;
}
.login-logo {
  width: 64px;
  height: 64px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  color: #fbbf24;
}
.login-header h1 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 6px;
}
.login-header p {
  font-size: 12px;
  opacity: 0.8;
}
.login-form {
  padding: 24px;
}
.login-form .form-group {
  margin-bottom: 14px;
}
.login-form .form-group label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-700);
  margin-bottom: 6px;
}
.login-form .form-group input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
}
.login-form .form-group input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}
.login-form .input-with-action {
  display: flex;
  gap: 6px;
  align-items: stretch;
}
.login-form .input-with-action input { flex: 1; }
.login-form .input-with-action .btn-icon {
  width: 38px;
  border: 1px solid var(--gray-300);
  background: white;
  border-radius: 6px;
  cursor: pointer;
  color: var(--gray-600);
}
.login-form .input-with-action .btn-icon:hover {
  background: var(--gray-50);
}
.login-form .hint {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  color: var(--gray-500);
}
.btn-block { width: 100%; justify-content: center; }
.login-result { margin-top: 12px; }
.login-result .alert {
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 13px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.login-result .alert pre {
  white-space: pre-wrap;
  font-size: 11px;
  margin-top: 6px;
  background: rgba(0,0,0,.05);
  padding: 6px;
  border-radius: 4px;
}
.login-result .alert-success { background: var(--success-light); color: var(--success); }
.login-result .alert-error { background: var(--danger-light); color: var(--danger); }
.login-result .alert-info { background: var(--info-light); color: var(--info); }
.login-footer {
  padding: 14px 24px;
  border-top: 1px solid var(--gray-200);
  background: var(--gray-50);
}
.security-tip {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 11px;
  color: var(--gray-600);
  line-height: 1.5;
}
.security-tip i { color: #16a34a; flex-shrink: 0; padding-top: 1px; }
.security-tip code {
  background: var(--gray-200);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 11px;
}
.login-server-info {
  margin-top: 12px;
  font-size: 11px;
  color: var(--gray-500);
  text-align: center;
}

/* ----- 헤더 / 탭 ----- */
.app-header { position: sticky; top: 0; z-index: 50; }
.app-tabs {
  display: flex;
  background: white;
  border-bottom: 1px solid var(--gray-200);
  padding: 0 24px;
  gap: 4px;
  overflow-x: auto;
}
.tab-btn {
  background: none;
  border: none;
  padding: 14px 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--gray-600);
  cursor: pointer;
  border-bottom: 3px solid transparent;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  font-family: inherit;
  transition: all 0.15s;
}
.tab-btn:hover { color: var(--gray-900); }
.tab-btn.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
  font-weight: 600;
}
.tab-btn i { font-size: 13px; }

.btn-logout {
  margin-left: 8px;
  font-size: 13px;
  padding: 6px 12px;
}

/* ----- 경고 배너 ----- */
.warning-banner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  border-left: 4px solid #f59e0b;
  color: #78350f;
  padding: 12px 16px;
  border-radius: 6px;
  font-size: 13px;
  margin-bottom: 16px;
  line-height: 1.5;
}
.warning-banner i {
  color: #b45309;
  font-size: 18px;
  flex-shrink: 0;
  padding-top: 2px;
}

/* ----- 보안 점수 위젯 ----- */
.sec-score-wrap {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) 2fr;
  gap: 14px;
  margin-bottom: 16px;
  padding: 14px;
  background: var(--gray-50);
  border-radius: 8px;
  border: 1px solid var(--gray-200);
}
@media (max-width: 768px) {
  .sec-score-wrap { grid-template-columns: 1fr; }
}
.sec-score-card {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--gray-700), var(--gray-900));
  color: white;
  transition: background 0.3s;
}
.sec-score-card.grade-a { background: linear-gradient(135deg, #16a34a, #14532d); }
.sec-score-card.grade-b { background: linear-gradient(135deg, #65a30d, #3f6212); }
.sec-score-card.grade-c { background: linear-gradient(135deg, #ca8a04, #713f12); }
.sec-score-card.grade-d { background: linear-gradient(135deg, #ea580c, #7c2d12); }
.sec-score-card.grade-e { background: linear-gradient(135deg, #dc2626, #7f1d1d); }
.sec-score-card.grade-f { background: linear-gradient(135deg, #991b1b, #450a0a); }
.score-grade {
  font-size: 56px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -2px;
}
.score-meta { flex: 1; }
.score-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.85;
}
.score-number {
  font-size: 24px;
  font-weight: 700;
  margin-top: 4px;
}
.score-number span { font-size: 28px; }

.severity-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}
.sev-cell {
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: 6px;
  padding: 12px 8px;
  text-align: center;
}
.sev-num {
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
}
.sev-lbl {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gray-500);
  margin-top: 6px;
  font-weight: 600;
}
.sev-cell.sev-critical .sev-num { color: #b91c1c; }
.sev-cell.sev-high     .sev-num { color: #dc2626; }
.sev-cell.sev-medium   .sev-num { color: #d97706; }
.sev-cell.sev-low      .sev-num { color: #65a30d; }
.sev-cell.sev-info     .sev-num { color: #0284c7; }

/* ----- 심각도 배지 ----- */
.sev-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: white;
  min-width: 64px;
}
.sev-badge.sev-critical { background: #b91c1c; }
.sev-badge.sev-high     { background: #dc2626; }
.sev-badge.sev-medium   { background: #d97706; }
.sev-badge.sev-low      { background: #65a30d; }
.sev-badge.sev-info     { background: #0284c7; }

/* 보안 결과 verdict 색 */
.result-item.pass { border-left-color: var(--success); }
.result-item.fail { border-left-color: var(--danger); }
.result-item.warn { border-left-color: var(--warning); }
.result-item.info { border-left-color: var(--info); }
.status-warn { color: var(--warning); }
.status-info { color: var(--info); }
.verdict-pass { color: var(--success); }
.verdict-fail { color: var(--danger); }
.verdict-warn { color: var(--warning); }
.verdict-info { color: var(--info); }

.evidence-item {
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: 6px;
  padding: 8px 10px;
  margin-top: 8px;
}
.evidence-item summary {
  cursor: pointer;
  font-size: 13px;
  color: var(--gray-700);
}
.evidence-item pre {
  background: var(--gray-900);
  color: #e2e8f0;
  padding: 8px 10px;
  border-radius: 4px;
  font-size: 11px;
  max-height: 240px;
  overflow: auto;
  margin-top: 6px;
  white-space: pre-wrap;
  word-break: break-all;
}

/* ----- 환경설정 섹션 ----- */
.settings-section {
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  padding: 18px;
  margin-bottom: 16px;
}
.settings-section h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--gray-800);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.settings-section h3 i { color: var(--primary); }
.settings-desc {
  font-size: 13px;
  color: var(--gray-600);
  margin-bottom: 8px;
  line-height: 1.6;
}
.settings-desc code {
  background: var(--gray-100);
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 12px;
  color: var(--primary-dark);
}
.settings-section .form-group {
  margin-top: 12px;
  margin-bottom: 10px;
}
.settings-section .form-group label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-700);
  margin-bottom: 6px;
}
.settings-section textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  font-size: 13px;
  line-height: 1.6;
  resize: vertical;
}
.settings-section textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}
.settings-section .form-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.settings-info {
  margin-top: 14px;
  padding: 10px 12px;
  background: var(--gray-50);
  border-radius: 6px;
  font-size: 13px;
  color: var(--gray-700);
  line-height: 1.8;
}
.settings-info strong { color: var(--gray-900); }
.settings-info code {
  background: var(--gray-200);
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 12px;
  font-family: 'SF Mono', Menlo, Consolas, monospace;
}

.conn-result {
  margin-top: 10px;
}
.conn-result .alert {
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 13px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.conn-result .alert-success { background: var(--success-light); color: var(--success); }
.conn-result .alert-error { background: var(--danger-light); color: var(--danger); }
.conn-result .alert-info { background: var(--info-light); color: var(--info); }

/* ============================================================
 *  상세 모달 — API 재실행 폼 (예제 폼)
 * ============================================================ */
.api-runner {
  background: linear-gradient(180deg, #eff6ff, #ffffff);
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  padding: 14px 16px;
  margin: 12px 0;
}
.api-runner h4 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--primary-dark);
  margin-bottom: 6px;
}
.api-runner h4 i { color: var(--primary); }
.api-runner-hint {
  font-size: 12px;
  color: var(--gray-600);
  line-height: 1.6;
  margin-bottom: 12px;
}
.api-runner-hint strong { color: var(--primary-dark); }

.api-runner-grid {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 10px;
  margin-bottom: 10px;
}
.api-runner .form-group {
  margin-bottom: 10px;
}
.api-runner .form-group.form-grow { flex: 1; }
.api-runner .form-group.is-disabled { opacity: 0.65; }
.api-runner .form-group label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--gray-700);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.api-runner .form-group .hint-inline {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--gray-500);
  margin-left: 6px;
  font-size: 11px;
}
.api-runner input[type="text"],
.api-runner textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--gray-300);
  border-radius: 5px;
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.55;
  background: white;
  color: var(--gray-800);
}
.api-runner input[type="text"]:focus,
.api-runner textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}
.api-runner input[readonly] {
  background: var(--gray-100);
  color: var(--gray-700);
  cursor: not-allowed;
}
.api-runner textarea {
  resize: vertical;
  min-height: 80px;
  max-height: 360px;
}
.api-runner textarea:disabled {
  background: var(--gray-100);
  color: var(--gray-500);
  cursor: not-allowed;
}

.method-input {
  font-weight: 700 !important;
  text-align: center;
  text-transform: uppercase;
}
.method-input.method-GET    { color: #15803d; background: #dcfce7 !important; }
.method-input.method-POST   { color: #1d4ed8; background: #dbeafe !important; }
.method-input.method-PUT    { color: #b45309; background: #fef3c7 !important; }
.method-input.method-PATCH  { color: #9333ea; background: #f3e8ff !important; }
.method-input.method-DELETE { color: #b91c1c; background: #fee2e2 !important; }

.input-with-action {
  display: flex;
  gap: 6px;
}
.input-with-action input { flex: 1; }
.btn-sm {
  padding: 4px 10px !important;
  font-size: 11px !important;
}

.form-validate {
  margin-top: 4px;
  font-size: 11px;
  min-height: 16px;
}
.form-validate.validate-ok  { color: var(--success); }
.form-validate.validate-err { color: var(--danger); }
.form-validate.validate-info { color: var(--gray-500); }

.api-runner .form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--gray-300);
}
.api-runner .form-actions .btn { font-size: 12px; padding: 6px 12px; }

/* 응답 미리보기 */
.api-runner-result {
  margin-top: 14px;
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: 6px;
  overflow: hidden;
}
.api-runner-status {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 500;
  background: var(--gray-50);
  border-bottom: 1px solid var(--gray-200);
}
.api-runner-status.running { background: #eff6ff; color: var(--primary-dark); }
.api-runner-status.ok      { background: #ecfdf5; color: #047857; }
.api-runner-status.warn    { background: #fffbeb; color: #b45309; }
.api-runner-status.err     { background: #fef2f2; color: #b91c1c; }
.api-runner-status .code-2xx { color: #16a34a; }
.api-runner-status .code-3xx { color: #0891b2; }
.api-runner-status .code-4xx { color: #d97706; }
.api-runner-status .code-5xx { color: #dc2626; }

.auth-tag {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  margin-left: 4px;
  color: white;
}
.auth-tag.tag-warn { background: var(--warning); color: #78350f; }
.auth-tag.tag-err  { background: var(--danger); }

.api-runner-resp {
  padding: 10px 14px;
}
.api-runner-resp > summary {
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-700);
  padding: 4px 0;
}
.api-runner-resp h5 {
  font-size: 11px;
  font-weight: 600;
  color: var(--gray-600);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 10px 0 4px;
}
.api-runner-resp pre {
  background: var(--gray-900);
  color: #e2e8f0;
  padding: 10px 12px;
  border-radius: 4px;
  font-size: 11px;
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  max-height: 320px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-all;
  margin: 0;
}
.api-runner-meta {
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: 4px;
  padding: 8px 10px;
  font-size: 12px;
  line-height: 1.8;
  margin-bottom: 8px;
}
.api-runner-meta strong { color: var(--gray-800); margin-right: 4px; }
.api-runner-meta code {
  background: var(--gray-200);
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 11px;
  color: var(--primary-dark);
}

@media (max-width: 640px) {
  .api-runner-grid {
    grid-template-columns: 1fr;
  }
}

/* ════════════════════════════════════════════════════════════════════════
 *  Workflow Visualization (시나리오 워크플로우)
 * ════════════════════════════════════════════════════════════════════════ */
.workflow-hint {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  color: #1e40af;
  font-size: 13px;
  margin-bottom: 16px;
}
.workflow-hint i { font-size: 16px; }

.workflow-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 1100px) {
  .workflow-list { grid-template-columns: 1fr 1fr 1fr; }
}

.wf-card {
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  padding: 16px;
  background: #fafafa;
  transition: all 0.2s;
}
.wf-card.wf-color-blue   { border-color: #93c5fd; background: linear-gradient(180deg, #eff6ff, #ffffff); }
.wf-card.wf-color-purple { border-color: #c4b5fd; background: linear-gradient(180deg, #f5f3ff, #ffffff); }
.wf-card.wf-color-green  { border-color: #86efac; background: linear-gradient(180deg, #f0fdf4, #ffffff); }
.wf-card.wf-color-gray   { border-color: #d1d5db; background: linear-gradient(180deg, #f9fafb, #ffffff); }

.wf-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.wf-card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 700;
  color: #1f2937;
}
.wf-card-title i { font-size: 18px; }
.wf-color-blue   .wf-card-title i { color: #2563eb; }
.wf-color-purple .wf-card-title i { color: #7c3aed; }
.wf-color-green  .wf-card-title i { color: #16a34a; }

.wf-card-badge {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
}
.wf-badge-pending { background: #e5e7eb; color: #4b5563; }
.wf-badge-run     { background: #dbeafe; color: #1d4ed8; animation: pulse 1.5s infinite; }
.wf-badge-done    { background: #dcfce7; color: #15803d; }
.wf-badge-fail    { background: #fee2e2; color: #b91c1c; }

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

.wf-card-desc {
  font-size: 12px;
  color: #6b7280;
  margin-bottom: 14px;
  line-height: 1.5;
}

.wf-steps {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 12px;
}

.wf-step {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 12px;
  padding: 8px 0;
  position: relative;
}
.wf-step-icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid #d1d5db;
  font-weight: 700;
  z-index: 1;
}
.wf-step-num {
  position: absolute;
  font-size: 14px;
  color: #6b7280;
}
.wf-step-status-icon {
  position: absolute;
  right: -4px;
  bottom: -4px;
  width: 18px;
  height: 18px;
  background: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  border: 1px solid #e5e7eb;
}
.wf-step.status-pending .wf-step-status-icon i { color: #9ca3af; }
.wf-step.status-run     .wf-step-status-icon i,
.wf-step.status-run     .wf-step-status-icon .spinner { color: #2563eb; }
.wf-step.status-pass    .wf-step-status-icon i { color: #16a34a; }
.wf-step.status-fail    .wf-step-status-icon i { color: #dc2626; }
.wf-step.status-skip    .wf-step-status-icon i { color: #f59e0b; }

.wf-step.status-pass .wf-step-icon { border-color: #16a34a; background: #f0fdf4; }
.wf-step.status-pass .wf-step-num  { color: #15803d; }
.wf-step.status-fail .wf-step-icon { border-color: #dc2626; background: #fef2f2; }
.wf-step.status-fail .wf-step-num  { color: #b91c1c; }
.wf-step.status-run  .wf-step-icon { border-color: #2563eb; background: #eff6ff; animation: pulse 1.5s infinite; }
.wf-step.status-run  .wf-step-num  { color: #1d4ed8; }
.wf-step.status-skip .wf-step-icon { border-color: #f59e0b; background: #fffbeb; }
.wf-step.status-skip .wf-step-num  { color: #b45309; }

.wf-step-connector {
  position: absolute;
  left: 19px;
  top: 48px;
  bottom: -8px;
  width: 2px;
  background: #e5e7eb;
  z-index: 0;
}
.wf-step.status-pass + .wf-step .wf-step-connector,
.wf-step.status-pass .wf-step-connector { background: #86efac; }
.wf-step.status-fail .wf-step-connector { background: #fca5a5; }

.wf-step-body {
  padding-top: 4px;
}
.wf-step-label {
  font-weight: 600;
  font-size: 13px;
  color: #1f2937;
}
.wf-step-status {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-top: 2px;
}
.wf-step.status-pending .wf-step-status { color: #6b7280; }
.wf-step.status-run     .wf-step-status { color: #1d4ed8; }
.wf-step.status-pass    .wf-step-status { color: #15803d; }
.wf-step.status-fail    .wf-step-status { color: #b91c1c; }
.wf-step.status-skip    .wf-step-status { color: #b45309; }

.wf-step-msg {
  font-size: 11px;
  color: #6b7280;
  margin-top: 3px;
  line-height: 1.4;
  word-break: break-all;
}

.wf-summary {
  display: flex;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px dashed #e5e7eb;
  font-size: 12px;
  flex-wrap: wrap;
}
.wf-sum-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #6b7280;
}
.wf-sum-item strong { font-weight: 700; }
.wf-sum-pass i { color: #16a34a; }
.wf-sum-pass strong { color: #15803d; }
.wf-sum-fail i { color: #dc2626; }
.wf-sum-fail strong { color: #b91c1c; }
.wf-sum-skip i { color: #f59e0b; }
.wf-sum-skip strong { color: #b45309; }

/* ════════════════════════════════════════════════════════════════════════
 *  결과 리스트의 명확한 통과/실패 시각 구분 강화
 * ════════════════════════════════════════════════════════════════════════ */
.result-item {
  position: relative;
  border-left-width: 4px;
  border-left-style: solid;
  transition: all 0.15s;
}
.result-item.result-pass    { border-left-color: #16a34a; background: linear-gradient(90deg, #f0fdf4 0%, #ffffff 30%); }
.result-item.result-fail    { border-left-color: #dc2626; background: linear-gradient(90deg, #fef2f2 0%, #ffffff 30%); }
.result-item.result-skip    { border-left-color: #f59e0b; background: linear-gradient(90deg, #fffbeb 0%, #ffffff 30%); }
.result-item.result-run     { border-left-color: #2563eb; background: linear-gradient(90deg, #eff6ff 0%, #ffffff 30%); }
.result-item.result-pending { border-left-color: #d1d5db; }

.verdict-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-align: center;
}
.verdict-badge.verdict-pass    { background: #16a34a; color: #ffffff; }
.verdict-badge.verdict-fail    { background: #dc2626; color: #ffffff; box-shadow: 0 0 0 2px #fee2e2; }
.verdict-badge.verdict-skip    { background: #f59e0b; color: #ffffff; }
.verdict-badge.verdict-run     { background: #2563eb; color: #ffffff; animation: pulse 1.5s infinite; }
.verdict-badge.verdict-pending { background: #e5e7eb; color: #4b5563; }
.verdict-badge.verdict-warn    { background: #f59e0b; color: #ffffff; }
.verdict-badge.verdict-info    { background: #6366f1; color: #ffffff; }

.res-assertion-mini {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #4b5563;
  white-space: nowrap;
}
.res-assertion-mini i.fa-check { color: #16a34a; }
.res-assertion-mini i.fa-times { color: #dc2626; }

.res-wf-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  margin-right: 6px;
  vertical-align: middle;
}
.res-wf-tag.wf-color-blue   { background: #dbeafe; color: #1e40af; }
.res-wf-tag.wf-color-purple { background: #ede9fe; color: #6d28d9; }
.res-wf-tag.wf-color-green  { background: #dcfce7; color: #15803d; }
.res-wf-tag.wf-color-gray   { background: #f3f4f6; color: #4b5563; }


/* ════════════════════════════════════════════════════════════════════════
 *  Workflow 6개 매트릭스 (KEEP/CLEAN × 3영역)
 * ════════════════════════════════════════════════════════════════════════ */

/* 2×3 그리드 (영역별 행, KEEP/CLEAN 열) */
.workflow-grid-2x3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 900px) {
  .workflow-grid-2x3 { grid-template-columns: 1fr 1fr; }
}

/* 추가 색상 변형: KEEP은 밝게, CLEAN은 진하게 */
.wf-card.wf-color-blue-dark {
  border-color: #6366f1;
  background: linear-gradient(180deg, #e0e7ff 0%, #ffffff 100%);
}
.wf-card.wf-color-blue-dark .wf-card-title i { color: #4338ca; }

.wf-card.wf-color-purple-dark {
  border-color: #a855f7;
  background: linear-gradient(180deg, #f3e8ff 0%, #ffffff 100%);
}
.wf-card.wf-color-purple-dark .wf-card-title i { color: #7e22ce; }

.wf-card.wf-color-green-dark {
  border-color: #059669;
  background: linear-gradient(180deg, #d1fae5 0%, #ffffff 100%);
}
.wf-card.wf-color-green-dark .wf-card-title i { color: #047857; }

/* CLEAN 모드 카드는 우측 상단에 점선 패턴으로 시각 구분 */
.wf-card.wf-mode-clean {
  position: relative;
}
.wf-card.wf-mode-clean::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 30px 30px 0;
  border-color: transparent #fca5a5 transparent transparent;
  opacity: 0.6;
}
.wf-card.wf-mode-keep::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 30px 30px 0;
  border-color: transparent #86efac transparent transparent;
  opacity: 0.6;
}

/* 모드 배지 (KEEP/CLEAN) */
.wf-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.wf-mode-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
}
.wf-mode-badge.wf-mode-keep {
  background: #d1fae5;
  color: #047857;
  border: 1px solid #6ee7b7;
}
.wf-mode-badge.wf-mode-clean {
  background: #fee2e2;
  color: #b91c1c;
  border: 1px solid #fca5a5;
}
.wf-cat-badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  background: #f3f4f6;
  color: #4b5563;
  border: 1px solid #e5e7eb;
}

/* 카드 내 실행 버튼 */
.wf-card-actions {
  margin: 10px 0 14px 0;
  padding-bottom: 10px;
  border-bottom: 1px dashed #e5e7eb;
}
.wf-run-btn {
  width: 100%;
  justify-content: center;
}
.btn.btn-sm {
  padding: 6px 12px;
  font-size: 13px;
}

/* workflow-hint 다중 라인 지원 */
.workflow-hint {
  align-items: flex-start;
}
.workflow-hint > div {
  flex: 1;
  line-height: 1.6;
}
.workflow-hint b {
  color: #1e3a8a;
}


/* ════════════════════════════════════════════════════════════════════════
   ===== Pringo-style 좌측 사이드바 + 메인 레이아웃 (1944줄 이후 추가) =====
   ════════════════════════════════════════════════════════════════════════ */

/* App Shell: 사이드바 + 메인 영역 가로 배치 */
.app-shell {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  min-height: calc(100vh - 140px);
  width: 100%;
}

/* 사이드바 본체 */
.app-sidebar {
  flex: 0 0 240px;
  width: 240px;
  background: linear-gradient(180deg, #1e2a3a 0%, #243345 100%);
  color: #cdd6e0;
  border-right: 1px solid #1a2330;
  display: flex;
  flex-direction: column;
  padding: 0;
  position: sticky;
  top: 0;
  align-self: flex-start;
  max-height: 100vh;
  overflow-y: auto;
  box-shadow: 2px 0 8px rgba(0,0,0,0.08);
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 22px 20px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  color: #fff;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.4px;
}
.sidebar-brand i {
  color: #6bb8ff;
  font-size: 1.5rem;
}

.sidebar-nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 12px 0;
}

.nav-item {
  display: flex;
  flex-direction: column;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  background: transparent;
  border: none;
  color: #cdd6e0;
  padding: 11px 18px;
  font-size: 0.93rem;
  text-align: left;
  cursor: pointer;
  border-left: 3px solid transparent;
  transition: all 0.15s ease;
}
.nav-link:hover:not(.disabled) {
  background: rgba(255,255,255,0.04);
  color: #fff;
}
.nav-link.active {
  background: rgba(108, 184, 255, 0.12);
  color: #fff;
  border-left-color: #6bb8ff;
  font-weight: 600;
}
.nav-link.disabled {
  color: #5a6a7a;
  cursor: not-allowed;
  opacity: 0.6;
}
.nav-icon {
  width: 18px;
  font-size: 0.95rem;
  text-align: center;
}
.nav-label {
  flex: 1;
}
.nav-arrow {
  font-size: 0.7rem;
  color: #7a8a9a;
  transition: transform 0.2s ease;
}
.nav-item.expanded .nav-arrow {
  transform: rotate(180deg);
  color: #6bb8ff;
}
.nav-badge-api {
  background: #28a745;
  color: white;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 0.3px;
}
.nav-badge-na {
  background: #4a5566;
  color: #aab4c0;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 0.3px;
}
.nav-badge-api.inline,
.nav-badge-na.inline {
  display: inline-block;
  margin-right: 4px;
}

/* 서브메뉴 */
.nav-submenu {
  display: none;
  flex-direction: column;
  background: rgba(0,0,0,0.18);
  padding: 4px 0 8px;
  border-left: 3px solid rgba(108, 184, 255, 0.3);
}
.nav-item.has-submenu.expanded .nav-submenu {
  display: flex;
  animation: slideDown 0.2s ease;
}
@keyframes slideDown {
  from { opacity: 0; max-height: 0; }
  to { opacity: 1; max-height: 200px; }
}
.submenu-link {
  display: flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: none;
  color: #99a5b5;
  font-size: 0.82rem;
  padding: 8px 18px 8px 36px;
  cursor: pointer;
  text-align: left;
  border-left: 3px solid transparent;
  margin-left: -3px;
  transition: all 0.15s ease;
}
.submenu-link:hover {
  background: rgba(255,255,255,0.04);
  color: #fff;
}
.submenu-link.active {
  background: rgba(108, 184, 255, 0.16);
  color: #fff;
  border-left-color: #6bb8ff;
  font-weight: 600;
}
.submenu-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 6px;
  vertical-align: middle;
}
.dot-keep,
.submenu-dot.dot-keep { background: #28a745; box-shadow: 0 0 0 1px rgba(40,167,69,0.4); }
.dot-clean,
.submenu-dot.dot-clean { background: #dc3545; box-shadow: 0 0 0 1px rgba(220,53,69,0.4); }
.dot-query,
.submenu-dot.dot-query { background: #f59e0b; box-shadow: 0 0 0 1px rgba(245,158,11,0.4); }

/* 사이드바 푸터 (범례) */
.sidebar-footer {
  border-top: 1px solid rgba(255,255,255,0.06);
  padding: 12px 18px;
  font-size: 0.72rem;
  color: #8a96a8;
}
.sidebar-legend {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

/* 메인 컨테이너 (사이드바 옆) */
.main-container.with-sidebar {
  flex: 1;
  max-width: none;
  width: auto;
  padding: 24px;
}

/* 활성 메뉴 뱃지 (워크플로우 카드 헤더) */
.active-menu-badge {
  display: inline-block;
  background: #e9ecef;
  color: #495057;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 0.78rem;
  font-weight: 600;
  margin-right: 8px;
}
.active-menu-badge.active {
  background: #cfe5ff;
  color: #084298;
  border: 1px solid #9ec5fe;
}

/* 빈 상태 표시 */
.workflow-empty {
  text-align: center;
  padding: 50px 20px;
  color: #6c757d;
  background: #f8f9fa;
  border: 1px dashed #ced4da;
  border-radius: 10px;
}
.workflow-empty i {
  font-size: 2.5rem;
  color: #adb5bd;
  margin-bottom: 12px;
  display: block;
}
.workflow-empty p {
  font-size: 1rem;
  margin: 8px 0;
  font-weight: 600;
}
.workflow-empty small {
  color: #868e96;
  font-size: 0.85rem;
}

/* 모바일 대응: 사이드바를 위로 접기 */
@media (max-width: 900px) {
  .app-shell {
    flex-direction: column;
  }
  .app-sidebar {
    flex: 0 0 auto;
    width: 100%;
    max-height: none;
    position: relative;
    border-right: none;
    border-bottom: 1px solid #1a2330;
  }
  .sidebar-nav {
    flex-direction: row;
    flex-wrap: wrap;
    padding: 8px;
    gap: 4px;
  }
  .nav-item {
    flex: 0 0 auto;
  }
  .nav-link {
    padding: 8px 12px;
    font-size: 0.85rem;
  }
  .nav-arrow { display: none; }
  .nav-submenu {
    width: 100%;
    flex-basis: 100%;
  }
  .sidebar-footer { display: none; }
}

/* ════════════════════════════════════════════════════════════════════════
   ===== 다크 테마 오버라이드 (사이드바 톤과 통일, blue → dark gray) =====
   기존 white/light-blue 배경을 다크 그레이로 일괄 재정의
   ════════════════════════════════════════════════════════════════════════ */

/* 카드 본체 — 사이드바 시작 톤(#1e2a3a) */
.card {
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  color: var(--gray-700);
}
.card-header {
  background: var(--panel-bg-2);
  border-bottom: 1px solid var(--panel-border);
}
.card-header h2 { color: var(--gray-900); }
.card-header h2 i { color: var(--gray-500); }
.card-body { color: var(--gray-700); }

/* 일반 텍스트/링크 */
p, span, div, label, small, td, th, li { color: inherit; }
h1, h2, h3, h4, h5, h6 { color: var(--gray-900); }
a { color: var(--gray-700); }
a:hover { color: var(--gray-900); }

/* 모든 흰 배경 컴포넌트 다크화 (의미별 그룹) */
.test-item,
.sec-item,
.modal-content,
.api-runner-modal,
.form-card,
.test-detail,
.workflow-empty,
.config-section,
.endpoint-list,
.endpoint-row,
.security-info-box,
.session-card,
.whitelist-section {
  background: var(--panel-bg) !important;
  border-color: var(--panel-border) !important;
  color: var(--gray-700);
}

/* 폼 컨트롤 (input/select/textarea) */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="url"],
input:not([type]),
select,
textarea,
.form-control {
  background: var(--body-bg) !important;
  border: 1px solid var(--panel-border-strong) !important;
  color: var(--gray-800) !important;
}
input:focus, select:focus, textarea:focus, .form-control:focus {
  border-color: var(--gray-500) !important;
  box-shadow: 0 0 0 2px rgba(108, 122, 138, 0.25) !important;
  outline: none;
}
input::placeholder, textarea::placeholder { color: var(--gray-400); opacity: 0.7; }

/* 버튼 색상 재정의 — primary blue → dark gray */
.btn-primary {
  background: linear-gradient(135deg, #4a5566 0%, #2d3748 100%) !important;
  color: var(--primary-fg) !important;
  border: 1px solid #5a6678 !important;
}
.btn-primary:hover:not(:disabled) {
  background: linear-gradient(135deg, #5a6678 0%, #3a4556 100%) !important;
  filter: brightness(1.05);
}
.btn-secondary {
  background: var(--panel-bg-3) !important;
  color: var(--gray-800) !important;
  border: 1px solid var(--panel-border-strong) !important;
}
.btn-secondary:hover:not(:disabled) {
  background: #3a4a5e !important;
}
.btn-ghost {
  background: transparent !important;
  color: var(--gray-700) !important;
  border: 1px solid var(--panel-border-strong) !important;
}
.btn-ghost:hover:not(:disabled) {
  background: var(--panel-bg-3) !important;
  color: var(--gray-900) !important;
}
.btn-icon {
  color: var(--gray-500);
}
.btn-icon:hover {
  background: var(--panel-bg-3);
  color: var(--gray-900);
}

/* 탭 버튼 */
.app-tabs {
  background: rgba(0,0,0,0.2) !important;
  border-bottom: 1px solid var(--panel-border) !important;
}
.tab-btn {
  color: var(--gray-500) !important;
  background: transparent !important;
}
.tab-btn:hover { color: var(--gray-800) !important; }
.tab-btn.active {
  color: var(--gray-900) !important;
  border-bottom-color: var(--gray-400) !important;
  background: rgba(255,255,255,0.04) !important;
}

/* Badge (헤더 우측) */
.badge {
  background: rgba(255, 255, 255, 0.08);
  color: var(--gray-800);
  border: 1px solid rgba(255,255,255,0.1);
}
.badge-secondary { background: rgba(255, 255, 255, 0.05); }

/* 테이블 */
table { color: var(--gray-700); }
thead th {
  background: var(--panel-bg-2) !important;
  color: var(--gray-900);
  border-bottom: 1px solid var(--panel-border-strong) !important;
}
tbody tr { border-bottom: 1px solid var(--panel-border); }
tbody tr:nth-child(even) { background: rgba(255,255,255,0.02); }
tbody tr:hover { background: rgba(255,255,255,0.04); }
td, th { border-color: var(--panel-border); }

/* code/pre */
pre, code {
  background: #0d141d !important;
  color: #c5cdd8 !important;
  border: 1px solid var(--panel-border) !important;
}
pre { padding: 12px; border-radius: 6px; }

/* HTTP 메서드 뱃지 — blue 계열을 그레이로 (POST/PATCH/PUT 등 의미 유지하되 톤 어둡게) */
.method-GET    { background: #1e3a4d !important; color: #8ab4d0 !important; }
.method-POST   { background: #1e3a2b !important; color: #6fc88a !important; }
.method-PUT    { background: #3a2e15 !important; color: #e0b56b !important; }
.method-PATCH  { background: #3a261a !important; color: #d99066 !important; }
.method-DELETE { background: #3a1e1e !important; color: #e87878 !important; }

.method-input.method-GET    { color: #8ab4d0 !important; background: #1e3a4d !important; }
.method-input.method-POST   { color: #6fc88a !important; background: #1e3a2b !important; }
.method-input.method-PUT    { color: #e0b56b !important; background: #3a2e15 !important; }
.method-input.method-PATCH  { color: #b287d8 !important; background: #2e1f3a !important; }
.method-input.method-DELETE { color: #e87878 !important; background: #3a1e1e !important; }

/* HTTP code 뱃지 */
.code-2xx { background: #1e3a2b !important; color: #6fc88a !important; }
.code-3xx { background: #1e3a4d !important; color: #8ab4d0 !important; }
.code-4xx { background: #3a2e15 !important; color: #e0b56b !important; }
.code-5xx { background: #3a1e1e !important; color: #e87878 !important; }

/* 결과 상태 카드 */
.test-item.status-pass { border-left: 4px solid #28a745; }
.test-item.status-fail { border-left: 4px solid #dc3545; }
.test-item.status-skip { border-left: 4px solid #f59e0b; }
.test-item.status-run  { border-left: 4px solid #6c7a8a; }

/* 워크플로우 카드 다크화 */
.wf-card {
  background: var(--panel-bg) !important;
  border: 1px solid var(--panel-border) !important;
  color: var(--gray-700) !important;
}
.wf-card-title { color: var(--gray-900); }
.wf-card-desc { color: var(--gray-500); }
.wf-step { background: var(--panel-bg-2); border: 1px solid var(--panel-border); }
.wf-step-label { color: var(--gray-800); }
.wf-step-status { color: var(--gray-500); }
.wf-step-msg { color: var(--gray-400); }
.wf-step-icon { background: var(--body-bg); border: 1px solid var(--panel-border-strong); }
.wf-step.status-pass .wf-step-icon { background: #1e3a2b; border-color: #28a745; }
.wf-step.status-fail .wf-step-icon { background: #3a1e1e; border-color: #dc3545; }
.wf-step.status-skip .wf-step-icon { background: #3a2e15; border-color: #f59e0b; }
.wf-step.status-run  .wf-step-icon { background: var(--panel-bg-3); border-color: var(--gray-400); }

.wf-card-meta, .wf-card-actions, .wf-summary { border-color: var(--panel-border-strong) !important; }
.wf-cat-badge { background: var(--panel-bg-3); color: var(--gray-700); }

/* Color variant 카드 좌측 strip — blue 톤도 그레이로 */
.wf-card.wf-color-blue { border-left: 5px solid #6c7a8a !important; }
.wf-card.wf-color-blue-dark { border-left: 5px solid #4a5566 !important; }
.wf-card.wf-color-purple { border-left: 5px solid #7a6a8a !important; }
.wf-card.wf-color-purple-dark { border-left: 5px solid #564a66 !important; }
.wf-card.wf-color-green { border-left: 5px solid #5a7a6c !important; }
.wf-card.wf-color-green-dark { border-left: 5px solid #4a6656 !important; }

/* 활성 메뉴 뱃지 (워크플로우 헤더) */
.active-menu-badge {
  background: var(--panel-bg-3) !important;
  color: var(--gray-700) !important;
}
.active-menu-badge.active {
  background: rgba(108, 184, 255, 0.10) !important;
  color: #cfe5ff !important;
  border: 1px solid rgba(108, 184, 255, 0.25) !important;
}

/* workflow-empty 빈 상태 */
.workflow-empty {
  background: var(--panel-bg-2) !important;
  color: var(--gray-500) !important;
  border: 1px dashed var(--panel-border-strong) !important;
}
.workflow-empty p { color: var(--gray-700); }
.workflow-empty small { color: var(--gray-500); }
.workflow-empty i { color: var(--gray-400); }

/* 워크플로우 힌트 */
.workflow-hint {
  background: var(--panel-bg-2) !important;
  color: var(--gray-600) !important;
  border-left: 4px solid var(--gray-500) !important;
}
.workflow-hint i { color: var(--gray-400); }
.workflow-hint b, .workflow-hint strong { color: var(--gray-900); }

/* api-runner / detail modal */
.api-runner-status.running { background: var(--panel-bg-3) !important; color: var(--gray-800) !important; }
.api-runner-status.warn    { background: #3a2e15 !important; color: #e0b56b !important; }
.api-runner-status.success { background: #1e3a2b !important; color: #6fc88a !important; }
.api-runner-status.error   { background: #3a1e1e !important; color: #e87878 !important; }

/* Severity 뱃지 (sev-info blue → gray) */
.sev-badge.sev-info { background: #4a5566 !important; }

/* 로그인 페이지 그라디언트 — 검은~다크블루 */
.login-page {
  background: linear-gradient(135deg, #0f1620 0%, #1e2a3a 50%, #2d3748 100%) !important;
}
.login-card {
  background: var(--panel-bg) !important;
  border: 1px solid var(--panel-border-strong) !important;
  color: var(--gray-700);
}
.login-card h2, .login-card .login-title { color: var(--gray-900); }
.login-footer .security-tip {
  background: var(--panel-bg-2) !important;
  color: var(--gray-600) !important;
  border-color: var(--panel-border) !important;
}
.login-footer code { background: var(--body-bg) !important; color: var(--gray-700) !important; }

/* 보안 점수 카드는 의미상 컬러 유지 (A=초록, F=빨강) — 변경 없음 */

/* 일반 hint / muted 텍스트 */
.hint, .muted, .text-muted, small.hint { color: var(--gray-500) !important; }

/* 보더 일괄 다크화 — 라이트 톤이었던 곳 */
hr { border-color: var(--panel-border); }
.divider { background: var(--panel-border); }

/* 입력+버튼 그룹 컨테이너 */
.input-with-action {
  background: var(--body-bg);
  border-radius: 6px;
}
.input-with-action .btn-icon { color: var(--gray-500); }

/* 폼 그룹 label */
.form-group label { color: var(--gray-700); }
.form-group label i { color: var(--gray-500); }

/* 결과 상세 패널 / 응답 표시 */
.response-pre, .request-pre, .json-view {
  background: #0d141d !important;
  color: #c5cdd8 !important;
  border: 1px solid var(--panel-border) !important;
}

/* 카테고리/태그 칩 */
.tag, .chip, .filter-chip {
  background: var(--panel-bg-3) !important;
  color: var(--gray-700) !important;
  border: 1px solid var(--panel-border-strong) !important;
}
.tag.active, .chip.active, .filter-chip.active {
  background: var(--gray-700) !important;
  color: var(--gray-900) !important;
}

/* 통계 요약 박스 */
.stat-box, .summary-box {
  background: var(--panel-bg-2) !important;
  border: 1px solid var(--panel-border) !important;
  color: var(--gray-800) !important;
}
.stat-box .label { color: var(--gray-500); }
.stat-box .value { color: var(--gray-900); }

/* 셀렉트 옵션 텍스트 강제 다크 */
select option { background: var(--panel-bg); color: var(--gray-800); }

/* 로그아웃 버튼 */
.btn-logout {
  background: rgba(255,255,255,0.05) !important;
  color: var(--gray-700) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
}
.btn-logout:hover {
  background: rgba(255,255,255,0.1) !important;
  color: var(--gray-900) !important;
}

/* ════════════════════════════════════════════════════════════════════════
   ===== API Tester 패널 + 워크플로우 수동 호출 버튼 =====
   ════════════════════════════════════════════════════════════════════════ */

/* 워크플로우 종 + API Tester 가로 분할 */
.wf-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  align-items: start;
}
@media (min-width: 1400px) {
  .wf-split {
    grid-template-columns: 1.4fr 1fr;  /* 좌(워크플로우) 약간 넓게, 우(API Tester) */
  }
}

.wf-split-left { min-width: 0; }
.wf-split-right { min-width: 0; }

/* 워크플로우 단계 행에 수동 호출 버튼이 들어갈 공간 확보 */
.wf-step {
  display: grid;
  grid-template-columns: 38px 1fr auto;
  align-items: center;
  gap: 10px;
  position: relative;
}
.wf-step-actions {
  flex-shrink: 0;
  align-self: center;
}

/* 단계별 작은 수동 호출 버튼 */
.btn.btn-xs,
.btn-xs {
  font-size: 0.72rem !important;
  padding: 4px 8px !important;
  border-radius: 4px !important;
  line-height: 1.2;
  gap: 4px;
}
.wf-step-call-btn {
  background: transparent !important;
  border: 1px solid var(--panel-border-strong) !important;
  color: var(--gray-600) !important;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.12s ease;
}
.wf-step-call-btn:hover:not(:disabled) {
  background: var(--panel-bg-3) !important;
  color: var(--gray-900) !important;
  border-color: var(--gray-500) !important;
}
.wf-step-call-btn:disabled {
  opacity: 0.55;
  cursor: wait;
}
.wf-step-call-btn.loading i {
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.wf-step-call-btn i { color: #e0b56b; }

/* ====================== API Tester Panel ====================== */
.api-tester-panel {
  background: var(--panel-bg) !important;
  border: 1px solid var(--panel-border-strong);
  border-radius: var(--radius);
  position: sticky;
  top: 16px;
  max-height: calc(100vh - 32px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', monospace;
  box-shadow: var(--shadow);
}

.api-tester-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--panel-bg-2);
  border-bottom: 1px solid var(--panel-border);
  flex-shrink: 0;
}
.api-tester-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--gray-900);
}
.api-tester-title i { color: #e0b56b; }
.api-tester-actions {
  display: flex;
  gap: 6px;
}

/* 비어있는 안내 상태 */
.api-tester-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  color: var(--gray-500);
  text-align: center;
}
.api-tester-empty i {
  font-size: 2.4rem;
  margin-bottom: 12px;
  color: var(--gray-400);
}
.api-tester-empty p { color: var(--gray-700); font-size: 0.92rem; margin: 4px 0; }
.api-tester-empty small { color: var(--gray-500); font-size: 0.78rem; }

/* 실제 콘텐츠 영역 (스크롤 가능) */
.api-tester-body {
  flex: 1;
  overflow-y: auto;
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* 각 섹션 (REQUEST/HEADERS/BODY/RESPONSE) */
.api-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.api-section-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.8px;
  color: var(--gray-500);
}
.api-section-label {
  background: var(--panel-bg-2);
  padding: 2px 8px;
  border-radius: 3px;
  border: 1px solid var(--panel-border);
}
.api-section-response .api-section-label {
  background: rgba(40, 167, 69, 0.1);
  color: #6fc88a;
  border-color: rgba(40, 167, 69, 0.3);
}

/* 상태 텍스트 (RUNNING/SUCCESS/FAIL) */
.api-tester-status {
  margin-left: auto;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0;
}
.api-tester-status.status-running { color: #e0b56b; }
.api-tester-status.status-success { color: #6fc88a; }
.api-tester-status.status-fail    { color: #e87878; }
.api-tester-status.status-error   { color: #e87878; }

.api-tester-elapsed {
  margin-left: auto;
  font-size: 0.7rem;
  color: var(--gray-500);
  font-weight: 500;
  letter-spacing: 0;
}

/* mini-copy 버튼 (각 섹션 우상단) */
.api-mini-btn {
  margin-left: auto;
  background: transparent;
  border: 1px solid var(--panel-border-strong);
  color: var(--gray-500);
  font-size: 0.7rem;
  padding: 2px 6px;
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.1s ease;
}
.api-mini-btn:hover {
  background: var(--panel-bg-3);
  color: var(--gray-900);
}

/* Request line: [METHOD] URL */
.api-request-line {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--body-bg);
  padding: 10px 12px;
  border-radius: 4px;
  border: 1px solid var(--panel-border);
  word-break: break-all;
}
.api-method-badge {
  display: inline-block;
  font-family: 'Menlo', 'Consolas', monospace;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 3px 8px;
  border-radius: 3px;
  flex-shrink: 0;
}
/* api-method-badge.method-* 는 다크 테마 method-* 색을 그대로 사용 */
.api-url {
  font-family: 'Menlo', 'Consolas', monospace;
  font-size: 0.82rem;
  color: var(--gray-800);
  background: transparent;
  padding: 0;
  word-break: break-all;
  line-height: 1.4;
}

/* JSON / Headers 코드 블록 */
.api-code-block {
  background: #0d141d !important;
  color: #c5cdd8 !important;
  border: 1px solid var(--panel-border) !important;
  padding: 10px 12px !important;
  border-radius: 4px !important;
  font-family: 'Menlo', 'Consolas', 'Courier New', monospace !important;
  font-size: 0.78rem !important;
  line-height: 1.55 !important;
  max-height: 280px;
  overflow: auto;
  white-space: pre;
  word-wrap: normal;
  margin: 0;
}
.api-headers { color: #a8b3c1 !important; }
.api-json    { color: #c5cdd8 !important; }
.api-resp-body { max-height: 360px; }

/* Response meta line: [200] OK */
.api-resp-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--body-bg);
  border-radius: 4px;
  border: 1px solid var(--panel-border);
  margin-bottom: 4px;
}
.api-resp-code {
  display: inline-block;
  font-family: 'Menlo', 'Consolas', monospace;
  font-size: 0.85rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 3px;
  letter-spacing: 0.5px;
}
.api-resp-code.code-2xx { background: #1e3a2b !important; color: #6fc88a !important; }
.api-resp-code.code-3xx { background: #1e3a4d !important; color: #8ab4d0 !important; }
.api-resp-code.code-4xx { background: #3a2e15 !important; color: #e0b56b !important; }
.api-resp-code.code-5xx { background: #3a1e1e !important; color: #e87878 !important; }
.api-resp-statustext {
  font-size: 0.78rem;
  color: var(--gray-500);
  font-family: 'Menlo', 'Consolas', monospace;
}

/* 모바일 (1400px 미만): API Tester 패널이 워크플로우 아래로 */
@media (max-width: 1399px) {
  .api-tester-panel {
    position: relative;
    top: 0;
    max-height: none;
    margin-top: 8px;
  }
  .api-code-block { max-height: 240px; }
}

/* 워크플로우 그리드는 좌측 컬럼 안에서 항상 1열 (좌측 공간 제한적) */
@media (min-width: 1400px) {
  .wf-split-left .workflow-grid-2x3 {
    grid-template-columns: 1fr;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   ===== 로그인 화면 가독성 픽스 — 흰 배경 위 흰 글자 문제 해결 =====
   다크 테마 오버라이드가 적용되면서 login-card 흰 배경 + h1 흰 글자 충돌.
   로그인 화면은 카드 자체를 다크 테마로 통일하고 텍스트는 명확한 대조 컬러로.
   ════════════════════════════════════════════════════════════════════════ */

/* 페이지 배경: 사이드바와 동일한 다크 톤 */
.login-page {
  background: linear-gradient(135deg, #0a121d 0%, #1e2a3a 50%, #2d3748 100%) !important;
  min-height: 100vh;
}

/* 카드 자체를 다크 패널로 — 흰 배경 제거 */
.login-card {
  background: var(--panel-bg) !important;       /* #1e2a3a — 사이드바 톤 */
  border: 1px solid var(--panel-border-strong) !important;
  color: var(--gray-700);                       /* 라이트 텍스트 (다크 테마 시멘틱) */
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7) !important;
}

/* 헤더 (타이틀 영역): 더 어두운 톤 + 명확한 흰색 텍스트 */
.login-header {
  background: linear-gradient(135deg, #0d141d 0%, #16202d 60%, #1e2a3a 100%) !important;
  color: #ffffff !important;                    /* 어두운 배경 위 순백 텍스트 (최대 대비) */
  border-bottom: 1px solid var(--panel-border-strong);
}
.login-header h1 {
  color: #ffffff !important;                    /* h1 강제 흰색 — 흰 배경 충돌 더 이상 없음 */
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);       /* 가독성 보강 */
  font-weight: 700;
}
.login-header p {
  color: #c5cdd8 !important;                    /* 부제: 약간 어두운 회백색 */
  opacity: 1;                                   /* 기존 0.8 제거 — 명도 확보 */
}
.login-logo {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffd166 !important;                    /* 따뜻한 노란 강조 (인증 = 보안 키 느낌) */
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* 폼 영역: 다크 배경에서 라벨/힌트 모두 명확한 대조 색상 */
.login-form .form-group label {
  color: #e5e9ef !important;                    /* 라벨: 거의 흰색 (높은 대비) */
  font-weight: 600;
}
.login-form .form-group label i {
  color: #a8b3c1 !important;                    /* 아이콘: 약간 톤다운 */
}

/* input: 다크 배경 + 밝은 텍스트 + 명확한 보더 */
.login-form .form-group input {
  background: var(--body-bg) !important;        /* #16202d */
  border: 1px solid var(--panel-border-strong) !important;
  color: #f5f7fa !important;                    /* 입력값 거의 흰색 (가독성 최우선) */
}
.login-form .form-group input::placeholder {
  color: #6c7a8a !important;                    /* placeholder: 중간 회색 (입력값과 구분) */
  opacity: 0.85;
}
.login-form .form-group input:focus {
  border-color: #8a96a8 !important;             /* 포커스: 밝은 회색 (blue 제거됨) */
  box-shadow: 0 0 0 3px rgba(138, 150, 168, 0.18) !important;
}

/* 키 표시/숨김 버튼 */
.login-form .input-with-action .btn-icon {
  background: var(--panel-bg-2) !important;
  border: 1px solid var(--panel-border-strong) !important;
  color: #a8b3c1 !important;
}
.login-form .input-with-action .btn-icon:hover {
  background: var(--panel-bg-3) !important;
  color: #ffffff !important;
}

/* hint(작은 도움말): 충분히 읽히는 톤 */
.login-form .hint {
  color: #8a96a8 !important;
  font-size: 11px;
}

/* 로그인 결과 alert (성공/실패/정보) — 다크 톤 적용 */
.login-result .alert {
  background: var(--panel-bg-2) !important;
  color: var(--gray-800) !important;
  border: 1px solid var(--panel-border-strong);
}
.login-result .alert pre {
  background: rgba(0, 0, 0, 0.4) !important;
  color: #c5cdd8 !important;
}
.login-result .alert-success {
  background: rgba(40, 167, 69, 0.12) !important;
  color: #6fc88a !important;
  border-color: rgba(40, 167, 69, 0.35) !important;
}
.login-result .alert-error {
  background: rgba(220, 53, 69, 0.12) !important;
  color: #f08989 !important;
  border-color: rgba(220, 53, 69, 0.35) !important;
}
.login-result .alert-info {
  background: rgba(138, 150, 168, 0.12) !important;
  color: #c5cdd8 !important;
  border-color: rgba(138, 150, 168, 0.35) !important;
}
.login-result .alert i {
  flex-shrink: 0;
}

/* footer (보안 안내) */
.login-footer {
  background: rgba(0, 0, 0, 0.25) !important;
  border-top: 1px solid var(--panel-border-strong) !important;
}
.login-footer .security-tip,
.security-tip {
  color: #a8b3c1 !important;
  background: transparent !important;
  border: none !important;
}
.security-tip i {
  color: #6fc88a !important;                    /* 보안 lock 아이콘: 녹색 (의미 유지) */
}
.security-tip code,
.login-footer code {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #e5e9ef !important;
  padding: 1px 6px;
  border-radius: 3px;
  font-family: 'Menlo', 'Consolas', monospace;
  font-size: 10.5px;
}

/* 로그인 버튼: 다크 테마 primary 그라디언트 + 명확한 흰색 텍스트 */
.login-form .btn-primary,
.login-form .btn.btn-primary {
  background: linear-gradient(135deg, #4a5566 0%, #2d3748 100%) !important;
  color: #ffffff !important;                    /* 강제 흰색 (대비 확보) */
  border: 1px solid #5a6678 !important;
  font-weight: 600;
  padding: 11px 16px !important;
  font-size: 14px !important;
}
.login-form .btn-primary:hover:not(:disabled) {
  background: linear-gradient(135deg, #5a6678 0%, #3a4556 100%) !important;
  color: #ffffff !important;
  filter: brightness(1.08);
}
.login-form .btn-primary i { color: #ffffff !important; }

/* ════════════════════════════════════════════════════════════════════════
   ===== 우측 본문(.app-shell > main) Light 모드 — Pringo CRM 스타일 =====
   좌측 사이드바는 다크 톤 유지, 우측 콘텐츠 영역만 라이트로 전환
   요청: "우측 Body화면, light모드 스타일로"
   ════════════════════════════════════════════════════════════════════════ */

/* 본문 메인 컨테이너 — 화이트~연그레이 배경 */
.app-shell > main,
.app-shell > .main-container,
.app-shell main.main-container {
  background: #f5f7fa !important;       /* Pringo body 배경 — 매우 옅은 회색 */
  color: #1f2937 !important;             /* 본문 기본 텍스트 — 다크 그레이 */
  min-height: calc(100vh - 140px);
}

/* 본문 내 텍스트 색상 — 라이트 모드 표준 */
.app-shell > main h1,
.app-shell > main h2,
.app-shell > main h3,
.app-shell > main h4,
.app-shell > main h5,
.app-shell > main h6 {
  color: #1f2937 !important;             /* gray-800 */
}
.app-shell > main p,
.app-shell > main span,
.app-shell > main label,
.app-shell > main small,
.app-shell > main li,
.app-shell > main div {
  color: inherit;
}
.app-shell > main a { color: #2d3748 !important; }
.app-shell > main a:hover { color: #1a202c !important; }

/* 카드 — 화이트 배경 + 옅은 회색 보더 */
.app-shell > main .card {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  color: #1f2937 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}
.app-shell > main .card-header {
  background: #f9fafb !important;
  border-bottom: 1px solid #e5e7eb !important;
}
.app-shell > main .card-header h2 { color: #1f2937 !important; }
.app-shell > main .card-header h2 i { color: #4b5563 !important; }
.app-shell > main .card-body { color: #374151 !important; }

/* 흰 배경 컴포넌트 일괄 라이트화 */
.app-shell > main .test-item,
.app-shell > main .sec-item,
.app-shell > main .form-card,
.app-shell > main .test-detail,
.app-shell > main .config-section,
.app-shell > main .endpoint-list,
.app-shell > main .endpoint-row,
.app-shell > main .security-info-box,
.app-shell > main .session-card,
.app-shell > main .whitelist-section {
  background: #ffffff !important;
  border-color: #e5e7eb !important;
  color: #374151 !important;
}

/* 폼 컨트롤 — 화이트 배경 + 다크 텍스트 */
.app-shell > main input[type="text"],
.app-shell > main input[type="password"],
.app-shell > main input[type="email"],
.app-shell > main input[type="number"],
.app-shell > main input[type="search"],
.app-shell > main input[type="url"],
.app-shell > main input:not([type]),
.app-shell > main select,
.app-shell > main textarea,
.app-shell > main .form-control {
  background: #ffffff !important;
  border: 1px solid #d1d5db !important;
  color: #1f2937 !important;
}
.app-shell > main input:focus,
.app-shell > main select:focus,
.app-shell > main textarea:focus,
.app-shell > main .form-control:focus {
  border-color: #9ca3af !important;
  box-shadow: 0 0 0 2px rgba(156, 163, 175, 0.25) !important;
  outline: none;
}
.app-shell > main input::placeholder,
.app-shell > main textarea::placeholder {
  color: #9ca3af !important;
  opacity: 1;
}

/* 버튼 — Light 톤 버전 (primary는 다크 그레이 유지 — 사이드바와 조화) */
.app-shell > main .btn-secondary {
  background: #f3f4f6 !important;
  color: #1f2937 !important;
  border: 1px solid #d1d5db !important;
}
.app-shell > main .btn-secondary:hover:not(:disabled) {
  background: #e5e7eb !important;
}
.app-shell > main .btn-ghost {
  background: #ffffff !important;
  color: #374151 !important;
  border: 1px solid #d1d5db !important;
}
.app-shell > main .btn-ghost:hover:not(:disabled) {
  background: #f3f4f6 !important;
  color: #1f2937 !important;
}
.app-shell > main .btn-icon {
  color: #6b7280 !important;
}
.app-shell > main .btn-icon:hover {
  background: #f3f4f6 !important;
  color: #1f2937 !important;
}

/* 테이블 — Pringo 스타일 (헤더 회색 + 바디 화이트) */
.app-shell > main table {
  color: #374151 !important;
  background: #ffffff !important;
}
.app-shell > main thead th {
  background: #6b7280 !important;        /* Pringo 테이블 헤더 톤 */
  color: #ffffff !important;
  border-bottom: 1px solid #4b5563 !important;
  font-weight: 600;
}
.app-shell > main tbody tr {
  border-bottom: 1px solid #e5e7eb !important;
  background: transparent !important;
}
.app-shell > main tbody tr:nth-child(even) {
  background: #f9fafb !important;
}
.app-shell > main tbody tr:hover {
  background: #f3f4f6 !important;
}
.app-shell > main td,
.app-shell > main th {
  border-color: #e5e7eb !important;
}

/* code/pre — Light 코드블록 (단, API Tester 패널은 다크 유지) */
.app-shell > main pre,
.app-shell > main code {
  background: #f3f4f6 !important;
  color: #1f2937 !important;
  border: 1px solid #e5e7eb !important;
}
/* API Tester 패널 내부 코드블록은 다크 유지 (가독성 + 의미) */
.app-shell > main .api-tester-panel pre,
.app-shell > main .api-tester-panel code,
.app-shell > main .api-code-block {
  background: #0d141d !important;
  color: #c5cdd8 !important;
  border: 1px solid #2a3a4d !important;
}

/* HTTP 메서드 뱃지 — Light 모드 컬러풀 톤 */
.app-shell > main .method-GET    { background: #dbeafe !important; color: #1e40af !important; }
.app-shell > main .method-POST   { background: #dcfce7 !important; color: #166534 !important; }
.app-shell > main .method-PUT    { background: #fef3c7 !important; color: #92400e !important; }
.app-shell > main .method-PATCH  { background: #ffedd5 !important; color: #9a3412 !important; }
.app-shell > main .method-DELETE { background: #fee2e2 !important; color: #991b1b !important; }
.app-shell > main .method-input.method-GET    { background: #dbeafe !important; color: #1e40af !important; }
.app-shell > main .method-input.method-POST   { background: #dcfce7 !important; color: #166534 !important; }
.app-shell > main .method-input.method-PUT    { background: #fef3c7 !important; color: #92400e !important; }
.app-shell > main .method-input.method-PATCH  { background: #f3e8ff !important; color: #6b21a8 !important; }
.app-shell > main .method-input.method-DELETE { background: #fee2e2 !important; color: #991b1b !important; }

/* HTTP code 뱃지 — Light 톤 */
.app-shell > main .code-2xx { background: #dcfce7 !important; color: #166534 !important; }
.app-shell > main .code-3xx { background: #dbeafe !important; color: #1e40af !important; }
.app-shell > main .code-4xx { background: #fef3c7 !important; color: #92400e !important; }
.app-shell > main .code-5xx { background: #fee2e2 !important; color: #991b1b !important; }

/* 워크플로우 카드 — Light 톤 */
.app-shell > main .wf-card {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  color: #374151 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}
.app-shell > main .wf-card-title { color: #111827 !important; }
.app-shell > main .wf-card-desc { color: #6b7280 !important; }
.app-shell > main .wf-step {
  background: #f9fafb !important;
  border: 1px solid #e5e7eb !important;
}
.app-shell > main .wf-step-label { color: #1f2937 !important; }
.app-shell > main .wf-step-status { color: #6b7280 !important; }
.app-shell > main .wf-step-msg { color: #9ca3af !important; }
.app-shell > main .wf-step-icon {
  background: #ffffff !important;
  border: 1px solid #d1d5db !important;
  color: #6b7280 !important;
}
.app-shell > main .wf-step.status-pass .wf-step-icon { background: #dcfce7 !important; border-color: #22c55e !important; color: #166534 !important; }
.app-shell > main .wf-step.status-fail .wf-step-icon { background: #fee2e2 !important; border-color: #ef4444 !important; color: #991b1b !important; }
.app-shell > main .wf-step.status-skip .wf-step-icon { background: #fef3c7 !important; border-color: #f59e0b !important; color: #92400e !important; }
.app-shell > main .wf-step.status-run  .wf-step-icon { background: #e5e7eb !important; border-color: #9ca3af !important; color: #374151 !important; }

.app-shell > main .wf-card-meta,
.app-shell > main .wf-card-actions,
.app-shell > main .wf-summary {
  border-color: #e5e7eb !important;
}
.app-shell > main .wf-cat-badge {
  background: #f3f4f6 !important;
  color: #374151 !important;
  border: 1px solid #e5e7eb !important;
}

/* workflow-empty 빈 상태 */
.app-shell > main .workflow-empty {
  background: #ffffff !important;
  color: #6b7280 !important;
  border: 1px dashed #d1d5db !important;
}
.app-shell > main .workflow-empty p { color: #374151 !important; }
.app-shell > main .workflow-empty small { color: #9ca3af !important; }
.app-shell > main .workflow-empty i { color: #9ca3af !important; }

/* 활성 메뉴 뱃지 */
.app-shell > main .active-menu-badge {
  background: #f3f4f6 !important;
  color: #374151 !important;
  border: 1px solid #e5e7eb !important;
}
.app-shell > main .active-menu-badge.active {
  background: #eef2ff !important;
  color: #3730a3 !important;
  border: 1px solid #c7d2fe !important;
}

/* 워크플로우 힌트 */
.app-shell > main .workflow-hint {
  background: #f9fafb !important;
  color: #4b5563 !important;
  border-left: 4px solid #9ca3af !important;
}
.app-shell > main .workflow-hint i { color: #6b7280 !important; }
.app-shell > main .workflow-hint b,
.app-shell > main .workflow-hint strong { color: #111827 !important; }

/* 보안 점수 위젯 */
.app-shell > main .sec-score-wrap {
  background: #f9fafb !important;
  border: 1px solid #e5e7eb !important;
}

/* 경고 배너 — Light 톤 유지 (이미 라이트) */
.app-shell > main .warning-banner {
  background: linear-gradient(135deg, #fef3c7, #fde68a) !important;
  border-left: 4px solid #f59e0b !important;
  color: #78350f !important;
}
.app-shell > main .warning-banner i { color: #b45309 !important; }

/* api-runner / 상태 표시 */
.app-shell > main .api-runner-status.running { background: #f3f4f6 !important; color: #1f2937 !important; }
.app-shell > main .api-runner-status.warn    { background: #fef3c7 !important; color: #92400e !important; }
.app-shell > main .api-runner-status.success { background: #dcfce7 !important; color: #166534 !important; }
.app-shell > main .api-runner-status.error   { background: #fee2e2 !important; color: #991b1b !important; }

/* Severity 뱃지 */
.app-shell > main .sev-badge.sev-info     { background: #6b7280 !important; color: #ffffff !important; }
.app-shell > main .sev-badge.sev-low      { background: #3b82f6 !important; color: #ffffff !important; }
.app-shell > main .sev-badge.sev-medium   { background: #f59e0b !important; color: #ffffff !important; }
.app-shell > main .sev-badge.sev-high     { background: #ef4444 !important; color: #ffffff !important; }
.app-shell > main .sev-badge.sev-critical { background: #991b1b !important; color: #ffffff !important; }

/* 모달은 본문 위에 떠있으므로 라이트 유지하되 컨테이너만 별도 처리 — 영향 없음 */

/* 우측 API Tester 패널은 다크 톤 유지 (요청자 "api tester 표준 코딩 스타일" 의도)
   단, 본문 라이트와 시각적 분리되도록 보더/그림자 강화 */
.app-shell > main .api-tester-panel {
  /* 다크 톤 그대로 유지 — 별도 오버라이드 없음 */
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12) !important;
}

/* 결과 상태 카드 좌측 strip (라이트 호환) */
.app-shell > main .test-item.status-pass { border-left: 4px solid #22c55e !important; }
.app-shell > main .test-item.status-fail { border-left: 4px solid #ef4444 !important; }
.app-shell > main .test-item.status-skip { border-left: 4px solid #f59e0b !important; }
.app-shell > main .test-item.status-run  { border-left: 4px solid #6b7280 !important; }

/* 탭 컨텐츠 영역 배경 */
.app-shell > main .tab-content,
.app-shell > main section.tab-pane {
  background: transparent !important;
}


/* ════════════════════════════════════════════════════════════════════════
   ===== 우측 API Tester 패널 — Light Gray 톤 전환 =====
   요청: "우측 body화면, 스타일 전체 light gray 스타일로 전체 수정"
   본문 light 변환에 이어 API Tester 패널도 라이트 그레이로 통일
   (Postman/Insomnia 라이트 모드 스타일 참고)
   ════════════════════════════════════════════════════════════════════════ */

/* 패널 본체 — 화이트 + 옅은 보더 */
.app-shell > main .api-tester-panel {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  color: #1f2937 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
}

/* 헤더 영역 */
.app-shell > main .api-tester-panel .api-tester-header {
  background: #f9fafb !important;
  border-bottom: 1px solid #e5e7eb !important;
}
.app-shell > main .api-tester-panel .api-tester-title {
  color: #1f2937 !important;
}
.app-shell > main .api-tester-panel .api-tester-title i {
  color: #d97706 !important;                /* 번개 아이콘 — 앰버 (가독성) */
}

/* 비어있는 안내 상태 */
.app-shell > main .api-tester-panel .api-tester-empty {
  color: #6b7280 !important;
  background: #ffffff !important;
}
.app-shell > main .api-tester-panel .api-tester-empty i {
  color: #9ca3af !important;
}
.app-shell > main .api-tester-panel .api-tester-empty p {
  color: #374151 !important;
}
.app-shell > main .api-tester-panel .api-tester-empty small {
  color: #6b7280 !important;
}

/* 본문 (스크롤 영역) */
.app-shell > main .api-tester-panel .api-tester-body {
  background: #ffffff !important;
}

/* 섹션 레이블 (REQUEST/HEADERS/BODY/RESPONSE) */
.app-shell > main .api-tester-panel .api-section-head {
  color: #6b7280 !important;
}
.app-shell > main .api-tester-panel .api-section-label {
  background: #f3f4f6 !important;
  color: #374151 !important;
  border: 1px solid #e5e7eb !important;
}
.app-shell > main .api-tester-panel .api-section-response .api-section-label {
  background: #dcfce7 !important;
  color: #166534 !important;
  border-color: #bbf7d0 !important;
}

/* 상태 텍스트 (RUNNING/SUCCESS/FAIL) — 진한 컬러로 가독성 강화 */
.app-shell > main .api-tester-panel .api-tester-status.status-running {
  color: #d97706 !important;
}
.app-shell > main .api-tester-panel .api-tester-status.status-success {
  color: #16a34a !important;
}
.app-shell > main .api-tester-panel .api-tester-status.status-fail,
.app-shell > main .api-tester-panel .api-tester-status.status-error {
  color: #dc2626 !important;
}

.app-shell > main .api-tester-panel .api-tester-elapsed {
  color: #6b7280 !important;
}

/* mini-copy 버튼 */
.app-shell > main .api-tester-panel .api-mini-btn {
  background: #ffffff !important;
  border: 1px solid #d1d5db !important;
  color: #6b7280 !important;
}
.app-shell > main .api-tester-panel .api-mini-btn:hover {
  background: #f3f4f6 !important;
  color: #1f2937 !important;
  border-color: #9ca3af !important;
}

/* REQUEST line: [METHOD] URL */
.app-shell > main .api-tester-panel .api-request-line {
  background: #f9fafb !important;
  border: 1px solid #e5e7eb !important;
}
.app-shell > main .api-tester-panel .api-url {
  color: #1f2937 !important;
}

/* HTTP 메서드 뱃지 — Light 톤 (이미 light 모드에 정의되어 있지만 패널 스코프에서도 강제) */
.app-shell > main .api-tester-panel .api-method-badge.method-GET    { background: #dbeafe !important; color: #1e40af !important; }
.app-shell > main .api-tester-panel .api-method-badge.method-POST   { background: #dcfce7 !important; color: #166534 !important; }
.app-shell > main .api-tester-panel .api-method-badge.method-PUT    { background: #fef3c7 !important; color: #92400e !important; }
.app-shell > main .api-tester-panel .api-method-badge.method-PATCH  { background: #f3e8ff !important; color: #6b21a8 !important; }
.app-shell > main .api-tester-panel .api-method-badge.method-DELETE { background: #fee2e2 !important; color: #991b1b !important; }

/* 코드 블록 (HEADERS / BODY / RESPONSE body) — Light 회색 배경 + 다크 텍스트
   ※ 이전 light 섹션의 "api-tester-panel 내 pre는 다크 유지" 규칙을 명시적으로 오버라이드 */
.app-shell > main .api-tester-panel pre,
.app-shell > main .api-tester-panel code,
.app-shell > main .api-tester-panel .api-code-block {
  background: #f9fafb !important;          /* 매우 옅은 회색 */
  color: #1f2937 !important;                /* 다크 텍스트 (가독성) */
  border: 1px solid #e5e7eb !important;
}
.app-shell > main .api-tester-panel .api-headers {
  color: #374151 !important;                /* 헤더 텍스트 — 약간 더 옅은 톤 */
}
.app-shell > main .api-tester-panel .api-json {
  color: #1f2937 !important;
}

/* Response meta line: [200] OK */
.app-shell > main .api-tester-panel .api-resp-meta {
  background: #f9fafb !important;
  border: 1px solid #e5e7eb !important;
}
.app-shell > main .api-tester-panel .api-resp-statustext {
  color: #6b7280 !important;
}

/* HTTP code 뱃지 — Light 톤 (강제) */
.app-shell > main .api-tester-panel .api-resp-code.code-2xx { background: #dcfce7 !important; color: #166534 !important; border: 1px solid #bbf7d0 !important; }
.app-shell > main .api-tester-panel .api-resp-code.code-3xx { background: #dbeafe !important; color: #1e40af !important; border: 1px solid #bfdbfe !important; }
.app-shell > main .api-tester-panel .api-resp-code.code-4xx { background: #fef3c7 !important; color: #92400e !important; border: 1px solid #fde68a !important; }
.app-shell > main .api-tester-panel .api-resp-code.code-5xx { background: #fee2e2 !important; color: #991b1b !important; border: 1px solid #fecaca !important; }

/* 스크롤바 (Webkit) — Light 톤에 맞춘 옅은 회색 */
.app-shell > main .api-tester-panel .api-tester-body::-webkit-scrollbar,
.app-shell > main .api-tester-panel .api-code-block::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.app-shell > main .api-tester-panel .api-tester-body::-webkit-scrollbar-track,
.app-shell > main .api-tester-panel .api-code-block::-webkit-scrollbar-track {
  background: #f3f4f6;
}
.app-shell > main .api-tester-panel .api-tester-body::-webkit-scrollbar-thumb,
.app-shell > main .api-tester-panel .api-code-block::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 4px;
}
.app-shell > main .api-tester-panel .api-tester-body::-webkit-scrollbar-thumb:hover,
.app-shell > main .api-tester-panel .api-code-block::-webkit-scrollbar-thumb:hover {
  background: #9ca3af;
}


/* ════════════════════════════════════════════════════════════════════════
   ===== HEADERS 레퍼런스 스타일 — 버튼 & 레이블 일괄 적용 =====
   요청: "우측 body화면의 버튼 및 레이블은 모두 첨부 스타일로 적용"
   레퍼런스 스펙:
     - 배경 #f5f5f5 (very light gray)
     - 보더 1px solid #d9d9d9
     - 보더 radius 2px (거의 각진 둥근 사각형)
     - 텍스트 #4a4a4a (다크 그레이)
     - font-weight 600
     - font-size 0.8rem (~12.8px)
     - padding 3px 8px (작은 캡션 톤)
     - letter-spacing 0.5px (대문자 정돈)
     - 플랫 — 그림자 없음
   적용 범위: .app-shell > main 내부 모든 버튼 (.btn, button) 및 레이블성 요소
              (.api-section-label, .badge, .tag, label 등은 의도된 식별성 유지)
   ════════════════════════════════════════════════════════════════════════ */

/* ───── 공통 헤더-스타일 변수 (재사용성) ───── */
.app-shell > main {
  --hdr-bg: #f5f5f5;
  --hdr-bg-hover: #ececec;
  --hdr-bg-active: #e0e0e0;
  --hdr-border: #d9d9d9;
  --hdr-border-hover: #b8b8b8;
  --hdr-text: #4a4a4a;
  --hdr-text-hover: #1f1f1f;
  --hdr-radius: 2px;
  --hdr-font-size: 0.8rem;
  --hdr-font-weight: 600;
  --hdr-letter-spacing: 0.5px;
  --hdr-padding-y: 6px;
  --hdr-padding-x: 12px;
}

/* ───── 버튼 일괄 — 우측 본문 내부 모든 .btn ───── */
.app-shell > main .btn,
.app-shell > main button.btn,
.app-shell > main button.btn-primary,
.app-shell > main button.btn-secondary,
.app-shell > main button.btn-ghost,
.app-shell > main .form-actions button,
.app-shell > main .header-actions button,
.app-shell > main .wf-card-actions button,
.app-shell > main .wf-step-call-btn,
.app-shell > main .api-mini-btn {
  background: var(--hdr-bg) !important;
  border: 1px solid var(--hdr-border) !important;
  border-radius: var(--hdr-radius) !important;
  color: var(--hdr-text) !important;
  font-size: var(--hdr-font-size) !important;
  font-weight: var(--hdr-font-weight) !important;
  letter-spacing: var(--hdr-letter-spacing) !important;
  padding: var(--hdr-padding-y) var(--hdr-padding-x) !important;
  box-shadow: none !important;
  background-image: none !important;     /* primary 의 gradient 제거 */
  text-transform: none;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.app-shell > main .btn:hover:not(:disabled),
.app-shell > main button.btn:hover:not(:disabled),
.app-shell > main .wf-step-call-btn:hover:not(:disabled),
.app-shell > main .api-mini-btn:hover:not(:disabled) {
  background: var(--hdr-bg-hover) !important;
  border-color: var(--hdr-border-hover) !important;
  color: var(--hdr-text-hover) !important;
}

.app-shell > main .btn:active:not(:disabled),
.app-shell > main button.btn:active:not(:disabled) {
  background: var(--hdr-bg-active) !important;
}

.app-shell > main .btn:disabled,
.app-shell > main button.btn:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

/* primary 액션만 미세하게 강조 — 보더 색을 진하게 (배경/텍스트는 동일 톤 유지) */
.app-shell > main .btn-primary {
  border-color: #9a9a9a !important;
  color: #1f1f1f !important;
}
.app-shell > main .btn-primary:hover:not(:disabled) {
  background: var(--hdr-bg-hover) !important;
  border-color: #6b6b6b !important;
}

/* 위험 액션(취소/삭제) — 보더 톤 살짝 워닝 */
.app-shell > main .btn-danger {
  border-color: #c97373 !important;
  color: #a02828 !important;
}
.app-shell > main .btn-danger:hover:not(:disabled) {
  background: #fdf2f2 !important;
  border-color: #a02828 !important;
}

/* btn-xs (작은 사이즈) — 패딩만 줄이고 다른 속성 유지 */
.app-shell > main .btn-xs,
.app-shell > main .api-mini-btn {
  padding: 3px 8px !important;
  font-size: 0.72rem !important;
}

/* 버튼 내부 아이콘 색 — 텍스트 색 상속 (eye-catching 강조 제거) */
.app-shell > main .btn i,
.app-shell > main button.btn i {
  color: inherit !important;
}

/* ───── 레이블 일괄 — form-group label, settings-section h3 외 ───── */
/* form-group label 은 입력 레이블 컨텍스트라 별도 처리 — 굵게만 유지하고 일반 텍스트 톤 */
.app-shell > main .form-group label,
.app-shell > main label.form-label {
  background: transparent !important;
  border: none !important;
  color: var(--hdr-text-hover) !important;
  font-size: var(--hdr-font-size) !important;
  font-weight: var(--hdr-font-weight) !important;
  letter-spacing: 0 !important;
  padding: 0 !important;
  display: block !important;
  margin-bottom: 6px !important;
}

/* "캡션 태그" 톤 레이블 — api-section-label, badge-tag, wf-cat-badge, active-menu-badge 등 */
.app-shell > main .api-section-label,
.app-shell > main .wf-cat-badge,
.app-shell > main .nav-badge-api,
.app-shell > main .nav-badge-na,
.app-shell > main .api-tester-panel .api-section-label {
  background: var(--hdr-bg) !important;
  border: 1px solid var(--hdr-border) !important;
  border-radius: var(--hdr-radius) !important;
  color: var(--hdr-text) !important;
  font-size: var(--hdr-font-size) !important;
  font-weight: var(--hdr-font-weight) !important;
  letter-spacing: var(--hdr-letter-spacing) !important;
  padding: 3px 8px !important;
  box-shadow: none !important;
  display: inline-block !important;
}
/* RESPONSE 섹션 레이블은 그린 톤 의미 유지 — 헤더 스타일 + 그린 텍스트 */
.app-shell > main .api-tester-panel .api-section-response .api-section-label {
  background: #f5f5f5 !important;
  border: 1px solid #c8e6cf !important;
  color: #166534 !important;
}

/* ───── API Key 수정 — 입력+토글 버튼 한 줄 레이아웃 ───── */
.api-key-input-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.api-key-input-row input {
  flex: 1;
  font-family: 'Menlo', 'Consolas', monospace;
  letter-spacing: 1px;
}
.btn-icon-toggle {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
}

/* HEADERS-style 적용 후 form-actions 정렬/간격 보정 */
.app-shell > main .form-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}


/* ═══════════════════════════════════════════════════════════════════════
   Improvements v5 — 주요 설정값 패널 / 테스트 기록 / 편집 가능한 API Tester
   / 테스트 스위트 워크플로우 스타일 통일
   ═══════════════════════════════════════════════════════════════════════ */

/* ---- 4번: 상단 주요 설정값 패널 ---- */
.api-vars-card .vars-hint-badge {
  font-size: 11px;
  color: var(--gray-600);
  background: #f5f5f5;
  border: 1px solid #d9d9d9;
  padding: 4px 10px;
  border-radius: 2px;
  font-weight: 500;
}
.api-vars-card .vars-hint-badge i { color: #4a4a4a; margin-right: 4px; }

.api-vars-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
  margin-bottom: 14px;
}
.api-var-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
}
.api-var-field label {
  font-size: 12px;
  font-weight: 600;
  color: #4a4a4a;
  background: #f5f5f5;
  border: 1px solid #d9d9d9;
  border-radius: 2px;
  padding: 4px 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  letter-spacing: 0.02em;
}
.api-var-field label i { color: #6b7280; font-size: 11px; }
.api-var-field input {
  font-family: 'Menlo', 'Monaco', 'Consolas', monospace;
  font-size: 13px;
  padding: 8px 10px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  background: #ffffff;
  color: #1f2937;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.api-var-field input:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.12);
}
.api-var-field input:hover { border-color: #9ca3af; }
.api-var-note {
  font-size: 10.5px;
  color: #6b7280;
  line-height: 1.4;
  padding-left: 2px;
}
.api-var-eye {
  margin-left: auto;
  background: transparent;
  border: none;
  cursor: pointer;
  color: #6b7280;
  font-size: 12px;
  padding: 0 4px;
}
.api-var-eye:hover { color: #2563eb; }

.api-vars-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding-top: 10px;
  border-top: 1px dashed #e5e7eb;
}
.api-vars-status {
  font-size: 12px;
  font-weight: 500;
}
.api-vars-status.status-run     { color: #2563eb; }
.api-vars-status.status-success { color: #16a34a; }
.api-vars-status.status-fail    { color: #dc2626; }

/* ---- 2번: 테스트 기록 카드 ---- */
.api-history-card .api-history-count {
  font-size: 11px;
  color: var(--gray-600);
  background: #f5f5f5;
  border: 1px solid #d9d9d9;
  padding: 4px 10px;
  border-radius: 2px;
  font-weight: 600;
}
.api-history-toolbar {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.api-history-filter {
  flex: 1;
  min-width: 180px;
  padding: 6px 10px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font-size: 13px;
  background: #ffffff;
  color: #1f2937;
}
.api-history-filter:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.12);
}
select.api-history-filter { flex: 0 0 160px; cursor: pointer; }

.api-history-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 520px;
  overflow-y: auto;
  padding-right: 4px;
}
.api-history-item {
  display: grid;
  grid-template-columns: 90px 60px 56px 60px 1fr 30%;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: #fafafa;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  font-size: 12.5px;
  transition: all 0.15s;
}
.api-history-item:hover {
  background: #f3f4f6;
  border-color: #d1d5db;
}
.api-history-item .hist-time {
  font-family: 'Menlo', monospace;
  font-size: 11px;
  color: #6b7280;
  white-space: nowrap;
}
.api-history-item .hist-method {
  text-align: center;
  font-size: 10px;
  padding: 3px 6px;
  border-radius: 3px;
}
.api-history-item .hist-status {
  font-family: 'Menlo', monospace;
  font-weight: 700;
  text-align: center;
  padding: 3px 6px;
  border-radius: 3px;
  font-size: 11px;
}
.api-history-item .hist-status.code-2xx { background: #dcfce7; color: #15803d; }
.api-history-item .hist-status.code-3xx { background: #dbeafe; color: #1e40af; }
.api-history-item .hist-status.code-4xx { background: #fef3c7; color: #b45309; }
.api-history-item .hist-status.code-5xx { background: #fee2e2; color: #b91c1c; }
.api-history-item .hist-status.code-0xx { background: #e5e7eb; color: #6b7280; }
.api-history-item .hist-elapsed {
  font-size: 10.5px;
  color: #6b7280;
  text-align: right;
}
.api-history-item .hist-name {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.api-history-item .hist-test-name {
  font-weight: 600;
  color: #1f2937;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}
.hist-src {
  font-size: 9.5px;
  font-weight: 600;
  padding: 2px 5px;
  border-radius: 2px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.hist-src.hist-src-wf      { background: #ede9fe; color: #6d28d9; }
.hist-src.hist-src-manual  { background: #dbeafe; color: #1e40af; }
.hist-src.hist-src-edit    { background: #fef3c7; color: #b45309; }
.hist-src.hist-src-replay  { background: #d1fae5; color: #047857; }
.api-history-item .hist-path {
  font-family: 'Menlo', monospace;
  font-size: 11px;
  color: #6b7280;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.api-history-item .hist-path code {
  background: transparent;
  padding: 0;
  color: inherit;
}
.api-history-item .hist-actions {
  display: flex;
  gap: 4px;
  justify-content: flex-end;
}
@media (max-width: 1100px) {
  .api-history-item {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "time method"
      "status elapsed"
      "name name"
      "path path"
      "actions actions";
    gap: 4px;
  }
  .api-history-item .hist-time { grid-area: time; }
  .api-history-item .hist-method { grid-area: method; justify-self: end; }
  .api-history-item .hist-status { grid-area: status; }
  .api-history-item .hist-elapsed { grid-area: elapsed; }
  .api-history-item .hist-name { grid-area: name; }
  .api-history-item .hist-path { grid-area: path; }
  .api-history-item .hist-actions { grid-area: actions; }
}

/* ---- 3번: 편집 가능한 API Tester ---- */
.api-edit-hint {
  font-size: 10px;
  color: #b45309;
  background: #fef3c7;
  border: 1px solid #fde68a;
  padding: 2px 6px;
  border-radius: 2px;
  margin-left: auto;
  font-weight: 600;
}
.api-edit-hint i { margin-right: 3px; }

input.api-url-editable {
  flex: 1;
  font-family: 'Menlo', monospace;
  font-size: 12.5px;
  padding: 5px 8px;
  border: 1px solid #d1d5db;
  border-radius: 3px;
  background: #ffffff;
  color: #1f2937;
  min-width: 0;
}
input.api-url-editable:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.12);
}

textarea.api-body-editable {
  width: 100%;
  min-height: 120px;
  max-height: 360px;
  font-family: 'Menlo', 'Monaco', 'Consolas', monospace;
  font-size: 12px;
  line-height: 1.5;
  padding: 10px 12px;
  border: 1px solid #d1d5db !important;
  border-radius: 4px;
  background: #ffffff !important;
  color: #1f2937 !important;
  resize: vertical;
  tab-size: 2;
  box-sizing: border-box;
}
textarea.api-body-editable:focus {
  outline: none;
  border-color: #2563eb !important;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.12);
}

.api-body-validate {
  font-size: 11px;
  margin-top: 4px;
  padding: 2px 6px;
  min-height: 16px;
  font-family: 'Menlo', monospace;
}
.api-body-validate.is-ok    { color: #15803d; }
.api-body-validate.is-error { color: #b91c1c; }

.api-tester-rerun-bar {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding: 10px 0;
  margin: 6px 0;
  border-top: 1px dashed #e5e7eb;
  border-bottom: 1px dashed #e5e7eb;
}

/* ---- 1번: 테스트 스위트 카드 → 워크플로우 카드 스타일과 통일 ---- */
/* 카테고리 자체는 항상 세로 1열 적층 (내부에서 좌-우 페어 그리드 사용) */
.app-shell > main .test-categories {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.app-shell > main .category {
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(180deg, #fafafa, #ffffff);
  transition: all 0.2s;
}
.app-shell > main .category:hover { border-color: #cbd5e1; }
.app-shell > main .category.expanded { border-color: #93c5fd; background: linear-gradient(180deg, #eff6ff, #ffffff); }

.app-shell > main .category-header {
  background: transparent;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  border-bottom: 1px solid transparent;
}
.app-shell > main .category.expanded .category-header {
  border-bottom-color: #dbeafe;
}
.app-shell > main .category-header .cat-name {
  flex: 1;
  font-weight: 700;
  font-size: 15px;
  color: #1f2937;
}
.app-shell > main .category-header .cat-count {
  font-size: 11px;
  color: #6b7280;
  background: #ffffff;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid #e5e7eb;
  font-weight: 700;
}
.app-shell > main .category-header .toggle-icon {
  color: #6b7280;
  font-size: 13px;
}
.app-shell > main .category.expanded .toggle-icon { color: #2563eb; }

.app-shell > main .category-tests {
  padding: 8px 12px 12px;
  background: transparent;
}

.app-shell > main .test-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 13px;
  background: #ffffff;
  border: 1px solid #f1f5f9;
  margin-bottom: 4px;
}
.app-shell > main .test-item:hover {
  background: #f8fafc;
  border-color: #e2e8f0;
}
.app-shell > main .test-item .test-name {
  color: #1f2937;
  font-weight: 500;
}
.app-shell > main .test-item .test-path {
  font-family: 'Menlo', monospace;
  font-size: 11.5px;
  color: #6b7280;
}

/* 옵션 영역도 light 톤으로 */
.app-shell > main .suite-options {
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 14px;
}
.app-shell > main .suite-options .opt {
  color: #374151;
}


/* ═══════════════════════════════════════════════════════════════════════
   Improvements v6 — 상세 (팝업창) 모달을 워크플로우 카드 스타일로 통일
   ═══════════════════════════════════════════════════════════════════════ */

/* 모달 백드롭 — 라이트 톤으로 부드럽게 */
.app-shell ~ #detailModal .modal-backdrop,
#detailModal .modal-backdrop {
  background: rgba(15, 23, 42, 0.35) !important;
  backdrop-filter: blur(3px);
}

/* 모달 컨테이너 — 워크플로우 카드 풍 (라이트 그라데이션 + 2px 보더 + 라운드 12px) */
#detailModal .modal-content {
  background: linear-gradient(180deg, #ffffff, #fafafa) !important;
  border: 2px solid #93c5fd !important; /* 워크플로우 카드의 blue 액센트 */
  border-radius: 12px !important;
  box-shadow: 0 20px 50px -10px rgba(15, 23, 42, 0.25), 0 8px 16px -4px rgba(15, 23, 42, 0.12) !important;
  color: #1f2937 !important;
}

/* 모달 헤더 — 워크플로우 카드 헤더 스타일 */
#detailModal .modal-header {
  background: linear-gradient(180deg, #eff6ff, #ffffff) !important;
  border-bottom: 1px solid #dbeafe !important;
  border-radius: 10px 10px 0 0;
  padding: 14px 18px !important;
}
#detailModal .modal-header h3 {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #1f2937 !important;
  letter-spacing: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
#detailModal .modal-header h3::before {
  content: "\f570"; /* fa-microscope */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  color: #2563eb;
  font-size: 14px;
}
#detailModal .btn-icon {
  background: #f5f5f5 !important;
  border: 1px solid #d9d9d9 !important;
  border-radius: 2px !important;
  width: 28px;
  height: 28px;
  color: #4a4a4a !important;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}
#detailModal .btn-icon:hover {
  background: #fee2e2 !important;
  border-color: #fca5a5 !important;
  color: #b91c1c !important;
}

/* 모달 바디 */
#detailModal .modal-body {
  background: transparent !important;
  padding: 20px !important;
  color: #1f2937 !important;
}

/* ── 상단 요약 메타 카드 (.detail-meta) ── */
#detailModal .detail-meta {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 8px;
  padding: 12px 16px !important;
  gap: 18px !important;
  margin-bottom: 18px !important;
}
#detailModal .detail-meta-item small {
  color: #6b7280 !important;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
#detailModal .detail-meta-item strong {
  color: #1f2937 !important;
  font-size: 13px;
  font-weight: 700;
}

/* ── 섹션 헤더 (.detail-section h4) ── HEADERS 라벨 스타일과 동일 */
#detailModal .detail-section {
  margin-bottom: 18px;
}
#detailModal .detail-section h4 {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #4a4a4a !important;
  background: #f5f5f5 !important;
  border: 1px solid #d9d9d9 !important;
  border-radius: 2px;
  padding: 5px 10px;
  margin-bottom: 8px !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
#detailModal .detail-section h4 i {
  color: #2563eb !important;
  font-size: 11px;
}

/* ── pre/kv 코드 블록 — 다크 → 라이트로 전환 ── */
#detailModal .detail-section pre,
#detailModal .detail-section .kv {
  background: #f8fafc !important;
  color: #1f2937 !important;
  border: 1px solid #e2e8f0 !important;
  padding: 12px 14px !important;
  border-radius: 6px !important;
  font-family: 'Menlo', 'Monaco', 'Consolas', monospace !important;
  font-size: 12px !important;
  line-height: 1.6 !important;
  max-height: 360px !important;
}
#detailModal .detail-section.kv-section .kv {
  background: #f8fafc !important;
  color: #374151 !important;
}
#detailModal .detail-section.kv-section .kv strong {
  color: #1e40af !important;
  font-weight: 600;
}

/* ── Assertion 리스트 ── */
#detailModal .assertion-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
#detailModal .assertion-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 12px !important;
  border-radius: 6px !important;
  font-size: 12.5px !important;
  border: 1px solid transparent;
}
#detailModal .assertion-list li.pass {
  background: #f0fdf4 !important;
  border-color: #86efac !important;
  color: #15803d !important;
}
#detailModal .assertion-list li.pass i { color: #16a34a !important; }
#detailModal .assertion-list li.fail {
  background: #fef2f2 !important;
  border-color: #fca5a5 !important;
  color: #b91c1c !important;
}
#detailModal .assertion-list li.fail i { color: #dc2626 !important; }

/* ── API Runner (재실행 폼) — 워크플로우 카드 풍의 sub-card ── */
#detailModal .api-runner {
  background: linear-gradient(180deg, #eff6ff, #ffffff) !important;
  border: 2px solid #93c5fd !important;
  border-radius: 10px !important;
  padding: 16px !important;
  margin-top: 18px !important;
}
#detailModal .api-runner h4 {
  background: transparent !important;
  border: none !important;
  padding: 0 0 6px 0 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #1e40af !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  display: flex;
  align-items: center;
  gap: 8px;
}
#detailModal .api-runner h4 i { color: #2563eb !important; font-size: 14px; }
#detailModal .api-runner-hint {
  font-size: 12px !important;
  color: #6b7280 !important;
  background: #ffffff !important;
  border: 1px dashed #dbeafe !important;
  border-radius: 6px;
  padding: 8px 12px;
  margin-bottom: 12px !important;
  line-height: 1.5;
}
#detailModal .api-runner-hint strong { color: #1e40af !important; }

#detailModal .api-runner .form-group label {
  font-size: 11.5px !important;
  font-weight: 600 !important;
  color: #4a4a4a !important;
  background: #f5f5f5 !important;
  border: 1px solid #d9d9d9 !important;
  border-radius: 2px !important;
  padding: 4px 8px !important;
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}
#detailModal .api-runner .hint-inline {
  font-size: 10.5px !important;
  color: #6b7280 !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin-left: auto;
  font-weight: 500;
}
#detailModal .api-runner input[type="text"],
#detailModal .api-runner textarea {
  background: #ffffff !important;
  color: #1f2937 !important;
  border: 1px solid #d1d5db !important;
  border-radius: 4px !important;
  font-family: 'Menlo', 'Monaco', monospace !important;
  font-size: 12.5px !important;
  padding: 8px 10px !important;
}
#detailModal .api-runner input[type="text"]:focus,
#detailModal .api-runner textarea:focus {
  outline: none;
  border-color: #2563eb !important;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.12) !important;
}
#detailModal .api-runner input[readonly] {
  background: #f8fafc !important;
  color: #4b5563 !important;
  cursor: not-allowed;
}
#detailModal .api-runner textarea:disabled {
  background: #f3f4f6 !important;
  color: #9ca3af !important;
}

#detailModal .api-runner .form-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding: 10px 0 4px;
  margin-top: 8px;
  border-top: 1px dashed #dbeafe;
}

#detailModal .api-runner-result {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 6px !important;
  padding: 12px 14px !important;
  margin-top: 12px;
}
#detailModal .api-runner-status {
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 4px 10px !important;
  border-radius: 4px !important;
  display: inline-block;
}

/* ── form-validate 메시지 ── */
#detailModal .form-validate {
  font-size: 11px;
  font-family: 'Menlo', monospace;
  margin-top: 4px;
  min-height: 16px;
  padding: 0 4px;
}

/* ── input-with-action (Idempotency-Key 입력 줄) ── */
#detailModal .input-with-action {
  display: flex;
  gap: 6px;
  align-items: stretch;
}
#detailModal .input-with-action input { flex: 1; }


/* ============================================================
   v7 - 테스트 스위트 항목 "자세히 보기" 패널 (워크플로우 카드 톤)
   ============================================================ */

/* 자세히 보기 버튼 — test-item 우측 */
.app-shell > main .btn-test-detail,
.btn-test-detail {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  background: #f5f5f5;
  border: 1px solid #d9d9d9;
  border-radius: 2px;
  color: #4a4a4a;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
  flex-shrink: 0;
}
.app-shell > main .btn-test-detail:hover,
.btn-test-detail:hover {
  background: #eff6ff;
  border-color: #93c5fd;
  color: #1e40af;
}
.btn-test-detail i { font-size: 10px; }

/* test-item 라벨이 button 을 포함하도록 — 기존 label flex 유지 */
.test-item {
  cursor: pointer;
}

/* 펼침 wrapper — 워크플로우 카드와 동일 시각 톤 */
.test-item-wrap {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.test-item-wrap.detail-open .test-item {
  background: #eff6ff;
  border-radius: 6px 6px 0 0;
}

/* 자세히 보기 패널 — 워크플로우 카드 스타일 (라이트 블루 그라데이션 + 2px blue 보더) */
.test-item-detail {
  margin: 0 4px 8px 4px;
  background: linear-gradient(180deg, #eff6ff, #ffffff);
  border: 2px solid #93c5fd;
  border-top: none;
  border-radius: 0 0 12px 12px;
  padding: 14px 16px 16px 16px;
  box-shadow: 0 4px 12px -4px rgba(15, 23, 42, 0.08);
}

/* 카드 내부 */
.td-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* 헤더 — method + name + id */
.td-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding-bottom: 10px;
  border-bottom: 1px dashed #93c5fd;
}
.td-method {
  font-family: 'Menlo', 'Consolas', monospace;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 3px;
  min-width: 56px;
  text-align: center;
}
.td-name {
  flex: 1;
  font-weight: 600;
  font-size: 14px;
  color: #1f2937;
  min-width: 0;
}
.td-id {
  font-family: 'Menlo', 'Consolas', monospace;
  font-size: 11px;
  color: #6b7280;
  background: #f5f5f5;
  padding: 2px 6px;
  border: 1px solid #d9d9d9;
  border-radius: 2px;
}

/* 설명 */
.td-desc {
  font-size: 12px;
  color: #374151;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-left: 3px solid #93c5fd;
  border-radius: 4px;
  padding: 8px 10px;
  line-height: 1.5;
}

/* 섹션 — HEADERS-style 라벨 + light pre 블록 */
.td-section { display: flex; flex-direction: column; gap: 6px; }
.td-section h5 {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #4a4a4a;
  background: #f5f5f5;
  border: 1px solid #d9d9d9;
  border-radius: 2px;
  padding: 4px 8px;
  display: inline-block;
  align-self: flex-start;
}
.td-pre {
  margin: 0;
  background: #f8fafc;
  color: #1f2937;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  padding: 10px 12px;
  font-family: 'Menlo', 'Consolas', monospace;
  font-size: 12px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-all;
  max-height: 280px;
  overflow-y: auto;
}
.td-kv {
  background: #f8fafc;
  color: #1f2937;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  padding: 8px 10px;
  font-family: 'Menlo', 'Consolas', monospace;
  font-size: 12px;
}
.td-empty {
  font-style: italic;
  color: #9ca3af;
  background: #f9fafb;
  border: 1px dashed #e5e7eb;
  border-radius: 4px;
  padding: 8px 10px;
  font-size: 12px;
}

/* 힌트 / 경고 */
.td-hint {
  font-size: 11px;
  color: #6b7280;
  padding: 2px 0;
}
.td-warn {
  font-size: 12px;
  color: #b45309;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 4px;
  padding: 6px 10px;
}
.td-error {
  color: #b91c1c;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 4px;
  padding: 10px;
}

/* 액션 버튼 영역 */
.td-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px dashed #93c5fd;
}
.td-actions .btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 6px;
}
.td-btn-run {
  background: linear-gradient(180deg, #3b82f6, #2563eb);
  color: #ffffff;
  border: 1px solid #1d4ed8;
}
.td-btn-run:hover {
  background: linear-gradient(180deg, #2563eb, #1d4ed8);
}
.td-btn-send,
.td-btn-refresh {
  background: #ffffff;
  color: #374151;
  border: 1px solid #d1d5db;
}
.td-btn-send:hover,
.td-btn-refresh:hover {
  background: #f3f4f6;
  border-color: #9ca3af;
}
.td-btn-run.loading,
.td-btn-run:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}


/* v7 - test-item 내부 label / 자세히보기 버튼 레이아웃 보강 */
.test-item-label {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  cursor: pointer;
}
.test-item-label input[type='checkbox'] { cursor: pointer; }
.test-item .btn-test-detail { margin-left: auto; }


/* ============================================================
   v8 - RFC 7807 ProblemDetail 응답 시각화 (API 테스터 + 모달)
   ME6 V4 모든 4xx/5xx 응답은 application/problem+json 포맷이므로
   detail / errors[] 를 명확히 보여주어 거부 사유 즉시 파악
   ============================================================ */
.api-problem-detail {
  background: linear-gradient(180deg, #fff7ed, #fffbeb);
  border: 2px solid #f59e0b;
  border-radius: 10px;
  padding: 12px 14px;
  margin: 8px 0 10px 0;
  color: #78350f;
  font-size: 12.5px;
  line-height: 1.5;
  box-shadow: 0 2px 8px -2px rgba(245, 158, 11, 0.2);
}
.api-problem-detail .pd-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 13px;
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 1px dashed #fbbf24;
  color: #92400e;
}
.api-problem-detail .pd-head i { color: #d97706; font-size: 14px; }
.api-problem-detail .pd-title { flex: 0 0 auto; }
.api-problem-detail .pd-code-badge {
  font-family: 'Menlo', 'Consolas', monospace;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fbbf24;
  border-radius: 3px;
}
.api-problem-detail .pd-status {
  margin-left: auto;
  font-family: 'Menlo', monospace;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  background: #ffffff;
  color: #b91c1c;
  border: 1px solid #fecaca;
  border-radius: 3px;
}
.api-problem-detail .pd-row {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 10px;
  padding: 4px 0;
  align-items: start;
}
.api-problem-detail .pd-row strong {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #92400e;
  font-family: 'Menlo', monospace;
}
.api-problem-detail .pd-row span {
  color: #1f2937;
  word-break: break-word;
}
.api-problem-detail .pd-detail-row span {
  background: #ffffff;
  border: 1px solid #fde68a;
  border-radius: 4px;
  padding: 6px 8px;
  font-weight: 500;
  white-space: pre-wrap;
}
.api-problem-detail .pd-mono {
  font-family: 'Menlo', monospace;
  font-size: 11.5px;
  color: #4b5563;
}
.api-problem-detail .pd-errors-label {
  margin-top: 8px;
  margin-bottom: 4px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: #92400e;
}
.api-problem-detail .pd-errors {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.api-problem-detail .pd-errors li {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
  background: #ffffff;
  border: 1px solid #fde68a;
  border-left: 3px solid #f59e0b;
  border-radius: 4px;
  padding: 6px 10px;
  font-size: 12px;
}
.api-problem-detail .pd-err-field {
  font-family: 'Menlo', monospace;
  font-weight: 700;
  color: #1f2937;
}
.api-problem-detail .pd-err-code {
  font-family: 'Menlo', monospace;
  font-size: 10.5px;
  font-weight: 600;
  padding: 1px 6px;
  background: #fef3c7;
  color: #92400e;
  border-radius: 2px;
}
.api-problem-detail .pd-err-reason {
  color: #374151;
}

/* #detailModal 안에서도 동일 시각 톤 (모달 컨텍스트) */
#detailModal .api-problem-detail {
  margin: 8px 0;
}

/* ════════════════════════════════════════════════════════════════════════
   개별 API 패널 (Individual API Panel) — 와이어프레임 시안 시나리오 1
   사이드바 '발송조회' 등 클릭 시 본문 좌측에 그룹+엔드포인트 리스트로 표시
   ════════════════════════════════════════════════════════════════════════ */
.individual-api-panel {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 4px 12px -4px rgba(15, 23, 42, 0.08);
  overflow: hidden;
}
.individual-api-panel .iap-header {
  background: linear-gradient(180deg, #eff6ff, #ffffff);
  padding: 16px 20px;
  border-bottom: 1px solid #e2e8f0;
}
.individual-api-panel .iap-breadcrumb {
  font-size: 11.5px;
  color: #64748b;
  margin-bottom: 6px;
  display: flex; align-items: center; gap: 6px;
}
.individual-api-panel .iap-breadcrumb i { font-size: 9px; }
.individual-api-panel .iap-title {
  font-size: 17px;
  font-weight: 700;
  color: #1e293b;
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 4px;
}
.individual-api-panel .iap-title .iap-badge-count {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  background: #dbeafe;
  color: #1e40af;
}
.individual-api-panel .iap-desc {
  font-size: 12.5px;
  color: #64748b;
  line-height: 1.5;
  margin-top: 4px;
}

/* 그룹 헤더 (⚡ 개별 API) */
.individual-api-panel .iap-group-header {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 20px 8px;
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.individual-api-panel .iap-group-header .iap-line {
  flex: 1;
  height: 1px;
  background: #e2e8f0;
}
.individual-api-panel .iap-group-header i {
  color: #f59e0b;
}

/* 개별 API 리스트 */
.individual-api-panel .iap-list {
  padding: 0 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.individual-api-panel .iap-item {
  width: 100%;
  background: none;
  border: 1px solid transparent;
  padding: 9px 12px;
  display: flex; align-items: center; gap: 10px;
  cursor: pointer;
  border-radius: 6px;
  font-family: inherit;
  font-size: 13px;
  color: #334155;
  text-align: left;
  transition: all 0.15s;
}
.individual-api-panel .iap-item:hover {
  background: #f8fafc;
  border-color: #e2e8f0;
}
.individual-api-panel .iap-item.active {
  background: #dbeafe;
  border-color: #93c5fd;
  color: #1e40af;
  font-weight: 600;
}
.individual-api-panel .iap-item.running {
  background: #fef3c7;
  border-color: #fcd34d;
}
.individual-api-panel .iap-item-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.individual-api-panel .iap-item-name {
  font-weight: 600;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.individual-api-panel .iap-item-path {
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  font-size: 11px;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.individual-api-panel .iap-item-arrow {
  color: #cbd5e1;
  font-size: 11px;
  flex-shrink: 0;
}
.individual-api-panel .iap-item:hover .iap-item-arrow {
  color: #3b82f6;
}

/* HTTP 메서드 뱃지 (와이어프레임과 동일) */
.iap-method {
  display: inline-block;
  min-width: 46px;
  padding: 3px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  text-align: center;
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  flex-shrink: 0;
  letter-spacing: 0.3px;
}
.iap-method.m-get    { background: #dbeafe; color: #1e40af; }
.iap-method.m-post   { background: #dcfce7; color: #166534; }
.iap-method.m-put    { background: #fed7aa; color: #9a3412; }
.iap-method.m-patch  { background: #e9d5ff; color: #6b21a8; }
.iap-method.m-delete { background: #fee2e2; color: #991b1b; }

/* 패널 하단 힌트 */
.individual-api-panel .iap-hint {
  margin: 0 16px 16px;
  padding: 10px 14px;
  background: #f1f5f9;
  border-left: 3px solid #3b82f6;
  border-radius: 4px;
  font-size: 12px;
  color: #475569;
  line-height: 1.5;
}
.individual-api-panel .iap-hint i {
  color: #3b82f6;
  margin-right: 6px;
}

/* ============================================================================
   MSA 템플릿 엔진 (api-template-engine.js) — 와이어프레임 시나리오 1 스타일
   ============================================================================ */

/* ── 그룹 2열 레이아웃: 좌측 항목 리스트 + 우측 상세 패널 ─────────────── */
.tpl-group-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 16px;
  align-items: start;
  padding: 16px;
  background: #f8fafc;
  border-radius: 8px;
  min-height: 600px;
}

.tpl-group-list {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
  position: sticky;
  top: 16px;
}
.tpl-group-list-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  background: linear-gradient(135deg, #1e40af 0%, #2563eb 100%);
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
}
.tpl-group-list-header i { font-size: 12px; }
.tpl-badge-count {
  margin-left: auto;
  background: rgba(255,255,255,0.25);
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
}
.tpl-group-list-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  background: #ffffff;
  border: none;
  border-bottom: 1px solid #f1f5f9;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s;
}
.tpl-group-list-item:hover { background: #f8fafc; }
.tpl-group-list-item.active {
  background: #eff6ff;
  border-left: 3px solid #2563eb;
  padding-left: 11px;
}
.tpl-list-item-name {
  font-size: 12.5px;
  color: #1e293b;
  line-height: 1.4;
  flex: 1;
}
.tpl-group-list-item.active .tpl-list-item-name {
  color: #1e40af;
  font-weight: 600;
}

/* 빈 상태 */
.tpl-empty {
  padding: 40px 20px;
  text-align: center;
  color: #64748b;
  background: #ffffff;
  border: 1px dashed #cbd5e1;
  border-radius: 8px;
}
.tpl-empty i { font-size: 28px; color: #cbd5e1; display: block; margin-bottom: 8px; }

/* ── 우측 상세 패널 (api-test-panel: 와이어프레임 시나리오 1) ──────────── */
.tpl-group-detail .api-test-panel {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
}
.api-test-header {
  padding: 18px 22px;
  background: linear-gradient(135deg, #f8fafc 0%, #eff6ff 100%);
  border-bottom: 1px solid #e2e8f0;
}
.api-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #64748b;
  margin-bottom: 8px;
}
.api-breadcrumb i.fa-folder-open { color: #2563eb; }
.api-breadcrumb i.fa-chevron-right { font-size: 9px; color: #cbd5e1; }
.api-title {
  font-size: 18px;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.api-title-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  background: #dbeafe;
  color: #1e40af;
  border-radius: 12px;
}
.api-description {
  margin-top: 8px;
  font-size: 12.5px;
  color: #475569;
  line-height: 1.55;
}

/* Endpoint Bar */
.tpl-endpoint {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #0f172a;
  border-radius: 6px;
  margin-top: 8px;
}
.tpl-path {
  font-family: 'SFMono-Regular', Consolas, Menlo, monospace;
  font-size: 13px;
  color: #e2e8f0;
  word-break: break-all;
  flex: 1;
}

/* Body (실제 폼 영역) */
.api-test-body {
  padding: 18px 22px;
}

/* 폼 섹션 (Headers / Query / Body) */
.tpl-form-section {
  margin-bottom: 18px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 12px 14px;
}
.tpl-form-section h4 {
  margin: 0 0 10px;
  font-size: 12.5px;
  font-weight: 700;
  color: #1e293b;
  display: flex;
  align-items: center;
  gap: 8px;
}
.tpl-form-section h4 i { color: #2563eb; }
.tpl-req {
  font-size: 10.5px;
  font-weight: 500;
  color: #b45309;
  background: #fef3c7;
  padding: 1px 6px;
  border-radius: 3px;
}
.tpl-meta-badge {
  font-size: 10.5px;
  font-weight: 600;
  color: #64748b;
  background: #e2e8f0;
  padding: 2px 8px;
  border-radius: 3px;
}

.tpl-form-row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 12px;
  align-items: center;
  margin-bottom: 6px;
}
.tpl-form-row:last-child { margin-bottom: 0; }
.tpl-form-row label {
  font-size: 12px;
  font-weight: 600;
  color: #475569;
}
.tpl-input {
  display: block;
  width: 100%;
  font-family: 'SFMono-Regular', Consolas, Menlo, monospace;
  font-size: 12px;
  padding: 6px 10px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  color: #0f172a;
  box-sizing: border-box;
}
.tpl-input.editable:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
div.tpl-input {
  background: #f1f5f9;
  color: #475569;
  user-select: text;
}

/* JSON 에디터 */
.tpl-json-editor {
  width: 100%;
  min-height: 140px;
  font-family: 'SFMono-Regular', Consolas, Menlo, monospace;
  font-size: 12px;
  line-height: 1.5;
  padding: 10px 12px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  color: #0f172a;
  resize: vertical;
  box-sizing: border-box;
}
.tpl-json-editor:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
.tpl-body-status {
  margin-top: 6px;
  font-size: 11.5px;
  font-weight: 600;
  min-height: 16px;
}
.tpl-body-status.valid { color: #15803d; }
.tpl-body-status.invalid { color: #b91c1c; }

/* 액션 바 */
.tpl-action-bar {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 12px 0;
  border-top: 1px dashed #e2e8f0;
  border-bottom: 1px dashed #e2e8f0;
  margin: 14px 0;
}

/* 응답 영역 */
.tpl-response-area {
  margin-top: 14px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  overflow: hidden;
}
.tpl-response-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}
.tpl-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 700;
}
.tpl-status-badge.running { background: #fef3c7; color: #92400e; }
.tpl-status-badge.success { background: #d1fae5; color: #065f46; }
.tpl-status-badge.fail    { background: #fee2e2; color: #991b1b; }
.tpl-response-meta {
  font-size: 11.5px;
  color: #64748b;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.tpl-json-response {
  margin: 0;
  padding: 14px;
  background: #0f172a;
  color: #e2e8f0;
  font-family: 'SFMono-Regular', Consolas, Menlo, monospace;
  font-size: 12px;
  line-height: 1.55;
  max-height: 380px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-all;
}

/* ProblemDetail 카드 */
.tpl-problem-detail-card {
  margin: 0;
  padding: 14px 16px;
  background: #fef2f2;
  border-top: 1px solid #fecaca;
}
.tpl-pd-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 700;
  color: #991b1b;
  margin-bottom: 10px;
}
.tpl-pd-detail {
  padding: 8px 12px;
  background: #ffffff;
  border-left: 3px solid #dc2626;
  border-radius: 3px;
  font-size: 12px;
  color: #7f1d1d;
  line-height: 1.5;
  margin-bottom: 8px;
}
.tpl-pd-row {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 10px;
  align-items: start;
  font-size: 11.5px;
  padding: 4px 0;
  color: #7f1d1d;
}
.tpl-pd-row .label {
  font-weight: 700;
  color: #991b1b;
}

/* 컨텍스트 힌트 박스 */
.tpl-note-box {
  margin-top: 14px;
  padding: 10px 14px;
  background: #eff6ff;
  border-left: 3px solid #3b82f6;
  border-radius: 4px;
  font-size: 12px;
  color: #1e3a8a;
  line-height: 1.55;
}
.tpl-note-label {
  display: inline-block;
  font-weight: 700;
  margin-right: 6px;
  color: #1d4ed8;
}

/* 반응형 — 좁은 화면에서 1열로 */
@media (max-width: 980px) {
  .tpl-group-layout {
    grid-template-columns: 1fr;
  }
  .tpl-group-list { position: static; }
  .tpl-form-row { grid-template-columns: 1fr; gap: 4px; }
}

/* ============================================================================
   VIEW ROUTER — 메뉴 선택 시 본문 카드 표시/숨김
   ============================================================================ */

/* 사이드바 — 유틸리티 메뉴 구분선 */
.nav-divider {
  height: 1px;
  background: #e2e8f0;
  margin: 8px 12px;
}

/* 사이드바 utility 메뉴 (전체 보기 / 테스트 스위트) */
.nav-item-utility .nav-link {
  font-weight: 600;
}
.nav-item-utility .nav-link .nav-icon {
  color: #2563eb;
}
.nav-item-utility .nav-link.active {
  background: #dbeafe;
  color: #1e40af;
}
.nav-item-utility .nav-link.active .nav-icon { color: #1e40af; }

/* ── 홈 (대시보드) 화면 ─────────────────────────────────────────────────── */
.home-view-card { margin: 0 16px 16px; }
.home-hero {
  padding: 28px 24px;
  background: linear-gradient(135deg, #1e40af 0%, #2563eb 50%, #3b82f6 100%);
  color: #ffffff;
  border-radius: 10px;
  margin-bottom: 20px;
}
/* 시안: 홈 상단 배경 white */
.home-hero.home-hero-light {
  background: #ffffff;
  color: #0f172a;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}
.home-hero.home-hero-light .home-hero-title { color: #0f172a; }
.home-hero.home-hero-light .home-hero-title i { color: #2563eb; }
.home-hero.home-hero-light .home-hero-desc { color: #475569; }
.home-hero.home-hero-light .home-hero-desc b { color: #1e40af; }
.home-hero.home-hero-light .home-quick-actions .btn {
  background: #2563eb; color: #ffffff; border: 0;
}
.home-hero.home-hero-light .home-quick-actions .btn:hover { background: #1d4ed8; }
.home-hero.home-hero-light .home-quick-actions .btn.btn-success { background: #10b981; color: #ffffff; }
.home-hero.home-hero-light .home-quick-actions .btn.btn-success:hover { background: #059669; }
.home-hero.home-hero-light .home-quick-actions .btn.btn-ghost {
  background: #ffffff; color: #1e40af; border: 1px solid #cbd5e1;
}
.home-hero.home-hero-light .home-quick-actions .btn.btn-ghost:hover {
  background: #f1f5f9; border-color: #2563eb;
}

.home-hero-title {
  font-size: 22px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.home-hero-title i { font-size: 26px; }
.home-hero-desc {
  font-size: 13.5px;
  line-height: 1.6;
  margin: 0 0 18px;
  color: rgba(255, 255, 255, 0.92);
  max-width: 720px;
}
.home-hero-desc b { color: #ffffff; }
.home-quick-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.home-quick-actions .btn { background: rgba(255, 255, 255, 0.95); color: #1e40af; border: 0; }
.home-quick-actions .btn:hover { background: #ffffff; }
.home-quick-actions .btn.btn-success { background: #10b981; color: #ffffff; }
.home-quick-actions .btn.btn-success:hover { background: #059669; }
.home-quick-actions .btn.btn-ghost { background: rgba(255,255,255,0.18); color: #ffffff; border: 1px solid rgba(255,255,255,0.4); }
.home-quick-actions .btn.btn-ghost:hover { background: rgba(255,255,255,0.28); }

.home-menu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}
.home-menu-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 18px 20px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.18s;
  text-align: left;
}
.home-menu-card:hover {
  border-color: #2563eb;
  background: #eff6ff;
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(37, 99, 235, 0.12);
}
.home-menu-card i {
  font-size: 24px;
  color: #2563eb;
  margin-bottom: 4px;
}
.home-menu-name {
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
}
.home-menu-sub {
  font-size: 12px;
  color: #64748b;
}

/* ── 메뉴별 단일 view 일 때 워크플로우 hint 숨김 (선택사항) ──────────── */
.workflow-hint { margin-bottom: 14px; }

/* ════════════════════════════════════════════════════════════════════
   📋 메뉴별 1열 정렬 — 테스트 시나리오 / 테스트 스위트
   ════════════════════════════════════════════════════════════════════ */

/* 워크플로우 카드 1열 (테스트 시나리오, 좌측 정렬) */
.workflow-list.workflow-grid-1col {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 14px;
  max-width: 920px;
}

/* 테스트 스위트 카테고리 1열 (좌측 정렬) */
.test-categories.test-categories-1col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 920px;
}
.test-categories.test-categories-1col .category {
  width: 100%;
}

/* ════════════════════════════════════════════════════════════════════
   📖 API 명세서 (Stibee 스타일) — 3-column 레이아웃
   ════════════════════════════════════════════════════════════════════ */

.apispec-card { margin: 0 16px 16px; background: #ffffff; }
.apispec-body {
  display: grid;
  grid-template-columns: 240px 1fr 380px;
  gap: 0;
  align-items: start;
  min-height: 600px;
  padding: 0 !important;
}

@media (max-width: 1200px) {
  .apispec-body { grid-template-columns: 200px 1fr 320px; }
}
@media (max-width: 980px) {
  .apispec-body { grid-template-columns: 1fr; }
  .apispec-sublist { max-height: 240px; overflow-y: auto; }
}

/* ─── 본문 좌측 서브사이드바 (API 박스 메뉴) ────────────────────────── */
.apispec-sublist {
  background: #f8fafc;
  border-right: 1px solid #e2e8f0;
  padding: 12px 0;
  overflow-y: auto;
  max-height: 720px;
}
.apispec-list-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  padding: 10px 14px;
  background: transparent;
  border: 0;
  border-left: 3px solid transparent;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s;
  font-size: 12.5px;
}
.apispec-list-item:hover {
  background: #eff6ff;
}
.apispec-list-item.active {
  background: #dbeafe;
  border-left-color: #2563eb;
}
.apispec-list-item .apispec-method {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 3px;
  margin-top: 1px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.apispec-list-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.apispec-list-title {
  font-size: 12.5px;
  font-weight: 600;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.apispec-list-item.active .apispec-list-title { color: #1e40af; }
.apispec-list-path {
  font-size: 11px;
  font-family: 'SFMono-Regular', 'Consolas', 'Monaco', monospace;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.apispec-empty-list {
  padding: 20px;
  text-align: center;
  color: #94a3b8;
  font-size: 13px;
}

/* method badge color */
.apispec-method.m-get    { background: #dcfce7; color: #15803d; }
.apispec-method.m-post   { background: #dbeafe; color: #1e40af; }
.apispec-method.m-put    { background: #fef3c7; color: #b45309; }
.apispec-method.m-patch  { background: #fde68a; color: #92400e; }
.apispec-method.m-delete { background: #fee2e2; color: #b91c1c; }

/* ─── 중앙 콘텐츠 (설명 + 파라미터) ──────────────────────────────────── */
.apispec-content {
  padding: 24px 28px;
  overflow-y: auto;
  max-height: 720px;
}
.apispec-doc-title {
  font-size: 22px;
  font-weight: 700;
  color: #0f172a;
  margin: 6px 0 12px;
}
.apispec-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: #64748b;
  margin-bottom: 4px;
}
.apispec-breadcrumb i { font-size: 9px; }
.apispec-breadcrumb span:last-child { color: #1e40af; font-weight: 600; }

.apispec-endpoint {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: #f1f5f9;
  border-radius: 6px;
  margin: 8px 0 16px;
}
.apispec-endpoint .apispec-method {
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 4px;
}
.apispec-endpoint-path {
  font-family: 'SFMono-Regular', 'Consolas', 'Monaco', monospace;
  font-size: 13px;
  color: #0f172a;
  word-break: break-all;
}

.apispec-doc-desc {
  font-size: 13.5px;
  line-height: 1.7;
  color: #475569;
  margin: 12px 0 22px;
}

.apispec-section {
  margin-bottom: 26px;
}
.apispec-section-title {
  font-size: 14px;
  font-weight: 700;
  color: #1e40af;
  margin: 0 0 12px;
  padding-bottom: 6px;
  border-bottom: 2px solid #dbeafe;
  display: flex;
  align-items: center;
  gap: 8px;
}
.apispec-section-meta {
  font-size: 11px;
  color: #94a3b8;
  font-weight: 400;
}

.apispec-param-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.apispec-param {
  padding: 10px 0;
  border-bottom: 1px dashed #e2e8f0;
}
.apispec-param:last-child { border-bottom: 0; }
.apispec-param-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.apispec-param-name {
  font-family: 'SFMono-Regular', 'Consolas', 'Monaco', monospace;
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
  background: transparent;
  padding: 0;
}
.apispec-param-type {
  font-size: 11.5px;
  color: #64748b;
}
.apispec-param-type code {
  font-family: 'SFMono-Regular', 'Consolas', 'Monaco', monospace;
  background: #f1f5f9;
  color: #1e40af;
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 11px;
}
.apispec-req {
  font-size: 10.5px;
  font-weight: 700;
  color: #dc2626;
  background: #fee2e2;
  padding: 2px 7px;
  border-radius: 3px;
}
.apispec-opt {
  font-size: 10.5px;
  font-weight: 600;
  color: #64748b;
  background: #f1f5f9;
  padding: 2px 7px;
  border-radius: 3px;
}
.apispec-param-desc {
  font-size: 12.5px;
  color: #475569;
  margin-top: 6px;
  padding-left: 2px;
  line-height: 1.5;
}

.apispec-empty {
  text-align: center;
  padding: 80px 20px;
  color: #94a3b8;
}
.apispec-empty i { font-size: 36px; margin-bottom: 12px; }
.apispec-empty p { font-size: 14px; }

/* ─── 우측: Request / Response Example ────────────────────────────── */
.apispec-example {
  background: #0f172a;
  padding: 16px;
  overflow-y: auto;
  max-height: 720px;
  border-left: 1px solid #1e293b;
}
.apispec-example-card {
  background: #1e293b;
  border-radius: 6px;
  margin-bottom: 14px;
  overflow: hidden;
}
.apispec-example-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: #334155;
  border-bottom: 1px solid #1e293b;
}
.apispec-example-label {
  font-size: 11px;
  font-weight: 700;
  color: #e2e8f0;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.apispec-copy-btn {
  background: transparent;
  border: 0;
  color: #94a3b8;
  cursor: pointer;
  font-size: 11px;
  padding: 2px 6px;
}
.apispec-copy-btn:hover { color: #ffffff; }
.apispec-example-code {
  margin: 0;
  padding: 12px 14px;
  font-family: 'SFMono-Regular', 'Consolas', 'Monaco', monospace;
  font-size: 11.5px;
  line-height: 1.6;
  color: #e2e8f0;
  white-space: pre-wrap;
  word-break: break-all;
  max-height: 320px;
  overflow-y: auto;
}
.apispec-response-desc {
  font-size: 12.5px;
  color: #475569;
  padding: 8px 12px;
  background: #f8fafc;
  border-radius: 4px;
}

/* ════════════════════════════════════════════════════════════════════
   🔍 발송조회 (보고서) — bgcolor white 유지
   ════════════════════════════════════════════════════════════════════ */
.individual-api-panel { background: #ffffff; }
/* MSA mountGroup 도 흰 배경 */
.tpl-group-layout { background: #ffffff; }

/* 서브메뉴 아이콘 (테스트 스위트/시나리오/명세서) */
.submenu-link .submenu-icon {
  width: 14px;
  text-align: center;
  margin-right: 4px;
  color: #64748b;
  font-size: 12px;
}
.submenu-link.active .submenu-icon { color: #1e40af; }
.submenu-link:hover .submenu-icon { color: #2563eb; }

/* 사이드바 레전드 — KEEP/CLEAN 제거 후 아이콘만 */
.sidebar-legend > div {
  display: flex;
  align-items: center;
  gap: 6px;
}
.sidebar-legend > div i {
  width: 12px;
  text-align: center;
  color: #2563eb;
  font-size: 11px;
}


/* ════════════════════════════════════════════════════════════════════════
 * 카테고리 내부 2열 (테스트 좌 / 결과 우) 페어 레이아웃 + 인라인 결과 박스
 * ──────────────────────────────────────────────────────────────────────── */

/* 페어드 모드: category-tests 내부를 행 단위 그리드로 */
.category.expanded .category-tests.category-tests-paired {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  background: #fafbfc;
}

/* 한 테스트 = 한 행: 위 = 테스트 항목 (전폭), 아래 = 결과 박스 (실행 시에만 표시) */
.category-tests-paired .test-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

/* test-item-wrap: 전폭 화이트 배경 박스 */
.category-tests-paired .test-item-wrap {
  background: white;
  border: 1px solid var(--gray-200, #e5e7eb);
  border-radius: var(--radius-sm, 6px);
  padding: 4px;
  min-width: 0;
  width: 100%;
}

/* 결과 슬롯 — 결과가 있을 때만 표시 (display:none 기본, has-result 클래스 부여 시 표시) */
.test-result-slot {
  display: none;  /* 기본 숨김 */
  width: 100%;
  margin-left: 32px;  /* 좌측 체크박스 영역만큼 들여쓰기 */
  margin-right: 4px;
}

.test-result-slot.has-result {
  display: flex;
  align-items: flex-start;
}

/* 사용 안함 — 결과 없으면 슬롯 자체를 숨김 */
.result-slot-empty {
  display: none;
}

/* ════════════════════════════════════════════════════════════════════════
 * 인라인 결과 박스 (ribox) — 시안의 우측 PASS 박스 스타일
 * ──────────────────────────────────────────────────────────────────────── */
.ribox {
  flex: 1 1 auto;
  width: calc(100% - 36px);  /* 들여쓰기 만큼 빼기 */
  align-self: flex-start;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  background: white;
  border: 1px solid #e5e7eb;
  border-left-width: 4px;
  border-radius: 6px;
  font-size: 12px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  transition: box-shadow 0.15s, border-color 0.15s;
}

.ribox:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* 상태별 좌측 색 */
.ribox.ribox-pass    { border-left-color: #10b981; background: #ecfdf5; }
.ribox.ribox-fail    { border-left-color: #ef4444; background: #fef2f2; }
.ribox.ribox-skip    { border-left-color: #f59e0b; background: #fffbeb; }
.ribox.ribox-run     { border-left-color: #3b82f6; background: #eff6ff; }
.ribox.ribox-pending { border-left-color: #d1d5db; background: #f9fafb; }
.ribox.ribox-warn    { border-left-color: #f59e0b; background: #fffbeb; }
.ribox.ribox-info    { border-left-color: #3b82f6; background: #eff6ff; }

.ribox-head {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.ribox-verdict {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: white;
}

.ribox-verdict.verdict-pass    { background: #10b981; }
.ribox-verdict.verdict-fail    { background: #ef4444; }
.ribox-verdict.verdict-skip    { background: #f59e0b; }
.ribox-verdict.verdict-run     { background: #3b82f6; }
.ribox-verdict.verdict-pending { background: #9ca3af; }
.ribox-verdict.verdict-warn    { background: #f59e0b; }
.ribox-verdict.verdict-info    { background: #3b82f6; }

.ribox-method {
  font-size: 10px !important;
  padding: 2px 6px !important;
}

.ribox-path {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: 'Courier New', monospace;
  font-size: 11px;
  color: #374151;
  background: #fef3c7;  /* 시안의 노란 하이라이트 */
  padding: 2px 6px;
  border-radius: 3px;
}

.ribox-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 4px;
  border-top: 1px dashed rgba(0, 0, 0, 0.08);
}

.ribox-elapsed {
  color: #6b7280;
  font-size: 11px;
}

.ribox-code {
  font-weight: 700;
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 4px;
  background: white;
}

.ribox-code.code-2xx { color: #059669; }
.ribox-code.code-3xx { color: #d97706; }
.ribox-code.code-4xx { color: #ea580c; }
.ribox-code.code-5xx { color: #dc2626; }

.ribox-assert {
  color: #6b7280;
  font-size: 11px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.ribox-assert .fa-check { color: #10b981; }
.ribox-assert .fa-times { color: #ef4444; }

.ribox-btn-detail {
  margin-left: auto;
  border: 1px solid #d1d5db;
  background: white;
  color: #374151;
  padding: 3px 10px;
  border-radius: 4px;
  font-size: 11px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.15s;
}

.ribox-btn-detail:hover {
  background: #f3f4f6;
  border-color: #9ca3af;
}

/* ════════════════════════════════════════════════════════════════════════
 * 자세히 보기 패널 — 실행 결과 섹션 (td-result-section)
 * ──────────────────────────────────────────────────────────────────────── */
.td-result-section {
  margin-top: 12px;
  padding: 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
}

.td-result-section h5 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  font-size: 13px;
  color: #1e293b;
}

.td-result-section.td-result-empty {
  background: #fef9c3;
  border-color: #fde68a;
}

.td-result-section.td-result-pass { background: #f0fdf4; border-color: #bbf7d0; }
.td-result-section.td-result-fail { background: #fef2f2; border-color: #fecaca; }
.td-result-section.td-result-skip { background: #fffbeb; border-color: #fde68a; }

.td-result-verdict {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  color: white;
  letter-spacing: 0.5px;
}
.td-result-verdict.verdict-pass    { background: #10b981; }
.td-result-verdict.verdict-fail    { background: #ef4444; }
.td-result-verdict.verdict-skip    { background: #f59e0b; }
.td-result-verdict.verdict-run     { background: #3b82f6; }
.td-result-verdict.verdict-pending { background: #9ca3af; }

.td-result-code {
  font-weight: 700;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 4px;
  background: white;
  border: 1px solid #e5e7eb;
}
.td-result-code.code-2xx { color: #059669; }
.td-result-code.code-4xx { color: #ea580c; }
.td-result-code.code-5xx { color: #dc2626; }

.td-result-elapsed {
  font-size: 11px;
  color: #64748b;
  margin-left: auto;
}

.td-result-sub {
  margin-top: 10px;
}

.td-result-sub h6 {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 600;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.td-pre-dark {
  background: #0f172a !important;
  color: #e2e8f0 !important;
  font-family: 'Courier New', monospace;
  font-size: 11px;
  padding: 10px 12px;
  border-radius: 4px;
  max-height: 280px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-all;
}

.td-assertions {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.td-assertion {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 6px 10px;
  background: white;
  border-radius: 4px;
  font-size: 12px;
  border-left: 3px solid #e5e7eb;
}
.td-assertion.ok  { border-left-color: #10b981; }
.td-assertion.ok .fa-check-circle  { color: #10b981; }
.td-assertion.ng  { border-left-color: #ef4444; background: #fef2f2; }
.td-assertion.ng .fa-times-circle  { color: #ef4444; }

/* ════════════════════════════════════════════════════════════════════════
 * 테스트 스위트 헤더 — 제목 / 인라인 진행률 / 액션 버튼 한 줄 통합
 * (Request D #3: 하단 "전체 테스트 진행/결과" 섹션 제거하고 상단 헤더로 통합)
 * ──────────────────────────────────────────────────────────────────────── */
.card-header.suite-header-with-progress {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.card-header.suite-header-with-progress h2 {
  flex: 0 0 auto;
  margin: 0;
}

.card-header.suite-header-with-progress .header-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

/* 인라인 진행률(미니) — 헤더 안에 가로로 배치 */
.suite-progress-inline {
  flex: 1 1 320px;
  min-width: 240px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 10px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
}

.progress-bar.progress-bar-mini {
  flex: 1 1 auto;
  height: 6px;
  margin-bottom: 0;
  background: #e5e7eb;
}

.progress-bar.progress-bar-mini .progress-fill {
  background: linear-gradient(90deg, #3b82f6 0%, #10b981 100%);
}

.progress-stats-mini {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: #4b5563;
  flex-wrap: nowrap;
  flex: 0 0 auto;
}

.progress-stats-mini .stat-mini {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.progress-stats-mini .stat-mini strong {
  color: #111827;
  font-weight: 700;
}

.progress-stats-mini .stat-mini.stat-pass { color: #10b981; }
.progress-stats-mini .stat-mini.stat-pass strong { color: #047857; }
.progress-stats-mini .stat-mini.stat-fail { color: #ef4444; }
.progress-stats-mini .stat-mini.stat-fail strong { color: #b91c1c; }
.progress-stats-mini .stat-mini.stat-skip { color: #f59e0b; }
.progress-stats-mini .stat-mini.stat-skip strong { color: #b45309; }

/* 헤더 액션 — 아이콘 전용 버튼은 정사각형으로 */
.card-header.suite-header-with-progress .header-actions .btn-secondary[title],
.card-header.suite-header-with-progress .header-actions .btn-ghost[title]:not(#btnSelectAll):not(#btnSelectNone) {
  padding: 6px 10px;
  min-width: 36px;
  justify-content: center;
}

/* ── 좁은 화면 대응 — 진행률은 다음 줄로 ── */
@media (max-width: 1100px) {
  .suite-progress-inline {
    order: 3;
    flex: 1 1 100%;
  }
  .card-header.suite-header-with-progress .header-actions {
    margin-left: 0;
  }
}

/* ════════════════════════════════════════════════════════════════════════
 * 테스트 스위트 카드 — 가로 100% 영역 사용 (Request D #1)
 * ──────────────────────────────────────────────────────────────────────── */
.app-shell > main #testSuiteSection {
  width: 100%;
  max-width: none;
}

.app-shell > main #testSuiteSection .card-body {
  width: 100%;
}

.app-shell > main #testSuiteSection .test-categories {
  width: 100%;
}