/* ================================================
   JCI — JC 회계 전용 스타일

   admin.css 는 절대 수정하지 않습니다. 여기 클래스는 전부 `acct-` 접두사를 붙여
   다른 관리자 화면과 충돌하지 않도록 했고, 색·라운드·그림자는 admin.css 의
   디자인 토큰(--c-*, --card-radius, --shadow-*)에서 파생시켰습니다.
   (모달은 #modal-overlay 안에 그려지므로 .acct-page 하위 선택자에 기대지 않습니다)

   ── 이 화면의 원칙 (돈을 다루는 화면) ────────────────────────────
   1) 숫자가 주인공, 라벨은 조연 — 라벨 12~13px 옅게 / 숫자 22~28px 진하게
   2) 색은 '분류'에만 (수입=파랑 · 지출=빨강). '결론'(이월·합계)은 무채색 + 굵기로
   3) 금액은 우측 정렬 + 등폭 숫자(tabular-nums) — 자릿수 축이 세로로 한 줄
   4) 표는 선이 아니라 여백으로 나눔 — 행 높이 넉넉히, 구분선은 아주 연하게
   5) 안내문은 색 상자가 아니라 조용한 한 줄로 (정말 조치가 필요한 것만 주황)
   2026-07-29 개편
   ================================================ */


/* ================================================
   0. 회계 화면 토큰
   admin.css 토큰과 어긋나지 않는 범위에서 회계 전용 값만 정의합니다.
   ================================================ */
:root {
    --acct-ink:       #0F172A;   /* 금액 본체 — 시선이 가장 먼저 닿는 색 */
    --acct-ink-2:     #334155;   /* 표 본문 */
    /* 라벨·보조 글자. 흰 배경뿐 아니라 옅은 회색 띠(--acct-tint / --acct-tint-2)와
       파랑·빨강 옅은 배경 위에서도 4.5:1 을 넘도록 한 단계 더 진하게 잡았습니다.
       (#64748B 은 흰 배경에서만 4.76:1 이고 띠 위에서는 4.2~4.5:1 로 내려갔습니다) */
    --acct-sub:       #5B6B80;   /* 흰 배경 5.44:1 · 옅은 띠 위 4.84~5.15:1 */
    /* 장식 전용 — 아이콘·점·막대처럼 '읽지 않아도 되는 것'에만 씁니다.
       글자에는 쓰지 않습니다(흰 배경 대비 2.5:1 로 AA 기준 4.5:1 미달) */
    --acct-faint:     #94A3B8;

    --acct-line:      #E9EEF5;   /* 표 행 구분선 — 거의 안 보이게 */
    --acct-line-2:    #DCE4EE;   /* 카드 테두리 */
    --acct-tint:      #F6F9FC;   /* 표 머리·구역 배경 */
    --acct-tint-2:    #EDF2F9;   /* 강조 구역 배경 */

    --acct-in:        #1D4ED8;   /* 수입 (primary-hover 계열) */
    --acct-in-bg:     #EFF6FF;
    --acct-in-line:   #BFDBFE;
    --acct-out:       #B91C1C;   /* 지출 (danger-hover 계열) */
    --acct-out-bg:    #FEF2F2;
    --acct-out-line:  #FECACA;
    --acct-ok:        #047857;
    --acct-ok-bg:     #ECFDF5;
    --acct-ok-line:   #A7F3D0;
    --acct-warn:      #B45309;
    --acct-warn-bg:   #FFFBEB;
    --acct-warn-line: #FCD9A8;

    --acct-r:         16px;      /* 카드 (admin.css --card-radius 와 동일) */
    --acct-r-md:      12px;
    --acct-r-sm:      10px;      /* 입력·버튼 */
    --acct-row-h:     56px;      /* 표 행 높이 */
}


/* ================================================
   1. 페이지 셸 · 탭
   ================================================ */
.acct-page {
    max-width: 1400px;
    /* 회계 화면 전체에 등폭 숫자 — 금액이 세로로 겹칠 때 자릿수가 흔들리지 않습니다 */
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
}

/* 탭 = 흰 알약이 얹히는 레일 (배경 위에 카드가 떠 있는 관리자 웹 문법 그대로) */
.acct-tabs {
    display: flex;
    gap: 2px;
    padding: 4px;
    background: var(--acct-tint);
    border: 1px solid var(--acct-line-2);
    border-radius: 14px;
    overflow-x: auto;
    scrollbar-width: none;
    margin-bottom: 24px;
}
.acct-tabs::-webkit-scrollbar { height: 0; }

.acct-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    min-height: 40px;
    padding: 9px 16px;
    border: none;
    border-radius: var(--acct-r-sm);
    background: transparent;
    color: var(--acct-sub);
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: -0.01em;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
.acct-tab svg {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.75;
}
.acct-tab:hover { color: var(--acct-ink); background: rgba(255, 255, 255, 0.7); }
.acct-tab.active {
    background: var(--c-bg-card);
    color: var(--c-primary);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08), 0 0 0 1px rgba(37, 99, 235, 0.14);
}
.acct-tab.active svg { opacity: 1; }
.acct-tab:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 1px; }


/* ================================================
   2. 툴바 (필터 줄)
   흩어져 떠 있던 컨트롤들을 흰 띠 하나로 묶습니다.
   ================================================ */
.acct-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 12px 14px;
    margin-bottom: 20px;
    background: var(--c-bg-card);
    border: 1px solid var(--acct-line-2);
    border-radius: 14px;
    box-shadow: var(--shadow-sm);
}
.acct-spacer { margin-left: auto; }
.acct-sep { color: var(--acct-sub); font-size: 13px; padding: 0 2px; }
.acct-toolbar .btn { min-height: 38px; border-radius: var(--acct-r-sm); }
.acct-toolbar .btn-sm { min-height: 32px; }

/* 세그먼트형 칩 묶음 — 붙여 놓아 한 덩어리로 읽히게 */
.acct-seg {
    display: inline-flex;
    padding: 3px;
    gap: 2px;
    background: var(--acct-tint);
    border: 1px solid var(--acct-line-2);
    border-radius: 999px;
}
.acct-seg .chip {
    height: 30px;
    padding: 0 14px;
    border: none;
    background: transparent;
    color: var(--acct-sub);
    box-shadow: none;
}
.acct-seg .chip:hover { color: var(--acct-ink); background: rgba(255, 255, 255, 0.8); }
.acct-seg .chip.chip-active {
    background: var(--c-bg-card);
    color: var(--c-primary);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.1);
}

.acct-page .filter-select,
.acct-input {
    padding: 8px 12px;
    min-height: 38px;
    border: 1px solid var(--acct-line-2);
    border-radius: var(--acct-r-sm);
    font-family: inherit;
    font-size: 13px;
    color: var(--acct-ink);
    background: var(--c-bg-card);
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.acct-page .filter-select:focus,
.acct-input:focus {
    border-color: var(--c-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
}
.acct-search { width: 190px; max-width: 100%; }

/* 날짜 범위 — 두 칸을 하나의 컨트롤처럼 */
.acct-range {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 4px;
    border: 1px solid var(--acct-line-2);
    border-radius: var(--acct-r-sm);
    background: var(--c-bg-card);
}
.acct-range .acct-input {
    border: none;
    box-shadow: none;
    padding-left: 8px;
    padding-right: 8px;
}
.acct-range:focus-within {
    border-color: var(--c-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
}

/* 이전 달 / 달 / 다음 달 — 붙은 한 벌 */
.acct-monthnav {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--acct-line-2);
    border-radius: var(--acct-r-sm);
    overflow: hidden;
    background: var(--c-bg-card);
}
.acct-monthnav .acct-navbtn {
    min-width: 40px;
    padding: 0 12px;
    border: none;
    background: transparent;
    color: var(--acct-sub);
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.acct-monthnav .acct-navbtn:hover { background: var(--acct-tint); color: var(--c-primary); }
.acct-monthnav .acct-input {
    border: none;
    border-left: 1px solid var(--acct-line);
    border-right: 1px solid var(--acct-line);
    border-radius: 0;
    box-shadow: none;
    font-size: 14px;
    font-weight: 600;
    color: var(--acct-ink);
    min-width: 150px;
}

/* 토글 스위치 라벨 (admin.css 의 .toggle-switch 재사용) */
.acct-toggle-wrap {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 4px;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}
.acct-toggle-wrap > span:first-child {
    font-size: 13px;
    font-weight: 600;
    color: var(--acct-sub);
}


/* ================================================
   3. 요약 카드 (숫자가 주인공)
   라벨 12px 옅게 → 숫자 26px 진하게 → 캡션 12px 더 옅게. 3단 계층.
   ================================================ */
.acct-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}
.acct-stat {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 20px;
    background: var(--c-bg-card);
    border: 1px solid var(--acct-line-2);
    border-radius: var(--acct-r);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
/* 성격은 왼쪽 4px 띠로만 — 카드 전체를 색칠하지 않습니다 */
.acct-stat::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: var(--acct-faint);
}
.acct-stat.tone-ok::before   { background: var(--c-success); }
.acct-stat.tone-warn::before { background: var(--c-warning); }
.acct-stat.tone-out::before  { background: var(--c-danger); }
.acct-stat.tone-in::before   { background: var(--c-primary); }

.acct-stat-icon {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border-radius: var(--acct-r-md);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--acct-tint-2);
    color: var(--acct-sub);
}
.acct-stat-icon svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.acct-stat.tone-ok   .acct-stat-icon { background: var(--acct-ok-bg);   color: var(--acct-ok); }
.acct-stat.tone-warn .acct-stat-icon { background: var(--acct-warn-bg); color: var(--acct-warn); }
.acct-stat.tone-out  .acct-stat-icon { background: var(--acct-out-bg);  color: var(--acct-out); }
.acct-stat.tone-in   .acct-stat-icon { background: var(--acct-in-bg);   color: var(--acct-in); }

.acct-stat-body { flex: 1; min-width: 0; }
.acct-stat-label {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--acct-sub);
    letter-spacing: -0.01em;
    margin-bottom: 4px;
}
.acct-stat-value {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.15;
    color: var(--acct-ink);
    letter-spacing: -0.02em;
    word-break: keep-all;
    overflow-wrap: anywhere;
}
/* 캡션도 '뜻이 있는 글자'입니다(실제 수치·설명). 장식용 옅은 회색을 쓰지 않습니다. */
.acct-stat-cap {
    margin-top: 5px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--acct-sub);
    word-break: keep-all;
    overflow-wrap: anywhere;
}
/* 완납률 등 비율 카드 아래 얇은 미터 */
.acct-meter {
    margin-top: 10px;
    height: 5px;
    border-radius: 999px;
    background: var(--acct-tint-2);
    overflow: hidden;
}
.acct-meter > span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--c-success);
}


/* ================================================
   4. 안내문 — 색 상자를 줄이고 조용한 한 줄로
   ================================================ */
.acct-hint {
    position: relative;
    padding: 11px 16px 11px 14px;
    margin-bottom: 20px;
    background: var(--acct-tint);
    border: 1px solid var(--acct-line-2);
    border-left: 3px solid var(--c-primary);
    border-radius: var(--acct-r-sm);
    font-size: 13px;
    line-height: 1.65;
    color: var(--acct-ink-2);
}
.acct-hint b { color: var(--acct-ink); font-weight: 700; }

/* plain = 표 위에 늘 붙는 설명. 상자를 없애고 글줄로만 남깁니다. */
.acct-hint.plain {
    background: transparent;
    border: none;
    padding: 0 0 0 20px;
    margin-bottom: 16px;
    font-size: 12.5px;
    color: var(--acct-sub);
}
.acct-hint.plain::before {
    content: 'i';
    position: absolute;
    left: 0;
    top: 1px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--acct-tint-2);
    color: var(--acct-sub);
    font-size: 10px;
    font-weight: 700;
    font-style: italic;
    line-height: 15px;
    text-align: center;
}

/* warn = 실제로 조치가 필요한 것만 */
.acct-hint.warn {
    background: var(--acct-warn-bg);
    border-color: var(--acct-warn-line);
    border-left-color: var(--c-warning);
    color: #7C3E06;
}
.acct-hint.warn b { color: #7C3E06; }
.acct-hint-row {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    justify-content: space-between;
}
.acct-hint-row .btn { flex-shrink: 0; border-radius: var(--acct-r-sm); }

/* 예산 색 규칙 안내 — 배너 대신 범례 줄 */
.acct-legend {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    padding: 10px 16px;
    margin-bottom: 20px;
    background: var(--c-bg-card);
    border: 1px solid var(--acct-line-2);
    border-radius: var(--acct-r-sm);
    font-size: 12.5px;
    color: var(--acct-sub);
}
.acct-legend-item { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.acct-legend-item b { color: var(--acct-ink-2); font-weight: 600; }
.acct-dot {
    width: 9px;
    height: 9px;
    border-radius: 3px;
    flex-shrink: 0;
    background: var(--acct-faint);
}
.acct-dot.ok   { background: var(--c-primary); }
.acct-dot.warn { background: var(--c-warning); }
.acct-dot.over { background: var(--c-danger); }
/* 조작 안내문 — 읽으셔야 하는 문장이므로 --acct-faint 를 쓰지 않습니다 */
.acct-legend-note { color: var(--acct-sub); word-break: keep-all; }


/* ================================================
   5. 안내/에러 카드 · 빈 상태 · 스켈레톤
   ================================================ */
.acct-notice {
    background: var(--c-bg-card);
    border: 1px solid var(--acct-line-2);
    border-radius: var(--acct-r);
    box-shadow: var(--shadow-sm);
    padding: 52px 28px;
    text-align: center;
    max-width: 520px;
    margin: 32px auto;
}
.acct-notice-emoji {
    width: 56px;
    height: 56px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: var(--acct-tint);
    border: 1px solid var(--acct-line-2);
    font-size: 26px;
    line-height: 54px;
}
.acct-notice h3 {
    font-size: 17px;
    font-weight: 700;
    color: var(--acct-ink);
    margin-bottom: 8px;
    letter-spacing: -0.01em;
}
.acct-notice p {
    font-size: 13.5px;
    color: var(--acct-sub);
    line-height: 1.75;
    margin-bottom: 20px;
    max-width: 380px;
    margin-left: auto;
    margin-right: auto;
    word-break: keep-all;
    overflow-wrap: anywhere;
}
.acct-notice .btn { min-height: 42px; border-radius: var(--acct-r-sm); }

.acct-empty {
    background: var(--c-bg-card);
    border: 1px solid var(--acct-line-2);
    border-radius: var(--acct-r);
    box-shadow: var(--shadow-sm);
    padding: 56px 28px;
    text-align: center;
}
.acct-empty-icon {
    width: 52px;
    height: 52px;
    margin: 0 auto 16px;
    border-radius: 14px;
    background: var(--acct-tint);
    border: 1px solid var(--acct-line-2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--acct-faint);
}
.acct-empty-icon svg { width: 26px; height: 26px; }
.acct-empty strong {
    display: block;
    color: var(--acct-ink);
    font-size: 15.5px;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin-bottom: 6px;
}
.acct-empty p {
    font-size: 13.5px;
    color: var(--acct-sub);
    line-height: 1.7;
    max-width: 420px;
    margin: 0 auto;
    /* 한글은 단어 중간에서 끊지 않습니다 ('자동' + '으로' 로 쪼개지던 것 방지) */
    word-break: keep-all;
    overflow-wrap: anywhere;
}
.acct-empty p:empty { display: none; }
.acct-empty-actions { margin-top: 20px; }
.acct-empty-actions .btn { min-height: 42px; border-radius: var(--acct-r-sm); }

/* 로딩 스켈레톤 (admin.css showTableSkeleton 의 .table-wrap 을 회계 톤으로) */
#acct-panel .table-wrap {
    background: var(--c-bg-card);
    border: 1px solid var(--acct-line-2);
    border-radius: var(--acct-r);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
#acct-panel .skeleton-row {
    padding: 19px 20px;
    border-bottom: 1px solid var(--acct-line);
    align-items: center;
}
#acct-panel .skeleton-row:last-child { border-bottom: none; }


/* ================================================
   6. 카드 · 표
   선을 지우고 여백으로 나눕니다. 머리 줄만 확실히 구분합니다.
   ================================================ */
.acct-card {
    background: var(--c-bg-card);
    border: 1px solid var(--acct-line-2);
    border-radius: var(--acct-r);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    margin-bottom: 20px;
}
.acct-card:last-child { margin-bottom: 0; }
.acct-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 16px 20px;
    border-bottom: 1px solid var(--acct-line);
}
.acct-card-head h3 {
    font-size: 15px;
    font-weight: 700;
    color: var(--acct-ink);
    letter-spacing: -0.01em;
}
.acct-card-meta {
    font-size: 12.5px;
    color: var(--acct-sub);
    font-weight: 500;
}
.acct-card-head .acct-spacer { margin-left: auto; }
.acct-card-body { padding: 20px; }

.acct-table-wrap {
    background: var(--c-bg-card);
    border: 1px solid var(--acct-line-2);
    border-radius: var(--acct-r);
    box-shadow: var(--shadow-sm);
    overflow-x: auto;
}
/* 카드 안에 들어갈 때는 테두리·그림자를 카드에 맡깁니다 */
.acct-table-wrap.flush {
    border: none;
    border-radius: 0;
    box-shadow: none;
}
.acct-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 640px;
}
.acct-table thead th {
    padding: 12px 18px;
    text-align: left;
    font-size: 12px;
    font-weight: 700;
    color: var(--acct-sub);
    letter-spacing: 0.01em;
    background: var(--acct-tint);
    border-bottom: 1px solid var(--acct-line-2);
    white-space: nowrap;
}
/* 금액 열은 머리글자까지 오른쪽 정렬 — 숫자 축이 위에서 아래로 한 줄이 됩니다 */
.acct-table th.acct-num,
.acct-table td.acct-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.acct-table tbody td {
    padding: 14px 18px;
    height: var(--acct-row-h);
    font-size: 14px;
    color: var(--acct-ink-2);
    border-bottom: 1px solid var(--acct-line);
    vertical-align: middle;
}
.acct-table tbody tr:last-child td { border-bottom: none; }
.acct-table tbody tr:hover { background: var(--acct-tint); }
.acct-table td.acct-nowrap { white-space: nowrap; }
/* 이름·카테고리는 줄 가운데서 끊지 않습니다. 자리가 모자라면 표만 옆으로 넘깁니다
   (페이지 전체가 가로로 밀리지는 않습니다 — .acct-table-wrap 안에서만 스크롤) */
.acct-table td.acct-name { color: var(--acct-ink); font-weight: 600; white-space: nowrap; }
.acct-table .acct-row-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
/* 줄마다 반복되는 보조 버튼은 회색으로 눕혀 두고, 마우스를 올리시면 제 색을 냅니다.
   (표 전체가 알록달록해지지 않도록 — 주된 행동인 .btn-primary 만 색을 유지합니다) */
/* 줄마다 반복되는 버튼이라 작으면 43명을 연속으로 처리하실 때 조준이 힘듭니다.
   표 안 버튼의 최소 높이를 32px 로 맞춥니다(admin.css 의 .btn-sm 은 그대로 두고 여기서만). */
.acct-table .acct-row-actions .btn {
    border-radius: 8px;
    min-height: 32px;
    padding-top: 0;
    padding-bottom: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.acct-table .acct-row-actions .btn-outline,
.acct-table .acct-row-actions .btn-danger-outline {
    color: var(--acct-sub);
    border-color: var(--acct-line-2);
    background: transparent;
}
.acct-table .acct-row-actions .btn-outline:hover:not(:disabled) {
    color: var(--c-primary);
    border-color: var(--c-primary);
    background: var(--acct-in-bg);
}
.acct-table .acct-row-actions .btn-danger-outline:hover:not(:disabled) {
    color: var(--c-danger);
    border-color: var(--c-danger);
    background: var(--acct-out-bg);
}
.acct-table th.acct-act, .acct-table td.acct-act { text-align: right; }

/* 금액 셀 */
.acct-money  { font-weight: 600; color: var(--acct-ink); }
.acct-amt-income  { color: var(--acct-in);  font-weight: 700; }
.acct-amt-expense { color: var(--acct-out); font-weight: 700; }
.acct-neg { color: var(--acct-out); }
/* '값 없음' 표시 — 자료가 없다는 뜻을 담은 글자라 읽히는 밝기까지만 낮춥니다 */
.acct-dim { color: var(--acct-sub); }

/* 장부 시작월 이전 거래 줄 — 옅은 배경 + 줄마다 '결산 제외' 라벨(색만으로 뜻 전달 금지) */
.acct-table tbody tr.acct-tx-excluded { background: var(--acct-warn-bg); }
.acct-table tbody tr.acct-tx-excluded:hover { background: #FDF2DA; }
/* 금액 칸은 수입(+파랑)·지출(−빨강) 구분을 그대로 두고, 나머지 글자만 주황 계열로 */
.acct-table tbody tr.acct-tx-excluded td:not(.acct-num) { color: #7C3E06; }

/* 회비 부족액 (일부 납부 배지 아래) */
.acct-short {
    margin-top: 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--acct-warn);
    white-space: nowrap;
}


/* ================================================
   7. 배지
   ================================================ */
.acct-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
    border: 1px solid transparent;
}
.acct-badge-income  { background: var(--acct-in-bg);   color: var(--acct-in);   border-color: var(--acct-in-line); }
.acct-badge-expense { background: var(--acct-out-bg);  color: var(--acct-out);  border-color: var(--acct-out-line); }
.acct-badge-ok      { background: var(--acct-ok-bg);   color: var(--acct-ok);   border-color: var(--acct-ok-line); }
.acct-badge-danger  { background: var(--acct-out-bg);  color: var(--acct-out);  border-color: var(--acct-out-line); }
.acct-badge-warn    { background: var(--acct-warn-bg); color: var(--acct-warn); border-color: var(--acct-warn-line); }
.acct-badge-muted   { background: var(--acct-tint);    color: #475569;          border-color: var(--acct-line-2); }
/* 배지 앞 점 — 색을 못 알아보셔도 모양으로 구분되도록 */
.acct-badge::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}
.acct-badge.no-dot::before { display: none; }
.acct-count-badge {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--acct-tint);
    border: 1px solid var(--acct-line-2);
    color: #475569;
    font-size: 12px;
    font-weight: 700;
}


/* ================================================
   8. 결산서 / 수입지출부
   감사 제출 서류처럼 — 전기이월 → 수입 → 지출 → 차기이월 흐름이 한눈에.
   ================================================ */

/* 결산 요약 띠 : 네 숫자를 한 줄에. '차기이월'만 무채색으로 확정된 답처럼 */
.acct-band {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
    background: var(--c-bg-card);
    border: 1px solid var(--acct-line-2);
    border-radius: var(--acct-r);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    margin-bottom: 20px;
}
.acct-fig {
    padding: 18px 20px;
    border-left: 1px solid var(--acct-line);
}
.acct-fig:first-child { border-left: none; }
.acct-fig-label {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--acct-sub);
    margin-bottom: 6px;
}
.acct-fig-val {
    display: block;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--acct-ink);
    word-break: keep-all;
    overflow-wrap: anywhere;
}
/* 요약칸 밑 풀이글 — 숫자의 뜻을 설명하는 문장이라 또렷하게 읽혀야 합니다
   (--acct-faint 는 장식 전용이므로 여기 쓰지 않습니다) */
.acct-fig-cap {
    display: block;
    margin-top: 5px;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--acct-sub);
    word-break: keep-all;
    overflow-wrap: anywhere;
}
.acct-fig.is-in  .acct-fig-val { color: var(--acct-in); }
.acct-fig.is-out .acct-fig-val { color: var(--acct-out); }
/* 결론 칸 — 색을 빼고 배경·굵기로만 무게를 줍니다 */
.acct-fig.is-result {
    background: var(--acct-tint);
    border-left: 1px solid var(--acct-line-2);
    box-shadow: inset 0 2px 0 var(--acct-ink);
}
.acct-fig.is-result .acct-fig-label { color: var(--acct-ink-2); }
.acct-fig.is-result .acct-fig-val { font-size: 25px; }

/* 원장 표 */
.acct-settle-section td {
    background: var(--acct-tint);
    font-weight: 700;
    font-size: 12.5px;
    letter-spacing: 0.02em;
    color: var(--acct-sub);
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    height: auto;
}
.acct-settle-section.is-in td  { box-shadow: inset 3px 0 0 var(--c-primary); color: var(--acct-in); }
.acct-settle-section.is-out td { box-shadow: inset 3px 0 0 var(--c-danger);  color: var(--acct-out); }

.acct-settle-indent { padding-left: 40px !important; color: var(--acct-ink-2); }
.acct-table tbody tr.acct-settle-total td {
    background: transparent;
    font-weight: 700;
    color: var(--acct-ink);
    border-top: 1px solid var(--acct-line-2);
}
.acct-table tbody tr.acct-settle-total .acct-num { font-size: 15px; }
.acct-table tbody tr.acct-settle-total.is-in .acct-num  { color: var(--acct-in); }
.acct-table tbody tr.acct-settle-total.is-out .acct-num { color: var(--acct-out); }

.acct-table tbody tr.acct-settle-carry td {
    background: var(--acct-tint);
    font-weight: 700;
    color: var(--acct-ink);
}
.acct-table tbody tr.acct-settle-carry:hover td { background: var(--acct-tint-2); }
/* 차기이월 = 문서의 결론. 위에 굵은 줄을 그어 감사 서류처럼 마무리합니다. */
.acct-table tbody tr.acct-settle-carry.is-result td {
    border-top: 2px solid var(--acct-ink);
    background: var(--acct-tint-2);
}
.acct-table tbody tr.acct-settle-carry.is-result .acct-num { font-size: 17px; }
.acct-settle-carry .text-sub { font-weight: 500; color: var(--acct-sub); font-size: 13px; }

/* 검산 줄 — 초록 배너 대신 조용한 확인 한 줄 */
.acct-check {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-top: 14px;
    padding: 10px 14px;
    border-radius: var(--acct-r-sm);
    border: 1px solid var(--acct-ok-line);
    background: var(--acct-ok-bg);
    font-size: 12.5px;
    line-height: 1.65;
    color: var(--acct-ok);
}
.acct-check svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 2px; }
.acct-check.bad {
    background: var(--acct-out-bg);
    border-color: var(--acct-out-line);
    color: var(--acct-out);
}


/* ================================================
   9. 예산 관리
   ================================================ */
.acct-bar-cell { display: flex; align-items: center; gap: 10px; }
.acct-bar-track {
    flex: 1;
    min-width: 90px;
    max-width: 220px;
    height: 8px;
    background: var(--acct-tint-2);
    border-radius: 999px;
    overflow: hidden;
}
.acct-bar-fill {
    height: 100%;
    border-radius: 999px;
    transition: width 0.3s ease;
}
.acct-fill-ok   { background: var(--c-primary); }
.acct-fill-warn { background: var(--c-warning); }
/* 초과는 색만이 아니라 빗금 무늬로도 구분합니다 */
.acct-fill-over {
    background: repeating-linear-gradient(135deg,
        var(--c-danger) 0 5px, #F87171 5px 10px);
}
.acct-rate-ok   { color: var(--acct-ink);  font-weight: 700; }
.acct-rate-warn { color: var(--acct-warn); font-weight: 700; }
.acct-rate-over { color: var(--acct-out);  font-weight: 800; }

/* 예산 입력칸 — 오른쪽 정렬 + '원' 꼬리표 */
.acct-money-input { position: relative; display: block; }
.acct-money-input::after {
    content: '원';
    position: absolute;
    right: 13px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    color: var(--acct-sub);
    pointer-events: none;
}
.acct-money-input .acct-budget-input { padding-right: 34px; }
.acct-budget-input {
    width: 100%;
    max-width: 160px;
    text-align: right;
    font-weight: 600;
    color: var(--acct-ink);
    font-variant-numeric: tabular-nums;
}
.acct-budget-input.bad { border-color: var(--c-danger); box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12); }
.acct-table td.acct-num .acct-money-input { margin-left: auto; max-width: 160px; }
/* 검증 실패 사유는 스낵바가 아니라 칸 바로 아래에 남깁니다 */
.acct-table td.acct-num .acct-b-err {
    white-space: normal;
    text-align: right;
    font-weight: 400;
    max-width: 170px;
    margin-left: auto;
}
.acct-b-err:empty { display: none; }


/* ================================================
   10. 카테고리 관리
   ================================================ */
.acct-cat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 20px;
    margin-bottom: 20px;
}
/* 카드 두 장의 키를 맞추고, '추가' 줄은 항상 카드 바닥에 붙입니다 */
.acct-cat-card {
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
}
.acct-cat-card .acct-card-head { gap: 8px; }
.acct-cat-card .acct-cat-list,
.acct-cat-card .acct-cat-empty { flex: 1 1 auto; }
.acct-cat-card .acct-cat-add { margin-top: auto; }
.acct-cat-swatch {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    flex-shrink: 0;
    background: var(--acct-faint);
}
.acct-cat-card.is-income  .acct-cat-swatch { background: var(--c-primary); }
.acct-cat-card.is-expense .acct-cat-swatch { background: var(--c-danger); }

.acct-cat-list { list-style: none; margin: 0; padding: 0; }
.acct-cat-item {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    padding: 10px 20px;
    border-bottom: 1px solid var(--acct-line);
    font-size: 14px;
    flex-wrap: wrap;
}
.acct-cat-item:last-of-type { border-bottom: none; }
.acct-cat-item:hover { background: var(--acct-tint); }
.acct-cat-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--acct-faint);
}
.acct-cat-card.is-income  .acct-cat-item:not(.off) .acct-cat-dot { background: var(--c-primary); }
.acct-cat-card.is-expense .acct-cat-item:not(.off) .acct-cat-dot { background: var(--c-danger); }
.acct-cat-name {
    flex: 1;
    min-width: 90px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
/* 한글 이름은 음절 중간에서 끊지 않습니다 (긴 이름은 띄어쓰기 단위로 줄바꿈) */
.acct-cat-text { font-weight: 600; color: var(--acct-ink); word-break: keep-all; overflow-wrap: anywhere; }
.acct-cat-text.off { color: var(--acct-sub); font-weight: 500; text-decoration: line-through; }
.acct-cat-count {
    font-size: 12px;
    color: var(--acct-sub);
    white-space: nowrap;
}
/* 줄마다 붙는 버튼 3개(이름 수정 / 사용 안 함 / 삭제).
   맨글자로 두면 옆의 '거래 0건'(읽기 전용)과 구분이 안 되므로
   ① 셋 다 흰 바탕 + 테두리를 줘서 '눌리는 것'으로 보이게 하고
   ② 되돌릴 수 없는 '삭제'는 마우스를 올리기 전에도 늘 빨갛게,
   ③ 삭제 앞에는 가는 세로선을 그어 손이 미끄러지지 않도록 떼어 둡니다. */
.acct-cat-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}
.acct-icon-btn {
    position: relative;
    min-width: 34px;
    height: 32px;
    padding: 0 10px;
    border: 1px solid var(--acct-line-2);
    background: var(--c-bg-card);
    color: var(--acct-sub);
    cursor: pointer;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    font-family: inherit;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.acct-icon-btn:hover:not(:disabled) {
    background: var(--acct-in-bg);
    color: var(--c-primary);
    border-color: var(--c-primary);
}
/* 삭제 = 되돌릴 수 없는 동작. 마우스를 올리기 전에도 늘 빨갛습니다.
   (줄마다 빨간 덩어리가 쌓이지 않도록 바탕은 흰색으로 두고 글자·테두리로만 알립니다) */
.acct-icon-btn.danger {
    color: var(--acct-out);
    border-color: var(--acct-out-line);
    background: var(--c-bg-card);
}
.acct-icon-btn.danger:hover:not(:disabled) {
    color: #fff;
    background: var(--c-danger);
    border-color: var(--c-danger);
}
/* 눌리지 않는 버튼은 '색이 옅다'가 아니라 '속이 비었다'로 구분합니다
   (색만으로 알리지 않기 — 점선 테두리 + 투명 바탕) */
.acct-icon-btn:disabled {
    opacity: 1;
    cursor: not-allowed;
    color: var(--acct-sub);
    background: transparent;
    border-style: dashed;
    border-color: var(--acct-line-2);
    font-weight: 500;
}
.acct-cat-actions > :last-child { margin-left: 9px; }
.acct-cat-actions > :last-child::before {
    content: '';
    position: absolute;
    left: -6px;
    top: 5px;
    bottom: 5px;
    width: 1px;
    background: var(--acct-line-2);
}
.acct-icon-btn:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 1px; }

/* 새 카테고리 추가 줄 — 카드 바닥에 붙은 한 벌로 */
.acct-cat-add {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding: 14px 20px;
    background: var(--acct-tint);
    border-top: 1px solid var(--acct-line-2);
}
.acct-cat-add .acct-input { flex: 1; min-width: 140px; background: var(--c-bg-card); }
.acct-cat-add .btn { border-radius: var(--acct-r-sm); min-height: 38px; }
.acct-cat-empty {
    padding: 28px 20px;
    text-align: center;
    font-size: 13px;
    color: var(--acct-sub);
}
.acct-cat-add .acct-cat-err {
    flex: 0 0 100%;
    margin-top: 2px;
    color: var(--c-danger);
    font-size: 12.5px;
    line-height: 1.5;
}
.acct-cat-err:empty { display: none; }


/* ================================================
   11. 기초잔액 카드
   ================================================ */
.acct-opening-grid {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    align-items: flex-end;
}
/* 입력칸 두 개를 화면 폭에 맞춰 늘리지 않고, 한 벌로 묶어 왼쪽에 둡니다 */
.acct-opening-grid .acct-field { flex: 0 1 250px; min-width: 180px; margin: 0; }
.acct-opening-grid .acct-field input { max-width: 100%; }
.acct-opening-actions { flex: 0 0 auto; }
.acct-opening-actions .btn { min-height: 44px; border-radius: var(--acct-r-sm); }


/* ================================================
   12. 모달 폼
   (#modal-overlay 안에 그려지므로 .acct-page 하위로 두지 않습니다)
   ================================================ */
.acct-modal .modal-header {
    padding: 20px 24px 16px;
    border-bottom: 1px solid var(--acct-line);
}
.acct-modal .modal-header h3 {
    font-size: 17px;
    font-weight: 700;
    color: var(--acct-ink);
    letter-spacing: -0.01em;
}
/* 헤더의 '닫기'는 아래 '저장'과 경쟁하지 않도록 조용하게 */
.acct-modal .modal-header .btn-outline {
    color: var(--acct-sub);
    border-color: var(--acct-line-2);
    border-radius: 8px;
}
.acct-modal .modal-header .btn-outline:hover:not(:disabled) {
    background: var(--acct-tint);
    color: var(--acct-ink);
    border-color: var(--acct-line-2);
}
.acct-modal .modal-footer {
    padding: 16px 24px;
    background: var(--acct-tint);
    border-top: 1px solid var(--acct-line);
}
.acct-modal .modal-footer .btn { min-height: 42px; border-radius: var(--acct-r-sm); }

.acct-form { display: flex; flex-direction: column; gap: 18px; padding: 20px 24px 22px; }
.acct-field label {
    display: block;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--acct-ink-2);
    margin-bottom: 7px;
    letter-spacing: -0.01em;
}
.acct-field .req { color: var(--c-danger); }
.acct-field input,
.acct-field select,
.acct-field textarea {
    width: 100%;
    min-width: 0;
    padding: 11px 13px;
    border: 1px solid var(--acct-line-2);
    border-radius: var(--acct-r-sm);
    font-size: 14px;
    font-family: inherit;
    color: var(--acct-ink);
    background: var(--c-bg-card);
    outline: none;
    min-height: 44px;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.acct-field input[inputmode="numeric"] {
    text-align: right;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.acct-field input:focus,
.acct-field select:focus,
.acct-field textarea:focus {
    border-color: var(--c-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
}
.acct-field input.bad,
.acct-field select.bad { border-color: var(--c-danger); box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12); }
.acct-err {
    color: var(--c-danger);
    font-size: 12.5px;
    margin-top: 6px;
    line-height: 1.55;
    min-height: 0;
}
.acct-err:empty { display: none; }
.acct-help { color: var(--acct-sub); font-size: 12px; margin-top: 6px; line-height: 1.55; }
/* 경고(막지는 않지만 알고 계셔야 하는 것) — 빨강(에러)과 구분되도록 주황 */
.acct-warn {
    margin-top: 8px;
    padding: 9px 11px;
    border-radius: var(--acct-r-sm);
    background: var(--acct-warn-bg);
    border: 1px solid var(--acct-warn-line);
    border-left: 3px solid var(--c-warning);
    color: #7C3E06;
    font-size: 12.5px;
    line-height: 1.6;
}
.acct-form-row { display: flex; gap: 14px; flex-wrap: wrap; }
.acct-form-row > .acct-field { flex: 1; min-width: 165px; }
/* 모달 맨 위 요약 줄 */
.acct-form > .acct-hint { margin-bottom: 0; }


/* ================================================
   13. 반응형 — 1024px 에서도 가로 스크롤이 생기면 안 됩니다
   ================================================ */
@media (max-width: 1200px) {
    .acct-tab { padding: 9px 12px; font-size: 13px; gap: 6px; }
    .acct-table thead th,
    .acct-table tbody td { padding-left: 14px; padding-right: 14px; }
    /* 요약 띠의 금액이 두 줄로 접히지 않도록 한 단계 줄입니다 */
    .acct-fig { padding: 16px; }
    .acct-fig-val { font-size: 19px; }
    .acct-fig.is-result .acct-fig-val { font-size: 21px; }
    .acct-stat-value { font-size: 23px; }
}

@media (max-width: 900px) {
    .acct-spacer { margin-left: 0; }
    .acct-search { width: 100%; }
    .acct-toolbar { padding: 12px; }
    .acct-toolbar > .btn { flex: 1 1 auto; }
    .acct-range { width: 100%; justify-content: space-between; }
    .acct-monthnav { width: 100%; }
    .acct-monthnav .acct-input { flex: 1; min-width: 0; }
    .acct-summary { grid-template-columns: 1fr; gap: 12px; }
    .acct-band { grid-template-columns: repeat(2, 1fr); }
    .acct-fig:nth-child(3) { border-left: none; }
    .acct-fig:nth-child(n + 3) { border-top: 1px solid var(--acct-line); }
    .acct-cat-grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
    .acct-band { grid-template-columns: 1fr; }
    .acct-fig { border-left: none; border-top: 1px solid var(--acct-line); }
    .acct-fig:first-child { border-top: none; }
    .acct-notice, .acct-empty { padding: 40px 20px; }
    .acct-stat { padding: 16px; }
    .acct-stat-value { font-size: 23px; }
}


/* ================================================
   14. 인쇄 — 화면을 그대로 Ctrl+P 하셔도 단정하게
   (수지결산서·수입지출부의 정식 인쇄물은 새 창에서 따로 그립니다)
   ================================================ */
@media print {
    .acct-tabs,
    .acct-toolbar,
    .acct-legend,
    .acct-row-actions,
    .acct-empty-actions,
    .acct-hint-row .btn { display: none !important; }

    .acct-page { max-width: none; }
    .acct-card,
    .acct-band,
    .acct-table-wrap,
    .acct-stat {
        box-shadow: none !important;
        border-color: #9CA3AF !important;
        break-inside: avoid;
    }
    .acct-table tbody td { border-bottom: 1px solid #D1D5DB; }
    .acct-table thead th { background: #F3F4F6 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .acct-table tbody tr.acct-settle-carry.is-result td { border-top: 2px solid #111827; }
}


/* ================================================
   15. 접근성 — 움직임 최소화 설정 존중
   ================================================ */
@media (prefers-reduced-motion: reduce) {
    .acct-tab,
    .acct-bar-fill,
    .acct-icon-btn,
    .acct-cat-actions,
    .acct-input,
    .acct-field input,
    .acct-field select { transition: none !important; }
}