/* 전체 컨테이너 스타일 */
.container {
    max-width: 1200px;
    margin: 0 auto;
}

/* 네비게이션 스타일 */
nav a {
    transition: color 0.2s ease;
}

nav svg {
    width: 0.625rem; /* 10px */
    height: 0.625rem;
    opacity: 0.5;
    margin: 0 0.25rem;
}

/* 테이블 스타일 개선 */
table {
    border-collapse: separate;
    border-spacing: 0;
}

th {
    font-weight: 600;
    letter-spacing: 0.05em;
    background-color: #f9fafb;
    padding: 0.75rem 1rem;
}

td {
    padding: 1rem;
    vertical-align: middle;
}

tr:hover td {
    background-color: #f8fafc;
}

/* 댓글 카운트 배지 */
.comment-badge {
    background-color: #e0f2fe;
    color: #0369a1;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
}

/* 새 글 작성 버튼 아이콘 */
.inline-flex svg {
    width: 0.625rem; /* 10px */
    height: 0.625rem;
    margin-right: 0.25rem;
}

/* 페이지네이션 아이콘 */
.pagination svg {
    width: 0.75rem; /* 12px */
    height: 0.75rem;
}

/* 버튼 내부 여백 조정 */
.inline-flex {
    padding: 0.5rem 0.875rem;
    font-size: 0.875rem;
}

/* 아이콘과 텍스트 사이 간격 조정 */
.inline-flex svg + span,
.inline-flex span + svg {
    margin-left: 0.25rem;
}

/* 빈 상태 아이콘 */
.empty-state svg {
    width: 1.5rem; /* 24px */
    height: 1.5rem;
    margin: 0 auto;
    color: #9ca3af;
}

/* 나머지 스타일은 동일하게 유지 */
.pagination-link {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.pagination-link:hover {
    background-color: #f3f4f6;
}

.pagination-active {
    background-color: #eff6ff;
    color: #2563eb;
    border-color: #bfdbfe;
}

.empty-state {
    text-align: center;
    padding: 3rem 1.5rem;
}

.empty-state-text {
    margin-top: 1rem;
    color: #6b7280;
}

/* 애니메이션 효과 */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.table-row {
    animation: fadeIn 0.3s ease-out;
}

/* 반응형 디자인 */
@media (max-width: 768px) {
    .table-container {
        margin: 0 -1rem;
    }

    th,
    td {
        padding: 0.75rem;
    }

    .pagination-link {
        padding: 0.375rem 0.75rem;
    }

    /* 모바일에서 아이콘 크기 유지 */
    svg {
        min-width: 0.625rem;
        min-height: 0.625rem;
    }
}

/* 테이블 스타일 */
.min-w-full {
    width: 100%;
}

/* 텍스트 말줄임 처리 */
.line-clamp-1 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 300px; /* 내용 칼럼 최대 너비 */
}

/* 테이블 헤더 */
th {
    padding: 0.75rem 1rem;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
}

/* 테이블 셀 */
td {
    padding: 0.75rem 1rem;
    vertical-align: middle;
}

/* 제목 스타일 */
td .font-medium {
    font-size: 0.925rem;
    color: #1f2937;
}

/* 호버 효과 */
tr:hover {
    background-color: #f9fafb;
}

tr:hover td a {
    color: #2563eb;
}

/* 반응형 처리 */
@media (max-width: 768px) {
    .line-clamp-1 {
        max-width: 150px;
    }

    td,
    th {
        padding: 0.625rem 0.75rem;
    }
}