/* ============================================================
   artcards.css — 생성형 SVG "아트카드 헤더" 스타일 (담당 소유)
   js/artcards.js(window.AllCurriArtCards.renderHeader)가 만드는 .artcard-header
   전용 스타일이다. 색상은 대부분 인라인 SVG(그라디언트) + 인스턴스별 CSS 변수
   (--ac-fg/--ac-pill-bg/--ac-pill-border, artcards.js가 root에 주입)로 오고,
   이 파일은 레이아웃 · 타이포 · 애니메이션만 정의한다.

   tokens.css/theme.css가 로드되어 있으면 그 변수(--radius/--sp-*)를 쓰고,
   없어도(단독 로드) 합리적인 폴백 값으로 동작한다 — "다른 파일을 건드리지 않는다"는
   소유권 경계를 지키기 위해 var(...,fallback) 형태를 일관되게 쓴다.

   성능: 트랜지션/애니메이션은 transform·opacity만 사용(레이아웃/페인트 트리거 없음).
   탐색 그리드에 카드가 ~80장 동시에 있어도 카드마다 자바스크립트 루프가 없고,
   전부 이 파일의 CSS 애니메이션(브라우저 컴포지터)이 담당한다.
   prefers-reduced-motion: reduce 에서는 모든 애니메이션을 멈춘다.
   ============================================================ */

.artcard-header {
  position: relative;
  display: block;
  overflow: hidden;
  isolation: isolate;
  height: 112px;
  min-height: 104px;
  max-height: 120px;
  border-radius: var(--radius, 12px) var(--radius, 12px) 0 0;
  /* 부모(.cluster-card 등)가 padding을 갖고 있어도 헤더가 카드 폭 전체로 번지도록
     음수 마진으로 빼낸다. 부모 padding이 --sp-5(24px)가 아니어도(예: 폴백 20px)
     시각적으로는 카드 테두리에 딱 붙는 것이 중요하므로 살짝 어긋나도 무해하다. */
  margin: calc(-1 * var(--sp-5, 20px)) calc(-1 * var(--sp-5, 20px)) var(--sp-4, 16px);
  width: calc(100% + var(--sp-5, 20px) * 2);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .07),
    inset 0 -22px 28px -22px rgba(0, 0, 0, .38);
  color: var(--ac-fg, #fff);
}

/* 부모가 padding 없이 헤더를 쓰는 경우(카드가 아니라 독립 배치 등)를 위한 탈출구.
   .artcard-header가 flex/grid item으로 patch 없이 쓰일 때도 최소한의 폭 보장. */
.artcard-header:only-child { margin: 0; width: 100%; border-radius: var(--radius, 12px); }

.artcard-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* 아주 은은한 대각선 쉬머 스윕 — transform만 애니메이션(합성 전용, 저비용).
   80장이 동시에 있어도 페인트/레이아웃을 유발하지 않는다. */
.artcard-header::after {
  content: '';
  position: absolute;
  inset: -20% -60%;
  background: linear-gradient(100deg, transparent 42%, rgba(255, 255, 255, .14) 50%, transparent 58%);
  transform: translateX(-40%);
  mix-blend-mode: screen;
  pointer-events: none;
  animation: artcard-shimmer 7.5s ease-in-out infinite;
  will-change: transform;
}

.artcard-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 10px 12px;
  pointer-events: none; /* 부모(button 등)의 클릭/키보드 인터랙션을 가리지 않는다 */
  font-family: inherit;
}

.artcard-row {
  display: flex;
  align-items: center;
  justify-content: flex-start; /* 왼쪽에 몰아 오른쪽 모티프 자리를 비운다 */
  flex-wrap: wrap;
  gap: 6px;
}

.artcard-kicker,
.artcard-chip-level,
.artcard-metric {
  display: inline-flex;
  align-items: center;
  line-height: 1;
  border-radius: var(--radius-pill, 999px);
  background: var(--ac-pill-bg, rgba(10, 12, 20, .34));
  border: 1px solid var(--ac-pill-border, rgba(255, 255, 255, .28));
  color: inherit;
  white-space: nowrap;
}

.artcard-kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .01em;
  padding: 4px 9px;
  max-width: 78%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.artcard-chip-level {
  font-size: 10.5px;
  font-weight: 700;
  padding: 4px 8px;
}

.artcard-metric {
  font-size: 10.5px;
  font-weight: 600;
  padding: 3px 8px;
}

/* 별 입자 반짝임 — opacity만 애니메이션(합성 전용). */
.artcard-star {
  transform-box: fill-box;
  transform-origin: center;
  animation-name: artcard-twinkle;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

@keyframes artcard-twinkle {
  0%, 100% { opacity: .2; }
  50% { opacity: .95; }
}

@keyframes artcard-shimmer {
  0%, 100% { transform: translateX(-45%); }
  50% { transform: translateX(45%); }
}

@media (prefers-reduced-motion: reduce) {
  .artcard-star { animation: none; opacity: .55; }
  .artcard-header::after { animation: none; opacity: 0; }
}