/**
 * 고객센터 공통 레이아웃 / 좌측 메뉴
 * partials/cs-sidebar.blade.php 가 이 파일을 함께 불러온다.
 */
.cs-page { display: grid; grid-template-columns: 220px 1fr; gap: 32px; padding: 32px 0 60px; align-items: start; }
/* 데스크톱은 헤더가 fixed 라 위 여백을 아래 sticky 값(+16px)과 맞춘다.
   32px 이면 처음엔 아래에 있다가 스크롤하면 16px 위로 튀어 올라가 위치가 바뀐다.
   16px 으로 맞추면 처음부터 붙은 자리 그대로라 움직임이 없다. */
/* 위 여백. 페이지별 <style> 의 32px 은 너무 떨어져 보인다.
   데스크톱은 아래 sticky 값(헤더 + 16)과 같은 값이라야 스크롤할 때 안 움직이고,
   모바일도 같은 16px 로 두면 경로 줄이 헤더에 자연스럽게 붙는다. */
.cs-page { padding-top: 16px; }

@media (min-width: 901px) {
    /* 아래 여백을 컨테이너가 아니라 본문 칸이 갖게 한다.
       sticky 는 부모의 '내용' 상자 안에서만 버틸 수 있어서, 이 여백이 컨테이너 padding 이면
       푸터에 닿기 한참 전에 좌측 메뉴가 밀려 올라간다. 본문 칸 안에 넣으면
       버틸 수 있는 구간이 푸터 바로 앞까지 늘어난다. 보이는 여백은 그대로다. */
    /* 푸터가 들고 있는 margin-top:60px 도 컨테이너 밖이라 버틸 구간을 갉아먹는다.
       음수 margin 으로 그 60px 을 걷어내고 같은 크기를 본문 칸 안에 넣어 준다.
       보이는 간격(본문 아래 120px)은 전과 똑같고, 버틸 수 있는 구간만 60px 늘어난다. */
    .cs-page { padding-bottom: 0; margin-bottom: -60px; }
    .cs-content { padding-bottom: 120px; }
}
/* 스크롤해도 좌측 메뉴는 그 자리에 붙어 있다.
   붙는 높이 = 헤더가 실제로 덮고 있는 높이(--sticky-top, partials/header.blade.php 가 재서 넣는다) + 여백.
   96px 로 두면 헤더 뒤로 들어가 남색 제목 바가 가려진다. */
.cs-side { border: 1px solid #e4e7ec; border-radius: 12px; overflow: hidden; position: sticky; top: calc(var(--sticky-top, 120px) + 16px); }
.cs-side-title { padding: 22px 20px; background: var(--color-primary, #1e2761); color: #fff; font-size: 18px; font-weight: 700; }
.cs-menu a { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; font-size: 14px; color: #3a3f47; border-bottom: 1px solid #f2f4f7; text-decoration: none; }
.cs-menu a:last-child { border-bottom: none; }
.cs-menu a:hover { background: #f9fafb; }
.cs-menu a.on { color: var(--color-primary); font-weight: 700; background: #eef0f9; }
.cs-content { min-width: 0; }

/* 본문 첫 줄(제목 · 검색 · 버튼)도 좌측 메뉴와 같은 높이에 붙는다.
   붙는 높이 = 헤더가 실제로 덮고 있는 높이(--sticky-top).
   여기서 위아래 16px 을 padding 으로 벌려 두면 붙었을 때 헤더와 붙어 답답하지 않고,
   그 자리를 margin 으로 되돌려서(위 -16, 아래 20-16=4) 가만히 있을 때의 여백은 그대로다.
   (.cs-title / .cs-header 은 어느 페이지나 margin-bottom:20px 로 통일돼 있다)
   뒤로 지나가는 목록이 비쳐 보이지 않도록 흰 배경만 깐다.
   구분선은 긋지 않는다. 목록마다 이미 자기 윗선(자주묻는질문의 남색 2px 등)이 있어서 선이 두 줄로 겹친다.
   좁은 화면은 헤더 높이가 달라 이 값이 맞지 않고 제목도 경로 줄이 대신하므로 붙이지 않는다. */
@media (min-width: 901px) {
    .cs-content > .cs-title,
    .cs-content > .cs-header {
        position: sticky;
        top: var(--sticky-top, 120px);
        z-index: 20;
        background: #fff;
        padding: 16px 0;
        margin: -16px 0 4px;
        /* 페이지마다 이 줄에 들어가는 게 달라서(제목만 / 제목+검색 / 제목+버튼)
           그냥 두면 붙는 줄의 높이가 페이지마다 달라진다. 여행후기 화면을 기준으로 맞춘다.
           72 = 입력칸·버튼 높이 40 + 위아래 padding 16*2.
           전역 리셋이 box-sizing:border-box 라 padding 까지 포함한 값을 적어야 한다. */
        display: flex;
        align-items: center;
        min-height: 72px;
    }
    /* 줄 안에 들어간 제목이 자기 margin 을 들고 오면(자주묻는질문의 margin-bottom:20px)
       그만큼 줄이 두꺼워진다. 줄의 높이는 위 규칙 하나로만 정해져야 한다. */
    .cs-content > .cs-header > .cs-title { margin: 0; }
}

/* 현재 위치 표시. 데스크톱에서는 좌측 .cs-side 가 그 역할을 하므로 감춰 둔다. */
.cs-breadcrumb { display: none; }
.cs-menu-icon { display: none; }

@media (max-width: 900px) {
    .cs-page { grid-template-columns: 1fr; gap: 18px; }

    /*
     * 좌측 메뉴는 기본적으로 접어 둔다.
     * (원래는 가로 배치였지만 .cs-side-title 이 flex:1 0 100% 로 한 줄을 다 먹어
     *  .cs-menu 폭이 0 이 되면서 링크가 실제로는 보이지 않았다.)
     * 경로 줄의 '고객센터' 버튼을 누르면 .is-open 이 붙어 펼쳐진다.
     */
    /* 펼칠 때 본문을 밀지 않도록 흐름에서 빼고 경로 줄 아래에 겹쳐 띄운다.
       top 은 스크립트가 경로 줄 위치를 재서 넣는다. */
    .cs-page { position: relative; }
    .cs-side {
        display: none;
        position: absolute;
        left: 0; right: 0;
        z-index: 60;
        margin: 0;
        background: #fff;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 12px 30px rgba(0, 0, 0, .16);
    }
    .cs-side.is-open { display: block; }

    /* 경로 줄 우측 햄버거 */
    .cs-menu-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: auto;
        width: 34px;
        height: 34px;
        flex-shrink: 0;
        border: 1px solid #e4e7ec;
        border-radius: 8px;
        background: #fff;
        color: #3a3f47;
        font-size: 15px;
        cursor: pointer;
    }
    .cs-menu-icon[aria-expanded="true"] { background: #f2f4f7; }

    /* 펼친 패널 맨 위에는 남색 '고객센터' 바를 그대로 둔다.
       패널이 어느 메뉴인지 알려 주는 머리 역할을 하고,
       마이페이지 메뉴와도 같은 모양이 된다. */
    .cs-side-title { display: block; flex: none; padding: 16px 20px; font-size: 16px; }

    .cs-menu { display: block; width: 100%; }
    .cs-menu a { border-bottom: 1px solid #f2f4f7; border-right: none; justify-content: space-between; }
    .cs-menu a:last-child { border-bottom: none; }

    /* '고객센터'는 경로 글자일 뿐이다. 메뉴 열기는 우측 햄버거가 맡는다. */
    .cs-breadcrumb-home {
        background: none;
        border: 0;
        padding: 0;
        font: inherit;
        color: inherit;
    }

    /*
     * 좁은 화면에서는 이 경로 줄이 제목 역할까지 한다.
     * 바로 아래 h1(.cs-title)과 같은 단어가 두 번 나오는 걸 없애려고
     * h1 은 시각적으로만 감춘다(아래 참고).
     */
    .cs-breadcrumb {
        display: flex;
        align-items: center;
        gap: 8px;
        /* .cs-page 가 grid + gap:18px 이라 이 요소도 그리드 아이템이다.
           여기에 margin-bottom 을 더 주면 갭과 겹쳐 아래가 과하게 벌어진다. */
        margin: 0;
        font-size: 18px;
        color: #9ca3af;
    }
    .cs-breadcrumb i { font-size: 13px; }
    .cs-breadcrumb strong { color: #1f2226; font-weight: 700; }

    /*
     * h1 은 지우지 않고 화면에서만 뺀다.
     * 이 페이지의 유일한 h1 이라 display:none 으로 없애면 스크린리더와
     * 검색엔진 쪽에서 제목이 통째로 사라진다.
     */
    .cs-title {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
        border: 0;
    }
}