/* ============================================================
   exhibit.css — 전시 페이지 (12개 컬러 카드 그리드)
   ============================================================ */

.exh-filter {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  margin: var(--space-6) 0 var(--space-10);
}
.exh-filter .chip {
  height: 40px; padding: 0 var(--space-5);
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  border-radius: var(--r-pill);
  font-size: var(--fs-13); font-weight: var(--fw-semibold);
  color: var(--color-text-soft);
  transition: all var(--dur-fast) var(--ease);
}
.exh-filter .chip:hover { border-color: var(--color-primary); color: var(--color-primary); }
.exh-filter .chip.active {
  background: var(--color-primary); border-color: var(--color-primary); color: #fff;
}

/* 카드 그리드 — 4열 / 3열 / 2열 / 1열 */
.exh-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
}
@media (max-width: 1200px) { .exh-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px)  { .exh-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .exh-grid { grid-template-columns: 1fr; } }

.exh-card {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 4 / 3.4;
  background: var(--color-bg-mid);
  cursor: pointer;
  transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}
.exh-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.exh-card .thumb,
.exh-card .thumb img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--dur-slow) var(--ease);
}
.exh-card:hover .thumb img { transform: scale(1.08); }
.exh-card::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.78) 100%);
}
.exh-card .meta {
  position: absolute; left: var(--space-4); right: var(--space-4); bottom: var(--space-4);
  z-index: 1;
  color: #fff;
}
.exh-card .cat {
  display: inline-block;
  font-size: var(--fs-12); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: var(--letter-wide);
  color: var(--color-primary);
  margin-bottom: var(--space-1);
}
.exh-card .ttl {
  display: block;
  font-size: var(--fs-15); font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
}
.exh-card .yr {
  display: block;
  font-size: var(--fs-12);
  color: rgba(255,255,255,0.72);
  margin-top: 2px;
}

/* 가짜 컬러 카드 — 시안의 컬러풀한 배경 카드 표현 */
.exh-card.c1 { background: linear-gradient(135deg,#7B61FF 0%,#5B3FE0 100%); }
.exh-card.c2 { background: linear-gradient(135deg,#2DB1E5 0%,#1B7FB7 100%); }
.exh-card.c3 { background: linear-gradient(135deg,#FFB230 0%,#FF6B00 100%); }
.exh-card.c4 { background: linear-gradient(135deg,#FF5C5C 0%,#C72525 100%); }
.exh-card.c5 { background: linear-gradient(135deg,#36CB8F 0%,#1A7A55 100%); }
.exh-card.c6 { background: linear-gradient(135deg,#1A1A1A 0%,#3A3A3A 100%); }
.exh-card.c7 { background: linear-gradient(135deg,#F8B5FF 0%,#A348C7 100%); }
.exh-card.c8 { background: linear-gradient(135deg,#FFD56B 0%,#E58A00 100%); }
.exh-card.c9 { background: linear-gradient(135deg,#5E9BFF 0%,#2C5BC4 100%); }
.exh-card.c10 { background: linear-gradient(135deg,#FF8A4C 0%,#D44E1A 100%); }
.exh-card.c11 { background: linear-gradient(135deg,#4EE1C1 0%,#198C73 100%); }
.exh-card.c12 { background: linear-gradient(135deg,#B7B7B7 0%,#666 100%); }

/* 페이지네이션 */
.pagination {
  display: flex; justify-content: center; align-items: center; gap: var(--space-2);
  margin-top: var(--space-12);
}
.pagination button {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--color-bg-soft);
  color: var(--color-text-soft);
  font-size: var(--fs-13); font-weight: var(--fw-semibold);
}
.pagination button:hover { color: var(--color-primary); }
.pagination button.active { background: var(--color-primary); color: #fff; }
.pagination .arrow { width: auto; padding: 0 var(--space-3); background: transparent; }
.more_btn.border { border-top:none;}