:root {
  --mobile-safe-top: env(safe-area-inset-top, 0px);
  --mobile-safe-right: env(safe-area-inset-right, 0px);
  --mobile-safe-bottom: env(safe-area-inset-bottom, 0px);
  --mobile-safe-left: env(safe-area-inset-left, 0px);
  --app-vh: 1vh;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html,
body {
  max-width: 100%;
  overflow-x: clip;
}

body {
  padding-left: var(--mobile-safe-left);
  padding-right: var(--mobile-safe-right);
}

img,
video,
canvas,
svg,
iframe {
  max-width: 100%;
}

input,
select,
textarea,
button {
  touch-action: manipulation;
}

.mobile-scroll-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 767px) {
  input,
  select,
  textarea {
    font-size: 16px;
  }

  .ai-chat-card {
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    max-width: none !important;
    height: min(72vh, 560px) !important;
    bottom: calc(72px + var(--mobile-safe-bottom)) !important;
  }

  .sticky,
  [class*="sticky"] {
    top: var(--mobile-safe-top);
  }

  .fixed-bottom-safe {
    bottom: calc(16px + var(--mobile-safe-bottom)) !important;
  }

  /* 하단 네비게이션 바 여백 보정 */
  body {
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
  }
}