@charset "utf-8";
/* =========================================================================
 * counsel.css — 상담하기(counsel) 게시판 스킨 테마
 *   basic 스킨(style.css) 위에 사이트 톤으로 재정의 · 이미지 없는 한 줄 목록
 *   리스트 / 뷰 / 글쓰기 공통 + 모바일 반응형
 * ========================================================================= */

/* 컨테이너 (다른 게시판과 동일한 1700 폭 · 중앙) */
.cns_wrap { width: 100%; max-width: 1700px; margin: 0 auto; padding: 90px 20px 140px; box-sizing: border-box; }
.cns_wrap #bo_list, .cns_wrap #bo_v, .cns_wrap #bo_w { width: 100% !important; float: none; }
.cns_wrap :where(a) { text-decoration: none; }
.cns_wrap :where(p, span, strong, a, li, td, th, div) { word-break: keep-all; overflow-wrap: break-word; }
#container_title { display: none; }   /* 기본 컨테이너 타이틀 숨김(서브비주얼로 대체) */

/* ===== 카테고리 (칩) ===== */
#bo_cate { margin-bottom: 26px; }
#bo_cate h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
#bo_cate_ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
#bo_cate_ul li { margin: 0; }
#bo_cate_ul a { display: inline-block; padding: 8px 18px; border: 1px solid #d9dfe2; border-radius: 40px; background: #fff; color: #4a5560; font-size: 14px; line-height: 1.2; }
#bo_cate_ul a:hover { border-color: #7894a8; color: #20262b; }
#bo_cate_ul .bo_cate_on, #bo_cate_ul strong { display: inline-block; padding: 8px 18px; border-radius: 40px; background: #2f3a42; border: 1px solid #2f3a42; color: #fff; font-size: 14px; line-height: 1.2; font-weight: 500; }

/* ===== 상단: Total / 버튼 ===== */
#bo_btn_top { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
#bo_list_total { font-size: 14px; color: #666; }
#bo_list_total span { color: #111; font-weight: 600; }
.btn_bo_user { display: flex; align-items: center; gap: 12px; margin: 0; padding: 0; list-style: none;     margin-left: auto;}
.btn_bo_user li { margin: 0; }
.cns_wrap .btn, .cns_wrap .btn_b01, .cns_wrap .btn_admin { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 42px; padding: 0 16px; border: 1px solid #cfd6da; border-radius: 8px; background: #fff; color: #3a4650; font-size: 14px; line-height: 1; cursor: pointer; }
.cns_wrap .btn:hover, .cns_wrap .btn_b01:hover, .cns_wrap .btn_admin:hover { border-color: #7894a8; color: #20262b; }
.btn_bo_user a[title="글쓰기"] { background: #2f3a42; border-color: #2f3a42; color: #fff; }
.btn_bo_user a[title="글쓰기"]:hover { background: #20262b; border-color: #20262b; color: #fff; }
.more_opt { position: absolute; right: 0; top: 48px; z-index: 30; margin: 0; padding: 6px; list-style: none; min-width: 130px; background: #fff; border: 1px solid #dfe3e6; border-radius: 8px; box-shadow: 0 6px 20px rgba(39,56,69,.12); }
.more_opt li button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 12px; border: 0; background: none; color: #4a5560; font-size: 14px; text-align: left; cursor: pointer; border-radius: 6px; }
.more_opt li button:hover { background: #f2f5f6; color: #20262b; }

.cns_wrap .tbl_head01 thead th.all_chk {width:30px}
.cns_wrap .tbl_head01 thead th.th_no {width:50px}
.cns_wrap .tbl_head01 thead th.th_subject {}
.cns_wrap .tbl_head01 thead th.th_name {width:100px}
.cns_wrap .tbl_head01 thead th.th_hit {width:50px}
.cns_wrap .tbl_head01 thead th.th_data {width:100px}

/* ===== 목록 테이블 (한 줄) ===== */
.cns_wrap .tbl_head01 { border: 0; }
.cns_wrap .tbl_head01 table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.cns_wrap .tbl_head01 caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.cns_wrap .tbl_head01 thead th { background: #fafafa; border: 0; border-top: 2px solid #2f3a42; border-bottom: 1px solid #e6e6e6; padding: 15px 10px; font-size: 14px; font-weight: 600; color: #333; text-align: center; }
.cns_wrap .tbl_head01 thead th a { color: #333; }
.cns_wrap .tbl_head01 tbody td { border: 0; border-bottom: 1px solid #eee; padding: 15px 10px; font-size: 14px; color: #555; text-align: center; vertical-align: middle; }
.cns_wrap .tbl_head01 tbody tr:hover { background: #f8fafb; }
.cns_wrap .tbl_head01 .bo_notice { background: #fbfcfd; }
/* 열 너비 */
.cns_wrap .tbl_head01 col, .cns_wrap .tbl_head01 .td_num2 { width: 70px; }
.cns_wrap .tbl_head01 .td_name { width: 150px; }
.cns_wrap .tbl_head01 .td_num { width: 90px; }
.cns_wrap .tbl_head01 .td_datetime { width: 120px; }
.cns_wrap .tbl_head01 .td_chk { width: 42px; }
.cns_wrap .tbl_head01 .td_subject { width: auto; text-align: left; }
.cns_wrap .td_subject .bo_cate_link { display: inline-block; margin-right: 8px; padding: 3px 10px; border: 1px solid #d9dfe2; border-radius: 20px; font-size: 12px; color: #2f3a42; background: #f6f8f9; vertical-align: middle; }
.cns_wrap .td_subject .bo_tit { display: inline; }
.cns_wrap .td_subject .bo_tit a { color: #222; font-size: 15px; }
.cns_wrap .td_subject .bo_tit a:hover { color: #20262b; text-decoration: underline; }
.cns_wrap .notice_icon { display: inline-block; padding: 3px 10px; border-radius: 20px; background: #2f3a42; color: #fff; font-size: 12px; }
.cns_wrap .bo_current { color: #7894a8; font-weight: 600; }
.cns_wrap .new_icon { display: inline-block; margin-left: 4px; padding: 1px 6px; border-radius: 4px; background: #e5545a; color: #fff; font-size: 11px; vertical-align: middle; }
.cns_wrap .cnt_cmt { display: inline-block; margin-left: 4px; color: #e5545a; font-weight: 600; }
.cns_wrap .empty_table { padding: 70px 0 !important; text-align: center; color: #999; font-size: 15px; }

/* ===== 페이지네이션 ===== */
.cns_wrap .pg_wrap { margin: 34px 0 0; text-align: center; }
.cns_wrap .pg { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 5px; }
.cns_wrap .pg a, .cns_wrap .pg strong { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 10px; border: 1px solid #d6d6d6; border-radius: 7px; background: #fff; color: #555; font-size: 14px; }
.cns_wrap .pg a:hover { border-color: #7894a8; color: #20262b; }
.cns_wrap .pg strong.pg_current { background: #2f3a42; border-color: #2f3a42; color: #fff; }
/* 페이징 화살표 글리프(default.css text-indent 무력화) */
.cns_wrap .pg .pg_start, .cns_wrap .pg .pg_prev, .cns_wrap .pg .pg_next, .cns_wrap .pg .pg_end { text-indent: 0; overflow: visible; font-size: 0; }
.cns_wrap .pg .pg_start::before { content: "◂◂"; font-family: "Century Gothic", "Segoe UI Symbol", sans-serif; font-size: 16px; letter-spacing: -0.48px; }
.cns_wrap .pg .pg_prev::before  { content: "◂"; font-family: "Century Gothic", "Segoe UI Symbol", sans-serif; font-size: 16px; letter-spacing: -0.48px; }
.cns_wrap .pg .pg_next::before  { content: "▸"; font-family: "Century Gothic", "Segoe UI Symbol", sans-serif; font-size: 16px; letter-spacing: -0.48px; }
.cns_wrap .pg .pg_end::before   { content: "▸▸"; font-family: "Century Gothic", "Segoe UI Symbol", sans-serif; font-size: 16px; letter-spacing: -0.48px; }
.cns_wrap .pg .pg_start::before, .cns_wrap .pg .pg_end::before { letter-spacing: -5.48px; }

/* 하단 버튼줄 */
.cns_wrap .bo_fx { margin-top: 20px; display: flex; justify-content: flex-end; }

/* ===== 검색 팝업(기본 오버레이 톤 정리) ===== */
.cns_wrap .bo_sch_wrap .bo_sch { border-radius: 12px; }
.cns_wrap .sch_bar { display: flex; gap: 6px; }
.cns_wrap .sch_input { height: 44px; border: 1px solid #ccc; border-radius: 8px; padding: 0 12px; }
.cns_wrap .sch_btn { height: 44px; width: 48px; border: 0; border-radius: 8px; background: #2f3a42; color: #fff; }

/* =========================================================================
 * 뷰(읽기)
 * ========================================================================= */
.cns_wrap #bo_v { border: 0; }
.cns_wrap #bo_v_title { padding: 0 0 20px; border-bottom: 2px solid #2f3a42; font-size: 26px; line-height: 1.4; letter-spacing: -0.5px; color: #111; }
.cns_wrap #bo_v_title .bo_v_cate { display: inline-block; margin-right: 10px; padding: 4px 12px; border-radius: 20px; background: #f0f3f5; color: #2f3a42; font-size: 15px; vertical-align: middle; }
.cns_wrap #bo_v_info { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 16px 4px; border-bottom: 1px solid #eee; margin: 0; }
.cns_wrap #bo_v_info h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.cns_wrap .profile_info { display: flex; align-items: center; gap: 14px; }
.cns_wrap .profile_info .pf_img img { width: 40px; height: 40px; border-radius: 50%; }
.cns_wrap .profile_info_ct { font-size: 13px; color: #777; line-height: 1.7; }
.cns_wrap .profile_info_ct strong { color: #444; font-weight: 500; margin-right: 12px; }
.cns_wrap .profile_info_ct a { color: #777; }
.cns_wrap #bo_v_atc_title, .cns_wrap #bo_v_atc h2, .cns_wrap #bo_v_file h2, .cns_wrap #bo_v_link h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.cns_wrap #bo_v_share { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 0; }
.cns_wrap #bo_v_con { min-height: 220px; padding: 34px 4px; font-size: 16px; line-height: 1.8; color: #333; }
.cns_wrap #bo_v_con img { max-width: 100%; height: auto; }
.cns_wrap #bo_v_file { margin-top: 10px; padding: 16px; background: #f7f9fa; border-radius: 10px; }
.cns_wrap #bo_v_file ul, .cns_wrap #bo_v_link ul { margin: 0; padding: 0; list-style: none; }
.cns_wrap #bo_v_file li, .cns_wrap #bo_v_link li { font-size: 14px; color: #555; padding: 6px 0; }
.cns_wrap .bo_v_nb { display: flex; flex-direction: column; margin: 30px 0 0; padding: 0; border-top: 1px solid #e6e6e6; list-style: none; }
.cns_wrap .bo_v_nb li { display: flex; align-items: center; gap: 14px; padding: 15px 6px; border-bottom: 1px solid #eee; font-size: 14px; }
.cns_wrap .bo_v_nb .nb_tit { flex: 0 0 90px; color: #7894a8; font-weight: 600; }
.cns_wrap .bo_v_nb a { flex: 1 1 auto; min-width: 0; color: #444; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cns_wrap .bo_v_nb a:hover { color: #20262b; text-decoration: underline; }
.cns_wrap .bo_v_nb .nb_date { flex: 0 0 auto; color: #aaa; font-size: 13px; }
.cns_wrap .bo_v_com { display: flex; gap: 8px; }

/* 댓글 영역 (view_comment) — 가볍게 사이트 톤 */
.cns_wrap #bo_vc { margin-top: 40px; }
.cns_wrap #bo_vc h2 { font-size: 18px; color: #111; margin-bottom: 14px; }
.cns_wrap .cmt_contents { border-top: 1px solid #e6e6e6; }
.cns_wrap #bo_vc textarea { width: 100%; box-sizing: border-box; min-height: 90px; padding: 12px; border: 1px solid #ccc; border-radius: 8px; }
.cns_wrap #bo_vc .btn_b01, .cns_wrap #bo_vc .btn_b02 { border-radius: 8px; }

/* =========================================================================
 * 글쓰기
 * ========================================================================= */
.cns_wrap #bo_w { border: 0; }
.cns_wrap #bo_w .write_div { margin-bottom: 12px; }
.cns_wrap #bo_w .bo_w_info { display: flex; gap: 10px; flex-wrap: wrap; }
.cns_wrap #bo_w label.sound_only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.cns_wrap .frm_input { height: 50px; padding: 0 14px; border: 1px solid #ccc; border-radius: 8px; background: #fff; font-size: 15px; color: #222; box-sizing: border-box; }
.cns_wrap .frm_input:focus, .cns_wrap select#ca_name:focus, .cns_wrap textarea:focus { outline: none; border-color: #7894a8; }
.cns_wrap .full_input { width: 100%; }
.cns_wrap .half_input { flex: 1 1 220px; width: auto; min-width: 0; }
.cns_wrap select#ca_name { width: 100%; height: 50px; padding: 0 14px; border: 1px solid #ccc; border-radius: 8px; background: #fff; font-size: 15px; color: #222; box-sizing: border-box; }
.cns_wrap .wr_content textarea, .cns_wrap #wr_content { width: 100%; min-height: 260px; padding: 14px; border: 1px solid #ccc; border-radius: 8px; font-size: 15px; line-height: 1.7; box-sizing: border-box; resize: vertical; }
.cns_wrap .bo_v_option { display: flex; flex-wrap: wrap; gap: 14px; margin: 4px 0; padding: 0; list-style: none; }
.cns_wrap .bo_w_flie .file_wr { display: flex; align-items: center; gap: 8px; }
.cns_wrap .frm_file { font-size: 14px; }
.cns_wrap .btn_confirm { display: flex; justify-content: center; gap: 10px; margin-top: 28px; }
.cns_wrap .btn_submit { height: 54px; padding: 0 34px; border: 0; border-radius: 8px; background: #2f3a42; color: #fff; font-size: 16px; cursor: pointer; }
.cns_wrap .btn_submit:hover { background: #20262b; }
.cns_wrap .btn_cancel { height: 54px; line-height: 54px; padding: 0 30px; border: 1px solid #cfd6da; border-radius: 8px; background: #fff; color: #3a4650; font-family: "Century Gothic", "Segoe UI Symbol", sans-serif; font-size: 16px; letter-spacing: -0.48px; }
.cns_wrap .btn_cancel:hover { border-color: #7894a8; color: #20262b; }
.cns_wrap #char_count_wrap { margin-top: 6px; font-size: 13px; color: #999; text-align: right; }

/* =========================================================================
 * 반응형 (태블릿 · 모바일)
 * ========================================================================= */
@media (max-width: 1024px) {
    .cns_wrap { padding: 60px 20px 100px; }
    .cns_wrap #bo_v_title { font-size: 23px; }
    .cns_wrap #bo_v_con { font-size: 15px; }
}
@media (max-width: 768px) {
    .cns_wrap { padding: 40px 16px 80px; }

    /* 상단 버튼: 총건수/버튼 줄바꿈 */
    #bo_btn_top { align-items: center; }
    #bo_cate_ul a, #bo_cate_ul .bo_cate_on, #bo_cate_ul strong { padding: 7px 14px; font-size: 13px; }

    /* 목록 테이블 → 한 줄 카드형 (thead 숨김) */
    .cns_wrap .tbl_head01 table, .cns_wrap .tbl_head01 tbody, .cns_wrap .tbl_head01 tr, .cns_wrap .tbl_head01 td { display: block; width: 100% !important; }
    .cns_wrap .tbl_head01 thead { display: none; }
    .cns_wrap .tbl_head01 tbody tr { position: relative; padding: 14px 6px; border-bottom: 1px solid #eee; }
    .cns_wrap .tbl_head01 tbody td { border: 0; padding: 0; text-align: left; }
    .cns_wrap .tbl_head01 tr	{    background: #fbfbfb;}
    .cns_wrap .tbl_head01 .td_chk { position: absolute; top: 14px; right: 4px; width: auto !important; }
    .cns_wrap .tbl_head01 .td_num2 { display: none; width: auto !important; margin-bottom: 4px; color: #aaa; font-size: 12px; }
    .cns_wrap .tbl_head01 .td_subject { padding-left: 0 !important; margin-bottom: 15px; }
    .cns_wrap .td_subject .bo_tit a { font-size: 15px; }
    .cns_wrap .tbl_head01 .td_name, .cns_wrap .tbl_head01 .td_num, .cns_wrap .tbl_head01 .td_datetime { display: inline-block; width: auto !important; margin-right: 12px; color: #999; font-size: 12px;   padding: 0px 0  !important}
    .cns_wrap .tbl_head01 .td_name::before { content: "\f007"; font-family: FontAwesome; margin-right: 4px; color: #bbb; }
    .cns_wrap .tbl_head01 .td_datetime::before { content: "\f017"; font-family: FontAwesome; margin-right: 4px; color: #bbb; }
    .cns_wrap .tbl_head01 .td_num::before { content: "\f06e"; font-family: FontAwesome; margin-right: 4px; color: #bbb; }
	.cns_wrap .td_subject .bo_cate_link {background:#fff}
	    .cns_wrap .tbl_head01  td {height: auto;}
    /* 뷰 */
    .cns_wrap #bo_v_title { font-size: 20px; }
    .cns_wrap #bo_v_info { flex-direction: column; align-items: flex-start; }
    .cns_wrap #bo_v_con { padding: 24px 2px; font-size: 15px; }
    .cns_wrap .bo_v_nb li { flex-wrap: wrap; gap: 6px 10px; }
    .cns_wrap .bo_v_nb .nb_tit { flex-basis: auto; }
    .cns_wrap .bo_v_nb .nb_date { width: 100%; }

    /* 글쓰기 */
    .cns_wrap #bo_w .bo_w_info { flex-direction: column; gap: 10px; }
    .cns_wrap .half_input { flex: none; width: 100%; }
    .cns_wrap .btn_confirm { flex-direction: column-reverse; }
    .cns_wrap .btn_submit, .cns_wrap .btn_cancel { width: 100%; text-align: center; }
}
@media (max-width: 486px) {
    .cns_wrap { padding: 30px 14px 70px; }
    .cns_wrap #bo_v_title { font-size: 18px; }
    .cns_wrap .td_subject .bo_tit a { font-size: 14px; }
}