/* Calculator-only sentence surface. Shared theme/consent/navigation behavior stays intact. */
body.budget-page {
  --budget-page: #fffefa;
  --budget-ink: #102c76;
  --budget-muted: #60719e;
  --budget-accent: #1454ef;
  --budget-rule: #5a91ff;
  --budget-edit: #fff0b9;
  --budget-edit-hover: #ffe89a;
  --budget-error: #ad263d;
  --budget-focus: #1658eb;
  --budget-font: clamp(1.8rem, 5.1vw, 3.5rem);
  background: var(--budget-page);
  color: var(--budget-ink);
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Noto Sans KR', 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
}
html[data-theme="dark"] body.budget-page {
  --budget-page: #111a2b;
  --budget-ink: #e0e8ff;
  --budget-muted: #a4b3d2;
  --budget-accent: #87adff;
  --budget-rule: #527fd5;
  --budget-edit: #3b3422;
  --budget-edit-hover: #4a4027;
  --budget-error: #ffacba;
  --budget-focus: #a0c0ff;
}
body.budget-page .budget-header,
body.budget-page .budget-main,
body.budget-page .budget-footer {
  width: min(100%, 960px);
  max-width: 960px;
  margin-inline: auto;
  padding-inline: 40px;
}
body.budget-page .budget-header { min-height: 0; height: auto; padding-block: 48px 0; }
body.budget-page .brand { gap: 18px; color: var(--budget-ink); }
body.budget-page .brand img { width: 30px; height: 30px; filter: invert(25%) sepia(98%) saturate(5419%) hue-rotate(221deg) brightness(98%) contrast(94%); }
body.budget-page h1 { margin: 0; font-size: 1.2rem; font-weight: 700; line-height: 1.4; letter-spacing: -.04em; }
body.budget-page .budget-main { margin-block: clamp(64px, 12vh, 120px) 64px; }
/* A permanent action slot below the entire calculation keeps open/closed geometry stable. */
body.budget-page .calculator-workspace { position: relative; padding-bottom: 52px; min-width: 0; max-width: 100%; }
body.budget-page .budget-sentence {
  border-left: 5px solid var(--budget-rule);
  padding: 0 0 0 30px;
  color: var(--budget-ink);
  font-size: var(--budget-font);
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: -.06em;
  overflow-wrap: normal;
}
body.budget-page .sentence-line { display: flex; flex-wrap: wrap; align-items: flex-start; column-gap: .2em; row-gap: .15em; min-width: 0; }
body.budget-page .amount-line,
body.budget-page .date-line { margin-bottom: .68em; }
body.budget-page .sentence-line > span:not(.inline-editor) { padding-top: .1em; white-space: nowrap; }
body.budget-page .editable-part { min-width: 0; min-inline-size: 0; max-width: 100%; max-inline-size: 100%; flex: 0 1 auto; }
body.budget-page .inline-editor { display: inline-flex; align-items: center; font: inherit; margin: 0; min-width: 0; max-width: 100%; background: var(--budget-edit); border-radius: .18em; border: 0; padding: .04em .18em; gap: .1em; color: var(--budget-ink); transition: background .15s; }
body.budget-page .inline-editor:hover { background: var(--budget-edit-hover); }
body.budget-page .inline-editor:focus-within { outline: 2px solid var(--budget-focus); outline-offset: 2px; }
body.budget-page .inline-editor input { font: inherit; font-weight: 700; letter-spacing: -.045em; font-variant-numeric: tabular-nums lining-nums; border: 0; border-radius: 0; background: transparent; color: var(--budget-ink); padding: 0; min-height: 1.35em; min-width: 0; max-width: 100%; box-shadow: none; }
body.budget-page .inline-editor input:focus { outline: none; }
body.budget-page .inline-editor input[aria-invalid="true"] { text-decoration: underline wavy var(--budget-error); text-underline-offset: .12em; }
body.budget-page .amount-editor { --amount-chars: 5; }
body.budget-page .amount-editor input { width: calc(var(--amount-chars) * 1ch + .06em); flex: 0 1 auto; }
body.budget-page .amount-editor input::placeholder { color: var(--budget-ink); opacity: .65; font-size: .8em; letter-spacing: -.06em; }
body.budget-page .input-unit { font-weight: 700; line-height: 1.35; padding: 0; }
body.budget-page .edit-icon { width: .52em; height: .52em; min-width: 18px; min-height: 18px; margin-inline: .12em .03em; opacity: .9; filter: invert(15%) sepia(54%) saturate(2525%) hue-rotate(207deg) brightness(88%) contrast(97%); pointer-events: none; }
body.budget-page .amount-editor[data-wide="true"] { font-size: clamp(1.3rem, 4.7vw, 2.8rem); }
/* Reset physical and logical sizing together: old native-date rules set inline-size: 100%. */
body.budget-page .date-part,
body.budget-page .date-editor { width: fit-content; inline-size: fit-content; min-width: 0; min-inline-size: 0; max-width: 100%; max-inline-size: 100%; }
body.budget-page .date-editor input { width: 13.5ch; inline-size: 13.5ch; min-width: 0; min-inline-size: 0; max-width: 100%; max-inline-size: 100%; flex: 0 1 auto; font-size: .82em; text-align: left; appearance: auto; -webkit-appearance: auto; }
body.budget-page input[type="date"]::-webkit-calendar-picker-indicator { width: .7em; height: .7em; margin: 0 0 0 .1em; padding: .1em; cursor: pointer; }
body.budget-page input[type="date"]::-webkit-date-and-time-value { min-height: 1.35em; text-align: left; }
body.budget-page .amount-reading { color: var(--budget-muted); margin: 7px .4em 0; font-size: clamp(.8125rem, 1.6vw, 1rem); line-height: 1.5; font-weight: 500; letter-spacing: -.02em; min-height: 1.5em; }
body.budget-page #budget-korean:empty { margin: 7px .4em 0; min-height: 1.5em; }
/* Both tool groups keep their field-adjacent DOM order, but paint only in the reserved slot. */
body.budget-page .inline-tools { position: absolute; inset: auto auto 0 0; z-index: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; width: min(100%, 320px); inline-size: min(100%, 320px); max-width: 100%; max-inline-size: 100%; background: transparent; color: var(--budget-ink); border: 0; border-radius: 0; box-shadow: none; font-size: .8125rem; letter-spacing: normal; line-height: 1.4; }
body.budget-page #date-tools { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body.budget-page .inline-tools[hidden] { display: none; }
body.budget-page .inline-tools button { min-height: 44px; min-width: 0; padding: 8px; white-space: nowrap; color: var(--budget-ink); background: transparent; border: 1px solid var(--budget-muted); border-radius: 8px; font-size: .8125rem; font-weight: 500; letter-spacing: -.02em; }
body.budget-page .inline-tools button:hover { background: var(--budget-edit); }
body.budget-page .sentence-result { margin: 0; }
body.budget-page .daily-line { align-items: baseline; column-gap: .12em; }
body.budget-page .daily-line > span:not(.inline-editor) { padding-top: 0; }
body.budget-page .big-number { display: inline-block; margin: 0; color: var(--budget-accent); font-size: 1.06em; font-weight: 750; font-variant-numeric: tabular-nums lining-nums; letter-spacing: -.065em; line-height: 1.4; white-space: nowrap; overflow-wrap: normal; max-width: 100%; }
body.budget-page .big-number span { font-size: .87em; margin-left: .025em; font-weight: 650; letter-spacing: -.045em; }
body.budget-page .big-number[data-wide="true"] { font-size: clamp(1.25rem, 5.35vw, 2.9rem); }
body.budget-page .daily-reading { color: var(--budget-muted); font-size: clamp(.8125rem, 1.6vw, 1rem); line-height: 1.5; letter-spacing: -.02em; margin: 2px 0 0; }
body.budget-page .sentence-ending { font: inherit; margin: .5em 0 0; line-height: 1.4; }
body.budget-page .sentence-empty { color: var(--budget-muted); line-height: 1.7; padding-top: .05em; }
body.budget-page .sentence-empty span { color: var(--budget-accent); }
body.budget-page .error { color: var(--budget-error); font-size: .875rem; line-height: 1.7; font-weight: 500; letter-spacing: -.02em; margin: 18px 0 0; max-width: 36rem; }
body.budget-page .error:empty { margin: 0; }
body.budget-page .calculation-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-top: 36px; color: var(--budget-muted); font-size: 1rem; line-height: 1.6; font-variant-numeric: tabular-nums; }
body.budget-page .period { font: inherit; color: inherit; margin: 0; }
body.budget-page #daylabel { border-left: 1px solid var(--budget-muted); padding-left: 12px; white-space: nowrap; }
body.budget-page .calculation-help { padding: 20px 0 0; font-size: 1rem; color: var(--budget-muted); }
body.budget-page .calculation-help summary { color: var(--budget-accent); min-height: 44px; line-height: 44px; text-underline-offset: 4px; }
body.budget-page .calculation-help summary:hover { text-decoration: underline; }
body.budget-page .calculation-help p { max-width: 620px; font-size: .875rem; margin: 8px 0 0; line-height: 1.8; }
body.budget-page .calculation-help .result-caption { color: var(--budget-ink); font-variant-numeric: tabular-nums; font-weight: 600; min-height: 0; }
body.budget-page .result-caption:empty { display: none; }
body.budget-page .legacy-records { margin-top: 20px; padding: 0; color: var(--budget-muted); }
body.budget-page .text-btn { color: var(--budget-accent); min-height: 44px; }
body.budget-page .budget-footer { margin-top: auto; padding-block: 24px 32px; border: 0; display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 20px 24px; font-size: .8125rem; color: var(--budget-muted); }
body.budget-page .theme-switch { margin: 0; padding: 3px; background: transparent; border-color: transparent; border-radius: 12px; flex: 0 1 auto; flex-wrap: wrap; min-width: 0; max-width: 100%; }
body.budget-page .theme-switch button { min-height: 44px; min-width: 48px; color: var(--budget-muted); background: transparent; border-radius: 9px; }
body.budget-page .theme-switch button[aria-checked="true"] { color: var(--budget-ink); background: var(--budget-edit); box-shadow: none; }
body.budget-page .footer-links { display: flex; flex: 1 1 240px; flex-direction: column; align-items: flex-end; min-width: 0; min-inline-size: 0; max-width: 100%; }
body.budget-page .tools-nav { min-width: 0; max-width: 100%; width: auto; margin: 0; padding: 0; border: 0; gap: 4px 16px; justify-content: flex-end; }
body.budget-page .tools-nav a { color: inherit; min-height: 44px; }
body.budget-page .footer-settings { min-width: 0; max-width: 100%; width: auto; justify-content: flex-end; gap: 8px 20px; }
body.budget-page .footer-link { color: inherit; min-height: 44px; }
body.budget-page button:focus-visible,
body.budget-page a:focus-visible,
body.budget-page summary:focus-visible { outline: 3px solid var(--budget-focus); outline-offset: 4px; }
body.budget-page .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
html[data-theme="dark"] body.budget-page .edit-icon { filter: invert(88%) sepia(15%) saturate(612%) hue-rotate(190deg) brightness(102%) contrast(103%); }
@media (max-width: 600px) {
  body.budget-page .budget-header,
  body.budget-page .budget-main,
  body.budget-page .budget-footer { padding-inline: 24px; }
  body.budget-page .budget-header { padding-top: 30px; }
  body.budget-page .brand { gap: 12px; }
  body.budget-page .brand img { width: 26px; height: 26px; }
  body.budget-page h1 { font-size: 1rem; }
  body.budget-page .budget-main { margin-block: 64px 48px; }
  /* A permanent action slot below the entire calculation keeps open/closed geometry stable. */
body.budget-page .calculator-workspace { position: relative; padding-bottom: 52px; min-width: 0; max-width: 100%; }
body.budget-page .budget-sentence { border-left-width: 4px; padding-left: 16px; }
  body.budget-page .amount-line,
  body.budget-page .date-line { margin-bottom: .8em; }
  body.budget-page .inline-editor { min-height: 44px; }
  body.budget-page .date-editor input { min-height: 44px; }
  body.budget-page .amount-editor[data-wide="true"] { font-size: clamp(1rem, 4.6vw, 1.725rem); }
  body.budget-page .calculation-meta { margin-top: 30px; font-size: .875rem; gap: 4px 10px; }
  body.budget-page #daylabel { padding-left: 10px; }
  body.budget-page .calculation-help { font-size: .9375rem; padding-top: 12px; }
  body.budget-page .budget-footer { gap: 16px; padding-bottom: 24px; }
  body.budget-page .footer-links { align-items: flex-start; }
  body.budget-page .tools-nav,
  body.budget-page .footer-settings { justify-content: flex-start; }
}
@media (max-width: 359px) {
  body.budget-page { --budget-font: 1.5rem; }
  body.budget-page .budget-header,
  body.budget-page .budget-main,
  body.budget-page .budget-footer { padding-inline: 18px; }
  /* A permanent action slot below the entire calculation keeps open/closed geometry stable. */
body.budget-page .calculator-workspace { position: relative; padding-bottom: 52px; min-width: 0; max-width: 100%; }
body.budget-page .budget-sentence { padding-left: 12px; }
  body.budget-page .amount-editor[data-wide="true"] { font-size: 1rem; }
  body.budget-page .big-number[data-wide="true"] { font-size: 1.15rem; }
}
@media (prefers-reduced-motion: reduce) {
  body.budget-page .inline-editor { transition: none; }
}