/**
 * 토치트 - 커스텀 스타일
 * 
 * @author tocheat
 * @version 1.0.0
 */

/* 검색 스타일 */

/* 애니메이션 */
@keyframes fade-in {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in {
    animation: fade-in 0.6s ease-out forwards;
}

/* 기본 스타일 */
* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

::-webkit-scrollbar-track {
    background: #f1f5f9;
}

.dark ::-webkit-scrollbar-track {
    background: #1e293b;
}

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

.dark ::-webkit-scrollbar-thumb {
    background: #475569;
}

::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

.dark ::-webkit-scrollbar-thumb:hover {
    background: #64748b;
}

/* 포커스 스타일 */
.focus-ring:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    box-shadow: 0 0 0 2px #3b82f6;
}

/* 버튼 스타일 */
.btn {
    @apply inline-flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-md transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2;
}

.btn-primary {
    @apply bg-primary-600 text-white hover:bg-primary-700 focus:ring-primary-500;
}

.btn-secondary {
    @apply bg-gray-600 text-white hover:bg-gray-700 focus:ring-gray-500;
}

.btn-success {
    @apply bg-green-600 text-white hover:bg-green-700 focus:ring-green-500;
}

.btn-warning {
    @apply bg-yellow-600 text-white hover:bg-yellow-700 focus:ring-yellow-500;
}

.btn-danger {
    @apply bg-red-600 text-white hover:bg-red-700 focus:ring-red-500;
}

.btn-outline {
    @apply border-gray-300 text-gray-700 bg-white hover:bg-gray-50 focus:ring-primary-500;
}

.dark .btn-outline {
    @apply border-gray-600 text-gray-300 bg-gray-800 hover:bg-gray-700;
}

.btn-sm {
    @apply px-3 py-1.5 text-xs;
}

.btn-lg {
    @apply px-6 py-3 text-base;
}

/* 입력 필드 스타일 */
.form-input {
    @apply block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-primary-500 focus:border-primary-500;
}

.dark .form-input {
    @apply bg-gray-700 border-gray-600 text-white placeholder-gray-400 focus:ring-primary-400 focus:border-primary-400;
}

.form-textarea {
    @apply form-input resize-vertical;
}

.form-select {
    @apply form-input pr-10 bg-white;
}

.dark .form-select {
    @apply bg-gray-700;
}

/* 카드 스타일 */
.card {
    @apply bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700;
}

.card-header {
    @apply px-6 py-4 border-b border-gray-200 dark:border-gray-700;
}

.card-body {
    @apply px-6 py-4;
}

.card-footer {
    @apply px-6 py-4 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-750;
}

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

.badge-primary {
    @apply bg-primary-100 text-primary-800 dark:bg-primary-900 dark:text-primary-200;
}

.badge-secondary {
    @apply bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200;
}

.badge-success {
    @apply bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200;
}

.badge-warning {
    @apply bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200;
}

.badge-danger {
    @apply bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200;
}

/* 알림 스타일 */
.alert {
    @apply p-4 rounded-md border;
}

.alert-info {
    @apply bg-blue-50 border-blue-200 text-blue-800 dark:bg-blue-900 dark:border-blue-700 dark:text-blue-200;
}

.alert-success {
    @apply bg-green-50 border-green-200 text-green-800 dark:bg-green-900 dark:border-green-700 dark:text-green-200;
}

.alert-warning {
    @apply bg-yellow-50 border-yellow-200 text-yellow-800 dark:bg-yellow-900 dark:border-yellow-700 dark:text-yellow-200;
}

.alert-danger {
    @apply bg-red-50 border-red-200 text-red-800 dark:bg-red-900 dark:border-red-700 dark:text-red-200;
}

/* 테이블 스타일 */
.table {
    @apply min-w-full divide-y divide-gray-200 dark:divide-gray-700;
}

.table thead {
    @apply bg-gray-50 dark:bg-gray-800;
}

.table th {
    @apply px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider;
}

.table td {
    @apply px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100;
}

.table tbody tr {
    @apply bg-white dark:bg-gray-900;
}

.table tbody tr:nth-child(even) {
    @apply bg-gray-50 dark:bg-gray-800;
}

.table tbody tr:hover {
    @apply bg-gray-100 dark:bg-gray-700;
}

/* 로딩 애니메이션 */
.loading-spinner {
    @apply animate-spin rounded-full border-2 border-gray-300 border-t-primary-600;
}

.loading-dots::after {
    content: '';
    animation: loading-dots 1.5s infinite;
}

@keyframes loading-dots {
    0%, 20% { content: ''; }
    40% { content: '.'; }
    60% { content: '..'; }
    80%, 100% { content: '...'; }
}

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

.gradient-bg-primary {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
}

.gradient-bg-success {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.gradient-bg-warning {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.gradient-bg-danger {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

/* 텍스트 그라데이션 */
.text-gradient {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* 호버 효과 */
.hover-lift {
    transition: transform 0.2s ease-in-out;
}

.hover-lift:hover {
    transform: translateY(-2px);
}

.hover-scale {
    transition: transform 0.2s ease-in-out;
}

.hover-scale:hover {
    transform: scale(1.05);
}

/* 그림자 효과 */
.shadow-soft {
    box-shadow: 0 2px 15px -3px rgba(0, 0, 0, 0.07), 0 10px 20px -2px rgba(0, 0, 0, 0.04);
}

.shadow-strong {
    box-shadow: 0 10px 25px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* 검색 결과 하이라이트 */
mark {
    @apply bg-yellow-200 dark:bg-yellow-800 px-1 rounded;
}

/* 심각도 표시 */
.severity-1 { @apply text-green-600 dark:text-green-400; }
.severity-2 { @apply text-yellow-600 dark:text-yellow-400; }
.severity-3 { @apply text-orange-600 dark:text-orange-400; }
.severity-4 { @apply text-red-600 dark:text-red-400; }
.severity-5 { @apply text-red-800 dark:text-red-300; }

.severity-bg-1 { @apply bg-green-100 dark:bg-green-900; }
.severity-bg-2 { @apply bg-yellow-100 dark:bg-yellow-900; }
.severity-bg-3 { @apply bg-orange-100 dark:bg-orange-900; }
.severity-bg-4 { @apply bg-red-100 dark:bg-red-900; }
.severity-bg-5 { @apply bg-red-200 dark:bg-red-800; }

/* 상태 표시 */
.status-pending { @apply text-yellow-600 dark:text-yellow-400 bg-yellow-100 dark:bg-yellow-900; }
.status-approved { @apply text-green-600 dark:text-green-400 bg-green-100 dark:bg-green-900; }
.status-rejected { @apply text-red-600 dark:text-red-400 bg-red-100 dark:bg-red-900; }

/* 통계 카드 */
.stat-card {
    @apply card p-6 text-center hover-lift;
}

.stat-number {
    @apply text-3xl font-bold mb-2;
}

.stat-label {
    @apply text-sm text-gray-600 dark:text-gray-400;
}

/* 배너 스타일 */
.banner-container {
    @apply relative overflow-hidden rounded-lg;
}

.banner-image {
    @apply w-full h-full object-cover transition-transform duration-300;
}

.banner-container:hover .banner-image {
    @apply scale-105;
}

/* 검색 필터 */
.filter-chip {
    @apply inline-flex items-center px-3 py-1 rounded-full text-sm font-medium border cursor-pointer transition-colors;
}

.filter-chip.active {
    @apply bg-primary-600 text-white border-primary-600;
}

.filter-chip:not(.active) {
    @apply bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700;
}

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

.pagination a,
.pagination span {
    @apply px-3 py-2 text-sm font-medium rounded-md transition-colors;
}

.pagination a {
    @apply text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800;
}

.pagination .current {
    @apply bg-primary-600 text-white;
}

/* 드롭다운 메뉴 */
.dropdown-menu {
    @apply absolute right-0 mt-2 w-48 bg-white dark:bg-gray-800 rounded-md shadow-lg py-1 z-50 border border-gray-200 dark:border-gray-700;
}

.dropdown-item {
    @apply block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors;
}

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

.modal-content {
    @apply bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-md w-full mx-4;
}

.modal-header {
    @apply px-6 py-4 border-b border-gray-200 dark:border-gray-700;
}

.modal-body {
    @apply px-6 py-4;
}

.modal-footer {
    @apply px-6 py-4 border-t border-gray-200 dark:border-gray-700 flex justify-end space-x-3;
}

/* 탭 */
.tab-list {
    @apply flex border-b border-gray-200 dark:border-gray-700;
}

.tab-button {
    @apply px-4 py-2 text-sm font-medium text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 border-b-2 border-transparent hover:border-gray-300 dark:hover:border-gray-600 transition-colors;
}

.tab-button.active {
    @apply text-primary-600 dark:text-primary-400 border-primary-600 dark:border-primary-400;
}

.tab-content {
    @apply py-4;
}

/* 프로그레스 바 */
.progress-bar {
    @apply w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2;
}

.progress-fill {
    @apply bg-primary-600 h-2 rounded-full transition-all duration-300;
}

/* 툴팁 */
.tooltip {
    @apply absolute z-50 px-2 py-1 text-xs font-medium text-white bg-gray-900 rounded shadow-lg;
}

.tooltip::before {
    content: '';
    @apply absolute w-0 h-0 border-l-4 border-r-4 border-t-4 border-transparent border-t-gray-900;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
}

/* 반응형 유틸리티 */
@media (max-width: 640px) {
    .mobile-hidden {
        display: none !important;
    }
    
    .mobile-full {
        width: 100% !important;
    }
    
    .mobile-text-sm {
        font-size: 0.875rem !important;
    }
}

/* 프린트 스타일 */
@media print {
    .no-print {
        display: none !important;
    }
    
    .print-break {
        page-break-after: always;
    }
    
    body {
        font-size: 12pt;
        line-height: 1.4;
    }
    
    h1, h2, h3, h4, h5, h6 {
        page-break-after: avoid;
    }
}

/* 접근성 */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.focus\:not-sr-only:focus {
    position: static;
    width: auto;
    height: auto;
    padding: inherit;
    margin: inherit;
    overflow: visible;
    clip: auto;
    white-space: normal;
}

/* 고대비 모드 */
@media (prefers-contrast: high) {
    .card {
        @apply border-2 border-gray-900 dark:border-gray-100;
    }
    
    .btn {
        @apply border-2;
    }
    
    .form-input {
        @apply border-2 border-gray-900 dark:border-gray-100;
    }
}

/* 애니메이션 감소 모드 */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}