/* BOOKS_CSS_V1 (2026-09-30): 장부·보고서 공용 모양 — 화면은 가볍게, 인쇄는 A4 서류처럼 */
.bk { --ln:#cbd2dc; --ln2:#e5e9ef; --tx:#111827; --mu:#6b7280; --nv:#1e3a8a; --rd:#b91c1c; --gn:#166534;
  max-width:1100px; margin:0 auto; padding:8px 12px 50px; font-size:13px; color:var(--tx); }
.bk *, .bk *::before, .bk *::after { box-sizing:border-box; }
.bk .bk-bar { display:flex; flex-wrap:wrap; gap:6px; align-items:center; padding:6px 8px; background:#f7f8fa; border:1px solid var(--ln2); border-radius:8px; margin-bottom:10px; }
.bk .bk-bar input, .bk .bk-bar select { height:30px; border:1px solid var(--ln); border-radius:6px; padding:0 6px; font-size:13px; background:#fff;
  width:auto; min-width:0; flex:0 0 auto; margin:0; display:inline-block; }   /* 공용 input{width:100%} 에 막대가 줄마다 쪼개지던 것 */
.bk .bk-bar input[type=date] { width:140px; }
.bk .bk-bar input[type=month] { width:130px; }
.bk .bk-bar input[type=checkbox] { width:auto; height:auto; }
.bk .bk-bar .sp { flex:1 1 auto; }
.bk .b { height:30px; padding:0 10px; border:1px solid var(--ln); border-radius:6px; background:#fff; font-size:13px; cursor:pointer; color:var(--tx); text-decoration:none; display:inline-flex; align-items:center; gap:4px; white-space:nowrap; }
.bk .b.p { background:var(--nv); border-color:var(--nv); color:#fff; font-weight:700; }
.bk .doc { background:#fff; border:1px solid var(--ln2); padding:18px 20px; }
.bk .doc-h { display:grid; grid-template-columns:1fr auto 1fr; align-items:end; border-bottom:2px solid #111; padding-bottom:6px; margin-bottom:10px; gap:8px; }
.bk .doc-h .co { font-weight:800; font-size:14px; }
.bk .doc-h .ti { font-size:22px; font-weight:800; letter-spacing:6px; text-align:center; }
.bk .doc-h .me { text-align:right; font-size:11.5px; color:#374151; line-height:1.5; }
.bk .kv { display:grid; grid-template-columns:repeat(auto-fit, minmax(130px, 1fr)); border:1px solid var(--ln); margin:8px 0 12px; }
.bk .kv div { padding:6px 10px; border-right:1px solid var(--ln2); border-bottom:1px solid var(--ln2); }
.bk .kv span { display:block; font-size:11px; color:var(--mu); }
.bk .kv b { font-size:15px; font-variant-numeric:tabular-nums; }
.bk h3 { font-size:13.5px; margin:14px 0 4px; padding-left:6px; border-left:3px solid var(--nv); }
.bk table { width:100%; border-collapse:collapse; font-size:12.5px; }
.bk th, .bk td { border:1px solid var(--ln); padding:4px 6px; vertical-align:top; }
.bk th { background:#f1f3f6; font-weight:700; white-space:nowrap; }
.bk td.n, .bk th.n { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.bk td.c { text-align:center; white-space:nowrap; }
.bk tr.tot td { background:#f7f8fa; font-weight:800; }
.bk tr.warn td { background:#fff7ed; }
.bk .tag { font-size:10.5px; border:1px solid #fdba74; color:#9a3412; border-radius:3px; padding:0 4px; white-space:nowrap; }
.bk .mu { color:var(--mu); }
.bk .red { color:var(--rd); font-weight:700; }
.bk .grn { color:var(--gn); }
.bk a { color:var(--nv); text-decoration:none; }
.bk .note { font-size:11.5px; color:var(--mu); margin-top:6px; }
.bk .empty { padding:14px; color:var(--mu); text-align:center; }
.bk .two { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.bk .photos { display:grid; grid-template-columns:repeat(6, 1fr); gap:4px; }
.bk ul.chk { margin:4px 0 0; padding:0 0 0 18px; }
.bk ul.chk li { list-style:disc; line-height:1.7; margin:2px 0; font-size:12.5px; }
.bk .photos img { width:100%; aspect-ratio:1; object-fit:cover; border:1px solid var(--ln2); display:block; }
@media (max-width: 760px) {
  .bk { padding:6px 6px 40px; }
  .bk .doc { padding:10px 8px; border:0; }
  .bk .doc-h { grid-template-columns:1fr; text-align:left; }
  .bk .doc-h .ti { text-align:left; font-size:18px; letter-spacing:2px; }
  .bk .doc-h .me { text-align:left; }
  .bk .two { grid-template-columns:1fr; }
  .bk .photos { grid-template-columns:repeat(3, 1fr); }
  .bk .tbl-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
  /* 폰: 칸이 많은 표는 글자가 한 자씩 세로로 찌그러졌다 — 표는 넓게 두고 옆으로 밀어 본다(엑셀처럼) */
  .bk .tbl-wrap > table { min-width:620px; }
  .bk .two .tbl-wrap > table { min-width:0; }
  .bk td.w { min-width:150px; }
  .bk td.w2 { min-width:90px; }
  .bk table { font-size:12px; }
}
@media print {
  @page { size:A4; margin:12mm 10mm; }
  body * { visibility:hidden; }
  .bk .doc, .bk .doc * { visibility:visible; }
  .bk .doc { position:absolute; left:0; top:0; width:100%; border:0; padding:0; }
  .bk .no-print { display:none !important; }
  .bk thead { display:table-header-group; }
  .bk tr { page-break-inside:avoid; }
  .bk a { color:#111; }
  .bk .tbl-wrap { overflow:visible; }
}

/* ── DOCS_OWNER_PASS_V1 (2026-09-30): 사장님 "니가 나다 생각하고 까보라고" — 직접 써 보고 고친 것 ──
   [기간 ▾] 을 눌러야 날짜 두 칸이 펼쳐진다(막대가 두세 줄 되던 것). */
.bk .pb-rng:not([hidden]) { display:inline-flex; gap:6px; align-items:center; flex-wrap:wrap; }
@media (max-width: 760px) {
  /* 폰: 엑셀·인쇄는 사무실 PC 에서 — 막대 줄이기 */
  .bk .bk-bar #bkCsv, .bk .bk-bar #srCsv, .bk .bk-bar button[onclick*="print"] { display:none !important; }
  .bk .bk-bar input[type=search] { flex:1 1 140px !important; width:auto !important; }
  /* 폰: 장부 줄 = 카드 (표머리에 data-pk 가 있는 표만 — books_common.js cards()) */
  .bk table.pc thead { display:none; }
  .bk table.pc, .bk table.pc tbody { display:block; width:100%; }
  .bk .tbl-wrap > table.pc { min-width:0 !important; }
  .bk .tbl-wrap:has(> table.pc) { overflow:visible; }
  .bk table.pc tr { display:grid; grid-template-columns:1fr 1fr; gap:6px 12px; border:1px solid var(--ln); border-radius:10px; padding:10px 12px; margin:0 0 8px; background:#fff; }
  .bk table.pc tr.warn { background:#fff7ed; border-color:#fed7aa; }
  .bk table.pc tr.warn td { background:transparent; }
  .bk table.pc td { display:block; border:0 !important; padding:0 !important; text-align:left !important; white-space:normal !important; min-width:0 !important; font-size:13.5px; line-height:1.35; }
  .bk table.pc td::before { content:attr(data-l); display:block; font-size:10.5px; color:var(--mu); font-weight:400; margin-bottom:1px; }
  .bk table.pc td.pk { grid-column:1 / -1; font-size:16px; font-weight:800; }
  .bk table.pc td.pk::before { display:none; }
  .bk table.pc td.big { font-size:17px; font-weight:800; }
  .bk table.pc td[data-ph="hide"], .bk table.pc td:empty { display:none !important; }
  .bk table.pc td a[href^="tel:"] { display:inline-block; padding:4px 10px; border:1px solid #93c5fd; border-radius:999px; background:#eff6ff; font-weight:700; }
  .bk table.pc tr.tot { display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; background:#f1f5f9; }
  .bk table.pc tr.tot td { font-weight:800; }
  .bk table.pc tr.tot td::before { display:none; }
  .bk table.pc td.empty { grid-column:1 / -1; text-align:center !important; }
  .bk table.pc td.empty::before { display:none; }
}
@media (max-width: 760px) {
  /* 카드: 제목(현장·품목) 맨 위, 큰 금액은 그 바로 아래 첫 칸 */
  .bk table.pc td.pk { order:-2; }
  .bk table.pc td.big { order:-1; }
}