/* SFiT 공유 디자인 토큰 + 앱바 — **원본은 여기 하나**(shared/static/theme.css).
   각 앱의 static/shared/theme.css 는 deploy.py build 가 만드는 빌드 사본(git 제외)이다 — 거기를 고치지 말 것.
   (7131 통합/2026-09-04, docs/UNIFIED-7131.md §2.5)
   두 앱(ledger·plan)은 이미 같은 토큰 이름을 쓴다 → 여기서 :root 를 덧씌우면 구조 변경 없이 두 앱이 같은 결로
   바뀐다. ⚠ 앱 고유 accent(장부 red / 계획 teal)는 **여기서 정하지 않는다** — 성격 구분은 색 하나로 남긴다.
   로드 순서: 각 앱 자기 CSS 다음에 이 파일 → 같은 특정도(:root)면 뒤가 이긴다. */
:root {
    --bg: #f4f6f9;
    --card: #ffffff;
    --border: #e3e7ee;
    --text: #1b1f27;
    --text-sub: #667085;
    --primary: #3f4b5b;
    --primary-hover: #2c3644;
    --radius: 8px;
    --shadow-sm: 0 1px 2px rgba(16, 24, 40, .06);
    --shadow-md: 0 4px 14px rgba(16, 24, 40, .10);
    --font: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Malgun Gothic', sans-serif;
    /* 앱바 */
    --appbar-h: 36px;
    --appbar-bg: #1e293b;
    --appbar-fg: #cbd5e1;
    --appbar-fg-strong: #f8fafc;
    --appbar-line: rgba(255, 255, 255, .08);
    /* 앱 식별색(앱바 점·홈 카드 리본에만 사용, 앱 본문 accent 는 각 앱 CSS 소유) */
    --app-bank: #dc2626;
    --app-plan: #0f766e;
    --app-hub: #64748b;
}
body { font-family: var(--font); background: linear-gradient(180deg, #f7f8fb 0%, #f1f4f8 100%) fixed; }
/* 폼 컨트롤은 UA 기본 폰트를 따로 가진다 — 앱 폰트를 물려준다(두 앱 공통 결) */
button, input, select, textarea { font-family: inherit; }

/* ══════════════════════════════════════════════════════════════════════════
   공통 컴포넌트 레이어 (7131 통합 디자인, docs/UNIFIED-7131.md §2.5 지시분 / 2026-09-04)
   목표: 레이아웃(폭·표 열폭·고정폭 보고서·인쇄)은 절대 안 흔들고 톤(색·radius·그림자·전환)만 맞춘다.
   ⚠ 아래 어떤 규칙도 width/height/padding/margin/font-size/display/position 를 컨테이너·표·셀에 새로
   지정하지 않는다(명시적으로 허용된 곳만 예외 — 탭 패딩·h1/서브 글자크기·배지 padding, 아래 각 항목에 표시).
   ⚠ 인쇄·고정폭 보고서 제외 — 아래 선택자들은 `.rpt`/`#repTable`/`.daily-form`/`.ledger-page-wrap` 과
   구조적으로 겹치지 않는 클래스만 골라 썼다(그 넷은 각자 자기 selector 로만 스타일된다 — 표로 확인 후 작성,
   덮어쓰는 선택자 자체가 그 표들 DOM에 존재하지 않는다). `input,select,textarea` 처럼 전역에 걸리는 것은
   `.rpt input`(0,1,1) 등 각 보고서 자신의 선택자가 이 파일의 element-only 선택자(0,0,1)보다 항상 더
   특정도가 높아 자동으로 이긴다 — 그 표들은 원래 자기 값을 그대로 유지한다. */

/* 1) 배경은 본문 전체(body, 위에서 처리) */

/* 2) 헤더 — 카드 배경 유지, 하단 라인만 앱 accent(없으면 primary)로, 그림자 추가.
      h1/서브 글자크기는 명시 허용 예외. 로고 radius 만 8px 로. */
.header { border-bottom: 2px solid var(--accent, var(--primary)); box-shadow: var(--shadow-sm); }
.header h1 { font-size: 20px; letter-spacing: -0.4px; }
.header-sub { font-size: 11.5px; }
.header-logo { border-radius: 8px; }

/* 3) 탭 — 밑줄을 accent 로, hover 톤 통일, 활성 굵기 완화(700→600). 패딩·글자크기는 명시 허용 예외. */
.tab { padding: 9px 14px; font-size: 13px; transition: background .15s, color .15s, border-color .15s; }
.tab:hover { background: rgba(15, 23, 42, .04); }
.tab.active { border-bottom-color: var(--accent, var(--primary)); font-weight: 600; }

/* 4) 카드성 컨테이너 — radius/border 는 이미 각 앱이 var(--radius)/var(--border) 로 스스로 지정하므로
      (--radius 는 위 :root 토큰이 이미 8px 로 통일) 여기서는 그림자만 얹는다. 안쪽 padding 은 건드리지 않음.
      plan `.card`, ledger `.summary-card`·`.table-wrap`(카드성 컨테이너로 확인됨, ledger 에는 `.card` 클래스
      자체가 없음). */
.card, .summary-card, .table-wrap { box-shadow: var(--shadow-sm); }

/* 4b) 섹션 제목 가독성 (사용자 지시 2026-09-04 "각 메뉴마다 데이터가 많다보니 섹션명이 가독성이 떨어져") — plan 의
      카드 제목(.card > h2)·소제목(h3)을 한 눈에 구분되게: 더 큰 굵은 글자 + 왼쪽 accent 바 + 하단 구분선, 제목 옆에
      길게 붙던 설명(.hint)은 **다음 줄**로 내려 제목만 먼저 읽히게 한다(flex-basis 100%). 폰트 크기·패딩은 명시 허용 예외.
      ledger 에는 .card 가 없어 영향 없음. 보고서 컨테이너(.rpt/#repTable/.daily-form)는 .card 안에 h2/h3 를 두지 않음(확인). */
.card > h2, .card > h3, .card > div > h3, .panel > h3 {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px;
    font-size: 15px; font-weight: 800; letter-spacing: -.2px; line-height: 1.3;
    padding: 4px 0 8px; margin: 0 0 12px; border-bottom: 1px solid var(--border);
}
.card > h2::before, .card > h3::before, .card > div > h3::before, .panel > h3::before {
    content: ""; width: 4px; height: 15px; border-radius: 2px; align-self: center;
    background: var(--accent, var(--primary)); margin-right: 4px;
}
.card > h2 .hint, .card > h3 .hint, .card > div > h3 .hint, .panel > h3 .hint {
    flex-basis: 100%; font-size: 11.5px; line-height: 1.5; font-weight: 400; color: var(--text-sub);
    margin-left: 16px; letter-spacing: 0;
}
.card > h2 .btn, .card > h3 .btn { margin-left: auto; }

/* 5) 버튼 — 높이·패딩 불변, radius/색/그림자만. */
.btn { border-radius: 8px; border-color: var(--border); transition: background .15s, border-color .15s, transform .1s; }
.btn:hover { background: #f1f5f9; border-color: #cbd5e1; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: linear-gradient(180deg, #475569, #3f4b5b); border-color: #3f4b5b; color: #fff; box-shadow: 0 1px 2px rgba(16, 24, 40, .12); }
.btn-primary:hover { background: #334155; border-color: #334155; }
/* plan 에만 있는 클래스(ledger 에는 .btn-danger 가 없음). (사용자 지시 2026-09-04 "삭제버튼 빨간색이 너무 튀어서
   다른 태그들 정도의 파스텔톤 빨강으로") — 배지(.rcr-off-badge #fecaca/#991b1b)와 같은 톤. hover 에서만 한 단계 진하게. */
.btn-danger { background: #fee2e2; border-color: #fecaca; color: #b91c1c; box-shadow: none; }
.btn-danger:hover { background: #fecaca; border-color: #fca5a5; color: #991b1b; }

/* 6) 입력 — 폭/높이/패딩/글자크기는 절대 지정하지 않는다(표 안 인라인 입력 폭 보호). 테두리·radius·포커스
      링만. 각 앱의 폭 지정 규칙(class 결합 선택자, `.rpt input` 등)은 이 element-only 규칙보다 특정도가
      항상 높아 그대로 유지된다. */
input, select, textarea {
    border: 1px solid var(--border); border-radius: 6px; background: #fff;
}
input:focus, select:focus, textarea:focus {
    outline: 2px solid rgba(71, 85, 105, .25); outline-offset: 1px; border-color: #94a3b8;
}

/* 7) 표 헤더 — ledger `.tx-table th`(현재 진한 primary 배경) · plan `table.grid th`(이미 이 톤) 를
      같은 톤으로. `.rpt`/`#repTable`/`.daily-form`/`.ledger-page-wrap` 은 이 두 클래스를 쓰지 않아
      구조적으로 제외된다. 셀 테두리(좌우/상단)는 각 앱 shorthand `border`가 그대로 유지 — 여기서는
      `border-bottom` 만 얹는다. 행 hover 는 두 앱이 이미 비슷한 톤(#f8fafc/#fafbfc)이라 건드리지 않는다. */
.tx-table th, .grid th {
    background: #f8fafc; color: #475569; font-weight: 600; border-bottom: 1px solid #e3e7ee;
}

/* 8) 배지 — plan 전용 클래스(ledger 에는 `.badge` 자체가 없음). 색은 변형(`.auto/.pre/.rec/.emp` 등)이
      이미 소유하므로 background/color 는 건드리지 않고 geometry 만. */
.badge { border-radius: 999px; font-size: 11px; font-weight: 600; padding: 1px 8px; }

/* 9) 사용자 칩 — ledger 는 이미 이 톤(#f1f5f9/var(--border)/999px), plan 은 배경·테두리가 아예 없어서
      맞춘다. `.role-badge` 자체는 역할별 고유색(`.role-badge.role-system_admin` 등, plan 은 accent 색)을
      갖고 있어 여기서 색을 얹지 않는다(덮어쓰면 역할 구분이 사라짐) — padding 도 새로 지정하지 않는다. */
.user-chip { background: var(--bg); border: 1px solid var(--border); border-radius: 999px; }

/* 10) 로그인 오버레이 — 두 앱 동일 클래스명. 카드 폭은 각 앱 값 유지, 상단에 accent 라인만 추가. */
.auth-overlay { background: rgba(15, 23, 42, .55); backdrop-filter: blur(4px); }
.auth-card { border-radius: 14px; box-shadow: 0 24px 60px rgba(15, 23, 42, .25); border-top: 3px solid var(--accent, var(--primary)); }

/* 11) 모달 — ledger `.modal-mask/.modal`, plan `.modal-overlay/.modal-box` (클래스명이 앱마다 다름을
       확인함). 폭·패딩은 각 앱 값 유지. */
.modal-mask, .modal-overlay { background: rgba(15, 23, 42, .5); }
.modal, .modal-box { border-radius: 12px; box-shadow: var(--shadow-md); }

/* 12) 스크롤바(webkit) — 두 앱 공통 */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; }
::-webkit-scrollbar-track { background: transparent; }

/* 13) 모션 최소화 환경 배려 */
@media (prefers-reduced-motion: reduce) {
    .tab, .btn, .sf-switch a, .sf-sso-btn { transition: none; }
}
/* 14) 다크모드는 이번 범위 아님 — 추가하지 않음 */

/* ── 앱바 (shared/static/appbar.js 가 body 맨 앞에 삽입) ─────────────────────────── */
.sf-appbar {
    height: var(--appbar-h);
    background: var(--appbar-bg);
    color: var(--appbar-fg);
    display: flex; align-items: center; gap: 18px;
    padding: 0 20px;
    font-family: var(--font); font-size: 12.5px;
    border-bottom: 1px solid var(--appbar-line);
    user-select: none;
}
.sf-appbar a { color: inherit; text-decoration: none; }
.sf-brand {
    display: inline-flex; align-items: center; gap: 8px;
    font-weight: 700; letter-spacing: .2px; color: var(--appbar-fg-strong);
}
.sf-brand .sf-logo { width: 18px; height: 18px; border-radius: 4px; object-fit: contain; }
.sf-brand .sf-brand-sub { font-weight: 400; color: var(--appbar-fg); opacity: .8; }
.sf-switch { display: flex; align-items: center; gap: 2px; margin-left: 6px; }
.sf-switch a {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 0 12px; height: var(--appbar-h);
    border-bottom: 2px solid transparent;
    transition: background .15s, color .15s;
}
.sf-switch a:hover { background: rgba(255, 255, 255, .06); color: var(--appbar-fg-strong); }
.sf-switch a.on { color: var(--appbar-fg-strong); font-weight: 600; }
.sf-switch a .sf-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .55; }
.sf-switch a[data-app="bank"] .sf-dot { background: var(--app-bank); opacity: 1; }
.sf-switch a[data-app="plan"] .sf-dot { background: var(--app-plan); opacity: 1; }
.sf-switch a[data-app="bank"].on { border-bottom-color: var(--app-bank); }
.sf-switch a[data-app="plan"].on { border-bottom-color: var(--app-plan); }
.sf-switch a[data-app="hub"].on { border-bottom-color: var(--appbar-fg); }
.sf-appbar .sf-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
/* (사용자 지시 2026-09-30) 가이드 아이콘 버튼(시스템 가이드·사용자 가이드) + 사용자 이름 — appbar.js wireUser */
.sf-appbar .sf-icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 50%;
    font-size: 14px; line-height: 1; cursor: pointer;
    transition: background .15s;
}
.sf-appbar .sf-icon-btn:hover { background: rgba(255, 255, 255, .14); }
.sf-appbar .sf-user { font-size: 12px; color: var(--appbar-fg-strong); }
/* (사용자 지시 2026-10-01) 로그아웃 버튼 — 이름(역할) 바로 옆. appbar.js wireUser */
.sf-appbar .sf-logout {
    font: inherit; font-size: 12px; color: var(--appbar-fg-strong);
    background: transparent; border: 1px solid rgba(255, 255, 255, .25); border-radius: 6px;
    padding: 2px 10px; cursor: pointer; transition: background .15s;
}
.sf-appbar .sf-logout:hover { background: rgba(255, 255, 255, .14); }
/* (사용자 지시 2026-10-01) 앱바가 있는 게이트웨이 화면에서는 각 앱 헤더의 계정칩·로그아웃이 중복이라 숨긴다 */
body.sf-has-appbar #userChip,
body.sf-has-appbar #logoutBtn { display: none !important; }
@media (max-width: 640px) {
    .sf-appbar { padding: 0 10px; gap: 8px; }
    .sf-brand .sf-brand-sub { display: none; }
}
@media print { .sf-appbar { display: none; } }

/* ── SSO 로그인 버튼 + 구분선 (두 앱 로그인 오버레이·허브 공용, appbar.js 가 href/노출 제어) ── */
[data-sso-wrap] { display: grid; gap: 10px; margin-bottom: 4px; }
/* ⚠ 위 display:grid(0,1,0) 가 UA 의 [hidden](0,0,1) 을 이겨 ledger(전역 [hidden] 규칙 없음)에서 숨김이 안 먹었다(실측) — 명시 */
[data-sso-wrap][hidden] { display: none; }
.sf-sso-btn {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    height: 38px; border-radius: var(--radius); text-decoration: none;
    background: var(--appbar-bg); color: #fff; font-weight: 600; font-size: 13px;
    border: 1px solid var(--appbar-bg); transition: background .15s, transform .12s;
}
.sf-sso-btn:hover { background: #0f172a; }
.sf-sso-btn:active { transform: translateY(1px); }
.sf-sso-btn .sf-sso-key { width: 14px; height: 14px; border-radius: 3px; background: linear-gradient(135deg, var(--app-bank), var(--app-plan)); }
.sf-login-divider { display: flex; align-items: center; gap: 10px; color: var(--text-sub); font-size: 11.5px; }
.sf-login-divider::before, .sf-login-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }