/* ===================================
   PREMIUM DESIGN SYSTEM V4.0
   완전히 새로운 고급 디자인
   1920×1080 최적화
   =================================== */

/* ===================================
   1. 디자인 토큰 - 새로운 팔레트
   =================================== */

:root {
    /* 🎨 프리미엄 컬러 - Teal 팔레트 */
    --v4-primary: #0D9488;           /* Teal 600 - 신뢰감 */
    --v4-primary-dark: #0F766E;      /* Teal 700 */
    --v4-primary-light: #14B8A6;     /* Teal 500 */
    --v4-accent: #0D9488;            /* Teal 600 - 일관성 */
    --v4-accent-light: #2DD4BF;      /* Teal 400 */
    
    /* 뉴트럴 - 따뜻한 그레이 */
    --v4-gray-50: #FAFAF9;
    --v4-gray-100: #F5F5F4;
    --v4-gray-200: #E7E5E4;
    --v4-gray-300: #D6D3D1;
    --v4-gray-400: #A8A29E;
    --v4-gray-500: #78716C;
    --v4-gray-600: #57534E;
    --v4-gray-700: #44403C;
    --v4-gray-800: #292524;
    --v4-gray-900: #1C1917;
    
    /* 상태 색상 - 부드러운 톤 */
    --v4-success: #10B981;
    --v4-success-light: #D1FAE5;
    --v4-warning: #F59E0B;
    --v4-warning-light: #FEF3C7;
    --v4-error: #EF4444;
    --v4-error-light: #FEE2E2;
    --v4-info: #06B6D4;
    --v4-info-light: #CFFAFE;
    
    /* 🔤 타이포그래피 - Pretendard 기반 */
    --v4-font: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", Pretendard, 
               "Noto Sans KR", "Malgun Gothic", sans-serif;
    
    /* PC 크기 */
    --v4-text-xs: 11px;
    --v4-text-sm: 12px;
    --v4-text-base: 14px;
    --v4-text-lg: 16px;
    --v4-text-xl: 18px;
    --v4-text-2xl: 22px;
    --v4-text-3xl: 28px;
    --v4-text-4xl: 36px;
    
    /* 폰트 무게 */
    --v4-weight-light: 300;
    --v4-weight-normal: 400;
    --v4-weight-medium: 500;
    --v4-weight-semibold: 600;
    --v4-weight-bold: 700;
    
    /* 📐 간격 - 8px 기반 */
    --v4-space-1: 4px;
    --v4-space-2: 8px;
    --v4-space-3: 12px;
    --v4-space-4: 16px;
    --v4-space-5: 20px;
    --v4-space-6: 24px;
    --v4-space-8: 32px;
    --v4-space-10: 40px;
    --v4-space-12: 48px;
    --v4-space-16: 64px;
    
    /* 🎭 그림자 - 더 자연스럽고 부드럽게 */
    --v4-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
    --v4-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.06);
    --v4-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.08);
    --v4-shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.1);
    --v4-shadow-xl: 0 16px 32px rgba(0, 0, 0, 0.12);
    --v4-shadow-2xl: 0 24px 48px rgba(0, 0, 0, 0.16);
    
    /* 🎬 애니메이션 */
    --v4-ease-out: cubic-bezier(0.33, 1, 0.68, 1);
    --v4-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --v4-duration-fast: 150ms;
    --v4-duration-base: 250ms;
    --v4-duration-slow: 350ms;
    
    /* 📏 경계선 반경 */
    --v4-radius-sm: 6px;
    --v4-radius-md: 8px;
    --v4-radius-lg: 12px;
    --v4-radius-xl: 16px;
    --v4-radius-2xl: 20px;
    --v4-radius-full: 9999px;
}

/* ===================================
   2. 전역 스타일 리셋
   =================================== */

@media (min-width: 769px) {
    body {
        font-family: var(--v4-font);
        font-size: var(--v4-text-base);
        line-height: 1.6;
        color: var(--v4-gray-900);
        background: var(--v4-gray-50);
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        margin: 0;
        padding: 0;
    }
    
    * {
        box-sizing: border-box;
    }
}

/* ===================================
   3. 상단 헤더 - 완전히 새로운 디자인
   =================================== */

@media (min-width: 769px) {
    .top-header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100vw !important;
        height: 72px !important;
        background: linear-gradient(135deg, 
            var(--v4-primary) 0%, 
            var(--v4-accent) 100%) !important;
        backdrop-filter: blur(20px) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 0 var(--v4-space-8) !important;
        z-index: 9999 !important;
        box-shadow: var(--v4-shadow-lg) !important;
    }
    
    .header-logo {
        font-size: var(--v4-text-3xl) !important;
        font-weight: var(--v4-weight-bold) !important;
        color: white !important;
        letter-spacing: -0.5px !important;
        display: flex !important;
        align-items: center !important;
        gap: var(--v4-space-3) !important;
    }
    
    .logo-icon {
        display: none !important;  /* 아이콘 제거 */
    }
    
    .header-logo span::before {
        content: "◆ " !important;
        font-size: var(--v4-text-xl) !important;
        opacity: 0.9 !important;
    }
    
    .header-user-btn {
        background: rgba(255, 255, 255, 0.15) !important;
        backdrop-filter: blur(10px) !important;
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
        border-radius: var(--v4-radius-full) !important;
        padding: var(--v4-space-2) var(--v4-space-4) !important;
        color: white !important;
        font-size: var(--v4-text-sm) !important;
        font-weight: var(--v4-weight-medium) !important;
        display: flex !important;
        align-items: center !important;
        gap: var(--v4-space-2) !important;
        cursor: pointer !important;
        transition: all var(--v4-duration-base) var(--v4-ease-out) !important;
    }
    
    .header-user-btn:hover {
        background: rgba(255, 255, 255, 0.25) !important;
        transform: translateY(-1px) !important;
    }
    
    .header-user-btn i {
        font-size: var(--v4-text-lg) !important;
    }
}

/* ===================================
   4. 하단 네비게이션 - PC에서 숨김
   =================================== */

@media (min-width: 769px) {
    .bottom-nav {
        display: none !important;
    }
}

/* ===================================
   5. App 컨테이너
   =================================== */

@media (min-width: 769px) {
    #app {
        padding-top: 72px !important;
        padding-bottom: 0 !important;
        min-height: 100vh !important;
        background: var(--v4-gray-50) !important;
    }
}

/* ===================================
   6. 페이지 레이아웃 (2:1) - 업무관리 & 회원관리 & 캘린더
   =================================== */

@media (min-width: 769px) {
    #workPage,
    .members-page,
    .calendar-page {
        display: grid !important;
        grid-template-columns: 1fr 640px !important;  /* 메인: 가변, 사이드: 고정 640px (1920px의 1/3) */
        width: 100vw !important;
        height: calc(100vh - 72px) !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        gap: 0 !important;
        background: var(--v4-gray-50) !important;
        position: fixed !important;
        top: 72px !important;
        left: 0 !important;
        right: 0 !important;
        overflow: hidden !important;
    }
    
    /* 좌측 메인 영역 */
    .work-main-area,
    .members-main-area,
    .calendar-main-area {
        padding: var(--v4-space-8) !important;
        overflow-y: auto !important;
        background: var(--v4-gray-50) !important;
        display: flex;
        flex-direction: column;
    }
    
    /* 우측 사이드바 공통 - 1920px의 1/3 = 640px */
    .work-sidebar-area,
    .page-sidebar {
        width: 640px !important;
        background: white !important;
        border-left: 1px solid var(--v4-gray-200) !important;
        padding: var(--v4-space-6) !important;
        overflow-y: auto !important;
        box-shadow: var(--v4-shadow-xl) !important;
    }
    
    /* 모바일 전용 숨김 */
    .page-header,
    .floating-filter-btn,
    .work-quick-add,
    .work-category-tabs,
    .work-toolbar {
        display: none !important;
    }
}

/* ===================================
   7. 카드 디자인 - 완전히 새로운 스타일
   =================================== */

@media (min-width: 769px) {
    .work-list {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)) !important;
        gap: 16px !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* 카드 그리드 - 반응형 (1줄 3개) */
    .work-cards-grid {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)) !important;
        gap: 16px !important;
    }
    
    .work-card,
    .work-card-v2,
    .todo-card {
        background: white !important;
        border: 1px solid var(--v4-gray-200) !important;
        border-radius: var(--v4-radius-lg) !important;
        padding: var(--v4-space-5) !important;
        margin: 0 !important;
        transition: all var(--v4-duration-base) var(--v4-ease-out) !important;
        cursor: pointer !important;
        position: relative !important;
        overflow: visible !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .work-card::before {
        content: "" !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 3px !important;
        background: linear-gradient(90deg, var(--v4-primary), var(--v4-accent)) !important;
        opacity: 0 !important;
        transition: opacity var(--v4-duration-base) !important;
    }
    
    .work-card:hover {
        border-color: var(--v4-primary) !important;
        box-shadow: var(--v4-shadow-lg) !important;
        transform: translateY(-2px) !important;
    }
    
    .work-card:hover::before {
        opacity: 1 !important;
    }
    
    .work-card-title {
        font-size: var(--v4-text-lg) !important;
        font-weight: var(--v4-weight-semibold) !important;
        color: var(--v4-gray-900) !important;
        margin: 0 0 var(--v4-space-3) 0 !important;
        line-height: 1.4 !important;
    }
    
    /* 배지 - 텍스트만, 아이콘 제거 */
    .status-badge,
    .priority-badge {
        display: inline-block !important;
        padding: var(--v4-space-1) var(--v4-space-3) !important;
        border-radius: var(--v4-radius-full) !important;
        font-size: var(--v4-text-xs) !important;
        font-weight: var(--v4-weight-medium) !important;
        letter-spacing: 0.5px !important;
        text-transform: uppercase !important;
    }
    
    .status-todo {
        background: var(--v4-info-light) !important;
        color: var(--v4-info) !important;
    }
    
    .status-doing {
        background: var(--v4-warning-light) !important;
        color: var(--v4-warning) !important;
    }
    
    .status-done {
        background: var(--v4-success-light) !important;
        color: var(--v4-success) !important;
    }
    
    .work-category {
        font-size: var(--v4-text-xs) !important;
        font-weight: var(--v4-weight-medium) !important;
        color: var(--v4-gray-600) !important;
        padding: var(--v4-space-1) var(--v4-space-3) !important;
        background: var(--v4-gray-100) !important;
        border-radius: var(--v4-radius-md) !important;
    }
}

/* ===================================
   8. 사이드바 - 심플하고 효율적
   =================================== */

@media (min-width: 769px) {
    .sidebar-section {
        margin-bottom: var(--v4-space-6) !important;
        padding-bottom: var(--v4-space-6) !important;
        border-bottom: 1px solid var(--v4-gray-200) !important;
    }
    
    .sidebar-section:last-child {
        border-bottom: none !important;
        margin-bottom: 0 !important;
        padding-bottom: 80px !important; /* 하단 메뉴에 가려지지 않도록 */
    }
    
    .sidebar-section-title {
        font-size: var(--v4-text-sm) !important;
        font-weight: var(--v4-weight-bold) !important;
        color: var(--v4-gray-900) !important;
        text-transform: uppercase !important;
        letter-spacing: 1px !important;
        margin-bottom: var(--v4-space-4) !important;
    }
    
    /* 검색 */
    .sidebar-search-input input {
        width: 100% !important;
        padding: var(--v4-space-3) var(--v4-space-4) !important;
        font-size: var(--v4-text-sm) !important;
        border: 1px solid var(--v4-gray-300) !important;
        border-radius: var(--v4-radius-md) !important;
        transition: all var(--v4-duration-base) !important;
    }
    
    .sidebar-search-input input:focus {
        border-color: var(--v4-primary) !important;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1) !important;
        outline: none !important;
    }
    
    /* 통계 - 1줄 4열 배치로 변경 */
    .sidebar-stats-grid {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: var(--v4-space-2) !important;
    }
    
    .sidebar-stat-item {
        background: linear-gradient(135deg, var(--v4-primary), var(--v4-accent)) !important;
        color: white !important;
        padding: var(--v4-space-3) !important;
        border-radius: var(--v4-radius-md) !important;
        text-align: center !important;
        cursor: pointer !important;
        transition: transform var(--v4-duration-base) !important;
    }
    
    .sidebar-stat-item:hover {
        transform: scale(1.05) !important;
    }
    
    .sidebar-stat-label {
        font-size: var(--v4-text-xs) !important;
        opacity: 0.9 !important;
    }
    
    .sidebar-stat-value {
        font-size: var(--v4-text-2xl) !important;
        font-weight: var(--v4-weight-bold) !important;
    }
    
    /* 카테고리 - 가로 배치, 줄바꿈 */
    .sidebar-filter-list {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: var(--v4-space-2) !important;
    }
    
    .sidebar-filter-item {
        padding: var(--v4-space-2) var(--v4-space-3) !important;
        background: var(--v4-gray-100) !important;
        border: 1px solid var(--v4-gray-200) !important;
        border-radius: var(--v4-radius-md) !important;
        font-size: var(--v4-text-sm) !important;
        cursor: pointer !important;
        transition: all var(--v4-duration-fast) !important;
        white-space: nowrap !important;
    }
    
    .sidebar-filter-item:hover {
        background: var(--v4-gray-200) !important;
    }
    
    .sidebar-filter-item.active {
        background: var(--v4-primary) !important;
        color: white !important;
        border-color: var(--v4-primary) !important;
    }
}

/* ===================================
   9. 스크롤바 커스터마이징
   =================================== */

@media (min-width: 769px) {
    .work-main-area::-webkit-scrollbar,
    .work-sidebar-area::-webkit-scrollbar {
        width: 6px !important;
    }
    
    .work-main-area::-webkit-scrollbar-track,
    .work-sidebar-area::-webkit-scrollbar-track {
        background: transparent !important;
    }
    
    .work-main-area::-webkit-scrollbar-thumb,
    .work-sidebar-area::-webkit-scrollbar-thumb {
        background: var(--v4-gray-300) !important;
        border-radius: var(--v4-radius-full) !important;
    }
    
    .work-main-area::-webkit-scrollbar-thumb:hover,
    .work-sidebar-area::-webkit-scrollbar-thumb:hover {
        background: var(--v4-gray-400) !important;
    }
}

/* ===================================
   10. 애니메이션
   =================================== */

@media (min-width: 769px) {
    @keyframes v4-fade-in {
        from {
            opacity: 0;
            transform: translateY(10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    .work-card {
        animation: v4-fade-in var(--v4-duration-base) var(--v4-ease-out) !important;
    }
}