/* ==========================================================
   components/cover.css — 책 표지 (core/render.js 의 cover())
   정보나루 표지 이미지가 있으면 <img> 가 위를 덮고, 없거나 깨지면
   ISBN 으로 정한 색(.cv-0~11)과 무늬(.cvs-0~5)의 '만든 표지'가 보인다.
   크기: .cover-xs · .cover-sm(목록) · .cover-md(카드, 폭 100%) · .cover-lg(책 상세)
   ========================================================== */

.cover {
  --cv-bg: #2F3E9E; --cv-ink: #fff; --cv-ac: #FFD66B;
  position: relative; flex: none; display: block; overflow: hidden;
  aspect-ratio: 2 / 3; border-radius: 2px 6px 6px 2px;
  background: var(--cv-bg); color: var(--cv-ink);
  box-shadow: var(--shadow-book);
  container-type: inline-size;
}
/* 책등 그림자와 제본선 */
.cover::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit;
  background: linear-gradient(90deg, rgba(0, 0, 0, .2) 0, rgba(0, 0, 0, 0) 5%, rgba(255, 255, 255, .16) 6.5%, rgba(255, 255, 255, 0) 10%);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06);
}
.cover img { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; object-fit: cover; background: #fff; }

.cover-xs { width: 32px; }
.cover-sm { width: 42px; }
.cover-md { width: 100%; border-radius: 3px 8px 8px 3px; }
.cover-lg { width: 148px; border-radius: 3px 10px 10px 3px; box-shadow: 0 2px 3px rgba(29, 36, 51, .1), 0 24px 40px -16px rgba(29, 36, 51, .45); }
@media (min-width: 768px) {
  .cover-sm { width: 46px; }
  .cover-lg { width: 196px; }
}

/* ---------- 만든 표지의 글자 (md · lg 만) ---------- */
.cv-title, .cv-author { position: absolute; left: 12%; right: 10%; z-index: 1; }
.cv-title {
  top: 10%; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
  font-size: 11px; font-size: clamp(9px, 11.5cqw, 24px); font-weight: 800; line-height: 1.28; letter-spacing: -.04em;
  word-break: keep-all;
}
.cv-author { bottom: 8%; font-size: 9px; font-size: clamp(8px, 7.2cqw, 14px); font-weight: 600; opacity: .82; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- 색 (배경 · 글자 · 무늬) ---------- */
.cv-0  { --cv-bg: #2F3E9E; --cv-ink: #FFFFFF; --cv-ac: #FFD66B; }
.cv-1  { --cv-bg: #E8604C; --cv-ink: #FFFFFF; --cv-ac: #FFE2A8; }
.cv-2  { --cv-bg: #1F7A6D; --cv-ink: #FFFFFF; --cv-ac: #BDF0E2; }
.cv-3  { --cv-bg: #F2C94C; --cv-ink: #3A2E05; --cv-ac: #FFFFFF; }
.cv-4  { --cv-bg: #7B5EA7; --cv-ink: #FFFFFF; --cv-ac: #F5D0FE; }
.cv-5  { --cv-bg: #2D2F36; --cv-ink: #F5EFE6; --cv-ac: #E8604C; }
.cv-6  { --cv-bg: #F4E9DA; --cv-ink: #2B2B2B; --cv-ac: #C2410C; }
.cv-7  { --cv-bg: #3B82C4; --cv-ink: #FFFFFF; --cv-ac: #FFE7A1; }
.cv-8  { --cv-bg: #C44569; --cv-ink: #FFFFFF; --cv-ac: #FFD1DC; }
.cv-9  { --cv-bg: #5E8C3A; --cv-ink: #FFFFFF; --cv-ac: #F1F7C8; }
.cv-10 { --cv-bg: #0F4C5C; --cv-ink: #F0E6D2; --cv-ac: #E9B949; }
.cv-11 { --cv-bg: #DDE6F0; --cv-ink: #1D2433; --cv-ac: #2F6BEA; }

/* ---------- 무늬 ---------- */
.cv-art { position: absolute; inset: 0; z-index: 0; }
/* 0 해: 오른쪽 아래 큰 원 */
.cvs-0 .cv-art { background: radial-gradient(circle at 78% 74%, var(--cv-ac) 0 24%, transparent 24.5%); }
/* 1 띠: 가운데 가로 두 줄 */
.cvs-1 .cv-art { background: linear-gradient(180deg, transparent 58%, var(--cv-ac) 58% 63%, transparent 63% 67%, var(--cv-ac) 67% 69%, transparent 69%); }
/* 2 아치: 아래쪽 반원 */
.cvs-2 .cv-art { background: radial-gradient(ellipse 58% 34% at 50% 100%, var(--cv-ac) 0 98%, transparent 100%); opacity: .95; }
/* 3 점: 아래 절반 점무늬 */
.cvs-3 .cv-art {
  background-image: radial-gradient(circle, var(--cv-ac) 1.4px, transparent 1.8px);
  background-size: 9px 9px; background-position: 4px 4px;
  -webkit-mask-image: linear-gradient(180deg, transparent 52%, #000 60%); mask-image: linear-gradient(180deg, transparent 52%, #000 60%);
}
/* 4 사선: 왼쪽 아래 삼각 */
.cvs-4 .cv-art { background: linear-gradient(135deg, transparent 58%, var(--cv-ac) 58.5%); opacity: .9; }
/* 5 액자: 안쪽 테두리 + 작은 원 */
.cvs-5 .cv-art {
  inset: 7% 8%; border: 1.5px solid var(--cv-ac); border-radius: 2px; opacity: .85;
  background: radial-gradient(circle at 50% 70%, var(--cv-ac) 0 12%, transparent 12.5%);
}
/* 작은 표지는 무늬만 조금 더 크게 */
.cover-xs.cvs-3 .cv-art, .cover-sm.cvs-3 .cv-art { background-size: 6px 6px; }