/* 일반 스토리 */
.story-wrapper {
  height: 100%;
}

.story-wrapper .story-text {
  position: relative;
  padding: 3cqw;
  line-height: 1.35;
  z-index: 2;
  color: #777
}

.story-wrapper img.character {
  position: absolute;
  right: -40px;
  bottom: 0px;
  height: 90%;
  z-index: 0;
}

.story-wrapper .big {
  font-size: 2.7cqw;
  color: #000;
}

.story-wrapper .big .high {
  font-weight: 600;
}

/* 비디오 */
.story-wrapper .story-video {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.story-wrapper .story-video video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* 다이얼로그 */
.story-wrapper .story-dialogue {
  width: 100%;
  position: absolute;
  bottom: 0;
  height: 45%;
  padding: 2rem 5rem;
  background: linear-gradient(to bottom,
      rgba(13, 13, 13, 0.0) 0%,
      rgba(13, 13, 13, 0.3) 30%,
      rgba(38, 38, 38, 1) 100%);
  color: #fff;
}

.story-wrapper .story-dialogue .dialogue-speaker {
  background: url('/assets/image/dialogue-icon.svg');
  background-repeat: no-repeat;
  background-position: left center;
  background-size: auto 5.5cqw;
  border-bottom: 1px #fff dashed;
  padding: 1.5cqw 3cqw 1.5cqw 5.5cqw;
  margin-bottom: 1.5cqw;
  font-size: 2cqw;
}

.story-wrapper .story-dialogue .dialogue-text {
  padding: 0 2cqw;
  line-height: 1.7;
}

/* 준비물 */
.unboxing-scene {
  height: 100%;
  padding: 5cqw;
  align-items: center;
  justify-content: center;
  display: flex;
  flex-wrap: wrap;
}

.unboxing-scene .item {
  width: 12cqw;
  text-align: center;

  clip-path: inset(100% 0 0 0);
  animation: wipe 0.5s ease-out forwards;
}

.unboxing-scene .item img {
  display: block;
  width: 12cqw;
  height: 12cqw;
  filter: drop-shadow(0px 0px 0.5cqw rgba(0, 0, 0, 0.5));
}

.unboxing-scene .item .label {
  font-weight: bold;
  font-size: 1.5cqw;
  color: #fff;
  text-shadow:
    0px 0px 6px rgba(0, 0, 0, 0.76);
}

/* 퀴즈 */
.quiz-wrapper {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  /* 배경 어둡게 가리기 */
  background: linear-gradient(to bottom,
      rgba(13, 13, 13, 0) 0%,
      rgba(13, 13, 13, 0.3) 20%,
      rgba(38, 38, 38, 1) 100%);

  color: white;
}

.quiz-wrapper .quiz-options {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 50%;
  margin-bottom: 10%;
}

.quiz-wrapper .option {
  padding: 1.5cqw 0;
  border: none;
  font-size: 1.7cqw;
  font-weight: 600;
  background: radial-gradient(circle at center,
      rgba(255, 255, 255, 1) 0%,
      rgba(255, 255, 255, 0.8) 25%,
      rgba(255, 255, 255, 0) 100%);
  color: #454655;
  cursor: pointer;
  transition: all 0.25s ease;
}

.quiz-wrapper .option:hover {
  transform: translateY(-3px);
}

.quiz-wrapper .quiz-question {
  position: absolute;
  bottom: 8cqw;
  font-size: 2.3cqw;
  font-weight: 600;
  text-align: center;
  color: #262626;
  text-shadow:
    -2px -2px 0 white,
    2px -2px 0 white,
    -2px 2px 0 white,
    2px 2px 0 white,
    0px -2px 0 white,
    0px 2px 0 white,
    -2px 0px 0 white,
    2px 0px 0 white;
}

.quiz-wrapper .highlight {
  color: #2F80ED;
}

/* 게임 */
.game-wrapper {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #eee;
}

.game-wrapper .bg1 {
  background-color: #fff;
  box-shadow: 0px 0px 35px rgba(0, 0, 0, 0.11);
  height: calc(100% - 2cqw);
  width: calc(100% - 2cqw);
  border-radius: 1.5cqw;
  position: relative;
}

.game-wrapper .bg2 {
  background-color: #fff;
  box-shadow: 0px 0px 35px rgba(0, 0, 0, 0.11);
  height: calc(100% - 1cqw);
  width: 100%;
  border-radius: 1.5cqw;
  position: absolute;
  bottom: 0;
}

.game-wrapper .bg3 {
  background-color: #fff;
  box-shadow: 0px 0px 35px rgba(0, 0, 0, 0.11);
  height: calc(100% - 1cqw);
  width: 100%;
  border-radius: 1.5cqw;
  position: absolute;
  bottom: 0;
  padding: 1cqw;
  display: flex;
}

.game-wrapper .stepper {
  background-color: #454656;
  box-shadow: 0px 0px 35px rgba(0, 0, 0, 0.11);
  border-radius: 1.5cqw;
  padding: 1cqw;
  display: inline-flex;
  flex-direction: column;
  color: #fff;
  height: calc(100% - 2cqw);
  text-align: center;
  margin: 1cqw;
}

.game-wrapper .stepper .stepperHeader img {
  width: 3cqw;
  margin-top: 0.2cqw;
}

.game-wrapper .stepper .stepperList {
  flex: 1;
  width: 5cqw;
  font-size: 1.3cqw;
  display: grid;
  grid-template-rows: repeat(9, 1fr);
  align-items: center;
  position: relative;
  container-type: size;
}

.game-wrapper .stepper .stepperList .step {
  z-index: 10;
}

.game-wrapper .stepper .stepperList .activeIndicator {
  background-color: #0061E0;
  min-height: 13cqh;
  min-width: 170cqw;
  font-size: 30cqw;
  font-weight: 600;
  border: 2px solid #fff;
  border-radius: 20px;
  position: absolute;
  left: 50%;
  top: 0;
  white-space: nowrap;
  display: flex;
  justify-content: center;
  align-items: center;
}

.game-wrapper .contentWrap {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.game-wrapper .contentWrap .title {
  background-color: #9498CF;
  color: #fff;
  width: 80%;
  height: 10%;
  border-radius: 20px;
  margin: 1cqw auto;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 700;
}

.game-wrapper .contentWrap .content {
  width: 100%;
  flex: 1;
}

.game-wrapper .contentWrap .content img {
  display: inline-block;
  position: absolute;
  cursor: pointer;
}

.game-wrapper .contentWrap .content img.center {
  display: inline-block;
  position: absolute;
  left: 54%;
  transform: translateX(-50%);
  cursor: default;
  height: 80%;
}

/* 다이얼로그2 */
.story-wrapper .dialogue-image {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 90%;
  container-type: size;
}

/* 비디오2 */
.video2-wrapper {
  background: linear-gradient(90deg, #B0CEFF 0%, #BEC6DD 23%, #D5D5DE 100%);
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.video2-wrapper .story-video2 {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 97%;
  height: 93%;
  background: #fff;
  border-radius: 20px;
  padding: 20px;
}

.video2-wrapper .story-video2 .video-header {
  display: flex;
  height: 5cqw;
  width: 97%;
  align-items: center;
  justify-content: space-between;
}

.video2-wrapper .story-video2 .video-header img {
  height: 3cqw;
}

.video2-wrapper .story-video2 .video-header img:nth-child(1) {
  padding-left: 1.8cqw;
}

.video2-wrapper .story-video2 .video-header .video-header-search-box {
  border: 1px solid #747474;
  height: 60%;
  border-radius: 38px / 50%;
  flex: 1;
  margin: 0.5cqw 2cqw;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.video2-wrapper .story-video2 .video-header .video-header-search-box .video-header-search-text {
  font-size: 1.7cqw;
  padding-left: 1.7cqw;
  color: #787878;
}

.video2-wrapper .story-video2 .video-header .video-header-search-box .video-header-search-icon {
  background-color: #0D0D0D;
  padding: 0.2cqw 0.8cqw;
}

.video2-wrapper .story-video2 .video-content {
  width: 97%;
  flex: 1;
  height: 88%;
  display: flex;
  align-items: flex-start;
}

.video2-wrapper .story-video2 .video-content img {
  width: 5cqw;
  margin-right: 3cqw;
}

.video2-wrapper .story-video2 .video-content video {
  object-fit: contain;
  height: 100%;
  flex: 1;
}

/* 게임 미니스텝있는 경우 */
.game-wrapper .contentWrap .miniStepWrap {
  width: 90%;
  margin: 0 5%;
  height: 100%;
}

.game-wrapper .contentWrap .miniStepWrap .miniStepImages {
  width: 100%;
  height: 70%;
  position: relative;
}

.game-wrapper .contentWrap .miniStepWrap .miniStepDescriptions {
  width: 100%;
  height: 30%;
  position: relative;
}

.game-wrapper .contentWrap .miniStepWrap .miniStepImageWrap {
  height: 90%;
  position: absolute;
  display: inline-flex;
  justify-content: center;
  align-items: flex-end;
  container-type: size;
}

.game-wrapper .contentWrap .miniStepWrap .miniStepDescriptions .miniStepLine {
  position: absolute;
  top: 0;
  transform: translateY(-50%);
  background: #0061E0;
  opacity: 0.25;
  height: 1cqw;
  width: 100%;
}

.game-wrapper .contentWrap .miniStepWrap .miniStepDescriptions .miniStepBadge {
  font-size: 1.5cqw;
  position: absolute;
  top: 0;
  transform: translate(-50%, -50%);
  width: 2cqw;
  height: 2cqw;
  border-radius: 2cqw;
  background: #0061E0;
  color: #fff;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  animation: fadeIn 0.6s ease-out 0.8s forwards;
}

.game-wrapper .contentWrap .miniStepWrap .miniStepDescriptions .miniStepDescription {
  font-size: 1.4cqw;
  position: absolute;
  top: 4.3cqw;
  transform: translate(-50%, -50%);
  text-align: center;
  word-break: keep-all;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  animation: fadeIn 0.6s ease-out 0.8s forwards;
  padding: 0 2cqw;
}

/* 준비중 */
.coming-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--bg-start), var(--bg-end));
}

.coming-container {
  text-align: center;
  padding: 60px 50px;
  background: #ffffff;
  border-radius: 24px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 10px 40px rgba(59, 130, 246, 0.08);
  width: 480px;
  max-width: 92%;
  opacity: 0;
  transform: translateY(18px);
  animation: fadeUp 0.6s ease-out forwards;
}

.coming-logo {
  font-size: 13px;
  letter-spacing: 2px;
  color: var(--text-sub);
  margin-bottom: 24px;
}

.coming-title {
  font-size: 30px;
  font-weight: 600;
  margin-bottom: 16px;
  color: var(--text-main);
}

.coming-highlight {
  color: var(--coming-primary);
}

.coming-desc {
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-sub);
}

.coming-footer {
  margin-top: 36px;
  font-size: 12px;
  color: #94a3b8;
}