/* ════════════════════════════════════════════════════════════════════
   portal-extra.css — portal.php 안에 흩어져 있던 <style> 5덩어리
   2026-09-16 분리. **글자 한 자 안 바꾸고** 원래 순서대로 이어 붙였다. 각 덩어리 앞에 원래 몇 행이었는지 적어 뒀다.
   ★읽히는 자리 = 옛 첫 덩어리가 있던 그 줄(assets/portal.css 바로 뒤). CSS는 나중에 읽힌 쪽이 이기므로
     자리를 옮기면 지금 이기던 규칙이 져서 화면이 조용히 틀어진다.
   ★본체는 assets/portal.css 다 — 이 파일은 팝업 몇 개가 자기 자리에서 쓰던 서식 모음이다.
     새 규칙을 아무거나 여기 넣지 말 것. 화면 공용이면 portal.css, 그 팝업 전용이면 여기.
   ════════════════════════════════════════════════════════════════════ */

/* ── 옛 portal.php 404~538행 (덩어리 1/5) ───────────────── */
      /* 주문 정보 카드 — 주문서 등록(#order-write-popup)과 생산계획 작성(#woplan-box) 공통
         ★#rsvdet-box(예약재고 상세)·#fabmove-box(창고 출입)도 같은 서식을 쓴다 — 규칙을 복제하지 않고 셀렉터에 더한다 */
      #order-write-popup .ord-head,#sale-write-popup .ord-head,#woplan-box .ord-head,#wosplit-box .ord-head,#rsvdet-box .ord-head,#fabmove-box .ord-head{display:grid;grid-template-columns:1fr 1.3fr;gap:8px 18px}
      #order-write-popup .ord-f,#sale-write-popup .ord-f,#woplan-box .ord-f,#wosplit-box .ord-f,#rsvdet-box .ord-f,#fabmove-box .ord-f{display:flex;align-items:center;gap:8px}
      #order-write-popup .ord-f label,#sale-write-popup .ord-f label,#woplan-box .ord-f label,#wosplit-box .ord-f label,#rsvdet-box .ord-f label,#fabmove-box .ord-f label{width:64px;font-size:12px;color:var(--text-muted);flex-shrink:0}
      #order-write-popup .ord-f input,#order-write-popup .ord-f select,#sale-write-popup .ord-f input,#sale-write-popup .ord-f select,#woplan-box .ord-f input,#woplan-box .ord-f select,#wosplit-box .ord-f input,#wosplit-box .ord-f select,#ws-table .ord-date-wrap input[type=text],#ws-table .ord-date-wrap .cs-btn{flex:1;min-width:0;padding:7px 10px;font-size:12.5px;font-family:inherit;color:var(--text);background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);outline:none;transition:all .15s;height:34px;box-sizing:border-box}
      #order-write-popup .ord-f input:focus,#order-write-popup .ord-f select:focus,#sale-write-popup .ord-f input:focus,#sale-write-popup .ord-f select:focus,#woplan-box .ord-f input:focus,#woplan-box .ord-f select:focus,#wosplit-box .ord-f input:focus,#wosplit-box .ord-f select:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(41,171,226,.1)}
      #order-write-popup .ord-f input[readonly],#sale-write-popup .ord-f input[readonly],#woplan-box .ord-f input[readonly],#wosplit-box .ord-f input[readonly]{background:var(--surface2);color:var(--text-muted)}
      #order-write-popup .ord-f button,#sale-write-popup .ord-f button,#woplan-box .ord-f button{height:34px}
      #order-write-popup .cs-btn,#woplan-box .ord-f .cs-btn{height:34px;background:var(--bg)}
      #order-write-popup .ord-date-wrap,#sale-write-popup .ord-date-wrap,#woplan-box .ord-date-wrap,#wosplit-box .ord-date-wrap{display:flex;align-items:center;gap:5px;flex:1;min-width:0;position:relative}
      #order-write-popup .ord-sep,#sale-write-popup .ord-sep,#woplan-box .ord-sep,#wosplit-box .ord-sep{color:var(--text-muted);flex:none;font-size:12px}
      #order-write-popup .ord-info-card,#sale-write-popup .ord-info-card,#woplan-box .ord-info-card{width:840px;max-width:100%;margin-bottom:12px}
      #woplan-box .ord-f .cs{flex:1;min-width:0}
      /* 편집 그리드 표 — 주문서 등록(#order-items-table)과 생산계획 작성(#wo-plan-table) 공통 디자인.
         셀 전체가 입력칸처럼 보이게: td는 padding 0, 안의 input(.oi)이 투명 배경으로 셀을 꽉 채움 */
      #order-items-table,#sale-items-table,#wo-plan-table,#ws-table{width:100%;border-collapse:collapse;font-size:12.5px;border:1px solid var(--border)}
      #order-items-table{min-width:1330px}
      #wo-plan-table{min-width:1100px}
      #ws-table{min-width:980px}
      /* 투입설비 — 커스텀 드롭다운(11-custom-select)이 select를 .cs-btn으로 바꾸므로 정렬은 라벨에 준다 */
      #ws-table td.ro,#ws-table td.rdo{background:var(--surface2)}   /* 분할 표에서만: 읽기전용 칸은 회색(입력칸은 카드 배경 그대로) */
      /* 잔여 줄 — 실제 분할이 아니라 '원래 카드가 들고 있는 몫'이다(형님 확정 2026-08-04).
         표 줄 수 = 보드 카드 수가 되도록 깔아두는 줄이라, 편집 대상이 아니라는 걸 색으로 먼저 말한다.
         ★클래스만 붙이고 규칙을 빼먹지 말 것(CLAUDE.md) — 그러면 보통 줄과 똑같이 보여 오히려 더 헷갈린다. */
      #ws-table tr.ws-rest td{background:var(--surface2);color:var(--text-muted)}
      #ws-table tr.ws-rest .ws-rest-badge{display:inline-block;padding:2px 8px;border-radius:10px;font-size:11px;font-weight:600;background:var(--surface2);border:1px solid var(--border);color:var(--text-muted)}
      /* 실적 보기(형님 지시 2026-08-06) — 분할 팝업의 실적 숫자, 생산실적 목록의 줄을 누르면
         #wslog-modal이 뜨고 그 안은 production-plan.php?reslog= 를 담은 iframe이다
         (표 서식을 여기서 다시 그리지 않는다 — 38-result-view.js). */
      #ws-table td.ws-reslink:hover{text-decoration:underline}
      #pr-table tbody tr.pr-row:hover{background:var(--surface2)}
      #ws-table td.wsm .cs{width:100%}   /* 투입설비 — 셀 자체가 드롭다운(날짜칸 .cs는 인라인 폭이 우선) */
      #ws-table .cs-btn .cs-label{text-align:center}
      /* ★2026-09-18 형님 지시로 뒤집힘: 헤더는 줄바꿈하지 않고, 열은 헤더 글자가 다 보이는 폭 아래로 못 좁힌다.
         둘 다 colResize(01-core.js)가 th 에 인라인으로 걸어서 아래 줄바꿈 속성(keep-all·anywhere)보다 이긴다 — 남겨 둔 건 무해.
         (옛 이유: nowrap이면 '재고사용(패키징)' 같은 긴 이름 때문에 열이 안 좁혀져서 줄바꿈을 허용했었다) */
      #order-items-table thead th,#sale-items-table thead th,#wo-plan-table thead th,#ws-table thead th{background:var(--surface2);font-size:11px;font-weight:700;color:var(--text-muted);letter-spacing:.3px;padding:9px 10px;border-bottom:1px solid var(--border);border-right:1px solid var(--border);white-space:normal;word-break:keep-all;overflow-wrap:anywhere;line-height:1.35;text-align:center;position:relative}
      #order-list-table thead th{position:relative}
      #stock-in-table td.oc,#stock-table td.oc{padding:0} /* 재고입력(→2026-09-23 재고 조회 실사 모드 #stock-table): 목록표라 세로 경계선 없이 input만 셀에 녹임 */
      #order-write-popup td.oc,#sale-write-popup td.oc,#woplan-box td.oc,#wosplit-box td.oc{border-bottom:1px solid var(--border);border-right:1px solid var(--border);padding:0}
      /* 주문 대비 과부족(생산수량 오른쪽 칼럼) — 원단을 정수 롤로 뽑느라 생기는 차이.
         담당자가 8R이냐 9R이냐를 정하는 판단 근거라 독립 칼럼으로 둔다. */
      #wo-plan-table td.wo-diff{white-space:nowrap}
      /* 압출 롤수 입력칸을 커스텀 툴팁(.tooltip-wrap)으로 감쌌다 — 래퍼가 inline-flex라 그냥 두면
         input이 셀 폭을 못 채운다. 래퍼·input 모두 셀을 채우게 한다. */
      #wo-plan-table td.oc>.tooltip-wrap{width:100%;display:flex}
      #wo-plan-table td.oc>.tooltip-wrap>input{width:100%;flex:1;min-width:0}
      #order-write-popup td.ro,#sale-write-popup td.ro,#woplan-box td.ro,#wosplit-box td.ro{border-bottom:1px solid var(--border);border-right:1px solid var(--border);padding:8px 10px;text-align:right;color:var(--text-muted)}
      #woplan-box td.rc,#wosplit-box td.rc{border-bottom:1px solid var(--border);border-right:1px solid var(--border);padding:5px 10px;text-align:center;color:var(--text)}
      #woplan-box td.rl,#wosplit-box td.rl{border-bottom:1px solid var(--border);border-right:1px solid var(--border);padding:5px 10px;text-align:left;color:var(--text)}
      #order-items-table tbody tr:hover td,#sale-items-table tbody tr:hover td,#wo-plan-table tbody tr:hover td,#ws-table tbody tr:hover td{background:var(--sky-pale)}
      #wo-plan-table tbody td,#ws-table tbody td{height:36px;box-sizing:border-box}
      #order-items-table td.ord-stk,#wo-plan-table td.ord-stk{border-bottom:1px solid var(--border);border-right:1px solid var(--border);padding:8px 10px;text-align:right;color:var(--text);background:var(--surface2);font-weight:600;cursor:default;user-select:none}
      #order-items-table tfoot td,#sale-items-table tfoot td{border-top:2px solid var(--border);padding:9px 10px}
      #order-write-popup .oi,#sale-write-popup .oi,#woplan-box .oi,#wosplit-box .oi,#stock-in-table .oi,#stock-table .oi,#ws-table td.wsm .cs-btn{width:100%;border:1px solid transparent;background:transparent;padding:8px;font-size:12.5px;color:var(--text);border-radius:4px;box-sizing:border-box}
      #woplan-box .oi,#wosplit-box .oi,#ws-table td.wsm .cs-btn{padding:5px 8px}
      #woplan-box td.ro,#wosplit-box td.ro{padding:5px 10px}   /* 생산계획 표만 행을 얇게(주문서 표는 그대로) */
      #order-write-popup .oi:focus,#sale-write-popup .oi:focus,#woplan-box .oi:focus,#wosplit-box .oi:focus,#stock-in-table .oi:focus,#stock-table .oi:focus{border-color:var(--accent);background:var(--surface);outline:none;box-shadow:0 0 0 2px rgba(41,171,226,.12)}
      #order-write-popup .oi.num,#sale-write-popup .oi.num,#woplan-box .oi.num,#stock-in-table .oi.num,#stock-table .oi.num{text-align:right}
      /* ── 보기 전용(view-only) — viewOrder()가 주문서 팝업에 붙이는 상태 클래스 ──────────
         ★2026-08-03 형님 지적으로 신설. JS는 예전부터 이 클래스를 붙이고 주석에도
           "저장버튼 숨김(CSS)"이라 적혀 있었는데 **정작 규칙이 어디에도 없었다** →
           보기 전용인데 저장 버튼이 그대로 보이고 값도 고쳐졌다.
           상태 클래스를 붙일 땐 규칙을 반드시 같이 쓸 것(CLAUDE.md [개발 규칙]). */
      #order-write-popup.view-only #order-popup-title::after{content:' (보기 전용)';font-weight:600;font-size:12px;color:rgba(255,255,255,.7)}
      /* 고칠 수단을 전부 숨긴다 — 저장·이카운트 전송·긴급 요청·선택삭제 + 달력/거래처 검색 버튼 */
      #order-write-popup.view-only #ord-save-btn,
      #order-write-popup.view-only #ord-ecount-btn,
      #order-write-popup.view-only #ord-urgent-btn,
      /* ★:not(.cs-btn) 필수 — 커스텀 드롭다운(11-custom-select)은 <button class="cs-btn">으로 만들어진다.
         이걸 빼먹으면 년/월/거래유형 드롭다운이 통째로 사라진다(2026-08-03 형님 스크린샷으로 발견). */
      #order-write-popup.view-only .ord-f button:not(.cs-btn){display:none}
      /* ★선택삭제 툴바는 updateOrderChecked()가 **인라인 style**로 켜고 끈다 → 인라인이 규칙을 이긴다.
         여기만 !important 를 붙여야 실제로 숨는다(헤드리스 렌더링으로 확인, 2026-08-03). */
      #order-write-popup.view-only #ord-toolbar-sel{display:none!important}
      /* [주문서로 이동] — 보기 전용일 때만 나온다(수정 모드에선 이미 그 주문서가 열려 있으니 의미가 없다) */
      #ord-goto-edit-btn{display:none}
      #order-write-popup.view-only #ord-goto-edit-btn{display:inline-flex}
      /* 마우스 차단(키보드 쪽은 13-orders.js _ordApplyViewOnly가 readonly/disabled로 같이 건다) */
      #order-write-popup.view-only #ord-popup-body input,
      #order-write-popup.view-only #ord-popup-body select,
      #order-write-popup.view-only #ord-popup-body textarea,
      #order-write-popup.view-only #ord-popup-body .cs,
      #order-write-popup.view-only #ord-popup-body .cs-btn,
      #order-write-popup.view-only #order-items-table td.ord-due-cell{pointer-events:none}
      /* ★출하 현황은 **보기 전용에서도 살아 있다**(2026-08-27) — '보기 전용'의 뜻은
         *주문 내용을 못 고친다*이고, 수주 마감은 **주문서를 고치는 게 아니라 이행을 정리하는 것**이다.
         (원래 주문수량은 마감해도 안 바뀐다 — 조정값을 따로 든다.)
         ★규칙을 명시로 적어 둔다 — 위 blanket 규칙이 나중에 넓어져도 여기가 조용히 죽지 않게. */
      #order-write-popup.view-only #order-fulfill-wrap,
      #order-write-popup.view-only #order-fulfill-wrap button{pointer-events:auto}
      /* 읽기전용 배경 — UI 일관성 원칙 4번(색이 곧 "여기 고쳐도 되나"에 대한 답).
         hover도 같은 색으로 고정한다 — 못 고치는 화면이 마우스에 반응하면 고칠 수 있어 보인다. */
      #order-write-popup.view-only .ord-f input,
      #order-write-popup.view-only .ord-f .cs-btn{background:var(--surface2);color:var(--text-muted)}
      #order-write-popup.view-only #order-items-table td.oc,
      #order-write-popup.view-only #order-items-table tbody tr:hover td{background:var(--surface2)}

      /* ── 긴급 요청(25-urgent.js) — 주문서 수정·생산계획 작성 팝업이 함께 쓴다 ── */
      /* ★입력창 규칙은 직원 등록 팝업(#emp-modal .emp-f)과 공유한다 — 규칙을 복제하면 나중에 한쪽만 고치게 된다 */
      #urgreq-modal .urg-f,#emp-modal .emp-f{display:flex;align-items:center;gap:10px}
      #urgreq-modal .urg-f>label{width:70px;flex-shrink:0;font-size:12px;color:var(--text-muted)}
      #emp-modal .emp-f>label:first-child{width:78px;flex-shrink:0;font-size:12px;color:var(--text-muted)}
      #emp-modal .emp-hint{flex-shrink:0;font-size:11.5px;color:var(--text-muted);white-space:nowrap}   /* 사원번호 칸 옆 안내(2026-09-29) */
      #urgreq-modal input,#urgreq-modal textarea,#emp-modal input,#emp-modal textarea{flex:1;min-width:0;padding:7px 10px;font-size:12.5px;font-family:inherit;color:var(--text);background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);outline:none;box-sizing:border-box}
      #urgreq-modal input,#emp-modal input{height:34px}
      #urgreq-modal textarea,#emp-modal textarea{resize:vertical;line-height:1.5}
      #urgreq-modal input:focus,#urgreq-modal textarea:focus,#emp-modal input:focus,#emp-modal textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(41,171,226,.1)}
      #urgreq-modal input[readonly],#emp-modal input[readonly]{background:var(--surface2);color:var(--text-muted)}
      #urgreq-modal .urg-items{flex:1;min-width:0;display:flex;flex-wrap:wrap;gap:4px;max-height:78px;overflow-y:auto}
      .urg-chip{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:11px;background:rgba(232,68,68,.12);color:#e84444;font-size:11px;font-weight:700}
      .urg-chip em{font-style:normal;font-weight:500;color:var(--text-muted)}
      /* 품목코드 셀 — 입력칸이 셀을 채우고 그 오른쪽에 불꽃이 붙는다(주문서·생산계획 공통) */
      #order-items-table .ord-code-wrap,#wo-plan-table .ord-code-wrap{display:flex;align-items:center;width:100%}
      #order-items-table .ord-code-wrap>.oi,#wo-plan-table .ord-code-wrap>.oi{flex:1;min-width:0}
      /* 품목코드 오른쪽 불꽃 — 누르면 그 요청 내용이 열린다. 색은 생산보드 카드의 불꽃과 같은 빨강 */
      .urg-ico{display:inline-flex;align-items:center;color:#e84444;cursor:pointer;margin-left:5px;vertical-align:-2px}
      .urg-ico:hover{opacity:.65}
      /* 주문서 품목 납기일자 — 평소엔 텍스트, 클릭한 칸만 년/월/일 위젯으로 바뀐다(13-orders.js) */
      #order-items-table .ord-due-txt{display:block;padding:8px 6px;font-size:12.5px;color:var(--text);cursor:pointer;white-space:nowrap;text-align:center}
      #order-items-table .ord-due-txt:hover{background:var(--sky-pale);border-radius:4px}
      #order-items-table .ord-due-txt.empty{color:var(--text-muted)}
      #woplan-box .oi[readonly]{background:var(--surface2);color:var(--text-muted)}
      #itemsearch-q:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(41,171,226,.1)}
      /* 키보드로 고르는 줄(2026-08-28) — 검색칸에서 ↓로 들어와 ↓↑로 옮긴다. 규칙은 13-orders.js.
         ★마우스 hover와 **다른 색**이다: 둘이 같으면 지금 키보드가 어디 있는지 안 보인다. */
      #itemsearch-body tbody tr.is-kbsel{background:var(--sky-pale);box-shadow:inset 3px 0 0 var(--accent)}
      .is-tab{padding:6px 14px;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg);color:var(--text-muted);font-size:12.5px;font-weight:600;cursor:pointer;transition:all .15s}
      .is-tab:hover{border-color:var(--accent);color:var(--accent)}
      .is-tab.on{border-color:var(--accent);background:var(--accent);color:#fff}
      #order-items-table .ord-date-wrap input,#order-items-table .ord-date-wrap>button,#ws-table .ord-date-wrap input,#ws-table .ord-date-wrap>button{height:34px;box-sizing:border-box}
      /* 단위 드롭다운: 셀 전체가 드롭다운(편집 그리드 셀 input과 동일하게 셀에 녹아듦) */
      #order-items-table td.oc>.cs{width:100%;display:block}
      #order-items-table td.oc>.cs>.cs-btn{width:100%;height:100%;min-height:34px;box-sizing:border-box;padding:8px;border:1px solid transparent;background:transparent;border-radius:4px;font-size:12.5px;color:var(--text)}
      #order-items-table td.oc>.cs>.cs-btn:hover{background:var(--surface)}
      #order-items-table td.oc>.cs>.cs-btn.cs-on,#order-items-table td.oc>.cs>.cs-btn:focus{border-color:var(--accent);background:var(--surface);outline:none;box-shadow:0 0 0 2px rgba(41,171,226,.12)}

/* ── 옛 portal.php 648~786행 (덩어리 2/5) ───────────────── */
      #wo-list-table thead th,#wo-plan-table thead th{position:relative}
      #wo-list-table td,#wo-list-table thead th,.wol-detail-table td,.wol-detail-table thead th{white-space:normal;word-break:keep-all;overflow-wrap:break-word} /* 칼럼 좁히면 헤더·셀 모두 줄바꿈(한글은 어절, 긴 코드·규격은 강제 꺾음) */
      /* ★전역 .data-table hover는 자손 td 전부를 물들인다 — 바깥 행 hover가 안에 포개진 상세표 셀까지 파랗게 만드는 것을 차단 */
      #wo-list-table tbody tr:hover .wol-detail-table td{background:var(--bg)}
      #wo-list-table .wol-detail-table tbody tr:hover td{background:var(--sky-pale)!important} /* 상세표 자체 hover — 마우스 올라간 행만 파랗게, 나머지는 원래 배경(형님 확정 2026-07-24) */
      #wo-list-table .wo-bom,#wo-plan-table .wo-bom{padding:3px 8px;font-size:11px;font-weight:700;line-height:1.4}
      /* BOM 펼쳐진 상태 = 파란 테두리(배경은 채우지 않는다). 공용 .btn-on과 같은 규칙 */
      #wo-list-table .wo-bom.on,#wo-plan-table .wo-bom.on{border-color:var(--accent);background:var(--surface);color:var(--accent)}
      #wo-list-table .wo-bom.on:hover,#wo-plan-table .wo-bom.on:hover{background:var(--sky-pale)}
      /* BOM으로 펼쳐진 원단 행 — 부모 가공품에 딸린 행임을 좌측 라인으로 표시 */
      #wo-list-table tr.wo-bomrow>td:first-child{border-left:3px solid var(--accent)}
      #wo-list-table .wo-bomtag,#wo-plan-table .wo-bomtag{display:inline-block;padding:2px 7px;border-radius:9px;background:var(--sky-pale);color:var(--accent);font-size:10.5px;font-weight:700}
      #woload-q{width:100%;padding:7px 10px;border:1px solid var(--border);border-radius:var(--radius);font-size:12.5px;color:var(--text);background:var(--bg);transition:all .15s;box-sizing:border-box;outline:none}
      #woload-q:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(41,171,226,.1)}
      #woload-table tbody tr.wl-ord{cursor:pointer}
      #woload-table th:first-child,#woload-table tbody tr.wl-ord>td:first-child{padding:6px 4px!important;text-align:center}
      #woload-table tbody tr.wl-ord.open>td{background:var(--surface2)}
      #woload-table tbody tr.wl-ord.open:hover>td{background:var(--sky-pale)}
      #woload-table tr.wl-items:hover .wl-sub td{background:transparent}
      #woload-table .wl-sub tbody tr:hover td{background:var(--sky-pale)!important}
      /* 펼친 품목 표 — 주문서 조회 상세 펼침(_orderDetailHTML)과 동일 형식 */
      #woload-table tbody tr.wl-items>td{padding:4px 12px 12px 40px;background:var(--surface2)!important}
      #woload-table .wl-sub{width:100%;border-collapse:collapse;font-size:12px;background:var(--bg);border:1px solid var(--border)}
      #woload-table .wl-sub th{padding:6px 8px;font-size:11px;font-weight:700;color:var(--text-muted);background:var(--surface2);border-bottom:1px solid var(--border);white-space:nowrap}
      #woload-table .wl-sub td{padding:5px 8px;border-bottom:1px solid var(--border)}
      #woload-table .wl-sub tbody tr:last-child td{border-bottom:none}
      #woload-table .wl-sub tbody tr.on{opacity:.6}
      #woload-table .wl-add{padding:3px 8px;line-height:1}
      #woload-table .wl-done{display:inline-block;padding:3px 10px;border-radius:11px;background:var(--sky-pale);color:var(--accent);font-size:11px;font-weight:600}
      /* ── 예약재고 상세(#rsvdet-box) — 40-fabric-assign.js가 내용을 채운다 ──
         값은 읽기 전용이라 input이 아니라 <b>다(입력칸처럼 보이면 고칠 수 있는 줄 안다). */
      #rsvdet-box .ord-f b{font-size:12.5px;color:var(--text);font-weight:600}
      /* ★전역 `.data-table tbody tr{cursor:pointer}`를 되돌린다 — 이 표는 **누를 수 있는 줄이 일부**다.
           지금 보고 있는 계획이 잡은 줄과 계획번호가 없는 줄은 갈 곳이 없다(손가락이 뜨면 고장으로 보인다). */
      #rsvdet-table tbody tr{cursor:default}
      #rsvdet-table tbody tr.rd-go{cursor:pointer}
      #rsvdet-table tbody tr.rd-go td:first-child{color:var(--accent);font-weight:700}
      #rsvdet-table td.rd-qty{text-align:right}
      #rsvdet-table .rd-sub{display:block;font-size:11px;color:var(--text-muted);font-weight:400}
      #rsvdet-table .rd-short{display:block;font-size:11px;color:var(--danger);font-weight:700}
      /* ══ 원단 창고 출고·반납(#fabmove-box) — 42-fabric-move.js가 내용을 채운다 ══════════
         ★'물류'라는 말을 쓰지 않는다 — 급하면 생산팀이 직접 가져간다(설계 0-1장).

         ★★★2026-08-25 형님 지시 — **이 팝업만 작업현황(생산보드) 톤으로 간다.**

         ── 왜 이 팝업만인가 ──
         여는 곳이 `35-stock-sidebar.js`(재고 사이드바) **한 곳뿐**이고 그 파일은 **보드 전용**이다
         (portal.php의 $JS 배열에 없다 — 보드가 직접 로드한다). 즉 이 팝업은 **항상 작업현황 위에만 뜬다.**
         포털 화면에서 여는 경로가 없으므로 톤을 바꿔도 포털에 영향이 없다.
         ★보드에서 여는 팝업은 8개인데(27-board-bridge.js 목록) 나머지 7개는 **포털에서도 열려서**
           같이 바꾸면 포털이 깨진다. 그건 '문맥에 따라 톤 전환'이 필요한 별개 작업이다 — 여기서 하지 말 것.

         ── ★★왜 변수를 다시 정의하나 (제일 중요) ──
         포털과 작업현황은 **같은 이름의 변수가 정반대 값**이다:
             --bg  →  포털 #f3f4f7(밝은 회색)  ·  작업현황 #0b0c10(거의 검정)
         이 팝업은 **포털 문서**에 있어서 portal.css 변수를 물려받는다. 그래서 작업현황 값을
         `#fabmove-box` 스코프 안에 **다시 정의**한다(production-plan.php:18 :root와 같은 값).
         · 흉내내지 않고 같은 값을 쓰므로 **진짜로 어울린다**
         · 스코프 밖으로 안 새므로 **포털 나머지에 영향 0**
         · 포털이 라이트 모드여도 이 팝업은 다크다 — 작업현황이 다크 고정이라 그게 맞다
         ★공용 규칙(.card·.item-section-title·.data-table·.ord-f)은 **한 줄도 안 고친다.**
           포털 전체가 쓰는 규칙이라 건드리면 다 깨진다 — 여기서 스코프로 덮기만 한다. */
      #fabmove-box{
        /* production-plan.php :root와 같은 값(2026-08-25). 고칠 때 양쪽을 같이 볼 것. */
        --bg2:#12141a; --bg3:#1a1d26; --bg4:#22263a; --bg5:#2a2f45;
        --b2:rgba(255,255,255,0.07); --b3:rgba(255,255,255,0.13);
        --t1:#e8eaf0; --t2:#8b8fa8; --t3:#555a72;
        --ac:#4f8ef7;
        --fmono:'Noto Sans KR',sans-serif;   /* 보드 글꼴을 포털과 같게 바꾸며(2026-09-16) 이 팝업의 보드 흉내도 같이 */
        background:var(--bg2); border:1px solid var(--b3); border-radius:12px;
        box-shadow:0 16px 48px rgba(0,0,0,0.6); color:var(--t1);
      }
      /* 헤더 — 작업현황 `.mp-header` 서식. ★네이비 그라디언트를 쓰지 않는다(포털 팝업의 표식이다). */
      #fabmove-header{background:var(--bg2)!important; color:var(--t1)!important;
        border-bottom:1px solid var(--b2); padding:14px 18px!important}
      #fabmove-title{font-size:15px;font-weight:600;color:var(--t1)}
      #fabmove-subtitle{color:var(--t2)!important;opacity:1!important;font-family:var(--fmono);font-size:11.5px}
      /* 헤더 버튼 — 작업현황 `.mp-btn` 서식(반투명 흰색이 아니라 제 배경을 가진 버튼) */
      #fabmove-header .btn,#fabmove-header button{background:var(--bg3)!important;color:var(--t2)!important;
        border:1px solid var(--b3)!important;border-radius:6px;font-size:12px;transition:background .15s}
      #fabmove-header .btn:hover,#fabmove-header button:hover{background:var(--bg4)!important;color:var(--t1)!important}
      /* 카드 — 포털 .card(흰 바탕+그림자)를 이 팝업 안에서만 덮는다 */
      #fabmove-box .card{background:var(--bg3);border:1px solid var(--b2);border-radius:10px;
        box-shadow:none;padding:14px 16px}
      /* 섹션 제목 — 파란 바(.item-section-title)를 작업현황 `.mp-sec-title` 서식으로.
         ★★2026-08-25 형님 지적 "잘 안 보인다" — 처음엔 작업현황 값을 그대로 옮겨
           `--t3(#555a72)` + 10px + letter-spacing + mono로 줬는데 **읽히지 않았다.**
           같은 색이라도 **mono는 획이 가늘어** 작은 크기에서 대비가 무너지고, 자간까지 벌리면 더 흐려진다.
           → 색을 한 단계 올리고(t3→t2) 11.5px·sans로. **색만 베끼면 안 되고 굵기·크기까지 같이 봐야 한다.** */
      #fabmove-box .item-section-title{background:transparent;color:var(--t2);border-radius:0;
        padding:0 0 7px;margin-bottom:11px;border-bottom:1px solid var(--b2);
        font-size:11.5px;font-weight:600;letter-spacing:.02em;text-transform:none}
      #fabmove-box .item-section-title i{opacity:.9}
      /* 읽기 전용 값 — 입력칸처럼 보이면 고칠 수 있는 줄 안다(그래서 input이 아니라 <b>다) */
      #fabmove-box .ord-f label{color:var(--t3)!important}
      #fabmove-box .ord-f b{font-size:12.5px;color:var(--t1);font-weight:600;font-family:var(--fmono)}
      /* ★★입력칸 — 2026-08-25까지 **아무 스타일도 안 먹고 있었다.**
           portal.php의 입력칸 규칙(위 #order-write-popup·#woplan-box·#wosplit-box 목록)에
           `#fabmove-box`만 **빠져 있어서** 브라우저 기본 그대로 떴다(라벨 규칙엔 들어 있어 라벨만 멀쩡했다).
           → 포털 목록에 끼워 넣지 않고 **작업현황 `.wl-in` 규격으로 직접 준다**(어차피 톤이 다르다).
           ★CSS 스코프 함정 5번째 사례다 — 클래스를 재사용해도 규칙이 그 id를 안 부르면 안 먹는다. */
      #fabmove-box input[type=text],#fabmove-box input[type=date],
      #fabmove-box input[type=number],#fabmove-box select{
        flex:1;min-width:0;height:33px;padding:0 8px;box-sizing:border-box;
        background:var(--bg4);border:1px solid var(--b3);border-radius:4px;
        color:var(--t1);font-family:var(--fmono);font-size:12.5px;outline:none;transition:border-color .15s}
      #fabmove-box input:focus,#fabmove-box select:focus{border-color:var(--ac)}
      #fabmove-box input::placeholder{color:var(--t3)}
      /* 파레트 버튼 */
      #fm-pallet{display:flex;align-items:center;gap:6px;margin-bottom:10px}
      #fm-pallet .fm-pal-lbl{width:64px;font-size:12px;color:var(--t3);flex-shrink:0}
      #fm-pallet .btn{background:var(--bg4);border:1px solid var(--b3);color:var(--t2);
        border-radius:4px;font-family:var(--fmono);font-size:12px}
      #fm-pallet .btn:hover{background:var(--bg5);color:var(--t1)}
      #fm-inputs{display:grid;grid-template-columns:1fr 1.3fr;gap:8px 18px;margin-bottom:10px}
      /* ── 표 — 포털 .data-table을 이 팝업 안에서만 작업현황 표 서식으로 덮는다 ── */
      /* ★표 헤더도 같은 이유로 올렸다(형님 지적 2026-08-25) — t3+10px+mono는 안 읽힌다.
         작업현황 원본(.wl-tbl th)도 11px·weight 500·**sans**다. mono는 값 칸에만 쓴다. */
      #fabmove-table thead th{background:var(--bg4);color:var(--t2);border-bottom:1px solid var(--b3);
        font-size:11px;font-weight:600;letter-spacing:.02em;padding:8px 10px;text-transform:none}
      #fabmove-table tbody td{border-bottom:1px solid var(--b2);padding:6px 10px;
        font-size:12.5px;color:var(--t1)}
      #fabmove-table tbody tr:hover td{background:rgba(255,255,255,0.022)}
      /* ★전역 `.data-table tbody tr{cursor:pointer}`를 되돌린다 — 이 표는 **누르는 표가 아니라 적는 표**다.
           손가락이 뜨면 줄을 눌러야 하는 줄 안다(예약재고 상세에서 밟은 그 함정). */
      #fabmove-table tbody tr{cursor:default}
      /* ★'나간 양'은 **값**이다 — 옆 칸(일시·설비·작업)과 같은 밝기여야 한다(t1).
           t2로 뒀더니 한 칸만 흐려서 덜 중요한 값처럼 읽혔다(2026-08-25 같이 잡음). */
      #fabmove-table td.fm-qty{text-align:right;white-space:nowrap;font-family:var(--fmono);color:var(--t1)}
      #fabmove-table td.fm-in{text-align:right;padding:3px 6px}
      #fabmove-table tbody tr.fm-nowo td{color:var(--t3)}
      /* 표 안의 수량 입력칸 — 위 공통 입력칸보다 좁고 오른쪽 정렬 */
      #fabmove-table .fm-qty-input{width:88px;flex:none;text-align:right}
      #fabmove-box .fm-sumline{display:flex;justify-content:flex-end;align-items:center;gap:8px;
        margin-top:10px;font-size:13px;font-weight:700;color:var(--t1);font-family:var(--fmono)}
      /* ★안내줄도 t3는 어두운 바탕에서 안 읽힌다 — 이 줄은 "저장하면 재고가 바로 움직인다"는
           **경고**라 흐리면 안 된다(2026-08-25 같이 올림). */
      #fabmove-box .fm-note{margin-top:8px;font-size:11.5px;color:var(--t2);line-height:1.6}
      #fabmove-box .fm-note b{color:var(--t1)}

/* ── 옛 portal.php 825~840행 (덩어리 3/5) ───────────────── */
      #saleload-q{width:100%;padding:7px 10px;border:1px solid var(--border);border-radius:var(--radius);font-size:12.5px;color:var(--text);background:var(--bg);transition:all .15s;box-sizing:border-box;outline:none}
      #saleload-q:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(41,171,226,.1)}
      #saleload-table tbody tr.wl-ord{cursor:pointer}
      #saleload-table th:first-child,#saleload-table tbody tr.wl-ord>td:first-child{padding:6px 4px!important;text-align:center}
      #saleload-table tbody tr.wl-ord.open>td{background:var(--surface2)}
      #saleload-table tbody tr.wl-ord.open:hover>td{background:var(--sky-pale)}
      #saleload-table tr.wl-items:hover .wl-sub td{background:transparent}
      #saleload-table .wl-sub tbody tr:hover td{background:var(--sky-pale)!important}
      #saleload-table tbody tr.wl-items>td{padding:4px 12px 12px 40px;background:var(--surface2)!important}
      #saleload-table .wl-sub{width:100%;border-collapse:collapse;font-size:12px;background:var(--bg);border:1px solid var(--border)}
      #saleload-table .wl-sub th{padding:6px 8px;font-size:11px;font-weight:700;color:var(--text-muted);background:var(--surface2);border-bottom:1px solid var(--border);white-space:nowrap}
      #saleload-table .wl-sub td{padding:5px 8px;border-bottom:1px solid var(--border)}
      #saleload-table .wl-sub tbody tr:last-child td{border-bottom:none}
      #saleload-table .wl-sub tbody tr.on{opacity:.6}
      #saleload-table .wl-add{padding:3px 8px;line-height:1}
      #saleload-table .wl-done{display:inline-block;padding:3px 10px;border-radius:11px;background:var(--sky-pale);color:var(--accent);font-size:11px;font-weight:600}

/* ── 옛 portal.php 2153~2180행 (덩어리 4/5) ───────────────── */
      #sale-items-table{min-width:1330px}
      #sale-items-table .ord-code-wrap{display:flex;align-items:center;width:100%}
      #sale-items-table .ord-code-wrap>.oi{flex:1;min-width:0}
      #sale-items-table td.oc>.cs{width:100%;display:block}
      #sale-items-table td.oc>.cs>.cs-btn{width:100%;height:100%;min-height:34px;box-sizing:border-box;padding:8px;border:1px solid transparent;background:transparent;border-radius:4px;font-size:12.5px;color:var(--text)}
      #sale-items-table td.oc>.cs>.cs-btn:hover{background:var(--surface)}
      #sale-items-table td.oc>.cs>.cs-btn.cs-on,#sale-items-table td.oc>.cs>.cs-btn:focus{border-color:var(--accent);background:var(--surface);outline:none;box-shadow:0 0 0 2px rgba(41,171,226,.12)}
      #sale-list-table thead th{position:relative}
      /* ★필수값 미입력(수신처) — 클래스를 붙이면 규칙도 같이 쓴다(CLAUDE.md). 값이 들어갈 때까지 남는다. */
      #sale-write-popup .miss{border:1px solid rgba(232,68,68,.62)!important;animation:saleMissBlink 1.1s ease-in-out infinite}
      @keyframes saleMissBlink{0%,100%{box-shadow:0 0 0 0 rgba(232,68,68,0)}50%{box-shadow:0 0 0 3px rgba(232,68,68,.40)}}
      /* ── 보기 전용(view-only) — #order-write-popup.view-only 규칙의 복사본 ──
         출하로 만들어진 납품서는 **재고를 움직인 문서**라 여기서 못 고친다(서버 doc_save·doc_delete 가 진짜 차단).
         ★:not(.cs-btn) 필수 — 커스텀 드롭다운은 <button class="cs-btn">이라 빼먹으면 드롭다운이 사라진다. */
      #sale-write-popup.view-only #sale-popup-title::after{content:' (보기 전용)';font-weight:600;font-size:12px;color:rgba(255,255,255,.7)}
      #sale-write-popup.view-only #sale-save-btn,
      #sale-write-popup.view-only #sale-load-btn,
      #sale-write-popup.view-only .ord-f button:not(.cs-btn){display:none}
      #sale-write-popup.view-only #sale-toolbar-sel{display:none!important}
      #sale-write-popup.view-only #sale-popup-body input,
      #sale-write-popup.view-only #sale-popup-body select,
      #sale-write-popup.view-only #sale-popup-body textarea,
      #sale-write-popup.view-only #sale-popup-body .cs,
      #sale-write-popup.view-only #sale-popup-body .cs-btn{pointer-events:none}
      #sale-write-popup.view-only .ord-f input,
      #sale-write-popup.view-only .ord-f .cs-btn{background:var(--surface2);color:var(--text-muted)}
      #sale-write-popup.view-only #sale-items-table td.oc,
      #sale-write-popup.view-only #sale-items-table tbody tr:hover td{background:var(--surface2)}

/* ── 옛 portal.php 3971~3978행 (덩어리 5/5) ───────────────── */
/* ★클래스를 붙였으면 규칙도 같이 쓴다(CLAUDE.md) — 규칙 없는 클래스는 아무 효과가 없는데
   코드는 '스타일 줬다'로 읽혀 아무도 눈치채지 못한다. */
#ship-history .ship-row{ padding:3px 0; border-bottom:1px solid var(--border); }
#ship-history .ship-row:last-child{ border-bottom:0; }
/* 출하(나감)와 반품(들어옴)을 색으로 가른다 — 부호 하나로 저장하므로 읽는 쪽에서 갈라 준다 */
#ship-history .so{ color:var(--danger); font-weight:600; }
#ship-history .si{ color:var(--teal, #14b8a6); font-weight:600; }
#ship-history .oi{ color:var(--accent); }