/* ============================================
   9:16 고정비율 AR 프레임 템플릿 - CSS
   
   역할: 모든 스타일링 담당
   - 레이아웃 및 위치 지정
   - 반응형 디자인
   - 애니메이션 및 효과
   - 인라인 스타일 없음, 모든 스타일은 이 파일에만 존재
   ============================================ */

/* 기본 리셋 */
html, body {
  margin: 0;
  padding: 0;
  background: transparent; /* 배경 투명하게 - 이미지가 보이도록 */
  width: 100%;
  height: 100%;
  overflow: hidden;
  /* iOS Safari safe-area 대응 */
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

/* ============================================
   9:16 고정비율 컨테이너
   ============================================ */
.frame-container {
  position: fixed;
  top: 0;
  left: 0;
  
  /* 핵심: 가로 기준으로 화면에 딱 맞게 */
  width: 100vw;
  /* 높이는 이미지 비율에 맞게 계산하되, 화면보다 작으면 화면 높이로 */
  height: max(100vh, calc(100vw * (16 / 9)));
  
  /* 중앙 정렬 */
  margin: 0 auto;
  overflow: hidden;
  
  display: flex;
  justify-content: center;
  align-items: center; /* 중앙 정렬 */
  
  /* Safe-area 대응 (notch 있는 iPhone) */
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  
  box-sizing: border-box;
}

/* ============================================
   프레임 이미지 (9:16 PNG)
   ============================================ */
.frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 가로 기준으로 화면에 딱 맞게, 비율 유지하며 잘리지 않게 */
  object-fit: contain;
  object-position: center;
  z-index: 1;
  pointer-events: none; /* 클릭 이벤트는 AR 캔버스로 전달 */
}

/* ============================================
   AR 캔버스 (카메라 렌더링 영역)
   ============================================ */
.ar-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 2;
  /* AR SDK가 이 영역에 렌더링 */
}

/* ============================================
   UI 오버레이 (프레임 내부에 배치)
   ============================================ */
.ui-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  pointer-events: none; /* 기본적으로 클릭 통과 */
  
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.ui-content {
  pointer-events: auto; /* UI 요소만 클릭 가능 */
  text-align: center;
  color: white;
  padding: 20px;
}

.ar-button {
  background: rgba(255, 255, 255, 0.9);
  color: #000;
  border: none;
  padding: 12px 24px;
  border-radius: 25px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  margin-top: 20px;
}

.ar-button:hover {
  background: rgba(255, 255, 255, 1);
}

/* 이미지 로드 실패 시 숨김 처리 (JavaScript에서 클래스 추가) */
.frame.hidden {
  display: none;
}

/* ============================================
   반응형 미세 조정 (선택사항)
   ============================================ */

/* 매우 긴 화면 (21:9 등) - 가로가 더 긴 경우 */
@media (max-aspect-ratio: 9/16) {
  .frame-container {
    /* 세로 기준으로 맞추되, 가로는 화면에 맞게 */
    height: 100vh;
    width: 100vw; /* 가로는 항상 화면에 맞게 */
    /* 이미지가 잘리지 않도록 중앙 정렬 */
    justify-content: center;
    align-items: center;
  }
  
  .frame {
    width: 100%;
    height: auto;
    max-height: 100vh; /* 세로가 화면을 넘지 않도록 */
  }
}

/* 세로가 매우 짧은 기기 대비 */
@media (min-aspect-ratio: 16/9) {
  .frame-container {
    max-height: 100vh;
  }
}