/* 버전 2 — 4b단계: 중도탈락 화면(#view-withdrawals) 신규 LMS 모양.
   /v2/ 에서만 불러온다(functions/v2/[[path]].js). 운영 style.css는 건드리지 않는다.
   모든 규칙은 html[data-ui="v2"] #view-withdrawals 아래 — 같은 .wr-*/.withdrawal-* 클래스를 쓰는
   훈련종료 화면(training-completion.css)과는 서로 독립이다.
   상태 색 규칙(.wr-stat 왼쪽 상태 막대, 상태 알약)은 그대로 두고 모양만 바꾼다.
   설계: docs/superpowers/specs/2026-10-13-lms-ux-reskin-design.md */

/* ── 페이지 머리 ───────────────────────────────────────────────────────── */
html[data-ui="v2"] #view-withdrawals .withdrawal-head h2 {
  font-size: 18px;
  font-weight: 700;
  color: var(--ds-foreground);
}
html[data-ui="v2"] #view-withdrawals .withdrawal-sub {
  font-size: 12px;
  color: var(--ds-muted-foreground);
}
/* 시트 열기·자부담 통합관리 = 보조 버튼 */
html[data-ui="v2"] #view-withdrawals .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-withdrawals .withdrawal-link:hover { background: var(--ds-muted); color: var(--ds-foreground); }

/* 업무 최소 / 상세 확인 = 분절 탭 */
html[data-ui="v2"] #view-withdrawals .attendance-view-toggle {
  height: auto;
  gap: 2px;
  padding: 3px;
  border: 0;
  border-radius: var(--ds-radius-lg);
  background: var(--ds-muted);
}
html[data-ui="v2"] #view-withdrawals .attendance-view-toggle button {
  height: 30px;
  padding: 0 12px;
  border-radius: var(--ds-radius-md);
  color: var(--ds-muted-foreground);
  font-size: 13px;
  font-weight: 600;
}
html[data-ui="v2"] #view-withdrawals .attendance-view-toggle button:hover:not(.active),
html[data-ui="v2"] #view-withdrawals .attendance-view-toggle button:focus-visible:not(.active) {
  background: transparent;
  box-shadow: none;
  color: var(--ds-foreground);
}
html[data-ui="v2"] #view-withdrawals .attendance-view-toggle button.active {
  background: var(--ds-card);
  color: var(--ds-foreground);
  box-shadow: var(--ds-shadow-card);
}

/* ── 상태 요약 타일 — 카드, 왼쪽 상태 색 막대 유지, 숫자는 크게 ───────────────── */
html[data-ui="v2"] #view-withdrawals .withdrawal-summary { gap: 12px; }
html[data-ui="v2"] #view-withdrawals .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-withdrawals .wr-stat::before,
html[data-ui="v2"] #view-withdrawals .wr-stat::after { display: none; }
html[data-ui="v2"] #view-withdrawals .wr-stat:hover,
html[data-ui="v2"] #view-withdrawals .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-withdrawals .wr-stat span {
  font-size: 12px;
  font-weight: 600;
  color: var(--ds-muted-foreground);
}
html[data-ui="v2"] #view-withdrawals .wr-stat strong {
  font-size: 24px;
  font-weight: 700;
  color: var(--ds-foreground);
}
/* 고른 타일: 로즈 링 */
html[data-ui="v2"] #view-withdrawals .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-withdrawals .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-withdrawals .wr-filter-toggle:hover,
html[data-ui="v2"] #view-withdrawals .wr-filter-toggle:focus-visible,
html[data-ui="v2"] #view-withdrawals .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-withdrawals .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-withdrawals .withdrawal-status-tabs {
  gap: 2px;
  border: 0;
  border-radius: var(--ds-radius-lg);
  background: var(--ds-muted);
}
html[data-ui="v2"] #view-withdrawals .withdrawal-status-tabs button {
  border-radius: var(--ds-radius-md);
  color: var(--ds-muted-foreground);
  font-weight: 600;
}
html[data-ui="v2"] #view-withdrawals .withdrawal-status-tabs button:hover:not(.active),
html[data-ui="v2"] #view-withdrawals .withdrawal-status-tabs button:focus-visible:not(.active) {
  border-color: transparent;
  background: transparent;
  color: var(--ds-foreground);
}
html[data-ui="v2"] #view-withdrawals .withdrawal-status-tabs button.active {
  border-color: transparent;
  background: var(--ds-card);
  color: var(--ds-foreground);
  box-shadow: var(--ds-shadow-card);
}
html[data-ui="v2"] #view-withdrawals :is(.withdrawal-warn, .withdrawal-loading, .withdrawal-empty, .wr-scope-note, .sync-note) {
  border-radius: var(--ds-radius-xl);
}

/* ── 목록 + 상세 분할 화면 ─────────────────────────────────────────────── */
html[data-ui="v2"] #view-withdrawals .wr-split { gap: 16px; }
html[data-ui="v2"] #view-withdrawals .wr-split-group {
  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-withdrawals .wr-split-group-toggle { padding: 9px 14px; font-size: 13px; }
html[data-ui="v2"] #view-withdrawals .wr-split-group-toggle:hover { background: var(--ds-muted); }
html[data-ui="v2"] #view-withdrawals .wr-split-group-count {
  border: 0;
  background: var(--ds-muted);
  color: var(--ds-muted-foreground);
  font-weight: 600;
}
html[data-ui="v2"] #view-withdrawals .wr-split-item {
  padding: 9px 14px 10px 12px;
  border-top-color: var(--ds-border);
}
html[data-ui="v2"] #view-withdrawals .wr-split-item:hover { background: var(--ds-muted); }
/* 고른 행: 로즈 바탕 + 왼쪽 로즈 막대. 안쪽 링은 쓰지 않는다(둥근 모서리에 잘려 보임). */
html[data-ui="v2"] #view-withdrawals .wr-split-item.is-selected {
  border-left-color: var(--ds-primary);
  background: color-mix(in srgb, var(--ds-primary) 14%, var(--ds-card));
}
/* 상세 카드 */
html[data-ui="v2"] #view-withdrawals .wr-split-detail .wr-card-split {
  border-radius: var(--ds-radius-xl);
  border: 1px solid var(--ds-border);
  background: var(--ds-card);
  box-shadow: var(--ds-shadow-card);
}
html[data-ui="v2"] #view-withdrawals .wr-sd-head .wr-trainee-name { font-size: 18px; font-weight: 700; color: var(--ds-foreground); }