/* misa 공통 UI 토큰 — 홈(파스텔 글래스) 제외 전 탭 공용. 2026-10-11 UX 개편(v330)에서 도입.
   규칙: 탭의 인라인 :root 는 탭 액센트(--acc, --me 등)만 선언하고, 아래 중립 토큰은 여기서만 관리한다.
   fonts.css 다음·탭 인라인 <style> 앞에 링크한다(인라인이 뒤에 오므로 탭별 예외는 인라인에서 덮어쓸 수 있다). */
:root {
  /* 텍스트 3단계 — 2·3단계 간격을 벌려 위계가 생기게 */
  --ink: #191f28;
  --ink2: #4e5968;
  --ink3: #8b95a1;
  /* 배경·표면 */
  --bg: #ffffff;
  --bg2: #ffffff;
  --bg3: #f2f4f6;
  --bg-soft: #f7f8fa;
  /* 헤어라인 */
  --line: #eef0f3;
  --line2: #e5e8eb;
  /* 의미색 (한국 관례: 상승·지출 경고=빨강, 하락·수입=파랑) */
  --good: #12b886;
  --warn: #f59e0b;
  --err: #f04452;
  --up: #f04452;
  --dn: #3182f6;
  --income: #3182f6;
  --expense: #191f28;
  --transfer: #8b95a1;
  --good-bg: #e6f8f1;
  --warn-bg: #fff4e0;
  --err-bg: #fdecee;
  --dn-bg: #e8f1fe;
  /* 둥글기 4단계만 */
  --r: 16px;
  --r2: 12px;
  --r3: 8px;
  --pill: 999px;
  /* 그림자 3단계만 (카드는 보통 헤어라인만, 떠 있는 요소만 그림자) */
  --sh1: 0 1px 3px rgba(17, 24, 39, .06);
  --sh2: 0 6px 20px rgba(17, 24, 39, .08);
  --sh3: 0 16px 48px rgba(17, 24, 39, .18);
  /* 글자 크기 단계 (11px 미만 금지) */
  --fs-xs: 11px;
  --fs-sm: 12px;
  --fs-md: 13px;
  --fs-body: 15px;
  --fs-lg: 17px;
  --fs-xl: 20px;
  --fs-2xl: 24px;
  --fs-hero: 30px;
  /* 간격 4px 배수 */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
}

html { -webkit-text-size-adjust: 100%; }
body { -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font-family: inherit; }
.num, .tabular { font-variant-numeric: tabular-nums; }

/* 섹션 제목: 15px/800 검정 + 오른쪽 보조(개수 등) */
.sec-hd { display: flex; justify-content: space-between; align-items: baseline; margin: 20px 4px 8px; font-size: var(--fs-body); font-weight: 800; letter-spacing: -.3px; color: var(--ink); }
.sec-hd small { font-size: var(--fs-sm); font-weight: 700; color: var(--ink3); }

/* 로딩 스켈레톤 */
.ui-skeleton { position: relative; overflow: hidden; background: var(--bg3); border-radius: var(--r2); min-height: 72px; }
.ui-skeleton + .ui-skeleton { margin-top: 10px; }
.ui-skeleton::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .75), transparent); animation: ui-sk 1.2s infinite; }
@keyframes ui-sk { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* 빈 상태 */
.ui-empty { padding: 48px 20px; text-align: center; color: var(--ink2); font-size: 14px; line-height: 1.6; }
.ui-empty .ui-empty-ico { font-size: 40px; opacity: .85; margin-bottom: 12px; }
.ui-empty b { display: block; font-size: var(--fs-lg); color: var(--ink); margin-bottom: 4px; }

/* 키보드 포커스 */
:where(button, a, [role=button], [tabindex]):focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* 헤더 ← ⌂ 쌍 — 5탭 공통 정본 (11/1 통합). 탭 인라인 <style>이 뒤에 오므로 탭별 예외는 인라인에서 덮어쓴다
   이력: v312 40% 축소·← ⌂ 사이 4px / v314 보이는 크기 유지·터치영역만 43px 확장(오탭 방지) / v317 히트영역 겹침 제거(버튼 사이 2px, 상하만 확장) / v318 ←·⌂ 둘 다 button으로 통일(링크 프리뷰·과대 하이라이트 제거) */
.back-btn { display: inline-flex; align-items: center; justify-content: center; width: 23px; height: 23px; border-radius: 7px; position: relative; background: var(--bg2); border: 1px solid var(--line); color: var(--ink); font-size: 11px; text-decoration: none; padding: 0; flex-shrink: 0; cursor: pointer; }
.nav-pair { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; }
.nav-pair .back-btn { -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; }
.nav-pair .back-btn:active { background: var(--line); }
.nav-pair .back-btn::after { content: ''; position: absolute; top: -11px; bottom: -11px; left: -2px; right: -2px; }
.nav-pair > :first-child::after { left: -12px; }
.nav-pair > :last-child::after { right: -12px; }
/* 토스트 공통 기본 — 탭은 bottom·padding만 덮어쓴다 */
.toast { position: fixed; left: 50%; transform: translateX(-50%) translateY(8px); background: var(--ink); color: #fff; border-radius: var(--r2); font-size: 13px; font-weight: 700; opacity: 0; pointer-events: none; transition: opacity .22s, transform .22s; z-index: 500; }
.toast.on { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }