@charset "UTF-8";
/*
    롤 관리 (bit/account/role)
    좌측 롤 · 우측 메뉴 체크(BMS / ADM 탭).
    표 규격은 bit.css 의 `#content .form-tbl` 을 그대로 쓴다.
*/

.ar-page{
    display:grid;
    grid-template-columns:280px 260px minmax(0, 1fr);
    gap:12px;
    align-items:stretch;
}
@media (max-width:1400px){
    .ar-page{ grid-template-columns:240px 220px minmax(0, 1fr); }
}
@media (max-width:1100px){
    .ar-page{ grid-template-columns:1fr; }
}

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

/* 머리 */
.ar-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;
}
.ar-head h2{
    margin:0; font-size:14px; font-weight:600; color:#1d1d1d;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ar-head__btns{ display:flex; gap:6px; flex:none; }
.ar-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;
}
.ar-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;
}
.ar-head .btn.small:disabled{ opacity:.4; cursor:not-allowed; }

.ar-filter{ flex:none; padding:8px 10px; border-bottom:1px solid #eaeff5; }
.ar-filter .form-control{ width:100%; height:32px; font-size:13px; }
/* 검색창(아이콘 포함) — 기본 .search-box(400px/48px) 를 패널 폭에 맞게 재정의 */
.ar-filter .search-box{ width:auto; min-width:0; height:32px; }
.ar-filter .search-box .form-control{ width:100%; height:100%; border:none; padding:0 10px; }
.ar-filter .search-box .search-btn{
    flex:none; display:flex; align-items:center; justify-content:center;
    width:32px; padding:0;
}
.ar-filter .search-box .search-btn img{ display:block; }

/* 롤 목록 */
.ar-list{ list-style:none; margin:0; padding:0; flex:1 1 auto; overflow-y:auto; min-height:340px; }
.ar-list > li{ border-bottom:1px solid #eef2f7; }
.ar-item{
    display:flex; align-items:center; width:100%; padding:9px 10px 9px 12px;
    border:0; background:none; cursor:pointer; position:relative;
    font:inherit; color:#1d1d1d; text-align:left;
}
.ar-item:hover{ background:#f2f6fb; }
.ar-item.is-on{ background:#e6effb; }
.ar-item.is-on::before{
    content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:#0a529d;
}
.ar-item.is-off{ opacity:.55; }
.ar-item__wrap{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.ar-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;
}
.ar-item.is-on .ar-item__nm{ font-weight:700; color:#0a529d; }
.ar-item__sub{ font-size:11.5px; color:#9aa5b2; line-height:1.3; }

/* 오른쪽 수정·삭제 (hover · 선택 시에만 보인다) */
.ar-item__wrap{ flex:1 1 auto; }
.ar-item__side{ display:flex; align-items:center; gap:3px; flex:none; margin-left:auto; }
.ar-btn-mini{
    visibility:hidden; appearance:none; cursor:pointer; font:inherit;
    height:20px; padding:0 6px; font-size:11px; font-weight:600; line-height:18px;
    border:1px solid #d8e0ea; border-radius:5px; background:#fff; color:#5b6673;
}
.ar-item:hover .ar-btn-mini, .ar-item.is-on .ar-btn-mini{ visibility:visible; }

.ar-app{
    flex:none; padding:1px 5px; border-radius:3px;
    background:#eef3fa; color:#7b8593; font-size:10.5px; font-weight:700;
}
.ar-app--BMS{ background:#e6effb; color:#0a529d; }
.ar-app--BIT{ background:#e8f4ec; color:#1a7f4b; }

.ar-empty{ padding:40px 14px; text-align:center; color:#9aa5b2; font-size:13px; }

/* BMS / ADM 탭 */
.ar-tabs{
    display:flex; align-items:flex-end; gap:0; flex:none;
    padding:8px 12px 0; border-bottom:2px solid #e5e9ee; background:transparent;
}
.ar-tabs button{
    appearance:none; cursor:pointer; font:inherit; font-size:13.5px; font-weight:600;
    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;
}
.ar-tabs button:hover{ color:#1d1d1d; }
.ar-tabs button.is-on{
    color:#047bb6; background:transparent; border-color:transparent; border-bottom:2px solid #047bb6;
}
.ar-tabs__side{
    margin-left:auto; display:flex; align-items:center; gap:12px; padding-bottom:8px;
}
.ar-all{ display:flex; align-items:center; gap:5px; font-size:12.5px; color:#5b6673; cursor:pointer; }
.ar-all input{ width:15px; height:15px; accent-color:#0a529d; cursor:pointer; }
.ar-pick{ font-size:12.5px; color:#8a94a1; font-weight:600; }

/* ── 메뉴 : 대메뉴 카드 안에 하위를 격자로 ───────────────── */
.ar-menu{
    flex:1 1 auto; overflow-y:auto; min-height:340px;
    padding:12px; background:#f7f9fc;
    display:grid; gap:10px;
    grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));
    align-content:start;
    /* 스크롤바가 생기면서 폭이 줄면 카드 안 격자가 다시 접혀 높이가 어긋난다.
       자리를 늘 비워 두어 스크롤이 생겨도 폭이 안 바뀌게 한다. */
    scrollbar-gutter:stable;
}
.ar-menu > .ar-empty{ grid-column:1 / -1; margin:0; }

.ar-card{
    background:#fff; border:1px solid #dde5ee; border-radius:8px;
    align-self:start; min-width:0;
    /*
        overflow:hidden 을 두면 안 된다.
        칸 높이는 격자가 정하는데 그 계산이 실제 렌더와 한 줄이라도 어긋나면
        넘친 줄이 그냥 잘려서 사라진다 (버스 운영의 노선이탈 · 단말기가 안 보였다).
        머리의 둥근 모서리는 .ar-card__head 에서 직접 준다.
    */
}
.ar-card.is-on{ border-color:#a9c8ee; box-shadow:0 0 0 1px #dce8f8 inset; }

.ar-card__head{
    display:flex; align-items:center; gap:8px;
    padding:9px 12px; background:#f4f7fa; border-bottom:1px solid #e6ecf3;
    border-radius:7px 7px 0 0;      /* 카드에 overflow:hidden 이 없으니 여기서 깎는다 */
    cursor:pointer; user-select:none;
}
.ar-card.is-on .ar-card__head{ background:#e9f1fb; }
.ar-card__head.is-plain{ cursor:default; color:#8a94a1; }
.ar-card__nm{
    flex:1 1 auto; font-size:13.5px; font-weight:700; color:#1d1d1d;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ar-card.is-on .ar-card__nm{ color:#0a529d; }
.ar-card__cnt{
    flex:none; font-size:11px; font-weight:700; color:#5b6673;
    background:#dfe7f0; border-radius:999px; padding:1px 7px;
    font-variant-numeric:tabular-nums;
}
.ar-card.is-on .ar-card__cnt{ background:#0a529d; color:#fff; }

/*
    칸 수를 auto-fill 로 두면 카드 폭에 따라 2칸 · 3칸으로 갈리는데,
    그 폭이 격자 높이를 잡는 시점과 실제 그릴 때가 달라 줄 수가 어긋난다.
    2칸으로 고정하면 높이가 항목 수만으로 정해져 어긋날 일이 없다.
*/
.ar-card__body{
    display:grid; gap:2px; padding:6px;
    grid-template-columns:repeat(2, minmax(0, 1fr));
}
@media (max-width:1100px){
    .ar-card__body{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
}
.ar-leaf{
    display:flex; align-items:center; gap:7px; min-width:0;
    padding:6px 8px; border-radius:5px; cursor:pointer;
    font-size:13px; color:#3d4753; line-height:1.3;
}
.ar-leaf:hover{ background:#f2f6fb; }

/* 계약 밖인데 이미 담고 있어서 남겨 둔 메뉴 — 뗄 수는 있고 새로 붙일 수는 없다 */
.ar-leaf.is-out{ background:#fdf6ec; }
.ar-leaf.is-out > span{ color:#9a6b1f; }
.ar-out{
    flex:none; margin-left:5px; font-style:normal; font-weight:700; font-size:10px;
    background:#f6e2c0; color:#8a5a12; border-radius:3px; padding:0 4px;
}

/* 권한 상한 안내 (롤 이름 옆) */
.ar-scope{
    flex:1 1 auto; min-width:0; margin-left:8px;
    font-size:12px; color:#8a94a1; font-weight:500;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ar-leaf.is-on{ background:#e6effb; color:#0a529d; font-weight:600; }
.ar-leaf > span{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.ar-menu input[type=checkbox]{
    flex:none; width:15px; height:15px; accent-color:#0a529d; cursor:pointer; margin:0;
}

/* 모달 */
.ar-modal{ position:fixed; inset:0; z-index:1200; display:flex; align-items:center; justify-content:center; }
.ar-modal .modal__dim{ position:absolute; inset:0; background:rgba(16,32,56,.45); }
.ar-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:80vh;
}
.ar-modal .modal__head{
    display:flex; align-items:center; justify-content:space-between;
    height:48px; padding:0 16px; border-bottom:1px solid #eaeff5;
}
.ar-modal .modal__head h3{ margin:0; font-size:16px; font-weight:600; }
.ar-modal .modal__close{
    border:0; background:none; font-size:24px; line-height:1; cursor:pointer; color:#8a94a1;
}
/* 본문 영역은 회색 판, 그 안에 카드 여러 개를 14px 간격으로 배치 */
/* overflow:hidden 금지 — SimpleBar 가 스크롤바를 숨긴다. visible 이면 래퍼가 푸터를 덮는다 */
.ar-modal .modal__body{
    padding:0; background:#fff;
    display:flex; flex-direction:column; overflow:clip;
    flex:1 1 auto; min-height:0;
}
/* 래퍼는 카드를 14px 간격으로 쌓기만 한다. 모달과의 여백은 14px(margin). */
.ar-modal .ar-mcard{
    flex:0 0 auto; min-height:0; margin:14px;
    background:transparent; border:0; border-radius:0; overflow:visible;
    padding:0;
    display:flex; flex-direction:column; gap:14px;
}
/* section-title 하나가 카드 하나 (라우터 상세·이력 원격 모달과 같은 프레임) */
.ar-modal .section_content{
    background:#fff; border:1px solid #dfe6ef; border-radius:8px;
    padding:20px 22px;
}
/* 중제목 : 파란색으로 잘 보이게 (ksh 커밋의 font-size:0 로 사라졌던 것 복구) */
.ar-modal .section-title{
    margin:0 0 14px 0; padding-bottom:8px;
    border-bottom:1px solid #e5e7eb;
}
.ar-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 간격 */
.ar-f{ display:block; margin:0 0 14px; }
.ar-f:last-child{ margin-bottom:0; }
.ar-f > span{ display:block; font-size:13px; font-weight:600; color:#5b6673; margin-bottom:6px; }
.ar-f > span em{ color:#c0392b; font-style:normal; }
.ar-f .form-control{ width:100%; height:38px; }
.ar-hint{ margin:-4px 0 14px; font-size:12.5px; color:#8a94a1; line-height:1.5; }
.ar-hint:last-child{ margin-bottom:0; }

/* readonly / disabled 필드는 라우터 상세의 form-group-view 처럼 점선 밑줄 텍스트뷰로 표시.
   JS 변경 없이 속성만 걸어도 자동 전환된다. */
.ar-modal .ar-f input.form-control[readonly],
.ar-modal .ar-f input.form-control[disabled],
.ar-modal .ar-f select.form-control[disabled],
.ar-modal .ar-f textarea.form-control[readonly],
.ar-modal .ar-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;
}
.ar-modal .ar-f input.form-control[readonly]:focus,
.ar-modal .ar-f input.form-control[disabled]:focus,
.ar-modal .ar-f select.form-control[disabled]:focus,
.ar-modal .ar-f textarea.form-control[readonly]:focus,
.ar-modal .ar-f textarea.form-control[disabled]:focus{
    outline:none; border-bottom-color:#b9c3d0;
}

/* ── 가운데 : 롤 받은 그룹 ────────────────────────────────── */
.ar-glist > li{ border-bottom:1px solid #eef2f7; }
.ar-gitem{
    display:flex; align-items:center; gap:8px;
    padding:8px 10px 8px 12px; font-size:13px; color:#1d1d1d;
}
.ar-gitem.is-off{ opacity:.55; }
/* 상위그룹 자신이 아니라 아래 세부그룹이 받은 경우 표시 */
.ar-gvia{
    flex:none; margin-left:5px;
    font-style:normal; font-size:10.5px; font-weight:700;
    background:#eef3fa; color:#5b6673; border-radius:3px; padding:1px 5px;
}
.ar-goff{
    font-style:normal; font-size:10.5px; font-weight:700;
    background:#f1f3f6; color:#8a94a1; border-radius:3px; padding:1px 4px;
}

/* ── 소유 구분 (공용 / 고객사 전용) ────────────────────────── */
.ar-own{
    display:flex; flex:none; gap:0; padding:0 8px;
    background:#fff; border-bottom:1px solid #e6ecf3;
}
.ar-own__t{
    appearance:none; cursor:pointer; font:inherit; flex:1 1 0; min-width:0;
    display:flex; align-items:center; justify-content:center; gap:5px;
    height:34px; padding:0 6px; border:0; background:none;
    font-size:12.5px; font-weight:600; color:#8a94a1;
    border-bottom:2px solid transparent; white-space:nowrap;
}
.ar-own__t:hover{ color:#3d4753; }
.ar-own__t.is-on{ color:#0a529d; font-weight:700; border-bottom-color:#0a529d; }
.ar-own__t > i{
    font-style:normal; font-size:10.5px; font-weight:700;
    background:#eef3fa; color:#5b6673; border-radius:999px; padding:1px 6px;
    font-variant-numeric:tabular-nums;
}
.ar-own__t.is-on > i{ background:#0a529d; color:#fff; }

/* 목록 항목의 소유 배지 */
.ar-own__b{
    flex:none; font-size:10.5px; font-weight:700; border-radius:3px; padding:1px 5px;
    white-space:nowrap;
}
.ar-own__b.is-common{ background:#eef3fa; color:#5b6673; }
.ar-own__b.is-site{ background:#e9f5ec; color:#1f7a3d; }

/* ── SimpleBar : 목록·메뉴 스크롤을 wrapper 로 옮긴다 (customer/site 방식) ──
   panel_fit 이 .ar-list/.ar-menu 에 건 네이티브 스크롤·상한(--panel-h)을 무효화하고,
   그 상한을 SimpleBar wrapper(.ar-list-scroll/.ar-menu-scroll)로 옮겨 SimpleBar 가 스크롤을 갖게 한다.
   .ar-menu 의 격자·패딩·scrollbar-gutter 는 안쪽에 그대로 둔다. */
#content .ar-list,
#content .ar-menu{
    max-height:none !important; min-height:0 !important; overflow:visible !important;
}
#content .ar-list-scroll{
    max-height:var(--panel-h); min-height:var(--panel-h-min);
}
#content .ar-menu-scroll{
    flex:1 1 0; min-height:0; max-height:none;
    /* 회색 판을 wrapper 가 채운다 (내용이 짧아도 아래가 흰색으로 남지 않게) */
    background:#f7f9fc;
}