/* 기본 */
html,
body {
  margin: 0;
  padding: 0;
}

/* html은 스크롤 담당 안 함 */
html {
  overflow: auto;
}

/* body만 스크롤 */
body {
  min-width: 1400px;
  margin: 0;
  background: #000;
  position: relative;
  overflow: hidden;

  cursor: url("../images/mois_cursor.png") 16 16, auto;
}

/* 공통 */
.bg-wrap {
  position: absolute;
  top: 0;
  left: 50%;
  width: 2560px;

  /* translateX(-50%) 는 중앙정렬 삭제 하면 left로 좌우 위치값 설정 가능*/
  transform: translateX(-50%);

  background-repeat: no-repeat;
  background-position: center top;
  background-size: 2560px auto;

  pointer-events: none;
  z-index: 0;
}

/* 메인 랜딩 */
.index-page .bg-wrap {
  height: 6000px;
  background-image: url("../images/260521_Mois_BG.jpg");
}

/* 콘텐츠 */
.main-container {
  position: relative;
  width: 1300px;
  margin: 0 auto;
  z-index: 1;
}

/* 상단 nav 강제 고정 */
nav.nav-top {
  top: 0;
  left: 0;
}

/* 좌측 nav도 고정 */
nav.nav-left {
  top: 0;
}

/* 공통 섹션 */
.section {
  position: relative;
  width: 1300px;
  margin: 0 auto;
}

/* 공통 이미지 초기화 */
.section img {
  display: block;
  max-width: none;
}

/* ===== 타이틀 ===== */
.main-section {
  height: 1260px;
}

.sub-title {
  position: absolute;
  top: 708px;
  left: 202px;
  width: 528px;
  z-index: 3;
  opacity: 0;

  animation: subTitleFade 1.2s ease forwards;
  animation-delay: 0.2s;
}

.main-title {
  position: absolute;
  top: 728px;
  left: 50%;
  width: 691px;
  transform: translateX(-50%);
  opacity: 0;

  animation: mainTitleFade 1.2s ease forwards;
  animation-delay: 0.5s;
}

.date-box {
  position: absolute;
  top: 1133px;
  left: 50%;
  width: 780px;
  transform: translateX(-50%);
  z-index: 5;
  opacity: 0;

  animation: dateFade 1.2s ease forwards;
  animation-delay: 0.8s;
}

/* ===== 스토리 텍스트 ===== */
.story-section {
  height: 305px;
}

.story-text {
  position: absolute;
  top: 58px;
  left: 50%;
  width: 830px;
  transform: translateX(-50%);
}

/* ===== 영상 섹션 ===== */
.video-section {
  height: 612px; /* 프레임 612 + 여백 */
}

/* 프레임 전체 기준 박스 */
.video-item {
  position: absolute;
  top:0px;
  left: 50%;

  width: 1030px;
  height: 612px;
  transform: translateX(-50%);
  overflow: visible;
  z-index: 2;
}

/* 실제 유튜브 영역 */
.video-item .player,
.video-item iframe {
  position: absolute;
  top: 99px;
  left: 88px;

  width: 854px;
  height: 480px;

  z-index: 1;
}

/* 어두운 마스크도 유튜브 크기와 동일 */
.video-mask {
  position: absolute;

  top: 99px;
  left: 88px;

  width: 854px;
  height: 480px;

  background: rgba(0,0,0,.5);
  z-index: 2;
}

/* 프레임은 전체 1030x612 */
.video-frame {
  position: absolute;
  top: 47px;
  left: 0;

  width: 1030px;
  height: 612px;

  z-index: 5;
  pointer-events: none;
}

/* 플레이 버튼은 유튜브 영역 중앙 */
.play-btn {
  position: absolute;

  top: calc(99px + 240px);
  left: calc(88px + 435px);

  transform: translate(-50%, -50%);

  border: 0;
  background: none;

  z-index: 10;
}

.play-btn img {
  width: 80px;
}

/* ===== 이벤트 타이틀 ===== */
.event-title-section {
  position: relative;
  height: 713px;
}

.event-title {
  position: absolute;
  top: 240px;
  left: 150px;
  width: 1002px;
  z-index: 3;
}

/* ===== 이벤트 ===== */
.event-section {
  position: relative;
  height: 2445px;
}

.event-box {
  position: absolute;
  top: 90px;
  left: 50%;
  width: 1402px;
  transform: translateX(-50%);
}

/* ===== 버튼 ===== */
.button-section {
  position: relative;
  height: 387px;
}

/* 타이틀 */
.btn-title {
  position: absolute;

  top: 90px;
  left: 50%;

  width: 346px;

  transform: translateX(-50%);

  z-index: 2;
}

/* 버튼 */
.button-section .btn {
  position: absolute;

  top: 145px;
  left: 50%;

  transform: translateX(-50%);

  display: block;

  transition:
    transform 0.2s ease,
    filter 0.2s ease;

  outline: none;

  z-index: 3;
}

.button-section .btn img {
  display: block;
  width: 411px;
}

/* hover */
.button-section .btn:hover {
  /*transform: translateX(-50%) scale(1.02);*/

  filter:
  brightness(1.05)
  drop-shadow(0 0 4px rgba(255,255,255,0.25));
}

/* 클릭 outline 제거 */
.button-section .btn:focus,
.button-section .btn:active {
  outline: none;
  box-shadow: none;
}

/* 커서 클릭 가능한 요소 */
a,
button,
.play-btn,
.video-mask {
  cursor: url("../images/mois_link.gif") 16 16, pointer !important;
}

/* ===== 별똥별 효과 ===== */
.shooting-stars {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

/* 별똥별 기본 */
.shooting-stars span {
  position: absolute;
  top: -80px;
  left: 50%;

  width: 2px;
  height: 100px;

  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0.28)
  );

  filter: blur(1px);

  opacity: 0;

  transform: rotate(45deg);

  animation: shootingStar 10s linear infinite;
}

/* 별똥별 개별 위치/속도 */
.shooting-stars span:nth-child(1) {
  left: 55%;
  animation-delay: 0s;
  animation-duration: 12s;
}

.shooting-stars span:nth-child(2) {
  left: 70%;
  animation-delay: 3s;
  animation-duration: 14s;
}

.shooting-stars span:nth-child(3) {
  left: 88%;
  animation-delay: 6s;
  animation-duration: 13s;
}

.shooting-stars span:nth-child(4) {
  left: 62%;
  animation-delay: 9s;
  animation-duration: 15s;
}

.shooting-stars span:nth-child(5) {
  left: 78%;
  animation-delay: 12s;
  animation-duration: 16s;
}

/* 이동 방향: 우상단 → 좌하단 */
@keyframes shootingStar {
  0% {
    opacity: 0;
    transform: translate(0, 0) rotate(45deg);
  }

  4% {
    opacity: 1;
  }

  80% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translate(-900px, 900px) rotate(45deg);
  }
}

/* 타이틀 등장 애니메이션 */
@keyframes subTitleFade {

  0% {
    opacity: 0;
    transform: translateY(-30px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }

}

@keyframes mainTitleFade {

  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(-30px);
  }

  100% {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }

}

@keyframes dateFade {

  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(-30px);
  }

  100% {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }

}

/* ========================== */
/* ===== 서브 페이지 전용 ===== */
/* ========================== */
.sub-page .bg-wrap {
  height: 3000px;
  background-image: url("../images/sub_BG.jpg");
}

.sub-page .sub-title-section {
  position: relative;
  height: 270px;
}

.sub-page .sub-page-title {
  position: absolute;
  top: 50px;
  left: 50%;
  width: 593px;
  /* 가운데 기준에서 오른쪽 70px 이동 */
  transform: translateX(calc(-50% + 70px));
  z-index: 3;
}

.sub-side-slide-page .record-section {
  position: relative;
  width: 1210px; /* 실제 사용하는 너비 */
  margin: 0 auto;
  min-height: 900px;
}

.sub-side-slide-page .record-nav {
  position: absolute;
  top: 25px;
  left: 0;

  width: 213px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.sub-side-slide-page .record-btn {
  width: 213px;
  padding: 0;
  border: 0;
  background: none;
  outline: none;
  cursor: default;
  -webkit-tap-highlight-color: transparent;
}

.sub-side-slide-page .record-btn img {
  display: block;
  width: 100%;
  max-width: none;
}

.sub-side-slide-page .record-btn.open {
  cursor: pointer;
}

.sub-side-slide-page .record-btn.locked {
  pointer-events: none;
}

.sub-side-slide-page .record-content {
  position: relative;
  margin-left: 257px;
  width: 953px;
  min-height: 1280px;
}

.sub-side-slide-page .record-nav,
.sub-side-slide-page .record-content {
  margin-top: 0;
}

.sub-side-slide-page .record-content .record-detail {
  display: none !important;
  width: 100%;
  max-width: none;
}

.sub-side-slide-page .record-content .record-detail.active {
  display: block !important;
}

/* 하단 여백 */
.sub-side-slide-page .main-container {
  padding-bottom: 160px;
}

.sub-side-slide-page .record-btn {
  cursor: url("../images/mois_link.gif") 16 16, pointer !important;
}

.sub-side-slide-page .record-btn img {
  pointer-events: none;
}