/* 버전 2 — 4a단계: 출결/휴가 화면(#view-attendance) 신규 LMS 모양.
   /v2/ 에서만 불러온다(functions/v2/[[path]].js). 운영 style.css·React 번들은 건드리지 않는다.
   모든 규칙은 html[data-ui="v2"] #view-attendance 아래 — 다른 분할 화면에는 영향 없다.
   상태 색 규칙(.ar-stat 왼쪽 막대, 타이밍 칩, HRD 배지)은 그대로 두고 모양(둥글기·여백·글자)만 바꾼다.
   설계: docs/superpowers/specs/2026-10-13-lms-ux-reskin-design.md */

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

/* ── 페이지 머리 ───────────────────────────────────────────────────────── */
html[data-ui="v2"] #view-attendance .attendance-head h2 {
  font-size: 18px;
  font-weight: 700;
  color: var(--ds-foreground);
}
html[data-ui="v2"] #view-attendance .attendance-sub {
  font-size: 12px;
  color: var(--ds-muted-foreground);
}

/* 업무 최소 / 상세 확인 = 분절 탭 */
html[data-ui="v2"] #view-attendance .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-attendance .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-attendance .attendance-view-toggle button:hover:not(.active),
html[data-ui="v2"] #view-attendance .attendance-view-toggle button:focus-visible:not(.active) {
  background: transparent;
  box-shadow: none;
  color: var(--ds-foreground);
}
html[data-ui="v2"] #view-attendance .attendance-view-toggle button.active {
  background: var(--ds-card);
  color: var(--ds-foreground);
  box-shadow: var(--ds-shadow-card);
}

/* 시트 열기 = 보조 버튼 */
html[data-ui="v2"] #view-attendance .attendance-link {
  display: inline-flex;
  align-items: center;
  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-attendance .attendance-link:hover { background: var(--ds-muted); color: var(--ds-foreground); }

/* ── 마감 안내 띠(상태 빨강 유지, 모양만 안내 띠로) ──────────────────────── */
html[data-ui="v2"] #view-attendance .ar-deadline-banner {
  border-radius: var(--ds-radius-xl);
  padding: 12px 16px;
}
html[data-ui="v2"] #view-attendance .ar-deadline-jump {
  min-height: 30px;
  border-radius: var(--ds-radius-md);
  font-weight: 600;
}

/* ── 상태 요약 타일 — 카드 + 큰 숫자, 왼쪽 상태 색 막대는 유지 ──────────────── */
html[data-ui="v2"] #view-attendance .attendance-summary { gap: 12px; }
html[data-ui="v2"] #view-attendance .ar-stat {
  padding: 14px 16px;
  border-radius: var(--ds-radius-xl);
  border-color: var(--ds-border);
  border-left-color: var(--ar-stat-border);
  background: var(--ds-card);
  box-shadow: var(--ds-shadow-card);
}
html[data-ui="v2"] #view-attendance .ar-stat:hover {
  background: var(--ds-card);
  box-shadow: var(--ds-shadow-card-hover);
}
html[data-ui="v2"] #view-attendance .ar-stat span {
  font-size: 12px;
  font-weight: 600;
  color: var(--ds-muted-foreground);
}
html[data-ui="v2"] #view-attendance .ar-stat strong {
  margin-top: 2px;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--ds-foreground);
}
/* 고른 타일: 로즈 링(상태 색 막대와 겹치지 않게 바깥 링으로) */
html[data-ui="v2"] #view-attendance .ar-stat.active {
  border-color: var(--ds-primary);
  border-left-color: var(--ar-stat-border);
  background: var(--ds-primary-soft);
  box-shadow: 0 0 0 3px var(--ds-primary-soft);
}

/* ── 검색·필터 ─────────────────────────────────────────────────────────── */
html[data-ui="v2"] #view-attendance .att-filter-search {
  height: 40px;
  padding-left: 38px;
  border-radius: var(--ds-radius-lg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 12px center;
}
html[data-ui="v2"] #view-attendance .ar-filter-toggle {
  height: 40px;
  padding: 0 14px;
  font-size: 13px;
}
html[data-ui="v2"] #view-attendance .ar-filter-popover {
  border-radius: var(--ds-radius-xl);
  border-color: var(--ds-border);
  background: var(--ds-card);
  box-shadow: var(--ds-shadow-card-hover);
}
html[data-ui="v2"] #view-attendance .attendance-warn,
html[data-ui="v2"] #view-attendance .attendance-hrd-banner {
  border-radius: var(--ds-radius-xl);
}

/* ── 목록 + 상세 분할 화면: 목록 상자(테두리 + 둥글기 24 + 행 구분선) ─────────── */
html[data-ui="v2"] #view-attendance #ar-list .asv-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-attendance .asv-panel { background: var(--ds-card); }
html[data-ui="v2"] #view-attendance .asv-separator { background: var(--ds-border); }
html[data-ui="v2"] #view-attendance .asv-acc-trigger { padding-left: 16px; padding-right: 16px; }
html[data-ui="v2"] #view-attendance .asv-acc-title { font-size: 13px; font-weight: 600; }
html[data-ui="v2"] #view-attendance .asv-acc-count {
  border-radius: 999px;
  background: var(--ds-muted);
  color: var(--ds-muted-foreground);
  font-weight: 600;
}
html[data-ui="v2"] #view-attendance .asv-list-item {
  padding-left: 24px;
  padding-right: 16px;
  border-bottom-color: var(--ds-border);
  background: var(--ds-card);
}
html[data-ui="v2"] #view-attendance .asv-list-item:hover { background: var(--ds-muted); }
html[data-ui="v2"] #view-attendance .asv-list-item--selected {
  padding-left: 21px;
  border-left: 3px solid var(--ds-primary);
  background: var(--ds-primary-soft);
}
html[data-ui="v2"] #view-attendance .asv-avatar {
  background: var(--ds-primary-soft);
  color: var(--ds-primary-active);
  font-weight: 700;
}
html[data-ui="v2"] #view-attendance .asv-detail-header { padding-left: 20px; padding-right: 20px; }
html[data-ui="v2"] #view-attendance .asv-detail-hname {
  font-size: 16px;
  font-weight: 700;
  color: var(--ds-foreground);
}
html[data-ui="v2"] #view-attendance .asv-empty-detail { color: var(--ds-muted-foreground); }

/* 상세 안 입력칸·선택칸·버튼 = 공용 모양 */
html[data-ui="v2"] #view-attendance :is(
  .asv-owner-select, .asv-lxm-select, .asv-lxm-custom-input, .asv-reason-input,
  .asv-more-field-input, .asv-card-status-select
) {
  border-color: var(--ds-input);
  border-radius: var(--ds-radius-lg);
  background-color: var(--ds-card);
  color: var(--ds-foreground);
}
html[data-ui="v2"] #view-attendance :is(.asv-reason-input, .asv-more-field-input):focus {
  border-color: var(--ds-ring);
  box-shadow: 0 0 0 3px var(--ds-primary-soft);
}
html[data-ui="v2"] #view-attendance .asv-btn {
  border-color: var(--ds-border);
  border-radius: var(--ds-radius-lg);
  background-color: var(--ds-card);
  color: var(--ds-card-foreground);
  font-weight: 600;
}
html[data-ui="v2"] #view-attendance .asv-btn:not(:disabled):hover {
  border-color: var(--ds-primary);
  color: var(--ds-primary);
}
html[data-ui="v2"] #view-attendance .asv-btn--active {
  border-color: var(--ds-primary);
  background-color: var(--ds-primary);
  color: var(--ds-primary-foreground);
  box-shadow: none;
}
html[data-ui="v2"] #view-attendance .asv-evidence-link { color: var(--ds-info-fg); }

/* ── 다크: 라이트 색이 남던 곳(마감 안내 띠, 담당·LXM 배지) ─────────────────── */
:root[data-ui="v2"][data-theme="dark"] body #view-attendance .ar-deadline-banner {
  border-color: var(--ds-danger);
  background: var(--ds-danger-bg);
  color: var(--ds-danger);
}
:root[data-ui="v2"][data-theme="dark"] body #view-attendance .ar-deadline-banner .ar-deadline-text { color: inherit; }
:root[data-ui="v2"][data-theme="dark"] body #view-attendance .asv-row-badge--op {
  background: rgba(250, 204, 21, 0.14);
  color: #fde68a;
}
:root[data-ui="v2"][data-theme="dark"] body #view-attendance .asv-row-badge--lxm {
  background: rgba(167, 139, 250, 0.16);
  color: #c4b5fd;
}
:root[data-ui="v2"][data-theme="dark"] body #view-attendance .asv-row-badge--suggested {
  background: rgba(250, 204, 21, 0.10);
  color: #fde68a;
}

/* 유리 효과 겹침 제거(다크에서 고른 타일이 회색으로 보이던 문제) */
html[data-ui="v2"] #view-attendance .ar-stat::before,
html[data-ui="v2"] #view-attendance .ar-stat::after { display: none; }