/* 여기바방 '장부' — 매출 시트 · 월급 시트 (2026-11-13). 업무 화면이라 예쁜 것보다 편하게: 숫자 크고 진하게, 옆으로 넘기지 않게 한 건을 두 줄로. */
.ybl-wrap { max-width: 1480px; }
.ybl-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.ybl-head h1 { margin: 0; font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.ybl-head .grow { flex: 1; }
.ybl-month { display: flex; align-items: center; gap: 4px; }
.ybl-month .sel { min-height: 38px; font-size: 16px; font-weight: 800; padding: 0 10px; }
.ybl-month .btn { min-width: 36px; font-size: 18px; }
.ybl-tabs { display: flex; gap: 4px; }
.ybl-tabs button { min-height: 38px; padding: 0 14px; font-size: 15px; font-weight: 800; cursor: pointer; }

.ybl-lock { max-width: 520px; } .ybl-lock .row { gap: 8px; } .ybl-lock .in { flex: 1; min-height: 44px; font-size: 16px; }
.ybl-lock-msg { margin: 8px 0 0; font-weight: 700; } .ybl-lock-msg.bad { color: var(--bad, #a92e25); }

.ybl-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.ybl-tile { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border: 1px solid var(--line, #e3e3df); border-radius: 14px; background: var(--card, #fff); box-shadow: var(--depth); min-width: 0; }
.ybl-tile .l { font-size: 13px; font-weight: 700; color: var(--mute, #5d636c); }
.ybl-tile b { font-size: 23px; font-weight: 800; letter-spacing: -.02em; color: var(--ink, #111318); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ybl-tile small { font-size: 12.5px; color: var(--mute, #5d636c); }
.ybl-tile.minus b { color: var(--ink2, #2e333b); }
.ybl-tile.big { background: var(--ink, #111318); border-color: var(--ink, #111318); } .ybl-tile.big .l, .ybl-tile.big small { color: #d9d6cc; } .ybl-tile.big b { color: #fff; font-size: 26px; }
.ybl-tile.bad b { color: var(--bad, #a92e25); }

/* 매출 시트: 한 건 = 두 줄 */
.ybl-sheet { padding: 14px; }
.ybl-gh, .ybl-row { display: grid; grid-template-columns: minmax(0, 1fr) 28px; gap: 4px 6px; }
.ybl-gh { padding: 0 8px 6px; border-bottom: 2px solid var(--ink, #111318); font-size: 12.5px; font-weight: 800; color: var(--ink2, #2e333b); }
.ybl-gh .ybl-l2 { color: var(--mute, #5d636c); font-weight: 700; }
.ybl-l1 { display: grid; grid-template-columns: 132px 132px 74px minmax(110px, 1.3fr) minmax(90px, 1fr) 62px repeat(3, minmax(92px, .8fr)) minmax(92px, .8fr); gap: 4px; align-items: center; }
.ybl-l2 { display: grid; grid-template-columns: 210px minmax(92px, .8fr) 46px minmax(80px, .8fr) minmax(80px, .8fr) minmax(120px, 2.4fr); gap: 4px; align-items: center; margin-top: 4px; }
.ybl-gh .r { text-align: right; }
.ybl-row { position: relative; padding: 7px 8px; border-bottom: 1px solid var(--line2, #eeeeeb); }
.ybl-row:hover { background: var(--soft, #f1f1ee); }
.ybl-row.new { background: transparent; opacity: .85; } .ybl-row.new:focus-within { opacity: 1; background: var(--gold-soft, #f6f0e5); }
.ybl-row.dirty { box-shadow: inset 3px 0 #c9a463; } .ybl-row.err { box-shadow: inset 3px 0 var(--bad, #a92e25); }
.ybl-row.paid .ybl-c.check { background: var(--ok-soft, #e5f2eb); border-radius: 8px; }
.ybl-c { min-width: 0; display: flex; align-items: center; gap: 4px; }
.ybl-c .in, .ybl-c .sel { width: 100%; min-height: 34px; padding: 4px 8px; font-size: 14px; border-radius: 8px; }
.ybl-c .in.won { text-align: right; font-weight: 800; font-size: 14.5px; font-variant-numeric: tabular-nums; }
.ybl-c.check { justify-content: center; height: 34px; } .ybl-c.check input { width: 20px; height: 20px; }
.ybl-c.calc { justify-content: flex-end; padding-right: 6px; }
.ybl-calc { font-size: 15.5px; font-weight: 800; font-variant-numeric: tabular-nums; } .ybl-calc.neg { color: var(--bad, #a92e25); }
.ybl-c.agent .sel { flex: 0 0 auto; width: 100px; } .ybl-agent-name { flex: 1; }
.ybl-x { grid-column: 2; grid-row: 1 / 3; align-self: center; border: 0; background: none; color: var(--faint, #8a9099); font-size: 15px; cursor: pointer; }
.ybl-x:hover { color: var(--bad, #a92e25); }
.ybl-gh > span:last-child { grid-column: 2; }

/* 월급 · 한 해 표 */
.ybl-table-wrap { overflow-x: auto; }
.ybl-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.ybl-table th { padding: 8px; border-bottom: 2px solid var(--ink, #111318); text-align: left; font-size: 13px; font-weight: 800; color: var(--ink2, #2e333b); white-space: nowrap; }
.ybl-table td { padding: 8px; border-bottom: 1px solid var(--line2, #eeeeeb); vertical-align: middle; }
.ybl-table .r { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .ybl-table .c { text-align: center; }
.ybl-table td b { font-weight: 800; }
.ybl-table tfoot td { border-top: 2px solid var(--ink, #111318); border-bottom: 0; font-weight: 800; background: var(--soft, #f1f1ee); }
.ybl-table .in { min-height: 34px; padding: 4px 8px; font-size: 14px; width: 100%; }
.ybl-table .in.won { text-align: right; font-weight: 800; min-width: 110px; }
.ybl-pay tr.dirty td:first-child { box-shadow: inset 3px 0 #c9a463; } .ybl-pay tr.err td:first-child { box-shadow: inset 3px 0 var(--bad, #a92e25); }
.ybl-net { font-size: 17px; }
.ybl-tax { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; white-space: nowrap; } .ybl-taxv { font-size: 12.5px; color: var(--mute, #5d636c); }
.ybl-carried { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 6px; background: var(--gold-soft, #f6f0e5); color: var(--warn, #8a5410); font-size: 11.5px; font-weight: 700; }
.ybl-deals summary { cursor: pointer; font-size: 12.5px; color: var(--blue, #1f4fa3); font-weight: 700; }
.ybl-deals ul { margin: 4px 0 0; padding-left: 16px; font-size: 12.5px; color: var(--ink2, #2e333b); }
.ybl-year tbody tr { cursor: pointer; } .ybl-year tbody tr:hover { background: var(--soft, #f1f1ee); } .ybl-year tr.on { background: var(--gold-soft, #f6f0e5); }
.ybl-year tr.future td { color: var(--faint, #8a9099); cursor: default; }
.ybl-year td.bar { width: 18%; } .ybl-year td.bar i { display: block; height: 10px; border-radius: 5px; background: var(--ink, #111318); }
.ybl-table .neg, .ybl-table .bad { color: var(--bad, #a92e25); }

html[data-mode="dark"] .ybl-tile.big { background: #eef0f3; border-color: #eef0f3; } html[data-mode="dark"] .ybl-tile.big b { color: #111318; } html[data-mode="dark"] .ybl-tile.big .l, html[data-mode="dark"] .ybl-tile.big small { color: #4d535c; }
html[data-mode="dark"] .ybl-year td.bar i { background: #eef0f3; }

/* 좁은 화면: 한 건이 카드 하나 (칸 이름을 위에) */
@media (max-width: 1180px) {
  .ybl-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ybl-tile.big { grid-column: span 2; }
  .ybl-gh { display: none; }
  .ybl-row { grid-template-columns: minmax(0, 1fr) 28px; border: 1px solid var(--line, #e3e3df); border-radius: 12px; margin-bottom: 8px; background: var(--card, #fff); }
  .ybl-l1, .ybl-l2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ybl-c { flex-direction: column; align-items: stretch; } .ybl-c::before { content: attr(data-l); font-size: 11.5px; font-weight: 700; color: var(--mute, #5d636c); }
  .ybl-c.check { height: auto; align-items: flex-start; } .ybl-c.calc { align-items: flex-end; }
  .ybl-x { grid-row: 1; align-self: start; }
}