/* =============================================
   Game Page
   기준폭: 1920px  /  기준높이: 1080px
   GAME 섹션은 1920px 기준 콘텐츠를 뷰포트 중앙에 고정,
   양쪽 overflow:hidden 으로 클리핑
   ============================================= */

/* ── 반응형 변수 (JS에서 덮어씀) ── */
:root {
  --sub-min-left: 30px;            /* gamepage_sub 최소 왼쪽 여백 */
  --sub-base-left: 250px;          /* 1920px 기준 gamepage_sub 왼쪽 위치 */
  --text-wrap-right-margin: 50px;  /* mainText 줄바꿈 기준 오른쪽 여백 */
  --sub-scale: 1;                  /* JS 제어 — gamepage_sub 스케일 */
  --main-scale: 1;                 /* JS 제어 — gamepage_main 스케일 */
}

/* ════════════════════════════════════════════
   GAME 섹션
   ════════════════════════════════════════════ */

/* 페이지 배경 — 스케일 축소 시 viewport 하단 빈 공간 채움 */
body { background: #0a0c14; }

.game-page {
  position: relative;
  width: 100%;
  height: 1080px;
  overflow: hidden;
}

.game-page__bg {
  position: absolute;
  inset: 0;
  background-color: #0a0c14;
  background-image: url('../../images/game_res/gamepage_backImage_02.png'); 
  background-size: cover; 
  background-position: center; 
  pointer-events: none;
}

.game-page__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
}

/* ════════════════════════════════════════════
   gamepage_main (Coming Soon + 데코 라인 + 서브텍스트)

   Figma 원본 그룹: 2061.47 × 125.29px, GAME 내 x=-61.4, y=439
   그룹 내 Coming Soon 텍스트 중심 x: 829.79 + 193 = 1022.79px
   → left = calc(50vw - 1022.79px) 로 뷰포트 중앙 정렬
   → transform-origin: 1022.79px top 으로 중앙 기준 스케일
   ════════════════════════════════════════════ */

.gamepage_main {
  position: absolute;
  width: 2061.47px;
  height: 125.29px;
  top: 439px;
  left: calc(50vw - 1022.79px);
  transform-origin: 1022.79px top;
  transform: scale(var(--main-scale));
  pointer-events: none;
}

/* ── 왼쪽 데코 라인 ── */
.gamepage_main_leftDeco {
  position: absolute;
  left: 0;
  top: 68.56px;
  width: 787.23px;
  height: 9.46px;
  object-fit: fill;
}

/* ── Coming Soon 텍스트 ── */
.gamepage_main_mainText {
  position: absolute;
  left: 829.79px;
  top: 40px;
  width: 386px;
  height: 68px;
  font-family: 'A2Z', sans-serif;
  font-weight: 700;
  font-size: 56.74px;
  line-height: 1.2em;
  text-align: center;
  vertical-align: top;
  color: #F8F8F8;
  text-shadow: 0px 0px 7.09px rgba(38, 45, 61, 0.25);
  white-space: nowrap;
}

/* ── 오른쪽 데코 라인 ── */
.gamepage_main_rightDeco {
  position: absolute;
  left: 1258.87px;
  top: 78.01px;
  width: 802.6px;
  height: 11.82px;
  object-fit: fill;
}


/* ── Coming Soon 하단 서브텍스트 ── */
/*
.gamepage_main_subText {
  position: absolute;
  left: 171.39px;
  top: 99.29px;
  width: 1702.13px;
  height: 26px;
  font-family: 'A2Z', sans-serif;
  font-weight: 500;
  font-size: 21.28px;
  line-height: 1.2em;
  letter-spacing: 0.15em;
  text-align: center;
  color: #AEAEAE;
  white-space: nowrap;
}
*/

/* ════════════════════════════════════════════
   gamepage_sub (게임 정보 — 좌하단)

   Figma 원본: GAME 내 x=250, y=784, 572×194.47px
   Left 위치:
     Phase 1 (vw≥1480): max(30px, 50vw − 710px) → 자연스럽게 250px → 30px 감소
     Phase 2 (vw<1480): max() 결과 30px 고정, JS가 scale 적용
   Transform-origin: top left (왼쪽 상단 고정, 우측으로 줄어듦)
   ════════════════════════════════════════════ */

.gamepage_sub {
  position: absolute;
  left: max(var(--sub-min-left), calc(50vw - 710px));
  top: 784px;
  width: 572px;
  height: 194.47px;
  transform-origin: top left;
  transform: scale(var(--sub-scale));
}

/* ── 게임 소개 텍스트 그룹 ── */
.gamepage_sub_expText {
  position: absolute;
  top: 0;
  left: 0;
  width: 572px;
  height: 112.06px;
  pointer-events: none;
}

/* ── 메인 텍스트 (타이틀) ── */
.gamepage_sub_mainText {
  position: absolute;
  top: 0;
  left: 0;
  width: 572px;
  height: 50px;
  font-family: 'A2Z', sans-serif;
  font-weight: 600;
  font-size: 42px;
  line-height: 1.2em;
  letter-spacing: -0.02em;
  color: #FFFFFF;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  pointer-events: none;
}

/* ── 메인 텍스트 줄바꿈 모드 ──
   JS가 오른쪽 여백 ≤ var(--text-wrap-right-margin) 감지 시 클래스 추가.
   "어서오세요," 뒤에서 줄바꿈, 폰트 축소로 아랫 요소 침범 방지
   (height 50px 유지: 2line × 21px × 1.19≈50px)
*/
.gamepage_sub_mainText--wrap {
  white-space: normal;
  font-size: 20.8px;
  overflow: hidden;
}

.gamepage_sub_mainText__line1,
.gamepage_sub_mainText__line2 {
  display: inline;
}

/* wrap 모드일 때만 line1 뒤 줄바꿈 삽입 */
.gamepage_sub_mainText--wrap .gamepage_sub_mainText__line1::after {
  content: '\A';
  white-space: pre;
}

/* ── 서브 텍스트 (설명) ── */
.gamepage_sub_subText {
  position: absolute;
  top: 66.06px;
  left: 0;
  width: 497px;
  font-family: 'A2Z', sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 1.3em;
  letter-spacing: -0.02em;
  color: #C4C4C4;
  text-align: left;
}

/* ════════════════════════════════════════════
   gamepage_sub 하단 행 (status 배지 + 플랫폼 아이콘)
   Figma: y≈142 (status_layout y=142.01, platformImage y=142.89)
   ════════════════════════════════════════════ */

.gamepage_sub_bottom {
  position: absolute;
  top: 142.01px;
  left: 0;
  width: 572px;
  height: 51.58px;
}

/* ── status 배지 묶음 (가로 flex) ── */
.gamepage_sub_status_layout {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
  pointer-events: none;
}

/* ── 개별 배지 (장르 / 상태 공통) ── */
.gamepage_sub_genre,
.gamepage_sub_dev {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 30px 8px 10px;
  width: 120px;
  box-sizing: border-box;
  border-radius: 10px;
  background: linear-gradient(180deg, #D6F0FD 0%, #AEB1FF 100%);
  opacity: 0.4;
}

.gamepage_sub_genre_genreTagText,
.gamepage_sub_dev_statusTagText {
  font-family: 'A2Z', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.2em;
  letter-spacing: -0.02em;
  color: #303030;
  text-align: left;
}

.gamepage_sub_genre_gameGenreText,
.gamepage_sub_dev_currentStatusText {
  font-family: 'A2Z', sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.2em;
  letter-spacing: -0.02em;
  color: #1F1F1F;
  text-align: left;
}

/* ── 플랫폼 아이콘 (Steam / Twitter) ── */
.gamepage_sub_platformImage {
  position: absolute;
  top: 0;    /* gamepage_sub_platformImage y=142.89, bottom row 기준 y=0.88 ≈ 0 */
  left: 282px;
  display: flex;
  flex-direction: row;
  gap: 20px; /* 71.58 − 51.58 = 20px 간격 */
  align-items: center;
}

.gamepage_sub_platformImage_steam,
.gamepage_sub_platformImage_twitter {
  width: 51.58px;
  height: 51.58px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

/* ════════════════════════════════════════════
   반응형 — 360px 이하
   ════════════════════════════════════════════ */

@media (max-width: 360px) {
  .game-page {
    min-width: 360px;
  }
}