@charset "UTF-8";
/* 고객사 관리 > 고객사 담당 (bit/customer/charge) */

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

.cc-col{
    display:flex; flex-direction:column;
    background:#fff; border:1px solid #d8e0ea; border-radius:8px; overflow:hidden; min-width:0;
}
.cc-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;
}
.cc-head h2{ margin:0; font-size:14px; font-weight:600;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cc-head__btns{ display:flex; align-items:center; gap:10px; flex:none; }
.cc-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;
}
.cc-pick{ font-size:12.5px; color:#8a94a1; font-weight:600; font-variant-numeric:tabular-nums; }
.cc-head .btn.small{
    height:28px; padding:0 12px; font-size:12.5px; font-weight:600;
    line-height:26px; border-radius:5px; white-space:nowrap;
}
.cc-head .btn.small:disabled{ opacity:.4; cursor:not-allowed; }

.cc-filter{ display:flex; gap:6px; flex:none; padding:8px 10px; border-bottom:1px solid #eaeff5; }
.cc-filter #ccSearch{ flex:1 1 auto; min-width:0; }
.cc-filter .form-control{ height:32px; font-size:13px; }
/* 공통 .search-box 기반 — 좌측 필터 높이(32px)에 맞춘 컴팩트 오버라이드 */
.cc-filter .search-box{ flex:1 1 auto; width:auto; min-width:0; height:32px; }
.cc-filter .search-box .form-control{ height:100%; border:none; padding:0 10px; }
.cc-filter .search-box .search-btn{
    flex:none; display:flex; align-items:center; justify-content:center;
    width:32px; padding:0;
}
.cc-filter .search-box .search-btn img{ display:block; }

/* 좌측 업체 */
.cc-list-scroll{ flex:1 1 auto; min-height:0; }
.cc-list{ list-style:none; margin:0; padding:0; }
.cc-list > li{ border-bottom:1px solid #eef2f7; }
.cc-item{
    display:flex; align-items:center; gap:8px; padding:9px 10px 9px 12px;
    cursor:pointer; position:relative;
}
.cc-item:hover{ background:#f2f6fb; }
.cc-item.is-on{ background:#e6effb; }
.cc-item.is-on::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:#0a529d; }
.cc-item__wrap{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1 1 auto; }
.cc-item__nm{
    display:flex; align-items:center; gap:5px; font-size:13.5px; font-weight:500;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.cc-item.is-on .cc-item__nm{ font-weight:700; color:#0a529d; }
.cc-item__sub{ font-size:11.5px; color:#9aa5b2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cc-tp{
    flex:none; padding:1px 5px; border-radius:3px;
    background:#eef3fa; color:#7b8593; font-size:10.5px; font-weight:700;
}
.cc-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;
}
.cc-item.is-on .cc-item__cnt{ background:#0a529d; color:#fff; }

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

/* 우측 사이트 */
.cc-body-scroll{ flex:1 1 auto; min-height:0; background:#f7f9fc; }
.cc-body{ padding:12px; min-height:100%; box-sizing:border-box; }
.cc-bar{ display:flex; margin-bottom:10px; }
.cc-allbtn{
    appearance:none; cursor:pointer; font:inherit; font-size:12px; font-weight:600;
    height:26px; padding:0 12px; border-radius:5px;
    border:1px solid #d8e0ea; background:#fff; color:#5b6673;
}

.cc-sites{ display:grid; gap:8px; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); }
.cc-site{
    display:flex; align-items:flex-start; gap:9px; padding:10px 12px;
    background:#fff; border:1px solid #dde5ee; border-radius:7px; cursor:pointer;
}
.cc-site:hover{ border-color:#a9c8ee; }
.cc-site.is-on{ border-color:#0a529d; background:#f2f7fd; }
.cc-site .checkbox__input{ flex:none; }
.cc-site__wrap{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.cc-site__nm{ display:flex; align-items:center; gap:5px;
    font-size:13.5px; font-weight:600; color:#3d4753;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cc-site.is-on .cc-site__nm{ color:#0a529d; }
.cc-site__sub{ font-size:11.5px; color:#9aa5b2; line-height:1.4; }

/* ── 업체 유형 탭 ─────────────────────────────────────────── */
.cc-tabs{
    display:flex; align-items:flex-end; flex:none; gap:0; padding:0 8px;
    background:transparent; border-bottom:2px solid #e5e9ee;
}
.cc-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;
}
.cc-tab:hover{ color:#1d1d1d; }
.cc-tab.is-on{ color:#047bb6; font-weight:700; border-bottom-color:#047bb6; }
.cc-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;
}
.cc-tab.is-on > i{ background:#dbeafe; color:#0a529d; }

/* panel_fit 이 원래 .cc-list/.cc-body 에 거는 네이티브 스크롤·상한을,
   SimpleBar wrapper(.cc-list-scroll/.cc-body-scroll)로 옮긴다.
   (panel_fit 이 맨 뒤 로드라 안쪽 요소 무력화는 !important) */
#content .cc-list,
#content .cc-body { max-height:none !important; min-height:0 !important; overflow:visible !important; }
/* ===== [cc-fit] 여기부터 — 되돌리려면 이 블록만 위 두 줄로 되돌리면 됨 =====
   문제 : .cc-*-scroll 은 SimpleBar 호스트라 내용이 .simplebar-mask(position:absolute)
          안으로 들어간다 → 호스트의 "내용 기반 높이"가 0 이 되어 컬럼이 min-height
          (220px) 근처로 주저앉는다. 반대로 화면이 크면 컬럼은 늘어나는데 스크롤 영역은
          max-height 에서 멈춰, 그 아래가 빈 흰 밴드로 남았다.

   해결 : 스크롤 영역에 상한을 두지 말고, 바깥(.cc-page)에 확정 높이를 준다.
          → 컬럼이 화면 남은 높이를 정확히 채우고
          → .cc-*-scroll 이 flex:1 1 auto 로 그 높이를 그대로 받아 흰 밴드가 사라지며
          → 고객사 카드는 들어가는 만큼 전부 보이고, 넘칠 때만 패널 안에서 스크롤한다. */
#content .cc-page {
    height: calc(100vh - 300px);
    min-height: 380px;          /* 화면이 낮아도 이 아래로는 안 줄인다 */
}
#content .cc-col { min-height: 0; }

#content .cc-list-scroll,
#content .cc-body-scroll { max-height: none; min-height: 0; }

/* ===== [cc-fit] 끝 ===== */