/* Mobile Base CSS (scoped)
   - 범위: #mobile-scope 내부만
   - 목적: 관리자 CSS와의 간섭 방지용 '컨테이너 스코프'
   - 모바일·웹뷰 지도·카드는 #mobile-scope 아래에서만 공격적으로 튜닝
*/

/*
 * WebView: 더블탭 줌으로 인한 클릭 지연(레거시 300ms) 완화.
 * 지도 영역은 아래 .ilkkun-map-gpu-slot / .ilkkun-map-touch 가 touch-action:none 으로 덮어 pan/zoom 유지.
 */
/* manipulation 은 더블탭 줌 지연 완화에 유리하나, 일부 WebView에서 세로 스크롤과 겹칠 수 있어 pan 허용 */
html,
body,
#root {
  touch-action: pan-x pan-y pinch-zoom;
}

#mobile-scope {
  /* scope anchor */
  display: contents;
}

/*
 * 지도 호스트: GPU 합성 레이어는 호스트 한 곳에만 translate3d (자식 중복 transform 금지)
 */
#mobile-scope .ilkkun-map-host {
  position: relative;
  transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  isolation: isolate;
  /* 페이지 스크롤 시 합성 레이어 과다·렉 완화 — 필요 시에만 GPU 힌트 */
  -webkit-user-select: none;
  user-select: none;
}

/* 스코프 밖 폴백(레거시) */
.ilkkun-map-host {
  position: relative;
  transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  isolation: isolate;
}

/*
 * 지도 슬롯: 로딩 완료 후에만 부드럽게 표시 (네이티브 느낌)
 */
#mobile-scope .ilkkun-map-slot-ui {
  opacity: 0;
  transition: opacity 0.3s ease-in;
}
#mobile-scope .ilkkun-map-slot-ui.ilkkun-map-slot-visible {
  opacity: 1;
}

/*
 * 슬롯 컨테이너: 터치·합성 힌트만 (transform 은 .ilkkun-map-host 에만)
 */
#mobile-scope .ilkkun-map-gpu-slot {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

/*
 * 지도·거래 메시지 공통: 이중 라인 테두리(참고 UI와 동일 톤)
 * 바깥 1px 밝은 선 → 간격(패딩) → 안쪽 1px 밝은 선
 */
#mobile-scope .ilkkun-double-frame {
  min-width: 0;
  border-radius: 1.2rem;
  padding: 3px;
  background: #060910;
  border: 1px solid rgba(255, 255, 255, 0.88);
  box-shadow: 0 10px 36px rgba(0, 0, 0, 0.42);
}

#mobile-scope .ilkkun-double-frame-inner {
  min-width: 0;
  overflow: hidden;
  border-radius: 0.95rem;
  border: 1px solid rgba(200, 220, 255, 0.62);
  background: rgba(4, 8, 16, 0.96);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

/* 지도 래퍼(이중 테두리 바깥) — .ilkkun-double-frame-inner 와 쌍으로 사용 */
#mobile-scope .ilkkun-map-frame {
  min-width: 0;
  border-radius: 1.2rem;
  padding: 3px;
  background: #060910;
  border: 1px solid rgba(255, 255, 255, 0.88);
  box-shadow: 0 10px 36px rgba(0, 0, 0, 0.42);
}

/* 지도 SDK 가 pan/zoom 처리 */
.ilkkun-map-touch {
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

/*
 * 등록/수정 모달처럼 세로 스크롤 부모 안에 넣은 지도:
 * touch-action:none 이면 손가락이 지도 위에서 시작할 때 부모 스크롤이 막혀 “렉”처럼 느껴짐.
 * 세로·핀치는 브라우저/부모로 넘기고, 지도 SDK는 여전히 제스처 처리(환경별 상이할 수 있음).
 */
.ilkkun-map-host.ilkkun-map-embed-in-scroll .ilkkun-map-gpu-slot,
.ilkkun-map-host.ilkkun-map-embed-in-scroll .ilkkun-map-touch {
  touch-action: pan-y pinch-zoom;
}

/* #mobile-scope 안 지도는 기존 규칙(#mobile-scope .ilkkun-map-gpu-slot)보다 구체적으로 덮어씀 */
#mobile-scope .ilkkun-map-host.ilkkun-map-embed-in-scroll .ilkkun-map-gpu-slot,
#mobile-scope .ilkkun-map-host.ilkkun-map-embed-in-scroll .ilkkun-map-touch {
  touch-action: pan-y pinch-zoom;
}

/*
 * 네이버 루트·첫 래퍼: 잔상 완화(backface)만 — transform 중복 제거
 */
#mobile-scope .ilkkun-naver-map-root,
#mobile-scope .ilkkun-naver-map-root > div {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-user-select: none;
  user-select: none;
}

/*
 * 진행내역: 본인 낙찰 카드 — box-shadow 키프레임 대신 ::after 의 opacity·scale 만 애니메이션 (저사양 GPU)
 */
#mobile-scope .ilkkun-auction-mh-win-gold {
  position: relative;
  isolation: isolate;
}
#mobile-scope .ilkkun-auction-mh-win-gold::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-sizing: border-box;
  border: 2px solid rgba(250, 204, 21, 0.78);
  background: transparent;
  pointer-events: none;
  z-index: 2;
  opacity: 0.65;
  transform: scale(1);
  transform-origin: center center;
  animation: ilkkun-auction-mh-win-gold-ring 1.35s ease-in-out infinite;
  will-change: transform, opacity;
}
@keyframes ilkkun-auction-mh-win-gold-ring {
  0%,
  100% {
    opacity: 0.5;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.035);
  }
}

/*
 * 접근성: 시스템「모션 줄이기」— 지도 페이드·낙찰 링 애니메이션 생략, 정적 표시만
 */
@media (prefers-reduced-motion: reduce) {
  #mobile-scope .ilkkun-map-host {
    will-change: auto;
  }

  #mobile-scope .ilkkun-map-slot-ui {
    transition: none;
  }

  #mobile-scope .ilkkun-auction-mh-win-gold::after {
    animation: none;
    opacity: 0.88;
    transform: scale(1);
    will-change: auto;
  }
}