@charset "utf-8";
/* =========================================================
   FAQ 스킨 — 사이트 디자인 컨셉(인디고/슬레이트, 소프트 라운드)
   토큰은 css/common.css(:root) 사용, 없으면 폴백
   ========================================================= */
#faq_wrap,#faq_sch,#bo_cate,#faq_hhtml,#faq_thtml{
    --fq-primary:var(--color-primary,#4f46e5);
    --fq-primary-hover:var(--color-primary-hover,#4338ca);
    --fq-primary-light:var(--color-primary-light,#f5f3ff);
    --fq-surface:var(--color-surface,#ffffff);
    --fq-text:var(--color-text-main,#0f172a);
    --fq-muted:var(--color-text-muted,#64748b);
    --fq-border:var(--color-border,#e2e8f0);
    --fq-r-sm:var(--radius-sm,8px);
    --fq-r-md:var(--radius-md,12px);
    --fq-r-lg:var(--radius-lg,16px);
    --fq-shadow:var(--shadow-soft,0 10px 25px -5px rgba(15,23,42,.05),0 8px 10px -6px rgba(15,23,42,.04));
}

/* 공통 폭 + 폰트 */
#faq_himg,#faq_hhtml,#faq_sch,#bo_cate,#faq_wrap,#faq_thtml,#faq_timg,.faq_admin,.pg_wrap{
    max-width:820px;margin-left:auto;margin-right:auto;box-sizing:border-box;
    font-family:var(--font-family,'Nanum Gothic',sans-serif)}
#faq_hhtml:empty,#faq_thtml:empty{display:none}
#faq_himg img,#faq_timg img{max-width:100%;height:auto;border-radius:12px}

/* ── 검색 ── */
#faq_sch{margin:8px auto 18px;border:0;padding:0}
#faq_sch legend,#faq_sch .sch_tit{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
#faq_sch form{display:flex;align-items:center;gap:8px;height:50px;padding:0 8px 0 16px;
    background:var(--fq-surface);border:1px solid var(--fq-border);border-radius:999px;box-shadow:var(--fq-shadow);
    transition:border-color .15s,box-shadow .15s}
#faq_sch form:focus-within{border-color:var(--fq-primary);box-shadow:0 0 0 3px var(--fq-primary-light)}
#faq_sch form::before{content:"";width:20px;height:20px;flex:none;
    background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E")}
#faq_sch .frm_input{flex:1;min-width:0;height:auto;border:0;background:transparent;font-size:15px;color:var(--fq-text);outline:0;padding:0;box-shadow:none;}
#faq_sch .btn_submit{flex:none;display:inline-flex;align-items:center;gap:5px;height:38px;padding:0 20px;border:0;border-radius:999px;
    background:var(--fq-primary);color:#fff;font-size:14px;font-weight:700;cursor:pointer;transition:background .15s}
#faq_sch .btn_submit:hover{background:var(--fq-primary-hover)}
#faq_sch .btn_submit .fa{display:none}

/* ── 분류 탭 ── */
#bo_cate{margin:0 auto 18px}
#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-flex;align-items:center;padding:9px 18px;border:1px solid var(--fq-border);border-radius:999px;
    background:var(--fq-surface);color:var(--fq-muted);font-size:14px;font-weight:700;text-decoration:none;transition:all .15s}
#bo_cate_ul a:hover{border-color:var(--fq-primary);color:var(--fq-primary)}
#bo_cate_ul a#bo_cate_on{background:var(--fq-primary);border-color:var(--fq-primary);color:#fff;box-shadow:var(--shadow-btn,0 4px 12px rgba(79,70,229,.2))}

/* ── FAQ 아코디언 ── */
#faq_wrap{margin:0 auto}
#faq_con h2{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
#faq_con ol{margin:0;padding:0;list-style:none;background:var(--fq-surface);border:1px solid var(--fq-border);
    border-radius:16px;box-shadow:var(--fq-shadow);overflow:hidden}
#faq_con li{border-bottom:1px solid #f1f5f9}
#faq_con li:last-child{border-bottom:0}

/* 질문 헤더 */
#faq_con h3.faq_q{display:flex;gap:14px;margin:0;padding:20px 22px;cursor:pointer;transition:background .18s;outline:0}
#faq_con h3.faq_q:hover{background:#f8fafc}
#faq_con h3.faq_q:focus-visible{background:var(--fq-primary-light)}
#faq_con .tit_bg{flex:none;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:9px;
    background:var(--fq-primary-light);color:var(--fq-primary);font-weight:800;font-size:15px;transition:all .18s}
#faq_con .faq_qtext{flex:1;min-width:0;color:var(--fq-text);font-size:15.5px;font-weight:700;line-height:1.75;transition:color .18s}
#faq_con h3.faq_q:hover .faq_qtext{color:var(--fq-primary)}
#faq_con .tit_btn{flex:none;width:30px;height:30px;border:1px solid var(--fq-border);border-radius:8px;background:var(--fq-surface);
    color:var(--fq-muted);position:relative;transition:all .25s}
#faq_con .tit_btn::before,#faq_con .tit_btn::after{content:"";position:absolute;top:50%;left:50%;background:currentColor;border-radius:2px;transition:transform .28s cubic-bezier(.4,0,.2,1),opacity .28s}
#faq_con .tit_btn::before{width:12px;height:2px;transform:translate(-50%,-50%)}
#faq_con .tit_btn::after{width:2px;height:12px;transform:translate(-50%,-50%)}

/* 열린 상태 강조 + 아이콘 + → − (세로막대 회전+페이드) */
#faq_con li.faq-on>h3.faq_q{background:var(--fq-primary-light)}
#faq_con li.faq-on .tit_bg{background:var(--fq-primary);color:#fff}
#faq_con li.faq-on .faq_qtext{color:var(--fq-primary)}
#faq_con li.faq-on .tit_btn{background:var(--fq-primary);border-color:var(--fq-primary);color:#fff}
#faq_con li.faq-on .tit_btn::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0}

/* 답변 : grid-rows 0fr → 1fr 로 부드럽게 여닫음 */
#faq_con .con_inner{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s cubic-bezier(.4,0,.2,1)}
#faq_con li.faq-on .con_inner{grid-template-rows:1fr}
#faq_con .con_inner_in{overflow:hidden;min-height:0}
#faq_con .faq_a{position:relative;padding:22px 22px 24px 66px;font-size:14.5px;line-height:1.8;color:#475569;
    opacity:0;transform:translateY(-6px);transition:opacity .32s ease .05s,transform .32s ease .05s}
#faq_con li.faq-on .faq_a{opacity:1;transform:none}
#faq_con .faq_a::before{content:"A";position:absolute;left:22px;top:20px;display:inline-flex;align-items:center;justify-content:center;
    width:30px;height:30px;border-radius:9px;background:#eef2ff;color:var(--fq-primary);font-weight:800;font-size:15px}
#faq_con .faq_a img{max-width:100%;height:auto;border-radius:12px}
#faq_con .faq_a p:first-child{margin-top:0}
#faq_con .faq_a p:last-child{margin-bottom:0}

/* 빈 목록 */
.empty_list{max-width:820px;margin:0 auto;padding:56px 20px;text-align:center;color:var(--fq-muted);font-size:15px;font-weight:600;
    background:var(--fq-surface);border:1px solid var(--fq-border);border-radius:16px;box-shadow:var(--fq-shadow)}
.empty_list a{color:var(--fq-primary);font-weight:700}

/* 페이지네이션 */
.pg_wrap{margin:22px auto 0;text-align:center}
.pg{display:inline-flex;gap:5px;align-items:center}
.pg_page,.pg_current,.pg_start,.pg_prev,.pg_next,.pg_end{display:inline-flex;align-items:center;justify-content:center;
    min-width:38px;height:38px;padding:0 6px;border:1px solid var(--fq-border);background:var(--fq-surface);border-radius:8px;
    color:var(--fq-muted);font-size:13.5px;font-weight:700;text-decoration:none}
.pg_page:hover{background:var(--fq-primary-light);color:var(--fq-primary);border-color:var(--fq-primary-light)}
.pg_current{background:var(--fq-primary);border-color:var(--fq-primary);color:#fff}

/* 관리자 버튼 */
.faq_admin{margin:16px auto 0;text-align:right}
.faq_admin .btn_admin{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:12px;
    border:1px solid var(--color-border,#e2e8f0);background:#fff;color:#64748b}
.faq_admin .btn_admin .fa{display:none}
.faq_admin .btn_admin::before{content:"";width:20px;height:20px;
    background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E")}

/* ── 반응형 ── */
@media (max-width:768px){
    #faq_himg,#faq_hhtml,#faq_sch,#bo_cate,#faq_wrap,#faq_thtml,#faq_timg,.pg_wrap,.faq_admin,.empty_list{max-width:100%}
    #faq_con h3{padding:16px;gap:12px}
    #faq_con h3>a{font-size:14.5px}
    #faq_con .con_inner::before{position:static;display:inline-flex;margin-bottom:8px}
    #faq_sch .btn_submit{padding:0 14px}
}

/* ── 전체분류 : 분류별 구분 제목 ── */
#faq_con .faq_group_tit{display:flex;align-items:center;gap:8px;
    margin:26px 0 12px;padding:0 2px;
    font-size:15.5px;font-weight:800;color:var(--fq-text);letter-spacing:-.02em}
#faq_con .faq_group_tit:first-of-type{margin-top:0}
#faq_con .faq_group_tit::before{content:"";width:4px;height:16px;border-radius:2px;
    background:var(--fq-primary);flex:none}
#faq_con .faq_group_cnt{display:inline-flex;align-items:center;justify-content:center;
    min-width:22px;height:22px;padding:0 7px;border-radius:999px;
    background:var(--fq-primary-light);color:var(--fq-primary);
    font-size:11.5px;font-weight:800}
/* 분류가 여러 개일 때 각 목록 사이 간격 */
#faq_con ol + .faq_group_tit{margin-top:28px}