@charset "UTF-8";
/*
    고객사대시보드 (/dashboard/customer)

    좌 고객사 목록(340px) · 우 체크리스트.

    .content 가 height:calc(100vh - 64px) 로 잘려 있어서, 안쪽이 그대로 늘어나면
    넘친 부분은 스크롤도 안 되고 그냥 안 보인다.

    그래서 두 칸을 감싼 .oc-mid 에 높이를 한 번만 주고,
    칸 안의 스크롤 영역이 '남는 자리를 채우게'(flex:1 · min-height:0) 한다.
    - 두 칸이 같은 높이로 선다 (예전에는 각자 max-height 를 가져서 어긋났다)
    - 칸 머리(제목 · 탭 · 검색줄)가 몇 줄이든 스크롤 영역이 알아서 줄어든다
      (예전에는 max-height 가 고정이라 머리가 긴 체크리스트 쪽이 아래로 잘렸다)
*/

.oc-page{
    display:flex;
    flex-direction:column;
    gap:16px;
}

/* ── 공통 조각 ─────────────────────────────────────────── */

.oc-page h2{ font-size:17px; font-weight:700; color:#1b2b46; margin:0; }
.oc-page h3{ font-size:15px; font-weight:700; color:#1b2b46; margin:0; }
.oc-page h4{ font-size:14px; font-weight:700; color:#1b2b46; margin:0; }

.oc-cnt{
    display:inline-block; min-width:24px; margin-left:6px; padding:0 7px;
    background:#eef3fa; color:#0a529d; border-radius:11px;
    font-size:13px; font-weight:700; text-align:center;
}

.oc-empty{
    padding:24px 10px; color:#8a94a6; font-size:14px; text-align:center; line-height:1.6;
}

/* 항목 종류 배지 — AI 재학습 기산일이 되는 항목 */
.oc-kind{
    display:inline-block; margin-left:6px; padding:1px 7px; border-radius:9px;
    font-size:11px; font-weight:700; white-space:nowrap;
}
.oc-kind--ai{    background:#e8f1ff; color:#1359c0; }
.oc-kind--route{ background:#fff3e0; color:#b06a00; }

/* ── 고객사 · 체크리스트 ────────────────────────────────── */

.oc-mid{
    display:grid; grid-template-columns:340px minmax(0, 1fr); gap:16px;
    align-items:stretch;
    /* 100vh - (상단바 64 + .content 위아래 패딩 80 + 페이지 헤더 150) */
    height:calc(100vh - 300px);
    min-height:420px;
}

.oc-col{
    background:#fff; border:1px solid #e3e8f0; border-radius:10px;
    padding:14px 16px; display:flex; flex-direction:column;
    min-width:0; min-height:0;      /* 안쪽이 넘칠 때 칸이 늘어나지 않게 */
}
.oc-col__head{
    display:flex; align-items:center; justify-content:space-between;
    gap:10px; min-height:36px; margin-bottom:10px;
}
.oc-col__head h2{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.oc-col__btns{ display:flex; gap:6px; flex:0 0 auto; }

/* 대기 / 진행중 / 완료 탭 */
.oc-tabs{
    display:flex; gap:4px; margin-bottom:8px;
    padding:3px; background:#f2f5f9; border-radius:8px;
}
.oc-tab{
    flex:1 1 0; min-width:0;
    height:32px; padding:0 6px; border:none; border-radius:6px;
    background:transparent; color:#6b7688; cursor:pointer;
    font-size:12px; font-weight:600; white-space:nowrap;
}
.oc-tab b{ font-weight:700; color:#8a94a6; }
.oc-tab:hover{ background:#e8edf5; }
.oc-tab.is-on{ background:#fff; color:#0a529d; box-shadow:0 1px 2px rgba(16,32,56,.10); }
.oc-tab.is-on b{ color:#0a529d; }

/* 진행 상태 배지 */
.oc-state{
    flex:0 0 auto; padding:1px 8px; border-radius:9px;
    font-size:11px; font-weight:700; white-space:nowrap;
}
.oc-state.is-wait{ background:#f1f3f7; color:#77839a; }
.oc-state.is-ing { background:#fdf1dc; color:#a3670a; }
.oc-state.is-done{ background:#eaf6ee; color:#1f7a45; }

/* 우측 제목 옆 배지는 조금 크게 */
.oc-col__head h2 .oc-state{ margin-left:6px; font-size:12px; padding:2px 9px; vertical-align:2px; }

.oc-filter{ margin-bottom:8px; min-width:0; }
.oc-filter .search-box{
    /* index.css 의 .search-box 는 width:400px 고정이다.
       고객사 칸은 340px 라 그대로 두면 카드 밖으로 삐져나간다. */
    width:100%; max-width:100%;
    display:flex; align-items:center; height:40px;
    border:1px solid #d8dee8; border-radius:6px; background:#fff; overflow:hidden;
}
.oc-filter .search-box input{
    flex:1 1 auto; min-width:0; height:100%; border:none; padding:0 12px; font-size:14px;
}
.oc-filter .search-box input:focus{ outline:none; }
.oc-filter .search-btn{
    display:flex; align-items:center; justify-content:center;
    width:42px; height:100%; border:none; background:#f2f5f9; cursor:pointer;
}

/* 목록 · 체크리스트 : 칸에서 머리를 뺀 나머지를 채우고 그 안에서 스크롤한다.
   min-height:0 이 없으면 flex 자식이 내용만큼 부풀어 칸을 밀어낸다 */
.oc-list-scroll,
.oc-chk-scroll{
    flex:1 1 auto;
    min-height:0;
    /* SimpleBar 가 안 붙었을 때(스크립트 미로딩 등)만 쓰이는 대비책이다.
       붙어 있으면 아래 .simplebar-wrapper 규칙 덕에 여기서는 넘치지 않는다 */
    overflow-y:auto;
}

/*
   스크롤이 두 겹으로 잡히던 것 —

   SimpleBar 는 안쪽에 .simplebar-wrapper 를 만들고 그 CSS 가 height:inherit 다.
   높이를 max-height 로 주던 때는 래퍼가 그 값을 물려받아 딱 맞았는데,
   flex(flex:1 1 auto)로 높이를 잡으면 CSS 의 height 는 auto 라
   래퍼도 auto 가 되어 내용만큼 부풀었다.
   그러면 SimpleBar 안쪽 스크롤 + 바깥 .oc-*-scroll 의 overflow-y 스크롤,
   이렇게 스크롤바가 두 개가 된다.

   래퍼 높이를 100% 로 못박아 안쪽 하나만 남긴다.
*/
.oc-list-scroll > .simplebar-wrapper,
.oc-chk-scroll  > .simplebar-wrapper{ height:100%; }

.oc-list{ list-style:none; margin:0; padding:0; }

.oc-item{
    border:1px solid #e6eaf1; border-radius:8px; padding:10px 12px;
    margin-bottom:8px; cursor:pointer; transition:all .12s;
}
.oc-item:hover{ border-color:#b6cdea; background:#fafcff; }
.oc-item.is-sel{ border-color:#0a529d; background:#eef4fc; box-shadow:inset 3px 0 0 #0a529d; }

.oc-item__top{ display:flex; align-items:center; gap:6px; }
.oc-item__top b{
    flex:1 1 auto; min-width:0; font-size:14px; color:#1b2b46;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.oc-item__prog{
    flex:0 0 auto; padding:1px 8px; border-radius:9px;
    background:#eef3fa; color:#0a529d; font-size:11px; font-weight:700;
}
.oc-item__sub{ margin-top:4px; font-size:12px; color:#6b7688; }
.oc-item__types{ margin-top:3px; font-size:11px; color:#8a94a6; }

/* 개별 항목 그룹 — 공통 항목과 눈에 띄게 구분한다 */
.oc-chk-group.is-own{
    padding:10px 12px; border:1px dashed #cfe0f5; border-radius:8px; background:#fafcff;
}
.oc-chk-group__note{
    font-style:normal; font-size:11px; color:#8a94a6;
}
.oc-chk-group__head{ gap:8px; }
.oc-chk-group__head .oc-chk-group__cnt{ margin-left:auto; }

/* 개별 항목 줄의 삭제 버튼 */
.oc-chk-del{
    flex:0 0 auto; width:24px; height:24px; margin-left:4px;
    border:1px solid #e3b6ba; border-radius:4px; background:#fff;
    color:#c9313d; font-size:15px; line-height:1; cursor:pointer;
}
.oc-chk-del:hover{ background:#fdecee; }

/* 항목 추가 줄 */
.oc-chk-add{
    display:grid; grid-template-columns:1fr 96px auto; gap:6px;
    margin-top:8px; padding-top:8px; border-top:1px solid #e6eaf1;
}
.oc-chk-add .form-control{ height:32px; font-size:12px; }
.oc-chk-add .btn{ height:32px; white-space:nowrap; }
.oc-chk-none{
    margin:8px 0 0; font-size:12px; color:#a9b2c1; text-align:center;
}

@media (max-width:900px){
    .oc-chk-add{ grid-template-columns:1fr; }
}

/* 체크리스트 */
.oc-chk-group{ margin-bottom:14px; }
.oc-chk-group__head{
    display:flex; align-items:center; gap:8px;
    padding:6px 2px; border-bottom:1px solid #e6eaf1; margin-bottom:6px;
}
.oc-chk-group__cnt{
    padding:1px 8px; border-radius:9px;
    background:#eef3fa; color:#0a529d; font-size:11px; font-weight:700;
}

.oc-chk-row{
    display:flex; align-items:center; gap:10px;
    padding:7px 10px; border:1px solid #eef1f6; border-radius:6px; margin-bottom:5px;
}
.oc-chk-row.is-on{ background:#f3faf5; border-color:#d3ecdb; }

.oc-chk-label{
    flex:1 1 auto; min-width:0; display:flex; align-items:center; gap:8px;
    cursor:pointer; font-size:14px; color:#1b2b46;
}
.oc-chk-label input{ width:16px; height:16px; flex:0 0 auto; cursor:pointer; }
.oc-chk-label > span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.oc-chk-date{
    flex:0 0 auto; width:150px; height:32px; font-size:13px; padding:0 8px;
}
.oc-chk-date:disabled{ background:#f4f6f9; color:#a9b2c1; }

/* ── 고객사 등록 · 수정 모달 ────────────────────────────── */

.oc-modal .modal__dim{ position:absolute; inset:0; background:rgba(16,32,56,.45); }
.oc-modal .modal__box{
    position:relative; width:min(560px, calc(100% - 32px)); max-height:92vh;
    margin:4vh auto; display:flex; flex-direction:column;
    background:#fff; border-radius:10px; overflow:hidden;
}

.oc-modal .modal__body{ overflow-y:auto; }
.oc-modal .modal__card{ padding:18px 22px; }

.oc-f{ display:block; margin-bottom:12px; }
.oc-f > span{
    display:block; margin-bottom:5px;
    font-size:13px; font-weight:600; color:#41506a;
}
.oc-f > span em{ color:#d93a45; font-style:normal; }
.oc-f .form-control{ width:100%; height:40px; }
.oc-ta{ height:72px; padding:8px 10px; resize:vertical; }

.oc-hint{ margin:4px 0 0; font-size:12px; color:#8a94a6; line-height:1.5; }
.oc-hint--tight{ margin-top:2px; }

.oc-typepick{
    display:flex; flex-wrap:wrap; gap:8px;
    padding:10px; border:1px solid #e3e8f0; border-radius:6px; background:#fafbfd;
}
.oc-typepick__item{
    display:flex; align-items:center; gap:6px;
    padding:6px 10px; border:1px solid #e0e6ef; border-radius:16px;
    background:#fff; cursor:pointer; font-size:13px; color:#1b2b46;
}
.oc-typepick__item:has(input:checked){ border-color:#0a529d; background:#eef4fc; color:#0a529d; }
.oc-typepick__item input{ width:15px; height:15px; cursor:pointer; }
.oc-typepick__item i{ font-style:normal; font-size:11px; color:#8a94a6; }

/* ── 좁은 화면 ─────────────────────────────────────────── */

@media (max-width: 1100px){
    /* 두 칸이 위아래로 쌓이면 한 화면 높이에 맞출 수가 없다.
       높이 고정을 풀고 각자 상한만 준다 */
    .oc-mid{ grid-template-columns:1fr; height:auto; min-height:0; }
    .oc-list-scroll,
    .oc-chk-scroll{ flex:0 0 auto; max-height:340px; }
}