/**
 * [전시 상태 칩]
 * - 역할: 전시 중·예정·종료 색과 칩 크기·글자 크기를 한곳에서 관리
 * - 작성/수정일: 2026-10-08
 *
 * 다크모드는 html.dark 의 토큰 교체로 따라간다. HEX를 두지 않는다.
 */

/* [전시 상태 칩 규격] 역할: 목록·상세·마이페이지 칩의 높이와 글자 크기를 같게 — 작성/수정일: 2026-10-08 */
.an-ex-status,
.an-ar-profile__ex-status,
.an-mp-exh__period,
.an-mp-ads-pick-item__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 22px;
  margin: 0;
  padding: 0 8px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-caption);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
}

/* [전시 카테고리·상태] 역할: 유형과 상태 칩을 한 줄 그리드에서 세로 중앙 정렬 — 작성/수정일: 2026-10-08 */
.an-ex-card__kicker,
.an-mp-exh__kicker {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  align-items: center;
  justify-content: start;
  column-gap: 8px;
}

.an-ex-card__kicker .an-ex-card__type,
.an-mp-exh__kicker .an-mp-exh__type {
  margin: 0;
  font-size: var(--fs-caption);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: none;
}

.an-ex-status--ongoing,
.an-ar-profile__ex-status.is-ongoing,
.an-mp-exh__period--ongoing,
.an-mp-ads-pick-item__badge.is-ongoing {
  background: var(--primary-color);
  color: var(--white-color);
  border: 1px solid transparent;
}

.an-ex-status--upcoming,
.an-ar-profile__ex-status.is-upcoming,
.an-mp-exh__period--upcoming,
.an-mp-ads-pick-item__badge.is-upcoming {
  background: transparent;
  color: var(--title-color);
  border: 1px solid var(--title-color);
}

.an-ex-status--ended,
.an-ar-profile__ex-status.is-ended,
.an-mp-exh__period--ended,
.an-mp-ads-pick-item__badge.is-ended {
  background: var(--chip-color);
  color: var(--muted-color);
  border: 1px solid transparent;
}