/* =====================================================================
 * v1.11.4 D 현황판 공통 부품 (js/nwboard.js) — 업무지시·설비이상·건의함 (디자인팀 20261103 시안 A안)
 *   색은 테마 토큰만(--pri·--red·--orange·--ok·--text2/3·--line·--surface·--surface2) — 테마 4종 × 밝게·어둡게 그대로 따라감
 *   폭은 현황판 자기 폭(컨테이너 쿼리)으로 나눔: 좁으면(폰·PC 왼쪽 칸) 칸 4개 위·표 아래, 넓으면(720 이상) 칸 | 표 나란히
 * ===================================================================== */
.nwb-s-todo{--c:var(--text2);--cb:var(--surface2,var(--line2))}
.nwb-s-wait{--c:var(--orange);--cb:var(--orange-soft)}
.nwb-s-doing{--c:var(--pri);--cb:var(--pri-soft)}
.nwb-s-late,.nwb-s-stop{--c:var(--red);--cb:var(--red-soft)}
.nwb-s-done{--c:var(--ok,var(--pri));--cb:var(--ok-soft,var(--pri-soft))}
.nwb-s-hold{--c:var(--text3);--cb:var(--surface2,var(--line2))}

#app .nwb{container-type:inline-size;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:10px 12px;margin:8px 0 10px;display:block;min-width:0}
#app .nwb-hd{display:flex;align-items:center;gap:6px 8px;flex-wrap:wrap;min-height:28px}
#app .nwb-hd>b{font-size:14.5px;color:var(--text)}
#app .nwb-sub{font-size:12.5px;color:var(--text2);min-width:0;flex:1 1 120px}
#app .nwb-hd .nwb-fold{margin-left:auto;min-height:36px;padding:0 10px;font-size:13px;white-space:nowrap}
#app .nwb-body{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;margin-top:8px;min-width:0}
#app .nwb-side{min-width:0}
#app .nwb-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;min-width:0}
#app .nwb-tile{border:1px solid var(--line2);background:var(--cb);border-radius:12px;padding:8px 9px;text-align:left;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:7px;align-items:center;min-width:0;min-height:56px;color:var(--text);cursor:pointer;font:inherit}
#app .nwb-tile .g{grid-row:1/3;font-size:20px;color:var(--c);line-height:1;width:22px;text-align:center}
#app .nwb-tile .n{font-size:22px;font-weight:800;line-height:1.1;color:var(--text);font-variant-numeric:tabular-nums}
#app .nwb-tile .l{font-size:12.5px;color:var(--text2);line-height:1.2;white-space:normal;word-break:keep-all;overflow-wrap:anywhere;min-width:0}   /* v1.11.4 u (KH 11-03 "'반영...' 이런 식으로 숨어져 있음"): 칸 이름 말줄임 없앰 — 좁으면 띄어쓰기에서 두 줄 (반영/완료 · 확인/중 · 조치/중) */
#app .nwb-tile.on{outline:2.5px solid var(--c);outline-offset:-1px}
#app .nwb-tile.zero{background:var(--surface2,var(--line2))}
#app .nwb-tile.zero .g,#app .nwb-tile.zero .n{color:var(--text3)}
#app .nwb-tile.hot{border-color:var(--c)}
#app .nwb-tile:focus-visible,#app .nwb-who:focus-visible,#app .nwb-cnt:focus-visible{outline:2.5px solid var(--pri);outline-offset:1px}
/* 좁은 현황판(폰 390 · PC 왼쪽 칸): 칸 안 세로 쌓기 · 글씨 조금 작게 */
@container (max-width:520px){
  #app .nwb-tile{grid-template-columns:1fr;grid-template-rows:auto auto auto;justify-items:center;text-align:center;padding:6px 2px;row-gap:0;min-height:62px}
  #app .nwb-tile .g{grid-row:auto;font-size:16px;width:auto}
  #app .nwb-tile .n{font-size:20px}
  #app .nwb-tile .l{font-size:12px;max-width:100%;letter-spacing:-.2px}
}
@container (min-width:720px){
  #app .nwb-body{grid-template-columns:minmax(0,400px) minmax(0,1fr);align-items:start}
}
#app .nwb.fold .nwb-side{display:none}
#app .nwb-mxw{overflow-x:auto;min-width:0}
#app .nwb-mx{width:100%;border-collapse:collapse;font-size:13.5px}
#app .nwb-mx th{font-weight:600;color:var(--text3);font-size:12px;text-align:center;padding:4px;border-bottom:1px solid var(--line);white-space:nowrap}
#app .nwb-mx th .g{color:var(--c)}
#app .nwb-mx th:first-child,#app .nwb-mx td:first-child{text-align:left}
#app .nwb-mx td{padding:2px 4px;border-bottom:1px solid var(--line2);text-align:center;white-space:nowrap}
#app .nwb-mx tr.on td{background:var(--pri-soft)}
#app .nwb-mx tr.nwb-x{display:none}
#app .nwb.all .nwb-mx tr.nwb-x{display:table-row}
#app .nwb-who{border:0;background:none;font:inherit;font-weight:700;color:var(--text);padding:6px 2px;min-height:36px;text-align:left;cursor:pointer;max-width:9em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#app .nwb-tot{color:var(--text3);font-weight:600;font-size:12px}
#app .nwb-cnt{border:1px solid transparent;background:var(--cb);color:var(--c);border-radius:999px;font:inherit;font-weight:800;font-size:13px;min-width:44px;min-height:32px;padding:0 8px;cursor:pointer;font-variant-numeric:tabular-nums}
#app .nwb-cnt.on{outline:2px solid var(--c);outline-offset:-1px}
#app .nwb-z{color:var(--text3)}
#app .nwb-mx td.bt,#app .nwb-mx th.bt{width:26%}
#app .nwb-bar{display:flex;height:8px;border-radius:99px;overflow:hidden;background:var(--line2);min-width:50px}
#app .nwb-bar i{display:block;background:var(--c)}
@container (max-width:520px){
  #app .nwb-mx .bt{display:none}
  #app .nwb-mx th{font-size:11.5px;padding:4px 2px}
  #app .nwb-mx td{padding:2px}
  #app .nwb-who{max-width:6.5em}
  #app .nwb-cnt{min-width:40px;padding:0 6px}
}
/* PC 업무지시 표: 받은 사람 칸 말줄임 (지시 칸이 눌리지 않게) */
#app .pctbl .nwb-cut{display:inline-block;max-width:13em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle}
#app .nwb-more{margin-top:4px}
#app .nwb-fbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px;background:var(--pri-soft);color:var(--text);border-radius:10px;padding:4px 6px 4px 10px;margin:0 0 8px}
#app .nwb-fbar .btn{min-height:36px}
/* 설비이상 맨 위 빨간 띠 · 건의함 7일 넘은 글 */
#app .nwb-alert{display:flex;align-items:center;gap:6px 8px;flex-wrap:wrap;border:1.5px solid var(--red);background:var(--red-soft);border-radius:12px;padding:7px 10px;margin-top:8px}
#app .nwb-alert>b{color:var(--red);font-size:14px;white-space:nowrap}
#app .nwb-alert button{border:1px solid var(--red);background:var(--surface);color:var(--text);border-radius:999px;padding:2px 10px;min-height:36px;font:inherit;font-size:13px;cursor:pointer;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#app .nwb-alert button em{font-style:normal;color:var(--red);font-weight:800;margin-left:4px}
/* 폰: 멈춘 설비가 많아도 띠는 한 줄(옆으로 밀어 봄) — 목록이 아래로 밀리지 않게 */
#app.phone .nwb-alert{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
#app.phone .nwb-alert::-webkit-scrollbar{display:none}
#app.phone .nwb-alert>b,#app.phone .nwb-alert button{flex:none}
#app .nwb-warn{font-size:12.5px;color:var(--orange);background:var(--orange-soft);border-radius:10px;padding:5px 10px;margin-top:8px;line-height:1.7}
#app .nwb-warn .lnk{min-height:32px;font-size:12.5px}
/* 목록 줄: 받은 사람 상태 점 · '수정됨' 꼬리표 */
#app .nwb-dots{display:inline-flex;gap:2px;font-size:12px;vertical-align:middle}
#app .nwb-dots i{font-style:normal;color:var(--c);font-weight:800}
#app .nwb-edt{display:inline-block;font-size:11.5px;color:var(--text3);border:1px dashed var(--line-strong,var(--text3));border-radius:999px;padding:0 7px;white-space:nowrap;vertical-align:1px;font-weight:600}
/* 보낸 지시 상세 맨 위 띠 [✎ 고치기] [지우기] · 우리 팀 읽기 전용 띠 */
#app .nwb-own{display:flex;align-items:center;gap:6px;flex-wrap:wrap;background:var(--pri-soft);border-radius:12px;padding:5px 6px 5px 12px;font-size:13px;margin:4px 0 8px}
#app .nwb-own>span{flex:1;color:var(--pri);font-weight:700;min-width:0}
#app .nwb-own .btn{min-height:36px}
#app .nwb-ro{font-size:12.5px;background:var(--surface2,var(--line2));border-radius:10px;padding:6px 10px;color:var(--text2);margin:4px 0 8px}
@media (pointer:coarse){ #app .nwb-own .btn,#app .nwb-fbar .btn,#app .nwb-hd .nwb-fold{min-height:44px} #app .nwb-cnt{min-height:40px} }