/*
 * productSpotlight
 * showcase introCards와 같은 모양을 PLP/showcase에서 공용으로 사용합니다.
 */
.c-product-spotlight {
  min-width: 0;
  margin: 5px 0 5px;
  padding: 16px 0 16px;
}
.c-product-spotlight__header {
  margin: 0 0 10px;
  padding: 0 24px;
}
.c-product-spotlight__title {
  margin: 0;
  color: #151817;
  font-size: 16px;
  line-height: 1.3;
  letter-spacing: -.035em;
  font-weight: 700;
}
.c-product-spotlight__desc {
  margin: 5px 0 0;
  color: #69706d;
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: -.02em;
  white-space: pre-line;
}
.c-product-spotlight__header > .c-product-spotlight__desc:first-child { margin-top: 0; }
.c-product-spotlight__scroller {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(278px, 84vw);
  gap: 10px;
  padding: 0 16px 3px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 16px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  background: transparent;
}
.c-product-spotlight__scroller::-webkit-scrollbar { display: none; }

.c-product-spotlight__card {
  --ps-card-bg: #fefefe;
  position: relative;
  isolation: isolate;
  display: grid;
  min-height: 164px;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(21,24,23,.08);
  border-radius: 18px;
  background: var(--ps-card-bg);
  box-shadow: 0 8px 20px rgba(21,24,23,.055);
  color: #151817;
  box-sizing: border-box;
  text-decoration: none;
  scroll-snap-align: start;
}
.c-product-spotlight__card.is-tone-paper { --ps-card-bg: #fbfaf7; }
.c-product-spotlight__card.is-tone-white { --ps-card-bg: #fff; }
.c-product-spotlight__card.is-tone-ivory { --ps-card-bg: #f7f4ec; }
.c-product-spotlight__card.is-tone-sand { --ps-card-bg: #ece5d8; }
.c-product-spotlight__card.is-tone-mint { --ps-card-bg: #dfece7; }
.c-product-spotlight__card.is-tone-sage { --ps-card-bg: #eef3ef; }
.c-product-spotlight__card.is-tone-blue { --ps-card-bg: #e1eaf0; }
.c-product-spotlight__card.is-tone-mist { --ps-card-bg: #eef1f7; }
.c-product-spotlight__card.is-tone-rose { --ps-card-bg: #f2e3e5; }
.c-product-spotlight__card.is-tone-lavender { --ps-card-bg: #e9e5f0; }
.c-product-spotlight__card.is-tone-slate { --ps-card-bg: #e5e9ec; }
.c-product-spotlight__card:active { transform: scale(.99); }

.c-product-spotlight__card.is-image-side-right {
  grid-template-columns: minmax(0, 1fr) minmax(0, var(--ps-image-side-width, max(108px, 42%)));
}
.c-product-spotlight__card.is-image-side-left {
  grid-template-columns: minmax(0, var(--ps-image-side-width, max(108px, 42%))) minmax(0, 1fr);
}
.c-product-spotlight__card.is-image-side-left .c-product-spotlight__copy { grid-column: 2; }
.c-product-spotlight__card.is-image-side-left .c-product-spotlight__visual {
  grid-column: 1;
  grid-row: 1;
}

.c-product-spotlight__copy {
  position: relative;
  z-index: 2;
  display: flex;
  min-width: 0;
  min-height: inherit;
  padding: 21px 20px 18px;
  box-sizing: border-box;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}
.c-product-spotlight__card.has-image-cut-gap.is-image-side-right .c-product-spotlight__copy {
  padding-right: var(--ps-image-cut-gap);
}
.c-product-spotlight__card.has-image-cut-gap.is-image-side-left .c-product-spotlight__copy {
  padding-left: var(--ps-image-cut-gap);
}
.c-product-spotlight__copy em {
  display: inline-flex;
  width: max-content;
  max-width: 100%;
  margin-bottom: 8px;
  padding: 0;
  background: transparent;
  color: #1b5a4e;
  font-size: 8px;
  line-height: 1.2;
  font-style: normal;
  font-weight: 900;
  letter-spacing: .14em;
}
.c-product-spotlight__copy b {
  display: block;
  max-width: 100%;
  color: inherit;
  font-size: 21px;
  line-height: 1.2;
  letter-spacing: -.045em;
  font-weight: 700;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.c-product-spotlight__copy p {
  max-width: 100%;
  margin: 8px 0 0;
  color: #626a66;
  font-size: 12px;
  line-height: 1.55;
  letter-spacing: -.025em;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.c-product-spotlight__link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 15px;
  color: #151817;
  font-size: 10px;
  font-weight: 900;
}
.c-product-spotlight__link i {
  color: #1b5a4e;
  font-size: 15px;
  line-height: 1;
  font-style: normal;
}

.c-product-spotlight__visual {
  position: relative;
  z-index: 1;
  align-self: stretch;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  padding: var(--ps-image-padding, 0px);
  background: rgba(255,255,255,.38);
  box-sizing: border-box;
}
.c-product-spotlight__card.is-image-side-right .c-product-spotlight__visual {
  -webkit-clip-path: polygon(var(--ps-image-cut, 0%) 0, 100% 0, 100% 100%, 0 100%);
  clip-path: polygon(var(--ps-image-cut, 0%) 0, 100% 0, 100% 100%, 0 100%);
}
.c-product-spotlight__card.is-image-side-left .c-product-spotlight__visual {
  -webkit-clip-path: polygon(0 0, var(--ps-image-cut-end, 100%) 0, 100% 100%, 0 100%);
  clip-path: polygon(0 0, var(--ps-image-cut-end, 100%) 0, 100% 100%, 0 100%);
}
.c-product-spotlight__visual img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: var(--ps-image-fit, cover);
  object-position: var(--ps-image-position, center center);
}

@media (min-width: 768px) {
  .c-product-spotlight__scroller {
    grid-auto-columns: minmax(300px, 360px);
  }
}