/* ============================================================
   쿤스트 업무 ERP — 추가 스타일 (style.css 베이스 위에 적용)
   ============================================================ */

/* ---------- 부서 현황 카드 ---------- */
.dp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.dp-card{background:var(--sf);border:1px solid var(--line);border-radius:12px;padding:13px 14px;display:flex;flex-direction:column;gap:10px;transition:transform .18s ease,box-shadow .18s ease,border-color .18s}
.dp-card:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(28,37,64,.1);border-color:#c9d4ea}
.dp-hd{display:flex;align-items:center;gap:9px}
.dp-hd b{font-size:13.5px;letter-spacing:-.3px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dp-ic{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0}
.dp-prog{display:flex;align-items:center;gap:8px}
.dp-prog .pg{flex:1}
.dp-prog em{font-style:normal;font-size:12px;font-weight:800;color:var(--sub);min-width:34px;text-align:right}
.dp-nums{display:flex;gap:4px;flex-wrap:wrap}
.dp-nums span{flex:1;min-width:44px;background:#f7f9fc;border-radius:7px;padding:5px 2px;text-align:center;font-size:10px;color:var(--mut);font-weight:600;display:flex;flex-direction:column;gap:1px}
.dp-nums span b{font-size:13px;color:var(--tx);font-weight:800}
.dp-nums span.r b{color:var(--ref)}
.dp-nums span.g b{color:var(--ok)}
.dp-empty{font-size:11.5px;color:var(--mut);background:#f7f9fc;border-radius:7px;padding:12px;text-align:center}

/* ---------- 활동 로그 ---------- */
.act-list{display:flex;flex-direction:column}
.act-row{display:flex;align-items:flex-start;gap:9px;padding:7.5px 2px;border-bottom:1px solid var(--line2)}
.act-row:last-child{border-bottom:0}
.act-ic{width:24px;height:24px;border-radius:7px;background:var(--pri-bg);color:var(--pri);display:flex;align-items:center;justify-content:center;font-size:10px;flex-shrink:0;margin-top:1px}
.act-ic.sm{width:18px;height:18px;font-size:7px;background:#f1f4fa;color:var(--mut)}
.act-bd{flex:1;min-width:0;font-size:12.5px;line-height:1.5}
.act-bd b{font-weight:700}
.act-dt{display:block;font-size:11.5px;color:var(--sub)}
.act-tm{font-size:11px;color:var(--mut);white-space:nowrap;margin-top:2px}

/* ---------- 대시보드 체크시트 요약 ---------- */
.sheet-sum{display:flex;flex-direction:column;gap:4px}
.sheet-sum-row{display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:8px;transition:background .13s}
.sheet-sum-row:hover{background:#f6f9ff}
.sheet-sum-row .nm{width:150px;flex-shrink:0;display:flex;flex-direction:column;line-height:1.3}
.sheet-sum-row .nm b{font-size:12.5px;font-weight:700}
.sheet-sum-row .nm small{font-size:10.5px;color:var(--mut)}
.sheet-sum-row em{font-style:normal;font-size:11.5px;font-weight:800;color:var(--sub);min-width:44px;text-align:right}

/* ---------- 업무 상세 ---------- */
.task-text{font-size:13px;line-height:1.75;color:var(--tx);white-space:normal}
.task-sub{margin-top:11px;padding:10px 12px;background:#f7f9fc;border-radius:9px;font-size:12.5px;line-height:1.65;color:var(--sub)}
.task-sub b{display:block;font-size:11px;color:var(--mut);margin-bottom:3px}
.kv-list{display:flex;flex-direction:column}
.kv-row{display:flex;align-items:center;gap:10px;padding:8px 2px;border-bottom:1px solid var(--line2);font-size:12.5px}
.kv-row:last-child{border-bottom:0}
.kv-row>span{width:84px;flex-shrink:0;color:var(--mut);font-size:11.5px;font-weight:600}
.kv-row>b{font-weight:700;display:flex;align-items:center;gap:5px;flex-wrap:wrap}

/* 체크리스트 */
.ck-list{display:flex;flex-direction:column;gap:3px}
.ck-row{display:flex;align-items:center;gap:9px;padding:7px 8px;border-radius:8px;transition:background .13s}
.ck-row:hover{background:#f6f9ff}
.ck-box{width:21px;height:21px;border-radius:6px;border:1.5px solid #c3cbdb;background:#fff;color:#fff;font-size:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:.15s;cursor:pointer}
.ck-box:hover{border-color:var(--pri)}
.ck-row.is-done .ck-box{background:var(--ok);border-color:var(--ok)}
.ck-title{flex:1;font-size:13px;min-width:0}
.ck-row.is-done .ck-title{color:var(--mut);text-decoration:line-through}
.ck-meta{font-size:10.5px;color:var(--mut);white-space:nowrap}
.ck-del{width:22px;height:22px;border-radius:6px;color:var(--mut);font-size:11px;display:flex;align-items:center;justify-content:center;flex-shrink:0;opacity:0;transition:.13s;cursor:pointer;background:transparent;border:0}
.ck-row:hover .ck-del,.file-row:hover .ck-del,.cm-hd:hover .cm-del{opacity:1}
.ck-del:hover{background:var(--ref-bg);color:var(--ref)}
.ck-add{display:flex;gap:7px;margin-top:10px}

/* 첨부파일 */
.file-list{display:flex;flex-direction:column;gap:3px;margin-bottom:10px}
.file-row{display:flex;align-items:center;gap:9px;padding:7px 8px;border-radius:8px;font-size:12.5px}
.file-row:hover{background:#f6f9ff}
.file-row>i{color:var(--mut);font-size:13px}
.file-meta{font-size:11px;color:var(--mut);margin-left:auto;white-space:nowrap}
.file-up{display:flex;gap:7px;align-items:center}

/* 진행 메모(댓글) */
.cm-list{display:flex;flex-direction:column;gap:12px;margin-bottom:13px}
.cm-row{display:flex;gap:9px}
.cm-row .av{width:28px;height:28px;border-radius:50%;background:var(--pri-bg);color:var(--pri);font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.cm-bd{flex:1;min-width:0}
.cm-hd{display:flex;align-items:center;gap:7px;font-size:12px}
.cm-hd b{font-weight:700}
.cm-hd span{color:var(--mut);font-size:11px}
.cm-del{width:20px;height:20px;border-radius:5px;color:var(--mut);font-size:10px;display:inline-flex;align-items:center;justify-content:center;opacity:0;transition:.13s;cursor:pointer;background:transparent;border:0}
.cm-del:hover{background:var(--ref-bg);color:var(--ref)}
.cm-tx{margin-top:4px;background:#f7f9fc;border-radius:0 10px 10px 10px;padding:9px 12px;font-size:12.5px;line-height:1.65}
.cm-form textarea{width:100%;border:1px solid var(--line);border-radius:9px;padding:10px 12px;font-size:12.5px;min-height:72px;resize:vertical;outline:none;transition:.15s;line-height:1.6}
.cm-form textarea:focus{border-color:var(--pri);box-shadow:0 0 0 3px var(--pri-bg)}

/* ---------- 일일 체크시트 ---------- */
.sh-sec{margin-bottom:14px}
.sh-sec-hd{font-size:12px;font-weight:800;color:var(--sub);letter-spacing:-.2px;padding:6px 2px;border-bottom:1px solid var(--line);margin-bottom:8px;display:flex;justify-content:space-between}
.sh-sec-hd span{color:var(--mut);font-weight:700;font-size:11px}
.sh-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:6px}
.sh-item{display:flex;align-items:center;gap:9px;padding:9px 10px;border:1px solid var(--line);border-radius:9px;background:#fff;text-align:left;cursor:pointer;transition:.14s;font-size:12.5px}
.sh-item:hover{border-color:var(--pri);background:#f8faff}
.sh-item:disabled{cursor:default;opacity:.75}
.sh-item:disabled:hover{border-color:var(--line);background:#fff}
.sh-item.is-done{background:var(--ok-bg);border-color:#bfe5d0}
.sh-box{width:20px;height:20px;border-radius:6px;border:1.5px solid #c3cbdb;background:#fff;color:#fff;font-size:9.5px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:.14s}
.sh-item.is-done .sh-box{background:var(--ok);border-color:var(--ok)}
.sh-tt{flex:1;min-width:0;line-height:1.4}
.sh-item.is-done .sh-tt{color:#20764d}
.sh-meta{font-size:10px;color:var(--mut);white-space:nowrap}
.sh-item-add{display:flex;gap:7px;align-items:center;flex-wrap:wrap}

/* 월간 그리드 */
.sh-month-wrap{max-height:72vh;overflow:auto}
.sh-month{min-width:980px!important}
.sh-month thead th{padding:6px 4px;font-size:10.5px;text-align:center}
.sh-month tbody td{padding:5px 4px;font-size:11px}
.sh-month .sh-m-title{min-width:190px;max-width:260px;font-size:11.5px;position:sticky;left:0;background:#fff;z-index:1;border-right:1px solid var(--line)}
.sh-month thead .sh-m-title{background:#f7f9fc;z-index:3}
.sh-month .sh-m-sec td{background:#eef2fa;font-weight:800;font-size:11px;color:var(--sub);position:sticky;left:0}
.sh-month .sh-today{background:#f0f5ff}
.sh-ok{color:var(--ok);font-weight:800}

/* ---------- 캘린더 아이템 ---------- */
.cal td{height:92px}
.cal-items{display:flex;flex-direction:column;gap:2px;margin-top:3px}
.cal-it{display:flex;align-items:center;gap:4px;font-size:10.5px;line-height:1.3;padding:2px 5px;border-radius:5px;background:#eef2ff;color:#2743a6;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-weight:600}
.cal-it i{width:5px;height:5px;border-radius:50%;flex-shrink:0;display:inline-block}
.cal-it:hover{filter:brightness(.95)}
.cal-it.over{background:var(--ref-bg);color:var(--ref)}
.cal-it.done{background:#f1f4f8;color:var(--mut);text-decoration:line-through}
.cal-it.ev{background:#f0e9fd;color:#7c4dd4}
.cal-more{font-size:10px;color:var(--mut);padding:1px 5px}
.cal-key{font-size:9px;vertical-align:1px}
.cal-key.due{color:#2f54eb}
.cal-key.ev{color:#7c4dd4}

/* ---------- 교육 관리 ---------- */
.edu-legend{display:flex;align-items:center;gap:7px;margin-bottom:12px;flex-wrap:wrap}
.edu-legend i{font-size:9px;color:var(--mut)}
.eg{padding:3px 10px;border-radius:14px;font-size:11px;font-weight:700}
.eg.st0{background:var(--gray-bg);color:var(--sub)}
.eg.st1{background:var(--pri-bg);color:var(--pri)}
.eg.st2{background:var(--ok-bg);color:var(--ok)}
.edu-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:6px}
.edu-item{display:flex;align-items:center;gap:9px;padding:9px 10px;border:1px solid var(--line);border-radius:9px;background:#fff;text-align:left;cursor:pointer;transition:.14s;font-size:12.5px}
.edu-item:hover{border-color:var(--pri);background:#f8faff}
.edu-item:disabled{cursor:default;opacity:.8}
.edu-item:disabled:hover{border-color:var(--line);background:#fff}
.edu-item.st1{background:#f3f6ff;border-color:#c6d4ff}
.edu-item.st2{background:var(--ok-bg);border-color:#bfe5d0}
.edu-state{flex-shrink:0;width:58px;text-align:center;padding:3px 0;border-radius:6px;font-size:10px;font-weight:800;background:var(--gray-bg);color:var(--mut);transition:.14s}
.edu-item.st1 .edu-state{background:var(--pri);color:#fff}
.edu-item.st2 .edu-state{background:var(--ok);color:#fff}
.edu-tt{flex:1;min-width:0;line-height:1.4}
.edu-item.st2 .edu-tt{color:#20764d}
.edu-meta{font-size:10px;color:var(--mut);white-space:nowrap}
@media (max-width:760px){.edu-grid{grid-template-columns:1fr}}

/* ---------- 테이블 내 아바타 보정 ----------
   style.css 의 .tbl .who span{display:block} 이 .av 의 flex 중앙정렬을
   덮어쓰는 문제 보정 (직원 목록 등) */
.tbl .who span.av{display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:50%;font-size:11.5px;font-weight:700;
  color:var(--pri);background:var(--pri-bg);flex-shrink:0}

/* ---------- 기타 ---------- */
.empty-state{display:flex;flex-direction:column;align-items:center;gap:6px;padding:38px 14px;text-align:center;color:var(--mut)}
.empty-state i{font-size:26px;color:#c9d2e2}
.empty-state b{font-size:13px;color:var(--sub)}
.empty-state span{font-size:11.5px}
.empty-state.sm-empty{padding:20px 10px}
.empty-state.sm-empty i{font-size:19px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:1100px){.grid-2{grid-template-columns:1fr}}
input[type=range]{accent-color:var(--pri)}

/* KPI 5열 (부서 보드) — 화면폭에 따라 5→3→2열 */
.kpis.k5col{grid-template-columns:repeat(5,1fr)}
@media (max-width:1100px){.kpis.k5col{grid-template-columns:repeat(3,1fr)}}

/* ---------- 모바일 최적화 ---------- */
/* 터치 기기: hover 가 없으므로 삭제 버튼 상시 노출 */
@media (hover:none){
  .ck-del,.cm-del,.ck-row .ck-del,.file-row .ck-del{opacity:.55}
}
@media (max-width:768px){
  .kpis.k5col{grid-template-columns:repeat(2,1fr);gap:8px}
  /* 캘린더: 뭉개지지 않게 가로 스크롤로 전환 */
  .cal{min-width:580px}
  /* 상단바 업무등록 버튼 — 아이콘만 */
  .hide-m{display:none}
  /* 체크시트 날짜 네비 줄바꿈 */
  .sh-datenav{flex-wrap:wrap}
  .sh-datenav form{flex:1;min-width:150px}
  .sh-datenav .btn{flex:0 0 auto}
  /* 항목 추가 폼 세로 스택 */
  .sh-item-add .inp{width:100%!important;flex:1 1 100%}
  .sh-item-add .btn{width:100%}
  /* 업무 상세 사이드 정보 */
  .kv-row>span{width:76px}
  .file-up{flex-wrap:wrap}
  .file-up .inp{flex:1 1 100%}
}
@media (max-width:760px){
  .dp-grid{grid-template-columns:1fr 1fr}
  .sh-grid{grid-template-columns:1fr}
  .kpis.k4col{grid-template-columns:repeat(2,1fr)!important}
  .sheet-sum-row .nm{width:110px}
}
@media (max-width:480px){
  .dp-grid{grid-template-columns:1fr}
  .kpis.k5col{grid-template-columns:1fr 1fr;gap:7px}
  .sheet-sum-row .nm{width:92px}
  .act-tm{display:none}
}