/* ============================================================================
   🎨 [CH²D TICKET SIDEBAR IDENTITY] 청취담 연한 회색 기반 프리미엄 사이드바 스킨
   ============================================================================ */
:root {
    /* 🪙 [요구사항 반영] 청취담 오피셜 티켓 크림 실버/연한 회색 메인 스케일 */
    --sidebar-bg: #EAEFEF;           /* 티켓 특유의 은은한 회록빛이 감도는 고급 연한 회색 */
    --sidebar-hover-bg: #D5DDDB;     /* 호버 시 부드럽게 감겨 들어오는 한 톤 어두운 회색 */
    --sidebar-footer-bg: #123C36;    /* 푸터 요약 칸은 티켓 상단 다크 에메랄드 그린으로 묵직하게 고정 */
    
    /* 🎯 텍스트 및 하이라이트 매이저 스케일 */
    --sidebar-text: #2C3E3B;         /* 가독성을 완벽하게 지켜줄 딥 에메랄드 차콜 텍스트 */
    --sidebar-text-hover: #123C36;   /* 호버 시 확실히 딥 그린으로 고정 */
    --sidebar-active-color: #C82433; /* 활성화 메뉴 지표선: 티켓 시그니처 브릭 크림슨 레드 */
    
    /* 보더 및 디자인 명세 유틸 */
    --sidebar-border: rgba(18, 60, 54, 0.08); /* 에메랄드 틴트가 들어간 섬세한 경계 테두리선 */
    --sidebar-width: 260px;
    --font-family: 'Pretendard', sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* 🍉 수박조각 아이콘 — 폰트 아이콘에 없는 모양이라 직접 만든다.
   색을 칠한 그림으로 두면 옆 아이콘들과 색이 따로 놀고 대표 zone 에서는 묻힌다.
   → 모양만 오려 내고(mask) 색은 currentColor 로 채운다.

   ⚠️ 폭 · 높이에 !important 가 붙은 이유
      대표 zone 의 .sidebar-role-body a.menu-item-boss > i 규칙이 width: auto 로 덮는다.
      폰트 아이콘은 글자라 auto 여도 그려지지만, 이 아이콘은 모양만 오려 낸 빈 상자여서
      폭이 없으면 흐려지는 게 아니라 통째로 사라진다. 실제로 그렇게 사라졌었다.
      크기는 이 아이콘의 성질이지 취향이 아니므로 양보하지 않는다.
   ⚠️ 데이터 주소에 빈칸을 남기지 말 것. 못 읽으면 마스크가 '모양 없음' 이 되어 역시 사라진다.
   ⚠️ mask 는 짧은 한 줄로 쓰면 안 먹는 브라우저가 있다. 하나씩 적는다.
   쓰는 법: app_services.icon 에 fa-melon-slice 라고 적으면 된다. */
i.fa-melon-slice::before,
i.fa-melon-slice::after { content: ''; }
i.fa-melon-slice {
    display: inline-block;
    width: 1.05em !important; height: 1.05em !important;
    vertical-align: -0.14em;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0,0,64,64'%3E%3Cpath%20fill-rule='evenodd'%20fill='%23000'%20d='M32,5L10,44C25,52,39,52,54,44ZM29.7,21a2.3,2.3%200%201,0%204.6,0a2.3,2.3%200%201,0%20-4.6,0zM23.2,32a2.3,2.3%200%201,0%204.6,0a2.3,2.3%200%201,0%20-4.6,0zM36.2,32a2.3,2.3%200%201,0%204.6,0a2.3,2.3%200%201,0%20-4.6,0z'/%3E%3Cpath%20fill='%23000'%20d='M8.6,48.4C25,57,39,57,55.4,48.4L57,53.4C39,62.5,25,62.5,7,53.4Z'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0,0,64,64'%3E%3Cpath%20fill-rule='evenodd'%20fill='%23000'%20d='M32,5L10,44C25,52,39,52,54,44ZM29.7,21a2.3,2.3%200%201,0%204.6,0a2.3,2.3%200%201,0%20-4.6,0zM23.2,32a2.3,2.3%200%201,0%204.6,0a2.3,2.3%200%201,0%20-4.6,0zM36.2,32a2.3,2.3%200%201,0%204.6,0a2.3,2.3%200%201,0%20-4.6,0z'/%3E%3Cpath%20fill='%23000'%20d='M8.6,48.4C25,57,39,57,55.4,48.4L57,53.4C39,62.5,25,62.5,7,53.4Z'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: contain;
            mask-size: contain;
}

/* ══════════════════════════════════════════════════════════════
   👻 화면 잔상 막기

   왜 생기나
     position: fixed 로 화면을 덮은 장식(수박주스 물결 등)이 계속 움직이면
     브라우저가 그 층을 따로 떼어 GPU 에 들고 있는다.
     페이지를 떠날 때 그 층을 제때 버리지 못하면
     다음 화면 위에 옛 그림이 그대로 남는다.

   어떻게 막나
     떠나기 직전에 html 에 표식을 달아 움직임과 합성 힌트를 한 번에 끈다.
     화면을 덮는 장식은 아예 숨긴다. 층이 사라지면 남을 것도 없다.
   ══════════════════════════════════════════════════════════════ */
html.ch2d-leaving *,
html.ch2d-leaving *::before,
html.ch2d-leaving *::after {
    animation: none !important;
    transition: none !important;
    will-change: auto !important;
}
html.ch2d-leaving .wz-juice,
html.ch2d-leaving #connectOverlay,
html.ch2d-leaving .shop-say,
html.ch2d-leaving .ch2d-sheet {
    display: none !important;
}
/* ⚠️ 예전에는 .co-screen 을 지웠는데 그런 이름은 없었다.
      실제 연결 화면은 #connectOverlay 이고, 그 안에 빨간 물결과 청취담 로고가 들어 있다.
      그래서 떠날 때 정리가 안 되어 다음 화면에 그 둘만 남았다. */

/* ══════════════════════════════════════════════════════════════
   ⚠️ height 가 아니라 min-height 다. 여기서 오래 헤맸다 (2026-08-11).

   height: 100vh 이면 body 가 화면 높이에 못 박히고, 본문 칸(.main 따위)은
   flex 자식이라 그 높이에 갇힌다. 내용은 상자 밖으로 흘러넘친다.
   그러면 본문 칸에 준 padding-bottom 이 「넘친 내용 뒤」 가 아니라
   「갇힌 상자의 안쪽 끝」 에 붙는다 — 화면 한참 위다.

   그래서 아래 여백을 아무리 줘도 마지막 카드가 플로팅 도크에 깔린 채
   더 굴러가지 않았다. 멤버 현황·조직도에서 실제로 그랬고,
   재 보니 body 900px · 문서 1579px 로 679px 이 상자 밖에 있었다.

   min-height 로 두면 body 가 내용만큼 자라고, 아래 여백이 비로소 내용 뒤에 놓인다.
   ⚠️ 화면 전체를 채워야 하는 화면(지도 따위)은 저마다 body{height:100%} 를
      따로 적어 두었으므로 이 줄에 영향받지 않는다.
   ⚠️ #sidebar 는 position:fixed 라 flex 흐름 밖이다 — 높이를 풀어도 안 흔들린다.
   ══════════════════════════════════════════════════════════════ */
body {
    font-family: var(--font-family);
    background-color: #F4F7FB;
    color: #333;
    display: flex;
    min-height: 100vh;
    overflow-x: hidden;
}

/* ══════════════════════════════════════════════════════════════
   ⚠️ body 를 flex 로 만든 것이 이 파일이니, 그 뒷감당도 여기서 한다.

   flex 자식은 기본이 min-width:auto 다 — 「안에 든 것보다 작아지지 않겠다」 는 뜻이다.
   그래서 본문에 넓은 표나 긴 글이 하나라도 있으면 본문 칸이 화면보다 넓어진다.
   위의 overflow-x:hidden 이 그 넘친 만큼을 잘라 내므로, 폰에서는
   「오른쪽이 잘려 보이는」 화면이 된다. 실제로 권한 관리 화면이 그랬다.

   min-width:0 을 주면 칸이 화면에 맞게 줄고, 넓은 것은 제 안에서 접히거나
   가로로 굴러간다. 잘리지 않는다.

   ⚠️ #sidebar 는 position:fixed 라 flex 흐름 밖에 있다 — 이 규칙에 걸리지 않는다.
      떠 있는 창(연결 화면 · 플로팅 도크)도 마찬가지다.
   ⚠️ 화면마다 본문 칸 이름이 .main · .main-content · .container 로 제각각이라
      한 장씩 고치면 빠뜨린다. 자식 모두에게 한 번에 준다.
   ══════════════════════════════════════════════════════════════ */
body > * { min-width: 0; }

/* --- 사이드바 메인 컨테이너 --- */
#sidebar {
    width: var(--sidebar-width);
    background: var(--sidebar-bg);
    color: var(--sidebar-text);
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--sidebar-border);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 10000;
    /* 모바일 브라우저 하단바가 사이드바를 가리지 않도록 dvh + safe-area 사용 */
    height: 100vh;
    height: 100dvh;
    padding-bottom: env(safe-area-inset-bottom, 0);
    box-shadow: 4px 0 25px rgba(18, 60, 54, 0.05);
    position: fixed;
    top: 0;
    left: 0;
    overflow: hidden;
}
/* 플로팅 도크가 사이드바를 시각적으로 가리는 좁은 뷰포트에서만 하단 여유 확보 */
@media (max-width: 1024px) {
    #sidebar {
        padding-bottom: calc(90px + env(safe-area-inset-bottom, 0)) !important;
    }
}
/* 사이드바 푸터는 항상 하단 고정 · 축소되거나 밀리지 않음 */
.sidebar-footer {
    flex-shrink: 0;
    position: relative;
    /* ⚠️ 대표 zone(.sidebar-boss-zone)이 z-index 20 이라, 5 로 두면 푸터가 그 아래 깔린다.
          그래서 알림 숫자표를 단추 바깥에 붙이면 그 판에 가려 윗부분이 잘렸다.
          푸터는 늘 맨 앞이어야 한다 — 여기에는 이름·알림·로그아웃이 있고,
          그 셋은 어떤 화면에서도 가려지면 안 된다. */
    z-index: 30;
}

/* --- 헤더 (로고 영역) --- */
.sidebar-header {
    padding: 18px 20px 4px !important;   /* 로고 위쪽 여백은 유지, 아래는 최소 */
    text-align: center;
    border-bottom: 0 !important;
}
.sidebar-header .logo img {
    height: 44px !important;
    padding: 3px !important;
}

.sidebar-header .logo {
    display: inline-block;
    transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.sidebar-header .logo:hover {
    transform: scale(1.06) rotate(-1deg); /* 청청적인 무드의 미세한 회전율 효과 인젝션 */
}

/* --- 메뉴 영역 --- */
.sidebar-menu {
    flex-grow: 1;
    padding: 24px 0;
    overflow-y: auto;
}

/* 스크롤바 정밀 커스텀 */
.sidebar-menu::-webkit-scrollbar { width: 4px; }
.sidebar-menu::-webkit-scrollbar-thumb { background: #B6C2C0; border-radius: 10px; }
.sidebar-menu::-webkit-scrollbar-track { background: transparent; }

/* 카테고리 디비전 캡션 */
.sidebar-menu .menu-category {
    font-size: 0.75rem;
    color: #718581;
    padding: 12px 25px 6px;
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: 1.2px;
}

/* 🚨 대표 전용 zone — flex 흐름 안 (PC 정상 동작 복원) */
.sidebar-menu {
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.sidebar-boss-zone {
    background: #C81F3B;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -6px 20px -6px rgba(200,31,59,0.35);
    flex-shrink: 0;
    display: flex; flex-direction: column;
    position: relative;
    z-index: 20;
}
/* 헤더 (버튼) — 항상 노출, 클릭 가능 */
.sidebar-boss-header {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 22px;
    background: transparent; border: 0;
    color: #FFFFFF;
    font-size: 0.85rem; font-weight: 900; letter-spacing: 0.06em;
    cursor: pointer; width: 100%;
    text-align: left;
    transition: background 0.15s;
    /* 모바일 터치 반응성 · 하이라이트 제거 */
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    -webkit-appearance: none;
    outline: none;
    position: relative;
    z-index: 22;
}
.sidebar-boss-header:hover { background: rgba(0,0,0,0.12); }
.sidebar-boss-header > i.fa-user-tie {
    color: #FFFFFF; font-size: 0.95rem; opacity: 0.95;
}
.sidebar-boss-header > span { flex: 1; }
.sidebar-boss-caret {
    font-size: 0.78rem;
    transition: transform 0.28s ease;
    opacity: 0.85;
}
.sidebar-boss-zone.is-open .sidebar-boss-caret {
    transform: rotate(180deg);
}
/* 본문 (항목 리스트) — pill 아래(정상 흐름) · 아코디언 하방 확장 */
.sidebar-role-body {
    max-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    transition: max-height 0.32s cubic-bezier(0.4, 0, 0.2, 1);
    scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.4) transparent;
    -webkit-overflow-scrolling: touch;
}
.sidebar-role-body::-webkit-scrollbar { width: 5px; }
.sidebar-role-body::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.94); border-radius: 3px; }
.sidebar-role-body::-webkit-scrollbar-track { background: transparent; }
.sidebar-boss-zone.is-open .sidebar-role-body {
    max-height: var(--boss-max-h, calc(100vh - 260px));
    padding-bottom: 12px;
}
/* 항목 첫 카테고리의 상단 구분선 제거 */
.sidebar-role-body > .menu-category-boss:first-child {
    border-top: 0;
    padding-top: 12px;
}

/* 🔥 boss body 내부 카테고리·링크는 기존 사이드바 메뉴와 동일 레이아웃 강제 */
.sidebar-role-body .menu-category-boss {
    display: block;
    padding: 18px 25px 8px;   /* 카테고리 라벨 위 여유 */
    color: #FFFFFF;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    background: transparent;
    border-top: 0 !important;   /* 카테고리 사이 구분선 제거 */
}
.sidebar-role-body a.menu-item-boss {
    display: flex;
    align-items: center;
    padding: 15px 25px;   /* 흰 메뉴와 동일 표준 여유 */
    color: #FFFFFF !important;
    text-decoration: none;
    font-size: 0.95rem;   /* 흰 메뉴와 동일 크기 */
    font-weight: 700;
    line-height: 1.25;
    background: transparent;
    border: 0 !important;
    box-shadow: none !important;
    width: 100%;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* ⚠️ 아이콘 폭을 auto 로 두면 글자마다 폭이 달라 메뉴 이름의 시작점이 들쭉날쭉해진다.
      (달 · 방패는 좁고, 사람 둘 · 막대그래프는 넓다)
      한 칸을 정해 두고 그 안에서 가운데로 두면 이름이 한 줄로 선다.
      수박 아이콘은 제 크기를 !important 로 지키므로 여기 폭에 영향받지 않는다 —
      대신 아래에서 같은 한 칸을 차지하도록 감싼다. */
.sidebar-role-body a.menu-item-boss > i {
    width: 22px;
    text-align: center;
    font-size: 1.05rem;   /* 흰 메뉴 아이콘과 동일 */
    margin-right: 10px;
    color: #FFFFFF !important;
    flex-shrink: 0;
}
/* 그림을 오려 만든 아이콘(수박)은 제 크기를 지켜야 해서 폭을 못 바꾼다.
   그러니 좌우 여백으로 22px 한 칸을 채워 다른 아이콘과 시작점을 맞춘다. */
.sidebar-role-body a.menu-item-boss > i.fa-melon-slice {
    margin-right: calc(10px + (22px - 1.05em) / 2);
    margin-left: calc((22px - 1.05em) / 2);
}
.sidebar-role-body a.menu-item-boss:hover {
    background: rgba(0,0,0,0.15);
}
.sidebar-role-body a.menu-item-boss.active {
    background: rgba(0,0,0,0.28);
    box-shadow: inset 4px 0 0 #FFFFFF !important;
    padding-left: 21px;   /* box-shadow 4px 보상 */
}
.sidebar-boss-zone .menu-category,
.sidebar-boss-zone .menu-category-boss {
    background: transparent;
    color: #FFFFFF !important;
    padding: 14px 25px 8px;
    letter-spacing: 1.5px;
    border-top: 1px solid rgba(255,255,255,0.18);
}
.sidebar-boss-zone > .menu-category:first-child {
    border-top: 0;  /* zone 최상단 카테고리는 구분선 없음 */
}
/* 링크: 좌측 transparent 보더 제거 → 흰 갭 없음 */
.sidebar-boss-zone a.menu-item-boss,
.sidebar-menu a.menu-item-boss {
    background: transparent;
    color: #FFFFFF !important;
    font-weight: 800;
    border-left: 0 !important;
    padding-left: 29px;  /* 기본 25 + 사라진 border 4 보상 */
}
.sidebar-boss-zone a.menu-item-boss i {
    color: #FFFFFF !important;
}
.sidebar-boss-zone a.menu-item-boss:hover {
    background: rgba(0,0,0,0.15);
    color: #FFFFFF !important;
}
.sidebar-boss-zone a.menu-item-boss.active {
    background: rgba(0,0,0,0.28);
    color: #FFFFFF !important;
    box-shadow: inset 4px 0 0 #FFFFFF;
}
.sidebar-boss-zone a.menu-item-boss.active i {
    color: #FFFFFF !important;
}

/* 개별 메뉴 링크 컴포넌트 */
.sidebar-menu a {
    display: flex;
    align-items: center;
    padding: 15px 25px;
    color: var(--sidebar-text);
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 600; /* 미디엄 볼드로 고급화 */
    transition: all 0.2s ease-in-out;
    border-left: 4px solid transparent; 
}

.sidebar-menu a:hover {
    background-color: var(--sidebar-hover-bg);
    color: var(--sidebar-text-hover);
}

/* ✨ [티켓 정체성 매핑] 활성화 탭 아키텍처 */
.sidebar-menu a.active {
    background-color: rgba(200, 36, 51, 0.06); /* 크림슨 브릭 레드 기반 초미세 연무 투명 배경 */
    color: var(--sidebar-active-color);
    border-left-color: var(--sidebar-active-color); /* 티켓 레드 라인 인디케이터 */
    font-weight: 800;
}

.sidebar-menu a i {
    width: auto;
    font-size: 1.05rem;
    margin-right: 10px;
    text-align: center;
    transition: transform 0.2s ease;
    color: #4A5E5B;
}

.sidebar-menu a:hover i {
    transform: scale(1.15);
    color: var(--sidebar-text-hover);
}

.sidebar-menu a.active i {
    color: var(--sidebar-active-color); /* 활성화 아이콘 브릭레드 스위칭 */
}

/* --- 푸터 (사용자 정보 및 로그아웃) --- */
.sidebar-footer {
    padding: 22px 20px;
    background-color: var(--sidebar-footer-bg); /* 다크 딥 그린 스킨 샌드 인젝션 */
    border-top: 1px solid rgba(255,255,255,0.05);
    flex: 0 0 auto;     /* 절대 축소되지 않음 → 항상 완전히 보임 */
}
/* 📐 sidebar 3단 flex 레이아웃: [header 고정] [menu 신축] [folders 고정] [footer 고정]
   menu 가 유일한 신축 영역이므로 폴더가 열리면 menu 만 줄어들고 footer 는 그대로 */
#sidebar #sidebarMenu.sidebar-menu {
    /* 유일한 신축 영역 — 공간이 부족하면 이 영역만 줄어든다.
       min-height 를 0 으로 둬야 폴더 그룹이 필요한 공간을 확보할 수 있음 */
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
}
#sidebar .sidebar-header {
    flex: 0 0 auto;
}

.user-info {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#userInfo {
    font-size: 0.85rem;
    color: #17493E;
    margin: 0;
    padding: 14px;
    background: rgba(255, 255, 255, 0.94);
    border-radius: 10px;
    text-align: center;
    line-height: 1.45;
    border: 1px solid rgba(255, 255, 255, 0.1);
    font-weight: 500;
}

#logoutLink,
#loginLink {
    display: block;
    width: 100%;
    padding: 13px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 800;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

#logoutLink {
    background-color: var(--sidebar-active-color); /* 브릭 크림슨 대입 */
    color: #fff;
    
}

#logoutLink:hover {
    background-color: #A91E2B;
    
    transform: translateY(-2px);
}

#loginLink {
    background-color: #1A544B;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

#loginLink:hover {
    background-color: #123C36;
    transform: translateY(-1px);
}

/* --- 모바일 사이드바 토글 해제 스위치 --- */
#sidebar-toggle {
    display: none;
    position: fixed;
    top: 15px;
    left: 15px;
    z-index: 10001;
    background: var(--sidebar-bg);
    color: var(--sidebar-text);
    border: 1px solid var(--sidebar-border);
    border-radius: 12px;
    width: 44px;
    height: 44px;
    cursor: pointer;
    font-size: 1.3rem;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(12, 38, 34, 0.08);
    transition: all 0.2s;
}

#sidebar-toggle:hover {
    background: var(--sidebar-hover-bg);
    color: var(--sidebar-text-hover);
}

/* --- 🌍 전역: 사이드바는 PC·모바일 공통 기본 숨김 (플로팅 도크 햄버거로만 호출) --- */
#sidebar {
    transform: translateX(-100%) !important;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    overflow: hidden !important;
}
#sidebar.active, #sidebar.open {
    transform: translateX(0) !important;
    box-shadow: 10px 0 40px rgba(12, 38, 34, 0.15);
}
/* 기존 사이드바 토글·햄버거 버튼은 전면 제거 (플로팅 도크로 대체) */
#sidebar-toggle,
#mobile-menu-btn,
.mobile-menu-btn,
#mobile-toggle,
.mobile-toggle,
button[aria-label="메뉴 열기"],
button[aria-label="사이드바 열기"] {
    display: none !important;
}
/* 페이지 상단 sticky 헤더 안에 남아있던 햄버거 자리 여백 축소 */
header.sticky button.fa-bars,
header .mobile-menu-btn + * { margin-left: 0 !important; }
/* 모든 페이지의 main-content margin-left 강제 해제 → 전체 폭 사용
   ⚠️ 이 규칙은 미디어 쿼리 밖에 있어 넓은 화면에서도 적용된다.
      여기에 .main 을 얹어 봤다가 되돌렸다 — 운영진 조직도가 넓은 화면에서
      사이드바 밑으로 파고들었다. 좁은 화면 몫은 아래 @media 안에서 따로 준다. */
.main-content {
    margin-left: 0 !important;
    width: 100% !important;
}
/* 본문 칸 이름이 화면마다 다르다 — 열 장은 .main-content 인데
   운영진 조직도(member_dashboard)만 .main 이라 위 규칙에서 빠져 있었다.
   ⚠️ 좁은 화면에서만 풀어 준다. 넓은 화면에서 풀면 왼쪽에 떠 있는
      사이드바(260px, position:fixed) 밑으로 글이 파고든다.
   ⚠️ 새 관리자 화면은 .main-content 로 이름을 맞추는 편이 낫다. */
@media (max-width: 1024px) {
    .main { margin-left: 0 !important; width: 100% !important; }
}
/* body { display: flex } + #sidebar-container { width: 260px } 조합으로 컨텐츠가 밀리는 이슈 방지
 *  → 사이드바는 position: fixed 로 이미 독립 렌더되므로 컨테이너 폭 0으로 잡아도 됨 */
#sidebar-container {
    width: 0 !important;
    flex-basis: 0 !important;
    border: 0 !important;
    background: transparent !important;
    height: auto !important;
}
/* 모바일 상단 여백 통합 정책
 *  - .main-content padding-top 0 → 상단 컬러 배너가 브라우저바 바로 아래까지 자연스럽게 이어짐
 *  - 컨텐츠 여유는 각 페이지의 header/first-child 내부 padding으로 처리 (dashboard-header 등)
 *  - 상단이 흰색인 페이지는 페이지별 첫 요소의 padding-top으로 여유 확보
 */
@media (max-width: 1024px) {
    .main-content,
    main.main-content,
    body > .main-content,
    body > main {
        padding-top: 0 !important;
    }
    body { padding-top: 0 !important; }
    /* 컬러 배너가 없는 (흰 배경으로 시작하는) 컨텐츠 컨테이너에는 최소 상단 여유 */
    .main-content > .centered-container:first-child,
    .main-content > .container:first-child {
        padding-top: 12px;
    }
}

/* --- 🎨 청취담 역할별 브랜드 컬러 시스템 --- */
:root {
    --role-boss: #111111;        /* 대표 · 블랙 */
    --role-boss-dark: #000000;
    --role-ops: #C81F3B;         /* 운영진 · 청취담 레드 */
    --role-ops-dark: #A81830;
    --role-staff: #17493E;       /* 스태프 · 청취담 그린 */
    --role-staff-dark: #0F322A;
    --role-member: #1E40AF;      /* 멤버 · 청취담 블루 (스태프↔멤버 색상 스왑) */
    --role-member-dark: #1E3A8A;
}

/* 🗂️ 역할별 폴더 그룹 wrapper — flex flow 안에서 footer 바로 위에 위치.
   flex-shrink:0 + 자체 max-height 로 footer 를 밀어내지 않음 */
.sidebar-role-folders-group {
    display: flex;
    flex-direction: column;
    /* 절대 축소되지 않음 → 폴더 헤더가 잘리는 일이 없음.
       동시 열림이 1개로 제한되므로 그룹 높이는 예측 가능한 범위에 머문다. */
    flex: 0 0 auto;
    position: relative;
    z-index: 18;
    overflow: visible;
}
.sidebar-role-folders-group::-webkit-scrollbar { width: 0; height: 0; }

/* 🗂️ 역할별 폴더 — 각 role 이 완전히 독립된 오브젝트 (스택 아코디언)
   구조: .sidebar-role-folder.role-{key} > .sidebar-folder-head + .sidebar-folder-body */
.sidebar-role-folder {
    margin: 0 8px;
    padding-top: 14px;
    padding-bottom: 14px;   /* 아래 폴더가 14px 덮어도 텍스트에 안 닿도록 여유 확보 */
    border-radius: 14px 14px 0 0;
    flex-shrink: 0;
    position: relative;
    box-shadow: 0 4px 12px -6px rgba(0,0,0,0.18);
    overflow: hidden;
}
/* 폴더가 닫혀있어도 padding-bottom 이 body 영역과 별개로 유지되어야 함 → body 자체 padding-top 0 유지 */
.sidebar-role-folder .sidebar-folder-body { padding-top: 0 !important; }
.sidebar-role-folder:first-of-type { margin-top: 6px; }

/* 🌀 layered pill — 겹침(-14px) ≥ 상단 라운드(14px) → 아래 폴더 상단 라운드 컷아웃이
   위 폴더 안으로 완전히 삽입되어 흰 틈이 시각적으로 존재하지 않음 */
.sidebar-role-folder + .sidebar-role-folder {
    margin-top: -14px;
}
/* z-index: 아래로 갈수록 위 → 대표(맨 아래)가 최상단 층 */
.sidebar-role-folder.role-staff { z-index: 15; }
.sidebar-role-folder.role-ops   { z-index: 16; }
.sidebar-role-folder.role-boss  { z-index: 17; }
.sidebar-role-folder.role-boss  { background: var(--role-boss); }
.sidebar-role-folder.role-ops   { background: var(--role-ops); }
.sidebar-role-folder.role-staff { background: var(--role-staff); }

/* 대표 폴더 — 그림자만 진하게 (골드 테두리 제거) */
.sidebar-role-folder.role-boss {
    box-shadow: 0 6px 16px -6px rgba(0,0,0,0.35);
}

.sidebar-folder-head {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 6px 18px;   /* 상하 패딩 최소화 */
    border: 0;
    background: transparent;
    color: #FFFFFF;
    font-size: 0.82rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    cursor: pointer;
    text-align: left;
    transition: background-color 0.15s ease;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    outline: none;
    line-height: 1;   /* 텍스트 baseline 정렬 안정화 */
}
.sidebar-folder-head:hover { background: rgba(0,0,0,0.12); }
/* 앞 아이콘 고정 너비 → 3개 폴더 텍스트 시작점 일렬 정렬 */
.sidebar-folder-head > i:first-child {
    font-size: 0.95rem;
    opacity: 0.95;
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}
.sidebar-folder-head > span {
    flex: 1;
    display: inline-block;
    line-height: 1;
}
.sidebar-folder-head .folder-caret {
    font-size: 0.7rem;
    opacity: 0.8;
    transition: transform 0.22s ease;
}
.sidebar-role-folder.is-open .sidebar-folder-head .folder-caret {
    transform: rotate(-180deg);
}

/* body — 접힘 · 확장 아코디언 */
.sidebar-folder-body {
    max-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    background: transparent;
    color: #FFFFFF;
    transition: max-height 0.32s cubic-bezier(0.4, 0, 0.2, 1),
                padding 0.32s cubic-bezier(0.4, 0, 0.2, 1);
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.4) transparent;
    -webkit-overflow-scrolling: touch;
    padding: 0;
}
.sidebar-role-folder.is-open .sidebar-folder-body {
    max-height: var(--boss-max-h, calc(100vh - 260px));
    padding: 0 0 12px;
}

/* body — 폴더 안, 활성 탭 바로 아래.
   폴더가 배경색을 가지므로 body 는 투명. accordion 은 max-height 로만 열림.
   overflow:hidden 이 폴더에 있으니 body 콘텐츠는 폴더 라운드 안에서만 그려짐 → 하나의 shape */
.sidebar-folder-body {
    max-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    background: transparent;
    color: #FFFFFF;
    transition: max-height 0.32s cubic-bezier(0.4, 0, 0.2, 1),
                padding 0.32s cubic-bezier(0.4, 0, 0.2, 1);
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.4) transparent;
    -webkit-overflow-scrolling: touch;
    padding: 0;
    position: relative;
    z-index: 1;
}
/* 열린 body 높이 — 동시 열림이 1개로 제한되므로 고정 상한으로 충분.
   내부 항목이 많으면 body 자체가 스크롤된다. */
.sidebar-role-folder.is-open .sidebar-folder-body {
    max-height: 42vh;
    padding: 0 0 12px;
}
.sidebar-folder-body::-webkit-scrollbar { width: 5px; }
.sidebar-folder-body::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.94); border-radius: 3px; }
.sidebar-folder-body::-webkit-scrollbar-track { background: transparent; }

/* body 가 비어있을 때 안내 */
.sidebar-role-folder.is-open .sidebar-folder-body:empty::before {
    content: '아직 지정된 메뉴가 없습니다';
    display: block;
    padding: 24px 25px;
    color: rgba(255,255,255,0.7);
    font-size: 0.75rem;
    font-weight: 600;
    text-align: center;
}

/* 하위 호환용 — 옛 컨테이너만 숨김. 폴더 body 는 .sidebar-role-body 클래스를
   호환 유지용으로 함께 가지고 있으니 셀렉터에서 제외 */
.sidebar-role-tabs,
.sidebar-role-bodies,
.sidebar-role-tab,
.sidebar-folder-body-src { display: none !important; }
.sidebar-role-body:not(.sidebar-folder-body) { display: none !important; }

/* 하위 호환용 — 기존 boss zone 스타일 완전 무력화 */
.sidebar-boss-zone,
.sidebar-ops-zone,
.sidebar-staff-zone { display: none !important; }

/* 각 zone 헤더 (버튼) · 대표와 동일 스타일 상속 */
.sidebar-ops-header,
.sidebar-staff-header {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 22px;
    background: transparent; border: 0;
    color: #FFFFFF;
    font-size: 0.85rem; font-weight: 900; letter-spacing: 0.06em;
    cursor: pointer; width: 100%;
    text-align: left;
    transition: background 0.15s;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    outline: none;
    position: relative;
    z-index: 22;
}
.sidebar-ops-header:hover,
.sidebar-staff-header:hover { background: rgba(0,0,0,0.15); }
.sidebar-ops-header > i,
.sidebar-staff-header > i { color: #FFFFFF; font-size: 0.95rem; opacity: 0.95; }
.sidebar-ops-header > span,
.sidebar-staff-header > span { flex: 1; }
.sidebar-ops-caret,
.sidebar-staff-caret { font-size: 0.78rem; transition: transform 0.28s ease; opacity: 0.85; }
.sidebar-ops-zone.is-open .sidebar-ops-caret,
.sidebar-staff-zone.is-open .sidebar-staff-caret { transform: rotate(180deg); }

/* 각 zone body */
.sidebar-ops-body,
.sidebar-staff-body {
    max-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    display: block;
    transition: max-height 0.32s cubic-bezier(0.4, 0, 0.2, 1);
    scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.4) transparent;
    -webkit-overflow-scrolling: touch;
}
.sidebar-ops-zone.is-open .sidebar-ops-body,
.sidebar-staff-zone.is-open .sidebar-staff-body {
    max-height: var(--boss-max-h, calc(100vh - 260px));
    padding-bottom: 12px;
}
/* 빈 zone body (메뉴 없을 때) 안내 */
.sidebar-ops-body:empty::before,
.sidebar-staff-body:empty::before {
    content: '아직 지정된 메뉴가 없습니다';
    display: block;
    padding: 20px 25px;
    color: rgba(255,255,255,0.7);
    font-size: 0.75rem;
    font-weight: 600;
    text-align: center;
}

/* --- 📱 모바일/태블릿 동기화 반응형 레이어 --- */
@media (max-width: 1024px) {

    /* 📱 모바일 전용: footer 를 flex flow 안에 유지 (한 줄 컴팩트).
       ⚠️ position:absolute 로 빼면 flow 에서 사라져 폴더 그룹이 footer 뒤로 밀림.
          #sidebar 의 padding-bottom(도크 여백)만으로 도크 위 배치가 이미 보장됨. */
    .sidebar-footer {
        position: relative !important;
        z-index: 30;    /* 역할 폴더(15/16/17) 및 그림자 위로 → 대표 그림자 안 받음 */
        background: var(--sidebar-bg, #FFFFFF) !important;
        border-top: 1px solid var(--sidebar-border, #E7EBEA);
        padding: 10px 14px !important;
    }
    /* 사이드바 하단 도크 자리는 순수 흰 배경만 남기기 (덮인 부분 처리) */
    #sidebar::after {
        content: '';
        position: absolute;
        left: 0; right: 0; bottom: 0;
        height: 90px;
        background: var(--sidebar-bg, #FFFFFF);
        z-index: 12;
    }
    /* 실명 박스 + 로그아웃 박스 두 개만 나란히 같은 크기 */
    .sidebar-footer .user-info {
        display: flex !important;
        flex-direction: row !important;
        align-items: stretch;
        gap: 8px !important;
    }
    /* 숨김 처리된 로그인 링크는 강제로 숨김 유지 */
    .sidebar-footer #loginLink[style*="display: none"],
    .sidebar-footer #loginLink[style*="display:none"] {
        display: none !important;
    }
    /* 두 박스 완전 동일 크기 · 얇게 · 원래 컬러 유지 */
    /* ⚠️ 알림 단추도 이 목록에 함께 둔다.
          한때 여기서 빠져 있었다. 그러자 그 단추만 width:100% 인 채로 남아
          같은 줄의 이름·로그아웃을 밀어붙였고, 셋 다 글자가 세로로 눌려 버렸다.
          가로 한 줄에 서는 것들은 반드시 같은 규칙을 함께 받아야 한다. */
    .sidebar-footer #userInfo,
    .sidebar-footer #userInfo.info-card-block,
    .sidebar-footer #noticeBell,
    .sidebar-footer #logoutLink,
    .sidebar-footer #logoutLink.action-gate-btn,
    .sidebar-footer #loginLink,
    .sidebar-footer #loginLink.action-gate-btn {
        flex: 1 1 0 !important;
        width: 0 !important;
        min-width: 0 !important;
        min-height: 36px !important;
        max-height: 40px !important;
        padding: 6px 10px !important;
        margin: 0 !important;
        font-size: 0.8rem !important;
        font-weight: 800 !important;
        text-align: center !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        line-height: 1 !important;
        border-radius: 10px !important;
        border: 0 !important;
        text-decoration: none !important;
        box-sizing: border-box !important;
        color: #FFFFFF !important;
        overflow: hidden !important;
    }
    /* ⚠️ 비율(flex-grow)로 나누지 않는다.
          이 자리에는 !important 가 겹겹이 걸려 있어, 같은 규칙을 줘도 어떤 칸은
          비율을 먹고 어떤 칸은 0 으로 계산되는 일이 실제로 있었다(로그아웃이 26px 로 눌렸다).
          싸움이 나는 자리에서는 「몫을 나눠 갖자」 보다 「이만큼 쓰자」 가 확실하다.
          → 알림·로그아웃은 너비를 못 박고, 남는 자리는 이름이 가진다.
       ⚠️ 알림은 종과 숫자만 있으면 뜻이 통하므로 좁아도 된다. 「알림」 글자는 감춘다. */
    /* ⚠️ 「늘어나서 남는 자리를 가져라」(flex-grow)는 이 자리에서 듣지 않는다.
          !important 가 겹겹이 걸려 있어 어떤 칸은 먹고 어떤 칸은 0 으로 계산됐다.
          그래서 늘어나기에 기대지 않고, 남는 너비를 직접 셈해서 준다.
          146px = 알림 52 + 로그아웃 78 + 칸 사이 틈 8×2
          ⚠️ 위의 두 너비를 고치면 이 146 도 함께 고쳐야 한다. 셋은 한 벌이다. */
    .sidebar-footer #userInfo,
    .sidebar-footer #userInfo.info-card-block {
        flex: 0 0 calc(100% - 146px) !important;
        width: calc(100% - 146px) !important;
        min-width: 0 !important;
    }
    .sidebar-footer #noticeBell {
        flex: 0 0 52px !important;
        width: 52px !important;
        min-width: 52px !important;
        background: var(--sidebar-btn-green, #2D4A43) !important;
        gap: 0 !important;
        padding: 6px 0 !important;
        position: relative !important;
        /* ⚠️ 바로 위 묶음이 셋 모두에게 overflow:hidden 을 걸어 둔다(이름이 길 때 잘라내려고).
              그 한 줄이 알림 숫자를 단추 안쪽으로 가두고 있었다 — 테두리 밖으로 나온 만큼
              깨끗이 잘려 나가니, 좌표를 아무리 밖으로 밀어도 화면에서는 안쪽에만 보였다.
              알림 단추는 「알림」 글자를 이미 감췄으므로 잘라낼 것이 없다. 도로 열어 준다. */
        overflow: visible !important;
    }
    .sidebar-footer #noticeBell > span:not(.bell-n) { display: none !important; }
    /* 바깥 테두리에 걸치게 — 푸터가 맨 앞(z-index 30)이라 이제 가리지 않는다 */
    .sidebar-footer #noticeBell .bell-n {
        position: absolute !important; top: -6px !important; right: -5px !important;
        font-size: 0.62rem !important; min-width: 17px !important; padding: 1px 4px !important;
    }
    .sidebar-footer #logoutLink,
    .sidebar-footer #logoutLink.action-gate-btn,
    .sidebar-footer #loginLink,
    .sidebar-footer #loginLink.action-gate-btn {
        flex: 0 0 78px !important;
        width: 78px !important;
        min-width: 78px !important;
    }
    /* 실명 박스 안 컨텐츠 (실명 + 상태 뱃지만) */
    .sidebar-footer #userInfo > div {
        flex-wrap: nowrap !important;
        gap: 6px !important;
        justify-content: center !important;
    }
    .sidebar-footer #userInfo > div > span:first-child {
        font-size: 0.82rem !important;
    }
    .sidebar-footer #userInfo .ch-fee-badge {
        font-size: 0.58rem !important;
        padding: 2px 7px !important;
    }
    /* 실명 박스 — 다크 그린 (원래 info-card-block 컬러) */
    .sidebar-footer #userInfo,
    .sidebar-footer #userInfo.info-card-block {
        background-color: var(--sidebar-btn-green, #123C36) !important;
        box-shadow: 0 4px 10px rgba(45, 74, 67, 0.15) !important;
    }
    /* 🎫 구독 등급이 정해지면 «단추 자체» 가 그 빛깔이 된다.
       ⚠️ 예전에는 다크 그린 단추 «안» 에 붉은 알약을 하나 더 그렸다. 한 자리에 빛깔이
          둘이라 어수선했고, 나란히 선 알림·로그아웃 단추와도 결이 어긋났다.
          등급 빛깔은 단추가 입고, 안에는 «글자만» 둔다.
       ⚠️ 이 자리에는 !important 가 겹겹이 걸려 있어(위의 배경색 규칙) 그냥 색을 주면 진다.
          등급이 정해졌다는 표(data-plan)를 달고, 그때만 이기게 한다. */
    .sidebar-footer #userInfo[data-plan],
    .sidebar-footer #userInfo.info-card-block[data-plan] {
        background-color: var(--plan-bg, #123C36) !important;
        padding: 0 !important;                 /* 안의 글자가 단추를 꽉 채우도록 */
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12) !important;
    }
    .sidebar-footer #userInfo[data-plan]:hover { filter: brightness(1.1); }
    /* 안쪽은 «글자만» — 알약 꼴(바탕·테두리·둥글기)을 모두 지운다 */
    .sidebar-footer #userInfo[data-plan] .ch-plan-btn {
        width: 100% !important; height: 100% !important;
        background: transparent !important;
        border: 0 !important; border-radius: inherit !important;
        padding: 6px 10px !important;
        box-shadow: none !important;
    }
    /* 로그아웃 박스 — 청취담 레드 (원래 action-gate-btn 컬러) */
    .sidebar-footer #logoutLink,
    .sidebar-footer #logoutLink.action-gate-btn,
    .sidebar-footer #loginLink,
    .sidebar-footer #loginLink.action-gate-btn {
        background-color: var(--sidebar-accent, #C81F3B) !important;
        box-shadow: 0 4px 10px rgba(200, 36, 51, 0.15) !important;
    }
    .sidebar-footer #userInfo:hover { background-color: #1F332E !important; }
    .sidebar-footer #logoutLink:hover,
    .sidebar-footer #loginLink:hover { background-color: #B31C2E !important; }
    /* 숨김 상태는 확실히 감춤 */
    .sidebar-footer #loginLink[style*="display: none"],
    .sidebar-footer #loginLink[style*="display:none"] {
        display: none !important;
    }
    /* 메뉴가 유일한 신축 영역 → 공간이 부족하면 이 영역만 줄어든다 */
    #sidebarMenu.sidebar-menu {
        flex: 1 1 0 !important;
        min-height: 0 !important;
        overflow-y: auto !important;
    }
    /* 모바일은 화면이 좁으니 열린 body 상한을 더 낮춘다 */
    .sidebar-role-folder.is-open .sidebar-folder-body {
        max-height: 34vh !important;
    }
}



/* ══════════════════════════════════════════════════════════
   🫥 사이드바는 덮개보다 «반드시» 위 — 어느 폭에서도

   덮개(.sidebar-overlay)는 진초록 반투명(rgba(12,38,34,.5))에 z-index 9998 이다.
   사이드바(#sidebar)는 10000 이라 원래는 그 위에 선다.

   ⚠️ 그런데 «자리값(position)» 이 화면마다 @media (max-width: 1024px) 안에만 적혀 있다.
      큰 화면에서는 그 규칙이 꺼지므로, 화면이 제 나름의 서식을 얹어 두었거나
      부모가 쌓임 맥락(stacking context)을 만들면 사이드바가 덮개 아래로 내려갈 수 있다.
      그러면 사이드바가 «초록빛으로 덮이고 눌러도 안 먹는다» — 실제로 그런 신고가 있었다.
   ⚠️ 여기(공용 서식)에서 폭과 상관없이 못 박아 둔다. 화면마다 고치면 또 한 곳을 빠뜨린다.
   ⚠️ position 을 주는 까닭 — z-index 는 «자리값이 있는» 요소에만 먹는다.
      화면이 좁을 때 스스로 position: fixed 를 주는 곳은 그쪽이 이긴다(나중에 적힌 것이 이긴다).
   ══════════════════════════════════════════════════════════ */
#sidebar-container {
    /* 자리값이 없으면 z-index 가 안 먹는다. 화면이 스스로 fixed 를 주는 곳은 그쪽이 이긴다 —
       그래야 좁은 화면의 «밀어서 열기»(left: -260px → 0)가 그대로 돈다. */
    position: relative;
    /* ⚠️ !important 가 «반드시» 필요하다.
          21개 화면이 미디어쿼리 «밖» 에서 #sidebar-container { z-index: 50 } 을 적어 두었다.
          화면 서식은 이 파일보다 늦게 실리므로, 힘이 같으면 그쪽이 이겨 50 이 된다.
          좁은 화면에서는 화면 제 @media 가 9999 로 올려 주어 괜찮았지만,
          넓은 화면에서는 그 규칙이 꺼져 50 에 머물렀다 — 덮개(9998) 아래로 깔린 것이다.
          그래서 사이드바가 «초록빛으로 덮이고 눌러도 안 먹었다». */
    /* ⚠️⚠️ 10001 로는 모자랐다  (2026-09-09, 대표 지시 「지금 다 고치자」)

          화면마다 «전체화면 판» 이 있다 — 상세 시간표(15000) · 평가 화면(25000) ·
          커넥트(63000) · 마이페이지(99999) 같은 것들이다. 그 위에서 도크의 ☰ 를
          누르면 사이드바가 판 «뒤» 로 열려, 눌러도 아무 일이 없는 것처럼 보인다.
          대표께서 면접관리 화면에서 그것을 겪으셨고, 훑어보니 같은 자리가 서른세
          화면에 있었다 — 사이드바가 «열려 있을 때만» 드러나는 일이라 여태 몰랐다.

          판을 낮추는 길은 못 쓴다. 화면마다 판 위에 서야 하는 창이 또 있어서,
          낮추면 이번엔 창이 판 밑으로 깔린다. 사이드바를 올리는 것이 유일한 길이다.

       ⚠️⚠️ 도크(2147483000)보다는 «아래» 다  (2026-09-09, 대표 지시
          「플로팅바가 최상단에 있어야 해」).
          한때 도크 위로 올렸더니 사이드바가 도크를 통째로 덮었다. 도크는 어느
          화면에서든 늘 보여야 하는 자리이고, 사이드바를 여는 단추(☰)도 거기
          있다 — 그것이 가려지면 열어 놓고 닫을 길이 없어진다.
          그래서 «판보다는 위, 도크보다는 아래» 한 칸에 세운다.
       ⚠️ 닫혀 있을 때는 화면 밖(left: -260px)이라 아무것도 안 가린다.
          층만 높을 뿐, 보이는 것은 열었을 때뿐이다. */
    z-index: 2147482900 !important;
}

/* 그릇 없이 #sidebar 를 바로 두는 화면도 있다 — 같은 층으로 올린다.
   ⚠️ 여기서도 !important 다. 화면 서식이 이 파일보다 늦게 실린다. */
#sidebar { z-index: 2147482900 !important; }

/* ══════════════════════════════════════════════════════════════════════════
   🖥 넓은 화면에서 «가운데로 모으기»  (2026-09-02, 대표 요청)

   무슨 일이 있었나
     청취담 화면은 폰(기준폭 412)에 맞춰 지었다. 그래서 안쪽 본문 상자에
     max-width 만 걸려 있고 «가운데로 밀어 주는 margin» 이 없다.
     폰에서는 화면이 그 폭이라 티가 안 나지만, 태블릿·PC 로 열면
     본문이 왼쪽 끝에 붙고 오른쪽이 통째로 빈다 —
     수박가게 · 멤버 권한 관리 · 조직도가 실제로 그렇게 보였다.

   무엇을 하나
     ① 본문 칸(.main-content · .main)의 «안여백» 을 벌려 1280 폭 안에서 놀게 한다.
        (바탕색 띠는 끝까지 가고, 안의 것만 모인다)
     ② 그 안의 «직계 자식» 에게 좌우 margin: auto 를 준다.
        max-width 가 걸린 상자는 가운데로 모이고, 폭을 꽉 채우는 상자는 그대로다
        (auto 는 남는 자리가 없으면 0 과 같다).

   ⚠️ 자식에 걸지 않으면 소용이 없다. 안여백만 벌리면 상자는 그 «왼쪽 끝» 에 설 뿐이다.
      실제로 수박가게가 그랬다 — 1280 안여백 규칙이 이미 있었는데도 왼쪽에 붙어 있었다.
   ⚠️ 자리를 스스로 잡는 것(붙박이 · 절대 자리 · 띄운 것)은 건드리지 않는다.
      auto margin 이 그런 것들의 자리를 흔들 수 있다.
   ⚠️ 화면이 스스로 가운데를 잡아 두었으면 그쪽이 이긴다 — 여기엔 !important 를 안 쓴다.
   ⚠️ 1024 아래(폰 · 작은 태블릿)에는 손대지 않는다. 지금 잘 보이고 있다.
   ══════════════════════════════════════════════════════════════════════════ */
/* ⓪ 본문 칸이 «가로를 다 쓰게» 한다 — 넓은 화면 쏠림의 진짜 뿌리였다.

   이 파일이 body 를 flex 로 만들어 두었다(위 99줄). flex 자식은 기본이
   flex:0 1 auto 라 «제 내용만큼만» 넓어진다. 그래서 본문 칸이 화면을 채우지 못하고
   왼쪽에 웅크린 채 오른쪽이 통째로 비었다 — 조직도가 1600 화면에서 698 뿐이었다.
   ⚠️ min-width:0 은 위에서 이미 주었다(넘침 방지). 여기서는 «늘어나게» 만 한다.
   ⚠️ #sidebar 는 position:fixed 라 이 흐름 밖이다 — 영향받지 않는다. */
body > .main,
body > .main-content,
body > main {
    flex: 1 1 auto;
}

/* ⓪-2 숨어 있는 사이드바 몫을 비워 두지 않는다.

   사이드바는 언제나 «떠서 덮는» 창이다(position:fixed · 평소엔 화면 밖).
   그런데 몇몇 화면이 넓은 화면에서 margin-left:260px 로 그 자리를 비워 두었다.
   비워 둔 260px 만큼 본문이 오른쪽으로 밀려 가운데가 어긋났다.
   ⚠️ .main-content 는 이 파일이 이미 위에서 0 으로 풀어 두었다(540줄).
      이름만 다른 .main 도 같이 풀어 준다 — 둘은 같은 것이다. */
@media (min-width: 1025px) {
    body > .main { margin-left: 0 !important; }
}

/* 🚪 이 화면은 «건드리지 말라» 고 말하는 문 (2026-09-02, 대표 요청)

   화면 하나하나가 저마다 그림이 있다. 가운데로 모으는 것이 대개 낫지만,
   가로를 꽉 써야 제 맛인 화면도 있다 — 메인 화면이 그렇다.
   그런 화면은 <body class="ch2d-wide"> 한 줄로 여기서 빠진다.
   ⚠️ 서식을 화면마다 베껴 두지 않는다. 「빠진다」 는 뜻만 한 곳에서 읽는다. */
@media (min-width: 1024px) {
    /* ① 본문을 1280 폭 안으로 */
    body:not(.ch2d-wide) .main-content,
    body:not(.ch2d-wide) main.main-content {
        padding-left:  max(20px, calc((100% - 1280px) / 2));
        padding-right: max(20px, calc((100% - 1280px) / 2));
    }
    /* ② 그 안의 상자를 가운데로 — max-width 가 걸린 것만 실제로 움직인다 */
    body:not(.ch2d-wide) .main-content > div,
    body:not(.ch2d-wide) .main-content > section,
    body:not(.ch2d-wide) .main-content > header,
    body:not(.ch2d-wide) .main-content > article,
    body:not(.ch2d-wide) .main-content > form,
    body:not(.ch2d-wide) .main-content > table,
    body:not(.ch2d-wide) .main-content > ul,
    body:not(.ch2d-wide) .main-content > ol,
    body:not(.ch2d-wide) .main > div,
    body:not(.ch2d-wide) .main > section,
    body:not(.ch2d-wide) .main > header,
    body:not(.ch2d-wide) .main > article,
    body:not(.ch2d-wide) .main > form,
    body:not(.ch2d-wide) .main > table {
        margin-left: auto;
        margin-right: auto;
    }
    /* 자리를 스스로 잡는 것들은 그대로 둔다 */
    .main-content > [style*="position:fixed"],
    .main-content > [style*="position: fixed"],
    .main-content > [style*="position:absolute"],
    .main-content > [style*="position: absolute"] {
        margin-left: 0;
        margin-right: 0;
    }
}

/* ══════════════════════════════════════════════════════════
   🎫 면접 대기실 — 옆 메뉴 맨 위, 청취담 그린

   면접을 기다리는 동안만 선다. 이분이 옆 메뉴에서 볼 것은 이것 하나뿐이라,
   가장 먼저 눈에 들어와야 한다.
   ⚠️ 합격하면 서버가 「면접 중 아님」 이라 답하고 이 줄은 안 그려진다 —
      서식으로 감추는 것이 아니라 아예 안 만든다.
   ══════════════════════════════════════════════════════════ */
#sidebarMenu a.ch2d-interview-wait {
    display: flex; align-items: center; gap: 10px;
    margin: 4px 0 10px; padding: 12px 14px;
    background: #17493E; color: #FFFFFF !important;
    border-radius: 12px; font-weight: 900;
    box-shadow: 0 2px 10px rgba(23, 73, 62, .28);
}
#sidebarMenu a.ch2d-interview-wait:hover { background: #0F322A; }
#sidebarMenu a.ch2d-interview-wait > i {
    width: 20px; text-align: center; font-size: 1rem; color: #FFFFFF;
}
#sidebarMenu a.ch2d-interview-wait .iw-tx {
    display: flex; flex-direction: column; line-height: 1.25; min-width: 0;
}
#sidebarMenu a.ch2d-interview-wait .iw-tx b { font-size: 0.88rem; font-weight: 900; }
#sidebarMenu a.ch2d-interview-wait .iw-tx small {
    font-size: 0.68rem; font-weight: 700; opacity: .78; margin-top: 1px;
}

/* ══════════════════════════════════════════════════════════════════════════
   🧷 넓은 화면(≥1025px)에서도 아래 단추 셋은 «가로 한 줄»  (2026-09-08, 대표 지적)

   가로 한 줄 규칙은 @media (max-width: 1024px) 안에만 있었다. 그래서 데스크톱
   에서는 이름 · 알림 · 로그아웃이 세로로 쌓였고, 노트북처럼 세로가 짧은 화면
   에서는 맨 아래 로그아웃이 화면 밖으로 잘려 나갔다 — 사이드바에서 나갈 길이
   사라진 셈이다. 푸터는 flex-shrink: 0 이라 안 줄어드는데, 그 성질이 세로로
   쌓이는 순간 오히려 화면을 뚫고 나가게 만든다.

   ⚠️⚠️ «새 규칙을 만들지 않는다». 한 번 그렇게 해 봤다가 더 나빠졌다 —
      .sidebar-footer .user-info > * (0,2,0) 가 뒤에 오는 #userInfo · #logoutLink
      (1,0,0) 를 못 이겨서, width:100% 가 살아남은 채 크기만 뒤엉켰다.
      이 자리에는 !important 가 겹겹이 걸려 있다. 이길 수 있는 것은 «이미 이기고
      있는 규칙» 뿐이라, 좁은 화면 규칙을 글자 그대로 옮겨 왔다.
   ⚠️ 그러니 이 묶음과 위의 @media (max-width: 1024px) 묶음은 «한 벌» 이다.
      한쪽을 고치면 반드시 다른 쪽도 같이 고칠 것. 특히 146 = 52 + 78 + 8×2 셈.
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1025px) {
    /* ⚠️⚠️ 감춰 둔 단추를 «되살리지» 않게 먼저 못을 박는다.

       아래 묶음이 셋에게 display: flex !important 를 건다. 그런데 로그인 ·
       로그아웃 단추는 뼈대에 style="display: none" 이 «인라인으로» 박혀 있고,
       인라인은 !important 앞에서는 진다 — 그래서 로그인한 분의 사이드바에
       「로그인 / 가입하기」 단추가 되살아나 넷이 서 있었다.

       좁은 화면 묶음에는 이 빗장이 이미 있었는데(로그인만), 넓은 화면으로
       옮겨 오면서 이 세 줄을 빠뜨렸다. 로그아웃도 같은 처지라 함께 건다.
       ⚠️ 「감춰 두라고 적힌 것은 감춘 채로 둔다」 — 이 자리의 규칙이다. */
    .sidebar-footer #loginLink[style*="display: none"],
    .sidebar-footer #loginLink[style*="display:none"],
    .sidebar-footer #logoutLink[style*="display: none"],
    .sidebar-footer #logoutLink[style*="display:none"] {
        display: none !important;
    }
    .sidebar-footer .user-info {
        display: flex !important;
        flex-direction: row !important;
        align-items: stretch;
        gap: 8px !important;
    }
    .sidebar-footer #userInfo,
    .sidebar-footer #userInfo.info-card-block,
    .sidebar-footer #noticeBell,
    .sidebar-footer #logoutLink,
    .sidebar-footer #logoutLink.action-gate-btn,
    .sidebar-footer #loginLink,
    .sidebar-footer #loginLink.action-gate-btn {
        min-height: 38px !important;
        max-height: 42px !important;
        padding: 6px 10px !important;
        margin: 0 !important;
        font-size: 0.82rem !important;
        font-weight: 800 !important;
        text-align: center !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        line-height: 1 !important;
        border-radius: 10px !important;
        border: 0 !important;
        text-decoration: none !important;
        box-sizing: border-box !important;
        color: #FFFFFF !important;
        overflow: hidden !important;
    }
    /* 146px = 알림 52 + 로그아웃 78 + 칸 사이 틈 8×2 */
    .sidebar-footer #userInfo,
    .sidebar-footer #userInfo.info-card-block {
        flex: 0 0 calc(100% - 146px) !important;
        width: calc(100% - 146px) !important;
        min-width: 0 !important;
        background-color: var(--sidebar-btn-green, #123C36) !important;
    }
    .sidebar-footer #noticeBell {
        flex: 0 0 52px !important;
        width: 52px !important;
        min-width: 52px !important;
        background: var(--sidebar-btn-green, #2D4A43) !important;
        gap: 0 !important;
        padding: 6px 0 !important;
        position: relative !important;
        overflow: visible !important;   /* 숫자표가 테 밖으로 나올 자리 */
    }
    /* 「알림」 글자는 감춘다 — 52px 안에 종과 숫자만 있으면 뜻이 통한다 */
    .sidebar-footer #noticeBell > span:not(.bell-n) { display: none !important; }
    .sidebar-footer #noticeBell .bell-n {
        position: absolute !important; top: -6px !important; right: -5px !important;
        font-size: 0.62rem !important; min-width: 17px !important; padding: 1px 4px !important;
    }
    .sidebar-footer #logoutLink,
    .sidebar-footer #logoutLink.action-gate-btn,
    .sidebar-footer #loginLink,
    .sidebar-footer #loginLink.action-gate-btn {
        flex: 0 0 78px !important;
        width: 78px !important;
        min-width: 78px !important;
    }
    /* 이름 칸 안 — 실명과 등급 배지만 한 줄로 */
    .sidebar-footer #userInfo > div {
        flex-wrap: nowrap !important;
        gap: 6px !important;
        justify-content: center !important;
    }
    .sidebar-footer #userInfo > div > span:first-child { font-size: 0.82rem !important; }
    .sidebar-footer #userInfo .ch-fee-badge { font-size: 0.58rem !important; padding: 2px 7px !important; }
    /* 한 줄이 되었으니 푸터도 그만큼 얇게 */
    .sidebar-footer { padding: 12px 16px !important; }
}