/* =============================================
   Group_Homepage_title
   기준폭: 1920px  /  기준높이: 1323.33px
   ============================================= */

:root {
  --title-base-w: 1920px;
  --title-base-h: 1323.33px;
  --title-text-color: #F6F6F6;
  --title-text-shadow: 0 0 2.67px #000000;
  --title-bg: #F8F8F8;
}

/* 페이지 배경 — 스케일 축소 시 viewport 하단 빈 공간 채움 */
body { background: var(--title-bg); }

/* ── 섹션 래퍼 ── */
.title {
  pointer-events: none;
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--title-bg);
  /* 기본 높이: JS 실행 전 레이아웃 보정용 fallback */
  height: var(--title-base-h);
  /* height: JS(title.js)가 scale에 맞춰 동적으로 덮어씀 */
}

/* ── 1920px 기준 내부 컨테이너 ──
   left: 50% + margin-left: -960px → 뷰포트 너비와 무관하게 항상 수평 중앙 고정
   (margin:auto는 inner > 뷰포트 시 left=0으로 붙어 중앙 어긋남)
*/
.title__inner {
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -960px; /* -(1920 / 2) */
  width: var(--title-base-w);
  height: var(--title-base-h);
  /* transform-origin: top center → 뷰포트 중심 기준으로 scale */
  transform-origin: top center;
  /* transform: JS(title.js)가 동적으로 설정 */
}

/* ── 배경 이미지 ──
   실제 이미지 기준: 좌우 꽉 채워 배치 (width: 100% = 1920px)
   세로: 섹션 전체 커버 (object-fit: cover)
   테두리만 타원 그라디언트 마스크로 페이드
*/
.title__bg-img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
}

/* ── 서브 텍스트 (한글) ──
   Figma: top 412px, 가로 중앙, width 693px
   A2Z SemiBold 40px / line-height 1.667em / #F6F6F6
*/
.title__subtext {
  position: absolute;
  top: 412px;
  left: 0;
  right: 0;
  text-align: center;
  font-family: 'A2Z', sans-serif;
  font-weight: 600;
  font-size: 40px;
  line-height: 1.667em;
  color: var(--title-text-color);
  text-shadow: var(--title-text-shadow);
  white-space: nowrap;
  margin: 0;
}

/* ── 메인 텍스트 (영문) ──
   Figma: top 529.33px, 가로 중앙, width 1144px
   A2Z SemiBold 85.33px / line-height 0.781em / #F6F6F6
*/
.title__maintext {
  position: absolute;
  top: 529.33px;
  left: 0;
  right: 0;
  text-align: center;
  font-family: 'A2Z', sans-serif;
  font-weight: 600;
  font-size: 85.33px;
  line-height: 0.781em;
  color: var(--title-text-color);
  text-shadow: var(--title-text-shadow);
  white-space: nowrap;
  margin: 0;
}