@charset "utf-8";

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

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

.newscard {
  width: 267px;
  display: block;
  color: inherit;
  text-decoration: none;
}

.newscard__pic {
  border-radius: var(--radius-m, 18px);
  overflow: hidden;
  background: var(--bg-alt, #f2f7fa);
  aspect-ratio: 37 / 28;
  box-shadow: var(--shadow-s, 0 1px 2px rgba(16,32,56,.06), 0 4px 12px rgba(16,32,56,.05));
}

.newscard__pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s;
}

.newscard:hover .newscard__pic img { transform: scale(1.06); }

.newscard h3 {
  margin: 16px 0 0;
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.55;
  color: var(--text, #1b242e);
  word-break: keep-all;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

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

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

@media (max-width: 760px) {
  .newscard { width: min(280px, 72vw); }
}

@media (prefers-reduced-motion: reduce) {
  .newscard__pic img { transition: none; }
  .newscard:hover .newscard__pic img { transform: none; }
}