@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=Noto+Sans+KR:wght@300;400;500;600;700;800;900&display=swap');
/* APLY 재무툴 · 몬스토리 포멀 테마 (teal #228b86 + navy #1c304a + 슬레이트) */
:root {
  --bg: #f0f4f9;
  --card: #ffffff;
  --line: #dce3ec;
  --ink: #0f172a;
  --muted: #3d5470;
  --brand: #228b86;      /* teal (주 브랜드) */
  --brand-d: #1a706b;    /* teal 진한 */
  --brand-soft: #e7f2f0; /* teal 연한 배경 */
  --navy: #1c304a;       /* 강조·헤딩 */
  --out: #dc2626;        /* 출금 */
  --in:  #16a34a;        /* 입금 */
  --accent: #b45309;     /* 골드 (주의·초안 텍스트) */
  --accent-soft: #fbf1e3;/* 골드 연한 배경 */
  --paper: #ffffff;
  --faint: #7c93af;
  --flag: #dc2626;
  --flag-soft: #fdecec;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --shadow-sm: 0 1px 2px rgba(28,48,74,.05), 0 2px 8px rgba(28,48,74,.05);
  --shadow-md: 0 10px 34px rgba(28,48,74,.13);
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: "Noto Sans KR", -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  background:
    radial-gradient(ellipse 60% 50% at 6% 0%, rgba(34,139,134,.06), transparent 60%),
    radial-gradient(ellipse 52% 46% at 100% 100%, rgba(28,48,74,.045), transparent 60%),
    var(--bg);
  background-attachment: fixed;
  color: var(--ink);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ── 상단바 ─────────────────────────────── */
.topbar {
  background: rgba(255,255,255,.86);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--line);
  padding: 13px 26px;
  display: flex; align-items: center; gap: 16px;
  box-shadow: 0 1px 0 rgba(28,48,74,.04), 0 4px 18px rgba(28,48,74,.05);
  position: sticky; top: 0; z-index: 30;
}
.topbar h1 {
  margin: 0; font-size: 21px; font-weight: 700; letter-spacing: .01em;
  font-family: 'DM Serif Display', 'Noto Sans KR', serif; color: var(--navy);
}
.topbar h1 .sub, .topbar .sub {
  font-family: "Noto Sans KR", sans-serif; font-size: 13px; font-weight: 500;
  color: var(--muted); margin-left: 10px; letter-spacing: 0;
}
.topnav { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.navlink {
  font-size: 13px; padding: 8px 14px; border-radius: 8px; text-decoration: none;
  color: var(--muted); border: 1px solid transparent; background: none; cursor: pointer;
  font: inherit; font-weight: 500; transition: background .15s, color .15s;
}
.navlink:hover { background: rgba(28,48,74,.06); color: var(--navy); }
.navlink.active { background: var(--brand-soft); color: var(--brand-d); font-weight: 700; }
.navlink.logout { color: var(--muted); border: 1px solid var(--line); }
.navlink.logout:hover { color: var(--out); border-color: rgba(220,38,38,.4); background: none; }
.orgtag { font-size: 12px; color: var(--muted); padding: 4px 10px; background: var(--brand-soft); border-radius: 999px; white-space: nowrap; max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
main { max-width: 1200px; margin: 0 auto; padding: 26px 24px 64px; }

/* ── 업로드 ─────────────────────────────── */
.dropzone {
  background: var(--card); border: 1.5px dashed #c3d0de; border-radius: 14px;
  padding: 34px; text-align: center; transition: border-color .15s, background .15s;
  box-shadow: var(--shadow-sm);
}
.dropzone.drag { border-color: var(--brand); background: var(--brand-soft); }
.dz-title { margin: 0 0 12px; font-size: 15px; font-weight: 600; }
.dz-hint { margin: 12px 0 0; font-size: 12px; color: var(--muted); }

/* ── 버튼 ───────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: linear-gradient(135deg, var(--brand), var(--brand-d)); color: #fff;
  padding: 9px 18px; border: 0; border-radius: 9px; cursor: pointer; font-weight: 600;
  font-family: inherit; font-size: 13px; text-decoration: none;
  transition: filter .15s, box-shadow .15s; box-shadow: 0 1px 3px rgba(26,112,107,.25);
}
.btn:hover { filter: brightness(1.05); box-shadow: 0 3px 12px rgba(26,112,107,.3); }
.btn-sm { padding: 6px 12px; font-size: 12px; }
.btn-ghost { background: #fff; color: var(--muted); border: 1px solid var(--line); box-shadow: none; }
.btn-ghost:hover { background: #f4f7fa; filter: none; border-color: #c3d0de; }

.hidden { display: none !important; }

/* ── 요약 카드 ──────────────────────────── */
.summary { display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0; }
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 15px 17px; min-width: 200px; flex: 1; box-shadow: var(--shadow-sm);
}
.card .bank { font-weight: 700; font-size: 14px; color: var(--navy); display: flex; align-items: center; }
.card .acct { font-size: 12px; color: var(--muted); margin: 2px 0 10px; }
.card .kv { display: flex; justify-content: space-between; font-size: 13px; padding: 2px 0; }
.card .kv .out { color: var(--out); font-variant-numeric: tabular-nums; }
.card .kv .in { color: var(--in); font-variant-numeric: tabular-nums; }
.card.total { background: linear-gradient(135deg, #ffffff, var(--brand-soft)); border-color: #bfe0dc; }
.card.bankcard { cursor: pointer; transition: border-color .12s, box-shadow .12s, transform .12s; }
.card.bankcard:hover { border-color: var(--brand); box-shadow: 0 5px 16px rgba(34,139,134,.16); transform: translateY(-1px); }
.sum-back { flex-basis: 100%; text-align: left; background: none; border: 0; color: var(--brand-d); font-size: 13px; font-weight: 600; cursor: pointer; padding: 2px 0 4px; font-family: inherit; }
.sum-back:hover { text-decoration: underline; }

/* ── 표 ─────────────────────────────────── */
.table-wrap { background: var(--card); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-sm); }
.table-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 14px 16px 0; }
.table-filters select { font-size: 13px; padding: 8px 11px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); color: var(--ink); max-width: 240px; font-family: inherit; }
.table-toolbar { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.table-toolbar input[type=search] { flex: 1; max-width: 320px; padding: 8px 11px; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; font-family: inherit; }
.table-toolbar input[type=search]:focus { outline: 2px solid var(--brand-soft); border-color: var(--brand); }
.rowcount { font-size: 12px; color: var(--muted); }
.table-scroll { overflow-x: auto; max-height: 70vh; }
table { border-collapse: collapse; width: 100%; font-size: 13px; }
thead th {
  position: sticky; top: 0; background: #f4f7fa; text-align: left;
  padding: 10px 12px; border-bottom: 1px solid var(--line); white-space: nowrap;
  font-weight: 700; color: var(--muted); font-size: 12px; letter-spacing: .02em; z-index: 1;
}
th.num, td.num { text-align: right; font-variant-numeric: tabular-nums; }
tbody td { padding: 8px 12px; border-bottom: 1px solid #eef2f6; white-space: nowrap; }
tbody tr:hover { background: #f6faf9; }
td.out { color: var(--out); font-variant-numeric: tabular-nums; }
td.in { color: var(--in); font-variant-numeric: tabular-nums; }
td.desc { white-space: normal; max-width: 260px; }
.tag { display: inline-block; padding: 1px 8px; border-radius: 999px; background: #eef1f4; font-size: 12px; color: #47525f; }
.draft { font-size: 9px; color: var(--accent); background: var(--accent-soft); border-radius: 6px; padding: 1px 5px; margin-left: 5px; vertical-align: middle; font-weight: 700; }
.bankpill { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 12px; background: var(--brand-soft); color: var(--brand-d); font-weight: 600; }

.btn-sm.btn-ghost { }
.badge-warn { background: var(--flag-soft); color: var(--out); border: 1px solid #f3c9c9; border-radius: 8px; padding: 3px 10px; font-size: 12px; font-weight: 600; }
.table-toolbar .rowcount { margin-left: auto; }
.export-label { font-size: 12px; color: var(--muted); }

td.acct select { font-size: 12px; padding: 5px 7px; border: 1px solid var(--line); border-radius: 6px; max-width: 220px; background: #fff; font-family: inherit; }
tr.unclassified { background: #fff7f4; }
tr.unclassified:hover { background: #fff0ea; }
td.acct .note { display: block; font-size: 10px; color: var(--accent); margin-top: 2px; max-width: 220px; white-space: normal; }
td.acct { width: 200px; white-space: normal; }
.note-dot { color: var(--faint); font-size: 11px; margin-left: 3px; cursor: help; vertical-align: middle; }
.conf { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 5px; vertical-align: middle; }
.conf.high { background: var(--in); }
.conf.medium { background: #d99a1c; }
.conf.low { background: #d08770; }
.conf.user { background: var(--brand); }
.conf.learned { background: #6fc0b8; }
.conf.none { background: #c4ccd4; }

td.recur select { font-size: 12px; padding: 5px 7px; border: 1px solid var(--line); border-radius: 6px; background: #fff; font-family: inherit; }
td.recur .na { color: #c4ccd4; }

.split-btn { margin-left: 4px; color: var(--muted); }
.split-sum { font-size: 12px; }
.split-info { font-size: 13px; color: var(--muted); margin: 6px 0 12px; }
.split-info b { color: var(--ink); font-family: var(--mono); }
.split-modes { display: flex; gap: 8px; margin-bottom: 12px; }
.split-modes .btn { background: #fff; color: var(--muted); border: 1px solid var(--line); box-shadow: none; }
.split-modes .btn.active { background: var(--brand-soft); color: var(--brand-d); border-color: #bfe0dc; font-weight: 700; }
.part-row { display: grid; grid-template-columns: 1.3fr .9fr 1fr auto; gap: 8px; margin-bottom: 8px; align-items: center; }
.part-row select, .part-row input { font-size: 12px; padding: 8px; border: 1px solid var(--line); border-radius: 7px; background: var(--paper); color: var(--ink); width: 100%; font-family: inherit; }
.part-row select:focus, .part-row input:focus { outline: 2px solid var(--brand-soft); border-color: var(--brand); }
.part-row .x { background: var(--flag-soft); color: var(--flag); border: 0; border-radius: 7px; padding: 8px 11px; cursor: pointer; font-weight: 700; }

.acct-edit { margin-left: 6px; border: 0; background: none; color: var(--faint); cursor: pointer; font-size: 13px; padding: 0 3px; border-radius: 5px; }
.acct-edit:hover { color: var(--brand); background: var(--brand-soft); }

/* ── 모달 ───────────────────────────────── */
.tmodal-bg { position: fixed; inset: 0; background: rgba(15,23,42,.5); backdrop-filter: blur(2px); display: flex; align-items: flex-start; justify-content: center; padding: 44px 16px; overflow: auto; z-index: 40; }
.tmodal { background: var(--card); border-radius: 16px; max-width: 760px; width: 100%; padding: 24px 26px; border: 1px solid var(--line); box-shadow: var(--shadow-md); }
.tmodal-head { display: flex; align-items: center; }
.tmodal-head h2 { margin: 0; font-size: 18px; color: var(--navy); }
.tclose { margin-left: auto; background: none; border: 0; font-size: 24px; line-height: 1; cursor: pointer; color: var(--muted); }
.tclose:hover { color: var(--ink); }
.tmodal-lead { color: var(--muted); font-size: 13px; margin: 6px 0 16px; }
.tmodal .field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 10px; }
.tmodal .field label { font-size: 12px; font-weight: 600; color: var(--muted); }
.tmodal .field input, .tmodal .field textarea, .tmodal .field select { font-family: inherit; font-size: 13px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); color: var(--ink); width: 100%; box-sizing: border-box; }
.tmodal .field input:focus, .tmodal .field textarea:focus, .tmodal .field select:focus { outline: 2px solid var(--brand-soft); border-color: var(--brand); }
.tmodal .modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.rowsel, #selAll { width: 15px; height: 15px; cursor: pointer; accent-color: var(--brand); }
#txTable td:first-child, #txTable th:first-child { text-align: center; width: 34px; }
#txTable.hide-bank .col-bank { display: none; }

.empty { text-align: center; color: var(--muted); padding: 48px; }

/* ── 내부이동 배너 ──────────────────────── */
.transfer-banner {
  display: flex; align-items: center; gap: 12px; margin: 16px 0 0;
  background: var(--accent-soft); border: 1px solid #eccfa4; color: #8a5a17;
  border-radius: 10px; padding: 12px 16px; font-size: 13px;
}
.transfer-banner b { color: #6e470f; }
.transfer-banner .btn { margin-left: auto; }
tr.transfer-row { background: #fbf6ed; }
tr.transfer-row:hover { background: #f6efe0; }
.tag-transfer { display: inline-block; padding: 1px 8px; border-radius: 999px; background: #f7ead0; color: #8a5a17; font-size: 12px; }
.unlink { margin-left: 6px; background: none; border: 0; color: var(--brand-d); font-size: 11px; cursor: pointer; text-decoration: underline; }

.tpair { display: grid; grid-template-columns: 1fr auto 1fr auto; gap: 12px; align-items: center; border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; }
.tpair .leg { font-size: 13px; }
.tpair .leg .b { font-weight: 700; }
.tpair .leg .m { color: var(--muted); font-size: 12px; }
.tpair .amt { font-family: var(--mono); font-weight: 700; font-variant-numeric: tabular-nums; }
.tpair .arrow { color: var(--muted); font-size: 18px; text-align: center; }
.tpair .acts { display: flex; flex-direction: column; gap: 6px; }
.tpair .acts .btn { padding: 6px 12px; font-size: 12px; }
.tpair .no { background: #fff; color: var(--muted); border: 1px solid var(--line); box-shadow: none; }
.tpair.done { opacity: .55; }
.tempty { color: var(--muted); font-size: 13px; padding: 16px; text-align: center; }
@media (max-width: 640px) { .tpair { grid-template-columns: 1fr; } }

/* ── 계정과목 2단계 선택기 ──────────────── */
.acct-btn { font-size: 12px; padding: 5px 11px; border: 1px solid var(--line); border-radius: 8px; background: #fff; cursor: pointer; font-family: inherit; max-width: 172px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: middle; transition: border-color .12s, background .12s; }
.acct-btn.unset { color: var(--brand-d); border-color: #bfe0dc; background: var(--brand-soft); font-weight: 600; }
.acct-btn.set:hover { border-color: var(--brand); }
.review-badge { display: inline-block; margin-left: 6px; font-size: 10px; color: var(--accent); background: var(--accent-soft); border-radius: 6px; padding: 1px 6px; }
.tmodal.picker { max-width: 560px; }
.cat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cat-btn { display: flex; flex-direction: column; gap: 3px; text-align: left; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: #fff; cursor: pointer; font-family: inherit; transition: border-color .12s, background .12s, transform .12s; }
.cat-btn:hover { border-color: var(--brand); background: var(--brand-soft); transform: translateY(-1px); }
.cat-btn b { font-size: 15px; color: var(--navy); }
.cat-btn span { font-size: 12px; color: var(--muted); }
.back-btn { background: none; border: 0; color: var(--brand-d); font-size: 13px; font-weight: 600; cursor: pointer; padding: 4px 0; margin-bottom: 10px; font-family: inherit; }
.item-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.item-btn { font-size: 13px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 8px; background: #fff; cursor: pointer; font-family: inherit; transition: border-color .12s, background .12s; }
.item-btn:hover { border-color: var(--brand); background: var(--brand-soft); }
.item-btn.other { margin-top: 14px; width: 100%; color: var(--muted); border-style: dashed; }
.sub-group { margin-bottom: 14px; }
.sub-label { font-size: 12px; font-weight: 700; color: var(--muted); margin-bottom: 7px; letter-spacing: .02em; }
@media (max-width: 560px) { .cat-grid { grid-template-columns: 1fr; } }
.guide { background: var(--brand-soft); border: 1px solid #cfe6e3; border-radius: 10px; padding: 11px 13px; font-size: 13px; line-height: 1.5; margin-bottom: 12px; }
.guide.sm { font-size: 12px; padding: 8px 11px; }
.confirm-acct { font-size: 14px; margin: 4px 0 12px; }
.chk { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; margin: 6px 0 14px; cursor: pointer; }
.chk input { width: auto; margin-top: 2px; accent-color: var(--brand); }
.confirm-btn { width: 100%; margin-top: 6px; justify-content: center; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
@media (max-width: 480px) { .grid2 { grid-template-columns: 1fr; } }
.ev-badge { display: inline-block; margin-left: 6px; font-size: 10px; color: #1f7a4d; background: #e4f2ed; border-radius: 6px; padding: 1px 6px; }
.memo-badge { display: inline-block; margin-left: 4px; font-size: 10px; color: #5c6a64; background: #eef1f4; border-radius: 6px; padding: 1px 6px; }
.group-chip { display: inline-block; margin-left: 4px; font-size: 10px; color: var(--accent); background: var(--accent-soft); border-radius: 6px; padding: 1px 6px; cursor: pointer; }
.group-chip:hover { filter: brightness(0.97); text-decoration: underline; }
.vat-line { font-size: 11px; color: var(--muted); margin-top: 3px; font-variant-numeric: tabular-nums; }
.est { display: inline-block; font-size: 10px; color: var(--accent); background: var(--accent-soft); border-radius: 5px; padding: 0 5px; font-weight: 700; }
.card.vat { background: linear-gradient(135deg, #ffffff, var(--accent-soft)); border-color: #eccfa4; }