/* 버전 2 — 4a단계: 훈련종료 화면(#view-trainingCompletion) 신규 LMS 모양.
   /v2/ 에서만 불러온다(functions/v2/[[path]].js). 운영 style.css·React 번들은 건드리지 않는다.
   모든 규칙은 html[data-ui="v2"] #view-trainingCompletion 아래 — 같은 .wr-*/.withdrawal-* 클래스를 쓰는
   중도탈락 화면에는 영향 없다.
   상태 색 규칙(.wr-stat 왼쪽 상태 막대, HRD 상태, 완료 흐림)은 그대로 두고 모양만 바꾼다.
   출결/휴가·서류 발급 등과 같은 방식.
   설계: docs/superpowers/specs/2026-10-13-lms-ux-reskin-design.md */

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

/* ── 페이지 머리 ───────────────────────────────────────────────────────── */
html[data-ui="v2"] #view-trainingCompletion .withdrawal-head h2 {
  font-size: 18px;
  font-weight: 700;
  color: var(--ds-foreground);
}
html[data-ui="v2"] #view-trainingCompletion .withdrawal-sub {
  font-size: 12px;
  color: var(--ds-muted-foreground);
}
/* 새로고침·시트 열기 = 보조 버튼 */
html[data-ui="v2"] #view-trainingCompletion .withdrawal-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-sizing: border-box;
  height: 36px;
  padding: 0 14px;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  background: var(--ds-card);
  color: var(--ds-card-foreground);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: none;
}
html[data-ui="v2"] #view-trainingCompletion .withdrawal-link:hover {
  background: var(--ds-muted);
  color: var(--ds-foreground);
}

/* ── 상태 요약 타일 — 카드, 왼쪽 상태 색 막대 유지, 숫자는 크게 ───────────────── */
html[data-ui="v2"] #view-trainingCompletion .withdrawal-summary { gap: 12px; }
html[data-ui="v2"] #view-trainingCompletion .wr-stat {
  padding: 10px 16px;
  border-color: var(--ds-border);
  border-left-color: var(--wr-stat-border);
  border-radius: var(--ds-radius-xl);
  background: var(--ds-card);
  box-shadow: var(--ds-shadow-card);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
html[data-ui="v2"] #view-trainingCompletion .wr-stat:hover,
html[data-ui="v2"] #view-trainingCompletion .wr-stat:focus-visible {
  border-color: var(--ds-border);
  border-left-color: var(--wr-stat-border);
  background: var(--ds-card);
  box-shadow: var(--ds-shadow-card-hover);
}
html[data-ui="v2"] #view-trainingCompletion .wr-stat span {
  font-size: 12px;
  font-weight: 600;
  color: var(--ds-muted-foreground);
}
html[data-ui="v2"] #view-trainingCompletion .wr-stat strong {
  font-size: 24px;
  font-weight: 700;
  color: var(--ds-foreground);
}
/* 고른 타일: 로즈 링(상태 색 막대와 겹치지 않게) */
html[data-ui="v2"] #view-trainingCompletion .wr-stat.active {
  border-color: var(--ds-primary);
  border-left-color: var(--wr-stat-border);
  background: var(--ds-primary-soft);
  box-shadow: 0 0 0 3px var(--ds-primary-soft);
}

/* ── 검색·필터 ─────────────────────────────────────────────────────────── */
html[data-ui="v2"] #view-trainingCompletion .wr-filter-toggle {
  min-height: 40px;
  padding: 0 14px;
  border-color: var(--ds-border);
  border-radius: var(--ds-radius-lg);
  background: var(--ds-card);
  color: var(--ds-muted-foreground);
  font-size: 13px;
  font-weight: 600;
}
html[data-ui="v2"] #view-trainingCompletion .wr-filter-toggle:hover,
html[data-ui="v2"] #view-trainingCompletion .wr-filter-toggle:focus-visible,
html[data-ui="v2"] #view-trainingCompletion .wr-filter-toggle.active {
  border-color: var(--ds-primary);
  background: var(--ds-card);
  box-shadow: 0 0 0 3px var(--ds-primary-soft);
  color: var(--ds-foreground);
}
html[data-ui="v2"] #view-trainingCompletion .wr-filter-popover {
  border-color: var(--ds-border);
  border-radius: var(--ds-radius-xl);
  background: var(--ds-card);
  box-shadow: var(--ds-shadow-card-hover);
}
html[data-ui="v2"] #view-trainingCompletion .attendance-hrd-banner,
html[data-ui="v2"] #view-trainingCompletion .sync-note {
  border-radius: var(--ds-radius-xl);
}

/* ── 목록 + 상세 분할 화면: 목록 상자(테두리 + 둥글기 24) ─────────────────────── */
html[data-ui="v2"] #view-trainingCompletion #tc-list .tcsv-root {
  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-trainingCompletion .tcsv-panel { background: var(--ds-card); }
html[data-ui="v2"] #view-trainingCompletion .tcsv-separator { background: var(--ds-border); }
html[data-ui="v2"] #view-trainingCompletion .tcsv-acc-trigger { padding-left: 16px; padding-right: 16px; }
html[data-ui="v2"] #view-trainingCompletion .tcsv-acc-title { font-size: 13px; font-weight: 600; }
html[data-ui="v2"] #view-trainingCompletion .tcsv-acc-count {
  border-radius: 999px;
  background: var(--ds-muted);
  color: var(--ds-muted-foreground);
  font-weight: 600;
}
html[data-ui="v2"] #view-trainingCompletion .tcsv-list-item {
  padding-left: 20px;
  padding-right: 16px;
  border-top-color: var(--ds-border);
}
html[data-ui="v2"] #view-trainingCompletion .tcsv-list-item:hover { background: var(--ds-muted); }
html[data-ui="v2"] #view-trainingCompletion .tcsv-list-item--selected {
  padding-left: 17px;
  border-left: 3px solid var(--ds-primary);
  background: var(--ds-primary-soft);
}
html[data-ui="v2"] #view-trainingCompletion .tcsv-detail-title h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--ds-foreground);
}
html[data-ui="v2"] #view-trainingCompletion .tcsv-detail-meta span {
  border-color: var(--ds-border);
  background: var(--ds-muted);
  color: var(--ds-muted-foreground);
}
html[data-ui="v2"] #view-trainingCompletion .tcsv-task { border-radius: var(--ds-radius-lg); }
html[data-ui="v2"] #view-trainingCompletion .tcsv-task:hover { background: var(--ds-muted); }
/* "다음 할 일" 박스: 안내 띠 모양(로즈 옅은 바탕) */
html[data-ui="v2"] #view-trainingCompletion .tcsv-next {
  border-radius: var(--ds-radius-lg);
  background: var(--ds-primary-soft);
}
html[data-ui="v2"] #view-trainingCompletion .tcsv-next span { color: var(--ds-primary-active); }
html[data-ui="v2"] #view-trainingCompletion .tcsv-next.is-pending { background: var(--ds-muted); }
html[data-ui="v2"] #view-trainingCompletion .tcsv-sheet-link { color: var(--ds-info-fg); }
html[data-ui="v2"] #view-trainingCompletion .tcsv-empty { color: var(--ds-muted-foreground); }

/* 빨강 상태 칩(종강 +N일 등): 상태 색 토큰은 사용자 확정 규칙(2026-10-01)이라 그대로 두고,
   글자색만 같은 빨강 색상군의 진한 톤으로 — 라이트 대비 4.1→5.5, 다크 4.4→7 이상 */
html[data-ui="v2"]:not([data-theme="dark"]) #view-trainingCompletion .sv-chip--danger { color: #b91c1c; }
html[data-ui="v2"][data-theme="dark"] #view-trainingCompletion .sv-chip--danger { color: #fca5a5; }

/* 유리 효과(::before 흰 그라데이션, ::after 안쪽 선)가 고른 타일 위에 얹혀 다크에서 회색으로 보이던 문제 */
html[data-ui="v2"] #view-trainingCompletion .wr-stat::before,
html[data-ui="v2"] #view-trainingCompletion .wr-stat::after { display: none; }