/* ============================================================= 데이터 그리드 — azone 공용 컴포넌트. 여러 화면이 같은 표를 쓴다. 선택자를 전부 `.grid-c` 아래로 넣어 둔 이유: 한 파일로 합쳐지면 운영정보의 표(.dlv-table)와 같은 문서에 산다. `table`·`thead th` 처럼 맨 이름으로 적으면 남의 표를 건드린다. 공용 부품일수록 자기 울타리 안에만 있어야 한다. ============================================================= */ .grid-c { padding: 16px 18px 22px; } .grid-c .toolbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; } /* ⭐ **단추는 묶음 안에서 붙고, 묶음끼리는 벌어진다** (2026-08-01 사장님 지적 — *"아직도 버튼이 따닥따닥 붙어 있는 느낌인데?"*). 툴바 전체를 같은 간격으로 두면 **다섯이 한 줄로 흘러 어디까지가 한 갈래인지 안 보인다.** 안은 6px, 밖은 14px + 금 — 눈이 먼저 덩이를 세고 그다음 낱개를 읽는다. */ .grid-c .g-acts { display: flex; align-items: center; gap: 6px; } .grid-c .search { display: flex; align-items: center; gap: 7px; background: var(--surface); border: 1px solid var(--btn-bd); border-radius: 8px; padding: 0 10px; height: 31px; min-width: 210px; } .grid-c .search svg { color: var(--faint); flex: none; } .grid-c .search input { border: 0; outline: 0; background: transparent; color: var(--text); font: inherit; font-size: 12.5px; width: 100%; } .grid-c .spring { flex: 1; } .grid-c .count { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; } .grid-c .grid-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: 11px; overflow: hidden; box-shadow: var(--shadow); } .grid-c .scroll { overflow-x: auto; } .grid-c table { border-collapse: separate; border-spacing: 0; width: 100%; table-layout: fixed; } .grid-c thead th { background: var(--head); color: var(--muted); font-weight: 600; font-size: 12px; text-align: left; padding: 0 10px; height: 33px; border-bottom: 1px solid var(--border); border-right: 1px solid var(--line); user-select: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; position: relative; /* 폭 조절 손잡이를 오른쪽 끝에 얹기 위한 자리 */ } /* 폭 조절 손잡이 — 잡는 자리는 7px 로 넉넉하게, 보이는 선은 1px 로 얇게. 잡는 자리가 선만큼 얇으면 마우스가 자꾸 빗나가고, 선이 7px 이면 표가 지저분해진다. */ .grid-c .col-rz { position: absolute; top: 0; right: 0; width: 7px; height: 100%; cursor: col-resize; z-index: 3; } .grid-c .col-rz::after { content: ""; position: absolute; top: 5px; bottom: 5px; right: 3px; width: 2px; border-radius: 2px; background: transparent; transition: background .12s; } .grid-c .col-rz:hover::after { background: var(--accent); } /* 끄는 동안은 표 밖으로 마우스가 나가도 커서와 글자선택이 흔들리지 않게 한다. */ body.rz-on { cursor: col-resize; user-select: none; } /* 남는 칸 — 컬럼 폭의 합이 화면보다 좁을 때 여백을 여기가 먹는다. */ .grid-c th.c-fill, .grid-c td.c-fill { width: auto; border-right: 0; padding: 0; } .grid-c thead th.sortable { cursor: pointer; } .grid-c thead th[data-col] { cursor: grab; } .grid-c thead th.drop-l { box-shadow: inset 2px 0 0 var(--accent); } .grid-c thead th.drop-r { box-shadow: inset -2px 0 0 var(--accent); } .grid-c thead th .sarr { color: var(--accent); font-size: 10px; margin-left: 3px; } .grid-c th.c-chk, .grid-c th.c-exp, .grid-c td.c-chk, .grid-c td.c-exp { width: 40px; text-align: center; padding: 0; } /* ⭐ **칸 전체가 손잡이다** (2026-08-04 사장님 지적) — 네모는 16px, 칸은 40px 이라 빗나간 자리가 줄 클릭으로 샜다. 판정은 `grid_edit.js` 가 넓혔고, 여기서는 **손이 그렇게 보이게** 한다. 커서가 안 바뀌면 눌러도 되는 자리인 줄 모른다. */ .grid-c td.c-chk, .grid-c th.c-chk { cursor: pointer; } .grid-c td.c-chk:hover input[type=checkbox], .grid-c th.c-chk:hover input[type=checkbox] { border-color: var(--accent); } .grid-c th.num, .grid-c td.num { text-align: right; font-variant-numeric: tabular-nums; } .grid-c th.mid, .grid-c td.mid { text-align: center; } .grid-c tbody td { padding: 0 10px; height: 32px; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; color: var(--text); } .grid-c tbody tr:nth-child(even of .drow) { background: var(--even); } .grid-c tbody tr.drow:hover td { background: var(--hover); } .grid-c tbody tr.drow.rowsel td { background: var(--sel-row); } /* 꺼 둔 줄 — 부르는 쪽이 `rowCls` 로 붙인다. 운영정보의 꺼 둔 줄과 같은 칠이다. */ .grid-c tbody tr.drow.is-inactive td { opacity: .5; } /* 선택 셀은 한 칸만 두른다. 행 전체를 두르면 어디를 고치는지 흐려진다. */ .grid-c td.cellsel { outline: 2px solid var(--accent); outline-offset: -2px; position: relative; z-index: 1; } .grid-c td.editing { outline: 2px solid var(--accent); outline-offset: -2px; padding: 0; z-index: 2; } .grid-c td.editing input, .grid-c td.editing select { width: 100%; height: 100%; border: 0; outline: 0; background: var(--surface); color: var(--text); font: inherit; padding: 0 8px; font-variant-numeric: tabular-nums; } .grid-c td.num.editing input { text-align: right; } /* 세부내역 = 행 아래 별도 행. 셀 높이와 하이라이트에 영향을 주지 않는다. */ .grid-c tr.detail td { background: var(--hover); border-bottom: 1px solid var(--border); padding: 9px 14px; color: var(--muted); white-space: normal; height: auto; } .grid-c tr.detail b { color: var(--text); font-weight: 600; } .grid-c tr.detail .dgrid { display: flex; flex-wrap: wrap; gap: 4px 20px; } .grid-c input[type=checkbox] { appearance: none; -webkit-appearance: none; margin: 0; width: 16px; height: 16px; border: 1.5px solid var(--btn-bd); border-radius: 4px; background: var(--surface); cursor: pointer; position: relative; vertical-align: middle; transition: .12s; } .grid-c input[type=checkbox]:hover { border-color: var(--accent); } .grid-c input[type=checkbox]:checked { background: var(--accent); border-color: var(--accent); } .grid-c input[type=checkbox]:checked::after { content: ""; position: absolute; left: 4px; top: 1px; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); } .grid-c .exp, .grid-c .exp-all { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 6px; color: var(--faint); cursor: pointer; user-select: none; transition: .13s; } .grid-c .exp svg, .grid-c .exp-all svg { width: 13px; height: 13px; } .grid-c .exp:hover, .grid-c .exp-all:hover { background: var(--head); color: var(--accent); } .grid-c .foot { display: flex; align-items: center; gap: 8px; background: var(--head); border-top: 1px solid var(--border); padding: 8px 11px; } .grid-c .gear { position: relative; } .grid-c .psize { height: 28px; border: 1px solid var(--btn-bd); background: var(--surface); color: var(--text); border-radius: 7px; padding: 0 8px; font: inherit; font-size: 12px; cursor: pointer; } /* ⛔ **`.grid-c .pop` 으로 두지 마라** (2026-08-01 사장님 지적 — *"디자인이 터져서 엄청 못생겨졌어"*). 팝업을 body 로 띄우면서(그리드의 overflow 를 벗어나려고) **조상 선택자가 통째로 안 먹어 스타일이 빠졌다.** 떠 있는 것은 전역 이름으로 적는다. */ .g-pop { position: absolute; bottom: 35px; left: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-3); padding: 8px; min-width: 185px; z-index: 20; /* 칸이 많으면 넘친다 — 안에서 흐르게 두고, 위아래 어느 쪽으로 펴든 화면을 안 넘는다. */ max-height: calc(100vh - 160px); overflow-y: auto; } /* 위 공간이 모자라면 아래로 편다(grid_columns.js 가 붙인다). */ .g-pop.down { top: 35px; bottom: auto; } .g-pop .ph { font-size: 11px; color: var(--faint); padding: 2px 6px 6px; } .g-pop .pop-item { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 6px; } .g-pop .pop-item:hover { background: var(--hover); } .g-pop .pop-item .handle { cursor: grab; color: var(--faint); font-size: 12px; } .g-pop .pop-item.dragover { box-shadow: inset 0 2px 0 var(--accent); } .g-pop .pop-item label { flex: 1; cursor: pointer; } .grid-c .pager { margin-left: auto; display: flex; align-items: center; gap: 2px; } .grid-c .pgb { min-width: 27px; height: 27px; padding: 0 7px; border-radius: 6px; border: 1px solid var(--btn-bd); background: var(--surface); color: var(--text); cursor: pointer; font: inherit; font-size: 12px; font-variant-numeric: tabular-nums; } .grid-c .pgb:hover:not(:disabled) { background: var(--btn-hover); } .grid-c .pgb:disabled { color: var(--faint); opacity: .5; cursor: default; } .grid-c .pgb.on { background: var(--accent); border-color: var(--accent); color: #fff; } .grid-c .pgb.ar { padding: 0; width: 28px; display: inline-flex; align-items: center; justify-content: center; color: var(--muted); } .grid-c .pgb svg { width: 15px; height: 15px; } /* ---- 상세 안의 작은 표 ---- dgrid 는 항목을 흩뿌리는 배치라 수량·금액이 세로로 안 맞는다. 줄이 여럿인 전표처럼 **표가 맞는 자리**에 쓴다. 숫자 칸(.n)은 오른쪽 맞춤 · 자릿수가 흔들리지 않게. */ .grid-c tr.detail .bdt-head { margin-bottom: 8px; } /* ⭐ **마디마다 금을 긋는다** (2026-08-06 사장님 지시 — *"분리감을 주기 위해 분리 벽 만들 것"*). 합계 마디·이익 식·배송 시 이익 식이 붙어 있으면 **어디까지가 한 셈인지** 안 보인다. 금 하나와 여백이 그 물음을 없앤다. */ .grid-c tr.detail .bdt-sep { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); } /* ⭐ **폭을 100% 로 늘리지 마라** (2026-08-06 사장님 지적 — *"컬럼과 컬럼 사이가 과도하게 멀어 보기 어려움"*). 칸이 대여섯인데 넓은 그리드의 폭을 나눠 가지면 **칸 사이가 손가락 두 개만큼 벌어져** 한 줄을 눈으로 잇기 어렵다. **글이 차지하는 만큼만** 쓰고, 넘치면 그때 구른다. */ .grid-c tr.detail .dtable { width: auto; max-width: 100%; border-collapse: collapse; font-size: 11.5px; font-variant-numeric: tabular-nums; } /* 숫자 칸은 최소 폭을 줘 자릿수가 흔들려도 머리글과 안 붙는다. */ .grid-c tr.detail .dtable .n { min-width: 76px; } .grid-c tr.detail .dtable th { text-align: left; font-weight: 600; color: var(--muted); padding: 3px 8px; border-bottom: 1px solid var(--border); white-space: nowrap; } .grid-c tr.detail .dtable td { padding: 4px 8px; border-bottom: 1px solid var(--line); background: transparent; height: auto; color: var(--text); } .grid-c tr.detail .dtable .n { text-align: right; } .grid-c tr.detail .dtable .b { font-weight: 600; } .grid-c tr.detail .dtable .sub { color: var(--faint); } .grid-c tr.detail .dtable tfoot td { border-bottom: 0; border-top: 1px solid var(--border); padding-top: 6px; } .grid-c tr.detail .dtable tfoot .b { font-size: 12.5px; } /* ---- 종류 세그먼트 (cfg.tabs) ---- 검색칸 옆에서 「무엇을 볼까」를 정한다. 전표 창 머리의 토글과 같은 꼴이라 같은 손짓으로 읽힌다 — 켜진 것만 도드라진다. */ .g-tabs { display: flex; gap: 2px; padding: 2px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 9px; } .g-tab { height: 28px; padding: 0 12px; border: 0; border-radius: 7px; background: none; color: var(--muted); font-family: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; } .g-tab:hover { color: var(--text); } .g-tab.on { background: var(--surface); color: var(--text); box-shadow: var(--shadow-1); cursor: default; } /* 결이 다른 단추 사이의 금 (actions 의 { sep: true }). ⭐ 다섯이 나란히 붙으면 한 덩어리로 보인다 — 앞은 만드는 것, 뒤는 고른 것에 하는 것이라 손이 가는 목적이 다르다(2026-08-01 사장님 지시). */ .g-sep { width: 1px; height: 24px; flex: none; background: var(--muted); opacity: .55; /* 금 하나로는 약하다 — **양옆을 크게 벌려** 두 덩이로 읽히게 한다. */ margin: 0 12px; } /* 단추 묶음의 이름 (actions 의 { cap: '입출금' }). ⭐ **단추보다 작고 흐리다** — 이름은 읽히기만 하면 되고, 누르는 것은 단추다. 앞에 여백을 크게 둬 **뒤따르는 단추들과 한 덩이**로 보이게 한다. */ /* ---- ⭐ **칸 안에서 찾아 고르기** (2026-08-06 사장님 지시) ---- `