/* ── 블로그 인라인 표지 (editorial-paper) ──────────────────────────
   색 토큰은 editorial.css(:root --paper/--ink/--accent 등) 재사용 — 재정의 안 함.
   폰트는 base.html 전역 로드분(Noto Serif KR / Newsreader / Pretendard) 재사용.
   크기는 cqi(표지 폭 비례)로 원본 PNG(1200×1500) 디자인과 동일 비율 유지.
   👉 데스크톱 표지 크기 조절은 아래 --bc-max 한 곳만 바꾸면 돼요. */

.bc-cover {
  --bc-max: 460px;          /* 데스크톱 표지 최대 폭 (책 표지 느낌, 중앙 정렬) */
  --bc-rule: rgba(23, 23, 23, 0.16);

  container-type: inline-size;   /* cqi 단위 기준 = 표지 자체 폭 */
  position: relative;
  width: 100%;
  max-width: var(--bc-max);
  aspect-ratio: 4 / 5;           /* 원본 표지와 동일 4:5 비율 */
  margin: 2.4rem auto 3rem;
  overflow: hidden;
  border-radius: 8px;
  background:
    radial-gradient(120% 80% at 50% 0%, var(--paper) 0%, var(--paper-alt) 70%),
    var(--paper);
  color: var(--ink);
  font-family: 'Noto Serif KR', serif;
  box-shadow:
    0 1px 0 rgba(23, 23, 23, 0.05),
    0 18px 44px -24px rgba(23, 23, 23, 0.4);
}

/* 배경 모티프 */
.bc-motif {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* 미세한 종이 질감 */
.bc-grain {
  position: absolute;
  inset: 0;
  opacity: 0.05;
  pointer-events: none;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* 안전 여백 프레임 */
.bc-frame {
  position: absolute;
  inset: 5.33cqi;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* 상단 메타 라인 */
.bc-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1cqi;
}
.bc-kicker {
  font-family: 'Newsreader', serif;
  font-style: italic;
  letter-spacing: 0.42em;
  font-size: 1.5cqi;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--accent);
}
.bc-issue {
  font-family: 'Newsreader', serif;
  font-style: italic;
  letter-spacing: 0.2em;
  font-size: 1.33cqi;
  color: var(--ink-mute);
  text-transform: uppercase;
  white-space: nowrap;
}
.bc-rule {
  height: 1px;
  background: var(--bc-rule);
  margin-top: 1.83cqi;
}

/* 중앙 타이틀 블록 */
.bc-title-wrap {
  margin-top: auto;
  margin-bottom: auto;
}
.bc-eyebrow {
  font-family: 'Pretendard Variable', 'Pretendard', sans-serif;
  font-size: 1.58cqi;
  letter-spacing: 0.04em;
  color: var(--ink-mute);
  margin-bottom: 2.33cqi;
  font-weight: 500;
}
.bc-title {
  font-weight: 900;
  line-height: 1.04;
  letter-spacing: -0.03em;
  font-size: 9.83cqi;
  color: var(--ink);
  margin: 0;
}
.bc-title .en {
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-weight: 700;
  color: var(--ink);
}
.bc-title .accent {
  color: var(--accent);
}
.bc-subtitle {
  font-family: 'Pretendard Variable', 'Pretendard', sans-serif;
  margin: 3.33cqi 0 0;
  max-width: 63cqi;
  font-size: 2.08cqi;
  line-height: 1.65;
  color: var(--ink-soft);
  font-weight: 400;
}

/* 하단 푸터 */
.bc-foot-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1cqi;
  margin-top: 1.66cqi;
}
.bc-foot-l {
  font-family: 'Newsreader', serif;
  font-style: italic;
  letter-spacing: 0.18em;
  font-size: 1.41cqi;
  color: var(--ink-mute);
  text-transform: uppercase;
}
.bc-foot-r {
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-size: 1.33cqi;
  letter-spacing: 0.04em;
  color: var(--ink-mute);
  white-space: nowrap;
}