* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --blue: #2070c8; --blue-d: #185a9f; --blue-l: #e8f1fb;
  --bg: #f2f4f8; --line: #c9d4e0; --line-l: #e3e9f0;
  --red: #d8342c; --text: #1d2733;
}
html, body { height: 100%; }
body { font-family: 'Malgun Gothic', '맑은 고딕', sans-serif; font-size: 14px; background: var(--bg); color: var(--text); display: flex; flex-direction: column; }

/* ───── 상단바 ───── */
#topbar { background: linear-gradient(180deg, #2a7bd4, #1e66b4); color: #fff; display: flex; align-items: center; padding: 0 14px; height: 52px; gap: 18px; box-shadow: 0 2px 6px rgba(0,0,0,.18); flex-shrink: 0; }
.brand { font-size: 19px; font-weight: 700; white-space: nowrap; cursor: pointer; border-radius: 8px; padding: 4px 8px; margin-left: -8px; }
.brand:hover { background: rgba(255,255,255,.15); }
.brand:focus { outline: 2px solid rgba(255,255,255,.6); }
.brand-sub { font-size: 12px; opacity: .85; font-weight: 400; }
#mainmenu { display: flex; gap: 2px; flex: 1; overflow-x: auto; }
#mainmenu button { background: transparent; border: none; color: #e8f1fb; font-size: 14px; font-weight: 600; padding: 8px 13px; cursor: pointer; border-radius: 6px; white-space: nowrap; font-family: inherit; }
#mainmenu button:hover { background: rgba(255,255,255,.15); }
#mainmenu button.active { background: #fff; color: var(--blue-d); }
.nav-hist { display: flex; gap: 3px; flex-shrink: 0; }
.nav-hist button { background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.35); color: #fff; border-radius: 6px; padding: 5px 9px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; white-space: nowrap; }
.nav-hist button:hover { background: rgba(255,255,255,.3); }
.top-date { font-size: 13px; opacity: .9; white-space: nowrap; }
.user-box { display: flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 13px; }
.user-box .uname { background: rgba(255,255,255,.18); border-radius: 14px; padding: 4px 11px; font-weight: 700; }
.user-box .urole { font-size: 11px; opacity: .85; }
.user-box button { background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.35); color: #fff; border-radius: 6px; padding: 4px 9px; font-size: 12px; cursor: pointer; font-family: inherit; }
.user-box button:hover { background: rgba(255,255,255,.3); }
body.role-staff .admin-only { display: none !important; }
.badge { display: inline-block; border-radius: 10px; padding: 1px 8px; font-size: 11.5px; font-weight: 700; }
.badge.admin { background: #fde7c4; color: #8a5300; }
.badge.staff { background: #dcebfb; color: #1d58a0; }
.badge.off { background: #e6e9ee; color: #6b7785; }

/* ───── 메인 영역 ───── */
#view { flex: 1; overflow: auto; padding: 16px; }
.panel { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; margin-bottom: 14px; }
.panel-title { font-size: 16px; font-weight: 700; color: var(--blue-d); margin-bottom: 12px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.panel-title .spacer { flex: 1; }

/* ───── 대시보드 ───── */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 14px; }
.card { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; }
.card .label { font-size: 13px; color: #5a6b7e; margin-bottom: 6px; }
.card .value { font-size: 22px; font-weight: 700; }
.card .value.red { color: var(--red); }
.card .value.blue { color: var(--blue); }
.shortcut-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.shortcut { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 16px 8px; text-align: center; cursor: pointer; transition: all .12s; }
.shortcut:hover { border-color: var(--blue); box-shadow: 0 2px 8px rgba(32,112,200,.18); transform: translateY(-1px); }
.shortcut .ico { font-size: 28px; margin-bottom: 6px; }
.shortcut .name { font-size: 13px; font-weight: 600; }

/* ───── 공통 컨트롤 ───── */
button.btn { background: var(--blue); color: #fff; border: none; border-radius: 6px; padding: 7px 14px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; }
button.btn:hover { background: var(--blue-d); }
button.btn.gray { background: #7b8a9a; }
button.btn.gray:hover { background: #64727f; }
button.btn.red { background: var(--red); }
button.btn.red:hover { background: #b02820; }
button.btn.green { background: #1d9e50; }
button.btn.green:hover { background: #157a3d; }
button.btn.sm { padding: 3px 9px; font-size: 12px; }
input[type=text], input[type=number], input[type=date], input[type=month], select, textarea {
  border: 1px solid var(--line); border-radius: 5px; padding: 6px 8px; font-size: 14px; font-family: inherit; background: #fff;
}
input:focus, select:focus, textarea:focus { outline: 2px solid rgba(32,112,200,.35); border-color: var(--blue); }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
label.fld { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: #52657a; font-weight: 600; }

/* ───── 테이블 ───── */
table.grid { border-collapse: collapse; width: 100%; background: #fff; }
table.grid th { background: var(--blue-l); border: 1px solid var(--line); padding: 6px 8px; font-size: 13px; color: var(--blue-d); white-space: nowrap; position: sticky; top: 0; }
table.grid td { border: 1px solid var(--line-l); padding: 5px 8px; font-size: 13px; }
table.grid tr:hover td { background: #f4f8fd; }
table.grid td.num, table.grid th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.grid td.center { text-align: center; }
table.grid tr.total td { background: #fdf6e3; font-weight: 700; }
table.grid tr.clickable { cursor: pointer; }
.red { color: var(--red); }
.blue { color: var(--blue); }
.table-wrap { overflow: auto; max-height: calc(100vh - 220px); border: 1px solid var(--line); border-radius: 6px; }

/* ───── 전표 입력 ───── */
.voucher-head { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 12px; }
.voucher-sum { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; margin: 12px 0; }
.sum-box { background: var(--blue-l); border: 1px solid var(--line); border-radius: 6px; padding: 8px 12px; }
.sum-box .label { font-size: 12px; color: #52657a; }
.sum-box .value { font-size: 18px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.sum-box.hl { background: #fdf0ef; }
.sum-box.hl .value { color: var(--red); }
.sum-box input { width: 100%; text-align: right; font-size: 17px; font-weight: 700; border: 1px solid var(--blue); }
table.entry input { width: 100%; border: none; background: transparent; padding: 4px 6px; font-size: 13px; font-family: inherit; }
table.entry input:focus { outline: none; background: #fffbe6; }
table.entry td { padding: 0 !important; }
table.entry td.ro { padding: 4px 8px !important; background: #f7f9fc; text-align: right; font-variant-numeric: tabular-nums; }
table.entry td.ro.center { cursor: pointer; color: #52657a; }
table.entry td.ro.center:hover { background: var(--blue-l); color: var(--blue-d); font-weight: 700; }
.line-help { font-size: 12px; color: #71808f; margin-top: 6px; }
.line-help b { color: #52657a; }
/* ───── 우클릭 메뉴 ───── */
.ctx-menu { position: fixed; z-index: 80; background: #fff; border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 8px 28px rgba(0,0,0,.22); padding: 5px; min-width: 250px; display: flex; flex-direction: column; }
.ctx-title { font-size: 12px; color: #71808f; padding: 5px 10px 6px; border-bottom: 1px solid var(--line-l); margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 320px; }
.ctx-item { background: none; border: none; text-align: left; padding: 7px 12px; font-size: 13.5px; font-family: inherit; cursor: pointer; border-radius: 5px; color: var(--text); white-space: nowrap; }
.ctx-item:hover, .ctx-item:focus { background: var(--blue-l); outline: none; }
.ctx-item.danger { color: var(--red); }
.ctx-item.danger:hover, .ctx-item.danger:focus { background: #fdf0ef; }
.ctx-item[disabled] { color: #b4bec9; cursor: default; background: none; }
.ctx-sep { height: 1px; background: var(--line-l); margin: 4px 6px; }
/* 거래처 최근거래로 입력 팝업 */
table.rl tr { cursor: pointer; }
table.rl tr.sel td { background: var(--blue-l); }
table.rl td { white-space: nowrap; }
table.rl .rl-in { width: 100%; min-width: 64px; border: 1px solid #bfe3c4; background: #eefbe9; border-radius: 4px; padding: 3px 6px; text-align: right; font-size: 13px; font-family: inherit; }
table.rl .rl-in:focus { outline: 2px solid rgba(29,158,80,.35); }
.partner-box { display: flex; gap: 6px; align-items: center; }
.partner-box .pname { font-size: 17px; font-weight: 700; color: var(--blue-d); min-width: 150px; border-bottom: 2px solid var(--blue); padding: 4px 6px; cursor: pointer; }
.partner-box .pname.empty { color: #9aa8b8; font-weight: 400; }

/* ───── 모달/팝업 ───── */
.modal-back { position: fixed; inset: 0; background: rgba(10,25,45,.45); display: flex; align-items: flex-start; justify-content: center; padding-top: 10vh; z-index: 50; }
.modal { background: #fff; border-radius: 10px; padding: 16px; box-shadow: 0 10px 40px rgba(0,0,0,.3); max-height: 76vh; display: flex; flex-direction: column; gap: 10px; }
.modal-title { font-size: 16px; font-weight: 700; color: var(--blue-d); display: flex; justify-content: space-between; align-items: center; }
.modal-x { background: none; border: none; font-size: 16px; cursor: pointer; color: #666; }
.modal input[type=text] { width: 100%; }
.pick-list { overflow: auto; border: 1px solid var(--line-l); border-radius: 6px; min-height: 200px; }
.pick-list .pick-row { padding: 7px 12px; cursor: pointer; display: flex; gap: 12px; font-size: 13px; border-bottom: 1px solid #f0f3f7; }
.pick-list .pick-row:hover, .pick-list .pick-row.sel { background: var(--blue-l); }
.pick-list .pick-row .main { font-weight: 600; flex: 1; }
.pick-list .pick-row .sub { color: #71808f; }
/* 거래처와 거래했던 품목 (경영박사의 "거래품목 굵게표시") */
.pick-opts { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; font-size: 13px; color: #52657a; }
.pick-opts label { display: flex; align-items: center; gap: 5px; cursor: pointer; }
.pick-opts .pick-partner { font-weight: 700; color: var(--blue-d); margin-right: auto; }
.pick-list .pick-row.traded .main { font-weight: 800; color: var(--blue-d); }
.pick-list .pick-row.traded { background: #fff7e3; }
.pick-list .pick-row.traded .recent { color: #8a5300; font-size: 12px; }
.pick-list .pick-row.traded:hover, .pick-list .pick-row.traded.sel { background: #ffe9b8; }
/* ───── 전표찾기 팝업 ───── */
.modal.finder { width: min(1040px, 96vw); max-height: 88vh; padding: 14px 16px; }
.quick { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.quick button { background: #fff; border: 1px solid var(--line); border-radius: 5px; padding: 5px 9px; font-size: 12.5px; cursor: pointer; font-family: inherit; color: var(--blue-d); font-weight: 600; }
.quick button:hover { background: var(--blue-l); }
.quick button.arrow { font-weight: 700; padding: 5px 7px; }
.finder .sumline { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; color: #52657a; background: #f4f6fa; border-radius: 6px; padding: 6px 10px; }
.finder .sumline b { color: var(--text); font-variant-numeric: tabular-nums; }
.finder .table-wrap { max-height: 52vh; }
.finder table.grid tr.sel td { background: var(--blue-l); }
.finder table.grid td { white-space: nowrap; }
.finder table.grid td:nth-child(4), .finder table.grid td:nth-child(5) { white-space: normal; min-width: 110px; }
.finder input[type=text] { width: auto; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.form-grid label.fld input, .form-grid label.fld select { width: 100%; }
.form-grid .full { grid-column: 1 / -1; }

/* ───── 토스트 ───── */
#toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: #223; color: #fff; padding: 10px 22px; border-radius: 8px; font-size: 14px; opacity: 0; transition: opacity .25s; pointer-events: none; z-index: 99; }
#toast.show { opacity: .95; }
#toast.err { background: var(--red); }

/* ───── 품목 화면 레이아웃 ───── */
.items-layout { display: flex; gap: 12px; align-items: flex-start; }
.cat-side { width: 210px; flex-shrink: 0; background: #fff; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.cat-side .cat-head { background: var(--blue-l); padding: 8px 10px; font-weight: 700; font-size: 13px; color: var(--blue-d); display: flex; justify-content: space-between; align-items: center; }
.cat-side .cat-row { padding: 7px 12px; font-size: 13px; cursor: pointer; display: flex; justify-content: space-between; border-bottom: 1px solid #f0f3f7; }
.cat-side .cat-row:hover { background: #f4f8fd; }
.cat-side .cat-row.sel { background: var(--blue-l); font-weight: 700; color: var(--blue-d); }
.cat-side .cat-row .cnt { color: #8b99a8; font-size: 12px; }
.items-main { flex: 1; min-width: 0; }

/* ───── 인쇄 ───── */
@media print {
  #topbar, .no-print { display: none !important; }
  #view { padding: 0; overflow: visible; }
  body { background: #fff; }
  .table-wrap { max-height: none; overflow: visible; border: none; }
  .panel { border: none; }
}
.print-sheet { background: #fff; padding: 20px; font-size: 13px; }
.print-sheet h2 { text-align: center; font-size: 20px; margin-bottom: 14px; letter-spacing: 8px; }
.ps-parties { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 12px; }
.ps-party { border: 1px solid #444; padding: 8px 10px; font-size: 12.5px; line-height: 1.55; }
.ps-party .bn { font-size: 17px; font-weight: 700; letter-spacing: 2px; }
table.ps { border-collapse: collapse; width: 100%; }
table.ps th, table.ps td { border: 1px solid #555; padding: 4px 8px; font-size: 12.5px; }
table.ps th { background: #eef2f7; }
table.ps td.num { text-align: right; font-variant-numeric: tabular-nums; }
.ps-foot { margin-top: 10px; text-align: right; font-size: 15px; font-weight: 700; }

/* ───── 데이터 가져오기 ───── */
.imp-steps { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.imp-step { flex: 1; min-width: 120px; background: #f4f6fa; border: 1px solid var(--line-l); border-radius: 6px; padding: 8px 12px; font-size: 13px; color: #8b99a8; display: flex; align-items: center; gap: 8px; }
.imp-step b { display: inline-flex; width: 22px; height: 22px; border-radius: 50%; background: #cfd8e3; color: #fff; align-items: center; justify-content: center; font-size: 12px; }
.imp-step.active { background: var(--blue-l); border-color: var(--blue); color: var(--blue-d); font-weight: 700; }
.imp-step.active b { background: var(--blue); }
.imp-step.done { color: #1d9e50; }
.imp-step.done b { background: #1d9e50; }
.imp-guide { background: #fffbe6; border: 1px solid #f0dc9a; border-radius: 6px; padding: 10px 14px; font-size: 13.5px; line-height: 1.7; }
.imp-guide ol { margin: 4px 0 0 20px; }
.imp-radio { display: flex; align-items: center; gap: 6px; cursor: pointer; font-size: 14px; }
.imp-radio .sub { color: #52657a; font-size: 13px; }
.imp-options { display: flex; flex-direction: column; gap: 6px; }
.imp-drop { display: block; border: 2px dashed var(--line); border-radius: 10px; padding: 28px 16px; text-align: center; cursor: pointer; background: #fafbfd; font-size: 14px; transition: all .12s; }
.imp-drop:hover, .imp-drop.over { border-color: var(--blue); background: var(--blue-l); }
.imp-drop .ico { font-size: 36px; margin-bottom: 6px; }
.map-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px 12px; }
.map-grid select { width: 100%; }
table.imp-preview td { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
table.imp-preview tr.imp-head td { background: #fdf6e3; font-weight: 700; }
table.imp-preview tr.imp-skip td { color: #b0bac6; background: #f7f8fa; text-decoration: line-through; }

/* ───── 단가 힌트 / 과세 표시 ───── */
.price-hint { font-size: 11px; color: #1d9e50; text-align: right; line-height: 1.2; min-height: 0; white-space: nowrap; }
.price-hint:empty { display: none; }
.tax-free { color: #b36b00; background: #fff4df; border-radius: 4px; padding: 0 5px; font-size: 12px; }
table.entry td .price-hint { padding: 0 6px 2px; }

/* ───── 전표 입력: 오른쪽 패널 (달력 · 최근 거래 · 거래로 입력) ───── */
.entry-layout { display: grid; grid-template-columns: minmax(0, 1fr) 350px; gap: 14px; align-items: start; }
@media (max-width: 1180px) { .entry-layout { grid-template-columns: 1fr; } }
.entry-side { display: flex; flex-direction: column; gap: 12px; }
.side-box { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; }
.side-head { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-bottom: 8px; color: var(--blue-d); flex-wrap: wrap; }
.side-head b { font-size: 14px; }
.side-head label { display: flex; align-items: center; gap: 4px; color: #52657a; cursor: pointer; font-weight: 400; }
.side-head select { padding: 2px 4px; font-size: 12.5px; }
.cal-nav { background: none; border: 1px solid var(--line); border-radius: 5px; width: 26px; height: 26px; cursor: pointer; font-size: 16px; line-height: 1; color: var(--blue-d); }
.cal-nav:hover { background: var(--blue-l); }
table.cal { width: 100%; border-collapse: collapse; table-layout: fixed; }
table.cal th { font-size: 11.5px; color: #71808f; font-weight: 600; padding: 2px 0; }
table.cal td { text-align: center; font-size: 13px; height: 36px; border-radius: 6px; cursor: pointer; vertical-align: middle; line-height: 1.1; }
table.cal td[data-d]:hover { background: var(--blue-l); }
table.cal .sun { color: var(--red); } table.cal .sat { color: var(--blue); }
table.cal td.has { font-weight: 700; }
table.cal td i { display: block; font-style: normal; font-size: 9.5px; color: #1d9e50; }
table.cal td.today { outline: 2px solid var(--blue); outline-offset: -2px; }
table.cal td.cur { background: var(--blue); color: #fff !important; } table.cal td.cur i { color: #d6f5dc; }
.cal-foot { font-size: 12px; color: #52657a; margin-top: 6px; text-align: center; }
.rc-list { max-height: 250px; overflow: auto; border: 1px solid var(--line-l); border-radius: 6px; }
.rc-row { display: flex; gap: 6px; align-items: center; padding: 5px 8px; font-size: 12.5px; border-bottom: 1px solid #f0f3f7; cursor: pointer; white-space: nowrap; }
.rc-row:hover { background: #f4f8fd; } .rc-row.sel { background: var(--blue-l); }
.rc-date { color: #71808f; } .rc-no { color: #71808f; width: 22px; text-align: right; }
.rc-type { font-size: 11px; font-weight: 700; padding: 1px 5px; border-radius: 4px; background: #fde7c4; color: #8a5300; }
.rc-type.purchase { background: #dcebfb; color: #1d58a0; }
.rc-main { flex: 1; overflow: hidden; text-overflow: ellipsis; } .rc-main .rc-items { color: #71808f; }
.rc-amt { font-variant-numeric: tabular-nums; font-weight: 600; }
.ri-list { max-height: 230px; overflow: auto; }
.ri-empty { font-size: 12.5px; color: #8b99a8; padding: 10px; text-align: center; line-height: 1.5; }
table.ri td, table.ri th { font-size: 12.5px; padding: 4px 6px; } table.ri .sub { color: #71808f; font-size: 11.5px; }
table.ri tbody tr { cursor: pointer; }

/* 거래처 찾기: 최근 1달 거래 거래처 강조 */
.pick-hint { font-size: 12px; color: #71808f; }
.pick-list .pick-row.recent { background: #fff7e3; }
.pick-list .pick-row.recent .main { color: var(--blue-d); font-weight: 800; }
.pick-list .pick-row .recent-tag { color: #8a5300; font-size: 12px; white-space: nowrap; }
.pick-list .pick-row.recent:hover, .pick-list .pick-row.recent.sel { background: #ffe9b8; }
.partner-box .pname:focus { outline: 2px solid rgba(32,112,200,.35); border-radius: 4px; }

/* 거래처 찾기 줄: 상호는 한 줄로, 긴 보조 정보는 말줄임 */
.pick-list .pick-row .main { white-space: nowrap; flex: 1 0 auto; min-width: 120px; }
.pick-list .pick-row .sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 38%; }

/* ───── 출고표 / 매출장 ───── */
.ship-sum { font-size: 13px; color: #52657a; background: #f4f6fa; border-radius: 6px; padding: 7px 12px; margin-bottom: 10px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.ship-sum b { color: var(--text); }
.ship-sum .warn, .ship .warn { color: var(--red); font-weight: 700; }
.ship-sum .warn2 { color: #8a5300; }
.ship-tabs { display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; }
.ship-tabs button { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 8px 14px; font-size: 14px; font-weight: 700; cursor: pointer; font-family: inherit; color: #52657a; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.ship-tabs button .sub { font-size: 11.5px; font-weight: 400; color: #8b99a8; }
.ship-tabs button.on { background: var(--blue); color: #fff; border-color: var(--blue); }
.ship-tabs button.on .sub { color: #d6e6fa; }
.print-title { font-size: 17px; font-weight: 700; color: var(--blue-d); margin: 6px 0 8px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.print-title .sub { font-size: 13px; font-weight: 400; color: #52657a; }
.course-tag { border-radius: 6px; padding: 2px 10px; border: 1px solid rgba(0,0,0,.08); }
.wh-legend { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 8px; font-size: 12px; }
.wh-legend span { border: 1px solid var(--line-l); border-radius: 4px; padding: 2px 8px; font-weight: 700; }
.wh-legend span.sub { border: none; font-weight: 400; color: #71808f; }
table.ship td { font-size: 14px; padding: 6px 8px; }
table.ship tr.grp td { border-top: 2px solid #6b7785; }
table.ship td.code { font-variant-numeric: tabular-nums; }
table.ship td.editable { cursor: pointer; text-decoration: underline dotted #8b99a8; }
table.ship td.editable:hover { background: var(--blue-l) !important; }
table.ship td.short { color: var(--red); font-weight: 800; }
table.ship .sub { color: #71808f; font-size: 12px; }
table.ship tr.pay td { background: #eefbe9; }
.course-block { margin-bottom: 18px; }
@media print {
  .ship-tabs, .ship-sum, .wh-legend, .no-print, #entrySide { display: none !important; }
  table.ship td, table.ship th { font-size: 12.5px; padding: 3px 6px; border: 1px solid #999; }
  table.ship { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .course-block { break-inside: avoid; page-break-inside: avoid; }
  .course-block + .course-block { break-before: page; page-break-before: always; }
  .print-title { font-size: 15px; }
}

/* ───── 경비 ───── */
.exp-form { background: #f8fafc; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; margin-bottom: 12px; }
.exp-form.editing { background: #fff8e6; border-color: #e8c36a; }
.exp-form-title { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; color: var(--blue-d); flex-wrap: wrap; }
.exp-form-title .sub { font-size: 12px; color: #71808f; font-weight: 400; }
.exp-grid { display: grid; grid-template-columns: 140px 1.1fr 140px 100px 125px 1fr 1.5fr auto auto; gap: 8px; align-items: end; }
.exp-grid .fld input, .exp-grid .fld select { width: 100%; }
@media (max-width: 1100px) { .exp-grid { grid-template-columns: 1fr 1fr 1fr; } .exp-grid .fld[style*="span 2"] { grid-column: span 3 !important; } }
@media (max-width: 600px) { .exp-grid { grid-template-columns: 1fr 1fr; } .exp-grid .fld[style*="span 2"] { grid-column: span 2 !important; } }
.exp-recent { margin-top: 8px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; font-size: 12.5px; }
.chip { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 3px 10px; font-size: 12.5px; cursor: pointer; font-family: inherit; color: #52657a; }
.chip:hover { background: var(--blue-l); border-color: var(--blue); color: var(--blue-d); }
.chip b { color: var(--text); }
.card .sub { font-size: 11.5px; color: #8b99a8; margin-top: 4px; }
.card.clickable { cursor: pointer; } .card.clickable:hover { border-color: var(--blue); }
.bar { background: #eef2f7; border-radius: 4px; height: 14px; overflow: hidden; }
.bar span { display: block; height: 100%; background: linear-gradient(90deg, #f28b82, #d8342c); border-radius: 4px; }
table.ship tr.sel td { background: #fff8e6; }
@media print { .exp-form, .ship-tabs { display: none !important; } }

/* ───── 휴대폰 앱 레이아웃 (좁은 화면) ───── */
#bottomnav { display: none; position: fixed; left: 0; right: 0; bottom: 0; height: calc(58px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: #fff; border-top: 1px solid var(--line); z-index: 45; justify-content: space-around; align-items: center; box-shadow: 0 -2px 8px rgba(0,0,0,.06); }
#bottomnav button { background: none; border: none; font-family: inherit; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 11px; color: #52657a; padding: 4px 6px; min-width: 56px; cursor: pointer; }
#bottomnav button .ico { font-size: 21px; line-height: 1; }
#bottomnav button.active { color: var(--blue-d); font-weight: 700; }
@media (max-width: 760px) {
  #topbar { height: 48px; gap: 8px; padding: 0 10px; position: sticky; top: 0; z-index: 44; }
  .brand { font-size: 16px; padding: 4px 6px; margin-left: -6px; } .brand-sub { display: none; }
  .nav-hist button { padding: 5px 7px; font-size: 12px; }
  #mainmenu { display: none; }           /* 하단 탭바로 대체 */
  .top-date { display: none; }
  .user-box { gap: 4px; font-size: 12px; margin-left: auto; } .user-box .urole, .user-box #btnPw, .user-box #btnLogout { display: none; }   /* 비밀번호·로그아웃은 하단 더보기 메뉴에 */ .user-box .uname { padding: 3px 8px; max-width: 90px; overflow: hidden; text-overflow: ellipsis; }
  #view { padding: 10px 10px calc(74px + env(safe-area-inset-bottom)); }
  #bottomnav { display: flex; }
  .panel { padding: 10px; margin-bottom: 10px; border-radius: 8px; }
  .panel-title { font-size: 15px; gap: 6px; }
  .cards { grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
  .card { padding: 10px 12px; } .card .label { font-size: 12px; } .card .value { font-size: 18px; }
  .shortcut-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .shortcut { padding: 12px 4px; } .shortcut .ico { font-size: 24px; } .shortcut .name { font-size: 12px; }
  button.btn { padding: 9px 13px; font-size: 14px; }
  input[type=text], input[type=number], input[type=date], input[type=month], select, textarea { font-size: 16px; padding: 8px 9px; }   /* 아이폰 자동 확대 방지 */
  table.grid th, table.grid td { font-size: 12.5px; padding: 5px 6px; }
  .table-wrap { max-height: none; }
  .modal-back { padding: 3vh 2vw 0; align-items: flex-start; }
  .modal { width: 96vw !important; max-width: 96vw; max-height: 90vh; padding: 12px; }
  .pick-list { min-height: 160px; max-height: 60vh; }
  .pick-list .pick-row { padding: 10px 10px; font-size: 14px; flex-wrap: wrap; gap: 6px 10px; }
  .entry-layout { grid-template-columns: minmax(0, 1fr); }
  .entry-main, .entry-side { min-width: 0; }
  .voucher-head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .panel-title { flex-wrap: wrap; }
  .voucher-sum { grid-template-columns: 1fr 1fr; }
  .sum-box .value { font-size: 16px; }
  table.entry input { font-size: 15px; padding: 7px 6px; }
  .line-help { display: none; }
  .ship-tabs button { padding: 7px 10px; font-size: 13px; } .ship-tabs button .sub { display: none; }
  .quick button { padding: 7px 10px; font-size: 13px; }
  .exp-grid { grid-template-columns: 1fr 1fr; }
  .ctx-menu { min-width: 220px; max-width: 92vw; } .ctx-item { padding: 10px 12px; font-size: 15px; }
  .side-box { padding: 8px 10px; }
  .finder .row input[type=date] { width: 46%; }
}
@media (display-mode: standalone) { .nav-hist { display: flex; } }   /* 앱으로 설치하면 브라우저 뒤로가기가 없으니 ◀ 뒤로 유지 */