@charset "UTF-8";
/*
    일일업무 관련 화면

      .mt-*   대시보드 > 내업무        (오늘 것만 체크)
      .ht-*   이력 > 담당자업무이력    (담당자 × 날짜 격자)
      .ma-*   설정 > 메뉴권한
      .cfg-tasks-*  담당자 모달의 업무 배정 (OPS_CRUD 의 tasks 타입)
*/

/* ══════════════════════════════════════════════════════
   내업무
   ══════════════════════════════════════════════════════ */

/*
    왼쪽 = 담당 사이트 + 오늘 업무 (오늘 해야 하는 정해진 일)
    오른쪽 = 할 일        (언젠가까지 해야 하는 내 일)

    둘을 반씩 나눈다. 할 일이 달력으로도 열리기 때문이다 —
    달력은 한 주가 일곱 칸이라 좁으면 어느 칸도 글이 안 들어간다.
    왼쪽은 그 절반 안에서 사이트 카드를 두 개씩 늘어놓는다.
    minmax(0,...) 인 이유는 긴 제목이 칸을 밀어내지 못하게 하려는 것이다.
*/
.mt-page{
    display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
    gap:12px; align-items:start;
}
.mt-col{ display:flex; flex-direction:column; gap:12px; min-width:0; }

/* 나란히 두기엔 좁아지면 위아래로 쌓는다 */
@media (max-width: 1150px){
    .mt-page{ grid-template-columns:minmax(0, 1fr); }
}

.mt-card{
    background:#fff; border:1px solid #e3e8f0; border-radius:10px; padding:16px 18px;
}

.mt-head{
    display:flex; align-items:center; justify-content:space-between;
    gap:12px; flex-wrap:wrap;
}
.mt-head__left,
.mt-head__right{ display:flex; align-items:center; gap:10px; }
.mt-head h2{ font-size:17px; font-weight:700; color:#1b2b46; margin:0; }

.mt-prog{
    display:inline-block; min-width:44px; margin-left:6px; padding:1px 9px;
    background:#eef3fa; color:#0a529d; border-radius:11px;
    font-size:13px; font-weight:700; text-align:center;
}
.mt-who{ font-size:13px; color:#41506a; }
.mt-date{ font-size:14px; font-weight:600; color:#0a529d; }

.mt-note{
    margin:10px 0 12px; padding:9px 12px;
    background:#f6f9fd; border:1px solid #e3ecf7; border-radius:6px;
    font-size:12px; color:#41506a;
}

.mt-body{ max-height:calc(100vh - 330px); min-height:240px; overflow-y:auto; }

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

.mt-row{
    display:flex; align-items:center; gap:12px;
    padding:11px 12px; border:1px solid #eef1f6; border-radius:8px; margin-bottom:7px;
}
.mt-row.is-on{ background:#f3faf5; border-color:#d3ecdb; }

.mt-label{
    flex:0 0 auto; display:flex; align-items:center; gap:9px;
    min-width:320px; cursor:pointer;
}
.mt-label input{ width:18px; height:18px; flex:0 0 auto; cursor:pointer; }
.mt-nm{ font-size:15px; color:#1b2b46; }

.mt-cycle{
    padding:1px 8px; border-radius:9px;
    background:#eef3fa; color:#0a529d; font-size:11px; font-weight:700; white-space:nowrap;
}
.mt-cycle--once{ background:#fff3e0; color:#b06a00; }

.mt-memo{ flex:1 1 auto; min-width:0; height:34px; font-size:13px; }
.mt-done{
    flex:0 0 auto; width:90px; text-align:right;
    font-size:12px; color:#1f7a45; font-weight:600;
}

@media (max-width: 1100px){
    .mt-row{ flex-wrap:wrap; }
    .mt-label{ min-width:0; flex:1 1 100%; }
    .mt-done{ width:auto; }
}

/* ══════════════════════════════════════════════════════
   담당자업무이력
   ══════════════════════════════════════════════════════ */

.ht-page{ display:flex; flex-direction:column; gap:12px; }

.ht-tool{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    background:#fff; border:1px solid #e3e8f0; border-radius:10px; padding:12px 16px;
    flex-wrap:wrap;
}
.ht-tool__left,
.ht-tool__right{ display:flex; align-items:center; gap:8px; }
.ht-total{ font-size:14px; color:#41506a; }
.ht-total b{ color:#0a529d; font-weight:700; }
.ht-tool .form-control{ height:36px; }
.ht-tool #htMgr{ width:150px; }
.ht-tool #htFrom,
.ht-tool #htTo{ width:150px; }
.ht-tilde{ color:#8a94a6; }

.ht-legend{
    display:flex; align-items:center; gap:16px;
    font-size:12px; color:#6b7688;
}
.ht-sw{
    display:inline-block; width:14px; height:14px; border-radius:3px;
    vertical-align:-2px; margin-right:4px; border:1px solid #dfe5ee;
}

.ht-grid-scroll{
    background:#fff; border:1px solid #e3e8f0; border-radius:10px; padding:12px 14px;
    max-height:calc(100vh - 470px); min-height:200px; overflow:auto;
}

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

.ht-table{ border-collapse:separate; border-spacing:3px; font-size:12px; }
.ht-table th{
    padding:5px 7px; color:#41506a; font-weight:700; white-space:nowrap; text-align:center;
}
.ht-table th.ht-mgr{
    position:sticky; left:0; z-index:1;
    background:#fff; text-align:left; min-width:100px;
}

.ht-cell{
    width:52px; height:30px; text-align:center; border-radius:4px;
    cursor:pointer; font-weight:600; white-space:nowrap;
    border:1px solid transparent;
}
.ht-cell.is-full{ background:#eaf6ee; color:#1f7a45; }
.ht-cell.is-part{ background:#fdf1dc; color:#a3670a; }
.ht-cell.is-zero{ background:#fdecee; color:#c9313d; }
.ht-cell.is-none{ background:#f4f6f9; color:#b6bdc9; cursor:default; }
.ht-cell.is-sel { border-color:#0a529d; box-shadow:0 0 0 1px #0a529d inset; }

/* 범례 색을 칸과 맞춘다 */
.ht-sw.is-full{ background:#eaf6ee; }
.ht-sw.is-part{ background:#fdf1dc; }
.ht-sw.is-zero{ background:#fdecee; }
.ht-sw.is-none{ background:#f4f6f9; }

.ht-detail{
    background:#fff; border:1px solid #e3e8f0; border-radius:10px; padding:12px 16px;
    max-height:230px; overflow-y:auto;
}
.ht-detail__head{
    padding-bottom:8px; border-bottom:1px solid #e6eaf1; margin-bottom:8px;
    font-size:14px; color:#41506a;
}
.ht-detail__head b{ color:#1b2b46; }

.ht-drow{
    display:flex; align-items:center; gap:10px;
    padding:7px 10px; border:1px solid #eef1f6; border-radius:6px; margin-bottom:5px;
    font-size:13px;
}
.ht-drow.is-on{ background:#f3faf5; border-color:#d3ecdb; }
.ht-dstate{
    flex:0 0 auto; width:52px; text-align:center; padding:2px 0; border-radius:9px;
    font-size:11px; font-weight:700; background:#fdecee; color:#c9313d;
}
.ht-drow.is-on .ht-dstate{ background:#eaf6ee; color:#1f7a45; }
.ht-dnm{ flex:0 0 auto; min-width:220px; color:#1b2b46; }
.ht-dcycle{
    flex:0 0 auto; padding:1px 8px; border-radius:9px;
    background:#eef3fa; color:#0a529d; font-size:11px; font-weight:700;
}
.ht-dtm{ flex:0 0 auto; width:50px; color:#6b7688; }
.ht-dmemo{
    flex:1 1 auto; min-width:0; color:#6b7688;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* ══════════════════════════════════════════════════════
   메뉴권한
   ══════════════════════════════════════════════════════ */

.ma-note{
    margin:0 0 12px; padding:9px 12px;
    background:#fff8f0; border:1px solid #f5e2cc; border-radius:6px;
    font-size:12px; color:#8a6a3a;
}
.ma-note b{ color:#a3670a; }

.ma-menus{ white-space:normal !important; line-height:1.6; }

.ma-pick__tool{ display:flex; gap:6px; margin-bottom:10px; }

.ma-pick{
    display:flex; flex-direction:column; gap:6px;
    padding:10px; border:1px solid #e3e8f0; border-radius:6px; background:#fafbfd;
}
.ma-pick__item{
    display:flex; align-items:center; gap:8px;
    padding:7px 9px; border:1px solid #e6eaf1; border-radius:6px;
    background:#fff; cursor:pointer; font-size:13px; color:#1b2b46;
}
.ma-pick__item:has(input:checked){ border-color:#0a529d; background:#eef4fc; }
.ma-pick__item input{ width:15px; height:15px; flex:0 0 auto; cursor:pointer; }
.ma-pick__item i{
    margin-left:auto; font-style:normal; font-size:11px; color:#8a94a6;
}

/* ══════════════════════════════════════════════════════
   담당자 모달 : 업무 배정 (OPS_CRUD tasks 타입)
   ══════════════════════════════════════════════════════ */

.cfg-tasks{
    display:flex; flex-direction:column; gap:6px;
    padding:10px; border:1px solid #e3e8f0; border-radius:6px; background:#fafbfd;
}
.cfg-tasks__item{
    display:flex; align-items:center; gap:8px;
    padding:7px 9px; border:1px solid #e6eaf1; border-radius:6px;
    background:#fff; font-size:13px; color:#1b2b46;
}
.cfg-tasks__item:has(input:checked){ border-color:#0a529d; background:#eef4fc; }
.cfg-tasks__nm{
    flex:1 1 auto; min-width:0; display:flex; align-items:center; gap:8px; cursor:pointer;
}
.cfg-tasks__nm input{ width:15px; height:15px; flex:0 0 auto; cursor:pointer; }
.cfg-tasks__nm > span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cfg-task-cycle{
    flex:0 0 auto; width:86px; height:30px; font-size:12px; padding:0 8px;
}
.cfg-task-cycle:disabled{ background:#f4f6f9; color:#a9b2c1; }
.cfg-tasks__item i{
    flex:0 0 auto; font-style:normal; font-size:11px; color:#8a94a6;
}

@media (max-width: 1100px){
    .ht-tool__right{ flex-wrap:wrap; }
    .ht-dnm{ min-width:140px; }
}

/* ── 내업무 맨 위 : 담당 사이트 지표 ─────────────────────
   업무보다 위에 두되 작게. 여기가 커지면 정작 오늘 업무가 밀린다.
   한 카드 = [사이트명] + 오른쪽에 지표 두 줄. */

/* 카드 사이 간격은 .mt-col 의 gap 이 맡는다 (margin 을 겹쳐 주지 않는다) */
.mt-sites .mt-head{ margin-bottom:8px; }

/* 한 줄에 두 개로 못 박는다. auto-fill 로 두면 화면 폭에 따라 셋이 되기도 해서
   카드 크기가 오락가락하고, 왼쪽 칸 폭도 같이 흔들린다 */
.mt-sitebody{
    display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px;
}

.mt-site{
    display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:center;
    padding:9px 12px; border:1px solid #e6eaf1; border-radius:8px; background:#fcfdff;
}
.mt-site__nm{
    max-width:120px;
    font-size:14px; font-weight:700; color:#243247; line-height:1.3;
    word-break:keep-all;
}
.mt-site__m{ display:flex; flex-direction:column; gap:3px; min-width:0; }

/* 지표 한 줄 : 이름 · 값 · 등락 */
.mt-line{
    display:grid; grid-template-columns:1fr auto auto; gap:8px; align-items:baseline;
}
.mt-line i{
    font-style:normal; font-size:11px; color:#8a94a6;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.mt-line b{
    font-size:15px; font-weight:700; color:#1b2b46; letter-spacing:-.2px;
}
/* 등급을 값 색으로 대신한다 (배지를 두면 줄이 길어진다) */
.mt-line b.is-good{ color:#1f7a45; }
.mt-line b.is-mid{  color:#a3670a; }
.mt-line b.is-bad{  color:#c9313d; }

.mt-line .mt-na{ font-size:12px; font-weight:600; color:#a9b2c1; }
.mt-line.is-empty i{ color:#c3cad6; }

/* 등락 — 감지율·정확도는 높을수록 좋다 */
.mt-diff{ font-size:11px; font-weight:700; min-width:52px; text-align:right; }
.mt-diff.is-up{   color:#1f7a45; }
.mt-diff.is-down{ color:#c9313d; }
.mt-diff.is-flat{ color:#77839a; font-weight:600; }
.mt-diff.is-none{ color:#c3cad6; font-weight:400; }

.mt-sites .mt-empty{ grid-column:1 / -1; }

@media (max-width:700px){
    .mt-sitebody{ grid-template-columns:1fr; }
    .mt-site__nm{ max-width:none; }
}

/* ══════════════════════════════════════════════════════
   내업무 오른쪽 : 할 일 (개인)

   .td-* 는 이 목록 전용이다. 왼쪽 일일업무(.mt-row)와 모양을 일부러
   다르게 뒀다 — 체크 칸이 나란히 둘이면 어느 쪽을 체크했는지 헷갈린다.
   ══════════════════════════════════════════════════════ */

.td-card{ display:flex; flex-direction:column; }

/* 기한이 지난 것이 있으면 제목 옆에서 먼저 알린다 */
.td-warn{
    padding:2px 9px; border-radius:10px;
    background:#eef3fa; color:#41506a; font-size:12px; font-weight:600; white-space:nowrap;
}
.td-warn.is-over{ background:#fdecee; color:#c9313d; }

/* ── 탭 (전체 · 미완료 · 완료) ─────────────────────────── */

.td-tabs{
    display:flex; gap:6px; margin:10px 0 0;
    border-bottom:1px solid #e3e8f0; padding-bottom:10px;
}
.td-tab{
    flex:1 1 0; padding:7px 4px; border:1px solid #dfe5ee; border-radius:16px;
    background:#fff; color:#41506a; font-family:inherit; font-size:13px;
    cursor:pointer; white-space:nowrap;
}
.td-tab:hover{ border-color:#9dc0ee; color:#0a529d; }
.td-tab.is-on{ background:#0a529d; border-color:#0a529d; color:#fff; font-weight:700; }
.td-tab b{ font-weight:700; margin-left:2px; }

.td-hint{ margin:9px 2px 8px; font-size:12px; color:#77839a; }
.td-hint b{ color:#41506a; }

/* 왼쪽 오늘 업무 칸과 높이를 맞춘다 — 둘이 들쭉날쭉하면 화면이 어수선하다 */
.td-body{ max-height:calc(100vh - 360px); min-height:240px; overflow-y:auto; }

/* ── 한 줄 : [체크] [업무명] [종료날짜] ─────────────────── */

.td-row{
    display:grid; grid-template-columns:auto minmax(0, 1fr) auto;
    align-items:center; gap:10px;
    padding:9px 10px; border:1px solid #eef1f6; border-radius:8px; margin-bottom:6px;
    cursor:pointer;
}
.td-row:hover{ background:#f6faff; border-color:#dce8f6; }
.td-row.is-on{ background:#f6f8fa; border-color:#e6eaf1; }

/* 체크 자리는 줄 누르기에서 빼 둔다 (JS 가 .td-chk 를 걸러낸다).
   손가락 · 마우스가 빗나가도 되게 여백을 넉넉히 준다 */
.td-chk{
    display:flex; align-items:center; padding:2px 4px; margin:-2px -4px; cursor:pointer;
}
.td-chk input{ width:18px; height:18px; cursor:pointer; }

.td-nm{
    min-width:0; font-size:14px; color:#1b2b46; line-height:1.45;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.td-row.is-on .td-nm{ color:#8a94a6; text-decoration:line-through; }

/* 상세 내용이 있다는 표시. 열어 볼 값이 있는지 목록에서 알 수 있게 */
.td-hasnote{
    margin-left:6px; font-style:normal; font-size:12px; color:#0a529d; vertical-align:1px;
}
.td-row.is-on .td-hasnote{ color:#b3bccb; }

/* ── 종료날짜 — 색이 곧 급한 정도다 ────────────────────── */

.td-due{
    flex:0 0 auto; padding:2px 8px; border-radius:10px;
    font-size:12px; font-weight:700; white-space:nowrap;
}
.td-due.is-over { background:#c9313d; color:#fff; }   /* 지났다 */
.td-due.is-today{ background:#e8833a; color:#fff; }   /* 오늘까지 */
.td-due.is-soon { background:#fdf1dc; color:#a3670a; }/* 사흘 안 */
.td-due.is-far  { background:#eef3fa; color:#41506a; }
.td-due.is-done { background:#eaf6ee; color:#1f7a45; }
.td-due.is-none { background:#f4f6f9; color:#a9b2c1; font-weight:400; }

/* ── 모달 ───────────────────────────────────────────────── */

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

/* 완료 체크. 일정의 '종일' 칸과 같은 모양이라 따로 배울 것이 없다 */
.td-doneline{
    display:flex; align-items:center; gap:8px;
    margin:0 0 14px; padding:9px 12px;
    border:1px solid #dfe5ee; border-radius:8px; background:#fafbfd; cursor:pointer;
}
.td-doneline input{ width:18px; height:18px; flex:0 0 auto; cursor:pointer; }
.td-doneline b{ font-size:13.5px; font-weight:700; color:#1b2b46; }
.td-doneline i{ font-style:normal; font-size:12px; color:#626f85; }

/* 종료날짜 + 빠른 버튼. 날짜를 매번 손으로 찍게 하면 결국 안 적는다 */
.td-duerow{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.td-duerow input[type=date]{ width:170px; flex:0 0 auto; }
.td-duerow .td-quick{ flex:0 0 auto; height:36px; width:auto; padding:0 12px; }

.td-ta{ height:40px; }   /* 편집기가 대신 뜨므로 잠깐 보이는 높이만 */
.td-modal .ed__body{ min-height:220px; max-height:none; }

/* ── 공유 표시 ──────────────────────────────────────────
   남이 나눠 준 일인지, 내가 나눈 일인지를 목록에서 바로 알 수 있게.
   업무명 뒤에 작게 붙여 제목을 밀어내지 않는다. */

.td-from, .td-shared{
    margin-left:6px; padding:1px 7px; border-radius:9px;
    font-style:normal; font-size:11px; font-weight:700; white-space:nowrap;
    vertical-align:1px;
}
.td-from  { background:#efe7fb; color:#5b34a0; }   /* 남이 나에게 나눠 준 것 */
.td-shared{ background:#e6f2ea; color:#1f7a45; }   /* 내가 남에게 나눈 것 */
.td-row.is-on .td-from,
.td-row.is-on .td-shared{ background:#f0f2f5; color:#a9b2c1; }

/* ── 보기 전환 · 달력형 ─────────────────────────────────
   .sc-view / .sc-viewbtn 모양은 미팅일정 것(sched.css)을 그대로 쓴다. */

.td-card .sc-view{ height:32px; }
.td-card .sc-viewbtn{ padding:0 14px; font-size:12.5px; }

.td-calbar{
    display:flex; align-items:center; flex-wrap:wrap; gap:6px;
    margin:10px 0 8px; padding-bottom:10px; border-bottom:1px solid #e3e8f0;
}
.td-calbar .sc-ym{ margin:0 4px; font-size:15px; font-weight:700; color:#1b2b46; }

/* 휴가 · 미팅 겹쳐 보기. 오른쪽 끝에 붙여 월 이동과 섞이지 않게 */
.td-see{
    display:inline-flex; align-items:center; gap:5px;
    padding:5px 10px; border:1px solid #dfe5ee; border-radius:16px;
    background:#fff; cursor:pointer; white-space:nowrap;
}
.td-see:first-of-type{ margin-left:auto; }
.td-see input{ width:15px; height:15px; cursor:pointer; }
.td-see b{ font-size:12.5px; font-weight:600; color:#41506a; }
.td-see:has(input:checked){ border-color:#0a529d; background:#eef4fc; }
.td-see:has(input:checked) b{ color:#0a529d; font-weight:700; }

/* 오른쪽 칸에 들어가는 달력이라 미팅일정보다 잘게 둔다 */
.td-calonly .sc-cell{ padding:3px 3px 4px; }
.td-calonly .sc-ev{ font-size:11px; padding:1px 5px; }
.td-calonly .sc-hint{ margin-top:8px; }

/* 할 일 막대 색. 휴가 · 미팅 색과 겹치지 않는 파랑을 쓴다
   (--evi 는 막대 안 흰 알약의 글씨색 — sched.css 참고) */
.sc-t-TODO    { background:#1359c0; --evi:#1359c0; }
.sc-t-TODODONE{ background:#9aa6b8; --evi:#5c6b80; }

/* ── 모달 : 공유 대상 고르기 ───────────────────────────── */

.td-sub{ font-style:normal; font-weight:400; color:#8b95a6; font-size:12px; margin-left:4px; }

.td-share{
    display:flex; flex-wrap:wrap; gap:6px;
    max-height:132px; overflow-y:auto;
    padding:9px 10px; border:1px solid #dfe5ee; border-radius:8px; background:#fafbfd;
}

/* 공유받은 일이라 보기만 되는 경우 */
.td-readonly{
    margin:0 0 14px; padding:10px 12px;
    border:1px solid #ffe0b2; border-left-width:4px; border-radius:6px;
    background:#fffaf2; color:#8a5a00; font-size:13px; line-height:1.6;
}
.td-readonly b{ color:#6b4500; }

.td-modal input:disabled,
.td-modal textarea:disabled,
.td-modal select:disabled{ background:#f5f7fa; color:#6b7688; cursor:not-allowed; }
.td-share input:disabled + b{ color:#8a94a6; }

@media (max-width: 1024px){
    .td-body{ max-height:none; min-height:0; }
    .td-duerow input[type=date]{ width:100%; }
    .td-see:first-of-type{ margin-left:0; }
}