/* 주간업무.css — 「업무 › 내 주간업무」 화면의 규칙.
   style.css 를 키우지 않으려고 따로 뒀다(지원금.css·거래내역.css 와 같은 방식).

   **미디어쿼리는 반드시 `@media screen and (...)`.** A4 본문폭 170mm 는 CSS 픽셀로 약 643px 이라
   범위를 열어두면 인쇄할 때 모바일 규칙이 발동한다.

   이 화면은 요일 5칸을 한 줄에 놓기 때문에 본문이 좁으면 카드가 뭉개진다.
   그래서 이 화면일 때만 본문 폭을 넓힌다(19_주간업무.js 가 body 에 .wk-wide 를 붙인다). */

:root{
  /* 칩 색 — style.css 에 없는 것만 더한다. 여섯 색을 목록 **순서대로** 돌려 쓴다. */
  --blue:#1d4ed8; --blue-l:#e8eefc; --purple:#7c3aed; --purple-l:#f3e8fc;
  --teal:#0f766e; --teal-l:#e0f2f0; --pink:#a21657; --pink-l:#fce8f1;
}
body.wk-wide main{max-width:1180px}

/* ── 페이지 머리 ── */
.wk-head{margin-bottom:18px;display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap}
.wk-head h1{font-size:22px;font-weight:800;letter-spacing:-.01em}
.wk-head .sub{color:var(--gray);font-size:13.5px;margin-top:3px}
.wk-nav{display:flex;align-items:center;gap:6px}
.wk-nav .btn{padding:6px 11px}
.wk-nav .wk-label{font-size:13px;font-weight:700;padding:0 4px;min-width:96px;text-align:center}
/* 같은 팀 구성원 고르기 (남의 자료는 읽기 전용으로 열린다) */
.mem-sel{padding:6px 9px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;
  font-size:13px;font-weight:600;margin-right:6px;max-width:170px}

/* ── 통계 타일 ── */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:16px;align-items:stretch}
.tile{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:15px 18px;display:flex;flex-direction:column}
.tile .t-label{font-size:12.5px;color:var(--gray);font-weight:600}
.tile .t-value{font-size:25px;font-weight:800;letter-spacing:-.02em;margin-top:5px;line-height:1.1}
.tile .t-value small{font-size:14px;font-weight:600;color:var(--gray)}
.tile .t-foot{font-size:12px;color:var(--gray);margin-top:3px}
.tile.accent{background:var(--green);border-color:var(--green);color:#fff}
.tile.accent .t-label,.tile.accent .t-foot{color:rgba(255,255,255,.8)}
.tile.accent .t-value small{color:rgba(255,255,255,.75)}
.tile .t-btn{margin-top:auto;padding-top:11px}
.tile .t-btn .btn{width:100%}
.wk-bar{height:6px;border-radius:4px;background:var(--line);overflow:hidden;margin-top:9px}
.wk-bar > span{display:block;height:100%;background:var(--green);border-radius:4px;transition:width .25s}
.tile.accent .wk-bar{background:rgba(255,255,255,.25)}
.tile.accent .wk-bar > span{background:#fff}

/* ── 업무영역 칩 ──
   분류는 사람마다 자기가 만든다. 이름을 미리 알 수 없으니 색을 이름에 못 묶는다 —
   목록 **순서대로** 여섯 색을 돌려 쓴다(wkCatCls). 일곱 번째부터는 첫 색으로 돌아온다. */
.cat{display:inline-block;padding:1px 8px;border-radius:11px;font-size:11px;font-weight:700;white-space:nowrap}
.cat-c0{background:var(--green-l);color:var(--green)}
.cat-c1{background:var(--blue-l);color:var(--blue)}
.cat-c2{background:var(--amber-l);color:var(--amber)}
.cat-c3{background:var(--purple-l);color:var(--purple)}
.cat-c4{background:var(--teal-l);color:var(--teal)}
.cat-c5{background:var(--pink-l);color:var(--pink)}

/* ── 이번 주 계획 요약 ── */
.plan-sum{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.plan-row{border:1px solid var(--line);border-radius:8px;padding:13px 15px}
.plan-row .pr-top{display:flex;align-items:center;gap:9px;margin-bottom:7px}
.plan-row .pr-ico{width:26px;height:26px;border-radius:7px;display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:800}
.plan-row .pr-name{font-weight:800;font-size:13.5px}
.plan-row .pr-cnt{font-size:11.5px;color:var(--gray);margin-left:auto;font-weight:600}
.plan-row ul{list-style:none;margin:0;padding:0}
.plan-row li{font-size:12.5px;color:#374151;padding-left:12px;position:relative;line-height:1.55}
.plan-row li::before{content:'·';position:absolute;left:2px;color:var(--gray)}
.plan-row.pr-empty li{color:var(--gray)}
.pc-0{background:var(--green-l);color:var(--green)} .pc-1{background:var(--blue-l);color:var(--blue)}
.pc-2{background:var(--amber-l);color:var(--amber)} .pc-3{background:var(--purple-l);color:var(--purple)}
.pc-4{background:var(--teal-l);color:var(--teal)}   .pc-5{background:var(--pink-l);color:var(--pink)}

/* ── 다른 날에 추가 (모달) ──
   날짜 하나만 고르면 그 주의 그 요일로 들어간다. 넣은 뒤에도 창을 닫지 않고
   방금 넣은 것을 아래에 쌓아 보여 준다 — 어디로 갔는지 눈으로 확인하는 자리다. */
.lt-form{display:flex;flex-direction:column;gap:10px}
.lt-row{display:flex;align-items:center;gap:10px}
.lt-row label{flex:0 0 62px;font-size:13px;font-weight:700;color:var(--gray)}
.lt-row input,.lt-row select{flex:1;min-width:0;font:inherit;font-size:13.5px;
  border:1px solid var(--line);border-radius:6px;padding:8px 10px;background:#fff}
.lt-row input:focus,.lt-row select:focus{outline:none;border-color:var(--green)}
.lt-hint{font-size:12px;color:var(--gray);line-height:1.6}
.lt-done{border-top:1px dashed var(--line);padding-top:10px;margin-top:2px;
  max-height:34vh;overflow-y:auto}
.lt-done-h{font-size:12px;font-weight:700;color:var(--green);margin-bottom:6px}
.lt-done-i{display:flex;align-items:center;gap:8px;padding:5px 0;font-size:12.5px;min-width:0}
.lt-when{flex:0 0 auto;font-weight:700;color:var(--gray);font-variant-numeric:tabular-nums}
.lt-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lt-moved{flex:0 0 auto;font-size:11px;font-weight:700;color:var(--amber);
  background:var(--amber-l);border-radius:9px;padding:1px 7px}
/* 카드 머리의 안내와 단추 — 좁은 화면에서는 아래로 접힌다 */
.wk-head-r{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}

/* ── 업무영역 관리 (모달) ── */
.wc-list{display:flex;flex-direction:column;gap:8px;margin:14px 0}
.wc-row{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:8px;padding:8px 10px}
.wc-row .wc-name{flex:1;font:inherit;font-size:13.5px;font-weight:700;border:1px solid transparent;border-radius:6px;padding:3px 6px;background:transparent}
.wc-row .wc-name:focus{outline:none;border-color:var(--green);background:#fff}
.wc-row .wc-cnt{font-size:11.5px;color:var(--gray);font-weight:600;white-space:nowrap}
.wc-row .ord-btn{font-size:11px}
.wc-x{color:var(--gray);font-size:12px;cursor:pointer;padding:0 2px}
.wc-x:hover{color:var(--red)}
.wc-add{display:flex;gap:8px;margin-top:4px}
.wc-add input{flex:1;font:inherit;font-size:13.5px;border:1px solid var(--line);border-radius:6px;padding:7px 9px}
.wc-add input:focus{outline:none;border-color:var(--green)}
.wc-help{font-size:12px;color:var(--gray);line-height:1.6;margin-top:10px}

/* ── 요일 보드 (화·수·목·금·월을 한 화면에, 카드를 끌어 옮긴다) ── */
.board{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;align-items:start}
.bcol{background:#fafbfa;border:1px solid var(--line);border-radius:8px;padding:9px;
  display:flex;flex-direction:column;gap:8px;min-width:0}
.bcol.today{border-color:var(--green);box-shadow:0 0 0 2px var(--green-l)}
.bcol.over{border-color:var(--green);background:var(--green-l)}
.bcol-head{display:flex;align-items:baseline;justify-content:space-between;gap:6px;padding:1px 3px}
.bcol-dow{font-size:13px;font-weight:800}
.bcol.today .bcol-dow{color:var(--green)}
.bcol-date{font-size:11.5px;font-weight:600;color:var(--gray);margin-left:4px}
.bcol-cnt{font-size:11.5px;font-weight:700;color:var(--gray);white-space:nowrap}
.bcol-cnt b{color:var(--green)}
.bcards{display:flex;flex-direction:column;gap:7px;min-height:34px}
.bcol-empty{font-size:12px;color:#9aa2a8;text-align:center;padding:11px 0;border:1px dashed var(--line);border-radius:7px}
/* 카드 높이는 내용(줄바뀜)을 따라간다 — 고정 높이·줄임표 없음. 한글은 낱말 단위로 넘긴다. */
.bcard{background:#fff;border:1px solid var(--line);border-radius:7px;padding:8px 9px;cursor:grab;transition:.12s}
.bcard:hover{border-color:var(--green);box-shadow:0 1px 5px rgba(0,0,0,.07)}
.bcard.dragging{opacity:.4;cursor:grabbing}
.bcard.done{background:#f7f8f7}
.bcard.ro{cursor:default}
.bcard.ro:hover{border-color:var(--line);box-shadow:none}
.bc-top{display:flex;align-items:center;gap:6px;margin-bottom:6px}
.bc-chk{flex:0 0 auto;width:17px;height:17px;border:2px solid var(--line);border-radius:5px;background:#fff;
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:11px;cursor:pointer;transition:.12s}
.bc-chk:hover{border-color:var(--green)}
.bcard.done .bc-chk{background:var(--green);border-color:var(--green)}
.bcard.ro .bc-chk{cursor:default}
.bcard.ro .bc-chk:hover{border-color:var(--line)}
.bc-x{margin-left:auto;color:var(--gray);font-size:11px;opacity:0;cursor:pointer;transition:.12s}
.bcard:hover .bc-x{opacity:.5}
.bc-x:hover{color:var(--red);opacity:1}
.bc-title{font-size:13px;font-weight:600;line-height:1.5;word-break:keep-all;overflow-wrap:anywhere;cursor:text}
.bc-title:hover{color:var(--green)}
.bcard.done .bc-title{color:var(--gray);text-decoration:line-through}
.bcard.ro .bc-title{cursor:default}
.bcard.ro .bc-title:hover{color:inherit}
.bc-edit{min-width:0;width:100%;font-size:13px}
.bcard .cat{cursor:pointer}
.bcard.ro .cat{cursor:default}
.bc-foot{display:flex;align-items:center;gap:8px;margin-top:6px;font-size:11.5px;color:var(--gray)}
.bcol-add{border:1px dashed var(--line);background:#fff;border-radius:7px;padding:7px;width:100%;
  color:var(--gray);font-size:12.5px;font-weight:600;cursor:pointer;transition:.12s}
.bcol-add:hover{border-color:var(--green);color:var(--green);background:var(--green-l)}
/* 요일 칸 안의 추가 폼 — 칸이 좁으니 세로로 쌓고, **어느 칸도 칸 밖으로 못 나간다.**
   `min-width:0` 이 핵심이다. flex 항목의 기본값은 `min-width:auto` 라 내용(select 의
   가장 긴 업무영역 이름)만큼 벌어져 칸을 밀고 나간다 — 실제로 그렇게 새어 나왔다. */
.bcol .add-form{padding:9px;gap:6px;flex-direction:column;align-items:stretch;
  max-width:100%;overflow:hidden}
.bcol .add-form input,
.bcol .add-form select,
.bcol .add-form textarea{width:100%;max-width:100%;min-width:0}
/* 업무영역 이름이 길면 …로 줄인다(칸을 넓히지 않는다) */
.bcol .add-form select{text-overflow:ellipsis}
.bcol .add-row{display:flex;gap:6px;min-width:0}
.bcol .add-row .btn{flex:1 1 0;min-width:0;padding:6px 8px;font-size:12.5px;white-space:nowrap}
/* 할 일 내용은 textarea — 줄이 넘치면 아래로 자란다(wkAutoGrow). 한 줄 input 은
   길어지면 옆으로 흘러 앞부분이 안 보인다. 한글은 낱말 단위로 넘긴다. */
.add-title{padding:8px 11px;border:1px solid var(--line);border-radius:6px;font-size:13px;
  font-family:inherit;line-height:1.5;resize:none;overflow:hidden;
  word-break:keep-all;overflow-wrap:anywhere}
.add-title:focus{outline:2px solid var(--green-l);border-color:var(--green)}
/* 손가락으로는 끌 수 없다 — 좁은 화면에서는 카드 안 드롭다운으로 옮긴다.
   A4 본문폭(170mm≈643px)과 겹치므로 반드시 screen 한정(인쇄에 모바일 규칙이 걸리면 안 된다). */
.bc-move{display:none;width:100%;margin-top:7px;border:1px solid var(--line);border-radius:6px;
  padding:4px 6px;font-size:11.5px;color:var(--gray);background:#fff}
@media screen and (max-width:900px){
  .board{grid-template-columns:repeat(5,minmax(178px,1fr));overflow-x:auto;padding-bottom:6px}
  .bcard{cursor:default}
  .bc-move{display:block}
  .bc-ord{display:inline-flex}          /* 끌 수 없는 화면에서는 ▲▼ 로 순서를 바꾼다 */
}
/* 놓일 자리 — 끌고 있는 카드가 이 카드의 위/아래 중 어디로 들어가는지 선으로 보인다.
   테두리를 쓰면 카드가 밀리므로 그림자로 긋는다. */
.bcard.drop-before{box-shadow:0 -3px 0 -1px var(--green)}
.bcard.drop-after{box-shadow:0 3px 0 -1px var(--green)}
.day-note{font-size:12.5px;color:var(--amber);background:var(--amber-l);border-radius:6px;padding:7px 11px;margin-bottom:12px;font-weight:600}

/* ── 우선순위 손잡이 (▲▼ — 같은 요일 안에서 한 칸씩) ──
   보드에서는 카드를 끌어 자리를 정하는 것이 기본이고, ▲▼ 는 끌 수 없는 좁은 화면(터치)용이라
   기본은 숨긴다(.bc-move 와 같은 규칙). */
.ord{display:inline-flex;gap:2px;flex:0 0 auto}
.ord-btn{width:19px;height:17px;border:1px solid var(--line);border-radius:5px;background:#fff;color:var(--gray);
  font-size:9px;line-height:1;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center}
.ord-btn:hover:not(:disabled){background:var(--green-l);border-color:var(--green);color:var(--green-d)}
.ord-btn:disabled{opacity:.28;cursor:default}
.bc-ord{display:none}
.bc-top .cat{margin-right:auto}        /* 칩 뒤의 손잡이(▲▼·✕)는 오른쪽에 붙는다 */
.bcard .bc-x{margin-left:4px}

/* ── 오늘 할 일 — 왼쪽 요일 선택 란 ── */
.today-wrap{display:flex;gap:14px;align-items:flex-start}
.daypick{flex:0 0 104px;display:flex;flex-direction:column;gap:6px}
.dp-btn{display:flex;align-items:baseline;gap:5px;width:100%;text-align:left;font-family:inherit;
  border:1px solid var(--line);background:#fff;border-radius:8px;padding:8px 10px;cursor:pointer;transition:.12s}
.dp-btn:hover{border-color:var(--green);background:var(--green-l)}
.dp-dow{font-size:13.5px;font-weight:800}
.dp-date{font-size:11px;font-weight:600;color:var(--gray)}
.dp-cnt{margin-left:auto;font-size:11px;font-weight:700;color:var(--gray);font-variant-numeric:tabular-nums}
.dp-btn.on{background:var(--green);border-color:var(--green);color:#fff}
.dp-btn.on:hover{background:var(--green-d)}
.dp-btn.on .dp-date,.dp-btn.on .dp-cnt{color:rgba(255,255,255,.82)}
.dp-btn.dp-today .dp-dow::after{content:'●';font-size:7px;vertical-align:middle;margin-left:3px;color:var(--green)}
.dp-btn.on.dp-today .dp-dow::after{color:#fff}
.today-list{flex:1;min-width:0}
@media screen and (max-width:900px){
  .today-wrap{flex-direction:column}
  .daypick{flex:0 0 auto;flex-direction:row;overflow-x:auto;padding-bottom:4px;width:100%}
  .dp-btn{flex:0 0 auto;width:auto}
}

/* ── 할 일 항목 ── */
.dtask{border:1px solid var(--line);border-radius:8px;margin-bottom:9px;overflow:hidden}
.dtask-row{display:flex;align-items:center;gap:11px;padding:11px 14px}
.dcheck{flex:0 0 auto;width:21px;height:21px;border:2px solid var(--line);border-radius:6px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:13px;transition:.12s;background:#fff}
.dcheck:hover{border-color:var(--green)}
.dtask.done .dcheck{background:var(--green);border-color:var(--green)}
/* 남의 자료(읽기 전용) — 손잡이는 그리지 않지만 남은 커서·호버도 죽인다 */
.dtask.ro .dcheck{cursor:default}
.dtask.ro .dcheck:hover{border-color:var(--line)}
.dtask.ro .dtitle .tx{cursor:default}
.dtask.ro .dtitle .tx:hover{color:inherit}
.dbody{flex:1;min-width:0;cursor:pointer}
.dtitle{font-weight:600;font-size:14px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.dtask.done .dtitle .tx{color:var(--gray);text-decoration:line-through}
.dtitle .tx{cursor:text}
.dtitle .tx:hover{color:var(--green)}
/* 할 일 내용 편집칸은 textarea 다 — 한 줄 input 은 글이 길어지면 옆으로 늘어나 앞이 안 보인다.
   줄이 넘치면 아래로 커지게 하고(wkAutoGrow) 스크롤바는 감춘다. */
.tx-edit{padding:3px 8px;border:1px solid var(--green);border-radius:5px;font-size:14px;font-weight:600;
  font-family:inherit;line-height:1.45;flex:1 1 100%;min-width:0;max-width:100%;box-sizing:border-box;
  resize:none;overflow:hidden;word-break:keep-all;overflow-wrap:anywhere}
.tx-edit:focus{outline:2px solid var(--green-l)}
.dtitle .cat{cursor:pointer}
.cat-edit{font-size:12px;padding:2px 5px;border:1px solid var(--green);border-radius:5px;font-family:inherit;font-weight:700}
.cat-edit:focus{outline:2px solid var(--green-l)}
.dmeta{flex:0 0 auto;display:flex;align-items:center;gap:7px;color:var(--gray);font-size:12px;cursor:pointer}
.dmeta .chev{transition:.15s;display:inline-block}
.dtask.open .dmeta .chev{transform:rotate(90deg)}
.dcmt{border-top:1px dashed var(--line);padding:12px 14px;background:#fafbfa}
.cmt-log{font-size:12.5px;padding:5px 0;border-bottom:1px dashed var(--line);display:flex;gap:8px}
.cmt-log:last-of-type{border-bottom:0}
.cmt-log .cw{color:var(--gray);white-space:nowrap;font-weight:600;cursor:pointer}
.cmt-log .cw:hover{color:var(--green)}
.cd-edit{font-size:11.5px;padding:2px 4px;border:1px solid var(--green);border-radius:5px;font-family:inherit}
.cd-edit:focus{outline:2px solid var(--green-l)}
.cmt-empty{font-size:12.5px;color:var(--gray);padding:4px 0 8px}
.cmt-input{display:flex;gap:7px;margin-top:8px}
.cmt-input input{flex:1;padding:8px 11px;border:1px solid var(--line);border-radius:6px;font-size:13px}
.cmt-input input:focus{outline:2px solid var(--green-l);border-color:var(--green)}
.cmt-foot{display:flex;justify-content:flex-end;margin-top:9px}
.del-link{font-size:12px;color:var(--red);cursor:pointer;font-weight:600}
.del-link:hover{text-decoration:underline}
.cmt-log .ct{flex:1;cursor:text}
.cmt-log .ct:hover{color:var(--green)}
.cmt-log .cx{flex:0 0 auto;color:var(--gray);cursor:pointer;font-size:11px;opacity:.55}
.cmt-log .cx:hover{color:var(--red);opacity:1}
.cmt-edit{flex:1;min-width:0;padding:3px 8px;border:1px solid var(--green);border-radius:5px;font-size:12.5px;font-family:inherit}
.cmt-edit:focus{outline:2px solid var(--green-l)}
.day-empty{text-align:center;color:var(--gray);padding:30px 0 24px;font-size:13.5px}

/* ── 할 일 추가 ──
   요일 칸 안에서만 쓴다(어느 요일에 넣는지가 눈에 보이게). 칸 안 규칙은 위 .bcol .add-form 참고. */
.add-form{border:1px solid var(--green);border-radius:8px;padding:12px;display:flex;gap:8px;align-items:stretch}
.add-form select{padding:8px 10px;border:1px solid var(--line);border-radius:6px;font-size:13px;background:#fff}
.add-form select:focus{outline:2px solid var(--green-l);border-color:var(--green)}

/* ── 주간보고 초안 ── */
.report-preview{background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:6px 14px 12px;columns:2;column-gap:22px}
.rp-agenda{padding:9px 0;border-bottom:1px dashed var(--line);break-inside:avoid}
.rp-agenda:last-child{border-bottom:0}
.rp-name{font-size:12.5px;font-weight:700;display:flex;align-items:center;gap:7px;margin-bottom:4px}
.rp-no{flex:0 0 auto;width:18px;height:18px;border-radius:5px;background:var(--green);color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center}
.rp-no.etc{background:var(--gray)}
.rp-item{font-size:12.5px;padding:1px 0 1px 15px;position:relative;color:#374151}
.rp-item .mk{position:absolute;left:0;font-weight:700}
.rp-item .mk.ok{color:var(--green)} .rp-item .mk.wait{color:var(--amber)}

/* ── 안내 배너 ── */
.wk-flash{background:var(--green-l);border:1px solid var(--green);color:var(--green-d);border-radius:8px;padding:11px 15px;font-size:13px;font-weight:600;margin-bottom:16px}
.ro-banner{background:var(--blue-l);border:1px solid #bcd0f5;color:var(--blue);border-radius:8px;
  padding:10px 15px;font-size:13px;font-weight:600;margin-bottom:16px;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ro-banner .btn{margin-left:auto;font-weight:600}

/* ── 주간보고 작성 화면 ── */
.rep-status{font-size:12px;font-weight:700;padding:2px 10px;border-radius:11px;margin-left:8px;vertical-align:middle}
.rep-status.sub{background:var(--amber-l);color:var(--amber)}
.rep-status.ok{background:var(--green-l);color:var(--green)}
.rep-banner{background:var(--amber-l);border:1px solid #eacf8f;color:var(--amber);border-radius:8px;padding:11px 15px;font-size:13px;margin-bottom:16px}
.rep-banner.draft{background:var(--blue-l);border-color:#bcd0f5;color:var(--blue)}
.rep-card{padding:24px}
.rep-title{text-align:center;font-size:18px;font-weight:800;border:1.5px solid var(--ink);border-radius:4px;padding:11px;margin-bottom:14px}
.rep-meta{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:13px;color:#374151;border:1px solid var(--line);border-radius:8px;padding:11px 15px;margin-bottom:16px;background:var(--bg)}
.rep-meta b{color:var(--gray);font-weight:600;margin-right:6px;font-size:12px}
.rep-range{font-weight:500;opacity:.8;font-size:11.5px}
.rep-table{width:100%;border-collapse:collapse;font-size:13px}
.rep-table th{background:var(--green);color:#fff;padding:9px 10px;text-align:left;font-weight:600;border:1px solid var(--green-d);white-space:nowrap;font-size:12.5px}
.rep-table td{border:1px solid var(--line);padding:6px;vertical-align:top}
.rep-table .rep-no{text-align:center;font-weight:700;color:var(--gray);vertical-align:middle}
/* 실시·예정사항: 9pt · 줄바꿈에 따라 높이 자동(wkRepAutoSize) — 세로 스크롤이 생기지 않게 한다 */
.rep-table textarea{width:100%;border:1px solid transparent;border-radius:6px;padding:6px 8px;font-size:9pt;line-height:1.55;resize:none;overflow:hidden;background:#fff;color:var(--ink);min-height:0}
.rep-table input{width:100%;border:1px solid transparent;border-radius:6px;padding:6px 8px;font-size:13px;background:#fff}
.rep-table textarea:focus,.rep-table input:focus{outline:2px solid var(--green-l);border-color:var(--green)}
.rep-table textarea:disabled,.rep-table input:disabled{background:#fff;color:var(--ink);opacity:1;border-color:transparent}
/* 업무영역 칸 — 위는 분류(확정 때 이 줄의 예정사항이 갈 곳), 아래는 표에 찍히는 이름.
   분류를 바꾸면 이름도 따라간다(손으로 고쳐 둔 이름은 그대로 둔다). */
.rep-table .rep-ag input{font-weight:700}
.rep-table .rep-cat{width:100%;border:1px solid var(--line);border-radius:6px;padding:4px 6px;
  font:inherit;font-size:12px;font-weight:700;color:var(--green);background:var(--green-l);margin-bottom:3px}
.rep-table .rep-cat:focus{outline:2px solid var(--green-l);border-color:var(--green)}
.rep-table .rep-owner input{text-align:center}
.rep-table .rep-x{text-align:center;vertical-align:middle}
/* 안건 순서 바꾸기 — 행 전체(안건/실시/예정/담당)가 함께 움직인다 */
.rep-table .rep-mv{text-align:center;vertical-align:middle;white-space:nowrap;padding:4px 2px}
.mv-btn{display:block;width:22px;margin:1px auto;border:1px solid var(--line);border-radius:5px;background:#fff;color:var(--gray);font-size:11px;line-height:16px;cursor:pointer;padding:0}
.mv-btn:hover:not(:disabled){background:var(--green-l);border-color:var(--green);color:var(--green-d)}
.mv-btn:disabled{opacity:.28;cursor:default}
.rep-table tr.mv-on td{background:var(--green-l);transition:background .4s}
.rep-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:16px;flex-wrap:wrap}

/* ── 처리 중 오버레이 ── */
.busy-overlay{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;
  background:rgba(26,29,26,.35);backdrop-filter:blur(1px)}
.busy-box{background:#fff;border-radius:12px;padding:22px 26px;box-shadow:0 16px 44px rgba(0,0,0,.28);
  display:flex;align-items:center;gap:14px;max-width:80vw}
.busy-txt{font-size:14px;font-weight:600;color:var(--ink)}
.busy-spin{flex:0 0 auto;width:22px;height:22px;border:3px solid var(--green-l);border-top-color:var(--green);
  border-radius:50%;animation:busy-rot .8s linear infinite}
@keyframes busy-rot{to{transform:rotate(360deg)}}

/* ── 확정 · 업무영역 분류 / 업무영역 관리 모달 ── */
.cf-overlay{position:fixed;inset:0;z-index:110;display:flex;align-items:center;justify-content:center;
  background:rgba(26,29,26,.4);backdrop-filter:blur(1px);padding:20px}
.cf-box{background:#fff;border-radius:14px;box-shadow:0 18px 50px rgba(0,0,0,.3);
  width:560px;max-width:100%;max-height:86vh;display:flex;flex-direction:column;padding:22px 24px}
.cf-box h3{margin:0 0 4px;font-size:17px;color:var(--green)}
.cf-sub{margin:0 0 14px;font-size:13px;color:var(--gray);line-height:1.5}
.cf-list{overflow-y:auto;display:flex;flex-direction:column;gap:10px;margin:-2px -4px 0;padding:2px 4px}
.cf-item{border:1px solid var(--line);border-radius:10px;padding:11px 13px;background:var(--bg)}
.cf-head{display:flex;align-items:center;gap:10px;justify-content:space-between}
.cf-label{font-weight:700;font-size:14px;color:var(--ink);word-break:break-all}
.cf-cat{flex:0 0 auto;padding:6px 8px;border:1px solid var(--line);border-radius:8px;
  font-size:13px;font-weight:600;background:#fff;color:var(--ink)}
.cf-tasks{margin:8px 0 0;padding-left:18px;display:flex;flex-direction:column;gap:3px}
.cf-tasks li{font-size:12.5px;color:var(--gray);word-break:break-all}
.cf-note{color:var(--gray);font-style:italic}
.cf-note-1{margin-top:6px;font-size:12px;color:var(--gray);font-style:italic;word-break:break-all}
.cf-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:16px;flex:0 0 auto}

@media screen and (max-width:900px){
  .tiles{grid-template-columns:repeat(2,1fr)}
  .plan-sum{grid-template-columns:1fr}
  .report-preview{columns:1}
}