/* 소임관리 페이지 스타일 */

/* To-do 카드 스타일 */
.todo-card {
    min-height: 90px; /* 최소 높이 추가 */
    padding: 0.875rem 1.25rem; /* 패딩 증가 */
    background: #f0fdfa;
    border: 1px solid #99f6e4;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    transition: all 0.2s;
    box-sizing: border-box;
}

.todo-card:hover {
    background: #ccfbf1;
    border-color: #5eead4;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.todo-card input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    margin-top: 0.125rem;
    accent-color: var(--primary);
}

/* 빠른 생성 바 */
.work-quick-add {
    display: flex;
    gap: 0.5rem;
    padding: 1rem;
    background: white;
    border-bottom: 1px solid var(--border);
    align-items: center;
}

.work-quick-add input {
    flex: 1;
}

.work-quick-add select {
    width: auto;
    min-width: 120px;
}

/* 카테고리 필터 탭 */
.work-category-tabs {
    display: flex;
    gap: 0.5rem;
    padding: 1rem;
    overflow-x: auto;
    background: white;
    border-bottom: 1px solid var(--border);
    
    /* 스크롤바 숨김 */
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

.work-category-tabs::-webkit-scrollbar {
    display: none;  /* Chrome, Safari, Opera */
}

.category-tab {
    padding: 0.5rem 1rem;
    border: 1px solid var(--border);
    background: white;
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s;
    font-size: 0.9rem;
}

.category-tab:hover {
    background: var(--bg-hover);
}

.category-tab.active {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

/* 상태 필터 탭 */
.work-tabs {
    display: flex;
    gap: 0.5rem;
    padding: 1rem;
    background: white;
    border-bottom: 1px solid var(--border);
}

.work-tab {
    padding: 0.5rem 1rem;
    border: none;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    font-weight: 500;
}

.work-tab:hover {
    background: var(--bg-hover);
}

.work-tab.active {
    background: var(--primary);
    color: white;
}

/* 검색 및 정렬 */
.work-controls {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    background: white;
    border-bottom: 1px solid var(--border);
    align-items: center;
}

.work-search {
    flex: 1;
    position: relative;
}

.work-search i {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary);
}

.work-search input {
    width: 100%;
    padding: 0.75rem 1rem 0.75rem 2.5rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 0.9rem;
}

.work-filters {
    display: flex;
    gap: 0.5rem;
}

/* 소임 목록 - 모바일 기본 (PC는 미디어 쿼리에서 오버라이드) */
.work-list {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* 카드 그리드 컨테이너 - 모바일 기본 1열 */
.work-cards-grid {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.work-card {
    background: white;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1rem;
    margin-bottom: 1rem;  /* 기본 카드 간격 */
    cursor: pointer;
    transition: all 0.2s;
}

.work-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.work-card-header {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
}

.work-category {
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    color: white;
}

.status-badge {
    padding: 0.25rem 0.5rem;  /* 0.75rem → 0.5rem (공간 절약) */
    border-radius: 6px;  /* 12px → 6px (모던 + 효율) */
    font-size: 0.75rem;
    font-weight: 500;
}

.status-todo {
    background: #E0E7FF;
    color: #4F46E5;
}

.status-doing {
    background: #DBEAFE;
    color: #2563EB;
}

.status-done {
    background: #D1FAE5;
    color: #059669;
}

.priority-badge {
    padding: 0.25rem 0.5rem;  /* 0.75rem → 0.5rem (공간 절약) */
    border-radius: 6px;  /* 12px → 6px (모던 + 효율) */
    font-size: 0.75rem;
    font-weight: 500;
}

.priority-high {
    background: #FEE2E2;
    color: #DC2626;
}

.work-title {
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
}

.work-meta {
    display: flex;
    gap: 1rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.work-meta i {
    margin-right: 0.25rem;
}

.work-links {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
    flex-wrap: wrap;
}

.link-badge {
    padding: 0.25rem 0.5rem;
    background: var(--bg-secondary);
    border-radius: 8px;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

/* 소임 상세 모달 */
.work-detail-modal {
    width: 700px;
    max-width: 95vw;
    max-height: 90vh;
    overflow-y: auto;
}

.form-section {
    margin-bottom: 2rem;
}

.form-section h4 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border);
}

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

/* 연결 항목 */
.link-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem;
    background: var(--bg-secondary);
    border-radius: 8px;
    margin-bottom: 0.5rem;
}

.link-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.link-icon {
    font-size: 1.25rem;
}

.link-text {
    font-size: 0.9rem;
}

.link-actions {
    display: flex;
    gap: 0.5rem;
}

.btn-icon, .btn-icon-danger {
    padding: 0.25rem 0.5rem;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s;
}

.btn-icon:hover {
    background: rgba(0, 0, 0, 0.05);
}

.btn-icon-danger:hover {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger);
}

/* 댓글 */
.comments-list {
    max-height: 300px;
    overflow-y: auto;
    margin-bottom: 1rem;
}

.comment-item {
    padding: 0.75rem;
    background: var(--bg-secondary);
    border-radius: 8px;
    margin-bottom: 0.5rem;
}

.comment-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.comment-author {
    font-weight: 600;
    font-size: 0.9rem;
}

.comment-date {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.comment-body {
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

.comment-add {
    display: flex;
    gap: 0.5rem;
}

.comment-add input {
    flex: 1;
}

.btn-text-danger {
    background: none;
    border: none;
    color: var(--danger);
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    font-size: 0.85rem;
}

.btn-text-danger:hover {
    text-decoration: underline;
}

/* 연결 추가 모달 */
.add-link-modal {
    width: 500px;
    max-width: 90vw;
}

.search-results {
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.5rem;
    margin-top: 1rem;
}

.search-result-item {
    padding: 0.75rem;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    margin-bottom: 0.25rem;
}

.search-result-item:hover {
    background: var(--bg-hover);
}

.text-muted {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.text-danger {
    color: var(--danger);
    font-size: 0.9rem;
}

.text-warning {
    color: var(--warning);
    font-size: 0.9rem;
}

/* ============================================ */
/* 모바일 최적화 CSS (≤420px)                   */
/* ============================================ */

/* 툴바: 줄바꿈 금지, 한 줄 유지 */
.toolbar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: white;
    border-bottom: 1px solid var(--border);
    flex-wrap: nowrap; /* 강제 한 줄 */
    overflow-x: auto;
}

/* 칩 컨테이너: 가로 스크롤, 스크롤바 숨김 */
.chips {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE, Edge */
    padding: 0.5rem 0;
}

.chips::-webkit-scrollbar {
    display: none; /* Chrome, Safari */
}

.chip {
    padding: 0.375rem 0.75rem;  /* 0.5rem 1rem → 0.375rem 0.75rem (공간 절약) */
    border: 1px solid var(--border);
    background: white;
    border-radius: 6px;  /* 20px → 6px (모던 + 효율) */
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s;
    font-size: 0.875rem;
    flex-shrink: 0; /* 축소 방지 */
    min-height: 38px; /* 44px → 38px (터치 영역 유지) */
    display: inline-flex;
    align-items: center;
}

.chip:hover {
    background: var(--bg-hover);
}

.chip.active {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

/* XS (≤420px)에서 숨김 */
@media (max-width: 420px) {
    .hide-xs {
        display: none !important;
    }
    
    /* 아이콘 버튼만 보이기 */
    .btn-icon-only {
        padding: 0.5rem;
        min-width: 44px;
        min-height: 44px;
    }
    
    .btn-icon-only .btn-text {
        display: none;
    }
    
    /* 툴바 컴팩트 */
    .toolbar {
        padding: 0.5rem 0.75rem;
        gap: 0.25rem;
    }
    
    /* 검색 입력 최소 너비 */
    .toolbar input[type="search"],
    .toolbar input[type="text"] {
        min-width: 120px;
        flex: 1;
    }
}

/* 폼 그리드: PC(≥900px)에서 2열 */
.form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 900px) {
    .form-grid {
        grid-template-columns: 1fr 1fr;
    }
    
    .form-grid .full-width {
        grid-column: 1 / -1;
    }
}

/* 모바일 전체화면 모달 */
@media (max-width: 420px) {
    .modal-fullscreen {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        border-radius: 0;
        overflow-y: auto;
    }
    
    .modal-fullscreen .modal-body {
        padding: 1rem;
    }
}

/* ============================================ */
/* 게시판 (Boards/Posts) 스타일                 */
/* ============================================ */

/* 보드 선택 칩 (가로 스크롤) */
.board-chips {
    display: flex;
    gap: 0.5rem;
    padding: 1rem;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    background: white;
    border-bottom: 1px solid var(--border);
}

.board-chips::-webkit-scrollbar {
    display: none;
}

.board-chip {
    padding: 0.5rem 1.25rem;
    border: 2px solid var(--border);
    background: white;
    border-radius: 24px;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s;
    font-size: 0.9rem;
    font-weight: 500;
    flex-shrink: 0;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

.board-chip:hover {
    background: var(--bg-hover);
}

.board-chip.active {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

.board-chip.admin {
    background: var(--secondary);
    color: white;
    border-color: var(--secondary);
}

/* 게시글 카드 (모바일 1열) */
.post-card {
    background: white;
    padding: 1rem;
    border-radius: 12px;
    border: 1px solid var(--border);
    cursor: pointer;
    transition: all 0.2s;
    margin-bottom: 0.75rem;
}

.post-card:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    border-color: var(--primary);
}

.post-card-header {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.post-card-title {
    flex: 1;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--text);
}

.post-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
    align-items: center;
}

.post-card-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 500;
}

.post-card-badge.status-open {
    background: #EEF2FF;
    color: #4F46E5;
}

.post-card-badge.status-done {
    background: #ECFDF5;
    color: #059669;
}

.post-card-badge.status-archived {
    background: #F3F4F6;
    color: #6B7280;
}

/* 게시글 상세 모달 */
.post-detail-modal {
    width: 600px;
    max-width: 95vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

.post-detail-modal .modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
}

.post-section {
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--border);
}

.post-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.post-section-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* 첨부파일 그리드 */
.attachment-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 0.75rem;
}

.attachment-item {
    position: relative;
    aspect-ratio: 1;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border);
    cursor: pointer;
    transition: all 0.2s;
}

.attachment-item:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.attachment-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.attachment-date-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,0.7);
    color: white;
    padding: 0.25rem;
    font-size: 0.7rem;
    text-align: center;
}

.attachment-delete {
    position: absolute;
    top: 4px;
    right: 4px;
    background: rgba(255,255,255,0.9);
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s;
}

.attachment-item:hover .attachment-delete {
    opacity: 1;
}

/* 연결된 소임 목록 */
.linked-work-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.linked-work-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: var(--bg-secondary);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.linked-work-item:hover {
    background: var(--bg-hover);
}

.linked-work-category {
    padding: 0.25rem 0.5rem;
    background: white;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 500;
    flex-shrink: 0;
}

.linked-work-title {
    flex: 1;
    font-size: 0.9rem;
}

.linked-work-status {
    padding: 0.25rem 0.5rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    flex-shrink: 0;
}

.linked-work-status.todo {
    background: #FEF3C7;
    color: #92400E;
}

.linked-work-status.doing {
    background: #DBEAFE;
    color: #1E40AF;
}

.linked-work-status.done {
    background: #D1FAE5;
    color: #065F46;
}

/* 고정 하단 버튼 바 */
.modal-footer-fixed {
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    background: white;
    border-top: 1px solid var(--border);
    padding: 1rem;
    display: flex;
    gap: 0.5rem;
    z-index: 10;
}

/* 1줄 형식 업무 카드 */
/* ===== 2줄 컴팩트 카드 (v2) ===== */
.work-card-v2 {
    min-height: 90px !important; /* 65px → 90px (높이 증가) */
    padding: 0.875rem 1.25rem !important; /* 패딩 증가 */
    background: white !important;
    border: 1px solid var(--border) !important;
    border-radius: 8px !important;
    margin-bottom: 0.5rem !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.5rem !important; /* 0.375rem → 0.5rem */
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
}

.work-card-v2:hover {
    border-color: var(--primary) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    transform: translateY(-1px) !important;
}

/* To-do 카드 구분 */
.work-card-todo {
    background: linear-gradient(to right, #f0fdfa 0%, white 20%) !important;
    border-left: 3px solid #14B8A6 !important;
}

/* 1줄: 헤더 */
.work-card-header-row {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    height: 22px !important;
    flex-shrink: 0 !important;
}

.category-icon {
    display: none !important;
    /* font-size: 16px !important;
    flex-shrink: 0 !important; */
}

.category-badge-v2 {
    padding: 0.25rem 0.5rem !important;
    border-radius: 4px !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    color: white !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

.work-title-v2 {
    flex: 1 !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    color: var(--text) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    min-width: 0 !important;
}

.owner-badge-v2 {
    font-size: 11px !important;
    color: var(--text-secondary) !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.25rem !important;
}

.owner-badge-v2 i {
    font-size: 10px !important;
}

.date-badge-v2 {
    font-size: 11px !important;
    color: var(--text-secondary) !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.25rem !important;
}

.date-badge-v2 i {
    font-size: 10px !important;
}

/* 2줄: 내용 */
.work-card-content-row {
    display: flex !important;
    align-items: flex-start !important;
    gap: 0.5rem !important;
    min-height: 18px !important;
    flex-wrap: wrap !important;
}

.content-icon {
    display: none !important;
    /* font-size: 14px !important;
    flex-shrink: 0 !important;
    opacity: 0.7 !important; */
}

.work-description-v2 {
    flex: 1 !important;
    font-size: 12px !important;
    color: #666 !important;
    word-break: break-word !important;
    line-height: 1.4 !important;
    max-width: 100% !important;
}

.work-links-v2 {
    font-size: 14px !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.25rem !important;
}

.work-actions-v2 {
    display: flex !important;
    gap: 0.25rem !important;
    flex-shrink: 0 !important;
    margin-left: auto !important;
}

.quick-action-btn-v2 {
    width: 24px !important;
    height: 24px !important;
    padding: 0 !important;
    border: 1px solid var(--border) !important;
    background: white !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s !important;
    font-size: 10px !important;
    color: var(--text-secondary) !important;
}

.quick-action-btn-v2:hover {
    background: var(--primary) !important;
    color: white !important;
    border-color: var(--primary) !important;
}

/* 반응형 */
@media (max-width: 768px) {
    .work-card-v2 {
        min-height: 70px !important;
        padding: 0.625rem 0.875rem !important;
        width: 100% !important;
    }
    
    .work-card-header-row {
        gap: 0.375rem !important;
    }
    
    .work-title-v2 {
        font-size: 13px !important;
    }
    
    .category-badge-v2 {
        font-size: 9px !important;
        padding: 0.2rem 0.4rem !important;
    }
    
    .work-description-v2 {
        font-size: 11px !important;
    }
    
    .owner-badge-v2,
    .date-badge-v2 {
        font-size: 10px !important;
    }
}

/* 1줄 형식 업무 카드 */
.work-card-compact {
    padding: 0.75rem 1rem !important;
    background: white !important;
    border: 1px solid var(--border) !important;
    border-radius: 8px !important;
    margin-bottom: 0.5rem !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
}

/* 🔥 이전 스타일 완전 무효화 - 최우선 적용 */
.work-card.work-card-compact .work-card-meta-row,
.work-card.work-card-compact .work-meta-item,
.work-card.work-card-compact .work-card-header,
.work-card.work-card-compact .work-card-title-row,
.work-card.work-card-compact .work-links,
.work-card.work-card-compact .work-meta,
.work-card.work-card-compact .work-card-badges {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}

.work-card-compact:hover {
    border-color: var(--primary) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    transform: translateY(-1px) !important;
}

.work-card-single-row {
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    flex-wrap: nowrap !important;
    overflow: hidden !important;
}

.work-card-title-compact {
    flex: 1;
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.work-category-compact {
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    color: white;
    white-space: nowrap;
    flex-shrink: 0;
}

.work-owner-compact {
    font-size: 12px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 0.25rem;
    white-space: nowrap;
    flex-shrink: 0;
}

.work-owner-compact i {
    font-size: 10px;
}

.work-links-compact {
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
}

.work-card-actions-compact {
    display: flex;
    gap: 0.25rem;
    flex-shrink: 0;
    margin-left: auto;
}

.work-card-actions-compact .quick-action-btn {
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--border);
    background: white;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    font-size: 11px;
    color: var(--text-secondary);
}

.work-card-actions-compact .quick-action-btn:hover {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

/* 상태 배지 (1줄 형식용) */
.status-badge {
    padding: 0.25rem 0.5rem;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}

.status-badge.status-todo {
    background: #FEF3C7;
    color: #92400E;
}

.status-badge.status-doing {
    background: #DBEAFE;
    color: #1E40AF;
}

.status-badge.status-done {
    background: #D1FAE5;
    color: #065F46;
}

.priority-badge {
    padding: 0.25rem 0.5rem;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}

.priority-badge.priority-high {
    background: #FEE2E2;
    color: #991B1B;
}

/* 반응형 */
@media (max-width: 768px) {
    .work-quick-add {
        flex-wrap: wrap;
    }
    
    .work-quick-add input {
        width: 100%;
    }
    
    .work-controls {
        flex-direction: column;
    }
    
    .work-search {
        width: 100%;
    }
    
    .work-filters {
        width: 100%;
        justify-content: space-between;
    }
    
    .form-row {
        grid-template-columns: 1fr;
    }
    
    .work-detail-modal {
        width: 100%;
        max-height: 100vh;
    }
    
    /* 모바일에서 1줄 형식 최적화 */
    .work-card-single-row {
        gap: 0.5rem;
    }
    
    .work-card-title-compact {
        font-size: 13px;
    }
    
    .work-category-compact {
        padding: 0.2rem 0.5rem;
        font-size: 10px;
    }
    
    .work-owner-compact {
        font-size: 11px;
    }
    
    .work-links-compact {
        font-size: 12px;
    }
}

@media (max-width: 420px) {
    .post-detail-modal {
        width: 100%;
        max-width: 100%;
        height: 100%;
        max-height: 100%;
        border-radius: 0;
    }
    
    .attachment-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    /* 🔥 카드 레이아웃 최적화 */
    .work-card {
        padding: 0.625rem !important;  /* 1rem → 0.625rem (여백 축소) */
        margin-bottom: 0.5rem !important;  /* 카드 간격 축소 */
    }
    
    .work-card-header {
        margin-bottom: 0 !important;  /* 헤더 하단 여백 제거 */
    }
    
    /* 제목과 배지를 같은 줄에 배치 */
    .work-card-title-row {
        display: flex !important;
        align-items: flex-start !important;
        justify-content: space-between !important;
        gap: 0.5rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    .work-card-badges {
        display: flex !important;
        gap: 0.25rem !important;
        flex-shrink: 0 !important;
    }
    
    /* 카테고리와 메타 정보를 같은 줄에 배치 */
    .work-card-meta-row {
        display: flex !important;
        align-items: center !important;
        gap: 0.5rem !important;
        flex-wrap: wrap !important;
        position: relative !important;
    }
    
    .work-card-actions {
        display: flex !important;
        gap: 0.25rem !important;
        margin-left: auto !important;
    }
    
    .quick-action-btn {
        padding: 0.25rem 0.5rem !important;
        border: 1px solid var(--border) !important;
        background: white !important;
        border-radius: 4px !important;
        cursor: pointer !important;
        transition: all 0.2s !important;
        font-size: 10px !important;
        color: var(--text-secondary) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .quick-action-btn:hover {
        background: var(--primary) !important;
        color: white !important;
        border-color: var(--primary) !important;
    }
    
    .quick-action-btn i {
        font-size: 10px !important;
    }
    
    .work-meta-item {
        font-size: 9.5px !important;
        color: var(--text-secondary) !important;
    }
    
    .work-meta-item i {
        font-size: 8.5px !important;
        margin-right: 0.25rem !important;
    }
    
    /* 링크 배지 여백 축소 */
    .work-links {
        margin-top: 0.375rem !important;
    }
    
    /* 🔥 모바일 텍스트 크기 최적화 (덮어쓰기 방지) */
    .work-card-title,
    .work-title {
        font-size: 11px !important;
        font-weight: 500 !important;
        margin: 0 !important;
        flex: 1 !important;
        line-height: 1.4 !important;
    }
    
    .work-category {
        font-size: 8px !important;
        padding: 0.125rem 0.5rem !important;
        flex-shrink: 0 !important;
    }
    
    .work-meta {
        font-size: 9.5px !important;
        gap: 0.5rem !important;
    }
    
    .work-meta i {
        font-size: 8.5px !important;
    }
    
    .status-badge {
        font-size: 8px !important;
        padding: 0.125rem 0.5rem !important;
    }
    
    .priority-badge {
        font-size: 8px !important;
        padding: 0.125rem 0.5rem !important;
    }
    
    .link-badge {
        font-size: 7px !important;
        padding: 0.125rem 0.375rem !important;
    }
}