/* 버전 2 — 4b단계: 분석(#view-trainingAnalysis) 신규 LMS 모양. /v2/ 에서만, #view-trainingAnalysis 범위 한정.
   모드 버튼의 의미 색(출결/중도탈락/서류 강조색)·종합현황 타일의 위험도 색은 그대로 둔다.
   설계: docs/superpowers/specs/2026-10-13-lms-ux-reskin-design.md */
html[data-ui="v2"] #view-trainingAnalysis .training-analysis-head h2 { font-size: 18px; font-weight: 700; color: var(--ds-foreground); }
html[data-ui="v2"] #view-trainingAnalysis .training-analysis-sub { font-size: 12px; color: var(--ds-muted-foreground); }

/* 업무 선택 모드 버튼 = 카드 타일, 고른 것은 로즈 링 */
html[data-ui="v2"] #view-trainingAnalysis .training-analysis-modes button {
  border-color: var(--ds-border);
  border-radius: var(--ds-radius-xl);
  background: var(--ds-card);
  box-shadow: var(--ds-shadow-card);
}
html[data-ui="v2"] #view-trainingAnalysis .training-analysis-modes .ta-mode-label { font-weight: 600; color: var(--ds-muted-foreground); }
html[data-ui="v2"] #view-trainingAnalysis .training-analysis-modes button strong { font-weight: 700; color: var(--ds-foreground); }
html[data-ui="v2"] #view-trainingAnalysis .training-analysis-modes button.active {
  border-color: var(--ds-primary);
  background: var(--ds-primary-soft);
  box-shadow: 0 0 0 3px var(--ds-primary-soft);
}
/* 고른 모드의 개수 알약: 운영 CSS는 파랑(--ta-mode-accent) 바탕+흰 글자인데, 위 규칙의 짙은 글자색이 겹쳐 대비 3.4가 됨 → 진한 로즈 바탕 + 흰 글자(6:1 이상) */
html[data-ui="v2"] #view-trainingAnalysis .training-analysis-modes button.active strong {
  background: var(--ds-primary-active);
  color: var(--ds-primary-foreground);
}
/* 기간 선택 칩(React, 고른 것): 로즈 글자 on 옅은 로즈 = 3.2 → 같은 색상군의 진한 톤 */
html[data-ui="v2"] #view-trainingAnalysis button.text-primary { color: var(--ds-primary-active); }
/* 기준 설명 글자("전체기간 · 사유발생일 기준"): 운영 CSS #64748b 고정 → 로즈 옅은 바탕 위 대비 4.0 */
html[data-ui="v2"] #view-trainingAnalysis .training-analysis-modes button small { color: var(--ds-muted-foreground); }

/* 검색·필터 줄 */
html[data-ui="v2"] #view-trainingAnalysis .ta-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-trainingAnalysis .ta-filter-toggle:hover,
html[data-ui="v2"] #view-trainingAnalysis .ta-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-trainingAnalysis .ta-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-trainingAnalysis :is(.ta-overview-panel, .training-calendar-panel) {
  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-trainingAnalysis .ta-overview-title { color: var(--ds-foreground); font-weight: 700; }
html[data-ui="v2"] #view-trainingAnalysis .training-calendar-cell { border-radius: var(--ds-radius-lg); }

/* 캘린더 패널 월 제목(h3)이 어두운 글자색이라 다크에서 안 보이던 문제 */
html[data-ui="v2"] #view-trainingAnalysis .training-calendar-panel h3 { color: var(--ds-foreground); }

/* 보고 있는 달에 업무가 없을 때: 업무가 있는 가까운 달로 가는 안내(app.js가 옵션 analysisEmptyMonthHint가 켜진 /v2/에서만 그린다) */
html[data-ui="v2"] #view-trainingAnalysis .training-calendar-empty-hint { margin: 8px 0 12px; font-size: 13px; color: var(--ds-muted-foreground); }
html[data-ui="v2"] #view-trainingAnalysis .training-calendar-jump {
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--ds-primary);
  border-radius: var(--ds-radius-lg);
  background: var(--ds-primary-soft);
  color: var(--ds-primary-active);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
html[data-ui="v2"] #view-trainingAnalysis .training-calendar-jump:hover { background: var(--ds-card); box-shadow: 0 0 0 3px var(--ds-primary-soft); }