/* 버튼: PPT 카드 헤더/블루 배경과 동일 톤 */
.btn-primary {
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-base);
  padding: var(--space-3) var(--space-4);
  min-height: 44px; /* 모바일 터치 영역 */
  font-family: var(--font-body-bold, var(--font-body));
  font-weight: 700;
}
.btn-primary:hover, .btn-primary:active { background: var(--color-primary-dark); }

.btn-secondary {
  background: var(--color-primary-soft);
  color: var(--color-primary);
  border: none;
  border-radius: var(--radius-base);
  padding: var(--space-3) var(--space-4);
  min-height: 44px;
}

/* 카드: PPT 카드(#F4F7FE 배경 + 블루 그림자) 그대로 */
.card {
  background: var(--color-surface);
  border-radius: var(--radius-base);
  box-shadow: var(--shadow-card);
  padding: var(--space-4);
}
.card__header {
  background: var(--color-primary);
  color: #fff;
  border-radius: var(--radius-base) var(--radius-base) 0 0;
  padding: var(--space-2) var(--space-3);
}

/* 표: PPT 테이블 규칙(블루 헤더 + 줄무늬) 그대로, 데스크톱 전용 */
table.data-table { width: 100%; border-collapse: collapse; }
table.data-table th {
  background: var(--color-primary);
  color: #fff;
  padding: var(--space-2) var(--space-3);
}
table.data-table tr:nth-child(even) { background: var(--color-bg); }
table.data-table tr:nth-child(odd) { background: var(--color-surface); }
table.data-table td, table.data-table th { border: 0.75px solid var(--color-border); }

/* 모바일: 표 대신 카드형 리스트로 전환 (5.화면 설계 5.0 원칙과 연결) */
@media (max-width: 767px) {
  table.data-table { display: none; }
  .list-card { display: block; }
}
@media (min-width: 768px) {
  .list-card { display: none; }
}

/* 배지/상태 라벨 */
.badge { display: inline-block; border-radius: var(--radius-sm); padding: 2px var(--space-2); font-size: var(--font-size-caption); }
.badge--done { background: var(--color-success); color: #fff; }
.badge--in-progress { background: var(--color-warning); color: #fff; }
.badge--todo { background: var(--color-border); color: var(--color-text-muted); }

/* 필터 칩 (모바일 아코디언 필터 내부용) */
.filter-chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--color-primary-soft); color: var(--color-primary);
  border-radius: 999px; padding: 4px 10px; font-size: var(--font-size-caption);
}
.filter-chip.is-active { background: var(--color-primary); color: #fff; }