/* 거래 메모에서 더한 것(공통 바탕은 base.css) */
.page.wide { max-width: 1480px; }
.row.end { justify-content: flex-end; } .row.tight { margin-top: 8px; gap: 6px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sel.wide { width: 100%; padding: 10px 32px 10px 12px; font-weight: 500; }
.inp.short { width: 220px; max-width: 100%; }
textarea { resize: vertical; }
.warn-t { color: #b46a00; font-style: normal; } .ok-t { color: var(--ok); }
button.chip { border: 0; } .chip.big.blue { background: var(--blue); color: #fff; }
.chip svg { margin-right: 2px; }
.seg-tabs.slim { margin: 12px 0; } .seg-tabs.slim button { padding: 6px; font-size: 13.5px; }
.sec-t small { font-weight: 500; margin-left: 6px; }
.avatar.s { width: 36px; height: 36px; border-radius: 12px; font-size: 15px; background: var(--blue-s); color: var(--blue-d); }
.avatar.card { background: var(--blue-s); color: var(--blue-d); } .avatar.transfer, .avatar.deposit { background: #eee9ff; color: #5a3fc4; }

/* 오늘 */
.hero { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 16px; text-align: left; background: linear-gradient(135deg, #2f7bff, #1c5fe0); color: #fff; border-radius: 22px; padding: 22px 26px; margin-bottom: 14px; box-shadow: 0 14px 34px rgba(47, 123, 255, 0.3); transition: 0.12s; flex-wrap: wrap; }
.hero:hover { transform: translateY(-2px); }
.hero.clear { background: linear-gradient(135deg, #17a673, #0d8a5d); box-shadow: 0 14px 34px rgba(23, 166, 115, 0.25); }
.hero-l { display: block; font-weight: 700; font-size: 15px; opacity: 0.92; }
.hero-v { display: block; font-size: 20px; font-weight: 700; } .hero-v b { font-size: 52px; letter-spacing: -0.04em; line-height: 1.1; margin-right: 4px; }
.hero-r { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; font-size: 14px; font-weight: 600; }
.hero-r span { display: inline-flex; align-items: center; gap: 5px; }
.hero-r .hot { background: rgba(255, 255, 255, 0.2); padding: 3px 10px; border-radius: 999px; }
.hero-go { margin-top: 4px; opacity: 0.9; }
.two.even { grid-template-columns: 1fr 1fr; }
.stage { grid-template-columns: 118px 1fr auto; } .stage-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stage.wait .stage-bar i { background: #f0a020; } .stage.wait .stage-n { color: #b46a00; }
.stage-v { min-width: 110px; }
.who-row { display: flex; align-items: center; gap: 12px; padding: 9px 8px; border-radius: 12px; text-align: left; width: 100%; }
.who-row:hover { background: var(--blue-ss); }
.who-n { flex: 1; display: grid; } .who-n small, .who-v small { font-size: 12.5px; }
.who-v { text-align: right; display: grid; } .who-v b { color: #b46a00; }
.txls { list-style: none; margin: 0; padding: 0; }
.txl { display: flex; align-items: center; gap: 12px; padding: 10px 8px; border-radius: 12px; cursor: pointer; }
.txl:hover { background: var(--blue-ss); }
.txl-i { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; background: var(--blue-s); color: var(--blue-d); flex: none; }
.txl-i.transfer, .txl-i.deposit { background: #eee9ff; color: #5a3fc4; }
.txl-m { flex: 1; min-width: 0; display: grid; } .txl-m b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.txl-a { text-align: right; display: grid; white-space: nowrap; } .txl-a small { color: #b46a00; font-weight: 600; }
.txls .empty { color: var(--mute); padding: 10px 8px; }
.feed li { cursor: pointer; border-radius: 8px; } .feed li:hover { background: var(--blue-ss); }
.feed-t { min-width: 0; } .feed-t em { font-style: normal; color: var(--sub); }
.feed-dot.pending { background: #f0a020; } .feed-dot.done { background: var(--ok); } .feed-dot.skip { background: #c3ccdb; } .feed-dot.dispute { background: #e8528a; }

/* 거래 장부 */
.tabs { display: flex; gap: 4px; border-bottom: 1.5px solid var(--line); margin-bottom: 12px; overflow-x: auto; }
.tabs button { padding: 9px 14px; font-weight: 700; color: var(--sub); border-bottom: 3px solid transparent; margin-bottom: -1.5px; white-space: nowrap; }
.tabs button.on { color: var(--blue-d); border-bottom-color: var(--blue); }
.sumbar { display: flex; gap: 18px; flex-wrap: wrap; font-size: 14px; color: var(--sub); margin: 0 4px 10px; } .sumbar b { color: var(--ink); font-size: 15px; } .sumbar .warn-t b { color: #b46a00; }
.toggle.on { background: var(--warn-s); border-color: #f0c56a; color: #7a5200; }
table.tbl td.amt { font-weight: 800; } table.tbl td.merchant { max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
table.tbl td.memo-c { max-width: 300px; overflow: hidden; text-overflow: ellipsis; } table.tbl td.wrap { white-space: normal; max-width: 260px; }
table.tbl tr.cancel td { color: var(--mute); } table.tbl tr.cancel td.amt { text-decoration: line-through; }
.src { display: inline-flex; align-items: center; gap: 6px; color: var(--sub); font-weight: 600; }
.has-ph { display: inline-flex; align-items: center; gap: 3px; color: var(--ok); font-weight: 700; }
table.people tbody tr { cursor: default; } table.people .acts { display: flex; gap: 6px; align-items: center; justify-content: flex-end; flex-wrap: wrap; white-space: normal; }

.drawer { width: min(500px, 100%); }
.amount { font-size: 34px; font-weight: 800; letter-spacing: -0.03em; margin: 16px 0 12px; } .amount.cancel { text-decoration: line-through; color: var(--mute); }
.drawer h3 small { font-weight: 600; margin-left: 4px; }
dl.info.boxed { background: var(--blue-ss); border-radius: 14px; padding: 12px 14px; margin-top: 12px; }
.d-photos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.d-ph { position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: var(--blue-ss); }
.d-ph a { display: block; width: 100%; height: 100%; } .d-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.d-ph .pdf { display: grid; place-items: center; height: 100%; font-weight: 800; color: var(--blue-d); }
.d-ph.add { border: 2px dashed #b9cdf0; background: #fff; color: var(--blue-d); display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 700; }
.ph-x { position: absolute; right: 4px; top: 4px; width: 22px; height: 22px; border-radius: 50%; background: rgba(23, 35, 61, 0.7); color: #fff; display: grid; place-items: center; }
.asks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.asks li { border: 1.5px solid var(--line); border-radius: 14px; padding: 11px 13px; }
.ask-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .ask-sub { color: var(--sub); font-size: 13px; margin-top: 3px; }
.pick-box { background: var(--blue-ss); border-radius: 14px; padding: 12px 14px; margin-top: 12px; }
.raw { background: #f6f8fc; border-radius: 12px; padding: 12px; font-size: 13px; white-space: pre-wrap; word-break: break-all; font-family: inherit; margin: 8px 0; color: var(--sub); }

/* 카드·계좌 */
.src-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; margin-bottom: 26px; }
.src-card { background: #fff; border-radius: var(--r); box-shadow: var(--shadow); padding: 16px 18px; display: grid; gap: 12px; }
.src-card.off { opacity: 0.55; }
.src-top { display: flex; align-items: center; gap: 12px; } .src-top b { display: block; font-size: 16.5px; letter-spacing: -0.02em; }
.src-top .avatar { width: 44px; height: 44px; border-radius: 14px; }
.src-who .lab { display: block; font-size: 12px; font-weight: 700; color: var(--mute); margin-bottom: 5px; }
.src-foot { display: flex; align-items: center; gap: 8px; border-top: 1px dashed var(--line); padding-top: 10px; }
.src-stat { display: grid; text-align: left; padding: 4px 10px; border-radius: 10px; } .src-stat:hover { background: var(--blue-ss); }
.src-stat b { font-size: 15px; } .src-stat.hot b { color: #b46a00; }
.src-foot .link { margin-left: auto; }

.switch { width: 42px; height: 25px; border-radius: 999px; background: #d5dcea; position: relative; transition: 0.15s; vertical-align: middle; flex: none; }
.switch i { position: absolute; left: 3px; top: 3px; width: 19px; height: 19px; border-radius: 50%; background: #fff; transition: 0.15s; box-shadow: 0 1px 3px rgba(23, 35, 61, 0.25); }
.switch.on { background: var(--blue); } .switch.on i { left: 20px; }

/* 설정 */
.steps.small { gap: 12px; margin: 10px 0 4px; } .steps.small li::before { width: 24px; height: 24px; font-size: 12.5px; } .steps.small li { padding-left: 34px; }
.steps code, .fine code { background: var(--blue-ss); padding: 1px 6px; border-radius: 6px; font-size: 12.5px; }
.rule-list { display: grid; gap: 14px; } .rule-list > div { display: grid; gap: 3px; } .rule-list span { color: var(--sub); font-size: 14px; line-height: 2.1; }
.num-in .inp { width: 84px; padding: 5px 9px; }
.copy code { user-select: all; }

@media (max-width: 1100px) { .two.even { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
  .hero { padding: 18px 20px; } .hero-v b { font-size: 42px; } .hero-r { align-items: flex-start; }
  .grid2 { grid-template-columns: 1fr; }
  table.tbl tbody tr { padding-left: 14px; }
  table.tbl td[data-l]:not([data-l='사용처'])::before { content: attr(data-l); display: inline-block; width: 82px; color: var(--mute); font-size: 12.5px; }
  table.tbl td.merchant, table.tbl td.memo-c { max-width: none; } table.tbl td.merchant b { font-size: 15.5px; }
  table.people .acts { justify-content: flex-start; margin-top: 6px; }
  .nav { padding: 6px 8px; }
  .d-photos { grid-template-columns: repeat(3, 1fr); }
  .stage { grid-template-columns: 92px 1fr auto; } .stage-v { min-width: 88px; }
}