:root {
  --bg: #f6f7f9;
  --panel: #fff;
  --ink: #16191d;
  --muted: #6b7280;
  --line: #e5e7eb;
  --brand: #1f6feb;
  --in: #0f7b4f;    /* 입금 */
  --out: #b42318;   /* 출금 */
  --warn: #b45309;
  --r: 10px;
  --shadow: 0 1px 2px rgba(16,25,40,.06), 0 1px 3px rgba(16,25,40,.04);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg); color: var(--ink); font-size: 15px; line-height: 1.55;
  font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", Pretendard,
    "Malgun Gothic", "Noto Sans KR", system-ui, sans-serif;
  -webkit-text-size-adjust: 100%;
}
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

/* 상단바 */
.topbar { background: var(--panel); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; }
.topbar .inner { max-width: 980px; margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; gap: 14px; }
.brand { font-weight: 700; color: var(--ink); white-space: nowrap; }
.brand span { color: var(--brand); }
.topnav { display: flex; gap: 2px; flex: 1; }
.topnav a { color: var(--muted); padding: 6px 12px; border-radius: 8px; font-size: 14px; white-space: nowrap; }
.topnav a:hover { background: var(--bg); text-decoration: none; }
.topnav a.on { background: var(--brand); color: #fff; }
.who { font-size: 13px; color: var(--muted); white-space: nowrap; }
main { max-width: 980px; margin: 0 auto; padding: 18px 16px 64px; }
h1 { font-size: 20px; margin: 0 0 14px; }
h2 { font-size: 15px; margin: 0 0 10px; }
.sub { color: var(--muted); font-size: 13px; margin: -8px 0 14px; }
.hint { font-size: 12px; color: var(--muted); }

.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); padding: 16px; margin-bottom: 14px; }

/* 통계 */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
.stat { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; box-shadow: var(--shadow); }
.stat .k { font-size: 12px; color: var(--muted); }
.stat .v { font-size: 20px; font-weight: 700; margin-top: 3px; letter-spacing: -.02em; }
.stat .n { font-size: 12px; color: var(--muted); margin-top: 2px; }
.v.in { color: var(--in); } .v.out { color: var(--out); } .neg { color: var(--out); }
.big { font-size: 26px; font-weight: 700; margin: 4px 0; }

/* 표 */
.tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { padding: 9px 10px; border-bottom: 1px solid var(--line); text-align: left; }
th { font-size: 12px; color: var(--muted); font-weight: 600; white-space: nowrap; background: #fbfcfd; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* 날짜와 버튼이 좁은 열에서 두 줄로 쪼개지지 않게 */
tbody td:first-child { white-space: nowrap; }
/* 표에서 빈 칸은 가운뎃점으로 표시 */
tbody td:empty::before { content: '·'; color: var(--line); }
td:last-child { white-space: nowrap; width: 1%; }
tbody tr:hover { background: #fafbfc; }
/* 방금 저장한 줄 */
tbody tr.saved, tbody tr.saved:hover { background: #f2fbf7; box-shadow: inset 3px 0 0 var(--in); }
tfoot td { font-weight: 700; border-top: 2px solid var(--line); background: #fbfcfd; }
.empty { text-align: center; color: var(--muted); padding: 30px 10px; }

/* 폼 */
.grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.field { display: flex; flex-direction: column; gap: 4px; }
.field > label { font-size: 12px; color: var(--muted); font-weight: 600; }
input, select, textarea, button { font: inherit; color: inherit; }
input[type=text], input[type=date], input[type=email], input[type=password], select, textarea {
  padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; width: 100%; min-height: 40px;
}
input:focus, select:focus, textarea:focus { outline: 2px solid rgba(31,111,235,.25); border-color: var(--brand); }
input.num { text-align: right; font-variant-numeric: tabular-nums; }
input.amount { font-size: 26px; height: 58px; font-weight: 600; }
textarea { min-height: 56px; resize: vertical; }

/* 선택 칩 */
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chips input { position: absolute; opacity: 0; width: 0; height: 0; }
.chips label {
  border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 9px 16px;
  font-size: 14px; cursor: pointer; user-select: none; min-height: 42px; display: inline-flex; align-items: center;
}
.chips input:checked + label { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; }
.chips input:focus-visible + label { outline: 2px solid rgba(31,111,235,.4); }
.chips input:checked + label.in  { background: var(--in);  border-color: var(--in); }
.chips input:checked + label.out { background: var(--out); border-color: var(--out); }
.chips label.cash { border-style: dashed; }
.chips input:checked + label.cash { background: var(--warn); border-color: var(--warn); }

/* 버튼 */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 16px;
  border-radius: 8px; border: 1px solid var(--line); background: #fff; cursor: pointer; font-size: 14px;
  min-height: 42px; white-space: nowrap; }
.btn:hover { background: var(--bg); text-decoration: none; }
.btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; }
.btn.primary:hover { background: #1a5fd0; }
.btn.danger { color: var(--buy); border-color: #f0c9c5; }
.btn.danger:hover { background: #fdf3f2; }
.btn.sm { padding: 4px 10px; min-height: 30px; font-size: 13px; }
.btn:disabled { opacity: .6; cursor: default; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 14px; }

/* 배지 */
.badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; border: 1px solid var(--line); background: #fff; white-space: nowrap; }
.edit-arrow { display: none; }
.badge.in  { color: var(--in);  border-color: #bfe3d2; background: #f2fbf7; }
.badge.out { color: var(--out); border-color: #f4cfcb; background: #fef6f5; }
.badge.invoice { color: #1f4b8f; border-color: #c9dcf7; background: #f3f8ff; }
.badge.nocash { color: var(--warn); border-color: #f2ddb8; background: #fffaf0; }
.badge.company { color: #374151; }
.badge.cash { color: var(--warn); border-color: #f2ddb8; background: #fffaf0; }

/* 알림 */
.alert { padding: 11px 14px; border-radius: 8px; margin-bottom: 14px; font-size: 14px; }
.alert.err { background: #fef6f5; border: 1px solid #f4cfcb; color: #8c1d17; }
.alert.ok { background: #f2fbf7; border: 1px solid #bfe3d2; color: #0b5c3b; }
.alert.info { background: #f3f8ff; border: 1px solid #c9dcf7; color: #17407e; }

.filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end; }
/* 넓은 화면에서는 접을 이유가 없다 — 제목을 숨기고 닫혀 있어도 펼쳐 둔다 */
@media (min-width: 681px) {
  details.filters-box > summary { display: none; }
}
/* 좁은 열에서 글자가 잘리지 않게 여백만 줄인다(폭은 브라우저가 정하게 둔다) */
table.txn th, table.txn td { padding-left: 7px; padding-right: 7px; }
table.txn .c-date { padding-left: 10px; }
.filters .field { min-width: 120px; }

/* 로그인 */
.login { max-width: 360px; margin: 10vh auto; padding: 0 16px; }
.login h1, .login .sub { text-align: center; }

/* 하단 탭바 — 모바일에서만 보인다 */
.tabbar { display: none; }

/* ══ 모바일 ══════════════════════════════════════════════ */
@media (max-width: 680px) {
  main { padding: 12px 12px 84px; }
  h1 { font-size: 18px; }
  .panel { padding: 13px; border-radius: 12px; }

  /* 상단은 제목만, 이동은 아래 탭바로 */
  .topbar .inner { padding: 10px 12px; }
  .topnav { display: none; }
  .who { margin-left: auto; font-size: 12px; }

  .tabbar {
    display: grid; grid-template-columns: repeat(4, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    background: var(--panel); border-top: 1px solid var(--line);
    padding-bottom: env(safe-area-inset-bottom, 0);
    box-shadow: 0 -1px 3px rgba(16,25,40,.05);
  }
  .tabbar a {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 9px 0 7px; font-size: 11px; color: var(--muted); text-decoration: none;
  }
  .tabbar a.on { color: var(--brand); font-weight: 600; }
  .tabbar a:hover { text-decoration: none; }

  /* ── 거래 내역: 표 대신 카드 ── */
  table.txn thead { display: none; }
  table.txn tbody tr {
    display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; row-gap: 4px;
    border: 1px solid var(--line); border-radius: 12px;
    padding: 11px 13px; margin-bottom: 8px; background: #fff;
  }
  table.txn tbody td { border: none; padding: 0; }
  table.txn tbody td::before { content: none; }
  .c-date   { order: 1; font-size: 12px; color: var(--muted); }
  .c-total  { order: 2; margin-left: auto; font-size: 18px; font-weight: 700; }
  .c-total.in  { color: var(--in); }
  .c-total.out { color: var(--out); }
  .c-party  { order: 3; width: 100%; font-weight: 600; font-size: 15px; }
  .c-desc   { order: 4; width: 100%; font-size: 13px; color: var(--muted); margin-top: -2px; }
  .c-kind   { order: 5; }
  .c-tax    { order: 6; }
  .c-pay    { order: 7; }
  .c-edit   { order: 8; margin-left: auto; }
  /* 카드 아무 데나 눌러도 수정으로 간다 */
  table.txn tbody tr { position: relative; }
  table.txn tbody .c-edit a { border: none; background: none; padding: 0 2px; min-height: 0; color: var(--muted); }
  table.txn tbody .c-edit a::after { content: ''; position: absolute; inset: 0; }
  .edit-text { display: none; }
  .edit-arrow { display: inline; font-size: 22px; line-height: 1; }
  /* 비어 있는 거래처·내용은 카드에서 빈 줄을 만들지 않게 */
  .c-party:empty, .c-desc:empty { display: none; }
  /* 좁은 화면에서 배지가 자리를 많이 먹지 않게 */
  .badge { padding: 2px 7px; font-size: 11px; }
  /* 공급가액·부가세는 카드에서 빼고 수정 화면에서 본다 */
  tbody .c-supply, tbody .c-vat { display: none; }

  /* ── 합계: 카드 한 장으로 ── */
  table.txn tfoot { display: block; }
  table.txn tfoot tr {
    display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; row-gap: 2px;
    border: 1px solid var(--line); border-radius: 12px; background: #fbfcfd;
    padding: 10px 13px; margin-bottom: 8px;
  }
  table.txn tfoot td { border: none; padding: 0; }
  .c-sumlabel { width: 100%; font-weight: 700; font-size: 14px; }
  table.txn tfoot .c-supply, table.txn tfoot .c-vat, table.txn tfoot .c-total {
    display: flex; gap: 4px; font-size: 13px; font-weight: 600;
  }
  table.txn tfoot td::before {
    content: attr(data-th); color: var(--muted); font-weight: 500; font-size: 12px;
  }
  table.txn tfoot .c-total { margin-left: auto; }
  table.txn tfoot .c-edit { display: none; }

  /* ── 그 밖의 표는 라벨:값 줄로 접는다 ── */
  table.stack thead { display: none; }
  table.stack tbody tr {
    display: block; border: 1px solid var(--line); border-radius: 12px;
    padding: 10px 13px; margin-bottom: 8px; background: #fff;
  }
  table.stack tbody td {
    display: flex; justify-content: space-between; gap: 12px;
    border: none; padding: 3px 0; text-align: right;
  }
  table.stack tbody td::before {
    content: attr(data-th); color: var(--muted); font-size: 12px; font-weight: 600; text-align: left;
  }
  table.stack tbody td.main {
    display: block; text-align: left; font-weight: 600;
    border-bottom: 1px solid var(--line); padding-bottom: 6px; margin-bottom: 6px;
  }
  table.stack tbody td.main::before { content: none; }
  table.stack tfoot tr { display: block; border-top: 2px solid var(--line); padding: 8px 13px; }
  table.stack tfoot td { display: flex; justify-content: space-between; border: none; padding: 2px 0; }
  table.stack tfoot td::before { content: attr(data-th); color: var(--muted); font-weight: 600; }
  table.stack tfoot td:empty { display: none; }

  /* ── 요약 카드는 2열 ── */
  .stats { grid-template-columns: 1fr 1fr; gap: 8px; }
  .stat { padding: 11px 12px; }
  .stat .v { font-size: 18px; }

  /* ── 필터는 접어 둔다 ── */
  details.filters-box > summary { cursor: pointer; padding: 4px 0; font-size: 14px; font-weight: 600; list-style: none; }
  details.filters-box > summary::-webkit-details-marker { display: none; }
  details.filters-box > summary::after { content: ' ▾'; color: var(--muted); }
  details.filters-box[open] > summary::after { content: ' ▴'; }
  .filters { flex-direction: column; align-items: stretch; margin-top: 10px; }
  .filters .field { min-width: 0; }
  .filters .btn { width: 100%; }

  /* ── 입력 폼 ── */
  /* 좁은 화면에서는 한 줄에 한 칸씩 — 날짜·거래처가 붙으면 누르기 어렵다 */
  .grid { grid-template-columns: 1fr; }
  input.amount { font-size: 24px; height: 54px; }
  .chips label { padding: 10px 14px; min-height: 44px; }
  .actions .btn { flex: 1; }
}

/* 아주 좁은 화면 */
@media (max-width: 380px) {
  .stats { grid-template-columns: 1fr; }
  .brand { font-size: 15px; }
}

@media print { .topbar, .actions, .filters { display: none; } body { background: #fff; } .panel { box-shadow: none; } }