/* 운영 현황 화면 전용. control.css를 덮어쓰지 않고 필요한 것만 더한다. */

.nav-group{padding:14px 14px 4px;color:#64748b;font-size:11px;font-weight:800;letter-spacing:.12em}

/* 값을 읽지 못한 칸은 숫자처럼 보이면 안 된다. */
.metric.unknown strong{font-size:15px;color:var(--muted);font-weight:600}
.metric-state{display:block;margin-top:6px;color:#94a3b8;font-size:11px;font-style:normal;letter-spacing:.04em}
.v-none{color:var(--muted);font-size:13px}
.ops-metrics{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}@media(max-width:900px){.ops-metrics{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}}
.highlight-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}

/* 연결 상태. "연결 안 됨"과 "고장"의 색을 다르게 둔다. */
.conn{display:inline-flex;padding:6px 10px;border-radius:999px;font-size:12px;font-weight:800;white-space:nowrap}
.conn-CONNECTED{background:#e6f6ef;color:#0f7a55}
.conn-ACTIVITY_ONLY{background:#eef4ff;color:#3455a8}
.conn-OFFLINE{background:#f1f3f7;color:#5b6472}
.conn-STATUS_MISSING{background:#f6f2ea;color:#8a6d3b}
.conn-SOURCE_MISSING{background:#f6f2ea;color:#8a6d3b}
.conn-NOT_CONFIGURED{background:#f1f3f7;color:#6b7280}
.conn-STALE{background:#fdf3e3;color:#a05a00}
.conn-ERROR{background:#fdecec;color:#c02626}

/* 완성도. 개발 중은 경고색을 쓰지 않는다. */
.life{display:inline-flex;padding:5px 9px;border-radius:8px;font-size:11px;font-weight:700;background:#f1f3f7;color:#475467}
.life-OPERATING{background:#e6f6ef;color:#0f7a55}
.life-DEVELOPING{background:#eef4ff;color:#3455a8}
.life-EXTERNAL{background:#f6f4fb;color:#6d5ba8}

.row-right{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.path{color:#98a2b3;font-size:11px;margin-top:4px;word-break:break-all}

.chips{display:flex;flex-wrap:wrap;gap:6px;padding:0 0 14px}
.chip{background:#eef2f8;color:#344054;border-radius:8px;padding:4px 8px;font-size:11px}
.chip-none{background:#f7f4ef;color:#8a6d3b}

.scheduler-note{margin:0;padding:14px 16px;border-radius:14px;background:#f6f2ea;color:#8a6d3b;font-size:13px}

/* 성과 사슬 */
.chain{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:12px}
.chain-step{border:1px solid var(--line);border-radius:14px;padding:16px;background:#fff}
.chain-step.blocked{border-style:dashed;background:#faf8f4}
.chain-label{display:block;color:var(--muted);font-size:12px}
.chain-value{margin:8px 0 4px;font-size:21px}
.chain-step small{color:#98a2b3;font-size:11px}
.chain-step em{display:block;margin-top:8px;color:#8a6d3b;font-size:11px;font-style:normal}

@media(max-width:850px){.row-right{justify-content:flex-start}}

/* 프로그램 행의 단추. 기존 `link` 모양을 그대로 쓰고 간격만 준다. */
.row-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.row-actions .link { padding: 2px 0; }
/* 상세 목록 모양. 업체 패널도 같은 모양을 쓴다 — 화면마다 다르게 보이면
   같은 정보인지 알아보기 어렵다. */
.program-panel .detail, #companyPanel .detail {
  display: grid; grid-template-columns: 120px 1fr; gap: 6px 14px; margin: 0; }
.program-panel .detail dt, #companyPanel .detail dt { color: #6b7c8c; }
.program-panel .detail dd, #companyPanel .detail dd { margin: 0; }
/* 개발이력은 길다. 가로로 넘치지 않게 접고, 세로로만 움직이게 한다. */
.program-panel .history { max-height: 460px; overflow: auto; white-space: pre-wrap;
  word-break: break-word; background: #f7fafc; border: 1px solid #e2ebf2;
  border-radius: 8px; padding: 12px; font-size: 12px; line-height: 1.6; }

/* 업체 화면. 프로그램이 늘어나도 가로로 밀리지 않게 폭에 맞춰 흐른다. */
.company-grid { display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.company-card { border: 1px solid var(--line); border-radius: 14px; padding: 14px;
  background: #fbfdff; min-width: 0; }
.company-card h4 { margin: 0 0 4px; font-size: 14px; }
.company-card .path { word-break: break-all; }
.company-card .chips { margin-top: 8px; }
#companyRows .service-row strong { word-break: break-word; }

/* 한 줄짜리 항목. 운영비 화면이 이미 `.row` 와 `.muted` 를 쓰고 있었는데
   어느 css 에도 정의가 없어서 이름과 값이 붙어 보였다. 여기서 채운다 —
   AI 사용량 화면도 같은 모양을 쓴다. 화면마다 다르게 보이면 같은 정보인지
   알아보기 어렵다. */
.row{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;
  padding:11px 0;border-bottom:1px solid var(--line);font-size:13px}
.row:last-child{border-bottom:0}
.row>span:last-child{text-align:right;min-width:0}
.muted{display:block;color:var(--muted);font-size:11px;margin-top:2px}

/* AI 사용량. 카드 안의 작은 묶음이라 카드를 한 겹 더 두지 않는다. */
.ai-block h4{margin:0 0 6px;font-size:13px}
.ai-block h4 small{color:var(--muted);font-weight:600;font-size:11px;margin-left:6px}
#aiUsage .table-scroll{margin-top:6px}
#aiUsage table{min-width:840px}
#aiUsage .path{margin-top:2px}
#aiUsage code{background:#f1f4f9;border-radius:5px;padding:1px 5px;font-size:11px}
/* ★ 좁은 화면에서 표가 본문을 밀지 않게 한다.
   `.table-scroll` 은 grid 칸 안에 있는데, grid 칸의 기본 최소폭은 "내용만큼"
   이라 표(min-width:840px)가 칸을 통째로 넓혀 버린다. 그러면 화면 전체가
   가로로 밀린다. `min-width:0` 을 줘야 비로소 칸이 줄고 **표가 자기 칸 안에서**
   가로로 움직인다. 이 카드 안으로만 범위를 좁혀 둔다 — 다른 화면도 같은
   증상이 있지만 이번 작업의 범위가 아니다(완료보고에 적었다). */
#aiUsage, #aiUsage .grid.two, #aiUsage .ai-block, #aiUsage .table-scroll{min-width:0}
#aiUsage .table-scroll{max-width:100%;overflow-x:auto}
/* 여섯 칸이 한 줄에 들어가도록 조금 좁게. 관리화면을 열었을 때 스크롤을
   많이 하지 않고 핵심이 보여야 한다. */
.ai-metrics{grid-template-columns:repeat(auto-fit,minmax(165px,1fr))}
@media(max-width:900px){.ai-metrics{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}}
.ai-period{margin:-4px 0 0;color:var(--muted);font-size:12px;font-weight:700}
.ai-period small{font-weight:500}
.ai-sub{margin:14px 0 2px;font-size:13px}
.ai-sub small{color:var(--muted);font-weight:500;font-size:11px;margin-left:6px}