Design

8px 버튼 · 12px 표면 · 16px 다이얼로그. 예산은 선택일부터 적용하며, 오늘과 미래의 차액은 누적 절약에 포함하지 않습니다. 수입은 하루 목표를 직접 선택했을 때만 더합니다. 남은 금액은 예산 − 지출 + 연결한 수입으로 계산하고 날짜별 차감액에는 지출 − 수입을 표시합니다. 수입이 있으면 요약에 지출과 수입을 함께 표시합니다.

공유는 사용자가 직접 시작합니다. 전체 또는 기간을 선택하며, 읽기는 누구나, 댓글과 반응은 로그인한 사용자만 가능합니다. 공유 종료는 원래 기록을 지우지 않습니다. 각 항목 아래에 반응과 최근 댓글 세 개를 표시하며, 항목을 누르면 같은 자리에서 댓글을 작성합니다. 반응은 공통 아이콘과 개수로 표시합니다. 반응 높이는 데스크톱 28px, 모바일 32px입니다. 남길 권한이 없는 반응도 같은 색과 불투명도로 표시합니다. 내 가계부의 기록·상세·하루 총평에는 같은 댓글과 반응 컴포넌트를 사용합니다. 댓글은 배경과 테두리 없이 13px 텍스트로 표시하며, 이름 첫 글자를 넣은 26px 원형 아바타(모바일 24px)를 나란히 둡니다.

고정지출은 홈·기록 화면에서 하나의 패널을 재사용합니다. 추가는 항상 노출하고, 목록은 제목과 화살표를 눌러 펼칩니다. 이름과 주기·다음 날짜는 두 줄, 금액은 오른쪽에 맞추며 항목을 눌러 수정합니다. 아이콘은 중립색으로 사용하고 삭제는 작은 별도 버튼으로 둡니다. 설정에는 두지 않습니다. 신규 반복에 지난 시작일을 고르면 날짜 아래 짧은 안내를 표시합니다. 공통 record-editor-dialog와 dialog-frame: 데스크톱 800px 이내, 최대 min(88dvh, 860px), 모바일 화면 너비의 sheet. 헤더와 푸터는 고정하며 본문만 스크롤합니다. 이름과 금액을 나란히 배치하고 반복·날짜를 한 그룹으로 묶습니다. 입력 높이 46px, 본문 간격 22px, 공통 금액·필드 토큰과 분류 선택을 사용합니다. 삭제 확인은 기존 confirm-dialog를 사용합니다.

카드 제목은 15px · 620 · 줄 높이 22px로 통일합니다. 제목과 동작은 세로 중앙을 맞추며 목표 목록은 중첩된 테두리 없이 얇은 구분선으로 나눕니다.

고정 헤더 · 스크롤 본문 · 고정 푸터. 본문 마지막 아이콘 아래 24px, 모바일 safe area와 화면 높이를 반영합니다. 금액 입력은 숫자마다 쉼표를 넣고 완성된 수식에만 결과를 표시합니다. 하루 목표 카드는 모바일 상하 8px·좌우 16px로 버튼 안쪽 여백을 고려해 맞춥니다.

하단 동작 위에만 구분선을 둡니다. 제목·금액·정보의 좌우 기준선은 24px, 모바일은 20px로 통일합니다. 금액과 정보 사이는 24px, 정보 행은 같은 간격을 사용합니다. 긴 메모는 줄바꿈하고 본문만 스크롤합니다.

기본은 접힘이며 제목 전체를 눌러 펼칩니다. 키보드 포커스는 유지하고 모바일 기본 터치 강조만 숨깁니다. 카드/통장은 설정에서만 추가합니다. 기록 선택란은 목표와 같은 8px 라벨 간격을 사용합니다.

제목과 분류는 세로 중심을 맞춥니다. 메모 앞에는 작은 메모 아이콘을 둡니다. 금액과 카드/통장은 가운데 정렬하며 선택하지 않은 기록은 금액만 표시합니다. 카드/통장은 직접 등록한 이름만 사용하고 공유 가계부에는 표시하지 않습니다.