@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;600;700&display=swap');
    
    /* ===== 기본 스타일 ===== */
    * { 
        font-family: 'Noto Sans KR', sans-serif; 
        box-sizing: border-box;
        max-width: 100%;
    }
    
    /* ===== 가로 스크롤 방지 ===== */
    html, body {
        max-width: 100vw;
        overflow-x: hidden;
    }
    
    /* ===== 스크롤바 전역 스타일 ===== */
    ::-webkit-scrollbar { 
        width: 6px; 
        height: 6px; 
    }
    ::-webkit-scrollbar-track { 
        background: #f1f5f9; 
    }
    ::-webkit-scrollbar-thumb { 
        background: #cbd5e1; 
        border-radius: 3px; 
    }
    
    /* ===== 애니메이션 ===== */
    @keyframes fadeIn {
        from { 
            opacity: 0; 
            transform: translateY(10px); 
        }
        to { 
            opacity: 1; 
            transform: translateY(0); 
        }
    }
    
    @keyframes slideIn {
        from {
            transform: translateX(100%);
            opacity: 0;
        }
        to {
            transform: translateX(0);
            opacity: 1;
        }
    }
    
    .fade-in { 
        animation: fadeIn 0.3s ease-out; 
    }
    
    .animate-slideIn {
        animation: slideIn 0.3s ease-out;
    }
    
    /* 채용 공고 활성화 시 강조 애니메이션 */
    @keyframes recruit-glow {
        0%, 100% { border-color: #60a5fa; box-shadow: 0 0 5px rgba(96, 165, 250, 0.3); transform: scale(1); }
        50% { border-color: #2563eb; box-shadow: 0 0 20px rgba(37, 99, 235, 0.5); transform: scale(1.02); }
    }
    .recruit-active-anim {
        animation: recruit-glow 2s infinite ease-in-out;
    }

    /* ===== 사이드바 ===== */
    .mobile-sidebar {
        transition: transform 0.3s ease;
        height: 100vh !important;
        height: 100dvh !important;
        max-height: 100vh;
        max-height: 100dvh;
    }
    
    @media (max-width: 1023px) {
        .mobile-sidebar {
            transform: translateX(-100%);
        }
    }
    
    .mobile-sidebar.active {
        transform: translateX(0);
    }
    
    #orgList {
        max-height: calc(100vh - 420px);
        max-height: calc(100dvh - 420px);
    }
    
    /* ===== 네비게이션 ===== */
    .nav-active {
        background: #2563eb !important;
        color: white !important;
    }
    
    .hidden-bulletin-stealth {
        background-color: white;
        color: white;
        border: 1px solid white;
        cursor: default;
    }
    .hidden-bulletin-stealth::before {
        filter: brightness(0) invert(1);
    }
    .hidden-bulletin-stealth:hover {
        background-color: #16a34a;
        color: white;
        border: 1px solid #16a34a;
        cursor: pointer;
    }
    .hidden-bulletin-stealth:hover::before {
        filter: none;
    }
    
    [contenteditable][placeholder]:empty:before {
        content: attr(placeholder);
        color: #9ca3af;
        pointer-events: none;
        display: block;
    }
    
    [contenteditable]:focus {
        outline: 2px solid #3b82f6;
        outline-offset: -2px;
    }
    
    #docContent table td {
        cursor: text;
    }
    
    #docContent table:hover {
        box-shadow: 0 0 0 2px #3b82f6;
    }
    
    /* ===== 대시보드 레이아웃 ===== */
    #dashboardView > .grid {
        width: 100% !important;
        margin-left: 0;
        margin-right: 0;
    }
    
    .grid.grid-cols-2.sm\:grid-cols-3.lg\:grid-cols-5 {
        width: 100% !important;
    }
    
    /* ===== Todo 영역 스크롤 ===== */
    .todo-part-container {
        max-height: 350px;
        transition: max-height 0.4s ease-in-out;
        overflow-y: auto;
    }
    
    .todo-part-container::-webkit-scrollbar {
        width: 6px;
    }
    
    .todo-part-container::-webkit-scrollbar-track {
        background: #f1f5f9;
        border-radius: 3px;
    }
    
    .todo-part-container::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 3px;
    }
    
    .todo-part-container::-webkit-scrollbar-thumb:hover {
        background: #94a3b8;
    }
    .todo-part-container.expanded {
        max-height: 875px; /* 350px * 2.5 */
    }
    
    /* ===== 캘린더 ===== */
    .calendar-cell {
        min-height: 138px;
        transition: all 0.2s;
    }

    .calendar-cell:hover {
        background: #f1f5f9;
        transform: scale(1.02);
    }

    .calendar-cell .text-xs {
        font-size: 0.7rem;
        line-height: 1.2;
    }
    
    /* 명함 사진 숨기기 */
    #businessCardsList.hide-images .card-image-container {
        display: none;
    }

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

    #eventDetails::-webkit-scrollbar-track {
        background: #f1f5f9;
        border-radius: 4px;
    }

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

    #eventDetails::-webkit-scrollbar-thumb:hover {
        background: #94a3b8;
    }
    
    .loading-spinner-overlay {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 200px;
        width: 100%;
    }

    @media (min-width: 1024px) {
        .calendar-cell {
            min-height: 140px;
        }
        
        #calendarGrid {
            min-height: 850px;
        }
        
        #orgList {
            max-height: calc(100vh - 380px);
            max-height: calc(100dvh - 380px);
        }
        
        .todo-part-container {
            max-height: 600px;
        }
        .lg\:grid-cols-8 {
            grid-template-columns: repeat(7, minmax(0, 1fr))
        }
    }

    @media (max-width: 768px) {
        .calendar-cell {
            min-height: 48px; 
        }
    
        #calendarGrid {
            min-height: 480px;
        }
    
        .todo-part-container {
            max-height: 400px;
        }
        
        .grid, .flex {
            max-width: 100vw;
            overflow-x: hidden;
        }
        
        .bg-white.rounded-lg.shadow-sm,
        .bg-white.rounded-xl.shadow-lg {
            max-width: calc(100vw - 2rem);
            margin-left: auto;
            margin-right: auto;
        }
        .todo-part-container.expanded {
            max-height: 1000px; /* 400px * 2.5 */
        }
    }