@font-face {
  font-family: "SamsungSharpSans";
  src:
    url("../font/SAMSUNGSHARPSANS-BOLD.otf") format("opentype"),
    url("../font/SAMSUNGSHARPSANS-BOLD.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "SamsungSharpSans";
  src:
    url("../font/SAMSUNGSHARPSANS-MEDIUM.otf") format("opentype"),
    url("../font/SAMSUNGSHARPSANS-MEDIUM.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "SamsungSharpSans";
  src:
    url("../font/SAMSUNGSHARPSANS-REGULAR.otf") format("opentype"),
    url("../font/SAMSUNGSHARPSANS-REGULAR.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "SamsungSSHead";
  src: url("../font/SamsungSSHead-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "SamsungSSHead";
  src: url("../font/SamsungSSHead-Medium.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "SamsungSSHead";
  src: url("../font/SamsungSSHead-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "SamsungSSHead";
  src: url("../font/SamsungSSHead-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  font-family: "SamsungSharpSans", sans-serif;
}

.wrap {
  padding-bottom: 21.805556vw;
  overflow-x: hidden;
}

.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 13.888889vw;
  padding: 29.3055555556vw 0 49.583333vw;
}

.page-title-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3.472222vw;
  text-align: center;
  padding: 0 6.944444vw;

  .sup {
    font-size: 4.722222vw;
    font-weight: 700;
  }

  .title {
    font-size: 9.722222vw;
    font-weight: 700;
  }

  .divider {
    width: 6.944444vw;
    height: 0.277778vw;
    background-color: #000;
  }
}

.content-title-box {
  display: flex;
  flex-direction: column;
  gap: 5.555556vw;

  .title {
    font-size: 6.944444vw;
    font-weight: 700;
  }

  .discretion {
    font-size: 4.166667vw;
    font-family: "SamsungSSHead";
    letter-spacing: -0.05vw;
  }
}

body .swiper {
  overflow: visible;
}

.page-swiper {
  width: 100%;

  .page-container {
    display: flex;
    flex-direction: column;
    gap: 13.888889vw;
    padding: 0 6.944444vw;
  }
}

.swiper-autoheight>.swiper-wrapper {
  align-items: stretch;
}

.story-swiper-box {
  width: 100%;
  isolation: isolate;

  &:has(.swiper-pagination) {
    margin-bottom: 17.222222vw;
  }

  --swiper-pagination-bullet-size: 3.333333vw;
  --swiper-pagination-color: #000000;
  --swiper-pagination-bullet-inactive-color: #d9d9d9;
  --swiper-pagination-bullet-inactive-opacity: 1;
  --swiper-pagination-top: auto;
  --swiper-pagination-bottom: auto;
  --swiper-navigation-size: 6.11111111vw;
  --swiper-navigation-sides-offset: 0;

  >ul {
    &.swiper-wrapper {
      align-items: stretch;
      z-index: 0;
    }

    >li {
      min-height: 85.277778vw;
      display: flex;
      flex-direction: column;
      gap: 4.166667vw;
      padding: 6.944444vw 5.555556vw;
      background-color: #ececec;
      border-radius: 2.777778vw;
      word-break: keep-all;
      word-wrap: break-word;

      &:has(.story-contents.bottom) {
        padding-bottom: 1.94444444vw;
      }

      &:has(.story-main) {
        justify-content: center;
      }

      .story-device-image {
        display: flex;
        flex-direction: column;
        align-items: center;

        margin-bottom: 2.77777778vw;

        img {
          width: 31.5278vw;
          height: auto;
        }
      }

      .story-device-name {
        font-weight: 700;
        color: #000;

        .year {
          font-size: 6.25vw;
        }

        .name {
          font-size: 4.861112vw;
        }
      }

      .story-stage-box {
        width: fit-content;
        font-size: 4.166667vw;
        font-weight: 700;
        color: #fff;
        border-radius: 138.75vw;
        background-color: #2589f9;
        padding: 0.833333vw 2.777778vw;
      }

      .story-image {
        width: 100%;
        background-color: #d9d9d9;
        border-radius: 2.77777778vw;
        overflow: hidden;
        margin-top: auto;

        img {
          width: 100%;
          height: auto;
        }

        &+.story-contents {
          margin-top: -3.19444444vw;
        }
      }

      .story-description {
        display: inline-block;
        font-size: 5.555556vw;
        font-weight: 700;
        color: #2589f9;
      }

      .story-contents {
        font-family: "SamsungSSHead";
        font-size: 3.888889vw;
        font-weight: 400;
        color: #000;
      }

      .story-main {
        display: flex;
        flex-direction: column;
        gap: 8.333333vw;

        .title {
          font-size: 8.333333vw;
          font-weight: 700;
          color: #2589f9;

          &+.since:before {
            content: "";
            display: block;
            width: 5.833333vw;
            height: 0.277778vw;
            background-color: #000000;
            position: absolute;
            top: -4.027778vw;
            left: 0;
          }
        }

        .since {
          font-size: 6.944444vw;
          font-weight: 700;
          color: #000;
          position: relative;
        }
      }

      .story-year {
        font-size: 8.333333vw;
        font-weight: 700;
      }
    }
  }

  .swiper-pagination {
    padding: 6.944444vw 0;

    .swiper-pagination-bullet {
      vertical-align: middle;
    }
  }

  .swiper-button-prev {
    transform: translate3d(-50%, 0, 0);
  }

  .swiper-button-next {
    transform: translate3d(50%, 0, 0);
  }

  :is(.swiper-button-prev, .swiper-button-next) {
    width: auto;
    height: auto;
    z-index: 2;
    backface-visibility: hidden;
    will-change: transform;
    padding: 10px;
    margin-top: calc(-5px - var(--swiper-navigation-size) / 2) !important;

    &.swiper-button-disabled {
      opacity: 0;
    }

    img {
      width: var(--swiper-navigation-size);
      height: auto;
    }
  }
}

.nav {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 99;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3.922222vw;
  padding: 1.88194444vw 3.4722vw;
  width: 100%;
  background-color: #000;
  transform: translateY(0);
  transition: transform 0.45s ease;
  will-change: transform;

  &.nav-hidden {
    transform: translateY(100%);
  }

  .nav-list {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2.777vw;
  }

  .nav-item {
    position: relative;
    font-family: "SamsungSSHead";
    font-size: 3.1944vw;
    font-weight: 700;
    color: #9f9f9f;
    text-align: center;

    &.active {
      color: #fff;
    }

    &+.nav-item::before {
      content: "";
      position: absolute;
      top: 50%;
      left: -2.777vw;
      transform: translateY(-50%);
      width: 0.138889vw;
      height: 6.902778vw;
      background-color: #9f9f9f;
    }
  }

  .copyright {
    font-family: "SamsungSSHead";
    font-size: 2.5vw;
    color: #9f9f9f;
    text-align: center;
  }
}

.ai-docent-box {
  position: fixed;
  display: flex;
  flex: 1 0 auto;
  gap: 1.9444444444vw;
  align-items: center;
  background: #F0F0F0;
  height: 8.4722222222vw;
  padding: 1.6666666667vw 3.75vw 1.5277777778vw;
  border-radius: 4.2361111111vw;
  top: 6.9444444444vw;
  left: 17.5vw;
  right: 17.3611111111vw;
  z-index: 99;
}

.ai-docent-info {
  display: flex;
  gap: 2.08333333333vw;
  align-items: center;
  width: 100%;
}

.ai-docent-info img {
  width: 3.8888888889vw;
}

.ai-docent-info span {
  color: #000;
  font-family: 'SamsungSSHead', san-serif;
  font-size: 3.6111111111vw;
  font-weight: 700;
}

.docent-step-box .docent-step {
  display: inline-flex;
  gap: 1.9444444444vw;
  align-items: center;
}

.docent-step-box .docent-step.hide {
  display: none;
}

.ai-docent-btn {
  flex: 0 0 auto;
  color: #fff;
  width: 13.3333333333vw;
  height: 5.2777777778vw;
  background: #000;
  border-radius: 2.6388888889vw;
  font-family: 'SamsungSSHead', san-serif;
  font-size: 3.6111111111vw;
  font-weight: 600;
}

.ai-docent-btn.playing {
  background: #2589F9;
}