@charset "UTF-8";
/*
    설정 > 담당자별 사이트설정 (/config/mgrsite)

    좌 : 담당자 목록  우 : 사이트 카드 (체크)
    고객사대시보드(dashboard_customer.css)와 같은 2단 구성이지만,
    우측이 목록이 아니라 '고르는 카드' 라 따로 뒀다.
*/

.ms-page{
    display:grid; grid-template-columns:320px 1fr; gap:14px;
    align-items:start;
}

/* ── 좌 : 담당자 ────────────────────────────────────────── */

.ms-side{
    background:#fff; border:1px solid #e3e8f0; border-radius:10px; padding:14px 12px;
}
.ms-side__head{ display:flex; align-items:center; gap:8px; margin:0 2px 10px; }
.ms-side__head h2{ font-size:15px; font-weight:700; color:#243247; margin:0; }

.ms-cnt{
    display:inline-block; min-width:22px; padding:1px 7px; border-radius:10px;
    background:#eef3fb; color:#41506a; font-size:12px; font-weight:700; text-align:center;
}

.ms-filter{ margin-bottom:8px; }
/* index.css 의 .search-box{width:400px} 가 칸을 넘어가게 만든다 */
.ms-filter .search-box{
    display:flex; align-items:center; width:100%; max-width:100%; height:36px;
    border:1px solid #d8dee8; border-radius:6px; background:#fff; overflow:hidden;
}
.ms-filter .search-box input{
    flex:1 1 auto; min-width:0; height:100%; border:none; padding:0 12px; font-size:13px;
}
.ms-filter .search-box input:focus{ outline:none; }

.ms-side__body{ max-height:calc(100vh - 300px); overflow:auto; }
.ms-mgrs{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; }

.ms-mgr{
    display:grid; grid-template-columns:1fr auto; grid-template-rows:auto auto;
    gap:0 8px; width:100%; padding:8px 10px; border:1px solid transparent; border-radius:6px;
    background:transparent; cursor:pointer; text-align:left;
}
.ms-mgr:hover{ background:#f4f7fb; }
.ms-mgr.is-on{ background:#eef4fc; border-color:#0a529d; }

.ms-mgr__nm{
    grid-column:1; grid-row:1;
    font-size:14px; font-weight:600; color:#243247;
    display:flex; align-items:center; gap:5px; min-width:0;
}
.ms-mgr__id{ grid-column:1; grid-row:2; font-size:11px; color:#a9b2c1; }
.ms-mgr__n{
    grid-column:2; grid-row:1 / span 2; align-self:center;
    min-width:24px; padding:2px 8px; border-radius:10px;
    background:#f1f3f7; color:#a9b2c1; font-size:12px; font-weight:700; text-align:center;
}
.ms-mgr__n.is-on{ background:#0a529d; color:#fff; }

/* ── 우 : 사이트 카드 ───────────────────────────────────── */

.ms-main{
    background:#fff; border:1px solid #e3e8f0; border-radius:10px; padding:16px 18px;
    min-width:0;
}
.ms-main__head{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    padding-bottom:10px; border-bottom:1px solid #eef1f6;
}
.ms-main__head h2{ font-size:16px; font-weight:700; color:#243247; margin:0; }
.ms-main__head h2 i{ font-style:normal; font-weight:400; color:#8a94a6; font-size:14px; }
.ms-main__right{ display:flex; align-items:center; gap:10px; }
.ms-pick{ font-size:13px; color:#41506a; font-weight:600; }

.ms-tool{ display:flex; align-items:center; gap:12px; margin:10px 0; }
.ms-note{ font-style:normal; font-size:12px; color:#8a94a6; }
.ms-note b{ color:#41506a; }

.ms-main__body{ max-height:calc(100vh - 330px); overflow:auto; }

.ms-cards{
    display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:10px;
}

.ms-card{
    display:flex; align-items:flex-start; gap:9px;
    padding:12px 13px; border:1px solid #e6eaf1; border-radius:8px;
    background:#fff; cursor:pointer; min-width:0;
}
.ms-card:hover{ border-color:#b9cdea; }
.ms-card.is-on{ border-color:#0a529d; background:#f6faff; box-shadow:0 0 0 1px #0a529d inset; }

.ms-card .ms-box{ width:16px; height:16px; margin-top:2px; flex:0 0 auto; cursor:pointer; }
.ms-card__body{ display:flex; flex-direction:column; gap:3px; min-width:0; }

.ms-card__nm{
    font-size:14px; font-weight:700; color:#243247;
    display:flex; align-items:center; flex-wrap:wrap; gap:5px;
}
.ms-card__tp{
    padding:1px 7px; border-radius:10px;
    background:#eef3fb; color:#41506a; font-size:11px; font-weight:600;
}
.ms-card__sub{ font-size:11px; color:#a9b2c1; }
.ms-card__no{ color:#c9313d; }

.ms-empty{
    grid-column:1 / -1;
    padding:44px 10px; text-align:center; color:#8a94a6; font-size:14px; line-height:1.6;
}
.ms-mgrs .ms-empty{ padding:28px 10px; font-size:13px; }

@media (max-width:1100px){
    .ms-page{ grid-template-columns:1fr; }
    .ms-side__body{ max-height:260px; }
}