: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;
  --mobile-shell-gutter: 28px;
  --mobile-shell-max: clamp(390px, 94vw, 460px);
  --mobile-shell-width: min(calc(100% - var(--mobile-shell-gutter)), var(--mobile-shell-max));
  --mobile-nav-icon-size: clamp(42px, 10.4vw, 48px);
}

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

html,
body {
  max-width: 100%;
  overflow-x: clip;
  overscroll-behavior-y: auto;
}

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;
}

.ai-chat-card {
  background: rgba(255, 255, 255, .95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(229, 231, 235, .5);
  box-shadow: 0 10px 40px -10px rgba(0, 0, 0, .2);
  transition: opacity .25s ease, transform .25s ease;
  transform-origin: bottom right;
}

.ai-chat-hidden {
  opacity: 0;
  transform: scale(.8) translateY(20px);
  pointer-events: none;
}

.ai-bot-msg {
  background-color: #f3f4f6;
  border-radius: 12px 12px 12px 0;
}

.ai-user-msg {
  background-color: #3b82f6;
  color: white;
  border-radius: 12px 12px 0 12px;
}

.chatbot-typing-dot {
  animation: chatbot-blink 1.4s infinite both;
  height: 6px;
  width: 6px;
  background: #6b7280;
  border-radius: 50%;
  display: inline-block;
  margin: 0 1px;
}

.chatbot-typing-dot:nth-child(2) { animation-delay: .2s; }
.chatbot-typing-dot:nth-child(3) { animation-delay: .4s; }

@keyframes chatbot-blink {
  0%, 100% { opacity: .2; }
  20% { opacity: 1; }
}

.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));
  }
}

@media (min-width: 768px) {
  :root {
    --mobile-shell-max: 500px;
    --mobile-nav-icon-size: 48px;
  }
}

/* =====================================================
   FLOATING MOBILE NAV (전역 공통 - 모든 페이지 자동 적용)
   Pixel 7 기준 (412px) / Pixel 9·10 자동 대응
   ===================================================== */
.floating-mobile-nav {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important;
  transform: none !important;
  width: var(--mobile-shell-width) !important;
  max-width: var(--mobile-shell-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  z-index: 80;
  border-radius: 999px;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(226, 232, 240, .9);
  box-shadow: 0 14px 34px rgba(15, 23, 42, .18);
  padding: 10px 12px;
  display: flex !important;
  justify-content: space-between;
  align-items: center;
}

.floating-mobile-nav .nav-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 54px;
  color: #374151;
  font-size: .7rem;
  font-weight: 700;
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.floating-mobile-nav .nav-circle {
  width: var(--mobile-nav-icon-size);
  height: var(--mobile-nav-icon-size);
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 16px rgba(15, 23, 42, .08);
}

.floating-mobile-nav .nav-home .nav-circle {
  background: linear-gradient(135deg, #2563eb, #3b82f6);
  color: white;
  font-size: 1.2rem;
}

.floating-mobile-nav .nav-chat .nav-circle {
  overflow: hidden;
  border: 2px solid #2563eb;
  background: white;
}

.floating-mobile-nav .nav-muted .nav-circle {
  background: linear-gradient(135deg, #f8fafc, #e5e7eb);
}

/* 네비가 삽입된 경우 body 하단 패딩 */
body.has-floating-nav {
  padding-bottom: calc(90px + env(safe-area-inset-bottom, 0px)) !important;
}

@media (min-width: 1024px) {
  .floating-mobile-nav {
    width: var(--mobile-shell-width) !important;
    max-width: var(--mobile-shell-max) !important;
  }
}

/* =====================================================
   POWER AD CAROUSEL — 모바일 가로 스크롤
   Pixel 7 (412px) 기준 자동 적용
   ===================================================== */
@media (max-width: 1023px) {
  #powerViewport {
    overflow-x: auto !important;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    position: relative;
  }

  #powerViewport::-webkit-scrollbar { display: none; }

  #powerAdTrack {
    display: flex !important;
    width: max-content !important;
    gap: 10px;
    transform: none !important;
    transition: none !important;
    will-change: auto !important;
  }

  #powerAdTrack .power-group {
    display: contents !important;
    flex: none;
  }

  #powerAdTrack .power-group > div {
    width: calc((100vw - 38px) / 2);
    min-width: calc((100vw - 38px) / 2);
    max-width: 220px;
    flex: 0 0 calc((100vw - 38px) / 2);
    padding: 0 !important;
    scroll-snap-align: start;
  }

  #powerAdTrack .slot {
    height: 190px !important;
    border-radius: 16px !important;
  }

  #prevBtn, #nextBtn { display: none !important; }
}

/* =====================================================
   RESPONSIVE LAYOUT HELPERS
   그리드 레이아웃 모바일 자동 붕괴 (Pixel 7 기준)
   ===================================================== */
@media (max-width: 767px) {
  /* 12컬럼 그리드 컨테이너: 모바일에서 단일 컬럼 */
  .grid.grid-cols-12 {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* col-span 강제 전폭 */
  .grid.grid-cols-12 > [class*="col-span-"] {
    grid-column: 1 / -1 !important;
  }

  /* 숨겨진 사이드바는 모바일에서도 숨김 유지 */
  .grid.grid-cols-12 > aside.hidden {
    display: none !important;
  }

  /* 헤더 텍스트 크기 조정 */
  h1 { font-size: clamp(1.25rem, 5vw, 1.75rem); }
  h2 { font-size: clamp(1.1rem, 4vw, 1.5rem); }
}