/* 페이징 버튼 스타일 */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 50px;
  flex-wrap: wrap;
}

.pagination-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 12px 20px;
  border: 2px solid var(--violet-blue-crayola);
  background-color: var(--white);
  color: var(--violet-blue-crayola);
  cursor: pointer;
  border-radius: var(--radius-pill);
  font-size: var(--fs-7);
  font-weight: var(--fw-700);
  transition: all 0.3s ease;
}

.pagination-btn:hover:not(:disabled) {
  background-color: var(--violet-blue-crayola);
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
}

.pagination-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  border-color: var(--cadet-blue-crayola);
  color: var(--cadet-blue-crayola);
}

.page-numbers {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

.page-numbers button {
  min-width: 45px;
  height: 45px;
  border: 2px solid var(--lavender-web);
  background-color: var(--white);
  color: var(--charcoal);
  cursor: pointer;
  border-radius: var(--radius-circle);
  font-size: var(--fs-7);
  font-weight: var(--fw-700);
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.page-numbers button.active {
  background-color: var(--violet-blue-crayola);
  color: var(--white);
  border-color: var(--violet-blue-crayola);
  box-shadow: var(--shadow-2);
}

.page-info {
  text-align: center;
  margin-top: 20px;
  color: var(--cadet-blue-crayola);
  font-size: var(--fs-7);
  font-weight: 500;
}

/* 갤러리 애니메이션 */
.grid-list li {
  animation: fadeInUp 0.5s ease forwards;
  opacity: 0;
}

.grid-list li:nth-child(1) { animation-delay: 0.1s; }
.grid-list li:nth-child(2) { animation-delay: 0.2s; }
.grid-list li:nth-child(3) { animation-delay: 0.3s; }
.grid-list li:nth-child(4) { animation-delay: 0.4s; }
.grid-list li:nth-child(5) { animation-delay: 0.5s; }
.grid-list li:nth-child(6) { animation-delay: 0.6s; }

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}