/* Shared app controls. Keep this after each screen's component styles. */
:root {
  --app-font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Pretendard", "Noto Sans KR", "Segoe UI", sans-serif;
  --app-font-control: 16px;
  --app-font-title: 22px;
  --app-font-dialog-title: 20px;
  --app-choice-size: 18px;
}

body,
#kkaebu-analysis-pages {
  font-family: var(--app-font-family);
}

button, input, select, textarea {
  font-family: inherit;
}

:root input:is([type="checkbox"], [type="radio"]),
#kkaebu-analysis-pages input:is([type="checkbox"], [type="radio"]) {
  box-sizing: border-box;
  width: var(--app-choice-size);
  height: var(--app-choice-size);
  min-width: var(--app-choice-size);
  min-height: var(--app-choice-size);
  max-width: var(--app-choice-size);
  max-height: var(--app-choice-size);
  flex: 0 0 var(--app-choice-size);
  padding: 0;
  margin: 0;
  accent-color: var(--blue, #23766a);
  font-family: var(--app-font-family);
  font-size: var(--app-font-control);
  vertical-align: middle;
  cursor: pointer;
}

.page-shell, dialog, form, fieldset {
  min-width: 0;
}

dialog {
  max-inline-size: 100%;
  overscroll-behavior: contain;
}

dialog :is(p, label, .form-status),
.settings-menu-copy,
.connection-total-balance {
  overflow-wrap: anywhere;
}

dialog .category-settings-dialog-actions > button {
  min-height: 48px;
  padding: 10px 16px;
  border-radius: 12px;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}

dialog .category-settings-dialog-actions > button:not(.primary-button) {
  border: 1px solid var(--line, #d4dedb);
  color: #476259;
  background: #f1f6f3;
}

dialog .category-settings-dialog-actions > .goal-delete-button {
  color: var(--danger, #b84f59);
  background: var(--danger-soft, #fff1f2);
}

@media (max-width: 599px) {
  html {
    scrollbar-gutter: auto;
    background-attachment: scroll;
  }

  html:has(dialog[open]) {
    overflow: hidden;
  }

  :root :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not([type="range"]):not([type="color"]), select, textarea),
  #kkaebu-analysis-pages :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
    font-size: var(--app-font-control);
  }

  :root :is(.app-control-trigger, .records-multiselect-trigger) {
    min-height: 44px;
    font-size: var(--app-font-control);
  }

  #family-code-input {
    font-family: var(--app-font-family);
    font-variant-numeric: tabular-nums;
  }

  :root :is(.intro h1, .settings-heading h1, .connections-title h1, .bank-files-heading h1, .goals-title-row h1, .auth-card h1, .purchase-info-hero h1) {
    font-size: var(--app-font-title);
    line-height: 1.3;
  }

  :root dialog h2 {
    font-size: var(--app-font-dialog-title);
    line-height: 1.4;
  }

  :root dialog {
    max-block-size: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    overflow-y: auto;
    scrollbar-gutter: auto;
  }

  .billing-consent-check,
  .backup-restore-check,
  .goal-period-options label,
  .installment-management-scope-options label,
  .account-deletion-reasons label,
  .codef-link-consent {
    min-height: 44px;
  }

  :root dialog label:has(> input:is([type="checkbox"], [type="radio"])) {
    min-height: 44px;
  }

  :root dialog button[aria-label*="닫기"],
  .codef-link-heading button {
    min-width: 44px;
    min-height: 44px;
    flex-shrink: 0;
    border: 0;
    border-radius: 12px;
    color: var(--muted, #66757a);
    background: #f1f5f3;
  }

  .app-header {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background-color: #fafcfb;
  }

  dialog::backdrop {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* Compact filter labels retain comfortable touch targets. Text-entry fields
   stay at 16px so iOS does not zoom when entering dates or amounts. */
:root body :is(.records-filters, .financial-activity-period) :is(select, .app-control-trigger, .records-multiselect-trigger),
:root body .app-control-trigger,
:root body .app-dropdown-option,
:root body .app-floating-panel {
  font-size: 12px;
  line-height: 1.4;
}

body.records-calendar-active {
  position: static;
  inset: auto;
  height: auto;
  min-height: 100dvh;
  overflow: auto;
  overscroll-behavior: auto;
}
body.records-calendar-active .records-page {
  display: block;
  height: auto;
  min-height: 100dvh;
}
body.records-calendar-active .records-section {
  display: block;
  min-height: auto;
}
body.records-calendar-active .records-calendar {
  display: block;
  padding: 20px;
  border: 0;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 8px 28px rgb(31 42 46 / 5%);
}
body.records-calendar-active .records-calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  margin-bottom: 4px;
  padding: 0;
  border: 0;
  background: transparent;
}
body.records-calendar-active .records-calendar-month-navigation { display: flex; align-items: center; gap: 2px; }
body.records-calendar-active .records-calendar-header button {
  width: 36px;
  height: 36px;
  min-height: 36px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  font-size: 22px;
  color: #15584f;
}
body.records-calendar-active .records-calendar-header strong { font-size: 15px; white-space: nowrap; }
body.records-calendar-active #records-calendar-filter-toggle { display: grid; place-items: center; }
#records-calendar-filter-toggle svg { width: 19px; height: 19px; }
body.records-calendar-active .records-calendar-summary {
  flex-wrap: wrap;
  min-height: 24px;
  margin: 0 0 8px;
  background: transparent;
  border: 0;
  box-shadow: none;
}
body.records-calendar-active .records-calendar-summary-item { padding: 1px 4px; gap: 2px 4px; flex-direction: row; flex-wrap: wrap; line-height: 1.25; }
body.records-calendar-active .records-calendar-summary-item small { font-size: 9px; font-weight: 500; }
body.records-calendar-active .records-calendar-summary-item strong { max-width: 100%; font-size: 11px; font-weight: 600; overflow: visible; overflow-wrap: anywhere; white-space: normal; }
body.records-calendar-active .records-calendar-weekdays {
  margin-bottom: 6px;
  padding: 0 0 10px;
  border: 0;
  color: #929997;
  font-size: 12px;
}
body.records-calendar-active .records-calendar-weekdays span:first-child { color: #c45a63; }
body.records-calendar-active .records-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-template-rows: none;
  grid-auto-rows: minmax(72px, auto);
  gap: 3px 0;
  min-height: auto;
}
body.records-calendar-active .records-calendar-day,
body.records-calendar-active .records-calendar-day:is(.has-records, .has-incomes, .has-expenses, .is-today, .is-outside) {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: column;
  gap: 3px;
  min-height: 72px;
  padding: 2px 0;
  border: 0;
  border-radius: 0;
  color: #293633;
  background: transparent;
  box-shadow: none;
}
body.records-calendar-active .records-calendar-day-number {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin: 0;
  border-radius: 50%;
  font-size: 16px;
  font-weight: 600;
}
body.records-calendar-active .records-calendar-day.is-selected .records-calendar-day-number {
  color: #fff;
  background: #15584f;
}
body.records-calendar-active .records-calendar-day.is-today:not(.is-selected) .records-calendar-day-number { color: #c44855; }
body.records-calendar-active .records-calendar-day-total { align-self: center; max-width: 100%; font-size: 11px; line-height: 1.2; font-weight: 500; white-space: nowrap; }
body.records-calendar-active .records-calendar-day.is-outside { opacity: .3; }
body.records-calendar-active .records-calendar-day-details { margin-top: 18px; border-top: 1px solid #e6eeeb; }
body.records-calendar-active .records-calendar-day-details .records-calendar-day-panel { max-height: none; padding: 18px 0 0; overflow: visible; border: 0; background: #fff; box-shadow: none; }
body.records-calendar-active .records-calendar-day-panel > header { margin-bottom: 14px; }
body.records-calendar-active .records-calendar-day-panel h2 { margin: 0; font-size: 18px; }
body.records-calendar-active .records-calendar-day-details .records-calendar-day-navigation { display: none; }
body.records-calendar-active .records-calendar-day-details .records-calendar-day-list { max-height: none; overflow: visible; }
body.records-calendar-active .records-calendar-day-item { padding: 14px 0; border: 0; border-bottom: 1px solid #edf2f0; border-radius: 0; background: #fff; box-shadow: none; }
body.records-calendar-active .records-calendar-day-item strong { font-size: 14px; line-height: 1.45; }
body.records-calendar-active .records-calendar-day-item b { font-size: 14px; }
body.records-calendar-active #records-calendar-filter-toggle.has-selection { border-radius: 50%; background: #e8faf5; }
@media (max-width: 599px) {
  body.records-calendar-active .records-calendar { padding: 16px 10px; }
  body.records-calendar-active .records-calendar-grid { grid-auto-rows: minmax(65px, auto); }
  body.records-calendar-active .records-calendar-day { min-height: 65px; }
  body.records-calendar-active .records-calendar-day-total { font-size: clamp(9px, 2.65vw, 11px); }
}

.records-calendar-display-settings { margin: 18px 0 14px; padding: 0; border: 0; }
.records-calendar-display-settings legend,
.records-calendar-detail-settings > label { margin-bottom: 8px; color: #55645f; font-size: 12px; font-weight: 600; }
.records-calendar-display-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.records-calendar-display-options label { display: flex; min-height: 44px; align-items: center; gap: 7px; padding: 8px; border: 1px solid #dce5e1; border-radius: 10px; font-size: 12px; cursor: pointer; }
.records-calendar-display-options label:has(input:checked) { border-color: #6fa89a; background: #f0f8f5; color: #15584f; }
.records-calendar-display-options input { appearance: auto; flex: 0 0 16px; width: 16px; height: 16px; min-height: 0; margin: 0; accent-color: #15584f; }
.records-calendar-detail-settings { display: grid; margin-top: 14px; }
:root body #records-calendar-detail-filter { width: 100%; min-height: 40px; padding: 8px 10px; border: 1px solid #dce5e1; border-radius: 10px; background: #fff; color: #35463f; font: inherit; font-size: 12px; }
.records-calendar-settings-dialog .records-category-filter-panel { overflow-y: auto; overscroll-behavior: contain; }
.records-calendar-settings-dialog .records-category-options { flex-shrink: 0; overflow: visible; }
.records-calendar-settings-dialog .records-category-filter-panel > header { align-items: center; }
.records-calendar-settings-dialog h2 { font-size: 18px; }
.records-calendar-settings-dialog .records-category-option { min-height: 40px; font-size: 12px; }
body.records-calendar-active #records-calendar-day-popup .records-calendar-day-panel { padding: 18px 14px; }
body.records-calendar-active #records-calendar-day-popup .records-calendar-day-panel > header { margin-bottom: 0; align-items: center; }
body.records-calendar-active #records-calendar-day-popup h2 { font-size: 17px; }