/* =========================================================
   en.css
   en.html (영문 랜딩) 전용 스타일
   ========================================================= */

body {
  padding-top: 0;
}

.site-header {
  position: static;
  height: 96px;
  background: #03060a;
}

[data-section] {
  scroll-margin-top: 0;
}

.side-nav {
  gap: 60px;
}

.en-emblem {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 178px;
  height: 210px;
}

.gnb .discord {
  width: 412px;
  height: 55px;
  background: url('/Content/images/en/btn_discord.png') 0 0 no-repeat;
}
@media (min-width: 769px) {
  .gnb .discord:hover {
    background-image: url('/Content/images/en/btn_discord_on.png');
  }
}

.en-hero {
  position: relative;
  min-height: calc(100vh - var(--header-height));
  text-align: center;
}

.en-hero .placeholder {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.en-hero .placeholder:has(img) {
  position: static;
  inset: auto;
  z-index: auto;
}

.en-hero-inner {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 180px;
  padding: 0 160px;
}

.store-links {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

.btn-cta-steam,
.btn-cta-epic {
  width: 712px;
  height: 132px;
  flex: none;
  padding: 0;
  color: transparent;
}
.btn-cta-steam {
  background: url('/Content/images/en/btn_steam.png') 0 0 no-repeat;
}
.btn-cta-epic {
  background: url('/Content/images/en/btn_epic.png') 0 0 no-repeat;
}
@media (min-width: 769px) {
  .btn-cta-steam:hover {
    background-image: url('/Content/images/en/btn_steam_on.png');
  }
  .btn-cta-epic:hover {
    background-image: url('/Content/images/en/btn_epic_on.png');
  }
}

.en-video-section {
  min-height: 1265px;
  padding: 0 26px;
  background: url('/Content/images/en/bg_video.jpg') 0 0 no-repeat;
  text-align: center;
}

.en-video-section .video-stage {
  margin: 0 auto;
  position: relative;
  aspect-ratio: 16 / 9;
  border: 1px solid #ffc000;
  border-radius: 8px;
  overflow: hidden;
}

.en-video-section .video-stage .placeholder {
  width: 100%;
  height: 100%;
}

.en-footer-links {
  display: flex;
  justify-content: center;
  gap: 24px;
  padding: 40px 0 0;
  background: var(--color-footer-bg);
}

.en-footer-links .discord2 {
  width: 1012px;
  height: 63px;
  background: url('/Content/images/en/btn_discord2.png') 0 0 no-repeat;
  color: transparent;
}
@media (min-width: 769px) {
  .en-footer-links .discord2:hover {
    background-image: url('/Content/images/en/btn_discord2_on.png');
  }
}

@media (max-width: 768px) {
  :root {
    --header-height: 35px;
  }

  .site-header {
    height: 35px;
  }

  .site-header .logo img {
    height: 25px;
  }

  .gnb .discord {
    width: 113px;
    height: 24px;
    background-image: url('/Content/images/en/btn_discord_mo.png');
    background-size: contain;
  }
  .gnb .discord:active {
    background-image: url('/Content/images/en/btn_discord_mo_on.png');
  }

  .side-nav {
    width: 54px;
    height: 130px;
    gap: 30px;
    top: 39%;
  }

  .side-nav button {
    font-size: 15px;
  }

  .en-hero {
    min-height: 0;
  }

  .en-emblem {
    top: -10px;
    width: 89px;
    height: 105px;
  }

  .en-hero-inner {
    bottom: 27px;
    padding: 0;
    right:11px;
    left:11px;
  }

  .store-links {
    gap: 8px;
  }

  .btn-cta-steam,
  .btn-cta-epic {
    width: 166px;
    height: 48px;
    background-size: contain;
  }
  .btn-cta-steam {
    background-image: url('/Content/images/en/btn_steam_mo.png');
  }
  .btn-cta-steam:active {
    background-image: url('/Content/images/en/btn_steam_mo_on.png');
  }
  .btn-cta-epic {
    background-image: url('/Content/images/en/btn_epic_mo.png');
  }
  .btn-cta-epic:active {
    background-image: url('/Content/images/en/btn_epic_mo_on.png');
  }

  .en-video-section {
    min-height: 279px;
    padding: 0 3px;
    background-image: url('/Content/images/en/bg_video_mo.jpg');
    background-size: 100% auto;
  }

  .en-video-section .video-stage {
    border-radius: 0;
  }

  .en-video-section .container {
    padding: 0 3px;
  }

  .video-play-btn {
    width: 40px;
    height: 40px;
    font-size: 12px;
    border-width: 2px;
  }

  .en-footer-links {
    gap: 12px;
    padding: 20px 0 0;
  }

  .en-footer-links .discord2 {
    width: 343px;
    height: 39px;
    background-image: url('/Content/images/en/btn_discord2_mo.png');
    background-size: contain;
  }
  .en-footer-links .discord2:active {
    background-image: url('/Content/images/en/btn_discord2_mo_on.png');
  }
}