/* 남주기아까운김치 주문관리시스템 커스텀 스타일 */

/* 기본 폰트 설정 */
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Noto Sans KR', sans-serif;
  line-height: 1.6;
}

/* 애니메이션 효과 */
.fade-in {
  animation: fadeIn 0.3s ease-in;
}

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

.slide-in {
  animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

/* 버튼 호버 효과 개선 */
.btn-hover {
  transition: all 0.2s ease-in-out;
}

.btn-hover:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* 카드 호버 효과 */
.card-hover {
  transition: all 0.2s ease-in-out;
}

.card-hover:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

/* 메뉴 아이템 스타일 */
.menu-item {
  border: 2px solid transparent;
  transition: all 0.2s ease-in-out;
}

.menu-item:hover {
  border-color: #f97316;
  background-color: #fff7ed;
}

.menu-item.selected {
  border-color: #ea580c;
  background-color: #ffedd5;
}

/* 주문 상태 뱃지 */
.status-pending { @apply bg-yellow-100 text-yellow-800; }
.status-confirmed { @apply bg-blue-100 text-blue-800; }
.status-preparing { @apply bg-purple-100 text-purple-800; }
.status-ready { @apply bg-green-100 text-green-800; }
.status-completed { @apply bg-gray-100 text-gray-800; }
.status-cancelled { @apply bg-red-100 text-red-800; }

/* 반응형 그리드 */
.menu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1rem;
}

@media (max-width: 640px) {
  .menu-grid {
    grid-template-columns: 1fr;
  }
}

/* 로딩 스피너 커스텀 */
.spinner {
  border: 2px solid #f3f4f6;
  border-top: 2px solid #f97316;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 토스트 알림 스타일 */
.toast {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 1000;
  padding: 1rem;
  border-radius: 0.5rem;
  color: white;
  font-weight: 500;
  animation: toast-slide-in 0.3s ease-out;
}

.toast.success { background-color: #10b981; }
.toast.error { background-color: #ef4444; }
.toast.warning { background-color: #f59e0b; }
.toast.info { background-color: #3b82f6; }

@keyframes toast-slide-in {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

/* 모바일 최적화 */
@media (max-width: 768px) {
  .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  
  .text-responsive {
    font-size: 0.9rem;
  }
  
  .btn-responsive {
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
  }
}

/* 인쇄용 스타일 (라벨 출력) */
@media print {
  body * {
    visibility: hidden;
  }
  
  .printable, .printable * {
    visibility: visible;
  }
  
  .printable {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
  }
  
  .no-print {
    display: none !important;
  }
}

/* 체크아웃 모달 스타일 */
.checkout-step {
  animation: fadeIn 0.3s ease-in-out;
}

.step-indicator {
  transition: all 0.3s ease-in-out;
}

.step-indicator.active {
  transform: scale(1.1);
}

.step-indicator div {
  transition: all 0.3s ease-in-out;
}

/* 폼 입력 필드 스타일 */
.form-input {
  transition: all 0.2s ease-in-out;
}

.form-input:focus {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(249, 115, 22, 0.2);
}

/* 라디오 버튼 커스텀 스타일 */
.radio-option {
  transition: all 0.2s ease-in-out;
}

.radio-option:hover {
  background-color: #fef3c7;
  border-color: #f59e0b;
}

.radio-option input[type="radio"]:checked + .radio-content {
  background-color: #fef3c7;
  border-color: #f59e0b;
}

/* 체크아웃 단계 진행 바 */
.progress-line {
  transition: all 0.5s ease-in-out;
}

.progress-line.completed {
  background-color: #f97316;
}

/* 주문 요약 카드 */
.order-summary {
  background: linear-gradient(135deg, #fef7ed 0%, #ffffff 100%);
  border: 1px solid #fed7aa;
}

/* 다크 모드 지원 (관리자 페이지) */
.dark {
  color-scheme: dark;
}

.dark .bg-dark { background-color: #111827; }
.dark .text-dark { color: #f9fafb; }
.dark .border-dark { border-color: #374151; }