/* gimmoney. visual language, 2026-10-18.
   One deep green card holds today's money; everything else is a quiet white
   list on the grey page. The green period of the wordmark returns as the mark
   for "today" and "filled". Figures lead, Korean labels follow.
   Website only: mobile/document.js drops this sheet from the app document and
   scripts/build-mobile.mjs leaves it out of the app bundle.
   Loaded after clarity.css and before desktop.css, so the wide layouts keep
   their own rules. Presentation only: markup hooks, wording, focus order,
   calculations and saved data are untouched. */
:root {
  --radius: 22px;
  --ink-2: #4e5968;
  --ledger-green: #0d4539;
  --attention-ink: #81531f;
  --group-radius: 22px;
  --group-line: #eef1f4;
  --button-radius: 16px;
  --figure-weight: 800;
}

/* Korean reads in whole words; a word longer than its box still wraps. */
:is(h1,h2,h3,h4,p,label,summary,dt,.button,.text-button) { word-break: keep-all; overflow-wrap: break-word; }

/* Figures: tabular, tight and heavier than their labels. */
:is(.number,.transaction-amount,.ledger-summary-strip strong,.plan-budget-amount,.plan-budget-meta strong,.asset-totals dd,.asset-main-amount,.home-cash-plan-metrics strong,.today-budget-meta b,.today-budget-planned b,.today-schedule-end b,.ledger-day-totals b,.entry-template b,.question-summary-row strong,.goal-value strong,.money-input input,.home-overview .today-budget>strong) {
  font-variant-numeric: tabular-nums;
}
.money-unit { margin-left: 2px; color: var(--ink-2); font-weight: 600; letter-spacing: -.01em; }
strong[data-over-budget=true] .money-unit { color: inherit; }
:is(.plan-budget-amount,.asset-net dd,#assets-view .asset-main-amount) { font-weight: var(--figure-weight); letter-spacing: -.045em; }
.transaction-amount { font-weight: 700; letter-spacing: -.02em; }
.transaction-amount.expense { color: var(--ink); }
.transaction-date { color: #6b7684; font-weight: 500; }

/* Buttons share one radius; the press response respects reduced motion. */
.button { border-radius: var(--button-radius); }
@media (prefers-reduced-motion: no-preference) {
  :is(.button,.home-calendar-link,.home-secondary>summary,.transaction-row,.feature-directory button,.feature-directory a):active:not(:disabled) { transform: scale(.985); }
}

/* Top bar: quiet actions share one white shape on the page background. */
.topbar-actions .amount-visibility,
body[data-view=home] .topbar-actions [data-action=add] {
  min-height: 44px; border: 1px solid #e6e9ed; border-radius: 14px;
  background: var(--surface); color: var(--ink-2); font-size: 13px; font-weight: 600;
}
.topbar-actions .amount-visibility:hover:not(:disabled),
body[data-view=home] .topbar-actions [data-action=add]:hover:not(:disabled) { background: #f8f9fa; }
.topbar-actions .amount-visibility[aria-pressed=true] { border-color: transparent; background: var(--accent-soft); color: #066953; }
body[data-view=home] .topbar-actions [data-action=add] { min-width: 44px; padding: 10px; }

/* Guest and save notices sit in a small calm pill instead of loose text. */
#save-status:not(:empty) { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 4px 12px; border-radius: 999px; background: var(--surface); color: var(--ink-2); font-size: 12px; font-weight: 500; line-height: 1.4; }
#save-status:not(:empty)::before { content: ''; flex-shrink: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

/* Today's money: the one deep green surface. Local colour roles keep every
   existing rule inside it (labels, links, progress, warnings) legible. */
.home-overview {
  --ink: #fff; --ink-2: rgba(255,255,255,.8); --muted: rgba(255,255,255,.74);
  --wash: rgba(255,255,255,.12); --line: rgba(255,255,255,.16);
  --accent: #8fe3c8; --negative: #ffc4ba;
  background: var(--ledger-green); color: var(--ink);
}
.home-overview .icon { filter: brightness(0) invert(1); }
.home-overview .today-budget-heading>span { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-2); font-size: 14px; font-weight: 600; }
/* The wordmark's period marks the live figure. */
.home-overview .today-budget-heading>span::before { content: ''; flex-shrink: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.home-overview .today-budget-heading>.text-button { min-height: 44px; color: var(--ink-2); font-size: 13px; }
.home-overview .today-budget>strong { color: #fff; font-weight: var(--figure-weight); letter-spacing: -.05em; }
.home-overview .today-budget>strong[data-over-budget=true] { color: var(--negative); }
.home-overview .today-budget>strong .money-unit { font-size: .5em; color: var(--ink-2); }
.home-overview .today-budget-basis { display: block; color: var(--muted); font-size: 13px; line-height: 1.55; }
.home-overview .budget-warning { color: var(--negative); }
/* The calculation stays one tap away as a short link. */
.home-overview .today-budget-detail>summary { display: inline-flex; align-items: center; gap: 4px; justify-content: flex-start; width: auto; color: var(--ink-2); font-weight: 500; }
.home-overview .today-budget-detail>summary .icon { width: 16px; height: 16px; opacity: .75; }
.home-overview .today-budget-detail[open]>summary .icon { transform: rotate(180deg); }
.home-overview .today-budget-detail[open] { margin-bottom: 4px; padding: 12px 14px 14px; border-radius: 14px; background: rgba(255,255,255,.08); }
.home-overview .today-budget-detail[open]>summary { min-height: 44px; padding-block: 0; }
/* On the green, the record button is the white shape. */
.home-overview .today-actions .button,.home-overview .today-actions .button:hover:not(:disabled) { border-radius: var(--button-radius); background: #fff; color: #191f28; font-size: 16px; font-weight: 700; }
.home-overview .today-actions .button:hover:not(:disabled) { background: #eef6f3; }
.home-overview .today-actions .button .icon { filter: none; }
.home-overview .today-actions .button:focus-visible,.home-overview :is(a,button,summary):focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.home-overview .today-no-spend { justify-content: center; margin-top: 6px; color: var(--muted); font-size: 13px; }
.home-overview .today-no-spend .text-button { color: #fff; font-size: 14px; text-decoration-color: rgba(255,255,255,.5); }
.home-overview .today-no-spend.is-marked { color: #fff; }
.home-overview .today-no-spend.is-marked .text-button { color: var(--muted); }
/* The two quiet answers under the record button (no spending, the budget) share one size. */
.home-overview .today-actions>.text-button { display: flex; width: 100%; justify-content: center; color: #fff; font-size: 14px; font-weight: 600; text-decoration: underline; text-decoration-color: rgba(255,255,255,.5); text-underline-offset: 3px; }

/* The welcome sample is the same green card, so the first screen already
   looks like the product it leads into. */
.auth-showcase {
  --ink: #fff; --muted: rgba(255,255,255,.74); --line: rgba(255,255,255,.16);
  border-radius: var(--group-radius); background: var(--ledger-green); color: #fff;
}
#auth-shell .auth-showcase { background: var(--ledger-green); }
/* 30초 계산 (specs/023 US7) leads the welcome card, like the record button on the home card. */
.auth-showcase .auth-showcase-note { margin: -8px 0 18px; }
.auth-showcase .auth-daily-start,.auth-showcase .auth-daily-start:hover:not(:disabled) { width: 100%; margin-bottom: 6px; border-radius: var(--button-radius); background: #fff; color: #191f28; font-size: 16px; font-weight: 700; }
.auth-showcase .auth-daily-start:hover:not(:disabled) { background: #eef6f3; }
/* On a narrow phone "30초 계산" moves to its own line instead of splitting. */
.auth-showcase .auth-daily-start { flex-wrap: wrap; gap: 0 .3em; }
.auth-showcase .auth-daily-start>span { white-space: nowrap; }
.auth-showcase-heading>span:first-child { display: inline-flex; align-items: center; gap: 8px; color: rgba(255,255,255,.8); font-size: 14px; font-weight: 600; }
.auth-showcase-heading>span:first-child::before { content: ''; flex-shrink: 0; width: 7px; height: 7px; border-radius: 50%; background: #8fe3c8; }
.auth-showcase .auth-sample-tag { padding: 3px 8px; border-radius: 999px; background: rgba(255,255,255,.14); color: #fff; font-size: 12px; font-weight: 600; }
.auth-showcase>strong { color: #fff; font-weight: var(--figure-weight); letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.auth-showcase>strong>span { color: rgba(255,255,255,.8); font-size: .5em; font-weight: 600; }
.auth-showcase .text-button { border-top-color: rgba(255,255,255,.16); color: #fff; font-size: 14px; font-weight: 600; }
.auth-showcase .icon { filter: brightness(0) invert(1); }
.auth-showcase :is(a,button):focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.auth-card .google-button,.auth-card [data-auth=guest] { border-radius: var(--button-radius); }

/* This week: seven marks, filled days in green like the wordmark's period. */
.home-habit { margin: 12px 0 0; padding: 18px 20px 20px; border-radius: var(--group-radius); }
.home-habit-heading h2 { font-size: 15px; font-weight: 700; }
.home-habit-heading p { font-size: 13px; }
.habit-week { gap: 4px; margin-top: 14px; }
.habit-day { max-width: 36px; font-size: 12px; font-weight: 700; }
.habit-day:not(.is-filled):not(.is-no-spend):not(.is-future):not(.is-today) { background: #f2f4f6; color: #6b7684; }
.habit-day.is-future { color: #8b95a1; box-shadow: inset 0 0 0 1px #e5e8eb; }
.habit-day.is-today:not(.is-filled):not(.is-no-spend) { box-shadow: inset 0 0 0 2px var(--ink); }
.habit-today { font-size: 13px; }

/* Plan shortcut and saved cash plan: single rows, not tiles. */
.home-shortcuts,.home-shortcuts.today-next { margin: 12px 0 0; }
.home-shortcuts .home-shortcut,.home-shortcuts .today-plan-link { min-height: 60px; padding: 14px 20px; border-radius: var(--group-radius); }
.home-shortcut>span { font-size: 15px; font-weight: 600; }
.home-shortcut>.icon:first-child { width: 22px; height: 22px; opacity: .8; }
.home-cash-plan { margin: 12px 0 0; border-radius: var(--group-radius); }
.home-recap { border-radius: var(--group-radius); }

/* Recent records sit on the same white surface as every other list. */
.home-recent { margin-top: 24px; padding: 16px 20px 4px; border-radius: var(--group-radius); background: var(--surface); }
.home-recent .card-heading { margin-bottom: 0; }
.home-recent .card-heading h2 { font-size: 17px; line-height: 1.5; letter-spacing: -.03em; }
.home-recent .transaction-list>li:last-child>.transaction-row { border-bottom: 0; }

/* Calendar, review and accounts: one list with inset dividers. */
#home-view>.home-calendar-link { margin-top: 12px; border-radius: var(--group-radius) var(--group-radius) 0 0; }
#home-view>:is(#home-reflection,#home-accounts) { margin-top: 0; border-radius: 0; }
#home-view>#home-accounts { border-radius: 0 0 var(--group-radius) var(--group-radius); }
#home-view>:is(#home-reflection,#home-accounts)>summary {
  background: linear-gradient(var(--group-line),var(--group-line)) no-repeat 78px 0 / calc(100% - 78px - 24px) 1px;
}
#home-view>.home-secondary>summary>.home-secondary-icon,#home-view>.home-calendar-link>.home-secondary-icon { width: 40px; height: 40px; border-radius: 14px; }
.home-calendar-link,.home-secondary>summary { min-height: 68px; }
.home-calendar-link strong,.home-secondary>summary strong { font-weight: 600; }
#home-view>#home-schedule { margin-top: 12px; border-radius: var(--group-radius); }

/* Rows: icon tile, one name, one meta line, the figure on the right. */
.transaction-row .category-icon,.home-secondary-icon,.asset-empty-icon { border-radius: 14px; }
.transaction-info strong { font-weight: 600; letter-spacing: -.02em; }
.empty { color: var(--muted); }
.empty .text-button { margin-top: 4px; color: var(--accent); font-weight: 600; }

/* Records list (website). Design review 2026-10-18: a quiet day heading
   (lighter than the rows, month left to the month picker), rows that read
   name -> amount on one line with category and payment on a full-width
   second line, and a press surface instead of a rule under every row. */
.ledger-date-heading { margin: 10px 0 0; padding: 0 2px; color: var(--ink-2); font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; }
.ledger-date-group:first-child .ledger-date-heading { margin-top: 6px; }
/* A future day says so once, in neutral grey (mint means "current", green means income). */
.ledger-date-state { display: inline-block; margin-left: 4px; padding: 0 7px; border-radius: 999px; background: #f2f4f6; color: var(--ink-2); font-size: 12px; font-weight: 600; line-height: 1.6; vertical-align: 1px; }
.ledger-date-group .transaction-state { display: none; }
.ledger-date-group .transaction-list { margin: 0; container-type: inline-size; }
.ledger-date-group .transaction-row {
  display: grid; grid-template-columns: 40px minmax(min(4em,25%),1fr) minmax(0,max-content);
  grid-template-areas: "icon name amount" "icon meta meta"; align-content: center; align-items: center;
  column-gap: 14px; row-gap: 1px; width: calc(100% + 20px); min-height: 56px; margin-inline: -10px; padding: 7px 10px; border: 0; border-radius: 14px;
}
.ledger-date-group .transaction-row .category-icon { grid-area: icon; align-self: center; width: 40px; height: 40px; }
.ledger-date-group .transaction-info { display: contents; }
/* A long name gets two lines before it is shortened. */
.ledger-date-group .transaction-info strong { grid-area: name; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; white-space: normal; text-overflow: clip; align-self: start; font-size: 15px; font-weight: 600; line-height: 1.4; word-break: keep-all; overflow-wrap: anywhere; }
.ledger-date-group .transaction-info small { grid-area: meta; display: block; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.4; }
/* The amount pairs with the first name line and stays whole; a figure wider than its
   column breaks only after a thousands comma (<wbr> from rowHTML), never mid-number. */
.ledger-date-group .transaction-amount { grid-area: amount; align-self: start; justify-self: end; max-width: 100%; margin: 0; font-size: 16px; font-weight: 700; line-height: 1.4; text-align: right; white-space: normal; overflow-wrap: normal; word-break: keep-all; }
/* Rows reach 10px into the card padding; the focus ring stays inside the card. */
:is(.ledger-date-group,.home-recent) .transaction-row:focus-visible { outline-offset: 0; }
.ledger-date-group .transaction-date { display: none; }
/* Large system text: when a row is narrower than 15em of its own text, the amount takes
   its own line under the name instead of breaking digit by digit. Container query em
   follows the list's font size, so it reacts to text zoom; older browsers keep the grid. */
@container (max-width: 15em) {
  .ledger-date-group .transaction-row { grid-template-columns: 40px minmax(0,1fr); grid-template-areas: "icon name" "icon amount" "icon meta"; }
  .ledger-date-group .transaction-amount { justify-self: start; text-align: left; }
}
.ledger-date-group .transaction-row:active { background: #f2f4f6; }
@media (hover: hover) { .ledger-date-group .transaction-row:hover { background: #f6f7f9; } }
/* Wide rows: a hairline between records of the same day helps the eye cross to the amount. */
@media (min-width: 761px) {
  .ledger-date-group li+li>.transaction-row { background-image: linear-gradient(var(--group-line),var(--group-line)); background-repeat: no-repeat; background-position: 64px 0; background-size: calc(100% - 74px) 1px; }
}
/* Search and filters: a quiet white button, not a third view tab. The words never
   split; an "N개 적용" count moves under them instead of pushing into the view switch. */
.ledger-records:not(.ledger-calendar) .ledger-filters>summary { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; max-width: 100%; min-height: 50px; padding: 4px 16px; white-space: nowrap; border: 1px solid #e6e9ed; border-radius: 14px; background: var(--surface); color: var(--ink-2); font-size: 14px; font-weight: 600; }
.ledger-records:not(.ledger-calendar) .ledger-filters[open]>summary { border-color: transparent; background: var(--accent-soft); color: #066953; }
.ledger-records:not(.ledger-calendar) .ledger-filters>summary .icon { width: 16px; height: 16px; opacity: .7; }
/* Clearing the search: the app's grey mark at a 24px target instead of the browser's small blue one. */
#ledger-search::-webkit-search-cancel-button {
  -webkit-appearance: none; appearance: none; width: 24px; height: 24px; margin: 0 -4px 0 8px; background: var(--muted); cursor: pointer;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1a9 9 0 1 0 0 18 9 9 0 0 0 0-18Zm3.5 11.1-1.4 1.4L10 11.4l-2.1 2.1-1.4-1.4L8.6 10 6.5 7.9l1.4-1.4L10 8.6l2.1-2.1 1.4 1.4-2.1 2.1Z'/%3E%3C/svg%3E") center / 18px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1a9 9 0 1 0 0 18 9 9 0 0 0 0-18Zm3.5 11.1-1.4 1.4L10 11.4l-2.1 2.1-1.4-1.4L8.6 10 6.5 7.9l1.4-1.4L10 8.6l2.1-2.1 1.4 1.4-2.1 2.1Z'/%3E%3C/svg%3E") center / 18px no-repeat;
}
/* A month without income shows 0원 in the plain figure colour, not as green income. */
.ledger-summary-strip strong.is-zero { color: var(--ink); }
/* Home recent records share the list row rhythm and press surface (their date stays under the amount). */
.home-recent .transaction-row { gap: 4px 14px; width: calc(100% + 20px); min-height: 64px; margin-inline: -10px; padding: 10px; border-bottom: 0; border-radius: 14px; }
.home-recent .transaction-row:active { background: #f2f4f6; }
@media (hover: hover) { .home-recent .transaction-row:hover { background: #f6f7f9; } }
.home-recent .transaction-amount { font-size: 16px; font-weight: 700; }
.transaction-amount.transfer { color: var(--muted); }
@media (max-width: 360px) {
  .ledger-records:not(.ledger-calendar) { padding-inline: 16px; }
  .ledger-records:not(.ledger-calendar) .ledger-toolbar { column-gap: 8px; }
  .ledger-mode .icon { display: none; }
}
/* With a count the open state shows in the mint surface; on a phone the caret would only drop to a second line. */
@media (max-width: 430px) {
  .ledger-records:not(.ledger-calendar) .ledger-filters>summary:has(.filter-count) .icon { display: none; }
}

/* Records: the month reads as a statement, the calendar as the ledger. */
.ledger-summary-strip,.ledger-records,.ledger-day { border-radius: var(--group-radius); }
.ledger-mode { border-radius: 14px; }
.ledger-mode>button { border-radius: 11px; }
.ledger-calendar .member-calendar>button[aria-pressed=true] { border-radius: 14px; }
.ledger-day h2 { font-size: 17px; letter-spacing: -.03em; }

/* Plan: the budget leads; the four closed sections form one list. */
.plan-overview { border-radius: var(--group-radius); }
.plan-overview h2,.asset-financial-overview>h2 { color: var(--ink-2); font-size: 15px; font-weight: 600; letter-spacing: -.02em; }
.plan-overview .card-heading { align-items: center; }
.plan-overview .plan-budget-amount .money-unit,.plan-overview>strong .money-unit { font-size: .5em; }
#plan-view>.plan-secondary { margin-top: 0; border-radius: 0; box-shadow: none; }
#plan-view>.plan-secondary+.plan-secondary>summary {
  background: linear-gradient(var(--group-line),var(--group-line)) no-repeat 24px 0 / calc(100% - 48px) 1px;
}
#plan-view>.plan-overview+.plan-secondary,#plan-view>:not(.plan-secondary)+.plan-secondary { margin-top: 12px; border-radius: var(--group-radius) var(--group-radius) 0 0; }
#plan-view>.plan-secondary:last-child,#plan-view>.plan-secondary:has(+:not(.plan-secondary)) { border-radius: 0 0 var(--group-radius) var(--group-radius); }
#plan-view>:not(.plan-secondary)+.plan-secondary:last-child,#plan-view>:not(.plan-secondary)+.plan-secondary:has(+:not(.plan-secondary)) { border-radius: var(--group-radius); }
#plan-view>.plan-secondary>summary { min-height: 60px; padding-block: 16px; font-weight: 600; }
/* Green marks the next thing to make (a goal, a schedule); changing an existing value
   is a clear ink action, no longer grey small print. */
:is(.plan-overview,#plan-categories) .card-heading .text-button,.plan-secondary .goal-card .card-heading [data-action=goal] { color: var(--ink-2); font-weight: 600; }
.plan-secondary .goal-card>[data-action=goal],.plan-secondary .recurring-card .recurring-create { color: var(--accent); font-weight: 600; }
/* An open section says once what its summary hinted: the goal hint and the schedule's
   repeated title step back (the title stays a heading for assistive technology). */
#plan-goals[open]>summary .muted { display: none; }
#plan-schedule .recurring-card>.card-heading h2 { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.plan-secondary .goal-card h2 { font-size: 17px; letter-spacing: -.03em; }
/* Category budgets: one compact row each, with no rule under the last one. */
#plan-categories .member-budget-row { padding: 12px 0; }
#plan-categories .member-budget-row small { margin: 2px 0 0; }
#plan-categories .member-budget-row .progress { margin-top: 8px; }
#plan-categories .member-budget-row:last-child { border-bottom: 0; }
/* Plan tools are a list of places to go: one ink, a chevron and an inset rule each. */
#plan-budget-tools .plan-primary-actions { gap: 0; }
#plan-budget-tools .plan-primary-actions .text-button { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; color: var(--ink); font-size: 15px; font-weight: 500; }
#plan-budget-tools .plan-primary-actions .text-button+.text-button { border-top: 1px solid var(--group-line); }
#plan-budget-tools .plan-primary-actions .text-button::after {
  content: ''; flex-shrink: 0; width: 16px; height: 16px; background: var(--muted);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 3l5 5-5 5' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 3l5 5-5 5' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat;
}

/* Assets: an unconfirmed amount asks for a look; it is not a shortfall. */
.asset-financial-overview,.asset-management-item,.asset-empty-start { border-radius: var(--group-radius); }
.asset-financial-overview .asset-warning { color: var(--attention-ink); font-size: 14px; font-weight: 600; line-height: 1.6; }
.asset-group>h2 { font-size: 17px; letter-spacing: -.03em; }
/* Each asset card's own check (잔액 확인하기 and its kin) is the green action; adding a
   loan is a quiet choice beside goal linking, not the one filled button on the page. */
.asset-management-item>.asset-page-actions>.text-button { color: var(--accent); font-weight: 600; }
.asset-financial-overview [data-liability-new],.asset-financial-overview [data-liability-new]:hover:not(:disabled) { min-height: 44px; padding: 10px 0; border: 0; background: none; color: var(--muted); font-size: 14px; font-weight: 500; }
.asset-financial-overview [data-liability-new]:hover:not(:disabled) { color: var(--ink); }
/* Adding an asset offers outlined choices rather than eight grey fills. */
.asset-registration .asset-page-actions .button.secondary { border: 1px solid #e6e9ed; background: var(--surface); font-weight: 500; }
.asset-registration .asset-page-actions .button.secondary:hover:not(:disabled) { background: #f6f7f9; }
/* Wide screens: the three totals stay together instead of spreading across the card. */
@media (min-width: 1100px) {
  #assets-view .asset-totals { grid-template-columns: minmax(0,280px) repeat(2,minmax(0,200px)); justify-content: start; align-items: start; }
}

/* More: calmer rows inside each grouped list. */
.more-section-list { border-radius: var(--group-radius); }
.feature-directory button,.feature-directory a { font-size: 15px; font-weight: 500; }
/* A member's 더보기 opens with 계정: 내 계정, then 로그아웃 as a plain secondary row
   (no chevron, no colour of its own; 회원 탈퇴 lives only inside 내 계정). */
.more-account .more-logout { color: var(--ink-2); }
.more-account .more-logout:hover { color: var(--ink); }
/* Wide screens: 계정 runs as one full-width strip above the three columns, so it is
   the first thing seen without leaving a short card beside a long one. */
@media (min-width: 1100px) {
  .feature-directory>#more-account { grid-column: 1 / -1; }
  #more-account .more-section-list { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; column-gap: 24px; }
  /* A hairline keeps the 내 계정 chevron from reading as part of 로그아웃. */
  #more-account .more-logout { border-top: 0; border-left: 1px solid var(--group-line); padding: 0 4px 0 24px; min-height: 44px; }
}
/* 내 계정 sheet: 로그아웃 and 회원 탈퇴 stay visible under the form, apart from each other. */
.account-session { margin-top: 20px; padding-top: 8px; border-top: 1px solid var(--group-line); }
.account-session .dialog-actions { display: grid; justify-items: start; gap: 12px; margin: 0; }
.account-session .text-button { min-height: 48px; padding-inline: 0; color: var(--ink-2); font-size: 15px; font-weight: 500; }
.account-session .text-button:not(.danger):hover:not(:disabled) { color: var(--ink); }
.account-session .text-button.danger { min-height: 44px; margin-top: 12px; color: var(--negative); font-size: 13px; }

/* Record sheet: the amount answer is the largest figure on the sheet. The id
   form matches the phone rule in styles.css that would keep it at 16px. */
.question-flow .money-input input,#entry-form .form-field .money-input input,#quick-budget-form .money-input input {
  min-height: 64px; padding: 0 48px 0 18px; border-radius: 16px;
  font-size: 30px; font-weight: var(--figure-weight); letter-spacing: -.035em;
}
.question-flow .money-input span,#quick-budget-form .money-input span { top: 50%; right: 18px; transform: translateY(-50%); color: var(--ink-2); font-size: 18px; font-weight: 700; }
/* Budget start sheet: the same large amount answer, no gaps from empty notes,
   room before its button and a centred way out. */
#quick-budget-form .form-help:empty { display: none; }
#quick-save { margin-top: 20px; }
#quick-budget-form>[data-close] { display: flex; width: 100%; justify-content: center; color: var(--ink-2); }
.question-flow :is(input,select,textarea):focus-visible { outline-width: 2px; outline-offset: 2px; background: var(--surface); }
.question-flow .form-field>label,.question-flow .form-field>.between>label { letter-spacing: -.03em; }
.question-progress { letter-spacing: .02em; }
.question-context-button { border-radius: 14px; }
.entry-templates>p { color: var(--ink-2); font-weight: 600; }
.entry-template { border-color: transparent; border-radius: 14px; background: #f2f4f6; }
.entry-template:hover { border-color: var(--accent); background: var(--surface); }
.entry-template b { color: var(--ink-2); }
.question-summary { border-radius: 16px; background: #f6f7f9; }
.question-summary-row strong { font-weight: 700; }
dialog .dialog-header h2 { letter-spacing: -.035em; }
/* The full-screen import sheet's close button sits 2px from the screen edge; its ring stays inside. */
#import-dialog>.dialog-header button:focus-visible { outline-offset: -3px; }

/* Sign-up: a missing consent marks the consent box itself, not only the line below the details. */
.signup-consents:has(#signup-agreements-error:not(:empty)) .consent-all { border-color: var(--negative); box-shadow: inset 0 0 0 1px var(--negative); }
/* Native file and date controls take the app's shapes. */
input[type=file]::file-selector-button { min-height: 44px; margin-right: 12px; padding: 0 16px; border: 1px solid #e6e9ed; border-radius: 12px; background: var(--surface); color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; }
input[type=date]::-webkit-calendar-picker-indicator { margin: -6px -4px -6px 0; padding: 6px; border-radius: 8px; cursor: pointer; }

/* Phones: 20px page edges and a 12px rhythm between surfaces. */
@media (max-width: 760px) {
  .topbar :is(h1,h2),.main .topbar :is(h1,h2) { font-size: 24px; letter-spacing: -.035em; }
  .topbar { margin-bottom: 18px; }

  /* Home header: the wordmark takes the title's place; the title stays the
     focus target and heading for assistive technology. */
  body[data-view=home] #main { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; column-gap: 12px; }
  body[data-view=home] #main>* { grid-column: 1 / -1; min-width: 0; }
  body[data-view=home] #ledger-shell #main>.mobile-brand { display: block; grid-column: 1; margin: 0 0 18px; color: var(--ink); font-size: 24px; font-weight: 800; line-height: 44px; letter-spacing: -.055em; text-decoration: none; }
  body[data-view=home] #main>.mobile-brand .brand-dot { color: var(--accent); }
  body[data-view=home] #main>.topbar { grid-column: 2; justify-content: flex-end; }
  body[data-view=home] #main>.topbar>div:first-child { position: absolute; }
  body[data-view=home] #page-title { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

  .home-overview { padding: 24px 22px 18px; border-radius: 26px; }
  .home-overview .today-budget>strong { margin: 10px 0 6px; font-size: 44px; line-height: 1.15; }
  .home-overview .today-actions { margin-top: 20px; }
  .home-overview .today-actions .button { min-height: 56px; }

  /* Records summary: three label and amount rows instead of a 2+1 grid. */
  .ledger-summary-strip { display: grid; grid-template-columns: minmax(0,1fr); gap: 0; padding: 8px 20px; }
  .ledger-summary-strip>div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 10px 0; }
  .ledger-summary-strip>div+div { border-top: 1px solid var(--group-line); }
  .ledger-summary-strip span { font-size: 14px; }
  .ledger-summary-strip strong { margin: 0; font-size: 17px; text-align: right; }

  /* Bottom navigation: the current tab carries a soft pill behind its icon. */
  #mobile-nav { min-height: calc(68px + var(--app-safe-bottom)); padding: 6px 8px calc(6px + var(--app-safe-bottom)); border-top-color: #eceff2; background: #fff; }
  #mobile-nav button { min-height: 56px; gap: 2px; color: #6b7684; }
  #mobile-nav button>span { font-weight: 500; }
  #mobile-nav .icon { box-sizing: content-box; width: 22px; height: 22px; margin: 0; padding: 4px 16px; border-radius: 999px; opacity: .6; }
  #mobile-nav button[aria-current=page] .icon { border-radius: 999px; background: var(--accent-soft); opacity: 1; }
  #mobile-nav button[aria-current=page]>span { color: #066953; font-weight: 700; }

  #edit-dialog:not(.native-sheet) { border-radius: 28px 28px 0 0; }
}

@media (max-width: 360px) {
  .home-overview { padding-inline: 20px; }
  /* A two-line choice keeps its row-mates the same height. */
  .asset-registration .asset-page-actions { grid-auto-rows: 1fr; }
  .home-overview .today-budget>strong { font-size: 36px; }
  .question-flow .money-input input,#entry-form .form-field .money-input input,#quick-budget-form .money-input input { font-size: 26px; padding-left: 16px; }
  .home-recent { padding-inline: 16px; }
  body[data-view=home] #ledger-shell #main>.mobile-brand { font-size: 22px; }
  #mobile-nav .icon { padding-inline: 12px; }
}

/* Tablets and desktops keep the same surfaces with a little more room. */
@media (min-width: 761px) {
  .home-recent { padding: 20px 28px 8px; }
  .ledger-summary-strip strong { font-size: 22px; font-weight: var(--figure-weight); letter-spacing: -.04em; }
  .home-overview .today-budget>strong { font-size: 48px; }
  /* The navigation rail is a quiet white column with one hairline edge. */
  .sidebar { border-right: 1px solid #eceff2; }
  .nav-button { border-radius: 14px; }
  .nav-button .icon { opacity: .6; }
  .nav-button[aria-current=page] .icon { opacity: 1; }
  .nav-button[aria-current=page] { font-weight: 700; }
  .topbar :is(h1,h2),.main .topbar :is(h1,h2) { letter-spacing: -.04em; }
  .topbar-subtitle { color: var(--muted); }
}
/* Summary column on wide screens: same figure weight as the main flow. */
.desk-rail :is(.desk-stats dd,.desk-value) { font-weight: 700; letter-spacing: -.02em; }
.desk-title { letter-spacing: -.03em; }

@media (forced-colors: active) {
  .home-overview { border: 1px solid CanvasText; }
  .home-overview .icon { filter: none; }
  #mobile-nav button[aria-current=page] .icon { outline: 2px solid CanvasText; }
  #ledger-search::-webkit-search-cancel-button { forced-color-adjust: none; background: CanvasText; }
  #plan-budget-tools .plan-primary-actions .text-button::after { forced-color-adjust: none; background: CanvasText; }
}

/* The daily amount (specs/023) never splits inside the number. On a narrow card,
   such as a small phone at 200% zoom, the number shrinks to the card instead. */
.home-overview .daily-hero { container-type: inline-size; }
.home-overview .today-budget.daily-hero>strong { overflow-wrap: normal; white-space: nowrap; font-size: min(44px, 17cqi); }
@media (max-width: 360px) { .home-overview .today-budget.daily-hero>strong { font-size: min(36px, 17cqi); } }
@media (min-width: 761px) { .home-overview .today-budget.daily-hero>strong { font-size: min(48px, 17cqi); } }