/* =============================================================
   sections/book-page — 책 소개 페이지 전용 프리셋
   레퍼런스: Stripe Press · A Book Apart · Basic Books · Penguin Press
   스코프: .bp-*
   의존: tokens.css, base.css, components.css
   ============================================================= */

/* ── Section helpers (스코프드) ─────────────────────────── */
.bp-section { padding-block: var(--space-20); }
.bp-section--tight { padding-block: var(--space-16); }
.bp-section--muted { background: var(--color-surface); }
.bp-section--contrast { background: var(--color-contrast-bg); color: var(--color-contrast-text); }
.bp-wrap {
  max-width: var(--wrap-wide);
  margin-inline: auto;
  padding-inline: var(--space-4);
}
.bp-eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--type-xs);
  color: var(--color-muted);
  letter-spacing: 0.04em;
  margin-bottom: var(--space-4);
}
.bp-eyebrow::before {
  content: ""; width: 24px; height: 1px; background: var(--color-accent);
}
.bp-section--contrast .bp-eyebrow { color: var(--color-contrast-muted); }

/* =============================================================
   1. bp-hero — 비대칭 북 Hero (좌 콘텐츠 / 우 3D 표지 목업)
   투명 목업 PNG를 "스튜디오 스폿" 위에 올린 느낌.
   ============================================================= */
.bp-hero {
  position: relative;
  padding-block: var(--space-16) var(--space-20);
  background:
    radial-gradient(ellipse 60% 50% at 75% 45%, rgba(184, 92, 46, 0.08) 0%, transparent 70%),
    linear-gradient(180deg, var(--color-surface) 0%, var(--color-bg) 100%);
  overflow: hidden;
}
.bp-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(14, 17, 22, 0.06) 1px, transparent 1px);
  background-size: 20px 20px;
  opacity: 0.5;
  pointer-events: none;
}
.bp-hero__wrap {
  max-width: var(--wrap-wide);
  margin-inline: auto;
  padding-inline: var(--space-4);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
  align-items: center;
}
@media (min-width: 900px) {
  .bp-hero__wrap {
    grid-template-columns: 1.1fr 1fr;
    gap: var(--space-16);
  }
}

.bp-hero__content { order: 2; }
.bp-hero__cover { order: 1; }
@media (min-width: 900px) {
  .bp-hero__content { order: 1; }
  .bp-hero__cover { order: 2; }
}

.bp-hero__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--type-xs);
  color: var(--color-accent);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--space-4);
}
.bp-hero__title {
  font-size: clamp(32px, 5vw, 52px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--color-text);
  margin: 0 0 var(--space-4);
  word-break: keep-all;
  text-wrap: balance;
}
.bp-hero__subtitle {
  font-size: var(--type-lg);
  font-weight: 300;
  line-height: 1.4;
  color: var(--color-muted);
  max-width: 40ch;
  margin: 0 0 var(--space-8);
  word-break: keep-all;
}
.bp-hero__subtitle strong {
  font-weight: 600;
  color: var(--color-text);
}
.bp-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-6);
  align-items: center;
  margin-bottom: var(--space-8);
  font-size: var(--type-sm);
  color: var(--color-muted);
}
.bp-hero__meta strong { color: var(--color-text); font-weight: 600; }
.bp-hero__meta li { display: flex; gap: var(--space-2); }
.bp-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* 3D cover mockup — transparent PNG on studio spotlight stage */
.bp-hero__cover-frame {
  position: relative;
  aspect-ratio: 5 / 4;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  isolation: isolate;
}
.bp-hero__cover-frame::before {
  /* warm glow behind cover */
  content: "";
  position: absolute;
  inset: 10% 15%;
  background: radial-gradient(ellipse at center,
    rgba(184, 92, 46, 0.22) 0%,
    rgba(184, 92, 46, 0.08) 40%,
    transparent 70%);
  filter: blur(30px);
  z-index: -1;
}
.bp-hero__cover-frame::after {
  /* floor shadow */
  content: "";
  position: absolute;
  bottom: 6%;
  left: 15%;
  right: 15%;
  height: 24px;
  background: radial-gradient(ellipse at center, rgba(14, 17, 22, 0.22) 0%, transparent 70%);
  filter: blur(12px);
  z-index: -1;
}
.bp-hero__cover-img {
  width: 100%;
  max-width: 520px;
  height: auto;
  filter: drop-shadow(0 30px 60px rgba(14, 17, 22, 0.22))
          drop-shadow(0 10px 20px rgba(14, 17, 22, 0.12));
  transition: transform var(--motion-slow) var(--ease-out);
  position: relative;
  z-index: 1;
}
.bp-hero__cover-frame:hover .bp-hero__cover-img {
  transform: translateY(-6px);
}

/* 시리즈 3권 Hero — 우측 커버에 더 큰 비중 */
@media (min-width: 900px) {
  .bp-hero--series .bp-hero__wrap {
    grid-template-columns: 1fr 1.25fr;
  }
}

/* 시리즈 3권 표지 팬 배치 (book-toriz 전용) */
.bp-hero__covers-series {
  position: relative;
  width: 100%;
  max-width: 720px;
  aspect-ratio: 5 / 4;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
}
.bp-hero__covers-series::before {
  content: "";
  position: absolute;
  inset: 15% 10%;
  background: radial-gradient(ellipse at center,
    rgba(184, 92, 46, 0.20) 0%,
    rgba(184, 92, 46, 0.08) 45%,
    transparent 75%);
  filter: blur(30px);
  z-index: -1;
}
.bp-hero__covers-series img {
  position: absolute;
  max-width: 70%;
  height: auto;
  transition: transform var(--motion-slow) var(--ease-out);
  filter: drop-shadow(0 20px 40px rgba(14, 17, 22, 0.20));
}
.bp-hero__covers-series img:nth-child(1) {
  transform: translateX(-32%) translateY(4%) rotate(-8deg);
  z-index: 1;
}
.bp-hero__covers-series img:nth-child(2) {
  transform: translateY(-3%);
  z-index: 3;
}
.bp-hero__covers-series img:nth-child(3) {
  transform: translateX(32%) translateY(4%) rotate(8deg);
  z-index: 2;
}
.bp-hero__covers-series:hover img:nth-child(1) {
  transform: translateX(-38%) translateY(2%) rotate(-10deg);
}
.bp-hero__covers-series:hover img:nth-child(2) {
  transform: translateY(-6%);
}
.bp-hero__covers-series:hover img:nth-child(3) {
  transform: translateX(38%) translateY(2%) rotate(10deg);
}

/* =============================================================
   2. bp-praise-belt — 추천평 띠 마퀴 (책띠지 은유)
   ============================================================= */
.bp-praise-belt {
  background: var(--color-contrast-bg);
  color: var(--color-contrast-text);
  overflow: hidden;
  padding-block: var(--space-6);
  border-block: 1px solid var(--color-contrast-border);
}
.bp-praise-belt__track {
  display: flex;
  gap: var(--space-12);
  animation: bp-marquee 40s linear infinite;
  width: max-content;
}
.bp-praise-belt__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--type-sm);
  color: var(--color-contrast-text);
  white-space: nowrap;
}
.bp-praise-belt__item::before {
  content: "❝";
  color: var(--color-accent);
  font-size: 20px;
  line-height: 1;
  font-family: var(--font-mono);
}
.bp-praise-belt__who {
  color: var(--color-contrast-muted);
  font-family: var(--font-mono);
  font-size: var(--type-xs);
  letter-spacing: 0.04em;
}
@keyframes bp-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .bp-praise-belt__track { animation: none; }
}

/* =============================================================
   3. bp-pullquote — 대형 인용구
   ============================================================= */
.bp-pullquote {
  padding-block: var(--space-20);
  text-align: center;
}
.bp-pullquote__text {
  max-width: 22ch;
  margin: 0 auto;
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 300;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--color-text);
  word-break: keep-all;
  text-wrap: balance;
}
.bp-pullquote__text::before,
.bp-pullquote__text::after {
  display: block;
  color: var(--color-accent);
  font-family: var(--font-mono);
  font-size: 40px;
  line-height: 1;
  font-weight: 400;
}
.bp-pullquote__text::before { content: "“"; margin-bottom: var(--space-4); }
.bp-pullquote__text::after  { content: "”"; margin-top: var(--space-4); }

/* =============================================================
   4. bp-colophon — 판권지 스타일 서지정보 카드
   ============================================================= */
.bp-colophon {
  max-width: 920px;
  margin-inline: auto;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  background: var(--color-bg);
  padding: var(--space-8);
}
.bp-colophon__header {
  text-align: center;
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-6);
}
.bp-colophon__label {
  font-family: var(--font-mono);
  font-size: var(--type-xs);
  color: var(--color-muted);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 var(--space-2);
}
.bp-colophon__title {
  font-size: var(--type-lg);
  font-weight: 700;
  color: var(--color-text);
  margin: 0;
  letter-spacing: -0.005em;
}
.bp-colophon__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
@media (min-width: 640px) {
  .bp-colophon__grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 900px) {
  .bp-colophon__grid { grid-template-columns: repeat(3, 1fr); }
}
.bp-colophon__row {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4) var(--space-6);
  border-top: 1px dashed var(--color-border);
}
.bp-colophon__row:nth-child(-n+3) { border-top: none; }
@media (max-width: 899px) {
  .bp-colophon__row:nth-child(-n+3) { border-top: 1px dashed var(--color-border); }
  .bp-colophon__row:first-child { border-top: none; }
}
@media (max-width: 639px) {
  .bp-colophon__row { border-top: 1px dashed var(--color-border) !important; }
  .bp-colophon__row:first-child { border-top: none !important; }
}
.bp-colophon__k {
  font-family: var(--font-mono);
  font-size: var(--type-xs);
  color: var(--color-subtle);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.bp-colophon__v {
  font-size: var(--type-base);
  color: var(--color-text);
  font-weight: 500;
}

/* =============================================================
   5. bp-parts — 대형 숫자 목차 (Part 01/02/03)
   ============================================================= */
.bp-parts__header {
  margin-bottom: var(--space-16);
  max-width: var(--measure);
  margin-inline: auto;
  text-align: center;
}
.bp-parts__title {
  font-size: clamp(28px, 3.5vw, 40px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--color-text);
  margin: 0 0 var(--space-4);
  word-break: keep-all;
  text-wrap: balance;
}
.bp-parts__lead {
  font-size: var(--type-md);
  color: var(--color-muted);
  line-height: var(--leading-snug);
  margin: 0;
  word-break: keep-all;
}
.bp-parts__list {
  display: flex;
  flex-direction: column;
  gap: 0;
  list-style: none;
  padding: 0;
  margin: 0;
}
.bp-part {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  padding-block: var(--space-12);
  border-top: 1px solid var(--color-border);
}
@media (min-width: 768px) {
  .bp-part {
    grid-template-columns: minmax(160px, 220px) 1fr minmax(200px, 260px);
    gap: var(--space-12);
    align-items: start;
  }
}
.bp-part:last-child { border-bottom: 1px solid var(--color-border); }
.bp-part__num {
  font-family: var(--font-sans);
  font-size: clamp(72px, 10vw, 140px);
  font-weight: 200;
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--color-text);
  font-feature-settings: "tnum", "lnum";
}
.bp-part__body { }
.bp-part__label {
  font-family: var(--font-mono);
  font-size: var(--type-xs);
  color: var(--color-accent);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 var(--space-2);
}
.bp-part__heading {
  font-size: var(--type-xl);
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 var(--space-4);
  line-height: 1.2;
  letter-spacing: -0.005em;
  word-break: keep-all;
}
.bp-part__desc {
  font-size: var(--type-base);
  color: var(--color-muted);
  line-height: var(--leading-body);
  margin: 0;
  word-break: keep-all;
  max-width: var(--measure);
}
.bp-part__keywords {
  list-style: none;
  padding: 0;
  margin: var(--space-4) 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
@media (min-width: 768px) {
  .bp-part__keywords { margin-top: 0; }
}
.bp-part__kw {
  font-family: var(--font-mono);
  font-size: var(--type-xs);
  color: var(--color-text);
  letter-spacing: 0.04em;
  padding: 6px var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  text-align: center;
}

/* Part 변형 — 표지 썸네일 포함 (book-toriz 시리즈 권별 row)
   숫자 컬럼 생략: 표지 이미지 + "Vol. N" 라벨이 번호 역할 */
.bp-part--cover { grid-template-columns: 1fr; align-items: center; }
@media (min-width: 768px) {
  .bp-part--cover {
    grid-template-columns: minmax(160px, 200px) 1fr minmax(180px, 240px);
    gap: var(--space-12);
  }
}
.bp-part__cover {
  max-width: 200px;
  width: 100%;
  height: auto;
  display: block;
  margin-inline: auto;
  filter: drop-shadow(0 14px 30px rgba(14, 17, 22, 0.15));
  transition: transform var(--motion-base) var(--ease-out);
}
.bp-part--cover:hover .bp-part__cover {
  transform: translateY(-4px);
}

/* =============================================================
   6. bp-explore — 책 둘러보기 탭 (CSS-only, radio 기반)
   ============================================================= */
.bp-explore__header { margin-bottom: var(--space-12); text-align: center; }
.bp-explore__title {
  font-size: clamp(28px, 3.5vw, 40px);
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 var(--space-3);
  letter-spacing: -0.01em;
}
.bp-explore__lead {
  font-size: var(--type-base);
  color: var(--color-muted);
  max-width: var(--measure);
  margin-inline: auto;
}
.bp-explore__tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  margin-bottom: var(--space-8);
  border-bottom: 1px solid var(--color-border);
  padding-bottom: var(--space-2);
}
.bp-explore__radio { position: absolute; opacity: 0; pointer-events: none; }
.bp-explore__tab {
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-sans);
  font-size: var(--type-sm);
  font-weight: 500;
  color: var(--color-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--motion-fast) var(--ease-out),
              border-color var(--motion-fast) var(--ease-out);
  white-space: nowrap;
}
.bp-explore__tab:hover { color: var(--color-text); }
.bp-explore__radio:focus-visible + .bp-explore__tab {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
.bp-explore__panel { display: none; }

/* Radio-tab linkage — each panel is shown when its matching radio is checked */
#bp-tab-preview:checked   ~ .bp-explore__tabs label[for="bp-tab-preview"],
#bp-tab-cardnews:checked  ~ .bp-explore__tabs label[for="bp-tab-cardnews"],
#bp-tab-trailer:checked   ~ .bp-explore__tabs label[for="bp-tab-trailer"],
#bp-tab-review:checked    ~ .bp-explore__tabs label[for="bp-tab-review"],
#bp-tab-usage:checked    ~ .bp-explore__tabs label[for="bp-tab-usage"] {
  color: var(--color-text);
  border-bottom-color: var(--color-accent);
  font-weight: 600;
}
#bp-tab-preview:checked   ~ .bp-explore__panels .bp-explore__panel--preview,
#bp-tab-cardnews:checked  ~ .bp-explore__panels .bp-explore__panel--cardnews,
#bp-tab-trailer:checked   ~ .bp-explore__panels .bp-explore__panel--trailer,
#bp-tab-review:checked    ~ .bp-explore__panels .bp-explore__panel--review,
#bp-tab-usage:checked    ~ .bp-explore__panels .bp-explore__panel--usage {
  display: block;
}

/* Flipbook — 이북 스타일 carousel (미리보기·카드뉴스 공용) */
.bp-flipbook {
  position: relative;
  max-width: 720px;
  margin-inline: auto;
}
.bp-flipbook__viewport {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  aspect-ratio: 3 / 4;
  box-shadow: var(--shadow-md);
}
.bp-flipbook--square .bp-flipbook__viewport { aspect-ratio: 1 / 1; }
.bp-flipbook--portrait .bp-flipbook__viewport { aspect-ratio: 3 / 4; }

.bp-flipbook__track {
  display: flex;
  height: 100%;
  transition: transform var(--motion-slow) var(--ease-out);
  will-change: transform;
  touch-action: pan-y;
}
.bp-flipbook__slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  box-sizing: border-box;
}
.bp-flipbook__slide img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  box-shadow: 0 6px 20px rgba(14, 17, 22, 0.10);
  user-select: none;
  -webkit-user-drag: none;
}

/* 카드 앞뒷면 페어 변형 — 한 슬라이드에 2장 나란히 표시 */
.bp-flipbook--cardpair .bp-flipbook__viewport { aspect-ratio: 3 / 2; }
.bp-flipbook--cardpair .bp-flipbook__slide { padding: var(--space-6); }
@media (max-width: 640px) {
  .bp-flipbook--cardpair .bp-flipbook__viewport { aspect-ratio: 4 / 3; }
  .bp-flipbook--cardpair .bp-flipbook__slide { padding: var(--space-4); }
}
.bp-cardpair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  width: 100%;
  height: 100%;
  align-items: center;
  justify-items: center;
}
@media (max-width: 640px) {
  .bp-cardpair { gap: var(--space-3); }
}
.bp-cardpair__face {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
  max-width: 100%;
  max-height: 100%;
  min-height: 0;
}
.bp-cardpair__face img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  min-height: 0;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}
.bp-cardpair__label {
  font-family: var(--font-mono);
  font-size: var(--type-xs);
  color: var(--color-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
}

/* Transparent PNG 변형 — 박스 그림자를 drop-shadow로 대체해
   투명 배경 이미지의 실제 윤곽을 따라가게 함 */
.bp-flipbook--transparent .bp-flipbook__viewport {
  background: var(--color-bg);
}
.bp-flipbook--transparent .bp-flipbook__slide {
  padding: var(--space-6);
}
.bp-flipbook--transparent .bp-flipbook__slide img {
  box-shadow: none;
  filter:
    drop-shadow(0 12px 24px rgba(14, 17, 22, 0.14))
    drop-shadow(0 4px 8px rgba(14, 17, 22, 0.06));
}

.bp-flipbook__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(250, 248, 244, 0.94);
  border: 1px solid var(--color-border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: background-color var(--motion-fast) var(--ease-out),
              border-color var(--motion-fast) var(--ease-out);
  z-index: 2;
  padding: 0;
}
.bp-flipbook__arrow:hover {
  background: var(--color-bg);
  border-color: var(--color-border-strong);
}
.bp-flipbook__arrow:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.bp-flipbook__arrow--prev { left: var(--space-3); }
.bp-flipbook__arrow--next { right: var(--space-3); }
.bp-flipbook__arrow svg {
  width: 18px;
  height: 18px;
  stroke: var(--color-text);
}

.bp-flipbook__footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  margin-top: var(--space-6);
  flex-wrap: wrap;
}
.bp-flipbook__counter {
  font-family: var(--font-mono);
  font-size: var(--type-sm);
  color: var(--color-muted);
  letter-spacing: 0.06em;
  min-width: 80px;
  text-align: center;
}
.bp-flipbook__dots {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  justify-content: center;
  max-width: 320px;
}
.bp-flipbook__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-border-strong);
  cursor: pointer;
  border: 0;
  padding: 0;
  transition: background-color var(--motion-fast) var(--ease-out),
              transform var(--motion-fast) var(--ease-out);
}
.bp-flipbook__dot.is-active {
  background: var(--color-accent);
  transform: scale(1.35);
}
.bp-flipbook__dot:hover { background: var(--color-text); }

.bp-flipbook__hint {
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--type-xs);
  color: var(--color-subtle);
  letter-spacing: 0.04em;
  margin-top: var(--space-3);
}

/* YouTube trailer */
.bp-trailer {
  position: relative;
  max-width: 960px;
  margin-inline: auto;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-contrast-bg);
  box-shadow: var(--shadow-md);
}
.bp-trailer iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Publisher review (tabbed sub-content) */
.bp-review {
  max-width: var(--wrap);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}
.bp-review__intro {
  padding: var(--space-6);
  background: var(--color-accent-soft);
  border-left: 3px solid var(--color-accent);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.bp-review__intro p {
  font-size: var(--type-md);
  font-weight: 500;
  color: var(--color-text);
  line-height: var(--leading-snug);
  margin: 0 0 var(--space-2);
  word-break: keep-all;
}
.bp-review__intro p:last-child { margin-bottom: 0; }
.bp-review__block h4 {
  font-size: var(--type-lg);
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 var(--space-3);
  letter-spacing: -0.005em;
  word-break: keep-all;
}
.bp-review__block p {
  font-size: var(--type-base);
  line-height: var(--leading-body);
  color: var(--color-text);
  margin: 0 0 var(--space-4);
  max-width: var(--measure);
  word-break: keep-all;
}
.bp-review__block p:last-child { margin-bottom: 0; }

/* =============================================================
   7a. bp-praise-slider — 추천평 자동 슬라이드쇼 (색인 없음)
   사용자 조작 시 자동 재생 정지
   ============================================================= */
.bp-praise-slider__header {
  text-align: center;
  margin-bottom: var(--space-12);
  max-width: var(--measure);
  margin-inline: auto;
}
.bp-praise-slider__title {
  font-size: clamp(28px, 3.5vw, 40px);
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 var(--space-3);
  letter-spacing: -0.01em;
}
.bp-praise-slider__lead {
  font-size: var(--type-base);
  color: var(--color-muted);
  max-width: var(--measure);
  margin-inline: auto;
}

.bp-praise-slider {
  position: relative;
  max-width: 880px;
  margin-inline: auto;
  padding-inline: var(--space-16);
}
@media (max-width: 640px) {
  .bp-praise-slider { padding-inline: var(--space-6); }
}

.bp-praise-slider__viewport {
  overflow: hidden;
  position: relative;
}
.bp-praise-slider__track {
  display: flex;
  transition: transform 600ms var(--ease-out);
  will-change: transform;
  touch-action: pan-y;
}
.bp-praise-slider__slide {
  flex: 0 0 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-6) var(--space-4);
  text-align: center;
  min-height: 320px;
  justify-content: center;
}
.bp-praise-slider__mark {
  font-family: var(--font-mono);
  font-size: 56px;
  line-height: 0.7;
  color: var(--color-accent);
  font-weight: 300;
  margin: 0;
  user-select: none;
}
.bp-praise-slider__quote {
  font-size: var(--type-lg);
  line-height: 1.65;
  color: var(--color-text);
  margin: 0;
  font-weight: 400;
  word-break: keep-all;
  text-align: left;
  max-width: 56ch;
  letter-spacing: -0.005em;
}
@media (max-width: 640px) {
  .bp-praise-slider__quote { font-size: var(--type-base); line-height: var(--leading-body); }
}
.bp-praise-slider__who {
  padding-top: var(--space-6);
  position: relative;
}
.bp-praise-slider__who::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 32px;
  height: 1px;
  background: var(--color-accent);
}
.bp-praise-slider__who-name {
  display: block;
  font-size: var(--type-base);
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -0.005em;
}
.bp-praise-slider__who-role {
  display: block;
  font-size: var(--type-xs);
  color: var(--color-muted);
  margin-top: 4px;
  letter-spacing: 0.01em;
}

/* Arrows — 가장자리 외부 배치 */
.bp-praise-slider__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--color-border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  z-index: 2;
  transition: background-color var(--motion-fast) var(--ease-out),
              border-color var(--motion-fast) var(--ease-out);
}
.bp-praise-slider__arrow:hover {
  background: var(--color-bg);
  border-color: var(--color-border-strong);
}
.bp-praise-slider__arrow--prev { left: 0; }
.bp-praise-slider__arrow--next { right: 0; }
.bp-praise-slider__arrow svg { width: 16px; height: 16px; stroke: var(--color-muted); }
.bp-praise-slider__arrow:hover svg { stroke: var(--color-text); }
@media (max-width: 640px) {
  .bp-praise-slider__arrow { width: 36px; height: 36px; }
}

/* 자동 재생 진행 바 (하단 얇은 바) — 정지 시 사라짐 */
.bp-praise-slider__progress {
  position: relative;
  max-width: 880px;
  margin: var(--space-6) auto 0;
  padding-inline: var(--space-16);
  height: 2px;
  opacity: 0.6;
  transition: opacity var(--motion-base) var(--ease-out);
}
@media (max-width: 640px) {
  .bp-praise-slider__progress { padding-inline: var(--space-6); }
}
.bp-praise-slider__progress-inner {
  position: relative;
  height: 100%;
  background: var(--color-border);
  overflow: hidden;
  border-radius: 1px;
}
.bp-praise-slider__progress-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0;
  background: var(--color-accent);
}
.bp-praise-slider__progress.is-paused { opacity: 0; }

/* Active tab + panel linkage */
#bp-pr-1:checked ~ .bp-praise-tabs__nav label[for="bp-pr-1"],
#bp-pr-2:checked ~ .bp-praise-tabs__nav label[for="bp-pr-2"],
#bp-pr-3:checked ~ .bp-praise-tabs__nav label[for="bp-pr-3"],
#bp-pr-4:checked ~ .bp-praise-tabs__nav label[for="bp-pr-4"],
#bp-pr-5:checked ~ .bp-praise-tabs__nav label[for="bp-pr-5"],
#bp-pr-6:checked ~ .bp-praise-tabs__nav label[for="bp-pr-6"],
#bp-pr-7:checked ~ .bp-praise-tabs__nav label[for="bp-pr-7"] {
  border-bottom-color: var(--color-accent);
}
#bp-pr-1:checked ~ .bp-praise-tabs__nav label[for="bp-pr-1"] .bp-praise-tabs__name-main,
#bp-pr-2:checked ~ .bp-praise-tabs__nav label[for="bp-pr-2"] .bp-praise-tabs__name-main,
#bp-pr-3:checked ~ .bp-praise-tabs__nav label[for="bp-pr-3"] .bp-praise-tabs__name-main,
#bp-pr-4:checked ~ .bp-praise-tabs__nav label[for="bp-pr-4"] .bp-praise-tabs__name-main,
#bp-pr-5:checked ~ .bp-praise-tabs__nav label[for="bp-pr-5"] .bp-praise-tabs__name-main,
#bp-pr-6:checked ~ .bp-praise-tabs__nav label[for="bp-pr-6"] .bp-praise-tabs__name-main,
#bp-pr-7:checked ~ .bp-praise-tabs__nav label[for="bp-pr-7"] .bp-praise-tabs__name-main {
  color: var(--color-text);
}
#bp-pr-1:checked ~ .bp-praise-tabs__panels .bp-praise-tabs__panel--1,
#bp-pr-2:checked ~ .bp-praise-tabs__panels .bp-praise-tabs__panel--2,
#bp-pr-3:checked ~ .bp-praise-tabs__panels .bp-praise-tabs__panel--3,
#bp-pr-4:checked ~ .bp-praise-tabs__panels .bp-praise-tabs__panel--4,
#bp-pr-5:checked ~ .bp-praise-tabs__panels .bp-praise-tabs__panel--5,
#bp-pr-6:checked ~ .bp-praise-tabs__panels .bp-praise-tabs__panel--6,
#bp-pr-7:checked ~ .bp-praise-tabs__panels .bp-praise-tabs__panel--7 {
  display: block;
}

/* =============================================================
   7. bp-praise-grid — 추천평 7인 quote cards (legacy, 사용 안함)
   ============================================================= */
.bp-praise-grid__header { text-align: center; margin-bottom: var(--space-16); }
.bp-praise-grid__title {
  font-size: clamp(28px, 3.5vw, 40px);
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 var(--space-3);
  letter-spacing: -0.01em;
}
.bp-praise-grid__lead {
  font-size: var(--type-base);
  color: var(--color-muted);
  max-width: var(--measure);
  margin-inline: auto;
}
.bp-praise-grid__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  list-style: none;
  padding: 0;
  margin: 0;
}
@media (min-width: 700px) { .bp-praise-grid__list { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .bp-praise-grid__list { grid-template-columns: repeat(3, 1fr); } }
.bp-praise {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  transition: border-color var(--motion-base) var(--ease-out);
}
.bp-praise:hover { border-color: var(--color-border-strong); }
.bp-praise__mark {
  font-family: var(--font-mono);
  font-size: 40px;
  line-height: 0.8;
  color: var(--color-accent);
  font-weight: 400;
}
.bp-praise__text {
  font-size: var(--type-base);
  line-height: var(--leading-body);
  color: var(--color-text);
  font-weight: 400;
  margin: 0;
  flex: 1;
  word-break: keep-all;
}
.bp-praise__who {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}
.bp-praise__name {
  display: block;
  font-size: var(--type-sm);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 2px;
}
.bp-praise__role {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--type-xs);
  color: var(--color-muted);
  letter-spacing: 0.02em;
}

/* 추천평 grid 하단 영상 영역 (praise-grid 내부 확장) */
.bp-praise-video {
  margin-top: var(--space-16);
  max-width: 960px;
  margin-inline: auto;
}
.bp-praise-video__header {
  text-align: center;
  margin-bottom: var(--space-8);
  max-width: var(--measure);
  margin-inline: auto;
}
.bp-praise-video__title {
  font-size: clamp(22px, 2.5vw, 28px);
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 var(--space-3);
  letter-spacing: -0.01em;
  word-break: keep-all;
  text-wrap: balance;
}
.bp-praise-video__lead {
  font-size: var(--type-base);
  color: var(--color-muted);
  line-height: var(--leading-snug);
  margin: 0;
  word-break: keep-all;
}

/* =============================================================
   8. bp-author — 저자 섹션 (기본 bg, 다른 섹션과 동일한 레이아웃)
   ============================================================= */
.bp-author__header {
  text-align: center;
  margin-bottom: var(--space-12);
  max-width: var(--measure);
  margin-inline: auto;
}
.bp-author__name {
  font-size: clamp(28px, 3.5vw, 40px);
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 var(--space-3);
  letter-spacing: -0.01em;
}
.bp-author__role {
  font-size: var(--type-md);
  color: var(--color-muted);
  line-height: var(--leading-snug);
  margin: 0;
  word-break: keep-all;
}
.bp-author__body {
  max-width: var(--wrap);
  margin-inline: auto;
}
.bp-author__body p {
  font-size: var(--type-base);
  line-height: var(--leading-body);
  color: var(--color-text);
  margin: 0 0 var(--space-4);
  word-break: keep-all;
}
.bp-author__body p:last-of-type { margin-bottom: var(--space-6); }
.bp-author__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--type-xs);
  font-weight: 600;
  color: var(--color-accent);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--color-accent);
  transition: color var(--motion-fast) var(--ease-out),
              border-bottom-color var(--motion-fast) var(--ease-out);
}
.bp-author__link:hover { color: var(--color-accent-hover); border-bottom-color: var(--color-accent-hover); }

/* =============================================================
   9. bp-buy — 구매 채널 (저자 서명본 강조)
   ============================================================= */
.bp-buy__header { text-align: center; margin-bottom: var(--space-12); }
.bp-buy__title {
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 var(--space-3);
}
.bp-buy__lead {
  font-size: var(--type-base);
  color: var(--color-muted);
  max-width: var(--measure);
  margin-inline: auto;
}
.bp-buy__featured {
  max-width: 640px;
  margin: 0 auto var(--space-8);
  padding: var(--space-8);
  border: 2px solid var(--color-accent);
  border-radius: var(--radius-lg);
  background: var(--color-accent-soft);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  text-align: center;
}
.bp-buy__featured-badge {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px 14px;
  background: var(--color-accent);
  color: #fff;
  font-family: var(--font-mono);
  font-size: var(--type-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 999px;
}
.bp-buy__featured-title {
  font-size: var(--type-lg);
  font-weight: 700;
  color: var(--color-text);
  margin: 0;
  letter-spacing: -0.005em;
}
.bp-buy__featured-desc {
  font-size: var(--type-sm);
  color: var(--color-muted);
  margin: 0;
  line-height: var(--leading-snug);
}
.bp-buy__channels {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  max-width: 640px;
  margin-inline: auto;
}
@media (min-width: 640px) { .bp-buy__channels { grid-template-columns: repeat(3, 1fr); } }
.bp-buy__channel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-4);
  font-size: var(--type-sm);
  font-weight: 600;
  color: var(--color-text);
  background: var(--color-bg);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: border-color var(--motion-fast) var(--ease-out),
              background-color var(--motion-fast) var(--ease-out);
}
.bp-buy__channel:hover {
  border-color: var(--color-text);
  background: var(--color-surface);
}

/* =============================================================
   10. bp-grid40 — 40가지 발명원리 미니 카드 그리드 (카드덱 시각화)
   모바일 2열 → 태블릿 4열 → 데스크톱 8열 (5행)
   각 카드: 번호 뱃지(상단) + 원리명 + 영문, 호버 시 연상질문 reveal
   ============================================================= */
.bp-grid40__header { text-align: center; margin-bottom: var(--space-12); max-width: var(--measure); margin-inline: auto; }
.bp-grid40__title {
  font-size: clamp(28px, 3.5vw, 40px);
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 var(--space-3);
  letter-spacing: -0.01em;
}
.bp-grid40__lead {
  font-size: var(--type-base);
  color: var(--color-muted);
  line-height: var(--leading-snug);
  margin: 0;
  word-break: keep-all;
}
.bp-grid40__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
  list-style: none;
  padding: 0;
  margin: 0;
}
@media (min-width: 600px) { .bp-grid40__list { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1000px) { .bp-grid40__list { grid-template-columns: repeat(8, 1fr); gap: var(--space-2); } }

.bp-grid40__card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  aspect-ratio: 3 / 4.4;
  padding: var(--space-8) var(--space-2) var(--space-3);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: 0 1px 2px rgba(14, 17, 22, 0.03);
  overflow: hidden;
  transition: transform var(--motion-fast) var(--ease-out),
              border-color var(--motion-fast) var(--ease-out),
              box-shadow var(--motion-fast) var(--ease-out);
}
.bp-grid40__card:hover {
  transform: scale(1.06);
  border-color: var(--color-secondary);
  box-shadow: 0 10px 26px rgba(30, 58, 95, 0.16);
  z-index: 2;
}
.bp-grid40__num {
  position: absolute;
  top: var(--space-2);
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  background: var(--color-secondary);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  border-radius: 999px;
}
.bp-grid40__icon {
  display: block;
  width: 100%;
  max-width: 120px;
  height: auto;
  aspect-ratio: 1 / 1;
  margin-block: 0;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}
@media (min-width: 1000px) {
  .bp-grid40__icon { max-width: 96px; }
}
.bp-grid40__name {
  font-size: var(--type-sm);
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.2;
  word-break: keep-all;
}
@media (min-width: 1000px) {
  .bp-grid40__name { font-size: 13px; }
}
.bp-grid40__en {
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--color-subtle);
  letter-spacing: 0.04em;
  line-height: 1.2;
}

/* =============================================================
   11. bp-modes — 4가지 활용 시나리오 (2x2 그리드, features 변형)
   ============================================================= */
.bp-modes__header { text-align: center; margin-bottom: var(--space-12); max-width: var(--measure); margin-inline: auto; }
.bp-modes__title {
  font-size: clamp(28px, 3.5vw, 40px);
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 var(--space-3);
  letter-spacing: -0.01em;
}
.bp-modes__lead {
  font-size: var(--type-base);
  color: var(--color-muted);
  line-height: var(--leading-snug);
  margin: 0;
  word-break: keep-all;
}
.bp-modes__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
@media (min-width: 768px) { .bp-modes__grid { grid-template-columns: 1fr 1fr; gap: var(--space-6); } }

.bp-mode {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-8);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: border-color var(--motion-base) var(--ease-out),
              box-shadow var(--motion-base) var(--ease-out);
}
.bp-mode:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-md);
}
.bp-mode__num {
  font-family: var(--font-mono);
  font-size: var(--type-xs);
  color: var(--color-accent);
  letter-spacing: 0.08em;
  font-weight: 600;
}
.bp-mode__name {
  font-size: var(--type-xl);
  font-weight: 700;
  color: var(--color-text);
  margin: 0;
  letter-spacing: -0.005em;
}
.bp-mode__tagline {
  font-size: var(--type-sm);
  color: var(--color-muted);
  margin: 0;
  line-height: var(--leading-snug);
  word-break: keep-all;
}
.bp-mode__list {
  list-style: none;
  padding: 0;
  margin: var(--space-2) 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.bp-mode__list li {
  position: relative;
  padding-left: var(--space-4);
  font-size: var(--type-sm);
  color: var(--color-text);
  line-height: var(--leading-snug);
  word-break: keep-all;
}
.bp-mode__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 8px;
  height: 1px;
  background: var(--color-accent);
}

/* =============================================================
   13. bp-spotlight — 단일 중요 사실 강조 블록
   (예: 국립중앙과학관 사이언스데이 공식 교구 채택)
   ============================================================= */
.bp-spotlight {
  padding-block: var(--space-20);
}
.bp-spotlight__inner {
  max-width: 960px;
  margin-inline: auto;
  padding: var(--space-16) var(--space-8);
  background: var(--color-secondary-soft);
  border-radius: var(--radius-lg);
  border-left: 4px solid var(--color-secondary);
  text-align: center;
  position: relative;
}
.bp-spotlight__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px 14px;
  background: var(--color-secondary);
  color: #fff;
  font-family: var(--font-mono);
  font-size: var(--type-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 999px;
  margin-bottom: var(--space-6);
}
.bp-spotlight__title {
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-text);
  margin: 0 0 var(--space-4);
  letter-spacing: -0.01em;
  word-break: keep-all;
  text-wrap: balance;
}
.bp-spotlight__desc {
  font-size: var(--type-base);
  color: var(--color-muted);
  line-height: var(--leading-body);
  margin: 0 auto;
  max-width: 64ch;
  word-break: keep-all;
}

/* =============================================================
   14. bp-detail-expand — 긴 상세 페이지 이미지 접기/펼치기
   네이티브 <details> 기반, JS 없음
   ============================================================= */
.bp-detail-expand {
  max-width: 820px;
  margin-inline: auto;
}
.bp-detail-expand__summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-5) var(--space-6);
  background: var(--color-bg);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  font-size: var(--type-base);
  font-weight: 600;
  color: var(--color-text);
  cursor: pointer;
  transition: background-color var(--motion-fast) var(--ease-out),
              border-color var(--motion-fast) var(--ease-out);
  user-select: none;
}
.bp-detail-expand__summary::-webkit-details-marker { display: none; }
.bp-detail-expand__summary:hover {
  background: var(--color-surface);
  border-color: var(--color-text);
}
.bp-detail-expand__summary-icon {
  width: 18px;
  height: 18px;
  stroke: var(--color-muted);
  transition: transform var(--motion-base) var(--ease-out);
}
.bp-detail-expand[open] .bp-detail-expand__summary-icon {
  transform: rotate(180deg);
}
.bp-detail-expand[open] .bp-detail-expand__summary-text::after {
  content: " 접기";
}
.bp-detail-expand:not([open]) .bp-detail-expand__summary-text::after {
  content: "";
}
.bp-detail-expand__stack {
  margin-top: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.bp-detail-expand__stack img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
}

/* =============================================================
   12. bp-hero--card — 카드 제품 hero 변형 (실촬 사진용 액자 프레임)
   불투명 배경 이미지를 전제. 스튜디오 글로우·플로어 섀도우는 제거하고
   이미지 자체에 border-radius + 경계선 + 부드러운 drop-shadow만 적용.
   ============================================================= */
.bp-hero--card .bp-hero__cover-frame {
  aspect-ratio: 1 / 1;
  padding: 0;
}
.bp-hero--card .bp-hero__cover-frame::before,
.bp-hero--card .bp-hero__cover-frame::after { content: none; }
.bp-hero--card .bp-hero__cover-img {
  max-width: 480px;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  box-shadow:
    0 24px 48px rgba(14, 17, 22, 0.14),
    0 6px 14px rgba(14, 17, 22, 0.08);
  filter: none;
}
.bp-hero--card .bp-hero__cover-frame:hover .bp-hero__cover-img {
  transform: translateY(-4px);
  box-shadow:
    0 32px 60px rgba(14, 17, 22, 0.18),
    0 10px 20px rgba(14, 17, 22, 0.10);
}