/* 판매재고 — 웹 버전
   원본(Delphi) 화면 구성(메뉴·도구모음·MDI 창·장부 격자)을 그대로 두고 글자/여백만 깔끔하게 다듬었다. */

:root {
  --fs: 14px;
  --face: #d6d3ce;
  --face-2: #e7e5e0;
  --face-hi: #ffffff;
  --face-lo: #8e8b84;
  --face-dk: #55524b;
  --ink: #111;
  --ink-soft: #4a4740;
  --title-1: #0a246a;
  --title-2: #3a6ea5;
  --title-off-1: #7a7975;
  --title-off-2: #b5b3ad;
  --panel: #d5cfaa;      /* 원본 SpeedPanel 색 */
  --panel-2: #bacdaf;    /* 원본 견적서 패널 색 */
  --mdi: #9aac93;        /* 사용자 설정 (원본 MBAT) */
  --ledger-1: #ffffff;
  --ledger-2: #f6f5ec;
  --ledger-line: #d9d5c6;
  --grid-head: #e9e7e0;
  --sel: #0a246a;
  --sel-ink: #fff;
  --focus-bg: #ffffd8;
  --ro-bg: #f1efe8;
  --name-bg: #ffffee;    /* 원본 거래처명 표시칸 색 15663103 */
  --good: #0b6b1a;
  --bad: #b0151a;
  --gold-1: #f3e2b0;
  --gold-2: #dcbf6c;
  --gold-ink: #4c3a0c;
  --shadow: 0 2px 10px rgba(0, 0, 30, 0.28);
  --font: "Malgun Gothic", "맑은 고딕", "Apple SD Gothic Neo", "Noto Sans KR", "Nanum Gothic", sans-serif;
  --mono: "D2Coding", "NanumGothicCoding", "Consolas", "Malgun Gothic", monospace;
  color-scheme: light;
}
:root[data-font="large"] { --fs: 16px; }
:root[data-font="xlarge"] { --fs: 18px; }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  margin: 0;
  font: var(--fs)/1.35 var(--font);
  color: var(--ink);
  background: var(--face);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; color: inherit; }
u { text-decoration: underline; text-underline-offset: 2px; }

/* ───────── 3D 테두리 ───────── */
.raised { border: 1px solid; border-color: var(--face-hi) var(--face-lo) var(--face-lo) var(--face-hi); }
.sunken { border: 1px solid; border-color: var(--face-lo) var(--face-hi) var(--face-hi) var(--face-lo); }

/* ───────── 셸 ───────── */
#shell { display: flex; flex-direction: column; height: 100vh; }
#menubar {
  display: flex; align-items: stretch; gap: 1px; padding: 2px 4px;
  background: var(--face); border-bottom: 1px solid var(--face-lo); user-select: none; flex-wrap: wrap;
}
#menubar .mtop { position: relative; }
#menubar .mtop > button {
  border: 1px solid transparent; background: none; padding: 3px 10px; cursor: default; border-radius: 2px;
}
#menubar .mtop > button:hover, #menubar .mtop.open > button {
  border-color: var(--face-hi) var(--face-lo) var(--face-lo) var(--face-hi);
}
#menubar .mtop.open > button { background: var(--face-2); border-color: var(--face-lo) var(--face-hi) var(--face-hi) var(--face-lo); }

.dropmenu {
  position: absolute; left: 0; top: 100%; z-index: 9000; min-width: 15em; padding: 2px;
  background: var(--face); border: 1px solid; border-color: var(--face-hi) var(--face-dk) var(--face-dk) var(--face-hi);
  box-shadow: 2px 3px 8px rgba(0, 0, 0, 0.3);
}
.dropmenu .mi {
  display: flex; align-items: center; width: 100%; text-align: left; border: 0; background: none;
  padding: 4px 26px 4px 22px; cursor: default; white-space: nowrap; position: relative;
}
.dropmenu .mi:hover, .dropmenu .mi.hot { background: var(--sel); color: var(--sel-ink); }
.dropmenu .mi .key { margin-left: auto; padding-left: 24px; opacity: 0.75; font-size: 0.9em; }
.dropmenu hr { border: 0; border-top: 1px solid var(--face-lo); border-bottom: 1px solid var(--face-hi); margin: 3px 2px; }
.dropmenu .sub > .dropmenu { left: 100%; top: -3px; display: none; }
.dropmenu .sub:hover > .dropmenu, .dropmenu .sub.open > .dropmenu { display: block; }
.dropmenu .sub > .mi::after { content: "▶"; position: absolute; right: 8px; font-size: 0.7em; }

#toolbar {
  display: flex; align-items: center; gap: 3px; padding: 3px 6px; background: #fff;
  border-bottom: 1px solid var(--face-lo);
}
#toolbar .tb {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  min-width: 64px; height: 44px; padding: 2px 8px; cursor: pointer; background: #fff;
  border: 1px solid transparent; border-radius: 3px; font-weight: 600;
}
#toolbar .tb:hover { border-color: #b9c7d9; background: #eef4fb; }
#toolbar .tb:active { background: #dde8f5; }
#toolbar .tb svg { width: 22px; height: 22px; }
#toolbar .sep { width: 1px; height: 34px; background: var(--face-lo); margin: 0 6px; }
#toolbar .tright { margin-left: auto; display: flex; align-items: center; gap: 10px; color: var(--ink-soft); font-size: 0.92em; white-space: nowrap; }
#toolbar .tright .out { border: 1px solid var(--face-lo); background: var(--face-2); padding: 1px 10px; border-radius: 2px; cursor: pointer; }
#toolbar .logo { display: flex; align-items: center; gap: 8px; color: #1f3d6b; font-weight: 800; letter-spacing: 0.02em; font-size: 1.09em; margin-left: 6px; }
#toolbar .logo small { color: var(--ink-soft); font-weight: 600; }

#localbar { padding: 6px 12px; background: #fff1c2; color: #6b4600; border-bottom: 1px solid #e3c25b; font-weight: 700; text-align: center; }
[data-theme="modern"] #localbar { background: #fff7e0; color: #8a5a00; border-bottom-color: #f5d27a; font-weight: 600; }
#mdi { position: relative; flex: 1; overflow: hidden; background: var(--mdi); }
#mdi .wallpaper {
  position: absolute; right: 24px; bottom: 18px; text-align: right; color: rgba(255, 255, 255, 0.75);
  font-weight: 800; pointer-events: none; user-select: none; line-height: 1.1;
}
#mdi .wallpaper b { font-size: 2.4em; display: block; letter-spacing: 0.02em; }

#statusbar { display: flex; gap: 3px; padding: 2px 3px; background: var(--face); font-size: 0.88em; }
#statusbar > span { padding: 2px 8px; border: 1px solid; border-color: var(--face-lo) var(--face-hi) var(--face-hi) var(--face-lo); white-space: nowrap; }
#statusbar > span.grow { flex: 1; overflow: hidden; text-overflow: ellipsis; }

/* ───────── MDI 창 ───────── */
.win {
  position: absolute; display: flex; flex-direction: column; background: var(--face);
  border: 1px solid var(--face-dk); box-shadow: var(--shadow); min-width: 320px; min-height: 140px;
  border-radius: 3px 3px 0 0;
}
.win.maxed { left: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important; border-radius: 0; }
.win .wtitle {
  display: flex; align-items: center; gap: 6px; padding: 3px 4px 3px 8px; color: #fff; font-weight: 700;
  background: linear-gradient(90deg, var(--title-off-1), var(--title-off-2)); cursor: default; user-select: none;
  border-radius: 2px 2px 0 0;
}
.win.focus .wtitle { background: linear-gradient(90deg, var(--title-1), var(--title-2)); }
.win .wtitle .t { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.win .wtitle button {
  width: 22px; height: 19px; padding: 0; line-height: 1; background: var(--face); color: #000; font-weight: 700;
  border: 1px solid; border-color: var(--face-hi) var(--face-dk) var(--face-dk) var(--face-hi); cursor: pointer; font-size: 12px;
}
.win .wtitle button:active { border-color: var(--face-dk) var(--face-hi) var(--face-hi) var(--face-dk); }
.win .wbody { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-height: 0; }
.win .grip { position: absolute; right: 0; bottom: 0; width: 14px; height: 14px; cursor: nwse-resize;
  background: linear-gradient(135deg, transparent 0 6px, var(--face-lo) 6px 7px, transparent 7px 9px, var(--face-lo) 9px 10px, transparent 10px 12px, var(--face-lo) 12px 13px, transparent 13px); }

/* 창 안 공통 레이아웃 */
.speed { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; padding: 3px 4px; background: var(--panel); border-bottom: 1px solid var(--face-lo); }
.speed.green { background: var(--panel-2); }
.speed .gap { flex: 1; }
.pad { padding: 6px 10px; }
.fill { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.row + .row { margin-top: 4px; }
.col { display: flex; flex-direction: column; gap: 4px; }
.lbl { white-space: nowrap; color: #000; }
.lbl.r { text-align: right; }
.hint { color: var(--ink-soft); font-size: 0.88em; }
.paramsbar { display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; padding: 6px 10px; border-bottom: 1px solid var(--face-lo); }
.paramsbar .grp { display: flex; align-items: center; gap: 4px; }
.split-v { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.split-v > .a { flex: 3; min-height: 0; display: flex; flex-direction: column; }
.split-v > .b { flex: 2; min-height: 0; display: flex; flex-direction: column; border-top: 4px solid var(--face); }
.split-h { display: flex; flex: 1; min-height: 0; gap: 4px; }
.split-h > * { min-width: 0; display: flex; flex-direction: column; }
fieldset { border: 1px solid var(--face-lo); border-radius: 2px; margin: 0; padding: 6px 10px 8px; }
legend { padding: 0 4px; }
.formgrid { display: grid; grid-template-columns: max-content 1fr max-content 1fr; gap: 4px 8px; align-items: center; }
.formgrid .lbl { text-align: right; }

/* ───────── 입력 ───────── */
input, select, textarea {
  height: 1.9em; padding: 1px 5px; background: #fff; border: 1px solid; border-radius: 0;
  border-color: var(--face-lo) var(--face-hi) var(--face-hi) var(--face-lo); box-shadow: inset 1px 1px 0 #c8c5bd;
  min-width: 0;
}
textarea { height: auto; }
input:focus, select:focus, textarea:focus { outline: 2px solid #2d6fd6; outline-offset: -1px; background: var(--focus-bg); }
input[readonly], input:disabled, select:disabled { background: var(--ro-bg); color: #222; }
input.num { text-align: right; font-variant-numeric: tabular-nums; }
input.name { background: var(--name-bg); }
input[type="date"] { min-width: 9.4em; }
input[type="checkbox"], input[type="radio"] { height: auto; box-shadow: none; width: 1.05em; height: 1.05em; vertical-align: middle; accent-color: var(--sel); }
label.chk { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; cursor: pointer; }
.w3 { width: 3em; } .w4 { width: 4em; } .w5 { width: 5em; } .w6 { width: 6em; } .w7 { width: 7em; }
.w8 { width: 8em; } .w9 { width: 9em; } .w10 { width: 10em; } .w12 { width: 12em; } .w14 { width: 14em; }
.w16 { width: 16em; } .w20 { width: 20em; } .grow { flex: 1; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px; height: 1.95em; padding: 0 12px;
  background: var(--face); cursor: pointer; white-space: nowrap; border-radius: 2px;
  border: 1px solid; border-color: var(--face-hi) var(--face-dk) var(--face-dk) var(--face-hi);
}
.btn:hover:not(:disabled) { background: var(--face-2); }
.btn:active:not(:disabled) { border-color: var(--face-dk) var(--face-hi) var(--face-hi) var(--face-dk); }
.btn:disabled { color: #8a877f; cursor: default; }
.btn:focus-visible { outline: 1px dotted #000; outline-offset: -4px; }
.btn.flat { border-color: transparent; background: transparent; }
.btn.flat:hover:not(:disabled) { border-color: var(--face-hi) var(--face-lo) var(--face-lo) var(--face-hi); background: rgba(255,255,255,0.35); }
.btn.gold { background: linear-gradient(180deg, var(--gold-1), var(--gold-2)); color: var(--gold-ink); font-weight: 700; }
.btn.gold:hover:not(:disabled) { background: linear-gradient(180deg, #f8ebc4, #e3c97e); }
.btn.primary { font-weight: 700; }
.btn.run { min-width: 4.2em; font-weight: 700; }
.btn.run svg { width: 16px; height: 16px; }
.btn.big { height: 2.3em; padding: 0 18px; }

/* 코드 검색 입력 */
.code-pick { display: inline-flex; align-items: center; gap: 2px; position: relative; }
.code-pick .code { width: 6.4em; }
.code-pick .name { width: 13em; }
.code-pick .find { height: 1.9em; width: 1.9em; padding: 0; font-size: 0.85em; }
.cform > div { min-width: 0; }
.cform .code-pick { width: 100%; }
.cform .code-pick .code { width: 5.5em; flex: none; }
.cform .code-pick .name { flex: 1; width: auto; min-width: 0; }
.popup {
  position: fixed; z-index: 9500; background: #fff; border: 1px solid #222; box-shadow: 3px 4px 10px rgba(0,0,0,0.35);
  min-width: 26em; max-width: 46em; display: flex; flex-direction: column;
}
.popup .phead { display: flex; align-items: center; gap: 6px; padding: 3px 6px; background: var(--face); border-bottom: 1px solid var(--face-lo); font-size: 0.9em; }
.popup .plist { max-height: 22em; overflow-y: auto; }
.popup table { width: 100%; border-collapse: collapse; }
.popup td { padding: 3px 8px; border-bottom: 1px solid #eee; white-space: nowrap; cursor: default; }
.popup td.n { text-align: right; font-variant-numeric: tabular-nums; }
.popup tr.sel td { background: var(--sel); color: #fff; }
.popup tr:hover td { background: #dfe8f6; }
.popup tr.sel:hover td { background: var(--sel); }
.popup .empty { padding: 10px; color: var(--ink-soft); }
mark { background: #ffe873; color: inherit; padding: 0; }
.popup tr.sel mark { background: #ffe873; color: #000; }

/* ───────── 격자 (장부) ───────── */
.grid {
  position: relative; flex: 1; min-height: 60px; overflow: auto; background: var(--ledger-1);
  border: 1px solid; border-color: var(--face-lo) var(--face-hi) var(--face-hi) var(--face-lo);
}
.grid table { border-collapse: separate; border-spacing: 0; width: 100%; font-variant-numeric: tabular-nums; }
.grid th {
  position: sticky; top: 0; z-index: 2; background: var(--grid-head); font-weight: 600; text-align: center;
  padding: 3px 6px; white-space: nowrap; border-right: 1px solid #bdb9ae; border-bottom: 1px solid #a9a598;
  user-select: none;
}
.grid th.sortable { cursor: pointer; }
.grid th .arrow { font-size: 0.75em; margin-left: 3px; opacity: 0.7; }
.grid td {
  padding: 2px 6px; border-right: 1px solid var(--ledger-line); border-bottom: 1px solid var(--ledger-line);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40em; height: 1.75em;
}
.grid tbody tr:nth-child(even) td { background: var(--ledger-2); }
.grid tbody tr.sel td { background: var(--sel); color: var(--sel-ink); }
.grid tbody tr.sel td.neg { color: #ffd2d2; }
.grid tbody tr:hover:not(.sel) td { background: #e3ebf7; }
.grid tbody tr.k-carry td { font-weight: 700; background: #f3f0e2; }
.grid tbody tr.k-month td, .grid tbody tr.k-day td, .grid tbody tr.k-sub td { background: #efece0; font-weight: 600; color: #333; }
.grid tbody tr.k-cum td, .grid tbody tr.k-sum td { background: #e7e3d3; font-weight: 700; }
.grid tbody tr.k-section td { background: #dfe6ee; font-weight: 700; }
.grid td.n, .grid th.n { text-align: right; }
.grid td.c { text-align: center; }
.grid td.neg { color: var(--bad); }
.grid tfoot td {
  position: sticky; bottom: 0; z-index: 2; background: #fff8dc; font-weight: 700; border-top: 1px solid #a9a598;
}
.grid .empty-msg { padding: 18px; color: var(--ink-soft); text-align: center; }
.grid .vspacer td { padding: 0; border: 0; height: auto; background: transparent !important; }

/* 편집 격자 (전표 품목) */
.egrid td { padding: 0; }
.egrid td input { width: 100%; height: 1.85em; border: 0; box-shadow: none; background: transparent; padding: 1px 6px; }
.egrid td input:focus { background: var(--focus-bg); outline: 2px solid #2d6fd6; outline-offset: -2px; }
.egrid td.ro { padding: 2px 6px; }
.egrid td.neg input { color: var(--bad); } /* 마이너스(반품) 수량·단가 */
.egrid tbody tr.cur td { background: #fffbe6 !important; }
.egrid tbody tr.newrow td { background: #fbfbf6; }
.egrid td.x { width: 1.8em; text-align: center; padding: 0; }

/* 합계 패널 */
.sumpanel {
  display: grid; grid-template-columns: max-content minmax(7em, 1fr) max-content minmax(7em, 1fr) max-content minmax(7em, 1fr) max-content;
  gap: 4px 6px; align-items: center; padding: 6px 10px; border-top: 1px solid var(--face-hi);
}
.sumpanel .lbl { text-align: right; }
.sumpanel input { text-align: right; font-weight: 700; }
.sumpanel input.total { color: #00207a; }
.sumpanel .btns { grid-row: span 3; display: flex; flex-direction: column; gap: 4px; }

/* 카드형 정보칸 (거래처 정보 등) */
.infobox { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px 4px; }
.infobox input { width: 100%; }

/* 탭 */
.tabs { display: flex; gap: 2px; padding: 6px 8px 0; border-bottom: 1px solid var(--face-lo); }
.tabs button { border: 1px solid var(--face-lo); border-bottom: 0; background: var(--face); padding: 4px 14px; border-radius: 3px 3px 0 0; cursor: pointer; position: relative; top: 1px; }
.tabs button.on { background: var(--face-2); font-weight: 700; border-color: var(--face-hi) var(--face-dk) var(--face-2) var(--face-hi); }
.tabpage { padding: 10px; overflow: auto; flex: 1; }

/* ───────── 대화상자 ───────── */
.modal-back { position: fixed; inset: 0; z-index: 9800; background: rgba(0, 0, 0, 0.18); display: flex; align-items: center; justify-content: center; }
.dialog { background: var(--face); border: 1px solid var(--face-dk); box-shadow: 0 6px 24px rgba(0,0,0,0.4); min-width: 22em; max-width: 92vw; max-height: 90vh; display: flex; flex-direction: column; }
.dialog .wtitle { display: flex; align-items: center; padding: 4px 6px 4px 10px; color: #fff; font-weight: 700; background: linear-gradient(90deg, var(--title-1), var(--title-2)); }
.dialog .wtitle .t { flex: 1; }
.dialog .wtitle button { width: 22px; height: 19px; padding: 0; background: var(--face); border: 1px solid; border-color: var(--face-hi) var(--face-dk) var(--face-dk) var(--face-hi); cursor: pointer; font-weight: 700; }
.dialog .dbody { padding: 14px 16px; overflow: auto; }
.dialog .dmsg { display: flex; gap: 12px; align-items: flex-start; white-space: pre-wrap; line-height: 1.5; }
.dialog .dmsg .icon { font-size: 2em; line-height: 1; }
.dialog .dfoot { display: flex; justify-content: flex-end; gap: 6px; padding: 8px 12px 12px; }
.dialog .dfoot .btn { min-width: 6em; }

#toast {
  position: fixed; left: 50%; bottom: 40px; transform: translateX(-50%); z-index: 9900; background: #fffde7;
  border: 1px solid #333; padding: 8px 18px; font-weight: 700; box-shadow: 3px 3px 0 rgba(0,0,0,0.25);
  opacity: 0; transition: opacity 0.18s; pointer-events: none; max-width: 80vw;
}
#toast.show { opacity: 1; }
#toast.err { background: #ffe6e3; border-color: #a11; color: #7a0000; }
#busy { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 9999; background: linear-gradient(90deg, transparent, #2d6fd6, transparent); background-size: 200% 100%; animation: busy 1s linear infinite; }
@keyframes busy { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* 달력 (만기어음현황) */
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; flex: 1; min-height: 0; padding: 4px; }
.cal .dow { text-align: center; font-weight: 700; padding: 3px; background: var(--grid-head); }
.cal .dow.sun, .cal .day.sun .dnum { color: var(--bad); }
.cal .dow.sat, .cal .day.sat .dnum { color: #1747a6; }
.cal .day { background: #fff; border: 1px solid var(--ledger-line); padding: 3px 5px; min-height: 4.2em; font-size: 0.9em; overflow: hidden; cursor: default; }
.cal .day.out { background: transparent; border-color: transparent; }
.cal .day.today { outline: 2px solid #2d6fd6; outline-offset: -2px; }
.cal .day .dnum { font-weight: 700; }
.cal .day .r { color: var(--good); }
.cal .day .p { color: var(--bad); }

/* 차트 */
.chart { flex: 1; min-height: 160px; background: #fff; border: 1px solid; border-color: var(--face-lo) var(--face-hi) var(--face-hi) var(--face-lo); position: relative; }
.chart svg { width: 100%; height: 100%; display: block; }

/* 계산기 */
.calc { display: grid; grid-template-columns: repeat(4, 3.2em); gap: 4px; }
.calc .disp { grid-column: span 4; text-align: right; font: 700 1.4em var(--mono); background: #fff; padding: 4px 8px; height: 1.8em; }
.calc .btn { height: 2.3em; padding: 0; }

.legal { font-size: 0.85em; color: var(--ink-soft); }

/* 인쇄용 숨김 영역 */
#print-frame { position: fixed; width: 0; height: 0; border: 0; left: -10px; top: -10px; }

@media (max-width: 1180px) {
  #toolbar .logo { display: none; }
}
@media (max-width: 900px) {
  #toolbar #who { display: none; }
}