@charset "utf-8";

/* ================================
   게시판 목록 상단 정보/버튼
================================ */
#bo_btn_top{
    margin:30px 0 10px;
}
#bo_btn_top:after{
    content:"";
    display:block;
    clear:both;
}
#bo_list_total{
    float:left;
    line-height:30px;
    font-size:14px;
    color:#4e546f;
}
.btn_bo_user{
    float:right;
    margin:0;
    padding:0;
    list-style:none;
}
.btn_bo_user li{
    float:left;
    margin-left:5px;
    padding-left:0 !important;
}
.btn_bo_user li button{
    height:35px;
    line-height:35px;
    min-width:80px;
    background:#f2f2f2;
    border:1px solid #ddd;
    color:#333;
    font-size:13px;
    font-family:'NotoKR-md';
    font-weight:400;
}
.btn_bo_user li a{
    height:35px;
    line-height:35px;
    min-width:80px;
    background:#f242a8;
    border:1px solid #f242a8;
    color:#fff;
    font-size:13px;
    font-weight:400;
}
.btn_bo_user li a:hover{
    background:#b3399a;
}

/* ================================
   카테고리(bo_cate)
================================ */
#bo_cate{
    padding:7px;
    margin:10px 0;
    text-align:center;
}
#bo_cate h2{
    position:absolute;
    font-size:0;
    line-height:0;
    overflow:hidden;
}
#bo_cate ul{
    zoom:1;
}
#bo_cate ul:after{
    content:"";
    display:block;
    clear:both;
}
#bo_cate li{
    display:inline-block;
    margin:6px;
}
#bo_cate a {
    display:block;
    padding:8px 18px;    /* ← 버튼 자체가 커짐 */
    line-height:28px;    /* ← 전체 높이 증가 */
    font-size:15px;      /* ← 글자 크기 UP */
    font-weight:500;
    background:#fff;
    border-radius:6px;   /* ← pill 느낌 더 부드럽게 */
    border:0px solid #d6d6d6;
    color:#6f6f6f;
    transition:0.2s;
}
#bo_cate a:hover{
    background:#dfe6e9;
    border-color:#bfc9cc;
}

/* 선택된 */
#bo_cate #bo_cate_on {
	position:relative;
    background:#fff !important;
    border-color:#fff !important;
    color:#000 !important;
    font-weight:600;
	border-bottom:2px solid #000; 
    box-shadow:inset 0 0px 0px rgba(30,120,180,0.6);
}

#bo_cate #bo_cate_on::before{
	position:absolute;
	bottom:0;
	left:0;
	width:100%; 
	height:3px;
	background:#000;
	content:"";
}

/* ================================
   PC용 목록 헤더 / 리스트 (테이블 느낌)
================================ */
.bo_list_head ul{
    border-top:1px solid #000;
    border-bottom:1px solid #ddd;
    margin:0 auto;
}
.bo_list_head ul li{
    padding:15px 0;
    display:table;
    width:100%;
    font-size:16px;
}
.bo_list_head ul li span{
    float:left;
    text-align:center;
}
.bo_list_head ul li span.s-number{width:10%;}
.bo_list_head ul li span.s-name{width:20%;}
.bo_list_head ul li span.s-user{width:25%;}
.bo_list_head ul li span.s-address{width:25%;}
.bo_list_head ul li span.s-phone{width:10%;}
.bo_list_head ul li span.s-homepage{width:10%;}

.bo_list{
    margin:0 auto 10px;
    background:#fff;
}
.bo_list ul{ margin:0; padding:0; list-style:none; }
.bo_list ul li{
    padding:15px 0;
    border-bottom:1px solid #ddd;
    display:table;
    width:100%;
    font-size:18px;
}
.bo_list ul li a{ color:#666; }
.bo_list ul li span{
    float:left;
    color:#666;
    text-align:center;
}
.bo_list ul li span .sv_member{
    float:none;
    color:#666;
}

.bo_list ul li span.s-number{width:10%;}
.bo_list ul li span.s-name{width:20%; text-align:center;}
.bo_list ul li span.s-name a{color:#111;}
.bo_list ul li span.s-user{width:25%;}
.bo_list ul li span.s-address{width:25%;}
.bo_list ul li span.s-phone{width:10%;}
.bo_list ul li span.s-homepage{width:10%; text-align:center;}

.bo_list .cmt{
    color:#888;
    font-size:13px;
    height:16px;
    line-height:16px;
    padding:0 5px;
    vertical-align:middle;
}

/* 홈페이지 아이콘 공통 */
.home-link{
    display:inline-block;
    color:#555;
    margin-left:6px;
    font-size:16px;
    transition:color 0.2s;
}
.home-link:hover{
    color:#0073e6;
}

/* ================================
   전화 아이콘 공통
================================ */
/* 기본: PC에서는 아이콘 숨김 */
.s-phone .m-phone-icon{
    display:none;
    margin-right:4px;
    font-size:14px;
    color:#ff8000;
    vertical-align:middle;
}

/* 전화번호 링크 스타일 */
.s-phone .phone-link{
    color:#666;
    text-decoration:none;
}
.s-phone .phone-link:hover{
    text-decoration:underline;
}

/* ================================
   📱 모바일 (카드형 레이아웃)
   구분 / 기관명 / 소재지 / 연락처 / 홈페이지
================================ */
@media (max-width: 820px){

    /* 상단 헤더(번호/구분/기관명/소재지/연락처/홈페이지) 숨김 */
    .bo_list_head ul li{
        display:none;
    }

    /* 전체 리스트 좌우 여백 */
    .bo_list{
        padding:0 10px;
    }

    /* 각 항목을 카드형 라운드 박스로 */
    .bo_list ul li{
        display:block;
        width:100%;
        margin:0 0 12px 0;
        padding:12px 14px;
        border:1px solid #e5e5e5;
        border-radius:12px;
        background:#ffffff;
        box-shadow:0 2px 6px rgba(0,0,0,0.04);
        font-size:14px;
        box-sizing:border-box;
    }

    /* 내부 span 세로 나열 + 좌측 정렬 */
    .bo_list ul li span{
        float:none !important;
        display:block !important;
        width:100% !important;
        padding:3px 0;
        text-align:left;
        color:#555;
        word-break:keep-all;
    }

    /* 번호/체크박스/PC전용 숨김 */
    .bo_list ul li span.s-number,
    .bo_list ul li span.s-check,
    .mobile_none{
        display:none !important;
    }

    /* 구분 (s-name) – 최상단, 굵게 */
    .bo_list ul li span.s-name{
        font-size:15px;
        font-weight:700;
        margin-bottom:6px;
    }
    .bo_list ul li span.s-name::before{
        content:"구분 ";
        color:#999;
        font-size:12px;
        margin-right:4px;
        font-weight:400;
    }

    /* 기관명 (s-user) 라벨 */
    .bo_list ul li span.s-user::before{
        content:"기관명 ";
        color:#999;
        font-size:12px;
        margin-right:4px;
        font-weight:400;
    }

    /* 소재지 (s-address) 라벨 + 폭 80% */
    .bo_list ul li span.s-address{
        width:80% !important;
    }
    .bo_list ul li span.s-address::before{
        content:"소재지 ";
        color:#999;
        font-size:12px;
        margin-right:4px;
        font-weight:400;
    }

    /* 연락처 (s-phone) 라벨 */
    .bo_list ul li span.s-phone::before{
        content:"연락처 ";
        color:#999;
        font-size:12px;
        margin-right:4px;
        font-weight:400;
    }

    /* 홈페이지 (s-homepage) 라벨 */
    .bo_list ul li span.s-homepage::before{
        content:"홈페이지 ";
        color:#999;
        font-size:12px;
        margin-right:4px;
        font-weight:400;
    }

    /* 모바일에서 전화기 아이콘 보이기 */
    .s-phone .m-phone-icon{
        display:inline-block;
    }
}


@media (max-width: 820px){
    .bo_list ul li span.s-homepage{
        text-align:left !important;
    }
}