/* 버전 2 — 4b단계: 훈련비용신청(#view-allowance) 신규 LMS 모양. /v2/ 에서만, #view-allowance 범위 한정.
   요약 타일의 왼쪽 상태 색 막대(--allowance-stat-border)와 과정 행의 마감 상태 색은 그대로 둔다.
   설계: docs/superpowers/specs/2026-10-13-lms-ux-reskin-design.md */
html[data-ui="v2"] #view-allowance .allowance-head h2 { font-size: 18px; font-weight: 700; color: var(--ds-foreground); }
html[data-ui="v2"] #view-allowance .allowance-summary { gap: 12px; }
html[data-ui="v2"] #view-allowance .allowance-stat {
  padding: 10px 16px;
  border-color: var(--ds-border);
  border-left-color: var(--allowance-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-allowance .allowance-stat::before,
html[data-ui="v2"] #view-allowance .allowance-stat::after { display: none; }
html[data-ui="v2"] #view-allowance .allowance-stat span { font-size: 12px; font-weight: 600; color: var(--ds-muted-foreground); }
html[data-ui="v2"] #view-allowance .allowance-stat strong { font-size: 24px; font-weight: 700; color: var(--ds-foreground); }
html[data-ui="v2"] #view-allowance .allowance-stat:hover,
html[data-ui="v2"] #view-allowance .allowance-stat:focus-visible {
  border-color: var(--ds-border);
  border-left-color: var(--allowance-stat-border);
  background: var(--ds-card);
  box-shadow: var(--ds-shadow-card-hover);
}
html[data-ui="v2"] #view-allowance .allowance-stat.active {
  border-color: var(--ds-primary);
  border-left-color: var(--allowance-stat-border);
  background: var(--ds-primary-soft);
  box-shadow: 0 0 0 3px var(--ds-primary-soft);
}
html[data-ui="v2"] #view-allowance :is(.allowance-board, .allowance-guide) {
  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-allowance .allowance-toolbar {
  border-color: var(--ds-border);
  border-radius: var(--ds-radius-xl);
}
html[data-ui="v2"] #view-allowance .allowance-course-row { border-radius: var(--ds-radius-lg); }
html[data-ui="v2"] #view-allowance .allowance-selected { border-radius: var(--ds-radius-xl); }