/* ============================================================
   고객센터 공용 셸 (좌측 메뉴 + 우측 본문)
   - 자주묻는질문 / 공지사항 / (추후 1:1문의 등) 이 공유한다.
   - 원래 board-faq.css 안에만 있던 규칙을 빼낸 것. 공지 목록/상세는
     각 뷰에 인라인 <style> 로 teal(#429b98) 구버전이 복사돼 있었고
     `padding-top:100px` 같은 고정헤더 시절 잔재까지 들고 있어 모바일에서
     화면 한 칸이 통째로 비어 보였다 → 공용 파일로 통일.
   - 색상은 theme.css 토큰(--ma-*)만 쓴다.
   ============================================================ */

.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);
}

/* ---------- 반응형 ---------- */
@media (max-width: 768px) {
    .container_cus {
        flex-direction: column;
        gap: 20px;
        /* 모바일 헤더(.m-head)는 문서 흐름에 있으므로 상단 보정 여백이 필요 없다.
           구 뷰의 padding-top:100px 는 고정헤더 시절 잔재였다. */
        padding: 18px 16px 40px;
    }

    .cus_leftmenu {
        width: 100%;
    }

    /* style.css / style768.css 의 구 2단(float + calc 폭) 규칙이 남아 있어도
       모바일에서는 본문이 항상 화면 전체를 쓰도록 못박는다. */
    .cusinfor {
        float: none;
        width: 100%;
        margin-left: 0;
        padding: 0;
    }

    .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: 0 0 16px;
        padding-bottom: 12px;
        font-size: 22px;
    }
}

@media (max-width: 480px) {
    .container_cus {
        padding: 16px 14px 36px;
    }

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