/* iOS 전용: 마이크 fixed 래퍼 표시 */
#mic-fixed-bottom-center.ios-mic-fixed {
  display: flex !important;
}

/* 방법 1: iOS 전용 CSS 미디어 쿼리 사용 */
@supports (-webkit-touch-callout: none) {
  /* iOS Safari 전용 스타일 */
  
  /* foreignObject 위치 조정 */
  foreignObject {
    transform: translateZ(0); /* 하드웨어 가속 활성화 */
    -webkit-transform: translateZ(0);
  }
  
  .lottie-container {
    position: relative !important;
    transform: none !important;
    -webkit-transform: none !important;
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    overflow: visible !important;
  }
  
  dotlottie-player {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    transform: none !important;
    -webkit-transform: none !important;
  }
}

/* 방법 2: iOS 디바이스 감지 후 클래스 추가 */
.ios-device foreignObject {
  /* iOS에서 foreignObject의 위치 버그 수정 */
  transform: translate(0, 0) !important;
  -webkit-transform: translate(0, 0) !important;
}

.ios-device .lottie-container {
  /* iOS에서 컨테이너 위치 수정 */
  position: relative !important;
  top: auto !important;
  left: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  /* 마이크 아이콘 중앙 정렬 - iOS에서 틀어지는 현상 방지 */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.ios-device dotlottie-player {
  /* iOS에서 마이크 아이콘 위치 고정 */
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  -webkit-transform: translate(-50%, -50%) !important;
}

/* 방법 3: Safari 특정 핵 사용 */
@media not all and (min-resolution:.001dpcm) {
  @supports (-webkit-appearance:none) {
    /* Safari 전용 */
    foreignObject {
      /* SVG foreignObject Safari 버그 수정 */
      will-change: transform;
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
    }
  }
}

/* 방법 4: Viewport 단위 사용 시 iOS 대응 */
@supports (-webkit-touch-callout: none) {
  /* iOS에서 100vh 버그 대응 */
  body {
    height: 100vh;
    height: -webkit-fill-available;
  }
  
  #visualization {
    height: 100vh;
    height: -webkit-fill-available;
  }
}