/* ============================================================
   card-cover.css — 홈 카드 표지 (2026-08-15 · LG-총괄)
   왜: 홈 카드 5개가 전부 글자만이었다. 표지는 이미 갖고 있었다.
   ============================================================ */
.book-card{ overflow:hidden; }

.book-card-cover{
  position:relative;
  aspect-ratio: 4 / 3;          /* 이미지가 늦게 떠도 화면이 덜컹거리지 않게 자리를 먼저 잡는다 */
  background:#eef1f5;
  overflow:hidden;
}
.book-card-cover img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:center 22%;   /* 표지 윗부분(제목)이 잘리지 않게 살짝 위를 본다 */
  display:block;
  transform:scale(1.0);
  transition:transform .45s cubic-bezier(.22,.61,.36,1);
}
.book-card:hover .book-card-cover img{ transform:scale(1.045); }

/* 이미지와 글 사이 경계를 선이 아니라 그늘로 — 선을 그으면 다시 네모가 된다 */
.book-card-cover::after{
  content:""; position:absolute; inset:auto 0 0 0; height:38%;
  background:linear-gradient(to top, rgba(15,23,42,.16), rgba(15,23,42,0));
  pointer-events:none;
}

.book-card-body{ padding:16px 18px 18px; }

/* 대상 표기는 작고 조용하게. 제목이 먼저 읽혀야 한다 */
.book-card-audience{
  font-size:12.5px; letter-spacing:-.1px; opacity:.72; margin-top:2px;
}
.book-card-title{
  letter-spacing:-.35px;        /* 한글 제목은 자간을 살짝 좁히면 단정해진다 */
  line-height:1.35;
}

@media (prefers-reduced-motion: reduce){
  .book-card-cover img{ transition:none; }
  .book-card:hover .book-card-cover img{ transform:none; }
}