/* 모바일 최적화 CSS */

/* 기본 모바일 반응형 설정 */
@media (max-width: 768px) {
  .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  /* 헤더 최적화 */
  header .container {
    padding: 0.75rem 1rem;
  }

  header h1 {
    font-size: 1.125rem;
  }

  /* 관리자 메뉴 카드 최적화 */
  .admin-menu-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }

  .admin-menu-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  }

  /* 탭 네비게이션 최적화 */
  .tab-button {
    min-height: 44px; /* iOS 터치 타겟 최소 크기 */
    font-size: 0.875rem;
  }

  /* 폼 요소 최적화 */
  input, select, textarea, button {
    min-height: 44px;
    font-size: 16px; /* iOS 확대 방지 */
  }

  /* 테이블 반응형 */
  .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* 모달 최적화 */
  .modal {
    margin: 1rem;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
  }

  /* 터치 피드백 */
  .touch-feedback {
    transform: scale(0.98);
    transition: transform 0.1s ease;
  }

  /* 스크롤바 숨김 (모바일) */
  .hide-scrollbar {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .hide-scrollbar::-webkit-scrollbar {
    display: none;
  }
}

/* 모바일 전용 클래스 */
.mobile-optimized {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.mobile-optimized input,
.mobile-optimized textarea,
.mobile-optimized select {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

/* 터치 스타일 */
.mobile-touch-target {
  min-height: 44px;
  min-width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 스와이프 제스처 지원 */
.swipe-container {
  touch-action: pan-x pan-y;
  overflow: hidden;
}

/* 로딩 스피너 모바일 최적화 */
.loading-spinner {
  width: 24px;
  height: 24px;
}

/* 알림 토스트 모바일 최적화 */
#toast {
  bottom: 1rem;
  right: 1rem;
  left: 1rem;
  max-width: none;
}

@media (min-width: 640px) {
  #toast {
    left: auto;
    max-width: 24rem;
  }
}