/* HaninNet Common Styles */

/* 공통 요소들 */
.btn-primary {
    @apply bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 transition-colors duration-200;
}

.btn-secondary {
    @apply bg-gray-200 text-gray-800 px-4 py-2 rounded-md hover:bg-gray-300 transition-colors duration-200;
}

.btn-danger {
    @apply bg-red-600 text-white px-4 py-2 rounded-md hover:bg-red-700 transition-colors duration-200;
}

.card {
    @apply bg-white rounded-lg shadow-md overflow-hidden;
}

.card-hover {
    @apply transition-all duration-300 hover:shadow-lg hover:-translate-y-1;
}

.input-field {
    @apply w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent;
}

.select-field {
    @apply w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-white;
}

.textarea-field {
    @apply w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-vertical;
}

/* 아바타 */
.avatar-sm {
    @apply w-8 h-8 rounded-full object-cover;
}

.avatar-md {
    @apply w-12 h-12 rounded-full object-cover;
}

.avatar-lg {
    @apply w-16 h-16 rounded-full object-cover;
}

/* 배지 */
.badge {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
}

.badge-blue {
    @apply bg-blue-100 text-blue-800;
}

.badge-green {
    @apply bg-green-100 text-green-800;
}

.badge-yellow {
    @apply bg-yellow-100 text-yellow-800;
}

.badge-red {
    @apply bg-red-100 text-red-800;
}

.badge-purple {
    @apply bg-purple-100 text-purple-800;
}

.badge-gray {
    @apply bg-gray-100 text-gray-800;
}

/* 로딩 스피너 */
.spinner {
    @apply animate-spin rounded-full border-4 border-gray-200 border-t-blue-600;
}

/* 토스트 알림 */
.toast {
    @apply fixed top-4 right-4 bg-white border border-gray-200 rounded-lg shadow-lg p-4 z-50 transform translate-x-full transition-transform duration-300;
}

.toast.show {
    @apply translate-x-0;
}

.toast-success {
    @apply border-l-4 border-green-400;
}

.toast-error {
    @apply border-l-4 border-red-400;
}

.toast-warning {
    @apply border-l-4 border-yellow-400;
}

.toast-info {
    @apply border-l-4 border-blue-400;
}

/* 모달 */
.modal-overlay {
    @apply fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4;
}

.modal-content {
    @apply bg-white rounded-lg shadow-xl max-w-lg w-full max-h-screen overflow-y-auto;
}

/* 페이지네이션 */
.pagination {
    @apply flex items-center space-x-1;
}

.pagination-btn {
    @apply px-3 py-2 text-sm text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-md transition-colors duration-200;
}

.pagination-btn.active {
    @apply bg-blue-600 text-white hover:bg-blue-700 hover:text-white;
}

.pagination-btn:disabled {
    @apply opacity-50 cursor-not-allowed hover:bg-transparent hover:text-gray-500;
}

/* 반응형 텍스트 */
.text-responsive {
    @apply text-sm sm:text-base lg:text-lg;
}

/* 그리드 레이아웃 */
.grid-auto-fit {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.grid-auto-fill {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

/* 트랜지션 */
.transition-fast {
    @apply transition-all duration-150 ease-in-out;
}

.transition-normal {
    @apply transition-all duration-300 ease-in-out;
}

.transition-slow {
    @apply transition-all duration-500 ease-in-out;
}

/* 유틸리티 */
.text-ellipsis {
    @apply truncate;
}

.text-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.text-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 스크롤바 스타일링 */
.scrollbar-thin {
    scrollbar-width: thin;
    scrollbar-color: #cbd5e0 #f7fafc;
}

.scrollbar-thin::-webkit-scrollbar {
    width: 6px;
}

.scrollbar-thin::-webkit-scrollbar-track {
    background: #f7fafc;
}

.scrollbar-thin::-webkit-scrollbar-thumb {
    background-color: #cbd5e0;
    border-radius: 3px;
}

.scrollbar-thin::-webkit-scrollbar-thumb:hover {
    background-color: #a0aec0;
}

/* 포커스 상태 */
.focus-visible {
    @apply focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2;
}

/* 다크모드 지원 (미래 확장용) */
@media (prefers-color-scheme: dark) {
    .dark-mode {
        /* 다크모드 스타일을 여기에 추가 */
    }
}

/* 접근성 */
.sr-only {
    @apply absolute w-px h-px p-0 -m-px overflow-hidden whitespace-nowrap border-0;
}

/* 호버 효과 */
.hover-lift {
    @apply transition-transform duration-200 hover:-translate-y-1;
}

.hover-scale {
    @apply transition-transform duration-200 hover:scale-105;
}

/* 그림자 변형 */
.shadow-soft {
    box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.1);
}

.shadow-medium {
    box-shadow: 0 4px 25px 0 rgba(0, 0, 0, 0.15);
}

.shadow-strong {
    box-shadow: 0 8px 40px 0 rgba(0, 0, 0, 0.2);
}

/* 그라데이션 배경 */
.gradient-blue {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.gradient-green {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.gradient-purple {
    background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
}

.gradient-orange {
    background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
}

/* 애니메이션 */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

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

@keyframes slideInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

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

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