/**
 * WiFi QR 생성기 - 커스텀 스타일
 * Tailwind CSS와 함께 사용되는 추가 스타일
 */

/* ==========================================================================
   커스텀 스크롤바
   ========================================================================== */

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    @apply bg-white/20 rounded-lg;
}

::-webkit-scrollbar-thumb {
    @apply bg-blue-500 rounded-lg;
}

::-webkit-scrollbar-thumb:hover {
    @apply bg-blue-600;
}

/* ==========================================================================
   커스텀 슬라이더 스타일
   ========================================================================== */

input[type="range"].slider {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    cursor: pointer;
    width: 100%;
    height: 8px;
}

input[type="range"].slider::-webkit-slider-track {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    height: 8px;
}

input[type="range"].slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: #3b82f6;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
    margin-top: -6px;
}

input[type="range"].slider::-webkit-slider-thumb:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
}

input[type="range"].slider::-moz-range-track {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    height: 8px;
    border: none;
}

input[type="range"].slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: #3b82f6;
    border-radius: 50%;
    cursor: pointer;
    border: none;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
}

input[type="range"].slider::-moz-range-thumb:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
}

/* ==========================================================================
   다크 테마 스타일
   ========================================================================== */

.dark {
    --tw-bg-opacity: 1;
}

.dark .bg-gradient-to-br {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%);
}

.dark .bg-white\/10 {
    background-color: rgba(30, 41, 59, 0.1);
}

.dark .bg-white\/20 {
    background-color: rgba(30, 41, 59, 0.2);
}

.dark .border-white\/20 {
    border-color: rgba(71, 85, 105, 0.2);
}

.dark .border-white\/30 {
    border-color: rgba(71, 85, 105, 0.3);
}

.dark .text-white\/90 {
    color: rgba(241, 245, 249, 0.9);
}

.dark .text-white\/70 {
    color: rgba(203, 213, 225, 0.7);
}

.dark .text-white\/60 {
    color: rgba(148, 163, 184, 0.6);
}

/* ==========================================================================
   애니메이션 개선
   ========================================================================== */

@keyframes float {
    0%, 100% { 
        transform: translateY(0px); 
    }
    50% { 
        transform: translateY(-10px); 
    }
}

@keyframes slideInLeft {
    0% { 
        opacity: 0; 
        transform: translateX(-50px); 
    }
    100% { 
        opacity: 1; 
        transform: translateX(0); 
    }
}

@keyframes slideInRight {
    0% { 
        opacity: 0; 
        transform: translateX(50px); 
    }
    100% { 
        opacity: 1; 
        transform: translateX(0); 
    }
}

@keyframes fadeInUp {
    0% { 
        opacity: 0; 
        transform: translateY(20px); 
    }
    100% { 
        opacity: 1; 
        transform: translateY(0); 
    }
}

@keyframes zoomIn {
    0% { 
        opacity: 0; 
        transform: scale(0.8); 
    }
    100% { 
        opacity: 1; 
        transform: scale(1); 
    }
}

/* ==========================================================================
   접근성 개선
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ==========================================================================
   인쇄 스타일
   ========================================================================== */

@media print {
    .bg-gradient-to-br {
        background: white !important;
    }
    
    .bg-white\/10,
    .bg-white\/20 {
        background: white !important;
    }
    
    .text-white,
    .text-white\/90,
    .text-white\/70,
    .text-white\/60 {
        color: black !important;
    }
    
    .border-white\/20,
    .border-white\/30 {
        border-color: black !important;
    }
    
    .shadow-xl,
    .shadow-2xl {
        box-shadow: none !important;
    }
}

/* ==========================================================================
   알림 스타일 개선
   ========================================================================== */

.notification {
    @apply font-sans;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    @apply border border-white/20;
    @apply shadow-2xl;
}

/* ==========================================================================
   QR 코드 스타일링
   ========================================================================== */

#qrCanvas img,
#qrCanvas canvas {
    @apply rounded-xl shadow-lg;
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    animation: zoomIn 0.5s ease-out;
}

/* ==========================================================================
   폼 입력 개선
   ========================================================================== */

input[type="text"],
input[type="password"],
select {
    @apply transition-all duration-300;
}

input[type="text"]:focus,
input[type="password"]:focus,
select:focus {
    @apply transform -translate-y-0.5;
}

/* ==========================================================================
   버튼 호버 효과 개선
   ========================================================================== */

button {
    @apply transition-all duration-300;
}

button:hover {
    @apply transform -translate-y-0.5;
}

/* ==========================================================================
   모바일 최적화
   ========================================================================== */

@media (max-width: 640px) {
    .text-4xl {
        font-size: 2rem;
    }
    
    .text-5xl {
        font-size: 3rem;
    }
    
    .text-6xl {
        font-size: 4rem;
    }
    
    .p-8 {
        padding: 1.5rem;
    }
    
    .py-8 {
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
    }
}

/* ==========================================================================
   고대비 모드 지원
   ========================================================================== */

@media (prefers-contrast: high) {
    .bg-white\/10 {
        background-color: rgba(255, 255, 255, 0.3);
    }
    
    .bg-white\/20 {
        background-color: rgba(255, 255, 255, 0.4);
    }
    
    .border-white\/20 {
        border-color: rgba(255, 255, 255, 0.4);
    }
    
    .border-white\/30 {
        border-color: rgba(255, 255, 255, 0.6);
    }
}

/* ==========================================================================
   포커스 표시 개선
   ========================================================================== */

*:focus {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

button:focus,
input:focus,
select:focus {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

/* ==========================================================================
   로딩 상태
   ========================================================================== */

.loading {
    @apply animate-pulse;
}

.loading::after {
    content: '';
    @apply absolute inset-0 bg-white/20 rounded-xl;
    animation: pulse 1.5s ease-in-out infinite;
}

/* ==========================================================================
   성공/오류 상태
   ========================================================================== */

.success {
    @apply border-green-500 bg-green-50 text-green-800;
}

.error {
    @apply border-red-500 bg-red-50 text-red-800;
}

.warning {
    @apply border-yellow-500 bg-yellow-50 text-yellow-800;
}

/* ==========================================================================
   커스텀 체크박스 스타일
   ========================================================================== */

input[type="checkbox"] {
    @apply w-5 h-5 text-blue-600 bg-white/20 border-white/30 rounded focus:ring-blue-500 focus:ring-2;
}

input[type="checkbox"]:checked {
    @apply bg-blue-600 border-blue-600;
}

/* ==========================================================================
   커스텀 컬러 피커 스타일
   ========================================================================== */

input[type="color"] {
    @apply w-12 h-10 rounded-lg border-2 border-white/30 cursor-pointer;
    transition: transform 0.2s ease;
}

input[type="color"]:hover {
    @apply scale-105;
}

input[type="color"]::-webkit-color-swatch {
    @apply rounded;
    border: none;
}

input[type="color"]::-moz-color-swatch {
    @apply rounded;
    border: none;
}