@charset "utf-8";

/* ============ 공통 설정 ============ */
#kboard-custom-list, #kboard-custom-document {
    font-family: 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
    color: #333;
    max-width: 1100px; 
    margin: 0 auto;
    font-size: 14px;
}

/* ============ 리스트 화면 (list.php) ============ */
#kboard-custom-list .kboard-list-header { margin-bottom: 20px; }
#kboard-custom-list .kboard-total-count { font-size: 13px; color: #666; }

/* 둥근 카테고리 탭 */
#kboard-custom-list .kboard-category { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 30px; }
#kboard-custom-list .kboard-category-item { padding: 6px 18px; border-radius: 20px; border: 1px solid #e0e6ed; background-color: #fff; color: #5c6ac4; text-decoration: none !important; font-size: 13px; transition: all 0.2s ease; }
#kboard-custom-list .kboard-category-item.active { background-color: #5c6ac4; border-color: #5c6ac4; color: #fff; font-weight: bold; }

/* 지브라 패턴 테이블 */
#kboard-custom-list .kboard-list-table table { width: 100%; border-collapse: collapse; border-top: none; border-bottom: 1px solid #e0e0e0; }
#kboard-custom-list .kboard-list-table thead td { padding: 15px 10px; text-align: center; font-weight: bold; color: #333; border-bottom: 1px solid #e0e0e0; background: #fff; }
#kboard-custom-list .kboard-list-table tbody td { padding: 16px 10px; text-align: center; color: #555; vertical-align: middle; border: none; }
#kboard-custom-list .kboard-list-table tbody tr:nth-child(odd) td { background-color: #ffffff; }
#kboard-custom-list .kboard-list-table tbody tr:nth-child(even) td { background-color: #f9f9f9; }
#kboard-custom-list .kboard-list-table tbody tr:hover td { background-color: #f1f5f9; }

/* 열 너비 설정 */
#kboard-custom-list .kboard-list-uid { width: 60px; color: #999 !important; font-size: 13px; }
#kboard-custom-list .kboard-list-title { text-align: left !important; padding-left: 20px !important; }
#kboard-custom-list .kboard-list-user { width: 100px; }
#kboard-custom-list .kboard-list-view { width: 80px; color: #777; font-size: 13px; }
#kboard-custom-list .kboard-list-date { width: 80px; color: #777; font-size: 13px; }

/* 제목 영역 */
#kboard-custom-list .kboard-list-title a { display: flex; align-items: center; gap: 8px; text-decoration: none !important; color: #222; }
#kboard-custom-list .kboard-title-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 450px; font-size: 14px; }
#kboard-custom-list .kboard-badge { background-color: #edf2ff; color: #5c6ac4; padding: 2px 8px; border-radius: 12px; font-size: 11px; font-weight: bold; min-width: 40px; text-align: center; }
#kboard-custom-list .kboard-comments { background-color: #edf2ff; color: #5c6ac4; padding: 1px 6px; border-radius: 10px; font-size: 11px; font-weight: bold; display: inline-flex; align-items: center; gap: 2px; }

/* 하단 페이징 및 버튼 */
#kboard-custom-list .kboard-list-bottom { position: relative; padding: 40px 0; display: flex; justify-content: center; align-items: center; }
#kboard-custom-list .kboard-pagination ul { display: flex; gap: 5px; padding: 0; margin: 0; list-style: none; }
#kboard-custom-list .kboard-pagination li { display: inline-block; white-space: nowrap; border: none; background: transparent; }
#kboard-custom-list .kboard-pagination li a { display: flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; padding: 0 5px; background-color: #f5f5f5; color: #555; font-size: 13px; text-decoration: none !important; border-radius: 4px; border: none; box-shadow: none; }
#kboard-custom-list .kboard-pagination li.active a { background-color: #5c6ac4; color: #fff; font-weight: bold; }
#kboard-custom-list .btn-write { position: absolute; right: 0; padding: 8px 24px; background-color: #fff; border: 1px solid #dcdce6; color: #333 !important; text-decoration: none !important; border-radius: 4px; font-size: 14px; }

/* ============ 본문 화면 (document.php) ============ */
#kboard-custom-document .kboard-document-wrap { background: #fff; margin-bottom: 20px; }

#kboard-custom-document .kboard-document-header { margin-bottom: 15px; }
#kboard-custom-document .kboard-category-badge { display: inline-block; background: #e0e7ff; color: #4f46e5; padding: 4px 10px; border-radius: 4px; font-size: 12px; font-weight: bold; margin-bottom: 10px; }
#kboard-custom-document .kboard-title { font-size: 26px; font-weight: bold; color: #111; margin: 0 0 20px 0; letter-spacing: -0.5px; border: none; padding: 0; }

/* 프로필 정보 (사진과 동일) */
#kboard-custom-document .kboard-detail { display: flex; justify-content: space-between; align-items: center; padding: 20px 0; border-bottom: 1px solid #eee; border-top: 1px solid #eee; margin-bottom: 30px; }
#kboard-custom-document .detail-left { display: flex; align-items: center; gap: 15px; }
#kboard-custom-document .detail-avatar img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; background: #f1f5f9; display: block; }
#kboard-custom-document .detail-info { display: flex; flex-direction: column; gap: 6px; }
#kboard-custom-document .detail-name { font-size: 15px; font-weight: bold; color: #333; }
#kboard-custom-document .detail-meta { font-size: 13px; color: #888; display: flex; gap: 12px; align-items: center; }
#kboard-custom-document .detail-meta svg { color: #888; margin-right: 3px; vertical-align: -2px; }
#kboard-custom-document .detail-right a { color: #aaa; transition: 0.2s; display: flex; align-items: center; justify-content: center; text-decoration: none; border: none; margin-left: 10px; }
#kboard-custom-document .detail-right a:hover { color: #333; }

/* 본문 내용 */
#kboard-custom-document .kboard-document-main { font-size: 15px; color: #333; line-height: 1.8; min-height: 200px; padding-bottom: 50px; }
#kboard-custom-document .content-view { margin: 0; padding: 0; word-break: break-all; }
#kboard-custom-document .content-view img { max-width: 100%; height: auto; }

/* 네비게이션 (이전/다음글) */
#kboard-custom-document .kboard-document-navi { border-top: 1px solid #f0f0f0; border-bottom: 1px solid #f0f0f0; margin-bottom: 20px; }
#kboard-custom-document .navi-item { display: flex; align-items: center; padding: 15px 10px; border-bottom: 1px solid #f9f9f9; text-decoration: none !important; color: #555; transition: 0.2s; box-shadow: none; }
#kboard-custom-document .navi-item:last-child { border-bottom: none; }
#kboard-custom-document .navi-item:hover { background: #fafafa; }
#kboard-custom-document .navi-arrow { width: 80px; font-size: 13px; color: #888; }
#kboard-custom-document .navi-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; color: #333; }
#kboard-custom-document .navi-date { width: 80px; text-align: right; font-size: 13px; color: #aaa; }

/* 댓글 영역 */
#kboard-custom-document .kboard-comments-area { margin-top: 30px; }

/* 반응형 모바일 설정 */
@media screen and (max-width: 600px) {
    #kboard-custom-list .kboard-list-table thead { display: none; }
    #kboard-custom-list .kboard-list-table tbody td { display: block; width: 100% !important; text-align: left !important; padding: 5px 10px; }
    #kboard-custom-list .kboard-list-uid, 
    #kboard-custom-list .kboard-list-user, 
    #kboard-custom-list .kboard-list-view, 
    #kboard-custom-list .kboard-list-date { display: none !important; }
    #kboard-custom-list .kboard-list-title { padding: 15px 10px !important; }
    #kboard-custom-list .kboard-title-text { white-space: normal; }
    #kboard-custom-document .kboard-detail { flex-direction: column; align-items: flex-start; gap: 15px; }
    #kboard-custom-document .detail-right { width: 100%; justify-content: flex-end; }
}