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

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

/* ── 상단: 상태 필 + 검색·필터·정렬 ─────────────────────────────────────── */
html[data-ui="v2"] #view-changeRequests .contract-status-counts { gap: 8px; }
html[data-ui="v2"] #view-changeRequests .contract-sc {
  min-height: 32px;
  border-radius: var(--ds-radius-xl);
  font-size: 13px;
  font-weight: 600;
}
/* 고른 필: 로즈 링(안쪽 상태 색은 그대로) */
html[data-ui="v2"] #view-changeRequests .contract-sc--active {
  box-shadow: 0 0 0 2px var(--ds-primary);
}
/* "전체" 필은 JS가 인디고 색을 인라인으로 지정한다 — 인라인을 이기려면 !important가 필요하다.
   (v2 한정, 이 한 곳만) */
html[data-ui="v2"] #view-changeRequests #change-requests-status-counts button[data-cr-status=""].contract-sc--active {
  border-color: var(--ds-primary) !important;
  background: var(--ds-primary) !important;
  color: var(--ds-primary-foreground) !important;
  box-shadow: none;
}
html[data-ui="v2"] #view-changeRequests #change-requests-status-counts button[data-cr-status=""]:not(.contract-sc--active) {
  background: var(--ds-card);
  color: var(--ds-card-foreground);
  border-color: var(--ds-border);
}

html[data-ui="v2"] #view-changeRequests .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-changeRequests .contract-sort-select {
  height: 36px;
  border-radius: var(--ds-radius-lg);
}
html[data-ui="v2"] #view-changeRequests .cr-ended-toggle {
  color: var(--ds-muted-foreground);
  font-size: 13px;
}
html[data-ui="v2"] #view-changeRequests :is(.contract-error-msg, .contract-loading-msg) {
  border-radius: var(--ds-radius-xl);
}

/* ── 목록 + 상세 분할 화면 ─────────────────────────────────────────────── */
html[data-ui="v2"] #view-changeRequests .crsv-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-changeRequests .crsv-resizer { background: var(--ds-border); }
html[data-ui="v2"] #view-changeRequests .crsv-resizer:hover,
html[data-ui="v2"] #view-changeRequests .crsv-resizer:focus-visible { background: var(--ds-primary); }
html[data-ui="v2"] #view-changeRequests :is(.crsv-list-scroll, .crsv-detail-scroll) { padding: 12px; }

html[data-ui="v2"] #view-changeRequests .crsv-accordion {
  border-color: var(--ds-border);
  border-radius: var(--ds-radius-xl);
  background: var(--ds-card);
  box-shadow: none;
}
html[data-ui="v2"] #view-changeRequests .crsv-acc-item { border-bottom-color: var(--ds-border); }
html[data-ui="v2"] #view-changeRequests .crsv-acc-trigger { padding: 9px 14px; font-size: 13px; }
html[data-ui="v2"] #view-changeRequests .crsv-acc-count {
  border-radius: 999px;
  background: var(--ds-muted);
  color: var(--ds-muted-foreground);
  font-weight: 600;
}
html[data-ui="v2"] #view-changeRequests .crsv-item {
  padding: 12px 16px;
  border-bottom-color: var(--ds-border);
  background: var(--ds-card);
}
html[data-ui="v2"] #view-changeRequests .crsv-item:hover { background: var(--ds-muted); }
/* 고른 행: 로즈 바탕만(왼쪽 상태 색 막대는 유지). 안쪽 링은 쓰지 않는다 —
   과정 묶음의 둥근 모서리(crsv-accordion overflow:hidden)에 마지막 행의 링이 잘려 보였다. */
html[data-ui="v2"] #view-changeRequests .crsv-item--selected {
  background: color-mix(in srgb, var(--ds-primary) 14%, var(--ds-card));
}
html[data-ui="v2"] #view-changeRequests .crsv-detail-title { font-size: 16px; font-weight: 700; color: var(--ds-foreground); }
html[data-ui="v2"] #view-changeRequests .crsv-card {
  border-color: var(--ds-border);
  border-radius: var(--ds-radius-xl);
  background: var(--ds-card);
  box-shadow: none;
}
html[data-ui="v2"] #view-changeRequests :is(.crsv-card > .crsv-detail-header, .crsv-card-section) { border-bottom-color: var(--ds-border); }
html[data-ui="v2"] #view-changeRequests .crsv-note-text {
  border-radius: var(--ds-radius-lg);
  background: var(--ds-muted);
}
html[data-ui="v2"] #view-changeRequests .crsv-admin-select {
  border-color: var(--ds-input);
  border-radius: var(--ds-radius-lg);
  background-color: var(--ds-card);
  color: var(--ds-foreground);
}

/* 변경 항목 칩 — 누르면 증빙 가이드가 펼쳐진다(로즈 = 눌러볼 수 있는 칩) */
html[data-ui="v2"] #view-changeRequests .crsv-chip { border-radius: var(--ds-radius-md); }
html[data-ui="v2"] #view-changeRequests .crsv-chip--clickable {
  border-color: var(--ds-primary);
  background: var(--ds-primary-soft);
  color: var(--ds-primary-active);
}
html[data-ui="v2"] #view-changeRequests .crsv-chip--clickable:hover { background: var(--ds-primary-soft); box-shadow: 0 0 0 2px var(--ds-primary-soft); }
html[data-ui="v2"] #view-changeRequests .crsv-chip--expanded,
html[data-ui="v2"] #view-changeRequests .crsv-chip--expanded:hover {
  border-color: var(--ds-primary);
  background: var(--ds-primary);
  color: var(--ds-primary-foreground);
  box-shadow: none;
}
html[data-ui="v2"] #view-changeRequests .crsv-chip-guide {
  border-color: var(--ds-border);
  border-radius: var(--ds-radius-lg);
  background: var(--ds-muted);
}

/* 처리 버튼: 의미 색(--crsv-action-color)은 그대로, 모양만 공용으로 */
html[data-ui="v2"] #view-changeRequests .crsv-action-btn {
  border-width: 1px;
  border-radius: var(--ds-radius-lg);
  font-weight: 600;
  box-shadow: none;
}
html[data-ui="v2"] #view-changeRequests .crsv-detail-link,
html[data-ui="v2"] #view-changeRequests .crsv-row-link { color: var(--ds-info-fg); }

/* ── 다크: 라이트 색이 남던 칩·배지 ──────────────────────────────────────── */
:root[data-ui="v2"][data-theme="dark"] body #view-changeRequests .crsv-type-badge--recognition,
:root[data-ui="v2"][data-theme="dark"] body #view-changeRequests .crsv-chip-guide-doc-group-label--pm {
  background: rgba(129, 140, 248, 0.18);
  color: #c7d2fe;
}
:root[data-ui="v2"][data-theme="dark"] body #view-changeRequests .crsv-type-badge--report,
:root[data-ui="v2"][data-theme="dark"] body #view-changeRequests .crsv-chip-guide-doc-group-label--op {
  background: rgba(34, 211, 238, 0.16);
  color: #a5f3fc;
}
:root[data-ui="v2"][data-theme="dark"] body #view-changeRequests .crsv-chip-guide-warnings { color: var(--ds-warning); }
:root[data-ui="v2"][data-theme="dark"] body #view-changeRequests :is(.crsv-row-badge) {
  border-color: var(--ds-border);
  background: var(--ds-muted);
  color: var(--ds-muted-foreground);
}