/* ========================================
   Landing - Story Modals
======================================== */

@font-face {
  font-family: 'TTTogether';
  src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/TTTogetherA.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

.story-modal.show {
  background-color: rgba(0, 0, 0, 0.7);
}

.story-modal .modal-dialog {
  max-width: none;
}

.story-modal .modal-content {
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  height: 90vh;
}

.story-modal .modal-header {
  border: none;
  padding: 0 0 5px 0;
}

.story-modal .modal-header h2 {
  font-family: 'TTTogether';
  font-size: 2.6rem;
  color: var(--color-white);
}

.story-modal .section-story {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: visible;
  padding: 0 0 72px 0; /* reserve space for close button */
}

.story-modal .swiper {
  width: 100%;
}

.story-modal .swiper-wrapper {
  align-items: center;
}

.story-modal .swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
}

.story-modal .figure {
  height: 50vh;
  min-height: 50vh;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.story-modal .swiper-pagination {
  position: static;
  margin-top: 1.2rem;
  line-height: 1;
}

.story-modal .swiper-pagination-bullet {
  background-color: #fff;
  opacity: 0.7;
}

.story-modal .swiper-pagination-bullet-active {
  background-color: #3b36b7;
}

.story-modal .btn-close-story {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 60px;
  height: 60px;
  padding: 0;
  min-width: 0;
  background: transparent url('https://cdn.bitsaving.kr/img/campaign/campaign_story_close.webp') no-repeat center;
  background-size: 60px 60px;
  border: 0;
}

/* Per-story image mapping */
#bitsavingStory .figure-1 { background-image: url(https://cdn.bitsaving.kr/img/landing/modal/modal-film1.webp); }
#bitsavingStory .figure-2 { background-image: url(https://cdn.bitsaving.kr/img/landing/modal/modal-film2.webp); }
#bitsavingStory .figure-3 { background-image: url(https://cdn.bitsaving.kr/img/landing/modal/modal-film3.webp); }
#bitsavingStory .figure-4 { background-image: url(https://cdn.bitsaving.kr/img/landing/modal/modal-film4.webp); }

#userdataStory .figure-1 { background-image: url(https://cdn.bitsaving.kr/img/landing/modal/modal-perf1.webp); }
#userdataStory .figure-2 { background-image: url(https://cdn.bitsaving.kr/img/landing/modal/modal-perf2.webp); }

#techSmartStory .figure-1 { background-image: url(https://cdn.bitsaving.kr/img/landing/modal/modal-smartpygg.webp); }

#techPatentStory .figure-1 { background-image: url(https://cdn.bitsaving.kr/img/landing/modal/modal-patent1.webp); }
#techPatentStory .figure-2 { background-image: url(https://cdn.bitsaving.kr/img/landing/modal/modal-patent2.webp); }
#techPatentStory .figure-3 { background-image: url(https://cdn.bitsaving.kr/img/landing/modal/modal-patent3.webp); }

@media (max-width: 800px) {
  .story-modal .figure {
    height: 40vh;
    min-height: 40vh;
  }
  .story-modal .modal-header h2 {
    font-family: 'TTTogether';
    font-size: 2.2rem;
    color: var(--color-white);
  }
}