/* ==========================================================================
   가계부 임포트 마법사(modals/budget.js) — 업로드→시트뷰어→열매핑→좌우 대조
   체크리스트를 한 다이얼로그 안에서 단계 전환한다. 탭/패널 토글은
   .icon-picker-tabs/-panel과 같은 패턴, 여기는 폭이 넓은 표 콘텐츠를 위해
   전용 클래스로 둔다.
   ========================================================================== */
.budget-import-dialog {
  width: calc(100% - 32px);
  max-width: 640px;
  text-align: left;
}

/* 시트 뷰어/열 매핑 단계(JS가 .is-wide를 붙인다)는 표를 봐야 해서 가계부 창의
   95%까지 넓힌다. 오버레이가 .window에 스코프되어 있어 %는 창 기준이다. */
.budget-import-dialog.is-wide {
  width: 95%;
  height: 95%;
  max-width: none;
  display: flex;
  flex-direction: column;
}

.budget-import-dialog.is-wide .budget-wizard-step:not([hidden]) {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

.budget-import-dialog.is-wide .budget-preview-table-wrap,
.budget-import-dialog.is-wide .budget-diff-list {
  flex: 1 1 auto;
  max-height: none;
  min-height: 0;
}

/* 단계 안의 목록만 남은 높이를 먹고, 나머지 줄(안내문·건수·버튼)은 제 높이를
   그대로 지킨다 — 안 그러면 flex 축소로 글자가 아래쪽부터 잘린다. */
.budget-wizard-step > *:not(.budget-group-list):not(.budget-diff-list):not(.budget-preview-table-wrap) {
  flex: 0 0 auto;
}

.budget-wizard-step[hidden] {
  display: none;
}

/* 파일 선택·비밀번호·불러오기 한 줄, 그 아래 시작/끝 행 한 줄 — 업로드부터
   행·열 지정까지 한 화면에서 끝낸다. */
.budget-upload-bar,
.budget-range-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.budget-range-bar label {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* 파일 선택 — 네이티브 버튼은 다른 버튼과 스타일을 맞출 수 없어 감춰 두고(포커스는
   유지해 키보드로도 열린다) label을 .small-btn.normal-button으로 오른쪽에 붙인다.
   상자 패딩을 0으로 두어 버튼이 상자를 키우지 않고 높이를 그대로 채운다. */
.budget-file-picker {
  position: relative;
  display: flex;
  align-items: stretch;
  padding: 0;
  overflow: hidden;
}

.budget-file-name {
  flex: 1 1 auto;
  min-width: 0;
  align-self: center;
  padding: 0 6px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--system-c-font-color);
}

.budget-file-picker .small-btn {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  height: auto;
  border-radius: 0;
}

.budget-file-picker input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* .content-input-box는 기본이 width:100%다 — 한 줄에 나란히 놓는 칸만 되돌린다. */
.budget-upload-bar .content-input-box {
  width: auto;
  flex: 1 1 180px;
}

.budget-range-bar .content-input-box {
  width: 90px;
}

/* 비밀번호는 짧게 — 남는 폭은 파일 칸이 가져간다. */
.budget-upload-bar [data-budget-password] {
  flex: 0 1 130px;
}

/* 안내/상태 문구는 flex 축소로 눌려 잘리지 않게 최소 폭을 확보하고, 자리가
   모자라면 아래 줄로 넘어가 전부 보이게 한다. */
.budget-upload-bar .settings-inline-message,
.budget-range-bar .settings-inline-message {
  flex: 1 1 240px;
  min-width: 0;
  white-space: normal;
}

.budget-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 10px;
}

.budget-tabs button {
  height: 28px;
  padding: 0 10px;
  border: 1px solid rgba(120, 120, 120, .3);
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
}

.budget-tabs button.is-active {
  border-color: var(--focus-color) !important;
  color: var(--focus-color);
}

.budget-preview-table-wrap {
  position: relative;
  max-height: 260px;
  overflow: auto;
  border: 1px solid rgba(120, 120, 120, .3);
  border-radius: 6px;
  margin-bottom: 10px;
}

.budget-preview-table {
  border-collapse: collapse;
  width: max-content;
  min-width: 100%;
  font-size: 12px;
  /* 셀 텍스트가 드래그로 선택되면 시작/끝 행 선을 끌 때 방해된다. */
  user-select: none;
}

/* 열 머리 칸(기준 열 select)과 행 번호 칸 — 스크롤해도 보이게 위/왼쪽에 고정. */
.budget-preview-table-wrap th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--system-c-content-color);
}

.budget-preview-table-wrap .budget-preview-rowno {
  position: sticky;
  left: 0;
  background: var(--system-c-content-color);
  color: var(--system-c-desc-color);
}

.budget-column-select {
  width: 100%;
  min-width: 84px;
  font-size: 11px;
}

/* 지정된 열은 머리 칸을 강조해 표에서 바로 구분되게 한다. */
.budget-column-select.is-mapped {
  border-color: var(--focus-color) !important;
  color: var(--focus-color);
}

/* 시작/끝 행 선과 범위 밖 음영 — 표 위에 절대배치로 겹쳐 두고 위치만 바꾼다.
   행마다 클래스를 칠하거나 <tr>을 옮기면 수천 행 시트에서 매번 표 전체가 다시
   계산돼 브라우저가 멈춘다(스크롤 컨테이너 기준 절대배치라 함께 스크롤된다). */
.budget-range-overlay {
  position: absolute;
  top: 0;
  left: 0;
}

.budget-range-shade {
  position: absolute;
  left: 0;
  width: 100%;
  background: rgba(var(--system-c-rgb), .55);
  pointer-events: none;
}

.budget-range-shade[data-budget-shade="top"] {
  top: 0;
}

.budget-range-handle {
  position: absolute;
  left: 0;
  width: 100%;
  height: 0;
  border-top: 2px solid var(--focus-color);
  cursor: row-resize;
}

.budget-range-handle > span {
  position: sticky;
  left: 0;
  display: inline-block;
  padding: 0 4px;
  font-size: 11px;
  line-height: 14px;
  color: var(--focus-font-color);
  background: var(--focus-color);
  border-radius: 0 0 4px 0;
}

.budget-preview-table th,
.budget-preview-table td {
  padding: 4px 8px;
  border-bottom: 1px solid rgba(120, 120, 120, .2);
  border-right: 1px solid rgba(120, 120, 120, .12);
  white-space: nowrap;
}

.budget-diff-list {
  max-height: 360px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* 왼쪽 원본 | 체크박스 | 오른쪽 저장될 내용 — 체크박스는 오른쪽(처리 결과) 바로 왼쪽. */
.budget-diff-row {
  display: grid;
  grid-template-columns: 1fr 20px 1fr;
  gap: 8px;
  align-items: start;
  padding: 8px;
  border: 1px solid rgba(120, 120, 120, .2);
  border-radius: 6px;
}

.budget-diff-row.is-unchecked {
  opacity: .45;
}

.budget-diff-checkbox {
  margin-top: 4px;
  accent-color: var(--focus-color);
}

.budget-diff-original {
  font-size: 12px;
  color: var(--system-c-desc-color);
  white-space: pre-line;
  word-break: break-all;
}

.budget-diff-processed {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.budget-diff-types {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.budget-diff-types select {
  flex: 1;
  min-width: 80px;
}

/* 날짜시간(왼쪽) · 금액(오른쪽) — 읽기 전용 한 줄. */
.budget-diff-fields {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 10px;
  font-size: 12px;
  color: var(--system-c-desc-color);
}

/* ==========================================================================
   가계부 모달(modals/budget.js) — 좌측 저축 자산 사이드바 + 우측(월간 뷰
   캘린더+리스트, 연간 뷰 통계/차트). 색상은 헤더 "⚙"로 설정.
   ========================================================================== */
.budget-shell-layout {
  display: flex;
  align-items: stretch;
  height: 100%;
}

.budget-sidebar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 160px;
  flex: 0 0 160px;
  padding: 16px 0;
  border-right: 1px solid rgba(120, 120, 120, .2);
}

.budget-asset-total {
  font-size: 18px;
}

.budget-asset-rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
}

.budget-asset-row {
  display: flex;
  justify-content: space-between;
  gap: 6px;
}

.budget-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.budget-side-dialog {
  max-width: 320px;
  text-align: left;
}

.budget-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 16px 16px 0;
}

.budget-monthly,
.budget-yearly {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
}

/* display:flex(작성자 스타일)가 UA 기본 [hidden]을 이겨서 월간/연간 탭을
   바꿔도 두 패널이 겹쳐 보였다 -- .comment[hidden]과 같은 이유. */
.budget-monthly[hidden],
.budget-yearly[hidden] {
  display: none;
}

.budget-monthly-header,
.budget-yearly-header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.budget-date-nav {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* 연간 표·차트와 같은 결로 월간 뷰(캘린더·목록)도 얇게 — 합계만 조금 강조. */
.budget-monthly,
.budget-yearly {
  font-weight: 300;
}

.budget-monthly-totals,
.budget-yearly-totals {
  display: flex;
  gap: 14px;
  font-weight: 500;
}

.budget-monthly-body {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: stretch;
  height: 520px;
}

.budget-calendar {
  flex: 1 1 380px;
  display: flex;
  flex-direction: column;
}

.budget-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: 68px;
  flex: 0 0 auto;
  gap: 4px;
}

.budget-calendar-weekday {
  text-align: center;
  font-size: 12px;
  color: var(--system-c-desc-color);
}

.budget-calendar-cell {
  display: flex;
  flex-direction: column;
  min-height: 68px;
  padding: 4px;
  border-radius: 6px;
  font-size: 11px;
  background: rgba(var(--system-c-content-rgb), var(--system-c-content-alpha)) !important;
}

.budget-calendar-cell.is-empty {
  background: transparent !important;
}

.budget-calendar-day {
  font-weight: 600;
  margin-bottom: auto;
}

.budget-calendar-amount {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* 내역은 필요한 만큼만 — 남는 폭은 달력이 가져간다(소분류 10글자가 들어갈 폭). */
.budget-list {
  flex: 0 1 360px;
  min-height: 0;
  overflow: auto;
}

.budget-list-date {
  padding: 8px 0 4px;
  font-weight: 700;
}

.budget-list-row > span:last-child {
  text-align: right;
}

.budget-list-row {
  display: grid;
  grid-template-columns: 40px minmax(0, 72px) minmax(0, 120px) 1fr;
  gap: 6px;
  align-items: center;
  padding: 3px 0;
  font-size: 12px;
}

.budget-yearly-body {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* 연간 뷰의 표·그래프는 각각 System C 컨텐츠 카드로 감싼다(사이드바 자산 카드와
   같은 표면) — 배경 위에 그냥 떠 있으면 경계가 없어 읽기 어렵다. */
.budget-chart-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  padding: 12px;
  border-radius: 5px;
  background: rgba(var(--system-c-content-rgb), var(--system-c-content-alpha)) !important;
}

/* 유형별 파이 | 유형별 월간 그래프를 한 줄에 나란히 — 폭이 모자라면 막대
   그래프가 아래로 접힌다(컨테이너 쿼리 없이 flex-wrap으로 처리). */
.budget-chart-row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: flex-start;
}

.budget-chart-row > :first-child {
  flex: 0 1 210px;
  min-width: 170px;
}

.budget-pie-svg {
  max-height: 150px;
}

.budget-chart-row > :last-child {
  flex: 1 1 380px;
}

/* 12개월 칸이 모두 같은 폭이어야 아래 그래프의 월 위치와 맞는다 — 첫 열(항목명)
   폭을 고정하고 나머지를 12등분한다(그래프의 padLeft도 같은 8%). */
.budget-yearly-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 12px;
  font-weight: 200;
}

.budget-yearly-table th:first-child {
  width: 8%;
}

.budget-yearly-table th,
.budget-yearly-table td {
  width: 7.666%;
  padding: 4px 2px;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  border-right: 0;
  border-bottom: 1px solid rgba(120, 120, 120, .2);
}

.budget-yearly-table strong {
  font-weight: 600;
}

/* 폭을 100% 채워야 위 연간 표의 월 칸과 자리가 맞으므로 높이 캡은 두지 않는다 —
   대신 viewBox를 납작하게(760x170) 잡아 창이 넓어도 세로가 덜 커지게 했다.
   그래프 글씨는 표·라벨보다 얇게. */
.budget-chart-svg {
  display: block;
  width: 100%;
  height: auto;
}

/* homepage.css의 전역 svg 규칙(stroke:currentColor; fill:none; stroke-width:1.8)은
   아이콘용이라 차트에 그대로 먹으면 글자가 윤곽선으로 그려져 굵어 보이고 막대에도
   테두리가 생긴다 — 차트 안에서는 되돌린다. */
.budget-chart-svg text {
  fill: currentColor;
  stroke: none;
  font-weight: 400;
}

.budget-chart-svg rect,
.budget-chart-svg circle,
.budget-chart-svg path {
  stroke: none;
}

/* 각진 막대·직선 격자가 딱딱해 보여서 CSS만으로 부드럽게 — SVG 기하 속성(rx/ry)과
   전환/호버가 CSS로 먹는다(JS는 그대로). */
.budget-chart-svg rect {
  rx: 5;
  ry: 5;
  transition: opacity .15s ease;
}

.budget-chart-svg rect:hover,
.budget-chart-svg circle:hover {
  opacity: .75;
  cursor: default;
}

.budget-chart-svg polyline {
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* 중심에서 자른 부채꼴 조각 — 라벨이 없으니 조각 자체가 유일한 조작 대상이다
   (설명은 창 공용 툴팁). 선택/호버는 살짝 커지고 흐려지게. */
.budget-pie-segment {
  cursor: pointer;
  transform-origin: 90px 90px;
  transition: opacity .15s ease, transform .15s ease;
}

.budget-pie-segment:hover {
  opacity: .8;
}

.budget-pie-segment.is-selected {
  transform: scale(1.06);
}

/* 헤더 아이콘 버튼(색상 설정 ⚙ / 데이터 추가 +) — 다른 인라인 아이콘
   (.grid-cell-comment-icon 등)과 같은 24x24 윤곽선 규칙. */
.budget-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.budget-icon-btn svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 캘린더 강조 — 주말은 요일 머리글과 날짜 숫자 둘 다, 오늘은 테두리,
   내역이 없는 날은 흐리게. 색은 테마의 강조/설명 색을 그대로 쓴다. */
.budget-calendar-weekday.is-sun,
.budget-calendar-cell.is-sun .budget-calendar-day {
  color: #e05252;
}

.budget-calendar-weekday.is-sat,
.budget-calendar-cell.is-sat .budget-calendar-day {
  color: #4a7fd0;
}

.budget-calendar-cell.is-today {
  outline: 2px solid var(--focus-color);
  outline-offset: -2px;
}

.budget-calendar-cell.is-blank {
  opacity: .55;
}

/* 연간 차트 y축 — 값 비교가 tooltip에만 의존하지 않도록 4등분 그리드라인.
   실선은 딱딱해서 점선 + 옅게. */
.budget-chart-grid {
  stroke: rgba(120, 120, 120, .3);
  stroke-width: 1;
  stroke-dasharray: 3 5;
}

.budget-chart-axis-label {
  fill: var(--system-c-desc-color);
  opacity: .75;
}

/* 미리보기가 셀 상한에서 잘렸을 때 맨 아래에 붙는 안내 줄 */
.budget-preview-truncated {
  cursor: default;
  color: var(--system-c-desc-color);
  white-space: normal;
}

/* 오버레이 스크롤바(UI.bindWindowOverlayScrollbar)를 쓰는 영역은 창 본문과 같이
   네이티브 스크롤바를 숨긴다 — .window-content/.notification-list와 같은 패턴. */
.budget-list,
.budget-diff-list,
.budget-preview-table-wrap {
  scrollbar-width: none;
}

.budget-list::-webkit-scrollbar,
.budget-diff-list::-webkit-scrollbar,
.budget-preview-table-wrap::-webkit-scrollbar {
  display: none;
}

/* 구분 일괄 작업 — 시트의 (타입|대분류|소분류|내용) 고유 조합 목록. 행 카드는
   캐릭터 관계/색 행과 같은 System C 컨텐츠 배경. */
.budget-group-list {
  max-height: 420px;
  overflow: auto;
  scrollbar-width: none;
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 10px;
}

.budget-group-list::-webkit-scrollbar {
  display: none;
}

.budget-import-dialog.is-wide .budget-group-list {
  flex: 1 1 auto;
  max-height: none;
  min-height: 0;
}

.budget-group-row {
  display: grid;
  grid-template-columns: 20px auto minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border-radius: 5px;
  background: rgba(var(--system-c-content-rgb), var(--system-c-content-alpha)) !important;
}

/* 체크를 끈 조합은 체크리스트로도, 학습으로도 가지 않는다. */
.budget-group-row.is-unchecked {
  opacity: .45;
}

/* 조합 이름을 누르면 아래에 원본 행이 펼쳐진다. */
.budget-group-source {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
  height: auto;
  padding: 0;
  text-align: left;
  cursor: pointer;
}

.budget-group-details {
  grid-column: 1 / -1;
  font-size: 12px;
  color: var(--system-c-desc-color);
  word-break: break-all;
}

.budget-group-details[hidden] {
  display: none;
}

.budget-group-source > strong,
.budget-group-source > span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.budget-group-source > span {
  font-size: 12px;
  color: var(--system-c-desc-color);
}

/* select 자리를 대신하는 직접 입력칸 + 되돌리기 버튼. */
.budget-direct-input {
  display: flex;
  flex: 1;
  min-width: 80px;
  gap: 2px;
}

.budget-direct-input input {
  flex: 1;
  min-width: 0;
}

/* 체크리스트의 설명 입력 — 바닥 선만 있는 칸. */
.budget-diff-description {
  width: 100%;
  box-sizing: border-box;
  padding: 2px 0;
  font-size: 12px;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(120, 120, 120, .35) !important;
  border-radius: 0 !important;
  outline: none;
}

.budget-diff-description:focus {
  border-bottom-color: var(--focus-color) !important;
}

/* 색 지정 — 캐릭터 색 지정 UI와 같은 행 구성(순서 변경/추가/제거는 없음). */
.budget-color-rows {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 16px;
}

.budget-color-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 23px 90px;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 2px 8px;
  border-radius: 5px;
  background: rgba(var(--system-c-content-rgb), var(--system-c-content-alpha)) !important;
}

.budget-color-input {
  width: 23px !important;
  height: 27px;
  padding: 0;
  border: 0 !important;
  border-radius: 0;
  background: none;
  cursor: pointer;
}

.budget-color-code {
  width: 90px;
  text-align: center;
}

/* 사이드바 자산 카드 — 캐릭터 관계 행과 같은 카드. */
.budget-asset-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 5px;
  background: rgba(var(--system-c-content-rgb), var(--system-c-content-alpha)) !important;
}

/* 헤더: 연/월은 왼쪽, 월간·연간 탭과 버튼은 오른쪽. */
.budget-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.budget-header-actions .budget-tabs {
  margin-bottom: 0;
}

/* 구분 일괄 지정 바 — 사용 중인 조합이 있을 때만 보인다. */
.budget-group-bulk {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  padding: 5px 8px;
  border-radius: 5px;
  background: rgba(var(--system-c-content-rgb), var(--system-c-content-alpha)) !important;
}

.budget-group-bulk[hidden] {
  display: none;
}

.budget-bulk-fields {
  flex: 1 1 auto;
  min-width: 0;
}

/* 사용 / 사용안함 — 지금 상태 하나만 보이는 전환 버튼(체크박스 대체). */
.budget-group-row [data-budget-use] {
  /* 두 상태가 같은 폭을 차지해야 뒤쪽 열이 어긋나지 않는다. */
  min-width: 58px;
  padding: 0 6px;
  text-align: center;
  white-space: nowrap;
}

/* 일괄 지정 대상으로 고른 조합 */
.budget-group-row.is-selected {
  box-shadow: inset 0 0 0 1px var(--focus-color);
}

/* 건수 줄 — 왼쪽 전체 선택 체크박스 + 오른쪽 건수 */
.budget-count-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.budget-count-row label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  cursor: pointer;
}

.budget-count-row .budget-diff-checkbox {
  margin-top: 0;
}

/* ==========================================================================
   데이터 관리 — 저장된 내역 표(열별 검색 + 행 단위 수정/삭제).
   ========================================================================== */
.budget-data-table {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  margin-bottom: 10px;
  border: 1px solid rgba(120, 120, 120, .3);
  border-radius: 6px;
  overflow: hidden;
}

.budget-data-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  scrollbar-width: none;
}

.budget-data-body::-webkit-scrollbar {
  display: none;
}

.budget-data-row {
  display: grid;
  grid-template-columns: var(--budget-data-columns);
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  font-size: 12px;
  border-bottom: 1px solid rgba(120, 120, 120, .15);
}

.budget-data-row > span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.budget-data-head {
  font-weight: 700;
  background: rgba(var(--system-c-content-rgb), var(--system-c-content-alpha)) !important;
}

.budget-data-filters .content-input-box {
  width: 100%;
  min-height: 22px;
  padding: 2px 6px;
  font-size: 11px;
}

/* 수정 중인 행은 타입/대분류/소분류가 구분 select 하나로 합쳐진다. */
.budget-data-row.is-editing {
  grid-template-columns: 140px 250px 1fr 1fr 110px 110px;
}

.budget-data-row.is-editing .content-input-box {
  width: 100%;
  min-height: 24px;
  padding: 2px 6px;
  font-size: 11px;
}

.budget-data-actions {
  display: flex;
  gap: 4px;
  justify-content: flex-end;
}

/* 블록 제목 — 창 제목줄과 같은 크기감. */
.budget-block-title {
  font-size: 14px;
}

/* 월간 뷰도 달력·내역을 각각 컨텐츠 카드로 감싼다(연간 블록과 같은 표면). */
.budget-calendar {
  padding: 12px;
  border-radius: 5px;
  background: rgba(var(--system-c-content-rgb), var(--system-c-content-alpha)) !important;
}

.budget-list-rows {
  padding: 6px 10px;
  border-radius: 5px;
  background: rgba(var(--system-c-content-rgb), var(--system-c-content-alpha)) !important;
}

/* 달력 금액은 오른쪽 정렬. */
.budget-calendar-amount {
  text-align: right;
}

/* 같은 날짜의 행은 한 블록 — 달력에서 날짜를 누르면 이 블록으로 스크롤한다. */
.budget-list-day {
  scroll-margin-top: 8px;
}

.budget-list-day .budget-list-rows {
  box-shadow: inset 0 0 0 0 transparent;
  transition: box-shadow .35s ease;
}

.budget-list-day.is-focused .budget-list-rows {
  box-shadow: inset 0 0 0 1px var(--focus-color);
  transition-duration: .15s;
}