@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 #7a5d93;margin-bottom:10px;}
/* 1-1. 카테고리 */
#bl_cate {flex:1;}
#bl_cate ul {display: flex;flex-wrap: wrap; gap:5px;}
#bl_cate li:first-child a  {background: #7a5d93; color: #FFF;border: 1px solid #7a5d93;}
#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: #3e056a; color: #FFF;border: 1px solid #3e056a;}
#bl_cate li #bo_cate_on {background: #3e056a; color: #FFF;border: 1px solid #3e056a;}
/* 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: 20px; width: 45px; display: flex; justify-content: center; align-items: center;background: #FAFAFA; border: 1px solid #C9D2DC;font-size:0.75rem;color: #888888;}
#bl_sort .ls_hit {border-radius: 5px 0px 0px 5px;}
#bl_sort .ls_rec {border-left:none;}
#bl_sort .ls_date {border-radius: 0px 5px 5px 0px;border-left:none;}
#bl_sort div:hover {background: #3e056a;color:#FFFFFF;}
#bl_sort .ls_active {background: #3e056a;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: #7a5d93; color: #FFF}
#bl_admin .bl_btn_chk:hover {background: #1369D8;}
/* 2. 리스트 *****/
#bl_sec_list {}
#bl_sec_list div {border: 0px solid #7a5d93;}
#bl_list {display: flex;flex-wrap: wrap;justify-content: flex-start;gap:20px}
#li_post {width: calc(20% - 16px);}/* 열 */
#li_post {position: relative;display: flex; flex-direction: column; gap: 5px;}
#li_post #lp_check {position: absolute; top: 3px; right: 3px; display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; z-index: 1;}
#li_post #lp_cont {flex:1;display: flex;flex-direction: column; gap: 5px; padding:1px; border-radius: 5px; background: #F4F6FA}
#lp_cont .lc_title {height:24px; display: flex; align-items: center; border-radius: 3px;padding:0 5px; }
#lp_cont .lt_cate {flex-shrink: 0;padding-right: 5px; font-size: 0.815rem; border-right: 1px solid #F4F6FA; color: #fff; }
#lp_cont .lt_title {padding-left: 5px;font-size: 0.815rem; font-weight:500; color:#fff;overflow:hidden;white-space : nowrap;text-overflow: ellipsis;}
#lp_cont .lc_link {font-size: 0.875rem; font-weight:500;padding-bottom:5px;}
#lp_cont .lc_link li {display: flex; align-items: center;gap: 3px; padding: 3px 10px; border-bottom: 1px solid #EDEEEF;}
#lp_cont .lc_link li a {overflow:hidden;white-space : nowrap;text-overflow: ellipsis;}
#lp_cont .lc_link li:last-child {border: none;}
#lp_cont .lc_link img {display: block;height:12px; border:none}
.li_notice .lt_cate {background: #930B10 !important}
#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: right;padding-top:10px;border-top: 1px solid #C9D2DC;margin-top:10px;}
#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: #7a5d93; color: #FFF;}
#bl_btn a {background: #3e056a; color: #FFF;}
/* 4. 페이지 *****/
#bl_sec_page {display:flex;justify-content:center; margin-top:20px}

/* 상단 타이틀 바 */
#lp_cont .lc_header {
    background-color: #7a5d93;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    border-radius: 5px 5px 0 0;
}

#lp_cont .lc_title_text {
    font-size: 0.875rem;
    font-weight: bold;
    color: #fff;
}

#lp_cont .lc_checkbox {
    font-size: 0.875rem;
    color: #fff;
}

/* 텍스트 메뉴 버튼 */
#lp_cont .lc_menu {
    display: flex;
    justify-content: flex-start;
    gap: 10px;
    padding: 5px 10px;
}

#lp_cont .lc_menu_btn {
    font-size: 0.8125rem;
    font-weight: 500;
    color: #5A3E85;
    text-decoration: none;
    padding: 2px 6px;
    border-radius: 3px;
    background-color: #F0F0F5;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: background-color 0.2s ease;
}

#lp_cont .lc_menu_btn:hover {
    background-color: #e0e0ea;
}

/* 화살표 원형 스타일 */
.arrow_circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    background-color: #61568f;
    color: #fff;
    border-radius: 50%;
    font-size: 0.75rem;
    line-height: 1;
}

/* 반응형 리스트 레이아웃 */
#li_post {
    width: calc(20% - 16px); /* 기본: 5열 */
}

/* 태블릿 이하(최대 1024px)에서는 3열 */
@media screen and (max-width: 1024px) {
    #li_post {
        width: calc(33.333% - 16px);
    }
}

/* 모바일(최대 768px)에서는 2열 */
@media screen and (max-width: 768px) {
    #li_post {
        width: calc(50% - 16px);
    }
}

/* 아주 작은 화면(최대 480px)에서는 1열 */
@media screen and (max-width: 480px) {
    #li_post {
        width: 100%;
    }
}

/* 모바일에서는 무조건 2열 */
@media screen and (max-width: 768px) {
    #li_post {
        width: calc(50% - 16px) !important;
    }
}