/* 시스템설정 › 버전관리 (2026-09-27, 컨셉 D «압축 표 + 서랍») — A-4 액센트형(차콜 accent).
   뷰 = system_settings/versions/_index · 동작 = sys_versions_controller.js
   폼 컨트롤은 배경·글자색을 함께 지정한다(개발 규칙 10). */
.svr { padding: 16px; background: var(--ord-surface-2); color: var(--ord-text); font-size: 13px; }
.svr *, .svr *::before, .svr *::after { box-sizing: border-box; }

.svr-band { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 12px;
  padding: 12px 16px; border: 1px solid var(--ord-line); border-radius: 12px; background: linear-gradient(180deg, var(--ord-band), var(--ord-surface)); }
.svr-band-ttl { flex: 1; min-width: 240px; }
.svr-band-ttl h3 { margin: 0; font-size: 16px; padding-left: 10px; border-left: 4px solid var(--ord-accent); }
.svr-band-ttl p { margin: 4px 0 0; color: var(--ord-text-3); font-size: 12px; }
.svr-stats { display: flex; gap: 18px; }
.svr-stat { display: flex; flex-direction: column; align-items: flex-end; }
.svr-stat .n { font-size: 16px; font-weight: 800; line-height: 1.2; color: var(--ord-text); }
.svr-stat .l { font-size: 11px; color: var(--ord-text-3); }
.svr-stat.is-amber .n { color: var(--ord-tint-amber-fg); }

.svr-body { position: relative; display: grid; grid-template-columns: 1fr; gap: 12px; }
.svr-body.has-drawer { grid-template-columns: minmax(0, 1fr) 340px; }

.svr-card { background: var(--ord-surface); border: 1px solid var(--ord-line); border-radius: 12px; overflow: hidden; min-width: 0; align-self: start; }
.svr-tools { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 10px 14px; border-bottom: 1px solid var(--ord-line-soft); }
.svr-search { width: 240px; max-width: 100%; border: 1px solid var(--ord-line-2); border-radius: 8px; padding: 7px 10px;
  font: inherit; background: var(--ord-surface); color: var(--ord-text); }
.svr-search:focus, .svr-input:focus { outline: none; border-color: var(--ord-accent); box-shadow: 0 0 0 3px var(--ord-focus-ring); }
.svr-empty { padding: 36px 16px; text-align: center; color: var(--ord-text-4); }

.svr-table-wrap { overflow-x: auto; }
.svr-table { width: 100%; border-collapse: collapse; }
.svr-table th { background: var(--ord-band); color: var(--ord-accent); font-size: 11.5px; font-weight: 700; text-align: left;
  padding: 8px 10px; border-bottom: 1px solid var(--ord-line); white-space: nowrap; }
.svr-table td { padding: 7px 10px; border-bottom: 1px solid var(--ord-line-soft); vertical-align: middle; }
.svr-table tbody tr { cursor: pointer; }
.svr-table tbody tr:hover td { background: var(--ord-tint-blue-bg); }
.svr-table tbody tr.is-on td { background: var(--ord-accent-soft); }
.svr-table tbody tr:focus-visible { outline: 2px solid var(--ord-accent); outline-offset: -2px; }
.svr-table .num { text-align: right; color: var(--ord-text-2); white-space: nowrap; }
.svr-table td.ver { font-weight: 800; white-space: nowrap; }
.svr-table td.dt { color: var(--ord-text-3); white-space: nowrap; }
.svr-table td.ttl { max-width: 320px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ord-text-2); }
.svr-table td.ttl.is-empty { color: var(--ord-text-5); }
.svr-table td.bell { white-space: nowrap; cursor: default; }
.svr-table td.bell .ord-switch { vertical-align: middle; }
/* 알림 스위치는 앰버(헤더 「신규버전출시」 색) */
.svr .ord-switch input:checked + .ord-switch-slider { background-color: var(--ord-solid-amber); }

.svr-chip { display: inline-block; font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 999px; white-space: nowrap; vertical-align: middle; }
.svr-chip.is-blue { background: var(--ord-tint-blue-bg); color: var(--ord-tint-blue-fg); }
.svr-chip.is-amber { background: var(--ord-tint-amber-bg); color: var(--ord-tint-amber-fg); }
.svr-kind { display: inline-block; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 6px; white-space: nowrap; }
.svr-kind.is-feature { background: var(--ord-tint-blue-bg); color: var(--ord-accent-strong); }
.svr-kind.is-improve { background: var(--ord-tint-green-bg); color: var(--ord-tint-green-fg); }
.svr-kind.is-fix { background: var(--ord-tint-red-bg); color: var(--ord-tint-red-fg); }
.svr-kind.is-infra { background: var(--ord-band); color: var(--ord-text-2); }

/* 서랍이 열리면 표를 압축 — 배포 일시·구분 열 숨김(서랍에 있음) */
.svr-body.has-drawer .svr-table .col-dt, .svr-body.has-drawer .svr-table .col-kind { display: none; }

/* 서랍 */
.svr-drawer { background: var(--ord-surface); border: 1px solid var(--ord-line); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column;
  align-self: start; position: sticky; top: 0; }
.svr-drawer-hd { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--ord-line);
  background: linear-gradient(180deg, var(--ord-band), var(--ord-surface)); }
.svr-drawer-hd b { font-size: 15px; }
.svr-x { margin-left: auto; border: 0; background: transparent; color: var(--ord-text-3); font-size: 16px; cursor: pointer; padding: 2px 6px; border-radius: 6px; }
.svr-x:hover { background: var(--ord-band); color: var(--ord-text); }
.svr-drawer-bd { padding: 14px 16px; display: flex; flex-direction: column; }
.svr-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 8px; }
.svr-meta div { background: var(--ord-surface-2); border: 1px solid var(--ord-line); border-radius: 8px; padding: 6px 8px; font-size: 12px; color: var(--ord-text-2); }
.svr-meta small { display: block; color: var(--ord-text-4); font-size: 10.5px; }
.svr-hint { font-size: 11px; color: var(--ord-text-4); margin-bottom: 4px; }
.svr-lbl { display: block; font-size: 12px; font-weight: 600; color: var(--ord-text-2); margin: 10px 0 5px; }
.svr-lbl-sub { font-weight: 400; color: var(--ord-text-4); }
.svr-kinds { display: flex; gap: 6px; flex-wrap: wrap; }
.svr-kind-pick { cursor: pointer; }
.svr-kind-pick input { position: absolute; opacity: 0; width: 0; height: 0; }
.svr-kind-pick span { display: inline-block; border: 1px solid var(--ord-line-2); background: var(--ord-surface); color: var(--ord-text-2); border-radius: 999px; padding: 3px 11px; font-size: 12px; }
.svr-kind-pick input:checked + span { border-color: var(--ord-accent); background: var(--ord-accent-soft); color: var(--ord-accent); font-weight: 700; }
.svr-kind-pick input:focus-visible + span { outline: 2px solid var(--ord-accent); outline-offset: 1px; }
.svr-input { width: 100%; border: 1px solid var(--ord-line-2); border-radius: 8px; padding: 8px 10px; font: inherit; background: var(--ord-surface); color: var(--ord-text); }
.svr-notes { min-height: 130px; resize: vertical; line-height: 1.6; }

.svr-notify { margin-top: 12px; padding: 10px 12px; border: 1px solid var(--ord-tint-amber-fg); border-radius: 10px; background: var(--ord-tint-amber-bg); color: var(--ord-tint-amber-fg); font-size: 12px; line-height: 1.6; }
.svr-dist { margin-top: 8px; display: flex; flex-direction: column; gap: 3px; }
.svr-dist-row { display: grid; grid-template-columns: 70px 1fr 38px; gap: 6px; align-items: center; font-size: 11px; color: var(--ord-text-2); }
.svr-dist-row.is-hit { color: var(--ord-tint-amber-fg); font-weight: 700; }
.svr-bar { height: 7px; border-radius: 4px; background: var(--ord-surface); border: 1px solid var(--ord-tint-amber-line); overflow: hidden; }
.svr-bar i { display: block; height: 100%; background: var(--ord-accent-soft); }
.svr-dist-row.is-hit .svr-bar i { background: var(--ord-solid-amber); }

.svr-drawer-ft { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.svr-btn { border-radius: 999px; padding: 7px 18px; font-weight: 700; font-size: 13px; cursor: pointer; border: 1px solid transparent; }
.svr-btn.is-pri { background: var(--ord-head-bg); border-color: var(--ord-accent); color: var(--ord-on-solid); }
.svr-btn.is-pri:hover { background: color-mix(in srgb, var(--ord-head-bg) 85%, black); }
.svr-btn.is-sec { background: var(--ord-surface); border-color: var(--ord-line-2); color: var(--ord-text-2); }
.svr-btn[disabled] { opacity: .5; cursor: not-allowed; }

@media (max-width: 820px) {
  .svr-body.has-drawer { grid-template-columns: 1fr; }
  .svr-drawer { position: static; }
  .svr-stats { width: 100%; justify-content: flex-start; }
  .svr-stat { align-items: flex-start; }
}