/* Calendar expense summary — fixed categories with a pinned total.

   It occupies its own row of .calendar-product-shell so the month view's
   clipped content box cannot swallow it.
   Kept in its own file so the Calendar surface stylesheet stays owned by the
   Calendar design work. Colors come from the shared semantic tokens, so light,
   dark and system themes follow the rest of the site without per-screen values.
   The one exception is the six category colours below, which no semantic token
   covers — they are named here, once, with a Dark value each.

   It stays one row at every width: the total remains pinned on the right while
   the six fixed category slots can scroll horizontally. */

.calendar-expense-slot {
  /* A grid item defaults to min-width:auto and refuses to shrink below its
     content, which pushed the whole Calendar wider than a phone screen. */
  min-width: 0;
}

.calendar-expense-slot[hidden] {
  display: none;
}

.calendar-amount-overview {
  min-width: 0;
  margin-top: 8px;
  border-top: 1px solid var(--lotbi-calendar-grid-line, #dbe1ea);
}

.calendar-amount-overview .calendar-amount-line { margin-top: 0; border-top: 0; }
.calendar-amount-category-groups { min-width: 0; padding: 0 4px 8px; }
.calendar-amount-categories {
  max-width: none;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  margin: 0;
}
.calendar-amount-category {
  min-width: 0;
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: 6px;
  padding: 4px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.calendar-amount-category dt { min-width: 0; color: var(--lotbi-calendar-muted-ink, #687180); font-size: 12px; font-weight: 700; }
.calendar-amount-category dd { margin: 0; color: var(--lotbi-text-primary, #303642); font-size: 12px; font-weight: 750; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* One fixed colour per category, so the six names are told apart at a glance
   instead of being read one by one. Fixed, never random: a reader who learns
   that 음식 is red has to find it red next month too, and a colour that moves
   is worse than no colour at all.

   The colour is a second signal, never the only one — every item still says
   음식 or 여행 in words, so nothing here is lost to a reader who cannot tell
   the hues apart. Only the name is tinted; the amounts stay the neutral
   --lotbi-text-secondary, because a coloured number reads as a status
   (over budget, refunded) that this bar never means.

   Measured against the bar's own background, not the page's: white in Light,
   #202631 in Dark. Light 6.76:1–8.20:1, Dark 8.10:1–8.74:1, all past WCAG AA
   4.5:1 and most past AAA 7:1. Yellow is deliberately absent — it cannot hold
   4.5:1 on white at this size. 미분류 stays grey on purpose: it is the absence
   of a choice, not a seventh kind of spending. */
.calendar-expense-summary,
.calendar-amount-overview {
  --calendar-expense-food: #b0201c;
  --calendar-expense-travel: #00605a;
  --calendar-expense-shopping: #7b1fa2;
  --calendar-expense-living: #14508f;
  --calendar-expense-other: #6d4c41;
  --calendar-expense-unclassified: #545c68;
}

.calendar-expense-summary {
  box-sizing: border-box;
  width: 100%;
  margin-top: 8px;
  padding: 10px 12px;
  border: 1px solid var(--lotbi-border-default, #d9dee8);
  border-radius: 12px;
  background: var(--lotbi-surface-elevated, #ffffff);
  color: var(--lotbi-text-primary, #303642);
  font-size: 0.875rem;
  line-height: 1.3;
}

.calendar-expense-notice {
  margin: 0;
  color: var(--lotbi-text-muted, #737b88);
  font-size: 0.76rem;
}

/* "금액 없는 일정 N건 제외" was the same muted grey as decoration, and it is
   not decoration — it is the one line that says the total does not cover
   everything. At --lotbi-text-muted the 대표 could not read it. Primary text,
   which the token set already flips for dark mode, so no colour is spelled
   out twice. It stays a size smaller than the numbers: legible, not louder
   than the total. */
.calendar-expense-coverage {
  margin: 0;
  color: var(--lotbi-text-primary, #303642);
  font-size: 0.8rem;
  flex: 0 0 auto;
  align-self: center;
}

.calendar-expense-storage-note {
  margin: 6px 0 0;
  color: var(--lotbi-text-muted, #737b88);
  font-size: 0.75rem;
  line-height: 1.35;
  text-align: left;
}

.calendar-expense-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.calendar-expense-line + .calendar-expense-line {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--lotbi-border-default, #d9dee8);
}

/* The categories scroll sideways when they cannot all fit. They never wrap:
   wrapping is how this became a multi-row table that fell below the fold. */
.calendar-expense-items {
  /* styles.css also caps `dl` at 720px, which would crop the bar. */
  max-width: none;
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  margin: 0;
  overflow-x: auto;
  scrollbar-width: thin;
  white-space: nowrap;
}

/* styles.css styles every `dl div` on the site as a two-column legal-page row
   with 17px of vertical padding and a rule beneath it. That lands on these
   items and turned the one-line bar into a 52px-tall block, so the geometry is
   spelled out here rather than inherited. */
.calendar-expense-item {
  display: flex;
  align-items: baseline;
  gap: 4px;
  flex: 0 0 auto;
  /* Never stretched by the row: the bar's height is one line of text. */
  align-self: center;
  grid-template-columns: none;
  padding: 0;
  border: 0;
}

.calendar-expense-item dt {
  color: var(--lotbi-text-muted, #737b88);
}

.calendar-expense-item[data-expense-category="FOOD"] dt {
  color: var(--calendar-expense-food);
}

.calendar-expense-item[data-expense-category="TRAVEL"] dt {
  color: var(--calendar-expense-travel);
}

.calendar-expense-item[data-expense-category="SHOPPING"] dt {
  color: var(--calendar-expense-shopping);
}

.calendar-expense-item[data-expense-category="LIVING"] dt {
  color: var(--calendar-expense-living);
}

.calendar-expense-item[data-expense-category="OTHER"] dt {
  color: var(--calendar-expense-other);
}

.calendar-expense-item[data-expense-category="UNCLASSIFIED"] dt {
  color: var(--calendar-expense-unclassified);
}

.calendar-amount-category[data-expense-category="FOOD"] dt { color: var(--calendar-expense-food); }
.calendar-amount-category[data-expense-category="TRAVEL"] dt { color: var(--calendar-expense-travel); }
.calendar-amount-category[data-expense-category="SHOPPING"] dt { color: var(--calendar-expense-shopping); }
.calendar-amount-category[data-expense-category="LIVING"] dt { color: var(--calendar-expense-living); }
.calendar-amount-category[data-expense-category="OTHER"] dt { color: var(--calendar-expense-other); }
.calendar-amount-category[data-expense-category="UNCLASSIFIED"] dt { color: var(--calendar-expense-unclassified); }

/* CALENDAR-HOME-REDESIGN-01 — one compact five-category table in the selected
   date rail. It uses the actual month summary and never adds the day total to
   it, so a schedule amount is counted once. */
.calendar-day-panel .calendar-amount-line {
  min-height: 46px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  margin: 0;
  padding: 0 0 8px;
}
.calendar-day-panel .calendar-amount-line-label { color: var(--lotbi-text-primary, #303642); font-weight: 750; }
.calendar-day-panel .calendar-amount-line-amount { font-size: 19px; font-weight: 850; }
.calendar-day-panel .calendar-amount-line-loading,
.calendar-day-panel .calendar-amount-line-error { display: block; min-height: 0; padding: 2px 0 8px; }
.calendar-day-panel .calendar-amount-category-groups { padding: 0; }
.calendar-day-panel .calendar-amount-categories { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.calendar-day-panel .calendar-amount-category { min-width: 0; flex-direction: column; align-items: center; gap: 3px; padding: 4px 1px; text-align: center; }
.calendar-day-panel .calendar-amount-category dt { font-size: 10px; }
.calendar-day-panel .calendar-amount-category dd { max-width: 100%; overflow: hidden; font-size: 10.5px; text-overflow: ellipsis; }
@media (max-width: 520px) {
  .calendar-day-panel .calendar-amount-categories { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 10px; }
  .calendar-day-panel .calendar-amount-category { align-items: flex-start; }
  .calendar-day-panel .calendar-amount-category dd { overflow: visible; text-overflow: clip; }
}

/* CALENDAR-APPROVED-DESIGN-FINAL-03 — 확정 시안의 합계 카드. */
.consumer-workspace[data-workspace='calendar'] .calendar-amount-overview {
  margin-top: 14px;
  padding: 16px 18px;
  border: 1px solid var(--lotbi-calendar-grid-line, #dbe1ea);
  border-radius: 16px;
  background: var(--lotbi-calendar-week-selected-surface, #f5f8fc);
}
.consumer-workspace[data-workspace='calendar'] .calendar-amount-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.consumer-workspace[data-workspace='calendar'] .calendar-amount-head .calendar-amount-line {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: 0;
}
.consumer-workspace[data-workspace='calendar'] .calendar-amount-line-label { font-size: 15px; font-weight: 800; }
.consumer-workspace[data-workspace='calendar'] .calendar-amount-line-amount { font-size: 30px; font-weight: 950; }
.consumer-workspace[data-workspace='calendar'] .calendar-amount-line-chevron { display: none; }
.consumer-workspace[data-workspace='calendar'] .calendar-amount-image-button {
  min-height: 48px;
  padding: 10px 16px;
  border: 1px solid var(--lotbi-calendar-grid-line, #dbe1ea);
  border-radius: 12px;
  background: var(--lotbi-surface-primary, #fff);
  color: var(--lotbi-text-primary, #303642);
  cursor: pointer;
  font: inherit;
  font-weight: 850;
  white-space: nowrap;
}
.consumer-workspace[data-workspace='calendar'] .calendar-amount-category-groups { padding: 0; }
.consumer-workspace[data-workspace='calendar'] .calendar-amount-categories {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--lotbi-calendar-grid-line, #dbe1ea);
}
.consumer-workspace[data-workspace='calendar'] .calendar-amount-category {
  min-width: 0;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 4px 8px;
  text-align: center;
}
.consumer-workspace[data-workspace='calendar'] .calendar-amount-category dt { font-size: 12px; font-weight: 750; }
.consumer-workspace[data-workspace='calendar'] .calendar-amount-category dd { margin-top: 2px; font-size: 15px; font-weight: 900; }

@media (max-width: 900px) {
  .consumer-workspace[data-workspace='calendar'] .calendar-amount-overview { padding: 14px; }
  .consumer-workspace[data-workspace='calendar'] .calendar-amount-line-amount { font-size: 24px; }
  .consumer-workspace[data-workspace='calendar'] .calendar-amount-image-button { padding-inline: 10px; font-size: 12px; }
  .consumer-workspace[data-workspace='calendar'] .calendar-amount-categories { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.calendar-expense-item dd {
  margin: 0;
  color: var(--lotbi-text-secondary, #3d4653);
  font-variant-numeric: tabular-nums;
}

/* Outside the scrolling list on purpose: the total stays on the right however
   far the fixed category row is scrolled. */
.calendar-expense-total {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  align-self: center;
  margin: 0;
  padding-left: 14px;
  border-left: 1px solid var(--lotbi-border-strong, #cfd6e2);
}

.calendar-expense-total-label {
  color: var(--lotbi-text-primary, var(--text, #212121));
  font-size: 0.95rem;
  font-weight: 850;
  white-space: nowrap;
}

.calendar-expense-total-amount {
  color: var(--lotbi-text-primary, #303642);
  font-size: 0.95rem;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
}

/* Dark needs its own values, not the Light ones dimmed: #b0201c on #202631 is
   2.06:1, unreadable. These are the same six hues raised to hold the dark
   surface, so 음식 is still the red one. Three selectors because that is how
   many dark states site-theme-tokens.css has — the chosen theme, the paint
   the bootstrap does before the body attribute lands, and "system", which is
   the default nobody has touched. A rule written only for
   body[data-site-theme="dark"] misses the OS-dark reader entirely. */
body[data-site-theme="dark"] .calendar-expense-summary,
body[data-site-theme="dark"] .calendar-amount-overview,
html[data-site-theme-bootstrap="dark"] body:not([data-site-theme]) .calendar-expense-summary,
html[data-site-theme-bootstrap="dark"] body:not([data-site-theme]) .calendar-amount-overview {
  --calendar-expense-food: #ffab91;
  --calendar-expense-travel: #68d7c2;
  --calendar-expense-shopping: #dbabff;
  --calendar-expense-living: #9ec5ff;
  --calendar-expense-other: #e2b98f;
  --calendar-expense-unclassified: #b6bec9;
}

@media (prefers-color-scheme: dark) {
  body[data-site-theme="system"] .calendar-expense-summary,
  body[data-site-theme="system"] .calendar-amount-overview,
  html[data-site-theme-bootstrap="system"] body:not([data-site-theme]) .calendar-expense-summary,
  html[data-site-theme-bootstrap="system"] body:not([data-site-theme]) .calendar-amount-overview {
    --calendar-expense-food: #ffab91;
    --calendar-expense-travel: #68d7c2;
    --calendar-expense-shopping: #dbabff;
    --calendar-expense-living: #9ec5ff;
    --calendar-expense-other: #e2b98f;
    --calendar-expense-unclassified: #b6bec9;
  }
}

@media (max-width: 520px) {
  .calendar-amount-categories { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .calendar-amount-category { padding: 4px 0; }
  .calendar-expense-summary {
    padding: 10px;
    font-size: 0.8125rem;
  }

  .calendar-expense-items {
    gap: 11px;
  }

  .calendar-expense-line {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 9px;
  }

  .calendar-expense-total {
    display: inline-flex;
    padding: 0 0 0 9px;
    border-right: 0;
    border-left: 1px solid var(--lotbi-border-strong, #cfd6e2);
    border-bottom: 0;
  }

  .calendar-expense-total-amount {
    font-size: 0.9rem;
  }

  .calendar-expense-total-label {
    font-size: 0.9rem;
  }

  .calendar-expense-storage-note {
    margin-top: 5px;
  }
}