/* ops.css — 운영(OPS) 콘솔 전용 (DevOps 소유). style.css 베이스 위에 로드 */
.kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:14px 0; }
.kpi { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px 8px; text-align:center; box-shadow:var(--shadow); }
.kpi .kv { font-size:26px; font-weight:900; color:var(--brand-dark); letter-spacing:-.02em; }
.kpi .kl { font-size:12px; color:var(--muted); margin-top:2px; }
@media (max-width:480px){ .kpis{ grid-template-columns:repeat(2,1fr);} }

.rowline { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:7px 0; border-bottom:1px solid var(--line); }
.rowline:last-child { border-bottom:0; }
.rowline.small { font-size:13px; color:var(--muted); padding:4px 0; }
.warn-line { margin-top:8px; padding:8px 10px; background:#fff7ed; color:var(--warn); border-radius:10px; font-size:13px; }

.tabs { display:flex; gap:6px; flex-wrap:wrap; margin:14px 0; }
.tabs button { padding:8px 14px; border-radius:999px; border:1px solid var(--line); background:var(--card); font-weight:700; font-size:14px; cursor:pointer; }
.tabs button.on { background:var(--brand); color:#fff; border-color:var(--brand); }

.seg { display:flex; gap:8px; align-items:center; }
.seg select, .seg input { padding:10px; border:1px solid var(--line); border-radius:10px; }
.btn.sm { padding:7px 12px; font-size:13px; }
.pill { display:inline-block; padding:3px 10px; border-radius:999px; background:var(--brand-soft); color:var(--brand-dark); font-size:12px; font-weight:700; }
.keybox { font-family:monospace; font-size:16px; letter-spacing:2px; background:var(--brand-soft); color:var(--brand-dark); padding:12px; border-radius:10px; text-align:center; word-break:break-all; margin:8px 0; }

/* ── 모바일 반응형 (≤420px) — 버튼·입력·표·탭 넘침/깨짐 방지(레이아웃만) ── */
@media (max-width:420px){
  .kpis{ grid-template-columns:repeat(2,1fr); }
  /* seg 줄바꿈 + 자식 100%폭(입력·선택 넘침 차단) */
  .seg{ flex-wrap:wrap; gap:8px; }
  .seg > input, .seg > select, .seg > textarea, .seg > label.fld, .seg > button{ flex:1 1 100%; min-width:0; }
  .seg input, .seg select{ width:100%; box-sizing:border-box; }
  .card input, .card select, .card textarea{ max-width:100%; box-sizing:border-box; }
  /* 탭 pill: 여백·글자 축소(자동 줄바꿈 유지) */
  .tabs button{ padding:7px 11px; font-size:13px; }
  /* 다열 표는 가로 스크롤 컨테이너 안에서만 넘치도록 */
  .tblscroll{ max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
}