/* =========================================================
   main.css
   index.html (한국어 메인 랜딩) 전용 스타일
   ========================================================= */

/* ---------- 1. 메인(히어로) 영역 ---------- */
.hero {
  position: relative;
  min-height: 50vh;
}

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

/* 실제 비주얼 이미지가 들어오면 절대배치를 해제해
   이미지 원본 크기(가로 100% 기준 비율)에 맞춰 hero 영역 높이가 자동으로 커지거나 작아짐 */
.hero .placeholder:has(img) {
  position: static;
  inset: auto;
  z-index: auto;
}

/* 버튼 영역은 flex 정렬 대신 hero 하단에 절대배치로 고정해
   이미지 크기 변화와 무관하게 위치가 유지되도록 함 */
.hero-inner {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 68px;
  padding: 0 160px;
}

.hero-actions {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

/* ---------- 2. 영상 영역 ----------
   background/margin 은 .video-section 에 두고, border 는 안쪽 .video-inner 로
   분리했습니다. (border 를 .video-section 에 같이 두면 margin 때문에 배경 이미지가
   제대로 보이지 않는 문제가 있어 래퍼를 한 겹 더 감쌌습니다) */
.video-section {
  background: url('/Content/Event/images/bg_video.jpg') 0 0 no-repeat;
  padding: 0 26px;
}

.video-inner {
  border: 2px solid var(--color-point);
}

.video-stage {
  position: relative;
  width: 100%;
}

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

.video-panel {
  position: relative;
  aspect-ratio: 16 / 9;
  display: none;
}

.video-panel.is-active {
  display: block;
}

/* ---------- 3. 이벤트 영역 ---------- */
.event-section {
  background: var(--color-bg);
  padding: 0;
  margin: 40px 26px 0 26px;
  border: 2px solid var(--color-point);
}

.event-panel {
  display: none;
}

.event-panel.is-active {
  display: block;
}

/* 최하단 바로가기 (홈페이지 / 공식카페 / 공식유튜브)
   main 밖에 있어도 1920 캔버스와 같은 폭/zoom 대상이 되도록 width 고정
   (js/common.js 가 main 과 함께 이 요소에도 동일한 zoom 을 적용함) */
.quick-links {
  width: 1920px;
  margin: 80px 0 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
  padding: 50px 0 24px;
  border-top: 1px solid var(--color-border);
  background: var(--color-footer-bg);
}

/* 최하단 홈페이지 바로가기 - 헤더/푸터와 같은 이미지 교체 버튼 */
.quick-links .homepage {
  width: 1000px;
  height: 51px;
  background: url('/Content/Event/images/btn_homepage2.png') 0 0 no-repeat;
  color: transparent;
  margin-right:60px;
}
@media (min-width: 769px) {
  .quick-links .homepage:hover {
    background-image: url('/Content/Event/images/btn_homepage2_on.png');
  }
}

/* ---------- 768px 이하 모바일 레이아웃 ----------
   375 고정 캔버스 기준(js/common.js 의 zoom 대상과 동일). 모바일 이미지는
   2배수(750 기준)로 작업되므로, 여기 적는 px 값은 전부 "실측 픽셀 / 2"
   입니다. 실제 화면에는 zoom 비율만큼 자동으로 축소/확대되어 보여집니다.
   main 밖의 헤더/side-nav 만 실제 px(절반 계산 없이) 그대로 사용합니다. */
@media (max-width: 768px) {
  /* 메인/영상/이벤트 이동 네비게이션
     - .side-nav 는 main 밖(문서 최상단)에 있어 히어로 이미지에 종속시킬 수 없으므로
       PC와 동일하게 화면 우측에 고정된 알약형 박스를 유지하되 모바일 크기로 축소만 합니다.
     - 실제 텍스트는 img_visual_mo.jpg 안에 이미 다른 스타일로 그려져 있어(참고용),
       필요하면 이 영역을 완전히 숨기거나 이미지 쪽 위치에 맞춰 마크업을 히어로 내부로
       옮기는 방법도 있습니다 - 원하시는 방향 알려주시면 다시 맞춰드릴게요. */
  .side-nav {
    width: 54px;
    height: 190px;
    gap: 25px;
    border-top-left-radius: 16px;
    border-bottom-left-radius: 16px;
    top:35%;
  }

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

  .hero {
    min-height: 0;
  }

  /* img_visual_mo.jpg(750x899 실측, 절반인 375x449.5 기준으로 배치) */
  .hero-inner {
    bottom: 29px;
    padding: 0 11px;
  }

  .hero-actions {
    gap: 6px;
  }

  /* 회원가입/다운로드 버튼 - 실측(2배수): btn_join_mo.png / btn_down_mo.png 332x96 → 절반 166x48 */
  .btn-cta-join,
  .btn-cta-down {
    width: 166px;
    height: 48px;
    background-size:contain;
  }
  .btn-cta-join {
    background-image: url('/Content/Event/images/btn_join_mo.png');
  }
  .btn-cta-down {
    background-image: url('/Content/Event/images/btn_down_mo.png');
  }
  .btn-cta-join:active {
    background-image: url('/Content/Event/images/btn_join_mo_on.png');
  }
  .btn-cta-down:active {
    background-image: url('/Content/Event/images/btn_down_mo_on.png');
  }

  /* 영상 섹션 - cover_video_mo.jpg(735px) 실측 기준으로 계산한 여백
     (750 - 좌우 margin*2 - border 2*2 = 735 → margin 6px, 절반 캔버스라 3px)
     border 도 PC 2px 그대로 물려받으면 배율이 어긋나 1px 로 같이 줄입니다. */
  .video-section {
    padding: 0 3px;
    background: url(/Content/Event/images/bg_video_mo.jpg) 0 0 / contain no-repeat;
  }

  .video-inner {
    border-width: 1px;
  }

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

  /* 이벤트 섹션 - img_event0X_mo.jpg(734px) 실측 기준으로 계산한 여백 (영상 섹션과 동일) */
  .event-section {
    margin: 30px 3px 0 3px;
    border-width: 1px;
  }

  /* 최하단 바로가기 (홈페이지 / 공식카페 / 공식유튜브)
     TODO: 모바일 시안에는 카페/유튜브가 아이콘만 있는 정사각형 버튼으로 보이는데
     아직 전용 아이콘 이미지가 없어 우선 기존 아이콘+텍스트 구성을 축소해 넣었습니다.
     아이콘 이미지 주시면 그에 맞게 다시 다듬을게요. flex-wrap 은 혹시 폭이 넘칠 때
     둘째 줄로 자연스럽게 내려가도록 넣어둔 안전장치입니다. */
  .quick-links {
    width: 375px;
    margin: 15px 0 0;
    gap: 6px;
    padding: 20px 0 6px;
    flex-wrap: wrap;
  }

  /* 실측(2배수): btn_homepage2_mo.png 540x66 → 절반 270x33 */
  .quick-links .homepage {
    width: 270px;
    height: 33px;
    background-image: url('/Content/Event/images/btn_homepage2_mo.png');
    background-size: contain;
    margin-right: 0;
  }
  .quick-links .homepage:active {
    background-image: url('/Content/Event/images/btn_homepage2_mo_on.png');
  }

  /* 공식카페/공식유튜브는 모바일 시안대로 아이콘만 보이고 텍스트는 숨깁니다.
     (마크업은 그대로 두고 font-size:0 으로 텍스트만 접어서 아이콘만 남깁니다) */
  .quick-links a:not(.homepage) {
    gap: 0;
    font-size: 0;
  }

  .quick-links a img {
    width: 27px;
    height: 27px;
    margin-right: 0;
  }
}