/* iOS 앱 전용 스타일 - app-specific.css */

/* ======================================
   Safe Area 처리
   ====================================== */

/* 기본 Safe Area 클래스들 */
.ios-safe-area-top {
  padding-top: max(env(safe-area-inset-top), 20px) !important;
}

.ios-safe-area-bottom {
  padding-bottom: max(env(safe-area-inset-bottom), 20px) !important;
}

.ios-safe-area-left {
  padding-left: env(safe-area-inset-left, 0px) !important;
}

.ios-safe-area-right {
  padding-right: env(safe-area-inset-right, 0px) !important;
}

.ios-safe-area-all {
  padding-top: max(env(safe-area-inset-top), 20px) !important;
  padding-left: env(safe-area-inset-left, 0px) !important;
  padding-right: env(safe-area-inset-right, 0px) !important;
  padding-bottom: max(env(safe-area-inset-bottom), 20px) !important;
}

/* 헤더 영역 Safe Area */
.ios-header-safe {
  padding-top: max(env(safe-area-inset-top), 44px) !important;
}

/* 푸터 영역 Safe Area */
.ios-footer-safe {
  padding-bottom: max(env(safe-area-inset-bottom), 34px) !important;
}

/* ======================================
   Capacitor 환경 최적화
   ====================================== */

/* Capacitor 앱에서만 적용되는 스타일 */
.capacitor-app body {
  /* 배경 이미지 고정 속성을 scroll로 변경 (iOS에서 성능 이슈) */
  background-attachment: scroll !important;
  
  /* 웹킷 스크롤 최적화 */
  -webkit-overflow-scrolling: touch;
  
  /* 터치 하이라이트 제거 */
  -webkit-tap-highlight-color: transparent;
  
  /* 줌 방지 */
  touch-action: pan-x pan-y;
}

.capacitor-app .login {
  background-attachment: scroll !important;
}

/* ======================================
   버튼 터치 최적화
   ====================================== */

.capacitor-app button,
.capacitor-app .btn,
.capacitor-app [role="button"] {
  /* 터치 반응성 향상 */
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* 소셜 로그인 버튼 최적화 */
.capacitor-app .w-16.h-16 {
  /* 터치 영역 확대 */
  min-height: 44px;
  min-width: 44px;
}

/* ======================================
   네비게이션 바 최적화
   ====================================== */

.capacitor-app #mainNav {
  /* Safe Area를 고려한 상단 패딩 */
  padding-top: max(env(safe-area-inset-top), 20px);
}

.capacitor-app .navbar-brand {
  /* 로고 위치 조정 */
  margin-top: 0;
}

/* ======================================
   폼 요소 최적화
   ====================================== */

.capacitor-app input,
.capacitor-app textarea,
.capacitor-app select {
  /* iOS 기본 스타일 제거 */
  -webkit-appearance: none;
  appearance: none;
  
  /* 줌 방지 (iOS Safari) */
  font-size: 16px;
  
  /* 자동완성 스타일 개선 */
  -webkit-text-fill-color: inherit;
}

.capacitor-app input:focus,
.capacitor-app textarea:focus {
  /* 포커스 시 줌 방지 */
  transform: translateZ(0);
}

/* ======================================
   모달 및 오버레이 최적화
   ====================================== */

.capacitor-app .modal,
.capacitor-app .modal-backdrop {
  /* Safe Area 고려 */
  top: env(safe-area-inset-top, 0);
  bottom: env(safe-area-inset-bottom, 0);
}

/* ======================================
   스크롤 영역 최적화
   ====================================== */

.capacitor-app .scroll-container {
  /* 네이티브 스크롤 동작 */
  -webkit-overflow-scrolling: touch;
  overflow-scrolling: touch;
}

/* ======================================
   텍스트 크기 조정 방지
   ====================================== */

.capacitor-app {
  /* iOS에서 가로모드 시 텍스트 크기 자동 조정 방지 */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* ======================================
   QR 스캐너 최적화
   ====================================== */

.capacitor-app .qr-video-container {
  /* Safe Area 고려한 비디오 영역 */
  padding-top: max(env(safe-area-inset-top), 20px);
}

.capacitor-app #qr-video {
  /* 카메라 뷰 최적화 */
  object-fit: cover;
}

/* ======================================
   카드 리스트 최적화
   ====================================== */

.capacitor-app .card-list {
  /* Safe Area 고려한 하단 패딩 */
  padding-bottom: max(env(safe-area-inset-bottom), 20px);
}

/* ======================================
   미디어 쿼리 - 작은 화면 최적화
   ====================================== */

@media screen and (max-width: 480px) {
  .capacitor-app .container,
  .capacitor-app .max-w-md {
    /* 작은 화면에서 여백 최적화 */
    padding-left: max(env(safe-area-inset-left), 16px);
    padding-right: max(env(safe-area-inset-right), 16px);
  }
}

/* ======================================
   다크모드 지원 (향후 확장)
   ====================================== */

@media (prefers-color-scheme: dark) {
  .capacitor-app {
    /* 다크모드 변수들 (필요시 확장) */
    --app-bg-color: #1a1a1a;
    --app-text-color: #ffffff;
  }
}

/* ======================================
   디버깅용 (개발 시에만 사용)
   ====================================== */

.debug-safe-area {
  /* Safe Area 영역 시각화 (개발용) */
  outline: 2px solid red;
  outline-offset: -2px;
}

/* 개발 환경에서만 Safe Area 가이드 표시 */
.development .ios-safe-area-top::before {
  content: "Safe Area Top";
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(255, 0, 0, 0.3);
  padding: 2px 4px;
  font-size: 10px;
  color: white;
}