@charset "utf-8";

/* ==========================================================================
   전북대학교 발전지원재단 — 메인 '영상으로 만나는 기부이야기' 최신글 스킨
   /skin/latest/story/style.css
   --------------------------------------------------------------------------
   메인 화면은 assets/css/site.css · home.css 를 이미 싣고 있어서 이 파일이
   없어도 카드가 제대로 보입니다. 이 파일은 **홈페이지 CSS 를 싣지 않는
   게시판 페이지**에서 같은 스킨을 써도 모양이 유지되도록 넣어 둔 것입니다.

   그래서 값을 되도록 var(--…) 로 적고, 변수가 없을 때 쓸 기본값을 함께
   적어 두었습니다. 두 CSS 가 겹쳐도 결과는 같습니다.
   ========================================================================== */

.videocard {
  width: calc((var(--maxw, 1180px) - 40px - 28px) / 2);
  max-width: 100%;
  display: block;
  color: inherit;
  text-decoration: none;
}

.videocard__pic {
  position: relative;
  border-radius: var(--radius-l, 28px);
  overflow: hidden;
  aspect-ratio: 720 / 404;
  background: #0b1b2e;
  box-shadow: var(--shadow-m, 0 10px 30px rgba(16,32,56,.10));
}

.videocard__pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .92;
  transition: transform .45s, opacity .3s;
}

.videocard:hover .videocard__pic img { transform: scale(1.05); opacity: 1; }

.videocard__play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, .92);
  color: var(--brand-strong, #005681);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .34);
  transition: transform .25s, background .25s;
}

.videocard:hover .videocard__play {
  transform: translate(-50%, -50%) scale(1.1);
  background: #fff;
}

.videocard h3 {
  margin: 18px 0 0;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--text, #1b242e);
  word-break: keep-all;
}

.videocard:hover h3 { color: var(--brand, #0074b0); }

.videocard p {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--text-dim, #66737e);
}

/* 등록된 영상이 없을 때 */
.videoempty {
  margin: 0;
  padding: 40px 20px;
  width: 100%;
  text-align: center;
  color: var(--text-dim, #66737e);
  font-size: 14px;
}

@media (max-width: 980px) {
  .videocard { width: min(560px, 80vw); }
}

@media (max-width: 760px) {
  .videocard { width: min(560px, 84vw); }
}

@media (prefers-reduced-motion: reduce) {
  .videocard__pic img,
  .videocard__play { transition: none; }
  .videocard:hover .videocard__pic img { transform: none; }
  .videocard:hover .videocard__play { transform: translate(-50%, -50%); }
}