/* BASIC css start */
@font-face {
    font-family: 'YeogiOttaeJalnan';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_four@1.2/JalnanOTF00.woff') format('woff');
    font-weight: normal;
    font-display: swap;
}

#mamigame_steps, #mamigame_gifts, #mamigame_error { scroll-margin-top: 120px; }
#btn_play { scroll-margin-top: 360px; }


.mamigame { overflow: hidden; background: #100d06; padding: 5% 35%; }
.mamigame::before { margin: 0 35%; 
  content: "";
  position: absolute;
  inset: 0;
  background: url('https://mothersall.img6.kr/event_notice/summer26/game/minigame_main_bg.jpg') center -100px/100% no-repeat;
  opacity: 0.75;
  z-index: 0;
}
.mamigame > * {
  position: relative;
  z-index: 1;
}
.mamigame img { width: 100%; }
.mamigame p, .mamigame a { font-family: 'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,"Malgun Gothic","맑은 고딕",helvetica,"Apple SD Gothic Neo",'Noto Sans KR',sans-serif; word-break: keep-all; }
.mamigame p { color: #fff; font-size: 1vw; line-height: 1.5em; text-align: center; }
.mamigame h1 { font-family: 'YeogiOttaeJalnan'; color: #2c8aff; font-size: 3vw; text-shadow: 0 0 10px rgba(0, 0, 0, 1.00); text-align: center; margin-bottom: 5%; }

.keyvtit { width: 60% !important; margin: 1% 20% 5%; }

    .game-slider, .event-slider {
      width: min(100%, 760px);
      overflow: hidden;
    }

    .game-slider__viewport, .event-slider__viewport {
      position: relative;
      overflow: hidden;
      touch-action: pan-y;
    }

    .game-slider__track, .event-slider__track {
      display: flex;
      gap: 0;
      padding-inline: 0;
      transform: translate3d(0, 0, 0);
      transition: transform 420ms cubic-bezier(.22, .7, .2, 1);
      will-change: transform;
    }

    .game-slider__slide, .event-slider__slide {
      flex: 0 0 100%;
      user-select: none;
    }

    .game-slider__slide img, .event-slider__slide img {
      display: block;
      width: 80%;
      margin-inline: auto;
      height: auto;
      border-radius: 24px; border: #fff 2px solid;
      -webkit-user-drag: none;
      /* box-shadow: 0 0 10px rgba(243, 67, 123, 0.45); */
      pointer-events: none;
    }

    .game-slider__dots, .event-slider__dots {
      display: flex;
      justify-content: center;
      gap: 7px;
      margin-top: 18px;
    }

    .game-slider__dot, .event-slider__dot {
      width: 8px;
      height: 8px;
      border: 0;
      border-radius: 999px;
      background: #a0a0a0;
      cursor: pointer;
      transition: width 180ms ease, background 180ms ease;
    }

    .game-slider__dot[aria-current="true"], .event-slider__dot[aria-current="true"] {
      width: 22px;
      background: #fff;
    }
    

.btn_play { margin: 5% 10% 10%; }
.btn_play a { margin: 3% 15%; display: inline-block; }

.game_steps { margin: 20% auto 0; }
.game_steps > a { margin: 7% 25%; display: inline-block; }


.mamigame .gifts { margin: 20% 0 10%; }
.mamigame .gifts > p { }

.ferris-section {
  position: relative;
  width: 100%;
  margin: -15px auto 20%;
  aspect-ratio: 1 / 1;
  overflow: hidden;              /* 일부만 보이도록 */
}

/* 관람차 전체 (원) */
.ferris-wheel {
  position: absolute;
  left: 50%;
  top: 120%;
  width: 160%;                   /* 섹션보다 크게 → 확대된 느낌 */
  height: 160%;
  transform: translate(-50%, -50%) rotate(0deg);
  transform-origin: 50% 50%;
  transition: transform 0.6s ease-out;
}

/* 캐빈(칸) */
.ferris-wheel .cabin {
  position: absolute; 
  width: 50%;                    /* 캐빈 크기 */
  aspect-ratio: 1 / 1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
}

/* 이미지 */
.ferris-wheel .cabin img { width: 50%; margin: 25%; border: #2c8aff 2px solid; border-radius: 16px;
  transition: transform 0.6s ease-out; /* 추가: 회전도 부드럽게 */
}


.mamigame_error { padding: 0 0 10%; margin-top: -25%; background: linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0%,     /* 위쪽 투명 */
    rgba(0,0,0,0.75) 15%, /* 거의 검정 */
    #000 100%             /* 완전 검정 */
  );   }
.mamigame_error > h1 { color: #e40912; }
.error_cmm { font-size: 1em !important; font-weight: 600; background: rgba(255, 255, 255, 0.1);; border-radius: 99px; display: block; text-align: center; margin: 3% 20% 0; padding: 2% 5%; display: block; }


.error_box { background: #1b1b1b; border: 1px solid #535353; border-radius: 12px; margin: 5%; padding: 5%; }
.error_box > h3 { color: #fff; font-size: 1.35em; line-height: 1.75em; font-weight: 500; text-align: left; margin-bottom: 5%; }
.error_box > h3 > span { background: #e40912; padding: 1% 4%; border-radius: 5px; font-size: 0.85em !important; margin-right: 2%; }
.error_box > p:nth-child(4) { margin-bottom: 20%; }

.error_box ul { }
.error_box > ul > li { color: #e3e3e3; font-size: 1.1em; line-height: 1.75em; margin: 2% 0 0 5%; padding-left: 8%; position: relative; }
.error_box > ul > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 14px;
  height: 14px;
  background-image: url("https://mothersall.img6.kr/event_notice/summer25/allgame/check_red.png");
  background-size: contain;
  background-repeat: no-repeat;
}

.error_box ul li > button { color: #b4b4b4; background: none; border: none; border-bottom: 1px solid #b4b4b4; font-size: 0.85em; line-height: 1.25em; margin-left: 3%; }

.error_box ul li .detail-content { background: #000; padding: 0.5% 7%; margin: 3% 0; display: none; }

    .browser-section { margin: 10% 0; }
    
    .browser-title {
      display: flex;
      align-items: center;
      font-size: 1.15em;
      font-weight: 600;
      margin-bottom: 5%;
    }

    .browser-title img {
      width: 27px;
      height: 27px;
      margin-right: 10px;
    }

    .steps {
      counter-reset: step-counter;
      list-style: none;
      padding-left: 0;
    }

    .steps li { font-size: 1em !important; line-height: 1.5em;
      counter-increment: step-counter;
      position: relative;
      padding-left: 11%; 
      margin-bottom: 3%;
    }

    .steps li::before {
      content: counter(step-counter, decial); /* 기본적으로 ①②③처럼 출력됨 */
      border: 1px solid #e3e3e3; border-radius: 99px; font-size: 0.65em; line-height: 1em; padding: 1% 2%;
      position: absolute;
      left: 2%; top: 2px;
      color: #e3e3e3;
    }


.mamigame_last { width: 30% !important; margin: 2% 35%; }
.mamigame_last_btn { width: 60% !important; margin: 7% 20% 2%; }


.iframe { width: 90%; padding: 0 5% 10%; background: linear-gradient(
    to bottom,
    #000 0%,
    rgba(0,0,0,0.75) 15%,
    rgba(0,0,0,0) 100%);
    }
.iframe::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url('https://mothersall.img6.kr/event_notice/summer26/game/minigame_main_bg.jpg') center -100px/100% no-repeat;
  opacity: 0.45;
  z-index: 0;
}
.iframe > * {
  position: relative;
  z-index: 1;
}


/* 모달 */
  .modal-overlay {  
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99;
    background: rgba(0, 0, 0, 0.45);
    align-items: center;
    justify-content: center;
  }

  .modal-overlay.is-active {
    display: flex;
  }

  .modal-box {
    box-sizing: border-box;
    padding: 5%;
    background: #2f8df4;
    border-radius: 24px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.85);
    text-align: center;
  }

  .modal-text {
    margin: 0 0 10%;
    color: #fff;
    font-size: 1vw;
    font-weight: 700;
    line-height: 1.75em;
    letter-spacing: 0;
  }

  .modal-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
  }

  .modal-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36%;
    border-radius: 999px;
    background: #fff;
    color: #003b7f;
    font-size: 1vw; padding: 5%;
    font-family: 'YeogiOttaeJalnan' !important;
    text-decoration: none;
    box-shadow: 0 8px 0 #003b7f;
  }

/* BASIC css end */