/* 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; }