/* ===================================
   관리자 페이지 전용 스타일
   - style.css와 충돌 제거
   =================================== */

/* === 관리자 전용 변수 === */
.admin-body {
    --admin-sidebar-width: 280px;
    --admin-header-height: 70px;

    background: #f5f7fa;
    min-height: 100vh;
    display: flex;
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    max-width: 100vw;
    width: 100%;
}

/* === 로그인 페이지 === */
.login-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1a1a1a 0%, #a60e16 100%);
    padding: 1.5rem;
    width: 100%;
}

.login-box {
    background: white;
    padding: 3rem;
    border-radius: 24px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    width: 100%;
    max-width: 450px;
    text-align: center;
}

.login-logo {
    margin-bottom: 1.5rem;
}

.login-logo img {
    height: 60px;
    margin: 0 auto;
}

.login-box h2 {
    color: #a60e16;
    margin-bottom: 0.75rem;
    font-size: 1.75rem;
}

.login-subtitle {
    color: #666;
    margin-bottom: 2rem;
    font-size: 1rem;
}

.login-form {
    text-align: left;
}

.login-form .form-group {
    margin-bottom: 1.5rem;
}

.login-form .form-group label {
    display: block;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
}

.login-form .form-group input {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    font-size: 1rem;
    transition: all 0.3s ease;
    min-height: 48px;
}

.login-form .form-group input:focus {
    outline: none;
    border-color: #00B4D8;
    box-shadow: 0 0 0 3px rgba(0, 180, 216, 0.1);
}

.checkbox-group {
    display: flex;
    align-items: center;
}

.checkbox-group label {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-weight: 400 !important;
    min-height: 44px;
}

.checkbox-group input[type="checkbox"] {
    margin-right: 0.75rem;
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.login-note {
    margin-top: 1.5rem;
    text-align: center;
}

.text-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #666;
    text-decoration: none;
    font-size: 14px;
    padding: 8px 16px;
    border-radius: 20px;
    background: #f8f9fa;
    transition: all 0.3s ease;
}

.text-btn:hover {
    background: #fee500;
    /* Kakao Yellow */
    color: #3c1e1e;
    /* Kakao Brown */
    transform: translateY(-2px);
}

.login-footer {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e0e0e0;
}

.login-footer a {
    color: #a60e16;
    font-size: 14px;
    text-decoration: none;
}

/* === 사이드바 === */
.admin-sidebar {
    width: var(--admin-sidebar-width);
    background: white;
    border-right: 1px solid #e0e0e0;
    display: flex;
    flex-direction: column;
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 100;
    overflow-y: auto;
    transition: transform 0.3s ease;
}

/* === 모바일 상단 네비게이션 바 === */
.admin-mobile-topbar {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 56px;
    background: linear-gradient(135deg, #1a1a1a, #2d2d2d);
    color: white;
    z-index: 200;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}

.mobile-menu-btn {
    width: 44px;
    height: 44px;
    background: transparent;
    border: none;
    border-radius: 12px;
    color: white;
    font-size: 22px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.mobile-menu-btn:hover,
.mobile-menu-btn:active {
    background: rgba(255, 255, 255, 0.1);
}

.mobile-topbar-title {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 55%;
}

.mobile-topbar-site {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: transparent;
    text-decoration: none;
    font-size: 18px;
    line-height: 1;
    transition: background 0.2s;
}

.mobile-topbar-site:hover {
    background: rgba(255, 255, 255, 0.1);
}

.mobile-topbar-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.mobile-theme-toggle {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: transparent;
    border: none;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    transition: all 0.3s;
}

.mobile-theme-toggle:hover,
.mobile-theme-toggle:active {
    background: rgba(255, 255, 255, 0.1);
    transform: rotate(15deg);
}

.mobile-notif-btn {
    position: relative;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: transparent;
    border: none;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    transition: all 0.3s;
}

.mobile-notif-btn:hover,
.mobile-notif-btn:active {
    background: rgba(255, 255, 255, 0.1);
}

.mobile-notif-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 18px;
    height: 18px;
    background: #e63946;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    line-height: 1;
    box-shadow: 0 2px 6px rgba(230, 57, 70, 0.4);
    animation: notifPulse 2s infinite;
}

@keyframes notifPulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.15);
    }
}

.sidebar-header {
    padding: 1.5rem;
    border-bottom: 1px solid #e0e0e0;
    text-align: center;
}

.sidebar-logo {
    height: 80px;
    margin: 0 auto;
}

.sidebar-header h3 {
    color: #a60e16;
    font-size: 1.25rem;
    margin: 0;
}

.sidebar-nav {
    flex: 1;
    padding: 1.5rem 0;
    overflow-y: auto;
}

.sidebar-nav .nav-item {
    display: flex;
    align-items: center;
    padding: 14px 1.5rem;
    color: #666;
    transition: all 0.3s ease;
    border-left: 3px solid transparent;
    text-decoration: none;
    min-height: 52px;
}

.sidebar-nav .nav-item:hover {
    background: #f8f9fa;
    color: #a60e16;
}

.sidebar-nav .nav-item.active {
    background: linear-gradient(90deg, #fff5f5 0%, transparent 100%);
    color: #a60e16;
    border-left-color: #a60e16;
    font-weight: 600;
}

.sidebar-nav .nav-icon {
    font-size: 20px;
    margin-right: 1rem;
    min-width: 24px;
}

.sidebar-nav .nav-text {
    flex: 1;
    font-size: 0.938rem;
}

.sidebar-footer {
    padding: 1.5rem;
    border-top: 1px solid #e0e0e0;
}

.user-info {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.user-avatar {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    object-fit: cover;
}

.user-details {
    flex: 1;
}

.user-details strong {
    display: block;
    color: #1a1a1a;
    font-size: 14px;
}

.user-details span {
    display: block;
    color: #666;
    font-size: 12px;
}

.btn-logout {
    width: 100%;
    padding: 12px;
    background: transparent;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    color: #666;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 14px;
    min-height: 44px;
}

.btn-logout:hover {
    background: #fee;
    border-color: #f88;
    color: #c33;
}

/* === 메인 콘텐츠 === */
.admin-main {
    flex: 1;
    margin-left: var(--admin-sidebar-width);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-width: 0;
    overflow-x: hidden;
}

.admin-header {
    background: white;
    padding: 1.5rem 2rem;
    border-bottom: 1px solid #e0e0e0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 50;
    min-height: var(--admin-header-height);
}

.admin-header h1 {
    color: #1a1a1a;
    font-size: 2rem;
    margin: 0;
}

.header-actions {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.admin-content {
    flex: 1;
    padding: 2rem;
    overflow-y: auto;
    overflow-x: hidden;
    max-width: 100%;
    box-sizing: border-box;
}

/* === 통계 카드 === */
.admin-body .stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin-bottom: 3rem;
}

.admin-body .stat-card {
    background: white;
    padding: 2rem;
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    display: flex;
    gap: 1.5rem;
    align-items: center;
    min-height: 120px;
    flex: 1;
}

.stat-card .stat-icon {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    flex-shrink: 0;
}

.stat-card .stat-info h3 {
    font-size: 14px;
    color: #666;
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.stat-card .stat-number {
    font-size: 32px;
    font-weight: 800;
    color: #a60e16;
    margin-bottom: 4px;
    line-height: 1;
    background: none;
    -webkit-text-fill-color: #a60e16;
}

.stat-card .stat-label {
    font-size: 13px;
    color: #666;
}

/* === 대시보드 섹션 === */
.dashboard-section {
    background: white;
    padding: 2rem;
    border-radius: 16px;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.dashboard-section h2 {
    color: #a60e16;
    margin-bottom: 1.5rem;
    font-size: 1.5rem;
}

.quick-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}

.action-card {
    background: linear-gradient(135deg, #f8f9fa 0%, white 100%);
    padding: 2rem;
    border-radius: 16px;
    border: 2px solid #e0e0e0;
    transition: all 0.3s ease;
    text-align: center;
    text-decoration: none;
    display: block;
}

.action-card:hover {
    border-color: #a60e16;
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(166, 14, 22, 0.15);
}

.action-card .action-icon {
    font-size: 48px;
    display: block;
    margin-bottom: 1rem;
}

.action-card h3 {
    color: #1a1a1a;
    margin-bottom: 0.75rem;
}

.action-card p {
    color: #666;
    font-size: 14px;
}

/* === 테이블 === */
.content-table {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    overflow-x: auto;
}

.content-table table {
    width: 100%;
    border-collapse: collapse;
    min-width: 600px;
}

.content-table thead {
    background: #f8f9fa;
}

.content-table thead th {
    padding: 1.5rem;
    text-align: left;
    font-weight: 600;
    color: #1a1a1a;
    font-size: 14px;
    border-bottom: 2px solid #e0e0e0;
    white-space: nowrap;
}

.content-table tbody tr {
    border-bottom: 1px solid #e0e0e0;
    transition: all 0.3s ease;
}

.content-table tbody tr:hover {
    background: #fffcf5;
}

.content-table tbody td {
    padding: 1.5rem;
    color: #666;
}

/* === 배지 === */
.badge {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.badge-blue {
    background: #e3f2fd;
    color: #1976d2;
}

.badge-green {
    background: #e8f5e9;
    color: #388e3c;
}

.badge-purple {
    background: #f3e5f5;
    color: #7b1fa2;
}

.badge-coral {
    background: #ffe0e0;
    color: #c62828;
}

.status-badge {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.status-published {
    background: #e8f5e9;
    color: #2e7d32;
}

.status-draft {
    background: #fff3e0;
    color: #e65100;
}

.status-active {
    background: #e8f5e9;
    color: #2e7d32;
}

/* === 액션 버튼 === */
.action-buttons {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.action-buttons .btn-icon {
    background: transparent;
    border: none;
    font-size: 18px;
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    transition: all 0.3s ease;
    min-width: 36px;
    min-height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.action-buttons .btn-icon:hover {
    background: #f8f9fa;
}

/* === 빈 상태 === */
.empty-state td {
    padding: 3rem 2rem !important;
}

.empty-content {
    text-align: center;
}

.empty-icon {
    font-size: 64px;
    display: block;
    margin-bottom: 1.5rem;
    opacity: 0.5;
}

.empty-content h3 {
    color: #001F3F;
    margin-bottom: 0.75rem;
    font-size: 1.25rem;
}

.empty-content p {
    color: #666;
    margin-bottom: 1.5rem;
}

/* === 정보 배너 === */
.info-banner {
    background: linear-gradient(135deg, #e3f2fd 0%, #f0f9ff 100%);
    padding: 2rem;
    border-radius: 16px;
    margin-bottom: 2rem;
    display: flex;
    gap: 1.5rem;
    align-items: start;
}

.banner-icon {
    font-size: 32px;
    flex-shrink: 0;
}

.banner-content h3 {
    color: #001F3F;
    margin-bottom: 0.75rem;
}

.banner-content p {
    color: #666;
    line-height: 1.6;
}

/* === 관리자 버튼 스타일 === */
.admin-body .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 10px 18px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    white-space: nowrap;
    box-sizing: border-box;
    transition: all 0.3s ease;
    border: none;
    text-decoration: none;
    min-height: 44px;
}

.admin-body .btn-primary {
    background: linear-gradient(135deg, #a60e16, #a60e16);
    color: white;
    box-shadow: 0 2px 8px rgba(166, 14, 22, 0.3);
}

.admin-body .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(166, 14, 22, 0.4);
}

.admin-body .btn-secondary {
    background: #f8f9fa;
    color: #1a1a1a;
    border: 1px solid #e0e0e0;
}

.admin-body .btn-secondary:hover {
    background: #e9ecef;
}

/* === 스크롤바 === */
.admin-sidebar::-webkit-scrollbar,
.admin-content::-webkit-scrollbar {
    width: 6px;
}

.admin-sidebar::-webkit-scrollbar-thumb,
.admin-content::-webkit-scrollbar-thumb {
    background: #a60e16;
    border-radius: 3px;
}

/* === 반응형 === */
@media (max-width: 1024px) {
    .admin-mobile-topbar {
        display: flex;
    }

    .admin-sidebar {
        transform: translateX(-100%);
        box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
        top: 56px;
        height: calc(100vh - 56px);
    }

    .admin-sidebar.active {
        transform: translateX(0);
    }

    .admin-main {
        margin-left: 0;
        padding-top: 56px;
        width: 100%;
        max-width: 100vw;
    }

    .admin-header {
        display: none;
    }

    .sidebar-overlay {
        display: none;
        position: fixed;
        top: 56px;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 99;
    }

    .sidebar-overlay.active {
        display: block;
    }
}

@media (max-width: 768px) {
    .admin-header {
        padding: 1rem;
        flex-wrap: wrap;
        gap: 1rem;
    }

    .admin-header h1 {
        font-size: 1.5rem;
        width: 100%;
        margin: 0;
    }

    .header-actions {
        width: 100%;
        flex-direction: column;
        gap: 0.75rem;
    }

    .header-actions .btn {
        width: 100%;
        justify-content: center;
    }

    .admin-content {
        padding: 0.75rem;
        max-width: 100vw;
        box-sizing: border-box;
    }

    .stats-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .stat-card {
        padding: 1.25rem;
    }

    .stat-card .stat-icon {
        width: 44px;
        height: 44px;
        font-size: 20px;
    }

    .stat-card .stat-number {
        font-size: 22px;
    }

    .quick-actions {
        grid-template-columns: 1fr;
    }

    .dashboard-section {
        padding: 1.25rem;
    }

    .dashboard-section h2 {
        font-size: 1.15rem;
    }

    .login-box {
        padding: 2rem 1.5rem;
    }

    .login-box h2 {
        font-size: 1.5rem;
    }

    .info-banner {
        padding: 1rem;
        flex-direction: column;
        text-align: center;
        gap: 0.75rem;
    }

    .info-banner h3 {
        font-size: 1rem;
    }

    .info-banner p {
        font-size: 0.85rem;
    }

    .empty-icon {
        font-size: 48px;
    }

    .empty-content h3 {
        font-size: 1rem;
    }

    /* === 관리자 도구 모음 모바일 === */
    .admin-toolbar {
        flex-direction: column;
        gap: 0.75rem;
        text-align: center;
        padding: 0.875rem 1rem;
    }

    .admin-toolbar .btn {
        width: 100%;
        justify-content: center;
    }

    /* === 토스트 모바일 위치 === */
    .admin-toast {
        top: 68px;
        right: 12px;
        left: 12px;
        text-align: center;
    }

    /* === 모바일 테이블 카드 뷰 변환 === */
    .content-table {
        background: transparent;
        box-shadow: none;
        overflow: visible;
    }

    .content-table table,
    .content-table tbody,
    .content-table tr,
    .content-table td {
        display: block;
        width: 100%;
        min-width: 0;
    }

    .content-table thead {
        display: none;
    }

    .content-table tbody tr {
        background: white;
        margin-bottom: 0.875rem;
        border-radius: 14px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
        border: 1px solid #e8e8e8;
        padding: 1rem 1.125rem;
        position: relative;
    }

    .content-table tbody td {
        padding: 0.5rem 0;
        text-align: right;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #f0f0f0;
        font-size: 0.875rem;
    }

    .content-table tbody td:last-child {
        border-bottom: none;
        justify-content: flex-end;
        padding-top: 0.875rem;
    }

    .content-table tbody td:before {
        content: attr(data-label);
        font-weight: 600;
        color: #888;
        text-align: left;
        margin-right: 1rem;
        font-size: 0.8rem;
        text-transform: uppercase;
        letter-spacing: 0.3px;
        flex-shrink: 0;
    }

    .content-table tbody td img {
        max-width: 48px;
        height: auto;
    }

    .action-buttons {
        justify-content: flex-end;
        width: 100%;
        gap: 0.5rem;
    }

    .btn-icon {
        width: 38px;
        height: 38px;
        font-size: 17px;
    }

    .admin-body .btn {
        padding: 8px 14px;
        font-size: 13px;
    }

    .admin-body .btn-primary {
        width: 100%;
    }

    /* === 모달 모바일 === */
    .modal-overlay {
        padding: 0;
        align-items: flex-end;
    }

    .modal-content {
        max-width: 100%;
        max-height: 92vh;
        border-radius: 20px 20px 0 0;
        animation: modalSlideUpMobile 0.3s ease;
    }

    .modal-content.modal-lg,
    .modal-content.modal-large {
        max-width: 100%;
    }

    .modal-header {
        padding: 1.125rem 1.25rem;
        position: sticky;
        top: 0;
        background: white;
        z-index: 10;
    }

    .modal-header h3 {
        font-size: 1.05rem;
    }

    .modal-body {
        padding: 1rem 1.25rem;
    }

    .modal-footer {
        padding: 1rem 1.25rem;
        position: sticky;
        bottom: 0;
        background: white;
        border-top: 1px solid #eee;
    }

    .modal-footer .btn {
        flex: 1;
        justify-content: center;
    }

    /* === 사용자 관리 모바일 === */
    .permissions-grid {
        grid-template-columns: 1fr 1fr;
    }

    .perm-checkbox {
        padding: 8px 10px;
        font-size: 0.8rem;
    }

    .permission-tags {
        flex-wrap: wrap;
        gap: 3px;
    }

    .perm-tag {
        font-size: 0.65rem;
        padding: 2px 6px;
    }

    /* === 문의 상세 모달 모바일 === */
    .inquiry-detail .detail-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }

    .inquiry-detail .detail-label {
        font-size: 0.8rem;
    }

    .inquiry-detail .detail-message p {
        font-size: 0.9rem;
        line-height: 1.6;
    }
}

@keyframes modalSlideUpMobile {
    from {
        opacity: 0;
        transform: translateY(40px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* === 프로필 설정 모달 - 프리미엄 디자인 === */
.profile-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    align-items: center;
    justify-content: center;
}

.profile-modal.active {
    display: flex;
    animation: modalFadeIn 0.3s ease;
}

@keyframes modalFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.profile-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
}

.profile-modal-container {
    position: relative;
    background: #ffffff;
    border-radius: 24px;
    width: 90%;
    max-width: 480px;
    max-height: 90vh;
    overflow: hidden;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.25);
    animation: modalSlideUp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes modalSlideUp {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.profile-modal-header {
    background: linear-gradient(135deg, #a60e16 0%, #d41920 100%);
    padding: 1.75rem 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.profile-modal-title {
    display: flex;
    align-items: center;
    gap: 1rem;
    color: white;
}

.profile-modal-icon {
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.profile-modal-title h2 {
    font-size: 1.35rem;
    font-weight: 700;
    margin: 0 0 4px 0;
    color: white;
}

.profile-modal-title p {
    font-size: 0.85rem;
    opacity: 0.9;
    margin: 0;
}

.profile-modal-close {
    width: 40px;
    height: 40px;
    border: none;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    transition: all 0.2s ease;
}

.profile-modal-close:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: rotate(90deg);
}

.profile-modal-body {
    padding: 1.5rem 2rem 2rem;
    max-height: calc(90vh - 200px);
    overflow-y: auto;
}

/* 프로필 카드 */
.profile-card {
    background: #f8f9fa;
    border-radius: 16px;
    padding: 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid #eee;
    transition: all 0.3s ease;
}

.profile-card:hover {
    border-color: #ddd;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.profile-card-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 1rem;
    font-size: 0.95rem;
}

.profile-card-icon {
    width: 32px;
    height: 32px;
    background: white;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

/* 프로필 이미지 섹션 */
.profile-image-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.5rem 0;
}

.profile-image-wrapper {
    position: relative;
    width: 100px;
    height: 100px;
    margin-bottom: 0.75rem;
}

.profile-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    border: 4px solid white;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
}

.profile-image-wrapper:hover img {
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

.profile-image-edit {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, #a60e16, #d41920);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: white;
    box-shadow: 0 3px 10px rgba(166, 14, 22, 0.4);
    transition: all 0.3s ease;
}

.profile-image-edit:hover {
    transform: scale(1.15);
    box-shadow: 0 4px 15px rgba(166, 14, 22, 0.5);
}

.profile-image-tip {
    font-size: 0.8rem;
    color: #888;
}

/* 폼 그룹 */
.profile-form-group {
    margin-bottom: 1rem;
}

.profile-form-group:last-child {
    margin-bottom: 0;
}

.profile-form-group label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: #555;
    margin-bottom: 0.5rem;
}

.profile-input-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
    background: white;
    border: 2px solid #e8e8e8;
    border-radius: 12px;
    padding: 0 1rem;
    transition: all 0.3s ease;
}

.profile-input-wrapper:focus-within {
    border-color: #a60e16;
    box-shadow: 0 0 0 4px rgba(166, 14, 22, 0.1);
}

.profile-input-wrapper svg {
    flex-shrink: 0;
}

.profile-input-wrapper input {
    flex: 1;
    border: none;
    background: none;
    padding: 14px 0;
    font-size: 0.95rem;
    outline: none;
    color: #333;
}

.profile-input-wrapper input::placeholder {
    color: #aaa;
}

/* 푸터 버튼 */
.profile-modal-footer {
    display: flex;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.profile-btn {
    flex: 1;
    padding: 14px 20px;
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.3s ease;
}

.profile-btn-cancel {
    background: #f0f0f0;
    color: #666;
}

.profile-btn-cancel:hover {
    background: #e5e5e5;
}

.profile-btn-save {
    background: linear-gradient(135deg, #a60e16 0%, #d41920 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(166, 14, 22, 0.35);
}

.profile-btn-save:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(166, 14, 22, 0.45);
}

.profile-btn-save:active {
    transform: translateY(0);
}

/* === CMS 콘텐츠 편집기 === */
.cms-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #f0f0f0;
}

.cms-tab {
    padding: 8px 16px;
    border: 1px solid #e0e0e0;
    background: white;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 500;
    transition: all 0.2s;
    color: #666;
}

.cms-tab:hover {
    border-color: #a60e16;
    color: #a60e16;
}

.cms-tab.active {
    background: linear-gradient(135deg, #a60e16, #d41920);
    color: white;
    border-color: transparent;
}

.cms-section h3 {
    font-size: 1.3rem;
    font-weight: 700;
    color: #1a1a2e;
    margin-bottom: 0.5rem;
}

.cms-desc {
    color: #888;
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
}

.cms-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

.cms-field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.cms-field.full {
    grid-column: 1 / -1;
}

.cms-field label {
    font-size: 0.8rem;
    font-weight: 600;
    color: #555;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cms-field input,
.cms-field textarea {
    padding: 10px 14px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 0.9rem;
    transition: border-color 0.2s;
    font-family: inherit;
    resize: vertical;
}

.cms-field input:focus,
.cms-field textarea:focus {
    outline: none;
    border-color: #a60e16;
    box-shadow: 0 0 0 3px rgba(166, 14, 22, 0.08);
}

.cms-card {
    background: #fafafa;
    border: 1px solid #eee;
    border-radius: 12px;
    padding: 1.25rem;
    margin-bottom: 1rem;
}

.cms-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #eee;
    font-weight: 600;
    color: #333;
}

.cms-card-number {
    font-size: 1.5rem;
}

.cms-save-bar {
    position: sticky;
    bottom: 0;
    background: white;
    padding: 1rem 0;
    border-top: 1px solid #eee;
    text-align: center;
    margin-top: 2rem;
    z-index: 10;
}

@media (max-width: 768px) {
    .cms-form-grid {
        grid-template-columns: 1fr;
    }

    .cms-tabs {
        gap: 0.35rem;
    }

    .cms-tab {
        padding: 6px 10px;
        font-size: 0.78rem;
    }
}

/* === 이메일 알림 설정 UI === */
.email-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: #f5f5f5;
    border-radius: 8px;
    font-size: 0.9rem;
}

.email-remove-btn {
    background: none;
    border: none;
    color: #999;
    font-size: 1.1rem;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: all 0.2s;
}

.email-remove-btn:hover {
    background: #fee;
    color: #e63946;
}

.email-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    padding: 0.5rem 0;
}

.email-toggle-row input[type="checkbox"] {
    width: 44px;
    height: 24px;
    appearance: none;
    -webkit-appearance: none;
    background: #ccc;
    border-radius: 12px;
    position: relative;
    cursor: pointer;
    transition: background 0.3s;
    flex-shrink: 0;
}

.email-toggle-row input[type="checkbox"]:checked {
    background: #a60e16;
}

.email-toggle-row input[type="checkbox"]::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: white;
    border-radius: 50%;
    transition: transform 0.3s;
}

.email-toggle-row input[type="checkbox"]:checked::before {
    transform: translateX(20px);
}

.cms-email-input {
    font-family: inherit;
}

/* =============================================
   사이트 콘텐츠 관리 - 리디자인 (sc-*)
   ============================================= */

/* 토스트 */
.sc-toast {
    position: fixed;
    top: 80px;
    right: 2rem;
    background: linear-gradient(135deg, #1a1d2e, #252840);
    color: #fff;
    padding: 12px 24px;
    border-radius: 12px;
    z-index: 9999;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    font-size: 0.9rem;
    border-left: 3px solid #e63946;
    animation: scToastIn 0.3s ease;
}

@keyframes scToastIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 탭 바 */
.sc-tab-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 4px;
    background: #f0f0f5;
    border-radius: 12px;
    margin-bottom: 1.5rem;
}

.sc-tab {
    padding: 8px 16px;
    border: none;
    background: transparent;
    color: #666;
    font-size: 0.82rem;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.sc-tab:hover {
    background: #e0e0e8;
    color: #333;
}

.sc-tab.active {
    background: #a60e16;
    color: #fff;
    box-shadow: 0 2px 8px rgba(166, 14, 22, 0.25);
}

/* 본문 컨테이너 */
.sc-body {
    min-height: 400px;
}

/* 패널 */
.sc-panel {
    background: #fff;
    border-radius: 16px;
    padding: 1.5rem;
    border: 1px solid #e8e8e8;
}

.sc-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #f2f2f6;
}

.sc-panel-header h3 {
    font-size: 1.15rem;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0;
}

.sc-panel-header span {
    font-size: 0.82rem;
    color: #999;
}

/* 그리드 */
.sc-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

/* 필드 */
.sc-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.sc-field.full {
    grid-column: 1 / -1;
}

.sc-field label {
    font-size: 0.75rem;
    font-weight: 700;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sc-field input,
.sc-field textarea {
    padding: 10px 14px;
    border: 1px solid #e2e2e8;
    border-radius: 8px;
    font-size: 0.88rem;
    transition: all 0.2s;
    font-family: inherit;
    resize: vertical;
    background: #fafafe;
}

.sc-field input:focus,
.sc-field textarea:focus {
    outline: none;
    border-color: #a60e16;
    box-shadow: 0 0 0 3px rgba(166, 14, 22, 0.06);
    background: #fff;
}

/* 구분선 */
.sc-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 1.5rem 0;
    color: #999;
    font-size: 0.8rem;
    font-weight: 600;
}

.sc-divider::before,
.sc-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #e8e8e8;
}

/* 섹션 라벨 (이메일 탭 내부) */
.sc-section-label {
    font-size: 0.9rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 0.75rem;
    padding: 8px 12px;
    background: #f5f5fa;
    border-radius: 8px;
    border-left: 3px solid #a60e16;
}

/* 아코디언 */
.sc-item-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sc-accordion {
    border: 1px solid #e8e8e8;
    border-radius: 10px;
    overflow: hidden;
    transition: border-color 0.2s;
}

.sc-accordion[open] {
    border-color: #a60e16;
}

.sc-accordion summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.9rem;
    color: #333;
    user-select: none;
    list-style: none;
    transition: background 0.2s;
}

.sc-accordion summary::-webkit-details-marker {
    display: none;
}

.sc-accordion summary:hover {
    background: #fafafa;
}

.sc-acc-icon {
    font-size: 1.4rem;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f5fa;
    border-radius: 8px;
    flex-shrink: 0;
}

.sc-acc-title {
    flex: 1;
}

.sc-acc-arrow {
    color: #bbb;
    font-size: 0.7rem;
    transition: transform 0.2s;
}

.sc-accordion[open] .sc-acc-arrow {
    transform: rotate(180deg);
}

.sc-acc-body {
    padding: 0 16px 16px;
    border-top: 1px solid #f0f0f0;
    padding-top: 16px;
}

/* 통계 카드 그리드 */
.sc-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
}

.sc-stat-card {
    background: #fafafe;
    border: 1px solid #e8e8e8;
    border-radius: 12px;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.sc-stat-num {
    font-size: 2rem;
    font-weight: 800;
    color: #a60e16;
    text-align: center;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #f0f0f0;
    margin-bottom: 0.25rem;
}

/* 이메일 관련 */
.sc-email-add-row {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.sc-input {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid #e2e2e8;
    border-radius: 8px;
    font-size: 0.88rem;
    font-family: inherit;
    background: #fafafe;
}

.sc-input:focus {
    outline: none;
    border-color: #a60e16;
    background: #fff;
}

.sc-email-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sc-email-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: #f5f5fa;
    border-radius: 8px;
    font-size: 0.88rem;
}

.sc-email-item button {
    background: none;
    border: none;
    color: #bbb;
    font-size: 1.1rem;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 6px;
    transition: all 0.2s;
}

.sc-email-item button:hover {
    background: #fee;
    color: #e63946;
}

/* 토글 리스트 */
.sc-toggle-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sc-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: #fafafe;
    border: 1px solid #e8e8e8;
    border-radius: 10px;
    cursor: pointer;
    transition: border-color 0.2s;
}

.sc-toggle-row:hover {
    border-color: #ccc;
}

.sc-toggle-row strong {
    font-size: 0.88rem;
    color: #333;
}

.sc-toggle-row p {
    font-size: 0.78rem;
    color: #999;
    margin: 3px 0 0;
}

.sc-toggle-row input[type="checkbox"] {
    width: 44px;
    height: 24px;
    appearance: none;
    -webkit-appearance: none;
    background: #ccc;
    border-radius: 12px;
    position: relative;
    cursor: pointer;
    transition: background 0.3s;
    flex-shrink: 0;
}

.sc-toggle-row input[type="checkbox"]:checked {
    background: #a60e16;
}

.sc-toggle-row input[type="checkbox"]::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.3s;
}

.sc-toggle-row input[type="checkbox"]:checked::before {
    transform: translateX(20px);
}

/* 버튼 */
.sc-btn {
    padding: 10px 24px;
    border: none;
    border-radius: 8px;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s;
}

.sc-btn-primary {
    background: linear-gradient(135deg, #a60e16, #d41920);
    color: #fff;
    box-shadow: 0 2px 8px rgba(166, 14, 22, 0.2);
}

.sc-btn-primary:hover {
    box-shadow: 0 4px 16px rgba(166, 14, 22, 0.3);
    transform: translateY(-1px);
}

.sc-btn-primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* 하단 저장 바 */
.sc-save-bar {
    position: sticky;
    bottom: 0;
    background: #fff;
    padding: 1rem 0;
    border-top: 1px solid #eee;
    text-align: center;
    margin-top: 2rem;
    z-index: 10;
}

/* 상태 */
.sc-loading {
    text-align: center;
    padding: 3rem;
    color: #999;
    font-size: 0.9rem;
}

.sc-empty-state {
    text-align: center;
    padding: 3rem;
    color: #666;
}

.sc-empty-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

/* 모바일 */
@media (max-width: 768px) {
    .sc-grid {
        grid-template-columns: 1fr;
    }

    .sc-stat-grid {
        grid-template-columns: 1fr 1fr;
    }

    .sc-tab {
        padding: 6px 10px;
        font-size: 0.75rem;
    }

    .sc-panel {
        padding: 1rem;
    }

    .sc-panel-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
}

/* ── 다크 모드 ── */
[data-theme="dark"] .sc-tab-bar {
    background: #141620;
}

[data-theme="dark"] .sc-tab {
    color: #888;
}

[data-theme="dark"] .sc-tab:hover {
    background: #1e2137;
    color: #ddd;
}

[data-theme="dark"] .sc-tab.active {
    background: #a60e16;
    color: #fff;
}

[data-theme="dark"] .sc-panel {
    background: #1a1d2e;
    border-color: #2e3350;
}

[data-theme="dark"] .sc-panel-header {
    border-bottom-color: #2e3350;
}

[data-theme="dark"] .sc-panel-header h3 {
    color: #e8e8e8;
}

[data-theme="dark"] .sc-panel-header span {
    color: #777;
}

[data-theme="dark"] .sc-field label {
    color: #888;
}

[data-theme="dark"] .sc-field input,
[data-theme="dark"] .sc-field textarea,
[data-theme="dark"] .sc-input {
    background: #141620;
    border-color: #333;
    color: #e0e0e0;
}

[data-theme="dark"] .sc-field input:focus,
[data-theme="dark"] .sc-field textarea:focus,
[data-theme="dark"] .sc-input:focus {
    border-color: #e63946;
    background: #1a1d2e;
}

[data-theme="dark"] .sc-divider {
    color: #666;
}

[data-theme="dark"] .sc-divider::before,
[data-theme="dark"] .sc-divider::after {
    background: #2e3350;
}

[data-theme="dark"] .sc-section-label {
    background: #141620;
    color: #ddd;
}

[data-theme="dark"] .sc-accordion {
    border-color: #2e3350;
    background: #1e2137;
}

[data-theme="dark"] .sc-accordion[open] {
    border-color: #a60e16;
}

[data-theme="dark"] .sc-accordion summary {
    color: #ddd;
}

[data-theme="dark"] .sc-accordion summary:hover {
    background: #252840;
}

[data-theme="dark"] .sc-acc-icon {
    background: #252840;
}

[data-theme="dark"] .sc-acc-arrow {
    color: #666;
}

[data-theme="dark"] .sc-acc-body {
    border-top-color: #2e3350;
}

[data-theme="dark"] .sc-stat-card {
    background: #1e2137;
    border-color: #2e3350;
}

[data-theme="dark"] .sc-stat-num {
    color: #e63946;
    border-bottom-color: #2e3350;
}

[data-theme="dark"] .sc-email-item {
    background: #252840;
    color: #ddd;
}

[data-theme="dark"] .sc-email-item button {
    color: #666;
}

[data-theme="dark"] .sc-email-item button:hover {
    background: rgba(230, 57, 70, 0.15);
    color: #e63946;
}

[data-theme="dark"] .sc-toggle-row {
    background: #1e2137;
    border-color: #2e3350;
}

[data-theme="dark"] .sc-toggle-row:hover {
    border-color: #444;
}

[data-theme="dark"] .sc-toggle-row strong {
    color: #ddd;
}

[data-theme="dark"] .sc-toggle-row p {
    color: #777;
}

[data-theme="dark"] .sc-toggle-row input[type="checkbox"] {
    background: #444;
}

[data-theme="dark"] .sc-save-bar {
    background: #1a1d2e;
    border-top-color: #2e3350;
}

[data-theme="dark"] .sc-toast {
    background: linear-gradient(135deg, #252840, #2e3350);
}

/* === 관리자 도구 모음 === */
.admin-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding: 1rem 1.25rem;
    background: white;
    border-radius: 12px;
    border: 1px solid #e8e8e8;
    font-size: 0.9rem;
    color: #666;
}

/* === 토스트 알림 === */
.admin-toast {
    position: fixed;
    top: 20px;
    right: 20px;
    background: #333;
    color: white;
    padding: 14px 24px;
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 600;
    z-index: 10000;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
    animation: toastIn 0.3s ease;
}

@keyframes toastIn {
    from {
        opacity: 0;
        transform: translateY(-12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* === 모달 === */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5000;
    padding: 1rem;
    backdrop-filter: blur(4px);
}

.modal-content {
    background: white;
    border-radius: 20px;
    width: 100%;
    max-width: 600px;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    animation: modalIn 0.25s ease;
}

.modal-lg {
    max-width: 750px;
}

@keyframes modalIn {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(12px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 2rem;
    border-bottom: 1px solid #eee;
}

.modal-header h3 {
    font-size: 1.15rem;
    font-weight: 700;
    color: #222;
    margin: 0;
}

.modal-close {
    width: 36px;
    height: 36px;
    background: #f5f5f5;
    border: none;
    border-radius: 50%;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.modal-close:hover {
    background: #e0e0e0;
}

.modal-body {
    padding: 1.5rem 2rem;
}

.modal-body .cms-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.modal-body .cms-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.modal-body .cms-field.full {
    grid-column: 1 / -1;
}

.modal-body .cms-field label {
    font-size: 0.8rem;
    font-weight: 600;
    color: #555;
}

.modal-body .cms-field input,
.modal-body .cms-field select,
.modal-body .cms-field textarea {
    padding: 10px 14px;
    border: 1px solid #ddd;
    border-radius: 10px;
    font-size: 0.9rem;
    outline: none;
    transition: border-color 0.2s;
    font-family: inherit;
}

.modal-body .cms-field input:focus,
.modal-body .cms-field select:focus,
.modal-body .cms-field textarea:focus {
    border-color: #a60e16;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1.25rem 2rem;
    border-top: 1px solid #eee;
}

/* === 문의 상세 모달 === */
.inquiry-detail {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.detail-row {
    display: flex;
    gap: 1rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid #f5f5f5;
}

.detail-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: #888;
    width: 100px;
    flex-shrink: 0;
}

.detail-message {
    margin-top: 0.75rem;
}

.detail-message p {
    margin-top: 0.5rem;
    padding: 1rem;
    background: #f9f9f9;
    border-radius: 10px;
    line-height: 1.7;
    font-size: 0.92rem;
    white-space: pre-wrap;
}

/* === 문의 폼 (Contact 페이지) === */
.contact-form .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.contact-form .form-group {
    margin-bottom: 1.25rem;
}

.contact-form label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: #444;
    margin-bottom: 0.35rem;
}

.contact-form .required {
    color: #a60e16;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #ddd;
    border-radius: 12px;
    font-size: 0.95rem;
    outline: none;
    transition: border-color 0.2s;
    box-sizing: border-box;
    font-family: inherit;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
    border-color: #a60e16;
}

.contact-form-desc {
    color: #888;
    font-size: 0.92rem;
    margin-bottom: 1.5rem;
}

.inquiry-success {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
    background: #e8f5e9;
    border: 1px solid #a5d6a7;
    border-radius: 12px;
    margin-bottom: 1.5rem;
}

.inquiry-success span {
    font-size: 1.5rem;
}

.inquiry-success strong {
    color: #2e7d32;
}

.inquiry-success p {
    font-size: 0.85rem;
    color: #555;
    margin-top: 2px;
}

.inquiry-error {
    padding: 12px 16px;
    background: #fce4ec;
    border: 1px solid #ef9a9a;
    border-radius: 12px;
    color: #c62828;
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
}

.contact-kakao {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.btn-kakao {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 14px 24px;
    background: #FEE500;
    color: #3C1E1E;
    border-radius: 14px;
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    transition: all 0.2s;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.btn-kakao:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

@media (max-width: 768px) {
    .contact-form .form-row {
        grid-template-columns: 1fr;
    }

    .modal-body .cms-form-grid {
        grid-template-columns: 1fr;
    }

    .modal-content {
        max-height: 90vh;
    }
}

/* === 사용자 관리 (권한) === */
.permission-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.perm-tag {
    display: inline-block;
    padding: 3px 8px;
    background: #e3f2fd;
    color: #1565c0;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 600;
}

.perm-tag.perm-all {
    background: #fce4ec;
    color: #c62828;
}

.perm-tag.perm-position {
    background: #f3e5f5;
    color: #7b1fa2;
}

.permissions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.perm-checkbox {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 10px 14px;
    background: #f8f9fa;
    border: 2px solid #e8e8e8;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 0.85rem;
}

.perm-checkbox:hover {
    border-color: #ccc;
}

.perm-checkbox.checked {
    background: #e8f5e9;
    border-color: #4caf50;
}

.perm-checkbox input[type="checkbox"] {
    display: none;
}

.perm-icon {
    font-size: 1.1rem;
}

/* === 썸네일 업로드 === */
.thumbnail-upload {
    grid-column: 1 / -1;
    margin-bottom: 1rem;
}

.thumb-label {
    display: block;
    font-weight: 600;
    font-size: 0.85rem;
    color: #555;
    margin-bottom: 0.5rem;
}

.thumb-area {
    margin-bottom: 0.75rem;
}

.thumb-preview {
    position: relative;
    display: inline-block;
    max-width: 300px;
    border-radius: 12px;
    overflow: hidden;
    border: 2px solid #e0e0e0;
}

.thumb-preview img {
    display: block;
    width: 100%;
    max-height: 200px;
    object-fit: cover;
}

.thumb-remove {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.thumb-remove:hover {
    background: rgba(200, 0, 0, 0.8);
}

.thumb-uploading {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    color: #666;
}

.thumb-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 2rem;
    border: 2px dashed #ddd;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
    color: #999;
    font-size: 0.85rem;
    max-width: 300px;
}

.thumb-empty:hover {
    border-color: #a60e16;
    background: #fef5f5;
    color: #666;
}

.thumb-empty-icon {
    font-size: 2rem;
}

.thumb-empty-hint {
    font-size: 0.72rem;
    color: #bbb;
}

.thumb-controls {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.thumb-btn {
    padding: 0.4rem 0.8rem;
    background: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 0.8rem;
    cursor: pointer;
    color: #555;
    white-space: nowrap;
    transition: all 0.2s;
}

.thumb-btn:hover {
    background: #eee;
    border-color: #ccc;
}

.thumb-url-input {
    flex: 1;
    padding: 0.4rem 0.6rem;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 0.8rem;
    min-width: 0;
}

/* === 자동 번역 버튼 === */
.label-with-translate {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.25rem;
}

.btn-translate {
    padding: 0.25rem 0.6rem;
    background: linear-gradient(135deg, #e3f2fd, #bbdefb);
    border: 1px solid #90caf9;
    border-radius: 6px;
    font-size: 0.72rem;
    color: #1565c0;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.btn-translate:hover:not(:disabled) {
    background: linear-gradient(135deg, #bbdefb, #90caf9);
    border-color: #64b5f6;
}

.btn-translate:disabled {
    opacity: 0.6;
    cursor: wait;
}

/* === 큰 모달 === */
.modal-large {
    max-width: 900px !important;
    max-height: 90vh;
}

@media (max-width: 768px) {
    .thumb-controls {
        flex-direction: column;
        align-items: stretch;
    }

    .thumb-preview {
        max-width: 100%;
    }
}

/* ================================================================
   프로젝트 관리 — Premium UI
   ================================================================ */

/* ── 상단 통계 ── */
.pj-overview {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: 2rem;
    padding: 1.75rem 2rem;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    border-radius: 20px;
    margin-bottom: 1.5rem;
    color: white;
}

.pj-overview-left {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.pj-big-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.pj-big-num {
    font-size: 3rem;
    font-weight: 900;
    line-height: 1;
    background: linear-gradient(135deg, #fff, #90caf9);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.pj-big-label {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 0.3rem;
}

/* 원형 진행률 */
.pj-avg-ring {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.pj-ring-svg {
    width: 72px;
    height: 72px;
    transform: rotate(-90deg);
}

.pj-ring-svg path:first-child {
    stroke: rgba(255, 255, 255, 0.15);
}

.pj-ring-svg path:last-child {
    stroke: #64b5f6;
}

.pj-ring-center {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pj-ring-num {
    font-size: 1.1rem;
    font-weight: 800;
    color: #90caf9;
}

.pj-ring-label {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 0.25rem;
}

/* 필터 탭 — 기본 스타일은 admin-projects.css에서 정의 (아래 레거시 다크 스타일 제거) */
/*
.pj-pills {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.pj-pill {
    padding: 0.4rem 0.9rem;
    border-radius: 50px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.78rem;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.pj-pill:hover {
    background: rgba(255, 255, 255, 0.12);
    color: white;
}

.pj-pill.active {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    border-color: rgba(255, 255, 255, 0.5);
    font-weight: 600;
}

.pj-pill-count {
    display: inline-block;
    background: rgba(255, 255, 255, 0.2);
    padding: 0.1rem 0.45rem;
    border-radius: 20px;
    font-size: 0.68rem;
    margin-left: 0.25rem;
    font-weight: 700;
}

.pj-overdue-alert {
    padding: 0.35rem 0.75rem;
    background: rgba(198, 40, 40, 0.3);
    border: 1px solid rgba(198, 40, 40, 0.5);
    border-radius: 50px;
    font-size: 0.72rem;
    color: #ef9a9a;
    animation: pjPulse 2s infinite;
}
*/

@keyframes pjPulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.6;
    }
}

/* ── 툴바 ── */
.pj-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
}

.pj-toolbar-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.pj-result-count {
    font-size: 0.85rem;
    color: #888;
}

.pj-clear-filter {
    padding: 0.25rem 0.55rem;
    border: 1px solid #ddd;
    border-radius: 6px;
    background: #f5f5f5;
    font-size: 0.72rem;
    cursor: pointer;
    color: #888;
}

.pj-toolbar-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.pj-view-toggle {
    display: flex;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
}

.pj-vt-btn {
    padding: 0.4rem 0.6rem;
    border: none;
    background: white;
    cursor: pointer;
    font-size: 0.95rem;
    color: #aaa;
    transition: all 0.15s;
}

.pj-vt-btn.active {
    background: #333;
    color: white;
}

.pj-vt-btn:hover:not(.active) {
    background: #f0f0f0;
}

.pj-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.55rem 1.1rem;
    background: linear-gradient(135deg, #a60e16, #c62828);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.pj-add-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(166, 14, 22, 0.3);
}

.pj-add-btn span {
    font-size: 1.1rem;
    font-weight: 300;
}

/* ── 로딩/빈 상태 ── */
.pj-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 4rem;
    color: #aaa;
}

.pj-loading-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid #eee;
    border-top-color: #a60e16;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.pj-empty {
    text-align: center;
    padding: 4rem 2rem;
    background: white;
    border-radius: 20px;
    border: 2px dashed #e0e0e0;
}

.pj-empty-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.pj-empty h3 {
    color: #555;
    margin-bottom: 0.5rem;
}

.pj-empty p {
    color: #999;
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
}

/* ── 카드 보기(Board) ── */
.pj-board {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 1rem;
}

.pj-card {
    background: white;
    border-radius: 16px;
    padding: 1.25rem;
    border: 1px solid #e8e8e8;
    border-top: 3px solid var(--accent, #ddd);
    transition: all 0.25s;
    position: relative;
}

.pj-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

.pj-card.expanded {
    grid-column: 1 / -1;
}

.pj-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.pj-card-status {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.7rem;
    border-radius: 50px;
    font-size: 0.72rem;
    font-weight: 600;
}

.pj-card-actions {
    display: flex;
    gap: 0.15rem;
}

.pj-card-actions button {
    width: 30px;
    height: 30px;
    border: none;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.82rem;
    transition: background 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pj-card-actions button:hover {
    background: #f0f0f0;
}

.pj-card-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #222;
    margin: 0 0 0.5rem;
    line-height: 1.35;
}

.pj-card-meta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.pj-priority-tag {
    font-size: 0.72rem;
    font-weight: 600;
}

.pj-cat-tag {
    padding: 0.15rem 0.5rem;
    background: #f5f5f5;
    border-radius: 50px;
    font-size: 0.68rem;
    color: #777;
}

.pj-dday {
    font-size: 0.75rem;
    font-weight: 700;
    color: #888;
    padding: 0.1rem 0.45rem;
    border-radius: 6px;
    background: #f5f5f5;
}

.pj-dday.urgent {
    color: #c62828;
    background: #ffebee;
    animation: pjPulse 2s infinite;
}

/* 진행률 */
.pj-progress-section {
    margin-bottom: 0.75rem;
}

.pj-progress-label {
    display: flex;
    justify-content: space-between;
    font-size: 0.72rem;
    color: #999;
    margin-bottom: 0.3rem;
}

.pj-progress-pct {
    font-weight: 700;
    color: #555;
}

.pj-progress-track {
    height: 6px;
    background: #f0f0f0;
    border-radius: 10px;
    overflow: hidden;
}

.pj-progress-fill {
    height: 100%;
    border-radius: 10px;
    transition: width 0.4s ease;
}

.pj-card-info {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    font-size: 0.78rem;
    color: #888;
}

/* 확장 영역 */
.pj-card-expanded {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px dashed #e0e0e0;
    animation: slideDown 0.25s ease;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.pj-detail-row {
    display: flex;
    justify-content: space-between;
    padding: 0.4rem 0;
    font-size: 0.82rem;
    border-bottom: 1px solid #f8f8f8;
}

.pj-detail-label {
    font-weight: 600;
    color: #555;
    font-size: 0.78rem;
}

.pj-detail-desc {
    margin-top: 0.75rem;
}

.pj-detail-desc div,
.pj-detail-desc p {
    font-size: 0.85rem;
    color: #666;
    line-height: 1.6;
    margin-top: 0.35rem;
}

.pj-detail-time {
    font-size: 0.72rem;
    color: #bbb;
    margin-top: 0.75rem;
    text-align: right;
}

.pj-quick-progress {
    display: flex;
    gap: 0.4rem;
    margin-top: 0.75rem;
}

.pj-qp-btn {
    flex: 1;
    padding: 0.35rem 0;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background: white;
    font-size: 0.72rem;
    cursor: pointer;
    transition: all 0.15s;
    color: #888;
}

.pj-qp-btn:hover {
    background: #f0f0f0;
    border-color: #ccc;
}

.pj-qp-btn.active {
    background: #e3f2fd;
    border-color: #64b5f6;
    color: #1565c0;
    font-weight: 700;
}

/* 하단 액션 */
.pj-card-bottom {
    display: flex;
    gap: 0.4rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid #f0f0f0;
}

.pj-action-btn {
    flex: 1;
    padding: 0.4rem 0;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #fafafa;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s;
    color: #666;
    text-align: center;
}

.pj-action-btn:hover {
    background: #f0f0f0;
}

.pj-act-start {
    color: #1565c0;
    border-color: #bbdefb;
}

.pj-act-start:hover {
    background: #e3f2fd;
}

.pj-act-done {
    color: #2e7d32;
    border-color: #a5d6a7;
}

.pj-act-done:hover {
    background: #e8f5e9;
}

.pj-act-hold {
    color: #7b1fa2;
    border-color: #ce93d8;
}

.pj-act-hold:hover {
    background: #f3e5f5;
}

/* ── 리스트 보기 ── */
.pj-list-view {
    background: white;
    border-radius: 16px;
    border: 1px solid #e8e8e8;
    overflow: hidden;
}

.pj-list-header {
    display: grid;
    grid-template-columns: 90px 1fr 120px 120px 70px 80px;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    background: #fafafa;
    font-size: 0.72rem;
    font-weight: 600;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid #eee;
}

.pj-list-row {
    display: grid;
    grid-template-columns: 90px 1fr 120px 120px 70px 80px;
    gap: 0.5rem;
    padding: 0.85rem 1.25rem;
    align-items: center;
    border-bottom: 1px solid #f5f5f5;
    transition: background 0.15s;
}

.pj-list-row:hover {
    background: #fafafa;
}

.pj-list-row:last-child {
    border-bottom: none;
}

.pj-lr-status {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.5rem;
    border-radius: 50px;
    font-size: 0.68rem;
    font-weight: 600;
    white-space: nowrap;
}

.pj-lr-title strong {
    display: block;
    font-size: 0.88rem;
    color: #333;
}

.pj-lr-title small {
    font-size: 0.72rem;
    color: #aaa;
}

.pj-lr-client {
    font-size: 0.82rem;
    color: #777;
}

.pj-lr-progress {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.pj-mini-bar {
    flex: 1;
    height: 5px;
    background: #f0f0f0;
    border-radius: 10px;
    overflow: hidden;
}

.pj-mini-bar div {
    height: 100%;
    border-radius: 10px;
    transition: width 0.3s;
}

.pj-lr-progress small {
    font-size: 0.72rem;
    color: #888;
    font-weight: 600;
    min-width: 28px;
}

.pj-lr-due {
    font-size: 0.78rem;
    color: #888;
}

.pj-lr-actions {
    display: flex;
    gap: 0.15rem;
}

.pj-lr-actions button {
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s;
    font-size: 0.8rem;
}

.pj-lr-actions button:hover {
    background: #f0f0f0;
}

/* Range slider */
.pj-range {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    border-radius: 10px;
    background: #e0e0e0;
    outline: none;
}

.pj-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #1565c0;
    cursor: pointer;
    border: 2px solid white;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

/* ── 반응형 ── */
@media (max-width: 1024px) {
    .pj-board {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    }
}

@media (max-width: 768px) {
    .pj-overview {
        flex-direction: column;
        gap: 1.25rem;
        padding: 1.25rem;
    }

    .pj-overview-left {
        justify-content: center;
    }

    .pj-pills {
        justify-content: center;
    }

    .pj-board {
        grid-template-columns: 1fr;
    }

    .pj-toolbar {
        flex-direction: column;
        gap: 0.75rem;
        align-items: stretch;
    }

    .pj-toolbar-right {
        justify-content: space-between;
    }

    .pj-list-header,
    .pj-list-row {
        grid-template-columns: 80px 1fr 80px 60px;
    }

    .pj-lh-client,
    .pj-lr-client,
    .pj-lh-due,
    .pj-lr-due {
        display: none;
    }
}

/* ===================================
   프로젝트 관리 - Phase 1 SaaS 확장
   (모달 탭, 하위 작업, 첨부파일, 타임라인, 활동 로그)
   =================================== */

/* ── 모달 탭 ── */
.pj-modal-tabs {
    display: flex;
    border-bottom: 2px solid #f0f0f0;
    padding: 0 1.5rem;
    background: #fafafa;
}

.pj-modal-tab {
    padding: 0.75rem 1.25rem;
    border: none;
    background: transparent;
    font-size: 0.85rem;
    font-weight: 600;
    color: #999;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.pj-modal-tab:hover {
    color: #555;
}

.pj-modal-tab.active {
    color: #a60e16;
    border-bottom-color: #a60e16;
}

.pj-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    border-radius: 50px;
    background: #a60e16;
    color: white;
    font-size: 0.65rem;
    padding: 0 5px;
}

/* ── 하위 작업 탭 ── */
.pj-tasks-tab {
    padding: 0.5rem 0;
}

.pj-tasks-progress {
    margin-bottom: 1rem;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 12px;
}

.pj-tasks-progress-label {
    display: flex;
    justify-content: space-between;
    font-size: 0.82rem;
    font-weight: 600;
    color: #555;
    margin-bottom: 0.4rem;
}

.pj-tasks-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.pj-task-row {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.75rem;
    background: #fafafa;
    border-radius: 10px;
    border: 1px solid #eee;
    transition: all 0.2s;
}

.pj-task-row.done {
    background: #f0fdf4;
    border-color: #bbf7d0;
}

.pj-task-row.done .pj-task-input {
    text-decoration: line-through;
    color: #aaa;
}

.pj-task-toggle {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    font-size: 1.2rem;
    cursor: pointer;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: background 0.15s;
}

.pj-task-toggle:hover {
    background: #e0e0e0;
}

.pj-task-fields {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.pj-task-input {
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 0.45rem 0.6rem;
    font-size: 0.85rem;
    outline: none;
    width: 100%;
    transition: border-color 0.2s;
}

.pj-task-input:focus {
    border-color: #1565c0;
}

.pj-task-meta {
    display: flex;
    gap: 0.5rem;
}

.pj-task-assignee-input,
.pj-task-date-input {
    border: 1px solid #e8e8e8;
    border-radius: 5px;
    padding: 0.3rem 0.5rem;
    font-size: 0.75rem;
    outline: none;
    color: #666;
}

.pj-task-assignee-input {
    flex: 1;
    max-width: 140px;
}

.pj-task-date-input {
    width: 130px;
}

.pj-task-remove {
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.8rem;
    color: #bbb;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}

.pj-task-remove:hover {
    background: #fee2e2;
    color: #c62828;
}

.pj-task-add-btn {
    width: 100%;
    padding: 0.65rem;
    border: 2px dashed #ddd;
    border-radius: 10px;
    background: transparent;
    color: #888;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s;
}

.pj-task-add-btn:hover {
    border-color: #1565c0;
    color: #1565c0;
    background: #e3f2fd;
}

/* ── 첨부파일 탭 ── */
.pj-files-tab {
    padding: 0.5rem 0;
}

.pj-file-upload-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    border: 2px dashed #ddd;
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.2s;
    gap: 0.4rem;
    color: #999;
    margin-bottom: 1rem;
}

.pj-file-upload-area:hover {
    border-color: #1565c0;
    background: #f5f9ff;
    color: #1565c0;
}

.pj-file-upload-icon {
    font-size: 2rem;
}

.pj-file-upload-area small {
    font-size: 0.75rem;
    opacity: 0.7;
}

.pj-file-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.pj-file-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.65rem 0.85rem;
    background: #fafafa;
    border-radius: 10px;
    border: 1px solid #eee;
    transition: background 0.15s;
}

.pj-file-item:hover {
    background: #f0f0f0;
}

.pj-file-info {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    overflow: hidden;
}

.pj-file-icon {
    font-size: 1.2rem;
    flex-shrink: 0;
}

.pj-file-name {
    font-size: 0.85rem;
    color: #333;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 250px;
}

.pj-file-name:hover {
    color: #1565c0;
    text-decoration: underline;
}

.pj-file-meta {
    display: block;
    font-size: 0.72rem;
    color: #aaa;
}

.pj-file-remove {
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 0.9rem;
    border-radius: 6px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}

.pj-file-remove:hover {
    background: #ffebee;
}

/* ── 타임라인 뷰 ── */
.pj-timeline-view {
    background: white;
    border-radius: 16px;
    border: 1px solid #e8e8e8;
    overflow-x: auto;
    padding: 1rem;
}

.pj-timeline-header {
    display: flex;
    align-items: flex-end;
    border-bottom: 1px solid #eee;
    padding-bottom: 0.5rem;
    margin-bottom: 0.5rem;
}

.pj-tl-label-col {
    width: 200px;
    flex-shrink: 0;
    font-size: 0.75rem;
    font-weight: 600;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pj-tl-bar-col {
    flex: 1;
    position: relative;
    min-width: 400px;
    height: 24px;
}

.pj-tl-months {
    position: relative;
    width: 100%;
    height: 100%;
}

.pj-tl-month {
    position: absolute;
    font-size: 0.7rem;
    color: #aaa;
    font-weight: 600;
    transform: translateX(-50%);
}

.pj-tl-row {
    display: flex;
    align-items: center;
    padding: 0.6rem 0;
    border-bottom: 1px solid #f5f5f5;
}

.pj-tl-row:last-child {
    border-bottom: none;
}

.pj-tl-row .pj-tl-label-col {
    font-size: 0;
}

.pj-tl-row .pj-tl-label-col strong {
    display: block;
    font-size: 0.85rem;
    color: #333;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pj-tl-row .pj-tl-label-col small {
    font-size: 0.72rem;
    color: #aaa;
}

.pj-tl-row .pj-tl-bar-col {
    height: 28px;
}

.pj-tl-bar {
    position: absolute;
    height: 24px;
    border-radius: 6px;
    min-width: 20px;
    display: flex;
    align-items: center;
    overflow: hidden;
    cursor: pointer;
    transition: filter 0.2s;
}

.pj-tl-bar:hover {
    filter: brightness(1.1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.pj-tl-bar-label {
    position: relative;
    z-index: 2;
    padding: 0 8px;
    font-size: 0.68rem;
    font-weight: 700;
    color: white;
    white-space: nowrap;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.pj-tl-bar-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 6px 0 0 6px;
}

/* ── 카드 확장: 하위 작업 미리보기 ── */
.pj-expand-tasks,
.pj-expand-files,
.pj-expand-log {
    margin-top: 0.75rem;
}

.pj-task-preview-list {
    margin-top: 0.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.pj-task-preview-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    padding: 0.25rem 0;
    color: #555;
}

.pj-task-preview-item.done {
    color: #aaa;
}

.pj-task-preview-item.done .pj-task-text {
    text-decoration: line-through;
}

.pj-task-check {
    font-size: 0.9rem;
    flex-shrink: 0;
}

.pj-task-text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pj-task-assignee {
    font-size: 0.7rem;
    color: #1565c0;
    background: #e3f2fd;
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    flex-shrink: 0;
}

/* ── 카드 확장: 첨부파일 미리보기 ── */
.pj-file-preview-list {
    margin-top: 0.4rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.pj-file-preview-item {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.55rem;
    background: #f5f5f5;
    border-radius: 6px;
    font-size: 0.75rem;
    color: #555;
    text-decoration: none;
    transition: background 0.15s;
}

.pj-file-preview-item:hover {
    background: #e3f2fd;
    color: #1565c0;
}

.pj-file-preview-item small {
    color: #aaa;
    font-size: 0.68rem;
}

/* ── 카드 확장: 활동 로그 ── */
.pj-log-list {
    margin-top: 0.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding-left: 0.5rem;
    border-left: 2px solid #e8e8e8;
}

.pj-log-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    padding: 0.2rem 0;
}

.pj-log-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #1565c0;
    flex-shrink: 0;
    margin-left: -0.72rem;
}

.pj-log-text {
    flex: 1;
    color: #555;
}

.pj-log-time {
    font-size: 0.68rem;
    color: #bbb;
    flex-shrink: 0;
}

/* ── 타임라인 반응형 ── */
@media (max-width: 768px) {
    .pj-modal-tabs {
        padding: 0 0.75rem;
    }

    .pj-modal-tab {
        padding: 0.6rem 0.75rem;
        font-size: 0.78rem;
    }

    .pj-task-meta {
        flex-direction: column;
    }

    .pj-task-assignee-input {
        max-width: 100%;
    }

    .pj-task-date-input {
        width: 100%;
    }

    .pj-tl-label-col {
        width: 120px;
    }

    .pj-tl-bar-col {
        min-width: 250px;
    }

    .pj-file-name {
        max-width: 150px;
    }
}

/* ===================================
   프로젝트 관리 - Phase 2 확장
   (알림 배너, 코멘트, 공유 링크)
   =================================== */

/* ── 알림 배너 ── */
.pj-notif-bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 1rem;
    background: linear-gradient(135deg, #fff3e0, #fce4ec);
    border-radius: 12px;
    border: 1px solid #ffe0b2;
    margin-bottom: 1rem;
    overflow-x: auto;
}

.pj-notif-icon {
    font-size: 1.2rem;
    flex-shrink: 0;
}

.pj-notif-list {
    display: flex;
    gap: 1rem;
    flex-wrap: nowrap;
    overflow-x: auto;
}

.pj-notif-item {
    white-space: nowrap;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    transition: background 0.2s;
}

.pj-notif-item:hover {
    background: rgba(0, 0, 0, 0.08);
    text-decoration: underline;
}

.pj-notif-close {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    background: rgba(0, 0, 0, 0.08);
    border: none;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    transition: all 0.2s;
    margin-left: auto;
}

.pj-notif-close:hover {
    background: rgba(0, 0, 0, 0.15);
    color: #333;
}

/* ── 코멘트 탭 ── */
.pj-comments-tab {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* 공유 링크 */
.pj-share-section {
    padding: 1rem;
    background: #f0f7ff;
    border-radius: 12px;
    border: 1px solid #bbdefb;
}

.pj-share-section h4 {
    font-size: 0.88rem;
    font-weight: 700;
    color: #1565c0;
    margin-bottom: 0.5rem;
}

.pj-share-link-row {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}

.pj-share-link-input {
    flex: 1;
    padding: 0.45rem 0.65rem;
    border: 1px solid #90caf9;
    border-radius: 6px;
    font-size: 0.82rem;
    background: white;
    color: #333;
    outline: none;
}

.pj-share-copy-btn {
    padding: 0.45rem 0.85rem;
    background: #1565c0;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}

.pj-share-copy-btn:hover {
    background: #0d47a1;
}

.pj-share-gen-btn {
    padding: 0.55rem 1rem;
    background: #1565c0;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    margin-bottom: 0.35rem;
    transition: all 0.2s;
}

.pj-share-gen-btn:hover {
    background: #0d47a1;
    transform: translateY(-1px);
}

.pj-share-hint {
    font-size: 0.72rem;
    color: #666;
    display: block;
}

/* 채팅형 대화 컨테이너 */
.pj-chat-container {
    border: 1px solid #e0e0e0;
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: white;
}

.pj-chat-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: linear-gradient(135deg, #f8f9fa, #f0f2f5);
    border-bottom: 1px solid #e8e8e8;
    font-size: 0.88rem;
    font-weight: 700;
    color: #333;
}

.pj-chat-header-icon {
    font-size: 1.1rem;
}

.pj-chat-name-btn {
    background: none;
    border: none;
    font-size: 0.85rem;
    cursor: pointer;
    padding: 0.2rem 0.4rem;
    border-radius: 6px;
    transition: background 0.15s;
    margin-left: 0.3rem;
}

.pj-chat-name-btn:hover {
    background: rgba(0, 0, 0, 0.08);
}

.pj-chat-name-edit {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: #f0f2f5;
    border-bottom: 1px solid #e8e8e8;
    font-size: 0.82rem;
    color: #666;
}

.pj-chat-name-edit input {
    flex: 1;
    padding: 0.35rem 0.6rem;
    border: 1.5px solid #d0d0d0;
    border-radius: 8px;
    font-size: 0.82rem;
    outline: none;
    font-family: inherit;
}

.pj-chat-name-edit input:focus {
    border-color: #a60e16;
}

.pj-chat-name-edit button {
    background: #a60e16;
    color: white;
    border: none;
    padding: 0.3rem 0.65rem;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 600;
}

.pj-chat-count {
    margin-left: auto;
    font-size: 0.72rem;
    font-weight: 500;
    color: #999;
    background: #eee;
    padding: 0.15rem 0.5rem;
    border-radius: 20px;
}

.pj-chat-messages {
    padding: 1rem;
    max-height: 340px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    background: #f5f6f8;
}

.pj-chat-messages::-webkit-scrollbar {
    width: 5px;
}

.pj-chat-messages::-webkit-scrollbar-track {
    background: transparent;
}

.pj-chat-messages::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 10px;
}

/* 비어있는 채팅 */
.pj-chat-empty {
    text-align: center;
    padding: 2.5rem 1rem;
    color: #bbb;
}

.pj-chat-empty span {
    font-size: 2.5rem;
    display: block;
    margin-bottom: 0.5rem;
}

.pj-chat-empty p {
    font-size: 0.88rem;
    margin: 0 0 0.25rem;
}

.pj-chat-empty small {
    font-size: 0.75rem;
    color: #ccc;
}

/* 채팅 버블 */
.pj-chat-bubble {
    max-width: 80%;
    padding: 0.6rem 0.85rem;
    border-radius: 14px;
    position: relative;
    animation: chatSlideIn 0.2s ease;
}

@keyframes chatSlideIn {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.pj-chat-bubble.client {
    align-self: flex-start;
    background: #e3f2fd;
    border-bottom-left-radius: 4px;
    border-left: 3px solid #42a5f5;
}

.pj-chat-bubble.admin {
    align-self: flex-end;
    background: #fce4ec;
    border-bottom-right-radius: 4px;
    border-right: 3px solid #e84855;
}

.pj-chat-bubble-header {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.25rem;
}

.pj-chat-avatar {
    font-size: 0.85rem;
}

.pj-chat-author {
    font-size: 0.78rem;
    font-weight: 700;
    color: #333;
}

.pj-chat-time {
    font-size: 0.68rem;
    color: #999;
    margin-left: auto;
}

.pj-chat-del {
    background: none;
    border: none;
    font-size: 0.7rem;
    color: #ccc;
    cursor: pointer;
    padding: 0.15rem 0.3rem;
    border-radius: 4px;
    transition: all 0.15s;
    margin-left: 0.25rem;
}

.pj-chat-del:hover {
    background: rgba(198, 40, 40, 0.1);
    color: #c62828;
}

.pj-chat-text {
    font-size: 0.85rem;
    line-height: 1.55;
    color: #444;
    white-space: pre-wrap;
    word-break: break-word;
}

/* 하단 입력바 */
.pj-chat-input-bar {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    padding: 0.65rem 0.85rem;
    border-top: 1px solid #e8e8e8;
    background: white;
}

.pj-chat-input {
    flex: 1;
    padding: 0.55rem 0.75rem;
    border: 1.5px solid #d8d8d8;
    border-radius: 10px;
    font-size: 0.85rem;
    font-family: inherit;
    outline: none;
    resize: none;
    max-height: 100px;
    overflow-y: auto;
    line-height: 1.45;
    transition: border-color 0.2s;
    background: #f9fafb;
}

.pj-chat-input:focus {
    border-color: #1565c0;
    background: white;
    box-shadow: 0 0 0 2px rgba(21, 101, 192, 0.08);
}

.pj-chat-input::placeholder {
    color: #b0b0b0;
}

.pj-chat-send {
    padding: 0.55rem 1rem;
    background: linear-gradient(135deg, #a60e16, #c62828);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(166, 14, 22, 0.2);
}

.pj-chat-send:hover {
    background: linear-gradient(135deg, #c62828, #e53935);
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(166, 14, 22, 0.3);
}

.pj-chat-send:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.pj-chat-attach-btn {
    background: none;
    border: none;
    font-size: 1.15rem;
    cursor: pointer;
    padding: 0.3rem;
    border-radius: 8px;
    transition: background 0.15s;
    flex-shrink: 0;
}

.pj-chat-attach-btn:hover {
    background: #f0f0f0;
}

.pj-chat-attachment {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.4rem;
    padding: 0.3rem 0.6rem;
    background: rgba(0, 0, 0, 0.04);
    border-radius: 8px;
    font-size: 0.78rem;
    color: #1565c0;
    text-decoration: none;
    transition: background 0.15s;
}

.pj-chat-attachment:hover {
    background: rgba(0, 0, 0, 0.08);
}

.pj-chat-attachment small {
    color: #999;
}

.pj-chat-file-preview {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.85rem;
    background: #f0f7ff;
    border-top: 1px solid #e0e8f0;
    font-size: 0.8rem;
    color: #1565c0;
}

.pj-chat-file-preview button {
    margin-left: auto;
    background: none;
    border: none;
    color: #999;
    cursor: pointer;
    font-size: 0.85rem;
}

.pj-chat-file-preview button:hover {
    color: #c62828;
}

.pj-chat-img-wrap {
    display: block;
    margin-top: 0.35rem;
    border-radius: 10px;
    overflow: hidden;
    max-width: 220px;
}

.pj-chat-thumb {
    width: 100%;
    max-height: 180px;
    object-fit: cover;
    border-radius: 10px;
    cursor: pointer;
    transition: transform 0.15s;
}

.pj-chat-thumb:hover {
    transform: scale(1.02);
}

/* ===================================
   프로젝트 관리 - Phase 3 확장
   (인보이스, 리포트 대시보드)
   =================================== */

/* ── 인보이스 탭 ── */
.pj-invoice-tab {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.pj-invoice-status-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: #f8f9fa;
    border-radius: 10px;
}

.pj-invoice-status-row label {
    font-size: 0.85rem;
    font-weight: 600;
    color: #555;
}

.pj-invoice-status-row select {
    padding: 0.4rem 0.75rem;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    font-size: 0.85rem;
    background: white;
    outline: none;
}

.pj-invoice-items {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.pj-invoice-header-row,
.pj-invoice-row {
    display: grid;
    grid-template-columns: 1fr 70px 120px 110px 36px;
    gap: 0.4rem;
    align-items: start;
}

.pj-invoice-header-row {
    padding: 0.4rem 0;
    border-bottom: 2px solid #eee;
}

.pj-invoice-header-row span {
    font-size: 0.75rem;
    font-weight: 700;
    color: #999;
    text-transform: uppercase;
}

.pj-invoice-row input,
.pj-invoice-row textarea {
    padding: 0.45rem 0.55rem;
    border: 1px solid #e8e8e8;
    border-radius: 6px;
    font-size: 0.85rem;
    outline: none;
    transition: border-color 0.15s;
}

.pj-invoice-row textarea {
    resize: vertical;
    min-height: 38px;
    line-height: 1.4;
    font-family: inherit;
}

.pj-invoice-row input:focus,
.pj-invoice-row textarea:focus {
    border-color: #1565c0;
}

.pj-inv-qty {
    text-align: center;
}

.pj-inv-price {
    text-align: right;
}

.pj-inv-subtotal {
    font-size: 0.85rem;
    font-weight: 600;
    color: #333;
    text-align: right;
}

.pj-inv-del {
    border: none;
    background: transparent;
    font-size: 0.85rem;
    cursor: pointer;
    padding: 0.3rem;
    border-radius: 4px;
    transition: background 0.15s;
}

.pj-inv-del:hover {
    background: #ffebee;
}

.pj-invoice-summary {
    padding: 0.75rem 1rem;
    background: linear-gradient(135deg, #f5f5f5, #fafafa);
    border-radius: 10px;
    border: 1px solid #e8e8e8;
}

.pj-inv-sum-row {
    display: flex;
    justify-content: space-between;
    padding: 0.3rem 0;
    font-size: 0.85rem;
    color: #666;
}

.pj-inv-sum-row.total {
    border-top: 2px solid #ddd;
    margin-top: 0.3rem;
    padding-top: 0.5rem;
    font-size: 1rem;
    font-weight: 700;
    color: #a60e16;
}

/* ── 입금 계좌 정보 ── */
.pj-invoice-bank-info {
    margin-top: 1rem;
    padding: 1rem;
    background: linear-gradient(135deg, #f0f4ff, #f5f0ff);
    border-radius: 12px;
    border: 1px dashed #b0bec5;
}

.pj-invoice-bank-info label {
    display: block;
    font-size: 0.85rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 0.5rem;
}

.pj-invoice-bank-info textarea {
    width: 100%;
    padding: 0.6rem 0.75rem;
    border: 1px solid #d0d0d0;
    border-radius: 8px;
    font-size: 0.85rem;
    font-family: inherit;
    line-height: 1.5;
    resize: vertical;
    min-height: 60px;
    background: #fff;
    transition: border-color 0.2s;
}

.pj-invoice-bank-info textarea:focus {
    outline: none;
    border-color: #1565c0;
}

/* ── 리포트 보고 탭 (모달 내부) ── */
.pj-report-tab {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.pj-report-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
}

.pj-report-filter-btn {
    padding: 0.35rem 0.75rem;
    border: 1px solid #ddd;
    border-radius: 6px;
    background: white;
    font-size: 0.78rem;
    cursor: pointer;
    transition: all 0.15s;
    color: #666;
}

.pj-report-filter-btn:hover {
    border-color: #1565c0;
    color: #1565c0;
}

.pj-report-filter-btn.active {
    background: #1565c0;
    color: white;
    border-color: #1565c0;
}

.pj-report-add-btn {
    margin-left: auto;
    padding: 0.35rem 0.85rem;
    border: none;
    border-radius: 6px;
    background: linear-gradient(135deg, #1565c0, #1976d2);
    color: white;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}

.pj-report-add-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(21, 101, 192, 0.3);
}

/* 리포트 작성 폼 */
.pj-report-form {
    background: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.pj-report-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.pj-report-form-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.pj-report-form-field.full {
    grid-column: 1 / -1;
}

.pj-report-form-field label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #555;
}

.pj-report-form-field input,
.pj-report-form-field select,
.pj-report-form-field textarea {
    padding: 0.5rem 0.65rem;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 0.82rem;
    transition: border-color 0.15s;
}

.pj-report-form-field input:focus,
.pj-report-form-field select:focus,
.pj-report-form-field textarea:focus {
    border-color: #1565c0;
    outline: none;
}

/* 핵심 지표 입력 */
.pj-report-metrics-section {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.pj-report-metrics-section>label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #555;
}

.pj-report-metric-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr auto;
    gap: 0.4rem;
    align-items: center;
}

.pj-report-metric-row input {
    padding: 0.4rem 0.5rem;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 0.78rem;
}

.pj-report-metric-row input:focus {
    border-color: #1565c0;
    outline: none;
}

.pj-report-metric-del {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.85rem;
    padding: 0.25rem;
    opacity: 0.5;
    transition: opacity 0.15s;
}

.pj-report-metric-del:hover {
    opacity: 1;
}

.pj-report-metric-add {
    padding: 0.3rem 0.65rem;
    border: 1px dashed #bbb;
    border-radius: 5px;
    background: none;
    font-size: 0.75rem;
    color: #777;
    cursor: pointer;
    transition: all 0.15s;
    align-self: flex-start;
}

.pj-report-metric-add:hover {
    background: #eee;
    border-color: #999;
}

.pj-report-save-btn {
    padding: 0.55rem 1rem;
    background: linear-gradient(135deg, #1565c0, #1976d2);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    align-self: flex-end;
    transition: all 0.15s;
}

.pj-report-save-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(21, 101, 192, 0.3);
}

/* 리포트 목록 */
.pj-report-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.pj-report-empty {
    text-align: center;
    padding: 2.5rem 1rem;
    color: #999;
}

.pj-report-empty span {
    font-size: 2.5rem;
    display: block;
    margin-bottom: 0.5rem;
}

.pj-report-empty p {
    font-size: 0.85rem;
}

/* 리포트 카드 */
.pj-report-card {
    background: white;
    border: 1px solid #e8e8e8;
    border-radius: 10px;
    padding: 1rem;
    transition: all 0.15s;
}

.pj-report-card:hover {
    border-color: #ccc;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.pj-report-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.pj-report-card-header>div {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.pj-report-period-badge {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 700;
    background: #e3f2fd;
    color: #1565c0;
}

.pj-report-date {
    font-size: 0.78rem;
    color: #888;
}

.pj-report-del-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.85rem;
    opacity: 0.4;
    transition: opacity 0.15s;
}

.pj-report-del-btn:hover {
    opacity: 1;
}

.pj-report-card-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: #333;
    margin: 0 0 0.5rem 0;
}

/* 지표 그리드 */
.pj-report-metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.pj-report-metric-card {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 0.6rem 0.75rem;
    text-align: center;
}

.pj-report-metric-label {
    font-size: 0.68rem;
    color: #888;
    margin-bottom: 0.15rem;
}

.pj-report-metric-value {
    font-size: 1.05rem;
    font-weight: 700;
    color: #333;
}

.pj-report-metric-change {
    font-size: 0.7rem;
    font-weight: 600;
    color: #888;
    margin-top: 0.1rem;
}

.pj-report-metric-change.positive {
    color: #2e7d32;
}

.pj-report-metric-change.negative {
    color: #c62828;
}

.pj-report-card-content {
    font-size: 0.82rem;
    color: #555;
    line-height: 1.5;
    margin: 0;
    white-space: pre-wrap;
}

/* 리포트 폼 헤더 */
.pj-report-form-header {
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #e0e0e0;
    margin-bottom: 0.25rem;
}

.pj-report-form-header h4 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: #333;
}

/* ── 접기/펼치기 리포트 카드 ── */
.pj-rpt-card {
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    background: #fff;
    transition: all 0.2s ease;
    overflow: hidden;
}

.pj-rpt-card:hover {
    border-color: #c0c0c0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.pj-rpt-card.expanded {
    border-color: #1565c0;
    box-shadow: 0 4px 16px rgba(21, 101, 192, 0.1);
}

.pj-rpt-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1rem;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s;
}

.pj-rpt-card-header:hover {
    background: #f8f9fa;
}

.pj-rpt-card-left {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex: 1;
    min-width: 0;
}

.pj-rpt-period-tag {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 700;
    background: #e3f2fd;
    color: #1565c0;
    flex-shrink: 0;
}

.pj-rpt-date {
    font-size: 0.78rem;
    color: #888;
    flex-shrink: 0;
}

.pj-rpt-title {
    font-size: 0.88rem;
    font-weight: 700;
    color: #333;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pj-rpt-card-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

.pj-rpt-metric-count {
    font-size: 0.72rem;
    color: #888;
    background: #f0f0f0;
    padding: 0.15rem 0.5rem;
    border-radius: 10px;
}

.pj-rpt-chevron {
    font-size: 0.85rem;
    color: #999;
    transition: transform 0.25s ease;
    display: inline-block;
}

.pj-rpt-chevron.open {
    transform: rotate(180deg);
}

/* 카드 본문 (펼침) */
.pj-rpt-card-body {
    padding: 0 1rem 1rem;
    animation: slideDown 0.2s ease;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 수정/삭제 액션 버튼 */
.pj-rpt-actions {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.65rem;
    border-bottom: 1px solid #f0f0f0;
}

.pj-rpt-edit-btn,
.pj-rpt-del-btn {
    padding: 0.35rem 0.75rem;
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    border: 1px solid transparent;
}

.pj-rpt-edit-btn {
    background: #e3f2fd;
    color: #1565c0;
    border-color: #bbdefb;
}

.pj-rpt-edit-btn:hover {
    background: #bbdefb;
    transform: translateY(-1px);
}

.pj-rpt-del-btn {
    background: #ffebee;
    color: #c62828;
    border-color: #ffcdd2;
}

.pj-rpt-del-btn:hover {
    background: #ffcdd2;
    transform: translateY(-1px);
}

/* 지표 그리드 */
.pj-rpt-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.pj-rpt-metric {
    background: #f5f7fa;
    border-radius: 8px;
    padding: 0.6rem 0.75rem;
    text-align: center;
    border: 1px solid #eee;
}

.pj-rpt-metric-label {
    font-size: 0.68rem;
    color: #888;
    margin-bottom: 0.15rem;
}

.pj-rpt-metric-val {
    font-size: 1.05rem;
    font-weight: 700;
    color: #333;
}

.pj-rpt-metric-change {
    font-size: 0.7rem;
    font-weight: 600;
    color: #888;
    margin-top: 0.1rem;
}

.pj-rpt-metric-change.up {
    color: #2e7d32;
}

.pj-rpt-metric-change.down {
    color: #c62828;
}

/* 리치 콘텐츠 표시 */
.pj-rpt-content {
    font-size: 0.85rem;
    color: #444;
    line-height: 1.7;
    overflow-x: auto;
}

.pj-rpt-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 0.75rem 0;
    font-size: 0.82rem;
}

.pj-rpt-content th,
.pj-rpt-content td {
    border: 1px solid #e0e0e0;
    padding: 0.5rem 0.65rem;
    text-align: left;
}

.pj-rpt-content th {
    background: #f5f5f5;
    font-weight: 700;
}

.pj-rpt-content blockquote {
    border-left: 4px solid #1565c0;
    margin: 0.75rem 0;
    padding: 0.6rem 1rem;
    background: #f8f9ff;
    border-radius: 0 8px 8px 0;
    color: #444;
}

.pj-rpt-content hr {
    border: none;
    border-top: 2px solid #e0e0e0;
    margin: 1rem 0;
}

.pj-rpt-content h1,
.pj-rpt-content h2,
.pj-rpt-content h3 {
    margin: 1rem 0 0.5rem;
    color: #1a1a2e;
}

.pj-rpt-content img {
    max-width: 100%;
    border-radius: 8px;
    margin: 0.75rem 0;
}

/* 수정 타임스탬프 */
.pj-rpt-updated {
    margin-top: 0.75rem;
    padding-top: 0.5rem;
    border-top: 1px solid #f0f0f0;
    font-size: 0.72rem;
    color: #aaa;
    text-align: right;
}

/* 다크모드 */
[data-theme="dark"] .pj-rpt-card {
    background: #1e1e2e;
    border-color: #333;
}

[data-theme="dark"] .pj-rpt-card.expanded {
    border-color: #1976d2;
}

[data-theme="dark"] .pj-rpt-card-header:hover {
    background: rgba(255, 255, 255, 0.03);
}

[data-theme="dark"] .pj-rpt-title {
    color: #e0e0e0;
}

[data-theme="dark"] .pj-rpt-metric {
    background: rgba(255, 255, 255, 0.05);
    border-color: #333;
}

[data-theme="dark"] .pj-rpt-metric-val {
    color: #e0e0e0;
}

[data-theme="dark"] .pj-rpt-content {
    color: #ccc;
}

[data-theme="dark"] .pj-rpt-content th {
    background: rgba(255, 255, 255, 0.06);
    color: #ddd;
}

[data-theme="dark"] .pj-rpt-content td {
    border-color: #444;
}

[data-theme="dark"] .pj-rpt-content blockquote {
    background: rgba(21, 101, 192, 0.1);
    color: #ccc;
}

[data-theme="dark"] .pj-rpt-actions {
    border-color: #333;
}

[data-theme="dark"] .pj-rpt-edit-btn {
    background: rgba(21, 101, 192, 0.15);
    color: #64b5f6;
    border-color: rgba(21, 101, 192, 0.3);
}

[data-theme="dark"] .pj-rpt-del-btn {
    background: rgba(198, 40, 40, 0.15);
    color: #ef9a9a;
    border-color: rgba(198, 40, 40, 0.3);
}

[data-theme="dark"] .pj-report-form-header {
    border-color: #333;
}

[data-theme="dark"] .pj-report-form-header h4 {
    color: #e0e0e0;
}

/* ── 리포트 뷰 ── */
.pj-report-view {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.pj-report-summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.pj-report-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.25rem 1rem;
    background: linear-gradient(135deg, #fff, #f8f9fa);
    border-radius: 14px;
    border: 1px solid #e8e8e8;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.pj-report-card.green {
    background: linear-gradient(135deg, #e8f5e9, #f1f8e9);
    border-color: #c8e6c9;
}

.pj-report-card.orange {
    background: linear-gradient(135deg, #fff3e0, #fff8e1);
    border-color: #ffe0b2;
}

.pj-report-card.blue {
    background: linear-gradient(135deg, #e3f2fd, #e8eaf6);
    border-color: #bbdefb;
}

.pj-report-card-icon {
    font-size: 1.5rem;
}

.pj-report-card-num {
    font-size: 1.1rem;
    font-weight: 800;
    color: #333;
    display: block;
}

.pj-report-card small {
    font-size: 0.75rem;
    color: #888;
}

.pj-report-section {
    background: white;
    border-radius: 14px;
    border: 1px solid #e8e8e8;
    padding: 1.25rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.pj-report-section h3 {
    font-size: 0.95rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 1rem;
}

.pj-report-section.half {
    flex: 1;
}

.pj-report-row {
    display: flex;
    gap: 1rem;
}

/* 월별 차트 */
.pj-report-chart {
    display: flex;
    align-items: flex-end;
    gap: 1rem;
    height: 200px;
    padding: 1rem 0;
}

.pj-chart-bar-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    height: 100%;
}

.pj-chart-bar-container {
    flex: 1;
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.pj-chart-bar {
    width: 60%;
    min-height: 4px;
    background: linear-gradient(180deg, #a60e16, #c62828);
    border-radius: 6px 6px 0 0;
    position: relative;
    transition: height 0.5s ease;
}

.pj-chart-bar-val {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.65rem;
    font-weight: 600;
    color: #666;
    white-space: nowrap;
}

.pj-chart-bar-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: #555;
}

.pj-chart-bar-sub {
    font-size: 0.7rem;
    color: #999;
}

.pj-report-empty {
    text-align: center;
    color: #bbb;
    padding: 2rem;
    font-size: 0.9rem;
}

/* 상태/카테고리 분포 */
.pj-report-stat-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.pj-report-stat-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.pj-report-stat-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: #555;
    min-width: 80px;
}

.pj-report-stat-bar {
    flex: 1;
    height: 8px;
    background: #f0f0f0;
    border-radius: 4px;
    overflow: hidden;
}

.pj-report-stat-bar>div {
    height: 100%;
    border-radius: 4px;
    transition: width 0.4s ease;
}

.pj-report-stat-num {
    font-size: 0.82rem;
    font-weight: 700;
    color: #333;
    min-width: 30px;
    text-align: right;
}

/* 미수금 목록 */
.pj-unpaid-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.pj-unpaid-item {
    display: grid;
    grid-template-columns: 1fr 120px 120px 80px;
    gap: 0.5rem;
    align-items: center;
    padding: 0.65rem 0.75rem;
    background: #fff8e1;
    border-radius: 8px;
    border: 1px solid #ffe0b2;
}

.pj-unpaid-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: #333;
}

.pj-unpaid-client {
    font-size: 0.82rem;
    color: #777;
}

.pj-unpaid-amount {
    font-size: 0.85rem;
    font-weight: 700;
    color: #e65100;
    text-align: right;
}

.pj-unpaid-status {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.2rem 0.6rem;
    border-radius: 12px;
    text-align: center;
}

.pj-unpaid-status.draft {
    background: #f5f5f5;
    color: #999;
}

.pj-unpaid-status.sent {
    background: #e3f2fd;
    color: #1565c0;
}

@media (max-width: 768px) {
    .pj-report-summary {
        grid-template-columns: repeat(2, 1fr);
    }

    .pj-report-row {
        flex-direction: column;
    }

    .pj-unpaid-item {
        grid-template-columns: 1fr 1fr;
    }

    .pj-invoice-header-row,
    .pj-invoice-row {
        grid-template-columns: 1fr 60px 90px 80px 32px;
    }
}

/* ===================================
   프로젝트 관리 - 미리보기 팝업 & 알림
   =================================== */

/* ── 미리보기 팝업 ── */
.pj-preview-popup {
    background: white;
    border-radius: 18px;
    width: 90%;
    max-width: 720px;
    max-height: 85vh;
    overflow-y: auto;
    padding: 2rem;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    animation: modalSlideIn 0.25s ease;
}

.pj-preview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.pj-preview-header-left {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.pj-preview-header-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.pj-preview-edit-btn {
    padding: 0.4rem 0.85rem;
    border: 1px solid #1565c0;
    background: transparent;
    color: #1565c0;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.pj-preview-edit-btn:hover {
    background: #1565c0;
    color: white;
}

.pj-preview-close {
    border: none;
    background: #f5f5f5;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}

.pj-preview-close:hover {
    background: #e0e0e0;
}

.pj-preview-title {
    font-size: 1.4rem;
    font-weight: 800;
    color: #1a1a2e;
    margin-bottom: 0.75rem;
}

.pj-preview-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.25rem;
    font-size: 0.85rem;
    color: #666;
    margin-bottom: 1.25rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid #f0f0f0;
}

.pj-preview-progress {
    margin-bottom: 1.25rem;
}

.pj-preview-progress-label {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 0.4rem;
    color: #555;
}

.pj-preview-section {
    background: #fafafa;
    border-radius: 12px;
    padding: 1rem;
    margin-bottom: 0.75rem;
}

.pj-preview-section h4 {
    font-size: 0.9rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 0.6rem;
}

.pj-preview-desc {
    font-size: 0.85rem;
    color: #555;
    line-height: 1.6;
}

.pj-preview-tasks {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.pj-preview-task-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0;
    font-size: 0.85rem;
}

.pj-preview-task-item.done {
    color: #aaa;
    text-decoration: line-through;
}

.pj-preview-comments {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.pj-preview-comment {
    padding: 0.6rem 0.75rem;
    border-radius: 8px;
    font-size: 0.85rem;
}

.pj-preview-comment.admin {
    background: #f5f5f5;
}

.pj-preview-comment.client {
    background: #e3f2fd;
}

.pj-preview-comment strong {
    display: block;
    font-size: 0.8rem;
    margin-bottom: 0.15rem;
}

.pj-preview-comment p {
    margin: 0.15rem 0;
    color: #555;
}

.pj-preview-comment small {
    color: #999;
    font-size: 0.72rem;
}

.pj-preview-logs {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.pj-preview-log-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.82rem;
    color: #666;
}

.pj-preview-log-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #1565c0;
    flex-shrink: 0;
}

.pj-preview-log-item small {
    margin-left: auto;
    color: #aaa;
    font-size: 0.72rem;
}

/* ── 알림 벨 ── */
.pj-notif-bell-wrap {
    position: relative;
}

.pj-notif-bell {
    border: none;
    background: #f5f5f5;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    font-size: 1.1rem;
    cursor: pointer;
    position: relative;
    transition: background 0.15s;
}

.pj-notif-bell:hover {
    background: #e8e8e8;
}

.pj-notif-badge {
    position: absolute;
    top: -3px;
    right: -3px;
    background: #c62828;
    color: white;
    font-size: 0.6rem;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
}

.pj-notif-dropdown {
    position: absolute;
    top: 44px;
    right: 0;
    width: 340px;
    background: white;
    border-radius: 14px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    z-index: 999;
    overflow: hidden;
    animation: notifDropIn 0.2s ease;
}

@keyframes notifDropIn {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.pj-notif-dd-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #f0f0f0;
}

.pj-notif-dd-header strong {
    font-size: 0.9rem;
    color: #333;
}

.pj-notif-dd-header button {
    border: none;
    background: transparent;
    color: #1565c0;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
}

.pj-notif-dd-empty {
    padding: 2rem 1rem;
    text-align: center;
    color: #bbb;
    font-size: 0.85rem;
}

.pj-notif-dd-list {
    max-height: 300px;
    overflow-y: auto;
}

.pj-notif-dd-item {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #f8f8f8;
    cursor: pointer;
    transition: background 0.15s;
    font-size: 0.82rem;
    color: #555;
}

.pj-notif-dd-item:hover {
    background: #f8f9fa;
}

.pj-notif-dd-item strong {
    color: #333;
}

.pj-notif-dd-item em {
    color: #1565c0;
    font-style: normal;
    font-weight: 600;
}

.pj-notif-dd-item p {
    margin: 0.2rem 0;
    color: #888;
    font-size: 0.78rem;
}

.pj-notif-dd-item small {
    color: #bbb;
    font-size: 0.7rem;
}

/* ── 메시지 공유 입력 & 링크 삭제 ── */
.pj-share-del-btn {
    padding: 0.4rem 0.6rem;
    border: 1px solid #e53935;
    background: transparent;
    color: #e53935;
    border-radius: 8px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}

.pj-share-del-btn:hover {
    background: #e53935;
    color: white;
}

.pj-share-hint strong {
    color: #e53935;
}

.pj-share-msg-area {
    margin-top: 0.75rem;
}

.pj-share-msg-area label {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    color: #555;
    margin-bottom: 0.3rem;
}

.pj-share-msg-input {
    width: 100%;
    padding: 0.6rem 0.75rem;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-size: 0.85rem;
    resize: vertical;
    min-height: 60px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.15s;
}

.pj-share-msg-input:focus {
    border-color: #1565c0;
}

.pj-task-due {
    font-size: 0.72rem;
    color: #999;
    margin-left: auto;
}

/* ===================================
   새 대시보드 스타일 (Donezo 스타일)
   =================================== */

/* 인사 헤더 */
.dash-greeting {
    margin-bottom: 1.5rem;
}

.dash-greeting h2 {
    font-size: 1.75rem;
    font-weight: 800;
    color: #1a1a1a;
    margin: 0 0 0.25rem;
}

.dash-greeting p {
    color: #888;
    font-size: 0.95rem;
    margin: 0;
}

.dash-greeting p strong {
    color: #1a1a1a;
}

/* 4개 스탯 카드 행 */
.dash-stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.dash-stat-card {
    background: white;
    border-radius: 16px;
    padding: 1.25rem 1.5rem;
    border: 1px solid #e8e8e8;
    transition: all 0.3s ease;
}

.dash-stat-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.dash-stat-highlight {
    background: linear-gradient(135deg, #a60e16, #c4252e);
    border-color: transparent;
}

.dash-stat-highlight .dash-stat-title,
.dash-stat-highlight .dash-stat-number,
.dash-stat-highlight .dash-stat-sub,
.dash-stat-highlight .dash-stat-arrow {
    color: white !important;
}

.dash-stat-highlight .dash-stat-sub {
    opacity: 0.85;
}

.dash-stat-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.dash-stat-title {
    font-size: 0.8rem;
    font-weight: 600;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.dash-stat-arrow {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.04);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #666;
}

.dash-stat-highlight .dash-stat-arrow {
    background: rgba(255, 255, 255, 0.2);
}

.dash-stat-number {
    font-size: 2.25rem;
    font-weight: 800;
    color: #1a1a1a;
    line-height: 1;
    margin-bottom: 0.5rem;
}

.dash-stat-sub {
    font-size: 0.75rem;
    color: #999;
}

/* 중간 행 3열 */
.dash-mid-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

/* 범용 카드 */
.dash-card {
    background: white;
    border-radius: 16px;
    padding: 1.5rem;
    border: 1px solid #e8e8e8;
}

.dash-card h3 {
    font-size: 1rem;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 1rem;
}

.dash-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.dash-card-header h3 {
    margin: 0;
}

.dash-btn-new {
    padding: 5px 14px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    border: 1px solid #e0e0e0;
    text-decoration: none;
    color: #1a1a1a;
    transition: all 0.2s;
}

.dash-btn-new:hover {
    background: #a60e16;
    color: white;
    border-color: #a60e16;
}

/* 바 차트 */
.dash-bar-chart {
    display: flex;
    align-items: flex-end;
    gap: 0.75rem;
    height: 180px;
    padding-top: 1rem;
}

.dash-bar-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
}

.dash-bar-wrapper {
    flex: 1;
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.dash-bar {
    width: 70%;
    min-width: 20px;
    max-width: 40px;
    border-radius: 8px 8px 4px 4px;
    min-height: 12px;
    position: relative;
    transition: height 0.6s ease;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.dash-bar-value {
    position: absolute;
    top: -20px;
    font-size: 0.7rem;
    font-weight: 700;
    color: #1a1a1a;
}

.dash-bar-label {
    margin-top: 0.5rem;
    font-size: 0.65rem;
    color: #999;
    text-align: center;
    white-space: nowrap;
}

/* 최근 문의 */
.dash-inquiry-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.dash-inquiry-item {
    padding: 0.75rem;
    background: #fafafa;
    border-radius: 10px;
    border-left: 3px solid #a60e16;
}

.dash-inquiry-name {
    font-weight: 700;
    font-size: 0.85rem;
    color: #1a1a1a;
    margin-bottom: 0.2rem;
}

.dash-inquiry-msg {
    font-size: 0.75rem;
    color: #888;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dash-inquiry-date {
    font-size: 0.65rem;
    color: #bbb;
    margin-top: 0.2rem;
}

.dash-card-link {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 600;
    color: #a60e16;
    text-decoration: none;
    padding: 4px 0;
    transition: opacity 0.2s;
}

.dash-card-link:hover {
    opacity: 0.7;
}

/* 빈 상태 */
.dash-empty {
    text-align: center;
    padding: 1.5rem 0;
}

.dash-empty-icon {
    font-size: 2rem;
    display: block;
    margin-bottom: 0.5rem;
    opacity: 0.4;
}

.dash-empty p {
    font-size: 0.8rem;
    color: #bbb;
    margin: 0;
}

/* 프로젝트 리스트 */
.dash-project-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.dash-project-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid #f0f0f0;
}

.dash-project-item:last-child {
    border-bottom: none;
}

.dash-project-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    background: #ccc;
}

.dash-project-dot.status-progress {
    background: #a60e16;
}

.dash-project-dot.status-done {
    background: #2e7d32;
}

.dash-project-dot.status-wait {
    background: #f59e0b;
}

.dash-project-info {
    flex: 1;
    min-width: 0;
}

.dash-project-title {
    font-size: 0.8rem;
    font-weight: 600;
    color: #1a1a1a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dash-project-meta {
    font-size: 0.65rem;
    color: #bbb;
    display: flex;
    gap: 0.5rem;
}

.dash-project-badge {
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.6rem;
    font-weight: 600;
    white-space: nowrap;
    background: #f0f0f0;
    color: #888;
}

.dash-project-badge.status-progress {
    background: #fef2f2;
    color: #a60e16;
}

.dash-project-badge.status-done {
    background: #e8f5e9;
    color: #2e7d32;
}

.dash-project-badge.status-wait {
    background: #fffbeb;
    color: #b45309;
}

/* 하단 행 3열 */
.dash-bottom-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
}

/* 빠른 관리 그리드 */
.dash-quick-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.6rem;
}

.dash-quick-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    padding: 0.85rem 0.5rem;
    border-radius: 12px;
    background: #fafafa;
    text-decoration: none;
    transition: all 0.2s;
    border: 1px solid transparent;
}

.dash-quick-item:hover {
    background: #fef2f2;
    border-color: #a60e16;
    transform: translateY(-2px);
}

.dash-quick-icon {
    font-size: 1.4rem;
}

.dash-quick-label {
    font-size: 0.65rem;
    font-weight: 600;
    color: #555;
}

/* 도넛 차트 */
.dash-donut-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.dash-donut {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dash-donut-inner {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.dash-donut-value {
    font-size: 1.5rem;
    font-weight: 800;
    color: #1a1a1a;
    line-height: 1;
}

.dash-donut-label {
    font-size: 0.6rem;
    color: #999;
    margin-top: 2px;
}

.dash-donut-legend {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
}

.dash-legend-item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.7rem;
    color: #666;
}

.dash-legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

/* 환영 배너 카드 */
.dash-welcome-card {
    background: linear-gradient(135deg, #1a1a1a, #2d2d2d) !important;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-color: transparent !important;
    overflow: hidden;
    position: relative;
}

.dash-welcome-card::before {
    content: '';
    position: absolute;
    top: -30%;
    right: -20%;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: rgba(166, 14, 22, 0.15);
}

.dash-welcome-card h3 {
    color: #a60e16;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: 1px;
}

.dash-welcome-content p {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85rem;
    margin: 0.25rem 0;
}

.dash-welcome-time {
    font-size: 0.9rem;
    font-weight: 600;
    color: white;
    margin-top: 0.75rem;
}

.dash-welcome-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 10px 18px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: white;
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 600;
    transition: all 0.2s;
    margin-top: 1rem;
    align-self: flex-start;
    z-index: 1;
}

.dash-welcome-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* 반응형: 태블릿 */
@media (max-width: 1200px) {
    .dash-mid-row {
        grid-template-columns: 1fr 1fr;
    }

    .dash-projects-card {
        grid-column: 1 / -1;
    }

    .dash-bottom-row {
        grid-template-columns: 1fr 1fr;
    }

    .dash-welcome-card {
        grid-column: 1 / -1;
    }
}

/* 반응형: 모바일 */
@media (max-width: 768px) {

    /* 통계 카드: 2열 */
    .dash-stats-row {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.6rem;
    }

    .dash-stat-card {
        padding: 1rem 0.85rem;
    }

    .dash-stat-number {
        font-size: 1.75rem;
    }

    .dash-stat-sub {
        font-size: 0.68rem;
    }

    /* 인사 헤더 */
    .dash-greeting {
        margin-bottom: 1rem;
    }

    .dash-greeting h2 {
        font-size: 1.25rem;
    }

    .dash-greeting p {
        font-size: 0.82rem;
    }

    /* 중간 행: 1열 + 프로젝트 최상단 */
    .dash-mid-row {
        grid-template-columns: 1fr;
        gap: 0.85rem;
    }

    .dash-projects-card {
        grid-column: auto;
        order: -1;
    }

    .dash-chart-card {
        order: 1;
    }

    .dash-inquiries-card {
        order: 2;
    }

    /* 하단 행: 1열 */
    .dash-bottom-row {
        grid-template-columns: 1fr;
        gap: 0.85rem;
    }

    .dash-welcome-card {
        grid-column: auto;
    }

    /* 모든 카드 오버플로우 방지 */
    .dash-card {
        padding: 1rem;
        overflow: hidden;
        min-width: 0;
    }

    .dash-card h3 {
        font-size: 0.92rem;
        margin-bottom: 0.75rem;
    }

    /* 바 차트 - 높이 축소 + 오버플로우 방지 */
    .dash-bar-chart {
        height: 120px;
        overflow: hidden;
    }

    .dash-bar-label {
        font-size: 0.6rem;
    }

    .dash-bar-value {
        font-size: 0.65rem;
    }

    /* 최근 문의 오버플로우 방지 */
    .dash-inquiry-item {
        padding: 0.6rem;
        overflow: hidden;
    }

    .dash-inquiry-name {
        font-size: 0.82rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .dash-inquiry-msg {
        font-size: 0.72rem;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* 프로젝트 목록 오버플로우 방지 */
    .dash-project-item {
        overflow: hidden;
        min-width: 0;
    }

    .dash-project-title {
        font-size: 0.85rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .dash-project-meta {
        font-size: 0.72rem;
    }

    .dash-project-meta span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .dash-project-info {
        min-width: 0;
        overflow: hidden;
    }

    /* 빠른 관리 그리드 */
    .dash-quick-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 0.5rem;
    }

    .dash-quick-item {
        padding: 0.6rem 0.25rem;
    }

    .dash-quick-icon {
        font-size: 1.4rem;
    }

    .dash-quick-label {
        font-size: 0.65rem;
    }

    /* 도넛 차트 */
    .dash-donut-wrap {
        gap: 0.75rem;
    }

    .dash-donut {
        width: 100px;
        height: 100px;
    }

    .dash-donut-value {
        font-size: 1.1rem;
    }

    .dash-donut-legend {
        gap: 0.35rem;
    }

    .dash-legend-item {
        font-size: 0.75rem;
    }

    /* 환영 카드 */
    .dash-welcome-content h3 {
        font-size: 1.1rem;
    }

    .dash-welcome-content p {
        font-size: 0.82rem;
    }

    .dash-welcome-time {
        font-size: 0.75rem;
    }

    .dash-welcome-btn {
        font-size: 0.78rem;
        padding: 0.5rem 1rem;
    }

    /* 카드 링크 */
    .dash-card-link {
        font-size: 0.75rem;
    }
}

/* ===================================
   검색 & 필터 바 (블로그/포트폴리오 공통)
   =================================== */

.admin-filter-bar {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    align-items: center;
}

.admin-search-wrap {
    flex: 1;
    min-width: 200px;
    position: relative;
}

.admin-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.9rem;
    pointer-events: none;
}

.admin-search {
    width: 100%;
    padding: 0.6rem 2.2rem 0.6rem 2.4rem;
    border: 2px solid #e8e8e8;
    border-radius: 10px;
    font-size: 0.9rem;
    background: #fff;
    transition: border-color 0.2s;
}

.admin-search:focus {
    outline: none;
    border-color: #a60e16;
}

.admin-search-clear {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    font-size: 0.9rem;
    cursor: pointer;
    color: #999;
    padding: 4px;
}

.admin-search-clear:hover {
    color: #333;
}

.admin-filter-select {
    padding: 0.6rem 1rem;
    border: 2px solid #e8e8e8;
    border-radius: 10px;
    font-size: 0.85rem;
    background: #fff;
    cursor: pointer;
    min-width: 120px;
    transition: border-color 0.2s;
}

.admin-filter-select:focus {
    outline: none;
    border-color: #a60e16;
}

@media (max-width: 768px) {
    .admin-filter-bar {
        flex-direction: column;
    }

    .admin-search-wrap {
        width: 100%;
    }

    .admin-filter-select {
        width: 100%;
    }
}

/* ===================================
   DB 관리 페이지
   =================================== */

/* 환경 스위치 */
.db-env-switch {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 2rem;
    background: #f5f5f5;
    padding: 4px;
    border-radius: 12px;
    width: fit-content;
}

.db-env-btn {
    padding: 0.6rem 1.5rem;
    border: none;
    border-radius: 10px;
    background: transparent;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 500;
    color: #888;
    transition: all 0.2s;
}

.db-env-btn:hover {
    color: #333;
}

.db-env-btn.active.prod {
    background: #fff;
    color: #c33;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    font-weight: 600;
}

.db-env-btn.active.dev {
    background: #fff;
    color: #2a7;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    font-weight: 600;
}

/* DB 아이템 그리드 */
.db-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.db-item {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 16px;
    padding: 1.25rem;
    cursor: pointer;
    transition: all 0.25s;
}

.db-item:hover {
    border-color: #ddd;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

.db-item.active {
    border-color: #a60e16;
    box-shadow: 0 4px 16px rgba(166, 14, 22, 0.1);
}

.db-item-header {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-bottom: 1rem;
}

.db-item-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
    color: #fff;
}

.db-item-meta h4 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: #222;
}

.db-item-meta code {
    font-size: 0.72rem;
    color: #999;
    background: #f5f5f5;
    padding: 1px 6px;
    border-radius: 4px;
}

.db-item-footer {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding-top: 0.85rem;
    border-top: 1px solid #f0f0f0;
}

.db-item-stat {
    display: flex;
    flex-direction: column;
}

.db-item-stat-num {
    font-size: 0.95rem;
    font-weight: 700;
    color: #222;
}

.db-item-stat-label {
    font-size: 0.7rem;
    color: #999;
}

.db-item-type {
    margin-left: auto;
    font-size: 0.7rem;
    padding: 3px 8px;
    border-radius: 6px;
    font-weight: 500;
}

.db-item-type.array {
    background: #e8f0fe;
    color: #1a73e8;
}

.db-item-type.object {
    background: #fef3e0;
    color: #e67e22;
}

/* 데이터 뷰어 카드 */
.db-viewer-card {
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #eee;
    background: #fff;
}

.db-viewer-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    background: #fafafa;
    border-bottom: 1px solid #eee;
    flex-wrap: wrap;
    gap: 1rem;
}

.db-viewer-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.db-viewer-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: #fff;
}

.db-viewer-title h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

.db-viewer-title code {
    font-size: 0.75rem;
    color: #999;
}

.db-viewer-btns {
    display: flex;
    gap: 0.4rem;
}

.btn-db-secondary {
    padding: 0.45rem 0.85rem;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    font-size: 0.8rem;
    color: #555;
    transition: all 0.15s;
}

.btn-db-secondary:hover {
    background: #f5f5f5;
    border-color: #ccc;
}

.btn-db-danger {
    padding: 0.45rem 0.85rem;
    border: none;
    border-radius: 8px;
    background: #dc3545;
    color: #fff;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 500;
    transition: all 0.15s;
}

.btn-db-danger:hover {
    background: #c82333;
}

/* 레코드 바 */
.db-record-bar {
    padding: 0.65rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.85rem;
    color: #666;
    border-bottom: 1px solid #f0f0f0;
}

.db-sel-badge {
    color: #a60e16;
    font-weight: 600;
    font-size: 0.8rem;
    background: #fee;
    padding: 2px 10px;
    border-radius: 12px;
}

/* 상태 메시지 */
.db-status-msg {
    padding: 3rem;
    text-align: center;
    color: #999;
}

/* DB 테이블 */
.db-tbl-wrap {
    overflow-x: auto;
}

.db-tbl {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.db-tbl thead th {
    padding: 0.7rem 1rem;
    text-align: left;
    font-weight: 600;
    color: #555;
    background: #f8f9fa;
    border-bottom: 2px solid #eee;
    white-space: nowrap;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.db-tbl tbody td {
    padding: 0.6rem 1rem;
    border-bottom: 1px solid #f3f3f3;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #333;
}

.db-tbl tbody tr:hover {
    background: #fafbfc;
}

.db-tbl tbody tr.sel {
    background: #fff5f5;
}

.db-tbl-chk {
    width: 40px;
    text-align: center !important;
}

.db-tbl-num {
    color: #bbb;
    font-size: 0.8rem;
}

.db-cell-tag {
    font-size: 0.72rem;
    padding: 2px 6px;
    background: #e8f0fe;
    color: #1a73e8;
    border-radius: 4px;
    font-family: monospace;
}

.btn-icon-danger {
    opacity: 0.4;
    transition: opacity 0.15s;
}

.btn-icon-danger:hover {
    opacity: 1;
}

/* Object 뷰어 */
.db-obj-wrap {
    padding: 1.5rem;
}

.db-obj-notice {
    padding: 0.65rem 1rem;
    background: #f0f4ff;
    border-radius: 8px;
    color: #4a6fa5;
    font-size: 0.85rem;
    margin-bottom: 1.25rem;
}

.db-obj-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.4rem;
}

.db-obj-item {
    display: flex;
    gap: 1rem;
    padding: 0.75rem 1rem;
    background: #fafafa;
    border-radius: 8px;
    font-size: 0.85rem;
    transition: background 0.15s;
}

.db-obj-item:hover {
    background: #f0f0f0;
}

.db-obj-key {
    font-weight: 600;
    color: #333;
    min-width: 140px;
    flex-shrink: 0;
}

.db-obj-val {
    color: #666;
    word-break: break-all;
    font-family: 'Courier New', monospace;
    font-size: 0.78rem;
    line-height: 1.5;
}

/* 반응형 */
@media (max-width: 768px) {
    .db-grid {
        grid-template-columns: 1fr;
    }

    .db-viewer-top {
        flex-direction: column;
        align-items: flex-start;
    }

    .db-viewer-btns {
        width: 100%;
        justify-content: flex-end;
    }

    .db-tbl {
        font-size: 0.75rem;
    }

    .db-tbl thead th,
    .db-tbl tbody td {
        padding: 0.5rem 0.6rem;
    }

    .db-obj-item {
        flex-direction: column;
        gap: 0.25rem;
    }

    .db-obj-key {
        min-width: auto;
    }
}

/* ===================================
   관리자 다크 모드
   =================================== */

/* 관리자 토글 버튼 */
.admin-theme-toggle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid #ddd;
    background: #fff;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
}

.admin-theme-toggle:hover {
    transform: scale(1.1) rotate(15deg);
    border-color: #a60e16;
    box-shadow: 0 0 10px rgba(166, 14, 22, 0.2);
}

/* 다크 모드 — 관리자 전체 */
[data-theme="dark"] .admin-body {
    background: #0f1117;
}

[data-theme="dark"] .admin-theme-toggle {
    border-color: #444;
    background: #1e1e1e;
}

/* 사이드바 */
[data-theme="dark"] .admin-sidebar {
    background: #141620;
    border-right: 1px solid #1e2030;
}

[data-theme="dark"] .sidebar-header {
    border-bottom: 1px solid #1e2030;
}

[data-theme="dark"] .sidebar-header h3 {
    color: #e0e0e0;
}

[data-theme="dark"] .sidebar-nav .nav-item {
    color: #999;
}

[data-theme="dark"] .sidebar-nav .nav-item:hover {
    background: #1a1d2e;
    color: #e0e0e0;
}

[data-theme="dark"] .sidebar-nav .nav-item.active {
    background: rgba(166, 14, 22, 0.15);
    color: #ff6b6b;
    border-color: #e63946;
}

[data-theme="dark"] .sidebar-footer {
    border-top: 1px solid #1e2030;
}

[data-theme="dark"] .user-details strong {
    color: #e0e0e0;
}

[data-theme="dark"] .user-details span {
    color: #888;
}

[data-theme="dark"] .btn-logout {
    background: rgba(255, 255, 255, 0.05);
    color: #ccc;
    border-color: #333;
}

[data-theme="dark"] .btn-logout:hover {
    background: rgba(230, 57, 70, 0.15);
    color: #ff6b6b;
}

/* 헤더 */
[data-theme="dark"] .admin-header {
    background: #141620;
    border-bottom: 1px solid #1e2030;
}

[data-theme="dark"] .admin-header h1 {
    color: #e0e0e0;
}

[data-theme="dark"] .admin-main {
    background: #0f1117;
}

/* 버튼 */
[data-theme="dark"] .btn-secondary,
[data-theme="dark"] .btn.btn-secondary {
    background: #1e2030;
    color: #ccc;
    border-color: #333;
}

[data-theme="dark"] .btn-secondary:hover {
    background: #252840;
    color: #fff;
}

/* 대시보드 카드 */
[data-theme="dark"] .dash-greeting h2 {
    color: #e0e0e0;
}

[data-theme="dark"] .dash-greeting p {
    color: #888;
}

[data-theme="dark"] .dash-stat-card {
    background: #1a1d2e;
    border-color: #252840;
}

[data-theme="dark"] .dash-stat-card.dash-stat-highlight {
    background: linear-gradient(135deg, #2a1015, #1a1d2e);
    border-color: rgba(230, 57, 70, 0.2);
}

[data-theme="dark"] .dash-stat-title {
    color: #999;
}

[data-theme="dark"] .dash-stat-number {
    color: #e0e0e0;
}

[data-theme="dark"] .dash-stat-sub {
    color: #666;
}

[data-theme="dark"] .dash-card {
    background: #1a1d2e;
    border-color: #252840;
}

[data-theme="dark"] .dash-card h3 {
    color: #e0e0e0;
}

/* 테이블 */
[data-theme="dark"] .content-table table {
    background: #1a1d2e;
}

[data-theme="dark"] .content-table thead th {
    background: #141620;
    color: #999;
    border-color: #252840;
}

[data-theme="dark"] .content-table tbody td {
    color: #ccc;
    border-color: #1e2030;
}

[data-theme="dark"] .content-table tbody tr:hover {
    background: #1e2030;
}

/* 모달 */
[data-theme="dark"] .modal-overlay {
    background: rgba(0, 0, 0, 0.7);
}

[data-theme="dark"] .modal-content {
    background: #1a1d2e;
    border: 1px solid #252840;
}

[data-theme="dark"] .modal-header {
    border-bottom-color: #252840;
}

[data-theme="dark"] .modal-header h3 {
    color: #e0e0e0;
}

[data-theme="dark"] .modal-footer {
    border-top-color: #252840;
}

[data-theme="dark"] .modal-close {
    color: #999;
}

/* 폼 입력 */
[data-theme="dark"] .cms-field input,
[data-theme="dark"] .cms-field select,
[data-theme="dark"] .cms-field textarea {
    background: #141620;
    border-color: #333;
    color: #e0e0e0;
}

[data-theme="dark"] .cms-field input:focus,
[data-theme="dark"] .cms-field select:focus,
[data-theme="dark"] .cms-field textarea:focus {
    border-color: #e63946;
}

[data-theme="dark"] .cms-field label {
    color: #999;
}

/* CMS 섹션 & 카드 다크 모드 */
[data-theme="dark"] .cms-section h3 {
    color: #e8e8e8;
}

[data-theme="dark"] .cms-section h4 {
    color: #ddd;
}

[data-theme="dark"] .cms-desc {
    color: #888;
}

[data-theme="dark"] .cms-card {
    background: #1a1d2e;
    border-color: #2e3350;
}

[data-theme="dark"] .cms-card-header {
    color: #ddd;
    border-bottom-color: #2e3350;
}

[data-theme="dark"] .cms-save-bar {
    background: #1a1d2e;
    border-top-color: #2e3350;
}

[data-theme="dark"] .cms-tab {
    background: #1a1d2e;
    border-color: #2e3350;
    color: #bbb;
}

[data-theme="dark"] .cms-tab:hover {
    border-color: #e63946;
    color: #e63946;
}

[data-theme="dark"] .cms-tab.active {
    background: linear-gradient(135deg, #a60e16, #d41920);
    color: #fff;
    border-color: transparent;
}

/* 이메일 설정 UI 다크 모드 */
[data-theme="dark"] .email-list-item {
    background: #252840;
    color: #ddd;
}

[data-theme="dark"] .email-remove-btn {
    color: #888;
}

[data-theme="dark"] .email-remove-btn:hover {
    background: rgba(230, 57, 70, 0.15);
    color: #e63946;
}

[data-theme="dark"] .email-toggle-row strong {
    color: #ddd;
}

[data-theme="dark"] .email-toggle-row input[type="checkbox"] {
    background: #444;
}

[data-theme="dark"] .cms-email-input {
    background: #141620;
    border-color: #333;
    color: #e0e0e0;
}

/* 배지 */
[data-theme="dark"] .badge {
    opacity: 0.9;
}

[data-theme="dark"] .status-badge {
    opacity: 0.85;
}

/* 툴바 & 필터 */
[data-theme="dark"] .admin-toolbar span {
    color: #999;
}

[data-theme="dark"] .admin-filter-bar .admin-search {
    background: #1a1d2e;
    border-color: #333;
    color: #e0e0e0;
}

[data-theme="dark"] .admin-filter-bar .admin-search:focus {
    border-color: #e63946;
}

[data-theme="dark"] .admin-filter-select {
    background: #1a1d2e;
    border-color: #333;
    color: #ccc;
}

/* 토스트 */
[data-theme="dark"] .admin-toast {
    background: #1a1d2e;
    color: #e0e0e0;
    border-color: #333;
}

/* DB 관리 페이지 */
[data-theme="dark"] .db-env-switch {
    background: #1a1d2e;
}

[data-theme="dark"] .db-env-btn {
    color: #777;
}

[data-theme="dark"] .db-env-btn.active.prod {
    background: #252840;
    color: #ff6b6b;
}

[data-theme="dark"] .db-env-btn.active.dev {
    background: #252840;
    color: #4ade80;
}

[data-theme="dark"] .db-item {
    background: #1a1d2e;
    border-color: #252840;
}

[data-theme="dark"] .db-item:hover {
    border-color: #333;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .db-item.active {
    border-color: #e63946;
    box-shadow: 0 4px 16px rgba(230, 57, 70, 0.15);
}

[data-theme="dark"] .db-item-meta h4 {
    color: #e0e0e0;
}

[data-theme="dark"] .db-item-meta code {
    background: #252840;
    color: #888;
}

[data-theme="dark"] .db-item-footer {
    border-top-color: #252840;
}

[data-theme="dark"] .db-item-stat-num {
    color: #e0e0e0;
}

[data-theme="dark"] .db-viewer-card {
    background: #1a1d2e;
    border-color: #252840;
}

[data-theme="dark"] .db-viewer-top {
    background: #141620;
    border-bottom-color: #252840;
}

[data-theme="dark"] .db-viewer-title h3 {
    color: #e0e0e0;
}

[data-theme="dark"] .btn-db-secondary {
    background: #252840;
    border-color: #333;
    color: #ccc;
}

[data-theme="dark"] .db-tbl thead th {
    background: #141620;
    color: #999;
    border-color: #252840;
}

[data-theme="dark"] .db-tbl tbody td {
    border-color: #1e2030;
    color: #ccc;
}

[data-theme="dark"] .db-tbl tbody tr:hover {
    background: #1e2030;
}

[data-theme="dark"] .db-tbl tbody tr.sel {
    background: rgba(230, 57, 70, 0.08);
}

[data-theme="dark"] .db-obj-item {
    background: #141620;
}

[data-theme="dark"] .db-obj-item:hover {
    background: #1e2030;
}

[data-theme="dark"] .db-obj-key {
    color: #ccc;
}

[data-theme="dark"] .db-obj-val {
    color: #888;
}

[data-theme="dark"] .db-obj-notice {
    background: rgba(26, 115, 232, 0.1);
    color: #7eb3f0;
}

[data-theme="dark"] .db-record-bar {
    color: #999;
    border-color: #252840;
}

/* 빠른 관리 카드 */
[data-theme="dark"] .dash-quick-grid a {
    background: #1a1d2e;
    color: #ccc;
    border-color: #252840;
}

[data-theme="dark"] .dash-quick-grid a:hover {
    background: #252840;
    color: #fff;
}

/* 프로젝트 진행 카드 */
[data-theme="dark"] .dash-progress-bg {
    background: #252840;
}

/* 차트 라벨 */
[data-theme="dark"] .dash-bar-label {
    color: #999;
}

[data-theme="dark"] .dash-bar-value {
    color: #ccc;
}

/* 문의 아이템 */
[data-theme="dark"] .dash-inq-item {
    border-color: #252840;
}

[data-theme="dark"] .dash-inq-item:hover {
    background: #1e2030;
}

/* Rich Editor */
[data-theme="dark"] .rich-editor-toolbar {
    background: #141620;
    border-color: #333;
}

[data-theme="dark"] .rich-editor-toolbar button {
    color: #ccc;
}

[data-theme="dark"] .rich-editor-content {
    background: #1a1d2e;
    border-color: #333;
    color: #e0e0e0;
}

/* 프로젝트 모달 탭 다크모드 */
[data-theme="dark"] .pj-modal-tabs {
    background: #1a1d2e;
    border-bottom-color: #2a2d40;
}

[data-theme="dark"] .pj-modal-tab {
    color: #888;
}

[data-theme="dark"] .pj-modal-tab:hover {
    color: #ccc;
}

[data-theme="dark"] .pj-modal-tab.active {
    color: #ff6b6b;
    border-bottom-color: #ff6b6b;
}

/* ═══ 프로젝트 모달 전체 다크모드 ═══ */

/* 모달 본체 */
[data-theme="dark"] .admin-modal-overlay {
    background: rgba(0, 0, 0, 0.7);
}

[data-theme="dark"] .admin-modal {
    background: #1a1d2e;
    border: 1px solid #2a2d42;
    color: #ddd;
}

[data-theme="dark"] .admin-modal h2 {
    color: #eee;
}

[data-theme="dark"] .admin-modal-close {
    color: #888;
}

[data-theme="dark"] .admin-modal-close:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
}

/* 기본 정보 - 폼 필드 */
[data-theme="dark"] .pj-form-grid label {
    color: #bbb;
}

[data-theme="dark"] .pj-form-grid input,
[data-theme="dark"] .pj-form-grid select,
[data-theme="dark"] .pj-form-grid textarea {
    background: #252840;
    border-color: #333660;
    color: #ddd;
}

[data-theme="dark"] .pj-form-grid input:focus,
[data-theme="dark"] .pj-form-grid select:focus,
[data-theme="dark"] .pj-form-grid textarea:focus {
    border-color: #ff6b6b;
    box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.1);
}

[data-theme="dark"] .pj-form-grid input::placeholder,
[data-theme="dark"] .pj-form-grid textarea::placeholder {
    color: #666;
}

[data-theme="dark"] .pj-range {
    background: #333660;
}

/* 하위 작업 */
[data-theme="dark"] .pj-tasks-progress {
    background: #252840;
    border-color: #333660;
}

[data-theme="dark"] .pj-tasks-progress-label {
    color: #bbb;
}

[data-theme="dark"] .pj-task-row {
    background: #252840;
    border-color: #333660;
}

[data-theme="dark"] .pj-task-row:hover {
    border-color: #444;
}

[data-theme="dark"] .pj-task-input {
    background: transparent;
    border-color: transparent;
    color: #ddd;
}

[data-theme="dark"] .pj-task-input:focus {
    border-color: #ff6b6b;
    background: #1e2136;
}

[data-theme="dark"] .pj-task-assignee-input,
[data-theme="dark"] .pj-task-date-input {
    background: #1e2136;
    border-color: #333660;
    color: #ccc;
}

[data-theme="dark"] .pj-task-remove {
    color: #666;
}

[data-theme="dark"] .pj-task-remove:hover {
    background: #3a1520;
    color: #ef5350;
}

[data-theme="dark"] .pj-task-add-btn {
    background: #1e2136;
    border-color: #333660;
    color: #888;
}

[data-theme="dark"] .pj-task-add-btn:hover {
    background: #252840;
    border-color: #444;
    color: #ccc;
}

/* 첨부파일 */
[data-theme="dark"] .pj-file-upload-area {
    background: #1e2136;
    border-color: #333660;
    color: #888;
}

[data-theme="dark"] .pj-file-upload-area:hover {
    background: #252840;
    border-color: #444;
}

[data-theme="dark"] .pj-file-upload-area small {
    color: #666;
}

[data-theme="dark"] .pj-file-item {
    background: #252840;
    border-color: #333660;
}

[data-theme="dark"] .pj-file-item:hover {
    border-color: #444;
}

[data-theme="dark"] .pj-file-name {
    color: #ddd;
}

[data-theme="dark"] .pj-file-meta {
    color: #777;
}

[data-theme="dark"] .pj-file-remove {
    color: #666;
}

[data-theme="dark"] .pj-file-remove:hover {
    background: #3a1520;
    color: #ef5350;
}

/* 코멘트 탭 - 공유 링크 */
[data-theme="dark"] .pj-share-section {
    background: #1e2136;
    border-color: #333660;
}

[data-theme="dark"] .pj-share-section h4 {
    color: #64b5f6;
}

[data-theme="dark"] .pj-share-link-input {
    background: #252840;
    border-color: #333660;
    color: #ddd;
}

[data-theme="dark"] .pj-share-hint {
    color: #777;
}

/* 코멘트 탭 - 관리자 메시지 */
[data-theme="dark"] .pj-share-message-section {
    background: #1e2136;
    border-color: #333660;
}

[data-theme="dark"] .pj-share-message-section h4 {
    color: #888;
}

[data-theme="dark"] .pj-share-message-section textarea {
    background: #252840;
    border-color: #333660;
    color: #ddd;
}

[data-theme="dark"] .pj-share-message-section textarea:focus {
    border-color: #ff6b6b;
}

[data-theme="dark"] .pj-share-message-section textarea::placeholder {
    color: #555;
}

/* 코멘트 탭 - 채팅 대화 다크모드 */
[data-theme="dark"] .pj-chat-container {
    border-color: #2a2d42;
    background: #1a1d2e;
}

[data-theme="dark"] .pj-chat-header {
    background: linear-gradient(135deg, #1e2136, #252840);
    border-bottom-color: #2a2d42;
    color: #ddd;
}

[data-theme="dark"] .pj-chat-count {
    background: #333660;
    color: #888;
}

[data-theme="dark"] .pj-chat-messages {
    background: #12141e;
}

[data-theme="dark"] .pj-chat-messages::-webkit-scrollbar-thumb {
    background: #444;
}

[data-theme="dark"] .pj-chat-empty {
    color: #555;
}

[data-theme="dark"] .pj-chat-empty small {
    color: #444;
}

[data-theme="dark"] .pj-chat-bubble.client {
    background: #1a2a3a;
    border-left-color: #42a5f5;
}

[data-theme="dark"] .pj-chat-bubble.admin {
    background: #2e1a22;
    border-right-color: #e84855;
}

[data-theme="dark"] .pj-chat-author {
    color: #ddd;
}

[data-theme="dark"] .pj-chat-time {
    color: #666;
}

[data-theme="dark"] .pj-chat-del {
    color: #555;
}

[data-theme="dark"] .pj-chat-del:hover {
    background: #3a1520;
    color: #ef5350;
}

[data-theme="dark"] .pj-chat-text {
    color: #bbb;
}

[data-theme="dark"] .pj-chat-input-bar {
    border-top-color: #2a2d42;
    background: #1a1d2e;
}

[data-theme="dark"] .pj-chat-input {
    background: #1e2136;
    border-color: #333660;
    color: #ddd;
}

[data-theme="dark"] .pj-chat-input:focus {
    border-color: #5c7cfa;
    background: #252840;
    box-shadow: 0 0 0 2px rgba(92, 124, 250, 0.1);
}

[data-theme="dark"] .pj-chat-input::placeholder {
    color: #555;
}

/* 인보이스 탭 */
[data-theme="dark"] .pj-invoice-status-row {
    background: #252840;
}

[data-theme="dark"] .pj-invoice-status-row label {
    color: #bbb;
}

[data-theme="dark"] .pj-invoice-status-row select {
    background: #1e2136;
    border-color: #333660;
    color: #ddd;
}

[data-theme="dark"] .pj-invoice-header-row {
    border-bottom-color: #333660;
}

[data-theme="dark"] .pj-invoice-header-row span {
    color: #777;
}

[data-theme="dark"] .pj-invoice-row input {
    background: #252840;
    border-color: #333660;
    color: #ddd;
}

[data-theme="dark"] .pj-invoice-row input:focus {
    border-color: #ff6b6b;
}

[data-theme="dark"] .pj-inv-subtotal {
    color: #ddd;
}

[data-theme="dark"] .pj-inv-del:hover {
    background: #3a1520;
}

[data-theme="dark"] .pj-invoice-summary {
    background: linear-gradient(135deg, #1e2136, #252840);
    border-color: #333660;
}

[data-theme="dark"] .pj-inv-sum-row {
    color: #bbb;
}

[data-theme="dark"] .pj-inv-sum-row.total {
    border-top-color: #333660;
    color: #ff6b6b;
}

[data-theme="dark"] .pj-invoice-add-btn {
    background: #1e2136;
    border-color: #333660;
    color: #888;
}

[data-theme="dark"] .pj-invoice-add-btn:hover {
    background: #252840;
    border-color: #444;
    color: #ccc;
}

[data-theme="dark"] .pj-invoice-bank-info {
    background: linear-gradient(135deg, #1a1e35, #1e1a30);
    border-color: #333660;
}

[data-theme="dark"] .pj-invoice-bank-info label {
    color: #ccc;
}

[data-theme="dark"] .pj-invoice-bank-info textarea {
    background: #252840;
    border-color: #333660;
    color: #e0e0e0;
}

[data-theme="dark"] .pj-invoice-bank-info textarea:focus {
    border-color: #64b5f6;
}

/* ── 리포트 보고 탭 다크 모드 ── */
[data-theme="dark"] .pj-report-filter-btn {
    background: #1e2136;
    border-color: #333660;
    color: #888;
}

[data-theme="dark"] .pj-report-filter-btn:hover {
    border-color: #5c7cfa;
    color: #5c7cfa;
}

[data-theme="dark"] .pj-report-filter-btn.active {
    background: #1565c0;
    border-color: #1565c0;
    color: white;
}

[data-theme="dark"] .pj-report-form {
    background: #1a1d2e;
    border-color: #2a2d42;
}

[data-theme="dark"] .pj-report-form-field label,
[data-theme="dark"] .pj-report-metrics-section>label {
    color: #999;
}

[data-theme="dark"] .pj-report-form-field input,
[data-theme="dark"] .pj-report-form-field select,
[data-theme="dark"] .pj-report-form-field textarea {
    background: #252840;
    border-color: #333660;
    color: #ddd;
}

[data-theme="dark"] .pj-report-metric-row input {
    background: #252840;
    border-color: #333660;
    color: #ddd;
}

[data-theme="dark"] .pj-report-metric-add {
    border-color: #333660;
    color: #888;
}

[data-theme="dark"] .pj-report-metric-add:hover {
    background: #252840;
    border-color: #555;
}

[data-theme="dark"] .pj-report-card {
    background: #1e2136;
    border-color: #2a2d42;
}

[data-theme="dark"] .pj-report-card:hover {
    border-color: #3a3d52;
}

[data-theme="dark"] .pj-report-card-title {
    color: #e0e0e0;
}

[data-theme="dark"] .pj-report-period-badge {
    background: #1a2744;
    color: #5c7cfa;
}

[data-theme="dark"] .pj-report-metric-card {
    background: #252840;
}

[data-theme="dark"] .pj-report-metric-value {
    color: #e0e0e0;
}

[data-theme="dark"] .pj-report-card-content {
    color: #aaa;
}

[data-theme="dark"] .pj-report-empty {
    color: #666;
}

/* 모달 하단 버튼 */
[data-theme="dark"] .admin-modal-footer {
    border-top-color: #2a2d42;
    background: #1a1d2e;
}

[data-theme="dark"] .pj-cancel-btn {
    background: #252840;
    border-color: #333660;
    color: #ccc;
}

[data-theme="dark"] .pj-cancel-btn:hover {
    background: #333660;
}

/* 리포트 카드 */
[data-theme="dark"] .pj-report-card {
    background: linear-gradient(135deg, #1e2136, #252840);
    border-color: #333660;
}

[data-theme="dark"] .pj-report-card h4,
[data-theme="dark"] .pj-report-card .pj-report-val {
    color: #ddd;
}

[data-theme="dark"] .pj-report-card small {
    color: #777;
}

/* 프리뷰 카드 */
[data-theme="dark"] .pj-task-preview-item {
    color: #ccc;
}

[data-theme="dark"] .pj-task-preview-item.done {
    color: #666;
}

[data-theme="dark"] .pj-file-preview-item {
    background: #252840;
    border-color: #333660;
    color: #ccc;
}

[data-theme="dark"] .pj-file-preview-item:hover {
    border-color: #444;
}

[data-theme="dark"] .pj-file-preview-item small {
    color: #777;
}

/* ═══ 프로젝트 관리 페이지 전체 다크모드 ═══ */

/* 알림 배너 */
[data-theme="dark"] .pj-notif-bar {
    background: linear-gradient(135deg, #2a1520, #1e1530);
    border-color: #3a2535;
}

/* 카드 보기 */
[data-theme="dark"] .pj-card {
    background: #1a1d2e;
    border-color: #2a2d42;
}

[data-theme="dark"] .pj-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .pj-card-title {
    color: #eee;
}

[data-theme="dark"] .pj-cat-tag {
    background: #252840;
    color: #aaa;
}

[data-theme="dark"] .pj-dday {
    background: #252840;
    color: #bbb;
}

[data-theme="dark"] .pj-dday.urgent {
    background: #3a1520;
    color: #ef5350;
}

[data-theme="dark"] .pj-progress-track {
    background: #252840;
}

[data-theme="dark"] .pj-progress-label {
    color: #777;
}

[data-theme="dark"] .pj-progress-pct {
    color: #bbb;
}

[data-theme="dark"] .pj-card-info {
    color: #888;
}

[data-theme="dark"] .pj-card-expanded {
    border-top-color: #2a2d42;
}

[data-theme="dark"] .pj-card-bottom {
    border-top-color: #2a2d42;
}

[data-theme="dark"] .pj-action-btn {
    background: #252840;
    border-color: #333660;
    color: #aaa;
}

[data-theme="dark"] .pj-action-btn:hover {
    background: #333660;
}

[data-theme="dark"] .pj-act-start {
    color: #64b5f6;
    border-color: #1a2a40;
}

[data-theme="dark"] .pj-act-start:hover {
    background: #1a2a40;
}

[data-theme="dark"] .pj-act-done {
    color: #66bb6a;
    border-color: #1a3020;
}

[data-theme="dark"] .pj-act-done:hover {
    background: #1a3020;
}

[data-theme="dark"] .pj-act-hold {
    color: #ce93d8;
    border-color: #2a1a3a;
}

[data-theme="dark"] .pj-act-hold:hover {
    background: #2a1a3a;
}

[data-theme="dark"] .pj-card-actions button {
    color: #888;
}

[data-theme="dark"] .pj-card-actions button:hover {
    background: #252840;
    color: #ddd;
}

/* 리스트 보기 */
[data-theme="dark"] .pj-list-view {
    background: #1a1d2e;
    border-color: #2a2d42;
}

[data-theme="dark"] .pj-list-header {
    background: #141620;
    border-bottom-color: #2a2d42;
    color: #777;
}

[data-theme="dark"] .pj-list-row {
    border-bottom-color: #252840;
}

[data-theme="dark"] .pj-list-row:hover {
    background: #1e2136;
}

[data-theme="dark"] .pj-lr-title {
    color: #ddd;
}

[data-theme="dark"] .pj-lr-client {
    color: #aaa;
}

/* 타임라인 보기 */
[data-theme="dark"] .pj-timeline-view {
    background: #1a1d2e;
    border-color: #2a2d42;
}

[data-theme="dark"] .pj-timeline-header {
    border-bottom-color: #2a2d42;
}

[data-theme="dark"] .pj-tl-label-col {
    color: #777;
}

[data-theme="dark"] .pj-tl-month {
    color: #666;
}

[data-theme="dark"] .pj-tl-row {
    border-bottom-color: #252840;
}

[data-theme="dark"] .pj-tl-row .pj-tl-label-col strong {
    color: #ddd;
}

[data-theme="dark"] .pj-tl-row .pj-tl-label-col small {
    color: #888;
}

/* 툴바 */
[data-theme="dark"] .pj-view-toggle {
    border-color: #333660;
}

[data-theme="dark"] .pj-vt-btn {
    background: #1a1d2e;
    color: #888;
}

[data-theme="dark"] .pj-vt-btn.active {
    background: #ff6b6b;
    color: white;
}

[data-theme="dark"] .pj-vt-btn:hover:not(.active) {
    background: #252840;
}

[data-theme="dark"] .pj-clear-filter {
    background: #252840;
    border-color: #333660;
    color: #aaa;
}

[data-theme="dark"] .pj-result-count {
    color: #888;
}

/* 리포트 뷰 */
[data-theme="dark"] .pj-report-view {
    color: #ddd;
}

/* Rich Editor 다크모드 추가 */
[data-theme="dark"] .rich-editor-wrapper {
    background: #1a1d2e;
    border-color: #2a2d40;
}

[data-theme="dark"] .rich-editor-wrapper:hover {
    border-color: #3a3d50;
}

[data-theme="dark"] .rich-editor-wrapper.focused {
    border-color: #ff6b6b;
    box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.15);
}

[data-theme="dark"] .rich-editor-content:empty::before {
    color: #666;
}

[data-theme="dark"] .rich-editor-content h1,
[data-theme="dark"] .rich-editor-content h2,
[data-theme="dark"] .rich-editor-content h3 {
    color: #e8e8e8;
}

[data-theme="dark"] .rich-editor-content blockquote {
    background: #1e2030;
    color: #aaa;
    border-left-color: #ff6b6b;
}

[data-theme="dark"] .rich-editor-content mark {
    background-color: #4a3f00;
    color: #f0e68c;
}

[data-theme="dark"] .editor-bottom-bar {
    border-top-color: #2a2d40;
}

[data-theme="dark"] .editor-add-image {
    background: #1e2030;
    border-color: #2a2d40;
    color: #aaa;
}

[data-theme="dark"] .editor-add-image:hover {
    background: #252840;
    border-color: #3a3d50;
    color: #ddd;
}

[data-theme="dark"] .editor-hint {
    color: #666;
}

[data-theme="dark"] .editor-uploading {
    background: rgba(20, 22, 32, 0.9);
    color: #ccc;
}

[data-theme="dark"] .upload-spinner {
    border-color: #333;
    border-top-color: #ff6b6b;
}

/* 모바일 탑바 */
[data-theme="dark"] .admin-mobile-topbar {
    background: #141620;
    border-color: #1e2030;
}

[data-theme="dark"] .mobile-topbar-title {
    color: #e0e0e0;
}

[data-theme="dark"] .mobile-menu-btn {
    color: #ccc;
}

/* 빈 상태 */
[data-theme="dark"] .empty-state .empty-content h3 {
    color: #ccc;
}

[data-theme="dark"] .empty-state .empty-content p {
    color: #888;
}

/* 대시보드 텍스트 다크 모드 보완 */
[data-theme="dark"] .dash-btn-new {
    background: rgba(230, 57, 70, 0.15);
    color: #ff6b6b;
    border-color: rgba(230, 57, 70, 0.3);
}

[data-theme="dark"] .dash-project-title {
    color: #e0e0e0;
}

[data-theme="dark"] .dash-project-meta,
[data-theme="dark"] .dash-project-meta span {
    color: #999;
}

[data-theme="dark"] .dash-project-item {
    border-color: #252840;
}

[data-theme="dark"] .dash-project-item:hover {
    background: #1e2030;
}

[data-theme="dark"] .dash-project-badge {
    background: #252840;
    color: #ccc;
}

[data-theme="dark"] .dash-project-badge.status-progress {
    background: rgba(166, 14, 22, 0.2);
    color: #ff6b6b;
}

[data-theme="dark"] .dash-project-badge.status-done {
    background: rgba(46, 125, 50, 0.2);
    color: #66bb6a;
}

[data-theme="dark"] .dash-project-badge.status-wait {
    background: rgba(180, 83, 9, 0.2);
    color: #ffb74d;
}

[data-theme="dark"] .dash-inquiry-item {
    background: #252840;
    border-left-color: #e63946;
}

[data-theme="dark"] .dash-inquiry-item:hover {
    background: #1e2030;
}

[data-theme="dark"] .dash-inquiry-name {
    color: #e0e0e0;
}

[data-theme="dark"] .dash-inquiry-msg {
    color: #999;
}

[data-theme="dark"] .dash-inquiry-date {
    color: #666;
}

[data-theme="dark"] .dash-card-link {
    color: #ff6b6b;
}

[data-theme="dark"] .dash-card-header {
    border-color: #252840;
}

[data-theme="dark"] .dash-card-header h3 {
    color: #e0e0e0;
}

[data-theme="dark"] .dash-donut-value {
    color: #e0e0e0;
}

[data-theme="dark"] .dash-donut-label {
    color: #999;
}

[data-theme="dark"] .dash-donut-inner {
    background: #1a1d2e;
}

[data-theme="dark"] .dash-legend-item {
    color: #ccc;
}

[data-theme="dark"] .dash-welcome-card {
    background: linear-gradient(135deg, #1a1020, #2a1525) !important;
}

[data-theme="dark"] .dash-welcome-content h3 {
    color: #fff;
}

[data-theme="dark"] .dash-welcome-content p {
    color: #ccc;
}

[data-theme="dark"] .dash-welcome-time {
    color: #999;
}

[data-theme="dark"] .dash-welcome-btn {
    background: rgba(255, 255, 255, 0.1);
    color: #e0e0e0;
    border-color: rgba(255, 255, 255, 0.2);
}

[data-theme="dark"] .dash-welcome-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

[data-theme="dark"] .dash-empty p {
    color: #888;
}

[data-theme="dark"] .dash-quick-label {
    color: #ccc;
}

[data-theme="dark"] .dash-stat-arrow {
    color: #999;
}

/* 로그인 페이지 다크 모드 */
[data-theme="dark"] .login-container {
    background: linear-gradient(135deg, #0a0a0a 0%, #1a0205 100%);
}

[data-theme="dark"] .login-box {
    background: #1a1a1a;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}

[data-theme="dark"] .login-box h2 {
    color: #ff6b6b;
}

[data-theme="dark"] .login-subtitle {
    color: #999;
}

[data-theme="dark"] .login-form .form-group label {
    color: #e0e0e0;
}

[data-theme="dark"] .login-form .form-group input {
    background: #252525;
    border-color: #333;
    color: #e0e0e0;
}

[data-theme="dark"] .login-form .form-group input::placeholder {
    color: #666;
}

[data-theme="dark"] .login-form .form-group input:focus {
    border-color: #ff6b6b;
    box-shadow: 0 0 0 3px rgba(230, 57, 70, 0.15);
}

[data-theme="dark"] .login-footer a {
    color: #999;
}

[data-theme="dark"] .login-footer a:hover {
    color: #ff6b6b;
}

/* ==============================================
   관리자 패널 전체 다크 모드 — 종합 보완
   ============================================== */

/* 관리자 전체 배경 */
[data-theme="dark"] .admin-body {
    background: #0a0c14;
}

/* 관리자 콘텐츠 영역 */
[data-theme="dark"] .admin-content {
    color: #e0e0e0;
}

/* 모든 관리자 콘텐츠 내부 제목 */
[data-theme="dark"] .admin-content h1,
[data-theme="dark"] .admin-content h2,
[data-theme="dark"] .admin-content h3,
[data-theme="dark"] .admin-content h4 {
    color: #e0e0e0;
}

[data-theme="dark"] .admin-content p {
    color: #999;
}

/* CMS 섹션/카드 (사이트 콘텐츠) */
[data-theme="dark"] .cms-section {
    background: #1a1d2e;
    border-color: #252840;
}

[data-theme="dark"] .cms-section h3 {
    color: #e0e0e0;
}

[data-theme="dark"] .cms-card {
    background: #141620;
    border-color: #252840;
}

[data-theme="dark"] .cms-card:hover {
    border-color: #333;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .cms-card-header {
    border-color: #252840;
}

[data-theme="dark"] .cms-card-header h4,
[data-theme="dark"] .cms-card-number {
    color: #e0e0e0;
}

[data-theme="dark"] .cms-card p {
    color: #888;
}

/* 관리자 필터 바 배경 */
[data-theme="dark"] .admin-filter-bar {
    background: #1a1d2e;
    border-color: #252840;
}

[data-theme="dark"] .admin-filter-bar label {
    color: #999;
}

/* 페이지네이션 */
[data-theme="dark"] .pagination {
    background: transparent;
}

[data-theme="dark"] .pagination button,
[data-theme="dark"] .pagination a {
    background: #1a1d2e;
    border-color: #252840;
    color: #ccc;
}

[data-theme="dark"] .pagination button:hover,
[data-theme="dark"] .pagination a:hover {
    background: #252840;
    color: #fff;
}

[data-theme="dark"] .pagination button.active,
[data-theme="dark"] .pagination a.active {
    background: #e63946;
    border-color: #e63946;
    color: #fff;
}

[data-theme="dark"] .pagination span {
    color: #999;
}

/* 폼 패널 전반 */
[data-theme="dark"] .form-panel,
[data-theme="dark"] .edit-panel,
[data-theme="dark"] .add-panel {
    background: #1a1d2e;
    border-color: #252840;
}

[data-theme="dark"] .form-panel h3,
[data-theme="dark"] .edit-panel h3,
[data-theme="dark"] .add-panel h3 {
    color: #e0e0e0;
}

/* 모든 관리자 영역 input/select/textarea */
[data-theme="dark"] .admin-content input,
[data-theme="dark"] .admin-content select,
[data-theme="dark"] .admin-content textarea {
    background: #141620;
    border-color: #333;
    color: #e0e0e0;
}

[data-theme="dark"] .admin-content input::placeholder,
[data-theme="dark"] .admin-content textarea::placeholder {
    color: #555;
}

[data-theme="dark"] .admin-content input:focus,
[data-theme="dark"] .admin-content select:focus,
[data-theme="dark"] .admin-content textarea:focus {
    border-color: #e63946;
    box-shadow: 0 0 0 3px rgba(230, 57, 70, 0.1);
}

[data-theme="dark"] .admin-content select option {
    background: #141620;
    color: #e0e0e0;
}

[data-theme="dark"] .admin-content label {
    color: #ccc;
}

/* 액션 버튼 그룹 */
[data-theme="dark"] .btn-group .btn,
[data-theme="dark"] .action-buttons .btn {
    border-color: #333;
}

/* 태그 입력 */
[data-theme="dark"] .tag-input-container {
    background: #141620;
    border-color: #333;
}

[data-theme="dark"] .tag-badge,
[data-theme="dark"] .tag-item {
    background: #252840;
    color: #ccc;
    border-color: #333;
}

/* 이미지 업로드 영역 */
[data-theme="dark"] .image-upload-area,
[data-theme="dark"] .upload-area {
    background: #141620;
    border-color: #333;
    color: #888;
}

[data-theme="dark"] .image-upload-area:hover,
[data-theme="dark"] .upload-area:hover {
    border-color: #e63946;
    background: #1a1d2e;
}

/* 블로그 관리 */
[data-theme="dark"] .blog-item,
[data-theme="dark"] .blog-list-item {
    background: #1a1d2e;
    border-color: #252840;
}

[data-theme="dark"] .blog-item:hover,
[data-theme="dark"] .blog-list-item:hover {
    background: #1e2030;
    border-color: #333;
}

[data-theme="dark"] .blog-item h4,
[data-theme="dark"] .blog-list-item h4 {
    color: #e0e0e0;
}

[data-theme="dark"] .blog-item p,
[data-theme="dark"] .blog-list-item p {
    color: #888;
}

[data-theme="dark"] .blog-item .meta,
[data-theme="dark"] .blog-list-item .meta {
    color: #666;
}

/* 포트폴리오 관리 */
[data-theme="dark"] .portfolio-item,
[data-theme="dark"] .portfolio-list-item {
    background: #1a1d2e;
    border-color: #252840;
}

[data-theme="dark"] .portfolio-item:hover,
[data-theme="dark"] .portfolio-list-item:hover {
    background: #1e2030;
    border-color: #333;
}

[data-theme="dark"] .portfolio-item h4,
[data-theme="dark"] .portfolio-list-item h4 {
    color: #e0e0e0;
}

/* 프로젝트 관리 */
[data-theme="dark"] .project-item,
[data-theme="dark"] .project-card {
    background: #1a1d2e;
    border-color: #252840;
}

[data-theme="dark"] .project-item:hover,
[data-theme="dark"] .project-card:hover {
    background: #1e2030;
    border-color: #333;
}

[data-theme="dark"] .project-item h4,
[data-theme="dark"] .project-card h4 {
    color: #e0e0e0;
}

[data-theme="dark"] .project-item .status,
[data-theme="dark"] .project-card .status {
    opacity: 0.85;
}

/* 문의 관리 */
[data-theme="dark"] .inquiry-item,
[data-theme="dark"] .inquiry-card {
    background: #1a1d2e;
    border-color: #252840;
}

[data-theme="dark"] .inquiry-item:hover,
[data-theme="dark"] .inquiry-card:hover {
    background: #1e2030;
    border-color: #333;
}

[data-theme="dark"] .inquiry-item h4,
[data-theme="dark"] .inquiry-card h4,
[data-theme="dark"] .inquiry-item .name {
    color: #e0e0e0;
}

[data-theme="dark"] .inquiry-item p,
[data-theme="dark"] .inquiry-card p,
[data-theme="dark"] .inquiry-item .message {
    color: #888;
}

[data-theme="dark"] .inquiry-item .date,
[data-theme="dark"] .inquiry-detail-date {
    color: #666;
}

/* 프로그램 관리 */
[data-theme="dark"] .program-item,
[data-theme="dark"] .program-card-admin {
    background: #1a1d2e;
    border-color: #252840;
}

[data-theme="dark"] .program-item:hover,
[data-theme="dark"] .program-card-admin:hover {
    background: #1e2030;
    border-color: #333;
}

[data-theme="dark"] .program-item h4 {
    color: #e0e0e0;
}

/* 슈퍼 관리자 - 유저 카드 */
[data-theme="dark"] .user-card,
[data-theme="dark"] .user-item {
    background: #1a1d2e;
    border-color: #252840;
}

[data-theme="dark"] .user-card:hover,
[data-theme="dark"] .user-item:hover {
    background: #1e2030;
    border-color: #333;
}

[data-theme="dark"] .user-card h4,
[data-theme="dark"] .user-item h4 {
    color: #e0e0e0;
}

[data-theme="dark"] .user-card p,
[data-theme="dark"] .user-item p {
    color: #888;
}

/* 활동 로그 */
[data-theme="dark"] .activity-log,
[data-theme="dark"] .log-item {
    background: #1a1d2e;
    border-color: #252840;
    color: #ccc;
}

[data-theme="dark"] .log-item:hover {
    background: #1e2030;
}

/* 상태 표시 */
[data-theme="dark"] .status-dot {
    opacity: 0.9;
}

/* 콘텐츠 테이블의 행 줄무늬 */
[data-theme="dark"] .content-table tbody tr:nth-child(even) {
    background: #141620;
}

/* 보더/구분선 */
[data-theme="dark"] .admin-content hr {
    border-color: #252840;
}

/* 알림/노트 */
[data-theme="dark"] .admin-note,
[data-theme="dark"] .info-box,
[data-theme="dark"] .notice-box {
    background: rgba(26, 115, 232, 0.08);
    border-color: rgba(26, 115, 232, 0.2);
    color: #7eb3f0;
}

/* 탭 네비게이션 */
[data-theme="dark"] .tab-nav,
[data-theme="dark"] .tabs-header {
    border-color: #252840;
}

[data-theme="dark"] .tab-btn,
[data-theme="dark"] .tab-item {
    color: #999;
    border-color: transparent;
}

[data-theme="dark"] .tab-btn:hover,
[data-theme="dark"] .tab-item:hover {
    color: #e0e0e0;
    background: #1a1d2e;
}

[data-theme="dark"] .tab-btn.active,
[data-theme="dark"] .tab-item.active {
    color: #ff6b6b;
    border-color: #e63946;
    background: rgba(230, 57, 70, 0.08);
}

/* 콘텐츠 카드 배경 전체 catch-all */
[data-theme="dark"] .admin-content>div {
    color: #e0e0e0;
}

/* 관리자 버튼의 텍스트 색상 */
[data-theme="dark"] .admin-content .btn-outline,
[data-theme="dark"] .admin-content .btn-ghost {
    color: #ccc;
    border-color: #333;
}

[data-theme="dark"] .admin-content .btn-outline:hover,
[data-theme="dark"] .admin-content .btn-ghost:hover {
    background: #1e2030;
    color: #fff;
}

/* 삭제 확인 다이얼로그 */
[data-theme="dark"] .confirm-dialog,
[data-theme="dark"] .alert-dialog {
    background: #1a1d2e;
    border-color: #252840;
    color: #e0e0e0;
}

/* 인라인 스타일 오버라이드: white bg 강제 전환 */
[data-theme="dark"] .admin-content [style*="background: white"],
[data-theme="dark"] .admin-content [style*="background:#fff"],
[data-theme="dark"] .admin-content [style*="background: #fff"] {
    background: #1a1d2e !important;
}

/* 체크박스/라디오 레이블 */
[data-theme="dark"] .admin-content .checkbox-label,
[data-theme="dark"] .admin-content .radio-label {
    color: #ccc;
}

/* 카운트/숫자 텍스트 */
[data-theme="dark"] .admin-content .count,
[data-theme="dark"] .admin-content .total-count {
    color: #999;
}

/* 드롭다운 메뉴 */
[data-theme="dark"] .dropdown-menu,
[data-theme="dark"] .context-menu {
    background: #1a1d2e;
    border-color: #252840;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .dropdown-item,
[data-theme="dark"] .context-menu-item {
    color: #ccc;
}

[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .context-menu-item:hover {
    background: #252840;
    color: #fff;
}

/* ==============================================
   관리자 페이지별 심층 다크 모드 보완
   ============================================== */

/* ── 프로젝트 관리 ── */
[data-theme="dark"] .pj-overview {
    background: #1a1d2e;
    border-color: #252840;
}

[data-theme="dark"] .pj-big-num {
    color: #e0e0e0;
}

[data-theme="dark"] .pj-big-label {
    color: #999;
}

[data-theme="dark"] .pj-ring-num {
    color: #e0e0e0;
}

[data-theme="dark"] .pj-ring-label {
    color: #999;
}

[data-theme="dark"] .pj-ring-svg path:first-child {
    stroke: #252840;
}

[data-theme="dark"] .pj-pill {
    background: #1a1d2e;
    border-color: #252840;
    color: #ccc;
}

[data-theme="dark"] .pj-pill:hover {
    background: #252840;
    color: #fff;
}

[data-theme="dark"] .pj-pill.active {
    background: #252840;
    border-color: #e63946;
    color: #e0e0e0;
}

[data-theme="dark"] .pj-pill-count {
    background: #252840;
    color: #999;
}

[data-theme="dark"] .pj-pill.active .pj-pill-count {
    background: rgba(230, 57, 70, 0.15);
    color: #ff6b6b;
}

[data-theme="dark"] .pj-overdue-alert {
    background: rgba(198, 40, 40, 0.1);
    border-color: #c62828;
    color: #ef9a9a;
}

[data-theme="dark"] .pj-toolbar {
    background: #141620;
    border-color: #252840;
}

[data-theme="dark"] .pj-result-count {
    color: #999;
}

[data-theme="dark"] .pj-clear-filter {
    color: #ff6b6b;
}

[data-theme="dark"] .pj-vt-btn {
    background: #1a1d2e;
    border-color: #252840;
    color: #999;
}

[data-theme="dark"] .pj-vt-btn.active {
    background: #252840;
    color: #e0e0e0;
}

[data-theme="dark"] .pj-add-btn {
    background: #e63946;
    color: #fff;
}

[data-theme="dark"] .pj-card {
    background: #1a1d2e;
    border-color: #252840;
}

[data-theme="dark"] .pj-card:hover {
    border-color: #333;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .pj-card-top {
    border-color: #252840;
}

[data-theme="dark"] .pj-card-actions button {
    color: #999;
    background: transparent;
}

[data-theme="dark"] .pj-card-actions button:hover {
    color: #e0e0e0;
    background: #252840;
}

[data-theme="dark"] .pj-card-title {
    color: #e0e0e0;
}

[data-theme="dark"] .pj-cat-tag {
    background: #252840;
    color: #ccc;
}

[data-theme="dark"] .pj-progress-section {
    color: #ccc;
}

[data-theme="dark"] .pj-progress-label span {
    color: #999;
}

[data-theme="dark"] .pj-progress-pct {
    color: #e0e0e0;
}

[data-theme="dark"] .pj-progress-track {
    background: #252840;
}

[data-theme="dark"] .pj-card-info span {
    color: #888;
}

[data-theme="dark"] .pj-card-expanded {
    background: #141620;
    border-color: #252840;
}

[data-theme="dark"] .pj-detail-row {
    border-color: #252840;
    color: #ccc;
}

[data-theme="dark"] .pj-detail-label {
    color: #888;
}

[data-theme="dark"] .pj-detail-desc {
    color: #ccc;
}

[data-theme="dark"] .pj-detail-time {
    color: #666;
}

[data-theme="dark"] .pj-quick-progress {
    border-color: #252840;
}

[data-theme="dark"] .pj-qp-btn {
    background: #1a1d2e;
    border-color: #252840;
    color: #999;
}

[data-theme="dark"] .pj-qp-btn.active {
    background: #252840;
    color: #e0e0e0;
    border-color: #e63946;
}

[data-theme="dark"] .pj-card-bottom {
    border-color: #252840;
}

[data-theme="dark"] .pj-action-btn {
    background: #252840;
    border-color: #333;
    color: #ccc;
}

[data-theme="dark"] .pj-action-btn:hover {
    background: #333;
    color: #fff;
}

/* 리스트 뷰 */
[data-theme="dark"] .pj-list-view {
    color: #ccc;
}

[data-theme="dark"] .pj-list-header {
    background: #141620;
    border-color: #252840;
    color: #999;
}

[data-theme="dark"] .pj-list-row {
    background: #1a1d2e;
    border-color: #252840;
}

[data-theme="dark"] .pj-list-row:hover {
    background: #1e2030;
}

[data-theme="dark"] .pj-lr-title strong {
    color: #e0e0e0;
}

[data-theme="dark"] .pj-lr-title small {
    color: #888;
}

[data-theme="dark"] .pj-lr-client {
    color: #999;
}

[data-theme="dark"] .pj-mini-bar {
    background: #252840;
}

[data-theme="dark"] .pj-lr-due {
    color: #999;
}

[data-theme="dark"] .pj-lr-actions button {
    color: #999;
    background: transparent;
}

[data-theme="dark"] .pj-lr-actions button:hover {
    color: #e0e0e0;
}

/* 프로젝트 빈 상태 */
[data-theme="dark"] .pj-empty {
    background: #1a1d2e;
    border-color: #2e3350;
    color: #ccc;
}

[data-theme="dark"] .pj-empty h3 {
    color: #e0e0e0;
}

[data-theme="dark"] .pj-empty p {
    color: #888;
}

[data-theme="dark"] .pj-loading {
    color: #999;
}

/* 프로젝트 상태 표시 인라인 스타일 다크 보완 */
[data-theme="dark"] .pj-card-status {
    opacity: 0.85;
}

/* ── 사이트 콘텐츠 ── */
[data-theme="dark"] .cms-tabs {
    background: #1a1d2e;
    border-color: #252840;
}

[data-theme="dark"] .cms-tab {
    color: #999;
    border-color: transparent;
}

[data-theme="dark"] .cms-tab:hover {
    color: #e0e0e0;
    background: #252840;
}

[data-theme="dark"] .cms-tab.active {
    color: #ff6b6b;
    background: rgba(230, 57, 70, 0.08);
    border-color: #e63946;
}

[data-theme="dark"] .cms-content {
    background: transparent;
}

[data-theme="dark"] .cms-desc {
    color: #888;
}

[data-theme="dark"] .cms-form-grid {
    color: #ccc;
}

[data-theme="dark"] .cms-save-bar {
    background: #141620;
    border-color: #252840;
}

/* ── 슈퍼 관리자 ── */
[data-theme="dark"] .info-banner {
    background: #1a1d2e;
    border-color: #252840;
}

[data-theme="dark"] .info-banner .banner-content h3 {
    color: #e0e0e0;
}

[data-theme="dark"] .info-banner .banner-content p {
    color: #888;
}

[data-theme="dark"] .permissions-grid {
    gap: 0.5rem;
}

[data-theme="dark"] .perm-checkbox {
    background: #141620;
    border-color: #252840;
    color: #ccc;
}

[data-theme="dark"] .perm-checkbox:hover {
    background: #1e2030;
    border-color: #333;
}

[data-theme="dark"] .perm-checkbox.checked {
    background: rgba(230, 57, 70, 0.08);
    border-color: #e63946;
    color: #e0e0e0;
}

[data-theme="dark"] .perm-tag {
    background: #252840;
    color: #ccc;
    border-color: #333;
}

[data-theme="dark"] .perm-tag.perm-all {
    background: rgba(230, 57, 70, 0.15);
    color: #ff6b6b;
}

[data-theme="dark"] .perm-tag.perm-position {
    background: rgba(21, 101, 192, 0.12);
    color: #64b5f6;
}

/* ── 문의 상세 ── */
[data-theme="dark"] .inquiry-detail {
    color: #ccc;
}

[data-theme="dark"] .detail-row {
    border-color: #252840;
    color: #ccc;
}

[data-theme="dark"] .detail-label {
    color: #888;
}

[data-theme="dark"] .detail-message {
    background: #141620;
    border-color: #252840;
}

[data-theme="dark"] .detail-message p {
    color: #ccc;
}

/* ── 관리자 공통 보완 ── */
[data-theme="dark"] .admin-toolbar {
    background: #1a1d2e;
    border-color: #252840;
}

[data-theme="dark"] .modal-body {
    background: #1a1d2e;
    color: #ccc;
}

/* 관리자 테이블 내 strong 태그 */
[data-theme="dark"] .content-table tbody td strong {
    color: #e0e0e0;
}

/* btn-icon (작은 아이콘 버튼) */
[data-theme="dark"] .btn-icon {
    background: transparent;
    border-color: transparent;
}

[data-theme="dark"] .btn-icon:hover {
    background: #252840;
}

/* ═══════════════════════════════════════
   사이드바 알림 버튼 & 패널
   ═══════════════════════════════════════ */

/* footer 영역 알림 아이콘 버튼 */
.sidebar-notif-icon-btn {
    position: relative;
    min-width: 80px;
    height: 44px;
    flex-shrink: 0;
    background: #f5f5f5;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    font-size: 22px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 14px;
    transition: all 0.25s ease;
}

.sidebar-notif-icon-btn:hover {
    background: #fff3e0;
    border-color: #ffb74d;
    transform: scale(1.08);
}

.sidebar-notif-badge {
    background: #e53935;
    color: white;
    font-size: 12px;
    font-weight: 700;
    min-width: 22px;
    height: 22px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    line-height: 1;
}

@keyframes notifPulse {

    0%,
    100% {
        transform: translateY(-50%) scale(1);
    }

    50% {
        transform: translateY(-50%) scale(1.1);
    }
}

/* 알림 패널 */
.sidebar-notif-panel {
    position: fixed;
    left: var(--admin-sidebar-width, 280px);
    top: 0;
    bottom: 0;
    width: 460px;
    max-width: calc(100vw - 60px);
    background: #fff;
    box-shadow: 4px 0 30px rgba(0, 0, 0, 0.12);
    z-index: 1010;
    display: flex;
    flex-direction: column;
    animation: slideNotifPanel 0.25s ease-out;
}

@keyframes slideNotifPanel {
    from {
        transform: translateX(-20px);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.sidebar-notif-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    border-bottom: 1px solid #e8e8e8;
    background: linear-gradient(135deg, #fafafa, #fff);
}

.sidebar-notif-panel-header strong {
    font-size: 1.05rem;
    color: #1a1a1a;
}

.sidebar-notif-panel-header button {
    background: #f0f0f0;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.sidebar-notif-panel-header button:hover {
    background: #e0e0e0;
}

.sidebar-notif-panel-body {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
}

.sidebar-notif-panel-body::-webkit-scrollbar {
    width: 5px;
}

.sidebar-notif-panel-body::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 3px;
}

/* 빈 알림 */
.sidebar-notif-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: #999;
}

.sidebar-notif-empty span {
    font-size: 48px;
    margin-bottom: 12px;
    opacity: 0.5;
}

.sidebar-notif-empty p {
    font-size: 14px;
    margin: 0;
}

/* 알림 아이템 */
.sidebar-notif-item {
    display: flex;
    gap: 12px;
    padding: 14px 20px;
    border-bottom: 1px solid #f0f0f0;
    transition: background 0.2s;
    cursor: default;
}

.sidebar-notif-item:hover {
    background: #fafafa;
}

.sidebar-notif-item.unread {
    background: #fffde7;
    border-left: 3px solid #ffc107;
}

.sidebar-notif-item.unread:hover {
    background: #fff9c4;
}

.sidebar-notif-item.read {
    opacity: 0.5;
}

.sidebar-notif-item.read:hover {
    opacity: 0.75;
}

.sidebar-notif-item-dismiss {
    position: absolute;
    top: 8px;
    right: 8px;
    background: none;
    border: none;
    color: #999;
    font-size: 0.7rem;
    cursor: pointer;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    padding: 0;
}

.sidebar-notif-item-dismiss:hover {
    background: rgba(0, 0, 0, 0.1);
    color: #333;
}

.sidebar-notif-read-all-btn {
    padding: 0.2rem 0.5rem;
    background: none;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 0.68rem;
    color: #777;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}

.sidebar-notif-read-all-btn:hover {
    background: #f0f0f0;
    color: #333;
}

.sidebar-notif-item {
    position: relative;
}

.sidebar-notif-item-icon {
    font-size: 24px;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f5f5;
    border-radius: 10px;
}

.sidebar-notif-item-body {
    flex: 1;
    min-width: 0;
}

.sidebar-notif-item-type {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    color: #888;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}

.sidebar-notif-item-title {
    font-size: 14px;
    font-weight: 600;
    color: #1a1a1a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 2px;
}

.sidebar-notif-item-meta {
    font-size: 12px;
    color: #888;
}

.sidebar-notif-item-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 6px;
    gap: 8px;
}

.sidebar-notif-item-time {
    font-size: 11px;
    color: #aaa;
}

.sidebar-notif-item-status {
    font-size: 11px;
    font-weight: 500;
    padding: 2px 6px;
    border-radius: 4px;
}

.sidebar-notif-item-status.sent {
    color: #2e7d32;
    background: #e8f5e9;
}

.sidebar-notif-item-status.failed {
    color: #c62828;
    background: #ffebee;
}

/* ═══════════════════════════════════════
   오버레이
   ═══════════════════════════════════════ */
.sidebar-notif-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1000;
    animation: overlayFade 0.2s ease;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

@keyframes overlayFade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* ═══════════════════════════════════════
   알림 중앙 팝업
   ═══════════════════════════════════════ */
.notif-popup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 2000;
    animation: overlayFade 0.2s ease;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.notif-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 520px;
    max-width: calc(100vw - 32px);
    max-height: 75vh;
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.2), 0 10px 30px rgba(0, 0, 0, 0.12);
    z-index: 2001;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: notifPopupIn 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes notifPopupIn {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.92);
    }

    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

/* 헤더 */
.notif-popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px 16px;
    border-bottom: 1px solid #f0f0f0;
    background: linear-gradient(135deg, #fafbff, #f5f6fa);
}

.notif-popup-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.notif-popup-icon {
    font-size: 22px;
}

.notif-popup-header-left strong {
    font-size: 1.15rem;
    font-weight: 700;
    color: #1a1a2e;
    letter-spacing: -0.3px;
}

.notif-popup-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 8px;
    background: linear-gradient(135deg, #e53935, #d32f2f);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    border-radius: 12px;
    line-height: 1;
    box-shadow: 0 2px 8px rgba(229, 57, 53, 0.3);
}

.notif-popup-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.notif-popup-readall-btn {
    padding: 7px 14px;
    background: #f0f5ff;
    border: 1px solid #d6e4ff;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #1565c0;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.notif-popup-readall-btn:hover {
    background: #d6e4ff;
    border-color: #a8c8ff;
    transform: translateY(-1px);
}

.notif-popup-delete-read-btn {
    padding: 7px 14px;
    background: #fff5f5;
    border: 1px solid #ffd6d6;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #c62828;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.notif-popup-delete-read-btn:hover {
    background: #ffebee;
    border-color: #ef9a9a;
    transform: translateY(-1px);
}

.notif-popup-close-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f5f5;
    border: none;
    border-radius: 10px;
    font-size: 16px;
    color: #666;
    cursor: pointer;
    transition: all 0.2s;
}

.notif-popup-close-btn:hover {
    background: #e8e8e8;
    color: #333;
    transform: rotate(90deg);
}

/* 바디 */
.notif-popup-body {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
}

.notif-popup-body::-webkit-scrollbar {
    width: 5px;
}

.notif-popup-body::-webkit-scrollbar-thumb {
    background: #ddd;
    border-radius: 3px;
}

.notif-popup-body::-webkit-scrollbar-thumb:hover {
    background: #ccc;
}

/* 빈 상태 */
.notif-popup-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 24px;
    text-align: center;
}

.notif-popup-empty-icon {
    font-size: 52px;
    margin-bottom: 16px;
    opacity: 0.6;
}

.notif-popup-empty p {
    font-size: 15px;
    font-weight: 600;
    color: #777;
    margin: 0 0 6px;
}

.notif-popup-empty small {
    font-size: 13px;
    color: #aaa;
}

/* 알림 아이템 */
.notif-popup-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 24px;
    border-bottom: 1px solid #f5f5f5;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.notif-popup-item:last-child {
    border-bottom: none;
}

.notif-popup-item:hover {
    background: #f8f9fc;
}

.notif-popup-item.unread {
    background: #fffde7;
    border-left: 4px solid #ffc107;
    padding-left: 20px;
}

.notif-popup-item.unread:hover {
    background: #fff9c4;
}

.notif-popup-item.read {
    opacity: 0.5;
}

.notif-popup-item.read:hover {
    opacity: 0.75;
}

/* 아이콘 */
.notif-popup-item-icon {
    font-size: 22px;
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f0f2f5;
    border-radius: 12px;
}

.notif-popup-item.unread .notif-popup-item-icon {
    background: #fff3e0;
}

/* 바디 */
.notif-popup-item-body {
    flex: 1;
    min-width: 0;
}

.notif-popup-item-type {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    color: #888;
    letter-spacing: 0.5px;
    margin-bottom: 3px;
}

.notif-popup-item-title {
    font-size: 14px;
    font-weight: 600;
    color: #1a1a2e;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 4px;
}

.notif-popup-item-detail {
    font-size: 12px;
    color: #888;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 2px;
}

.notif-popup-item-footer {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
}

.notif-popup-item-time {
    font-size: 12px;
    color: #aaa;
}

.notif-popup-item-status {
    font-size: 11px;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 6px;
}

.notif-popup-item-status.sent {
    color: #2e7d32;
    background: #e8f5e9;
}

.notif-popup-item-status.failed {
    color: #c62828;
    background: #ffebee;
}

/* 삭제 버튼 */
.notif-popup-item-delete {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 10px;
    font-size: 20px;
    cursor: pointer;
    opacity: 0;
    transition: all 0.2s;
    align-self: center;
}

.notif-popup-item:hover .notif-popup-item-delete {
    opacity: 0.6;
}

.notif-popup-item-delete:hover {
    opacity: 1 !important;
    background: #ffebee;
    transform: scale(1.15);
}

/* 푸터 */
.notif-popup-footer {
    padding: 12px 24px;
    border-top: 1px solid #f0f0f0;
    text-align: center;
    font-size: 12px;
    color: #999;
    background: #fafbfc;
    border-radius: 0 0 20px 20px;
}

/* ═══════════════════════════════════════
   알림 팝업 다크 모드
   ═══════════════════════════════════════ */
[data-theme="dark"] .notif-popup-overlay {
    background: rgba(0, 0, 0, 0.7);
}

[data-theme="dark"] .notif-popup {
    background: #1e2235;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.5), 0 10px 30px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .notif-popup-header {
    background: linear-gradient(135deg, #252a42, #1e2235);
    border-bottom-color: #2e3350;
}

[data-theme="dark"] .notif-popup-header-left strong {
    color: #eee;
}

[data-theme="dark"] .notif-popup-badge {
    background: linear-gradient(135deg, #e53935, #c62828);
}

[data-theme="dark"] .notif-popup-readall-btn {
    background: rgba(21, 101, 192, 0.12);
    border-color: rgba(21, 101, 192, 0.25);
    color: #64b5f6;
}

[data-theme="dark"] .notif-popup-readall-btn:hover {
    background: rgba(21, 101, 192, 0.22);
    border-color: #64b5f6;
}

[data-theme="dark"] .notif-popup-delete-read-btn {
    background: rgba(198, 40, 40, 0.12);
    border-color: rgba(198, 40, 40, 0.25);
    color: #ef5350;
}

[data-theme="dark"] .notif-popup-delete-read-btn:hover {
    background: rgba(198, 40, 40, 0.22);
    border-color: #ef5350;
}

[data-theme="dark"] .notif-popup-close-btn {
    background: #2e3350;
    color: #aaa;
}

[data-theme="dark"] .notif-popup-close-btn:hover {
    background: #3a4060;
    color: #eee;
}

[data-theme="dark"] .notif-popup-body::-webkit-scrollbar-thumb {
    background: #444;
}

[data-theme="dark"] .notif-popup-empty p {
    color: #888;
}

[data-theme="dark"] .notif-popup-empty small {
    color: #666;
}

[data-theme="dark"] .notif-popup-item {
    border-bottom-color: #2e3350;
}

[data-theme="dark"] .notif-popup-item:hover {
    background: #252a42;
}

[data-theme="dark"] .notif-popup-item.unread {
    background: #2c2a1a;
    border-left-color: #ffc107;
}

[data-theme="dark"] .notif-popup-item.unread:hover {
    background: #37341f;
}

[data-theme="dark"] .notif-popup-item-icon {
    background: #2e3350;
}

[data-theme="dark"] .notif-popup-item.unread .notif-popup-item-icon {
    background: #3a3200;
}

[data-theme="dark"] .notif-popup-item-type {
    color: #999;
}

[data-theme="dark"] .notif-popup-item-title {
    color: #e8e8e8;
}

[data-theme="dark"] .notif-popup-item-detail {
    color: #777;
}

[data-theme="dark"] .notif-popup-item-time {
    color: #777;
}

[data-theme="dark"] .notif-popup-item-status.sent {
    background: #1b3a1e;
    color: #66bb6a;
}

[data-theme="dark"] .notif-popup-item-status.failed {
    background: #3a1b1b;
    color: #ef5350;
}

[data-theme="dark"] .notif-popup-item-delete:hover {
    background: rgba(239, 83, 80, 0.15);
}

[data-theme="dark"] .notif-popup-footer {
    background: #1a1d2e;
    border-top-color: #2e3350;
    color: #777;
}

/* ═══════════════════════════════════════
   알림 팝업 모바일 반응형
   ═══════════════════════════════════════ */
@media (max-width: 640px) {
    .notif-popup {
        width: calc(100vw - 16px);
        max-height: 85vh;
        border-radius: 16px;
    }

    .notif-popup-header {
        padding: 16px 18px 12px;
    }

    .notif-popup-header-left strong {
        font-size: 1.05rem;
    }

    .notif-popup-readall-btn {
        padding: 6px 10px;
        font-size: 0.75rem;
    }

    .notif-popup-delete-read-btn {
        padding: 6px 10px;
        font-size: 0.75rem;
    }

    .notif-popup-item {
        padding: 12px 18px;
        gap: 12px;
    }

    .notif-popup-item-icon {
        width: 36px;
        height: 36px;
        font-size: 18px;
        border-radius: 10px;
    }

    .notif-popup-item-delete {
        opacity: 0.5;
    }

    .notif-popup-footer {
        padding: 10px 18px;
    }
}

/* ═══════════════════════════════════════
   모바일 알림 — 미니멀 바텀시트
   ═══════════════════════════════════════ */
@media (max-width: 1024px) {

    .sidebar-notif-panel {
        left: 0;
        right: 0;
        top: auto;
        bottom: 0;
        width: 100%;
        max-width: 100%;
        height: auto;
        max-height: 82vh;
        border-radius: 24px 24px 0 0;
        box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.15);
        z-index: 1010;
        animation: sheetUp 0.32s cubic-bezier(0.22, 1, 0.36, 1);
        overflow: hidden;
        background: #fff;
    }

    /* 드래그 핸들 */
    .sidebar-notif-panel::before {
        content: '';
        display: block;
        width: 36px;
        height: 4px;
        background: #ddd;
        border-radius: 2px;
        margin: 10px auto 0;
    }

    /* ── 헤더 ── */
    .sidebar-notif-panel-header {
        padding: 12px 20px 12px;
        background: transparent;
        border-bottom: none;
        border-radius: 0;
    }

    .notif-header-left {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .sidebar-notif-panel-header strong {
        color: #111;
        font-size: 1.2rem;
        font-weight: 700;
        letter-spacing: -0.4px;
    }

    .notif-header-count {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 22px;
        height: 22px;
        padding: 0 7px;
        background: #111;
        color: #fff;
        font-size: 11px;
        font-weight: 700;
        border-radius: 11px;
        line-height: 1;
    }

    .notif-header-right {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .sidebar-notif-panel-header button {
        background: none;
        border: none;
        color: #999;
        border-radius: 50%;
        width: 32px;
        height: 32px;
        font-size: 15px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.15s;
    }

    .sidebar-notif-panel-header button:active {
        background: #f0f0f0;
        transform: scale(0.9);
    }

    .notif-close-btn {
        color: #bbb !important;
        font-size: 18px !important;
    }

    /* 전체 읽음 */
    .sidebar-notif-read-all-btn {
        background: transparent !important;
        border: none !important;
        color: #111 !important;
        font-size: 0.8rem !important;
        font-weight: 600 !important;
        padding: 6px 12px !important;
        border-radius: 8px !important;
        text-decoration: underline !important;
        text-underline-offset: 3px !important;
    }

    /* ── 바디 ── */
    .sidebar-notif-panel-body {
        padding: 0 16px 24px;
        max-height: calc(82vh - 70px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .sidebar-notif-panel-body::-webkit-scrollbar {
        display: none;
    }

    /* ── 구분선 ── */
    .sidebar-notif-panel-body::before {
        content: '';
        display: block;
        height: 1px;
        background: #f0f0f0;
        margin: 0 4px 12px;
    }

    /* ── 알림 아이템 ── */
    .sidebar-notif-item {
        margin: 0;
        padding: 14px 0;
        border-radius: 0;
        border-bottom: 1px solid #f5f5f5;
        background: transparent;
        transition: opacity 0.15s;
        gap: 14px;
    }

    .sidebar-notif-item:last-child {
        border-bottom: none;
    }

    .sidebar-notif-item:active {
        opacity: 0.65;
    }

    /* unread — 좌측 dot */
    .sidebar-notif-item.unread {
        background: transparent;
        border-left: none;
        box-shadow: none;
        position: relative;
        padding-left: 12px;
    }

    .sidebar-notif-item.unread::after {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #111;
    }

    .sidebar-notif-item.unread:active {
        opacity: 0.65;
    }

    .sidebar-notif-item.read {
        opacity: 0.35;
        background: transparent;
    }

    /* 아이콘 */
    .sidebar-notif-item-icon {
        width: 42px;
        height: 42px;
        font-size: 20px;
        border-radius: 50%;
        background: #f5f5f5;
        box-shadow: none;
        flex-shrink: 0;
    }

    /* 타입 라벨 */
    .sidebar-notif-item-type {
        font-size: 11px;
        font-weight: 500;
        letter-spacing: 0;
        text-transform: none;
        color: #999;
        margin-bottom: 2px;
    }

    /* 제목 */
    .sidebar-notif-item-title {
        font-size: 14.5px;
        font-weight: 600;
        line-height: 1.3;
        color: #111;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* 하단 */
    .sidebar-notif-item-footer {
        margin-top: 6px;
        gap: 12px;
    }

    .sidebar-notif-item-time {
        font-size: 12px;
        color: #bbb;
        font-weight: 400;
    }

    .sidebar-notif-item-status {
        font-size: 12px;
        padding: 0;
        border-radius: 0;
        font-weight: 500;
        background: none !important;
    }

    .sidebar-notif-item-status.sent {
        color: #22c55e !important;
        background: none !important;
    }

    .sidebar-notif-item-status.failed {
        color: #ef4444 !important;
        background: none !important;
    }

    /* X 버튼 */
    .sidebar-notif-item-dismiss {
        top: 14px;
        right: 0;
        width: 28px;
        height: 28px;
        font-size: 0.65rem;
        background: transparent;
        border-radius: 50%;
        color: #ccc;
    }

    .sidebar-notif-item-dismiss:active {
        background: #f0f0f0;
        color: #999;
    }

    /* 빈 알림 */
    .sidebar-notif-empty {
        padding: 56px 24px;
    }

    .sidebar-notif-empty span {
        font-size: 40px;
        margin-bottom: 12px;
        opacity: 0.3;
    }

    .sidebar-notif-empty p {
        font-size: 14px;
        color: #bbb;
        font-weight: 400;
    }

    .sidebar-notif-overlay {
        z-index: 1000;
    }
}

@keyframes sheetUp {
    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0);
    }
}

/* ═══════════════════════════════════════
   모바일 다크 모드
   ═══════════════════════════════════════ */
@media (max-width: 1024px) {

    [data-theme="dark"] .sidebar-notif-panel {
        background: #161825;
        box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.4);
    }

    [data-theme="dark"] .sidebar-notif-panel::before {
        background: rgba(255, 255, 255, 0.12);
    }

    [data-theme="dark"] .sidebar-notif-panel-header strong {
        color: #f5f5f5;
    }

    [data-theme="dark"] .notif-header-count {
        background: #f5f5f5;
        color: #111;
    }

    [data-theme="dark"] .sidebar-notif-panel-header button {
        color: #666;
    }

    [data-theme="dark"] .sidebar-notif-panel-header button:active {
        background: #252840;
    }

    [data-theme="dark"] .sidebar-notif-read-all-btn {
        color: #e0e0e0 !important;
    }

    [data-theme="dark"] .sidebar-notif-panel-body::before {
        background: rgba(255, 255, 255, 0.06);
    }

    [data-theme="dark"] .sidebar-notif-item {
        border-bottom-color: rgba(255, 255, 255, 0.04);
    }

    [data-theme="dark"] .sidebar-notif-item.unread::after {
        background: #f5f5f5;
    }

    [data-theme="dark"] .sidebar-notif-item-icon {
        background: #1e2136;
    }

    [data-theme="dark"] .sidebar-notif-item-type {
        color: #666;
    }

    [data-theme="dark"] .sidebar-notif-item-title {
        color: #eee;
    }

    [data-theme="dark"] .sidebar-notif-item-time {
        color: #555;
    }

    [data-theme="dark"] .sidebar-notif-item-status.sent {
        color: #4ade80 !important;
    }

    [data-theme="dark"] .sidebar-notif-item-status.failed {
        color: #f87171 !important;
    }

    [data-theme="dark"] .sidebar-notif-item-dismiss {
        color: #444;
    }

    [data-theme="dark"] .sidebar-notif-item-dismiss:active {
        background: #252840;
        color: #888;
    }

    [data-theme="dark"] .sidebar-notif-empty span {
        opacity: 0.2;
    }

    [data-theme="dark"] .sidebar-notif-empty p {
        color: #555;
    }

    [data-theme="dark"] .sidebar-notif-overlay {
        background: rgba(0, 0, 0, 0.6);
    }
}

/* iPhone safe area */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    @media (max-width: 1024px) {
        .sidebar-notif-panel {
            padding-bottom: env(safe-area-inset-bottom);
        }
    }
}

/* 다크 모드 + 모바일 알림 */
@media (max-width: 1024px) {
    [data-theme="dark"] .sidebar-notif-panel {
        background: #1a1d2e;
        box-shadow: 0 25px 80px rgba(0, 0, 0, 0.6);
    }

    [data-theme="dark"] .sidebar-notif-panel-header {
        background: linear-gradient(135deg, #8b0a12 0%, #a60e16 100%);
    }

    [data-theme="dark"] .sidebar-notif-item {
        background: #252840;
        border-bottom: none;
    }

    [data-theme="dark"] .sidebar-notif-item:hover,
    [data-theme="dark"] .sidebar-notif-item:active {
        background: #2e3350;
    }

    [data-theme="dark"] .sidebar-notif-item.unread {
        background: #2c2a1a;
        border-left-color: #ffc107;
        box-shadow: 0 2px 8px rgba(255, 193, 7, 0.08);
    }

    [data-theme="dark"] .sidebar-notif-item.unread:hover {
        background: #37341f;
    }

    [data-theme="dark"] .sidebar-notif-item-icon {
        background: #1e2136;
        box-shadow: none;
    }

    [data-theme="dark"] .sidebar-notif-item-dismiss {
        background: rgba(255, 255, 255, 0.05);
    }

    [data-theme="dark"] .sidebar-notif-panel-body::-webkit-scrollbar-thumb {
        background: #444;
    }

    [data-theme="dark"] .sidebar-notif-item-status.sent {
        background: #1b3a1e;
        color: #66bb6a;
    }

    [data-theme="dark"] .sidebar-notif-item-status.failed {
        background: #3a1b1b;
        color: #ef5350;
    }
}

/* ── 다크 모드 ── */
[data-theme="dark"] .sidebar-notif-icon-btn {
    background: #252840;
    border-color: #333660;
    color: #ccc;
}

[data-theme="dark"] .sidebar-notif-icon-btn:hover {
    background: #3a3200;
    border-color: #ffc107;
}

[data-theme="dark"] .sidebar-notif-panel {
    background: #1e2235;
    box-shadow: 2px 0 12px rgba(0, 0, 0, 0.25);
}

[data-theme="dark"] .sidebar-notif-panel-header {
    background: linear-gradient(135deg, #252a42, #1e2235);
    border-bottom-color: #2e3350;
}

[data-theme="dark"] .sidebar-notif-panel-header strong {
    color: #eee;
}

[data-theme="dark"] .sidebar-notif-panel-header button {
    background: #2e3350;
    color: #ccc;
}

[data-theme="dark"] .sidebar-notif-panel-header button:hover {
    background: #3a4060;
}

[data-theme="dark"] .sidebar-notif-empty {
    color: #777;
}

[data-theme="dark"] .sidebar-notif-item {
    border-bottom-color: #2e3350;
}

[data-theme="dark"] .sidebar-notif-item:hover {
    background: #252a42;
}

[data-theme="dark"] .sidebar-notif-item.unread {
    background: #2c2a1a;
    border-left-color: #ffc107;
}

[data-theme="dark"] .sidebar-notif-item.unread:hover {
    background: #37341f;
}

[data-theme="dark"] .sidebar-notif-item-dismiss {
    color: #666;
}

[data-theme="dark"] .sidebar-notif-item-dismiss:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #ccc;
}

[data-theme="dark"] .sidebar-notif-read-all-btn {
    border-color: #333660;
    color: #888;
}

[data-theme="dark"] .sidebar-notif-read-all-btn:hover {
    background: #252840;
    color: #ddd;
}

[data-theme="dark"] .sidebar-notif-item-icon {
    background: #2e3350;
}

[data-theme="dark"] .sidebar-notif-item-type {
    color: #999;
}

[data-theme="dark"] .sidebar-notif-item-title {
    color: #e8e8e8;
}

[data-theme="dark"] .sidebar-notif-item-meta {
    color: #999;
}

[data-theme="dark"] .sidebar-notif-item-time {
    color: #777;
}

[data-theme="dark"] .sidebar-notif-item-status.sent {
    background: #1b3a1e;
    color: #66bb6a;
}

[data-theme="dark"] .sidebar-notif-item-status.failed {
    background: #3a1b1b;
    color: #ef5350;
}

[data-theme="dark"] .sidebar-notif-overlay {
    background: rgba(0, 0, 0, 0.65);
}

[data-theme="dark"] .sidebar-notif-panel-body::-webkit-scrollbar-thumb {
    background: #444;
}

/* ================================================================
   포괄적 모바일 최적화 (max-width: 768px)
   ================================================================ */
@media (max-width: 768px) {

    /* ── 모달: 풀스크린 ── */
    .modal-overlay {
        padding: 0;
        align-items: stretch;
    }

    .modal-content {
        width: 100% !important;
        max-width: 100% !important;
        max-height: 100vh !important;
        border-radius: 0;
        margin: 0;
    }

    .modal-header {
        padding: 0.75rem 1rem;
        border-radius: 0;
    }

    .modal-header h2 {
        font-size: 1rem;
    }

    .modal-body {
        padding: 0.75rem 1rem;
    }

    .modal-footer {
        padding: 0.75rem 1rem;
        border-radius: 0;
    }

    .modal-footer .btn {
        flex: 1;
        padding: 0.7rem;
        font-size: 0.85rem;
    }

    /* ── 모달 탭: 가로 스크롤 ── */
    .pj-modal-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
        padding: 0 0.5rem;
        gap: 0;
        scrollbar-width: none;
    }

    .pj-modal-tabs::-webkit-scrollbar {
        display: none;
    }

    .pj-modal-tab {
        flex-shrink: 0;
        padding: 0.55rem 0.65rem;
        font-size: 0.72rem;
        white-space: nowrap;
    }

    .pj-tab-badge {
        font-size: 0.6rem;
        min-width: 16px;
        height: 16px;
    }

    /* ── 프로젝트 기본 정보 폼 ── */
    .cms-form-grid {
        grid-template-columns: 1fr !important;
        gap: 0.6rem;
    }

    .cms-form-grid .form-group label {
        font-size: 0.78rem;
    }

    .cms-form-grid .form-group input,
    .cms-form-grid .form-group select,
    .cms-form-grid .form-group textarea {
        font-size: 0.85rem;
        padding: 0.55rem 0.65rem;
    }

    /* ── 프로젝트 하위 작업 ── */
    .pj-task-row {
        flex-direction: column;
        gap: 0.4rem;
        padding: 0.6rem;
    }

    .pj-task-meta {
        flex-direction: column;
        gap: 0.35rem;
    }

    .pj-task-assignee-input,
    .pj-task-date-input {
        width: 100%;
        max-width: 100%;
    }

    .pj-task-add-btn {
        width: 100%;
    }

    /* ── 첨부파일 ── */
    .pj-file-list {
        gap: 0.5rem;
    }

    .pj-file-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.3rem;
    }

    .pj-file-name {
        max-width: 100%;
    }

    .pj-file-size {
        font-size: 0.7rem;
    }

    /* ── 코멘트 영역 ── */
    .pj-comment-write {
        flex-direction: column;
    }

    .pj-comment-write input,
    .pj-comment-write textarea {
        width: 100%;
    }

    .pj-comment-write button {
        width: 100%;
    }

    .pj-comment-item {
        padding: 0.6rem;
    }

    .pj-comment-author {
        font-size: 0.75rem;
    }

    .pj-comment-text {
        font-size: 0.82rem;
    }

    /* ── 인보이스 ── */
    .pj-invoice-header-row {
        display: none;
    }

    .pj-invoice-row {
        grid-template-columns: 1fr;
        gap: 0.35rem;
        padding: 0.6rem;
        border: 1px solid #f0f0f0;
        border-radius: 8px;
        margin-bottom: 0.35rem;
    }

    .pj-inv-name {
        width: 100%;
    }

    .pj-inv-qty,
    .pj-inv-price {
        width: 100%;
    }

    .pj-invoice-summary {
        padding: 0.75rem;
    }

    .pj-inv-sum-row {
        font-size: 0.8rem;
    }

    /* ── 리포트 보고 탭 (모달) ── */
    .pj-report-filters {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 0.25rem;
        scrollbar-width: none;
    }

    .pj-report-filters::-webkit-scrollbar {
        display: none;
    }

    .pj-report-filter-btn {
        flex-shrink: 0;
        font-size: 0.72rem;
        padding: 0.3rem 0.6rem;
    }

    .pj-report-add-btn {
        flex-shrink: 0;
        font-size: 0.72rem;
        padding: 0.3rem 0.7rem;
    }

    .pj-report-form {
        padding: 0.75rem;
    }

    .pj-report-form-row {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    .pj-report-metric-row {
        grid-template-columns: 1fr 1fr;
        gap: 0.3rem;
    }

    .pj-report-metric-row input:nth-child(3) {
        grid-column: 1 / -1;
    }

    .pj-report-metrics-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .pj-report-metric-card {
        padding: 0.5rem;
    }

    .pj-report-metric-value {
        font-size: 0.9rem;
    }

    .pj-report-card {
        padding: 0.75rem;
    }

    .pj-report-card-title {
        font-size: 0.85rem;
    }

    .pj-report-card-content {
        font-size: 0.78rem;
    }

    .pj-report-save-btn {
        width: 100%;
        text-align: center;
    }

    /* ── 공유 링크 섹션 ── */
    .pj-share-url-box {
        flex-direction: column;
        gap: 0.4rem;
    }

    .pj-share-url-box input {
        width: 100%;
        font-size: 0.78rem;
    }

    .pj-share-url-box button {
        width: 100%;
    }

    /* ── 미리보기 팝업 ── */
    .pj-preview-popup {
        width: 100%;
        max-width: 100%;
        max-height: 100vh;
        border-radius: 0;
        padding: 1rem;
    }

    .pj-preview-header {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .pj-preview-title {
        font-size: 1.15rem;
    }

    .pj-preview-meta {
        gap: 0.4rem;
    }

    .pj-preview-meta .pj-preview-meta-item {
        font-size: 0.78rem;
    }

    .pj-preview-desc {
        font-size: 0.82rem;
    }

    .pj-preview-section h3 {
        font-size: 0.9rem;
    }

    .pj-preview-task-row {
        font-size: 0.82rem;
    }

    .pj-preview-comment {
        padding: 0.6rem;
    }

    .pj-preview-body {
        gap: 0.75rem;
    }

    .pj-preview-info-grid {
        grid-template-columns: 1fr;
    }

    /* ── 프로젝트 개요 (상단 통계) ── */
    .pj-overview {
        padding: 1rem;
        gap: 0.75rem;
    }

    .pj-overview-left {
        flex-direction: column;
        gap: 0.75rem;
    }

    .pj-big-num {
        font-size: 2rem;
    }

    .pj-overview-right {
        align-items: center;
    }

    .pj-mini-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.4rem;
    }

    .pj-ring-svg {
        width: 56px;
        height: 56px;
    }

    /* ── 프로젝트 툴바 ── */
    .pj-toolbar {
        padding: 0.75rem;
    }

    .pj-toolbar .pj-search input {
        width: 100%;
        min-width: 0;
    }

    .pj-view-btns .btn {
        padding: 0.4rem 0.6rem;
        font-size: 0.75rem;
    }

    /* ── 프로젝트 카드 ── */
    .pj-card {
        padding: 0.85rem;
    }

    .pj-card-title {
        font-size: 0.9rem;
    }

    .pj-card-meta {
        font-size: 0.72rem;
    }

    .pj-card-actions {
        gap: 0.25rem;
    }

    .pj-card-actions button {
        padding: 0.3rem 0.5rem;
        font-size: 0.72rem;
    }

    /* ── 타임라인 뷰 ── */
    .pj-tl-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .pj-tl-label-col {
        width: 100px;
        min-width: 100px;
        font-size: 0.72rem;
    }

    .pj-tl-bar-col {
        min-width: 200px;
    }

    /* ── 활동 로그 ── */
    .pj-activity-log {
        padding: 0.6rem;
    }

    .pj-activity-item {
        font-size: 0.78rem;
        padding: 0.4rem 0;
    }

    /* ── 알림 배너 ── */
    .pj-notif-bar {
        flex-direction: column;
        gap: 0.35rem;
        padding: 0.5rem 0.75rem;
        font-size: 0.78rem;
    }

    .pj-notif-bar button {
        width: 100%;
        font-size: 0.78rem;
    }

    /* ── 사이드바 알림 패널 ── */
    .sidebar-notif-panel {
        width: 100%;
        max-width: 100%;
        left: 0;
    }

    .sidebar-notif-panel-header {
        padding: 0.75rem 1rem;
    }

    .sidebar-notif-item {
        padding: 0.6rem 0.75rem;
    }

    .sidebar-notif-item-title {
        font-size: 0.8rem;
    }

    .sidebar-notif-item-meta {
        font-size: 0.7rem;
    }

    /* ── 토스트 알림 ── */
    .admin-toast {
        left: 1rem;
        right: 1rem;
        top: auto;
        bottom: 1rem;
        text-align: center;
    }

    /* ── 리스트 뷰 ── */
    .pj-list-header {
        display: none;
    }

    .pj-list-row {
        grid-template-columns: 1fr;
        gap: 0.3rem;
        padding: 0.75rem;
        border: 1px solid #f0f0f0;
        border-radius: 10px;
        margin-bottom: 0.4rem;
    }

    .pj-lr-status,
    .pj-lr-title,
    .pj-lr-client,
    .pj-lr-due,
    .pj-lr-progress,
    .pj-lr-actions {
        display: block;
    }

    .pj-lr-client::before {
        content: '클라이언트: ';
        font-weight: 600;
        color: #888;
    }

    .pj-lr-due::before {
        content: '마감: ';
        font-weight: 600;
        color: #888;
    }

    /* ── DB 관리 ── */
    .db-tabs {
        flex-wrap: wrap;
    }

    .db-tab {
        font-size: 0.78rem;
        padding: 0.4rem 0.65rem;
    }

    /* ── 리포트 뷰 (프로젝트 관리 페이지 내부) ── */
    .pj-report-summary {
        grid-template-columns: 1fr 1fr;
    }

    .pj-report-row {
        flex-direction: column;
    }

    .pj-unpaid-item {
        grid-template-columns: 1fr;
    }

    /* ── 대시보드 ── */
    .dash-welcome-inner {
        flex-direction: column;
        text-align: center;
    }

    .dash-greeting h2 {
        font-size: 1.2rem;
    }

    .dash-welcome-actions {
        flex-direction: column;
        gap: 0.5rem;
        width: 100%;
    }

    .dash-welcome-actions .btn {
        width: 100%;
        justify-content: center;
    }

    /* ── CMS 관리자 폼 공통 ── */
    .form-actions {
        flex-direction: column;
    }

    .form-actions .btn {
        width: 100%;
        justify-content: center;
    }

    /* ── 권한 그리드 ── */
    .permissions-grid {
        grid-template-columns: 1fr;
    }
}

/* ── 추가 소형 모바일 최적화 (max-width: 480px) ── */
@media (max-width: 480px) {

    .admin-content {
        padding: 0.5rem;
    }

    .stat-card {
        padding: 0.85rem;
    }

    .stat-card .stat-number {
        font-size: 18px;
    }

    .stat-card .stat-label {
        font-size: 0.72rem;
    }

    .pj-big-num {
        font-size: 1.75rem;
    }

    .pj-mini-stats {
        grid-template-columns: 1fr 1fr;
    }

    .pj-modal-tab {
        padding: 0.45rem 0.5rem;
        font-size: 0.68rem;
    }

    .pj-report-metrics-grid {
        grid-template-columns: 1fr;
    }

    .pj-report-metric-row {
        grid-template-columns: 1fr;
    }

    .dash-stats-row {
        grid-template-columns: 1fr;
    }

    .pj-overview-left {
        gap: 0.5rem;
    }

    .dashboard-section {
        padding: 0.85rem;
    }

    .pj-card {
        padding: 0.7rem;
    }

    .pj-card-title {
        font-size: 0.82rem;
    }
}

/* ===================================
   다크 모드 + 모바일 카드뷰 보정
   =================================== */
@media (max-width: 768px) {
    [data-theme="dark"] .content-table tbody tr {
        background: #1a1d2e;
        border-color: #252840;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    }

    [data-theme="dark"] .content-table tbody td {
        border-bottom-color: #252840;
    }

    [data-theme="dark"] .content-table tbody td:before {
        color: #888;
    }

    [data-theme="dark"] .pj-list-row {
        border-color: #252840;
    }

    [data-theme="dark"] .pj-invoice-row {
        border-color: #333660;
    }
}

/* ===================================
   문의 관리 — 체크박스 & 일괄 작업
   =================================== */

/* 체크박스 */
.inquiry-checkbox {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #a60e16;
    vertical-align: middle;
}

.inquiry-checkbox-cell {
    text-align: center !important;
    width: 40px !important;
}

/* 선택 행 하이라이트 */
.inquiry-row:hover {
    background: rgba(166, 14, 22, 0.04);
}

.inquiry-row.selected {
    background: rgba(166, 14, 22, 0.06);
}

.inquiry-row.selected:hover {
    background: rgba(166, 14, 22, 0.1);
}

[data-theme="dark"] .inquiry-row:hover {
    background: rgba(166, 14, 22, 0.1);
}

[data-theme="dark"] .inquiry-row.selected {
    background: rgba(166, 14, 22, 0.15);
}

[data-theme="dark"] .inquiry-row.selected:hover {
    background: rgba(166, 14, 22, 0.22);
}

/* 일괄 작업 바 */
.bulk-action-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    margin-bottom: 12px;
    background: linear-gradient(135deg, #fff5f5, #fff0f0);
    border: 1px solid #ffd6d6;
    border-radius: 12px;
    animation: bulkBarSlide 0.25s ease-out;
}

@keyframes bulkBarSlide {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.bulk-action-count {
    font-size: 0.9rem;
    font-weight: 600;
    color: #a60e16;
}

.bulk-action-buttons {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.btn-bulk-replied {
    padding: 7px 14px;
    background: #e8f5e9;
    border: 1px solid #a5d6a7;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #2e7d32;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.btn-bulk-replied:hover {
    background: #c8e6c9;
    transform: translateY(-1px);
}

.btn-bulk-pending {
    padding: 7px 14px;
    background: #fff3e0;
    border: 1px solid #ffcc80;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #e65100;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.btn-bulk-pending:hover {
    background: #ffe0b2;
    transform: translateY(-1px);
}

.btn-bulk-delete {
    padding: 7px 14px;
    background: #ffebee;
    border: 1px solid #ef9a9a;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #c62828;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.btn-bulk-delete:hover {
    background: #ffcdd2;
    transform: translateY(-1px);
}

/* btn-warning (상세 팝업의 '대기중으로 변경') */
.admin-body .btn-warning {
    background: #ff9800;
    color: #fff;
    border: none;
}

.admin-body .btn-warning:hover {
    background: #f57c00;
    transform: translateY(-1px);
}

/* 다크 모드 */
[data-theme="dark"] .bulk-action-bar {
    background: linear-gradient(135deg, #2a1a1a, #251515);
    border-color: #5a2020;
}

[data-theme="dark"] .bulk-action-count {
    color: #ef5350;
}

[data-theme="dark"] .btn-bulk-replied {
    background: rgba(46, 125, 50, 0.15);
    border-color: rgba(46, 125, 50, 0.3);
    color: #66bb6a;
}

[data-theme="dark"] .btn-bulk-replied:hover {
    background: rgba(46, 125, 50, 0.25);
}

[data-theme="dark"] .btn-bulk-pending {
    background: rgba(230, 81, 0, 0.15);
    border-color: rgba(230, 81, 0, 0.3);
    color: #ffb74d;
}

[data-theme="dark"] .btn-bulk-pending:hover {
    background: rgba(230, 81, 0, 0.25);
}

[data-theme="dark"] .btn-bulk-delete {
    background: rgba(198, 40, 40, 0.15);
    border-color: rgba(198, 40, 40, 0.3);
    color: #ef5350;
}

[data-theme="dark"] .btn-bulk-delete:hover {
    background: rgba(198, 40, 40, 0.25);
}

/* 모바일 반응형 */
@media (max-width: 640px) {
    .bulk-action-bar {
        flex-direction: column;
        gap: 10px;
        align-items: stretch;
        text-align: center;
    }

    .bulk-action-buttons {
        justify-content: center;
    }

    .btn-bulk-replied,
    .btn-bulk-pending,
    .btn-bulk-delete {
        padding: 8px 12px;
        font-size: 0.75rem;
        flex: 1;
    }
}

/* ===================================
   워크플로우(Workflow) 관리 스타일
   =================================== */

/* 카테고리 탭 */
.wf-category-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 16px 0 12px;
}

.wf-cat-tab {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 7px 14px;
    border: 1px solid #e0e0e0;
    border-radius: 20px;
    background: #fff;
    font-size: 0.8rem;
    font-weight: 500;
    color: #666;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.wf-cat-tab:hover {
    border-color: #a60e16;
    color: #a60e16;
}

.wf-cat-tab.active {
    background: linear-gradient(135deg, #a60e16, #c62828);
    border-color: #a60e16;
    color: #fff;
    box-shadow: 0 2px 8px rgba(166, 14, 22, 0.25);
}

.wf-cat-icon {
    font-size: 1rem;
}

/* 카드 그리드 */
.wf-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
    padding: 8px 0 20px;
}

.wf-card {
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 16px;
    padding: 20px;
    cursor: pointer;
    transition: all 0.25s ease;
    position: relative;
}

.wf-card:hover {
    border-color: #d0d0d0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

.wf-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.wf-card-cat-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: #f5f0ff;
    border-radius: 12px;
    font-size: 0.72rem;
    font-weight: 600;
    color: #6b46c1;
}

.wf-card-actions {
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.2s;
}

.wf-card:hover .wf-card-actions {
    opacity: 1;
}

.wf-card-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0 0 8px;
    line-height: 1.4;
}

.wf-card-desc {
    font-size: 0.85rem;
    color: #777;
    margin: 0 0 16px;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.wf-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.78rem;
    color: #999;
}

.wf-card-steps {
    background: #f0f5ff;
    color: #1565c0;
    padding: 3px 10px;
    border-radius: 10px;
    font-weight: 600;
}

/* 비어있는 상태 */
.wf-empty {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
}

.wf-empty-icon {
    font-size: 3rem;
    margin-bottom: 12px;
}

.wf-empty h3 {
    font-size: 1.1rem;
    color: #555;
    margin: 0 0 8px;
}

.wf-empty p {
    color: #999;
    font-size: 0.88rem;
    margin: 0 0 20px;
}

/* ====== 읽기 모드 (타임라인) ====== */
.wf-view-modal {
    max-width: 700px;
}

.wf-view-cat {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 600;
    color: #6b46c1;
    margin-bottom: 4px;
}

.wf-view-desc {
    color: #666;
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid #eee;
}

.wf-timeline {
    position: relative;
    padding-left: 40px;
}

.wf-timeline::before {
    content: '';
    position: absolute;
    left: 16px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom, #a60e16, #e57373);
    border-radius: 2px;
}

.wf-timeline-item {
    position: relative;
    margin-bottom: 24px;
}

.wf-timeline-item:last-child {
    margin-bottom: 0;
}

.wf-timeline-marker {
    position: absolute;
    left: -40px;
    top: 2px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wf-timeline-num {
    width: 28px;
    height: 28px;
    background: linear-gradient(135deg, #a60e16, #c62828);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    box-shadow: 0 2px 6px rgba(166, 14, 22, 0.3);
}

.wf-timeline-content h4 {
    font-size: 1rem;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0 0 6px;
}

.wf-timeline-text {
    font-size: 0.88rem;
    color: #555;
    line-height: 1.7;
    margin: 0 0 10px;
    white-space: pre-line;
}

.wf-checklist-view {
    list-style: none;
    padding: 0;
    margin: 8px 0 0;
}

.wf-checklist-view li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 0;
    font-size: 0.85rem;
    color: #555;
}

.wf-check-icon {
    color: #a60e16;
    font-size: 0.9rem;
}

/* ====== 편집 모달 ====== */
.wf-edit-modal {
    max-width: 750px;
}

.wf-form-group {
    margin-bottom: 16px;
}

.wf-form-group label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: #444;
    margin-bottom: 6px;
}

.wf-form-group input,
.wf-form-group select,
.wf-form-group textarea {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #ddd;
    border-radius: 10px;
    font-size: 0.88rem;
    background: #fafafa;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

.wf-form-group input:focus,
.wf-form-group select:focus,
.wf-form-group textarea:focus {
    border-color: #a60e16;
    background: #fff;
    outline: none;
}

.wf-steps-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 20px 0 12px;
    padding-top: 16px;
    border-top: 1px solid #eee;
}

.wf-steps-header h4 {
    margin: 0;
    font-size: 0.95rem;
    color: #333;
}

.btn-sm {
    padding: 6px 12px;
    font-size: 0.78rem;
    border-radius: 8px;
}

.wf-steps-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.wf-step-edit {
    background: #f8f9fa;
    border: 1px solid #e8e8e8;
    border-radius: 12px;
    padding: 16px;
}

.wf-step-edit-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.wf-step-num {
    font-size: 0.8rem;
    font-weight: 700;
    color: #a60e16;
    background: rgba(166, 14, 22, 0.08);
    padding: 3px 10px;
    border-radius: 8px;
}

.wf-step-edit-actions {
    display: flex;
    gap: 4px;
}

.btn-icon-sm {
    width: 28px;
    height: 28px;
    border: 1px solid #ddd;
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    transition: all 0.15s;
}

.btn-icon-sm:hover {
    background: #f0f0f0;
    border-color: #bbb;
}

.btn-icon-sm:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.btn-danger-sm:hover {
    background: #ffebee;
    border-color: #ef9a9a;
    color: #c62828;
}

.wf-step-title-input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 0.88rem;
    font-weight: 600;
    margin-bottom: 8px;
    background: #fff;
    box-sizing: border-box;
}

.wf-step-content-input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 0.85rem;
    resize: vertical;
    background: #fff;
    box-sizing: border-box;
}

.wf-step-title-input:focus,
.wf-step-content-input:focus {
    border-color: #a60e16;
    outline: none;
}

/* 체크리스트 편집 */
.wf-step-checklist {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed #ddd;
}

.wf-step-checklist-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #666;
}

.btn-link {
    background: none;
    border: none;
    color: #a60e16;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.15s;
}

.btn-link:hover {
    color: #c62828;
}

.wf-checklist-item-edit {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.wf-check-bullet {
    color: #a60e16;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.wf-checklist-item-edit input {
    flex: 1;
    padding: 6px 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 0.82rem;
    background: #fff;
}

.wf-checklist-item-edit input:focus {
    border-color: #a60e16;
    outline: none;
}

.wf-steps-empty {
    text-align: center;
    padding: 30px;
    color: #999;
    font-size: 0.88rem;
}

/* 다크 모드 */
[data-theme="dark"] .wf-cat-tab {
    background: #1e2035;
    border-color: #333;
    color: #aaa;
}

[data-theme="dark"] .wf-cat-tab:hover {
    border-color: #ef5350;
    color: #ef5350;
}

[data-theme="dark"] .wf-cat-tab.active {
    background: linear-gradient(135deg, #b71c1c, #c62828);
    border-color: #c62828;
}

[data-theme="dark"] .wf-card {
    background: #1e2035;
    border-color: #2a2d45;
}

[data-theme="dark"] .wf-card:hover {
    border-color: #444;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .wf-card-cat-badge {
    background: rgba(107, 70, 193, 0.15);
    color: #b39ddb;
}

[data-theme="dark"] .wf-card-title {
    color: #e8e8f0;
}

[data-theme="dark"] .wf-card-desc {
    color: #888;
}

[data-theme="dark"] .wf-card-steps {
    background: rgba(21, 101, 192, 0.15);
    color: #64b5f6;
}

[data-theme="dark"] .wf-view-desc {
    color: #999;
    border-bottom-color: #333;
}

[data-theme="dark"] .wf-timeline::before {
    background: linear-gradient(to bottom, #c62828, #ef5350);
}

[data-theme="dark"] .wf-timeline-content h4 {
    color: #e8e8f0;
}

[data-theme="dark"] .wf-timeline-text {
    color: #aaa;
}

[data-theme="dark"] .wf-checklist-view li {
    color: #aaa;
}

[data-theme="dark"] .wf-form-group label {
    color: #ccc;
}

[data-theme="dark"] .wf-form-group input,
[data-theme="dark"] .wf-form-group select,
[data-theme="dark"] .wf-form-group textarea {
    background: #15172a;
    border-color: #333;
    color: #e0e0e0;
}

[data-theme="dark"] .wf-form-group input:focus,
[data-theme="dark"] .wf-form-group select:focus,
[data-theme="dark"] .wf-form-group textarea:focus {
    border-color: #ef5350;
    background: #1a1d32;
}

[data-theme="dark"] .wf-steps-header {
    border-top-color: #333;
}

[data-theme="dark"] .wf-steps-header h4 {
    color: #ddd;
}

[data-theme="dark"] .wf-step-edit {
    background: #15172a;
    border-color: #2a2d45;
}

[data-theme="dark"] .wf-step-num {
    background: rgba(198, 40, 40, 0.15);
    color: #ef5350;
}

[data-theme="dark"] .btn-icon-sm {
    background: #1e2035;
    border-color: #333;
    color: #aaa;
}

[data-theme="dark"] .btn-icon-sm:hover {
    background: #2a2d45;
    border-color: #555;
}

[data-theme="dark"] .wf-step-title-input,
[data-theme="dark"] .wf-step-content-input {
    background: #1a1d32;
    border-color: #333;
    color: #e0e0e0;
}

[data-theme="dark"] .wf-step-title-input:focus,
[data-theme="dark"] .wf-step-content-input:focus {
    border-color: #ef5350;
}

[data-theme="dark"] .wf-step-checklist {
    border-top-color: #333;
}

[data-theme="dark"] .wf-step-checklist-header {
    color: #aaa;
}

[data-theme="dark"] .wf-checklist-item-edit input {
    background: #1a1d32;
    border-color: #333;
    color: #e0e0e0;
}

[data-theme="dark"] .wf-checklist-item-edit input:focus {
    border-color: #ef5350;
}

[data-theme="dark"] .wf-empty h3 {
    color: #aaa;
}

[data-theme="dark"] .wf-empty p {
    color: #777;
}

[data-theme="dark"] .btn-link {
    color: #ef5350;
}

[data-theme="dark"] .btn-link:hover {
    color: #f44336;
}

[data-theme="dark"] .wf-view-cat {
    color: #b39ddb;
}

/* ── 필터 바 ── */
.wf-filter-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    gap: 12px;
    flex-wrap: wrap;
}

.wf-filter-left {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.wf-filter-count {
    font-size: 0.88rem;
    font-weight: 700;
    color: #1e293b;
}

.wf-filter-tag {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 20px;
    background: #f1f5f9;
    color: #64748b;
}

.wf-filter-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.wf-filter-select {
    padding: 7px 12px;
    border: 1px solid #ddd;
    border-radius: 10px;
    font-size: 0.8rem;
    background: #fff;
    color: #333;
    cursor: pointer;
    transition: all 0.2s;
}

.wf-filter-select:focus {
    border-color: #a60e16;
    outline: none;
}

.wf-filter-select:hover {
    border-color: #bbb;
}

/* ── 카테고리 관리 버튼 ── */
.wf-cat-tab-manage {
    border-style: dashed !important;
    opacity: 0.7;
    font-size: 0.78rem;
}

.wf-cat-tab-manage:hover {
    opacity: 1;
    border-color: #a60e16 !important;
    color: #a60e16 !important;
}

/* ── 카테고리 관리 모달 ── */
.wf-cat-modal {
    max-width: 560px;
}

.wf-cat-modal-desc {
    font-size: 0.82rem;
    color: #666;
    margin: 0 0 16px;
    padding: 10px 14px;
    background: #f8f9fa;
    border-radius: 10px;
    border-left: 3px solid #a60e16;
}

.wf-cat-add-row {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.wf-cat-input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 0.84rem;
    background: #fff;
    transition: border-color 0.2s;
}

.wf-cat-input:focus {
    border-color: #a60e16;
    outline: none;
}

.wf-cat-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 320px;
    overflow-y: auto;
}

.wf-cat-list-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    transition: background 0.2s;
}

.wf-cat-list-item:hover {
    background: #f8f9fa;
}

.wf-cat-list-icon {
    font-size: 1.1rem;
    flex-shrink: 0;
}

.wf-cat-list-info {
    flex: 1;
    min-width: 0;
}

.wf-cat-list-name {
    font-size: 0.86rem;
    font-weight: 600;
    color: #1e293b;
    display: block;
}

.wf-cat-list-en {
    font-size: 0.72rem;
    color: #94a3b8;
}

.wf-cat-list-badge {
    font-size: 0.68rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 12px;
    background: #e3f2fd;
    color: #1565c0;
    flex-shrink: 0;
}

.wf-cat-empty {
    text-align: center;
    padding: 24px;
    color: #999;
    font-size: 0.86rem;
}

/* ── 다크 모드: 필터 바 ── */
[data-theme="dark"] .wf-filter-count {
    color: #e0e0e0;
}

[data-theme="dark"] .wf-filter-tag {
    background: rgba(255, 255, 255, .06);
    color: #aaa;
}

[data-theme="dark"] .wf-filter-select {
    background: #1e2035;
    border-color: #333;
    color: #ccc;
}

[data-theme="dark"] .wf-filter-select:hover {
    border-color: #555;
}

[data-theme="dark"] .wf-filter-select:focus {
    border-color: #ef5350;
}

/* ── 다크 모드: 카테고리 관리 ── */
[data-theme="dark"] .wf-cat-tab-manage {
    border-color: #444 !important;
    color: #888 !important;
}

[data-theme="dark"] .wf-cat-tab-manage:hover {
    border-color: #ef5350 !important;
    color: #ef5350 !important;
}

[data-theme="dark"] .wf-cat-modal-desc {
    background: #15172a;
    color: #aaa;
    border-left-color: #ef5350;
}

[data-theme="dark"] .wf-cat-input {
    background: #15172a;
    border-color: #333;
    color: #e0e0e0;
}

[data-theme="dark"] .wf-cat-input:focus {
    border-color: #ef5350;
}

[data-theme="dark"] .wf-cat-list-item:hover {
    background: rgba(255, 255, 255, .04);
}

[data-theme="dark"] .wf-cat-list-name {
    color: #e0e0e0;
}

[data-theme="dark"] .wf-cat-list-en {
    color: #666;
}

[data-theme="dark"] .wf-cat-list-badge {
    background: rgba(21, 101, 192, .15);
    color: #64b5f6;
}

/* 모바일 반응형 */
@media (max-width: 768px) {
    .wf-card-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .wf-card {
        padding: 16px;
    }

    .wf-card-actions {
        opacity: 1;
    }

    .wf-category-tabs {
        gap: 6px;
        padding: 10px 0 8px;
    }

    .wf-cat-tab {
        padding: 6px 12px;
        font-size: 0.76rem;
    }

    .wf-timeline {
        padding-left: 32px;
    }

    .wf-timeline::before {
        left: 12px;
    }

    .wf-timeline-marker {
        left: -32px;
    }

    .wf-timeline-num {
        width: 24px;
        height: 24px;
        font-size: 0.68rem;
    }

    .wf-edit-modal,
    .wf-view-modal {
        max-width: 95vw;
    }

    .wf-filter-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .wf-filter-right {
        flex-wrap: wrap;
    }

    .wf-filter-select {
        flex: 1;
        min-width: 0;
    }

    .wf-cat-add-row {
        flex-direction: column;
    }

    .wf-cat-modal {
        max-width: 95vw;
    }
}

/* ===================================
   CFO 대시보드 스타일 (cfo-)
   =================================== */

/* 탭 네비게이션 */
.cfo-tabs {
    display: flex;
    gap: 6px;
    padding: 8px 0 16px;
    overflow-x: auto;
    scrollbar-width: none;
}

.cfo-tabs::-webkit-scrollbar {
    display: none;
}

.cfo-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 10px 16px;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    flex-shrink: 0;
}

.cfo-tab:hover {
    border-color: #a60e16;
}

.cfo-tab.active {
    background: linear-gradient(135deg, #a60e16, #c62828);
    border-color: #a60e16;
    color: #fff;
}

.cfo-tab-label {
    font-size: 0.82rem;
    font-weight: 700;
}

.cfo-tab-desc {
    font-size: 0.65rem;
    opacity: 0.7;
}

.cfo-tab.active .cfo-tab-desc {
    opacity: 0.85;
}

/* 섹션 래퍼 */
.cfo-section {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* KPI 그리드 */
.cfo-kpi-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.cfo-kpi-card {
    background: #fff;
    border: 1px solid #e8ecf2;
    border-radius: 16px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    transition: all 0.25s;
    position: relative;
    overflow: hidden;
}

.cfo-kpi-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    opacity: 0;
    transition: opacity 0.25s;
}

.cfo-kpi-card:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, .06);
    transform: translateY(-2px);
}

.cfo-kpi-card:hover::before {
    opacity: 1;
}

.cfo-kpi-revenue::before {
    background: linear-gradient(90deg, #4caf50, #66bb6a);
}

.cfo-kpi-expense::before {
    background: linear-gradient(90deg, #f44336, #ef5350);
}

.cfo-kpi-profit::before {
    background: linear-gradient(90deg, #1565c0, #42a5f5);
}

.cfo-kpi-collect::before {
    background: linear-gradient(90deg, #ff9800, #ffb74d);
}

.cfo-kpi-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: #f5f7fa;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
}

.cfo-kpi-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.cfo-kpi-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.cfo-kpi-value {
    font-size: 1.3rem;
    font-weight: 800;
    color: #1e293b;
    line-height: 1.2;
}

.cfo-kpi-change {
    font-size: 0.72rem;
    font-weight: 600;
}

.cfo-kpi-change.positive {
    color: #16a34a;
}

.cfo-kpi-change.negative {
    color: #dc2626;
}

.cfo-kpi-sub {
    font-size: 0.72rem;
    color: #94a3b8;
}

/* 요약 행 */
.cfo-summary-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.cfo-summary-card {
    background: #fff;
    border: 1px solid #e8ecf2;
    border-radius: 14px;
    padding: 18px 20px;
}

.cfo-summary-card h4 {
    margin: 0 0 8px;
    font-size: 0.82rem;
    color: #64748b;
    font-weight: 600;
}

.cfo-summary-value {
    font-size: 1.1rem;
    font-weight: 800;
    color: #1e293b;
}

.cfo-summary-value.positive {
    color: #16a34a;
}

.cfo-summary-value.negative {
    color: #dc2626;
}

/* 카드 */
.cfo-card {
    background: #fff;
    border: 1px solid #e8ecf2;
    border-radius: 16px;
    padding: 22px;
}

.cfo-card-wide {
    grid-column: 1 / -1;
}

.cfo-card-title {
    margin: 0 0 16px;
    font-size: 0.95rem;
    font-weight: 700;
    color: #1e293b;
}

.cfo-card-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.cfo-card-header-row .cfo-card-title {
    margin-bottom: 0;
}

/* P&L 그리드 */
.cfo-pnl-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
}

/* 차트 바 그룹 (수입 vs 비용) */
.cfo-chart-bar-group {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    height: 160px;
    padding: 8px 0;
}

.cfo-bar-pair {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex: 1;
}

.cfo-bar-pair-bars {
    display: flex;
    gap: 3px;
    align-items: flex-end;
    height: 130px;
    width: 100%;
}

.cfo-bar-revenue {
    flex: 1;
    border-radius: 4px 4px 0 0;
    background: linear-gradient(180deg, #66bb6a, #4caf50);
    min-height: 4px;
    transition: height 0.4s;
}

.cfo-bar-expense {
    flex: 1;
    border-radius: 4px 4px 0 0;
    background: linear-gradient(180deg, #ef5350, #f44336);
    min-height: 4px;
    transition: height 0.4s;
}

.cfo-bar-label {
    font-size: 0.68rem;
    color: #94a3b8;
}

.cfo-chart-legend {
    display: flex;
    gap: 14px;
    margin-top: 10px;
    justify-content: center;
}

.cfo-legend-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.75rem;
    color: #64748b;
}

.cfo-legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

/* 카테고리 내역 바 */
.cfo-cat-breakdown {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cfo-cat-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cfo-cat-name {
    font-size: 0.8rem;
    font-weight: 600;
    color: #475569;
    min-width: 70px;
    flex-shrink: 0;
}

.cfo-cat-bar-track {
    flex: 1;
    height: 8px;
    background: #f1f5f9;
    border-radius: 4px;
    overflow: hidden;
}

.cfo-cat-bar-fill {
    height: 100%;
    border-radius: 4px;
    background: linear-gradient(90deg, #1565c0, #42a5f5);
    transition: width 0.5s;
}

.cfo-cat-bar-expense {
    background: linear-gradient(90deg, #f44336, #ef5350);
}

.cfo-cat-value {
    font-size: 0.75rem;
    font-weight: 700;
    color: #334155;
    min-width: 80px;
    text-align: right;
    flex-shrink: 0;
}

/* 테이블 */
.cfo-table-wrap {
    overflow-x: auto;
}

.cfo-table {
    width: 100%;
    border-collapse: collapse;
}

.cfo-table th {
    font-size: 0.72rem;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 8px 10px;
    border-bottom: 1px solid #eee;
    text-align: left;
    white-space: nowrap;
}

.cfo-th-right {
    text-align: right !important;
}

.cfo-table td {
    font-size: 0.82rem;
    color: #334155;
    padding: 10px;
    border-bottom: 1px solid #f5f5f5;
}

.cfo-td-right {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.cfo-td-right.positive {
    color: #16a34a;
    font-weight: 600;
}

.cfo-td-right.negative {
    color: #dc2626;
    font-weight: 600;
}

.cfo-td-title {
    font-weight: 600;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cfo-rank-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ff9800, #ffb74d);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 800;
    margin-right: 6px;
}

.cfo-row-actions {
    display: flex;
    gap: 4px;
}

.cfo-exp-badge {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    background: #f1f5f9;
    color: #64748b;
}

.cfo-empty {
    text-align: center;
    padding: 20px;
    color: #94a3b8;
    font-size: 0.85rem;
}

/* 캐시플로우 */
.cfo-cf-summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.cfo-cf-card {
    background: #fff;
    border: 1px solid #e8ecf2;
    border-radius: 14px;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cfo-cf-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: #64748b;
}

.cfo-cf-value {
    font-size: 1.2rem;
    font-weight: 800;
    color: #1e293b;
}

.cfo-cf-value.positive {
    color: #16a34a;
}

.cfo-cf-value.negative {
    color: #dc2626;
}

.cfo-cf-in {
    border-left: 3px solid #4caf50;
}

.cfo-cf-out {
    border-left: 3px solid #f44336;
}

.cfo-cf-net {
    border-left: 3px solid #1565c0;
}

.cfo-cf-runway {
    border-left: 3px solid #ff9800;
}

.cfo-chart-cashflow {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    height: 180px;
    padding: 8px 0;
}

.cfo-cf-bar-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    height: 100%;
    justify-content: flex-end;
}

.cfo-cf-bar-value {
    font-size: 0.65rem;
    font-weight: 600;
    color: #64748b;
    white-space: nowrap;
}

.cfo-cf-bar {
    width: 100%;
    border-radius: 4px;
    min-height: 6px;
    transition: height 0.4s;
}

.cfo-cf-bar.positive {
    background: linear-gradient(180deg, #66bb6a, #4caf50);
}

.cfo-cf-bar.negative {
    background: linear-gradient(180deg, #ef5350, #f44336);
}

.cfo-cf-bar-label {
    font-size: 0.68rem;
    color: #94a3b8;
}

/* 예산 */
.cfo-budget-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.cfo-budget-item {
    background: #f8f9fa;
    border: 1px solid #e8ecf2;
    border-radius: 14px;
    padding: 16px 18px;
}

.cfo-budget-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.cfo-budget-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cfo-budget-cat {
    font-size: 0.88rem;
    font-weight: 700;
    color: #1e293b;
}

.cfo-budget-quarter {
    font-size: 0.72rem;
    font-weight: 600;
    color: #64748b;
    background: #e2e8f0;
    padding: 2px 8px;
    border-radius: 8px;
}

.cfo-budget-actions {
    display: flex;
    gap: 4px;
}

.cfo-budget-gauge {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.cfo-gauge-track {
    flex: 1;
    height: 10px;
    background: #e2e8f0;
    border-radius: 5px;
    overflow: hidden;
}

.cfo-gauge-fill {
    height: 100%;
    border-radius: 5px;
    transition: width 0.5s;
}

.cfo-gauge-fill.safe {
    background: linear-gradient(90deg, #4caf50, #66bb6a);
}

.cfo-gauge-fill.warning {
    background: linear-gradient(90deg, #ff9800, #ffb74d);
}

.cfo-gauge-fill.danger {
    background: linear-gradient(90deg, #f44336, #ef5350);
}

.cfo-gauge-pct {
    font-size: 0.82rem;
    font-weight: 800;
    color: #334155;
    min-width: 38px;
}

.cfo-gauge-pct.danger {
    color: #dc2626;
}

.cfo-budget-nums {
    display: flex;
    gap: 16px;
    font-size: 0.75rem;
    color: #64748b;
}

.cfo-budget-nums .positive {
    color: #16a34a;
    font-weight: 600;
}

.cfo-budget-nums .negative {
    color: #dc2626;
    font-weight: 600;
}

/* 목표 */
.cfo-goals-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

.cfo-goal-card {
    background: #f8f9fa;
    border: 1px solid #e8ecf2;
    border-radius: 14px;
    padding: 18px;
}

.cfo-goal-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}

.cfo-goal-title {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 700;
    color: #1e293b;
}

.cfo-goal-quarter {
    font-size: 0.7rem;
    color: #64748b;
}

.cfo-goal-actions {
    display: flex;
    gap: 4px;
}

.cfo-goal-progress {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.cfo-goal-gauge-track {
    flex: 1;
    height: 10px;
    background: #e2e8f0;
    border-radius: 5px;
    overflow: hidden;
}

.cfo-goal-gauge-fill {
    height: 100%;
    border-radius: 5px;
    transition: width 0.5s;
}

.cfo-goal-gauge-fill.low {
    background: linear-gradient(90deg, #f44336, #ef5350);
}

.cfo-goal-gauge-fill.mid {
    background: linear-gradient(90deg, #ff9800, #ffb74d);
}

.cfo-goal-gauge-fill.good {
    background: linear-gradient(90deg, #4caf50, #66bb6a);
}

.cfo-goal-gauge-fill.complete {
    background: linear-gradient(90deg, #1565c0, #42a5f5);
}

.cfo-goal-pct {
    font-size: 0.85rem;
    font-weight: 800;
    color: #334155;
    min-width: 38px;
}

.cfo-goal-nums {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: #64748b;
}

/* 빈 상태 */
.cfo-empty-state {
    text-align: center;
    padding: 40px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.cfo-empty-icon {
    font-size: 2.5rem;
}

.cfo-empty-state h3 {
    margin: 0;
    font-size: 1rem;
    color: #64748b;
}

.cfo-empty-state p {
    margin: 0;
    font-size: 0.84rem;
    color: #94a3b8;
}

/* 모달 폼 */
.cfo-modal {
    max-width: 560px;
}

.cfo-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.cfo-form-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 12px;
}

.cfo-form-group label {
    font-size: 0.78rem;
    font-weight: 600;
    color: #475569;
}

.cfo-form-group .required {
    color: #dc2626;
}

.cfo-form-group input,
.cfo-form-group select,
.cfo-form-group textarea {
    padding: 9px 12px;
    border: 1px solid #ddd;
    border-radius: 10px;
    font-size: 0.85rem;
    background: #fff;
    transition: border-color 0.2s;
    width: 100%;
    box-sizing: border-box;
}

.cfo-form-group input:focus,
.cfo-form-group select:focus,
.cfo-form-group textarea:focus {
    border-color: #a60e16;
    outline: none;
}

/* ── 다크 모드: CFO ── */
[data-theme="dark"] .cfo-tab {
    background: #1e2035;
    border-color: #333;
    color: #aaa;
}

[data-theme="dark"] .cfo-tab:hover {
    border-color: #ef5350;
    color: #ef5350;
}

[data-theme="dark"] .cfo-tab.active {
    background: linear-gradient(135deg, #b71c1c, #c62828);
    border-color: #c62828;
    color: #fff;
}

[data-theme="dark"] .cfo-kpi-card {
    background: #1e2035;
    border-color: #2a2d45;
}

[data-theme="dark"] .cfo-kpi-icon {
    background: rgba(255, 255, 255, .05);
}

[data-theme="dark"] .cfo-kpi-value {
    color: #e8e8f0;
}

[data-theme="dark"] .cfo-kpi-label {
    color: #777;
}

[data-theme="dark"] .cfo-kpi-sub {
    color: #666;
}

[data-theme="dark"] .cfo-summary-card {
    background: #1e2035;
    border-color: #2a2d45;
}

[data-theme="dark"] .cfo-summary-card h4 {
    color: #888;
}

[data-theme="dark"] .cfo-summary-value {
    color: #e8e8f0;
}

[data-theme="dark"] .cfo-card {
    background: #1e2035;
    border-color: #2a2d45;
}

[data-theme="dark"] .cfo-card-title {
    color: #e8e8f0;
}

[data-theme="dark"] .cfo-table th {
    color: #666;
    border-bottom-color: #2a2d45;
}

[data-theme="dark"] .cfo-table td {
    color: #ccc;
    border-bottom-color: #2a2d45;
}

[data-theme="dark"] .cfo-td-title {
    color: #e0e0e0;
}

[data-theme="dark"] .cfo-cf-card {
    background: #1e2035;
    border-color: #2a2d45;
}

[data-theme="dark"] .cfo-cf-value {
    color: #e8e8f0;
}

[data-theme="dark"] .cfo-cf-label {
    color: #888;
}

[data-theme="dark"] .cfo-budget-item {
    background: #15172a;
    border-color: #2a2d45;
}

[data-theme="dark"] .cfo-budget-cat {
    color: #e0e0e0;
}

[data-theme="dark"] .cfo-budget-quarter {
    background: rgba(255, 255, 255, .06);
    color: #aaa;
}

[data-theme="dark"] .cfo-gauge-track {
    background: #2a2d45;
}

[data-theme="dark"] .cfo-gauge-pct {
    color: #ccc;
}

[data-theme="dark"] .cfo-budget-nums {
    color: #888;
}

[data-theme="dark"] .cfo-goal-card {
    background: #15172a;
    border-color: #2a2d45;
}

[data-theme="dark"] .cfo-goal-title {
    color: #e0e0e0;
}

[data-theme="dark"] .cfo-goal-quarter {
    color: #888;
}

[data-theme="dark"] .cfo-goal-gauge-track {
    background: #2a2d45;
}

[data-theme="dark"] .cfo-goal-pct {
    color: #ccc;
}

[data-theme="dark"] .cfo-goal-nums {
    color: #888;
}

[data-theme="dark"] .cfo-cat-name {
    color: #aaa;
}

[data-theme="dark"] .cfo-cat-bar-track {
    background: #2a2d45;
}

[data-theme="dark"] .cfo-cat-value {
    color: #ccc;
}

[data-theme="dark"] .cfo-exp-badge {
    background: rgba(255, 255, 255, .06);
    color: #aaa;
}

[data-theme="dark"] .cfo-empty {
    color: #666;
}

[data-theme="dark"] .cfo-empty-state h3 {
    color: #aaa;
}

[data-theme="dark"] .cfo-empty-state p {
    color: #666;
}

[data-theme="dark"] .cfo-form-group label {
    color: #ccc;
}

[data-theme="dark"] .cfo-form-group input,
[data-theme="dark"] .cfo-form-group select,
[data-theme="dark"] .cfo-form-group textarea {
    background: #15172a;
    border-color: #333;
    color: #e0e0e0;
}

[data-theme="dark"] .cfo-form-group input:focus,
[data-theme="dark"] .cfo-form-group select:focus,
[data-theme="dark"] .cfo-form-group textarea:focus {
    border-color: #ef5350;
    background: #1a1d32;
}

/* CFO 반응형 */
@media (max-width: 768px) {
    .cfo-tabs {
        gap: 4px;
        padding: 6px 0 12px;
    }

    .cfo-tab {
        padding: 8px 10px;
    }

    .cfo-tab-desc {
        display: none;
    }

    .cfo-kpi-grid {
        grid-template-columns: 1fr;
    }

    .cfo-summary-row {
        grid-template-columns: 1fr;
    }

    .cfo-pnl-grid {
        grid-template-columns: 1fr;
    }

    .cfo-cf-summary {
        grid-template-columns: repeat(2, 1fr);
    }

    .cfo-goals-grid {
        grid-template-columns: 1fr;
    }

    .cfo-form-row {
        grid-template-columns: 1fr;
    }

    .cfo-modal {
        max-width: 95vw;
    }

    .cfo-chart-bar-group {
        height: 120px;
    }

    .cfo-chart-cashflow {
        height: 140px;
    }
}

/* ===================================
   프로젝트 관리 대시보드 스타일 (pjd-)
   =================================== */

/* 대시보드 래퍼 */
.pjd-dashboard {
    margin-bottom: 24px;
}

/* KPI 카드 그리드 — 확장형 */
.pjd-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-bottom: 20px;
}

/* ── 위젯 그리드 ── */
.pjd-widgets-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-bottom: 20px;
}

.pjd-widget {
    background: #fff;
    border: 1px solid #e8ecf2;
    border-radius: 16px;
    padding: 20px 22px;
    transition: all 0.25s ease;
    position: relative;
    overflow: hidden;
}

.pjd-widget::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(135deg, #1565c0, #42a5f5);
    opacity: 0;
    transition: opacity 0.25s;
}

.pjd-widget:hover {
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.07);
    transform: translateY(-2px);
}

.pjd-widget:hover::before {
    opacity: 1;
}

.pjd-widget-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.pjd-widget-title {
    font-size: 0.92rem;
    font-weight: 700;
    color: #1e293b;
}

.pjd-widget-badge {
    font-size: 0.72rem;
    font-weight: 700;
    color: #64748b;
    background: #f1f5f9;
    padding: 3px 10px;
    border-radius: 20px;
}

/* 도넛 차트 */
.pjd-donut-wrap {
    display: flex;
    align-items: center;
    gap: 16px;
}

.pjd-donut-svg {
    width: 90px;
    height: 90px;
    flex-shrink: 0;
}

.pjd-donut-legend {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.pjd-donut-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    color: #475569;
}

.pjd-donut-legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* 바 차트 (월별 매출) */
.pjd-bar-chart {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 100px;
    padding-top: 8px;
}

.pjd-bar-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.pjd-bar-fill {
    width: 100%;
    border-radius: 6px 6px 0 0;
    background: linear-gradient(180deg, #42a5f5, #1565c0);
    min-height: 4px;
    transition: height 0.4s ease;
}

.pjd-bar-label {
    font-size: 0.65rem;
    color: #94a3b8;
    white-space: nowrap;
}

/* 활동 피드 */
.pjd-activity-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 260px;
    overflow-y: auto;
}

.pjd-activity-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 6px;
    border-radius: 10px;
    transition: background 0.2s;
}

.pjd-activity-item:hover {
    background: #f8fafc;
}

.pjd-activity-icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.pjd-activity-body {
    flex: 1;
    min-width: 0;
}

.pjd-activity-text {
    font-size: 0.8rem;
    color: #334155;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pjd-activity-time {
    font-size: 0.68rem;
    color: #94a3b8;
    margin-top: 2px;
}

/* 마감 임박 */
.pjd-deadline-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pjd-deadline-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 6px;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.2s;
}

.pjd-deadline-item:hover {
    background: #f8fafc;
}

.pjd-deadline-status {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    flex-shrink: 0;
}

.pjd-deadline-info {
    flex: 1;
    min-width: 0;
}

.pjd-deadline-title {
    font-size: 0.82rem;
    font-weight: 600;
    color: #1e293b;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pjd-deadline-meta {
    font-size: 0.7rem;
    color: #94a3b8;
}

.pjd-deadline-dday {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    flex-shrink: 0;
}

.pjd-dday-danger {
    background: #fef2f2;
    color: #dc2626;
}

.pjd-dday-warning {
    background: #fffbeb;
    color: #d97706;
}

.pjd-dday-safe {
    background: #f0fdf4;
    color: #16a34a;
}

/* TOP 5 클라이언트 */
.pjd-top-client-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pjd-top-client-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pjd-top-client-rank {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.68rem;
    font-weight: 800;
    color: #64748b;
    flex-shrink: 0;
}

.pjd-top-client-info {
    flex: 1;
    min-width: 0;
}

.pjd-top-client-name {
    font-size: 0.8rem;
    font-weight: 600;
    color: #1e293b;
}

.pjd-top-client-bar {
    height: 6px;
    background: #f1f5f9;
    border-radius: 3px;
    margin-top: 4px;
    overflow: hidden;
}

.pjd-top-client-bar-fill {
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, #1565c0, #42a5f5);
    transition: width 0.5s ease;
}

.pjd-top-client-revenue {
    font-size: 0.72rem;
    font-weight: 600;
    color: #64748b;
    white-space: nowrap;
    flex-shrink: 0;
}

/* 카테고리별 */
.pjd-cat-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pjd-cat-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pjd-cat-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    flex-shrink: 0;
}

.pjd-cat-info {
    flex: 1;
    min-width: 0;
}

.pjd-cat-name {
    font-size: 0.8rem;
    font-weight: 600;
    color: #1e293b;
}

.pjd-cat-bar {
    height: 6px;
    background: #f1f5f9;
    border-radius: 3px;
    margin-top: 3px;
    overflow: hidden;
}

.pjd-cat-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.5s ease;
}

.pjd-cat-count {
    font-size: 0.72rem;
    font-weight: 600;
    color: #64748b;
    white-space: nowrap;
    flex-shrink: 0;
}

/* 위젯 빈 상태 */
.pjd-widget-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px;
    gap: 6px;
}

.pjd-widget-empty-icon {
    font-size: 1.8rem;
}

.pjd-widget-empty-text {
    font-size: 0.78rem;
    color: #94a3b8;
}

/* ── 폴더 카드 그리드 ── */
.pjd-folder-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 18px;
    margin-top: 12px;
}

.pjd-folder-card {
    background: #fff;
    border: 1px solid #e8ecf2;
    border-radius: 16px;
    padding: 22px;
    cursor: pointer;
    transition: all 0.25s ease;
    position: relative;
    overflow: hidden;
}

.pjd-folder-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(135deg, #6366f1, #818cf8);
    opacity: 0;
    transition: opacity 0.25s;
}

.pjd-folder-card:hover {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
    transform: translateY(-3px);
}

.pjd-folder-card:hover::before {
    opacity: 1;
}

.pjd-folder-top {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.pjd-folder-icon {
    font-size: 1.6rem;
}

.pjd-folder-name {
    font-size: 1rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
}

.pjd-folder-count {
    font-size: 0.75rem;
    color: #94a3b8;
    margin-top: 2px;
}

.pjd-folder-stats {
    display: flex;
    gap: 16px;
    margin-bottom: 14px;
}

.pjd-folder-stat {
    text-align: center;
}

.pjd-folder-stat-num {
    font-size: 1.1rem;
    font-weight: 800;
}

.pjd-folder-stat-label {
    font-size: 0.68rem;
    color: #94a3b8;
}

.pjd-folder-progress {
    height: 6px;
    background: #f1f5f9;
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 10px;
}

.pjd-folder-progress-fill {
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, #6366f1, #818cf8);
    transition: width 0.5s ease;
}

.pjd-folder-footer {
    display: flex;
    justify-content: space-between;
    font-size: 0.72rem;
    color: #94a3b8;
}

.pjd-folder-revenue {
    color: #1565c0;
    font-weight: 600;
}

/* ── 클라이언트 전용 대시보드 ── */
.pjd-client-dash {
    animation: pjdFadeIn 0.3s ease;
}

@keyframes pjdFadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.pjd-client-dash-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 24px;
    background: linear-gradient(135deg, #1e293b, #334155);
    border-radius: 16px;
    margin-bottom: 18px;
    color: #fff;
}

.pjd-client-back-btn {
    background: rgba(255, 255, 255, 0.12);
    border: none;
    color: #fff;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.pjd-client-back-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

.pjd-client-dash-icon {
    font-size: 1.8rem;
}

.pjd-client-dash-info {
    flex: 1;
}

.pjd-client-dash-name {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 800;
}

.pjd-client-dash-sub {
    margin: 4px 0 0;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.65);
}

.pjd-client-dash-actions button {
    background: #fff;
    color: #1e293b;
    border: none;
    padding: 8px 18px;
    border-radius: 10px;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}

.pjd-client-dash-actions button:hover {
    background: #f1f5f9;
}

.pjd-client-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 18px;
}

.pjd-client-kpi {
    background: #fff;
    border: 1px solid #e8ecf2;
    border-radius: 14px;
    padding: 16px;
    text-align: center;
}

.pjd-client-kpi-num {
    font-size: 1.4rem;
    font-weight: 800;
    color: #1e293b;
}

.pjd-client-kpi-label {
    font-size: 0.72rem;
    color: #94a3b8;
    margin-top: 4px;
}

.pjd-client-body {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 18px;
}

.pjd-client-projects-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pjd-client-project-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.2s;
}

.pjd-client-project-card:hover {
    background: #f8fafc;
}

.pjd-client-project-card-info {
    flex: 1;
    min-width: 0;
}

.pjd-client-project-card-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: #1e293b;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pjd-client-project-card-meta {
    font-size: 0.7rem;
    color: #94a3b8;
    margin-top: 2px;
    display: flex;
    gap: 4px;
}

.pjd-client-project-card-progress {
    text-align: right;
}

.pjd-client-project-card-pct {
    font-size: 0.8rem;
    font-weight: 700;
    color: #1565c0;
}

/* ── 다크 모드 ── */
html[data-theme="dark"] .pjd-widget,
html[data-theme="dark"] .pjd-folder-card,
html[data-theme="dark"] .pjd-client-kpi {
    background: #1e293b;
    border-color: #334155;
}

html[data-theme="dark"] .pjd-widget-title,
html[data-theme="dark"] .pjd-folder-name,
html[data-theme="dark"] .pjd-deadline-title,
html[data-theme="dark"] .pjd-top-client-name,
html[data-theme="dark"] .pjd-cat-name,
html[data-theme="dark"] .pjd-client-kpi-num,
html[data-theme="dark"] .pjd-client-project-card-title {
    color: #e2e8f0;
}

html[data-theme="dark"] .pjd-widget-badge {
    background: #334155;
    color: #94a3b8;
}

html[data-theme="dark"] .pjd-widget:hover,
html[data-theme="dark"] .pjd-folder-card:hover {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

html[data-theme="dark"] .pjd-activity-item:hover,
html[data-theme="dark"] .pjd-deadline-item:hover,
html[data-theme="dark"] .pjd-client-project-card:hover {
    background: #334155;
}

html[data-theme="dark"] .pjd-activity-text,
html[data-theme="dark"] .pjd-donut-legend-item {
    color: #cbd5e1;
}

html[data-theme="dark"] .pjd-top-client-bar,
html[data-theme="dark"] .pjd-cat-bar,
html[data-theme="dark"] .pjd-folder-progress {
    background: #334155;
}

html[data-theme="dark"] .pjd-widget-empty-text {
    color: #64748b;
}

/* ── 모바일 반응형 ── */
@media (max-width: 1024px) {
    .pjd-widgets-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .pjd-client-body {
        grid-template-columns: 1fr;
    }

    .pjd-client-kpi-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .pjd-widgets-grid {
        grid-template-columns: 1fr;
    }

    .pjd-folder-grid {
        grid-template-columns: 1fr;
    }

    .pjd-client-kpi-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .pjd-client-dash-header {
        flex-wrap: wrap;
        gap: 10px;
        padding: 16px;
    }

    .pjd-client-dash-actions {
        width: 100%;
        text-align: right;
    }
}

@media (max-width: 480px) {
    .pjd-client-kpi-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .pjd-client-kpi {
        padding: 12px 8px;
    }

    .pjd-client-kpi-num {
        font-size: 1.1rem;
    }

    .pjd-folder-card {
        padding: 16px;
    }
}

/* ======================================
   공통 검색 박스
   ====================================== */
.admin-search-box {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 480px;
    margin-bottom: 16px;
}

.admin-search-icon {
    position: absolute;
    left: 14px;
    font-size: 15px;
    color: #94a3b8;
    pointer-events: none;
    z-index: 1;
}

.admin-search-input {
    width: 100%;
    padding: 11px 80px 11px 40px;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    font-size: 14px;
    background: #fff;
    color: #1e293b;
    transition: all .2s;
    outline: none;
}

.admin-search-input::placeholder {
    color: #94a3b8;
}

.admin-search-input:focus {
    border-color: #a60e16;
    box-shadow: 0 0 0 3px rgba(166, 14, 22, .08);
}

.admin-search-clear {
    position: absolute;
    right: 10px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: #f1f5f9;
    color: #64748b;
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .2s;
}

.admin-search-clear:hover {
    background: #fee2e2;
    color: #dc2626;
}

.admin-search-count {
    position: absolute;
    right: 44px;
    font-size: 11px;
    color: #94a3b8;
    white-space: nowrap;
}

/* 다크 모드 */
[data-theme="dark"] .admin-search-input {
    background: #1e293b;
    border-color: #334155;
    color: #e2e8f0;
}

[data-theme="dark"] .admin-search-input:focus {
    border-color: #ef4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, .1);
}

[data-theme="dark"] .admin-search-icon {
    color: #64748b;
}

[data-theme="dark"] .admin-search-clear {
    background: #334155;
    color: #94a3b8;
}

[data-theme="dark"] .admin-search-clear:hover {
    background: #7f1d1d;
    color: #fca5a5;
}

[data-theme="dark"] .admin-search-count {
    color: #64748b;
}

/* 반응형 */
@media (max-width: 768px) {
    .admin-search-box {
        max-width: 100%;
    }
}/**
 * Notion 스타일 Rich Text Editor 스타일
 */

/* 에디터 래퍼 */
.rich-editor-wrapper {
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    background: white;
    transition: all 0.2s ease;
}

.rich-editor-wrapper:hover {
    border-color: #c0c0c0;
}

.rich-editor-wrapper.focused {
    border-color: #a60e16;
    box-shadow: 0 0 0 3px rgba(166, 14, 22, 0.1);
}

/* 에디터 콘텐츠 영역 */
.rich-editor-content {
    min-height: 150px;
    padding: 1rem;
    outline: none;
    line-height: 1.7;
    font-size: 0.95rem;
    color: #333;
}

.rich-editor-content:empty::before {
    content: attr(data-placeholder);
    color: #aaa;
    pointer-events: none;
}

/* 에디터 내부 요소 스타일 */
.rich-editor-content h1 {
    font-size: 1.8rem;
    font-weight: 700;
    margin: 1rem 0 0.5rem;
    color: #222;
}

.rich-editor-content h2 {
    font-size: 1.4rem;
    font-weight: 600;
    margin: 0.8rem 0 0.4rem;
    color: #333;
}

.rich-editor-content h3 {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0.6rem 0 0.3rem;
    color: #444;
}

.rich-editor-content p {
    margin: 0.5rem 0;
}

.rich-editor-content a {
    color: #a60e16;
    text-decoration: underline;
}

.rich-editor-content a:hover {
    color: #7a0b11;
}

.rich-editor-content mark {
    background-color: #fff3a3;
    padding: 2px 4px;
    border-radius: 3px;
}

.rich-editor-content blockquote {
    border-left: 4px solid #a60e16;
    margin: 1rem 0;
    padding: 0.5rem 1rem;
    background: #fafafa;
    color: #666;
    font-style: italic;
}

.rich-editor-content ul,
.rich-editor-content ol {
    margin: 0.5rem 0;
    padding-left: 1.5rem;
}

.rich-editor-content li {
    margin: 0.25rem 0;
}

/* 플로팅 툴바 */
.rich-editor-toolbar {
    position: absolute;
    z-index: 99999;
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 6px 8px;
    background: linear-gradient(135deg, #2d2d2d 0%, #1a1a1a 100%);
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transform: translateY(5px);
    transition: all 0.2s ease;
}

.rich-editor-toolbar.visible {
    opacity: 1;
    transform: translateY(0);
}

/* 툴바 화살표 */
.rich-editor-toolbar::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid #1a1a1a;
}

/* 툴바 버튼 */
.rich-editor-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.rich-editor-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: scale(1.05);
}

.rich-editor-btn:active {
    transform: scale(0.95);
}

.rich-editor-btn b,
.rich-editor-btn i,
.rich-editor-btn u,
.rich-editor-btn s {
    font-size: 15px;
}

/* 구분선 */
.rich-editor-toolbar .separator {
    width: 1px;
    height: 20px;
    margin: 0 4px;
    background: rgba(255, 255, 255, 0.2);
}

/* 색상 선택기 */
.rich-editor-color-wrap {
    position: relative;
}

.rich-editor-color-palette {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 8px;
    padding: 10px;
    background: #2d2d2d;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .4);
    z-index: 100000;
    min-width: 180px;
}

.color-palette-label {
    font-size: 10px;
    color: #999;
    font-weight: 600;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.color-palette-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 4px;
}

.color-swatch {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    transition: transform .15s, box-shadow .15s;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: #999;
}

.color-swatch:hover {
    transform: scale(1.15);
    box-shadow: 0 0 0 2px #fff;
}

/* 에디터 내 이미지 */
.rich-editor-content img {
    max-width: 100%;
    border-radius: 8px;
    margin: 0.75rem 0;
    display: block;
}

/* 에디터 하단 바 */
.editor-bottom-bar {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem 1rem;
    border-top: 1px solid #f0f0f0;
}

.editor-add-image {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.8rem;
    background: #f5f5f5;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-size: 0.8rem;
    color: #555;
    cursor: pointer;
    transition: all 0.2s;
}

.editor-add-image:hover {
    background: #eee;
    border-color: #ccc;
    color: #333;
}

.editor-hint {
    font-size: 0.72rem;
    color: #aaa;
}

/* 업로드 중 오버레이 */
.editor-uploading {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    font-size: 0.9rem;
    color: #666;
    z-index: 10;
    border-radius: 12px;
}

.upload-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid #e0e0e0;
    border-top-color: #a60e16;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* 반응형 */
@media (max-width: 768px) {
    .rich-editor-content {
        min-height: 120px;
        padding: 0.75rem;
        font-size: 0.9rem;
    }

    .rich-editor-toolbar {
        padding: 4px 6px;
        gap: 1px;
    }

    .rich-editor-btn {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }

    .editor-bottom-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
}

/* 다크모드 지원 (선택적) */
@media (prefers-color-scheme: dark) {
    .rich-editor-wrapper {
        background: #2d2d2d;
        border-color: #444;
    }

    .rich-editor-wrapper.focused {
        border-color: #ff6b6b;
        box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.2);
    }

    .rich-editor-content {
        color: #e0e0e0;
    }

    .rich-editor-content h1,
    .rich-editor-content h2,
    .rich-editor-content h3 {
        color: #fff;
    }

    .rich-editor-content a {
        color: #ff8a8a;
    }
}/* =============================================
   프로젝트 관리 페이지 – 프리미엄 UI
   Brand: #a60e16 / BG: #f5f7fa
   ============================================= */

/* ── 페이지 탭 내비게이션 ── */
.pj-page-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 24px;
    padding: 5px;
    background: #f0f2f5;
    border-radius: 16px;
    width: fit-content;
}

.pj-page-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    border-radius: 12px;
    border: none;
    background: transparent;
    font-size: 14px;
    font-weight: 600;
    color: #888;
    cursor: pointer;
    transition: all .25s ease;
    position: relative;
}

.pj-page-tab:hover {
    color: #555;
    background: rgba(255, 255, 255, .5);
}

.pj-page-tab.active {
    background: #fff;
    color: #1a1a2e;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .08), 0 1px 2px rgba(0, 0, 0, .04);
}

.pj-page-tab-icon {
    font-size: 16px;
}

/* 다크모드 */
[data-theme="dark"] .pj-page-tabs {
    background: rgba(255, 255, 255, .06);
}

[data-theme="dark"] .pj-page-tab {
    color: #888;
}

[data-theme="dark"] .pj-page-tab:hover {
    color: #ccc;
    background: rgba(255, 255, 255, .06);
}

[data-theme="dark"] .pj-page-tab.active {
    background: rgba(255, 255, 255, .12);
    color: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
}

/* ── 알림 배너 ── */
.pj-notif-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(135deg, #fff8e1, #fff3cd);
    border: 1px solid #ffe082;
    border-radius: 14px;
    padding: 14px 20px;
    margin-bottom: 24px;
    animation: pjFadeSlide .4s ease
}

.pj-notif-icon {
    font-size: 24px;
    flex-shrink: 0
}

.pj-notif-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    flex: 1;
    font-size: 13px
}

.pj-notif-item {
    font-weight: 600;
    cursor: pointer;
    transition: opacity .2s
}

.pj-notif-item:hover {
    opacity: .7
}

.pj-notif-close {
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    color: #999;
    padding: 4px 8px;
    border-radius: 8px;
    transition: .2s
}

.pj-notif-close:hover {
    background: rgba(0, 0, 0, .06);
    color: #333
}

/* ══════════════════════════════════════════
   KPI 대시보드
   ══════════════════════════════════════════ */
.pjd-dashboard {
    margin-bottom: 28px
}

.pjd-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}

.pjd-kpi-card {
    background: #fff;
    border-radius: 18px;
    padding: 22px 20px;
    display: flex;
    align-items: center;
    gap: 18px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .06);
    border: 1px solid rgba(0, 0, 0, .04);
    transition: transform .25s, box-shadow .25s;
    position: relative;
    overflow: hidden;
}

.pjd-kpi-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #a60e16, #e74c3c);
    opacity: 0;
    transition: opacity .3s;
}

.pjd-kpi-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, .1)
}

.pjd-kpi-card:hover::before {
    opacity: 1
}

.pjd-kpi-card.pjd-kpi-main {
    background: linear-gradient(135deg, #f0f4ff 0%, #e8edff 100%);
    border-color: #c7d2fe;
}

.pjd-kpi-card.pjd-kpi-main::before {
    background: linear-gradient(90deg, #4f46e5, #818cf8)
}

.pjd-kpi-card.pjd-kpi-alert {
    background: linear-gradient(135deg, #fff5f5, #ffe8e8);
    border-color: #fecaca;
}

.pjd-kpi-card.pjd-kpi-alert::before {
    background: linear-gradient(90deg, #dc2626, #f87171)
}

.pjd-kpi-icon {
    font-size: 36px;
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .03);
    border-radius: 14px
}

/* 진행률 링 — 크기 고정 */
.pjd-kpi-ring-wrap {
    position: relative;
    width: 56px;
    height: 56px;
    flex-shrink: 0
}

.pjd-ring-svg {
    width: 56px;
    height: 56px;
    display: block;
    transform: rotate(-90deg)
}

.pjd-ring-center {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center
}

.pjd-ring-num {
    font-size: 13px;
    font-weight: 800;
    color: #4f46e5
}

.pjd-kpi-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0
}

.pjd-kpi-num {
    font-size: 30px;
    font-weight: 800;
    color: #1a1a1a;
    line-height: 1.1
}

.pjd-kpi-label {
    font-size: 13px;
    color: #888;
    font-weight: 500
}

.pjd-kpi-sub {
    font-size: 11px;
    color: #aaa
}

.pjd-kpi-status-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #555;
    margin-top: 2px
}

.pjd-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0
}

.pjd-kpi-money {
    font-size: 22px;
    font-weight: 800;
    color: #a60e16
}

.pjd-kpi-money-row {
    font-size: 12px;
    margin-top: 2px
}

.pjd-money-paid {
    color: #2e7d32;
    font-weight: 600
}

.pjd-money-unpaid {
    color: #e65100;
    font-weight: 600
}

.pjd-kpi-alert-num {
    font-size: 22px;
    font-weight: 800;
    color: #c62828
}

.pjd-kpi-ok {
    font-size: 16px;
    font-weight: 700;
    color: #2e7d32
}

/* ══════════════════════════════════════════
   위젯 그리드 (ProjectDashboardWidgets)
   ══════════════════════════════════════════ */
.pjd-widget-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.pjd-widget-card {
    background: #fff;
    border-radius: 18px;
    padding: 22px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .06);
    border: 1px solid rgba(0, 0, 0, .04);
    transition: transform .25s, box-shadow .25s;
}

.pjd-widget-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(0, 0, 0, .1)
}

.pjd-widget-card.pjd-widget-wide {
    grid-column: span 2
}

.pjd-widget-title {
    font-size: 14px;
    font-weight: 700;
    color: #333;
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 2px solid #f5f5f5
}

.pjd-widget-empty {
    text-align: center;
    padding: 28px;
    color: #ccc;
    font-size: 13px
}

/* 도넛 차트 — 크기 고정 */
.pjd-donut-wrap {
    position: relative;
    width: 130px;
    height: 130px;
    margin: 0 auto 14px
}

.pjd-donut-svg {
    width: 130px;
    height: 130px;
    display: block;
    transform: rotate(-90deg)
}

.pjd-donut-center {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    font-weight: 800;
    color: #333
}

.pjd-donut-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    justify-content: center
}

.pjd-donut-legend-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: #666
}

.pjd-donut-legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0
}

/* 바 차트 */
.pjd-bar-chart {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    height: 170px;
    padding-top: 20px
}

.pjd-bar-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%
}

.pjd-bar-value {
    font-size: 10px;
    color: #888;
    margin-bottom: 4px;
    white-space: nowrap
}

.pjd-bar-track {
    width: 100%;
    max-width: 36px;
    flex: 1;
    background: #f5f5f5;
    border-radius: 8px 8px 0 0;
    display: flex;
    align-items: flex-end;
    overflow: hidden
}

.pjd-bar-fill {
    width: 100%;
    background: linear-gradient(180deg, #6366f1, #818cf8);
    border-radius: 8px 8px 0 0;
    min-height: 4px;
    transition: height .6s ease
}

.pjd-bar-label {
    font-size: 11px;
    color: #666;
    margin-top: 6px;
    font-weight: 600
}

/* 활동 피드 */
.pjd-activity-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 300px;
    overflow-y: auto
}

.pjd-activity-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    transition: background .2s
}

.pjd-activity-item:hover {
    background: #f8f9fa
}

.pjd-activity-icon {
    font-size: 18px;
    flex-shrink: 0;
    margin-top: 1px
}

.pjd-activity-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0
}

.pjd-activity-text {
    font-size: 13px;
    color: #444;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical
}

.pjd-activity-time {
    font-size: 11px;
    color: #aaa
}

/* 마감 임박 */
.pjd-deadline-list {
    display: flex;
    flex-direction: column;
    gap: 8px
}

.pjd-deadline-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 12px;
    transition: background .2s
}

.pjd-deadline-item:hover {
    background: #f8f9fa
}

.pjd-deadline-dday {
    min-width: 56px;
    padding: 5px 10px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 800;
    text-align: center;
    background: linear-gradient(135deg, #e3f2fd, #bbdefb);
    color: #1565c0
}

.pjd-deadline-dday.urgent {
    background: linear-gradient(135deg, #ffebee, #ffcdd2);
    color: #c62828;
    animation: pjPulse 2s infinite
}

.pjd-deadline-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0
}

.pjd-deadline-title {
    font-size: 13px;
    font-weight: 600;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.pjd-deadline-client {
    font-size: 11px;
    color: #999
}

/* TOP 랭킹 */
.pjd-top-list {
    display: flex;
    flex-direction: column;
    gap: 10px
}

.pjd-top-item {
    display: grid;
    grid-template-columns: 32px 1fr 80px auto;
    align-items: center;
    gap: 10px;
    padding: 4px 0
}

.pjd-top-rank {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: linear-gradient(135deg, #f0f4ff, #e8edff);
    color: #4f46e5;
    font-size: 13px;
    font-weight: 800
}

.pjd-top-name {
    font-size: 13px;
    font-weight: 500;
    color: #444;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.pjd-top-bar-track {
    height: 7px;
    background: #f0f0f0;
    border-radius: 4px;
    overflow: hidden
}

.pjd-top-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #6366f1, #a78bfa);
    border-radius: 4px;
    transition: width .6s ease
}

.pjd-top-value {
    font-size: 12px;
    font-weight: 700;
    color: #555;
    text-align: right;
    white-space: nowrap
}

/* ── 7. 작업 완료율 위젯 ── */
.pjd-task-progress-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pjd-task-progress-item {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.pjd-tp-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.pjd-tp-title {
    font-size: 12px;
    font-weight: 600;
    color: #444;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}

.pjd-tp-ratio {
    font-size: 11px;
    font-weight: 700;
    color: #888;
    flex-shrink: 0;
    margin-left: 8px;
}

.pjd-tp-bar-track {
    height: 6px;
    background: #f0f0f0;
    border-radius: 3px;
    overflow: hidden;
}

.pjd-tp-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width .5s ease;
}

/* ── 8. 최근 업데이트 위젯 ── */
.pjd-recent-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pjd-recent-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 10px;
    background: #f8f9fc;
    transition: all .2s;
}

.pjd-recent-item:hover {
    background: #f0f2f8;
}

.pjd-recent-status {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
}

.pjd-recent-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pjd-recent-title {
    font-size: 12px;
    font-weight: 600;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pjd-recent-meta {
    display: flex;
    gap: 8px;
    font-size: 10px;
    color: #999;
}

.pjd-recent-time {
    color: #bbb;
}

.pjd-recent-progress {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    width: 70px;
}

.pjd-rp-bar {
    flex: 1;
    height: 5px;
    background: #f0f0f0;
    border-radius: 3px;
    overflow: hidden;
}

.pjd-rp-bar>div {
    height: 100%;
    border-radius: 3px;
    transition: width .5s ease;
}

.pjd-rp-pct {
    font-size: 10px;
    font-weight: 700;
    color: #888;
    width: 28px;
    text-align: right;
}

/* ══════════════════════════════════════════
   상태 필터 필
   ══════════════════════════════════════════ */
.pjd-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px
}

.pj-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 18px;
    border-radius: 100px;
    border: 1.5px solid #e0e0e0;
    background: #fff;
    font-size: 13px;
    font-weight: 600;
    color: #555;
    cursor: pointer;
    transition: all .25s
}

.pj-pill:hover {
    border-color: #bbb;
    background: #fafafa;
    transform: translateY(-1px)
}

.pj-pill.active {
    background: #1a1a2e;
    color: #fff;
    border-color: #1a1a2e;
    box-shadow: 0 4px 12px rgba(26, 26, 46, .2)
}

.pj-pill-blue.active {
    background: #1565c0;
    border-color: #1565c0;
    box-shadow: 0 4px 12px rgba(21, 101, 192, .3)
}

.pj-pill-green.active {
    background: #2e7d32;
    border-color: #2e7d32;
    box-shadow: 0 4px 12px rgba(46, 125, 50, .3)
}

.pj-pill-orange.active {
    background: #e65100;
    border-color: #e65100;
    box-shadow: 0 4px 12px rgba(230, 81, 0, .3)
}

.pj-pill-count {
    background: rgba(0, 0, 0, .08);
    padding: 1px 8px;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 700
}

.pj-pill.active .pj-pill-count {
    background: rgba(255, 255, 255, .2)
}

/* 카테고리/클라이언트/날짜 필터 */
.pjd-cat-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px;
    padding: 10px 14px;
    background: #fff;
    border-radius: 14px;
    border: 1px solid rgba(0, 0, 0, .04);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .03)
}

.pjd-cat-tab {
    padding: 7px 16px;
    border-radius: 10px;
    border: none;
    background: transparent;
    font-size: 13px;
    font-weight: 500;
    color: #777;
    cursor: pointer;
    transition: all .2s
}

.pjd-cat-tab:hover {
    background: #f5f5f5;
    color: #333
}

.pjd-cat-tab.active {
    background: linear-gradient(135deg, #a60e16, #c62828);
    color: #fff;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(166, 14, 22, .2)
}

.pjd-cat-tab-manage {
    margin-left: auto;
    background: #f0f4ff !important;
    color: #4f46e5 !important;
    font-weight: 600 !important;
    border: 1px dashed #c7d2fe;
    border-radius: 10px
}

.pjd-cat-tab-manage:hover {
    background: #e8edff !important;
    color: #3730a3 !important
}

.pjd-client-filter {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    flex-wrap: wrap
}

.pjd-client-filter-label {
    font-size: 13px;
    font-weight: 600;
    color: #555;
    flex-shrink: 0
}

.pjd-client-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px
}

.pjd-client-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    border-radius: 100px;
    border: 1px solid #e0e0e0;
    background: #fff;
    font-size: 12px;
    color: #666;
    cursor: pointer;
    transition: all .2s
}

.pjd-client-pill:hover {
    border-color: #bbb;
    transform: translateY(-1px)
}

.pjd-client-pill.active {
    background: #333;
    color: #fff;
    border-color: #333
}

.pjd-client-pill-count {
    background: rgba(0, 0, 0, .06);
    padding: 0 6px;
    border-radius: 100px;
    font-size: 10px;
    font-weight: 700
}

.pjd-client-pill.active .pjd-client-pill-count {
    background: rgba(255, 255, 255, .2)
}

/* 드래그 순서 변경 */
.pjd-client-pill[draggable="true"] {
    cursor: grab;
    user-select: none;
    transition: all .2s, transform .15s;
}

.pjd-client-pill[draggable="true"]:active {
    cursor: grabbing;
}

.pjd-client-pill.dragging {
    opacity: 0.4 !important;
    transform: scale(0.95);
}

.pjd-client-pill.drag-over {
    border-color: #4f46e5 !important;
    background: #f0f4ff !important;
    color: #4f46e5 !important;
    transform: scale(1.05);
    box-shadow: 0 0 12px rgba(79, 70, 229, .25);
}

[data-theme="dark"] .pjd-client-pill.drag-over {
    border-color: #818cf8 !important;
    background: rgba(99, 102, 241, .2) !important;
    color: #818cf8 !important;
    box-shadow: 0 0 12px rgba(99, 102, 241, .3);
}

/* 모바일 터치 드래그 */
.pjd-client-pill[draggable="true"] {
    touch-action: auto;
    -webkit-touch-callout: none;
}

.pjd-client-pill.dragging {
    touch-action: none;
}

.pjd-date-filter {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap
}

.pjd-date-filter-label {
    font-size: 13px;
    font-weight: 600;
    color: #555;
    flex-shrink: 0
}

.pjd-date-presets {
    display: flex;
    gap: 4px;
    flex-wrap: wrap
}

.pjd-date-preset {
    padding: 6px 14px;
    border-radius: 10px;
    border: 1px solid #e0e0e0;
    background: #fff;
    font-size: 12px;
    color: #666;
    cursor: pointer;
    transition: all .2s
}

.pjd-date-preset:hover {
    background: #f5f5f5
}

.pjd-date-preset.active {
    background: #1565c0;
    color: #fff;
    border-color: #1565c0
}

.pjd-date-preset.pjd-date-clear {
    color: #c62828;
    border-color: #ffcdd2
}

.pjd-date-preset.pjd-date-clear:hover {
    background: #fff5f5
}

.pjd-date-inputs {
    display: flex;
    align-items: center;
    gap: 6px
}

.pjd-date-inputs input[type="date"] {
    padding: 6px 12px;
    border: 1px solid #ddd;
    border-radius: 10px;
    font-size: 12px;
    color: #555;
    background: #fff
}

.pjd-date-sep {
    color: #bbb;
    font-size: 14px
}

.pjd-sort-select {
    padding: 7px 14px;
    border: 1px solid #ddd;
    border-radius: 10px;
    font-size: 12px;
    color: #555;
    background: #fff;
    cursor: pointer
}

/* ══════════════════════════════════════════
   툴바
   ══════════════════════════════════════════ */
.pj-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
    padding: 14px 20px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .05);
    border: 1px solid rgba(0, 0, 0, .04)
}

.pj-toolbar-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap
}

.pj-toolbar-right {
    display: flex;
    align-items: center;
    gap: 10px
}

.pj-result-count {
    font-size: 13px;
    color: #888;
    font-weight: 500
}

.pj-clear-filter {
    padding: 5px 14px;
    border-radius: 100px;
    border: 1px solid #ffcdd2;
    background: #fff5f5;
    font-size: 12px;
    color: #c62828;
    cursor: pointer;
    transition: all .2s;
    font-weight: 600
}

.pj-clear-filter:hover {
    background: #ffebee;
    transform: translateY(-1px)
}

.pj-view-toggle {
    display: flex;
    background: #f5f5f5;
    border-radius: 12px;
    padding: 3px;
    gap: 2px
}

.pj-vt-btn {
    padding: 7px 12px;
    border: none;
    background: transparent;
    border-radius: 10px;
    cursor: pointer;
    font-size: 16px;
    transition: all .2s;
    color: #888
}

.pj-vt-btn:hover {
    background: #eee
}

.pj-vt-btn.active {
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .1);
    color: #333
}

.pj-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 22px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, #a60e16, #d32f2f);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all .25s;
    box-shadow: 0 4px 14px rgba(166, 14, 22, .25)
}

.pj-add-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(166, 14, 22, .35)
}

.pj-add-btn span {
    font-size: 18px;
    font-weight: 300
}

/* ── 로딩/빈 상태 ── */
.pj-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 60px 20px;
    color: #999;
    font-size: 14px
}

.pj-loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid #f0f0f0;
    border-top-color: #a60e16;
    border-radius: 50%;
    animation: spin .8s linear infinite
}

.pj-empty {
    text-align: center;
    padding: 60px 20px;
    color: #999
}

.pj-empty-icon {
    font-size: 52px;
    margin-bottom: 16px;
    opacity: .8
}

.pj-empty h3 {
    font-size: 18px;
    color: #555;
    margin-bottom: 8px
}

.pj-empty p {
    font-size: 14px;
    color: #999;
    margin-bottom: 20px
}

/* ══════════════════════════════════════════
   카드 보드 뷰
   ══════════════════════════════════════════ */
.pj-board {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 16px
}

.pj-card {
    background: #fff;
    border-radius: 18px;
    padding: 0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .06);
    border: 1px solid rgba(0, 0, 0, .04);
    overflow: hidden;
    transition: all .3s cubic-bezier(.4, 0, .2, 1);
    border-top: 3px solid var(--accent, #1565c0);
}

.pj-card:hover {
    box-shadow: 0 8px 32px rgba(0, 0, 0, .12);
    transform: translateY(-3px)
}

.pj-card.expanded {
    box-shadow: 0 12px 40px rgba(0, 0, 0, .14)
}

.pj-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 20px 0
}

.pj-card-status {
    padding: 5px 14px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    letter-spacing: -.2px
}

.pj-card-actions {
    display: flex;
    gap: 2px
}

.pj-card-actions button {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    border-radius: 10px;
    cursor: pointer;
    font-size: 14px;
    transition: all .2s;
    display: flex;
    align-items: center;
    justify-content: center
}

.pj-card-actions button:hover {
    background: #f5f5f5;
    transform: scale(1.1)
}

.pj-card-title {
    padding: 12px 20px 6px;
    font-size: 17px;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.3;
    margin: 0;
    cursor: pointer;
    transition: color .2s
}

.pj-card-title:hover {
    color: #a60e16
}

.pj-card-meta-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 20px 14px;
    flex-wrap: wrap
}

.pj-priority-tag {
    font-size: 12px;
    font-weight: 600
}

.pj-cat-tag {
    padding: 3px 10px;
    border-radius: 8px;
    background: linear-gradient(135deg, #f0f4ff, #e8edff);
    color: #4f46e5;
    font-size: 11px;
    font-weight: 700
}

.pj-dday {
    padding: 3px 10px;
    border-radius: 8px;
    background: linear-gradient(135deg, #e3f2fd, #bbdefb);
    color: #1565c0;
    font-size: 11px;
    font-weight: 800
}

.pj-dday.urgent {
    background: linear-gradient(135deg, #ffebee, #ffcdd2);
    color: #c62828;
    animation: pjPulse 2s infinite
}

/* 진행률 바 */
.pj-progress-section {
    padding: 0 20px 14px
}

.pj-progress-label {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #888;
    margin-bottom: 6px
}

.pj-progress-pct {
    font-weight: 700;
    color: #555
}

.pj-progress-track {
    height: 7px;
    background: #f0f0f0;
    border-radius: 4px;
    overflow: hidden
}

.pj-progress-fill {
    height: 100%;
    border-radius: 4px;
    transition: width .5s ease
}

.pj-card-info {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    padding: 0 20px 16px;
    font-size: 12px;
    color: #888
}

/* 카드 확장 – 프리미엄 */
.pj-card-expanded {
    padding: 20px 24px;
    border-top: 1px solid #eee;
    background: linear-gradient(180deg, #f8f9fc, #fff);
    display: flex;
    flex-direction: column;
    gap: 14px;
    animation: pjFadeSlide .3s ease
}

/* 정보 그리드 (2열) */
.pj-exp-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 8px;
}

.pj-exp-info-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 12px;
    transition: all .2s;
}

.pj-exp-info-item:hover {
    border-color: #ddd;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .04);
}

.pj-exp-info-icon {
    font-size: 18px;
    flex-shrink: 0;
}

.pj-exp-info-label {
    display: block;
    font-size: 10px;
    font-weight: 600;
    color: #999;
    text-transform: uppercase;
    letter-spacing: .3px;
    line-height: 1;
    margin-bottom: 2px;
}

.pj-exp-info-value {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #333;
    line-height: 1.2;
}

/* 섹션 공통 */
.pj-exp-section,
.pj-exp-desc-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pj-exp-section-title {
    font-size: 12px;
    font-weight: 700;
    color: #555;
    letter-spacing: -.2px;
}

/* 설명/메모 박스 */
.pj-exp-desc-box {
    padding: 12px 16px;
    background: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 12px;
}

.pj-exp-desc-content {
    font-size: 13px;
    color: #555;
    line-height: 1.7;
    margin: 6px 0 0;
    word-break: break-word;
}

.pj-exp-desc-content p {
    margin: 4px 0 0;
}

/* 기존 호환 라벨 */
.pj-detail-row {
    display: flex;
    gap: 10px;
    font-size: 13px;
    color: #555
}

.pj-detail-label {
    font-weight: 700;
    color: #333;
    font-size: 12px;
    min-width: 50px;
    flex-shrink: 0
}

.pj-detail-desc {
    font-size: 13px;
    color: #555;
    line-height: 1.6
}

.pj-detail-desc p {
    margin: 4px 0 0
}

.pj-detail-time {
    font-size: 11px;
    color: #bbb;
    text-align: right
}

.pj-expand-tasks,
.pj-expand-files,
.pj-expand-log {
    margin-top: 4px
}

/* 하위 작업 */
.pj-task-preview-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 4px;
}

.pj-task-preview-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 10px;
    font-size: 12px;
    color: #555;
    background: #fff;
    border: 1px solid #f0f0f0;
    transition: all .15s;
}

.pj-task-preview-item:hover {
    border-color: #e0e0e0;
    background: #fafafa;
}

.pj-task-preview-item.done {
    opacity: .5;
    text-decoration: line-through
}

.pj-task-check {
    font-size: 14px
}

.pj-task-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.pj-task-assignee {
    font-size: 11px;
    color: #4f46e5;
    flex-shrink: 0;
    font-weight: 600;
    background: #f0f4ff;
    padding: 2px 8px;
    border-radius: 6px;
}

/* 첨부파일 */
.pj-file-preview-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px
}

.pj-file-preview-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 14px;
    border-radius: 10px;
    background: #fff;
    border: 1px solid #f0f0f0;
    font-size: 12px;
    color: #555;
    text-decoration: none;
    transition: all .2s
}

.pj-file-preview-item:hover {
    border-color: #bbb;
    background: #f9f9f9
}

.pj-file-preview-item small {
    color: #aaa
}

/* 활동 로그 */
.pj-log-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 4px;
}

.pj-log-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #666;
    padding: 6px 10px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid #f5f5f5;
}

.pj-log-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #d0d0d0;
    flex-shrink: 0
}

.pj-log-text {
    flex: 1
}

.pj-log-time {
    font-size: 11px;
    color: #bbb;
    flex-shrink: 0
}

/* 하단 영역 */
.pj-exp-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 8px;
    border-top: 1px solid #f0f0f0;
    margin-top: 4px;
}

.pj-quick-progress {
    display: flex;
    gap: 4px;
}

.pj-qp-btn {
    padding: 6px 14px;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    background: #fff;
    font-size: 11px;
    font-weight: 600;
    color: #888;
    cursor: pointer;
    transition: all .2s
}

.pj-qp-btn:hover {
    background: #f5f5f5;
    transform: translateY(-1px)
}

.pj-qp-btn.active {
    background: linear-gradient(135deg, #1565c0, #42a5f5);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 2px 8px rgba(21, 101, 192, .3)
}

/* 하단 빠른 액션 */
.pj-card-bottom {
    display: flex;
    gap: 6px;
    padding: 12px 24px 16px;
    border-top: 1px solid #f5f5f5;
    justify-content: flex-end;
}

.pj-action-btn {
    flex: none;
    padding: 7px 20px;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    background: #fff;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s;
    color: #666;
    white-space: nowrap;
}

.pj-action-btn:hover {
    transform: translateY(-1px)
}

.pj-act-start:hover {
    background: #e3f2fd;
    color: #1565c0;
    border-color: #90caf9
}

.pj-act-done:hover {
    background: #e8f5e9;
    color: #2e7d32;
    border-color: #a5d6a7
}

.pj-act-hold:hover {
    background: #fff3e0;
    color: #e65100;
    border-color: #ffcc80
}

/* ══════════════════════════════════════════
   리스트 뷰
   ══════════════════════════════════════════ */
.pj-list-view {
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .06);
    border: 1px solid rgba(0, 0, 0, .04)
}

.pj-list-header {
    display: grid;
    grid-template-columns: 100px 1fr 120px 100px 90px 70px;
    gap: 8px;
    padding: 14px 20px;
    background: linear-gradient(135deg, #f8f9fa, #f2f4f7);
    font-size: 12px;
    font-weight: 700;
    color: #888;
    text-transform: uppercase;
    letter-spacing: .5px;
    border-bottom: 2px solid #f0f0f0
}

.pj-list-row {
    display: grid;
    grid-template-columns: 100px 1fr 120px 100px 90px 70px;
    gap: 8px;
    padding: 16px 20px;
    align-items: center;
    border-bottom: 1px solid #f8f8f8;
    transition: all .2s
}

.pj-list-row:hover {
    background: linear-gradient(135deg, #fafbff, #f8f9ff)
}

.pj-list-row:last-child {
    border-bottom: none
}

.pj-lr-status {
    padding: 5px 12px;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 700;
    text-align: center;
    white-space: nowrap
}

.pj-lr-title {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0
}

.pj-lr-title strong {
    font-size: 14px;
    color: #1a1a1a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.pj-lr-title small {
    font-size: 11px;
    color: #aaa
}

.pj-lr-client {
    font-size: 13px;
    color: #666;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.pj-lr-progress {
    display: flex;
    align-items: center;
    gap: 6px
}

.pj-lr-progress small {
    font-size: 11px;
    font-weight: 600;
    color: #888
}

.pj-mini-bar {
    flex: 1;
    height: 6px;
    background: #f0f0f0;
    border-radius: 3px;
    overflow: hidden
}

.pj-mini-bar>div {
    height: 100%;
    border-radius: 3px;
    transition: width .4s ease
}

.pj-lr-due {
    font-size: 12px;
    color: #888
}

.pj-lr-actions {
    display: flex;
    gap: 4px
}

.pj-lr-actions button {
    width: 30px;
    height: 30px;
    border: none;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    transition: all .2s
}

.pj-lr-actions button:hover {
    background: #f0f0f0;
    transform: scale(1.1)
}

/* ══════════════════════════════════════════
   타임라인 뷰
   ══════════════════════════════════════════ */
.pj-timeline-view {
    background: #fff;
    border-radius: 18px;
    padding: 22px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .06);
    border: 1px solid rgba(0, 0, 0, .04)
}

.pj-timeline-header {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 16px;
    padding-bottom: 10px;
    border-bottom: 2px solid #f0f0f0;
    margin-bottom: 12px
}

.pj-tl-label-col {
    font-size: 12px;
    font-weight: 600;
    color: #888;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0
}

.pj-tl-label-col strong {
    color: #333;
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.pj-tl-label-col small {
    font-size: 11px;
    color: #aaa
}

.pj-tl-bar-col {
    position: relative;
    height: 28px
}

.pj-tl-months {
    position: relative;
    width: 100%;
    height: 100%
}

.pj-tl-month {
    position: absolute;
    font-size: 10px;
    color: #bbb;
    border-left: 1px dashed #e0e0e0;
    padding-left: 4px;
    line-height: 28px
}

.pj-tl-row {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 16px;
    padding: 6px 0;
    align-items: center
}

.pj-tl-bar {
    position: absolute;
    height: 22px;
    border-radius: 11px;
    overflow: hidden;
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: opacity .2s, transform .2s
}

.pj-tl-bar:hover {
    opacity: .85;
    transform: scaleY(1.15)
}

.pj-tl-bar-label {
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    padding: 0 8px;
    position: relative;
    z-index: 1;
    white-space: nowrap
}

.pj-tl-bar-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: rgba(255, 255, 255, .2);
    border-radius: 11px 0 0 11px
}

/* ══════════════════════════════════════════
   리포트 뷰
   ══════════════════════════════════════════ */
.pj-report-view {
    display: flex;
    flex-direction: column;
    gap: 20px
}

.pj-report-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px
}

.pj-report-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .06);
    border: 1px solid rgba(0, 0, 0, .04);
    border-left: 4px solid #1565c0;
    transition: transform .2s
}

.pj-report-card:hover {
    transform: translateY(-2px)
}

.pj-report-card.green {
    border-left-color: #2e7d32
}

.pj-report-card.orange {
    border-left-color: #e65100
}

.pj-report-card.blue {
    border-left-color: #6366f1
}

.pj-report-card-icon {
    font-size: 28px
}

.pj-report-card-num {
    font-size: 22px;
    font-weight: 800;
    color: #1a1a1a;
    display: block
}

.pj-report-card small {
    font-size: 12px;
    color: #999
}

.pj-report-section {
    background: #fff;
    border-radius: 16px;
    padding: 22px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .06);
    border: 1px solid rgba(0, 0, 0, .04)
}

.pj-report-section h3 {
    font-size: 15px;
    font-weight: 700;
    color: #333;
    margin: 0 0 16px
}

.pj-report-section.half {
    flex: 1;
    min-width: 0
}

.pj-report-row {
    display: flex;
    gap: 16px
}

.pj-report-chart {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    height: 200px;
    padding-top: 24px
}

.pj-chart-bar-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%
}

.pj-chart-bar-container {
    flex: 1;
    width: 100%;
    max-width: 40px;
    display: flex;
    align-items: flex-end;
    background: #f8f8f8;
    border-radius: 10px 10px 0 0
}

.pj-chart-bar {
    width: 100%;
    background: linear-gradient(180deg, #a60e16, #e74c3c);
    border-radius: 10px 10px 0 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    min-height: 4px;
    transition: height .6s ease;
    position: relative
}

.pj-chart-bar-val {
    font-size: 9px;
    color: #fff;
    font-weight: 700;
    padding-top: 4px;
    white-space: nowrap
}

.pj-chart-bar-label {
    font-size: 11px;
    font-weight: 600;
    color: #666;
    margin-top: 6px
}

.pj-chart-bar-sub {
    font-size: 10px;
    color: #bbb
}

.pj-report-empty {
    text-align: center;
    padding: 30px;
    color: #bbb;
    font-size: 13px
}

.pj-report-stat-list {
    display: flex;
    flex-direction: column;
    gap: 10px
}

.pj-report-stat-item {
    display: flex;
    align-items: center;
    gap: 10px
}

.pj-report-stat-label {
    font-size: 13px;
    color: #555;
    min-width: 80px;
    flex-shrink: 0
}

.pj-report-stat-bar {
    flex: 1;
    height: 8px;
    background: #f0f0f0;
    border-radius: 4px;
    overflow: hidden
}

.pj-report-stat-bar>div {
    height: 100%;
    border-radius: 4px;
    transition: width .6s ease
}

.pj-report-stat-num {
    font-size: 12px;
    font-weight: 700;
    color: #555;
    min-width: 24px;
    text-align: right
}

.pj-unpaid-list {
    display: flex;
    flex-direction: column;
    gap: 8px
}

.pj-unpaid-item {
    display: grid;
    grid-template-columns: 1fr 100px 100px 80px;
    gap: 8px;
    padding: 12px 14px;
    border-radius: 10px;
    background: #fafafa;
    align-items: center;
    font-size: 13px;
    transition: background .2s
}

.pj-unpaid-item:hover {
    background: #f5f5f5
}

.pj-unpaid-title {
    font-weight: 600;
    color: #333
}

.pj-unpaid-client {
    color: #888
}

.pj-unpaid-amount {
    font-weight: 700;
    color: #c62828;
    text-align: right
}

.pj-unpaid-status {
    padding: 3px 10px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    text-align: center
}

.pj-unpaid-status.sent {
    background: #e3f2fd;
    color: #1565c0
}

.pj-unpaid-status.draft {
    background: #fff3e0;
    color: #e65100
}

/* ══════════════════════════════════════════
   클라이언트 대시보드
   ══════════════════════════════════════════ */
.pjd-folder-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px
}

.pjd-folder-card {
    background: #fff;
    border-radius: 18px;
    padding: 28px 22px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .06);
    border: 1px solid rgba(0, 0, 0, .04);
    cursor: pointer;
    transition: all .3s cubic-bezier(.4, 0, .2, 1);
    text-align: center;
}

.pjd-folder-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 36px rgba(0, 0, 0, .12);
    border-color: rgba(166, 14, 22, .15)
}

.pjd-folder-icon {
    font-size: 44px;
    margin-bottom: 12px
}

.pjd-folder-name {
    font-size: 17px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 16px
}

.pjd-folder-stats {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 16px
}

.pjd-folder-stat {
    text-align: center
}

.pjd-folder-stat-num {
    display: block;
    font-size: 20px;
    font-weight: 800;
    color: #333
}

.pjd-folder-stat-label {
    font-size: 11px;
    color: #aaa
}

.pjd-folder-progress {
    display: flex;
    align-items: center;
    gap: 8px
}

.pjd-folder-progress-bar {
    flex: 1;
    height: 6px;
    background: #f0f0f0;
    border-radius: 3px;
    overflow: hidden
}

.pjd-folder-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #4f46e5, #818cf8);
    border-radius: 3px;
    transition: width .4s ease
}

.pjd-folder-progress-text {
    font-size: 12px;
    font-weight: 700;
    color: #888
}

.pjd-folder-revenue {
    font-size: 13px;
    font-weight: 700;
    color: #a60e16;
    margin-top: 12px
}

/* 클라이언트 전용 대시보드 */
.pjd-client-dashboard {
    animation: pjFadeSlide .4s ease
}

.pjd-cd-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px
}

.pjd-cd-back {
    padding: 9px 18px;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    background: #fff;
    font-size: 13px;
    font-weight: 600;
    color: #555;
    cursor: pointer;
    transition: all .2s
}

.pjd-cd-back:hover {
    background: #f5f5f5;
    transform: translateX(-2px)
}

.pjd-cd-title-area {
    display: flex;
    align-items: center;
    gap: 14px
}

.pjd-cd-icon {
    font-size: 36px
}

.pjd-cd-name {
    font-size: 24px;
    font-weight: 800;
    color: #1a1a1a;
    margin: 0
}

.pjd-cd-subtitle {
    font-size: 13px;
    color: #888
}

.pjd-cd-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin-bottom: 24px
}

.pjd-cd-kpi {
    text-align: center;
    padding: 20px 14px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .05);
    border: 1px solid rgba(0, 0, 0, .04);
    transition: transform .2s
}

.pjd-cd-kpi:hover {
    transform: translateY(-2px)
}

.pjd-cd-kpi-num {
    display: block;
    font-size: 26px;
    font-weight: 800;
    color: #1a1a1a
}

.pjd-cd-kpi-label {
    font-size: 12px;
    color: #aaa;
    margin-top: 4px;
    display: block
}

.pjd-cd-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px
}

.pjd-cd-section-title {
    font-size: 15px;
    font-weight: 700;
    color: #333;
    margin: 0 0 14px
}

.pjd-cd-projects,
.pjd-cd-activity {
    background: #fff;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .05);
    border: 1px solid rgba(0, 0, 0, .04)
}

.pjd-cd-project-card {
    padding: 16px;
    border-radius: 14px;
    border: 1px solid #f0f0f0;
    cursor: pointer;
    transition: all .25s;
    margin-bottom: 10px
}

.pjd-cd-project-card:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, .08);
    border-color: #ddd;
    transform: translateY(-2px)
}

.pjd-cd-project-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px
}

.pjd-cd-project-status {
    padding: 3px 10px;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 700
}

.pjd-cd-project-progress {
    font-size: 13px;
    font-weight: 700;
    color: #555
}

.pjd-cd-project-title {
    font-size: 14px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 8px
}

.pjd-cd-project-bar {
    height: 5px;
    background: #f0f0f0;
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 8px
}

.pjd-cd-project-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #4f46e5, #818cf8);
    border-radius: 3px;
    transition: width .4s
}

.pjd-cd-project-meta {
    display: flex;
    gap: 12px;
    font-size: 11px;
    color: #999
}

/* ── 카테고리 관리 버튼 ── */
.pjd-cat-manage-btn {
    padding: 4px 10px;
    font-size: 0.8rem;
    white-space: nowrap;
    border-radius: 6px;
    border: 1px solid #d1d5db;
    background: #f8fafc;
    color: #374151;
    cursor: pointer;
    transition: all .2s
}

.pjd-cat-manage-btn:hover {
    background: #e2e8f0;
    border-color: #94a3b8
}

/* ── 카테고리 관리 모달 ── */
.pjd-cat-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    backdrop-filter: blur(6px);
    animation: pjFadeIn .2s
}

.pjd-cat-modal {
    background: #fff;
    border-radius: 22px;
    padding: 0;
    width: 90%;
    max-width: 480px;
    max-height: 80vh;
    overflow: hidden;
    box-shadow: 0 24px 80px rgba(0, 0, 0, .2);
    animation: pjSlideUp .3s ease;
    display: flex;
    flex-direction: column
}

.pjd-cat-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 28px 16px;
    border-bottom: 1px solid #f0f0f0
}

.pjd-cat-modal-header h3 {
    font-size: 18px;
    font-weight: 800;
    color: #1a1a1a;
    margin: 0
}

.pjd-cat-modal-close {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #64748b;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .2s
}

.pjd-cat-modal-close:hover {
    background: #fee2e2;
    border-color: #fca5a5;
    color: #dc2626
}

.pjd-cat-modal-body {
    padding: 20px 28px 28px;
    overflow-y: auto;
    flex: 1
}

.pjd-cat-modal-desc {
    font-size: 0.85rem;
    color: #64748b;
    margin: 0 0 14px;
    line-height: 1.5
}

.pjd-cat-modal-add {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 18px
}

.pjd-cat-modal-inputs {
    display: flex;
    gap: 8px
}

.pjd-cat-modal-add input {
    flex: 1;
    min-width: 0;
    padding: 10px 14px;
    border: 1.5px solid #ddd;
    border-radius: 10px;
    font-size: 13px;
    background: #fff;
    color: #1a1a1a;
    transition: border-color .2s
}

.pjd-cat-modal-add input:focus {
    outline: none;
    border-color: #a60e16
}

.pjd-cat-modal-add-btn {
    width: 100%;
    padding: 11px 18px;
    border: none;
    border-radius: 10px;
    background: linear-gradient(135deg, #1565c0, #1976d2);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all .2s
}

.pjd-cat-modal-add-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(21, 101, 192, .3)
}

.pjd-cat-list {
    max-height: 300px;
    overflow-y: auto;
    border-top: 1px solid #e2e8f0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: 8px
}

.pjd-cat-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: #f8f9fa;
    border-radius: 10px;
    font-size: 13px;
    transition: background .2s
}

.pjd-cat-item:hover {
    background: #f0f0f0
}

.pjd-cat-item-info {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap
}

.pjd-cat-item-name {
    font-weight: 600;
    font-size: 0.88rem;
    color: #1a1a1a
}

.pjd-cat-item-en {
    color: #94a3b8;
    font-size: 0.78rem;
    margin-left: 8px
}

.pjd-cat-item-badge {
    margin-left: 8px;
    font-size: 0.72rem;
    background: #e3f2fd;
    color: #1565c0;
    padding: 1px 6px;
    border-radius: 8px
}

.pjd-cat-item-del {
    background: none;
    border: none;
    color: #c62828;
    cursor: pointer;
    font-size: 16px;
    padding: 2px 8px;
    border-radius: 6px;
    transition: .2s
}

.pjd-cat-item-del:hover {
    background: #fff5f5
}

.pjd-cat-empty {
    text-align: center;
    padding: 20px;
    color: #94a3b8;
    font-size: 0.85rem;
    margin: 0
}

/* ── 애니메이션 ── */
@keyframes pjFadeSlide {
    from {
        opacity: 0;
        transform: translateY(-12px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes pjSlideUp {
    from {
        opacity: 0;
        transform: translateY(24px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes pjFadeIn {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes pjPulse {

    0%,
    100% {
        opacity: 1
    }

    50% {
        opacity: .55
    }
}

@keyframes spin {
    to {
        transform: rotate(360deg)
    }
}

/* ── 반응형 ── */

/* ─── 태블릿 (~1200px) ─── */
@media(max-width:1200px) {
    .pjd-kpi-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px
    }

    .pjd-widget-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px
    }

    .pjd-widget-card.pjd-widget-wide {
        grid-column: span 2
    }

    .pj-board {
        grid-template-columns: repeat(2, 1fr)
    }
}

/* ─── 모바일 (~768px) ─── */
@media(max-width:768px) {

    /* 대시보드 / KPI */
    .pjd-dashboard {
        margin-bottom: 16px
    }

    .pjd-kpi-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        margin-bottom: 14px
    }

    .pjd-kpi-card {
        border-radius: 14px;
        padding: 16px 14px;
        gap: 12px
    }

    .pjd-kpi-icon {
        font-size: 28px;
        width: 44px;
        height: 44px;
        border-radius: 12px
    }

    .pjd-kpi-ring-wrap,
    .pjd-ring-svg {
        width: 44px;
        height: 44px
    }

    .pjd-kpi-num {
        font-size: 22px
    }

    .pjd-kpi-label {
        font-size: 11px
    }

    .pjd-kpi-sub {
        font-size: 10px
    }

    .pjd-kpi-money {
        font-size: 18px
    }

    .pjd-kpi-money-row {
        font-size: 10px
    }

    .pjd-kpi-status-row {
        font-size: 11px
    }

    /* 위젯 */
    .pjd-widget-grid {
        grid-template-columns: 1fr;
        gap: 12px;
        margin-bottom: 16px
    }

    .pjd-widget-card {
        border-radius: 14px;
        padding: 16px
    }

    .pjd-widget-card.pjd-widget-wide {
        grid-column: span 1
    }

    .pjd-widget-title {
        font-size: 13px;
        margin-bottom: 12px;
        padding-bottom: 8px
    }

    .pjd-donut-wrap,
    .pjd-donut-svg {
        width: 110px;
        height: 110px
    }

    .pjd-donut-center {
        font-size: 22px
    }

    .pjd-bar-chart {
        height: 140px;
        gap: 6px;
        padding-top: 12px
    }

    .pjd-bar-value {
        font-size: 9px
    }

    .pjd-activity-list {
        max-height: 240px
    }

    .pjd-activity-item {
        padding: 8px 10px
    }

    .pjd-activity-text {
        font-size: 12px
    }

    .pjd-top-item {
        grid-template-columns: 28px 1fr 60px auto;
        gap: 8px
    }

    .pjd-top-rank {
        width: 28px;
        height: 28px;
        font-size: 11px;
        border-radius: 8px
    }

    .pjd-top-name {
        font-size: 12px
    }

    .pjd-top-value {
        font-size: 11px
    }

    /* 필터 */
    .pjd-pills {
        gap: 6px;
        margin-top: 12px
    }

    .pj-pill {
        padding: 7px 14px;
        font-size: 12px;
        border-radius: 100px
    }

    .pj-pill-count {
        font-size: 10px;
        padding: 0 6px
    }

    .pjd-cat-tabs {
        padding: 8px 10px;
        gap: 4px;
        border-radius: 12px;
        margin-bottom: 10px;
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch
    }

    .pjd-cat-tab {
        padding: 6px 12px;
        font-size: 12px;
        white-space: nowrap;
        flex-shrink: 0
    }

    .pjd-client-filter,
    .pjd-date-filter {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px
    }

    .pjd-client-pills {
        width: 100%;
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px
    }

    .pjd-client-pill {
        padding: 5px 12px;
        font-size: 11px;
        flex-shrink: 0
    }

    .pjd-date-presets {
        width: 100%;
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px
    }

    .pjd-date-preset {
        padding: 5px 12px;
        font-size: 11px;
        flex-shrink: 0
    }

    .pjd-date-inputs {
        width: 100%
    }

    .pjd-date-inputs input[type="date"] {
        flex: 1;
        font-size: 11px;
        padding: 5px 8px
    }

    .pjd-sort-select {
        width: 100%;
        font-size: 12px
    }

    /* 툴바 */
    .pj-toolbar {
        flex-direction: column;
        align-items: stretch;
        padding: 12px 14px;
        border-radius: 12px;
        gap: 10px;
        margin-bottom: 14px
    }

    .pj-toolbar-left,
    .pj-toolbar-right {
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 8px
    }

    .pj-result-count {
        font-size: 12px
    }

    .pj-view-toggle {
        border-radius: 10px
    }

    .pj-vt-btn {
        padding: 6px 10px;
        font-size: 14px
    }

    .pj-add-btn {
        padding: 8px 16px;
        font-size: 12px;
        border-radius: 10px;
        width: 100%
    }

    /* 카드 보드 */
    .pj-board {
        grid-template-columns: 1fr;
        gap: 12px
    }

    .pj-card {
        border-radius: 14px
    }

    .pj-card-header {
        padding: 14px 14px 0
    }

    .pj-card-body {
        padding: 10px 14px
    }

    .pj-card-title {
        font-size: 14px
    }

    .pj-card-info {
        font-size: 11px
    }

    .pj-progress-label,
    .pj-progress-pct {
        font-size: 11px
    }

    .pj-card-expanded {
        padding: 12px 14px;
        margin: 0 -14px -14px
    }

    .pj-card-bottom {
        padding: 10px 14px;
        justify-content: flex-end;
    }

    .pj-action-btn {
        flex: none;
        padding: 6px 14px;
        font-size: 11px
    }

    /* 리스트 뷰 */
    .pj-list-view {
        border-radius: 14px
    }

    .pj-list-header {
        display: none
    }

    .pj-list-row {
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding: 14px
    }

    .pj-lr-status {
        order: -1;
        align-self: flex-start
    }

    .pj-lr-title {
        font-size: 14px
    }

    .pj-lr-title strong {
        display: block
    }

    .pj-lr-title small {
        display: inline
    }

    .pj-lr-client {
        display: block;
        font-size: 12px
    }

    .pj-lr-progress {
        width: 100%
    }

    .pj-mini-bar {
        width: 100%;
        max-width: none
    }

    .pj-lr-due {
        display: block;
        font-size: 11px
    }

    .pj-lr-actions {
        display: flex;
        justify-content: flex-end;
        gap: 8px
    }

    .pj-lh-client,
    .pj-lh-due {
        display: none
    }

    /* 타임라인 */
    .pj-timeline-view {
        border-radius: 14px
    }

    .pj-timeline-header,
    .pj-tl-row {
        grid-template-columns: 100px 1fr
    }

    .pj-tl-label-col strong {
        font-size: 11px
    }

    .pj-tl-label-col small {
        font-size: 10px
    }

    .pj-tl-month {
        font-size: 9px
    }

    /* 리포트 */
    .pj-report-summary {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px
    }

    .pj-report-card {
        padding: 14px;
        border-radius: 12px
    }

    .pj-report-card-num {
        font-size: 22px
    }

    .pj-report-section {
        padding: 16px;
        border-radius: 14px
    }

    .pj-report-row {
        flex-direction: column;
        gap: 12px
    }

    /* 클라이언트 대시보드 */
    .pjd-folder-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px
    }

    .pjd-folder-card {
        padding: 18px 16px;
        border-radius: 14px
    }

    .pjd-cd-body {
        grid-template-columns: 1fr
    }

    .pjd-cd-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px
    }

    .pjd-cd-kpi-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px
    }

    /* 모달 */
    .pjd-cat-modal {
        width: 95%;
        max-width: 400px;
        border-radius: 18px;
        max-height: 85vh
    }

    .pjd-cat-modal-header {
        padding: 18px 20px 12px
    }

    .pjd-cat-modal-body {
        padding: 14px 20px 20px
    }

    .pjd-cat-modal-add {
        flex-direction: column;
        gap: 6px
    }

    .pjd-cat-modal-add input {
        width: 100%
    }

    .pj-preview-popup {
        width: 95%;
        max-height: 90vh;
        border-radius: 16px;
        padding: 18px
    }
}

/* ─── 소형 모바일 (~480px) ─── */
@media(max-width:480px) {

    /* KPI 세로 1열 */
    .pjd-kpi-grid {
        grid-template-columns: 1fr;
        gap: 8px
    }

    .pjd-kpi-card {
        padding: 14px 12px;
        gap: 10px;
        border-radius: 12px
    }

    .pjd-kpi-icon {
        font-size: 24px;
        width: 38px;
        height: 38px;
        border-radius: 10px
    }

    .pjd-kpi-ring-wrap,
    .pjd-ring-svg {
        width: 38px;
        height: 38px
    }

    .pjd-ring-num {
        font-size: 10px
    }

    .pjd-kpi-num {
        font-size: 20px
    }

    .pjd-kpi-money {
        font-size: 16px
    }

    /* 위젯 */
    .pjd-widget-card {
        padding: 14px;
        border-radius: 12px
    }

    .pjd-donut-wrap,
    .pjd-donut-svg {
        width: 96px;
        height: 96px
    }

    .pjd-donut-center {
        font-size: 18px
    }

    .pjd-bar-chart {
        height: 120px;
        gap: 4px
    }

    /* 필터 */
    .pjd-pills {
        gap: 5px
    }

    .pj-pill {
        padding: 6px 11px;
        font-size: 11px
    }

    .pjd-cat-tabs {
        gap: 3px;
        padding: 6px 8px
    }

    .pjd-cat-tab {
        padding: 5px 10px;
        font-size: 11px
    }

    /* 클라이언트 폴더 */
    .pjd-folder-grid {
        grid-template-columns: 1fr
    }

    .pjd-folder-card {
        padding: 14px 12px;
        border-radius: 12px
    }

    /* 리포트 */
    .pj-report-summary {
        grid-template-columns: 1fr
    }

    .pj-report-card {
        padding: 12px;
        border-radius: 10px
    }

    .pj-report-card-num {
        font-size: 20px
    }

    /* 카드 */
    .pj-card {
        border-radius: 12px
    }

    .pj-card-header {
        padding: 12px 12px 0
    }

    .pj-card-body {
        padding: 8px 12px
    }

    .pj-card-bottom {
        padding: 8px 12px;
        justify-content: flex-end;
    }

    .pj-card-expanded {
        padding: 10px 12px;
        margin: 0 -12px -12px
    }

    /* 미결제 */
    .pj-unpaid-item {
        grid-template-columns: 1fr 1fr;
        gap: 4px
    }

    /* 리스트 뷰 */
    .pj-list-row {
        padding: 12px
    }

    .pj-lr-title {
        font-size: 13px
    }

    /* 툴바 */
    .pj-toolbar {
        padding: 10px 12px;
        border-radius: 10px;
        gap: 8px
    }

    .pj-add-btn {
        justify-content: center;
        padding: 10px 14px;
        font-size: 12px
    }

    /* 모달 */
    .pjd-cat-modal {
        width: 96%;
        border-radius: 14px
    }

    .pjd-cat-modal-header {
        padding: 14px 16px 10px
    }

    .pjd-cat-modal-header h3 {
        font-size: 15px
    }

    .pjd-cat-modal-body {
        padding: 12px 16px 16px
    }

    .pj-preview-popup {
        width: 98%;
        padding: 14px;
        border-radius: 14px
    }
}

/* ══════════════════════════════════════════
   다크 모드
   ══════════════════════════════════════════ */
[data-theme="dark"] .pj-notif-bar {
    background: linear-gradient(135deg, #2a2210, #302818);
    border-color: #5a4a20;
    color: #e0d8c0
}

[data-theme="dark"] .pj-notif-close {
    color: #888
}

[data-theme="dark"] .pj-notif-close:hover {
    background: rgba(255, 255, 255, .08);
    color: #ddd
}

/* KPI */
[data-theme="dark"] .pjd-kpi-card {
    background: #1a1d2e;
    border-color: #252840;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .3)
}

[data-theme="dark"] .pjd-kpi-card:hover {
    box-shadow: 0 8px 32px rgba(0, 0, 0, .5)
}

[data-theme="dark"] .pjd-kpi-card.pjd-kpi-main {
    background: linear-gradient(135deg, #1a1d35, #1e2248);
    border-color: #313866
}

[data-theme="dark"] .pjd-kpi-card.pjd-kpi-alert {
    background: linear-gradient(135deg, #2a1015, #2e1520);
    border-color: #5a2030
}

[data-theme="dark"] .pjd-kpi-icon {
    background: rgba(255, 255, 255, .06)
}

[data-theme="dark"] .pjd-kpi-num {
    color: #e0e0e0
}

[data-theme="dark"] .pjd-kpi-label {
    color: #999
}

[data-theme="dark"] .pjd-kpi-sub {
    color: #777
}

[data-theme="dark"] .pjd-kpi-status-row {
    color: #ccc
}

[data-theme="dark"] .pjd-kpi-money {
    color: #ff6b6b
}

[data-theme="dark"] .pjd-money-paid {
    color: #66bb6a
}

[data-theme="dark"] .pjd-money-unpaid {
    color: #ffa726
}

[data-theme="dark"] .pjd-ring-num {
    color: #818cf8
}

/* 위젯 */
[data-theme="dark"] .pjd-widget-card {
    background: #1a1d2e;
    border-color: #252840;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .3)
}

[data-theme="dark"] .pjd-widget-card:hover {
    box-shadow: 0 8px 28px rgba(0, 0, 0, .5)
}

[data-theme="dark"] .pjd-widget-title {
    color: #e0e0e0;
    border-bottom-color: #252840
}

[data-theme="dark"] .pjd-widget-empty {
    color: #555
}

[data-theme="dark"] .pjd-donut-center {
    color: #e0e0e0
}

[data-theme="dark"] .pjd-donut-legend-item {
    color: #bbb
}

[data-theme="dark"] .pjd-bar-value {
    color: #999
}

[data-theme="dark"] .pjd-bar-track {
    background: #252840
}

[data-theme="dark"] .pjd-bar-label {
    color: #999
}

[data-theme="dark"] .pjd-activity-item:hover {
    background: rgba(255, 255, 255, .04)
}

[data-theme="dark"] .pjd-activity-text {
    color: #ccc
}

[data-theme="dark"] .pjd-activity-time {
    color: #666
}

[data-theme="dark"] .pjd-deadline-item:hover {
    background: rgba(255, 255, 255, .04)
}

[data-theme="dark"] .pjd-deadline-dday {
    background: linear-gradient(135deg, #1a2540, #1e3060);
    color: #64b5f6
}

[data-theme="dark"] .pjd-deadline-dday.urgent {
    background: linear-gradient(135deg, #3a1015, #4e1520);
    color: #ff6b6b
}

[data-theme="dark"] .pjd-deadline-title {
    color: #e0e0e0
}

[data-theme="dark"] .pjd-deadline-client {
    color: #777
}

[data-theme="dark"] .pjd-top-rank {
    background: linear-gradient(135deg, #1e2248, #252860);
    color: #a5b4fc
}

[data-theme="dark"] .pjd-top-name {
    color: #ccc
}

[data-theme="dark"] .pjd-top-bar-track {
    background: #252840
}

[data-theme="dark"] .pjd-top-value {
    color: #999
}

/* 작업 완료율 다크모드 */
[data-theme="dark"] .pjd-tp-title {
    color: #ccc;
}

[data-theme="dark"] .pjd-tp-ratio {
    color: #888;
}

[data-theme="dark"] .pjd-tp-bar-track {
    background: #252840;
}

/* 최근 업데이트 다크모드 */
[data-theme="dark"] .pjd-recent-item {
    background: rgba(255, 255, 255, .03);
}

[data-theme="dark"] .pjd-recent-item:hover {
    background: rgba(255, 255, 255, .06);
}

[data-theme="dark"] .pjd-recent-title {
    color: #e0e0e0;
}

[data-theme="dark"] .pjd-recent-meta {
    color: #777;
}

[data-theme="dark"] .pjd-recent-time {
    color: #555;
}

[data-theme="dark"] .pjd-rp-bar {
    background: #252840;
}

[data-theme="dark"] .pjd-rp-pct {
    color: #999;
}

/* 필터/필/탭 */
[data-theme="dark"] .pj-pill {
    background: #1a1d2e;
    border-color: #333;
    color: #ccc
}

[data-theme="dark"] .pj-pill:hover {
    background: #252840;
    border-color: #444
}

[data-theme="dark"] .pj-pill.active {
    background: #4f46e5;
    border-color: #4f46e5;
    color: #fff
}

[data-theme="dark"] .pj-pill-count {
    background: rgba(255, 255, 255, .1)
}

[data-theme="dark"] .pjd-cat-tabs {
    background: #1a1d2e;
    border-color: #252840
}

[data-theme="dark"] .pjd-cat-tab {
    color: #999
}

[data-theme="dark"] .pjd-cat-tab:hover {
    background: rgba(255, 255, 255, .06);
    color: #ddd
}

[data-theme="dark"] .pjd-cat-tab.active {
    background: linear-gradient(135deg, #a60e16, #c62828);
    color: #fff
}

[data-theme="dark"] .pjd-cat-tab-manage {
    background: rgba(79, 70, 229, .12) !important;
    color: #818cf8 !important;
    border-color: rgba(79, 70, 229, .3)
}

[data-theme="dark"] .pjd-cat-tab-manage:hover {
    background: rgba(79, 70, 229, .2) !important;
    color: #a78bfa !important
}

[data-theme="dark"] .pjd-client-filter-label {
    color: #999
}

[data-theme="dark"] .pjd-client-pill {
    background: #1a1d2e;
    border-color: #333;
    color: #ccc
}

[data-theme="dark"] .pjd-client-pill.active {
    background: #4f46e5;
    border-color: #4f46e5;
    color: #fff
}

[data-theme="dark"] .pjd-date-filter-label {
    color: #999
}

[data-theme="dark"] .pjd-date-preset {
    background: #1a1d2e;
    border-color: #333;
    color: #ccc
}

[data-theme="dark"] .pjd-date-preset:hover {
    background: #252840
}

[data-theme="dark"] .pjd-date-preset.active {
    background: #1565c0;
    border-color: #1565c0
}

[data-theme="dark"] .pjd-date-inputs input[type="date"] {
    background: #1a1d2e;
    border-color: #333;
    color: #ccc
}

[data-theme="dark"] .pjd-sort-select {
    background: #1a1d2e;
    border-color: #333;
    color: #ccc
}

/* 툴바 */
[data-theme="dark"] .pj-toolbar {
    background: #1a1d2e;
    border-color: #252840;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .3)
}

[data-theme="dark"] .pj-result-count {
    color: #888
}

[data-theme="dark"] .pj-clear-filter {
    background: rgba(198, 40, 40, .1);
    border-color: rgba(198, 40, 40, .3);
    color: #ff6b6b
}

[data-theme="dark"] .pj-view-toggle {
    background: #252840
}

[data-theme="dark"] .pj-vt-btn {
    color: #888
}

[data-theme="dark"] .pj-vt-btn:hover {
    background: rgba(255, 255, 255, .06)
}

[data-theme="dark"] .pj-vt-btn.active {
    background: #1a1d2e;
    color: #e0e0e0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .3)
}

/* 카드 */
[data-theme="dark"] .pj-card {
    background: #1a1d2e;
    border-color: #252840;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .3)
}

[data-theme="dark"] .pj-card:hover {
    box-shadow: 0 8px 32px rgba(0, 0, 0, .5)
}

[data-theme="dark"] .pj-card-actions button:hover {
    background: rgba(255, 255, 255, .08)
}

[data-theme="dark"] .pj-card-title {
    color: #e0e0e0
}

[data-theme="dark"] .pj-card-title:hover {
    color: #ff6b6b
}

[data-theme="dark"] .pj-cat-tag {
    background: rgba(79, 70, 229, .15);
    color: #a5b4fc
}

[data-theme="dark"] .pj-dday {
    background: rgba(21, 101, 192, .15);
    color: #64b5f6
}

[data-theme="dark"] .pj-dday.urgent {
    background: rgba(198, 40, 40, .15);
    color: #ff6b6b
}

[data-theme="dark"] .pj-progress-label {
    color: #888
}

[data-theme="dark"] .pj-progress-pct {
    color: #ccc
}

[data-theme="dark"] .pj-progress-track {
    background: #252840
}

[data-theme="dark"] .pj-card-info {
    color: #888
}

[data-theme="dark"] .pj-card-expanded {
    background: linear-gradient(180deg, #141620, #1a1d2e);
    border-top-color: #252840
}

[data-theme="dark"] .pj-exp-info-item {
    background: rgba(255, 255, 255, .03);
    border-color: #252840;
}

[data-theme="dark"] .pj-exp-info-item:hover {
    border-color: #3d3d5c;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
}

[data-theme="dark"] .pj-exp-info-label {
    color: #777;
}

[data-theme="dark"] .pj-exp-info-value {
    color: #e0e0e0;
}

[data-theme="dark"] .pj-exp-section-title {
    color: #bbb;
}

[data-theme="dark"] .pj-exp-desc-box {
    background: rgba(255, 255, 255, .03);
    border-color: #252840;
}

[data-theme="dark"] .pj-exp-desc-content {
    color: #aaa;
}

[data-theme="dark"] .pj-exp-footer {
    border-top-color: #252840;
}

[data-theme="dark"] .pj-detail-label {
    color: #ccc
}

[data-theme="dark"] .pj-detail-desc {
    color: #aaa
}

[data-theme="dark"] .pj-detail-time {
    color: #555
}

[data-theme="dark"] .pj-task-preview-item {
    background: rgba(255, 255, 255, .03);
    border-color: #252840;
    color: #ccc
}

[data-theme="dark"] .pj-task-preview-item:hover {
    border-color: #3d3d5c;
    background: rgba(255, 255, 255, .05);
}

[data-theme="dark"] .pj-task-assignee {
    color: #a5b4fc;
    background: rgba(99, 102, 241, .12);
}

[data-theme="dark"] .pj-file-preview-item {
    background: rgba(255, 255, 255, .03);
    border-color: #252840;
    color: #ccc
}

[data-theme="dark"] .pj-log-item {
    color: #ccc;
    background: rgba(255, 255, 255, .05);
    border-color: #333;
}

[data-theme="dark"] .pj-log-text {
    color: #ddd;
}

[data-theme="dark"] .pj-log-time {
    color: #888;
}

[data-theme="dark"] .pj-log-dot {
    background: #666
}

[data-theme="dark"] .pj-exp-footer {
    border-top-color: #333;
}

[data-theme="dark"] .pj-exp-footer .pj-detail-time {
    color: #888;
}

[data-theme="dark"] .pj-exp-section-title {
    color: #ccc;
}

[data-theme="dark"] .pj-qp-btn {
    background: #1a1d2e;
    border-color: #333;
    color: #ccc
}

[data-theme="dark"] .pj-qp-btn:hover {
    background: #252840
}

[data-theme="dark"] .pj-card-bottom {
    border-top-color: #252840
}

[data-theme="dark"] .pj-action-btn {
    background: #1a1d2e;
    border-color: #333;
    color: #ccc
}

[data-theme="dark"] .pj-act-start:hover {
    background: rgba(21, 101, 192, .15);
    color: #64b5f6;
    border-color: rgba(21, 101, 192, .3)
}

[data-theme="dark"] .pj-act-done:hover {
    background: rgba(46, 125, 50, .15);
    color: #66bb6a;
    border-color: rgba(46, 125, 50, .3)
}

[data-theme="dark"] .pj-act-hold:hover {
    background: rgba(230, 81, 0, .15);
    color: #ffa726;
    border-color: rgba(230, 81, 0, .3)
}

/* 리스트 뷰 */
[data-theme="dark"] .pj-list-view {
    background: #1a1d2e;
    border-color: #252840;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .3)
}

[data-theme="dark"] .pj-list-header {
    background: linear-gradient(135deg, #141620, #1a1d2e);
    color: #888;
    border-bottom-color: #252840
}

[data-theme="dark"] .pj-list-row {
    border-bottom-color: #1e2030
}

[data-theme="dark"] .pj-list-row:hover {
    background: rgba(255, 255, 255, .02)
}

[data-theme="dark"] .pj-lr-title strong {
    color: #e0e0e0
}

[data-theme="dark"] .pj-lr-title small {
    color: #666
}

[data-theme="dark"] .pj-lr-client {
    color: #999
}

[data-theme="dark"] .pj-lr-progress small {
    color: #999
}

[data-theme="dark"] .pj-mini-bar {
    background: #252840
}

[data-theme="dark"] .pj-lr-due {
    color: #888
}

[data-theme="dark"] .pj-lr-actions button:hover {
    background: rgba(255, 255, 255, .08)
}

/* 타임라인 */
[data-theme="dark"] .pj-timeline-view {
    background: #1a1d2e;
    border-color: #252840;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .3)
}

[data-theme="dark"] .pj-timeline-header {
    border-bottom-color: #252840
}

[data-theme="dark"] .pj-tl-label-col strong {
    color: #e0e0e0
}

[data-theme="dark"] .pj-tl-label-col small {
    color: #666
}

[data-theme="dark"] .pj-tl-month {
    color: #555;
    border-left-color: #252840
}

/* 리포트 */
[data-theme="dark"] .pj-report-card {
    background: #1a1d2e;
    border-color: #252840;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .3)
}

[data-theme="dark"] .pj-report-card-num {
    color: #e0e0e0
}

[data-theme="dark"] .pj-report-card small {
    color: #777
}

[data-theme="dark"] .pj-report-section {
    background: #1a1d2e;
    border-color: #252840;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .3)
}

[data-theme="dark"] .pj-report-section h3 {
    color: #e0e0e0
}

[data-theme="dark"] .pj-chart-bar-container {
    background: #252840
}

[data-theme="dark"] .pj-chart-bar-label {
    color: #999
}

[data-theme="dark"] .pj-chart-bar-sub {
    color: #666
}

[data-theme="dark"] .pj-report-stat-label {
    color: #ccc
}

[data-theme="dark"] .pj-report-stat-bar {
    background: #252840
}

[data-theme="dark"] .pj-report-stat-num {
    color: #999
}

[data-theme="dark"] .pj-unpaid-item {
    background: #141620
}

[data-theme="dark"] .pj-unpaid-item:hover {
    background: #1e2030
}

[data-theme="dark"] .pj-unpaid-title {
    color: #e0e0e0
}

[data-theme="dark"] .pj-unpaid-client {
    color: #888
}

[data-theme="dark"] .pj-unpaid-amount {
    color: #ff6b6b
}

[data-theme="dark"] .pj-unpaid-status.sent {
    background: rgba(21, 101, 192, .15);
    color: #64b5f6
}

[data-theme="dark"] .pj-unpaid-status.draft {
    background: rgba(230, 81, 0, .15);
    color: #ffa726
}

/* 클라이언트 */
[data-theme="dark"] .pjd-folder-card {
    background: #1a1d2e;
    border-color: #252840;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .3)
}

[data-theme="dark"] .pjd-folder-card:hover {
    box-shadow: 0 12px 40px rgba(0, 0, 0, .5);
    border-color: rgba(166, 14, 22, .3)
}

[data-theme="dark"] .pjd-folder-name {
    color: #e0e0e0
}

[data-theme="dark"] .pjd-folder-stat-num {
    color: #e0e0e0
}

[data-theme="dark"] .pjd-folder-stat-label {
    color: #777
}

[data-theme="dark"] .pjd-folder-progress-bar {
    background: #252840
}

[data-theme="dark"] .pjd-folder-progress-text {
    color: #999
}

[data-theme="dark"] .pjd-folder-revenue {
    color: #ff6b6b
}

[data-theme="dark"] .pjd-cd-back {
    background: #1a1d2e;
    border-color: #333;
    color: #ccc
}

[data-theme="dark"] .pjd-cd-back:hover {
    background: #252840
}

[data-theme="dark"] .pjd-cd-name {
    color: #e0e0e0
}

[data-theme="dark"] .pjd-cd-subtitle {
    color: #888
}

[data-theme="dark"] .pjd-cd-kpi {
    background: #1a1d2e;
    border-color: #252840;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .3)
}

[data-theme="dark"] .pjd-cd-kpi-num {
    color: #e0e0e0
}

[data-theme="dark"] .pjd-cd-kpi-label {
    color: #777
}

[data-theme="dark"] .pjd-cd-projects,
[data-theme="dark"] .pjd-cd-activity {
    background: #1a1d2e;
    border-color: #252840;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .3)
}

[data-theme="dark"] .pjd-cd-section-title {
    color: #e0e0e0
}

[data-theme="dark"] .pjd-cd-project-card {
    border-color: #252840
}

[data-theme="dark"] .pjd-cd-project-card:hover {
    border-color: #333;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .4)
}

[data-theme="dark"] .pjd-cd-project-title {
    color: #e0e0e0
}

[data-theme="dark"] .pjd-cd-project-progress {
    color: #ccc
}

[data-theme="dark"] .pjd-cd-project-bar {
    background: #252840
}

[data-theme="dark"] .pjd-cd-project-meta {
    color: #777
}

/* 빈 상태 */
[data-theme="dark"] .pj-empty h3 {
    color: #ccc
}

[data-theme="dark"] .pj-empty p {
    color: #777
}

[data-theme="dark"] .pj-loading {
    color: #888
}

/* 카테고리 관리 버튼 & 모달 */
[data-theme="dark"] .pjd-cat-manage-btn {
    background: #252840;
    border-color: #333;
    color: #ccc
}

[data-theme="dark"] .pjd-cat-manage-btn:hover {
    background: #333;
    border-color: #555;
    color: #e0e0e0
}

[data-theme="dark"] .pjd-cat-modal-overlay {
    background: rgba(0, 0, 0, .7)
}

[data-theme="dark"] .pjd-cat-modal {
    background: #1a1d2e;
    box-shadow: 0 24px 80px rgba(0, 0, 0, .5)
}

[data-theme="dark"] .pjd-cat-modal-header {
    border-bottom-color: #252840
}

[data-theme="dark"] .pjd-cat-modal-header h3 {
    color: #e0e0e0
}

[data-theme="dark"] .pjd-cat-modal-close {
    background: #252840;
    border-color: #333;
    color: #999
}

[data-theme="dark"] .pjd-cat-modal-close:hover {
    background: #3a1015;
    border-color: #5a2030;
    color: #ff6b6b
}

[data-theme="dark"] .pjd-cat-modal-desc {
    color: #888
}

[data-theme="dark"] .pjd-cat-modal-add input {
    background: #141620;
    border-color: #333;
    color: #e0e0e0
}

[data-theme="dark"] .pjd-cat-modal-add input::placeholder {
    color: #555
}

[data-theme="dark"] .pjd-cat-modal-add-btn {
    background: linear-gradient(135deg, #1565c0, #1976d2)
}

[data-theme="dark"] .pjd-cat-list {
    border-top-color: #252840
}

[data-theme="dark"] .pjd-cat-item {
    background: #141620;
    color: #ccc
}

[data-theme="dark"] .pjd-cat-item:hover {
    background: #252840
}

[data-theme="dark"] .pjd-cat-item-name {
    color: #e0e0e0
}

[data-theme="dark"] .pjd-cat-item-en {
    color: #666
}

[data-theme="dark"] .pjd-cat-item-badge {
    background: rgba(21, 101, 192, .15);
    color: #64b5f6
}

[data-theme="dark"] .pjd-cat-item-del {
    color: #ff6b6b
}

[data-theme="dark"] .pjd-cat-item-del:hover {
    background: rgba(255, 107, 107, .1)
}

[data-theme="dark"] .pjd-cat-empty {
    color: #555
}

/* ══════════════════════════════════════════
   클라이언트 자동완성 드롭다운
   ══════════════════════════════════════════ */
.client-autocomplete-wrap {
    position: relative;
}

.client-autocomplete-input {
    width: 100%;
    padding-right: 32px !important;
    box-sizing: border-box;
}

.client-autocomplete-icon {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #999;
    font-size: 12px;
    cursor: pointer;
    user-select: none;
    padding: 4px;
    border-radius: 4px;
    transition: color .2s, background .2s;
}

.client-autocomplete-icon:hover {
    color: #555;
    background: rgba(0, 0, 0, .05);
}

.client-autocomplete-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, .12);
    max-height: 220px;
    overflow-y: auto;
    z-index: 1000;
    animation: clientDropSlide .2s ease;
}

@keyframes clientDropSlide {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.client-autocomplete-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    cursor: pointer;
    transition: background .15s;
}

.client-autocomplete-item:first-child {
    border-radius: 12px 12px 0 0;
}

.client-autocomplete-item:last-child {
    border-radius: 0 0 12px 12px;
}

.client-autocomplete-item:only-child {
    border-radius: 12px;
}

.client-autocomplete-item:hover {
    background: #f0f4ff;
}

.client-autocomplete-item.selected {
    background: #e8edff;
}

.client-autocomplete-item-name {
    font-size: 13px;
    font-weight: 600;
    color: #333;
}

.client-autocomplete-item-company {
    font-size: 11px;
    color: #999;
}

.client-autocomplete-empty {
    padding: 16px 14px;
    text-align: center;
    font-size: 12px;
    color: #999;
}

.client-autocomplete-empty strong {
    color: #1565c0;
}

/* 다크모드 */
[data-theme="dark"] .client-autocomplete-dropdown {
    background: #2a2a3e;
    border-color: #3d3d5c;
    box-shadow: 0 8px 32px rgba(0, 0, 0, .4);
}

[data-theme="dark"] .client-autocomplete-item:hover {
    background: rgba(99, 102, 241, .15);
}

[data-theme="dark"] .client-autocomplete-item.selected {
    background: rgba(99, 102, 241, .2);
}

[data-theme="dark"] .client-autocomplete-item-name {
    color: #e0e0e0;
}

[data-theme="dark"] .client-autocomplete-item-company {
    color: #888;
}

[data-theme="dark"] .client-autocomplete-empty {
    color: #777;
}

[data-theme="dark"] .client-autocomplete-icon {
    color: #777;
}

[data-theme="dark"] .client-autocomplete-icon:hover {
    color: #bbb;
    background: rgba(255, 255, 255, .05);
}/* =============================================
   클라이언트 관리 페이지 – 프리미엄 UI
   Brand: #a60e16 / BG: #f5f7fa
   ============================================= */

/* ── KPI 대시보드 ── */
.cl-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.cl-kpi-card {
    background: #fff;
    border-radius: 18px;
    padding: 22px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .06);
    border: 1px solid rgba(0, 0, 0, .04);
    transition: transform .25s, box-shadow .25s;
    position: relative;
    overflow: hidden;
}

.cl-kpi-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #a60e16, #e74c3c);
    opacity: 0;
    transition: opacity .3s;
}

.cl-kpi-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, .1);
}

.cl-kpi-card:hover::before {
    opacity: 1;
}

.cl-kpi-icon {
    font-size: 32px;
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .03);
    border-radius: 14px;
}

.cl-kpi-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cl-kpi-num {
    font-size: 28px;
    font-weight: 800;
    color: #1a1a1a;
    line-height: 1.1;
}

.cl-kpi-money {
    font-size: 20px;
    color: #a60e16;
}

.cl-kpi-label {
    font-size: 13px;
    color: #888;
    font-weight: 500;
}

/* ── Toolbar ── */
.cl-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.cl-toolbar .admin-search-box {
    flex: 1;
}

.cl-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: linear-gradient(135deg, #a60e16, #c62828);
    color: #fff;
    border: none;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all .25s;
    box-shadow: 0 4px 16px rgba(166, 14, 22, .25);
    white-space: nowrap;
}

.cl-add-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(166, 14, 22, .35);
}

.cl-add-btn span {
    font-size: 18px;
    font-weight: 300;
}

/* ── 로딩 ── */
.cl-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 60px 20px;
    color: #999;
    font-size: 14px;
}

/* ── 빈 상태 ── */
.cl-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 80px 20px;
    text-align: center;
}

.cl-empty-icon {
    font-size: 56px;
    opacity: .5;
}

.cl-empty h3 {
    font-size: 18px;
    font-weight: 700;
    color: #555;
    margin: 0;
}

.cl-empty p {
    font-size: 14px;
    color: #999;
    margin: 0;
}

/* ── 카드 그리드 ── */
.cl-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
}

.cl-card {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .04);
    border-radius: 18px;
    padding: 22px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .06);
    cursor: pointer;
    transition: all .25s;
    position: relative;
    overflow: hidden;
}

.cl-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg, #a60e16, #e74c3c);
    opacity: 0;
    transition: opacity .3s;
}

.cl-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, .12);
}

.cl-card:hover::before {
    opacity: 1;
}

.cl-card-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
}

.cl-card-avatar {
    font-size: 28px;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f0f4ff, #e8edff);
    border-radius: 14px;
    flex-shrink: 0;
}

.cl-card-title-area {
    flex: 1;
    min-width: 0;
}

.cl-card-name {
    font-size: 16px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cl-card-company {
    font-size: 12px;
    color: #999;
}

.cl-card-actions {
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity .2s;
}

.cl-card:hover .cl-card-actions {
    opacity: 1;
}

.cl-card-actions button {
    width: 32px;
    height: 32px;
    border: none;
    background: #f5f5f5;
    border-radius: 10px;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .2s;
}

.cl-card-actions button:hover {
    background: #e0e0e0;
}

.cl-card-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 12px;
}

.cl-card-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 0;
    background: #f9f9fb;
    border-radius: 12px;
}

.cl-card-stat-num {
    font-size: 20px;
    font-weight: 800;
    color: #333;
}

.cl-card-stat-label {
    font-size: 11px;
    color: #999;
    margin-top: 2px;
}

.cl-card-revenue {
    font-size: 13px;
    font-weight: 700;
    color: #a60e16;
    padding: 8px 12px;
    background: linear-gradient(135deg, #fff5f5, #ffe8e8);
    border-radius: 10px;
    margin-bottom: 10px;
    text-align: center;
}

.cl-card-contact {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    font-size: 12px;
    color: #777;
    margin-bottom: 10px;
}

.cl-card-footer {
    font-size: 11px;
    color: #bbb;
    border-top: 1px solid #f0f0f0;
    padding-top: 10px;
}

/* ══════════════════════════════════════════
   클라이언트 상세 보기
   ══════════════════════════════════════════ */
.cl-detail-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.cl-detail-back {
    padding: 8px 16px;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    background: #fff;
    font-size: 13px;
    font-weight: 600;
    color: #555;
    cursor: pointer;
    transition: .2s;
}

.cl-detail-back:hover {
    background: #f5f5f5;
    border-color: #bbb;
}

.cl-detail-title {
    flex: 1;
    min-width: 0;
}

.cl-detail-title h2 {
    margin: 0;
    font-size: 22px;
    font-weight: 800;
    color: #1a1a1a;
}

.cl-detail-company {
    font-size: 13px;
    color: #999;
}

.cl-detail-actions {
    display: flex;
    gap: 8px;
}

.cl-detail-edit-btn,
.cl-detail-del-btn {
    padding: 8px 16px;
    border-radius: 10px;
    border: none;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: .2s;
}

.cl-detail-edit-btn {
    background: #f0f4ff;
    color: #4f46e5;
}

.cl-detail-edit-btn:hover {
    background: #e8edff;
}

.cl-detail-del-btn {
    background: #fff5f5;
    color: #c62828;
}

.cl-detail-del-btn:hover {
    background: #ffebee;
}

.cl-detail-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
    padding: 20px;
    background: #fff;
    border-radius: 16px;
    border: 1px solid rgba(0, 0, 0, .04);
    box-shadow: 0 4px 16px rgba(0, 0, 0, .04);
}

.cl-detail-info-full {
    grid-column: 1 / -1;
}

.cl-detail-info-label {
    display: block;
    font-size: 12px;
    color: #999;
    margin-bottom: 4px;
}

.cl-detail-info-value {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    word-break: break-all;
}

.cl-detail-kpi {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}

.cl-detail-kpi-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 16px 12px;
    background: #fff;
    border-radius: 14px;
    border: 1px solid rgba(0, 0, 0, .04);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .04);
    font-size: 12px;
    color: #888;
}

.cl-detail-kpi-num {
    font-size: 22px;
    font-weight: 800;
    color: #333;
}

.cl-detail-section-title {
    font-size: 16px;
    font-weight: 700;
    color: #333;
    margin-bottom: 14px;
}

.cl-detail-empty {
    text-align: center;
    padding: 40px;
    color: #ccc;
    font-size: 14px;
    background: #fff;
    border-radius: 16px;
}

.cl-detail-project-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 14px;
}

.cl-detail-project-card {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .04);
    border-radius: 16px;
    padding: 18px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .04);
    transition: .25s;
}

.cl-detail-project-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .08);
}

.cl-detail-project-top {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.cl-detail-project-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 700;
}

.cl-detail-project-cat {
    font-size: 11px;
    color: #999;
    background: #f5f5f5;
    padding: 3px 10px;
    border-radius: 6px;
}

.cl-detail-project-title {
    font-size: 15px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 8px;
}

.cl-detail-project-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    font-size: 12px;
    color: #999;
    margin-bottom: 10px;
}

.cl-detail-project-progress {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    font-weight: 700;
    color: #555;
}

.cl-detail-project-progress-track {
    flex: 1;
    height: 6px;
    background: #f0f0f0;
    border-radius: 4px;
    overflow: hidden;
}

.cl-detail-project-progress-fill {
    height: 100%;
    border-radius: 4px;
    transition: width .6s ease;
}

/* ══════════════════════════════════════════
   반응형
   ══════════════════════════════════════════ */
@media (max-width: 768px) {
    .cl-kpi-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .cl-toolbar {
        flex-direction: column;
    }

    .cl-detail-kpi {
        grid-template-columns: repeat(2, 1fr);
    }

    .cl-detail-header {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 480px) {
    .cl-kpi-grid {
        grid-template-columns: 1fr;
    }
}

/* ══════════════════════════════════════════
   다크 모드
   ══════════════════════════════════════════ */
[data-theme="dark"] .cl-kpi-card {
    background: #1e1e2e;
    border-color: #2d2d44;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .3);
}

[data-theme="dark"] .cl-kpi-num {
    color: #e0e0e0;
}

[data-theme="dark"] .cl-kpi-icon {
    background: rgba(255, 255, 255, .05);
}

[data-theme="dark"] .cl-card {
    background: #1e1e2e;
    border-color: #2d2d44;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .3);
}

[data-theme="dark"] .cl-card:hover {
    box-shadow: 0 8px 32px rgba(0, 0, 0, .5);
}

[data-theme="dark"] .cl-card-name {
    color: #e0e0e0;
}

[data-theme="dark"] .cl-card-avatar {
    background: rgba(99, 102, 241, .15);
}

[data-theme="dark"] .cl-card-stat {
    background: rgba(255, 255, 255, .04);
}

[data-theme="dark"] .cl-card-stat-num {
    color: #e0e0e0;
}

[data-theme="dark"] .cl-card-revenue {
    background: rgba(166, 14, 22, .15);
}

[data-theme="dark"] .cl-card-footer {
    border-color: #2d2d44;
    color: #555;
}

[data-theme="dark"] .cl-card-actions button {
    background: #2d2d44;
}

[data-theme="dark"] .cl-card-actions button:hover {
    background: #3d3d5c;
}

[data-theme="dark"] .cl-detail-info-grid {
    background: #1e1e2e;
    border-color: #2d2d44;
}

[data-theme="dark"] .cl-detail-info-value {
    color: #e0e0e0;
}

[data-theme="dark"] .cl-detail-kpi-card {
    background: #1e1e2e;
    border-color: #2d2d44;
}

[data-theme="dark"] .cl-detail-kpi-num {
    color: #e0e0e0;
}

[data-theme="dark"] .cl-detail-section-title {
    color: #e0e0e0;
}

[data-theme="dark"] .cl-detail-project-card {
    background: #1e1e2e;
    border-color: #2d2d44;
}

[data-theme="dark"] .cl-detail-project-title {
    color: #e0e0e0;
}

[data-theme="dark"] .cl-detail-project-cat {
    background: #2d2d44;
    color: #999;
}

[data-theme="dark"] .cl-detail-empty {
    background: #1e1e2e;
    color: #555;
}

[data-theme="dark"] .cl-detail-back {
    background: #1e1e2e;
    border-color: #2d2d44;
    color: #bbb;
}

[data-theme="dark"] .cl-detail-back:hover {
    background: #2d2d44;
}

[data-theme="dark"] .cl-detail-edit-btn {
    background: rgba(99, 102, 241, .15);
    color: #818cf8;
}

[data-theme="dark"] .cl-detail-del-btn {
    background: rgba(198, 40, 40, .15);
    color: #f87171;
}

[data-theme="dark"] .cl-detail-title h2 {
    color: #e0e0e0;
}

[data-theme="dark"] .cl-empty h3 {
    color: #bbb;
}

[data-theme="dark"] .cl-empty p {
    color: #777;
}