/* 버전 2 — 3단계 공용 부품 + 다크모드 보정 (신규 LMS 값 --ds-* 만 사용).
   /v2/ 에서만 불러온다(functions/v2/[[path]].js). 운영 style.css는 이 파일을 모른다.
   1) .ds-* 공용 클래스: 새로 만들거나 옮겨 갈 때 쓰는 표준 부품.
   2) "기존 탭별 버튼·입력칸"에 같은 모양을 입히는 연결 규칙 — 클래스 이름·동작은 그대로(DR-025).
   3) 다크모드 보정: 라이트 색이 남아 있던 곳을 LMS 다크 팔레트로.
   상태 칩 색 규칙(빨강=지금 / 주황=지연·이슈 / 노랑=확인 / 파랑=진행 / 초록=완료 / 회색=대기·취소)은 건드리지 않는다.
   설계: docs/superpowers/specs/2026-10-13-lms-ux-reskin-design.md */

/* ── 1) 공용 클래스 ─────────────────────────────────────────────────────── */
html[data-ui="v2"] .ds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-sizing: border-box;
  min-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-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}
html[data-ui="v2"] .ds-btn:hover:not(:disabled) { background: var(--ds-muted); }
html[data-ui="v2"] .ds-btn:focus-visible { outline: 2px solid var(--ds-ring); outline-offset: 2px; }
html[data-ui="v2"] .ds-btn:disabled { opacity: 0.55; cursor: not-allowed; }
html[data-ui="v2"] .ds-btn--sm { min-height: 28px; padding: 0 10px; font-size: 12px; border-radius: var(--ds-radius-md); }
html[data-ui="v2"] .ds-btn--primary {
  border-color: var(--ds-primary);
  background: var(--ds-primary);
  color: var(--ds-primary-foreground);
}
html[data-ui="v2"] .ds-btn--primary:hover:not(:disabled) { border-color: var(--ds-primary-hover); background: var(--ds-primary-hover); }
html[data-ui="v2"] .ds-btn--primary:active:not(:disabled) { background: var(--ds-primary-active); }
html[data-ui="v2"] .ds-btn--primary:disabled { background: var(--ds-muted); border-color: var(--ds-border); color: var(--ds-muted-foreground); opacity: 1; }
html[data-ui="v2"] .ds-btn--danger {
  border-color: var(--ds-danger);
  background: var(--ds-danger-bg);
  color: var(--ds-danger);
}
html[data-ui="v2"] .ds-btn--danger:hover:not(:disabled) { background: var(--ds-danger); color: #fff; }
html[data-ui="v2"] .ds-btn--ghost { border-color: transparent; background: transparent; }

html[data-ui="v2"] .ds-input,
html[data-ui="v2"] .ds-select {
  box-sizing: border-box;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--ds-input);
  border-radius: var(--ds-radius-lg);
  background: var(--ds-card);
  color: var(--ds-foreground);
  font-family: inherit;
  font-size: 14px;
}
html[data-ui="v2"] .ds-input:focus,
html[data-ui="v2"] .ds-select:focus {
  outline: none;
  border-color: var(--ds-ring);
  box-shadow: 0 0 0 3px var(--ds-primary-soft);
}

html[data-ui="v2"] .ds-card {
  box-sizing: border-box;
  padding: 24px;
  border-radius: var(--ds-radius-2xl);
  border: 1px solid var(--ds-border);
  background: var(--ds-card);
  color: var(--ds-card-foreground);
  box-shadow: var(--ds-shadow-card);
}
/* 목록 상자: 테두리 + 둥글기 24px, 안의 행은 구분선 */
html[data-ui="v2"] .ds-list {
  overflow: hidden;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-2xl);
  background: var(--ds-card);
}
html[data-ui="v2"] .ds-list > * + * { border-top: 1px solid var(--ds-border); }

/* 칩 필터(높이 36 · 둥글기 16) — 고른 것은 로즈 바탕 흰 글자 */
html[data-ui="v2"] .ds-chip-filter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-xl);
  background: var(--ds-card);
  color: var(--ds-card-foreground);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
html[data-ui="v2"] .ds-chip-filter:hover { background: var(--ds-muted); }
html[data-ui="v2"] .ds-chip-filter.active,
html[data-ui="v2"] .ds-chip-filter[aria-pressed="true"] {
  border-color: var(--ds-primary);
  background: var(--ds-primary);
  color: var(--ds-primary-foreground);
}

/* 분절 탭: 흐린 바탕 띠 안에서 고른 탭만 카드색 */
html[data-ui="v2"] .ds-segment {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: var(--ds-radius-lg);
  background: var(--ds-muted);
}
html[data-ui="v2"] .ds-segment > button {
  min-height: 30px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--ds-radius-md);
  background: transparent;
  color: var(--ds-muted-foreground);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
html[data-ui="v2"] .ds-segment > button.active,
html[data-ui="v2"] .ds-segment > button[aria-pressed="true"] {
  background: var(--ds-card);
  color: var(--ds-foreground);
  box-shadow: var(--ds-shadow-card);
}

/* 안내 띠: 로즈 옅은 바탕 + 제목/설명 + 오른쪽 버튼 */
html[data-ui="v2"] .ds-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border: 1px solid var(--ds-primary-soft);
  border-radius: var(--ds-radius-xl);
  background: var(--ds-primary-soft);
  color: var(--ds-foreground);
}
html[data-ui="v2"] .ds-banner__title { font-size: 14px; font-weight: 700; }
html[data-ui="v2"] .ds-banner__desc { font-size: 12px; color: var(--ds-muted-foreground); }

html[data-ui="v2"] .ds-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--ds-radius-lg);
  background: var(--ds-info-bg);
  color: var(--ds-info-fg);
  font-size: 12px;
  font-weight: 600;
}

/* ── 2) 기존 부품에 같은 모양 연결 ──────────────────────────────────────────
   명시도: :root[data-ui] body :is(...) = (0,3,1) — 기존 `:root[data-theme="dark"] .x`(0,3,0)보다 높다. */

/* 보조 버튼(흰 바탕+테두리, 둥글기 12) */
:root[data-ui="v2"] body :is(
  .cal-nav-btn, .cal-color-btn, .training-analysis-refresh, .tc-refresh-btn, .tt-secondary,
  .contract-action-btn, .contract-btn--ghost, .wr-copy-btn, .document-copy-btn, .tt-retry-btn,
  .ops-health-action-btn, .tutor-action-btn, button[class*="-filter-toggle"]
) {
  box-sizing: border-box;
  min-height: 36px;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  background: var(--ds-card);
  color: var(--ds-card-foreground);
  font-family: inherit;
  font-weight: 600;
  box-shadow: none;
}
:root[data-ui="v2"] body :is(
  .cal-nav-btn, .cal-color-btn, .training-analysis-refresh, .tc-refresh-btn, .tt-secondary,
  .contract-action-btn, .contract-btn--ghost, .wr-copy-btn, .document-copy-btn, .tt-retry-btn,
  .ops-health-action-btn, .tutor-action-btn, button[class*="-filter-toggle"]
):hover:not(:disabled) {
  background: var(--ds-muted);
  border-color: var(--ds-border);
  color: var(--ds-foreground);
}

/* 주 버튼(로즈) */
:root[data-ui="v2"] body :is(.tt-submit, .contract-btn--primary, .wr-save-btn, .ar-save-btn, .contract-memo-add-btn) {
  box-sizing: border-box;
  min-height: 36px;
  border: 1px solid var(--ds-primary);
  border-radius: var(--ds-radius-lg);
  background: var(--ds-primary);
  color: var(--ds-primary-foreground);
  font-family: inherit;
  font-weight: 600;
  box-shadow: none;
}
:root[data-ui="v2"] body :is(.tt-submit, .contract-btn--primary, .wr-save-btn, .ar-save-btn, .contract-memo-add-btn):hover:not(:disabled) {
  border-color: var(--ds-primary-hover);
  background: var(--ds-primary-hover);
  color: var(--ds-primary-foreground);
}
:root[data-ui="v2"] body :is(.tt-submit, .contract-btn--primary, .wr-save-btn, .ar-save-btn, .contract-memo-add-btn):disabled {
  border-color: var(--ds-border);
  background: var(--ds-muted);
  color: var(--ds-muted-foreground);
  cursor: not-allowed;
}

/* 위험 버튼 */
:root[data-ui="v2"] body .contract-btn--danger {
  box-sizing: border-box;
  min-height: 36px;
  border: 1px solid var(--ds-danger);
  border-radius: var(--ds-radius-lg);
  background: var(--ds-danger-bg);
  color: var(--ds-danger);
  font-weight: 600;
}
:root[data-ui="v2"] body .contract-btn--danger:hover:not(:disabled) { background: var(--ds-danger); color: #fff; }

/* 입력칸·선택칸·텍스트영역(메인 영역 안, 체크박스·라디오·파일·범위 제외) */
:root[data-ui="v2"] body .main-area :is(
  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]):not([type="hidden"]),
  select, textarea
) {
  border: 1px solid var(--ds-input);
  border-radius: var(--ds-radius-lg);
  background-color: var(--ds-card);
  color: var(--ds-foreground);
  font-family: inherit;
}
:root[data-ui="v2"] body .main-area :is(
  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]):not([type="hidden"]),
  select, textarea
):focus {
  outline: none;
  border-color: var(--ds-ring);
  box-shadow: 0 0 0 3px var(--ds-primary-soft);
  background-color: var(--ds-card);
}
:root[data-ui="v2"] body .main-area :is(input, textarea)::placeholder { color: var(--ds-muted-foreground); opacity: 0.8; }

/* 칩 필터형 버튼: 고른 것만 로즈(상태 칩이 아니라 "보기 필터"인 것만 — 계약관리 단계 칩은 제외) */

/* ── 3) 다크모드 보정 — LMS 다크(배경 #0f172a · 카드 #1e293b · 테두리 #334155) ─────── */
/* 카드 그림자: LMS 다크는 그림자 없음 */
:root[data-ui="v2"][data-theme="dark"] body .ds-card,
:root[data-ui="v2"][data-theme="dark"] body .ds-segment > button.active { box-shadow: none; }

/* 훈련 분석 캘린더 칸이 라이트 색(흰색)으로 남아 있던 문제 */
:root[data-ui="v2"][data-theme="dark"] body .training-calendar-cell {
  border-color: var(--ds-border);
  background: var(--ds-card);
  color: var(--ds-card-foreground);
}
:root[data-ui="v2"][data-theme="dark"] body .training-calendar-cell.is-out {
  background: var(--ds-background);
  color: var(--ds-muted-foreground);
}
:root[data-ui="v2"][data-theme="dark"] body .training-calendar-cell.is-today {
  border-color: var(--ds-info-fg);
  box-shadow: inset 0 0 0 1px var(--ds-info);
}
:root[data-ui="v2"][data-theme="dark"] body .training-calendar-cell.active {
  border-color: var(--ds-primary);
  background: var(--ds-primary-soft);
  box-shadow: inset 0 0 0 1px var(--ds-primary);
}
:root[data-ui="v2"][data-theme="dark"] body .training-calendar-date { color: var(--ds-muted-foreground); }
:root[data-ui="v2"][data-theme="dark"] body .cal-date { color: var(--ds-muted-foreground); }

/* 통계 카드 숫자가 어두운 글자색이라 다크에서 안 보이던 문제(출결·중도탈락·서류·훈련종료·훈련비용) */
:root[data-ui="v2"][data-theme="dark"] body :is(.wr-stat strong, .ar-stat strong, .allowance-stat strong, .doc-stat span) {
  color: var(--ds-foreground);
}

/* 훈련비용신청 */
:root[data-ui="v2"][data-theme="dark"] body .alw-filter-scope { color: var(--ds-info-fg); }
:root[data-ui="v2"][data-theme="dark"] body .alw-filter-detail { color: var(--ds-muted-foreground); }
:root[data-ui="v2"][data-theme="dark"] body :is(.allowance-board, .allowance-guide) {
  background: var(--ds-card);
  border-color: var(--ds-border);
  color: var(--ds-card-foreground);
}
:root[data-ui="v2"][data-theme="dark"] body :is(.allowance-selected, .allowance-guide-title, .allowance-guide-section) h3 {
  color: var(--ds-foreground);
}

/* 시간표 변환 */
:root[data-ui="v2"][data-theme="dark"] body .tt-help { background: var(--ds-card); border-color: var(--ds-border); color: var(--ds-muted-foreground); }
:root[data-ui="v2"][data-theme="dark"] body .tt-submit:disabled {
  background: var(--ds-muted);
  border-color: var(--ds-border);
  color: var(--ds-muted-foreground);
}

/* 계약관리 단계 칩(보라) — 다크에서 읽히는 보라 */
:root[data-ui="v2"][data-theme="dark"] body .contract-sc--sep,
:root[data-ui="v2"][data-theme="dark"] body .contract-sc--sep .contract-sc-count { color: #c4b5fd; }

/* 라이트 색이 남아 있던 나머지 면·글자(다크) */
:root[data-ui="v2"][data-theme="dark"] body :is(.training-calendar-panel, .training-calendar-empty, .allowance-toolbar, .document-link) {
  background: var(--ds-card);
  border-color: var(--ds-border);
  color: var(--ds-card-foreground);
}
:root[data-ui="v2"][data-theme="dark"] body :is(.allowance-owner-badge, .sync-note) {
  background: var(--ds-muted);
  border-color: var(--ds-border);
  color: var(--ds-muted-foreground);
}
:root[data-ui="v2"][data-theme="dark"] body :is(.doc-stat strong, .document-scope-note strong, .allowance-required li, .allowance-guide li) {
  color: var(--ds-foreground);
}
:root[data-ui="v2"][data-theme="dark"] body .allowance-source-tip { color: var(--ds-info-fg); }
:root[data-ui="v2"][data-theme="dark"] body .training-calendar-head strong {
  background: rgba(45, 212, 191, 0.14);
  color: #5eead4;
}
:root[data-ui="v2"][data-theme="dark"] body #view-guide .guide-card-warn { color: var(--ds-warning); }
:root[data-ui="v2"][data-theme="dark"] body #view-timetable dl > div { background: var(--ds-muted); border-color: var(--ds-border); }
:root[data-ui="v2"][data-theme="dark"] body #view-timetable dt { color: var(--ds-muted-foreground); }
:root[data-ui="v2"][data-theme="dark"] body #view-timetable dd { color: var(--ds-foreground); }
:root[data-ui="v2"][data-theme="dark"] body #view-timetable code { background: var(--ds-muted); color: var(--ds-foreground); }
:root[data-ui="v2"][data-theme="dark"] body #view-trainingAnalysis button.rounded-md.border { color: var(--ds-info-fg); }

/* 오류·경고 박스: 라이트 분홍/살구 바탕이 다크에서 튀던 곳 → LMS 위험·경고 토큰 */
:root[data-ui="v2"][data-theme="dark"] body :is(.document-warn, .withdrawal-warn, .attendance-warn, .tt-error) {
  border-color: var(--ds-danger);
  background: var(--ds-danger-bg);
  color: var(--ds-danger);
}
:root[data-ui="v2"][data-theme="dark"] body :is(.tt-warn, .tt-notice) {
  border-color: var(--ds-warning);
  background: var(--ds-warning-bg);
  color: var(--ds-warning);
}
:root[data-ui="v2"][data-theme="dark"] body .tt-notice-title { color: var(--ds-warning); }