/*
 * 시스템설정 > 업체관리 > 목록 (.sc-*, 2026-09-14 개편 — 사용자 확정: 목록 = A 운영 목록형 · 상세 = M1 gem 사이드바 7패널 · 자식 모달 5종).
 *   회원관리(.su-*)와 같은 A-4 부품(pill·band·btn·kvs·tb·chat 등)을 그대로 쓰고, 이 파일은 업체 화면 고유 조각만 둔다.
 *   샘플 = sample/system-companies/index.html. 동작은 Stimulus system-companies-list / system-companies-detail / company-business-info.
 */
.sc-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.sc-kpi { padding: 9px 12px; background: var(--ord-surface); border: 1px solid var(--ord-line); border-radius: 10px; cursor: pointer; display: flex; flex-direction: column; gap: 2px; text-align: left; font-family: inherit; }
.sc-kpi:hover { border-color: var(--ord-line-2); background: var(--ord-tint-blue-bg); }
.sc-kpi.is-on { border-color: var(--ord-accent); box-shadow: 0 0 0 2px var(--ord-focus-ring); }
.sc-kpi .su-k { font-size: 11px; color: var(--ord-text-4); }
.sc-kpi .su-v { font-size: 18px; font-weight: 800; color: var(--ord-accent); line-height: 1.1; }
.sc-kpi .su-v small { font-size: 10.5px; font-weight: 600; color: var(--ord-text-4); margin-left: 3px; }
.sc-kpi.is-warn .su-v { color: var(--ord-tint-amber-fg); }
.sc-kpi.is-danger .su-v { color: var(--ord-tint-red-fg); }
.sc-kpi.is-zero .su-v { color: var(--ord-text-4); }

.sc-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 14px; background: var(--ord-surface); border: 1px solid var(--ord-line); border-radius: 12px; margin-bottom: 10px; }
.sc-tools .su-search { flex: 1; min-width: 220px; }
.sc-tools .su-search .su-inp { padding-top: 7px; padding-bottom: 7px; font-size: 12px; }
.sc-tools .su-sel { padding: 6px 9px; font-size: 12px; }
.sc-tools .sc-tot { margin-left: auto; font-size: 11.5px; color: var(--ord-text-3); white-space: nowrap; }
.sc-tools .sc-tot b { color: var(--ord-text); }

.sc-logo { width: 32px; height: 32px; border-radius: 8px; background: linear-gradient(135deg, var(--ord-head-bg), var(--ord-head-bg)); color: var(--ord-on-solid); font-weight: 800; font-size: 12px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; }
.sc-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sc-logo.is-lg { width: 52px; height: 52px; font-size: 18px; border-radius: 12px; }
.sc-logo.is-gr { background: var(--ord-line); color: var(--ord-text-3); }

.sc-tb { width: 100%; border-collapse: collapse; font-size: 12px; }
.sc-tb th, .sc-tb td { padding: 8px 10px; border-bottom: 1px solid var(--ord-line-soft); text-align: left; vertical-align: middle; }
.sc-tb th { font-size: 11px; font-weight: 700; color: var(--ord-text-4); background: var(--ord-tint-blue-bg); white-space: nowrap; }
.sc-tb tr:last-child td { border-bottom: none; }
.sc-tb tbody tr { cursor: pointer; }
.sc-tb tbody tr:hover td { background: var(--ord-surface-2); }
.sc-tb tr.is-dim td { opacity: .7; }
.sc-tb .c { text-align: center; }
.sc-tb .sc-who { display: flex; align-items: center; gap: 9px; }
.sc-tb .sc-nm { font-weight: 700; color: var(--ord-text); }
.sc-tb .sc-sub { font-size: 11px; color: var(--ord-text-4); }
.sc-tb td.sc-act { text-align: right; white-space: nowrap; }
.sc-tb td.sc-act .su-btn { visibility: hidden; }
.sc-tb tbody tr:hover td.sc-act .su-btn { visibility: visible; }
.sc-spark { display: inline-flex; align-items: flex-end; gap: 2px; height: 16px; vertical-align: middle; margin-right: 6px; }
.sc-spark i { display: block; width: 4px; background: var(--ord-accent-soft); border-radius: 1px; min-height: 2px; }
.sc-spark i.is-hi { background: var(--ord-head-bg); }
.sc-usage { display: flex; align-items: center; gap: 8px; min-width: 120px; }
.sc-bar { flex: 1; height: 6px; background: var(--ord-band); border-radius: 3px; overflow: hidden; min-width: 60px; }
.sc-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--ord-head-bg), var(--ord-head-bg)); }
.sc-bar.is-warn i { background: var(--ord-solid-amber); }
.sc-bar.is-over i { background: var(--ord-solid-red); }
.sc-usage small { font-size: 11px; color: var(--ord-text-4); white-space: nowrap; }
.sc-feats { display: flex; gap: 4px; flex-wrap: wrap; }
.sc-pager { padding: 8px 12px; border-top: 1px solid var(--ord-line-soft); display: flex; align-items: center; gap: 8px; }
.sc-pager .su-sel { padding: 3px 6px; font-size: 11px; }
.sc-pager .sc-pg { margin-left: auto; }

/* 상세 — 개요 건강 카드 */
.sc-hgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.sc-hcard { padding: 10px 12px; background: var(--ord-surface); border: 1px solid var(--ord-line); border-radius: 10px; }
.sc-hcard .su-k { font-size: 11px; color: var(--ord-text-4); }
.sc-hcard .su-v { font-size: 18px; font-weight: 800; color: var(--ord-accent); line-height: 1.1; margin-top: 2px; }
.sc-hcard .su-v small { font-size: 10.5px; color: var(--ord-text-4); font-weight: 600; margin-left: 3px; }
.sc-hcard.is-warn .su-v { color: var(--ord-tint-amber-fg); }
.sc-hcard.is-danger .su-v { color: var(--ord-tint-red-fg); }
.sc-hcard .su-d { font-size: 11px; color: var(--ord-text-3); margin-top: 4px; }
.sc-approval { padding: 12px 14px; border-radius: 12px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.sc-approval.is-pending { background: var(--ord-tint-amber-bg); border: 1px solid var(--ord-tint-amber-line); }
.sc-approval.is-rejected { background: var(--ord-tint-red-bg); border: 1px solid var(--ord-tint-red-line); }
.sc-approval .su-m { flex: 1; min-width: 220px; }
.sc-approval .su-t { font-size: 13px; font-weight: 800; color: var(--ord-tint-amber-fg); }
.sc-approval.is-rejected .su-t { color: var(--ord-tint-red-fg); }
.sc-approval .su-d { font-size: 12px; color: var(--ord-text-3); margin-top: 2px; line-height: 1.5; }

/* 기능·설정·히스토리 패널 */
.sc-feat { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--ord-line-soft); font-size: 12px; }
.sc-feat:last-child { border-bottom: none; }
.sc-feat .su-nm { font-weight: 700; color: var(--ord-text); min-width: 130px; }
.sc-feat .su-meta { color: var(--ord-text-4); font-size: 11px; flex: 1; }
.sc-feat .su-meta b { color: var(--ord-tint-red-fg); }
.sc-feat.is-past { opacity: .6; }
.sc-setrow { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--ord-line-soft); font-size: 12px; }
.sc-setrow:last-child { border-bottom: none; }
.sc-setrow .su-nm { font-weight: 700; color: var(--ord-text); min-width: 130px; }
.sc-setrow .su-val { flex: 1; color: var(--ord-text-4); }
.sc-setrow .su-val.is-ov { color: var(--ord-accent); font-weight: 800; }
.sc-setrow .su-val.is-ov::before { content: "●"; font-size: 7px; margin-right: 5px; vertical-align: 2px; }
.sc-tl { position: relative; padding-left: 22px; }
.sc-tl::before { content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 2px; background: var(--ord-line); }
.sc-tl-date { font-size: 11px; font-weight: 800; color: var(--ord-text-4); margin: 8px 0 4px; }
.sc-tl-it { position: relative; padding: 5px 0 9px; }
.sc-tl-it::before { content: ""; position: absolute; left: -19px; top: 10px; width: 10px; height: 10px; border-radius: 50%; background: var(--ord-surface); border: 2px solid var(--ord-line-2); }
.sc-tl-it.is-note::before { background: var(--ord-head-bg); border-color: var(--ord-accent); }
.sc-tl-it .su-h { font-size: 12px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; color: var(--ord-text); }
.sc-tl-it .su-d { font-size: 11.5px; color: var(--ord-text-3); margin-top: 2px; }
.sc-note-form { display: flex; gap: 8px; align-items: flex-start; }
.sc-note-form .su-ta { flex: 1; min-height: 38px; }
.sc-org-seg { margin-bottom: 12px; }
.sc-org-pane[hidden] { display: none; }
.sc-members-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* 자식 모달 */
.sc-impact { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.sc-impact > div { padding: 8px 10px; background: var(--ord-surface); border: 1px solid var(--ord-line); border-radius: 10px; font-size: 11px; color: var(--ord-text-4); }
.sc-impact > div b { display: block; font-size: 15px; font-weight: 800; color: var(--ord-accent); }
.sc-impact > div.is-hot { border-color: var(--ord-tint-red-line); }
.sc-impact > div.is-hot b { color: var(--ord-tint-red-fg); }
.sc-dangerbox { padding: 9px 12px; border-radius: 10px; background: var(--ord-tint-red-bg); border: 1px solid var(--ord-tint-red-line); color: var(--ord-tint-red-fg); font-size: 11.5px; line-height: 1.6; }
.sc-okbox { padding: 9px 12px; border-radius: 10px; background: var(--ord-tint-green-bg); border: 1px solid var(--ord-tint-green-line); color: var(--ord-tint-green-fg); font-size: 11.5px; line-height: 1.6; }
.sc-okbox.is-fail { background: var(--ord-tint-red-bg); border-color: var(--ord-tint-red-line); color: var(--ord-tint-red-fg); }
.sc-okbox.is-info { background: var(--ord-tint-blue-bg); border-color: var(--ord-tint-blue-line); color: var(--ord-tint-blue-fg); }
.sc-okbox[hidden] { display: none; }
.sc-chk { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ord-text-2); padding: 10px 12px; background: var(--ord-surface); border: 1px solid var(--ord-line); border-radius: 10px; cursor: pointer; }
.sc-chk input { accent-color: var(--ord-accent); }
.sc-form2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.sc-form2 label { display: block; font-size: 11px; font-weight: 700; color: var(--ord-text-2); margin-bottom: 4px; }
.sc-form2 .su-inp, .sc-form2 .su-sel { width: 100%; }
.sc-diff { display: grid; grid-template-columns: 90px 1fr 24px 1fr; gap: 6px 10px; font-size: 12px; align-items: center; }
.sc-diff span { color: var(--ord-text-4); }
.sc-diff .is-old { color: var(--ord-text-4); text-decoration: line-through; }
.sc-diff .is-new { color: var(--ord-accent); font-weight: 800; }
.sc-diff .is-arrow { color: var(--ord-text-4); text-align: center; }
.sc-diff[hidden] { display: none; }
.sc-invite-url { display: flex; gap: 8px; align-items: center; }
.sc-invite-url code { flex: 1; padding: 8px 10px; background: var(--ord-surface-2); border: 1px solid var(--ord-line); border-radius: 10px; font-size: 12px; color: var(--ord-text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 900px) {
  .sc-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sc-hgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sc-impact, .sc-form2 { grid-template-columns: minmax(0, 1fr); }
}