/* 모바일 위치 문제 수정 CSS */

@media screen and (max-width: 768px) {
  
  /* HTML/Body 리셋 */
  html {
    width: 100%;
    height: 100%;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }
  
  body {
    width: 100% !important;
    min-height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    padding-top: 55px !important; /* 헤더 높이만큼만 */
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    position: relative !important;
  }
  
  /* 헤더 정확한 위치 */
  .app-header, header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 55px !important;
    margin: 0 !important;
    z-index: 10000 !important;
    background: white !important;
    border-bottom: 1px solid #e9ecef !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
  }
  
  /* 메인 컨테이너 위치 조정 */
  .app-container {
    width: 100% !important;
    margin: 0 !important;
    padding: 15px !important;
    padding-top: 15px !important; /* 상단 패딩 명확히 */
    padding-bottom: 30px !important;
    position: relative !important;
    top: 0 !important;
    transform: none !important;
  }
  
  /* 탭 컨텐츠 위치 */
  .tab-content,
  .tab-pane {
    position: relative !important;
    top: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
  }
  
  /* AI 검색 섹션 위치 */
  #aiSearchSection {
    position: relative !important;
    top: 0 !important;
    margin: 0 0 20px 0 !important;
    transform: none !important;
  }
  
  /* 탭 네비게이션 위치 */
  .tab-nav {
    position: relative !important;
    top: 0 !important;
    margin: 0 0 20px 0 !important;
    transform: none !important;
  }
  
  /* 그리드 컨테이너 위치 */
  .music-grid,
  .games-grid,
  .feed-grid,
  .tools-grid,
  [class*="grid"] {
    position: relative !important;
    top: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
  }
  
  /* 카드 위치 */
  .card,
  [class*="card"] {
    position: relative !important;
    top: 0 !important;
    margin: 0 0 15px 0 !important;
    transform: none !important;
  }
  
  /* 모든 섹션 위치 초기화 */
  section, article, main, div {
    position: relative !important;
    top: 0 !important;
    transform: none !important;
  }
  
  /* translateY 제거 */
  * {
    transform: none !important;
  }
  
  /* 불필요한 마진/패딩 제거 */
  .app-container > *:first-child {
    margin-top: 0 !important;
  }
  
  /* 사이드바가 있을 경우 */
  .mobile-sidebar {
    position: fixed !important;
    top: 55px !important;
    bottom: 0 !important;
    left: -100% !important;
    width: 80% !important;
    max-width: 300px !important;
    background: white !important;
    z-index: 9999 !important;
    transition: left 0.3s ease !important;
  }
  
  .mobile-sidebar.active {
    left: 0 !important;
  }
  
  /* 오버레이 */
  .mobile-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(0, 0, 0, 0.5) !important;
    z-index: 9998 !important;
    display: none !important;
  }
  
  .mobile-overlay.active {
    display: block !important;
  }
  
  /* 모달 위치 */
  .modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    margin: 0 !important;
    padding: 20px !important;
    transform: none !important;
  }
  
  .modal-content {
    position: relative !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 auto !important;
  }
  
  /* 플로팅 버튼 위치 */
  .fab {
    position: fixed !important;
    bottom: 20px !important;
    right: 20px !important;
    transform: none !important;
  }
}

/* 가로 모드 */
@media screen and (max-width: 768px) and (orientation: landscape) {
  
  body {
    padding-top: 50px !important;
  }
  
  .app-header, header {
    height: 50px !important;
  }
  
  .mobile-sidebar {
    top: 50px !important;
  }
}

/* 작은 화면 */
@media screen and (max-width: 375px) {
  
  body {
    padding-top: 50px !important;
  }
  
  .app-header, header {
    height: 50px !important;
  }
  
  .app-container {
    padding: 10px !important;
  }
}