/* K-바이오뷰티융합대학원 그누보드 스킨 CSS */

body {background: #f8fafc;}
.section-header {text-align: center; margin-bottom: 20px;}

.btn-primary {padding: 10px 24px;border-radius: 8px;font-size: 0.9rem;font-weight: 600;text-decoration: none;transition: all 0.3s ease;border: none;color: white;background: linear-gradient(135deg, #4a7ab0 0%, #1a365d 100%);cursor: pointer;display: inline-flex;align-items: center;gap: 8px;}
.btn-primary:hover {box-shadow: 0 4px 15px rgba(26, 54, 93, 0.3);transform: translateY(-2px);}
.btn-secondary {padding: 10px 20px;border-radius: 8px;font-size: 0.9rem;font-weight: 500;border: 1px solid #e2e8f0;background: white;color: #4a5568;cursor: pointer;transition: all 0.3s ease;text-decoration: none;display: inline-flex;align-items: center;gap: 6px;}
.btn-secondary:hover {border-color: #4a7ab0;color: #4a7ab0;}
.btn-danger {padding: 10px 20px;border-radius: 8px;font-size: 0.9rem;font-weight: 500;border: 1px solid #fecaca;background: white;color: #dc2626;cursor: pointer;transition: all 0.3s ease;}
.btn-danger:hover {background: #fef2f2;}
.board-container {max-width: 1200px;margin: 0 auto;padding: 0 40px 100px;}
.board-container-view {max-width: 1400px;margin: 0 auto;padding: 60px 40px 100px;}
.board-header {display: flex;align-items: center;justify-content: space-between;margin-bottom: 30px;flex-wrap: wrap;gap: 20px;}
.board-title-area {display: flex;flex-direction: column;gap: 8px;}
.board-title {font-size: 1.8rem;font-weight: 700;color: #1a365d;}
.board-desc {color: #64748b;font-size: 0.95rem;}
.category-tabs {display: flex;gap: 10px;margin-bottom: 24px;flex-wrap: wrap;}
.category-tab {padding: 10px 24px;border-radius: 30px;font-size: 0.9rem;font-weight: 500;border: none;cursor: pointer;transition: all 0.3s ease;background: white;color: #64748b;border: 1px solid #e2e8f0;text-decoration: none;}
.category-tab:hover {border-color: #4a7ab0;color: #4a7ab0;}
.category-tab.active {background: linear-gradient(135deg, #4a7ab0 0%, #1a365d 100%);color: white;border-color: transparent;}
.search-bar {display: flex;gap: 10px;margin-bottom: 30px;background: white;padding: 16px 24px;border-radius: 16px;box-shadow: 0 4px 20px rgba(0,0,0,0.05);}
.search-select, .frm_input {padding: 12px 16px;border: 1px solid #e2e8f0;border-radius: 10px;font-size: 0.9rem;background: #f8fafc;color: #333;}
.search-input, .frm_input {flex: 1;padding: 12px 20px;border: 1px solid #e2e8f0;border-radius: 10px;font-size: 0.95rem;transition: all 0.3s ease;}
.search-input:focus, .frm_input:focus {outline: none;border-color: #4a7ab0;box-shadow: 0 0 0 3px rgba(74, 122, 176, 0.1);}
.search-btn, .btn_submit {padding: 12px 32px;background: linear-gradient(135deg, #4a7ab0 0%, #1a365d 100%);color: white;border: none;border-radius: 10px;font-size: 0.95rem;font-weight: 600;cursor: pointer;transition: all 0.3s ease;}
.search-btn:hover, .btn_submit:hover {box-shadow: 0 4px 15px rgba(26, 54, 93, 0.3);transform: translateY(-2px);}
.board-info {display: flex;justify-content: space-between;align-items: center;margin-bottom: 16px;padding: 0 8px;}
.board-count {color: #64748b;font-size: 0.9rem;}
.board-count strong {color: #1a365d;font-weight: 700;}
.board-table-wrap {background: white;border-radius: 20px;overflow: hidden;box-shadow: 0 10px 40px rgba(0,0,0,0.06);}
.board-table {width: 100%;border-collapse: collapse;}
.board-table thead {background: linear-gradient(135deg, #f8fafc 0%, #edf2f7 100%);}
.board-table th {padding: 18px 16px;font-weight: 600;color: #4a5568;font-size: 0.9rem;text-align: center;border-bottom: 2px solid #e2e8f0;}
.board-table th.th-check { width: 50px; }
.board-table th.th-num { width: 80px; }
.board-table th.th-category { width: 100px; }
.board-table th.th-title { text-align: left; }
.board-table th.th-writer { width: 120px; }
.board-table th.th-date { width: 120px; }
.board-table th.th-hit { width: 80px; }
.board-table tbody tr {transition: all 0.3s ease;border-bottom: 1px solid #f1f5f9;}
.board-table tbody tr:hover {background: #f8fafc;}
.board-table tbody tr.notice {background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);}
.board-table tbody tr.notice:hover {background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);}
.board-table td {padding: 20px 16px;text-align: center;font-size: 0.95rem;color: #4a5568;}
.board-table td.td-title {text-align: left;}
.custom-checkbox {width: 20px;height: 20px;accent-color: #4a7ab0;cursor: pointer;}
.category-badge {display: inline-block;padding: 4px 12px;border-radius: 20px;font-size: 0.8rem;font-weight: 500;}
.category-badge.news { background: #dbeafe; color: #1e40af; }
.category-badge.notice { background: #fef3c7; color: #b45309; }
.category-badge.guide { background: #d1fae5; color: #065f46; }
.category-badge.event { background: #fce7f3; color: #be185d; }
.post-title {display: flex;align-items: center;gap: 10px;flex-wrap: wrap;}
.post-title a {color: #333;text-decoration: none;font-weight: 500;transition: color 0.3s ease;line-height: 1.5;}
.post-title a:hover {color: #4a7ab0;}
.badge-new {display: inline-block;padding: 2px 8px;background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);color: white;font-size: 0.7rem;font-weight: 600;border-radius: 4px;}
.badge-notice {display: inline-block;padding: 2px 8px;background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);color: white;font-size: 0.7rem;font-weight: 600;border-radius: 4px;}
.badge-file {display: inline-flex;align-items: center;justify-content: center;width: 20px;height: 20px;background: #e2e8f0;border-radius: 4px;}
.badge-file svg {width: 12px;height: 12px;}
.comment-count {color: #4a7ab0;font-weight: 600;font-size: 0.85rem;}
.pagination {display: flex;justify-content: center;gap: 6px;margin-top: 40px;flex-wrap: wrap;}
.pagination a, .pagination strong, .pagination span {display: flex;align-items: center;justify-content: center;min-width: 40px;height: 40px;padding: 0 12px;border-radius: 10px;font-size: 0.9rem;font-weight: 500;text-decoration: none;transition: all 0.3s ease;border: 1px solid #e2e8f0;background: white;color: #4a5568;}
.pagination a:hover {border-color: #4a7ab0;color: #4a7ab0;}
.pagination strong {background: linear-gradient(135deg, #4a7ab0 0%, #1a365d 100%);color: white;border-color: transparent;}
.board-actions {display: flex;justify-content: space-between;align-items: center;margin-top: 24px;padding-top: 24px;border-top: 1px solid #e2e8f0;}
.action-left, .action-right {display: flex;gap: 10px;}

/* 관리자 전용 요소 */
.admin-only {display: none !important;}
body.is-admin .admin-only {display: flex !important;}


/* ========================================
   모바일용 카드 레이아웃 (숨김 기본)
   ======================================== */
.mobile-card-list {
    display: none;
}

.mobile-card {
    background: white;
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.04);
    border: 1px solid #f1f5f9;
    transition: all 0.3s ease;
}

.mobile-card:hover {
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    border-color: #e2e8f0;
}

.mobile-card.notice {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    border-color: #fde68a;
}

.mobile-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.mobile-card-title {
    font-size: 1rem;
    font-weight: 600;
    color: #1a365d;
    line-height: 1.5;
    margin-bottom: 12px;
}

.mobile-card-title a {
    color: inherit;
    text-decoration: none;
}

.mobile-card-title a:hover {
    color: #4a7ab0;
}

.mobile-card-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 0.85rem;
    color: #94a3b8;
    flex-wrap: wrap;
}

.mobile-card-meta span {
    display: flex;
    align-items: center;
    gap: 4px;
}

.mobile-card-meta svg {
    width: 14px;
    height: 14px;
}

.admin-btn {display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; color: #fff; border-radius: 8px; text-decoration: none; transition: all 0.2s ease;}
.admin-btn:hover {transform: translateY(-2px); filter: brightness(1.1);}
.admin-btn-admin {background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);}
.admin-btn-logout {background: linear-gradient(135deg, #059669 0%, #10b981 100%); box-shadow: 0 2px 8px rgba(5, 150, 105, 0.3);}
.admin-btn-login {background: linear-gradient(135deg, #64748b 0%, #94a3b8 100%); box-shadow: 0 2px 8px rgba(100, 116, 139, 0.3);}

.admin-login-area {text-align: right; margin-bottom: 15px; display: flex; justify-content: flex-end; align-items: center; gap: 8px;}


/* ========================================
   반응형 CSS - 태블릿 (1024px 이하)
   ======================================== */
@media (max-width: 1024px) {
	.board-container, .board-container-view {padding: 40px 24px 80px;}
	.board-title {font-size: 1.5rem;}
	.board-table th.th-writer { width: 100px; }
	.board-table th.th-date { width: 100px; }
	.board-table th.th-hit { width: 60px; }
}


/* ========================================
   반응형 CSS - 모바일 (768px 이하)
   ======================================== */
@media (max-width: 768px) {
    .board-container, 
    .board-container-view {
        padding: 24px 16px 60px;
    }
    
    .board-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        margin-bottom: 20px;
    }
    
    .board-title {
        font-size: 1.3rem;
    }
    
    .board-desc {
        font-size: 0.85rem;
    }
    
    /* 카테고리 탭 - 가로 스크롤 */
    .category-tabs {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding-bottom: 8px;
        margin-bottom: 16px;
        gap: 8px;
    }
    
    .category-tabs::-webkit-scrollbar {
        display: none;
    }
    
    .category-tab {
        padding: 8px 16px;
        font-size: 0.85rem;
        white-space: nowrap;
        flex-shrink: 0;
    }
    
    /* 검색바 - 세로 정렬 */
    .search-bar {
        flex-direction: column;
        padding: 16px;
        border-radius: 12px;
        gap: 10px;
        margin-bottom: 20px;
    }
    
    .search-select {
        width: 100%;
    }
    
    .search-input {
        width: 100%;
    }
    
    .search-btn {
        width: 100%;
        padding: 14px;
    }
    
    .board-info {
        margin-bottom: 12px;
    }
    
    .board-count {
        font-size: 0.85rem;
    }
    
    /* 데스크톱 테이블 숨기기 */
    .board-table-wrap {
        display: none;
    }
    
    /* 모바일 카드 리스트 표시 */
    .mobile-card-list {
        display: block;
    }
    
    /* 페이지네이션 */
    .pagination {
        gap: 4px;
        margin-top: 24px;
    }
    
    .pagination a, 
    .pagination strong, 
    .pagination span {
        min-width: 36px;
        height: 36px;
        padding: 0 8px;
        font-size: 0.85rem;
        border-radius: 8px;
    }
    
    /* 하단 버튼 */
    .board-actions {
        flex-direction: column;
        gap: 12px;
        padding-top: 20px;
        margin-top: 20px;
    }
    
    .action-left, 
    .action-right {
        width: 100%;
        justify-content: center;
    }
    
    .btn-primary, 
    .btn-danger {
        flex: 1;
        justify-content: center;
        padding: 14px 20px;
    }
}


/* ========================================
   반응형 CSS - 작은 모바일 (480px 이하)
   ======================================== */
@media (max-width: 480px) {
    .board-container, 
    .board-container-view {
        padding: 20px 12px 50px;
    }
    
    .board-title {
        font-size: 1.2rem;
    }
    
    .category-tab {
        padding: 6px 12px;
        font-size: 0.8rem;
    }
    
    .mobile-card {
        padding: 16px;
        border-radius: 12px;
    }
    
    .mobile-card-title {
        font-size: 0.95rem;
    }
    
    .mobile-card-meta {
        font-size: 0.8rem;
        gap: 12px;
    }
    
    .pagination a, 
    .pagination strong, 
    .pagination span {
        min-width: 32px;
        height: 32px;
        font-size: 0.8rem;
    }
}