/* 관리 화면 기초(운영자·집행부, PC 1280px). base.css 다음에 읽고, <body class="ops">에만 걸린다.
   조합원 화면의 큰 글자 단계를 PC 밀도로 되돌리고, 위 막대·세 칸 검수 틀·표·상태 칩을 둔다.
   상태는 색 + 글자 + 아이콘 셋이 함께 간다(색만으로 구분하지 않는다). 색은 --lm- 변수만 쓴다. */

body.ops {
  --rd-fs-body: 15px;
  --rd-fs-h1: 22px;
  --rd-fs-h2: 17px;
  --rd-fs-small: 13px;
  --rd-fs-control: 15px;
  --rd-lh-body: 1.6;
  --rd-tap: 40px;
  --rd-tap-primary: 40px;
  --rd-topbar: 56px;
  --rd-ops-max: 1200px;
}

/* 글자 크기 단계는 조합원 화면만 쓴다. 관리 화면은 PC 밀도를 그대로 둔다 */
html.fs-l body.ops,
html.fs-xl body.ops {
  --rd-fs-body: 15px;
  --rd-fs-h1: 22px;
  --rd-fs-h2: 17px;
  --rd-fs-small: 13px;
  --rd-fs-control: 15px;
}

.ops .btn {
  padding: 0 var(--lm-space-16);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}

.ops .btn.quiet {
  text-decoration: none;
}

.ops .icon {
  width: 18px;
  height: 18px;
}

/* ── 위 막대 56px: 로고 + 화면 이름 + 계정. 네이비 면이라 흰 로고, 금색은 이 면에서만 ── */

.topbar {
  position: sticky;
  top: 0;
  z-index: var(--lm-z-bar);
  display: flex;
  align-items: center;
  gap: var(--lm-space-16);
  height: var(--rd-topbar);
  padding: 0 var(--lm-space-24);
  background: var(--lm-rail-bg);
  color: var(--lm-rail-ink);
}

.topbar .brand-logo {
  height: 16px;
}

.topbar-title {
  padding-left: var(--lm-space-16);
  border-left: 1px solid var(--lm-rail-line);
  color: var(--lm-rail-ink-strong);
  font-size: 15px;
  font-weight: 600;
}

.topbar-account {
  display: flex;
  align-items: center;
  gap: var(--lm-space-12);
  margin-left: auto;
  color: var(--lm-rail-muted);
  font-size: 14px;
}

.topbar :where(a, button):focus-visible {
  outline: var(--lm-focus-ring-dark);
}

.topbar .btn {
  min-height: 32px;
  border-color: var(--lm-rail-line);
  background: transparent;
  color: var(--lm-rail-ink-strong);
}

@media (hover: hover) {
  .topbar .btn:hover {
    border-color: var(--lm-rail-muted);
    background: var(--lm-rail-hover);
  }
}

.ops-main {
  width: 100%;
  max-width: var(--rd-ops-max);
  margin: 0 auto;
  padding: var(--lm-space-24) var(--lm-space-32) var(--lm-space-48);
}

.ops-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--lm-space-16);
  margin-bottom: var(--lm-space-24);
}

.panel {
  border: 1px solid var(--lm-border);
  border-radius: var(--lm-radius);
  background: var(--lm-bg-surface);
}

/* ── 검수 세 칸: 안건 목록 260px | 다섯 칸 문장 | 원문 쪽 420px. 칸마다 따로 스크롤한다 ── */

.review {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr) 420px;
  height: calc(100dvh - var(--rd-topbar));
  background: var(--lm-bg-surface);
}

.review > * {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.review-list {
  padding: var(--lm-space-16) 0;
  border-right: 1px solid var(--lm-border);
  background: var(--lm-bg-page);
}

.review-center {
  padding: var(--lm-space-24) var(--lm-space-32);
}

.review-source {
  border-left: 1px solid var(--lm-border);
  padding: var(--lm-space-20) var(--lm-space-24);
  background: var(--lm-bg-page);
  white-space: pre-wrap;
}

/* 원문 쪽에서 인용 구간. 조합원 원문 창과 같은 표시(trust-soft 바탕 + 아래 2px 코발트 선) */
mark.quote-hit {
  background: var(--lm-trust-soft);
  color: inherit;
  box-shadow: inset 0 -2px 0 var(--lm-primary);
}

/* ── 표. 14px, 숫자는 오른쪽 맞춤 tabular ── */

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 1.5;
}

.table th {
  padding: var(--lm-space-8) var(--lm-space-12);
  border-bottom: 1px solid var(--lm-border);
  color: var(--lm-text-muted);
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
}

.table td {
  padding: var(--lm-space-12);
  border-bottom: 1px solid var(--lm-hairline);
  vertical-align: top;
}

.table :where(th, td).num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.table tbody tr:last-child td {
  border-bottom: 0;
}

@media (hover: hover) {
  .table tbody tr:hover td {
    background: var(--lm-bg-page);
  }
}

/* ── 상태 칩: 인용 통과 / 인용 실패·게시 불가 / 승인 / 뺌 / 대기 ── */

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--lm-space-4);
  padding: 2px var(--lm-space-8);
  border-radius: var(--lm-radius-pill);
  background: var(--lm-bg-subtle);
  color: var(--lm-text);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}

.chip > .icon,
.ops .chip > .icon {
  width: 14px;
  height: 14px;
}

.chip.pass {
  background: var(--lm-success-surface);
  color: var(--lm-success-text);
}

.chip.fail {
  background: var(--lm-danger-surface);
  color: var(--lm-danger);
}

.chip.approved {
  background: var(--lm-trust-soft);
  color: var(--lm-trust);
}

.chip.pending {
  background: var(--lm-warning-surface);
  color: var(--lm-warning-text);
}

.chip.removed {
  background: var(--lm-bg-subtle);
  color: var(--lm-text-muted);
  text-decoration: line-through;
}

/* 뺀 문장 자체도 취소선으로 남긴다(지우지 않고 보인다) */
.is-removed {
  color: var(--lm-text-muted);
  text-decoration: line-through;
}

/* 데모 계정 드롭다운(public/ops/js/demo-logins.js, 데모 모드 동안만) */
#demoLogins select { width: 100%; min-height: 48px; padding: 0 var(--lm-space-12); border: 1px solid var(--lm-border-strong); border-radius: 8px; background: var(--lm-bg-surface); color: var(--lm-text-strong); font: inherit; }
#demoLogins .field-hint { margin: var(--lm-space-8) 0 0; color: var(--lm-text-muted); font-size: 14px; }