/* ============================================================
   채움 가계부 — 공통 스타일
   셸: PC = 사이드바 216px + 상단바 56px / 모바일 = 하단 탭바
   tokens.css 뒤에 로드.
   ============================================================ */

html, body {
  margin: 0; padding: 0;
  background: var(--bg); color: var(--ink-1);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}
html { background: var(--bg); }
* { box-sizing: border-box; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }

/* ── 셸 ─────────────────────────────────────────────────── */
.shell { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar-w);
  position: fixed; top: 0; bottom: 0; left: 0; z-index: 50;
  background: var(--surface);
  border-right: 1px solid var(--line-1);
  padding: 18px 16px;
  display: flex; flex-direction: column;
}
.sidebar-logo { display: flex; align-items: center; gap: 11px; padding: 6px 10px 24px; }
.sidebar-logo .mark {
  width: 36px; height: 36px; border-radius: 11px;
  background: var(--brand); color: #FFFFFF;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 800; flex: none;
}
.sidebar-logo b { font-size: 16px; font-weight: 800; letter-spacing: -0.01em; color: var(--ink-1); }
.sidebar-nav { display: flex; flex-direction: column; gap: 3px; }
.sidebar-nav a {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 12px; border-radius: 10px;
  font-size: 13px; font-weight: 600; color: var(--ink-2);
}
.sidebar-nav a .ico { font-size: 15px; width: 22px; text-align: center; }
.sidebar-nav a:hover { background: var(--surface-sunken); color: var(--ink-1); }
.sidebar-nav a.active { background: var(--surface-sunken); color: var(--ink-1); font-weight: 700; }
.sidebar-short { margin-top: 28px; }
.sidebar-short .lbl { font-size: 13px; font-weight: 700; color: var(--ink-4); padding: 0 13px 8px; }
.sidebar-short a {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 13px; border-radius: 10px;
  font-size: 13px; font-weight: 600; color: var(--ink-2);
}
.sidebar-short a:hover { background: var(--surface-sunken); }
.sidebar-short .dot { width: 7px; height: 7px; border-radius: 999px; flex: none; }
.sidebar-foot { margin-top: auto; display: flex; flex-direction: column; gap: 12px; }
.sidebar-user {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 13px; background: var(--surface-sunken); border-radius: 13px;
}
.sidebar-user .avatar {
  width: 28px; height: 28px; border-radius: 999px; flex: none;
  background: var(--accent); color: var(--mint-5);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800;
}
.sidebar-user .name { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-user .sub { font-size: 11px; color: var(--accent); font-weight: 600; }
.btn-new-entry {
  height: 38px; background: var(--accent); border: none; border-radius: 11px;
  display: flex; align-items: center; justify-content: center; gap: 9px;
  font-size: 13px; font-weight: 700; color: var(--on-accent);
  cursor: pointer; text-decoration: none;
}
.btn-new-entry:hover { background: var(--accent-hover); color: var(--on-accent); }
.btn-new-entry .key { font-size: 13px; font-weight: 700; background: rgba(255,255,255,.2); border-radius: 6px; padding: 2px 8px; }

.main { flex: 1; min-width: 0; margin-left: var(--sidebar-w); display: flex; flex-direction: column; }

.topbar {
  height: var(--topnav-h);
  position: sticky; top: 0; z-index: 40;
  background: var(--surface);
  border-bottom: 1px solid var(--line-1);
  display: flex; align-items: center; gap: 16px;
  padding: 0 24px;
}
.topbar .title { font-size: 17px; font-weight: 700; }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.topbar .household { font-size: 13px; color: var(--ink-3); white-space: nowrap; }
.topbar-search {
  flex: 1; max-width: 420px; height: 40px;
  background: var(--surface-sunken); border: 1px solid var(--line-1); border-radius: 11px;
  display: flex; align-items: center; gap: 9px; padding: 0 15px;
}
.topbar-search input {
  flex: 1; border: none; outline: none; background: transparent;
  font-size: 13px; color: var(--ink-1); font-family: var(--font-sans);
}
.topbar-search input::placeholder { color: var(--ink-4); }
.topbar-search .kbd {
  font-size: 11px; font-weight: 700; color: var(--ink-4);
  border: 1px solid var(--line-1); border-radius: 5px; padding: 1px 6px;
}
.topbar-pill {
  height: 38px; padding: 0 16px; border: 1px solid var(--line-1); border-radius: 11px;
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 600; color: var(--ink-2); background: var(--surface-sunken);
  text-decoration: none;
}
.topbar-pill:hover { background: var(--line-soft); color: var(--ink-1); }

.icon-btn {
  width: 38px; height: 38px; border: 1px solid var(--line-1); border-radius: 999px;
  background: var(--surface); color: var(--ink-2); font-size: 15px;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.icon-btn:hover { background: var(--surface-sunken); }

/* ── 페이지 골격 ─────────────────────────────────────────── */
.page { max-width: var(--page-max); width: 100%; margin: 0 auto; padding: 0 var(--page-px) 60px; }
.breadcrumb {
  height: var(--breadcrumb-h); display: flex; align-items: center;
  font-size: 13px; color: var(--ink-3);
}
.breadcrumb .sep { margin: 0 6px; color: var(--ink-4); }
.breadcrumb b { color: var(--ink-1); }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; margin: 8px 0 18px; }
.page-head h1 { margin: 0; font-size: 24px; font-weight: 800; letter-spacing: -0.015em; }
.page-head .sub { font-size: 13px; color: var(--ink-3); margin-top: 5px; }
.page-actions { display: flex; gap: 8px; align-items: center; }

/* ── 버튼 ────────────────────────────────────────────────── */
.btn {
  height: var(--control-h); padding: 0 16px;
  border: 1px solid var(--line-1); border-radius: var(--r-1);
  background: var(--surface); color: var(--ink-1);
  font-size: 14px; font-weight: 600; font-family: var(--font-sans);
  cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  text-decoration: none;
}
.btn:hover { background: var(--surface-sunken); color: var(--ink-1); }
.btn-primary { border: none; background: var(--accent); color: var(--on-accent); font-weight: 500; }
.btn-primary:hover { background: var(--accent-hover); color: var(--on-accent); }
.btn-danger { border: 1px solid var(--stamp-line); background: var(--stamp-soft); color: var(--stamp); }
.btn-sm { height: var(--control-h-sm); padding: 0 12px; font-size: 13px; border-radius: 8px; }
.btn-block { width: 100%; justify-content: center; }
.btn:focus-visible, .input:focus-visible, .select:focus-visible { outline: none; box-shadow: var(--focus); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ── 폼 ──────────────────────────────────────────────────── */
.form-col { max-width: var(--form-col); }
.field { margin-bottom: var(--sp-4); }
.field label { display: block; font-size: 13px; font-weight: 700; color: var(--ink-2); margin-bottom: 6px; }
.field .hint { font-size: 13px; color: var(--ink-3); margin-top: 5px; }
.field .error { font-size: 13px; color: var(--danger); margin-top: 5px; }
.input, .select {
  width: 100%; height: var(--control-h); padding: 0 13px;
  border: 1px solid var(--line-2); border-radius: var(--r-1);
  background: var(--surface); color: var(--ink-1);
  font-size: 14px; font-family: var(--font-sans);
}
.input::placeholder { color: var(--ink-4); }
.input-row { display: flex; gap: 10px; }
.input-row > * { flex: 1; }
textarea.input { border-radius: 8px; }

/* ── 카드 ────────────────────────────────────────────────── */
.card {
  background: var(--surface); border: 1px solid var(--line-1);
  border-radius: var(--r-2); box-shadow: var(--shadow-1);
}
.card-pad { padding: var(--sp-5); }
.card-title { font-size: 14px; font-weight: 700; color: var(--ink-1); margin: 0 0 var(--sp-3); }

/* 스탯 카드 */
.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
.stat { padding: var(--sp-4) var(--sp-5); border-radius: var(--r-3); }
.stat .label { font-size: 13px; color: var(--ink-3); font-weight: 600; }
.stat .value { font-size: 24px; font-weight: 800; letter-spacing: -0.01em; margin-top: 6px; font-variant-numeric: tabular-nums; }
.stat .meta { font-size: 13px; color: var(--ink-3); margin-top: 5px; }
.stat .value.neg { color: var(--amount-neg); }
.stat .value.income { color: var(--amount-income); }
.stat .value.saving { color: var(--amount-saving); }

/* 히어로 카드 (딥 그린) */
.hero-card {
  background: var(--brand-deep); border-radius: var(--r-2);
  padding: 18px 22px; color: var(--mint-5);
}
.hero-card .label { font-size: 13px; font-weight: 600; color: var(--mint-2); }
.hero-card .value { font-size: 28px; font-weight: 800; letter-spacing: -0.015em; margin: 6px 0 0; }
.hero-card .meta { font-size: 13px; color: var(--mint-3); }

/* 진행 바 */
.meter { height: 8px; background: var(--line-soft); border-radius: 999px; overflow: hidden; }
.meter > div { height: 100%; background: var(--accent); border-radius: 999px; }

/* ── 뱃지 (7톤) ──────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  height: 22px; padding: 0 9px; border-radius: var(--r-pill);
  font-size: 12px; font-weight: 700; border: 1px solid transparent;
}
.badge.neutral  { background: var(--tone-neutral-bg);  color: var(--tone-neutral-fg);  border-color: var(--tone-neutral-bd); }
.badge.info     { background: var(--tone-info-bg);     color: var(--tone-info-fg);     border-color: var(--tone-info-bd); }
.badge.progress { background: var(--tone-progress-bg); color: var(--tone-progress-fg); border-color: var(--tone-progress-bd); }
.badge.pending  { background: var(--tone-pending-bg);  color: var(--tone-pending-fg);  border-color: var(--tone-pending-bd); }
.badge.danger   { background: var(--tone-danger-bg);   color: var(--tone-danger-fg);   border-color: var(--tone-danger-bd); }
.badge.done     { background: var(--tone-done-bg);     color: var(--tone-done-fg);     border-color: var(--tone-done-bd); }
.badge.special  { background: var(--tone-special-bg);  color: var(--tone-special-fg);  border-color: var(--tone-special-bd); }

/* ── 테이블 ──────────────────────────────────────────────── */
.ledger-wrap { background: var(--surface); border: 1px solid var(--line-1); border-radius: var(--r-3); overflow: hidden; box-shadow: var(--shadow-1); }
.ledger { width: 100%; border-collapse: collapse; font-size: var(--table-fs); }
.ledger thead tr { background: var(--surface-sunken); }
.ledger th {
  text-align: left; padding: 0 var(--cell-px); height: 40px;
  border-bottom: 1px solid var(--line-1);
  font-size: 13px; font-weight: 600; color: var(--ink-3);
}
.ledger td { padding: 0 var(--cell-px); height: var(--row-h); border-bottom: 1px solid var(--line-soft); }
.ledger tr:last-child td { border-bottom: none; }
.ledger .num { text-align: right; font-variant-numeric: tabular-nums; }
.ledger .num.neg { color: var(--amount-neg); }
.ledger .num.income { color: var(--amount-income); }
.ledger tbody tr:hover { background: var(--surface-sunken); }

/* ── 칩(필터·탭) ─────────────────────────────────────────── */
.chip-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.chip {
  height: 32px; padding: 0 14px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line-1);
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600; color: var(--ink-2);
  text-decoration: none; cursor: pointer;
}
.chip:hover { background: var(--surface-sunken); color: var(--ink-1); }
.chip.active { background: var(--brand-deep); border-color: var(--brand-deep); color: #FFFFFF; font-weight: 700; }
.chip .cnt { font-size: 12px; color: var(--ink-4); font-variant-numeric: tabular-nums; }
.chip.active .cnt { color: var(--mint-2); }

/* ── 빈 상태 ─────────────────────────────────────────────── */
.empty { padding: var(--sp-8) var(--sp-5); text-align: center; color: var(--ink-3); }
.empty .t { font-size: 15px; font-weight: 700; color: var(--ink-2); margin-bottom: 6px; }
.empty .d { font-size: 13px; line-height: 1.7; }

/* ── 게스트(인증) ────────────────────────────────────────── */
body.guest {
  min-width: 0;
  background:
    radial-gradient(640px 380px at 50% -80px, var(--mint-4) 0%, rgba(214,243,234,0) 70%),
    var(--bg);
}
.guest-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--sp-6); }
.guest-card { width: 100%; max-width: 400px; }
.guest-logo { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-bottom: 24px; text-align: center; }
.guest-logo .mark {
  width: 52px; height: 52px; border-radius: 15px; background: var(--brand-deep); color: var(--mint-2);
  display: inline-flex; align-items: center; justify-content: center; font-size: 21px; font-weight: 800;
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
}
.guest-logo b { font-size: 24px; font-weight: 800; letter-spacing: -0.01em; }
.guest-logo .tagline { font-size: 14px; color: var(--ink-3); margin-top: -4px; }
.auth-card {
  background: var(--surface); border: 1px solid var(--line-1); border-radius: 24px;
  padding: 28px 24px;
  box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 12px 32px rgba(0,0,0,.05);
}
.auth-card .field label { font-size: 14px; }
.input-lg { height: 48px; border-radius: 12px; font-size: 15px; padding: 0 15px; }
.btn-xl {
  width: 100%; height: 52px; border-radius: 14px;
  font-size: 16px; font-weight: 700; justify-content: center;
}
.auth-alt { text-align: center; font-size: 14px; color: var(--ink-3); margin-top: 18px; }
.auth-alt a { font-weight: 700; }
.sso-divider {
  display: flex; align-items: center; gap: 12px; margin: 18px 0 12px;
  font-size: 12px; color: var(--ink-4); font-weight: 600;
}
.sso-divider::before, .sso-divider::after { content: ''; flex: 1; height: 1px; background: var(--line-1); }
.sso-row { display: flex; gap: 8px; }
.sso-btn {
  flex: 1; height: 44px; border-radius: 12px; border: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 14px; font-weight: 700; font-family: var(--font-sans);
  opacity: .45; cursor: not-allowed;
}
.sso-btn.kakao { background: #FEE500; color: #191919; }
.sso-btn.naver { background: #03C75A; color: #FFFFFF; }

/* 알림 배너 */
.alert { padding: 11px 15px; border-radius: 12px; font-size: 13px; margin-bottom: var(--sp-4); }
.alert.ok { background: var(--ok-soft); color: var(--accent-down); border: 1px solid var(--accent-line); }
.alert.error { background: var(--danger-soft); color: var(--danger); border: 1px solid var(--stamp-line); }

/* ── 월 스위처 ───────────────────────────────────────────── */
.month-switch { display: inline-flex; align-items: center; gap: 8px; }
.month-switch .label { font-size: 15px; font-weight: 700; min-width: 92px; text-align: center; font-variant-numeric: tabular-nums; }
.month-switch .btn-sm { border-radius: 999px; width: 30px; padding: 0; justify-content: center; }

/* ── 서브바 (필터 칩 밴드, 목업 52px) ────────────────────── */
.subbar {
  min-height: 52px; background: var(--surface);
  border-bottom: 1px solid var(--line-1);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 9px var(--page-px);
}
.subbar .right { margin-left: auto; font-size: 13px; color: var(--ink-3); font-weight: 600; }

/* ── 예산 카드 (설정·홈 공용) ────────────────────────────── */
.budget-card { background: var(--surface); border: 1px solid var(--line-1); border-radius: 14px; padding: 12px 16px; }
.budget-card .head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.budget-card .dot { width: 8px; height: 8px; border-radius: 999px; flex: none; }
.budget-card .name { font-size: 13px; font-weight: 700; flex: 1; }
.budget-card .amt-pill {
  display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid var(--line-1); border-radius: 9px; padding: 4px 10px; background: var(--surface-sunken);
}
.budget-card .amt-pill input {
  border: none; outline: none; background: transparent; width: 90px; text-align: right;
  font-size: 13px; font-weight: 700; color: var(--ink-1); font-family: var(--font-sans);
  font-variant-numeric: tabular-nums; padding: 0;
}
.budget-card .bar { height: 6px; background: var(--line-soft); border-radius: 999px; overflow: hidden; margin-bottom: 4px; }
.budget-card .bar > div { height: 100%; border-radius: 999px; }
.budget-card .foot { display: flex; justify-content: space-between; font-size: 13px; font-variant-numeric: tabular-nums; }
.budget-card .foot .u { color: var(--ink-4); }
.budget-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }

/* ── 상단바 확장 (월 이동·요약) ──────────────────────────── */
.month-nav { display: flex; align-items: center; gap: 11px; }
.month-nav .nav-btn {
  width: 32px; height: 32px; border-radius: 999px; border: 1px solid var(--line-1);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; color: var(--ink-2); background: var(--surface); text-decoration: none;
}
.month-nav .nav-btn:hover { background: var(--surface-sunken); color: var(--ink-1); }
.month-nav .label { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.month-nav .today-pill {
  height: 32px; padding: 0 13px; border: 1px solid var(--line-1); border-radius: 999px;
  display: inline-flex; align-items: center; font-size: 13px; font-weight: 600;
  color: var(--ink-2); background: var(--surface-sunken); text-decoration: none;
}
.month-nav .today-pill:hover { background: var(--line-soft); color: var(--ink-1); }

/* ── 소형 세그먼트 (탑바용, 목업 분류 관리) ─────────────── */
.seg-sm { display: inline-flex; background: var(--line-soft); border-radius: 10px; padding: 3px; }
.seg-sm a {
  padding: 6px 16px; border-radius: 8px;
  font-size: 13px; font-weight: 600; color: var(--ink-3); text-decoration: none;
}
.seg-sm a.on { background: var(--surface); font-weight: 700; color: var(--ink-1); box-shadow: 0 1px 2px rgba(0,0,0,.08); }

/* ── 분류 관리 행 카드 ───────────────────────────────────── */
.cat-row {
  background: var(--surface); border: 1px solid var(--line-1); border-radius: 14px;
  padding: 11px 16px; display: flex; align-items: center; gap: 14px;
}
.cat-row .handle { color: var(--ink-4); font-size: 13px; letter-spacing: 1px; flex: none; cursor: default; }
.cat-row .name-wrap { display: flex; align-items: center; gap: 8px; width: 150px; flex: none; }
.cat-row .name-wrap .dot { width: 10px; height: 10px; border-radius: 999px; flex: none; }
.cat-row .name-wrap b { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cat-row .subs { flex: 1; display: flex; gap: 6px; flex-wrap: wrap; min-width: 0; align-items: center; }
.cat-row .cnt { font-size: 13px; color: var(--ink-4); flex: none; font-variant-numeric: tabular-nums; }
.sub-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 12px; background: var(--surface-sunken); border: 1px solid var(--line-soft);
  border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--ink-2);
}
.sub-chip.archived { opacity: .45; text-decoration: line-through; }
.sub-chip button {
  border: none; background: none; cursor: pointer; padding: 0;
  font-size: 11px; color: var(--ink-4); font-family: var(--font-sans);
}
.sub-chip button:hover { color: var(--danger); }
.sub-add {
  display: inline-flex; align-items: center;
  padding: 0; border: none; background: none;
}
.sub-add input {
  padding: 5px 12px; border: 1.5px dashed var(--ink-4); border-radius: 999px;
  font-size: 13px; font-weight: 600; color: var(--ink-2); background: transparent;
  width: 96px; outline: none; font-family: var(--font-sans);
}
.sub-add input:focus { border-color: var(--accent); border-style: solid; }
.sub-add input::placeholder { color: var(--ink-4); }

/* ── 설정 서브내비 (좌측 200px 레일, 목업 규격) ──────────── */
.settings-layout { display: flex; gap: 0; width: 100%; min-height: 100vh; }
.settings-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.settings-rail {
  width: 200px; flex: none; background: #f7f7f7;
  border-right: 1px solid var(--line-1);
  padding: 20px 14px; display: flex; flex-direction: column; gap: 2px;
}
html[data-theme="dark"] .settings-rail { background: var(--surface-sunken); }
.settings-rail .grp { font-size: 13px; font-weight: 700; color: var(--ink-4); padding: 12px 10px 5px; }
.settings-rail a {
  display: block; padding: 8px 10px; border-radius: 9px;
  font-size: 13px; font-weight: 600; color: var(--ink-2);
}
.settings-rail a:hover { background: #FFFFFF; color: var(--ink-1); }
.settings-rail a.active { background: #FFFFFF; color: var(--ink-1); font-weight: 700; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.settings-rail .soon { display: block; padding: 8px 10px; font-size: 13px; font-weight: 600; color: var(--ink-4); cursor: default; }
.settings-content { flex: 1; min-width: 0; padding: 16px 24px 60px; }
.topbar-sum { display: flex; gap: 14px; font-size: 13px; font-variant-numeric: tabular-nums; color: var(--ink-3); }
.topbar-sum b.inc { color: var(--amount-income); }
.topbar-sum b.exp { color: var(--amount-neg); }
.topbar-sum b.net { color: var(--ink-1); }

/* ── 대시보드 그리드 (12컬럼) ────────────────────────────── */
.dash-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px; }
.dash-grid .g3 { grid-column: span 3; } .dash-grid .g4 { grid-column: span 4; }
.dash-grid .g5 { grid-column: span 5; } .dash-grid .g6 { grid-column: span 6; }
.dash-grid .g12 { grid-column: span 12; }

/* 히어로 카드 내부 */
.hero-card .hero-bar { height: 10px; background: rgba(255,255,255,.16); border-radius: 999px; overflow: hidden; margin-top: 16px; }
.hero-card .hero-bar > div { height: 100%; background: var(--mint-1); border-radius: 999px; }
.hero-card .hero-sub { display: flex; justify-content: space-between; margin-top: 9px; font-size: 13px; color: var(--mint-3); }
.hero-card .hero-stats { margin-top: auto; display: flex; gap: 28px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.12); }
.hero-card .hero-stats .k { font-size: 13px; color: var(--mint-2); font-weight: 600; }
.hero-card .hero-stats .v { font-size: 15px; font-weight: 800; color: var(--mint-5); font-variant-numeric: tabular-nums; margin-top: 2px; }
.hero-card .hero-stats .v.up { color: var(--mint-1); }

/* 미니 스탯 (2×2) */
.mini-grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 14px; height: 100%; }
.mini-stat { background: var(--surface); border: 1px solid var(--line-1); border-radius: var(--r-3); padding: 14px 18px; display: flex; flex-direction: column; }
.mini-stat .k { font-size: 13px; color: var(--ink-3); font-weight: 600; }
.mini-stat .v { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; margin-top: 4px; }
.mini-stat .v.income { color: var(--amount-income); }
.mini-stat .v.neg { color: var(--amount-neg); }
.mini-stat .v.saving { color: var(--amount-saving); }
.mini-stat .m { font-size: 12px; font-weight: 700; color: var(--ink-3); margin-top: auto; }
.mini-stat .m.good { color: var(--accent); }

/* 바 리스트 (예산·TOP) */
.bar-row { margin-bottom: 13px; }
.bar-row .bar-head { display: flex; justify-content: space-between; margin-bottom: 4px; font-size: 13px; }
.bar-row .bar-head .n { font-weight: 600; color: var(--ink-2); }
.bar-row .bar-head .s { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.bar-row .bar { height: 7px; background: var(--line-soft); border-radius: 999px; overflow: hidden; }
.bar-row .bar > div { height: 100%; border-radius: 999px; background: var(--accent); }

/* 미니 막대 차트 */
.mini-bars { display: flex; align-items: flex-end; gap: 5px; height: 56px; margin-top: auto; }
.mini-bars > div { flex: 1; border-radius: 4px; background: var(--mint-3); min-height: 4px; }

/* 무지출 챌린지 */
.streak-bars { display: flex; gap: 5px; margin: 10px 0; }
.streak-bars > div { flex: 1; height: 8px; border-radius: 999px; background: var(--line-1); }
.streak-bars > div.on { background: var(--ok); }

/* 민트 인사이트/노트 카드 */
.mint-card { background: var(--accent-soft); border-radius: var(--r-2); padding: 14px 18px; }
.mint-card .t { font-size: 13px; font-weight: 700; color: var(--brand-deep); margin-bottom: 8px; }
html[data-theme="dark"] .mint-card .t { color: var(--mint-2); }

/* ── 거래 리스트 (일자 그룹) ─────────────────────────────── */
.tx-group-head { display: flex; justify-content: space-between; align-items: center; padding: 13px 0 7px; }
.tx-group-head .d { font-size: 15px; font-weight: 700; }
.tx-group-head .s { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.tx-row {
  display: flex; align-items: center; gap: 12px; padding: 10px 8px;
  border-top: 1px solid var(--line-soft); cursor: pointer;
  border-radius: 10px; margin: 0 -8px;
}
.tx-row:hover { background: var(--surface-sunken); }
.tx-ic {
  width: 36px; height: 36px; border-radius: 999px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800;
}
.tx-row .nm { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tx-row .mt { font-size: 13px; color: var(--ink-3); margin-top: 1px; }
.tx-amt { font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums; flex: none; }
.tx-amt.inc { color: var(--amount-income); }
.tx-amt.exp { color: var(--amount-neg); }
.tx-amt.sav { color: var(--amount-saving); }
.add-dashed {
  height: 44px; border: 1.5px dashed var(--ink-4); border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 600; color: var(--ink-3); text-decoration: none;
}
.add-dashed:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }

/* ── 캘린더 ──────────────────────────────────────────────── */
.ledger-panes { display: flex; gap: 20px; align-items: stretch; }
.cal-pane { width: 46%; flex: none; }
.list-pane { flex: 1; min-width: 0; }
.cal-head { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: 10px; }
.cal-head span { text-align: center; font-size: 13px; font-weight: 600; color: var(--ink-3); }
.cal-head span.sun { color: var(--amount-neg); }
.cal-head span.sat { color: var(--info); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); grid-auto-rows: minmax(58px, 1fr); gap: 4px; }
.cal-cell {
  border-radius: 12px; padding: 7px 8px; display: flex; flex-direction: column;
  color: inherit; text-decoration: none; border: 1px solid transparent;
}
.cal-cell:hover { background: var(--surface-sunken); }
.cal-cell .d { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.cal-cell.other .d { color: var(--ink-4); opacity: .6; }
.cal-cell.today { background: var(--accent-soft); border-color: var(--accent); }
.cal-cell.today .d { color: var(--accent); font-weight: 800; }
.cal-cell .amt { font-size: 11px; font-weight: 700; margin-top: auto; font-variant-numeric: tabular-nums; }
.cal-cell .amt.exp { color: var(--amount-neg); }
.cal-cell .amt.inc { color: var(--amount-income); }
.cal-legend { display: flex; gap: 14px; justify-content: center; margin-top: 12px; font-size: 13px; color: var(--ink-3); }
.cal-legend .dot { width: 7px; height: 7px; border-radius: 999px; display: inline-block; margin-right: 5px; }

/* ── 세그먼트 컨트롤 (입력 다이얼로그) ───────────────────── */
.seg { display: flex; background: var(--line-soft); border-radius: 12px; padding: 3px; }
.seg label {
  flex: 1; text-align: center; padding: 9px 0; border-radius: 9px;
  font-size: 13px; font-weight: 600; color: var(--ink-3); cursor: pointer;
}
.seg input { display: none; }
.seg label.on { background: var(--surface); font-weight: 700; box-shadow: 0 1px 2px rgba(0,0,0,.08); color: var(--ink-1); }
.seg label.on[data-type="income"] { color: var(--amount-income); }
.seg label.on[data-type="saving"] { color: var(--amount-saving); }
.seg label.on[data-type="fixed"], .seg label.on[data-type="variable"] { color: var(--amount-neg); }

/* 금액 포커스 박스 */
.amount-box {
  border: 1.5px solid var(--accent); border-radius: 14px; padding: 11px 16px;
  box-shadow: 0 0 0 3px var(--accent-line);
  display: flex; align-items: flex-end; gap: 10px;
}
.amount-box .inner { flex: 1; }
.amount-box .k { font-size: 13px; color: var(--accent); font-weight: 700; }
.amount-box input {
  border: none; outline: none; background: transparent; width: 100%;
  font-size: 24px; font-weight: 800; color: var(--ink-1);
  font-family: var(--font-sans); font-variant-numeric: tabular-nums; padding: 0; margin-top: 2px;
}
.amount-box select { width: 84px; height: 34px; border-radius: 9px; }

/* 모달 오버레이 (PC 새 입력 다이얼로그) */
.modal-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: var(--scrim);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.modal-card {
  width: 480px; max-width: 100%; max-height: 92vh; overflow-y: auto;
  background: var(--surface); border-radius: 24px;
  box-shadow: 0 24px 64px rgba(0,0,0,.28); padding: 24px;
}
.modal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.modal-head .t { font-size: 16px; font-weight: 700; }
.modal-head .esc { font-size: 13px; color: var(--ink-4); font-weight: 600; }
.modal-close {
  width: 30px; height: 30px; border-radius: 999px; border: none;
  background: var(--line-soft); color: var(--ink-2); font-size: 14px;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}


/* ── PC 전용 (모바일은 mobile.css 전용 페이지) ─────────────── */
.tabbar { display: none; }
body { min-width: 1280px; } /* PC 고정 레이아웃 — 좁은 창은 가로 스크롤 (모바일은 전용 페이지) */

/* 캘린더 날짜 앵커: sticky 탑바에 가리지 않도록 스크롤 여백 */
[id^="d-2"] { scroll-margin-top: calc(var(--topnav-h) + 20px); }
html { scroll-behavior: smooth; }

/* 홈: Wide(≥1440)=FHD 12컬럼 / Expanded(1024~1439)=축약 3컬럼 (목업 두 배치) */
/* 반응형 제거 — SCREENS 2-1 단일 1280 레이아웃 */
.home-wide { display: none !important; }
.home-compact { display: grid !important; }