@charset "utf-8";

/* 검색 - 게시판(skin/board/basic) 검색 디자인과 통일: 흰 알약 안에 입력창 + 검은 원형 버튼.
   같은 클래스명을 그대로 써서 시각적으로 동일하게 맞췄다(게시판 스킨과는 별도 스킨이라
   CSS는 여기 다시 정의함 - 로드되는 스타일시트가 서로 다름). */
.suda-bo-search{
    display: flex;
    align-items: center;
    height: 50px;
    border: 1px solid #e3e3e3;
    border-radius: 999px;
    background: #fff;
    flex: 0 0 auto;
}
.suda-bo-search input[type="text"]{
    height: 100%;
    box-sizing: border-box;
    padding: 0 18px;
    border: 0;
    outline: 0;
    background: transparent;
    color: #333;
    font-size: 14px;
    width: 220px;
}
.suda-bo-search input[type="text"]::placeholder{ color: #9a9a9a; }
.suda-bo-search-btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 39px;
    width: 39px;
    height: 39px;
    margin-right: 6px;
    border: 0;
    border-radius: 50%;
    background: #000;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    transition: background .15s ease;
}
.suda-bo-search-btn:hover{ background: #222; }

/* 분류 탭 - 카테고리가 여러 개일 때만 보임(FAQ 마스터가 1개면 list.skin.php에서 아예 숨김) */
#bo_cate{ margin-bottom: 20px; }
#bo_cate ul{ display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
#bo_cate li{ margin: 0; }
#bo_cate a{
    display: block;
    padding: 8px 18px;
    border-radius: 999px;
    border: 1px solid var(--suda-gray-200, #e5e7eb);
    color: #555;
    font-size: 14px;
    font-weight: 600;
}
#bo_cate a:hover{ border-color: var(--suda-blue); color: var(--suda-blue); }
#bo_cate #bo_cate_on{
    background: var(--suda-blue);
    border-color: var(--suda-blue);
    color: #fff;
}

/* FAQ 목록 - 아코디언 카드 리스트 (Q 원형 뱃지 + 질문 + 화살표 → 펼치면 A 뱃지 + 답변)
   검정 구분선(border-top)은 콘텐츠 영역 기준 가로 100%가 맞아서 #faq_wrap 자체엔
   padding을 안 주고, 그 100% "안쪽"에서 각 행(h3)에만 좌우 padding을 줘서 텍스트만
   안으로 들여쓴다 - 선은 그대로 끝까지, 글자만 여백 생김. */
#faq_wrap{ margin: 0 0 30px; border-top: 2px solid var(--suda-gray-900, #111); }
.faq_admin{ text-align: right; }
#faq_wrap ol{ margin: 0; padding: 0; list-style: none; }
#faq_wrap li{ border-bottom: 1px solid var(--suda-gray-100, #ececec); }

#faq_wrap li h3{
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 32px;
    padding: 18px 48px 18px 20px;
    font-size: 1em;
    font-weight: 400;
}
#faq_wrap li h3 .tit_bg{
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    border-radius: 50%;
    background: var(--suda-gray-100, #f1f2f4);
    color: #555;
    font-weight: 700;
    font-size: 0.95em;
}
#faq_wrap li h3 a{ flex: 1 1 auto; color: #222; }
#faq_wrap li h3 .tit_btn{
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border: 0;
    background: transparent;
    color: #9a9a9a;
    font-size: 1.1em;
    cursor: pointer;
    transition: transform .2s ease;
}
#faq_wrap li h3.faq_li_open{ }
#faq_wrap li h3.faq_li_open a{ color: var(--suda-blue); font-weight: 700; }
#faq_wrap li h3.faq_li_open .tit_btn{ color: var(--suda-blue); transform: translateY(-50%) rotate(180deg); }

/* 답변 박스 - 이전엔 padding을 줘도 뱃지(position:absolute; left:0)가 padding을 무시하고
   배경 테두리에 딱 붙어서 여백이 있는 것처럼 안 보였음(absolute 요소는 부모의 padding이
   아니라 padding box 기준 left:0이라 그대로 배경 가장자리에 붙음). margin으로 배경 박스
   자체를 앞뒤 행에서 띄우고, 뱃지도 left/top을 padding 값만큼 명시적으로 띄워서 진짜
   여유 공간이 생기게 함. */
/* Q 타이틀(h3)이 display:flex + gap으로 뱃지-텍스트 간격을 맞췄던 것과 똑같은 방식으로
   맞춘다. .con_inner 자체는 jQuery slideDown/slideUp이 display를 건드리는 대상이라
   거기에 flex를 직접 주면 애니메이션 중 충돌할 수 있어서, 안쪽에 .con_inner_row를
   하나 더 두고 그쪽에만 flex+gap을 줌(스크립트가 안 건드리는 요소라 안전). */
#faq_con .con_inner{
    display: none;
    margin: 8px 0 16px;
    padding: 20px 24px;
    border-radius: 12px;
    background: var(--suda-gray-50, #f7f8fa);
}
#faq_con .con_inner_row{
    display: flex;
    align-items: flex-start;
    gap: 14px;
}
#faq_con .con_inner .tit_bg{
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    border-radius: 50%;
    background: var(--suda-blue);
    color: #fff;
    font-weight: 700;
    font-size: 0.95em;
}
#faq_con .con_inner .con_inner_text{ flex: 1 1 auto; padding-top: 4px; line-height: 1.7; color: #444; font-size: 0.95em; }

@media (max-width: 768px){
    .suda-bo-search{ height: 46px; }
    .suda-bo-search input[type="text"]{ width: 100%; }
    .suda-bo-search-btn{ flex-basis: 34px; width: 34px; height: 34px; }
    #faq_wrap li h3{ padding: 14px 40px 14px 8px; gap: 10px; }
    #faq_wrap li h3 .tit_bg{ flex-basis: 26px; width: 26px; height: 26px; line-height: 26px; font-size: 0.85em; }
    #faq_con .con_inner{ padding: 16px; }
    #faq_con .con_inner_row{ gap: 10px; }
    #faq_con .con_inner .tit_bg{ flex-basis: 26px; width: 26px; height: 26px; line-height: 26px; font-size: 0.85em; }
}