/* eBNS System (VB6) web runtime look: classic Windows forms, 굴림체 9pt */
:root {
  --vb-face: #d4d0c8;
  --vb-face-light: #e9e6df;
  --vb-shadow: #808080;
  --vb-dark: #404040;
  --vb-hilite: #ffffff;
  --vb-window: #ffffff;
  --vb-text: #000000;
  --vb-select: #0a246a;
  --vb-select-text: #ffffff;
  --vb-fixed: #d4d0c8;
  --vb-grid-line: #c0c0c0;
  --vb-alt: #f7f7f7;
  --vb-required: #ffffd0;
  --vb-accent: #0a246a;
  --vb-font: "굴림체", GulimChe, "굴림", Gulim, "Malgun Gothic", "맑은 고딕", monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font: 12px/1.25 var(--vb-font); color: var(--vb-text); background: var(--vb-face); }
button, input, select, textarea { font: inherit; color: inherit; }

/* ---------------- login (frmSplash) */
.vb-login-page { display: flex; align-items: center; justify-content: center; background: #3a6ea5; }
.vb-login { width: 340px; background: var(--vb-face); border: 2px outset var(--vb-hilite); padding: 18px 22px; display: grid; gap: 10px; }
.vb-login-title { font-size: 22px; font-weight: bold; color: var(--vb-accent); }
.vb-login-company { color: #333; min-height: 1em; }
.vb-login label { display: grid; grid-template-columns: 90px 1fr; align-items: center; gap: 6px; }
.vb-login input { height: 24px; border: 2px inset var(--vb-hilite); padding: 0 4px; background: #fff; }
.vb-login-error { color: #c00000; }
.vb-login-buttons { text-align: right; }
.vb-login-buttons button, .vb-shell-logout button { min-width: 80px; height: 26px; background: var(--vb-face); border: 2px outset var(--vb-hilite); cursor: pointer; }
.vb-login-ver { color: #555; font-size: 11px; }

/* ---------------- shell (eBNS MDI) */
.vb-shell { display: flex; flex-direction: column; overflow: hidden; }
.vb-shell-top { display: flex; align-items: center; gap: 12px; height: 30px; padding: 0 8px; background: linear-gradient(#0a246a, #3a6ea5); color: #fff; flex: none; }
.vb-shell-title { font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vb-shell-date, .vb-shell-progress { opacity: .85; white-space: nowrap; }
.vb-shell-logout { margin-left: auto; }
.vb-shell-logout button { color: #000; height: 22px; min-width: 70px; }
.vb-menu-toggle { background: transparent; color: #fff; border: 0; font-size: 16px; cursor: pointer; padding: 0 4px; }
.vb-shell-body { flex: 1; display: flex; min-height: 0; }
.vb-tree { width: 220px; flex: none; overflow: auto; background: #fff; border-right: 2px solid var(--vb-shadow); padding: 4px; }
.vb-tree.hidden { display: none; }
.vb-tree input[type=search] { width: 100%; height: 22px; margin-bottom: 4px; border: 1px solid var(--vb-shadow); padding: 0 4px; }
.vb-tree summary { cursor: pointer; padding: 2px 0; user-select: none; }
.vb-tree-group > summary { font-weight: bold; color: var(--vb-accent); }
.vb-tree-sub { margin-left: 12px; }
.vb-tree ul.vb-tree-direct { margin-left: 12px; }
.vb-tree ul { list-style: none; margin: 0 0 0 14px; padding: 0; }
.vb-tree li a { display: block; padding: 2px 4px; color: #000; text-decoration: none; white-space: nowrap; }
.vb-tree li a:hover, .vb-tree li a.active { background: var(--vb-select); color: #fff; }
.vb-tree li a.todo { color: #999; }
.vb-tree li a.todo::after { content: " (변환중)"; font-size: 10px; }
.vb-mdi { flex: 1; display: flex; flex-direction: column; min-width: 0; background: #808080; }
.vb-tabs { display: flex; gap: 2px; padding: 3px 3px 0; background: var(--vb-face); border-bottom: 1px solid var(--vb-shadow); overflow-x: auto; flex: none; }
.vb-tab { display: flex; align-items: center; gap: 6px; padding: 3px 8px; background: var(--vb-face-light); border: 1px solid var(--vb-shadow); border-bottom: 0; cursor: pointer; white-space: nowrap; }
.vb-tab.active { background: #fff; font-weight: bold; }
.vb-tab button { border: 0; background: transparent; cursor: pointer; padding: 0 2px; font-size: 12px; }
.vb-frames { flex: 1; position: relative; min-height: 0; }
.vb-frames iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: var(--vb-face); display: none; }
.vb-frames iframe.active { display: block; }
.vb-muted { opacity: .8; }
/* 즐겨찾기 (frmTreeView.SSPanel, BackColor &HFFC0C0): cmdSource buttons 1200 x 1000 twips on a 1350 x 1150 grid */
.vb-desk { position: absolute; inset: 0; display: flex; flex-direction: column; background: #c0c0ff; }
.vb-desk-area { position: relative; flex: 1; min-height: 0; overflow: auto; }
.vb-desk-hint { flex: none; display: flex; flex-wrap: wrap; gap: 4px 16px; padding: 4px 8px; color: #000080; border-top: 1px solid #a0a0e0; }
.vb-desk-hint .vb-muted { margin-left: auto; }
.vb-fav { position: absolute; width: 80px; height: 66.67px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 2px; background: #fff; border: 2px outset var(--vb-hilite); cursor: pointer; overflow: hidden; }
.vb-fav:active { border-style: inset; }
.vb-fav:focus-visible { outline: 1px dotted #000; outline-offset: -5px; }
.vb-fav img { width: 32px; height: 32px; flex: none; }
.vb-fav span { max-height: 2.3em; overflow: hidden; line-height: 1.15; text-align: center; overflow-wrap: anywhere; }
.vb-desk-target { position: absolute; width: 80px; height: 66.67px; border: 2px dashed #000080; pointer-events: none; }
.vb-desk-pad { position: absolute; width: 1px; height: 1px; }

/* ---------------- screen page */
.vb-screen-page { display: flex; flex-direction: column; overflow: hidden; }
.vb-toolbar { display: flex; gap: 2px; padding: 3px 4px; border-bottom: 1px solid var(--vb-shadow); background: var(--vb-face); flex: none; flex-wrap: wrap; }
.vb-toolbar button { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 9px; background: var(--vb-face); border: 1px solid transparent; cursor: pointer; }
.vb-toolbar button:hover:not(:disabled) { border: 1px outset var(--vb-hilite); }
.vb-toolbar button:active:not(:disabled) { border: 1px inset var(--vb-hilite); }
.vb-toolbar button:disabled { color: #a0a0a0; cursor: default; }
.vb-toolbar .sep { width: 1px; margin: 2px 4px; background: var(--vb-shadow); border-right: 1px solid #fff; }
.vb-toolbar .ico { font-size: 13px; }
.vb-form-wrap { flex: 1; overflow: auto; position: relative; min-height: 0; }
.vb-form { position: relative; min-width: 100%; min-height: 100%; }
.vb-statusbar { flex: none; display: flex; height: 22px; border-top: 1px solid var(--vb-shadow); background: var(--vb-face); }
.vb-statusbar span { padding: 3px 6px; border: 1px inset var(--vb-hilite); margin: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#vb-status { flex: 1; }
.vb-todo { padding: 30px; }
body.vb-busy, body.vb-busy * { cursor: progress !important; }

/* ---------------- controls (absolute twips layout, 15 twips = 1px) */
.vb-c { position: absolute; }
.vb-panel { border: 1px solid; border-color: var(--vb-hilite) var(--vb-shadow) var(--vb-shadow) var(--vb-hilite); background: var(--vb-face); }
.vb-panel.inset { border-color: var(--vb-shadow) var(--vb-hilite) var(--vb-hilite) var(--vb-shadow); }
.vb-frame { border: 1px solid var(--vb-shadow); box-shadow: 1px 1px 0 var(--vb-hilite) inset, 1px 1px 0 var(--vb-hilite); margin-top: 0; }
.vb-frame > .vb-frame-caption { position: absolute; left: 7px; top: -8px; padding: 0 2px; background: var(--vb-face); white-space: nowrap; }
.vb-label { white-space: nowrap; overflow: visible; display: flex; align-items: center; }
.vb-label.wrap { white-space: normal; align-items: flex-start; }
.vb-label.right { justify-content: flex-end; }
.vb-label.center { justify-content: center; }
.vb-label.boxed { border: 1px inset var(--vb-hilite); background: #fff; padding: 0 3px; overflow: hidden; }
.vb-text { border: 2px inset var(--vb-hilite); background: var(--vb-window); padding: 0 3px; outline: none; }
.vb-text:focus { outline: 1px dotted #000; outline-offset: -3px; }
.vb-text[readonly] { background: #f0f0f0; }
.vb-text:disabled { background: var(--vb-face); color: #808080; }
.vb-text.right { text-align: right; }
.vb-text.center { text-align: center; }
textarea.vb-text { resize: none; padding: 2px 3px; }
.vb-date { display: flex; align-items: center; border: 2px inset var(--vb-hilite); background: #fff; position: absolute; }
.vb-date input[type=checkbox] { margin: 0 2px 0 3px; flex: none; }
.vb-date .vb-date-text { border: 0; height: 100%; flex: 1; min-width: 0; background: transparent; padding: 0 2px; outline: none; font: inherit; }
.vb-date .vb-date-native { position: absolute; left: 0; bottom: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; border: 0; padding: 0; }
.vb-date .vb-date-btn { flex: none; width: 14px; height: 100%; padding: 0; border: 0; border-left: 1px solid #ccc; background: var(--vb-face-light); font-size: 9px; cursor: pointer; }
.vb-date.unchecked .vb-date-text { color: #999; }
.vb-date input[type=date], .vb-date input[type=month], .vb-date input[type=time] { border: 0; height: 100%; flex: 1; min-width: 0; background: transparent; padding: 0 2px; outline: none; }
.vb-date input::-webkit-calendar-picker-indicator { margin: 0; padding: 0; width: 11px; height: 11px; }
.vb-date input::-webkit-datetime-edit { padding: 0; }
.vb-date input::-webkit-datetime-edit-fields-wrapper { padding: 0; }
.vb-date.unchecked input[type=date], .vb-date.unchecked input[type=month] { color: #999; }
.vb-combo { border: 2px inset var(--vb-hilite); background: #fff; padding: 0 1px; }
.vb-combo:disabled { background: var(--vb-face); }
.vb-button { background: var(--vb-face); border: 2px outset var(--vb-hilite); cursor: pointer; padding: 0 4px; white-space: nowrap; overflow: hidden; }
.vb-button:active:not(:disabled) { border-style: inset; }
.vb-button:disabled { color: #a0a0a0; cursor: default; }
.vb-button.lookup { padding: 0; font-size: 11px; }
.vb-check, .vb-option { display: flex; align-items: center; gap: 3px; white-space: nowrap; cursor: pointer; }
.vb-check input, .vb-option input { margin: 0; }
.vb-check.disabled, .vb-option.disabled { color: #808080; }
.vb-image { object-fit: contain; border: 1px inset var(--vb-hilite); background: #fff; }
.vb-line { background: #000; }
.vb-tabctl { }
.vb-tabctl > .vb-tabbar { position: absolute; left: 0; top: 0; right: 0; height: 22px; display: flex; gap: 0; }
.vb-tabctl > .vb-tabbar button { flex: 1 1 0; max-width: 160px; background: var(--vb-face); border: 1px solid var(--vb-shadow); border-bottom: 0; border-radius: 3px 3px 0 0; cursor: pointer; padding: 0 6px; white-space: nowrap; overflow: hidden; }
.vb-tabctl > .vb-tabbar button.active { background: var(--vb-face-light); font-weight: bold; position: relative; top: 1px; }
.vb-tabctl > .vb-tabbar button:disabled { color: #999; }
.vb-tabctl > .vb-tabpage { position: absolute; left: 0; right: 0; top: 22px; bottom: 0; border: 1px solid var(--vb-shadow); background: var(--vb-face-light); display: none; }
.vb-tabctl > .vb-tabpage.active { display: block; }
.vb-tree-ctl { background: #fff; border: 2px inset var(--vb-hilite); overflow: auto; padding: 2px; }
.vb-tree-ctl ul { list-style: none; margin: 0; padding-left: 14px; }
.vb-tree-ctl > ul { padding-left: 0; }
.vb-tree-ctl li > span { cursor: pointer; padding: 0 2px; white-space: nowrap; }
.vb-tree-ctl li > span.sel { background: var(--vb-select); color: #fff; }
.vb-tree-ctl li.collapsed > ul { display: none; }
.vb-tree-ctl .tw { display: inline-block; width: 12px; color: #666; cursor: pointer; }
.vb-chart { background: #fff; border: 1px inset var(--vb-hilite); }

/* ---------------- grid (VSFlexGrid) */
.vb-grid { background: #fff; border: 2px inset var(--vb-hilite); overflow: auto; outline: none; }
.vb-grid table { border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.vb-grid tr.vb-spacer td { background: transparent !important; }
.vb-grid th, .vb-grid td { box-sizing: border-box; border-right: 1px solid var(--vb-grid-line); border-bottom: 1px solid var(--vb-grid-line); padding: 0 3px; height: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vb-grid th { position: sticky; top: 0; z-index: 2; background: var(--vb-fixed); border-color: var(--vb-hilite) var(--vb-shadow) var(--vb-shadow) var(--vb-hilite); border-style: solid; border-width: 1px; font-weight: normal; text-align: center; cursor: default; user-select: none; }
.vb-grid thead tr:nth-child(2) th { top: 19px; }
.vb-grid thead tr:nth-child(3) th { top: 38px; }
.vb-grid th.sortable { cursor: pointer; }
.vb-grid th .sort { font-size: 9px; color: #444; }
.vb-grid td.fixed { background: var(--vb-fixed); border-color: var(--vb-hilite) var(--vb-shadow) var(--vb-shadow) var(--vb-hilite); position: sticky; left: 0; z-index: 1; }
.vb-grid td.frz { position: sticky; z-index: 1; }
.vb-grid td.frz:not(.fixed) { background-color: #fff; box-shadow: inset -1px 0 0 var(--vb-grid-line); }
.vb-grid th.frz { z-index: 3; }
.vb-grid td.r { text-align: right; }
.vb-grid td.c { text-align: center; }
.vb-grid td.l { text-align: left; }
.vb-grid td.edit { background-image: linear-gradient(transparent, transparent); }
.vb-grid td.edit:hover { outline: 1px dotted #888; outline-offset: -2px; }
.vb-grid tr.sel td:not(.fixed) { background: #cfe0ff !important; }
.vb-grid td.cur { outline: 2px solid var(--vb-select); outline-offset: -2px; }
.vb-grid tr.rowsel td:not(.fixed) { background: var(--vb-select) !important; color: #fff !important; }
.vb-grid td input, .vb-grid td select { width: 100%; height: 17px; border: 1px solid #000; padding: 0 2px; margin: 0; background: #fff; }
.vb-grid td input[type=checkbox] { width: auto; height: auto; border: 0; vertical-align: middle; }
.vb-grid td.chk { text-align: center; }
.vb-grid .vb-grid-empty { padding: 6px; color: #777; }
.vb-grid td .btn { float: right; width: 14px; height: 14px; line-height: 12px; padding: 0; font-size: 10px; border: 1px outset #fff; background: var(--vb-face); cursor: pointer; }

/* ---------------- dialogs */
.vb-modal-back { position: fixed; inset: 0; background: rgba(0,0,0,.15); z-index: 1000; display: flex; align-items: center; justify-content: center; }
.vb-dialog { background: var(--vb-face); border: 2px outset var(--vb-hilite); box-shadow: 3px 3px 8px rgba(0,0,0,.35); min-width: 300px; max-width: min(92vw, 900px); max-height: 92vh; display: flex; flex-direction: column; }
.vb-dialog-title { background: linear-gradient(90deg, #0a246a, #a6caf0); color: #fff; font-weight: bold; padding: 3px 6px; display: flex; justify-content: space-between; align-items: center; }
.vb-dialog-title button { width: 18px; height: 16px; padding: 0; line-height: 12px; background: var(--vb-face); border: 1px outset #fff; cursor: pointer; font-size: 11px; }
.vb-dialog-body { padding: 14px 16px; display: flex; gap: 12px; align-items: flex-start; overflow: auto; min-height: 0; }
.vb-dialog-body .icon { font-size: 26px; line-height: 1; }
.vb-dialog-body .msg { white-space: pre-wrap; line-height: 1.5; max-width: 640px; }
.vb-dialog-buttons { display: flex; justify-content: center; gap: 8px; padding: 0 12px 12px; }
.vb-dialog-buttons button { min-width: 76px; height: 24px; background: var(--vb-face); border: 2px outset var(--vb-hilite); cursor: pointer; }
.vb-dialog-buttons button:focus { outline: 1px dotted #000; outline-offset: -4px; }
.vb-dialog input.vb-prompt { width: 100%; height: 22px; border: 2px inset #fff; padding: 0 4px; margin-top: 8px; }
.vb-lookup { width: min(92vw, 760px); }
.vb-lookup .vb-dialog-body { flex-direction: column; align-items: stretch; gap: 6px; }
.vb-lookup-search { display: flex; gap: 6px; align-items: center; }
.vb-lookup-search input { flex: 1; height: 22px; border: 2px inset #fff; padding: 0 4px; }
.vb-lookup-search select { height: 22px; }
.vb-lookup-grid { position: relative; height: 50vh; }
.vb-lookup-grid .vb-grid { position: absolute; inset: 0; }

/* ---------------- print */
#vb-print-area { display: none; }
@media print {
  body.vb-printing > *:not(#vb-print-area) { display: none !important; }
  body.vb-printing { background: #fff; overflow: visible; height: auto; display: block; }
  body.vb-printing #vb-print-area { display: block; }
  #vb-print-area { font: 10px/1.3 var(--vb-font); color: #000; }
  #vb-print-area h1 { font-size: 18px; text-align: center; margin: 0 0 4px; }
  #vb-print-area .sub { display: flex; justify-content: space-between; margin-bottom: 6px; font-size: 11px; }
  #vb-print-area table { width: 100%; border-collapse: collapse; }
  #vb-print-area th, #vb-print-area td { border: 1px solid #000; padding: 1px 3px; }
  #vb-print-area th { background: #eee; }
  #vb-print-area td.r { text-align: right; } #vb-print-area td.c { text-align: center; }
  #vb-print-area thead { display: table-header-group; }
  #vb-print-area .pb { page-break-after: always; }
}

/* ---------------- small screens */
@media (max-width: 760px) {
  .vb-tree { position: absolute; z-index: 50; top: 30px; bottom: 0; left: 0; box-shadow: 2px 0 6px rgba(0,0,0,.3); }
  .vb-shell-date, .vb-shell-progress { display: none; }
}

/* ---------------- popup menu (mnuPopup) */
.vb-menu-back { position: fixed; inset: 0; z-index: 1100; }
.vb-popup-menu { position: fixed; min-width: 140px; background: var(--vb-face); border: 2px outset var(--vb-hilite); box-shadow: 2px 2px 4px rgba(0,0,0,.3); padding: 2px; display: flex; flex-direction: column; }
.vb-popup-menu button { text-align: left; background: transparent; border: 0; padding: 3px 18px; cursor: pointer; white-space: nowrap; }
.vb-popup-menu button:hover:not(:disabled) { background: var(--vb-select); color: #fff; }
.vb-popup-menu button:disabled { color: #999; cursor: default; }
.vb-popup-menu .sep { border-top: 1px solid var(--vb-shadow); border-bottom: 1px solid #fff; margin: 2px 1px; }

/* ---------------- VB z-order: windowless controls (Label, Line, Image) are drawn below windowed controls,
   so a label's box never blocks a button/textbox placed over it */
.vb-c { z-index: 1; }
.vb-label, .vb-line, .vb-image { z-index: 0; }
/* ---------------- narrow DTPicker */
.vb-date.narrow input[type=checkbox] { margin: 0 1px; width: 12px; height: 12px; }
.vb-date.narrow .vb-date-btn { width: 11px; }
.vb-date.narrow .vb-date-text { padding: 0 1px; letter-spacing: -0.2px; }
/* ---------------- grid column resize (AllowUserResizing) and merged cells */
.vb-grid th { position: sticky; }
.vb-grid th .rz { position: absolute; top: 0; right: 0; width: 6px; height: 100%; cursor: col-resize; z-index: 4; }
.vb-grid th .rz:hover { background: rgba(10, 36, 106, .25); }
body.vb-col-resizing, body.vb-col-resizing * { cursor: col-resize !important; user-select: none !important; }
.vb-grid td.merged { vertical-align: middle; background-clip: padding-box; }
/* ---------------- popup paging (이전 / 이후, 현재 / 전체 페이지) */
.vb-pager { display: flex; justify-content: center; align-items: center; gap: 12px; padding-top: 2px; }
.vb-pager button { min-width: 84px; height: 24px; background: var(--vb-face); border: 2px outset var(--vb-hilite); cursor: pointer; }
.vb-pager button:disabled { color: #a0a0a0; cursor: default; }
.vb-pager .pinfo { min-width: 200px; text-align: center; }
.vb-lookup-hint { text-align: center; font-size: 11px; }
@media print {
  #vb-print-area table.grid { table-layout: fixed; width: 100%; }
  #vb-print-area table.grid td { white-space: nowrap; overflow: hidden; text-overflow: clip; padding: 0 2px; line-height: 1.25; }
  #vb-print-area table.grid th { padding: 1px; line-height: 1.15; overflow: hidden; }
  #vb-print-area table.grid td.wrap { white-space: normal; word-break: break-all; }
  #vb-print-area table.grid tr { page-break-inside: avoid; }
}

/* VB clips CheckBox / OptionButton captions to the control width (long captions must not run over neighbours) */
.vb-check, .vb-option { overflow: hidden; }
.vb-check span, .vb-option span { overflow: hidden; text-overflow: clip; }