@charset "utf-8";
/* ========================================
   마을영상관 스타일
   ======================================== */

/* 건수 오른쪽 새로고침 버튼 */
.video-refresh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 36px;
  padding: 0 12px;
  margin-left: 8px;
  background: none;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  color: #414141;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.video-refresh-btn:hover {
  background: #f4f5f9;
  border-color: #6369DD;
}

.video-refresh-btn img {
  width: 18px;
  height: 18px;
}

.video-refresh-btn-label {
  font-weight: 500;
}
/* 카테고리 탭 */
.video-category-tabs {
  margin-bottom: 24px;
}

/* 비디오 팝업 */
.video-popup {
	max-width: 960px;
	aspect-ratio: 16 / 9;
	overflow-y: hidden;
}

/* 비디오 그리드 */
.video-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-bottom: 32px;
}

/* 비디오 카드 */
.video-card {
  display: block;
  text-decoration: none;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #eee;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.video-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* 비디오 썸네일 */
.video-thumbnail {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #f0f0f0;
}

.video-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.video-preview {
    position: absolute;
    inset: 0;
    z-index: 10;
    pointer-events: none;
}

.video-card:hover .video-thumbnail img {
  transform: scale(1.05);
}

/* 재생 버튼 */
.video-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, transform 0.2s ease;
}

.video-play-btn img {
  width: 24px;
  height: 24px;
  margin-left: 4px;
}

.video-card:hover .video-play-btn {
  background: rgba(0, 0, 0, 0.8);
  transform: translate(-50%, -50%) scale(1.1);
}

/* 비디오 정보 */
.video-info {
  padding: 16px;
}

.video-title {
  font-size: 0.9375rem;
  font-weight: 500;
  color: #333;
  line-height: 1.4;
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.video-date {
  font-size: 0.8125rem;
  color: #999;
}

/* 8개 초과 시 숨김 (더보기로 펼침) - 우선순위 높임 */
.video-grid .video-card.video-card-hidden {
  display: none !important;
}

/* 더보기 버튼 (가운데 정렬) */
.video-load-more-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
}

.video-load-more-btn {
  min-width: 200px;
  padding: 0.75rem 1.5rem;
  font-weight: 500;
}

/* ========================================
   반응형 스타일
   ======================================== */

/* 1200px 이하 - 3열 */
@media (max-width: 1200px) {
  .video-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* 1024px 이하 - 2열 */
@media (max-width: 1024px) {
  .video-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}

/* 768px 이하 */
@media (max-width: 768px) {
  .video-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .video-play-btn {
    width: 48px;
    height: 48px;
  }

  .video-play-btn img {
    width: 20px;
    height: 20px;
  }

  .video-info {
    padding: 12px;
  }

  .video-title {
    font-size: 0.875rem;
  }

  .video-date {
    font-size: 0.75rem;
  }
}

/* 480px 이하 - 1열 */
@media (max-width: 480px) {
  .video-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .video-play-btn {
    width: 56px;
    height: 56px;
  }

  .video-play-btn img {
    width: 24px;
    height: 24px;
  }
}