/* =====================================================================
   APS · erp-unified 이식 브리지  (erp-unified-aps.css v1.0)
   ---------------------------------------------------------------------
   · 역할: erp-unified.css(동봉 원본, 수정 금지)의 토큰·규격을
           APS 고유 클래스 체계(b-* 배지, banner, kpi, kv, toolbar,
           stat 카드, SPA 모달 등)에 매핑한다.
   · 스코프: .main .content 내부 + body 직속 모달 오버레이 ONLY
       └ .sidebar / .topbar 선택자 사용 금지 (셸은 기존 모습 유지)
   · 로드 순서: erp-unified.css "바로 다음", 전체 <link> 의 최후순위
   · 임의 px 금지 — 아래 값은 전부 erp-unified 표준 규격과 동일:
       입력/셀렉트 34px · 버튼 34/28/38px · 카드 간격 12px
       카드 헤더 11px 16px · 바디 13px 16px · 라운딩 10px/7px
       테이블 헤더 36px/11.5px · 행 42px/13px · 제목 21px/750
   ===================================================================== */

/* =====================================================================
   1. 그리드 · 스택 — 카드 간 표준 간격 12px
   ===================================================================== */
.main .content .grid,
.main .content .grid-2, .main .content .grid-3, .main .content .grid-4 {
  gap: var(--u-gap);
}
.main .content .stack { gap: var(--u-gap); }

/* =====================================================================
   2. 헤더 없는 카드 · 카드 내 h3 (진단/설정/SPA 카드)
   ===================================================================== */
.main .content .card:not(:has(> .hd)):not(:has(> .bd)) { padding: 13px 16px; }
.main .content .card > h3 {
  margin: 0 0 8px;
  font-size: 13.5px; font-weight: 750; letter-spacing: -0.01em; color: var(--u-ink);
}
.main .content .section-title {
  margin: 0 0 8px;
  font-size: 12.5px; font-weight: 700; color: var(--u-ink-2);
}

/* =====================================================================
   3. KPI 카드 (.card.kpi) · 통계 카드 (.card.stat)
      — erp-unified §8 ui-metric-card 규격과 동일 톤
   ===================================================================== */
.main .content .kpi, .main .content .card.stat { min-height: 0; gap: 4px; }
.main .content .kpi > .bd { padding: 12px 16px; }
.main .content .kpi .lbl,
.main .content .stat .stat-label {
  font-size: 11.5px; font-weight: 650; color: var(--u-ink-3);
  letter-spacing: 0; text-transform: none;
}
.main .content .kpi .val,
.main .content .stat .stat-value {
  font-family: inherit; font-variant-numeric: tabular-nums;
  font-size: 21px; font-weight: 750; color: var(--u-ink); letter-spacing: -0.02em;
}
.main .content .kpi .val small { font-size: 12.5px; font-weight: 650; color: var(--u-ink-3); }
.main .content .stat .stat-sub { font-size: 11.5px; color: var(--u-ink-3); }
.main .content .trend { font-size: 11.5px; font-weight: 650; font-variant-numeric: tabular-nums; }
.main .content .trend.up { color: var(--u-green); }
.main .content .trend.down { color: var(--u-red); }
.main .content .trend.flat { color: var(--u-ink-3); }

/* 카드/KPI 아이콘 칩 — erp-unified 카드 헤더 .ic 와 동일 규격 */
.main .content .kpi .lbl .ic, .main .content .item .ic {
  width: 26px; height: 26px; border-radius: var(--u-radius-s) !important;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; flex: 0 0 auto;
}
.main .content .ic-primary { background: var(--u-blue-tint); color: var(--u-blue); }
.main .content .ic-success { background: var(--u-green-tint); color: var(--u-green); }
.main .content .ic-warning { background: var(--u-amber-tint); color: var(--u-amber); }
.main .content .ic-danger  { background: var(--u-red-tint);   color: var(--u-red); }
.main .content .ic-violet  { background: var(--u-blue-tint);  color: var(--u-blue-deep); }

/* =====================================================================
   4. 상태 배지 — APS b-* 코드 → erp-unified §7 4톤 매핑
   ===================================================================== */
.main .content .badge.b-up, .main .content .badge.b-done, .main .content .badge.b-success {
  background: var(--u-green-tint); color: var(--u-green); border-color: transparent;
}
.main .content .badge.b-warn, .main .content .badge.b-warning,
.main .content .badge.b-degraded, .main .content .badge.b-medium {
  background: var(--u-amber-tint); color: var(--u-amber); border-color: transparent;
}
.main .content .badge.b-down, .main .content .badge.b-failed, .main .content .badge.b-critical,
.main .content .badge.b-error, .main .content .badge.b-high {
  background: var(--u-red-tint); color: var(--u-red); border-color: transparent;
}
.main .content .badge.b-processing, .main .content .badge.b-running, .main .content .badge.b-info {
  background: var(--u-blue-tint); color: var(--u-blue); border-color: transparent;
}
.main .content .badge.b-unknown, .main .content .badge.b-queued, .main .content .badge.b-pending {
  background: var(--u-card-soft); color: var(--u-ink-3); border-color: var(--u-line);
}
.main .content .badge.b-partial, .main .content .badge.b-low {
  background: var(--u-blue-tint); color: var(--u-blue-deep); border-color: transparent;
}

/* =====================================================================
   5. 배너 — erp-unified §11 alert 규격과 동일 (radius 7 · 간격 12)
   ===================================================================== */
.main .content .banner {
  padding: 10px 14px; margin-bottom: var(--u-gap);
  border-radius: var(--u-radius-s) !important;
  border: 1px solid var(--u-line); background: var(--u-card-soft);
  font-size: 12.5px; font-weight: 600; color: var(--u-ink-2);
}
.main .content .banner-ok   { background: var(--u-green-tint); color: var(--u-green); border-color: transparent; }
.main .content .banner-warn { background: var(--u-amber-tint); color: var(--u-amber); border-color: transparent; }
.main .content .banner-crit { background: var(--u-red-tint);   color: var(--u-red);   border-color: transparent; }
.main .content .alert-warn, .toast.warning { background: var(--u-amber-tint); color: var(--u-amber); border-color: transparent; }
.main .content .alert-crit, .toast.error   { background: var(--u-red-tint);   color: var(--u-red);   border-color: transparent; }

/* =====================================================================
   6. 세로 라벨 필드(.field) — erp-unified §3 .form-field 와 동일 규격
   ===================================================================== */
.main .content .field {
  display: flex; flex-direction: column; gap: 4px; margin: 0 0 var(--u-gap);
  font-size: 14px; font-weight: 500; color: var(--u-ink);
}
.main .content .field > span,
.main .content .field > label {
  font-size: 12px; font-weight: 650; color: var(--u-ink-2); margin: 0;
}
.main .content .field .hint { font-size: 11.5px; font-weight: 500; color: var(--u-ink-3); }

/* =====================================================================
   7. 툴바 · 페이저 · 상태 텍스트
   ===================================================================== */
.main .content .toolbar, .main .content .toolbar-r {
  gap: 8px; margin-bottom: var(--u-gap);
}
.main .content .pager { margin-top: var(--u-gap); font-size: 12.5px; color: var(--u-ink-3); }
.main .content .pager .btn { min-width: 30px; }
.main .content .note { font-size: 12px; color: var(--u-ink-3); }
.main .content .loading { padding: 32px; color: var(--u-ink-3); font-size: 14px; }
.main .content .empty, .main .content .login-hint {
  padding: 28px 16px; text-align: center; color: var(--u-ink-3); font-size: 14px;
  border: 1px dashed var(--u-line-2); border-radius: var(--u-radius) !important;
  background: var(--u-card);
}

/* =====================================================================
   8. 정의 목록(.kv) · 진단 행 · 코드 스니펫
   ===================================================================== */
.main .content .kv {
  grid-template-columns: minmax(140px, 200px) minmax(0, 1fr);
  gap: 0; font-size: 14px;
}
.main .content .kv dt {
  padding: 8px 0; border-bottom: 1px solid var(--u-line-soft);
  color: var(--u-ink-2); font-size: 12.5px; font-weight: 650;
}
.main .content .kv dd {
  padding: 8px 0 8px 12px; border-bottom: 1px solid var(--u-line-soft);
  color: var(--u-ink);
}
.main .content .kv dt:last-of-type, .main .content .kv dd:last-of-type { border-bottom: 0; }
.main .content .diag-row { padding: 11px 0; border-bottom: 1px solid var(--u-line-soft); }
.main .content .diag-row:last-child { border-bottom: 0; }
.main .content .diag-row .nm { font-weight: 700; font-size: 14px; color: var(--u-ink); }
.main .content .diag-row .tg { font-size: 12px; color: var(--u-ink-3); }
.main .content .httpcode {
  font-size: 12px; padding: 2px 8px; border-radius: 99px;
  background: var(--u-card-soft); border: 1px solid var(--u-line); color: var(--u-ink-2);
}
.main .content pre.snip {
  background: var(--u-navy); color: #D7E3F4;
  border-radius: var(--u-radius-s); padding: 10px 12px; font-size: 12px;
}
.main .content .code-preview {
  border: 1px solid var(--u-line); border-radius: var(--u-radius-s) !important;
  background: var(--u-card-soft); font-size: 12px;
}
.main .content .vsi-keybox {
  background: var(--u-navy); border: 0; border-radius: var(--u-radius-s) !important;
}

/* =====================================================================
   9. 언더라인 탭(.tabs) → 세그먼트 패턴 재사용 (erp-unified §5)
   ===================================================================== */
.main .content .tabs {
  display: inline-flex; background: #E8EAEE; border: 0; border-bottom: 0;
  border-radius: 11px !important; padding: 3px; gap: 2px; margin-bottom: var(--u-gap);
}
body.theme-dark .main .content .tabs { background: #222B38; }
.main .content .tabs button {
  height: auto; border: 0; background: transparent; margin: 0;
  padding: 7px 16px; border-radius: 8px !important;
  font-size: 14px; font-weight: 600; color: var(--u-ink-2);
  border-bottom: 0; transition: .14s; line-height: 1.2; cursor: pointer;
}
.main .content .tabs button.active {
  color: var(--u-ink); font-weight: 700; background: var(--u-card);
  border-bottom: 0; box-shadow: 0 1px 4px rgba(20,27,38,.12);
}

/* =====================================================================
   10. 변형 클래스 없는 .btn 폴백 — btn-outline 과 동일 스타일
       (SPA 가 생성하는 <button class="btn"> · 기존 클래스 제거 불가 대응)
   ===================================================================== */
.main .content .btn:not(.btn-primary):not(.btn-outline):not(.btn-ghost):not(.btn-danger):not(.btn-navy):not(.btn-soft):not(.btn-add):not(.btn-lookup),
.modal .btn:not(.btn-primary):not(.btn-outline):not(.btn-ghost):not(.btn-danger):not(.btn-navy),
.ui-modal .btn:not(.btn-primary):not(.btn-outline):not(.btn-ghost):not(.btn-danger):not(.btn-navy) {
  background: var(--u-card); border-color: var(--u-line-2); color: var(--u-ink-2);
}
.main .content .btn-soft { background: var(--u-card-soft); border-color: var(--u-line-2); color: var(--u-ink-2); }
.main .content .btn-block { width: 100%; }

/* =====================================================================
   11. SPA 모달 호환 — 헤더/바디 클래스 없이 h3 + 본문 + .modal-foot 구조
       (erp-unified §10 은 .modal 패딩을 0 으로 두므로 여기서 복원)
   ===================================================================== */
.modal { padding: 16px !important; }
.modal > h3 {
  margin: -16px -16px 14px; padding: 13px 16px;
  border-bottom: 1px solid var(--u-line);
  font-size: 15px; font-weight: 750; color: var(--u-ink);
}
.modal .modal-foot {
  display: flex; justify-content: flex-end; gap: 8px;
  margin: 14px -16px -16px; padding: 12px 16px;
  border-top: 1px solid var(--u-line);
}
.modal .field { display: flex; flex-direction: column; gap: 4px; margin: 0 0 var(--u-gap); }
.modal .field > span, .modal .field > label { font-size: 12px; font-weight: 650; color: var(--u-ink-2); }
.modal input:not([type="radio"]):not([type="checkbox"]), .modal select, .modal textarea, .modal .input {
  width: 100%; height: var(--u-field-h); padding: 0 10px;
  border: 1px solid var(--u-line-2); border-radius: var(--u-radius-s);
  background: var(--u-card); color: var(--u-ink); font-size: 13.5px;
}
.modal textarea { height: auto; min-height: 76px; padding: 8px 10px; }
.modal .alert { padding: 10px 14px; border-radius: var(--u-radius-s); font-size: 12.5px; font-weight: 600; margin-bottom: var(--u-gap); }
.modal .alert-crit { background: var(--u-red-tint); color: var(--u-red); }
.modal .alert-warn { background: var(--u-amber-tint); color: var(--u-amber); }

/* =====================================================================
   12. 기타 SPA 위젯 라운딩·보더 통일 (radius 7 · u-line)
   ===================================================================== */
.main .content .svc-pill {
  height: var(--u-btn-h-sm); border-radius: var(--u-radius-s) !important;
  background: var(--u-card-soft); border: 1px solid var(--u-line); font-size: 12px;
}
.main .content .item { padding: 10px 0; border-bottom: 1px solid var(--u-line-soft); }
.main .content .item .tt { font-size: 14px; }
.main .content .item .ds { font-size: 12px; color: var(--u-ink-3); }
.main .content .metric-line .label { font-size: 12px; color: var(--u-ink-3); }
.main .content .metric-line .bar { background: var(--u-card-soft); border-color: var(--u-line); }
.main .content .metric-line .val { font-size: 12.5px; font-variant-numeric: tabular-nums; }
.main .content .bars .bar { border-radius: 3px 3px 0 0; }

/* Service Monitor — erp_companies_navy.html의 표·여백 언어를 APS 데이터에 적용. */
.main .content[data-page="service_monitor"] { max-width: 1400px; }
.main .content[data-page="service_monitor"] .service-monitor-card {
  padding: 0 !important;
  overflow: hidden;
  border: 1px solid var(--u-line) !important;
  border-radius: 9px !important;
  background: var(--u-card);
  box-shadow: var(--u-shadow);
}
.main .content[data-page="service_monitor"] .service-monitor-heading {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 58px; padding: 11px 14px;
  border-bottom: 1px solid var(--u-line); background: var(--u-card);
}
.main .content[data-page="service_monitor"] .service-monitor-heading h3 {
  margin: 0; color: var(--u-ink); font-size: 15px; font-weight: 750;
}
.main .content[data-page="service_monitor"] .service-monitor-heading p {
  margin: 4px 0 0; color: var(--u-ink-3); font-size: 14px; line-height: 1.4;
}
.main .content[data-page="service_monitor"] .service-count {
  flex: 0 0 auto; color: var(--u-ink-3); font-size: 14px; white-space: nowrap;
}
.main .content[data-page="service_monitor"] .service-count b {
  color: var(--u-ink); font-family: var(--font-mono); font-size: 14px;
}
.main .content[data-page="service_monitor"] .service-monitor-table-wrap {
  overflow-x: auto; border: 0 !important; border-radius: 0 !important;
}
.main .content[data-page="service_monitor"] table.service-monitor-table { min-width: 920px; }
.main .content[data-page="service_monitor"] table.service-monitor-table thead th {
  height: 38px; padding: 9px 14px;
  border-right: 1px solid var(--u-line) !important;
  border-bottom: 1px solid var(--u-line) !important;
  font-size: 11.5px; font-weight: 650; letter-spacing: .03em;
}
.main .content[data-page="service_monitor"] table.service-monitor-table thead th:last-child { border-right: 0 !important; }
.main .content[data-page="service_monitor"] table.service-monitor-table tbody td {
  height: 44px; padding: 10px 14px;
  border-right: 1px solid var(--u-line) !important;
  border-bottom: 1px solid var(--u-line) !important;
  color: var(--u-ink-2); font-size: 14px; line-height: 1.4; white-space: nowrap;
}
.main .content[data-page="service_monitor"] table.service-monitor-table tbody td:last-child { border-right: 0 !important; }
.main .content[data-page="service_monitor"] .service-code-stub {
  display: inline-flex; align-items: center; min-height: 24px; padding: 3px 8px;
  border: 1px solid var(--u-blue-line); border-radius: 5px;
  background: var(--u-blue-tint); color: var(--u-blue);
  font-family: var(--font-mono); font-size: 12px; font-weight: 700;
}
.main .content[data-page="service_monitor"] .service-name-cell { color: var(--u-ink) !important; font-weight: 600; }
.main .content[data-page="service_monitor"] .service-number-cell {
  font-family: var(--font-mono); font-size: 14px !important; font-variant-numeric: tabular-nums;
}
.main .content[data-page="service_monitor"] .service-checked-cell { font-size: 14px; }
.main .content[data-page="service_monitor"] .service-status-cell .badge {
  min-height: 24px; padding: 4px 9px; border-radius: 5px !important;
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
}
@media (max-width: 560px) {
  .main .content[data-page="service_monitor"] .service-monitor-heading { align-items: flex-start; }
  .main .content[data-page="service_monitor"] .service-monitor-heading p { display: none; }
}

/* API 통합 관리 — 외부 API 등록/수정 폼은 입력 성격에 맞춰 넓게 배치한다. */
.modal.external-api-modal {
  width: min(1040px, calc(100vw - 32px));
  max-width: 1040px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
}
.external-api-form {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px 16px;
}
.external-api-form .span-1 { grid-column: span 1; }
.external-api-form .span-2 { grid-column: span 2; }
.external-api-form .span-3 { grid-column: span 3; }
.external-api-form .span-4 { grid-column: 1 / -1; }
.external-api-form .field { min-width: 0; margin: 0; }
.external-api-form textarea.input { min-height: 104px; resize: vertical; }
.external-api-actions { justify-content: flex-end; }
.api-select-cell {
  width: 44px;
  min-width: 44px;
  max-width: 44px;
  padding-left: 8px !important;
  padding-right: 8px !important;
  text-align: center;
}
.api-select-cell input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  vertical-align: middle;
  accent-color: var(--primary, #2563eb);
}
@media (max-width: 760px) {
  .external-api-form { grid-template-columns: 1fr 1fr; }
  .external-api-form .span-1,
  .external-api-form .span-2,
  .external-api-form .span-3 { grid-column: span 1; }
  .external-api-form .span-4 { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .modal.external-api-modal { width: calc(100vw - 20px); }
  .external-api-form { grid-template-columns: 1fr; }
  .external-api-form .span-1,
  .external-api-form .span-2,
  .external-api-form .span-3,
  .external-api-form .span-4 { grid-column: 1; }
}