/* ============================================================
   고객센터 / 자주묻는질문(FAQ) — 사이트 테마(theme.css 토큰)에 맞춤
   색상: 블루 액센트 #1565AD (var(--ma-accent)), 기존 teal(#429b98) 대체
   ============================================================ */

.container_cus {
    display: flex;
    gap: 28px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px 64px;
    box-sizing: border-box;
}

/* ---------- 좌측 메뉴 ---------- */
.cus_leftmenu {
    flex-shrink: 0;
    width: 240px;
}

.cus_leftmenu .main_txt {
    display: block;
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -.03em;
    color: var(--ma-ink);
}

.cus_leftmenu .sub_txt {
    display: block;
    margin-top: 6px;
    font-size: 14px;
    color: var(--ma-muted);
}

.cus_leftmenu ul {
    margin-top: 22px;
    border: 1px solid var(--ma-line);
    border-radius: var(--ma-radius-sm);
    overflow: hidden;
    background: #fff;
}

.cus_leftmenu li {
    position: relative;
}

.cus_leftmenu li + li {
    border-top: 1px solid var(--ma-line);
}

.cus_leftmenu li a {
    display: block;
    padding: 15px 18px;
    color: var(--ma-ink-2);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -.02em;
    transition: background .15s, color .15s;
}

.cus_leftmenu li a:hover {
    color: var(--ma-accent);
    background: var(--ma-accent-bg);
}

.cus_leftmenu li.on {
    box-shadow: inset 3px 0 0 var(--ma-accent);
}

.cus_leftmenu li.on a {
    color: var(--ma-accent);
    background: var(--ma-accent-bg);
    font-weight: 700;
}

/* PC 에서는 모바일용 셀렉트 숨김 */
.cus_leftmenu select {
    display: none;
}

/* ---------- 우측 콘텐츠 ---------- */
.cusinfor {
    flex: 1;
    min-width: 0;
}

.cusinfor .page_title {
    margin: 4px 0 26px;
    padding-bottom: 16px;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -.03em;
    color: var(--ma-ink);
    border-bottom: 2px solid var(--ma-ink);
}

/* ---------- 검색 ---------- */
.faq_zone {
    margin-bottom: 24px;
}

.faq_zone .inner {
    display: flex;
    gap: 10px;
}

.faq_keyword {
    flex: 1;
    height: 48px;
    padding: 0 16px;
    border: 1.5px solid var(--ma-line-2);
    border-radius: var(--ma-radius-sm);
    font-size: 15px;
    color: var(--ma-ink);
    background: #fff;
    box-sizing: border-box;
}

.faq_keyword:focus {
    outline: none;
    border-color: var(--ma-accent);
    box-shadow: 0 0 0 3px var(--ma-accent-bg);
}

.faq_zone .btn_search {
    flex-shrink: 0;
    width: 108px;
    height: 48px;
    background: var(--ma-accent);
    color: #fff;
    border: none;
    border-radius: var(--ma-radius-sm);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s;
}

.faq_zone .btn_search:hover {
    background: var(--ma-accent-d);
}

/* ---------- 카테고리 칩 ---------- */
.faq {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--ma-line);
}

.faq .faq_cate {
    padding: 8px 18px;
    border: 1px solid var(--ma-line-2);
    border-radius: 999px;
    color: var(--ma-ink-2);
    background: #fff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    transition: all .15s;
}

.faq .faq_cate:hover {
    border-color: var(--ma-accent);
    color: var(--ma-accent);
}

.faq .faq_cate.on {
    background: var(--ma-accent);
    border-color: var(--ma-accent);
    color: #fff;
}

/* ---------- FAQ 아코디언 ---------- */
.faq_list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.faq_list .faq_q {
    border-bottom: 1px solid var(--ma-line);
}

.faq_list .faq_q a {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 22px 8px;
    color: var(--ma-ink);
    text-decoration: none;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: -.02em;
    cursor: pointer;
    transition: color .15s;
}

.faq_list .faq_q a:hover {
    color: var(--ma-accent);
}

.faq_list .faq_q .txt_num {
    flex-shrink: 0;
    font-weight: 800;
    font-size: 18px;
    line-height: 1.5;
    color: var(--ma-accent);
}

.faq_tr {
    display: none;
    margin: 0 0 14px;
    padding: 22px 24px;
    background: var(--ma-accent-bg);
    border-left: 3px solid var(--ma-accent);
    border-radius: 0 var(--ma-radius-sm) var(--ma-radius-sm) 0;
    line-height: 1.8;
    font-size: 15px;
    color: var(--ma-ink-2);
}

.faq_tr .txt_num {
    margin-right: 8px;
    font-weight: 800;
    color: var(--ma-accent);
}

/* ---------- 반응형 ---------- */
@media (max-width: 768px) {
    .container_cus {
        flex-direction: column;
        gap: 24px;
        padding: 24px 16px 48px;
    }

    .cus_leftmenu {
        width: 100%;
    }

    .cus_leftmenu .main_txt,
    .cus_leftmenu .sub_txt,
    .cus_leftmenu ul {
        display: none;
    }

    /* 모바일: 좌측 메뉴를 셀렉트 드롭다운으로 */
    .cus_leftmenu select {
        display: block;
        width: 100%;
        height: 48px;
        padding: 0 40px 0 16px;
        border: 1.5px solid var(--ma-line-2);
        border-radius: var(--ma-radius-sm);
        font-size: 15px;
        color: var(--ma-ink);
        background-color: #fff;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23514941' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 16px center;
        background-size: 12px;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        cursor: pointer;
    }

    .cus_leftmenu select:focus {
        outline: none;
        border-color: var(--ma-accent);
        box-shadow: 0 0 0 3px var(--ma-accent-bg);
    }

    .cusinfor .page_title {
        margin-bottom: 20px;
        font-size: 22px;
    }

    .faq_zone .inner {
        flex-direction: column;
    }

    .faq_zone .btn_search {
        width: 100%;
    }

    .faq .faq_cate {
        padding: 7px 15px;
        font-size: 13px;
    }

    .faq_list .faq_q a {
        padding: 18px 4px;
        font-size: 15px;
    }

    .faq_tr {
        padding: 18px;
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .cusinfor .page_title {
        font-size: 20px;
    }

    .faq_list .faq_q a {
        font-size: 14px;
    }

    .faq_tr {
        font-size: 13px;
        padding: 15px;
    }
}