@charset "UTF-8";
/*
    좌우 패널형 화면의 높이 맞추기

    메뉴관리 · 그룹및사용자 · 롤관리 · 고객사정보 · 고객사담당 은
    표 화면과 달리 패널 안에 목록이 들어간다.
    그런데 목록에 높이 상한이 없어서 항목이 많아지면 패널이 그대로 늘어났고,
    본체(.content)가 height:calc(100vh - 64px) 로 잘려 있어서
    넘어간 부분은 스크롤도 안 되고 그냥 안 보였다.

    여기서 목록마다 상한을 주고 각자 스크롤하게 만든다.
    상한은 본체에서 상단 공통헤더 · 패널 머리 · 검색줄을 뺀 값이다.

      100vh
      - 64px   상단바
      - 80px   .content 위아래 패딩
      - 150px  breadcrumb + 패널형 페이지 헤더
      - 86px   패널 머리(46) + 검색줄(40)
      ≈ 100vh - 380px

    한 군데서 고칠 수 있게 --panel-h 로 뺐다.
    화면마다 조금씩 달라 필요한 곳만 따로 조정한다.
*/

:root{
    --panel-h: calc(100vh - 380px);
    --panel-h-min: 220px;
}

/* ── 목록 : 각자 스크롤 ─────────────────────────────────── */
#content .sm-tree,
#content .au-list,
#content .ar-list,
#content .ar-menu,
#content .cs-list,
#content .sk-list,
#content .cc-list{
    max-height: var(--panel-h);
    min-height: var(--panel-h-min);
    overflow-y: auto;
    overflow-x: hidden;
}

/* ── 우측 본문 : 같은 상한, 안에서 스크롤 ────────────────── */
#content .cs-body,
#content .sk-body,
#content .cc-body{
    max-height: var(--panel-h);
    min-height: var(--panel-h-min);
    overflow-y: auto;
}

/*
    고객사정보 좌측은 목록 + 계약 롤이 한 칸에 같이 들어간다.
    두 개가 상한을 각각 가지면 합쳐서 화면을 넘으므로 나눠 갖는다.
*/
#content .cs-col--site .cs-list{
    max-height: calc(var(--panel-h) - 150px);
    min-height: 160px;
}
#content .cs-rolelist{
    max-height: 150px;
    min-height: 60px;
    overflow-y: auto;
}

/* 그룹및사용자 우측 사용자 표도 같은 상한 안에서 스크롤한다 */
#content #auUserTableWrap .au-tbl__scroll,
#content .au-tbl__scroll{
    max-height: var(--panel-h);
    min-height: var(--panel-h-min);
    overflow-y: auto;
}

/*
    가로는 어떤 경우에도 본체를 넘지 않는다.
    패널 안의 넓은 것(표 · 카드줄)은 자기 안에서 가로 스크롤한다.
*/
#content .sm-page,
#content .au-page,
#content .ar-page,
#content .cs-page,
#content .sk-page,
#content .cc-page{
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

/* 화면이 낮을 때는 상한이 음수가 되지 않게 최소값이 이긴다 */
@media (max-height:760px){
    :root{ --panel-h: 300px; }
}