/* ==========================================================================
   원더킹 북미 리뉴얼 - 2 / 3 페이지
   --------------------------------------------------------------------------
   디자인 기준 캔버스 : 1920 x 1080 (1페이지 = 1스크롤)
   --u  : 디자인 1px 에 해당하는 실제 길이.
          가로/세로 중 작은 배율을 따라가므로 화면 비율이 달라져도
          한 화면(100vh) 안에 시안 그대로의 비율로 들어간다.
   ========================================================================== */

/* 시안이 화면 끝까지 꽉 차는 구성이라 리뉴얼 페이지에서는 상단 헤더를 쓰지 않는다.
   (레이아웃은 전 페이지 공용이라 이 페이지에서만 감춘다) */
header {
  display: none;
}

/* 풀페이지 : 한 번의 스크롤에 한 섹션씩 넘어가도록 스냅을 건다.
   1024px 이하에서는 섹션이 내용만큼 늘어나는 구성이라 스냅을 끈다(아래 미디어쿼리). */
html {
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
}

/* 좌측 퀵 메뉴 : 현재 섹션 표시 + 클릭 이동.
   켜짐(뿌마 + 컬러 글자) / 꺼짐(동그라미 + 흰 글자) 이 각각 별도 이미지다. */
.renewQuick {
  position: fixed;
  z-index: 9999;
  left: 3.2%;
  /* 화면 정중앙에 두면 3페이지 슬라이더 좌측 화살표와 겹친다.
     화살표 띠(세로 중앙) 한참 위, 시안처럼 화면 위쪽에 둔다. */
  top: 22%;
  transform: translateY(-50%);
}

/* 아이콘들을 세로로 잇는 점선 : 첫 아이콘 중심에서 마지막 아이콘 중심까지 */
.renewQuick::before {
  content: '';
  position: absolute;
  left: 14px;
  top: 13px;
  height: calc(100% - 26px);
  border-left: 2px dotted rgba(255, 255, 255, 0.5);
}

.renewQuick ul {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.renewQuickBtn {
  display: flex;
  align-items: center;
  gap: 8px;
}

.renewQuickBtn:hover .renewQuickLabel img {
  filter: brightness(1.15);
}

/* 점선 위에 아이콘이 얹히도록 */
.renewQuickIcon {
  position: relative;
  z-index: 1;
  flex: 0 0 30px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 원본 크기 그대로 쓴다. 꺼짐 글자가 켜짐보다 작은 것도 시안 그대로다.
   (display 는 아래 상태 전환에서만 다루므로 여기서 건드리지 않는다) */
.renewQuickIcon img {
  width: 30px;
  height: auto;
}

.renewQuickLabelOff {
  width: auto;
  height: 15px;
}

.renewQuickLabelOn {
  width: auto;
  height: 23px;
}

/* 상태 전환 : 활성 항목만 컬러 글자 + 뿌마 아이콘 */
/* 꺼짐 상태는 흰 글자라 3페이지 밝은 하늘 위에서 흐려진다.
   (켜짐 글자는 어두운 외곽선이 이미 들어가 있어 그대로 둔다) */
.renewQuickIconOff,
.renewQuickLabelOff {
  display: block;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.85));
}

.renewQuickIconOn,
.renewQuickLabelOn {
  display: none;
}

.renewQuickBtnOn .renewQuickIconOff,
.renewQuickBtnOn .renewQuickLabelOff {
  display: none;
}

.renewQuickBtnOn .renewQuickIconOn,
.renewQuickBtnOn .renewQuickLabelOn {
  display: block;
}

/* 푸터 정렬 : 시안처럼 저작권 줄을 화면 가운데로 맞춘다.
   (로고+주소 줄은 이미 가운데 정렬. 저작권만 주소 왼쪽 끝에 붙어 있었다)
   푸터 마크업은 전 페이지 공용이라 이 페이지에서만 CSS 로 위치를 잡는다. */
footer {
  position: relative;
  padding-bottom: 58px;
  scroll-snap-align: end;
}

.fTextBottom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 24px;
  text-align: center;
}

.renewWrap {
  --u: min(calc(100vw / 1920), calc(100vh / 1080));
  display: flex;
  flex-direction: column;
  background-color: #efe4c9;
}

.renewPage {
  position: relative;
  width: 100%;
  height: 100vh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* --------------------------------------------------------------------------
   1페이지 : 진입 화면
   -------------------------------------------------------------------------- */
.renewHeroPage {
  background-image: url(/img/renew/p1Bg-4e79266c6d919012c10213c10bcfcaaf.webp);
  background-color: #4c7a3a;
}

/* 시안 1920 x 1080 을 그대로 옮긴 무대.
   아래 좌표/크기는 모두 시안에서 측정한 디자인 px 값이다. */
.renewHeroStage {
  position: relative;
  width: calc(var(--u) * 1920);
  height: calc(var(--u) * 1080);
}

.renewHeroStage img {
  display: block;
  width: 100%;
  height: auto;
}

.renewHeroStage > * {
  position: absolute;
  z-index: 2;
  line-height: 0;
}

/* 로고 : 원본 1078 x 266 을 40% 로 축소 */
.renewHeroLogo {
  left: calc(var(--u) * 745);
  top: calc(var(--u) * 26);
  width: calc(var(--u) * 431);
}

/* 타이틀 : 원본 910 x 294 */
.renewHeroTitle {
  left: calc(var(--u) * 504);
  top: calc(var(--u) * 139);
  width: calc(var(--u) * 910);
}

/* 이벤트 3단계 안내 : 원본 1275 x 391 을 패널 3장(336 / 390 / 527)으로 분할,
   패널 사이 간격은 원본과 동일한 9px */
.renewHeroSteps {
  left: calc(var(--u) * 248);
  top: calc(var(--u) * 456);
  width: calc(var(--u) * 1271);
  display: flex;
  align-items: flex-start;
  gap: calc(var(--u) * 9);
}

.renewHeroStep1 {
  flex: 0 0 calc(var(--u) * 336);
}

.renewHeroStep2 {
  flex: 0 0 calc(var(--u) * 390);
}

.renewHeroStep3 {
  flex: 0 0 calc(var(--u) * 527);
}

/* 하단 버튼 : 스팀 724 x 121 + 디스코드 270 x 105, 간격 12 */
.renewHeroBtns {
  left: calc(var(--u) * 321);
  top: calc(var(--u) * 887);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 12);
}

.renewHeroBtns .renewSteamBtn {
  width: calc(var(--u) * 724);
}

.renewHeroBtns .renewDiscordBtn {
  width: calc(var(--u) * 270);
}

/* 북미 서비스 안내 : 원본 386 x 92 */
.renewHeroRegion {
  left: calc(var(--u) * 1495);
  top: calc(var(--u) * 907);
  width: calc(var(--u) * 386);
}

/* 우측 스팀 안내 박스 : 원본 331 x 452 (여자 캐릭터 위에 얹힌다) */
.renewHeroSteamBox {
  left: calc(var(--u) * 1537);
  top: calc(var(--u) * 424);
  z-index: 3;
  width: calc(var(--u) * 331);
  transition: transform 0.18s ease, filter 0.18s ease;
}

.renewHeroSteamBox:hover {
  transform: translateY(calc(var(--u) * -6));
  filter: brightness(1.08);
}

/* 좌우 캐릭터 : UI 뒤에 깔린다 */
.renewHeroChar {
  z-index: 1;
  pointer-events: none;
}

.renewHeroCharL {
  left: 0;
  top: calc(var(--u) * 45);
  width: calc(var(--u) * 433);
}

.renewHeroCharR {
  left: calc(var(--u) * 1472);
  top: calc(var(--u) * 48);
  width: calc(var(--u) * 363);
}

/* 2·3페이지 묶음 : 넓은 화면에서는 상자를 만들지 않아 레이아웃에 영향이 없다.
   좁은 화면에서만 블록이 되어 긴 배경 한 장을 두 섹션에 걸쳐 깐다. */
.renewLongBg {
  display: contents;
}

/* --------------------------------------------------------------------------
   2페이지 : WATCH THE WONDER ADVENTURE
   -------------------------------------------------------------------------- */
.renewVideoPage {
  background-image: url(/img/renew/p2Bg-8ed1c892acf1e48807aa29b871e75c86.webp);
}

.renewVideoInner {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* 시안상 콘텐츠 블록이 화면 중앙보다 약 59px 위 */
  padding-bottom: calc(var(--u) * 118);
}

/* 타이틀 : 원본 1600 x 294 */
.renewVideoTitle {
  width: calc(var(--u) * 1205);
  line-height: 0;
}

.renewVideoTitle img {
  display: block;
  width: 100%;
  height: auto;
}

/* 영상 프레임 : 원본 1482 x 884 */
.renewVideoFrame {
  position: relative;
  width: calc(var(--u) * 918);
  aspect-ratio: 1482 / 884;
  margin-top: calc(var(--u) * 62);
}

.renewVideoFrame::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background: url(/img/renew/p2Frame-2d7ad32929f92fc0d8942e50e28c42af.webp) no-repeat center / 100% 100%;
  pointer-events: none;
}

/* 프레임 내부 투명 영역 좌표 (원본 픽셀 기준으로 환산) */
.renewVideoScreen {
  position: absolute;
  left: 2.429%;
  top: 6.900%;
  width: 94.872%;
  height: 89.027%;
  z-index: 1;
  overflow: hidden;
  background-color: #0c0a07;
}

.renewVideoPlayer {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  /* 프레임 안쪽을 꽉 채우되(16:9 대비 살짝 넓은 비율) 비율은 유지 */
  object-fit: cover;
  background-color: #0c0a07;
}

/* --------------------------------------------------------------------------
   3페이지 : DISCOVER WHAT AWAITS YOU IN WONDERKING
   -------------------------------------------------------------------------- */
.renewFeaturePage {
  background-image: url(/img/renew/p3Bg-c3224ad73ee67e431f38a44708a94467.webp);
}

.renewFeatureInner {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 타이틀 : 원본 1321 x 346 */
.renewFeatureTitle {
  width: calc(var(--u) * 961);
  line-height: 0;
}

.renewFeatureTitle img {
  display: block;
  width: 100%;
  height: auto;
}

/* 슬라이더 ---------------------------------------------------------------- */
.renewSlider {
  width: 100%;
  margin-top: calc(var(--u) * 20);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 13);
}

/* 좌우 화살표 : 원본 127 x 142 */
.renewSlideArrow {
  flex: 0 0 auto;
  width: calc(var(--u) * 127);
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  line-height: 0;
}

.renewSlideArrow img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.15s ease, filter 0.15s ease;
}

.renewSlideArrow:hover img {
  transform: scale(1.06);
  filter: brightness(1.12);
}

.renewSlideArrow:active img {
  transform: scale(0.95);
  filter: brightness(0.88);
}

/* 카드 3.5장 노출 : 421 * 3.5 + 27 * 3 = 1554.5
   (좌우 화살표 위치는 시안 그대로 두고 카드 폭만 줄여 반 장이 걸치게 한다) */
.renewSlideViewport {
  width: calc(var(--u) * 1555);
  overflow: hidden;
}

.renewSlideTrack {
  display: flex;
  gap: calc(var(--u) * 27);
  will-change: transform;
}

/* 카드 : 원본 1038 x 843 */
.renewSlideItem {
  flex: 0 0 calc(var(--u) * 421);
  line-height: 0;
}

.renewSlideItem img {
  display: block;
  width: 100%;
  height: auto;
  -webkit-user-drag: none;
  user-select: none;
}

/* 페이지 인디케이터 ------------------------------------------------------- */
.renewSlideDots {
  margin-top: calc(var(--u) * 34);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 27);
}

.renewSlideDot {
  width: calc(var(--u) * 35);
  height: calc(var(--u) * 35);
  padding: 0;
  border: 0;
  cursor: pointer;
  background: url(/img/renew/p3DotOff-2626642cfe8a9fbf9bbfc4ab2ae36189.webp) no-repeat center center;
  background-size: calc(var(--u) * 27) auto;
  transition: filter 0.15s ease;
}

.renewSlideDot:hover {
  filter: brightness(1.2);
}

.renewSlideDot.renewSlideDotOn {
  background-image: url(/img/renew/p3DotOn-240e2769b36b8a4c1f7a80d5a365be04.webp);
  background-size: calc(var(--u) * 30) auto;
}

/* 하단 버튼 --------------------------------------------------------------- */
.renewFeatureBtns {
  margin-top: calc(var(--u) * 28);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 24);
}

/* 안내 문구 : 버튼 바로 아래 ---------------------------------------------- */
.renewNotice {
  margin-top: calc(var(--u) * 22);
  text-align: center;
}

/* 밝은 잔디 배경 위에 흰 글씨가 얹히므로 그림자를 메인 페이지보다 진하게 준다. */
.renewNotice .lv100Notice {
  margin: 0;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 10px rgba(0, 0, 0, 0.55);
}

.renewLinkBtn {
  position: relative;
  display: block;
  line-height: 0;
}

.renewLinkBtn img {
  display: block;
  width: 100%;
  height: auto;
}

.renewLinkBtn .renewBtnOn,
.renewLinkBtn .renewBtnDown {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.12s ease;
}

.renewLinkBtn:hover .renewBtnOn {
  opacity: 1;
}

.renewLinkBtn:active .renewBtnDown {
  opacity: 1;
}

/* 스팀 버튼 : 원본 724 x 121 / 디스코드 버튼 : 원본 270 x 105 */
.renewSteamBtn {
  width: calc(var(--u) * 724);
}

.renewDiscordBtn {
  width: calc(var(--u) * 217);
}

/* --------------------------------------------------------------------------
   태블릿 이하 : 한 화면 고정을 풀고 세로로 흐르는 레이아웃 + 카드 2장 노출
   -------------------------------------------------------------------------- */
@media screen and (max-width: 1024px) {
  /* 섹션이 내용만큼 늘어나므로 풀페이지 스냅과 퀵메뉴를 함께 끈다 */
  html {
    scroll-snap-type: none;
  }

  .renewQuick {
    display: none;
  }

  /* 섹션 높이를 내용에 맞춘다.
     100vh 로 붙잡아 두면 영상 페이지처럼 내용이 짧은 화면에서
     위아래로 배경만 남는 빈 띠가 크게 생긴다. */
  .renewPage {
    height: auto;
    min-height: 0;
    padding: 40px 20px 48px;
  }

  /* 1페이지 : 절대배치를 풀고 세로로 흐르게 한다. 캐릭터는 숨김 */
  .renewHeroStage {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .renewHeroStage > * {
    position: static;
    left: auto;
    top: auto;
  }

  .renewHeroLogo {
    order: 1;
    width: min(72%, 340px);
  }

  .renewHeroTitle {
    order: 2;
    width: min(96%, 470px);
    margin-top: 10px;
  }

  .renewHeroSteps {
    order: 3;
    width: 100%;
    max-width: 760px;
    margin-top: 22px;
    justify-content: center;
    gap: 1.5%;
  }

  .renewHeroStep1 {
    flex: 0 1 26.4%;
  }

  .renewHeroStep2 {
    flex: 0 1 30.7%;
  }

  .renewHeroStep3 {
    flex: 0 1 41.5%;
  }

  .renewHeroBtns {
    order: 4;
    margin-top: 24px;
    gap: 14px;
  }

  .renewHeroBtns .renewSteamBtn {
    width: min(56vw, 420px);
  }

  .renewHeroBtns .renewDiscordBtn {
    width: min(17vw, 126px);
  }

  .renewHeroRegion {
    order: 5;
    width: min(54%, 250px);
    margin-top: 18px;
  }

  .renewHeroSteamBox {
    order: 6;
    width: min(62%, 250px);
    margin-top: 26px;
  }

  .renewHeroSteamBox:hover {
    transform: none;
  }

  /* 좌우 캐릭터 : 좁은 화면에는 시안처럼 좌우에 세울 여백이 없으므로
     타이틀 아래로 내려 한 줄에 마주 보게 세운다(양쪽 끝 정렬). */
  /* 1페이지 캐릭터는 감춘다. 좁은 화면에서는 2페이지 영상 옆으로 옮겨 세운다. */
  .renewHeroChar {
    display: none;
  }


  .renewVideoInner {
    width: 100%;
    padding-bottom: 0;
  }

  .renewVideoTitle {
    width: min(100%, 700px);
  }

  .renewVideoFrame {
    width: min(100%, 780px);
    margin-top: 28px;
  }

  .renewFeatureTitle {
    width: min(100%, 620px);
  }

  .renewSlider {
    position: relative;
    margin-top: 26px;
    gap: 0;
  }

  .renewSlideArrow {
    position: absolute;
    top: 50%;
    z-index: 5;
    width: 62px;
    transform: translateY(-50%);
  }

  .renewSlideArrowPrev {
    left: -14px;
  }

  .renewSlideArrowNext {
    right: -14px;
  }

  .renewSlideViewport {
    width: 100%;
    max-width: 860px;
  }

  .renewSlideTrack {
    gap: 20px;
  }

  .renewSlideItem {
    flex: 0 0 calc((100% - 20px) / 2);
  }

  .renewSlideDots {
    margin-top: 22px;
    gap: 12px;
  }

  .renewSlideDot {
    width: 26px;
    height: 26px;
    background-size: 21px auto;
  }

  .renewSlideDot.renewSlideDotOn {
    background-size: 24px auto;
  }

  .renewFeatureBtns {
    margin-top: 26px;
    gap: 14px;
  }

  .renewNotice {
    margin-top: 18px;
  }

  .renewSteamBtn {
    width: min(56vw, 420px);
  }

  .renewDiscordBtn {
    width: min(17vw, 126px);
  }

  /* --------------------------------------------------------------------------
     푸터 : 좁은 화면에서 한 화면 가까이 잡아먹어 여백·글자·간격을 줄인다.
     주소 두 줄, 로고, 커뮤니티 아이콘, 저작권 줄 구성은 그대로 두고 치수만 조인다.
     이 파일은 리뉴얼 페이지에서만 로드되므로 다른 페이지 푸터는 손대지 않는다.
     -------------------------------------------------------------------------- */
  footer {
    padding: 18px 0 32px;
    gap: 12px;
  }

  .footerInner {
    gap: 12px;
  }

  .footerLogo {
    height: 26px;
  }

  .footerText {
    gap: 6px;
    font-size: 12px;
  }

  .fTexts {
    gap: 3px;
    line-height: 17px;
  }

  /* 저작권 줄은 절대배치로 푸터 맨 아래에 붙어 있다.
     위 padding-bottom 이 이 줄이 앉을 자리다. */
  .fTextBottom {
    bottom: 10px;
    font-size: 11px;
  }

  .footComm .communityList {
    gap: 12px;
  }
}

/* --------------------------------------------------------------------------
   모바일 : 카드 1장 노출 / 버튼 세로 배치
   -------------------------------------------------------------------------- */
@media screen and (max-width: 700px) {
  .renewPage {
    padding: 28px 16px 36px;
  }

  /* 2 / 3페이지 배경 : 폰 폭에서만 세로형(941x1672) 시안으로 교체한다.
     가로 배경은 세로 화면에서 cover 로 깔면 한가운데 좁은 띠만 확대돼 보인다.
     1페이지(메인)는 요청대로 원래 가로 배경 그대로 둔다.
     태블릿 폭(701~1024)은 세로 시안을 쓰면 섹션이 1300px 넘게 늘어나서 제외했다. */
  /* 2·3페이지를 한 장으로 이어 깐다 (1000 x 2000) */
  .renewLongBg {
    display: block;
    position: relative;
    background-image: url(/img/renew/p23BgMobile-f9c895e50836a8599fc29780bf3b4f8d.webp);
    background-position: center top;
    background-size: cover;
    background-repeat: no-repeat;
  }

  .renewVideoPage,
  .renewFeaturePage {
    background-image: none;
  }

  /* 배경이 2·3페이지 공용(.renewLongBg)으로 옮겨갔으므로
     2페이지 내용은 다시 정상 흐름으로 쌓는다. */
  .renewVideoTitle {
    width: 92%;
  }

  .renewVideoFrame {
    width: 92%;
    margin-top: 16px;
  }

  .renewHeroLogo {
    width: min(78%, 300px);
  }

  .renewHeroTitle {
    width: min(100%, 400px);
  }

  /* 좁은 화면에서는 3패널을 세로로 쌓아 글씨 크기를 확보한다.
     가장 넓은 3번 패널(527px) 기준 비율을 유지해 확대율을 통일 */
  .renewHeroSteps {
    margin-top: 18px;
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }

  .renewHeroStep1 {
    flex: 0 0 auto;
    width: 63.76%;
  }

  .renewHeroStep2 {
    flex: 0 0 auto;
    width: 74%;
  }

  .renewHeroStep3 {
    flex: 0 0 auto;
    width: 100%;
  }

  .renewHeroBtns {
    margin-top: 20px;
    flex-direction: column;
    gap: 12px;
  }

  .renewHeroBtns .renewSteamBtn {
    width: min(86vw, 380px);
  }

  .renewHeroBtns .renewDiscordBtn {
    width: min(38vw, 150px);
  }

  .renewHeroRegion {
    width: min(70%, 230px);
    margin-top: 16px;
  }

  .renewHeroSteamBox {
    width: min(74%, 240px);
    margin-top: 22px;
  }

  .renewVideoFrame {
    margin-top: 20px;
  }

  .renewSlider {
    margin-top: 20px;
  }

  .renewSlideArrow {
    width: 44px;
  }

  .renewSlideArrowPrev {
    left: -8px;
  }

  .renewSlideArrowNext {
    right: -8px;
  }

  .renewSlideViewport {
    max-width: 460px;
  }

  .renewSlideTrack {
    gap: 14px;
  }

  .renewSlideItem {
    flex: 0 0 100%;
  }

  .renewSlideDots {
    margin-top: 18px;
    gap: 10px;
  }

  .renewSlideDot {
    width: 22px;
    height: 22px;
    background-size: 18px auto;
  }

  .renewSlideDot.renewSlideDotOn {
    background-size: 21px auto;
  }

  .renewFeatureBtns {
    margin-top: 22px;
    flex-direction: column;
    gap: 12px;
  }

  .renewNotice {
    margin-top: 16px;
  }

  .renewSteamBtn {
    width: min(86vw, 380px);
  }

  .renewDiscordBtn {
    width: min(38vw, 150px);
  }
}

/* 모션 최소화 설정 존중 */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .renewSlideTrack {
    transition: none !important;
  }
}