/* index9 전용 보정. 공용 style.css는 다른 페이지가 함께 쓰므로 여기서만 덮어쓴다. */

.stage {
  background-color: #eceef0;
}

/* 가로 화면 기본값. 여백 없이 화면을 꽉 채운다.
   창이 영상보다 옆으로 길면 위아래가 잘린다. 영상에서 간판은 위 16%, 캐릭터 발은 아래 91% 자리라
   둘 다 남기려면 아치 꼭대기를 조금 내주는 수밖에 없어서 55%로 잡았다.
   값을 내리면 아치가 더 보이는 대신 캐릭터 발이 잘린다. */
.stage__video {
  object-fit: cover;
  object-position: center 55%;
  background-color: transparent;
}

/* 입장하기 버튼을 아래로 내려 캐릭터와 전구를 가리지 않게 한다. */
@media (min-width: 1024px) {
  .stage__inner {
    padding-bottom: 40px !important;
  }
}

/* 세로로 든 화면은 폰이든 태블릿이든 세로 영상을 쓴다.
   가로 영상을 넣으면 좌우가 크게 잘려 문과 담장이 화면 밖으로 나간다. */
@media (orientation: portrait) {
  /* 주소창이 접혔다 펴지는 폰에서 화면이 잘리지 않게 가장 작은 뷰포트 기준으로 잡는다.
     svh를 모르는 구형 브라우저는 이 줄을 무시하고 기존 100dvh/100vh를 쓴다. */
  .stage {
    height: 100svh;
  }

  /* 폭이 넓은 세로 화면(태블릿)은 위아래가 많이 잘린다.
     간판(위 24%)과 캐릭터(아래 75%)가 같이 남는 위치로 맞추고, 영상은 들어올리지 않는다. */
  .stage__video {
    object-fit: cover;
    object-position: center 32%;
    top: 0;
    bottom: 0;
    height: 100%;
  }

  /* 입장하기 원이 화면 가운데쯤에 떠 있으면 캐릭터를 덮는다.
     캐릭터는 화면 높이 75% 근처에서 끝나므로 버튼을 아래로 내리고 조금 줄인다.
     다만 바닥에 딱 붙으면 답답해서 한 뼘 띄운다. 홈바 있는 폰은 그만큼 더 내려간다. */
  .stage__inner {
    padding-bottom: calc(46px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .enter {
    width: 150px !important;
    height: 150px !important;
    margin-bottom: 0 !important;
  }

  .enter__arrows svg {
    width: 23px;
  }

  .enter__label {
    font-size: 22px;
  }
}

/* 폰처럼 길쭉한 세로 화면에서만 영상을 들어올린다.
   비운 바닥은 영상 맨 아랫줄 픽셀로 만든 띠(mo_edge.png)를 늘려 채운다.
   이때 영상은 아래 끝을 띠에 붙여야(bottom) 이음매 색이 정확히 이어진다.
   7/10보다 넓은 세로 화면에서 이 방식을 쓰면 위가 크게 잘려 간판이 사라지므로 여기서만 적용한다. */
@media (orientation: portrait) and (max-aspect-ratio: 7 / 10) {
  .stage {
    background-image: url('/images/video/mo_edge.png?v=20260820d');
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 100% 16%;
  }

  .stage__media {
    bottom: 15%;
  }

  .stage__video {
    object-position: center bottom;
  }
}

.stage__video::-webkit-media-controls,
.stage__video::-webkit-media-controls-panel,
.stage__video::-webkit-media-controls-play-button,
.stage__video::-webkit-media-controls-overlay-play-button,
.stage__video::-webkit-media-controls-start-playback-button {
  display: none !important;
  -webkit-appearance: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}