/* 커스텀 애니메이션 */
@keyframes width-grow {
    0% { width: 0%; }
    50% { width: 60%; }
    100% { width: 60%; }
}
.animate-width {
    animation: width-grow 2s ease-in-out infinite;
}
@keyframes pulse-ring {
    0% { transform: scale(0.8); box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7); }
    70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(59, 130, 246, 0); }
    100% { transform: scale(0.8); box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
}
.pulse-dot {
    animation: pulse-ring 2s infinite;
}
/* 스크롤바 커스텀 */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: #f1f1f1; 
}
::-webkit-scrollbar-thumb {
    background: #cbd5e1; 
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #94a3b8; 
}
.terminal-text {
    font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
}

:root {
    --ui-font-scale: 1;
}

html {
    font-size: calc(16px * var(--ui-font-scale));
}

/* UI utilities */
.ui-card-title { font-weight: 700; color: #0f172a; }
.dark .ui-card-title { color: #ffffff; }
.ui-card-subtitle { font-size: 12px; color: #6b7280; }
.dark .ui-card-subtitle { color: #9ca3af; }
.ui-input { border-radius: 0.5rem; }
.ui-btn { border-radius: 0.5rem; font-size: 12px; padding: 0.5rem 0.75rem; }
.ui-badge { border-radius: 0.5rem; font-size: 10px; padding: 0.125rem 0.375rem; font-weight: 600; }
.ui-badge-neutral { background: #f3f4f6; color: #4b5563; }
.dark .ui-badge-neutral { background: rgba(55, 65, 81, 0.7); color: #d1d5db; }
.ui-badge-info { background: #dbeafe; color: #1d4ed8; }
.dark .ui-badge-info { background: rgba(30, 58, 138, 0.35); color: #93c5fd; }
.ui-badge-success { background: #dcfce7; color: #15803d; }
.dark .ui-badge-success { background: rgba(20, 83, 45, 0.35); color: #86efac; }
.ui-badge-warn { background: #fef3c7; color: #b45309; }
.dark .ui-badge-warn { background: rgba(120, 53, 15, 0.35); color: #fcd34d; }
.ui-badge-danger { background: #fee2e2; color: #b91c1c; }
.dark .ui-badge-danger { background: rgba(127, 29, 29, 0.35); color: #fca5a5; }
.ui-badge-level-low { background: #ecfdf3; color: #166534; }
.dark .ui-badge-level-low { background: rgba(20, 83, 45, 0.35); color: #86efac; }
.ui-badge-level-mid { background: #fef3c7; color: #92400e; }
.dark .ui-badge-level-mid { background: rgba(120, 53, 15, 0.35); color: #fcd34d; }
.ui-badge-level-high { background: #fee2e2; color: #991b1b; }
.dark .ui-badge-level-high { background: rgba(127, 29, 29, 0.35); color: #fca5a5; }
.ui-card-body { font-size: 13px; line-height: 1.5; color: #4b5563; }
.dark .ui-card-body { color: #d1d5db; }
.ui-page { padding: 1.5rem; }
.ui-grid-tight { gap: 1rem; }
.ui-grid-wide { gap: 1.5rem; }
@media (min-width: 1024px) {
    .ui-grid-wide { gap: 2rem; }
}
body {
    background-image: radial-gradient(circle at 20% 20%, rgba(148, 163, 184, 0.15), transparent 35%),
                      radial-gradient(circle at 80% 10%, rgba(59, 130, 246, 0.12), transparent 40%);
}
body.dark {
    background-image: radial-gradient(circle at 15% 20%, rgba(30, 41, 59, 0.6), transparent 40%),
                      radial-gradient(circle at 80% 10%, rgba(30, 64, 175, 0.35), transparent 40%);
}
.ui-cta-row { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: flex-start; }
.ui-input:focus { outline: none; box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.4); }
.ui-table-head th { padding-top: 0.875rem; padding-bottom: 0.875rem; }
.ui-table-row td { padding-top: 0.875rem; padding-bottom: 0.875rem; }

/* Sidebar stability */
.sidebar-shell { height: 100dvh; }
.sidebar-nav-header { padding: 1rem; }
.sidebar-nav-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
    scroll-padding-top: 0.75rem;
}
.sidebar-nav-btn {
    min-height: 2.5rem;
    padding: 0.75rem;
}
.sidebar-nav-search,
.sidebar-shortcut-btn {
    min-height: 2.25rem;
}
.sidebar-nav-footer { padding: 1rem; }

@media (min-width: 1024px) and (min-height: 900px) {
    .sidebar-nav-header {
        padding: 0.75rem 0.875rem;
    }
    .sidebar-nav-list {
        gap: 0.25rem;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .sidebar-nav-list::-webkit-scrollbar {
        width: 0;
        height: 0;
    }
    .sidebar-nav-btn {
        min-height: 2.125rem;
        padding: 0.5rem 0.625rem;
        font-size: 0.82rem;
    }
    .sidebar-nav-btn svg {
        width: 18px;
        height: 18px;
    }
    .sidebar-nav-footer {
        padding: 0.625rem 0.875rem;
    }
}

@media (max-height: 760px) {
    .sidebar-nav-header { padding: 0.625rem; }
    .sidebar-nav-list {
        gap: 0.25rem;
        padding-top: 0.375rem;
        padding-bottom: 0.5rem;
    }
    .sidebar-nav-btn {
        min-height: 2rem;
        padding: 0.5rem 0.625rem;
    }
    .sidebar-nav-search,
    .sidebar-shortcut-btn {
        min-height: 2rem;
        padding-top: 0.45rem;
        padding-bottom: 0.45rem;
    }
    .sidebar-nav-footer {
        display: none;
    }
}

@media (max-height: 560px) {
    .sidebar-nav-header { padding: 0.5rem; }
    .sidebar-nav-list {
        gap: 0.125rem;
        padding-top: 0.25rem;
        padding-bottom: 0.25rem;
    }
    .sidebar-nav-btn {
        min-height: 1.75rem;
        padding: 0.375rem 0.5rem;
        font-size: 0.78rem;
    }
    .sidebar-nav-btn svg {
        width: 16px;
        height: 16px;
    }
}

@media (pointer: coarse) {
    button,
    [role="button"] {
        min-height: 44px;
    }

    button[aria-label],
    .ui-btn,
    .sidebar-nav-btn {
        min-width: 44px;
    }

    .sidebar-nav-btn {
        min-height: 44px !important;
    }
}

@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;
    }

    .animate-width,
    .pulse-dot,
    .animate-pulse,
    .animate-pulse-fast {
        animation: none !important;
    }
}