/* BOARD_CSS_V1 (2026-09-29): 현장 작업판·고객 작업판 공용 모양 (남색·회색 한 톤, 표 중심) */
.wb, .wb * { box-sizing: border-box; }
.wb { --ln:#d6dae1; --ln2:#e9ecf1; --tx:#1f2937; --mu:#6b7280; --nv:#1e3a8a; --nv2:#eef2fb; --rd:#b91c1c; --gn:#166534;
  display:grid; grid-template-columns:minmax(440px, 44%) minmax(0,1fr); gap:0; height:calc(100vh - 64px);
  border:1px solid var(--ln); background:#fff; font-size:13px; color:var(--tx); }
.wb-left { border-right:1px solid var(--ln); display:flex; flex-direction:column; min-width:0; min-height:0; }
.wb-right { display:flex; flex-direction:column; min-width:0; min-height:0; }
.wb-bar { display:flex; gap:6px; align-items:center; padding:6px 8px; border-bottom:1px solid var(--ln); background:#f7f8fa; flex-wrap:wrap; }
.wb-bar input[type=search] { flex:1 1 160px; height:28px; border:1px solid var(--ln); padding:0 8px; font-size:13px; }
.wb-seg { display:flex; border:1px solid var(--ln); }
.wb-seg button { height:26px; padding:0 9px; border:0; border-right:1px solid var(--ln); background:#fff; font-size:12.5px; color:var(--tx); cursor:pointer; }
.wb-seg button:last-child { border-right:0; }
.wb-seg button.on { background:var(--nv); color:#fff; font-weight:700; }
.wb-cnt { color:var(--mu); font-size:12px; margin-left:auto; white-space:nowrap; }
.wb-scroll { overflow:auto; flex:1 1 auto; min-height:0; }
.wb table { width:100%; border-collapse:collapse; }
.wb-list { table-layout:fixed; }
.wb-list td { overflow:hidden; text-overflow:ellipsis; }
.wb th { position:sticky; top:0; background:#f1f3f6; font-weight:700; font-size:12px; color:#374151; text-align:left; padding:5px 8px; border-bottom:1px solid var(--ln); white-space:nowrap; cursor:pointer; z-index:1; }
.wb td { padding:4px 8px; border-bottom:1px solid var(--ln2); white-space:nowrap; }
.wb td.num, .wb th.num { text-align:right; font-variant-numeric:tabular-nums; }
.wb-list tr { cursor:pointer; }
.wb-list tr:hover td { background:#f7f9fd; }
.wb-list tr.sel td { background:var(--nv2); }
.wb-list tr.sel td:first-child { box-shadow:inset 3px 0 0 var(--nv); }
.wb-name { overflow:hidden; text-overflow:ellipsis; }
.wb-cust { overflow:hidden; text-overflow:ellipsis; color:var(--mu); }
.wb-st { font-size:11.5px; padding:0 5px; border:1px solid var(--ln); color:var(--mu); }
.wb-st.s-수주완료 { border-color:#93a5d6; color:var(--nv); }
.wb-st.s-완료 { color:#9ca3af; }
.wb-st.s-견적 { border-color:#d6c28a; color:#8a6d1a; }
.wb .red { color:var(--rd); font-weight:700; }
.wb .grn { color:var(--gn); }
.wb .mu { color:var(--mu); }
/* 오른쪽 */
.wb-head { padding:8px 12px; border-bottom:1px solid var(--ln); }
.wb-head h2 { margin:0; font-size:16px; font-weight:800; display:flex; align-items:center; gap:8px; }
.wb-head .sub { margin-top:2px; color:var(--mu); font-size:12.5px; }
.wb-head .sub a { color:var(--nv); text-decoration:none; }
.wb-head select { height:26px; font-size:12.5px; border:1px solid var(--ln); width:auto !important; flex:0 0 auto; margin:0 !important; padding:0 4px; }
.wb-head h2 { flex-wrap:wrap; }
.wb-head h2 .nm { flex:0 1 auto; min-width:0; }
.wb-head .acts { margin-left:auto; display:flex; gap:6px; }
.wb-btn { height:28px; padding:0 10px; border:1px solid var(--ln); background:#fff; font-size:12.5px; cursor:pointer; color:var(--tx); text-decoration:none; display:inline-flex; align-items:center; white-space:nowrap; }
.wb-btn.pri { background:var(--nv); border-color:var(--nv); color:#fff; font-weight:700; }
.wb-btn:disabled { opacity:.5; }
.wb-kpi { display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); border-bottom:1px solid var(--ln); }
.wb-kpi div { padding:6px 12px; border-right:1px solid var(--ln2); }
.wb-kpi div:last-child { border-right:0; }
.wb-kpi b { display:block; font-size:15px; font-variant-numeric:tabular-nums; }
.wb-kpi span { font-size:11.5px; color:var(--mu); }
.wb-tabs { display:flex; border-bottom:1px solid var(--ln); background:#f7f8fa; }
.wb-tabs button { height:32px; padding:0 14px; border:0; border-right:1px solid var(--ln2); background:transparent; font-size:13px; cursor:pointer; color:var(--tx); }
.wb-tabs button.on { background:#fff; font-weight:800; color:var(--nv); box-shadow:inset 0 -2px 0 var(--nv); }
.wb-pane { padding:8px 12px; overflow:auto; flex:1 1 auto; min-height:0; }
.wb-form { display:flex; gap:6px; flex-wrap:wrap; align-items:center; padding:6px; background:#f7f8fa; border:1px solid var(--ln2); margin-bottom:8px; }
.wb-form input, .wb-form select, .wb-form textarea { height:28px; border:1px solid var(--ln); padding:0 6px; font-size:13px; background:#fff; width:auto !important; max-width:100%; margin:0 !important; }
.wb-form input[type=date] { width:140px !important; }
.wb-form select { width:auto !important; min-width:84px; }
.wb-form .grow { width:auto !important; }
.wb-form textarea { width:100% !important; }
.wb-form textarea { height:auto; padding:5px 6px; flex:1 1 100%; }
.wb-form .amt { width:120px; text-align:right; }
.wb-form .grow { flex:1 1 160px; }
.wb-msg { font-size:12.5px; color:var(--rd); min-height:16px; }
.wb-photos { display:grid; grid-template-columns:repeat(auto-fill, minmax(110px,1fr)); gap:6px; }
.wb-photos a { display:block; border:1px solid var(--ln); }
.wb-photos img { width:100%; height:100px; object-fit:cover; display:block; background:#f1f3f6; }
.wb-empty { color:var(--mu); padding:16px 0; text-align:center; }
.wb-none { display:flex; align-items:center; justify-content:center; height:100%; color:var(--mu); }
/* BOARD_MOBILE_V1 (2026-09-29): 폰은 목록 → 줄 누르면 상세가 화면 전체 → '← 목록' 으로 돌아감 */
.wb-back { display:none; }
@media (max-width: 980px) {
  /* BOARD_PHONE_COMPACT_V1 (2026-09-30): 사장님 폰 화면 "아직도 크기는 크고 여백은 조정이 필요" —
     칸·버튼을 한 단계 줄이고, 상세 쪽 표는 화면 폭 안에서 줄바꿈한다(줄바꿈 금지라 표가 화면보다 넓어져
     오른쪽 버튼이 잘리고, 그 때문에 페이지 전체가 넓어져 맨 위 막대의 버튼까지 잘렸다). */
  .wb { display:block; height:auto; border:0; }
  .wb-left { border-right:0; max-height:none; }
  .wb-scroll { max-height:none; overflow:visible; }
  .wb.show-detail .wb-left { display:none; }
  .wb:not(.show-detail) .wb-right { display:none; }
  .wb-right { max-width:100%; overflow-x:hidden; }
  .wb-back { display:inline-flex; margin-right:4px; }
  .wb-bar { padding:5px 6px; gap:5px; }
  .wb-bar input[type=search] { height:32px; font-size:14px; }
  .wb-seg button { height:30px; padding:0 8px; font-size:12.5px; }
  .wb-head { padding:6px 8px; }
  .wb-head h2 { font-size:15px; gap:6px; }
  .wb-head .acts { margin-left:0; width:100%; }
  .wb-kpi { grid-template-columns:repeat(3, minmax(0,1fr)); }
  .wb-kpi div { padding:4px 8px; }
  .wb-kpi b { font-size:14px; }
  .wb-kpi span { font-size:11px; }
  .wb-tabs { overflow-x:auto; }
  .wb-tabs button { flex:0 0 auto; height:34px; padding:0 11px; }
  .wb-pane { padding:6px 8px; }
  .wb-form { padding:4px; gap:4px; }
  .wb-form input, .wb-form select { height:34px !important; font-size:14px !important; }
  .wb-form .amt { width:120px !important; }
  .wb-btn { height:32px; padding:0 9px; }
  .wb th, .wb td { padding:5px 6px; }
  .wb-list td { font-size:13.5px; }
  .wb-right table { table-layout:auto; }
  .wb-right td { white-space:normal; overflow-wrap:anywhere; }
  .wb-right td.num { white-space:nowrap; }
}