@charset "utf-8";

/* =========================================================
   FAQ 스킨 - 사이트 게시판과 동일 톤 (녹색 #21493d / 금색 #c9a25b)
   ========================================================= */

/* 분류 탭 (게시판 카테고리와 동일) */
#bo_cate { margin-bottom: 26px; }
#bo_cate h2 { position: absolute; font-size: 0; line-height: 0; overflow: hidden; }
#bo_cate ul { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
#bo_cate ul:after { display: none; content: ""; }
#bo_cate li { display: inline-block; padding: 0; }
#bo_cate a {
    display: inline-flex; align-items: center; height: 40px; padding: 0 18px; line-height: 1;
    border-radius: 999px; background: #f3f5f2; border: 1px solid #e6efe9;
    color: #4b5563; font-size: 15px; font-weight: 700;
}
#bo_cate a:focus, #bo_cate a:hover, #bo_cate a:active { text-decoration: none; background: #eef3ef; color: #21493d; }
#bo_cate #bo_cate_on {
    background: linear-gradient(135deg, #21493d, #16302a); color: #fff;
    border-color: transparent; font-weight: 800; box-shadow: 0 8px 18px rgba(33,73,61,.22);
}

/* 검색 */
#faq_sch {
    display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap;
    background: #f7faf8; border: 1px solid #e6efe9; border-radius: 14px;
    padding: 22px; margin: 0 0 22px;
}
#faq_sch legend, #faq_sch .sch_tit { position: absolute; margin: 0; padding: 0; font-size: 0; line-height: 0; text-indent: -9999em; overflow: hidden; }
#faq_sch .frm_input {
    width: 320px; max-width: 60%; height: 46px; border: 1px solid #cccccc; border-radius: 8px;
    padding: 0 14px; background: #fff; font-size: 15px; box-sizing: border-box;
}
#faq_sch .frm_input:focus { border-color: #21493d; outline: 0; box-shadow: 0 0 0 3px rgba(33,73,61,.12); }
#faq_sch .btn_submit {
    height: 46px; padding: 0 22px; border: 0; border-radius: 8px;
    background: linear-gradient(135deg, #2f6b4f, #21493d); color: #fff;
    font-weight: 700; font-size: 15px; cursor: pointer;
}
#faq_sch .btn_submit:hover { background: linear-gradient(135deg, #21493d, #16302a); }

/* 아코디언 목록 */
#faq_wrap { margin: 0 0 30px; }
#faq_wrap h2 { position: absolute; font-size: 0; line-height: 0; overflow: hidden; }
#faq_wrap ol { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
#faq_wrap li {
    border: 1px solid #e8e3d8; border-radius: 12px; background: #fff; position: relative; overflow: hidden;
    box-shadow: 0 3px 12px rgba(33,73,61,.04); transition: box-shadow .2s, border-color .2s;
}
#faq_wrap li:first-child { border-top: 1px solid #e8e3d8; }
#faq_wrap li:hover { box-shadow: 0 8px 22px rgba(33,73,61,.10); }

#faq_wrap li h3 {
    margin: 0; min-height: 0; line-height: 1.5; padding: 20px 62px; position: relative;
    font-size: 16px; font-weight: 700; color: #1f2724; cursor: pointer;
}
#faq_wrap li h3 a { color: #1f2724; }
#faq_wrap li h3 a:hover { text-decoration: none; color: #21493d; }
#faq_wrap li h3 .tit_bg {
    display: inline-flex; align-items: center; justify-content: center; position: absolute; top: 16px; left: 18px;
    width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, #2f6b4f, #21493d);
    color: #fff; font-size: 15px; font-weight: 800;
}
#faq_wrap li h3 .tit_btn {
    position: absolute; right: 18px; top: 17px; border: 0; width: 32px; height: 32px; border-radius: 50%;
    background: #eef3ef; color: #21493d; font-size: 14px; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}
#faq_wrap li h3.faq_li_open { background: #f7faf8; }
#faq_wrap li h3.faq_li_open a { color: #21493d; }
#faq_wrap li h3.faq_li_open .tit_btn { background: #21493d; color: #fff; }

/* 답변 */
#faq_con .con_inner {
    display: none; padding: 20px 62px 26px; border-top: 1px dashed #e6e2d6; background: #fbfcfb;
    color: #4b5563; font-size: 15px; line-height: 1.85; position: relative;
}
#faq_con .con_inner .tit_bg {
    display: inline-flex; align-items: center; justify-content: center; position: absolute; top: 18px; left: 18px;
    width: 32px; height: 32px; border-radius: 50%; background: #c9a25b; color: #fff; font-weight: 800;
}
#faq_con .con_inner .closer_btn {
    position: absolute; right: 18px; top: 16px; border: 0; width: 32px; height: 32px; border-radius: 50%;
    background: #eef3ef; color: #21493d; font-size: 14px; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}

/* 빈 목록 / 관리 버튼 */
.empty_list { text-align: center; padding: 60px 20px; color: #8a93a3; font-size: 16px; background: #f9fafb; border-radius: 14px; }
.faq_admin { text-align: right; margin-top: 16px; }
.faq_admin .btn_admin { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 16px; border-radius: 999px; background: #eef3ef; color: #21493d; font-weight: 700; }
.faq_img { margin: 0 0 20px; }
.faq_img img { max-width: 100%; height: auto; border-radius: 12px; }

/* 페이지네이션 (게시판과 동일) */
.pg_wrap { margin-top: 28px; text-align: center; }
.pg { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.pg_page, .pg_current, .pg_start, .pg_end, .pg_prev, .pg_next {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 40px; height: 40px; padding: 0 8px; border-radius: 10px;
    background: #f4f4f7; color: #4b5563 !important; font-weight: 600; border: 0; float: none;
}
.pg_current { background: #21493d; color: #fff !important; }
.pg_page:hover { background: #e8ddc4; }

/* 반응형 */
@media (max-width: 640px) {
    #faq_wrap li h3 { padding: 16px 54px; font-size: 15px; }
    #faq_con .con_inner { padding: 16px 20px 20px 54px; }
    #faq_sch .frm_input { max-width: none; width: 100%; }
}

/* 반응형 세분화 */
@media (max-width: 768px) {
    #bo_cate a { height: 36px; padding: 0 14px; font-size: 14px; }
    #faq_sch { padding: 16px; gap: 6px; }
    #faq_sch .frm_input { height: 42px; font-size: 14px; }
    #faq_sch .btn_submit { height: 42px; padding: 0 16px; font-size: 14px; }
    #faq_wrap li h3 { padding: 16px 54px; font-size: 15px; }
    #faq_wrap li h3 .tit_bg { top: 14px; left: 14px; width: 28px; height: 28px; font-size: 14px; }
    #faq_wrap li h3 .tit_btn { right: 14px; top: 15px; width: 28px; height: 28px; }
    #faq_con .con_inner { padding: 16px 20px 20px 54px; font-size: 14px; }
    #faq_con .con_inner .closer_btn { right: 14px; top: 14px; width: 28px; height: 28px; }
    .pg_page, .pg_current, .pg_start, .pg_end, .pg_prev, .pg_next { min-width: 34px; height: 34px; font-size: 14px; }
}

@media (max-width: 480px) {
    #faq_sch { flex-direction: column; align-items: stretch; }
    #faq_sch .frm_input { width: 100%; max-width: none; }
    #faq_wrap li h3 { padding: 14px 46px; font-size: 14px; }
    #faq_wrap li h3 .tit_bg { left: 12px; width: 26px; height: 26px; font-size: 13px; }
    #faq_wrap li h3 .tit_btn { right: 12px; width: 26px; height: 26px; }
    #faq_con .con_inner { padding: 14px 16px 18px 46px; }
}