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

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

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

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

/* ── 목록 + 상세 분할 화면: 큰 상자(테두리 + 둥글기 24) ───────────────────── */
html[data-ui="v2"] #view-contract #contract-cards .csv-split {
  overflow: hidden;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-2xl);
  background: var(--ds-card);
  box-shadow: var(--ds-shadow-card);
}
html[data-ui="v2"] #view-contract :is(.csv-list, .csv-detail) { padding: 12px; }
html[data-ui="v2"] #view-contract .csv-list { border-right-color: var(--ds-border); }

html[data-ui="v2"] #view-contract .csv-acc-trigger {
  padding: 9px 14px;
  font-size: 13px;
  background: var(--ds-muted);
}
html[data-ui="v2"] #view-contract .csv-acc-count {
  background: var(--ds-card);
  color: var(--ds-muted-foreground);
  font-weight: 600;
}
html[data-ui="v2"] #view-contract .csv-list-item {
  padding: 8px 12px 8px 10px;
  border-bottom-color: var(--ds-border);
  border-right-color: var(--ds-border);
  background: var(--ds-card);
}
html[data-ui="v2"] #view-contract .csv-list-item:hover { background: var(--ds-muted); }
/* 고른 행: 로즈 바탕만(왼쪽 상태 색 막대는 유지). 안쪽 링은 쓰지 않는다 — 둥근 모서리에 잘려 보인다. */
html[data-ui="v2"] #view-contract .csv-list-item--selected {
  background: color-mix(in srgb, var(--ds-primary) 14%, var(--ds-card));
  color: var(--ds-foreground);
}

/* 상세 카드 */
html[data-ui="v2"] #view-contract .csv-detail-inner {
  border-color: var(--ds-border);
  border-radius: var(--ds-radius-xl);
  background: var(--ds-card);
  box-shadow: none;
}
html[data-ui="v2"] #view-contract .csv-detail-title { font-size: 16px; font-weight: 700; color: var(--ds-foreground); }
html[data-ui="v2"] #view-contract .csv-avatar {
  background: var(--ds-primary-soft);
  color: var(--ds-primary-active);
  font-weight: 700;
}
html[data-ui="v2"] #view-contract .csv-note-text { border-radius: var(--ds-radius-lg); background: var(--ds-muted); }
html[data-ui="v2"] #view-contract .csv-detail-link { color: var(--ds-info-fg); }
html[data-ui="v2"] #view-contract .csv-empty-detail { color: var(--ds-muted-foreground); }

/* 버튼: 기본=보조(회색 테두리), primary=로즈, danger=빨강(의미 색 유지) — 모양은 공용 */
html[data-ui="v2"] #view-contract .csv-btn {
  border-width: 1px;
  border-radius: var(--ds-radius-lg);
  font-weight: 600;
}
html[data-ui="v2"] #view-contract .csv-btn--primary {
  border-color: var(--ds-primary);
  color: var(--ds-primary);
}
html[data-ui="v2"] #view-contract .csv-btn--primary:not(:disabled):hover {
  background: var(--ds-primary);
  color: var(--ds-primary-foreground);
  box-shadow: none;
}
html[data-ui="v2"] #view-contract .csv-btn--danger:not(:disabled):hover { box-shadow: none; }
html[data-ui="v2"] #view-contract .csv-btn--link { border-color: transparent; }

/* 입력칸(파랑 틴트 → 공용 입력칸) */
html[data-ui="v2"] #view-contract :is(.csv-edit-input, .csv-edit-select, .csv-detail-memo-ta) {
  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-contract :is(.csv-edit-input, .csv-edit-select, .csv-detail-memo-ta):focus {
  border-color: var(--ds-ring);
  box-shadow: 0 0 0 3px var(--ds-primary-soft);
}
html[data-ui="v2"] #view-contract .csv-cancel-box { border-radius: var(--ds-radius-lg); }
html[data-ui="v2"] #view-contract .csv-status-picker {
  border-color: var(--ds-border);
  border-radius: var(--ds-radius-lg);
  background: var(--ds-card);
  box-shadow: var(--ds-shadow-card-hover);
}
html[data-ui="v2"] #view-contract .csv-status-picker-option { border-radius: var(--ds-radius-md); }

/* ── 다크: 라이트 색이 남던 칩·링크·텍스트 버튼 ──────────────────────────── */
:root[data-ui="v2"][data-theme="dark"] body #view-contract :is(.csv-detail-chip, .csv-detail-link) {
  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-contract .csv-btn--link { color: var(--ds-info-fg); }
:root[data-ui="v2"][data-theme="dark"] body #view-contract .csv-btn--danger.csv-btn--link { color: var(--ds-danger); }