@charset "utf-8";
/*
 * 에이블 인트라넷 — 게시판 스킨 공통 디자인 (2026-11-06)
 * 목록·보기·글쓰기를 모든 게시판에서 같은 모양으로 맞춘다.
 * 새 기본 스킨(자료실·아이디어·메모장·체크리스트·이미지)과 예전 맞춤 스킨(프로젝트·유지관리·호스팅·즐겨찾기·벤치마킹·제작문의·스케줄)의
 * 마크업을 함께 덮는다. 색 변수는 able.css 에 있다. extend/able_design.extend.php 가 able.css 뒤에 붙인다.
 *
 * 규칙: 단추 높이 34px(하단 저장·취소는 44px) · 모서리 단추 12px / 상자 14px / 카드 18px
 *        채운 파랑 = 주 동작(글쓰기·저장·검색·등록) · 흰 바탕+옅은 선 = 보조 동작(목록·수정·삭제·답변 등)
 */

/* =========================================================
 * 1. 단추 — 크기·모양 통일
 * ========================================================= */
#bo_list .btn_bo_user, #bo_v .btn_bo_user, #bo_v .bo_v_com, #bo_gall .btn_bo_user, .bo_fx .btn_bo_user, .btn_bo_adm {
    display: flex !important; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; padding: 0; float: none;
}
#bo_list .btn_bo_user li, #bo_v .btn_bo_user li, #bo_v .bo_v_com li, #bo_gall .btn_bo_user li, .btn_bo_adm li {
    float: none !important; margin: 0 !important; list-style: none; position: relative;
}
.btn_b01, a.btn_b01, .btn_b02, a.btn_b02, .btn_b03, a.btn_b03, .btn_admin, a.btn_admin, .btn_bo_user .btn,
#bo_v .bo_v_com > li > a, #bo_v .bo_v_com > li > button, .btn_bo_adm input, .btn_bo_adm button, .bo_v_com .btn {
    display: inline-flex !important; align-items: center; justify-content: center; gap: 5px;
    height: 34px !important; min-width: 34px; padding: 0 14px !important; line-height: 1 !important;
    font-size: 13px !important; font-weight: 600; white-space: nowrap; text-decoration: none !important;
    box-sizing: border-box; cursor: pointer;
}
/* 색 규칙 — 스킨마다 btn_b01/btn_b02 를 거꾸로 써서(어떤 곳은 「목록」이 파랑, 「글쓰기」가 흰색) 클래스 대신 역할로 칠한다.
 *   주 동작: 새 글쓰기 → 채운 파랑 / 그 밖(목록·수정·삭제·답변·복사·이동·스크랩·RSS) → 흰 바탕 */
.btn_bo_user .btn_b01, .btn_bo_user a.btn_b01, .bo_v_com .btn_b01, #bo_v_act .btn_b01, .bo_fx .btn_b01 {
    background: #fff !important; color: var(--able-text) !important; border: 1px solid #dfe8f5 !important; box-shadow: none !important;
}
.btn_bo_user .btn_b01:hover, .bo_v_com .btn_b01:hover, #bo_v_act .btn_b01:hover {
    border-color: var(--able-primary) !important; color: var(--able-primary) !important; background: var(--able-primary-soft) !important;
}
.btn_bo_user a[href*="write.php"]:not([href*="w=u"]):not([href*="w=r"]),
.bo_v_com a[href*="write.php"]:not([href*="w=u"]):not([href*="w=r"]) {
    background: var(--able-primary) !important; color: #fff !important; border: 0 !important; box-shadow: var(--able-btn-shadow) !important;
}
.btn_bo_user a[href*="write.php"]:not([href*="w=u"]):not([href*="w=r"]):hover,
.bo_v_com a[href*="write.php"]:not([href*="w=u"]):not([href*="w=r"]):hover {
    background: var(--able-primary-dark) !important; color: #fff !important;
}
/* 모든 단추에 같은 전환 효과 */
.btn_b01, .btn_b02, .btn_b03, .btn_admin, .btn_submit, .btn_cancel, .btn_bo_adm input, .btn_bo_adm button,
.able_pill, .able_card, #bo_cate a, .pg_page, .bo_v_com a, #bo_v_act a, #bo_vc .bo_vc_act a, .cmt_btn {
    transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s;
}

/* 아이콘만 있는 단추(새 스킨의 더보기·RSS 등)는 정사각 */
.btn_bo_user .btn_b03, .btn_bo_user .btn_bo_sch, .btn_bo_user .btn_more_opt, .bo_v_com .btn_more_opt { padding: 0 !important; width: 34px; }
.btn_b03, a.btn_b03 { background: #fff !important; color: var(--able-text) !important; border: 1px solid #dfe8f5 !important; border-radius: 12px !important; }
.btn_b03:hover { border-color: var(--able-primary) !important; color: var(--able-primary) !important; background: var(--able-primary-soft) !important; }
/* 관리 단추(선택삭제·복사·이동)는 보조 모양 */
.btn_bo_adm input, .btn_bo_adm button { background: #fff !important; color: var(--able-text) !important; border: 1px solid #dfe8f5 !important; border-radius: 12px !important; }
.btn_bo_adm input:hover, .btn_bo_adm button:hover { border-color: #ef4444 !important; color: #dc2626 !important; background: #fdecec !important; }
/* 펼침 메뉴(새 스킨 「더보기」) */
.more_opt { background: #fff !important; border: 0 !important; border-radius: 12px !important; box-shadow: var(--able-card-shadow) !important; padding: 6px !important; }
.more_opt li { border: 0 !important; }
.more_opt li a, .more_opt li button { border-radius: 8px; color: var(--able-text) !important; }
.more_opt li a:hover, .more_opt li button:hover { background: var(--able-primary-soft) !important; color: var(--able-primary) !important; }

/* =========================================================
 * 2. 목록
 * ========================================================= */
/* 분류 탭 — 알약 */
#bo_cate { margin: 0 0 16px !important; padding: 0 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
#bo_cate h2 { position: absolute; font-size: 0; line-height: 0; overflow: hidden; }
#bo_cate ul, #bo_cate_ul { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 !important; margin: 0 !important; border: 0 !important; background: transparent !important; }
#bo_cate li, #bo_cate ul li, #bo_cate_ul li { float: none !important; flex: 0 0 auto !important; margin: 0 !important; padding: 0 !important; border: 0 !important; width: auto !important; min-width: 0 !important; display: block !important; }
#bo_cate li a, #bo_cate_ul li a { width: auto !important; min-width: 0 !important; }
#bo_cate a {
    display: inline-block !important; padding: 6px 14px !important; border-radius: 999px !important; font-size: 13px; font-weight: 600;
    background: #fff !important; color: var(--able-text) !important; border: 1px solid #dfe8f5 !important; height: auto !important; line-height: 1.5 !important;
}
#bo_cate a:hover { border-color: var(--able-primary) !important; color: var(--able-primary) !important; background: var(--able-primary-soft) !important; }
#bo_cate #bo_cate_on, #bo_cate a#bo_cate_on { background: var(--able-primary) !important; border-color: var(--able-primary) !important; color: #fff !important; box-shadow: var(--able-btn-shadow); }

/* 건수·단추 줄 */
#bo_list .bo_fx, #bo_gall .bo_fx, #bo_btn_top { display: flex !important; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 12px !important; float: none; }
/* 예전 float 정리용 가상요소(:after{content:""; clear:both}) 가 flex 안에서 세 번째 칸이 되어
 * space-between 이 단추를 가운데로 밀었다 — flex 로 바꾼 줄에서는 가상요소를 없앤다 */
#bo_list .bo_fx::before, #bo_list .bo_fx::after, #bo_gall .bo_fx::before, #bo_gall .bo_fx::after, #bo_btn_top::before, #bo_btn_top::after,
.bo_fx::before, .bo_fx::after, .btn_bo_user::before, .btn_bo_user::after, .bo_v_com::before, .bo_v_com::after,
.btn_bo_adm::before, .btn_bo_adm::after, #bo_v_info::before, #bo_v_info::after, #bo_v_top::before, #bo_v_top::after,
#bo_cate ul::before, #bo_cate ul::after, #bo_cate_ul::before, #bo_cate_ul::after, #bo_sch form::before, #bo_sch form::after,
#bo_v_act::before, #bo_v_act::after, #bo_vc .bo_vc_act::before, #bo_vc .bo_vc_act::after, .btn_confirm::before, .btn_confirm::after,
.able_row::before, .able_row::after, .pg_wrap::before, .pg_wrap::after, #mainContnet::before, #mainContnet::after {
    content: none !important; display: none !important;
}
/* 상단 「건수 · 검색 · 단추」 줄 — 3칸 격자로 검색창을 정확히 가운데에 (skin/board/_able_search.inc.php) */
#bo_list .bo_fx:has(> .able_top_search), #bo_btn_top:has(> .able_top_search), #bo_gall .bo_fx:has(> .able_top_search) {
    display: grid !important; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px;
}
#bo_list .bo_fx:has(> .able_top_search) > #bo_list_total, #bo_btn_top:has(> .able_top_search) > #bo_list_total { justify-self: start; }
#bo_list .bo_fx:has(> .able_top_search) > .btn_bo_user, #bo_btn_top:has(> .able_top_search) > .btn_bo_user { justify-self: end; }
.able_top_search {
    display: flex; align-items: center; gap: 6px; padding: 6px; background: #f5f8fd; border-radius: 14px; border: 1px solid var(--able-line-soft);
}
.able_top_search select, .able_top_search .frm_input, .able_top_search input[type="text"] {
    height: 34px !important; min-height: 0 !important; background-color: #fff !important; font-size: 13px; box-sizing: border-box;
}
.able_top_search select { width: auto; padding: 0 28px 0 10px !important; }
.able_top_search input[type="text"] { width: 240px; padding: 0 12px !important; }
.able_top_search .btn_submit { height: 34px !important; padding: 0 14px !important; font-size: 13px !important; width: auto !important; text-indent: 0 !important; white-space: nowrap; }
/* 검색 단추는 아이콘만 — 정사각 */
.able_top_search .able_sch_btn { width: 34px !important; padding: 0 !important; display: inline-flex !important; align-items: center; justify-content: center; font-size: 14px !important; }

/* 단추 아이콘 없애기 — 글자가 있는 단추는 글자만 보인다.
 * 아이콘만 있는 단추(검색·더보기·닫기 등 — 화면 낭독용 .sound_only 글자를 품은 것)는 아이콘을 남긴다. */
:is(.btn_b01, .btn_b02, .btn_b03, .btn_admin, .btn_cancel, .btn_submit, .btn, .dash_qbtn, .dash_more, .dash_empty_btn,
    .bo_v_com a, .btn_bo_user a, #bo_v_act a, .memo_modal_ft a, .memo_modal_ft button, .btn_bo_adm button, #bo_v_share a):not(:has(.sound_only)) > i.fa {
    display: none !important;
}
.able_sch_reset {
    display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%;
    color: var(--able-muted) !important; background: #fff; border: 1px solid #dfe8f5; transition: color .15s, border-color .15s;
}
.able_sch_reset:hover { color: #dc2626 !important; border-color: #f2a299; }
/* 기본 스킨 style.css 가 단추 칸을 아이콘용 40px 로 고정한다 — 글자 단추로 바꿨으니 폭을 푼다 */
#bo_btn_top .btn_bo_user li, #bo_list .bo_fx .btn_bo_user li, #bo_gall .bo_fx .btn_bo_user li, .bo_fx .btn_bo_adm li { width: auto !important; }
/* 건수 표시 — 모든 게시판 같은 규격 (스킨 style.css 마다 line-height·글자 크기·위 여백이 달라 전부 고정한다)
 *   높이 34px(옆 단추와 같은 줄 높이) · 「Total N건」 알약 높이 26px · 「N 페이지」 13px 흐린 글자 */
#bo_list #bo_list_total, #bo_gall #bo_list_total, #bo_btn_top #bo_list_total, #bo_list_total {
    float: none !important; display: inline-flex !important; align-items: center; gap: 8px;
    height: 34px; margin: 0 !important; padding: 0 !important; line-height: 1 !important;
    font-size: 13px !important; font-weight: 500; color: var(--able-muted) !important; white-space: nowrap; background: transparent !important;
}
#bo_list #bo_list_total span, #bo_gall #bo_list_total span, #bo_btn_top #bo_list_total span, #bo_list_total span {
    display: inline-flex !important; align-items: center; height: 26px; margin: 0 !important; padding: 0 11px !important;
    border-radius: 999px; background: var(--able-primary-soft) !important; color: var(--able-primary) !important;
    font-size: 12px !important; font-weight: 800; line-height: 1 !important; letter-spacing: 0;
}
#bo_list .tbl_wrap { margin: 0 0 14px; }
/* 기본 스킨이 표에 두른 검은 테두리(좌·우·아래) 제거 — 칸 구분은 옅은 가로줄만 */
#bo_list .tbl_wrap, #bo_list .tbl_wrap table, #bo_list .tbl_head01, #bo_list .tbl_head01 table,
#bo_gall .tbl_wrap, #bo_gall .tbl_wrap table, #new_list .tbl_wrap table, #scrap .tbl_wrap table, #memo_list .tbl_wrap table {
    border: 0 !important; outline: 0 !important;
}
#bo_list .tbl_head01 tbody tr:last-child td { border-bottom: 0 !important; }
.tbl_head01 .td_num, .tbl_head01 .td_num2 { color: var(--able-muted) !important; font-size: 12px; }
.tbl_head01 .td_datetime, .tbl_head01 .td_date { color: var(--able-muted) !important; font-size: 12px; white-space: nowrap; }
.tbl_head01 .td_chk input[type="checkbox"], .tbl_head01 thead input[type="checkbox"] { accent-color: var(--able-primary); width: 15px; height: 15px; }
.tbl_head01 caption { position: absolute; font-size: 0; overflow: hidden; }
.bo_notice td, .bo_notice .td_subject a { font-weight: 700; }
.empty_table { padding: 50px 0 !important; color: var(--able-muted) !important; text-align: center; }

/* 목록 아래 검색 */
#bo_sch { display: flex; justify-content: center; margin: 18px 0 0 !important; padding: 0 !important; float: none !important; }
#bo_sch legend { position: absolute; font-size: 0; overflow: hidden; }
#bo_sch form { display: flex !important; align-items: center; gap: 6px; padding: 10px 12px; background: #fff; border-radius: 14px; box-shadow: var(--able-card-shadow); border: 0 !important; }
#bo_sch select, #bo_sch .frm_input, #bo_sch input[type="text"] { height: 36px; }
#bo_sch .btn_submit, #bo_sch button[type="submit"] { height: 36px !important; padding: 0 16px !important; width: auto !important; text-indent: 0 !important; font-size: 13px !important; }

/* 페이지 번호 */
.pg_wrap { display: flex !important; justify-content: center; margin: 18px 0 0 !important; float: none !important; clear: both; }
.pg_wrap .pg { display: inline-flex; gap: 4px; }
.pg_wrap .pg_page, .pg_wrap .pg_current { display: inline-flex !important; align-items: center; justify-content: center; padding: 0 10px !important; font-size: 13px; }

/* 갤러리 목록 — 카드 */
#bo_gall #gall_ul { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; margin: 0 !important; padding: 0 !important; }
#bo_gall .gall_li { float: none !important; width: auto !important; margin: 0 !important; padding: 0 !important; clear: none !important; }
#bo_gall .gall_box { background: #fff !important; border: 0 !important; border-radius: 16px !important; box-shadow: var(--able-card-shadow); overflow: hidden; padding: 0 0 12px !important; }
#bo_gall .gall_img { border: 0 !important; background: #f5f8fd !important; }
#bo_gall .gall_img img { width: 100%; height: auto; display: block; }
#bo_gall .gall_text_href, #bo_gall .gall_info { padding: 0 14px !important; }
#bo_gall .bo_tit { color: var(--able-ink) !important; font-weight: 700; }
#bo_gall .gall_info { color: var(--able-muted) !important; font-size: 12px; }

/* =========================================================
 * 3. 글 보기
 * ========================================================= */
#bo_v { padding: 28px 32px !important; }
#bo_v > header { margin: 0 0 6px; }
#bo_v_title, #bo_v_title .bo_v_tit { display: block; font-size: 22px !important; line-height: 1.4 !important; color: var(--able-ink) !important; font-weight: 800 !important; margin: 0 !important; padding: 0 !important; word-break: keep-all; }
#bo_v_title .bo_v_cate {
    display: inline-block !important; margin: 0 0 8px !important; padding: 3px 10px !important; border-radius: 999px !important;
    background: var(--able-primary-soft) !important; color: var(--able-primary) !important; font-size: 12px !important; font-weight: 700; border: 0 !important;
}

/* 작성자·날짜·조회 줄 — 한 줄에 흐린 글자, 오른쪽에 단추 */
#bo_v_info {
    display: flex !important; flex-wrap: wrap; align-items: center; gap: 6px 14px;
    margin: 10px 0 18px !important; padding: 0 0 14px !important; border: 0 !important; border-bottom: 1px solid var(--able-line-soft) !important;
    color: var(--able-muted) !important; font-size: 13px; background: transparent !important;
}
#bo_v_info h2 { position: absolute; font-size: 0; overflow: hidden; }
#bo_v_info strong { font-weight: 400 !important; color: var(--able-muted) !important; margin: 0 !important; padding: 0 !important; }
#bo_v_info .sv_member, #bo_v_info .sv_guest, #bo_v_info .profile_info_ct strong:first-child { color: var(--able-text) !important; font-weight: 700 !important; }
#bo_v_info .profile_info { display: flex; align-items: center; gap: 10px; float: none !important; }
#bo_v_info .pf_img img { width: 36px; height: 36px; border-radius: 50%; }
#bo_v_info .profile_info_ct { color: var(--able-muted) !important; line-height: 1.6; }
#bo_v_top, #bo_v_info #bo_v_top { margin: 0 0 0 auto !important; float: none !important; position: static !important; display: flex; align-items: center; gap: 6px; }
/* 예전 스킨: 단추 줄 안의 이전글·다음글 — 아래 「이전글·다음글 목록」 규칙(위 여백 18px·줄 모양)이 섞이지 않게 단추로 맞춘다 */
#bo_v #bo_v_top, #bo_v #bo_v_bot { display: flex !important; align-items: center; flex-wrap: wrap; gap: 6px; }
/* 아래 단추 줄 — 예전 스킨 CSS 가 카드 왼쪽 끝으로 밀어 두었다. 카드 안쪽 여백에 맞추고 위쪽에 옅은 구분선 */
#bo_v #bo_v_bot { position: static !important; float: none !important; width: auto !important; left: auto !important; margin: 22px 0 0 !important; padding: 16px 0 0 !important; border: 0 !important; border-top: 1px solid var(--able-line-soft) !important; background: transparent !important; }
#bo_v #bo_v_bot::before, #bo_v #bo_v_bot::after { content: none !important; display: none !important; }
#bo_v #bo_v_top ul.bo_v_nb, #bo_v #bo_v_top .bo_v_nb, #bo_v #bo_v_bot ul.bo_v_nb, #bo_v #bo_v_bot .bo_v_nb { display: flex !important; align-items: center; gap: 6px; margin: 0 !important; padding: 0 !important; float: none !important; border: 0 !important; }
#bo_v #bo_v_top .bo_v_nb li, #bo_v #bo_v_bot .bo_v_nb li { display: block !important; float: none !important; list-style: none; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; }
#bo_v #bo_v_top .bo_v_nb li a, #bo_v #bo_v_top .bo_v_nb .btn_b01, #bo_v #bo_v_bot .bo_v_nb li a, #bo_v #bo_v_bot .bo_v_nb .btn_b01 {
    display: inline-flex !important; align-items: center; height: 34px !important; padding: 0 14px !important; margin: 0 !important;
    font-size: 13px !important; font-weight: 600; border-radius: 12px !important; box-sizing: border-box; line-height: 1 !important;
    background: #fff !important; color: var(--able-text) !important; border: 1px solid #dfe8f5 !important; box-shadow: none !important;
}
#bo_v #bo_v_top .bo_v_nb li a:hover, #bo_v #bo_v_bot .bo_v_nb li a:hover { border-color: var(--able-primary) !important; color: var(--able-primary) !important; background: var(--able-primary-soft) !important; }
#bo_v #bo_v_top .bo_v_com, #bo_v #bo_v_bot .bo_v_com { margin: 0 !important; float: none !important; }

/* 링크·첨부 — 옅은 상자 */
#bo_v_link, #bo_v_file {
    margin: 0 0 16px !important; padding: 12px 16px !important; border: 0 !important; border-radius: 14px !important;
    background: #f7faff !important;
}
#bo_v_link h2, #bo_v_file h2 { font-size: 12px !important; color: var(--able-muted) !important; font-weight: 700; margin: 0 0 6px !important; padding: 0 !important; position: static !important; overflow: visible !important; line-height: 1.5 !important; height: auto !important; }
#bo_v_link ul, #bo_v_file ul { margin: 0 !important; padding: 0 !important; border: 0 !important; }
#bo_v_link li, #bo_v_file li { list-style: none; padding: 6px 0 !important; border: 0 !important; border-top: 1px solid var(--able-line-soft) !important; background: transparent !important; margin: 0 !important; }
#bo_v_link li:first-child, #bo_v_file li:first-child { border-top: 0 !important; }
#bo_v_link a, #bo_v_file a { color: var(--able-primary) !important; font-weight: 600; word-break: break-all; }
#bo_v_link .bo_v_link_cnt, #bo_v_file .bo_v_file_cnt, #bo_v_file .bo_v_file_cnt span { color: var(--able-muted) !important; font-size: 12px; }

/* 링크·첨부가 하나도 없으면 상자째 숨김 (예전 스킨은 빈 상자를 그린다) */
#bo_v_link:not(:has(li)), #bo_v_file:not(:has(li)), #bo_v_link:not(:has(a[href])) { display: none !important; }

/* 본문 */
#bo_v_atc { min-height: 0 !important; margin: 0 !important; padding: 0 !important; }
#bo_v_atc_title { position: absolute; font-size: 0; overflow: hidden; }
#bo_v_con { margin: 6px 0 20px !important; color: var(--able-text) !important; font-size: 15px; line-height: 1.8 !important; word-break: break-word; min-height: 60px; }
#bo_v_con a { color: var(--able-primary); text-decoration: underline; text-underline-offset: 2px; }
#bo_v_con img { max-width: 100%; height: auto; border-radius: 10px; }
#bo_v_con pre { border-radius: 12px; padding: 16px 18px; overflow: auto; }
#bo_v_con table { border-collapse: collapse; }
#bo_v_img { margin: 0 0 12px !important; }
#bo_v_img img { max-width: 100%; height: auto; border-radius: 12px; }

/* 예전 맞춤 스킨의 상세 정보 표(프로젝트·유지관리·호스팅 등) — 두 칸씩 항목 표 */
#bo_v .hosting_tbl, #bo_v table.hosting_tbl {
    width: 100% !important; margin: 4px 0 20px !important; border-collapse: separate !important; border-spacing: 0;
    border: 1px solid var(--able-line) !important; border-radius: 14px; overflow: hidden; background: #fff;
}
#bo_v .hosting_tbl th { background: #f5f8fd !important; color: var(--able-muted) !important; font-weight: 700 !important; font-size: 13px; text-align: left !important; padding: 11px 16px !important; border: 0 !important; border-bottom: 1px solid var(--able-line-soft) !important; width: 14%; white-space: nowrap; }
#bo_v .hosting_tbl td { color: var(--able-ink) !important; font-size: 14px; padding: 11px 16px !important; border: 0 !important; border-bottom: 1px solid var(--able-line-soft) !important; }
#bo_v .hosting_tbl tr:last-child th, #bo_v .hosting_tbl tr:last-child td { border-bottom: 0 !important; }

/* 스크랩·추천 — 본문 아래 가운데 알약 */
#bo_v_act { display: flex !important; justify-content: center; gap: 8px; margin: 10px 0 20px !important; padding: 0 !important; text-align: center; }
#bo_v_act a, #bo_v_act .bo_v_act_gng a, #bo_v_share a {
    display: inline-flex !important; align-items: center; gap: 5px; height: 34px; padding: 0 16px !important; border-radius: 999px !important;
    background: #fff !important; color: var(--able-text) !important; border: 1px solid #dfe8f5 !important; box-shadow: none !important; font-size: 13px; font-weight: 600; width: auto !important;
}
#bo_v_act a:hover, #bo_v_share a:hover { border-color: var(--able-primary) !important; color: var(--able-primary) !important; background: var(--able-primary-soft) !important; }
#bo_v_share { display: flex; justify-content: flex-end; gap: 6px; margin: 0 0 10px !important; }

/* 이전글·다음글 */
#bo_v .bo_v_nb, ul.bo_v_nb { margin: 18px 0 0 !important; padding: 0 !important; border: 0 !important; }
#bo_v > .bo_v_nb li, #bo_v ul.bo_v_nb li.btn_prv, #bo_v ul.bo_v_nb li.btn_next {
    display: flex !important; align-items: center; gap: 12px; padding: 12px 6px !important; list-style: none;
    border: 0 !important; border-top: 1px solid var(--able-line-soft) !important; background: transparent !important; float: none !important;
}
#bo_v ul.bo_v_nb li .nb_tit { color: var(--able-muted) !important; font-size: 12px; font-weight: 700; flex: 0 0 auto; }
#bo_v ul.bo_v_nb li a { color: var(--able-ink) !important; flex: 1 1 auto; }
#bo_v ul.bo_v_nb li .nb_date { color: var(--able-muted) !important; font-size: 12px; }

/* =========================================================
 * 4. 댓글
 * ========================================================= */
.cmt_btn {
    display: flex !important; align-items: center; gap: 8px; width: 100%; margin: 22px 0 0 !important; padding: 0 0 10px !important;
    background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--able-line-soft) !important; color: var(--able-ink) !important; font-weight: 800; font-size: 15px;
}
.cmt_btn b, .cmt_btn .total b { color: var(--able-primary) !important; }
.cmt_btn { cursor: pointer; border-radius: 0; }
.cmt_btn:hover { color: var(--able-primary) !important; border-bottom-color: var(--able-primary) !important; }
#bo_vc { margin: 20px 0 0 !important; }
#bo_vc > h2 { color: var(--able-ink) !important; font-size: 15px !important; font-weight: 800; margin: 0 0 6px !important; position: static !important; overflow: visible !important; height: auto !important; line-height: 1.5 !important; }
#bo_vc_empty { padding: 30px 0 !important; color: var(--able-muted) !important; text-align: center; }
#bo_vc article {
    position: relative; margin: 0 !important; padding: 14px 4px !important; border: 0 !important; border-top: 1px solid var(--able-line-soft) !important; background: transparent !important;
}
#bo_vc article:first-of-type { border-top: 0 !important; }
#bo_vc article header, #bo_vc article .cm_wrap header, #bo_vc .bo_vc_hdinfo { color: var(--able-muted) !important; font-size: 12px; background: transparent !important; border: 0 !important; padding: 0 !important; margin: 0 0 4px !important; }
#bo_vc article header .sv_member, #bo_vc article header strong, #bo_vc .member { color: var(--able-ink) !important; font-weight: 700; font-size: 13px; }
#bo_vc article p, #bo_vc article .cmt_contents { color: var(--able-text) !important; line-height: 1.7; margin: 4px 0 !important; padding: 0 !important; }
#bo_vc article .pf_img img, #bo_vc article .profile_img img { width: 30px; height: 30px; border-radius: 50%; }
#bo_vc .bo_vc_act, #bo_vc article footer { display: flex; justify-content: flex-end; gap: 4px; margin: 4px 0 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; }
#bo_vc .bo_vc_act li { list-style: none; float: none !important; }
#bo_vc .bo_vc_act a, #bo_vc article footer a {
    display: inline-flex !important; align-items: center; height: 26px; padding: 0 10px !important; font-size: 12px !important; border-radius: 8px !important;
    background: transparent !important; border: 1px solid transparent !important; color: var(--able-muted) !important;
}
#bo_vc .bo_vc_act a:hover, #bo_vc article footer a:hover { background: var(--able-primary-soft) !important; color: var(--able-primary) !important; }

/* 댓글 쓰기 */
#bo_vc_w, .bo_vc_w { margin: 16px 0 0 !important; padding: 18px 20px !important; background: #f7faff !important; border: 0 !important; border-radius: 16px !important; box-shadow: none !important; }
#bo_vc_w h2, .bo_vc_w h2 { color: var(--able-ink) !important; font-size: 14px !important; font-weight: 800; margin: 0 0 10px !important; position: static !important; overflow: visible !important; height: auto !important; line-height: 1.5 !important; }
#bo_vc_w textarea, .bo_vc_w textarea, #wr_content.bo_vc_textarea { width: 100% !important; min-height: 90px; padding: 12px 14px !important; background: #fff !important; box-sizing: border-box; resize: vertical; }
#bo_vc_w .tbl_frm01, .bo_vc_w .tbl_frm01 { background: transparent !important; box-shadow: none !important; border: 0 !important; }
#bo_vc_w .tbl_frm01 th, #bo_vc_w .tbl_frm01 td { background: transparent !important; border: 0 !important; padding: 4px 0 !important; }
#bo_vc_w .bo_vc_w_wr, #bo_vc_w .btn_confirm { display: flex !important; justify-content: flex-end; align-items: center; gap: 8px; margin: 10px 0 0 !important; padding: 0 !important; }
#bo_vc_w .btn_submit, .bo_vc_w .btn_submit, #bo_vc_w #btn_submit { height: 38px !important; padding: 0 20px !important; width: auto !important; font-size: 13px !important; }

/* =========================================================
 * 5. 글쓰기
 * ========================================================= */
#bo_w { padding: 28px 32px !important; }
#bo_w > h2.sound_only { position: absolute; }
#bo_w .write_div { margin: 0 0 14px !important; float: none; }
#bo_w .bo_w_select select, #bo_w #ca_name { min-width: 220px; height: 40px; }
#bo_w .bo_w_info { display: flex; gap: 10px; flex-wrap: wrap; }
#bo_w .bo_w_info .frm_input { flex: 1 1 200px; }
#bo_w .frm_input, #bo_w input[type="text"], #bo_w input[type="password"], #bo_w input[type="email"], #bo_w input[type="url"], #bo_w input[type="date"], #bo_w select {
    height: 42px !important; padding: 0 14px !important; font-size: 14px; box-sizing: border-box;
}
#bo_w .full_input, #bo_w #wr_subject { width: 100% !important; }
#bo_w #wr_subject { font-size: 16px !important; font-weight: 700; color: var(--able-ink); }
#bo_w .bo_w_tit { position: relative; }
#bo_w #autosave_wrapper { position: relative; }
#bo_w #btn_autosave, #bo_w .btn_frmline {
    height: 32px !important; padding: 0 12px !important; font-size: 12px !important; border-radius: 10px !important; box-shadow: none !important;
    background: var(--able-primary-soft) !important; color: var(--able-primary) !important;
}
#bo_w #autosave_pop { border: 0 !important; border-radius: 14px !important; box-shadow: var(--able-card-shadow) !important; background: #fff !important; }

/* 옵션(공지·HTML·비밀글 등) */
#bo_w .bo_v_option { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0 !important; padding: 0 !important; }
#bo_w .bo_v_option li { float: none !important; list-style: none; margin: 0 !important; }
#bo_w .bo_v_option label { color: var(--able-text); font-size: 13px; }
#bo_w input[type="checkbox"], #bo_w input[type="radio"] { accent-color: var(--able-primary); }

/* 편집기 */
#bo_w .wr_content, #bo_w .smarteditor2, #bo_w .cke_chrome { border-radius: 12px; overflow: hidden; border-color: var(--able-line) !important; }
#bo_w textarea#wr_content { width: 100% !important; min-height: 300px; padding: 14px !important; box-sizing: border-box; }
#bo_w #char_count_desc, #bo_w .frm_info, #bo_w .write_div .frm_info { color: var(--able-muted) !important; font-size: 12px; }

/* 링크 칸 — 앞에 아이콘 */
#bo_w .bo_w_link { position: relative; }
#bo_w .bo_w_link label { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--able-muted); z-index: 1; margin: 0 !important; }
#bo_w .bo_w_link .frm_input { padding-left: 38px !important; }

/* 첨부 — 점선 상자 */
#bo_w .bo_w_flie, #bo_w .file_wr { position: relative; }
#bo_w .file_wr {
    display: flex !important; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 14px !important; margin: 0 !important;
    border: 1px dashed #c9d8ee !important; border-radius: 12px !important; background: #f8fbff !important;
}
#bo_w .file_wr .lb_icon { color: var(--able-primary) !important; position: static !important; }
#bo_w .file_wr .frm_file { flex: 1 1 auto; font-size: 13px; color: var(--able-text); }
#bo_w .file_wr .frm_input, #bo_w .bo_w_flie .frm_input { height: 36px !important; }
#bo_w .file_del { color: var(--able-muted); font-size: 12px; }
#bo_w .file_wr input[type="file"]::file-selector-button {
    margin-right: 10px; height: 32px; padding: 0 14px; border: 0; border-radius: 10px; background: var(--able-primary); color: #fff; font-weight: 700; cursor: pointer;
}

/* 예전 맞춤 스킨의 글쓰기 표(.tbl_frm01) — 왼쪽 항목 이름, 오른쪽 입력칸 */
#bo_w .tbl_frm01 { background: transparent !important; box-shadow: none !important; border-radius: 0 !important; margin: 0 0 16px !important; }
#bo_w .tbl_frm01 table { width: 100% !important; border-collapse: separate !important; border-spacing: 0; border: 1px solid var(--able-line) !important; border-radius: 14px; overflow: hidden; background: #fff; }
#bo_w .tbl_frm01 caption { position: absolute; font-size: 0; overflow: hidden; }
#bo_w .tbl_frm01 th {
    width: 130px; padding: 12px 16px !important; text-align: left !important; vertical-align: middle;
    background: #f5f8fd !important; color: var(--able-text) !important; font-weight: 700 !important; font-size: 13px;
    border: 0 !important; border-bottom: 1px solid var(--able-line-soft) !important;
}
#bo_w .tbl_frm01 td { padding: 10px 16px !important; border: 0 !important; border-bottom: 1px solid var(--able-line-soft) !important; vertical-align: middle; }
#bo_w .tbl_frm01 tr:last-child th, #bo_w .tbl_frm01 tr:last-child td { border-bottom: 0 !important; }
#bo_w .tbl_frm01 td .frm_input, #bo_w .tbl_frm01 td input[type="text"], #bo_w .tbl_frm01 td select { max-width: 100%; }
#bo_w .tbl_frm01 td .frm_input.full_input, #bo_w .tbl_frm01 td #wr_subject { width: 100% !important; }
/* 예전 스킨 표 안쪽의 칸 이름 표(td 안 table) */
#bo_w .tbl_frm01 td table { border: 0 !important; border-radius: 0; background: transparent; }
#bo_w .tbl_frm01 td table th, #bo_w .tbl_frm01 td table td { background: transparent !important; border: 0 !important; padding: 6px 10px 6px 0 !important; width: auto; }
#bo_w .tbl_frm01 td table th { color: var(--able-muted) !important; }

/* 하단 저장·취소 — 가운데, 높이 44 */
#bo_w .btn_confirm, .btn_confirm.write_div {
    display: flex !important; justify-content: center; align-items: center; gap: 10px; margin: 24px 0 0 !important; padding: 0 !important; text-align: center;
}
#bo_w .btn_confirm .btn_submit, #bo_w .btn_confirm #btn_submit, #bo_w .btn_confirm .btn_cancel, #bo_w .btn_confirm a.btn_cancel {
    display: inline-flex !important; align-items: center; justify-content: center; height: 44px !important; min-width: 130px; padding: 0 24px !important;
    font-size: 15px !important; font-weight: 700; border-radius: 12px !important; box-sizing: border-box; text-decoration: none !important; float: none !important; width: auto !important;
}
#bo_w .btn_confirm .btn_cancel { order: 1; }
#bo_w .btn_confirm .btn_submit, #bo_w .btn_confirm #btn_submit { order: 2; }

/* 자동등록방지 */
#captcha, .captcha_wrap { margin: 10px 0 !important; }
#captcha input#captcha_key { height: 36px; border-radius: 10px !important; }

/* =========================================================
 * 6. 스케줄 글쓰기(시작·종료일) 등 예전 스킨의 날짜 선택 칸
 * ========================================================= */
#bo_w input.hasDatepicker, #bo_w input[name="wr_1"][size], #bo_w input[name="wr_2"][size] { width: 180px !important; }
.ui-datepicker { border: 0 !important; border-radius: 14px !important; box-shadow: var(--able-card-shadow) !important; padding: 8px !important; }
.ui-datepicker .ui-datepicker-header { background: var(--able-primary-soft) !important; border: 0 !important; border-radius: 10px !important; color: var(--able-ink) !important; }
.ui-datepicker td a.ui-state-active, .ui-datepicker td a.ui-state-highlight { background: var(--able-primary) !important; color: #fff !important; border-color: var(--able-primary) !important; border-radius: 8px; }
.ui-datepicker td a { border-radius: 8px; }

/* ---------- 2026-11-06: 링크·첨부 입력 통일 — 표 형식 스킨(프로젝트·유지관리·호스팅·즐겨찾기·벤치마킹)도 기본 스킨과 같은 모양 ---------- */
/* 링크: 앞에 클립(링크) 아이콘이 들어간 둥근 입력칸, 한 줄 전체 */
#bo_w input[name^="wr_link"] {
    width: 100% !important; max-width: none !important; height: 40px !important; box-sizing: border-box;
    padding: 0 14px 0 38px !important; border: 1px solid var(--able-line) !important; border-radius: 12px !important;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.07 0l3-3a5 5 0 0 0-7.07-7.07l-1.5 1.5'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.07 0l-3 3a5 5 0 0 0 7.07 7.07l1.5-1.5'/%3E%3C/svg%3E") no-repeat 14px center !important;
}
#bo_w .bo_w_link input[name^="wr_link"] { background-image: none !important; }   /* 기본 스킨은 이미 아이콘 라벨이 있다 */
#bo_w input[name^="wr_link"]:focus { border-color: var(--able-primary) !important; box-shadow: 0 0 0 3px rgba(31, 124, 245, .15); outline: 0; }

/* 첨부: 점선 상자 + 파란 「파일 선택」 단추 — 어떤 스킨이든 같은 모양 */
#bo_w input[type="file"]:not(.file_wr input) {
    width: 100% !important; max-width: none !important; height: auto !important; box-sizing: border-box;
    padding: 8px 12px !important; border: 1px dashed #c9d8ee !important; border-radius: 12px !important; background: #f8fbff !important;
    font-size: 13px; color: var(--able-text); cursor: pointer;
}
#bo_w input[type="file"]::file-selector-button {
    margin-right: 10px; height: 32px; padding: 0 14px; border: 0; border-radius: 10px; background: var(--able-primary); color: #fff; font-weight: 700; cursor: pointer; transition: background .15s;
}
#bo_w input[type="file"]::file-selector-button:hover { background: #1668d6; }
#bo_w input[type="file"]:hover:not(.file_wr input), #bo_w .file_wr:hover { border-color: var(--able-primary) !important; }
/* 파일 설명 입력·기존 파일 삭제 표시 */
#bo_w input[name^="bf_content"] { width: 100% !important; box-sizing: border-box; margin-top: 6px; }
#bo_w .file_del, #bo_w td .file_del { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; color: var(--able-muted); font-size: 12px; }

/* ---------- 2026-11-06: 글 보기의 관련링크·첨부파일 통일 — 스킨마다 다르던 gif·큰 아이콘을 같은 줄 모양으로 ---------- */
#bo_v_link li, #bo_v_file li {
    display: flex !important; align-items: center; gap: 4px 12px; flex-wrap: wrap;
    margin: 6px 0 0 !important; padding: 10px 14px !important; border: 1px solid #e3ecf8 !important; border-radius: 12px;
    background: #fff !important; transition: border-color .15s, box-shadow .15s;
}
#bo_v_link li:first-child, #bo_v_file li:first-child { border-top: 1px solid #e3ecf8 !important; margin-top: 0 !important; }
#bo_v_link li:hover, #bo_v_file li:hover { border-color: var(--able-primary) !important; box-shadow: 0 4px 12px rgba(31, 92, 184, .08); }
#bo_v_link li::before, #bo_v_file li::before {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 10px;
    background: var(--able-primary-soft); color: var(--able-primary); font-family: FontAwesome; font-size: 15px;
}
#bo_v_link li::before { content: "\f0c1"; }   /* 링크 */
#bo_v_file li::before { content: "\f0c6"; }   /* 클립 */
#bo_v_link li > img, #bo_v_file li > img, #bo_v_link li a img, #bo_v_file li a img,
#bo_v_link li > i.fa, #bo_v_file li > i.fa, #bo_v_link li a i.fa, #bo_v_file li a i.fa, #bo_v_link li br, #bo_v_file li br { display: none !important; }
#bo_v_link li a, #bo_v_file li a { flex: 1 1 200px; min-width: 0; display: block !important; padding: 0 !important; color: var(--able-ink) !important; font-size: 13px; }
#bo_v_link li a strong, #bo_v_file li a strong { font-weight: 700; color: var(--able-primary); word-break: break-all; }
#bo_v_link li a:hover strong, #bo_v_file li a:hover strong { text-decoration: underline; }
#bo_v_link li > span, #bo_v_file li > span { flex: 0 0 auto; color: var(--able-muted) !important; font-size: 12px; margin: 0 !important; padding: 0 !important; }
#bo_v_link .bo_v_link_cnt, #bo_v_file .bo_v_file_cnt { padding: 2px 8px !important; border-radius: 999px; background: #f1f5fb; }
#bo_v_file .bo_v_file_cnt span { background: transparent; padding: 0 !important; }

/* ---------- 2026-11-06: 페이지 번호(.pg_wrap) 통일 — 모든 게시판에서 목록 상자 안, 표와 아래 단추 줄 사이 · 가운데 ---------- */
#bo_list .pg_wrap, #bo_gall .pg_wrap, .pg_wrap {
    display: block !important; float: none !important; clear: both; width: auto !important;
    margin: 20px 0 !important; padding: 0 !important; text-align: center; border: 0 !important; background: transparent !important;
}
.pg_wrap .pg { display: inline-flex !important; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px !important; float: none !important; margin: 0 !important; }
/* 카드가 여러 장인 화면(새글·전체검색)은 페이지 번호도 흰 카드 한 장 안에 — 게시판 목록 상자와 같은 모양 */
#new_list .pg_wrap, #able_search > .pg_wrap {
    margin: 16px 0 0 !important; padding: 16px !important; border-radius: var(--able-radius, 18px);
    background: #fff !important; box-shadow: var(--able-card-shadow, 0 6px 24px rgba(31, 92, 184, .07));
}

/* ---------- 2026-11-06: 목록 체크박스 모양 통일 — 기본·갤러리 스킨의 그림 체크박스(label span) 대신 다른 게시판과 같은 기본 체크박스 ---------- */
.chk_box input.selec_chk { position: static !important; width: 15px !important; height: 15px !important; opacity: 1 !important; z-index: auto !important; overflow: visible !important; margin: 0 !important; accent-color: var(--able-primary); cursor: pointer; vertical-align: middle; }
.chk_box input.selec_chk + label span { display: none !important; }
.chk_box input.selec_chk + label { padding: 0 !important; margin: 0 0 0 4px; cursor: pointer; }
.tbl_head01 .td_chk, .tbl_head01 th.all_chk { width: 40px; text-align: center !important; }
#gall_allchk { display: inline-flex; align-items: center; gap: 6px; }