/* 자료실 전용 스타일 — tokens.css 변수 + app.css 공통 컴포넌트만 사용. 고유 배치만 둔다. */

/* 인트로 + 필터 */
.resources-intro .section-head { margin-bottom: var(--space-4); }
.resources-toolbar .field { max-width: 420px; margin-bottom: 0; }

/* 상태 표시(로딩/빈/오류) — 패널로 정돈, 가운데 정렬 */
.resources-status { text-align: center; }
.resources-status p { margin: 0; color: var(--c-text-muted); font-size: var(--fs-lg); }
.resources-status[hidden] { display: none; }
.resources-status--error p { color: var(--c-danger); }

/* 자료 목록 — app.css의 .grid.grid-auto가 그리드를 담당, 여기선 리스트 리셋만 */
.resource-list { list-style: none; margin: 0; padding: 0; }

/* 자료 카드 — .card.card--pad-lg.card--hover 위에 세로 스택 배치 */
.resource-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.resource-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}
.resource-badge { max-width: 60%; }

.resource-main { flex: 1 1 auto; }
.resource-title { font-size: var(--fs-lg); margin: 0 0 var(--space-1); }
.resource-desc { color: var(--c-text-muted); margin: 0; }

/* 메타(파일 크기) */
.resource-meta {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
  margin: 0;
  padding: 0;
  font-size: var(--fs-sm);
  color: var(--c-text-subtle);
}

/* 다운로드 액션 — 카드 하단 고정, 구분선으로 위계 */
.resource-action {
  margin-top: auto;
  padding-top: var(--space-2);
  border-top: 1px solid var(--c-border);
}
.resource-download { width: 100%; }
.resource-download svg { width: 20px; height: 20px; }