@charset "utf-8";

#bo_cate {margin-bottom:28px}
#bo_cate h2 {position:absolute;font-size:0;line-height:0;overflow:hidden}
#bo_cate ul {zoom:1; display: none;}
#bo_cate ul:after {display:block;visibility:hidden;clear:both;content:""}
#bo_cate li {display:inline-block;padding:2px}
#bo_cate a {display:block;line-height:28px;padding:5px 15px;border-radius:30px;border:1px solid #d6e9ff;color:#6794d3}
#bo_cate a:focus, #bo_cate a:hover, #bo_cate a:active {text-decoration:none;background:#3a8afd;color:#fff}
#bo_cate #bo_cate_on {z-index:2;background:#3a8afd;color:#fff;font-weight:bold;border:1px solid #3a8afd;
-webkit-box-shadow:inset 0 2px 5px rgb(33, 135, 202);
-moz-box-shadow:inset 0 2px 5px rgb(33, 135, 202);
box-shadow:inset 0 2px 5px rgb(33, 135, 202)}

#faq_wrap {margin:10px 0 30px}
#faq_wrap h2 {position:absolute;font-size:0;line-height:0;overflow:hidden}
.faq_admin {text-align:right}
#faq_wrap ol {margin:0;padding:0;list-style:none}
#faq_wrap li {border-bottom:1px solid #ececec;background:#fff;position:relative}
#faq_wrap li:first-child {border-top:1px solid #ececec}
#faq_wrap li h3 {min-height:50px;line-height:30px;padding:15px;padding-left:50px;position:relative}
#faq_wrap li h3 .tit_btn {position:absolute;right:15px;top:15px;border:0;width:30px;height:30px;background:#fff;color:#c5cdd8;font-size:1.2em}
#faq_wrap li h3 .tit_bg {display:inline-block;position:absolute;top:15px;left:15px;text-align:center;color:#000;font-size:1.6em}
#faq_wrap li h3.faq_li_open a {color:#3a8afd}

#faq_con .con_inner {display:none;padding:5px 5px 20px 50px}
#faq_con .con_inner .tit_bg {display:inline-block;position:absolute;top:10px;left:10px;text-align:center;background:#777;color:#fff;border-radius:50%;width:30px;line-height:30px;height:30px}
#faq_con .con_inner .closer_btn {position:absolute;right:15px;top:15px;border:0;width:30px;height:30px;background:#fff;color:#3a8afd;font-size:1.2em}

#faq_sch {background:#f7f7f7;padding:30px;text-align:center;margin:0 0 10px}
#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 {border:1px solid #d0d3db;width:300px;height:45px;border-radius:0;border-radius:3px}
#faq_sch .btn_submit {padding:0 10px;height:45px;width:88px;font-size:1.083em;font-weight:bold;color:#fff;background:#434a54}

/* ==========================================================================
   #design 2단 카테고리 + 아코디언 리뉴얼 커스텀 CSS
   ========================================================================== */

/* FAQ 페이지 전체 컨테이너 */
.faq-page-container {
    display: flex;
    gap: 80px;
    width: 100%;
    box-sizing: border-box;
    align-items: flex-start;
}

/* 좌측 사이드바 (분류) */
.faq-sidebar {
    width: 220px;
    flex-shrink: 0;
    position: sticky;
    top: 100px;
}

#bo_cate ul.faq-category-list {
    display: block !important;
    list-style: none;
    padding: 0;
    margin: 0;
}

.faq-category-list li {
    display: block !important;
    margin-bottom: 24px;
    padding: 0 !important;
}

.faq-category-list li a {
    width:100%;
    display: block !important;
    font-size: 20px;
    font-weight: 500;
    color: var(--text-color, #777) !important;
    text-decoration: none;
    transition: all 0.3s ease;
    padding: 0 0 4px 0 !important;
    border-bottom: 2px solid transparent !important;
    background: transparent !important;
    border-radius: 0 !important;
    border: none !important;
    line-height: normal !important;
}

.faq-category-list li.active a {
    color: var(--heading-color, #000) !important;
    font-weight: 700 !important;
    border-bottom-color: var(--heading-color, #000) !important;
    box-shadow: none !important;
}

.faq-category-list li a:hover {
    color: var(--heading-color, #000) !important;
    background: transparent !important;
}

/* 우측 FAQ 영역 */
.faq-content {
    flex-grow: 1;
}

/* 상단 풀가로형 검색 바 */
.faq-search-container {
    width: 100%;
    margin-bottom: 50px;
}

#faq_sch {
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    width: 100%;
}

#design .tm-search-box-wide {
    display: flex;
    align-items: center;
    border: 1px solid var(--header-border2);
    border-radius: 12px;
    padding: 14px 24px;
    background: var(--bg-color, #ffffff);
    width: 100%;
    box-sizing: border-box;
    transition: border-color 0.3s, box-shadow 0.3s;
}

#design .tm-search-box-wide:focus-within {
    border-color: var(--heading-color);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

#design .tm-search-icon {
    width: 20px;
    height: 20px;
    color: var(--text-color, #9ca3af);
    margin-right: 12px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

#design .tm-search-input {
    border: none !important;
    outline: none !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    color: var(--heading-color) !important;
    background: transparent !important;
    width: 100% !important;
    height: auto !important;
    padding: 0 !important;
    box-shadow: none !important;
}

/* FAQ 아코디언 목록 */
.faq-list-wrap {
    border-top: 1px solid var(--header-border2, rgba(0, 0, 0, 0.15));
}

.faq-item {
    border-bottom: 1px solid var(--header-border2, rgba(0, 0, 0, 0.1));
}

.faq-trigger {
    display: flex;
    align-items: center;
    padding: 25px 60px 25px 25px !important;
    cursor: pointer;
    position: relative;
    user-select: none;
    margin: 0;
    color: var(--heading-color) !important;
    font-size: 24px !important;
    font-weight: 600 !important;
    line-height: 1.5em !important;
}

.faq-q-icon {
    font-size: 22px;
    font-weight: 700;
    color: #ccc !important;
    margin-right: 20px;
    flex-shrink: 0;
    line-height: 1;
}

.faq-title {
    font-size: inherit !important;
    font-weight: inherit !important;
    color: inherit !important;
    line-height: inherit !important;
    word-break: keep-all;
}

.faq-trigger::after {
    content: '↓' !important;
    font-family: 'SUIT', sans-serif !important;
    font-size: 24px !important;
    color: var(--heading-color) !important;
    position: absolute;
    right: 25px;
    top: 50%;
    transform: translateY(-50%);
    transition: transform 0.3s ease;
    font-weight: 600 !important;
}

.faq-item.on .faq-trigger::after {
    transform: translateY(-50%) rotate(180deg) !important;
}

.faq-body {
    display: none;
    margin: 0;
    background: #fcfdfe;
}

[data-theme="dark"] .faq-body {
    background: #181818;
}

.faq-body-content {
    font-size: 18px !important;
    color: var(--text-color) !important;
    line-height: 1.7em !important;
    padding: 24px 25px 25px 62px !important;
    word-break: break-all;
}

/* 페이징 */
.faq-pagination {
    margin-top: 50px;
    text-align: center;
}

.faq-empty {
    padding: 60px 0;
    text-align: center;
    color: #999;
    font-size: 16px;
}

/* 모바일 반응형 */
@media all and (max-width: 1024px) {
    .faq-page-container {
        gap: 40px;
    }
    .faq-sidebar {
        width: 180px;
    }
    .faq-category-list li a {
        font-size: 18px;
    }
}

@media all and (max-width: 768px) {
    .faq-page-container {
        flex-direction: column;
        gap: 0px;
    }
    .faq-sidebar {
        width: 100%;
        position: static;
    }
    #bo_cate ul.faq-category-list {
        display: flex !important;
        flex-wrap: wrap;
        gap: 8px;
        border-bottom: 1px solid var(--header-border2, rgba(0, 0, 0, 0.1));
        padding-bottom: 16px;
    }
    .faq-category-list li {
        margin-bottom: 0;
    }
    .faq-category-list li a {
        font-size: 15px;
        padding: 6px 12px !important;
        background: #f4f6fa !important;
        border-radius: 20px !important;
        border-bottom: none !important;
    }
    [data-theme="dark"] .faq-category-list li a {
        background: #1e1e1e !important;
    }
    .faq-category-list li.active a {
        background: var(--heading-color, #000) !important;
        color: var(--bg-color, #fff) !important;
    }
    .faq-header-bar {
        margin-bottom: 24px;
        justify-content: stretch;
    }
    #faq_sch, .faq-search-box {
        width: 100%;
    }
    .faq-search-box input[type="text"] {
        width: 100% !important;
    }
    .faq-list-wrap{border-top:0px;}
    .faq-content{width: 100%;}
}

/* 100% 인용 미디어 쿼리 정의 */
@media all and (max-width: 1280px) {
    .faq-trigger {
        font-size: 23px !important;
        padding: 22px 55px 22px 25px !important;
    }
    .faq-trigger::after {
        right: 20px !important;
    }
    .faq-body-content {
        font-size: 18px !important;
        padding: 22px 20px 22px 62px !important;
    }
    .faq-trigger::after{font-size: 23px !important;}
}

@media all and (max-width: 1024px) {
    .faq-trigger {
        font-size: 22px !important;
        padding: 20px 50px 20px 25px !important;
    }
    .faq-trigger::after {
        right: 15px !important;
    }
    .faq-body-content {
        font-size: 17px !important;
        padding: 20px 15px 20px 62px !important;
    }
    .faq-trigger::after{font-size: 22px !important;}
}

@media all and (max-width: 768px) {
    .faq-trigger {
        font-size: 20px !important;
        padding: 18px 45px 18px 20px !important;
    }
    .faq-trigger::after {
        right: 10px !important;
    }
    .faq-body-content {
        font-size: 16px !important;
        padding: 18px 18px 18px 18px !important;
    }
    #bo_cate{margin-bottom: 0;}
    .faq-search-container{margin-bottom: 40px;}
    .faq-trigger::after{font-size: 20px !important;}
}

@media all and (max-width: 500px) {
    .faq-trigger {
        font-size: 18px !important;
        padding: 15px 40px 15px 15px !important;
    }
    .faq-trigger::after {
        right: 5px !important;
    }
    .faq-body-content {
        padding: 15px 15px 15px 15px !important;
    }
    .faq-trigger::after{font-size: 18px !important;}
}