/* @LAYER: VIEW(모양) | @PORT: 8002 | @ROLE: 자체 ERP 하위 탭 4개 넓은 화면 2단 — 왼쪽 340px(입력·조건) / 오른쪽 표(재고 = 현재고·입고·판매 세 칸 · 판매 추이·제품·거래처 = .erp-main, 화면 높이에 맞춤) · 윗부분 얇게 | @KEY: .erp.erp-wide (erp_stock_layout.js 가 켠다)
 *
 * ★ 김성광 2026-09-29: "우측이 과도하게 여백 … 스크롤이 너무 길어지는 상태" → 제미나이 의논
 *   "현재고·판매 내역이 스크롤 없이 최소 6~8줄, 입력 폼은 슬림하게" (미리보기 3·4판 확정).
 * ★ 모든 규칙은 .erp.erp-wide 아래에만 — 켜지는 조건 = 자체 ERP + 폭 1100px 넘음.
 *   이카운트 탭과 좁은 화면·폰(/m)은 지금 모양 그대로다.
 * ★ CEO 2026-10-20 "재고 입출고가 가장 맘에 드는데 다른 것들도" → 판매 추이·제품 관리·거래처도 같은 2단:
 *   왼쪽 .erp-side(조건·입력) / 오른쪽 .erp-main(표). 숨긴 탭은 :not([hidden]) 로만 풀어야 한다(display 가 hidden 을 이긴다).
 * ★ 로고·색 변수는 건드리지 않는다(디자인 기준표 1장).
 */

/* 좁을 때(기본): 예전처럼 위아래로 쌓는다 */
.erp-split, .erp-left, .erp-right { display: block; }

/* ── 오른쪽 세 칸(현재고·입고·판매) — 왼쪽에 손잡이·▲▼ 세로 줄 · 순서는 erp_panel_order.js (CEO 2026-10-19) ── */
.erp-pane { display: flex; gap: 6px; margin-bottom: 16px; min-width: 0; }
.erp-pane > .erp-panel-box { flex: 1; min-width: 0; }
.erp-pane-ctl { display: flex; flex-direction: column; align-items: center; gap: 4px; padding-top: 10px; }
.erp-pane-grip { cursor: grab; color: var(--dim); font-size: 0.9rem; line-height: 1; padding: 2px; user-select: none; }
.erp-pane-mv { width: 22px; height: 22px; padding: 0; border-radius: 6px; border: 1px solid var(--line); background: transparent;
  color: var(--dim); font-size: 0.62rem; cursor: pointer; }
.erp-pane-mv:hover:not([disabled]) { color: var(--ai-neon, #00F0FF); border-color: var(--ai-neon, #00F0FF); }
.erp-pane-mv[disabled] { opacity: 0.3; cursor: default; }
.erp-pane-drag { opacity: 0.45; }
/* 탭 줄 — 넓은 화면에서만 보인다(좁은 화면·폰은 세 칸을 쌓고 ▲▼) · CEO 2026-10-19 "오른쪽 칸 안에 탭" */
.erp-pane-tabs { display: none; gap: 6px; }
.erp-pane-tab { padding: 7px 16px; border-radius: 9px 9px 0 0; border: 1px solid var(--line); border-bottom: none;
  background: transparent; color: var(--dim); font-size: 0.82rem; font-weight: 700; cursor: pointer; }
.erp-pane-tab.on { color: #fff; border-color: var(--ai-neon, #00F0FF); background: rgba(0, 240, 255, 0.08); }
/* 탭 끌기: 끄는 탭은 흐리게 · 들어갈 자리는 하늘색 세로 막대(자리를 밀지 않게 그림자로) · 글자 선택 커서 끔 */
.erp-pane-tab { position: relative; user-select: none; -webkit-user-select: none; }
.erp-pane-tab-drag { opacity: 0.4; }
.erp-pane-tab-in-before::before, .erp-pane-tab-in-after::after { content: ''; position: absolute; top: -3px; bottom: -3px; width: 3px;
  border-radius: 2px; background: var(--ai-neon, #00F0FF); box-shadow: 0 0 8px var(--ai-neon, #00F0FF); pointer-events: none; }
.erp-pane-tab-in-before::before { left: -5px; }
.erp-pane-tab-in-after::after { right: -5px; }

/* ── 켜짐: 바깥 여백·폭 제한 풀기 ── */
/* 바깥 여백은 ERP 가 켜져 있을 때만 — :has 라서 다른 화면으로 옮기면 저절로 원래대로(상태가 남지 않는다) */
.content-area:has(> .erp.erp-wide) { padding: 16px 24px; }
.erp.erp-wide { max-width: none !important; padding: 0 !important; }

/* ── 오른쪽 표 칸이 맨 위(엔진 제목 줄)부터 화면 끝까지 — 김성광 2026-09-29 실기 "빨간색으로 표시한 범위정도가 나오게" ──
 *   .erp 를 2열 격자로 만들고, 사이 껍데기(#erp-own-wrap · #own-pane-stock · .erp-split)는 display:contents 로 풀어
 *   왼쪽 340px 에 [엔진 제목 · 자체ERP/이카운트 · 하위 탭 · 입력·백업], 오른쪽에 [현재고 · 내역]을 맨 위부터 놓는다. */
.erp.erp-wide { display: grid !important; grid-template-columns: 340px minmax(0, 1fr); grid-template-rows: auto auto auto minmax(0, 1fr);
  column-gap: 14px; align-items: start; }
.erp.erp-wide #erp-own-wrap, .erp.erp-wide #own-pane-stock:not([hidden]), .erp.erp-wide .erp-split { display: contents; }
.erp.erp-wide .erp-hero, .erp.erp-wide div:has(> [data-erptab]), .erp.erp-wide .erp-tabs, .erp.erp-wide .erp-left, .erp.erp-wide .erp-side { grid-column: 1; min-width: 0; }
.erp.erp-wide .erp-right, .erp.erp-wide .erp-main { grid-column: 2; grid-row: 1 / span 4; }
/* 숫자 카드 줄(이번달 판매금액·수량·등록 제품)은 이 탭에서 뺀다 — 김성광 "표시한 부분 없애고".
 * ⟳ 새로고침은 [자체 ERP · 이카운트 연동] 줄 오른쪽 끝 — 김성광 실기 "새로고침은 이카운트 연동 옆쪽으로" */
.erp.erp-wide #erp-own-cards { display: none !important; }
.erp-btn.erp-own-refresh { display: none; }
.erp.erp-wide .erp-own-refresh { display: inline-flex; margin-left: auto; }

/* 왼쪽 340px 에 맞춘 윗부분 — 엔진 제목 한 줄(설명 문장은 뺌) · 탭 작게 */
.erp.erp-wide .erp-hero { padding: 10px 14px; margin-bottom: 10px; border-radius: 12px; }
.erp.erp-wide .erp-hico { width: 36px; height: 36px; border-radius: 10px; }
.erp.erp-wide .erp-hico .erp-ic { width: 18px; height: 18px; }
.erp.erp-wide .erp-ht .t { font-size: 1.1rem; }
.erp.erp-wide .erp-ht .s { display: none; }
.erp.erp-wide div:has(> [data-erptab]) { margin-bottom: 8px !important; }
.erp.erp-wide [data-erptab], .erp.erp-wide .erp-own-refresh { padding: 6px 10px; font-size: 0.74rem; }
/* 하위 탭 4개는 한 줄 — 김성광 실기 "표시한 부분을 한줄로" (340px 안에 맞게 글자·여백만 줄임) */
.erp.erp-wide .erp-tabs { margin-bottom: 10px !important; gap: 4px !important; flex-wrap: nowrap !important; }
.erp.erp-wide [data-owntab] { flex: 1 1 auto; min-width: 0; overflow: hidden; justify-content: center; gap: 2px; padding: 6px 4px;
  font-size: 0.69rem; white-space: nowrap; }   /* 글꼴이 넓은 PC 에서도 줄을 넘치지 않게 — 모자라면 버튼이 조금 줄어든다 */

/* ── 왼쪽 칸 ── */
.erp.erp-wide .erp-left { display: flex; flex-direction: column; gap: 12px; }
.erp.erp-wide .erp-left > * { margin: 0 !important; }
.erp.erp-wide #erp-own-entry { padding: 14px !important; }
/* 입력칸: 2열 격자(구분·수량 / 제품 / 단가·거래일 / 거래처 / 등록) */
.erp.erp-wide #erp-own-entry > div:nth-child(2) { display: grid !important; grid-template-columns: 1fr 1fr; grid-auto-flow: dense; gap: 8px !important; }
.erp.erp-wide #erp-own-entry > div:nth-child(2) > * { width: 100% !important; min-width: 0 !important; margin: 0 !important; }
.erp.erp-wide #own-m-code, .erp.erp-wide #own-m-partner, .erp.erp-wide #own-m-partner + span,
.erp.erp-wide #erp-own-entry .erp-btn.pri { grid-column: span 2; }
.erp.erp-wide #erp-own-entry .erp-btn.pri { justify-content: center; }

/* ── 오른쪽: 탭 줄 + 고른 칸 하나가 나머지 높이 전부(순서·고른 탭은 사용자), 높이는 erp_stock_layout.js 가 화면 끝까지 맞춘다 ── */
.erp.erp-wide .erp-right { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 0; min-width: 0; min-height: 560px; }
.erp.erp-wide .erp-pane-tabs { display: flex; }
.erp.erp-wide .erp-right > .erp-pane:not(.erp-pane-on) { display: none; }
.erp.erp-wide .erp-pane-ctl { display: none; }
.erp.erp-wide .erp-right > .erp-pane { min-height: 0; margin: 0; }
.erp.erp-wide .erp-right .erp-pane > .erp-panel-box { display: flex; flex-direction: column; min-height: 0; margin: 0 !important; padding: 12px 14px !important; }
.erp.erp-wide .erp-right .erp-pane > .erp-panel-box > div:first-child { margin-bottom: 8px !important; }
.erp.erp-wide #erp-own-in-body, .erp.erp-wide #erp-own-sale-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.erp.erp-wide .erp-tw { flex: 1; min-height: 0; overflow: auto !important; border-radius: 10px; }
.erp.erp-wide .erp-tw thead th { position: sticky; top: 0; z-index: 1; background: #0f131c; }
.erp.erp-wide .erp-right .erp-tbl th { padding: 6px 9px; }
.erp.erp-wide .erp-right .erp-tbl td { padding: 6px 9px; font-size: 0.79rem; }
.erp.erp-wide .erp-right .erp-tbl .erp-btn { padding: 3px 8px !important; }
.erp.erp-wide .erp-right .own-safe { padding: 2px 6px !important; }

/* ── 페이지 바 · 기간 줄 (erp_stock_pager.js · erp_move_pager.js) — 좁을 때도 같은 모양 ── */
.erp-pbar { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 6px 0 0; margin-top: 6px;
  border-top: 1px solid var(--line); font-size: 0.72rem; color: var(--faint); }
.erp-pbar b { color: var(--dim); }
.erp-pbar .erp-btn { padding: 3px 9px; font-size: 0.72rem; }
.erp-pbar .erp-btn[disabled] { opacity: 0.4; cursor: default; }
.erp-fbar { display: inline-flex; align-items: center; gap: 5px; flex-wrap: wrap; margin-left: 10px; padding-left: 12px;
  border-left: 1px solid var(--line); font-weight: 400; font-size: 0.74rem; color: var(--dim); }
.erp-fbar .erp-in { padding: 5px 8px; font-size: 0.74rem; }
.erp-fbar .q { padding: 3px 9px; border-radius: 100px; border: 1px solid var(--line); cursor: pointer; font-size: 0.7rem; background: transparent; color: var(--dim); }
.erp-fbar .q.on { border-color: var(--ai-neon, #00F0FF); color: var(--ai-neon, #00F0FF); background: rgba(0, 240, 255, 0.08); }
.erp-info { display: inline-flex; width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--line); color: var(--dim);
  font-size: 0.66rem; align-items: center; justify-content: center; cursor: help; font-weight: 400; }

/* ── 판매 추이·제품 관리·거래처 (CEO 2026-10-20) — 왼쪽 .erp-side = 조건·입력, 오른쪽 .erp-main = 표(칸 안에서 스크롤) ── */
.erp.erp-wide #own-pane-sales:not([hidden]), .erp.erp-wide #own-pane-prod:not([hidden]), .erp.erp-wide #own-pane-partner:not([hidden]),
.erp.erp-wide #erp-own-sales, .erp.erp-wide #erp-own-partner, .erp.erp-wide #erp-own-partner > div { display: contents; }
.erp.erp-wide .erp-side, .erp.erp-wide .erp-main { margin: 0 !important; padding: 14px !important; border: 1px solid var(--line); border-radius: 14px;
  background: linear-gradient(160deg, rgba(255,255,255,.045), rgba(255,255,255,.012)); }
.erp.erp-wide .erp-main { min-height: 0; overflow: auto; box-sizing: border-box; }
.erp.erp-wide .erp-side input, .erp.erp-wide .erp-side select { min-width: 0 !important; max-width: 100%; box-sizing: border-box; }
.erp.erp-wide #erp-own-prodform .erp-in { width: 100% !important; }
.erp.erp-wide .erp-side .erp-pnl-cards { flex-direction: column; }
.erp.erp-wide .erp-side .erp-pnl-cards > div { flex: none !important; }   /* 세로로 쌓으면 flex-basis 160px 이 '높이'가 된다 */
.erp.erp-wide #erp-own-sales .erp-main > div { overflow: visible !important; }   /* 표 감싼 가로 스크롤 칸이 있으면 머리 붙이기가 그 칸에 묶인다 — 스크롤은 .erp-main 하나가 맡는다 */
.erp.erp-wide .erp-main th { position: sticky; top: -14px; z-index: 1; background: #12161f; }   /* 표 머리 = 칸 안에서 스크롤해도 위에(-14 = 칸 안쪽 여백) */
.erp.erp-wide #erp-own-partner .erp-side > div { flex-wrap: wrap; }

/* ── 이카운트 연동 (CEO 2026-10-20 "진행해") — 왼쪽 = 동기화 버튼·알림·검색·상태 / 오른쪽 = 재고 표. 숨김은 inline display:none 이 이긴다 ── */
.erp.erp-wide #erp-panel { display: contents; }
.erp.erp-wide #erp-panel .erp-main .erp-panel-box { overflow: visible !important; border: none; background: none; box-shadow: none; padding: 0 !important; }
.erp.erp-wide #erp-panel #erp-controls input { flex: 1 1 100% !important; }   /* 왼쪽 340px 에서 검색칸이 한 줄을 다 쓴다(정렬·보기는 다음 줄) */