/**
 * Vue Common Styles
 *
 * Vue.js 앱에서 공통으로 사용되는 스타일
 */

/* v-cloak: Vue 앱이 마운트되기 전까지 엘리먼트 숨김 */
[v-cloak] {
    display: none !important;
}

/* Fade transition for Vue transitions */
.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
    opacity: 0;
}

/* Slide transition */
.slide-enter-active,
.slide-leave-active {
    transition: all 0.3s ease;
}

.slide-enter-from {
    transform: translateX(-20px);
    opacity: 0;
}

.slide-leave-to {
    transform: translateX(20px);
    opacity: 0;
}

/* Loading spinner */
.vue-loading-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid rgba(0, 0, 0, 0.1);
    border-left-color: #3b82f6;
    border-radius: 50%;
    animation: vue-spinner-rotation 1s linear infinite;
}

@keyframes vue-spinner-rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Skeleton loading */
.vue-skeleton {
    background: linear-gradient(
        90deg,
        #f0f0f0 25%,
        #e0e0e0 50%,
        #f0f0f0 75%
    );
    background-size: 200% 100%;
    animation: vue-skeleton-loading 1.5s ease-in-out infinite;
}

@keyframes vue-skeleton-loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* Vue app container defaults */
.vue-app {
    min-height: 100%;
}

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

/* Focus visible for keyboard navigation */
*:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

/* Disabled elements */
[disabled],
.vue-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}