/* --- New Site Tab Styles --- */
#siteTab {
    border-bottom: none;
    gap: 4px; /* 탭 간격 줄임 */
}

#siteTab .nav-link {
    background-color: #f1f5f9;
    border: none;
    border-radius: 8px;
    color: #475569;
    font-weight: 600;
    transition: all 0.2s ease-in-out;
    padding: 10px 20px;
    margin-right: 6px;
}

#siteTab .nav-link:hover {
    background-color: #6366f1;
    color: #ffffff;
}

#siteTab .nav-link.active {
    color: #ffffff;
    background: var(--bd-violet, #6366f1);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

#siteTab .nav-link .badge {
    background-color: #cbd5e1;
    color: #475569;
    font-weight: 600;
}

#siteTab .nav-link.active .badge {
    background-color: #ffffff;
    color: var(--bd-violet, #6366f1);
}

#siteTabContent {
    padding: 0;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

/* --- End New Site Tab Styles --- */

.category-nav .nav-link {
    color: #495057;
    border: 1px solid #dee2e6;
    margin-right: 10px;
    margin-bottom: 5px;
    padding: 0.5rem 0.5rem;
}

.category-nav .nav-link.active {
    background-color: #e9ecef;
    border-color: #dee2e6;
    color: #0d6efd;
}

#post-list-container {
    min-height: 500px;
}

.post-link.read {
    color: #999 !important;
    text-decoration: line-through;
}

/* Desktop table view read state */
.table tbody tr.read {
    background-color: #f8f9fa;
}

.table tbody tr.read td {
    color: #999 !important;
}

.category-link {
    font-size: 0.8rem; /* 카테고리 글자 크기 조정 */
}

/* Category header styles */
.category-header {
    padding: 0.5rem 0;
    border-bottom: 1px solid #e9ecef;
}

.category-header h6 {
    font-size: 0.9rem;
    font-weight: 500;
}

.category-header .bi-folder-fill {
    color: #6c757d;
}

/* Mobile post item styles */
.post-list-mobile .post-item {
    transition: background-color 0.2s ease;
    margin-bottom: 4px;
}

.post-list-mobile .post-item.read {
    opacity: 0.6;
    background-color: #f8f9fa;
}

.post-list-mobile .post-item.read .post-title {
    color: #999 !important;
}

.post-list-mobile .post-item.read .love-heart,
.post-list-mobile .post-item.read .date,
.post-list-mobile .post-item.read .views,
.post-list-mobile .post-item.read .author {
    color: #999 !important;
}

/* Mobile post title text truncation */
.post-list-mobile .post-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0; /* flexbox에서 text-overflow가 제대로 작동하도록 */
}

/* --- Mobile responsive split panes --- */
.community-wrapper {
    /* desktop: keep original flow (tabs on top, content below) */
    display: block;
}

/* On small screens make a two-step view: first list (sites + categories), then posts only */
@media (max-width: 768px) {
    /* Prevent horizontal scroll on small screens */
    .app-container,
    .main-content,
    .content-wrapper,
    .container-fluid,
    .tab-content,
    .tab-pane {
        overflow-x: hidden !important;
        max-width: 100% !important;
    }
    .container-fluid {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .community-wrapper {
        display: grid;
        grid-template-columns: 42% 58%;
        gap: 0.5rem;
    }

    /* In single-site mode, use full-width flow */
    .community-wrapper.single-site {
        display: block;
    }

    /* site list becomes vertical */
    #siteTab {
        display: flex;
        flex-direction: column;
        gap: 6px;
        overflow-y: auto;
        max-height: calc(100vh - 140px);
        padding-right: 2px;
    }

    .site-list-pane {
        position: sticky;
        top: 60px;
        align-self: start;
        height: fit-content;
    }

    /* show only categories initially */
    .category-pane {
        display: block;
    }

    .post-pane {
        display: none;
    }

    /* Override Bootstrap grid widths for mobile: full width rows */
    .category-pane,
    .post-pane {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }

    /* Hide category + site list when showing posts-only mode */
    .mobile-posts-only .site-list-pane,
    .mobile-posts-only .category-pane {
        display: none !important;
    }

    .mobile-posts-only .post-pane {
        display: block !important;
        max-width: 100% !important;
    }
}

/* --- Mobile post list styles --- */
@media (max-width: 768px) {
    /* Full-bleed list: remove horizontal paddings from containers */
    .content-pane,
    .post-pane,
    .post-list-mobile {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        max-width: 100% !important;
    }

    .post-list-mobile .post-item {
        padding-left: 0;
        padding-right: 0;
    }
    .post-list-mobile .post-link {
        display: inline-block;
        line-height: 1.3;
        max-width: calc(100% - 42px); /* leave space for comment badge */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    /* Comment badge (top-right) */
    .post-list-mobile .comment-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 28px;
        height: 20px;
        padding: 0 6px;
        border-radius: 10px;
        font-weight: 700;
        font-size: 12px;
        background: #eef2ff;
        color: #4f46e5;
    }
    .post-list-mobile .comment-badge.level-low {
        background: #e6f4ea; /* green light */
        color: #1b5e20;     /* green text */
    }
    .post-list-mobile .comment-badge.level-mid {
        background: #fff3e0; /* orange light */
        color: #e65100;      /* orange text */
    }
    .post-list-mobile .comment-badge.level-high {
        background: #fde7e9; /* red light */
        color: #c62828;      /* red text */
    }

    /* Like heart + small red count (bottom-left) */
    .post-list-mobile .love-heart {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        line-height: 1;
    }
    .post-list-mobile .love-heart .bi-heart-fill {
        color: #e53935; /* red */
        font-size: 8px;
    }
    .post-list-mobile .love-heart .count {
        color: #e53935; /* red */
        font-weight: 700;
        font-size: 10px;
    }
    .post-list-mobile .date,
    .post-list-mobile .views,
    .post-list-mobile .author {
        color: #6c757d;
        font-size: 10px;
    }
}

/* Visual helper when mobile menu is visible */
.mobile-menu-btn {
    padding-left: 0;
}

/* --- Crawler button & toast styles copied from software.css --- */
.crawler-toast {
    min-width: 300px;
    max-width: 350px;
}

.crawler-toast .toast-body {
    font-size: 0.8rem;
    line-height: 1.4; /* improve readability */
    white-space: pre-line; /* preserve newlines from server output */
    word-wrap: break-word;
    max-height: 60vh; /* allow taller toasts but bounded to viewport */
    overflow-y: auto; /* scroll when content exceeds max-height */
}

.toast-container {
    padding: 0.5rem !important;
}

/* 모바일에서 카테고리 네비 항목의 오른쪽 마진 제거 */
@media (max-width: 768px) {
    .category-nav .nav-link {
        margin-right: 0 !important;
    }
}