/* frontend/design-components.css
   2026-08-31 지시서(B조): 공통 부품 한 벌. design-tokens.css 의 변수만
   사용한다(값을 새로 만들지 않는다). 이 파일도 추가 전용이다 -- 기존
   클래스와 이름이 겹치지 않도록 전부 h24- 접두어를 쓴다.

   적용 범위: role-cockpit.css / welfare-results.css 시범 적용 3화면.
   그 외 화면은 이번 라운드에 건드리지 않는다. */

/* ---------------------------------------------------------------------
   카드 -- 제목 · 부제 · 값 · 동작 버튼이 시각적으로 분리되게.
   감사에서 "운영현황실시간 KPI·전체 진행0열기 →" 처럼 전부 붙어 보이던
   문제를 막는다: 각 구획을 grid-area로 분리하고 줄바꿈을 강제한다.
--------------------------------------------------------------------- */
.h24-card {
  display: grid;
  gap: var(--h24-gap-8);
  padding: var(--h24-gap-16);
  border: 1px solid var(--h24-border);
  border-radius: var(--h24-radius-md);
  background: var(--h24-surface);
  box-shadow: var(--h24-shadow-sm);
  color: var(--h24-ink-strong);
}

.h24-card-eyebrow {
  display: block;
  margin: 0;
  color: var(--h24-ink-muted);
  font-size: var(--h24-t-small, 14px);
  font-weight: 800;
}

.h24-card-title {
  display: block;
  margin: 0;
  color: var(--h24-ink-strong);
  font-size: var(--h24-t-sub, 18px);
  font-weight: 800;
  line-height: 1.3;
}

.h24-card-value {
  display: block;
  margin: var(--h24-gap-4) 0 0;
  color: var(--h24-accent-green);
  font-size: var(--h24-t-display, 28px);
  font-weight: 900;
  line-height: 1.1;
}

.h24-card-action {
  display: block;
  margin-top: var(--h24-gap-8);
  padding-top: var(--h24-gap-8);
  border-top: 1px solid var(--h24-border);
  color: var(--h24-accent-green);
  font-size: var(--h24-t-small, 14px);
  font-weight: 800;
  text-align: right;
}

/* ---------------------------------------------------------------------
   버튼 -- 주요 / 보조 / 위험 / 비활성.
   DESIGN_RULES 3장: 보조 버튼은 테두리만, 색을 채우지 않는다.
--------------------------------------------------------------------- */
.h24-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--h24-gap-8);
  min-height: var(--h24-btn-h, 48px);
  padding: 0 var(--h24-gap-16);
  border: 0;
  border-radius: var(--h24-radius-sm);
  font-size: var(--h24-t-button, 18px);
  font-weight: 800;
  cursor: pointer;
}

.h24-btn-primary {
  background: var(--h24-accent-green-action);
  color: var(--h24-on-accent, #ffffff);
}

.h24-btn-primary:hover {
  background: var(--h24-accent-green);
}

.h24-btn-secondary {
  border: 2px solid var(--h24-accent-green-action);
  background: transparent;
  color: var(--h24-accent-green-action);
}

.h24-btn-danger {
  background: var(--h24-danger);
  color: var(--h24-on-accent, #ffffff);
}

.h24-btn:disabled,
.h24-btn[aria-disabled="true"] {
  border: 1px solid var(--h24-border);
  background: var(--h24-surface-muted);
  color: var(--h24-ink-muted);
  cursor: not-allowed;
}

/* ---------------------------------------------------------------------
   배지 -- 상태 표시(승인 완료 · 검수 중 · 막힘 등).
   색만으로 뜻을 전하지 않는다(헌법 제6조 참고) -- 항상 글자와 함께 쓴다.
--------------------------------------------------------------------- */
.h24-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--h24-gap-4);
  padding: 4px var(--h24-gap-12);
  border-radius: var(--h24-radius-pill);
  font-size: var(--h24-t-small, 14px);
  font-weight: 800;
  line-height: 1.6;
}

.h24-badge-success { background: var(--h24-success-bg); color: var(--h24-success); }
.h24-badge-warning { background: var(--h24-warning-bg); color: var(--h24-warning); }
.h24-badge-danger { background: var(--h24-danger-bg); color: var(--h24-danger); }
.h24-badge-neutral { background: var(--h24-neutral-bg); color: var(--h24-neutral); }

/* 증거 배지 -- "서류로 확인됨" / "진술 기반".
   상태 배지와 의미가 다르므로(사실의 출처 vs 진행 상태) 모양을 다르게
   둔다: 테두리만 채우고 배경은 항상 흰색. */
.h24-evidence-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--h24-gap-4);
  padding: 3px var(--h24-gap-12);
  border: 2px solid var(--h24-border);
  border-radius: var(--h24-radius-pill);
  background: var(--h24-surface);
  color: var(--h24-ink);
  font-size: var(--h24-t-small, 14px);
  font-weight: 700;
}

.h24-evidence-badge[data-evidence="document"] {
  border-color: var(--h24-success);
  color: var(--h24-success);
}

.h24-evidence-badge[data-evidence="statement"] {
  border-color: var(--h24-warning);
  color: var(--h24-warning);
}

/* ---------------------------------------------------------------------
   빈 상태 -- "표시할 것이 없습니다" 공통 모양.
--------------------------------------------------------------------- */
.h24-empty {
  display: grid;
  place-items: center;
  gap: var(--h24-gap-4);
  padding: var(--h24-gap-32) var(--h24-gap-16);
  border: 1px dashed var(--h24-border);
  border-radius: var(--h24-radius-md);
  background: var(--h24-surface-muted);
  color: var(--h24-ink-muted);
  font-size: var(--h24-t-body, 18px);
  text-align: center;
}

/* ---------------------------------------------------------------------
   숫자 표시 -- 항목명 · 숫자 · 단위 · 설명이 분리되게.
--------------------------------------------------------------------- */
.h24-stat {
  display: grid;
  gap: var(--h24-gap-4);
  text-align: left;
}

.h24-stat-label {
  color: var(--h24-ink-muted);
  font-size: var(--h24-t-small, 14px);
  font-weight: 800;
}

.h24-stat-value {
  display: flex;
  align-items: baseline;
  gap: 4px;
  color: var(--h24-ink-strong);
  font-size: var(--h24-t-display, 28px);
  font-weight: 900;
  line-height: 1.1;
}

.h24-stat-unit {
  color: var(--h24-ink-muted);
  font-size: var(--h24-t-sub, 18px);
  font-weight: 700;
}

.h24-stat-desc {
  margin: 0;
  color: var(--h24-ink-muted);
  font-size: var(--h24-t-small, 14px);
  line-height: 1.5;
}