@charset "UTF-8";
/*
    그룹 및 사용자 (bit/account/user)

    유형 → 상위그룹 → 세부그룹 → 사용자 4단 드릴다운.
    표 규격은 bit.css 의 `#content .form-tbl` 을 그대로 쓴다.
*/

/* ── 유형 : 상단 탭 + 롤 규칙 한 줄 ──────────────────────── */
.au-types{ margin-bottom:12px; }
.au-types__tabs{
    display:flex; flex-wrap:wrap; align-items:flex-end; gap:0;
    border-bottom:2px solid #e5e9ee;
}
.au-tab{
    appearance:none; cursor:pointer; font:inherit; font-size:13.5px; font-weight:600;
    display:inline-flex; align-items:center; gap:6px;
    color:#6b7480; background:none; border:none; border-bottom:2px solid transparent;
    padding:8px 16px; border-radius:0; margin-bottom:-2px;
    transition:color .15s, border-color .15s;
}
.au-tab:hover{ color:#1d1d1d; }
.au-tab.is-on{
    color:#047bb6; background:transparent;
    border-color:transparent; border-bottom:2px solid #047bb6;
}
.au-tab > i{
    font-style:normal; font-size:11px; font-weight:700;
    background:#eef1f5; color:#5b6472; border-radius:999px; padding:1px 6px;
}
.au-tab.is-on > i{ background:#dbeafe; color:#0a529d; }

/*
    이 유형에서 롤을 어떻게 주는지. 서비스관리자만 세부그룹이 롤을 따로 갖는데
    그 예외가 화면에 없어서 헷갈렸다. 탭 바로 아래에 고정해 둔다.
*/
.au-rule{
    margin:8px 0 0; padding:8px 12px; border-radius:6px;
    background:#f2f6fb; border-left:3px solid #b9c9dd;
    font-size:12.5px; color:#5b6673; line-height:1.5;
}
.au-rule.is-site{ background:#eef7f0; border-left-color:#7bb98f; color:#2f6b45; }
.au-rule b{ font-weight:700; }
.au-rule:empty{ display:none; }

/* ── 전체 배치 ───────────────────────────────────────────── */
.au-page{
    display:grid;
    grid-template-columns:260px 260px minmax(0, 1fr);
    /* 행을 컨테이너 높이만큼 채운다 → 컬럼(au-col)이 바닥까지 늘어나고
       그 안 au-list 가 남은 높이를 정확히 채운다(아래 여백 제거). */
    grid-template-rows:minmax(0, 1fr);
    gap:12px;
    align-items:stretch;          /* 세 패널 높이를 같게 */
    /* 뷰포트 높이에 맞춰 바닥과 일정한 여백을 남긴다.
       상단(헤더+breadcrumb+유형탭)이 고정이라 화면 비율이 바뀌어도 여백이 유지된다.
       넘치는 목록은 각 패널(.au-list) 안에서 스크롤된다. */
    height:calc(100vh - 360px);
    min-height:440px;
}
@media (max-width:1560px){
    .au-page{ grid-template-columns:220px 220px minmax(0, 1fr); }
}
@media (max-width:1240px){
    .au-page{ grid-template-columns:1fr 1fr; }
}

.au-col{
    display:flex; flex-direction:column;
    background:#fff; border:1px solid #d8e0ea; border-radius:8px;
    overflow:hidden; min-width:0;
}

/* ── 패널 머리 ───────────────────────────────────────────── */
.au-head{
    display:flex; align-items:center; justify-content:space-between; gap:8px;
    height:46px; flex:none; padding:0 10px 0 12px;
    background:#f4f7fa; border-bottom:2px solid #0a529d;
}
.au-head h2{
    margin:0; font-size:14px; font-weight:600; color:#1d1d1d;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.au-head__btns{ display:flex; gap:6px; flex:none; }
.au-cnt{
    display:inline-block; min-width:20px; margin-left:5px; padding:1px 6px;
    border-radius:999px; background:#dbe6f4; color:#0a529d;
    font-size:11.5px; font-weight:700; text-align:center;
}
.au-head .btn.small{
    height:28px; padding:0 10px; font-size:12.5px; font-weight:600;
    line-height:26px; border-radius:5px; white-space:nowrap; flex:none;
}
.au-head .btn.small:disabled{ opacity:.4; cursor:not-allowed; }

/* ── 검색줄 ──────────────────────────────────────────────── */
.au-filter{
    display:flex; gap:6px; flex:none; padding:8px 10px;
    border-bottom:1px solid #eaeff5;
}
.au-filter .form-control{ width:100%; height:32px; font-size:13px; }
.au-filter .search-box{ flex:1 1 auto; width:auto; min-width:0; height:32px; }
.au-filter .search-box .form-control{ width:100%; height:100%; border:none; padding:0 10px; }
.au-filter .search-box .search-btn{
    flex:none; display:flex; align-items:center; justify-content:center;
    width:32px; padding:0;
}
.au-filter .search-box .search-btn img{ display:block; }

/* ── 목록 ────────────────────────────────────────────────── */
/* SimpleBar wrapper 가 컬럼(au-col) 남은 높이를 채우고 스크롤을 갖는다.
   min-height:0 이라야 flex 안에서 바닥까지 늘어나고 넘칠 때만 스크롤된다. */
.au-list-scroll{ flex:1 1 auto; min-height:0; }
.au-list{
    list-style:none; margin:0; padding:0;
    /* 스크롤은 SimpleBar(.au-list-scroll)가 갖는다 — 안쪽 목록은 네이티브 스크롤 없음 */
    overflow:visible;
}
.au-list > li{ border-bottom:1px solid #eef2f7; }

.au-item{
    display:flex; align-items:center; gap:8px;
    width:100%; padding:8px 10px 8px 12px;
    border:0; background:none; cursor:pointer; position:relative;
    font:inherit; color:#1d1d1d; text-align:left;
}
.au-item:hover{ background:#f2f6fb; }
.au-item.is-on{ background:#e6effb; }
.au-item.is-on::before{
    content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:#0a529d;
}
.au-item.is-off{ opacity:.55; }

.au-item__wrap{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1 1 auto; }
.au-item__nm{
    display:flex; align-items:center; gap:5px;
    font-size:13.5px; font-weight:500; line-height:1.35;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.au-item.is-on .au-item__nm{ font-weight:700; color:#0a529d; }
.au-item__sub{
    display:flex; align-items:center; gap:5px; min-width:0;
    font-size:11.5px; color:#9aa5b2; line-height:1.3;
}
.au-item__id{ min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* 목록에 적는 롤 — 모달을 열지 않아도 무슨 권한인지 보인다 */
.au-rtag{
    flex:0 1 auto; min-width:0; max-width:60%;
    font-style:normal; font-weight:600; font-size:11px;
    background:#e6effb; color:#0a529d; border-radius:3px; padding:1px 5px;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.au-rtag.is-none{ background:#f6e9e7; color:#a5453a; }
/* 상속 : 자기 롤이 없고 상위와 같다 */
.au-rtag.is-inherit{ background:#eef1f5; color:#7b8593; }

/* 오른쪽 : 인원수 + 수정 (수정은 hover·선택 시에만 보인다) */
.au-item__side{ display:flex; align-items:center; gap:4px; flex:none; }
.au-item__cnt{
    min-width:22px; padding:1px 6px; border-radius:999px; text-align:center;
    background:#eef3fa; color:#5b6673; font-size:11px; font-weight:700;
}
.au-item.is-on .au-item__cnt{ background:#0a529d; color:#fff; }
.au-item .au-btn-mini{
    visibility:hidden; height:20px; padding:0 6px; font-size:11px; line-height:18px;
}
.au-item:hover .au-btn-mini,
.au-item.is-on .au-btn-mini{ visibility:visible; }

.au-empty{
    padding:40px 14px; text-align:center; color:#9aa5b2; font-size:13px; line-height:1.6;
}
.au-empty__sub{ display:block; margin-top:4px; font-size:12px; color:#b4bdc8; }

/* 배지 */
.au-org{
    flex:none; padding:1px 5px; border-radius:3px;
    background:#eef3fa; color:#7b8593; font-size:10.5px; font-weight:700;
}
.au-org.is-rep{ background:#e6effb; color:#0a529d; }

/* ── 우측 사용자 표 ──────────────────────────────────────── */
.au-tbl__scroll{ flex:1 1 auto; min-height:0; }

/* panel_fit.css 가 au-list/au-tbl__scroll 에 건 max-height(--panel-h, 짧은 화면 300px)·
   min-height(220px) 상한을 무효화한다. au-page 를 뷰포트 높이에 맞춰 flex 로 채우므로,
   목록은 컬럼 남은 높이를 그대로 채우고(아래 여백 최소) 넘칠 때만 스크롤한다. */
#content .au-list,
#content #auUserTableWrap .au-tbl__scroll,
#content .au-tbl__scroll{
    max-height:none !important;
    min-height:0 !important;
}
/* panel_fit 이 .au-list 에 건 네이티브 스크롤(overflow-y:auto)을 끈다 —
   스크롤은 SimpleBar wrapper(.au-list-scroll)가 갖는다.
   .au-tbl__scroll 은 자기 자신이 SimpleBar 호스트라 여기서 건드리지 않는다. */
#content .au-list{ overflow:visible !important; }

/* index.css 의 `.form-tbl table { overflow: hidden }` 을 되돌린다.
   표에 overflow 가 걸리면 표가 스크롤 컨테이너가 되어 sticky 머리글이 안 먹는다. */
#content .form-tbl#auUserTableWrap{ border:0; border-radius:0; flex:1 1 auto; min-height:0; }
#content .form-tbl#auUserTableWrap table{ overflow:visible; }
#content .form-tbl#auUserTableWrap tbody td.au-mid{ text-align:center; white-space:nowrap; }
/* 머리글 모서리 각지기(노치 제거)는 bit.css 의 카드형 목록 공통 규칙에서 처리한다. */

.au-btn-mini{
    height:24px; padding:0 9px; font-size:12px; font-weight:600; line-height:22px;
    border:1px solid #d8e0ea; border-radius:5px; background:#fff; color:#5b6673;
    cursor:pointer; vertical-align:middle;
}
.au-btn-mini + .au-btn-mini{ margin-left:3px; }

/* ── 모달 ────────────────────────────────────────────────── */
.au-modal{ position:fixed; inset:0; z-index:1200; display:flex; align-items:center; justify-content:center; }
.au-modal .modal__dim{ position:absolute; inset:0; background:rgba(16,32,56,.45); }
.au-modal .modal__box{
    position:relative; margin:0; width:min(820px, calc(100% - 32px));
    background:#fff; border-radius:8px; box-shadow:0 18px 48px rgba(16,32,56,.28);
    display:flex; flex-direction:column; max-height:86vh;
}
.au-modal .modal__head{
    display:flex; align-items:center; justify-content:space-between;
    height:48px; padding:0 16px; border-bottom:1px solid #eaeff5;
}
.au-modal .modal__head h3{ margin:0; font-size:16px; font-weight:600; }
.au-modal .modal__close{
    border:0; background:none; font-size:24px; line-height:1; cursor:pointer; color:#8a94a1;
}
/* 본문 영역은 회색 판, 그 안에 흰 박스(테두리) 하나. 박스 전체가 SimpleBar 로 스크롤 */
/* overflow:hidden 금지 — SimpleBar 가 스크롤바를 숨긴다. visible 이면 래퍼가 푸터를 덮는다 */
.au-modal .modal__body{
    padding:0; background:#fff;
    display:flex; flex-direction:column; overflow:clip;
    flex:1 1 auto; min-height:0;
}
/* 흰 배경 + 테두리 카드 하나. 모달과의 여백은 14px(margin), 내부 여백 16px. */
/* 섹션들을 14px 간격으로 세로 배치 */
.au-modal .au-mcard{
    flex:0 0 auto; min-height:0; margin:14px;
    background:#fff; border:1px solid #dfe6ef; border-radius:8px; overflow:visible;
    padding:20px 22px 24px;
    display:flex; flex-direction:column; gap:14px;
}
/* 섹션은 흰 카드 안의 구획 — 별도 테두리/배경 없음(이중 테두리 방지) */
.au-modal .section_content{
    background:transparent; border:0; border-radius:0; padding:0;
}
/* 중제목 : 파란색으로 잘 보이게 (ksh 커밋의 font-size:0 로 사라졌던 것 복구) */
.au-modal .section-title{
    margin:0 0 14px 0; padding-bottom:8px;
    border-bottom:1px solid #e5e7eb;
}
.au-modal .modal__foot{
    display:flex; justify-content:flex-end; gap:8px;
    padding:12px 16px; border-top:1px solid #eaeff5; background:#fff;
    position:relative; z-index:2;
}

/* 필드 : 라벨 위 · 인풋 아래. 필드 사이 14px 간격 */
.au-f{ display:block; margin:0 0 14px; }
.au-f:last-child{ margin-bottom:0; }
.au-f > span{ display:block; font-size:13px; font-weight:600; color:#5b6673; margin-bottom:6px; }
.au-f > span em{ color:#c0392b; font-style:normal; }
.au-f .form-control{ width:100%; height:38px; }
#auUserGroupRow{ display:grid; grid-template-columns:1fr 1fr; column-gap:16px; }
#auUserGroupRow .section-title{ grid-column:1 / -1; }
#auUserGroupRow .au-f{ margin-bottom:0; }
#auUserGroupRow .au-hint{ grid-column:1 / -1; margin:10px 0 0; }
#auUserGroupRow select.form-control[disabled]{
    border:1px solid #c6c6c6; border-radius:5px;
    padding:10px; height:38px; font-size:15px; font-weight:400;
    color:#8a94a1; background-color:#f1f3f6;
    background-image:url("/design/assets/images/select-arrow.png");
    background-repeat:no-repeat; background-position:right 5% center;
    appearance:none; -webkit-appearance:none; cursor:not-allowed;
}
.au-hint{ margin:-4px 0 14px; font-size:12.5px; color:#8a94a1; line-height:1.5; }
.au-hint:last-child{ margin-bottom:0; }

/* readonly / disabled 필드는 라우터 상세의 form-group-view 처럼 점선 밑줄 텍스트뷰로 표시.
   JS 변경 없이 속성만 걸어도 자동 전환된다. */
.au-modal .au-f input.form-control[readonly],
.au-modal .au-f input.form-control[disabled],
.au-modal .au-f select.form-control[disabled],
.au-modal .au-f textarea.form-control[readonly],
.au-modal .au-f textarea.form-control[disabled]{
    border:0; border-bottom:1px dashed #d9dee6; border-radius:0;
    background:transparent; box-shadow:none;
    height:auto; padding:6px 0; color:#1d1d1d; font-weight:500;
    cursor:default; appearance:none; -webkit-appearance:none;
}
.au-modal .au-f input.form-control[readonly]:focus,
.au-modal .au-f input.form-control[disabled]:focus,
.au-modal .au-f select.form-control[disabled]:focus,
.au-modal .au-f textarea.form-control[readonly]:focus,
.au-modal .au-f textarea.form-control[disabled]:focus{
    outline:none; border-bottom-color:#b9c3d0;
}

/* ── 그룹 모달 : 롤 고르기 ───────────────────────────────── */
.au-f > span > small{ margin-left:6px; font-weight:600; color:#8a94a1; font-size:11.5px; }
/* 롤 목록 : 스크롤은 바깥 래퍼(SimpleBar)가 맡는다.
   .au-roles(#auRoleBox) 는 drawRolePick() 이 .html() 로 통째로 갈아끼우는 대상이라
   여기에 SimpleBar 를 붙이면 렌더할 때마다 SimpleBar DOM 이 날아간다. */
.au-roles-scroll{
    max-height:190px;
    border:1px solid #dde5ee; border-radius:6px; padding:4px;
}
.au-role{
    display:flex; align-items:center; gap:8px;
    padding:6px 8px; border-radius:5px; cursor:pointer; font-size:13px; color:#3d4753;
}
.au-role:hover{ background:#f2f6fb; }
.au-role.is-on{ background:#e6effb; color:#0a529d; }
.au-role input{ flex:none; }
.au-role__nm{ flex:1 1 auto; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:500; }
.au-role.is-on .au-role__nm{ font-weight:700; }
.au-role__app{
    flex:none; padding:1px 5px; border-radius:3px;
    background:#eef3fa; color:#7b8593; font-size:10.5px; font-weight:700;
}
.au-role__cnt{
    flex:none; min-width:22px; text-align:center; padding:1px 6px; border-radius:999px;
    background:#eef3fa; color:#5b6673; font-size:10.5px; font-weight:700;
}

/* 고를 수 있는 범위 안내 (공용 롤만 / 고객사 롤 안에서) */
.au-rolehint{ display:block; margin-top:6px; font-size:12px; color:#8a94a1; line-height:1.5; }
.au-rolehint:empty{ display:none; }

/* 상위그룹 롤을 그대로 따라가는 그룹 — 고를 게 없어 안내만 보여준다 */
.au-inherit{
    margin:0; padding:12px 14px; border-radius:6px;
    background:#f2f6fb; color:#3d4753; font-size:13px; line-height:1.6;
}
.au-inherit b{ color:#0a529d; }
.au-inherit__roles{
    display:block; margin-top:8px; padding:8px 10px; border-radius:5px;
    background:#fff; border:1px solid #dde5ee; color:#0a529d; font-weight:600; font-size:12.5px;
}
.au-inherit__sub{ display:block; margin-top:8px; font-size:12px; color:#8a94a1; }

/* 세부그룹 칸의 자손 표시 (홍천QR > 홍천운수사 > 홍천운수사 처럼 3단인 곳) */
.au-dep{
    display:inline-block; flex:none; width:9px; height:9px; margin-right:5px;
    border-left:1px solid #c3cddb; border-bottom:1px solid #c3cddb;
    border-radius:0 0 0 2px; transform:translateY(-2px);
}