@charset "utf-8";
/* =====================================================================
   board-theme.css — 그린백링크 게시판 통합 테마
   대상: board/basic, qa/basic, board/faq, board/gallery, board/portfolio
   목적: 제각각이던 게시판(목록/읽기/쓰기/댓글/검색/페이징)을
         그린백링크 브랜드 톤으로 통일.
   원칙: 마크업/기능(폼 name·id, 그누보드 함수)은 손대지 않고
         표준 그누보드 클래스를 색·카드·버튼 레벨에서만 재정의.
   각 스킨 style.css(출력순서 0) 이후(출력순서 10)에 로드되어 덮어씀.
   ===================================================================== */

:root {
    --gbl-green:        #0f6e3f;   /* Primary 그린 */
    --gbl-green-strong: #0c5a33;   /* 호버 진한 그린 */
    --gbl-green-soft:   #eaf4ee;   /* 연그린 배경(칩/호버) */
    --gbl-green-line:   #cfe6d9;   /* 그린 보더 */
    --gbl-bg:           #f7faf8;   /* 페이지 배경 톤 */
    --gbl-card:         #ffffff;
    --gbl-ink:          #14201b;   /* 기본 텍스트 */
    --gbl-sub:          #5b6b62;   /* 보조 텍스트 */
    --gbl-mute:         #98a59d;   /* 흐린 텍스트 */
    --gbl-line:         #e3e8e5;   /* 카드/구분선 보더 */
    --gbl-radius:       12px;
    --gbl-radius-sm:    8px;
    --gbl-radius-xs:    6px;
    --gbl-shadow:       0 4px 14px rgba(15, 110, 63, .05);
    --gbl-shadow-pop:   0 8px 24px rgba(15, 110, 63, .12);
    --gbl-focus:        0 0 0 3px rgba(15, 110, 63, .12);
    --gbl-danger:       #e1463c;
}

/* =========================================================
   1. 공통 버튼 — 모든 게시판 공유 (.btn_b01 / .btn / 제출 / 검색)
   ========================================================= */
#bo_list .btn,
#bo_v .btn,
#bo_w .btn,
.btn_bo_user .btn,
.bo_v_com .btn,
.bo_fx .btn,
.btn_b01.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 40px;
    min-width: 40px;
    padding: 0 14px;
    border: 1px solid var(--gbl-green-line);
    border-radius: var(--gbl-radius-sm);
    background: var(--gbl-card);
    color: var(--gbl-green);
    font-size: .95em;
    line-height: 38px;
    text-decoration: none;
    transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
}
.btn_b01.btn:hover,
.btn_bo_user .btn:hover,
.bo_v_com .btn:hover,
.bo_fx .btn:hover {
    background: var(--gbl-green-soft);
    border-color: var(--gbl-green);
    color: var(--gbl-green-strong);
}
.btn_admin.btn {
    border-color: var(--gbl-line);
    color: var(--gbl-sub);
}
.btn_admin.btn:hover { background: #f1f4f2; color: var(--gbl-ink); }

/* 1-1. 게시글 상단 액션 툴바(목록/답변/글쓰기/더보기) — 아이콘이 흐려 보이지 않도록
   기본 상태부터 연그린 배경을 채워 그린 브랜드 톤이 바로 눈에 띄게 한다.
   글쓰기는 채워진 primary 버튼으로 구분해 핵심 액션임을 드러낸다. */
#bo_v_top .btn_bo_user.bo_v_com > li > .btn {
    background: var(--gbl-green-soft);
    border-color: var(--gbl-green-line);
    box-shadow: var(--gbl-shadow);
}
#bo_v_top .btn_bo_user.bo_v_com > li > .btn:hover {
    background: var(--gbl-green);
    border-color: var(--gbl-green);
    color: #fff;
    box-shadow: var(--gbl-shadow-pop);
}
#bo_v_top .btn_bo_user.bo_v_com > li > .btn.btn_b01_primary {
    width: auto;
    padding: 0 18px;
    background: var(--gbl-green);
    border-color: var(--gbl-green);
    color: #fff;
    font-weight: 700;
}
#bo_v_top .btn_bo_user.bo_v_com > li > .btn.btn_b01_primary:hover {
    background: var(--gbl-green-strong);
    border-color: var(--gbl-green-strong);
    box-shadow: var(--gbl-shadow-pop);
}
#bo_v_top .more_opt.is_view_btn {
    border: 1px solid var(--gbl-line);
    border-radius: var(--gbl-radius-sm);
    box-shadow: var(--gbl-shadow-pop);
}
#bo_v_top .more_opt.is_view_btn a {
    color: var(--gbl-ink);
}
#bo_v_top .more_opt.is_view_btn a:hover {
    background: var(--gbl-green-soft);
    color: var(--gbl-green-strong);
}

/* 검색 토글 / 옵션 버튼 */
.btn_bo_sch.btn, .btn_more_opt.btn {
    border-color: var(--gbl-green-line);
    color: var(--gbl-green);
}

/* 주요 제출 버튼 — 그린 솔리드 */
.btn_submit,
button.btn_submit,
.bo_vc_w .btn_submit,
#bo_w .btn_submit {
    height: 46px;
    padding: 0 26px;
    border: 1px solid var(--gbl-green);
    border-radius: var(--gbl-radius-sm);
    background: var(--gbl-green);
    color: #fff;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s, box-shadow .15s;
}
.btn_submit:hover,
#bo_w .btn_submit:hover,
.bo_vc_w .btn_submit:hover {
    background: var(--gbl-green-strong);
    box-shadow: var(--gbl-shadow);
}

/* 취소 — 그린 아웃라인 */
.btn_cancel,
#bo_w .btn_cancel {
    display: inline-flex;
    align-items: center;
    height: 46px;
    padding: 0 22px;
    border: 1px solid var(--gbl-line);
    border-radius: var(--gbl-radius-sm);
    background: #fff;
    color: var(--gbl-sub);
    font-weight: 600;
    text-decoration: none;
}
.btn_cancel:hover { border-color: var(--gbl-green-line); color: var(--gbl-green); }

.btn_confirm { margin-top: 22px; display: flex; gap: 10px; }

/* 옵션 드롭다운(more_opt) */
.more_opt, .more_add, .bo_vc_act {
    border-radius: var(--gbl-radius-sm);
    border-color: var(--gbl-line);
    box-shadow: var(--gbl-shadow-pop);
    overflow: hidden;
}
.more_opt li:hover a, .more_opt li:hover button,
.bo_vc_act li a:hover { color: var(--gbl-green); }
.more_opt li:hover { background: var(--gbl-green-soft); }

/* 1-2. 게시글 목록 상단 툴바(#bo_btn_top) — 전체선택 + 관리자/글쓰기/옵션
   전체선택을 왼쪽, 액션 버튼을 오른쪽으로 정렬하는 한 줄 레이아웃으로 재구성.
   버튼은 #bo_v_top과 동일하게 기본 상태부터 연그린 배경을 채우고, 글쓰기만 솔리드 그린으로 강조. */
#bo_btn_top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin: 6px 0 18px;
}
#gall_allchk { text-align: left; }
#bo_btn_top .btn_bo_user {
    display: flex;
    align-items: center;
    gap: 8px;
}
#bo_btn_top .btn_bo_user > li > .btn {
    background: var(--gbl-green-soft);
    border-color: var(--gbl-green-line);
    box-shadow: var(--gbl-shadow);
}
#bo_btn_top .btn_bo_user > li > .btn:hover {
    background: var(--gbl-green);
    border-color: var(--gbl-green);
    color: #fff;
    box-shadow: var(--gbl-shadow-pop);
}
/* 글쓰기 — 핵심 액션이므로 솔리드 채움으로 구분 (href로 식별, 마크업은 손대지 않음) */
#bo_btn_top .btn_bo_user > li > a.btn[href*="/write.php"] {
    background: var(--gbl-green);
    border-color: var(--gbl-green);
    color: #fff;
}
#bo_btn_top .btn_bo_user > li > a.btn[href*="/write.php"]:hover {
    background: var(--gbl-green-strong);
    border-color: var(--gbl-green-strong);
}
#bo_btn_top .more_opt:before { border-bottom-color: var(--gbl-line); }
#bo_btn_top .more_opt:after { border-bottom-color: var(--gbl-card); }

/* =========================================================
   2. 목록(#bo_list)
   ========================================================= */
#bo_list { margin-bottom: 24px; color: var(--gbl-ink); }

/* 상단 정보바 */
#bo_list_total { color: var(--gbl-sub); }
#bo_list_total span { color: var(--gbl-green); font-weight: 700; }

/* 카테고리 칩 */
#bo_cate { margin: 18px 0; }
#bo_cate a {
    border: 1px solid var(--gbl-green-line);
    color: var(--gbl-green);
    border-radius: 30px;
    background: #fff;
}
#bo_cate a:hover, #bo_cate a:focus, #bo_cate a:active {
    background: var(--gbl-green-soft);
    border-color: var(--gbl-green);
    color: var(--gbl-green-strong);
}
#bo_cate #bo_cate_on {
    background: var(--gbl-green) !important;
    border-color: var(--gbl-green) !important;
    color: #fff !important;
    box-shadow: none !important;
}

/* 목록 테이블 카드화 */
.tbl_head01.tbl_wrap {
    border: 1px solid var(--gbl-line);
    border-radius: var(--gbl-radius);
    overflow: hidden;
    box-shadow: var(--gbl-shadow);
    background: var(--gbl-card);
}
.tbl_head01 table { width: 100%; border-collapse: collapse; }
.tbl_head01 thead th {
    padding: 14px 8px;
    background: var(--gbl-green-soft);
    border-bottom: 2px solid var(--gbl-green-line);
    color: var(--gbl-green-strong);
    font-weight: 700;
    font-size: .95em;
}
.tbl_head01 thead th a { color: var(--gbl-green-strong); text-decoration: none; }
.tbl_head01 tbody td {
    padding: 13px 8px;
    border-bottom: 1px solid var(--gbl-line);
    color: var(--gbl-ink);
    vertical-align: middle;
}
#bo_list tbody tr { border-left: 3px solid transparent; transition: background .12s; }
#bo_list tbody tr:hover { border-left: 3px solid var(--gbl-green); }
#bo_list tbody tr:hover td { background: var(--gbl-green-soft); }
#bo_list tbody .even td { background: #fafcfb; }
#bo_list tbody .even:hover td { background: var(--gbl-green-soft); }
.empty_table, .empty_list {
    padding: 60px 0 !important;
    text-align: center;
    color: var(--gbl-mute);
}

/* 제목/아이콘 */
.bo_tit { color: var(--gbl-ink); font-weight: 600; }
#bo_list .td_subject a:hover .bo_tit,
.bo_tit:hover { color: var(--gbl-green); }
.bo_current { color: var(--gbl-green); font-weight: 700; }
.td_num strong, .td_num2 strong { color: var(--gbl-ink); }

/* 분류 칩 / 댓글 카운트 칩 → 연그린 */
.bo_cate_link {
    background: var(--gbl-green-soft) !important;
    color: var(--gbl-green) !important;
    border-radius: 5px;
    font-weight: 600 !important;
}
#bo_list .cnt_cmt, .cnt_cmt {
    background: var(--gbl-green-soft);
    color: var(--gbl-green);
}
#bo_list .bo_tit .new_icon { color: #fff; background: var(--gbl-green); }
#bo_list .bo_tit .hot_icon { color: #fff; background: var(--gbl-danger); }
#bo_list .bo_tit .fa-lock { color: var(--gbl-green); background: var(--gbl-green-soft); border-color: var(--gbl-green-line); }
#bo_list .bo_tit .fa-link, #bo_list .bo_tit .fa-download {
    color: var(--gbl-green); background: var(--gbl-green-soft);
}

/* 공지행 */
.bo_notice td { background: var(--gbl-green-soft) !important; border-bottom: 1px solid var(--gbl-green-line); }
.bo_notice .notice_icon { color: var(--gbl-green); }

/* 체크박스 체크 컬러 */
.chk_box input[type="checkbox"]:checked + label span {
    background: var(--gbl-green) !important;
    border-color: var(--gbl-green) !important;
}
.chk_box input[type="checkbox"] + label:hover { color: var(--gbl-green); }

/* =========================================================
   3. 검색창(.bo_sch)
   ========================================================= */
.bo_sch {
    border: 1px solid var(--gbl-line);
    border-radius: var(--gbl-radius);
    box-shadow: var(--gbl-shadow);
}
.bo_sch h3 {
    border-bottom: none;
    color: var(--gbl-green-strong);
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}
.bo_sch h3::before {
    content: "\f002"; /* fa-search */
    font-family: "FontAwesome";
    font-size: 14px;
    color: var(--gbl-green);
}
.bo_sch select {
    border: 1px solid var(--gbl-line) !important;
    border-radius: var(--gbl-radius-xs);
    box-shadow: none !important;
}
.bo_sch .sch_bar {
    display: flex !important;
    align-items: center;
    background: var(--gbl-green-soft);
    border: none !important;
    border-radius: var(--gbl-radius-sm);
    box-shadow: none !important;
    transition: background-color .15s ease, box-shadow .15s ease;
}
.bo_sch select:focus {
    border-color: var(--gbl-green) !important;
    box-shadow: var(--gbl-focus) !important;
}
.bo_sch .sch_bar:focus-within {
    background: var(--gbl-card);
    box-shadow: inset 0 0 0 1.5px var(--gbl-green) !important;
}
.bo_sch .sch_bar .sch_input {
    flex: 1 1 auto;
    width: auto !important;
    float: none !important;
    background: transparent !important;
    color: var(--gbl-ink);
    font-size: 14px;
}
.bo_sch .sch_bar .sch_input::placeholder { color: var(--gbl-mute); }
.bo_sch .sch_btn {
    flex-shrink: 0;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin: 3px 3px 3px 0 !important;
    border-radius: 50%;
    background: var(--gbl-green);
    color: #fff !important;
    transition: background-color .15s ease;
}
.bo_sch .sch_btn:hover { background: var(--gbl-green-strong); }
.bo_sch .bo_sch_cls:hover { color: var(--gbl-green); }
/* side_box_con(사이드바) 안에서는 위 .bo_sch box-shadow(shadow) 유지 — 아래 "faq/gallery 사이드 검색박스" 규칙에서 재정의 */
/* faq/gallery 사이드 검색박스 */
.side_box_con .bo_sch { box-shadow: none; border: none; }
.sch_word { color: var(--gbl-green) !important; }

/* =========================================================
   4. 페이지네이션
   ========================================================= */
.pg_current {
    background: var(--gbl-green) !important;
    border-color: var(--gbl-green) !important;
    color: #fff !important;
}
.pg_page { color: var(--gbl-sub); border-radius: var(--gbl-radius-xs); }
.pg_page:hover { background: var(--gbl-green-soft); color: var(--gbl-green); }

/* =========================================================
   5. 읽기(#bo_v)
   ========================================================= */
#bo_v {
    margin-bottom: 24px;
    padding: 6px 0 0;
    background: var(--gbl-card);
    color: var(--gbl-ink);
}
#bo_v_title {
    padding-bottom: 16px;
    margin-bottom: 4px;
    border-bottom: 2px solid var(--gbl-green);
}
#bo_v_title .bo_v_cate,
#bo_v .bo_v_cate {
    display: inline-block;
    background: var(--gbl-green-soft);
    color: var(--gbl-green);
    padding: 2px 12px;
    border-radius: 30px;
    font-size: .65em;
    vertical-align: middle;
}
#bo_v_title .bo_v_tit { color: var(--gbl-ink); }

#bo_v_info { border-bottom: 1px solid var(--gbl-line); color: var(--gbl-sub); }
#bo_v_info .profile_info .pf_img img { border: 1px solid var(--gbl-line); }
#bo_v_info strong i, #bo_v_info .if_date i { color: var(--gbl-green); }
#bo_v_info .bo_date i { color: var(--gbl-green); }

/* 공유 버튼 */
#bo_v_share .btn {
    border-color: var(--gbl-green-line);
    color: var(--gbl-green);
    border-radius: var(--gbl-radius-sm);
}
#bo_v_share .btn:hover { background: var(--gbl-green-soft); }
#bo_v_share .btn i { color: var(--gbl-green); }

/* 본문 링크 */
#bo_v_con { color: var(--gbl-ink); }
#bo_v_con a { color: var(--gbl-green); }

/* 첨부파일 / 관련링크 카드 */
#bo_v_file li, #bo_v_link li {
    border: 1px solid var(--gbl-line);
    border-radius: var(--gbl-radius-sm);
    box-shadow: none;
}
#bo_v_file li:hover, #bo_v_link li:hover {
    border-color: var(--gbl-green-line);
    background: var(--gbl-green-soft);
}
#bo_v_file li:hover i, #bo_v_link li:hover i,
#bo_v_file li:hover a, #bo_v_link li:hover a { color: var(--gbl-green); }
#bo_v_file h2, #bo_v_link h2 { color: var(--gbl-green-strong); }

/* 추천/비추천 */
#bo_v_act .bo_v_good, #bo_v_act .bo_v_nogood { border-color: var(--gbl-line); }
#bo_v_act a:hover { color: var(--gbl-green) !important; border-color: var(--gbl-green) !important; }

/* 이전/다음글 */
.bo_v_nb li:hover { background: var(--gbl-green-soft); }
.bo_v_nb li .nb_tit { color: var(--gbl-green); }
.bo_v_nb li i { color: var(--gbl-green); }

/* =========================================================
   6. 댓글(#bo_vc)
   ========================================================= */
.cmt_btn { border-bottom: 1px solid var(--gbl-line); }
.cmt_btn span.total { color: var(--gbl-green); }
.cmt_btn span.total:after { background: var(--gbl-green); }
.cmt_btn b { color: var(--gbl-ink); }
#bo_vc article { border-bottom: 1px solid var(--gbl-line); }
#bo_vc article .pf_img img { border: 1px solid var(--gbl-line); }
#bo_vc .bo_vc_hdinfo, #bo_vc .bo_vc_hdinfo i { color: var(--gbl-mute); }
#bo_vc p a, #bo_vc p a.s_cmt { color: var(--gbl-green); }
#bo_vc_empty { color: var(--gbl-mute); }
.bo_vc_w textarea {
    border: 1px solid var(--gbl-line);
    border-radius: var(--gbl-radius-xs);
    box-shadow: none;
}
.bo_vc_w textarea:focus { border-color: var(--gbl-green); box-shadow: var(--gbl-focus); outline: none; }

/* =========================================================
   7. 쓰기(#bo_w) 폼
   ========================================================= */
#bo_w { color: var(--gbl-ink); }
#bo_w .frm_input,
#bo_w input[type="text"],
#bo_w input[type="password"],
#bo_w select,
#bo_w textarea,
#bo_w .file_wr {
    border: 1px solid var(--gbl-line);
    border-radius: var(--gbl-radius-xs);
}
#bo_w .frm_input:focus,
#bo_w input[type="text"]:focus,
#bo_w input[type="password"]:focus,
#bo_w select:focus,
#bo_w textarea:focus {
    border-color: var(--gbl-green);
    box-shadow: var(--gbl-focus);
    outline: none;
}
#bo_w .bo_w_link label, #bo_w .bo_w_flie .lb_icon { color: var(--gbl-green); }
#bo_w #char_count, #char_count { color: var(--gbl-green); }
#bo_w .bo_v_option .chk_box input[type="checkbox"]:checked + label span,
#bo_w .chk_box input[type="checkbox"]:checked + label span { background: var(--gbl-green); border-color: var(--gbl-green); }
#btn_autosave { border: 1px solid var(--gbl-green-line); color: var(--gbl-green); border-radius: var(--gbl-radius-xs); background: #fff; }

/* qa 폼(.form_01) 카드화 */
.form_01 {
    border: 1px solid var(--gbl-line);
    border-radius: var(--gbl-radius);
    background: var(--gbl-card);
    box-shadow: var(--gbl-shadow);
    padding: 6px 18px;
}
.form_01 ul { list-style: none; margin: 0; padding: 0; }
.form_01 > ul > li { padding: 12px 0; border-bottom: 1px solid var(--gbl-line); }
.form_01 > ul > li:last-child { border-bottom: 0; }
.form_01 .frm_input, .form_01 select, .form_01 textarea {
    border: 1px solid var(--gbl-line);
    border-radius: var(--gbl-radius-xs);
}
.form_01 .frm_input:focus, .form_01 select:focus, .form_01 textarea:focus {
    border-color: var(--gbl-green); box-shadow: var(--gbl-focus); outline: none;
}

/* =========================================================
   8. QA 전용 — 상태/답변
   ========================================================= */
.td_stat .txt_done {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 30px;
    background: var(--gbl-green-soft);
    color: var(--gbl-green);
    font-weight: 700;
    font-size: .9em;
}
.td_stat .txt_rdy {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 30px;
    background: #fff4e5;
    color: #c9791a;
    font-weight: 700;
    font-size: .9em;
}
/* 답변 영역 */
#bo_v_ans {
    margin-top: 24px;
    padding: 20px;
    border: 1px solid var(--gbl-green-line);
    border-left: 4px solid var(--gbl-green);
    border-radius: var(--gbl-radius);
    background: var(--gbl-green-soft);
}
#bo_v_ans h2 { color: var(--gbl-green-strong); }
#bo_v_ans .bo_v_reply {
    display: inline-block;
    padding: 2px 12px;
    margin-right: 6px;
    border-radius: 30px;
    background: var(--gbl-green);
    color: #fff;
    font-size: .8em;
    vertical-align: middle;
}
#ans_datetime { color: var(--gbl-sub); }
#ans_datetime i { color: var(--gbl-green); }
#ans_con { margin-top: 14px; line-height: 1.8; color: var(--gbl-ink); }
#bo_v_ans_form {
    margin-top: 24px;
    padding: 20px;
    border: 1px dashed var(--gbl-green-line);
    border-radius: var(--gbl-radius);
    background: #fcfdfc;
}
#bo_v_ans_form h2 { color: var(--gbl-green-strong); margin-bottom: 12px; }
#ans_msg { padding: 28px; text-align: center; color: var(--gbl-sub); }
.bo_v_btn { margin-top: 16px; text-align: right; }
.bo_v_btn .add_qa {
    display: inline-block;
    padding: 9px 18px;
    border: 1px solid var(--gbl-green);
    border-radius: var(--gbl-radius-sm);
    background: var(--gbl-green);
    color: #fff;
    text-decoration: none;
    font-weight: 600;
}
.bo_v_btn .add_qa:hover { background: var(--gbl-green-strong); }
#bo_v_addq .btn_b01 {
    display: inline-block; padding: 8px 16px; border-radius: var(--gbl-radius-sm);
    background: var(--gbl-green); color: #fff; text-decoration: none;
}
#bo_v_rel h2 { color: var(--gbl-green-strong); margin: 22px 0 10px; }

/* =========================================================
   9. 프레임워크 스킨(faq / gallery / portfolio) 그린 통일
   - 마크업은 lqd-* / bootstrap grid 기반. 색/카드/보더만 조정.
   ========================================================= */

/* 섹션 제목 강조 텍스트 */
.lqd-section .ld-fh-element strong { color: var(--gbl-green); }

/* primary 유틸 → 그린 */
.bg-primary { background-color: var(--gbl-green) !important; }
.text-primary { color: var(--gbl-green) !important; }
.btn.bg-primary, a.bg-primary.btn { color: #fff !important; }
.btn.bg-primary:hover, a.bg-primary.btn:hover { background-color: var(--gbl-green-strong) !important; }

/* 오프브랜드 인라인 그라데이션 → 그린 솔리드 */
.user-info-gradient { background-image: none !important; background: var(--gbl-green) !important; }
.module-gradient { background-image: none !important; background: var(--gbl-green) !important; }

/* --- FAQ 아코디언 --- */
.accordion-item.panel {
    border: 1px solid var(--gbl-line);
    border-radius: var(--gbl-radius);
    margin-bottom: 12px;
    background: var(--gbl-card);
    box-shadow: var(--gbl-shadow);
    overflow: hidden;
    transition: border-color .15s, box-shadow .15s;
}
.accordion-item.panel:hover { border-color: var(--gbl-green-line); }
.accordion-title a { color: var(--gbl-ink); padding: 18px 20px; display: flex; align-items: center; justify-content: space-between; }
.accordion-title a:not(.collapsed),
.accordion-title a[aria-expanded="true"] { color: var(--gbl-green); }
.accordion-title a:hover { color: var(--gbl-green); }
.accordion-expander { color: var(--gbl-green); }
.accordion-collapse .accordion-content { padding: 4px 20px 22px; color: var(--gbl-sub); line-height: 1.8; }
.accordion-item .admin-controls { padding: 8px 20px 0; font-size: .85em; }
.accordion-item .admin-controls a { color: var(--gbl-green); }

/* --- 갤러리/포트폴리오 카드(lqd-lp) --- */
.lqd-lp {
    border: 1px solid var(--gbl-line);
    border-radius: var(--gbl-radius);
    background: var(--gbl-card) !important;
    box-shadow: var(--gbl-shadow);
    padding-bottom: 18px;
    overflow: hidden;
    transition: transform .18s, box-shadow .18s, border-color .18s;
}
.lqd-lp:hover {
    transform: translateY(-4px);
    border-color: var(--gbl-green-line);
    box-shadow: var(--gbl-shadow-pop);
}
.lqd-lp-img { border-radius: 0; }
.lqd-lp-img img { transition: transform .3s; width: 100%; }
.lqd-lp:hover .lqd-lp-img img { transform: scale(1.04); }
.lqd-lp-date { color: var(--gbl-mute); }
.lqd-lp-title a { color: var(--gbl-ink); }
.lqd-lp-title a:hover { color: var(--gbl-green); }
.lqd-lp-cat a, .lqd-lp-cat .module-color {
    background: var(--gbl-green-soft) !important;
    color: var(--gbl-green) !important;
}
.lqd-lp-excerpt p { color: var(--gbl-sub); }
.is_notice {
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--gbl-green); color: #fff; font-weight: 700;
}
.no_image { color: var(--gbl-mute); background: var(--gbl-bg); }

/* 포트폴리오 탭 */
.lqd-tabs-nav li { background: #eef3f0 !important; border-radius: var(--gbl-radius-sm) var(--gbl-radius-sm) 0 0; }
.lqd-tabs-nav li.active { background: var(--gbl-green) !important; }
.lqd-tabs-nav li.active a, .lqd-tabs-nav a.active { color: #fff !important; }
.lqd-tabs-nav a { color: var(--gbl-sub); }

/* 사이드 박스 */
.side_box_con {
    border: 1px solid var(--gbl-line);
    border-radius: var(--gbl-radius);
    box-shadow: var(--gbl-shadow);
}

/* 포트폴리오 모달 */
.modal-container { border-radius: var(--gbl-radius); }
.modal-title { color: var(--gbl-green-strong); }
.admin-edit-link { background: var(--gbl-green) !important; }

/* =========================================================
   10. 반응형 — 기기별 콘텐츠 폭 제한 + 레이아웃
   콘텐츠 루트(#bo_list / #bo_v / #bo_w)만 중앙으로 모아 넓은 화면 휑함 제거.
   테마 헤더/푸터/풀폭 hero(.lqd-section/.container)는 손대지 않는다.
   브레이크포인트: 2560(QHD) / 1920(FHD) / 1440(노트북) / 1280·1024(태블릿가로)
                  / 768(태블릿세로) / 480(모바일) / 360(폴드)
   ========================================================= */

/* --- 콘텐츠 최대폭(기본): FHD/노트북에서 적정폭 중앙 정렬 --- */
#bo_list,
#bo_v,
#bo_w {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
}
/* #bo_w 내부 form(인라인 width:100%)도 카드폭 안에서 중앙 정렬 */
#bo_w > form,
#bo_w .form_01 { margin-left: auto; margin-right: auto; }

/* --- QHD(2560+) : 과도한 여백 방지로 약간만 넓히고 셀 여백 확대 --- */
@media (min-width: 2560px) {
    #bo_list,
    #bo_v,
    #bo_w { max-width: 1440px; }
    .tbl_head01 thead th { padding: 16px 12px; }
    .tbl_head01 tbody td { padding: 15px 12px; }
    #bo_v_con { font-size: 1.05em; }
}

/* --- 태블릿 가로 이하(~1279) : 좌우 여백을 화면에 맞춰 유동 --- */
@media (max-width: 1279px) {
    #bo_list,
    #bo_v,
    #bo_w { max-width: 100%; }
}

/* --- 태블릿 세로(~1023) : 셀/폼 패딩 축소 --- */
@media (max-width: 1023px) {
    .form_01 { padding: 4px 14px; }
    .tbl_head01 thead th, .tbl_head01 tbody td { padding: 12px 7px; }
    /* #bo_list 외의 일반 테이블은 가로스크롤로 보존 */
    .tbl_head01.tbl_wrap { -webkit-overflow-scrolling: touch; }
}

/* =========================================================
   모바일/태블릿세로(≤767) — 게시판 목록 행을 "카드"로 스택
   (가로스크롤 제거 / 번호·제목·글쓴이·등록일·상태를 세로 카드로)
   card-ization은 목록 컨테이너(#bo_list)에만 적용 → 쓰기/읽기 표는 제외
   ========================================================= */
@media (max-width: 767px) {
    /* 목록 래퍼: 카드 컨테이너 껍데기 해제(각 행이 카드가 됨) */
    #bo_list .tbl_head01.tbl_wrap {
        overflow: visible;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }
    #bo_list .tbl_head01 table { width: 100%; min-width: 0; }
    #bo_list .tbl_head01 caption { display: none; }
    /* 헤더(thead)는 시각적으로 숨기되 스크린리더에는 유지 */
    #bo_list .tbl_head01 thead {
        position: absolute;
        width: 1px; height: 1px;
        margin: -1px; padding: 0;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
        border: 0;
    }
    #bo_list .tbl_head01 tbody,
    #bo_list .tbl_head01 tr,
    #bo_list .tbl_head01 td { display: block; width: auto; }

    /* 각 행 = 카드 */
    #bo_list .tbl_head01 tbody tr {
        position: relative;
        margin-bottom: 12px;
        padding: 14px 16px 13px;
        border: 1px solid var(--gbl-line);
        border-left: 3px solid var(--gbl-green-line);
        border-radius: var(--gbl-radius);
        background: var(--gbl-card);
        box-shadow: var(--gbl-shadow);
    }
    #bo_list .tbl_head01 tbody tr:hover { border-left-color: var(--gbl-green); }
    #bo_list .tbl_head01 tbody tr:hover td,
    #bo_list .tbl_head01 tbody .even td,
    #bo_list .tbl_head01 tbody .even:hover td { background: transparent; }
    #bo_list .tbl_head01 tbody td { border-bottom: 0; padding: 2px 0; }
    /* 공지행 카드 강조 */
    #bo_list .bo_notice td { background: transparent !important; }
    #bo_list .tbl_head01 tbody tr.bo_notice {
        border-left-color: var(--gbl-green);
        background: var(--gbl-green-soft);
    }

    /* 제목 = 카드 헤드(크게, 들여쓰기 제거) */
    #bo_list .td_subject { padding-left: 0 !important; margin-bottom: 8px; padding-right: 30px; }
    #bo_list .td_subject .bo_tit { font-size: 1.05em; line-height: 1.45; }
    #bo_list .td_subject .bo_tit a { color: var(--gbl-ink); }
    #bo_list .td_subject .bo_cate_link { margin-bottom: 6px; }

    /* 번호 / 글쓴이 / 조회 / 등록일 = 메타 라인(인라인, 라벨/아이콘) */
    #bo_list .td_num2,
    #bo_list .td_num,
    #bo_list .td_name,
    #bo_list .td_datetime,
    #bo_list .td_date {
        display: inline-block;
        margin: 0 14px 0 0;
        font-size: .85em;
        color: var(--gbl-sub);
        vertical-align: middle;
    }
    #bo_list .td_name::before { content: "글쓴이 "; color: var(--gbl-mute); }
    #bo_list .td_datetime::before,
    #bo_list .td_date::before {
        content: "\f017";              /* fa-clock */
        font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome";
        font-weight: 900;
        margin-right: 5px;
        color: var(--gbl-green);
    }
    /* 번호(공지/열람중 포함) 칩 */
    #bo_list .td_num2 strong.notice_icon,
    #bo_list .td_num2 .bo_current { display: inline; }

    /* 상태 뱃지(qa) = 메타 아래 별도 줄 */
    #bo_list .td_stat { display: block; margin-top: 10px; }

    /* 체크박스 = 카드 우상단 */
    #bo_list .td_chk {
        position: absolute;
        top: 12px; right: 12px;
        margin: 0; padding: 0;
        width: auto;
    }

    /* 빈 목록 = 휑하지 않게 중앙 박스 */
    #bo_list .empty_table,
    #bo_list .empty_list {
        display: block;
        padding: 48px 16px !important;
        border: 1px dashed var(--gbl-line);
        border-radius: var(--gbl-radius);
        background: var(--gbl-card);
        box-shadow: var(--gbl-shadow);
        color: var(--gbl-mute);
    }

    /* --- 읽기/쓰기/검색 모바일 --- */
    #bo_v_title { padding-bottom: 12px; }
    #bo_v_share .btn, .btn_b01.btn { min-height: 44px; }   /* 터치 영역 ≥44px */
    .btn_submit, .btn_cancel { width: 100%; min-height: 48px; justify-content: center; }
    .btn_confirm { flex-direction: column-reverse; }
    #bo_v_ans, #bo_v_ans_form, .form_01 { padding: 16px; }
    .bo_sch { width: 90% !important; max-width: 330px; left: 5% !important; margin-left: 0 !important; }

    /* #bo_list 외 일반 테이블(있다면)은 가로스크롤 유지 */
    :not(#bo_list) > .tbl_head01.tbl_wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* --- 모바일 소형(≤480) : 카드/페이징 더 컴팩트 --- */
@media (max-width: 480px) {
    #bo_list .tbl_head01 tbody tr { padding: 12px 14px; }
    #bo_list .td_subject .bo_tit { font-size: 1em; }
    .pg_page, .pg_current { min-width: 38px; min-height: 38px; }
}

/* --- 폴드/플립(≤359) : 메타 간격 더 축소 --- */
@media (max-width: 359px) {
    #bo_list .td_num2,
    #bo_list .td_num,
    #bo_list .td_name,
    #bo_list .td_datetime,
    #bo_list .td_date { margin-right: 10px; font-size: .8em; }
    #bo_v_con, #ans_con { font-size: .95em; }
}