/* BASIC css start */
.page-body { background: #000; padding: 0 35%; }
.allgame { padding: 3% 0;
    overflow: hidden; background: #000 url('https://mothersall.img6.kr/event_notice/winter25/minigame/arcade_bg.jpg') top center/100% no-repeat; }
.allgame img { width: 100%; }
.allgame p, .allgame 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; }
.allgame p { color: #fff; font-size: 1.25em; line-height: 1.75em; text-align: center; }

.allgame .arcade { position: relative; width: 100%; margin: 0 auto; aspect-ratio: 9 / 16;  /* 프레임 이미지 비율에 맞춰 조정 */}

.game-btn { position: absolute; z-index: 3; display: flex; gap: 5%; width: 80%; justify-content: center; align-items: top; 
    top: 55%; left: 13%;
    }
.game-btn .play-btn { width: 60%; margin: 2% 0 0; }
.movie-btn { }
.movie-btn1 { display: grid; grid-template-columns: repeat(3, 1fr); justify-content: center; align-items: center; }
.movie-btn1 > img { margin: -20%; }
.movie-btn2 { display: grid; grid-template-columns: repeat(2, 1fr); justify-content: center; align-items: center; width: 66%; margin: -10% 14% 0 9%; }

/* 활성화된(on) 버튼에 적용할 클래스 */
.btn-active {
  animation: blinkActive 0.6s infinite alternate;
  filter: brightness(1.2);
}

/* 밝아졌다 → 원래대로 반복 */
@keyframes blinkActive {
  0%   { filter: brightness(1.0); }
  100% { filter: brightness(1.2); }
}

.machine-frame { position: absolute; z-index: 2; }
.movie-wrap {
  position: relative;
  top: 70px;
}

/* 모든 movie 숨기기 + 겹치게 */
.movie-wrap > div {
  display: none;
  position: relative; width: 100%;
  inset: 0; /* 상하좌우 0, 부모 안에서 딱 맞게 */
}

/* 활성화된 것만 보이도록 */
.movie-wrap > div.active {
  display: block;
}

.movie-wrap video { 
  width: 80%;
  margin: 10% 10%;
}

.game_guide { position: absolute; z-index: 3; top: 58%; left: 21%; width: 60%; }
.game_guide > p { text-align: left; }
.game_guide .tit { font-size: 1.5vw; font-weight: 700; }
.game_guide .logline { font-size: 0.8vw; color: #a0a0a0; margin-top: -2%; line-height: 1vw; }

.btn-supp { margin: 3% 5%; }
.btn-supp > div { display: flex; gap: 10px; padding: 3% 0; }
.btn-supp > p { font-weight: 700 }

.allgame .game_steps { margin: 17% 0 10%; }
.allgame .game_steps .swiper-container { padding: 5%; }
.allgame .game_steps .swiper-slide { }
.allgame .game_steps .swiper-slide > img { border-radius: 25px; border: 1px solid #bbb; }
.allgame .game_steps > a  { color: #000; font-size: 1.35em; line-height: 1.5em; text-align: center; font-weight: 700; display: inline-block; padding: 5% 9%;
    background: linear-gradient(90deg, #ff3f6f, #a700ff); margin: 5%; border-radius: 12px; border: 2px solid #000; width: 72%;
    box-shadow: 0 0 20px rgba(28, 18, 32, 0.5),
                0 0 30px rgba(28, 18, 32, 0.3);
    }

.allgame .gifts { margin: 20% 0 10%; }
.allgame .gifts > p { margin-top: -47%; }

.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%; padding: 25%;
  transition: transform 0.6s ease-out; /* 추가: 회전도 부드럽게 */
}


.allgame_error { margin: 23% 0 10%;   background: linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0%,     /* 위쪽 투명 */
    rgba(0,0,0,0.85) 70%, /* 거의 검정 */
    #000 100%             /* 완전 검정 */
  ); }
.error_cmm { font-size: 1em !important; font-weight: 600; background: #362631; border-radius: 99px; display: block; text-align: center; margin: 3% auto 0; padding: 2% 0; width: 80%; }


.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;
    }


.allgame_last { width: 30% !important; margin: 2% 35%; }
.allgame_last_btn { width: 60% !important; margin: 7% 20% 2%; }
/* BASIC css end */