/* erp2 공용 부품(24조 꼴) — 숫자 없이 토큰만. 옛 부품은 style.css 에서 차례로 옮겨 온다. 규약 knowledge/규약/디자인시스템.md 8절. */
:root { --search-w: 420px; /* 찾는 칸 표준 폭 — 거래처 목록과 같다 */ }

/* 2-1. 그룹 상자 */
.groupbox {
  margin: 0 0 var(--sp-4) 0;
  border: 1px solid var(--c-line);
  border-radius: var(--r-0);
  padding: var(--sp-3) var(--sp-4) var(--sp-4);
  background: var(--c-surface);
  box-sizing: border-box;
  min-width: 0;
}

.groupbox > legend {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  color: var(--c-text-2);
  padding: 0 var(--sp-2);
}

.gb-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-2);
  min-height: var(--h-md);
}

.gb-row > label {
  width: var(--label-w);
  flex-shrink: 0;
  text-align: right;
  font-size: var(--fs-md);
  color: var(--c-text-2);
}

.gb-row > input,
.gb-row > select {
  flex: 1;
  min-width: 0;
  height: var(--h-md);
  border: 1px solid var(--c-line);
  border-radius: var(--r-1);
  padding: 0 var(--sp-3);
  font-size: var(--fs-md);
  box-sizing: border-box;
  font-family: inherit;
}

.gb-row > input[readonly] {
  background: var(--c-sunken);
}

.gb-cols {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-6);
}

/* 2-2. 상태줄 */
.statusbar {
  height: var(--h-md);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 0 var(--sp-4);
  background: var(--c-head);
  border-top: 1px solid var(--c-line);
  font-size: var(--fs-md);
  color: var(--c-text);
  white-space: nowrap;
  box-sizing: border-box;
}

.statusbar:not(.is-info):not(.is-ok):not(.is-warn):not(.is-error) {
  color: var(--c-text-2);
}

.sb-msg {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 기호는 글자 크기를 따른다 — 밀도가 바뀌어도 그대로(줄 높이만 커진다) */
.sb-ico {
  width: calc(var(--fs-md) + var(--sp-1) * 2);
  height: calc(var(--fs-md) + var(--sp-1) * 2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--c-on-dark);
  font-weight: var(--fw-bold);
  border-radius: var(--r-1);
  flex-shrink: 0;
  line-height: var(--lh-1);
  box-sizing: border-box;
}

.statusbar.is-info .sb-ico {
  background: var(--c-link);
}

.statusbar.is-ok .sb-ico {
  background: var(--c-ok);
}

.statusbar.is-warn .sb-ico {
  background: var(--c-warn);
}

.statusbar.is-error .sb-ico {
  background: var(--c-danger);
}

.sb-meta {
  margin-left: auto;
  font-size: var(--fs-sm);
  color: var(--c-text-3);
  flex-shrink: 0;
}

.statusbar.in-window {
  border-top: 1px solid var(--c-line);
  background: var(--c-sunken);
}

.modal.window .groupbox { padding: var(--sp-1) var(--sp-3) var(--sp-2); margin: 0 0 var(--sp-3); }
.modal.window .groupbox > legend { padding: 0 var(--sp-2); }
.modal.window .statusbar.in-window { margin: 0; }

/* 화면 머리줄 — SAP 제목줄 + 응용 도구줄을 한 줄로(24조 8-1). 제목 · 건수 · 찾는 칸 · Filter · 빈칸(.spacer) · 오른쪽 단추 차례 */
.page-head { position: relative; display: flex; align-items: center; gap: var(--sp-3); min-height: var(--h-lg); margin: 0 0 var(--sp-2); min-width: 0; }
.page-title { margin: 0; font-size: var(--fs-2xl); font-weight: var(--fw-semi); white-space: nowrap; }
.page-count { color: var(--c-text-2); font-size: var(--fs-md); white-space: nowrap; }
.page-head .search-form { flex: 0 1 var(--search-w); min-width: 0; margin: 0; }
.page-head .search-input { width: 100%; max-width: none; }
.page-head .spacer { flex: 1 1 auto; }
.page-head .fn-list { right: 0; left: auto; }
.page-head .live-line { margin-left: var(--sp-2); }
.page-head > form { margin: 0; }
.page-head .filter-box { position: absolute; top: 100%; left: 0; right: auto; width: min(calc(var(--sp-9) * 16), 100%); z-index: 30; box-shadow: 0 var(--sp-1) var(--sp-4) var(--c-line); }   /* [Filter] 상자는 머리줄 아래로 떠서 연다(틀이 안 밀림) — cdoc- · veh- · quote- 복사본 셋의 공용판 */
.page-sub { margin: calc(var(--sp-1) * -1) 0 var(--sp-3); font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--c-text-2); word-break: break-all; }
@media (max-width: 700px) {
  .page-head { flex-wrap: wrap; }
  .page-head .search-form { flex: 1 1 100%; order: 5; }
  .page-head .btn { white-space: nowrap; }
}

/* 칸 배치 — 상자 안 2칸 격자(24조 · 설계_칸배치). 기본은 한 줄, .fr-half 만 반 줄 */
.gb-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--sp-6); }
.gb-grid > * { grid-column: 1 / -1; min-width: 0; }
.gb-grid > .fr-half { grid-column: auto / span 1; }
@media (max-width: 700px) { .gb-grid > .fr-half { grid-column: 1 / -1; } }


/* ===== 규약 3-1 화면 꼴 규칙 일곱의 공용 부품 (대표님 2026-10-09 구매 화면 지적) =====
   바탕 규칙은 :where() 로 특이도 0 — 모듈 · 옛 규칙이 정한 것은 그대로 이기고, 아무도 안 정한 칸만 erp2 꼴을 받는다. */

/* ② 입력칸 한 꼴 — 표 안 칸도 브라우저 기본 꼴(검은 안쪽 테두리)이 남지 않게 */
:where(input:not([type=checkbox], [type=radio], [type=file], [type=hidden], [type=range], [type=color], [type=submit], [type=button], [type=image], [type=reset]), select, textarea) {
  box-sizing: border-box; height: var(--h-md); padding: 0 var(--sp-3);
  border: 1px solid var(--c-line); border-radius: var(--r-1);
  background: var(--c-surface); color: inherit; font: inherit; font-size: var(--fs-md);
}
:where(textarea) { height: auto; padding: var(--sp-2) var(--sp-3); }
:where(input, select, textarea):focus { outline: none; border-color: var(--c-link); }

/* ③ 보기 = 글자 — 보기 상태에서는 잠긴 입력칸 대신 이것으로 값을 그린다(높이는 입력칸과 같아 틀이 안 움직인다) */
.view-value { display: flex; align-items: center; min-height: var(--h-md); min-width: 0; font-size: var(--fs-md); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.view-value:empty::before { content: "—"; color: var(--c-text-3); }

/* ④ 단추 한 높이 — <a> · <button> · 폼 안 단추가 한 줄에서 같다. 높이는 style.css .btn(--h-md) · .btn-small(--h-sm) 그대로 */
:where(.btn) { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; text-decoration: none; white-space: nowrap; }
:where(.btn[hidden]) { display: none; }
.btn-form { display: inline-flex; align-items: center; margin: 0; }

/* ⑤ 숫자 칸 — 오른쪽 맞춤 · 자릿수 고정폭(표시는 |won · |qty 필터) */
.num, .grid .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }   /* 표 칸 규칙(.grid td)보다 앞서게 */

/* ① 층위는 선 굵기 · 진하기로 — 본보기 8116 전표 화면(대표님 "메인전표 '안에' 포함된 연결전표 & 첨부, 메인전표에 '부속'된 부속전표").
   **단일 전표는 상자 없이**(8129 꼴: .view-head + .kv-grid + 표) — 깔끔. **전표 안에 전표가 들 때만** 메인을 .sheet 로 감싼다(8116 꼴) — 겹치면 구분이 먼저.
   .sheet      메인 상자 — 진한 테두리. 안: 머리띠(.view-head) → 본문(groupbox) → 소제목(.view-sec) + 표
   .sheet-zone 메인 상자 **안의** 구역 — 점선 위 줄 뒤에 연결 전표 · 첨부(같은 상자 안)
   .sheet-sub  부속 상자 — 메인 아래, 연한 테두리 · 왼쪽 끝은 메인과 같거나 안쪽(바깥으로 나가지 않는다). 제목은 .view-sec */
/* 모서리는 직각 — 대표님 2026-10-09 "8116 은 너무 둥글둥글" */
.sheet { border: var(--bw-main) solid var(--c-line-strong); border-radius: var(--r-0); padding: var(--sp-3) var(--sp-4); background: var(--c-surface); min-width: 0; }
.sheet-zone { border-top: var(--bw-main) dotted var(--c-line); margin-top: var(--sp-4); padding-top: var(--sp-3); }
.sheet-sub { border: var(--bw-sub) solid var(--c-line); border-radius: var(--r-0); padding: var(--sp-3) var(--sp-4); margin-top: var(--sp-4); background: var(--c-surface); min-width: 0; }
.sheet-sub > .view-sec:first-child { margin-top: 0; }

/* ===== 한 건 보기 칸(오른쪽 보기 판 · 상세) 제목 두 단 — 대표님 2026-10-09 "메인 타이틀에 대한 층위가 약해보인다"
   차례: [메인 타이틀 줄] → 관련 본문 → [소제목 줄(첨부파일 …)] → 올리기 칸 → 관련 목록.
   층위는 글자 크기 · 굵기 · 선 굵기로(바탕색으로 가르지 않는다, 3-1 ①): 제목 16 굵게 + 아래 1.5 검정 선 / 소제목 13 굵게 + 아래 1 회색 선 / 본문 12 */
.view-head { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; min-height: var(--h-lg);
  padding-bottom: var(--sp-3); margin-bottom: var(--sp-4); border-bottom: var(--bw-head) solid var(--c-line-strong); }
.view-title { margin: 0; font-size: var(--fs-2xl); font-weight: var(--fw-bold); color: var(--c-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.view-meta { color: var(--c-text-2); font-size: var(--fs-md); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.view-head .spacer, .view-sec .spacer { flex: 1 1 auto; }
.view-sec { display: flex; align-items: center; gap: var(--sp-3); min-height: var(--h-md);
  margin: var(--sp-6) 0 var(--sp-3); padding-bottom: var(--sp-1); border-bottom: 1px solid var(--c-line); }
.view-sec-title { margin: 0; font-size: var(--fs-lg); font-weight: var(--fw-semi); color: var(--c-text); white-space: nowrap; }
.view-sec:first-child { margin-top: 0; }

/* 이름표 · 값 칸(보기 = 글자, 규약 3-1 ③) — 본보기 8129 견적서 보기 칸. 한 줄에 이름표 · 값 두 쌍, 폰은 한 쌍.
   <div class="kv-grid"><div class="kv-f"><label>견적일</label><span>2026-10-07</span></div> … </div> */
.kv-grid { display: grid; grid-template-columns: max-content minmax(0, 1fr) max-content minmax(0, 1fr);
  border-top: 1px solid var(--c-line); border-left: 1px solid var(--c-line); margin: var(--sp-2) 0 var(--sp-3); font-size: var(--fs-md); }
.kv-f { display: contents; }
.kv-f > label, .kv-f > span { display: flex; align-items: center; min-height: var(--h-lg); padding: 0 var(--sp-4); min-width: 0;
  border-right: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kv-f > label { background: var(--c-head); color: var(--c-text-2); font-weight: var(--fw-normal); }
.kv-f.kv-wide > span { grid-column: span 3; }
@media (max-width: 700px) { .kv-grid { grid-template-columns: max-content minmax(0, 1fr); } .kv-f.kv-wide > span { grid-column: auto; } }

/* 상세 표(명세 줄) — 규약 목록과창 10절 · 동작은 app.js 상세 표. 번호 칸 · ⊕ 끼우기 · 줄을 누르면 단추줄([삭제][↑][↓]) */
.dg-bar { display: flex; align-items: center; gap: var(--sp-2); min-height: var(--h-md); margin: var(--sp-2) 0; visibility: hidden; }
.dg-bar.on { visibility: visible; }
.dg-btn { display: inline-flex; align-items: center; justify-content: center; width: var(--h-md); height: var(--h-md); padding: 0; border: 1px solid var(--c-line); border-radius: 0; background: var(--c-surface); color: var(--c-text); cursor: pointer; }
.dg-btn:hover { background: var(--c-hover); }
.dg-btn > svg { width: var(--fs-xl); height: var(--fs-xl); }
@media (max-width: 700px) { .dg-btn { width: var(--h-touch); height: var(--h-touch); } }  /* 폰은 단추 크게 — 줄 차례 [↑][↓] · [+] · [삭제] 같이 */
.dgrid .dg-no { display: inline-flex; align-items: center; justify-content: center; min-width: var(--h-sm); height: var(--h-sm); padding: 0 var(--sp-1); box-sizing: border-box; border: 1px solid var(--c-line); color: var(--c-text-2); font-size: var(--fs-sm); background: var(--c-surface); }
.dgrid tr.is-sel > td { background: var(--c-selected); }
.dgrid tr.is-sel .dg-no { border-color: var(--c-primary); color: var(--c-primary); }   /* 누른 줄 — 테두리만 */
.dgrid tr.is-chk .dg-no, .dgrid thead [data-dg="all"].is-chk { background: var(--c-primary); border-color: var(--c-primary); color: var(--c-on-dark); }   /* 체크한 줄 — 번호 칸을 칠한다(체크 칸 대신) */
.dgrid tr.is-del > td { opacity: .45; text-decoration: line-through; }
.dgrid tbody.fs-list tr.fs-item { cursor: pointer; }
.dgrid .dg-delbox { display: none; }
.dgrid .dg-c-ins { width: 3ch; text-align: center; }
.dgrid .dg-ins { display: inline-flex; align-items: center; justify-content: center; width: var(--h-sm); height: var(--h-sm); padding: 0; border: 0; border-radius: var(--r-round); background: var(--c-primary); color: var(--c-on-dark); font-size: var(--fs-lg); line-height: 1; cursor: pointer; }
.dgrid .dg-ins:hover { background: var(--c-primary-hover); }

/* 상세 표 — 고르기 체크 · 일괄변경(규약 목록과창 10절) */
.dgrid .dg-no, .dgrid thead [data-dg="all"] { cursor: pointer; user-select: none; }
.dg-bulk-on { display: inline-flex; align-items: center; gap: var(--sp-1); margin-left: var(--sp-4); font-size: var(--fs-md); color: var(--c-text); cursor: pointer; }
.dg-bulk { display: inline-flex; align-items: center; gap: var(--sp-2); }
.dg-bulk[hidden] { display: none; }
.dg-bulk-field { height: var(--h-md); border: 1px solid var(--c-primary); border-radius: 0; padding: 0 var(--sp-2); font-size: var(--fs-md); font-family: inherit; background: var(--c-surface); }
.dg-bulk-modes { display: inline-flex; }
.dg-bulk-modes[hidden] { display: none; }
.dg-mode { height: var(--h-md); padding: 0 var(--sp-3); border: 1px solid var(--c-line); margin-left: -1px; border-radius: 0; background: var(--c-surface); color: var(--c-text); font-size: var(--fs-md); font-family: inherit; cursor: pointer; }
.dg-mode.on { background: var(--c-head); font-weight: var(--fw-semi); }
.dg-bulk-val { width: 15em; height: var(--h-md); box-sizing: border-box; border: 1px solid var(--c-line); border-radius: 0; padding: 0 var(--sp-2); font-size: var(--fs-md); font-family: inherit; }
.dg-bulk-val.is-num { text-align: right; }
.dg-btn:disabled { opacity: .35; cursor: default; background: var(--c-surface); }   /* [+] — 여러 줄을 체크하면 잠김 */
table.dgrid tbody.fs-list tr.fs-item:not(.is-sel) input:not([type=checkbox]):not([type=hidden]),
table.dgrid tbody.fs-list tr.fs-item:not(.is-sel) select,
table.dgrid tbody.fs-list tr.fs-item:not(.is-sel) textarea { border-color: transparent; background: transparent; box-shadow: none; cursor: default; }
table.dgrid tbody.fs-list tr.fs-item:not(.is-sel) .lookup-find,
table.dgrid tbody.fs-list tr.fs-item:not(.is-sel) .datebox-btn { visibility: hidden; }
.dg-sum td { font-weight: var(--fw-bold); background: var(--c-head); border-top: var(--bw-head) solid var(--c-line-strong); }


/* 날짜 칸 달력 (필드값-013) */
.datebox { display: inline-flex; align-items: stretch; }
.datebox > input { border-top-right-radius: var(--r-0); border-bottom-right-radius: var(--r-0); }
.datebox-btn { display: inline-flex; align-items: center; justify-content: center; padding: 0 var(--sp-2); border: 1px solid var(--c-line); border-left: none; border-radius: var(--r-0); background: var(--c-head); color: var(--c-text-2); cursor: pointer; box-sizing: border-box; }
.datebox-btn:hover { background: var(--c-hover); }
.datebox-btn:disabled { opacity: .35; cursor: default; }
.datebox-btn > svg { display: block; }

.air-datepicker {
  --adp-font-family: var(--font-sans);
  --adp-font-size: var(--fs-md);
  /* 촘촘하게(대표님 2026-10-10 "크기도 너무 커 좀더 압축해") — 칸 26 × 7 + 여백 */
  --adp-width: calc(var(--h-xl) * 7 + var(--sp-2) * 2);
  --adp-padding: var(--sp-2);
  --adp-nav-height: var(--h-lg);
  --adp-nav-action-size: var(--h-lg);
  --adp-day-cell-width: var(--h-xl);
  --adp-day-cell-height: var(--h-md);
  --adp-month-cell-height: var(--h-xl);
  --adp-year-cell-height: var(--h-xl);
  --adp-btn-height: var(--h-lg);
  --adp-accent-color: var(--c-primary);
  --adp-border-radius: var(--r-0);
  --adp-cell-border-radius: var(--r-0);
  --adp-btn-border-radius: var(--r-0);
  --adp-border-color: var(--c-line-strong);
  --adp-border-color-inner: var(--c-line);
  --adp-day-name-color: var(--c-text-2);
  --adp-color: var(--c-text);
  --adp-color-secondary: var(--c-text-2);
  --adp-color-other-month: var(--c-text-3);
  --adp-background-color: var(--c-surface);
  --adp-cell-background-color-hover: var(--c-hover);
  --adp-cell-background-color-selected: var(--c-primary);
  --adp-cell-background-color-selected-hover: var(--c-primary-hover);
  --adp-color-current-date: var(--c-primary);
  --adp-background-color-hover: var(--c-hover);
  --adp-background-color-active: var(--c-selected);
  --adp-btn-color: var(--c-primary);
  --adp-btn-color-hover: var(--c-primary-hover);
  --adp-btn-background-color-hover: var(--c-hover);
  --adp-btn-background-color-active: var(--c-selected);
}

.air-datepicker-cell.-weekend- { color: var(--c-danger); }
.air-datepicker--pointer { display: none; }  /* 위 · 아래로 뒤집혀 펴지므로 꼭지는 두지 않는다 */
.datebox-today { font-weight: var(--fw-bold); }

/* 표에서 바로 입력(common/inline.py) */
.inline-pane { display: flex; flex-direction: column; height: 100%; }
.inline-pane .view-head { padding: var(--sp-4) var(--sp-6); border-bottom: var(--bw-hair) solid var(--c-line); margin-bottom: 0; }
.inline-head-actions { display: flex; gap: var(--sp-3); align-items: center; }
.inline-body { flex: 1 1 auto; overflow: auto; padding: var(--sp-6); }

.inline-group-box { margin-bottom: var(--sp-7); }
.inline-group-head { display: flex; align-items: center; gap: var(--sp-3); min-height: var(--h-md); }
.inline-group-head-form { display: flex; align-items: center; gap: var(--sp-3); }
.inline-group-input { max-width: calc(var(--sp-8) * 10); }

.inline-new-group { display: flex; gap: var(--sp-4); align-items: center; padding: var(--sp-4); border: var(--bw-hair) dashed var(--c-primary); margin-bottom: var(--sp-6); }
.inline-new-group-label { font-weight: var(--fw-semi); font-size: var(--fs-lg); }

.inline-table { width: 100%; border-collapse: collapse; margin: 0; }
.inline-table th, .inline-table td { padding: var(--sp-3) var(--sp-4); }
.inline-table thead tr { background: var(--c-head); border-bottom: var(--bw-hair) solid var(--c-line); text-align: left; }
.inline-table thead th { font-size: var(--fs-sm); color: var(--c-text-2); font-weight: var(--fw-semi); }
.inline-table tbody tr { border-bottom: var(--bw-hair) solid var(--c-line); }

.inline-col-grip { width: var(--h-xl); }
.inline-col-act { width: calc(var(--h-xl) * 8); }   /* 고치는 줄의 [그룹][저장][취소][삭제] 가 다 보이게 — 좁으면 [취소] 가 잘려 빈 줄을 [저장] 으로만 닫게 됐다(2026-10-11) */
.inline-table.has-check .inline-col-act { width: calc(var(--h-xl) * 10); }   /* 확인 칩 + [로그인확인] [수정] 이 한 줄에 */

.inline-cell-grip { text-align: center; }
.inline-cell-act { text-align: center; white-space: nowrap; }
.inline-table td.inline-cell-act { overflow: visible; }
/* 확인 칩(예: 로그인 확인 날짜) — 잠겨 있어도 보인다. [로그인확인] 단추는 lock-act 라 풀었을 때만(대표님 2026-10-11) */
/* [상태] 한 칸 = 칩이자 단추 — 잠겨 있으면 글자만(누를 수 없음), 풀면 [로그인 확인 / 날짜] 단추(대표님 2026-10-11) */
.btn.inline-check { display: inline-flex; flex-direction: column; align-items: flex-start; justify-content: center; vertical-align: middle;
  height: auto; min-height: var(--h-sm); line-height: var(--lh-1); gap: var(--sp-1); padding: var(--sp-1) var(--sp-3);
  font-size: var(--fs-sm); white-space: nowrap; margin-right: var(--sp-3);
  background: var(--c-surface); color: var(--c-primary); border: var(--bw-hair) solid var(--c-primary); }
.btn.inline-check:hover { background: var(--c-hover); }
/* 줄 수정 칸의 그룹 고르기 — 고르고 [저장] 하면 그 그룹으로 옮겨진다 */
.inline-group-pick { height: var(--h-sm); max-width: calc(var(--h-xl) * 4); margin-right: var(--sp-2); font-size: var(--fs-sm); }
/* 비밀번호 칸 눈 단추(app.js · input[data-reveal]) */
.pw-wrap { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; width: 100%; }
.pw-wrap > input { flex: 1 1 auto; min-width: 0; }
.pw-reveal { flex: none; padding: 0 var(--sp-2); }
.btn.pw-reveal.on { background: var(--c-selected); color: var(--c-primary); border-color: var(--c-primary); }   /* 켜짐 = 연한 파랑 바탕 + 파란 눈(공용 .btn.on 의 진한 바탕이면 눈이 안 보임) */
.inline-pane:not(.is-edit) .btn.inline-check { background: transparent; border-color: transparent; color: var(--c-text-2); pointer-events: none; }
.inline-pane:not(.is-edit) .btn.inline-check .inline-check-date { color: var(--c-text); }
.inline-pane:not(.is-edit) .btn.inline-check.is-none .inline-check-date { color: var(--c-text-3); }

.inline-grip { cursor: grab; user-select: none; text-align: center; color: var(--c-text-3); }
.inline-grip:active { cursor: grabbing; }

.inline-row-edit { background: var(--c-note-bg); }
.inline-err { color: var(--c-danger); font-size: var(--fs-sm); margin-top: var(--sp-1); }

.sortable-ghost { opacity: .4; background: var(--c-selected); }
/* 끌기 손잡이 :: (디자인시스템 3-2 "끌어 옮기기") — 수정모드(.is-edit)에서만 보인다. 잠기면 숨고 끌기도 꺼진다(app.js ErpDrag) */
/* 트리 층위(디자인시스템 3-2 "트리 층위", 2026-10-11 "층위가 구분이 잘 안돼") — 분류 머리 = 회색 띠 · 굵은 진한 글씨 · 위아래 줄,
   그 아래 줄 = 들여쓰기 + 왼쪽 안내선(같은 분류 안이라는 표시). 고른 줄(.active · .on)은 파랑 채움 그대로. */
.tree-cap { display: flex; align-items: center; gap: var(--sp-2); min-height: var(--h-md); padding: 0 var(--sp-4); margin-top: var(--sp-3); background: var(--c-head); border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); color: var(--c-text); font-size: var(--fs-md); font-weight: var(--fw-bold); }
.tree-cap:first-child { margin-top: 0; }
.tree-sub { margin-left: var(--sp-4); border-left: var(--bw-head) solid var(--c-line); border-radius: 0 var(--r-1) var(--r-1) 0; }
.tree-sub.active, .tree-sub.on { border-left-color: var(--c-primary); }
.tree-item { display: flex; justify-content: space-between; padding: var(--sp-2) var(--sp-4); border-radius: var(--r-2); color: inherit; text-decoration: none; font-size: var(--fs-lg); }
.tree-item:hover { background: var(--c-head); }
.tree-item.active { background: var(--c-primary); color: var(--c-on-dark); font-weight: var(--fw-semi); }
.drag-grip { display: none; align-items: center; justify-content: center; width: var(--h-sm); height: var(--h-sm); color: var(--c-text-3); cursor: grab; user-select: none; touch-action: none; flex: none; }
.is-edit .drag-grip { display: inline-flex; }
[data-edit-scope]:not(.is-edit) .lock-act { display: none !important; }   /* 자물쇠에 묶인 단추는 잠겨 있으면 숨김(디자인시스템 3-2) */
/* 표에서 바로 입력의 줄 단추([로그인확인] [수정])는 잠겨 있어도 흐린 채 자리를 지킨다 — 풀면 살아난다(대표님 2026-10-11) */
.inline-pane[data-edit-scope]:not(.is-edit) .inline-cell-act .lock-act { display: inline-flex !important; opacity: .4; pointer-events: none; cursor: default; }
.drag-grip:hover { color: var(--c-primary); }
.drag-grip:active { cursor: grabbing; }
@media (max-width: 700px) { .is-edit .drag-grip { width: var(--h-touch); height: var(--h-touch); } }
.sortable-chosen { background: var(--c-hover); }

.inline-pane .btn:disabled { opacity: .5; cursor: not-allowed; pointer-events: none; }
.inline-table td.inline-ellipsis { max-width: calc(var(--sp-9) * 7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 달력 연 · 월 빠른 고르기 (대표님 2026-10-10) */
.air-datepicker--navigation { display: none; }  /* "< 2026년 10월 >" 줄은 칸 낭비 — 연 · 월 빠른 줄이 대신한다(대표님 2026-10-11) */
.dbx-quick { display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-2) var(--sp-2) 0; }
.dbx-year { height: var(--h-md); font-size: var(--fs-md); padding: 0 var(--sp-2); }
.dbx-side { display: flex; flex-direction: column; gap: var(--sp-1); }
.dbx-today { height: var(--h-sm); padding: 0; border: 1px solid var(--c-primary); background: var(--c-surface); color: var(--c-primary); font-size: var(--fs-sm); border-radius: var(--r-0); cursor: pointer; }
.dbx-today:hover { background: var(--c-hover); }
.air-datepicker.-is-mobile- .dbx-today { height: var(--h-touch); font-size: var(--fs-lg); }
.dbx-months { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--sp-1); flex: 1; }
.dbx-month { height: var(--h-sm); padding: 0; border: 1px solid var(--c-line); background: var(--c-surface); font-size: var(--fs-sm); border-radius: var(--r-0); cursor: pointer; }
.dbx-month:hover { background: var(--c-hover); }
.dbx-month.on { background: var(--c-primary); color: var(--c-on-dark); border-color: var(--c-primary); }
.air-datepicker.-is-mobile- .dbx-month { height: var(--h-touch); }
.air-datepicker.-is-mobile- .dbx-year { height: var(--h-touch); font-size: var(--fs-2xl); }

/* 공용 잠금 부품 (디자인시스템 규약) */
.lock-btn { display: inline-flex; align-items: center; justify-content: center; }
.lock-btn .lock-icon { display: block; }
.lock-btn .lk-open { display: none; }
.lock-btn.on .lk-open { display: inline; }
.lock-btn.on .lk-shut { display: none; }
.lock-btn.on { background: var(--c-primary); border-color: var(--c-primary); color: var(--c-on-dark); }
.lock-btn.held { color: var(--c-danger); border-color: var(--c-danger); }

/* ---------------- 코드칸 (lookup) ---------------- */
.lookup-box { display: inline-flex; align-items: stretch; gap: 0; }   /* 돋보기 · 칸이 맞붙어 테두리가 이어지게 — style.css 의 gap 이 틈을 냈다(대표님 2026-10-10) */
.lookup-box > .lookup-name { margin-left: var(--sp-2); align-self: center; }
/* 맞춘 코드칸(대표님 2026-10-11 "룩업 매칭되면 사업자번호 / 표시방식 따로 표시하지말고 전체 필드박스에 표시방식만") —
   칸에는 출처의 보이는 꼴(거래처 `상호(사업자번호) 대표자` …)만 칸 가득, 코드는 숨은 값으로 남는다. 칸을 누르면(포커스) 코드가 보여 고칠 수 있다.
   딸린 칸이 있는 코드칸(품목코드 → 품목명 · 규격)은 이름을 딸린 칸이 보이므로 코드를 보이고 꼬리를 숨긴다 */
.lookup-box { position: relative; }
.lookup-box.is-matched:not(:focus-within):not(:has(input[data-lookup-fill])) input[data-lookup] { color: transparent; }
.lookup-box.is-matched:not(:focus-within):not(:has(input[data-lookup-fill])) > .lookup-name {
  position: absolute; top: 0; bottom: 0; left: var(--h-md); right: 0; margin: 0; padding: 0 var(--sp-2); max-width: none;
  display: flex; align-items: center; color: var(--c-text); overflow: hidden; white-space: nowrap; pointer-events: none; }
.lookup-box.is-matched:focus-within > .lookup-name, .lookup-box.is-matched:has(input[data-lookup-fill]) > .lookup-name { display: none; }
.inplace.is-edit .kv-grid .lookup-box.is-matched > .lookup-name { padding-left: var(--sp-4); }   /* 이름표 칸 입력칸 안 여백과 같게 */
.lookup-box > .key-box, .lookup-box > input { flex: 1; min-width: 0; }
.lookup-box input { border-top-left-radius: var(--r-0); border-bottom-left-radius: var(--r-0); }
.lookup-find {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--h-md);
  height: auto;
  align-self: stretch;
  border: 1px solid var(--c-line);
  border-right: none;
  background: var(--c-surface);
  color: var(--c-text-3);
  border-radius: var(--r-0);
  cursor: pointer;
  padding: 0;
  box-sizing: border-box;
}
.lookup-find:hover {
  color: var(--c-primary);
}
.lookup-find > svg {
  display: block;
}

.lookup-bad input,
input.lookup-bad {
  border-color: var(--c-danger);
}

.lookup-win.small {
  width: calc(var(--label-w) * 5);   /* [수정] 칸 + [저장] [취소] 가 한 줄에 들어가게(대표님 2026-10-10) */
}
.lookup-win.big {
  width: calc(var(--label-w) * 8);
}
/* 폰 — 코드 고르기 창은 화면 가득 시트(app.js lookupPhone · 대표님 2026-10-11). 끌지 않고 목록만 스크롤, 찾는 칸 글자는 1rem(작으면 폰이 화면을 확대한다) */
@media (max-width: 700px) {
  .modal.window.lookup-win.lookup-sheet { position: fixed; left: 0; top: 0; right: 0; bottom: 0; width: auto; max-width: none; height: auto; max-height: none; transform: none; margin: 0; border: 0; box-shadow: none; display: flex; flex-direction: column; }
  .lookup-win.lookup-sheet .modal-header { cursor: default; }
  .lookup-win.lookup-sheet .modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .lookup-win.lookup-sheet .lookup-q { font-size: 1rem; }
  .lookup-win.lookup-sheet .lookup-list { max-height: none; }
  .lookup-win.lookup-sheet .lookup-grid td { padding-top: var(--sp-3); padding-bottom: var(--sp-3); }
}
.lookup-win .modal-body {
  position: relative;
}
.lookup-win .lookup-bar {
  display: flex;
  gap: var(--sp-3);
  margin-bottom: var(--sp-2);
}
.lookup-bar .lookup-q {
  flex: 1;
  min-width: 0;
}
.lookup-win .lookup-filter-box {
  position: absolute;
  top: calc(var(--h-md) + var(--sp-4));
  left: var(--sp-4);
  right: var(--sp-4);
  z-index: 1;
}
.lookup-win .lookup-bar .lookup-manage-link {
  font-size: var(--fs-sm);
  color: var(--c-text-2);
  text-decoration: underline;
  white-space: nowrap;
  margin-left: auto;
}
.lookup-win .lookup-list {
  max-height: calc(var(--h-md) * 12);
  overflow-y: auto;
  border: 1px solid var(--c-line);
}
.lookup-win .lookup-grid {
  width: 100%;
  border-collapse: collapse;
}
.lookup-win .lookup-grid th[data-sort] {
  cursor: pointer;
  user-select: none;
}
.lookup-win .lookup-grid th[data-sort]:hover {
  background: var(--c-hover);
}
.lookup-win .lookup-grid tr.lookup-pick {
  cursor: pointer;
}
.lookup-win .lookup-grid tr.lookup-pick:hover {
  background: var(--c-hover);
}
.lookup-win .lookup-grid tr.lookup-pick.sel {
  background: var(--c-selected);
}
tr.lookup-pick.off td {
  color: var(--c-text-3);
}
.lookup-win .lookup-empty {
  text-align: center;
  color: var(--c-text-3);
  padding: var(--sp-4);
}
.lookup-win .lookup-pages {
  display: flex;
  justify-content: center;
  gap: var(--sp-1);
  padding: var(--sp-2) 0;
}
.lookup-win .lookup-page {
  min-width: var(--h-sm);
  height: var(--h-sm);
  padding: 0 var(--sp-2);
  border: 1px solid var(--c-line);
  background: var(--c-surface);
  color: var(--c-text);
  border-radius: var(--r-0);
  cursor: pointer;
  font-size: var(--fs-sm);
}
.lookup-win .lookup-page:hover {
  background: var(--c-hover);
}
.lookup-win .lookup-page.on {
  background: var(--c-primary);
  color: var(--c-on-dark);
  border-color: var(--c-primary);
}
.lookup-win .lookup-add {
  display: flex;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
  padding: var(--sp-2);
  background: var(--c-head);
  border: 1px solid var(--c-line);
}
.lookup-win .lookup-add[hidden], .lookup-win .lookup-msg[hidden] { display: none; }   /* [신규] 를 누르기 전엔 숨김 — display 가 hidden 을 이겼다 */
.lookup-win .lookup-add input {
  flex: 1;
}
.lookup-win .lookup-msg {
  margin-top: var(--sp-2);
  color: var(--c-danger);
  font-size: var(--fs-sm);
}
.lookup-win .lookup-foot {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.lookup-win .lookup-spacer {
  flex: 1;
}
.lookup-win .lookup-edit-form {
  display: flex;
  gap: var(--sp-1);
  align-items: center;
}
.lookup-win .lookup-edit-form input {
  flex: 1;
  min-width: 0;
}
.lookup-win .lookup-edit-form .btn {
  flex: none;
}

/* 서류 제자리 편집 (목록과창 9절) */
.inplace b.ip-ro, .inplace i.ip-rw, b.ip-ro, i.ip-rw { font-weight: inherit; font-style: normal; }
.inplace .ip-rw, .inplace .ip-rw-block, .inplace .ip-rw-rows, .inplace .ip-rw-cell { display: none; }
.inplace.is-edit .ip-ro, .inplace.is-edit .ip-ro-block, .inplace.is-edit .ip-ro-rows { display: none; }
.inplace.is-edit .ip-rw { display: inline-flex; align-items: center; gap: var(--sp-2); }
.inplace.is-edit .ip-rw-block { display: block; }
.inplace.is-edit .ip-rw-rows { display: table-row-group; }
.inplace.is-edit .ip-rw-cell { display: table-cell; }

body.ip-editing .top-level-tabs,
body.ip-editing .page-head,
body.ip-editing .ex3-tree,
body.ip-editing .ex3-list,
body.ip-editing [data-ip-lock],
body.inline-editing .top-level-tabs,
body.inline-editing .page-head,
body.inline-editing .ex3-tree,
body.inline-editing [data-ip-lock] {
  pointer-events: none;
  opacity: .45;
  user-select: none;
}

.inplace .kv-grid > .kv-f > span { background: var(--c-surface); }
.inplace.is-edit .kv-grid > .kv-f > span { padding: 0; overflow: visible; white-space: normal; }
.inplace.is-edit .kv-grid .ip-rw { display: flex; width: 100%; }
.inplace.is-edit .kv-grid input:not([type=checkbox]),
.inplace.is-edit .kv-grid select,
.inplace.is-edit .kv-grid textarea {
  width: 100%;
  box-sizing: border-box;
  border: 0;
  border-radius: 0;
  padding: 0 var(--sp-4);
  font-size: var(--fs-md);
  font-family: inherit;
  background: var(--c-surface);
}
.inplace.is-edit .kv-grid input:not([type=checkbox]),
.inplace.is-edit .kv-grid select {
  height: var(--h-lg);
}
.inplace.is-edit .kv-grid textarea {
  field-sizing: content;
  resize: none;
  min-height: var(--h-md);
  padding: var(--sp-1) var(--sp-4);
  line-height: 1.4;
}
.inplace.is-edit .kv-grid input:focus,
.inplace.is-edit .kv-grid select:focus,
.inplace.is-edit .kv-grid textarea:focus {
  outline: none;
  box-shadow: inset 0 0 0 var(--bw-head) var(--c-primary);
}
/* 칸 안 단추(코드칸 돋보기 · 날짜 [달력]) — 칸 경계선이 곧 테두리라 단추는 칸 쪽 한 줄만 긋는다(위 · 아래 · 바깥 테두리가 칸 선과 겹쳐 일그러지던 것, 대표님 2026-10-11) */
.inplace.is-edit .kv-grid .lookup-find { align-self: stretch; height: auto; border: 0; border-right: 1px solid var(--c-line); background: var(--c-head); }
.inplace.is-edit .kv-grid .datebox-btn { align-self: stretch; height: auto; border: 0; border-left: 1px solid var(--c-line); }
.inplace.is-edit .kv-grid .key-box,
.inplace.is-edit .kv-grid .lookup-box,
.inplace.is-edit .kv-grid .datebox {
  flex: 1;
  width: 100%;
}

.inplace .view-head .ip-rw,
.inplace .view-head .ip-ro {
  align-items: center;
  gap: var(--sp-2);
}
.inplace .view-head .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: var(--h-md);
  margin: 0;
  vertical-align: middle;
  line-height: 1;
}
.inplace:not(.is-edit) .view-head > .ip-ro,
.inplace:not(.is-edit) .view-head .ip-ro {
  display: inline-flex;
}

/* 곁판 없는 창(등록 창 new 등)도 몸통만 스크롤 · [저장] 줄은 늘 아래 — win-split 창 규칙(style.css)과 같은 꼴. 화면이 낮으면 관리 상자 · [저장] 이 창 밖으로 넘치던 것(대표님 2026-10-10 품목 장비 등록 창) */
.modal.window > form:not(:has(> .win-split)) { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.modal.window > form:not(:has(> .win-split)) > .modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.modal.window > form:not(:has(> .win-split)) > .modal-footer { flex: 0 0 auto; }
/* 창의 칸 줄 안 코드칸도 글자 칸처럼 줄 끝까지(170px 에서 멈추던 것) */
.field-row > .lookup-box { flex: 1 1 auto; min-width: 0; }

/* 서버에서 공유 창(sendout/_win.html, 규약 공유발송.md) */
.sendout-win { width: calc(var(--label-w) * 6); max-width: calc(100vw - var(--sp-8)); }
.sendout-win .field-row > label { flex: 0 0 var(--label-w); }
.sendout-win .field-row > input, .sendout-win .field-row > textarea { flex: 1 1 auto; min-width: 0; }
.sendout-body { min-height: calc(var(--h-md) * 6); resize: vertical; }
.sendout-files { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2); }
.sendout-file { display: inline-flex; align-items: center; gap: var(--sp-1); max-width: 100%; height: var(--h-md); padding: 0 var(--sp-1) 0 var(--sp-2); border: var(--bw-hair) solid var(--c-line); border-radius: var(--r-2); background: var(--c-head); }
.sendout-file-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sendout-file-x { flex: none; padding: 0 var(--sp-1); border: 0; background: none; color: var(--c-text-3); cursor: pointer; line-height: 1; }
.sendout-file-x:hover { color: var(--c-danger); }
.sendout-add { cursor: pointer; }
.sendout-off, .sendout-msg { color: var(--c-danger); margin: 0 0 var(--sp-3); }
.sendout-results { list-style: none; margin: var(--sp-3) 0 0; padding: 0; }
.sendout-results .ok { color: var(--c-text); }
.sendout-results .fail { color: var(--c-danger); }
.sendout-results .dry { color: var(--c-text-3); }
.sendout-dry { margin: 0 0 var(--sp-3); padding: var(--sp-1) var(--sp-2); background: var(--c-note-bg); border-radius: var(--r-2); }
.sendout-menu .fn-list .off { color: var(--c-text-3); }

/* 연결 코드표 머리(디자인시스템 3-2) — 값이 다른 코드표에서 오는 칸 · 단의 제목: 사슬 그림 + 링크 색 · 누르면 그 코드표 코드창 */
.lookup-link-btn { display: inline-flex; align-items: center; gap: var(--sp-1); padding: 0; border: 0; background: none; color: var(--c-link); font: inherit; font-weight: inherit; cursor: pointer; }
.lookup-link-btn:hover { text-decoration: underline; }
.lookup-link-ic { flex: none; }
/* 곁판 액자(app.js data-side-open) — 창의 오른쪽 곁판(#winSide) 위를 덮는 상대 창. ✕ 는 이 액자만 닫고 밑의 판으로(대표님 2026-10-11) */
#winSide:has(> .side-layer) { position: relative; }
/* 액자가 떠 있는 동안 곁판 폭은 원래 창 폭 + 여백만 — 링크매치 판(922px)만큼 벌리지 않는다(대표님 2026-10-11 "확장패널이 큼"). ✕ 로 닫으면 다시 그 폭 */
.modal.window:has(#winSide > .side-layer) { --win-side: calc(var(--sp-9) * 16); }   /* 512px — 보기 화면은 폰 꼴(이름표 위 · 값 아래)로 접혀 좁아도 다 보인다 */
.side-layer { position: absolute; inset: 0; z-index: 60; background: var(--c-surface); }
.side-layer > iframe { width: 100%; height: 100%; border: 0; display: block; }
/* 액자 안의 창 = 곁판 안의 판 — 떠 있는 창 틀 없이 곁판을 꽉 채우고(창 자리 · 끌어 둔 자리 무시), 머리줄은 표준 창 머리,
   왼쪽 칸 고정 폭(--win-main)도 풀어 판 폭을 다 쓴다. 스크롤은 창 안 본문이 그대로 맡는다(대표님 2026-10-11 "이중창 · 스크롤 안 먹어") */
html.side-framed .modal-backdrop { display: none; }
html.side-framed .modal.window { position: fixed !important; inset: 0 !important; transform: none !important; margin: 0 !important;
  width: 100% !important; max-width: none !important; height: 100% !important; max-height: none !important;
  border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
/* 머리줄은 곁판 머리 꼴(.win-side > .panel-head) — 옅은 회색 띠 31px · 제목 · win-id · ✕. 떠 있는 창의 어두운 머리가 아니다(대표님 2026-10-11 "확장-내부창은 회색").
   곁판이 좁아 걸리던 폰 규칙(머리 44px · 이름표 숨김 · 큰 단추)은 여기서 PC 꼴로 되돌린다 */
html.side-framed .modal.window > .modal-header { height: calc(var(--sp-9) - var(--bw-hair)); min-height: 0; padding: 0 var(--sp-4); box-sizing: border-box;
  background: var(--header-bg); border-bottom: var(--bw-hair) solid var(--border); cursor: default; touch-action: auto; }
html.side-framed .modal.window > .modal-header h2 { color: var(--text); font-size: var(--fs-md); font-weight: var(--fw-semi); }
html.side-framed .modal.window > .modal-header .win-id { display: inline; color: var(--text-muted); }
html.side-framed .modal.window > .modal-header .titlebar-close { min-width: 0; min-height: 0; background: none; color: var(--text-muted); font-size: var(--fs-lg); }
html.side-framed .modal.window > .modal-header .titlebar-close:hover { background: none; color: var(--danger); }
html.side-framed .modal.window .btn { min-height: 0; font-size: var(--fs-md); }
html.side-framed .modal.window .win-split > .win-main { flex: 1 1 auto !important; width: auto !important; max-width: none !important; }
html.side-framed .modal.window .win-split > .win-side { display: none !important; }
html.side-framed .vm-text { font-size: var(--fs-md); line-height: var(--lh-text); padding: var(--sp-1) 0; }   /* 보기 모드 글자 — 폰 크기(16) 말고 PC 본문 크기 */
/* 곁판 액자 안의 Match connect 는 보기만 — 줄을 눌러 또 상대 창을 여는 고리를 끊는다(창 → 상대 → 창 … 무한, 대표님 2026-10-11) */
html.side-framed .link-view tr.row-link { pointer-events: none; cursor: default; }
html.side-framed .link-view .link-view-find, html.side-framed .link-view .link-view-head .btn { display: none; }
html.side-framed .link-view .view-grid th, html.side-framed .link-view .view-grid td { font-size: var(--fs-md); padding: var(--sp-2); }
/* 사업자 쪽 표(7열: 역할 · 거래처번호 · 상호 · 대표 · 주소 · 전화 · 이메일)는 곁판에서 거래처번호 · 상호 · 대표 · 전화 넷(대표님 2026-10-11) */
html.side-framed .link-view .view-grid:has(th:nth-child(6)) :is(th, td):is(:nth-child(2), :nth-child(3), :nth-child(4), :nth-child(6)) { display: table-cell; width: auto; white-space: nowrap; }
/* 곁판 표는 말줄임(…) 없이 글자 다 — 고정 열 너비를 풀고 판 너비를 다 쓰며, 상호 · 대표는 좁으면 줄을 바꾼다(대표님 2026-10-11) */
html.side-framed .link-view { margin-inline: 0; padding-inline: 0; }   /* 위 칸 묶음과 같은 너비 — 양옆 들여쓰기만큼 표가 넓어진다 */
html.side-framed .link-view .view-grid { table-layout: auto; width: 100%; }
html.side-framed .link-view .view-grid td { overflow: visible; text-overflow: clip; }
html.side-framed .link-view .view-grid:has(th:nth-child(6)) td:is(:nth-child(3), :nth-child(4)) { white-space: normal; word-break: keep-all; }
/* 곁판 액자 안에서 밖으로 나가는 길은 모두 끊는다 — [수정] · [공유] · 전화 걸기 · 다른 창 고리(대표님 2026-10-11 "내부창에서 다른 외부로 연결되는것은 끊는게"). 첨부 이름(크게 보기)과 ✕ 만 남김 */
html.side-framed .modal.window .modal-footer .vm-share, html.side-framed .modal.window .modal-footer .vm-edit { display: none !important; }
html.side-framed .modal.window .modal-body a:not(.file-name), html.side-framed .modal.window .vm-text { pointer-events: none; }
html.side-framed .modal.window .vm-text[data-kind] { color: var(--c-text); text-decoration: none; cursor: default; }
/* 곁판이 넓어도 칸은 원래 창 폭(--win-main)만 — 값과 꼬리표(휴대폰 · 회사)가 멀리 벌어지지 않게(대표님 2026-10-11 "칸이 너무 넓다"). 보기라 꼬리표 자동생성도 뗀다 */
html.side-framed .modal.window .modal-body .groupbox { max-width: var(--win-main); }
html.side-framed .modal.window .auto-tag { display: none; }
/* 보기 모드엔 칸 풀이(예: 이름2 "사람 이름만 — 진우성")를 두지 않는다(대표님 2026-10-11) */
.modal.window.view-mode .modal-body .field-row > .hint { display: none; }
/* 곁판 보기는 512px 라 폰 규칙(이름표 위 · 값 아래, 큰 글자)이 걸린다 — 이름표 왼쪽 · 값 오른쪽 PC 꼴로 촘촘히 되돌린다 */
html.side-framed .modal.window.view-mode .modal-body .field-row:not(.vm-empty) { display: flex !important; align-items: flex-start; gap: var(--sp-4); margin: 0 0 var(--sp-1) !important; min-height: 0; }
html.side-framed .modal.window.view-mode .modal-body .field-row > label { flex: 0 0 var(--label-w); width: var(--label-w); text-align: right; padding-top: var(--sp-1); color: var(--c-text-2); font-size: var(--fs-md); }
html.side-framed .modal.window.view-mode .modal-body .field-row > :not(label):not(.lamp):not(.code-fixed) { flex: 1 1 auto; min-width: 0; }
html.side-framed .modal.window.view-mode .modal-body .field-row > .lamp { flex: none; align-self: center; }   /* 신호등 불은 늘리지 않는다 */
html.side-framed .modal.window.view-mode .modal-body select { font-size: var(--fs-md) !important; }
html.side-framed .modal.window.view-mode .modal-body .acct-item { padding: 0 !important; margin: 0 !important; gap: 0 var(--sp-4); align-items: flex-start; }
html.side-framed .modal.window.view-mode .modal-body .acct-item > .key-box, html.side-framed .modal.window.view-mode .modal-body .acct-item > .vm-text { flex: 1 1 auto; min-width: 0; }
html.side-framed .modal.window.view-mode .modal-body .acct-item > select { flex: none; width: auto; color: var(--c-text-2); }
/* 세 칸 트리 맨 위 일 단추 줄 — 회사관련서류 [폴더 추가] 가 [전체] 위(대표님 2026-10-11) */
.ex3-tree-act { flex: none; display: flex; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); border-bottom: var(--bw-hair) solid var(--border); }
.ex3-tree-act .btn { flex: 1 1 auto; justify-content: center; }
/* 공용 뷰어 도구줄(PC) — 단추가 낱개로 줄을 바꿔 이 빠진 꼴이던 것(대표님 2026-10-11 "이빨빠진 모양"). IPC 본보기처럼 한 줄 오른쪽 정렬로 붙인다.
   펜 도구(색 · 굵기 · 지우개 …)는 꺼져 있을 때 빈자리를 지키지 않고, 켜면 펜 단추 아래 작은 판으로 겹쳐 뜬다(도구줄은 그대로 — 틀 고정).
   좁으면 찾기 묶음만 윗줄, 쪽 · 확대 · 도구는 아랫줄 한 덩어리 — 줄바꿈은 묶음 사이에서만. 새 창 전용(.vw-solo)은 제 규칙 그대로. */
.vw:not(.vw-solo) { container-type: inline-size; }
.vw:not(.vw-solo) .vw-tools { flex-wrap: nowrap; }
.vw:not(.vw-solo) .vw-slot[data-slot="ink"] { position: relative; }
.vw:not(.vw-solo) .vw-ink-tools { position: absolute; top: calc(100% + var(--sp-1)); right: 0; z-index: 7; margin: 0; padding: var(--sp-1);
  background: var(--card-bg); border: var(--bw-hair) solid var(--border); }
@container (max-width: 760px) {
  .vw:not(.vw-solo) .vw-tools { flex-wrap: wrap; }
  .vw:not(.vw-solo) .vw-tools > [data-slot="find"] { flex: 1 0 100%; justify-content: flex-end; }
}
/* 표 바로 입력 — 체크 칸은 칸 폭만큼 늘리지 않고 머리 · 값(Y/N)과 같은 왼쪽 줄에, 사업용 열은 좁게(대표님 2026-10-11 회사카드) */
.inline-row-edit input[type="checkbox"] { width: auto; margin: 0; }
.inline-table col.inline-col-business_use { width: calc(var(--h-xl) * 3); }

/* 목록 칸 둘째 줄 — 거래처 아래 사업자번호처럼 딸린 값(회계 세금계산서, 2026-10-12). 토큰만 */
.cell-sub { display: block; font-size: var(--fs-sm); color: var(--c-text-2); }