@charset "utf-8";

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

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

   사진은 첨부파일 크기(400 × 290)의 비율을 그대로 지킵니다.
   ========================================================================== */

.alimicard {
  /* 카드 폭은 첨부파일 크기(400px) 그대로 — 메인의 롤링 배너 한 칸 */
  width: 400px;
  max-width: 100%;
  display: block;
  border-radius: var(--radius-m, 20px);
  overflow: hidden;
  background: var(--surface, #fff);
  box-shadow: var(--shadow-s, 0 6px 18px rgba(16, 32, 56, .07));
}

.alimicard img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 400 / 290;
  object-fit: cover;
  transition: transform .4s;
}

/* 롤링 배너는 좌우를 잘라 내므로 카드를 들어 올리지 않고 사진만 확대합니다 */
.alimicard:hover img,
.alimicard:focus-visible img { transform: scale(1.05); }

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

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

@media (prefers-reduced-motion: reduce) {
  .alimicard img { transition: none; }
  .alimicard:hover img,
  .alimicard:focus-visible img { transform: none; }
}