/* 버전 2 — 4a단계: 입과 관리 화면(#view-opRequests) 신규 LMS 모양.
   /v2/ 에서만 불러온다(functions/v2/[[path]].js). 운영 style.css·React 번들은 건드리지 않는다.
   모든 규칙은 html[data-ui="v2"] #view-opRequests 아래 — 계약관리·변경인정 등 같은 .contract-* 클래스를
   쓰는 다른 화면에는 영향 없다.
   상태 색 규칙(상태 필 색, 카드 왼쪽 상태 막대, 상태 배지, 처리 버튼 의미 색)은 그대로 두고 모양만 바꾼다.
   출결/휴가·서류 발급과 같은 방식.
   설계: docs/superpowers/specs/2026-10-13-lms-ux-reskin-design.md */

/* React 분할 화면이 쓰는 파랑 계열 토큰을 이 화면 안에서만 LMS 로즈로 */
html[data-ui="v2"] #view-opRequests {
  --sv-brand: var(--ds-primary);
  --sv-selected-bg: var(--ds-primary-soft);
  --sv-hover: var(--ds-muted);
}

/* ── 상단: 상태 필 + 검색·정렬 ─────────────────────────────────────────── */
html[data-ui="v2"] #view-opRequests .contract-status-counts { gap: 8px; }
html[data-ui="v2"] #view-opRequests .op-req-count-pill {
  min-height: 32px;
  padding: 0 14px;
  border-radius: var(--ds-radius-xl);
  font-size: 13px;
  font-weight: 600;
}
html[data-ui="v2"] #view-opRequests .op-req-count-pill[data-op-req-status="all"] {
  background: var(--ds-card);
  color: var(--ds-card-foreground);
  border-color: var(--ds-border);
}
/* 고른 필: 로즈 링(안쪽 색은 상태 색 그대로) */
html[data-ui="v2"] #view-opRequests .op-req-count-pill--active {
  filter: none;
  font-weight: 700;
  box-shadow: 0 0 0 2px var(--ds-primary);
}
html[data-ui="v2"] #view-opRequests .op-req-count-pill[data-op-req-status="all"].op-req-count-pill--active {
  background: var(--ds-primary);
  color: var(--ds-primary-foreground);
  border-color: var(--ds-primary);
}

html[data-ui="v2"] #view-opRequests .contract-search-input {
  height: 36px;
  padding-left: 36px;
  border-radius: var(--ds-radius-lg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 12px center;
}
html[data-ui="v2"] #view-opRequests .contract-sort-select {
  height: 36px;
  border-radius: var(--ds-radius-lg);
}
html[data-ui="v2"] #view-opRequests .cr-ended-toggle {
  color: var(--ds-muted-foreground);
  font-size: 13px;
}
html[data-ui="v2"] #view-opRequests :is(.contract-error-msg, .contract-loading-msg) {
  border-radius: var(--ds-radius-xl);
}

/* ── 목록 + 상세 분할 화면 ─────────────────────────────────────────────── */
html[data-ui="v2"] #view-opRequests .orsv-split {
  border-color: var(--ds-border);
  border-radius: var(--ds-radius-2xl);
  background: var(--ds-card);
  box-shadow: var(--ds-shadow-card);
}
html[data-ui="v2"] #view-opRequests .orsv-resizer { background: var(--ds-border); }
html[data-ui="v2"] #view-opRequests .orsv-resizer:hover,
html[data-ui="v2"] #view-opRequests .orsv-resizer:focus-visible { background: var(--ds-primary); }
html[data-ui="v2"] #view-opRequests :is(.orsv-list-scroll, .orsv-detail-scroll) { padding: 12px; }

/* 과정별 묶음 = 작은 목록 상자 */
html[data-ui="v2"] #view-opRequests .orsv-accordion {
  border-color: var(--ds-border);
  border-radius: var(--ds-radius-xl);
  background: var(--ds-card);
  box-shadow: none;
}
html[data-ui="v2"] #view-opRequests .orsv-acc-item { border-bottom-color: var(--ds-border); }
html[data-ui="v2"] #view-opRequests .orsv-acc-trigger { padding: 9px 14px; font-size: 13px; }
html[data-ui="v2"] #view-opRequests .orsv-acc-count {
  border-radius: 999px;
  background: var(--ds-muted);
  color: var(--ds-muted-foreground);
  font-weight: 600;
}
html[data-ui="v2"] #view-opRequests .orsv-item {
  padding: 12px 16px;
  border-bottom-color: var(--ds-border);
  background: var(--ds-card);
}
html[data-ui="v2"] #view-opRequests .orsv-item:hover { background: var(--ds-muted); }
/* 고른 행: 로즈 바탕만(왼쪽 상태 색 막대는 유지). 안쪽 링은 쓰지 않는다 —
   과정 묶음의 둥근 모서리(orsv-accordion overflow:hidden)에 마지막 행의 링이 잘려 보였다. */
html[data-ui="v2"] #view-opRequests .orsv-item--selected {
  background: color-mix(in srgb, var(--ds-primary) 14%, var(--ds-card));
}
html[data-ui="v2"] #view-opRequests .orsv-detail-title { font-size: 16px; font-weight: 700; color: var(--ds-foreground); }
html[data-ui="v2"] #view-opRequests .orsv-card {
  border-color: var(--ds-border);
  border-radius: var(--ds-radius-xl);
  background: var(--ds-card);
  box-shadow: none;
}
html[data-ui="v2"] #view-opRequests .orsv-note-text {
  border-radius: var(--ds-radius-lg);
  background: var(--ds-muted);
}
html[data-ui="v2"] #view-opRequests .orsv-admin-select {
  border-color: var(--ds-input);
  border-radius: var(--ds-radius-lg);
  background-color: var(--ds-card);
  color: var(--ds-foreground);
}
/* 처리 버튼 5종: 의미 색(--orsv-action-color)은 그대로, 모양만 공용으로 */
html[data-ui="v2"] #view-opRequests .orsv-action-btn {
  border-width: 1px;
  border-radius: var(--ds-radius-lg);
  font-weight: 600;
  box-shadow: none;
}
html[data-ui="v2"] #view-opRequests .orsv-action-btn:not(:disabled):hover,
html[data-ui="v2"] #view-opRequests .orsv-action-btn--active { box-shadow: none; }
html[data-ui="v2"] #view-opRequests .orsv-detail-link,
html[data-ui="v2"] #view-opRequests .orsv-row-link { color: var(--ds-info-fg); }

/* ── 다크: 라이트 색이 남던 칩·배지 ──────────────────────────────────────── */
:root[data-ui="v2"][data-theme="dark"] body #view-opRequests .orsv-chip {
  border-color: rgba(96, 165, 250, 0.3);
  background: rgba(96, 165, 250, 0.16);
  color: #93c5fd;
}
:root[data-ui="v2"][data-theme="dark"] body #view-opRequests :is(.orsv-chip--muted, .orsv-row-badge) {
  border-color: var(--ds-border);
  background: var(--ds-muted);
  color: var(--ds-muted-foreground);
}