@charset "utf-8"; 

/*
IX Skin Design - Board [List]
*/
#ix_bbs_list {}
#ix_bbs_list * {box-sizing: border-box}
#ix_bbs_list  ul {margin:0; padding:0; list-style-type: none}


/* 1. 상단 (카테고리, 토탈) *****/
#bl_sec_top {display: flex;flex-wrap: wrap; gap:5px; padding-bottom:5px; border-bottom: 2px solid #8AABCA;}

/* 1-1. 카테고리 */
#bl_cate {flex:1;}
#bl_cate ul {display: flex;flex-wrap: wrap; gap:5px;}
#bl_cate li:first-child a  {background: #8AABCA; color: #FFF;border: 1px solid #8AABCA;}
#bl_cate li a {display:flex;align-items:center;height:22px; padding: 0 5px; font-size: 0.75rem; background: #fff; color: #888888; border-radius: 3px;  border: 1px solid #C9D2DC;}
#bl_cate li a:hover {background: #0B3359; color: #FFF;border: 1px solid #0B3359;}
#bl_cate li #bo_cate_on {background: #0B3359; color: #FFF;border: 1px solid #0B3359;}

/* 1-2. 토탈 */
#bl_total {display: flex;align-items: flex-end; height:22px; padding-right:3px; font-size:0.625rem;color: #A7A7A7;}
#bl_total span {font-weight:500; margin:0 3px;}

/* 1-3. 정렬 */
#bl_sort {display: flex;flex-wrap: wrap;align-items: flex-end;}
#bl_sort div {height: 18px; width: 35px; display: flex; justify-content: center; align-items: center;background: #F5F8FB; border: 1px solid #C1D3E3;font-size:0.75rem;color: #888888;}
#bl_sort .ls_hit {border-radius: 5px 0px 0px 5px;border-right:none;}
#bl_sort .ls_date {border-radius: 0px 5px 5px 0px;border-left:none;}
#bl_sort div:hover {background: #B3C9DD;color:#FFFFFF;}
#bl_sort .ls_active {background: #B3C9DD;color: #FFF;}


/* 1-4. 관리자버튼 */
#bl_admin {display: flex;flex-wrap: wrap;gap:3px;}
#bl_admin a {display: inline-flex; justify-content: center;align-items: center; width:22px; height:22px; border-radius: 11px; font-size: 0.6875rem;}
#bl_admin .bl_btn_adm {background: #FFABCA; color: #FFF}
#bl_admin .bl_btn_adm:hover {background: #DA6287;}
#bl_admin .bl_btn_chk {background: #8AABCA; color: #FFF}
#bl_admin .bl_btn_chk:hover {background: #538FE1;}


/* 2. 리스트 *****/
#bl_sec_list {}
#bl_sec_list div {display:flex;align-items:center;justify-content:center;}

/* 2-1. 리스트 헤드 */
#bl_list_head {display: flex;flex-wrap: wrap;gap:5px;height:45px;background: #F8F9FA;border-bottom: 1px solid #E9ECEF;}
#bl_list_head div {font-size:0.75rem; color: #555555;}
#bl_list_head a {color: #888888}
.list_chk {width:30px;}
.list_cate { width: 75px}
.list_title {flex:1;}
.list_pro {width: 350px}
.list_date {width: 100px}
.list_time {width: 70px}

/* 2-2. 리스트 */
#bl_list {width:100%;}
#bl_list #li_post {display: flex;flex-wrap: wrap;gap:5px;height:45px;border-bottom: 1px solid #F1F1F1;}
#bl_list #li_post:hover {background: #F9FAFB;}
#bl_list #li_post:last-child {border:none}

#bl_list .list_chk { display:none;}
#bl_list .list_cate a {display: inline-flex; justify-content: center; align-items: center;width: 60px; height:20px; border-radius: 3px; border: 1px solid #C9D2DC; font-size: 0.75rem; background: #F9FAFB; color: #888888;}
#bl_list .list_title {justify-content:left;gap:3px;overflow:hidden; font-size:0.875rem;}
#bl_list .list_title a{color:#555555 !important;}
#bl_list .list_title .lt_subject {overflow:hidden;white-space: nowrap;text-overflow: ellipsis;font-size:0.875rem;font-weight:500;} 
#bl_list .list_title img {display: block; height:12px;}
#bl_list .list_title span {font-size:0.75rem;color: #F7683A;}

/* 진행률 */
#bl_list .list_pro {display: flex;align-items: center;padding:0 10px;font-size:0.625rem;}
.list_pro #lp_rap {display: flex; justify-content: flex-start;width:100%;height:22px;padding:0 5px;border-radius: 9px;background: #F4F6FA;}
.list_pro .lp_bar {display: inline-flex; justify-content: center; align-items: center;min-width:20px;border-radius: 7px;}
.list_pro .lp_low {background: #ACBED0;color: #FFF;}
.list_pro .lp_medium {background: #6797D4;color: #FFF;}
.list_pro .lp_high {background: #1369D8;color: #FFF;}
.list_pro .lp_end {background: #003D8B;color: #FFF;}

/* R-Time */
#bl_list .list_date {font-size:0.75rem;color: #555555}
#bl_list .list_time {font-size:0.75rem;}
#bl_list .list_time div {width:60px; height:20px;border-radius: 3px;background: #F4F6FA;}
#bl_list .list_time span {font-weight:bold}
.list_time .ldm_day {color: #555}
.list_time .ldm_today {font-weight:bold;color: #B21016}
.list_time .ldm_after {color: #C9D2DC}
.list_time .ldm_finish {font-weight:bold;background: #dd6666 !important;color: #fff;}

#bl_list .li_notice {background: #F9FAFB;}
#bl_list .li_empty {display:flex;justify-content:center; padding:30px;font-size:0.8125rem; color: #888888}


/* 3. 하단 (검색, 버튼) *****/
#bl_sec_bt {display: flex;justify-content: space-between;padding-top:10px;border-top: 1px solid #C9D2DC;}

/* 3-1. 버튼 */
#bl_btn {order: 2;display: flex;gap:5px;}
#bl_btn * {display: inline-flex; justify-content: center; align-items: center;width: 60px; height: 28px; border-radius: 3px; border: 0px; font-size: 0.75rem;}
#bl_btn button {background: #8AABCA; color: #FFF;}
#bl_btn a {background: #0B3359; color: #FFF;}

/* 3-2. 검색 */
#bl_sch {order: 1;height: 28px;padding:0 5px;border-radius: 3px;border: 1px solid #C9D2DC;}
#bl_sch form {display: flex;gap:1px;}
#bl_sch select {height: 26px;border:none !important; font-size: 0.75rem;color: #888888;}
#bl_sch select:focus {outline: none; }
#bl_sch input {width:120px; height: 26px; border:none !important; font-size: 0.75rem;}
#bl_sch button {height: 26px; border:none; font-size:0.75rem; background: #FFF; color: #0B3359;}


/* 4. 페이지 *****/
#bl_sec_page {display:flex;justify-content:center; margin-top:20px}


/* 화면 너비가 768px 이하일 때 적용 (모바일/태블릿) */
@media screen and (max-width: 768px) {
    
    /* 1. 헤더 숨기기 (모바일에서는 항목명이 오히려 거추장스럽습니다) */
    #bl_list_head { display: none; }

    /* 2. 리스트 아이템 재배치 (세로형 레이아웃) */
    #bl_list #li_post {
        display: block; /* 가로 배열 해제 */
        height: auto !important; /* 높이 제한 해제 */
        padding: 5px;
        position: relative;
        border-bottom: 1px solid #eee;
    }

    /* 3. 체크박스와 카테고리를 상단에 작게 배치 */
    .list_chk { 
        position: absolute; 
        top: 15px; 
        left: 10px; 
        width: auto; 
    }
    
    .list_cate { 
        display: inline-block !important;
        width: auto !important;
        margin-left: 25px; 
        margin-bottom: 8px;
    }
    
    .list_cate a { 
        height: 18px !important; 
        font-size: 0.65rem !important; 
        padding: 0 5px; 
    }

    /* 4. 제목을 큼직하게 한 줄 차지하게 */
    #bl_list .list_title {
        display: block !important;
        width: 100% !important;
        padding: 5px 0 10px 0;
        white-space: normal; /* 모바일선 제목이 길면 줄바꿈 허용 */
    }
    
    #bl_list .list_title .lt_subject {
        font-size: 0.78rem !important; /* 제목 크기 키움 */
        display: block;
     }

    /* 5. 진행률 바를 제목 아래로 배치 */
    #bl_list .list_pro {
        width: 100% !important;
        padding: 0 !important;
        margin-bottom: 10px;
    }
    
    .list_pro #lp_rap {
        height: 14px !important; /* 모바일선 조금 더 얇고 깔끔하게 */
    }

    /* 6. 날짜와 D-Day(R-Time)를 하단 양옆으로 배치 */
    .list_date, .list_time {
        display: inline-flex !important;
        width: auto !important;
        font-size: 0.7rem !important;
        color: #888;	
    }
    
    .list_time {
        float: right; /* D-Day는 오른쪽 끝으로 */
    }
    
    .list_time div {
        background: transparent !important; /* 배경 빼고 깔끔하게 텍스트만 */
        width: auto !important;
        height: auto !important;
    }
	
	.list_time .ldm_finish {padding:3px;}

    /* 7. 하단 버튼 영역 조정 */
    #bl_sec_bt {
        flex-direction: column;
        gap: 15px;
        align-items: center;
    }
    #bl_btn { order: 1; width: 100%; justify-content: center; }
    #bl_sch { order: 2; width: 100%; }
    #bl_sch input { width: 60%; }
}