/* 커스텀 버튼 스타일 */
.btn-primary {
  @apply px-4 py-2 bg-gradient-to-r from-purple-600 to-pink-600 text-white rounded-lg font-semibold;
  @apply hover:from-purple-700 hover:to-pink-700 transition-all transform hover:scale-105 shadow-lg;
  @apply flex items-center justify-center gap-1;
}

.btn-secondary {
  @apply px-4 py-2 bg-gradient-to-r from-gray-500 to-gray-600 text-white rounded-lg font-semibold;
  @apply hover:from-gray-600 hover:to-gray-700 transition-all transform hover:scale-105 shadow-lg;
  @apply flex items-center justify-center gap-1;
}

.btn-detail {
  @apply px-3 py-2 bg-gradient-to-r from-blue-500 to-blue-600 text-white rounded-lg text-sm font-semibold;
  @apply hover:from-blue-600 hover:to-blue-700 transition-all transform hover:scale-105 shadow-md;
  @apply flex items-center justify-center gap-1;
}

.btn-edit {
  @apply px-3 py-2 bg-gradient-to-r from-green-500 to-green-600 text-white rounded-lg text-sm font-semibold;
  @apply hover:from-green-600 hover:to-green-700 transition-all transform hover:scale-105 shadow-md;
  @apply flex items-center justify-center gap-1;
}

.btn-delete {
  @apply px-3 py-2 bg-gradient-to-r from-red-500 to-red-600 text-white rounded-lg text-sm font-semibold;
  @apply hover:from-red-600 hover:to-red-700 transition-all transform hover:scale-105 shadow-md;
  @apply flex items-center justify-center;
}

/* 텍스트 줄임 */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 애니메이션 */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fadeIn {
  animation: fadeIn 0.3s ease-out;
}

/* 스크롤바 스타일 */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: #9333ea;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #7e22ce;
}

/* 모달 애니메이션 */
#modal {
  animation: fadeIn 0.2s ease-out;
}

#modal > div {
  animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
  from {
    transform: translateY(50px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* 로딩 스피너 */
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.animate-spin {
  animation: spin 1s linear infinite;
}

/* 반응형 그리드 */
@media (max-width: 640px) {
  .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* 카드 호버 효과 */
.bg-white.rounded-lg.shadow-md {
  transition: all 0.3s ease;
}

.bg-white.rounded-lg.shadow-md:hover {
  transform: translateY(-4px);
}

/* 입력 필드 포커스 효과 강화 */
input:focus, select:focus, textarea:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(147, 51, 234, 0.1);
}

/* 이미지 호버 효과 */
img {
  transition: all 0.3s ease;
}

img:hover {
  transform: scale(1.02);
}

/* 버튼 아이콘 정렬 */
button i {
  display: inline-block;
  vertical-align: middle;
}

/* PWA 전용 스타일 */
@media (display-mode: standalone) {
  body {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* 프린트 스타일 */
@media print {
  header, .btn-primary, .btn-secondary, .btn-edit, .btn-delete, .btn-detail {
    display: none;
  }
  
  body {
    background: white;
  }
  
  .shadow-md, .shadow-lg, .shadow-xl {
    box-shadow: none;
  }
}