/*
 * 시스템설정 > 업체관리 > 설정탭 — 「시스템 기본값 + 업체별 개별 설정」 모달 공용 골격 (.ovr-*)
 *   2026-09-14 신설(.fus-* 파일 업로드 전용) → 2026-09-14 5개 설정 모달 전부(저장 용량·상품 깊이·게시판 갯수·파일 업로드·채팅)가
 *   같은 골격을 쓰게 되어 중립 접두로 개명. 사용자 확정안 = 「M3 2뷰 세그먼트」(sample/company-settings/index.html).
 *
 * 구조: .ovr-body(surface-2) → .ovr-top(.ord-seg [시스템 기본값 | 업체별 설정 N] + 힌트)
 *   ├ 뷰 1(defaults): .ovr-grid = 기본값 밴드(.ovr-band, 헤더 우측 저장 버튼) + 영향 패널(.ovr-eff — 적용 범위·라이브 경고)
 *   └ 뷰 2(companies): 필터(.ord-seg [개별 설정만|전체 업체] + 검색) + 효력표(.ovr-tb: 회색=기본값 따름 · ●차콜=개별값) + 일괄바(.ovr-bulk)
 * 손자 모달(업체별 편집) = .ovr-item 행(스위치 「기본값 따름 ↔ 개별값」이 상태의 정본, OFF=컨트롤 disabled → 미전송 = 빈 값 = 해제).
 * A-4 액센트형(규칙 12): 차콜 accent · 밴드 band / 보더 line · primary 차콜 pill · 입력 focus 차콜 + focus-ring 링.
 * 동작은 Stimulus company-override-admin(본문) / company-override-form(손자 폼) — 이 파일은 시각만.
 */
.ovr-body { padding: 16px; background: var(--ord-surface-2); display: flex; flex-direction: column; gap: 14px; }
.ovr-desc { margin: 0; font-size: 12px; color: var(--ord-text-3); line-height: 1.7; }
.ovr-desc b { color: var(--ord-text-2); }
.ovr-tag { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 20px; background: var(--ord-band); color: var(--ord-text-3); font-size: 10.5px; font-weight: 600; vertical-align: 1px; white-space: nowrap; }
.ovr-tag.is-custom { background: var(--ord-head-bg); color: var(--ord-on-solid); }

/* 상단: 뷰 세그먼트 + 힌트 */
.ovr-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ovr-top-hint { margin-left: auto; font-size: 11px; color: var(--ord-text-4); }
.ovr-pane[hidden] { display: none; }

/* 밴드 카드 */
.ovr-band { background: var(--ord-surface); border: 1px solid var(--ord-line); border-radius: 12px; overflow: hidden; }
.ovr-band + .ovr-band { margin-top: 14px; }
.ovr-band-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 14px; background: var(--ord-band); border-bottom: 1px solid var(--ord-line); font-size: 12px; font-weight: 700; color: var(--ord-accent); }
.ovr-band-sub { font-size: 11px; font-weight: 600; color: var(--ord-text-4); }
.ovr-band-right { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.ovr-band-body { padding: 12px 14px; }
.ovr-label { display: block; margin-bottom: 5px; font-size: 11px; font-weight: 700; color: var(--ord-text-2); }
.ovr-help { margin: 5px 0 0; font-size: 11px; color: var(--ord-text-4); line-height: 1.6; }
.ovr-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.ovr-fields.is-1 { grid-template-columns: minmax(0, 320px); }

/* 뷰 1: 기본값 폼 + 영향 패널 */
.ovr-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 14px; align-items: start; }
.ovr-eff { background: var(--ord-surface); border: 1px solid var(--ord-line); border-radius: 12px; overflow: hidden; }
.ovr-eff-h { padding: 8px 14px; background: var(--ord-band); border-bottom: 1px solid var(--ord-line); font-size: 12px; font-weight: 700; color: var(--ord-accent); }
.ovr-eff-b { padding: 8px 14px 12px; font-size: 12px; color: var(--ord-text-2); }
.ovr-kv { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--ord-line-soft); }
.ovr-kv:last-of-type { border-bottom: none; }
.ovr-kv b { color: var(--ord-accent); font-weight: 800; white-space: nowrap; }
.ovr-kv b small { font-size: 10.5px; font-weight: 600; color: var(--ord-text-4); margin-left: 2px; }
.ovr-warn { margin-top: 10px; padding: 9px 12px; border-radius: 10px; background: var(--ord-tint-amber-bg); border: 1px solid var(--ord-tint-amber-fg); color: var(--ord-tint-amber-fg); font-size: 11.5px; line-height: 1.6; }
.ovr-warn.is-ok { background: var(--ord-tint-green-bg); border-color: var(--ord-tint-green-line); color: var(--ord-tint-green-fg); }
.ovr-warn[hidden] { display: none; }
.ovr-warn b { font-weight: 800; }

/* 버튼 */
.ovr-btn { padding: 6px 14px; border: 1px solid var(--ord-line-2); border-radius: 20px; background: var(--ord-surface); color: var(--ord-accent); font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; font-family: inherit; }
.ovr-btn:hover { background: var(--ord-band); }
.ovr-btn-primary { background: var(--ord-head-bg); border-color: var(--ord-accent); color: var(--ord-on-solid); box-shadow: 0 2px 6px rgba(62,97,135,.25); }
.ovr-btn-primary:hover { background: color-mix(in srgb, var(--ord-head-bg) 85%, black); }
.ovr-btn-xs { padding: 3px 10px; font-size: 11px; }
.ovr-btn-ghost { border-color: transparent; background: transparent; }
.ovr-btn-ghost:hover { background: var(--ord-accent-soft); }
.ovr-btn-danger { color: var(--ord-tint-red-fg); border-color: var(--ord-tint-red-line); }
.ovr-btn-danger:hover { background: var(--ord-tint-red-bg); }
.ovr-btn[disabled] { opacity: .5; cursor: not-allowed; }

/* 입력 (배경·글자색 쌍으로 — 규칙 10) */
.ovr-search input,
.ovr-select,
.ovr-num input {
  width: 100%; box-sizing: border-box; padding: 8px 10px;
  border: 1.5px solid var(--ord-line-2); border-radius: 10px; background: var(--ord-band); color: var(--ord-text); font-size: 13px; font-family: inherit;
}
.ovr-search input:focus, .ovr-select:focus, .ovr-num input:focus { outline: none; border-color: var(--ord-accent); box-shadow: 0 0 0 3px var(--ord-focus-ring); background: var(--ord-surface); }
.ovr-select:disabled, .ovr-num input:disabled { background: var(--ord-band); color: var(--ord-text-4); border-color: var(--ord-line); cursor: not-allowed; }
.ovr-num { display: flex; align-items: center; gap: 4px; }
.ovr-num input { text-align: right; }
.ovr-num span { flex-shrink: 0; font-size: 11px; color: var(--ord-text-4); }
.ovr-search { position: relative; }
.ovr-search input { padding-left: 30px; }
.ovr-search::before { content: "⌕"; position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font-size: 14px; color: var(--ord-text-4); pointer-events: none; }

/* 뷰 2: 필터 + 효력표 */
.ovr-filter { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.ovr-filter .ovr-search { width: 260px; max-width: 100%; margin-left: auto; }
.ovr-filter .ovr-search input { padding-top: 6px; padding-bottom: 6px; font-size: 12px; }
.ovr-tb-wrap { overflow-x: auto; }
.ovr-tb { width: 100%; border-collapse: collapse; font-size: 12px; }
.ovr-tb th { padding: 8px 10px; text-align: left; font-size: 11px; font-weight: 700; color: var(--ord-text-4); background: var(--ord-tint-blue-bg); border-bottom: 1px solid var(--ord-line-soft); white-space: nowrap; }
.ovr-tb td { padding: 8px 10px; color: var(--ord-text-2); border-bottom: 1px solid var(--ord-line-soft); vertical-align: middle; }
.ovr-tb tr:last-child td { border-bottom: none; }
.ovr-tb tbody tr:hover td { background: var(--ord-surface-2); }
.ovr-tb tr[hidden] { display: none; }
.ovr-tb tr.is-default td { color: var(--ord-text-4); }
.ovr-tb .ovr-chk { width: 28px; text-align: center; }
.ovr-tb .ovr-chk input { margin: 0; accent-color: var(--ord-accent); }
.ovr-tb td.ovr-co { font-weight: 700; color: var(--ord-text); white-space: nowrap; }
.ovr-tb tr.is-default td.ovr-co { color: var(--ord-text-3); }
.ovr-tb td.is-fol { color: var(--ord-text-4); }
.ovr-tb td.is-ov { color: var(--ord-accent); font-weight: 800; }
.ovr-tb td.is-ov::before { content: "●"; font-size: 7px; margin-right: 5px; vertical-align: 2px; }
.ovr-tb td.ovr-meta { font-size: 11px; color: var(--ord-text-4); white-space: nowrap; }
.ovr-tb td.ovr-act { text-align: right; white-space: nowrap; }
.ovr-tb td.ovr-act .ovr-btn + .ovr-btn { margin-left: 4px; }
.ovr-tb .num { text-align: right; white-space: nowrap; }
.ovr-usage { display: flex; align-items: center; gap: 8px; min-width: 160px; }
.ovr-usage-bar { flex: 1; height: 6px; background: var(--ord-band); border-radius: 3px; overflow: hidden; }
.ovr-usage-bar i { display: block; height: 100%; background: var(--ord-head-bg); }
.ovr-usage-bar.is-warn i { background: var(--ord-solid-amber); }
.ovr-usage-bar.is-over i { background: var(--ord-solid-red); }
.ovr-usage small { font-size: 11px; color: var(--ord-text-4); white-space: nowrap; }
.ovr-chips { display: flex; gap: 4px; flex-wrap: wrap; }
.ovr-empty { padding: 26px 16px; text-align: center; font-size: 12.5px; color: var(--ord-text-4); background: var(--ord-surface-2); border: 1px dashed var(--ord-line-2); border-radius: 10px; margin: 10px; }
.ovr-empty[hidden] { display: none; }
.ovr-bulk { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--ord-accent-soft); border-radius: 10px; margin-top: 10px; font-size: 12px; color: var(--ord-accent); font-weight: 700; }
.ovr-bulk[hidden] { display: none; }
.ovr-bulk .ovr-sp { flex: 1; }
.ovr-legend { margin: 8px 0 0; font-size: 11px; color: var(--ord-text-4); }
.ovr-legend b { color: var(--ord-accent); font-weight: 800; }

/* 시스템 기본값 표(파일 업로드) */
.ovr-table-wrap { overflow-x: auto; padding: 0; }
.ovr-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.ovr-table th { padding: 8px 12px; text-align: left; font-size: 11px; font-weight: 700; color: var(--ord-text-3); background: var(--ord-surface-2); border-bottom: 1px solid var(--ord-line-soft); white-space: nowrap; }
.ovr-table td { padding: 8px 12px; color: var(--ord-text-2); border-bottom: 1px solid var(--ord-line-soft); }
.ovr-table tr:last-child td { border-bottom: 0; }
.ovr-table .num { text-align: right; white-space: nowrap; }
.ovr-table .muted { color: var(--ord-text-4); }

/* 손자 모달 — 항목 스위치 행 */
.ovr-item { display: grid; grid-template-columns: minmax(0, 1.2fr) 150px minmax(0, 1fr); gap: 12px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--ord-line-soft); }
.ovr-item:last-child { border-bottom: none; }
.ovr-item-t { font-size: 12.5px; font-weight: 700; color: var(--ord-text); }
.ovr-item-d { font-size: 11px; color: var(--ord-text-4); margin-top: 2px; line-height: 1.5; }
.ovr-item-d b { color: var(--ord-accent); }
.ovr-mode { display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; color: var(--ord-text-3); cursor: pointer; user-select: none; margin: 0; }
.ovr-mode.is-on { color: var(--ord-accent); }
.ovr-mode .ord-switch { margin: 0; }
.ovr-mode input:checked + .ord-switch-slider { background-color: var(--ord-head-bg); }
.ovr-item-ctl { min-width: 0; }
.ovr-item-ctl .ovr-help { margin-top: 4px; }
/* 블록 단위 스위치(파일 업로드 — 기능별 블록 헤더) */
.ovr-block-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.ovr-block.is-off .ovr-block-body { opacity: .55; pointer-events: none; }

/* 편집 폼(파일 업로드 행렬) */
.ovr-grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.ovr-targets { padding: 0 14px; }
.ovr-block { padding: 12px 0; border-top: 1px solid var(--ord-line-soft); }
.ovr-block:first-child { border-top: 0; }
.ovr-block-title { font-size: 12.5px; font-weight: 700; color: var(--ord-text); }
.ovr-row { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 12px; align-items: flex-start; }
.ovr-chips-form { display: flex; flex-wrap: wrap; gap: 6px; }
.ovr-chip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; cursor: pointer; border: 1px solid var(--ord-line-2); border-radius: 20px; background: var(--ord-surface); color: var(--ord-text-2); font-size: 12px; }
.ovr-chip input { margin: 0; accent-color: var(--ord-accent); }
.ovr-chip.is-on { background: var(--ord-head-bg); border-color: var(--ord-accent); color: var(--ord-on-solid); }
.ovr-override { margin-top: 10px; padding: 10px 12px; background: var(--ord-surface-2); border: 1px dashed var(--ord-line-2); border-radius: 10px; }
.ovr-override-title { margin-bottom: 6px; font-size: 11px; color: var(--ord-text-2); }
.ovr-override-title span { color: var(--ord-text-4); }

@media (max-width: 900px) {
  .ovr-grid { grid-template-columns: minmax(0, 1fr); }
  .ovr-fields { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 768px) {
  .ovr-grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ovr-row { grid-template-columns: minmax(0, 1fr); }
  .ovr-item { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .ovr-filter .ovr-search { width: 100%; margin-left: 0; }
  .ovr-top-hint { margin-left: 0; width: 100%; }
}