@charset "UTF-8";
/* 고객사 관리 > 사이트 관리 (bit/customer/site) */

.cs-page{
    display:grid; grid-template-columns:300px minmax(0,1fr); gap:12px; align-items:stretch;
}
@media (max-width:1100px){ .cs-page{ grid-template-columns:1fr; } }

.cs-col{
    display:flex; flex-direction:column;
    background:#fff; border:1px solid #d8e0ea; border-radius:8px; overflow:hidden; min-width:0;
}
.cs-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;
}
.cs-head h2{ margin:0; font-size:14px; font-weight:600;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cs-head__btns{ display:flex; gap:6px; flex:none; }
.cs-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;
}
.cs-head .btn.small, .cs-addrow .btn.small, .cs-sec .btn.small,
.cs-auth__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;
}
.cs-head .btn.small:disabled,
.cs-auth__head .btn.small:disabled{ opacity:.4; cursor:not-allowed; }

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

/* 좌측 목록 */
.cs-list-scroll{ flex:1 1 auto; min-height:0; }
.cs-list{ list-style:none; margin:0; padding:0; }
.cs-list > li{ border-bottom:1px solid #eef2f7; }
.cs-item{
    display:flex; align-items:center; gap:8px; padding:9px 10px 9px 12px;
    cursor:pointer; position:relative;
}
.cs-item:hover{ background:#f2f6fb; }
.cs-item.is-on{ background:#e6effb; }
.cs-item.is-on::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:#0a529d; }
.cs-item__wrap{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1 1 auto; }
.cs-item__nm{
    display:flex; align-items:center; gap:5px; font-size:13.5px; font-weight:500;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.cs-item.is-on .cs-item__nm{ font-weight:700; color:#0a529d; }
.cs-item__sub{ font-size:11.5px; color:#9aa5b2; }
/* 고객사 유형 뱃지 — 고객사 담당의 .cc-tp 와 같은 모양 */
.cs-tp{
    flex:none; padding:1px 5px; border-radius:3px;
    background:#eef3fa; color:#7b8593; font-size:10.5px; font-weight:700;
}
.cs-item__cnt{
    flex:none; min-width:22px; text-align:center; padding:1px 6px; border-radius:999px;
    background:#eef3fa; color:#5b6673; font-size:11px; font-weight:700;
}
.cs-item.is-on .cs-item__cnt{ background:#0a529d; color:#fff; }

.cs-empty{ padding:44px 14px; margin:0; text-align:center; color:#9aa5b2; font-size:13px; }

/* 우측 */
.cs-body-scroll{ flex:1 1 auto; min-height:0; background:#f7f9fc; }
.cs-body{ padding:14px; min-height:100%; box-sizing:border-box; }

.cs-sum{ display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:10px; margin-bottom:14px; }
.cs-card{
    background:#fff; border:1px solid #dde5ee; border-radius:8px;
    padding:12px; display:flex; flex-direction:column; gap:3px; align-items:center;
}
.cs-card__n{ font-size:21px; font-weight:700; color:#0a529d; font-variant-numeric:tabular-nums; }
.cs-card__l{ font-size:12px; color:#8a94a1; }

.cs-sec{ background:#fff; border:1px solid #dde5ee; border-radius:8px; padding:12px 14px; margin-bottom:12px; }
.cs-sec h3{
    display:flex; align-items:center; gap:8px; margin:0 0 10px;
    font-size:13.5px; font-weight:700; color:#1d1d1d;
}
.cs-sec__cnt{
    padding:1px 7px; border-radius:999px; background:#eef3fa; color:#5b6673;
    font-size:11px; font-weight:700; font-variant-numeric:tabular-nums;
}
.cs-sec h3 .btn{ margin-left:auto; }

.cs-chips{ display:flex; flex-wrap:wrap; gap:6px; }
.cs-chip{
    display:inline-flex; align-items:center; gap:6px;
    padding:5px 8px 5px 10px; border-radius:999px;
    background:#e6effb; color:#0a529d; font-size:12.5px; font-weight:600;
}
.cs-chip b{ font-size:10.5px; font-weight:700; background:#0a529d; color:#fff;
    padding:1px 6px; border-radius:999px; }
.cs-chip--plain{ background:#eef3fa; color:#5b6673; }
.cs-chip__n{ background:#5b6673 !important; }
.cs-chip button{
    appearance:none; border:0; background:none; cursor:pointer;
    color:#7ba3d6; font-size:12px; line-height:1; padding:0 2px;
}
.cs-none{ font-size:12.5px; color:#9aa5b2; }

.cs-addrow{ display:flex; gap:6px; margin-top:10px; }
.cs-addrow .form-control{
    flex:1 1 auto; box-sizing:border-box;
    height:32px; padding:4px 8px; line-height:1.4;
    font-size:12.5px;
}

/* 계약 롤 — 이름만 (메뉴 단위는 안 보여준다) */
.cs-rolechip{
    display:inline-block; margin:0 5px 5px 0; padding:4px 10px;
    border-radius:999px; background:#e6effb; color:#0a529d;
    font-size:12.5px; font-weight:700;
}
.cs-rolehint{ margin:4px 0 0; font-size:11.5px; color:#8a94a1; line-height:1.5; }
.cs-rolehint b{ color:#5b6673; }

/* 모달 */
/* 개폐는 공통 모달 방식(.active) 을 쓴다. .modal.active{display:flex} 대신 block 으로 덮어
   기존 배치(dim absolute + .modal__box margin:4vh auto)를 그대로 유지한다. */
.cs-modal{ position:fixed; inset:0; z-index:1200; display:none; }
.cs-modal.active{ display:block; }
.cs-modal .modal__dim{ position:absolute; inset:0; background:rgba(16,32,56,.45); }
.cs-modal .modal__box{
    /* 지도 · 부가정보 · 롤이 다 들어가서 넓게 쓴다 */
    position:relative; margin:4vh auto 0; width:min(1020px, 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;
}
/* 헤더 · 닫기(×) · 푸터는 공통 모달 스킨(modal_skin.css / .modal__box.mskin)이 담당한다.
   헤더 아이콘도 MAIN.applyModalIcon() 이 좌측 메뉴 아이콘을 --mskin-ico 로 넣어준다. */
/* 본문 영역 안의 흰 테두리 박스는 공통 .mskin .modal__card 를 쓴다.
   박스가 1개뿐이므로 MAIN.applyModalBodyScroll() 이 박스에 SimpleBar 를 붙인다(테두리 안 스크롤). */
.cs-modal .modal__body{
    padding:0; background:#fff;
    display:flex; flex-direction:column; overflow:hidden;
    flex:1 1 auto; min-height:0;
}
/* 테두리·여백·높이·스크롤은 공통(.mskin .modal__card)이 잡는다. 안쪽 여백만 지정.
   padding 은 카드에 그대로 둔다 — SimpleBar 가 컨테이너의 padding 을 읽어
   .simplebar-content 에 인라인으로 옮겨주므로 스크롤 영역 안쪽 여백이 된다.
   (카드를 padding:0 으로 두고 .simplebar-content 에 CSS 로 주면 SimpleBar 가 심는
    인라인 padding:0 에 덮여서 여백이 사라진다.) */
/* 구획은 안쪽 섹션 카드(.cs-mcard)가 맡으므로 바깥 박스는 지운다.
   요소는 남긴다 — mskin 의 .mskin__body--sb1 .modal__card 가 여기에 SimpleBar 를 붙인다.
   바깥 여백은 공통이 주는 margin:14px 이 맡고 padding 은 0 으로 둔다. */
.cs-modal .modal__box.mskin .modal__card{
    padding:0;
    background:transparent; border:0; border-radius:0;
}
.cs-f{ display:block; margin-bottom:12px; }
.cs-f > span{ display:block; font-size:13px; font-weight:600; color:#5b6673; margin-bottom:5px; }
.cs-f > span em{ color:#c0392b; font-style:normal; }
.cs-f .form-control{ width:100%; height:38px; }
.cs-hint{ margin:-6px 0 12px; font-size:12.5px; color:#8a94a1; line-height:1.5; }

/* ── 좌측 : 고객사 유형 탭 ────────────────────────────────── */
/* 고객사 담당(.cc-tabs)과 같은 모양 — 두 화면이 나란히 쓰이므로 결을 맞춘다 */
.cs-tabs{
    display:flex; align-items:flex-end; flex:none; gap:0; padding:0 8px;
    background:transparent; border-bottom:2px solid #e5e9ee;
}
.cs-tab{
    appearance:none; cursor:pointer; font:inherit; flex:1 1 0; min-width:0;
    display:flex; align-items:center; justify-content:center; gap:5px;
    height:36px; padding:0 6px; border:0; border-radius:0; background:none;
    font-size:13.5px; font-weight:600; color:#6b7480;
    border-bottom:2px solid transparent; margin-bottom:-2px; white-space:nowrap;
    transition:color .15s, border-color .15s;
}
.cs-tab:hover{ color:#1d1d1d; }
.cs-tab.is-on{ color:#047bb6; font-weight:700; border-bottom-color:#047bb6; }
.cs-tab > i{
    font-style:normal; font-size:10.5px; font-weight:700;
    background:#eef1f5; color:#5b6472; border-radius:999px; padding:1px 6px;
    font-variant-numeric:tabular-nums;
}
.cs-tab.is-on > i{ background:#dbeafe; color:#0a529d; }

/* 고객사 유형은 공통 라디오(index.css 의 .radio)를 그대로 쓴다.
   간격도 .radio 의 margin 이 맡으므로 여기서 따로 잡지 않는다. */

/* ── 모달 : 계약 롤 고르기 ─────────────────────────────────── */
.cs-f--roles > span{ display:block; }
.cs-rolepick-scroll{
    border:1px solid #dde5ee; border-radius:6px;
    max-height:34vh;
}
.cs-rolepick{ padding:5px; }
.cs-rl{
    display:flex; align-items:center; gap:8px; padding:6px 8px; border-radius:4px;
    cursor:pointer; font-size:12.5px; color:#3d4753;
}
.cs-rl:hover{ background:#f2f6fb; }
.cs-rl.is-on{ background:#e6effb; color:#0a529d; font-weight:600; }
.cs-rl .radio__input, .cs-check .checkbox__input{ flex:none; }
.cs-rl > span{ flex:1 1 auto; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cs-rl__own{
    font-style:normal; font-size:10.5px; font-weight:700;
    background:#fdeee9; color:#c0392b; border-radius:3px; padding:1px 4px; margin-left:3px;
}
.cs-rl > i{
    flex:none; font-style:normal; font-size:10.5px; font-weight:700;
    background:#eef3fa; color:#5b6673; border-radius:999px; padding:1px 7px;
    font-variant-numeric:tabular-nums;
}
.cs-rl.is-on > i{ background:#0a529d; color:#fff; }

/* ── 좌측 하단 : 계약 롤 ──────────────────────────────────── */
.cs-col--site .cs-list-scroll{ flex:1 1 auto; min-height:160px; }
.cs-auth{ flex:none; border-top:1px solid #d8e0ea; }
.cs-auth__head{
    display:flex; align-items:center; gap:8px;
    height:40px; padding:0 10px 0 12px; background:#f4f7fa; border-bottom:1px solid #e6ecf3;
}
.cs-auth__head h3{ margin:0; font-size:13px; font-weight:700; display:flex; align-items:center; gap:7px; }
.cs-auth__head .btn{ margin-left:auto; }
.cs-rolelist-scroll{ max-height:22vh; }
.cs-rolelist{ padding:10px 12px; }

/* ── 우측 : 자산 유형별 설치/미설치 ───────────────────────── */
.cs-legend{ margin-left:auto; display:flex; align-items:center; gap:10px;
    font-size:11.5px; font-weight:600; color:#8a94a1; }
.cs-legend i{ display:inline-block; width:9px; height:9px; border-radius:2px; margin-right:4px; }
.cs-legend i.on{ background:#0a529d; }
.cs-legend i.off{ background:#d3dde9; }

.cs-assets{ display:grid; gap:10px; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); }
.cs-asset{ border:1px solid #dde5ee; border-radius:7px; padding:10px 12px; }
.cs-asset__top{ display:flex; align-items:center; gap:8px; margin-bottom:7px; }
.cs-asset__top b{ flex:1 1 auto; font-size:13px; font-weight:700; color:#1d1d1d;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cs-asset__tot{ flex:none; font-size:11px; font-weight:700; color:#5b6673;
    background:#eef3fa; border-radius:999px; padding:1px 7px; font-variant-numeric:tabular-nums; }
.cs-bar{ height:6px; border-radius:999px; background:#d3dde9; overflow:hidden; margin-bottom:7px; }
.cs-bar > span{ display:block; height:100%; background:#0a529d; }
.cs-asset__bot{ display:flex; gap:10px; font-size:11.5px; }
.cs-num{ color:#8a94a1; font-weight:600; }
.cs-num b{ font-variant-numeric:tabular-nums; }
.cs-num--on b{ color:#0a529d; }
.cs-num--off b{ color:#5b6673; }

/* ── 우측 : 담당 업체 — 유형마다 한 칸, 칸 안에 카드 ─────────── */
.cs-vts{ display:grid; gap:10px; grid-template-columns:repeat(3, 1fr); }
@media (max-width:1280px){ .cs-vts{ grid-template-columns:1fr; } }

.cs-vt{ border:1px solid #dde5ee; border-radius:7px; overflow:hidden; align-self:start; }
.cs-vt__h{
    display:flex; align-items:center; gap:7px; padding:0 8px 0 11px; height:36px;
    background:#f4f7fa; border-bottom:1px solid #e6ecf3;
}
.cs-vt__h b{ font-size:12.5px; font-weight:700; color:#3d4753; }
.cs-vt__cnt{
    font-size:10.5px; font-weight:700; color:#5b6673;
    background:#dfe7f0; border-radius:999px; padding:1px 7px; font-variant-numeric:tabular-nums;
}
.cs-vt-add{
    margin-left:auto; appearance:none; cursor:pointer; font:inherit;
    height:24px; padding:0 9px; font-size:11.5px; font-weight:700; line-height:22px;
    border:1px solid #047bb6; border-radius:5px; background:#047bb6; color:#fff;
}

.cs-vt .cs-addrow{ margin:0; padding:8px; background:#fbfcfe; border-bottom:1px solid #eef2f7; }
.cs-vt .cs-addrow .form-control{ min-width:0; }

.cs-vt__b{ display:flex; flex-direction:column; gap:6px; padding:8px; }
.cs-vt__b .cs-none{ margin:2px 0 2px 3px; }

.cs-vcard{ border:1px solid #e3eaf2; border-radius:6px; padding:8px 10px; background:#fff; }
.cs-vcard__top{ display:flex; align-items:center; gap:8px; }
.cs-vcard__top b{
    flex:1 1 auto; font-size:13px; font-weight:700; color:#1d1d1d;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.cs-charge-del{
    flex:none; appearance:none; border:0; background:none; cursor:pointer;
    font-size:12px; line-height:1; color:#b6bfca; padding:2px;
}
.cs-vcard__bot{
    display:flex; flex-wrap:wrap; gap:10px; margin-top:6px;
    font-size:11.5px; color:#8a94a1; font-weight:600;
}
.cs-vcard__bot b{ color:#0a529d; font-variant-numeric:tabular-nums; }

/* ── 등록·수정 모달 : 지도 · 부가정보 ────────────────────── */
.cs-modal .modal__box{ width:min(1120px, calc(100% - 32px)); max-height:92vh; }

.cs-ta{ min-height:60px; height:auto; resize:vertical; padding:8px 10px; line-height:1.5; }

/* 두 칸 나란히 (로봇수집키) */
.cs-frow{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.cs-frow .cs-f{ margin-bottom:12px; min-width:0; }

/* 지도 */
.cs-f--map > span{ display:block; }
.cs-map{
    height:260px; border:1px solid #dde5ee; border-radius:6px; overflow:hidden;
    background:#eef2f7;
}
.cs-map .ol-viewport{ cursor:crosshair; }
.cs-map .ol-viewport canvas,
.cs-map canvas{ max-width: none; max-height: none; }
.cs-maprow{ display:grid; grid-template-columns:1fr 1fr 92px; gap:8px; margin-top:8px; }
.cs-maprow label{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.cs-maprow label i{ font-style:normal; font-size:11.5px; font-weight:600; color:#8a94a1; }
.cs-maprow .form-control{ width:100%; height:32px; font-size:12.5px; }
.cs-maprow input[readonly]{ background:#f6f8fb; color:#5b6673; }
.cs-hint--tight{ margin:6px 0 0; }

/* BIS 대표 체크 */
.cs-check{
    display:flex; align-items:center; gap:8px; margin:0 0 12px;
    font-size:13px; color:#3d4753; cursor:pointer;
}

/* ── 등록·수정 모달 : 헤더 ────────────────────────────────── */
/* 모달 헤더 아이콘·제목은 공통 .mskin__ico / .mskin__ttl 로 대체됨 (modal_skin.css) */

/* ── 등록·수정 모달 : 좌우 두 단 ──────────────────────────── */
/* 두 단을 같은 높이로 늘려, 짧은 쪽 단의 마지막 카드가 남은 높이를 먹게 한다.
   등록 모달은 좌측(기본 정보 + 계약 롤)이 더 길어서 우측 외부 노출 카드가 늘어난다. */
.cs-mbody__grid{
    display:grid; grid-template-columns:1fr 1fr; gap:0 24px;
    align-items:stretch;
}
/* 마지막 카드는 늘어나기만 한다 — 줄어들게 두면 내용이 잘린다.
   내용 높이가 남은 칸보다 크면 그냥 자기 높이를 지키고 단이 그만큼 길어진다. */
.cs-mcol > .cs-mcard:last-child{ flex:1 0 auto; }
@media (max-width:900px){
    .cs-mbody__grid{ grid-template-columns:1fr; }
    .cs-mcol > .cs-mcard:last-child{ flex:0 0 auto; }
}

/* 한 단은 카드를 14px 간격으로 쌓는다 (그룹및사용자 모달의 .au-mcard 와 같은 결) */
.cs-mcol{ min-width:0; display:flex; flex-direction:column; gap:14px; }

/* 섹션 카드 : 옅은 테두리 박스 하나가 곧 한 섹션 */
.cs-mcard{
    background:#fff; border:1px solid #dfe6ef; border-radius:8px;
    padding:16px 18px 18px;
}
/* 카드 안 마지막 줄의 아래 여백은 카드 padding 이 맡는다 */
.cs-mcard > :last-child{ margin-bottom:0; }

/* 단 안의 소제목 */
/* 크기·색·밑줄은 공통(modal_skin.css 의 .mskin .cs-mgroup)에 맡기고 배치만 남긴다 */
.cs-mgroup{
    display:flex; align-items:center; gap:6px;
    letter-spacing:.02em;
}
.cs-mcard .cs-mgroup + *{ margin-top:0; }
.cs-mgroup em{ color:#c0392b; font-style:normal; }

/* 두 단 안에서는 지도 · 롤 목록을 조금 낮춘다 */
.cs-mbody .cs-map{ height:220px; }

/* 높이 상한은 SimpleBar 가 붙은 바깥 래퍼(.cs-rolepick-scroll)에 걸어야 한다 —
   안쪽 .cs-rolepick 은 .html() 재렌더 대상이라 거기 걸면 스크롤이 안 잡히고 넘쳐 나온다. */
.cs-mbody .cs-rolepick-scroll{ max-height:220px; }
.cs-mbody .cs-ta{ min-height:52px; }
.cs-mbody .cs-f--map{ margin-bottom:0; }

/* panel_fit 이 .cs-list/.cs-body/.cs-rolelist 에 거는 네이티브 스크롤·상한을 SimpleBar wrapper 로 이동 */
#content .cs-list, #content .cs-body, #content .cs-rolelist { max-height:none !important; min-height:0 !important; overflow:visible !important; }
#content .cs-list-scroll { max-height: var(--panel-h); min-height: var(--panel-h-min); }
/* -150px 에서 -190px : 유형 탭(36px + 밑줄 2px) 이 목록 위에 한 줄 더 들어왔다 */
#content .cs-col--site .cs-list-scroll { max-height: calc(var(--panel-h) - 190px); min-height:160px; }
#content .cs-body-scroll { max-height: calc(var(--panel-h) + 140px); min-height: var(--panel-h-min); }
#content .cs-rolelist-scroll { max-height:150px; min-height:60px; }