/* pages/showcase.css — /showcase/ 공용 신상품·추천상품 쇼케이스 페이지 */

.c-showcase-page {
  background: #fff;
}

/* ───────────────────────────────────────────────
   히어로
   - 기본은 data 파일의 hero.slides를 읽어 carousel로 출력
   - hero 설정이 없는 tclass는 기존 legacy hero로 fallback
   - 상품형(product)은 도서 표지를 중심으로, 배너형(banner)은 문구/배경 중심으로 분리
   ─────────────────────────────────────────────── */
.c-showcase-hero {
  margin: 12px 12px 14px;
  position: relative;
}

/* legacy fallback: bible/church 등 hero.slides 설정 전 페이지용 */
.c-showcase-hero--legacy {
  padding: 22px 18px;
  border-radius: 22px;
  background:
    radial-gradient(circle at 88% 16%, rgba(255,107,107,.16) 0 13%, transparent 14%),
    linear-gradient(135deg, #fff 0%, #fff7f7 44%, #f7f8fa 100%);
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 12px 26px rgba(0,0,0,.07);
  overflow: hidden;
}

.c-showcase-hero--legacy .c-showcase-hero__body {
  position: relative;
  z-index: 2;
  max-width: 74%;
}

.c-showcase-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  width: max-content;
  margin-bottom: 8px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.74);
  color: var(--accent);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
}

.c-showcase-hero--legacy h1 {
  margin: 0 0 8px;
  font-size: 28px;
  line-height: 1.12;
  letter-spacing: -.04em;
  color: #222;
  font-weight: 800;
}

.c-showcase-hero--legacy p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--sub);
}
.c-showcase-hero--legacy p b {
  color: var(--accent);
  font-weight: 800;
}

/* legacy 우측 비주얼 */
.c-showcase-hero__visual {
  position: absolute;
  right: 14px;
  bottom: 16px;
  width: 106px;
  height: 92px;
  pointer-events: none;
  z-index: 1;
}
.c-showcase-hero__visual span {
  position: absolute;
  display: block;
  border-radius: 18px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 12px 20px rgba(0,0,0,.10);
}
.c-showcase-hero__visual span::after {
  content: '';
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  height: 8px;
  border-radius: 999px;
  background: rgba(0,0,0,.08);
}
.c-showcase-hero__visual span:nth-child(1) {
  left: 0;
  bottom: 0;
  width: 46px;
  height: 60px;
  transform: rotate(-8deg);
}
.c-showcase-hero__visual span:nth-child(2) {
  left: 32px;
  bottom: 12px;
  width: 50px;
  height: 72px;
  background: linear-gradient(180deg, #fff 0%, #fff2f2 100%);
}
.c-showcase-hero__visual span:nth-child(3) {
  right: 0;
  bottom: 2px;
  width: 42px;
  height: 54px;
  transform: rotate(7deg);
  background: linear-gradient(180deg, #fff 0%, #f6f7f9 100%);
}
.c-showcase-hero__visual span:nth-child(2)::before {
  content: '';
  position: absolute;
  top: 12px;
  left: 14px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255,107,107,.18);
}

/* carousel hero: 공통 c-carousel 엔진은 쓰되, showcase 전용 스킨만 덮는다. */
.c-showcase-hero--carousel.c-carousel {
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  overflow: visible;
  --carousel-dot: rgba(0,0,0,.20);
  --carousel-dot-active: var(--accent);
}

.c-showcase-hero__viewport {
  min-height: 252px;
  max-height: 320px;
  aspect-ratio: 5 / 4;
  border-radius: 26px;
  overflow: hidden;
  background: #f7f2ec;
  box-shadow: 0 14px 30px rgba(0,0,0,.10);
}

.c-showcase-hero__track {
  height: 100%;
}

.c-showcase-hero__slide {
  position: relative;
  isolation: isolate;
  min-height: 100%;
  color: #222;
  background: linear-gradient(135deg, #fff 0%, #fff7f1 58%, #f4f6f8 100%);
}


/* button 이 없는 banner 는 slide 전체가 링크가 될 수 있다.
   anchor 기본 스타일이 hero 카드 모양에 영향을 주지 않도록 리셋한다. */
.c-showcase-hero__slide.is-slide-link {
  display: block;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
.c-showcase-hero__slide.is-slide-link:active {
  transform: none;
}

.c-showcase-hero__shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(circle at 82% 18%, rgba(255,255,255,.30) 0 13%, transparent 14%),
    linear-gradient(180deg, rgba(0,0,0,.04) 0%, rgba(0,0,0,.18) 100%);
  pointer-events: none;
}

/* 이미지 banner 기본값: 완성형 배너 이미지를 그대로 보여준다.
   overlay=none 은 shade 요소 자체를 숨겨 이미지 위 보정막이 남지 않게 한다.
   dark 도 과하게 검어지지 않도록 약한 좌측 보정 정도로만 둔다. */
.c-showcase-hero__slide--banner.has-bg.is-overlay-none .c-showcase-hero__shade {
  display: none;
}
.c-showcase-hero__slide--banner.has-bg.is-overlay-none .c-showcase-hero__bg {
  opacity: 1;
  filter: none;
  mix-blend-mode: normal;
}
.c-showcase-hero__slide--banner.has-bg.is-overlay-dark .c-showcase-hero__shade {
  display: block;
  background: linear-gradient(90deg, rgba(0,0,0,.30), rgba(0,0,0,.08) 58%, rgba(0,0,0,.02));
}
.c-showcase-hero__slide--banner.has-bg.is-overlay-soft .c-showcase-hero__shade {
  display: block;
  background: linear-gradient(90deg, rgba(255,255,255,.46), rgba(255,255,255,.12) 58%, rgba(255,255,255,.02));
}

/* 이미지 없는 banner 의 테마 장식(SVG). 우하단에 가볍게 깐다.
   카테고리형(book/church/calendar/card/general)은 흰/잉크, 목적형(sale/notice)은 accent 포인트. */
.c-showcase-hero__pattern {
  position: absolute;
  right: 16px;
  bottom: 14px;
  width: 116px;
  height: 116px;
  z-index: 0;
  pointer-events: none;
  opacity: .92;
}
.c-showcase-hero__pattern svg {
  width: 100%;
  height: 100%;
  display: block;
}
.c-showcase-hero__slide--banner.is-pattern-sale .c-showcase-hero__pattern,
.c-showcase-hero__slide--banner.is-pattern-notice .c-showcase-hero__pattern {
  color: var(--accent);
  opacity: .9;
}

.c-showcase-hero__banner-content {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  min-height: 100%;
  max-width: 78%;
  padding: 28px 22px;
  box-sizing: border-box;
  color: #222;
  text-shadow: none;
}
.c-showcase-hero__copy {
  position: relative;
  z-index: 2;
  max-width: 100%;
}
.c-showcase-hero__banner-content h1 {
  margin: 0 0 10px;
  font-size: 28px;
  line-height: 1.14;
  letter-spacing: -.05em;
  font-weight: 900;
}
.c-showcase-hero__banner-content p {
  margin: 0;
  font-size: 14px;
  line-height: 1.58;
  color: rgba(34,34,34,.76);
}

/* banner 문구색. image 유무와 상관없이 textTone 옵션으로 조절한다. */
.c-showcase-hero__slide--banner.is-text-dark .c-showcase-hero__banner-content {
  color: #222;
  text-shadow: none;
}
.c-showcase-hero__slide--banner.is-text-dark .c-showcase-hero__banner-content p {
  color: rgba(34,34,34,.76);
}
.c-showcase-hero__slide--banner.is-text-light .c-showcase-hero__banner-content {
  color: #fff;
  text-shadow: 0 2px 12px rgba(0,0,0,.30);
}
.c-showcase-hero__slide--banner.is-text-light .c-showcase-hero__banner-content p {
  color: rgba(255,255,255,.90);
}

.c-showcase-hero__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  max-width: calc(100% - 44px);
  padding: 11px 15px;
  border-radius: 999px;
  color: #fff;
  background: var(--accent);
  font-size: 13px;
  font-weight: 900;
  text-decoration: none;
  box-shadow: 0 9px 18px rgba(226,73,73,.24);
}
.c-showcase-hero__btn:active {
  transform: scale(.98);
}

/* banner 문구 위치 옵션
   contentPos  : left / center / right
   contentVPos : top / middle / bottom
   textAlign   : left / center / right
   buttonPos   : bottom(기본) / flow
   buttonAlign : left / center / right */
.c-showcase-hero__slide--banner.is-pos-left .c-showcase-hero__banner-content {
  margin-left: 0;
  margin-right: auto;
}
.c-showcase-hero__slide--banner.is-pos-center .c-showcase-hero__banner-content {
  margin-left: auto;
  margin-right: auto;
}
.c-showcase-hero__slide--banner.is-pos-right .c-showcase-hero__banner-content {
  margin-left: auto;
  margin-right: 0;
}
.c-showcase-hero__slide--banner.is-vpos-top .c-showcase-hero__banner-content {
  justify-content: flex-start;
}
.c-showcase-hero__slide--banner.is-vpos-middle .c-showcase-hero__banner-content {
  justify-content: center;
}
.c-showcase-hero__slide--banner.is-vpos-bottom .c-showcase-hero__banner-content {
  justify-content: flex-end;
}
.c-showcase-hero__slide--banner.is-align-left .c-showcase-hero__banner-content {
  text-align: left;
  align-items: flex-start;
}
.c-showcase-hero__slide--banner.is-align-center .c-showcase-hero__banner-content {
  text-align: center;
  align-items: center;
}
.c-showcase-hero__slide--banner.is-align-right .c-showcase-hero__banner-content {
  text-align: right;
  align-items: flex-end;
}

/* 버튼 기본값은 하단 왼쪽.
   - buttonPos=bottom 인 경우 버튼은 문구 박스가 아니라 전체 banner slide 기준으로 배치한다.
   - contentPos/right 와 무관하게 buttonAlign(left/center/right) 로 별도 조절한다. */
.c-showcase-hero__slide--banner.is-btn-bottom .c-showcase-hero__banner-content {
  padding-bottom: 84px;
}
.c-showcase-hero__slide--banner.is-btn-bottom .c-showcase-hero__btn {
  position: absolute;
  z-index: 3;
  bottom: 28px;
  margin-top: 0;
}
.c-showcase-hero__slide--banner.is-btn-flow .c-showcase-hero__btn {
  position: relative;
  z-index: 3;
  margin-top: 18px;
}
.c-showcase-hero__slide--banner.is-btn-bottom.is-btn-align-left .c-showcase-hero__btn {
  left: 22px;
  right: auto;
}
.c-showcase-hero__slide--banner.is-btn-bottom.is-btn-align-center .c-showcase-hero__btn {
  left: 50%;
  right: auto;
  transform: translateX(-50%);
}
.c-showcase-hero__slide--banner.is-btn-bottom.is-btn-align-right .c-showcase-hero__btn {
  left: auto;
  right: 22px;
}
.c-showcase-hero__slide--banner.is-btn-bottom.is-btn-align-center .c-showcase-hero__btn:active {
  transform: translateX(-50%) scale(.98);
}
.c-showcase-hero__slide--banner.is-text-light .c-showcase-hero__btn {
  background: rgba(255,255,255,.94);
  color: #222;
  box-shadow: 0 9px 18px rgba(0,0,0,.18);
}
.c-showcase-hero__slide--banner.is-text-dark .c-showcase-hero__btn {
  background: var(--accent);
  color: #fff;
}

/* product slide: 도서 사이트처럼 표지 중심의 추천 카드 (기본 배경) */
.c-showcase-hero__slide--product {
  background:
    radial-gradient(circle at 85% 15%, rgba(255,255,255,.62) 0 11%, transparent 12%),
    linear-gradient(135deg, #fff8f1 0%, #fff 48%, #f4f6fb 100%);
}

/* ───────────────────────────────────────────────
   톤 팔레트 (밝은 톤)
   - .c-showcase-hero__slide.is-tone-* : banner / product 양쪽 공통으로 적용된다.
   - 모두 가운데가 흰색을 지나는 옅은 그라데이션이라 텍스트(어두운색) 가독성이 좋다.
   - 기존 is-book-* 클래스는 호환을 위해 같은 밝은 톤의 별칭으로 남겨둔다.
   ─────────────────────────────────────────────── */
.c-showcase-hero__slide.is-tone-sand,
.c-showcase-hero__slide.is-book-main {
  background: linear-gradient(135deg, #fffaf2 0%, #fff 52%, #faf4ea 100%);
}
.c-showcase-hero__slide.is-tone-rose {
  background: linear-gradient(135deg, #fff5f7 0%, #fff 52%, #fdf2f6 100%);
}
.c-showcase-hero__slide.is-tone-blue,
.c-showcase-hero__slide.is-book-pastor {
  background: linear-gradient(135deg, #f4f9ff 0%, #fff 52%, #eef4fc 100%);
}
.c-showcase-hero__slide.is-tone-green,
.c-showcase-hero__slide.is-book-education,
.c-showcase-hero__slide.is-book-green {
  background: linear-gradient(135deg, #f3fdf7 0%, #fff 52%, #f0f8f1 100%);
}
.c-showcase-hero__slide.is-tone-lavender {
  background: linear-gradient(135deg, #f8f6ff 0%, #fff 52%, #f4f1fc 100%);
}
.c-showcase-hero__slide.is-tone-slate {
  background: linear-gradient(135deg, #f7f9fb 0%, #fff 52%, #eff3f6 100%);
}

.c-showcase-hero__product-card {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(112px, 40%) minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  min-height: 100%;
  padding: 24px 20px;
  box-sizing: border-box;
}

/* 커버 공통 */
.c-showcase-hero__cover {
  position: relative;
  display: block;
  align-self: center;
  justify-self: center;
  width: min(36vw, 132px);
  max-width: 100%;
  overflow: hidden;
}
.c-showcase-hero__cover img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain; /* 기본은 안 자름 */
}

/* product(용품): 정사각 + contain + 흰 배경 + 평면. 250x250 흰배경 상품이 잘림 없이 맞음 */
.c-showcase-hero__cover--product {
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 12px 26px rgba(0,0,0,.16);
}
.c-showcase-hero__cover--product img {
  padding: 8px;
  box-sizing: border-box;
}

/* book(세로 도서): 세로 프레임 + cover(크롭) + 기울임 + 책등. 도서 표지용 */
.c-showcase-hero__cover--book {
  aspect-ratio: 3 / 4.18;
  border-radius: 8px 13px 13px 8px;
  background: #fff;
  box-shadow: 0 18px 32px rgba(0,0,0,.22);
  transform: rotate(-3deg);
}
.c-showcase-hero__cover--book img {
  object-fit: cover;
}
.c-showcase-hero__cover--book::after {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 12px;
  background: linear-gradient(90deg, rgba(0,0,0,.16), rgba(255,255,255,.20), transparent);
  pointer-events: none;
}

/* book-wide(가로로 긴 도서): 가로 프레임 + cover(크롭) + 약한 기울임 */
.c-showcase-hero__cover--book-wide {
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 16px 30px rgba(0,0,0,.20);
  transform: rotate(-2deg);
}
.c-showcase-hero__cover--book-wide img {
  object-fit: cover;
}

/* custom(편집 이미지): 배경 없음 + contain + 그림자만. 투명 PNG 등 직접 만든 이미지용 */
.c-showcase-hero__cover--custom {
  aspect-ratio: 1 / 1;
  background: transparent;
  overflow: visible;
}
.c-showcase-hero__cover--custom img {
  object-fit: contain;
  filter: drop-shadow(0 12px 22px rgba(0,0,0,.28));
}

.c-showcase-hero__product-body {
  min-width: 0;
}
.c-showcase-hero__badge {
  display: inline-flex;
  align-items: center;
  margin-bottom: 8px;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(226,73,73,.10);
  color: var(--accent);
  font-size: 11px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: .04em;
}
.c-showcase-hero__headline {
  margin: 0 0 5px;
  color: #876243;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.35;
}
.c-showcase-hero__product-name {
  margin: 0;
  color: #202020;
  font-size: 22px;
  line-height: 1.18;
  letter-spacing: -.05em;
  font-weight: 900;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.c-showcase-hero__product-name a {
  color: inherit;
  text-decoration: none;
}
.c-showcase-hero__brand {
  display: block;
  margin-top: 7px;
  color: var(--sub);
  font-size: 12px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.c-showcase-hero__comment {
  margin: 10px 0 0;
  color: #555;
  font-size: 13px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.c-showcase-hero__price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 13px;
}
.c-showcase-hero__rate {
  color: var(--accent);
  font-size: 15px;
  font-weight: 900;
}
.c-showcase-hero__price b {
  color: #111;
  font-size: 19px;
  font-weight: 900;
  letter-spacing: -.03em;
}
.c-showcase-hero__price small {
  font-size: 12px;
  font-weight: 800;
}

.c-showcase-hero__controls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 12px;
  z-index: 5;
  margin-top: 0;
  pointer-events: none;
}
.c-showcase-hero__controls > * {
  pointer-events: auto;
}
.c-showcase-hero__controls .c-carousel__btn {
  background: rgba(255,255,255,.84);
  backdrop-filter: blur(8px);
}
.c-showcase-hero__controls .c-carousel__page {
  display: none;
}

@media (min-width: 480px) {
  .c-showcase-hero__viewport {
    /* 16/9 로 복귀. max-height 로 자르면 폭이 비율에 끌려 좁아지므로 자르지 않는다.
       → 폭은 컬럼(최대 1024) 꽉, 높이는 16/9 로 폭에 따라 자연스럽게(1024 기준 ~576). */
    aspect-ratio: 16 / 9;
    height: auto;
    min-height: 310px;
    max-height: none;
  }
  .c-showcase-hero__cover {
    width: min(28vw, 150px);
  }
  /* 넓은 화면에서 banner 문구가 hero 폭을 채우도록 넓게, 가운데 균형.
     (좁게 가두면 1024 hero 박스가 비어 보임) */
  .c-showcase-hero__banner-content {
    max-width: min(86%, 860px);
    padding: 44px;
  }
  .c-showcase-hero__slide--banner.is-btn-bottom .c-showcase-hero__banner-content {
    padding-bottom: 104px;
  }
  .c-showcase-hero__slide--banner.is-btn-bottom .c-showcase-hero__btn {
    bottom: 44px;
  }
  .c-showcase-hero__slide--banner.is-btn-bottom.is-btn-align-left .c-showcase-hero__btn {
    left: 44px;
  }
  .c-showcase-hero__slide--banner.is-btn-bottom.is-btn-align-right .c-showcase-hero__btn {
    right: 44px;
  }
  .c-showcase-hero__pattern {
    width: 168px;
    height: 168px;
    right: 28px;
    bottom: 22px;
  }
}

@media (max-width: 360px) {
  .c-showcase-hero {
    margin-left: 10px;
    margin-right: 10px;
  }
  .c-showcase-hero--legacy {
    padding: 20px 16px;
    border-radius: 18px;
  }
  .c-showcase-hero--legacy h1 {
    font-size: 25px;
  }
  .c-showcase-hero--legacy p {
    font-size: 13px;
  }
  .c-showcase-hero__visual {
    width: 86px;
    height: 78px;
  }
  .c-showcase-hero__viewport {
    min-height: 248px;
    border-radius: 22px;
  }
  .c-showcase-hero__banner-content {
    max-width: 82%;
    padding: 15px 25px 36px;
  }
  .c-showcase-hero__slide--banner.is-btn-bottom .c-showcase-hero__banner-content {
    padding-bottom: 76px;
  }
  .c-showcase-hero__slide--banner.is-btn-bottom .c-showcase-hero__btn {
    bottom: 32px;
  }
  .c-showcase-hero__slide--banner.is-btn-bottom.is-btn-align-left .c-showcase-hero__btn {
    left: 25px;
  }
  .c-showcase-hero__slide--banner.is-btn-bottom.is-btn-align-right .c-showcase-hero__btn {
    right: 25px;
  }
  .c-showcase-hero__banner-content h1 {
    font-size: 25px;
  }
  .c-showcase-hero__product-card {
    gap: 13px;
    padding: 5px 17px 30px;
  }
  .c-showcase-hero__cover {
    width: min(34vw, 112px);
  }
  .c-showcase-hero__product-name {
    font-size: 20px;
  }
  .c-showcase-hero__comment {
    -webkit-line-clamp: 2;
  }
}

/* ───────────────────────────────────────────────
   카테고리 chip nav: PLP 일반 칩 톤
   ─────────────────────────────────────────────── */
.c-showcase-chips {
  margin: 4px 0 14px;
  padding: 0;
  overflow: hidden;
}
.c-showcase-chips__scroller {
  display: flex;
  gap: 9px;
  padding: 4px 12px 10px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.c-showcase-chips__scroller::-webkit-scrollbar { display: none; }

.c-showcase-chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -.2px;
  color: #222;
  background: #fff;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.c-showcase-chip:active,
.c-showcase-chip.is-active {
  border-color: rgba(255,107,107,.35);
  background: rgba(255,107,107,.07);
  color: var(--accent);
}

/* ───────────────────────────────────────────────
   NSS 섹션 톤 보정 (쇼케이스 페이지용)
   - inc-nss.css 위에 살짝만 얹는 식
   ─────────────────────────────────────────────── */
.c-nss--showcase {
  margin-top: 6px;
}
.c-showcase-sections {
  background: #f6f6f6;
}

/* ───────────────────────────────────────────────
   쇼케이스 삽입 블럭
   - /showcase/data/*.php 의 blocks 옵션에서 notice/html/callback 으로 사용
   - 기본 디자인은 작고 가볍게, 필요한 경우 각 블럭 HTML에서 추가 클래스를 얹는다.
   ─────────────────────────────────────────────── */
.c-showcase-block {
  margin: 10px 12px 14px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 8px 18px rgba(0,0,0,.05);
}

.c-showcase-notice {
  padding: 14px 15px;
}
.c-showcase-notice b {
  display: block;
  margin-bottom: 4px;
  color: #222;
  font-size: 15px;
  line-height: 1.35;
}
.c-showcase-notice p {
  margin: 0;
  color: var(--sub);
  font-size: 13px;
  line-height: 1.55;
}
.c-showcase-notice a {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-top: 10px;
  color: var(--accent);
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}

/* ───────────────────────────────────────────────
   nssHtml 블럭
   - blocks type='nssHtml'에서 사용
   - 기존 inc-nss의 .c-nss-container / .c-nss-wrapper 여백 규칙을 최대한 그대로 따른다.
   - scroll: 상품 NSS처럼 좌우 스크롤 + 스크롤바 숨김
   - wide/2dan: 스크롤이 아닌 안내 카드 그리드
   ─────────────────────────────────────────────── */

/* html만 직접 넣는 경우: 사용자가 넣은 HTML 구조를 건드리지 않기 위해 block 처리 */
.c-nss--html .c-nss-wrapper--html-free {
  display: block;
  overflow: visible;
  scroll-snap-type: none;
  padding: 0;
  margin: 0;
}

/* cards + scroll: inc-nss 기본 wrapper의 좌우 여백/스크롤 숨김을 그대로 사용 */
.c-nss--html .c-nss-wrapper--html-scroll {
  /* .c-nss-wrapper 기본값 유지: display:flex, overflow-x:auto, padding/margin, scrollbar hidden */
  align-items: stretch;
}
.c-nss--html .c-nss-wrapper--html-scroll .c-showcase-html-card {
  flex: 0 0 min(76vw, 260px);
  scroll-snap-align: start;
}

/* cards + wide: 넓은 안내 카드. 스크롤 없이 container 안쪽 여백에 맞춘다. */
.c-nss--html .c-nss-wrapper--html-wide {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  overflow: visible;
  scroll-snap-type: none;
  padding: 0;
  margin: 0;
}

/* cards + 2dan: 작은 안내 카드를 2단으로 압축 표시 */
.c-nss--html .c-nss-wrapper--html-2dan {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  overflow: visible;
  scroll-snap-type: none;
  padding: 0;
  margin: 0;
}

.c-showcase-html-card {
  min-height: 92px;
  padding: 16px 16px;
  border-radius: 18px;
  background: linear-gradient(135deg, #fff 0%, #fff7f7 54%, #f8f9fb 100%);
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 8px 18px rgba(0,0,0,.05);
  box-sizing: border-box;
}
.c-showcase-html-card em {
  display: inline-flex;
  align-items: center;
  margin-bottom: 7px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(226, 73, 73, .08);
  color: var(--accent);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}
.c-showcase-html-card b {
  display: block;
  margin-bottom: 5px;
  color: #222;
  font-size: 15px;
  line-height: 1.35;
}
.c-showcase-html-card p {
  margin: 0;
  color: var(--sub);
  font-size: 13px;
  line-height: 1.55;
}
.c-showcase-html-card a {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-top: 12px;
  padding: 9px 12px;
  border-radius: 999px;
  color: #fff;
  background: var(--accent);
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}

/* 기존 html 예제용 클래스: html 직접 입력 블럭에서도 계속 사용 가능 */
.c-showcase-wide-html {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 92px;
  padding: 16px 16px;
  border-radius: 18px;
  background: linear-gradient(135deg, #fff 0%, #fff7f7 54%, #f8f9fb 100%);
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 8px 18px rgba(0,0,0,.05);
}
.c-showcase-wide-html b {
  display: block;
  margin-bottom: 5px;
  color: #222;
  font-size: 15px;
  line-height: 1.35;
}
.c-showcase-wide-html p {
  margin: 0;
  color: var(--sub);
  font-size: 13px;
  line-height: 1.55;
}
.c-showcase-wide-html a {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 9px 12px;
  border-radius: 999px;
  color: #fff;
  background: var(--accent);
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}

@media (min-width: 560px) {
  .c-nss--html .c-nss-wrapper--html-wide {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 420px) {
  .c-showcase-wide-html {
    align-items: flex-start;
    flex-direction: column;
  }
}
@media (max-width: 360px) {
  .c-nss--html .c-nss-wrapper--html-2dan {
    grid-template-columns: 1fr;
  }
}

.c-showcase-hero__cover--book {
  width: min(31vw, 116px);
}
@media (max-width: 360px) {
  .c-showcase-hero__cover--book {
    width: min(30vw, 104px);
  }
}