/* 마케팅 팝업(2026-10-16 임시 틀): 모바일은 아래에서 올라오는 시트, PC는 가운데 카드 */
.ssw-popup[hidden] { display: none; }
.ssw-popup { position: fixed; inset: 0; z-index: 99990; display: flex; align-items: flex-end; justify-content: center; }
.ssw-popup__shade { position: absolute; inset: 0; background: rgba(15, 18, 22, 0.55); opacity: 0; transition: opacity .25s ease; }
.ssw-popup.is-open .ssw-popup__shade { opacity: 1; }
.ssw-popup__sheet {
  position: relative; width: 100%; max-width: 480px; background: transparent; border-radius: 20px 20px 0 0; overflow: visible; /* 투명 PNG가 시트 밖으로 튀어나오도록 */
  transform: translateY(100%); transition: transform .3s cubic-bezier(.2, .8, .2, 1); box-shadow: 0 -8px 30px rgba(0, 0, 0, .18);
}
.ssw-popup.is-open .ssw-popup__sheet { transform: translateY(0); }
.ssw-popup__stagewrap { position: relative; }
.ssw-popup__stage { position: relative; overflow: hidden; border-radius: 20px 20px 0 0; background: #fff; }
.ssw-popup__track {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.ssw-popup__track::-webkit-scrollbar { display: none; }
.ssw-popup__slide {
  flex: 0 0 100%; scroll-snap-align: center; aspect-ratio: 3 / 2; display: block; text-decoration: none; color: inherit;
  position: relative; overflow: hidden;
}
.ssw-popup__slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ssw-popup__card { height: 100%; box-sizing: border-box; padding: 18px 20px 18px; display: flex; flex-direction: column; justify-content: flex-start; gap: 6px; }
.ssw-popup__tag { align-self: flex-start; padding: 3px 9px; border-radius: 999px; background: rgba(255, 255, 255, .85); font-size: 11px; font-weight: 800; letter-spacing: .02em; }
.ssw-popup__title { margin: 4px 0 0; font-size: 21px; line-height: 1.25; font-weight: 900; white-space: pre-line; }
.ssw-popup__sub { margin: 0; font-size: 12px; line-height: 1.45; opacity: .78; white-space: pre-line; }
.ssw-popup__cta { margin-top: auto; align-self: flex-start; padding: 7px 14px; border-radius: 999px; background: #15191f; color: #fff; font-size: 12px; font-weight: 800; }
.ssw-popup__count {
  position: absolute; right: 12px; bottom: 10px; padding: 2px 9px; border-radius: 999px; background: rgba(0, 0, 0, .55); color: #fff;
  font-size: 11px; font-weight: 700; pointer-events: none;
}
.ssw-popup__foot { border-radius: 0; display: flex; align-items: center; justify-content: flex-end; padding: 8px 16px calc(8px + env(safe-area-inset-bottom)); background: #fff; font-size: 13px; }
.ssw-popup__foot button { border: 0; background: none; padding: 6px 2px; font: inherit; color: #15191f; cursor: pointer; }
.ssw-popup__foot-right { display: flex; align-items: center; gap: 12px; }
.ssw-popup__foot-right i { width: 1px; height: 12px; background: #cfd5db; }
.ssw-popup__toast {
  position: absolute; left: 50%; bottom: 62px; transform: translateX(-50%); padding: 8px 14px; border-radius: 999px; background: rgba(21, 25, 31, .92); color: #fff;
  font-size: 12px; opacity: 0; pointer-events: none; transition: opacity .2s;
}
.ssw-popup__toast.is-on { opacity: 1; }
body.ssw-popup-open { overflow: hidden; }
@media (min-width: 768px) {
  .ssw-popup { align-items: center; }
  .ssw-popup__sheet { border-radius: 20px; max-width: 460px; transform: translateY(24px) scale(.98); opacity: 0; transition: transform .25s ease, opacity .25s ease; }
  .ssw-popup.is-open .ssw-popup__sheet { transform: none; opacity: 1; }
}

/* 입체 抠图: 문구 카드 오른쪽에 투명 PNG를 겹쳐 팝업 위/오른쪽 밖으로 살짝 튀어나오게 한다 */
.ssw-popup__card--pop .ssw-popup__title,
.ssw-popup__card--pop .ssw-popup__sub { max-width: 54%; }
.ssw-popup__pops { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.ssw-popup__pop {
  position: absolute; right: 16px; bottom: 6%; height: 128%; max-width: 44%; object-fit: contain; object-position: right bottom;
  opacity: 0; transform: translateX(28px) scale(.96); transform-origin: right bottom;
  transition: opacity .35s ease, transform .45s cubic-bezier(.2, .8, .2, 1);
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .22));
}
.ssw-popup__pop.is-on { opacity: 1; transform: none; }
.ssw-popup__count { z-index: 3; }
@media (min-width: 768px) {
  .ssw-popup__foot { border-radius: 0 0 20px 20px; }
  .ssw-popup__stage { border-radius: 20px 20px 0 0; }
}