.brand-mark { display: grid; width: 58px; height: 58px; place-items: center; border-radius: 18px; color: white; background: var(--olive); box-shadow: 0 8px 18px rgba(94, 99, 66, .23); font-size: 28px; font-weight: 900; }
.brand-mark.small { width: 42px; height: 42px; border-radius: 13px; font-size: 20px; }
.brand-info-button { display: grid; width: 42px; height: 42px; min-width: 0; min-height: 0; place-items: center; padding: 0; border: 0; border-radius: 14px; background: transparent; line-height: 1; cursor: pointer; appearance: none; -webkit-appearance: none; }
.brand-info-button:hover .brand-mark { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(94, 99, 66, .28); }
.brand-info-button:focus-visible { outline: 3px solid rgba(119, 124, 87, .28); outline-offset: 3px; }
.brand-info-button .brand-mark { transition: transform .16s ease, box-shadow .16s ease; }
.stack-form { display: grid; gap: 14px; margin-top: 24px; }
.stack-form label, .dialog-form > label, .form-grid label, .task-content-field { display: grid; gap: 6px; font-size: 12px; font-weight: 750; }
.primary-button, .soft-button, .round-button, .icon-button, .icon-text-button, .text-button, .add-category-button, .danger-text-button { border: 0; transition: transform .16s ease, background .16s ease, color .16s ease, opacity .16s ease; }
.primary-button { min-height: 43px; padding: 9px 17px; border-radius: 11px; color: white; background: var(--olive); font-weight: 800; }
.primary-button:hover { background: var(--olive-dark); transform: translateY(-1px); }
.soft-button { min-height: 38px; padding: 7px 13px; border: 1px solid var(--line); border-radius: 10px; background: #f8f4e9; font-size: 12px; font-weight: 750; }
.round-button, .icon-button { display: inline-grid; width: 36px; height: 36px; place-items: center; border-radius: 50%; background: var(--olive-soft); font-size: 19px; }
.icon-button { background: transparent; }
.round-button:hover, .icon-button:hover { background: var(--paper-deep); }
.month-title-button { min-width: 150px; border: 0; border-radius: 12px; background: transparent; color: var(--ink); font-size: 22px; font-weight: 900; }
.month-title-button:hover { background: var(--paper-deep); }
.calendar-toolbar-actions { display: flex; align-items: center; gap: 8px; }
.goal-button {
  min-height: 38px;
  padding: 7px 15px;
  border: 1px solid rgba(119, 124, 87, .34);
  border-radius: 12px;
  color: #fff;
  background: #777c57;
  box-shadow: 0 5px 14px rgba(119, 124, 87, .18);
  font-size: 12px;
  font-weight: 950;
}
.goal-button.has-goal {
  border-color: rgba(196, 98, 74, .34);
  background: #b76750;
}
.ledger-month-total {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 8px;
  min-height: 38px;
  min-width: 132px;
  padding: 4px 12px;
  border: 1px solid rgba(184, 118, 98, .20);
  border-radius: 12px;
  background: #fff7f2;
  color: inherit;
  cursor: pointer;
  font: inherit;
  line-height: 1.1;
  text-align: right;
}
.ledger-month-total:hover { background: #ffede4; }
.ledger-month-total[data-mode="fixed"] {
  border-color: rgba(84, 130, 151, .24);
  background: #f0f7f8;
}
.ledger-month-total[hidden] { display: none !important; }
.ledger-month-total span {
  color: #8d5b50;
  font-size: 9px;
  font-weight: 950;
  letter-spacing: .08em;
}
.ledger-month-total strong {
  color: #a74b3f;
  font-size: 18px;
  font-weight: 950;
  white-space: nowrap;
}
.ledger-month-total[data-mode="fixed"] span { color: #4c7381; }
.ledger-month-total[data-mode="fixed"] strong { color: #3c7086; }
.icon-text-button { display: flex; align-items: center; gap: 5px; min-height: 36px; padding: 7px 10px; border-radius: 10px; background: transparent; font-size: 12px; }
.icon-text-button:hover { background: var(--paper-deep); }
.search-trigger { min-width: 40px; font-size: 21px; font-weight: 950; line-height: 1; }
.search-trigger span { font-size: 12px; font-weight: 850; }
.sync-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; border-radius: 20px; color: var(--muted); background: rgba(255,255,255,.55); font-size: 10px; font-weight: 750; }
.sync-dot { width: 7px; height: 7px; border-radius: 50%; background: #9b9b92; }
.sync-badge.synced .sync-dot { background: #6f9b68; box-shadow: 0 0 0 3px rgba(111,155,104,.14); }
.sync-badge.syncing .sync-dot { background: #d29c52; animation: pulse 1s infinite; }
.sync-badge.offline .sync-dot { background: #b57367; }
@keyframes pulse { 50% { opacity: .35; } }
.sunday { color: var(--sunday); }
.saturday { color: var(--saturday); }
.day-cell { min-width: 0; min-height: 230px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #fffdf7; }
.day-cell:nth-child(7n) { border-right: 0; }
.day-cell.outside { background: #f7f3ea; opacity: .67; }
.day-cell.today { box-shadow: inset 0 0 0 2px var(--coral); }
.day-heading { display: flex; align-items: center; justify-content: space-between; min-height: 32px; padding: 5px 8px; border-bottom: 1px solid var(--line); background: rgba(248,244,234,.7); font-size: 11px; font-weight: 850; }
.today-label { padding: 2px 5px; border-radius: 8px; color: white; background: var(--coral); font-size: 8px; }
.category-block { border-bottom: 1px dashed var(--line); }
.category-block:last-child { border-bottom: 0; }
.category-heading { display: flex; align-items: center; min-height: 28px; padding: 3px 5px 2px 7px; gap: 5px; }
.category-label { min-width: 0; padding: 2px 4px; border: 0; border-radius: 6px; background: transparent; font-size: 9px; font-weight: 850; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.category-dot { flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; }
.category-face {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.78);
  border-radius: 50%;
  background: var(--category-color, var(--olive-soft));
  box-shadow: 0 0 0 1px rgba(78,67,45,.12);
  object-fit: cover;
}
.category-face-fallback {
  width: 9px;
  height: 9px;
  border: 0;
  box-shadow: none;
}
.add-task-mini { width: 22px; height: 22px; margin-left: auto; border: 0; border-radius: 7px; color: var(--muted); background: transparent; font-size: 14px; }
.add-task-mini:hover { color: var(--olive-dark); background: var(--olive-soft); }
.task-list { display: grid; gap: 3px; padding: 1px 6px 6px; }
.task-item { display: grid; grid-template-columns: 16px minmax(0,1fr) auto; align-items: start; gap: 4px; padding: 4px 5px; border: 1px solid transparent; border-radius: 7px; color: var(--task-contrast, #2f2d28); background: var(--task-color, rgba(255,255,255,.72)); font-size: 9px; line-height: 1.35; transition: none; }
.task-item:hover { border-color: var(--line); box-shadow: 0 2px 8px rgba(78,67,45,.07); }
.task-item.completed { background: var(--complete); color: #71786e; }
.task-item.completed .task-content { opacity: 1; text-decoration: none; }
.task-check { display: grid; width: 14px; height: 14px; margin-top: 0; padding: 0; place-items: center; border: 1px solid var(--line-strong); border-radius: 4px; color: transparent; background: white; font-size: 9px; font-weight: 900; }
.task-item.completed .task-check { color: white; border-color: var(--category-color); background: var(--category-color); }
.task-content { min-width: 0; border: 0; padding: 0; color: inherit; background: transparent; text-align: left; white-space: pre-wrap; overflow-wrap: anywhere; }
.task-important { color: #c48736; font-size: 10px; }
.task-tag { grid-column: 2 / 4; justify-self: start; padding: 1px 5px; border-radius: 10px; color: var(--tag-contrast, #554f43); background: var(--tag-color, transparent); font-size: 7px; font-weight: 800; }
.add-category-button { margin: 12px 14px 0; padding: 7px 10px; color: var(--olive); border-radius: 9px; background: transparent; font-size: 11px; font-weight: 800; }
.add-category-button:hover, .text-button:hover { background: var(--olive-soft); }
.add-end-date-button { align-self: end; min-height: 43px; border: 1px dashed var(--line); border-radius: 9px; background: transparent; color: var(--muted); font-size: 12px; font-weight: 800; cursor: pointer; }
.add-end-date-button:hover { background: var(--olive-soft); color: var(--olive); }
.end-date-remove { border: 0; margin-left: 4px; padding: 0 2px; background: transparent; color: var(--muted); font-size: 11px; line-height: 1; vertical-align: middle; cursor: pointer; }
.end-date-remove:hover { color: var(--coral); }
.custom-dates-section { display: grid; gap: 8px; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: #faf7ef; }
.custom-dates-head { display: flex; align-items: center; justify-content: space-between; }
.custom-dates-head strong { font-size: 14px; font-weight: 850; }
.custom-dates-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; font-size: 10px; font-weight: 800; color: var(--muted); }
.custom-dates-weekdays .sunday { color: var(--sunday); }
.custom-dates-weekdays .saturday { color: var(--saturday, #4a76c4); }
.custom-dates-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.custom-date-cell { display: grid; place-items: center; aspect-ratio: 1 / 1; min-height: 30px; border: 0; border-radius: 8px; background: transparent; color: var(--task-contrast, #2f2d28); font-size: 12px; font-weight: 700; cursor: pointer; }
.custom-date-cell.empty { visibility: hidden; cursor: default; }
.custom-date-cell.sunday { color: var(--sunday); }
.custom-date-cell.saturday { color: var(--saturday, #4a76c4); }
.custom-date-cell.today { outline: 1.5px solid var(--olive); }
.custom-date-cell.selected { background: var(--olive); color: #fff; }
.custom-date-cell:hover:not(.empty):not(.selected) { background: var(--olive-soft); }
.custom-dates-hint { margin: 0; font-size: 10px; color: var(--muted); text-align: center; }
#taskDialog label.custom-dates-toggle { display: flex; align-items: center; gap: 8px; min-height: 40px; margin: 0; padding: 8px 11px; border: 1px solid var(--line); border-radius: 9px; background: #faf7ef; font-size: 12px; font-weight: 750; cursor: pointer; }
.custom-dates-toggle input { width: 17px; height: 17px; flex: 0 0 auto; margin: 0; }
.custom-dates-toggle span { display: inline; }
.custom-dates-toggle em { font-style: normal; color: var(--muted); font-weight: 700; font-size: 11px; }
/* 링크 미리보기 카드 (카톡식) */
.link-preview-card { display: block; margin-top: 6px; max-width: 280px; border: 1px solid var(--line, #e8ddbf); border-radius: 12px; overflow: hidden; background: #fffdf8; text-decoration: none; color: inherit; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.link-preview-image { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #f1ebdd; }
.link-preview-card.no-thumb .link-preview-image { display: none; }
.link-preview-body { padding: 8px 11px 10px; }
.link-preview-title { font-size: 13px; font-weight: 800; line-height: 1.3; color: var(--ink, #2c2a24); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.link-preview-desc { margin-top: 3px; font-size: 11px; line-height: 1.4; color: #837a63; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.link-preview-site { margin-top: 6px; font-size: 10px; font-weight: 700; color: #a89f86; }

/* 화면 설정 (테마색 프리셋 · 글씨체) */
.app-appearance { display: grid; gap: 12px; margin: 2px 0 14px; text-align: left; }
.app-appearance-row { display: grid; gap: 7px; }
.app-appearance-label { font-size: 12px; font-weight: 800; color: var(--muted); }
.theme-swatches { display: flex; flex-wrap: wrap; gap: 9px; }
.theme-swatch { width: 30px; height: 30px; border-radius: 50%; border: 2px solid transparent; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); cursor: pointer; padding: 0; transition: transform .12s; }
.theme-swatch:active { transform: scale(.9); }
.theme-swatch.selected { border-color: var(--ink); box-shadow: inset 0 0 0 2px #fff, 0 0 0 1px rgba(0,0,0,.15); }
.font-options { display: flex; flex-wrap: wrap; gap: 8px; }
.font-option { padding: 7px 13px; border: 1px solid var(--line); border-radius: 999px; background: var(--sheet); color: var(--ink); font-size: 13px; line-height: 1.1; cursor: pointer; }
.font-option.selected { border-color: var(--olive-dark); background: var(--olive-soft); font-weight: 800; }
.app-appearance-value { font-style: normal; color: var(--olive-dark); font-weight: 850; font-size: 12px; }
.font-size-range { width: 100%; margin: 4px 0 2px; height: 24px; accent-color: var(--olive-dark); cursor: pointer; }

.app-update-banner { position: fixed; top: 0; left: 0; right: 0; z-index: 300; display: flex; align-items: center; gap: 10px; padding: calc(10px + env(safe-area-inset-top)) 14px 10px; background: var(--olive-dark, #5e6342); color: #fff; font-size: 13px; font-weight: 800; box-shadow: 0 4px 14px rgba(0,0,0,.25); }
.app-update-text { flex: 1 1 auto; min-width: 0; }
.app-update-text small { display: block; margin-top: 1px; font-size: 10px; font-weight: 600; opacity: .82; }
.app-update-go { flex: 0 0 auto; padding: 7px 13px; border: 0; border-radius: 9px; background: #fff; color: var(--olive-dark, #5e6342); font-weight: 850; font-size: 12px; cursor: pointer; }
.app-update-close { flex: 0 0 auto; border: 0; background: transparent; color: #fff; font-size: 15px; padding: 4px; cursor: pointer; }
.note-tabs { display: flex; gap: 4px; margin: 15px 0 10px; padding-bottom: 6px; overflow-x: auto; }
.note-tab { flex: 0 0 auto; padding: 7px 11px; border: 1px solid transparent; border-radius: 16px; color: var(--muted); background: transparent; font-size: 12px; font-weight: 900; }
.note-tab.active { color: var(--olive-dark); border-color: var(--line); background: var(--olive-soft); }
.note-card { position: relative; margin: 0 2px 10px; padding: 14px; border: 1px solid rgba(160,140,91,.18); border-radius: 3px 13px 13px 13px; box-shadow: 0 5px 13px rgba(78,67,45,.08); transform: rotate(-.2deg); }
.note-card:nth-child(even) { transform: rotate(.25deg); }
.note-card-button { width: 100%; padding: 0; border: 0; background: transparent; text-align: left; }
.note-card h3 { margin-bottom: 6px; font-size: 13px; }
.note-card p { display: block; margin: 0; overflow: visible; font-size: 11px; white-space: pre-wrap; overflow-wrap: anywhere; }
.pin-mark { position: absolute; top: 6px; right: 8px; color: var(--coral); font-size: 11px; }
.text-button { padding: 6px 8px; color: var(--olive); border-radius: 8px; background: transparent; font-size: 10px; font-weight: 800; }
.app-dialog { width: min(580px, calc(100% - 28px)); padding: 0; border: 1px solid var(--line); border-radius: 20px; background: var(--sheet); box-shadow: var(--shadow); }
.app-dialog::backdrop { background: rgba(55,53,45,.4); backdrop-filter: blur(3px); }
.small-dialog { width: min(420px, calc(100% - 28px)); }
.dialog-form { display: grid; gap: 16px; padding: 22px; }
.dialog-heading { display: flex; align-items: flex-start; justify-content: space-between; }
.dialog-heading h2 { margin: 0; font-size: 20px; }
.app-info-dialog { width: min(360px, calc(100% - 28px)); }
.app-info-content { position: relative; justify-items: center; gap: 18px; padding: 28px 24px 22px; text-align: center; }
.app-info-close { position: absolute; top: 12px; right: 12px; }
.app-info-logo { width: 76px; height: 76px; border-radius: 22px; box-shadow: 0 12px 26px rgba(78, 67, 45, .13); }
.app-info-title { display: grid; gap: 2px; }
.app-info-title h2 { margin: 0; font-size: 26px; font-weight: 950; }
.app-info-title p { margin: 0; color: var(--muted); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12px; font-weight: 850; }
.app-info-list { display: grid; width: 100%; gap: 0; margin: 0; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: #fffdf8; }
.app-info-list div { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: 12px; padding: 13px 14px; }
.app-info-list div + div { border-top: 1px solid var(--line); }
.app-info-list dt { color: var(--muted); font-size: 11px; font-weight: 850; text-align: left; }
.app-info-list dd { margin: 0; color: var(--ink); font-size: 13px; font-weight: 900; text-align: right; overflow-wrap: anywhere; }
.app-info-content .primary-button { width: 100%; }
.form-grid { display: grid; gap: 12px; }
.form-grid.two-columns { grid-template-columns: 1fr 1fr; }
.inline-field { display: grid; grid-template-columns: 50px 1fr; gap: 7px; }
.inline-field input[type="color"], .wide-color { padding: 3px; }
.task-option-strip { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 10px; align-items: end; }
.task-color-row { position: relative; display: grid; gap: 8px; }
.color-value-input { display: none !important; }
.color-picker-trigger {
  display: inline-grid;
  grid-template-columns: 28px;
  align-items: center;
  justify-content: start;
  width: max-content;
  min-width: 42px;
  min-height: 42px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--ink);
  background: #faf7ef;
  font-size: 12px;
  font-weight: 850;
  text-align: left;
}
.color-picker-preview {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--selected-color, #d2aa62);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.64), 0 0 0 1px rgba(78,67,45,.16);
}
.color-palette {
  display: grid;
  gap: 9px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #fffdf8;
  box-shadow: 0 12px 28px rgba(78,67,45,.14);
}
.color-palette[hidden] { display: none !important; }
.color-swatch-grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 7px;
}
.color-swatch {
  width: 100%;
  aspect-ratio: 1;
  min-height: 28px;
  border: 1px solid rgba(78,67,45,.16);
  border-radius: 50%;
  background: var(--swatch-color);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.55);
}
.color-swatch.active {
  border-color: rgba(41,40,36,.72);
  box-shadow: 0 0 0 3px rgba(41,40,36,.12), inset 0 0 0 2px rgba(255,255,255,.7);
  transform: scale(1.06);
}
.color-swatch:focus-visible { outline: 2px solid rgba(83,109,168,.5); outline-offset: 2px; }
.color-detail-toggle { justify-self: start; }
.color-detail-toggle.active { background: var(--olive-soft); }
.color-detail { display: grid; gap: 8px; }
.color-detail[hidden] { display: none !important; }
.color-plane {
  position: relative;
  height: 128px;
  border: 1px solid rgba(78,67,45,.18);
  border-radius: 12px;
  background:
    linear-gradient(to top, #000, transparent),
    linear-gradient(to right, #fff, var(--picker-hue, hsl(0 100% 50%)));
  touch-action: none;
}
.color-plane-marker {
  position: absolute;
  width: 14px;
  height: 14px;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(41,40,36,.45), 0 2px 6px rgba(41,40,36,.22);
  transform: translate(-50%, -50%);
}
.color-hue-range {
  width: 100%;
  min-height: 30px;
  padding: 0;
  accent-color: #6d83c3;
}
.repeat-grid [hidden] { display: none !important; }
.repeat-interval-field { grid-template-columns: minmax(58px, 82px) 1fr; align-items: center; }
.repeat-interval-field span {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--muted);
  background: #faf7ef;
}
.task-icon-trigger {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  min-height: 44px;
  padding: 5px 10px 5px 5px;
  gap: 9px;
  border: 1px solid var(--line);
  border-radius: 11px;
  color: var(--ink);
  background: #faf7ef;
  text-align: left;
}
.task-icon-preview {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 10px;
  background: var(--olive-soft);
  font-size: 18px;
  font-weight: 900;
}
.task-icon-trigger strong {
  min-width: 0;
  overflow: hidden;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.icon-picker-dialog { width: min(520px, calc(100% - 28px)); }
.task-icon-picker {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  max-height: min(54vh, 420px);
  gap: 8px;
  overflow: auto;
  padding: 2px;
}
.icon-category-label {
  grid-column: 1 / -1;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .05em;
  color: var(--ink-faint, #aaa49a);
  padding: 6px 2px 2px;
  text-transform: uppercase;
}
.icon-category-label:first-child { padding-top: 2px; }
.task-icon-option {
  display: grid;
  min-width: 0;
  min-height: 36px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink);
  background: #faf7ef;
  font-size: 18px;
  font-weight: 900;
}
.task-icon-option.active {
  border-color: rgba(119, 124, 87, .55);
  background: var(--olive-soft);
  box-shadow: inset 0 0 0 1px rgba(119, 124, 87, .28);
}
.task-content-field { position: relative; }
.task-suggestions {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 10;
  display: grid;
  max-height: 168px;
  gap: 3px;
  margin-top: 4px;
  overflow: auto;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #fffdf7;
  box-shadow: 0 8px 18px rgba(78,67,45,.08);
}
.task-suggestions[hidden] { display: none !important; }
.task-suggestion {
  display: grid;
  width: 100%;
  min-height: 34px;
  padding: 7px 9px;
  border: 0;
  border-radius: 8px;
  color: var(--ink);
  background: transparent;
  font-size: 12px;
  font-weight: 800;
  text-align: left;
  overflow: hidden;
}
.task-suggestion-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.task-suggestion-meta {
  min-width: 0;
  margin-top: 2px;
  color: #aaa49a;
  font-size: 10px;
  font-weight: 750;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.task-suggestion:hover,
.task-suggestion.active {
  background: var(--olive-soft);
}
.check-field { display: flex !important; align-items: center; align-self: end; min-height: 43px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; background: #faf7ef; }
.check-field input { width: 17px; min-height: 0; height: 17px; margin-right: 7px; }
.category-avatar-field {
  display: grid;
  gap: 6px;
  font-size: 12px;
  font-weight: 750;
}
.category-avatar-control {
  display: flex;
  align-items: center;
  gap: 8px;
}
.category-avatar-button {
  display: inline-grid;
  grid-template-columns: 34px auto;
  align-items: center;
  gap: 9px;
  min-height: 43px;
  padding: 5px 11px 5px 5px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #faf7ef;
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
}
.category-avatar-preview {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  background: var(--olive-soft);
  box-shadow: inset 0 0 0 1px rgba(78,67,45,.12);
}
.category-avatar-preview::before {
  content: "";
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(119,124,87,.42);
  box-shadow: 0 13px 0 5px rgba(119,124,87,.28);
}
.category-avatar-preview.has-avatar::before { display: none; }
.category-avatar-preview img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.lunar-task-options {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  margin-top: -6px;
}
.lunar-task-options .check-field {
  align-self: center;
  min-height: 38px;
  font-size: 12px;
}
.lunar-task-preview {
  min-width: 0;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  overflow-wrap: anywhere;
}
.lunar-task-preview.error { color: var(--danger); }
.dialog-actions { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 8px; margin-top: 4px; }
.recurrence-scope-dialog { width: min(420px, calc(100% - 34px)); }
.recurrence-scope-form { gap: 12px; }
.recurrence-scope-hint { margin: -4px 0 2px; color: var(--muted); font-size: 12px; font-weight: 750; }
.recurrence-scope-list { display: grid; gap: 8px; }
.recurrence-scope-option {
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink);
  background: #fffdf7;
  font-size: 14px;
  font-weight: 850;
  text-align: left;
}
.recurrence-scope-option:hover { background: #f8f4e9; }
.recurrence-scope-option.danger { color: var(--danger); background: #fff8f6; }
.danger-text-button { padding: 8px; color: var(--danger); border-radius: 8px; background: transparent; font-size: 11px; font-weight: 800; }
.danger-text-button:hover { background: #f7e5e2; }
.search-dialog { min-height: 440px; }
.search-input { display: grid; grid-template-columns: 28px 1fr; align-items: center; border: 1px solid var(--line-strong); border-radius: 12px; padding-left: 10px; background: white; }
.search-input input { border: 0; box-shadow: none; }
.search-results { max-height: 55vh; overflow: auto; }
.search-result { display: block; width: 100%; padding: 11px; border: 0; border-bottom: 1px solid var(--line); background: transparent; text-align: left; }
.search-result:hover { background: #f8f4e9; }
.search-result small { display: block; color: var(--muted); }
.search-result strong { display: block; margin: 2px 0; }
.toast-region { position: fixed; z-index: 100; right: 18px; bottom: 18px; display: grid; gap: 8px; }
.toast { max-width: min(360px, calc(100vw - 36px)); padding: 11px 14px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); background: #fffdf7; box-shadow: var(--shadow-soft); font-size: 12px; animation: toast-in .2s ease; }
.toast.error { color: #7f3934; background: #fff0ed; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

/* Calendar 2.0 */
.mobile-calendar { display: none; }
.utility-panel { padding: 0; }
.mobile-nav {
  position: fixed;
  z-index: 50;
  bottom: 14px;
  left: 50%;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  width: min(620px, calc(100% - 32px));
  min-height: 52px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 19px;
  background: rgba(255,253,247,.96);
  box-shadow: 0 8px 26px rgba(78,67,45,.14);
  backdrop-filter: blur(12px);
  transform: translateX(-50%);
}
.mobile-nav button {
  position: relative;
  display: grid;
  place-items: center;
  gap: 2px;
  border: 0;
  border-radius: 14px;
  color: var(--muted);
  background: transparent;
  font-size: 12px;
  font-weight: 900;
}
.mobile-nav button[data-action="mobile-shared-schedule"]::before {
  content: "";
  position: absolute;
  left: -3px;
  top: 9px;
  bottom: 9px;
  width: 1px;
  border-radius: 999px;
  background: rgba(78, 67, 45, .18);
}
.mobile-nav button.active { color: var(--olive-dark); background: var(--olive-soft); }
.mobile-nav-label { line-height: 1.1; }
.ledger-nav-toggle {
  display: none;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  min-width: 48px;
  padding: 2px;
  border-radius: 999px;
  background: rgba(255,255,255,.65);
  box-shadow: inset 0 0 0 1px rgba(119, 124, 87, .14);
}
.ledger-nav-toggle span {
  display: grid;
  min-height: 14px;
  place-items: center;
  border-radius: 999px;
  color: #9a8d7c;
  font-size: 8px;
  font-weight: 950;
  line-height: 1;
}
.mobile-nav button[data-action="mobile-ledger"].active .ledger-nav-toggle {
  display: grid;
}
.mobile-nav button[data-action="mobile-ledger"][data-ledger-view="expenses"] [data-ledger-tab="expenses"],
.mobile-nav button[data-action="mobile-ledger"][data-ledger-view="assets"] [data-ledger-tab="assets"] {
  color: #8d3f35;
  background: #ffe1d9;
}
.mobile-fab {
  position: fixed;
  z-index: 55;
  right: 22px;
  bottom: 88px;
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  color: white;
  background: var(--ink);
  box-shadow: 0 10px 24px rgba(49, 50, 43, .28);
  font-size: 32px;
}
.utility-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  padding: 7px;
  border-bottom: 1px solid var(--line);
  background: #f5efe2;
}

.shared-calendar-mode {
  background:
    radial-gradient(circle at 18% 8%, rgba(88, 160, 160, .10) 0, transparent 28%),
    var(--paper);
}
.shared-calendar-mode .app-header {
  border-bottom-color: rgba(89, 142, 140, .28);
  background: rgba(239, 247, 243, .92);
}
.shared-calendar-mode .calendar-pane,
.shared-calendar-mode .notes-drawer {
  border-color: rgba(74, 139, 137, .28);
  background: #fcfffb;
}
.shared-calendar-mode .calendar-toolbar {
  background: linear-gradient(90deg, rgba(225, 244, 239, .92), #fffdf8 76%);
}
.shared-calendar-mode .month-title-button::after {
  content: "공유";
  display: inline-grid;
  min-height: 18px;
  margin-left: 7px;
  padding: 2px 7px;
  place-items: center;
  border-radius: 999px;
  color: #24646a;
  background: #d9eeeb;
  font-size: 9px;
  font-weight: 950;
  vertical-align: middle;
}
.shared-calendar-mode .weekday-row,
.shared-calendar-mode .mobile-weekday-row {
  background: #eef7f4;
}
.shared-calendar-mode .calendar-day {
  background: #fefffb;
}
.shared-calendar-mode .calendar-day.outside {
  background: #f0f4ef;
}
.shared-calendar-mode .calendar-day.selected {
  background: #edf8f5;
  box-shadow: inset 0 0 0 2px rgba(64, 132, 130, .38);
}
.shared-calendar-mode .calendar-day.today .calendar-date-button {
  background: #336c73;
}
.shared-calendar-mode .mobile-nav button.active {
  color: #245e64;
  background: #dcefed;
}
.shared-calendar-mode .mobile-fab {
  background: #2f5f66;
  box-shadow: 0 10px 24px rgba(47, 95, 102, .28);
}
.shared-calendar-mode .mobile-day-sheet {
  border-top-color: rgba(74, 139, 137, .28);
  background: #fcfffb;
}

.ledger-mode {
  background:
    linear-gradient(180deg, rgba(253, 245, 239, .95), var(--paper));
}
.ledger-mode .app-header {
  border-bottom-color: rgba(198, 102, 84, .26);
  background: rgba(250, 239, 232, .92);
}
.ledger-mode .calendar-pane,
.ledger-mode .notes-drawer {
  border-color: rgba(198, 102, 84, .24);
  background: #fffaf6;
}
.ledger-mode .calendar-toolbar {
  background: linear-gradient(90deg, rgba(255, 241, 232, .94), #fffdf8 72%);
}
.ledger-mode .month-title-button::after {
  content: "가계부";
  display: inline-grid;
  min-height: 18px;
  margin-left: 7px;
  padding: 2px 7px;
  place-items: center;
  border-radius: 999px;
  color: #9a3f35;
  background: #ffe1d9;
  font-size: 9px;
  font-weight: 950;
  vertical-align: middle;
}
.ledger-mode .weekday-row,
.ledger-mode .mobile-weekday-row {
  background: #fff0e9;
}
.ledger-mode .calendar-day {
  background: #fffdf9;
}
.ledger-mode .calendar-day.outside {
  background: #f6eee8;
}
.ledger-mode .calendar-day.selected {
  background: #fff1ea;
  box-shadow: inset 0 0 0 2px rgba(190, 93, 72, .34);
}
.ledger-mode .calendar-day.today .calendar-date-button,
.ledger-mode .mobile-fab {
  background: #983a32;
}
.ledger-mode .mobile-nav button.active {
  color: #8d382f;
  background: #ffe3da;
}
.ledger-assets-mode {
  background:
    linear-gradient(180deg, rgba(246, 250, 238, .95), var(--paper));
}
.ledger-assets-mode .workspace {
  grid-template-columns: minmax(0, 1fr);
  max-width: min(1500px, calc(100vw - 28px));
}
.ledger-assets-mode .calendar-pane {
  overflow: auto;
}
.ledger-assets-mode .notes-drawer,
.ledger-assets-mode .weekday-row,
.ledger-assets-mode .mobile-weekday-row,
.ledger-assets-mode .mobile-day-sheet,
.ledger-assets-mode .mobile-fab {
  display: none !important;
}
.ledger-assets-mode .desktop-board,
.ledger-assets-mode .mobile-calendar {
  overflow: auto;
}
.ledger-assets-mode .month-board,
.ledger-assets-mode .mobile-month-board {
  display: block;
  min-height: 0;
  overflow: auto;
  touch-action: pan-x pan-y;
}
.ledger-assets-mode .month-title-button::after {
  content: "자산";
  color: #386620;
  background: #e4f4cf;
}
.ledger-assets-mode .calendar-toolbar {
  background: linear-gradient(90deg, rgba(238, 249, 225, .94), #fffdf8 72%);
}
.ledger-assets-mode .calendar-pane {
  border-color: rgba(107, 151, 70, .24);
  background: #fbfff7;
}
.ledger-day-total {
  display: block;
  margin-top: 8px;
  color: #c13f35;
  font-size: 11px;
  font-weight: 950;
  text-align: center;
  line-height: 1.2;
}
.ledger-day-bar { width: 80%; max-width: 46px; height: 5px; margin: 4px auto 0; border-radius: 999px; background: rgba(0,0,0,.08); overflow: hidden; }
.ledger-day-bar-fill { height: 100%; border-radius: 999px; min-width: 3px; }
.ledger-method-dots {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-top: 7px;
}
.ledger-method-dots span,
.ledger-method-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
}
.ledger-day-empty-dot {
  display: block;
  width: 5px;
  height: 5px;
  margin: 12px auto 0;
  border-radius: 50%;
  background: rgba(190, 93, 72, .18);
}
.ledger-day-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 42px;
  margin-bottom: 12px;
  padding: 9px 12px;
  border: 1px solid rgba(198, 102, 84, .18);
  border-radius: 12px;
  color: #73453d;
  background: #fff2ec;
  font-size: 12px;
  font-weight: 900;
}
.ledger-day-summary strong {
  color: #c13f35;
  font-size: 16px;
  font-weight: 950;
}
.ledger-expense-list {
  display: grid;
  gap: 7px;
}
.ledger-method-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: -2px 0 12px;
}
.ledger-method-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 28px;
  padding: 4px 8px;
  border: 1px solid color-mix(in srgb, var(--payment-color) 28%, var(--line));
  border-radius: 999px;
  color: #5d4b43;
  background: color-mix(in srgb, var(--payment-color) 10%, #fff);
  font-size: 10px;
  font-weight: 900;
}
.ledger-method-chip::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--payment-color);
}
.ledger-expense-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  min-height: 58px;
  gap: 5px;
  padding: 8px 11px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--payment-color);
  border-radius: 11px;
  color: var(--ink);
  background: #fff;
  text-align: left;
}
.ledger-expense-meta {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 6px;
  font-size: 11px;
  font-weight: 900;
}
.ledger-expense-meta strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ledger-expense-meta .ledger-method-dot { background: var(--payment-color); }
.ledger-expense-detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}
.ledger-expense-content {
  min-width: 0;
  color: #5e5a50;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 750;
}
.ledger-expense-amount {
  color: #c13f35;
  font-size: 13px;
  font-weight: 950;
  white-space: nowrap;
}
.ledger-add-expense {
  width: 100%;
  margin-top: 12px;
}
.expense-method-list {
  display: grid;
  gap: 8px;
  max-height: min(48vh, 360px);
  overflow: auto;
}
.expense-method-row {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) auto;
  align-items: center;
  min-height: 42px;
  gap: 9px;
  padding: 9px 11px;
  border: 1px solid color-mix(in srgb, var(--payment-color) 26%, var(--line));
  border-radius: 12px;
  color: var(--ink);
  background: color-mix(in srgb, var(--payment-color) 8%, #fff);
  text-align: left;
}
.expense-method-row-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--payment-color);
}
.expense-method-row strong {
  min-width: 0;
  overflow: hidden;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.expense-method-row small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
}
.ledger-fixed-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 10px;
  padding: 8px 10px;
  border: 1px solid rgba(198, 102, 84, .15);
  border-radius: 11px;
  color: #8d5b50;
  background: rgba(255, 243, 237, .72);
  font-size: 11px;
  font-weight: 900;
}
.ledger-fixed-summary strong {
  color: #c13f35;
  font-size: 13px;
  font-weight: 950;
  white-space: nowrap;
}
.fixed-expense-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(198, 102, 84, .18);
  border-radius: 14px;
  background: #fff3ed;
  color: #8d5b50;
  font-size: 12px;
  font-weight: 900;
}
.fixed-expense-summary strong {
  color: #c13f35;
  font-size: 18px;
  font-weight: 950;
}
.fixed-expense-list {
  display: grid;
  gap: 8px;
  max-height: min(46vh, 380px);
  overflow: auto;
}
.fixed-expense-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 9px 11px;
  border: 1px solid rgba(198, 102, 84, .17);
  border-radius: 12px;
  background: rgba(255,253,248,.88);
}
.fixed-expense-row strong {
  min-width: 0;
  overflow: hidden;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fixed-expense-row span {
  color: #c13f35;
  font-size: 13px;
  font-weight: 950;
  white-space: nowrap;
}
.fixed-expense-actions {
  display: flex;
  align-items: center;
  gap: 3px;
}
.fixed-expense-actions .mini-icon-button {
  min-width: 27px;
  height: 26px;
  padding-inline: 5px;
  border-radius: 7px;
}
.ledger-summary-cards {
  display: grid;
  gap: 8px;
}
.ledger-summary-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  padding: 10px 12px;
  border: 1px solid rgba(184, 118, 98, .16);
  border-radius: 13px;
  background: #fff9f4;
  color: #8b6257;
  font-size: 12px;
  font-weight: 900;
}
.ledger-summary-card span {
  min-width: 0;
  line-height: 1.25;
}
.ledger-summary-card strong {
  color: #985247;
  font-size: 17px;
  font-weight: 950;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ledger-summary-card.total {
  border-color: rgba(84, 130, 151, .20);
  background: #f2f8f8;
  color: #4f7480;
}
.ledger-summary-card.total strong {
  color: #3e7488;
}
.ledger-total-toggle {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  min-height: 44px;
  gap: 10px;
  padding: 9px 12px;
  border: 1px solid rgba(119, 124, 87, .22);
  border-radius: 13px;
  color: var(--ink);
  background: #faf8ef;
  font: inherit;
  text-align: left;
}
.ledger-total-toggle span {
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}
.ledger-total-toggle strong {
  color: var(--olive-dark);
  font-size: 12px;
  font-weight: 950;
  white-space: nowrap;
}
.ledger-total-toggle.active {
  border-color: rgba(84, 130, 151, .25);
  background: #edf6f7;
}
.asset-panel {
  display: grid;
  gap: 14px;
  width: 100%;
  justify-items: center;
  padding: 18px 24px;
  overflow: auto;
}
.asset-panel.compact {
  justify-items: stretch;
}
.asset-panel.compact .asset-heading,
.asset-panel.compact .asset-summary,
.asset-mobile-list {
  width: 100%;
}
.asset-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: min(100%, 1180px);
}
.asset-heading h2,
.asset-heading h3 {
  margin: 0;
  font-size: 20px;
}
.asset-table {
  display: grid;
  width: min(100%, 1180px);
  min-width: 1040px;
  border: 1px solid rgba(112, 124, 88, .24);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 10px 24px rgba(78, 67, 45, .08);
}
.asset-table-row {
  display: grid;
  grid-template-columns: minmax(190px, 1.25fr) minmax(150px, .88fr) minmax(150px, .88fr) minmax(160px, .92fr) minmax(150px, .92fr) 156px;
  min-height: 40px;
  border-bottom: 1px solid rgba(78, 67, 45, .14);
  color: #2f2d28;
  background: color-mix(in srgb, var(--asset-row-color, #fff) 26%, #fff);
}
.asset-table-row.asset-row-excluded { opacity: .72; }
.asset-table-row:last-child { border-bottom: 0; }
.asset-table-row.asset-table-header {
  min-height: 38px;
  color: #2e2d29;
  background: #e2e1dc;
  font-size: 13px;
  font-weight: 950;
}
.asset-table-row.asset-table-header > * { justify-content: center; }
.asset-table-row > * {
  display: flex;
  align-items: center;
  min-width: 0;
  padding: 8px 10px;
  border-right: 1px solid rgba(78, 67, 45, .14);
}
.asset-table-row > *:last-child { border-right: 0; }
.asset-name {
  justify-content: space-between;
  gap: 8px;
  font-weight: 950;
}
.asset-name strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.asset-badges {
  display: flex;
  flex: 0 0 auto;
  gap: 4px;
}
.asset-badge {
  padding: 2px 5px;
  border-radius: 999px;
  color: #2e5a72;
  background: rgba(255,255,255,.58);
  font-size: 8px;
  font-weight: 950;
}
.asset-amount {
  justify-content: flex-end;
  font-variant-numeric: tabular-nums;
  font-weight: 950;
  white-space: nowrap;
}
.asset-amount.total {
  color: #315a70;
}
.asset-memo {
  min-width: 0;
  color: rgba(47, 45, 40, .70);
  font-size: 12px;
  font-weight: 850;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.asset-actions {
  justify-content: flex-end;
  gap: 4px;
  background: rgba(255,255,255,.28);
}
.asset-actions .mini-icon-button {
  width: auto;
  min-width: 24px;
  height: 26px;
  padding: 0 5px;
  border-radius: 7px;
  background: rgba(255,255,255,.54);
  color: #4f5149;
  font-size: 13px;
}
.asset-actions .mini-icon-button:hover { background: rgba(255,255,255,.86); }
.asset-color-cell {
  justify-content: center;
  background: rgba(255,255,255,.22);
}
.asset-actions .asset-color-swatch-button {
  width: 28px;
  min-width: 28px;
  height: 22px;
  padding: 0;
  border: 1px solid rgba(41, 40, 36, .28);
  border-radius: 7px;
  background: var(--asset-row-color, #fff);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.44);
}
.asset-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  width: min(100%, 1180px);
}
.asset-summary-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 46px;
  padding: 10px 12px;
  border: 1px solid rgba(78, 67, 45, .16);
  border-radius: 8px;
  background: #fff;
  font-size: 13px;
  font-weight: 950;
}
.asset-summary-item.available {
  border-color: rgba(212, 190, 75, .34);
  background: #fff4a8;
}
.asset-summary-item strong {
  font-size: 16px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.asset-mobile-list {
  display: grid;
  gap: 8px;
}
.asset-mobile-row {
  display: grid;
  gap: 7px;
  padding: 10px;
  border: 1px solid rgba(78, 67, 45, .10);
  border-radius: 10px;
  background: color-mix(in srgb, var(--asset-row-color, #fff) 26%, #fff);
}
.asset-mobile-row.asset-row-excluded { opacity: .72; }
.asset-mobile-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  text-align: left;
}
.asset-mobile-title {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 7px;
}
.asset-mobile-title strong {
  min-width: 0;
  overflow: hidden;
  font-size: 14px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.asset-mobile-total {
  font-size: 14px;
  font-weight: 950;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.asset-mobile-detail {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  gap: 5px 10px;
  color: rgba(47, 45, 40, .72);
  font-size: 11px;
  font-weight: 900;
}
.asset-mobile-memo {
  flex-basis: 100%;
  min-width: 0;
  overflow: hidden;
  color: rgba(47, 45, 40, .62);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.asset-mobile-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}
.asset-mobile-actions .mini-icon-button {
  width: auto;
  min-width: 30px;
  height: 28px;
  padding: 0 8px;
  border-radius: 8px;
  background: rgba(255,255,255,.58);
  color: #55564d;
  font-size: 11px;
}
.asset-empty {
  display: grid;
  min-height: 180px;
  place-items: center;
  border: 1px dashed rgba(119, 124, 87, .32);
  border-radius: 10px;
  color: var(--muted);
  background: rgba(255,255,255,.58);
  font-size: 13px;
  font-weight: 900;
}
.shared-calendar-mode .agenda-category,
.shared-calendar-mode .mobile-schedule-row:hover {
  border-color: rgba(74, 139, 137, .24);
}
.shared-calendar-mode .event-check { display: none; }
.shared-calendar-mode .calendar-event-dots .completed-dot { box-shadow: none; }
.utility-tab {
  min-height: 34px;
  border: 0;
  border-radius: 9px;
  color: var(--muted);
  background: transparent;
  font-size: 11px;
  font-weight: 850;
}
.utility-tab.active {
  color: var(--olive-dark);
  background: #fffdf7;
  box-shadow: 0 2px 8px rgba(78, 67, 45, .09);
}
.utility-section { height: 100%; padding: 16px; overflow: hidden; }
.utility-section[hidden] { display: none !important; }
.notes-panel .note-cards { height: calc(100% - 108px); }
.drawer-title-line { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.drawer-title-line h2 { margin: 0; }
.small-text-button { padding: 5px 9px; font-size: 12px; font-weight: 900; }

.calendar-day {
  position: relative;
  z-index: 1;
  min-width: 0;
  min-height: 138px;
  padding: 7px 6px 8px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #fffdf8;
  overflow: hidden;
  cursor: pointer;
  transition: background .18s ease, box-shadow .18s ease;
  display: flex;
  flex-direction: column;
}
.calendar-day:nth-child(7n) { border-right: 0; }
.calendar-day.outside { color: #aca79c; background: #f7f2e8; }
.calendar-day.selected { background: #faf5e9; box-shadow: inset 0 0 0 2px rgba(119, 124, 87, .34); }
.calendar-date-button {
  display: grid;
  width: 26px;
  height: 26px;
  margin: 0 auto 5px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 50%;
  color: inherit;
  background: transparent;
  font-size: 12px;
  font-weight: 850;
}
.calendar-day.sunday .calendar-date-button { color: var(--sunday); }
.calendar-day.saturday .calendar-date-button { color: var(--saturday); }
.calendar-day.holiday .calendar-date-button { color: var(--sunday); }
.calendar-day.today .calendar-date-button { color: white; background: var(--ink); }
.calendar-day.selected:not(.today) .calendar-date-button { background: #dedfd3; }
.holiday-label { display: block; margin: -3px 0 4px; color: var(--sunday); font-size: 8px; font-weight: 850; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lunar-date { margin-left: 6px; color: #aaa091; font-size: 11px; font-weight: 700; }
.calendar-event-labels {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 2px;
  flex: 1 1 0%;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.calendar-event-spacer {
  display: block;
  flex: 0 0 18px;
  min-height: 18px;
  pointer-events: none;
}
.calendar-event-labels::-webkit-scrollbar {
  display: none;
}
.calendar-event-chip {
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 0;
  min-height: 18px;
  padding: 2px 5px;
  gap: 3px;
  border: 0;
  border-left: 3px solid var(--event-color);
  border-radius: 4px;
  color: var(--event-contrast, #2f2d28);
  background: var(--event-color);
  cursor: pointer;
  text-align: left;
  font-size: 9.5px;
  font-weight: 850;
  line-height: 1.25;
}
.event-avatar {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.78);
  border-radius: 50%;
  background: rgba(255,255,255,.5);
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(78,67,45,.12);
}
.calendar-range-bar {
  z-index: 4;
  display: flex;
  align-self: start;
  justify-self: stretch;
  align-items: center;
  min-width: 0;
  height: 18px;
  margin: calc(34px + (var(--range-lane) * 20px)) 3px 0;
  padding: 0 7px;
  border: 0;
  border-radius: 5px;
  color: var(--range-contrast, white);
  background: var(--range-color);
  box-shadow: 0 2px 7px rgba(78, 67, 45, .13);
  cursor: pointer;
  font-size: 9.5px;
  font-weight: 900;
  line-height: 1;
  overflow: hidden;
  text-align: left;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .18);
}
.calendar-range-bar.continues-before {
  margin-left: 0;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.calendar-range-bar.continues-after {
  margin-right: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.calendar-range-bar.completed-range {
  color: rgba(255,255,255,.82);
  background: color-mix(in srgb, var(--range-color) 70%, #b9c7b4);
}
.calendar-range-text {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 3px;
  overflow: hidden;
}
.calendar-event-chip:hover { filter: saturate(1.15); }
.calendar-event-chip.completed-event { color: #324f32; background: rgba(203, 228, 199, .92); box-shadow: inset 0 0 0 1px rgba(72, 119, 69, .18); }
.event-check { display: inline-grid; flex: 0 0 auto; width: 13px; height: 13px; place-items: center; border-radius: 50%; color: white; background: #5b7d58; font-size: 9px; font-weight: 950; }
.event-important { flex: 0 0 auto; color: #bd7a2a; }
.event-range,
.event-repeat { flex: 0 0 auto; color: #6c7255; font-size: 9px; font-weight: 950; }
.event-text {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 2px;
  overflow: hidden;
}
.event-text .task-text,
.calendar-range-text .task-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.calendar-more { padding-left: 5px; color: var(--muted); font-size: 8px; font-weight: 800; }
.calendar-event-dots { display: none; align-items: center; justify-content: center; min-height: 9px; gap: 3px; }
.calendar-event-dots span { width: 5px; height: 5px; border-radius: 50%; }
.calendar-event-dots .calendar-avatar-dot {
  width: 8px;
  height: 8px;
  background-size: cover;
  background-position: center;
  box-shadow: 0 0 0 1px rgba(255,255,255,.72), 0 0 0 2px rgba(78,67,45,.10);
}
.calendar-event-dots .completed-dot { opacity: 1; box-shadow: 0 0 0 2px rgba(91, 125, 88, .22); }

.day-agenda { height: calc(100% - 48px); padding: 12px 2px 24px; overflow: auto; overscroll-behavior: contain; }
.agenda-category {
  margin-bottom: 12px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #fffdf8;
  overflow: hidden;
}
.agenda-category-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 38px;
  padding: 7px 8px 7px 11px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(90deg, color-mix(in srgb, var(--category-color) 12%, #fffdf8), #fffdf8 72%);
}
.agenda-category-title { display: flex; align-items: center; min-width: 0; gap: 7px; cursor: pointer; touch-action: manipulation; }
.agenda-category-title .category-dot { width: 8px; height: 8px; background: var(--category-color); }
.agenda-category-face { width: 20px; height: 20px; }
.agenda-category-title h3 { margin: 0; font-size: 12px; }
.agenda-category-actions { display: flex; gap: 3px; }
.mini-icon-button, .mini-add-button {
  display: grid;
  width: 25px;
  height: 25px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 8px;
  color: var(--muted);
  background: transparent;
  font-weight: 850;
}
.mini-icon-button:hover, .mini-add-button:hover { color: var(--olive-dark); background: var(--olive-soft); }
.agenda-task-list { display: grid; gap: 6px; padding: 8px; }
.agenda-task-list .task-item {
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  min-height: 43px;
  padding: 7px 8px;
  gap: 8px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--task-color);
  border-radius: 10px;
  background: var(--task-color);
  font-size: 11px;
}
.task-item.search-located,
.mobile-schedule-row.search-located,
.chat-message.search-located .chat-bubble {
  outline: 3px solid transparent;
  outline-offset: 3px;
  animation: search-located-highlight 1.2s ease;
}
.mobile-schedule-row.search-located {
  border-radius: 8px;
}
@keyframes search-located-highlight {
  0% {
    outline-color: rgba(196, 133, 47, 0);
    box-shadow: 0 0 0 0 rgba(196, 133, 47, 0);
  }
  18%, 72% {
    outline-color: rgba(196, 133, 47, .58);
    box-shadow: 0 0 0 7px rgba(196, 133, 47, .18);
  }
  100% {
    outline-color: rgba(196, 133, 47, 0);
    box-shadow: 0 0 0 0 rgba(196, 133, 47, 0);
  }
}
.agenda-task-list .task-item.completed {
  color: #4f5d4d;
  border-color: rgba(104, 137, 100, .25);
  border-left-color: var(--task-color);
  background: linear-gradient(90deg, var(--task-soft), #fbfdf9);
}
.task-item.completed .task-content { opacity: 1; text-decoration: none; }
.agenda-task-list .task-check {
  width: 22px;
  height: 22px;
  border: 1.5px solid #b8b4a8;
  border-radius: 7px;
  color: transparent;
  font-size: 13px;
  transition: none;
}
.agenda-task-list .task-item.completed .task-check {
  color: white;
  border-color: var(--task-color);
  background: var(--task-color);
  box-shadow: 0 0 0 3px var(--task-soft);
}
.task-main-line { display: flex; align-items: flex-start; gap: 4px; }
.task-icon { flex: 0 0 auto; line-height: 1.15; }
.task-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.important-star { flex: 0 0 auto; color: #c48736; }
.task-meta { display: flex; align-items: center; flex-wrap: wrap; margin-top: 5px; gap: 5px; }
.task-tag {
  grid-column: auto;
  padding: 2px 6px;
  border: 1px solid color-mix(in srgb, var(--tag-color) 35%, transparent);
  border-radius: 9px;
  color: #554f43;
  background: var(--tag-soft);
  font-size: 8px;
}
.task-date-badge {
  padding: 2px 7px;
  border-radius: 10px;
  color: #6c695d;
  background: #f3efe5;
  font-size: 8px;
  font-weight: 900;
}
.task-status-badge {
  padding: 2px 7px;
  border-radius: 10px;
  color: #52704f;
  background: #e1eddf;
  font-size: 8px;
  font-weight: 900;
}
.empty-add-task {
  width: 100%;
  min-height: 31px;
  border: 1px dashed var(--line-strong);
  border-radius: 9px;
  color: var(--muted);
  background: #faf7ef;
  font-size: 9px;
}
.empty-add-task:hover { color: var(--olive-dark); background: var(--olive-soft); }
.empty-category-message { margin: 2px 4px; color: var(--muted); font-size: 10px; text-align: center; }
.agenda-empty { padding: 30px 12px; text-align: center; }
.agenda-add-category { justify-self: center; margin: 3px auto 12px; }

.mobile-schedule-list { display: grid; gap: 18px; padding: 8px 0 28px; }
.mobile-schedule-group {
  display: grid;
  grid-template-columns: minmax(54px, 84px) minmax(0, 1fr);
  align-items: start;
  gap: 12px;
}
.mobile-schedule-group-rows { display: grid; gap: 13px; min-width: 0; }
.mobile-schedule-row {
  display: grid;
  grid-template-columns: 4px 24px minmax(0, 1fr);
  align-items: start;
  width: 100%;
  min-height: 52px;
  padding: 10px 2px;
  gap: 12px;
  border: 0;
  border-radius: 0;
  color: var(--task-contrast, var(--ink));
  background: var(--task-color);
  text-align: left;
}
.mobile-schedule-row:hover { filter: saturate(1.08); }
.mobile-schedule-category {
  display: flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  max-width: 100%;
  margin: 0;
  padding: 1px 2px;
  border: 0;
  border-radius: 8px;
  color: #4e4a40;
  background: transparent;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.35;
  text-align: left;
  overflow-wrap: anywhere;
}
.mobile-schedule-category:where(button) { cursor: pointer; }
.mobile-schedule-category:where(button):active { background: rgba(78, 67, 45, .08); }
.mobile-category-face { width: 22px; height: 22px; }
.mobile-schedule-marker {
  width: 4px;
  min-height: 40px;
  border-radius: 999px;
  background: var(--task-contrast, var(--task-color));
}
.mobile-schedule-check {
  display: grid;
  width: 23px;
  height: 23px;
  margin-top: 0;
  padding: 0;
  place-items: center;
  border: 1.5px solid #b8b4a8;
  border-radius: 7px;
  color: transparent;
  background: white;
  font-size: 13px;
  font-weight: 950;
}
.mobile-schedule-row.completed .mobile-schedule-check {
  color: white;
  border-color: var(--task-color);
  background: var(--task-color);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--task-color) 18%, transparent);
}
.mobile-schedule-body {
  display: grid;
  min-width: 0;
  padding: 0;
  gap: 4px;
  border: 0;
  color: inherit;
  background: transparent;
  text-align: left;
}
.mobile-schedule-content {
  display: flex;
  align-items: flex-start;
  min-width: 0;
  gap: 5px;
  color: inherit;
  font-size: 16px;
  font-weight: 900;
  line-height: 1.35;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.mobile-schedule-meta {
  color: color-mix(in srgb, var(--task-contrast, var(--ink)) 78%, transparent);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.35;
}
.mobile-schedule-row.completed .mobile-schedule-content { color: inherit; }
.mobile-day-empty {
  margin: 22px 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}

.note-card {
  display: block;
  width: calc(100% - 4px);
  color: var(--ink);
  background: var(--note-color);
  text-align: left;
}
.note-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 7px; gap: 8px; }
.note-card-header strong { font-size: 12px; }
.note-pin { color: #9b653f; font-size: 8px; font-weight: 850; }
.note-body {
  display: block;
  overflow: visible;
  font-size: 11px;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.empty-note-card { padding: 28px 8px; color: var(--muted); text-align: center; }
.search-result-kind {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 8px;
  color: var(--olive-dark);
  background: var(--olive-soft);
  font-size: 8px;
  font-weight: 850;
}

.routine-cards { display: grid; align-content: start; height: calc(100% - 60px); margin: 12px 0; gap: 8px; overflow: auto; }
.routine-card { display: grid; width: 100%; gap: 5px; padding: 11px; border: 1px solid var(--line); border-left: 4px solid var(--routine-color); border-radius: 12px; background: #fffdf8; text-align: left; cursor: pointer; }
.routine-card.active { background: color-mix(in srgb, var(--routine-color) 9%, #fffdf8); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--routine-color) 35%, transparent); }
.routine-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.routine-card-title { display: flex; min-width: 0; align-items: center; gap: 6px; }
.routine-card-top strong { font-size: 13px; }
.routine-card-type { flex: 0 0 auto; padding: 2px 6px; border-radius: 999px; color: var(--olive-dark); background: var(--olive-soft); font-size: 9px; font-weight: 900; }
.routine-card-actions { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 3px; }
.routine-order-button:disabled { opacity: .28; cursor: default; }
.routine-edit-button { flex: 0 0 auto; }
.routine-widget-button { flex: 0 0 auto; color: #9b9a90; font-size: 16px; line-height: 1; }
.routine-widget-button.active { color: #f2b705; background: transparent; text-shadow: 0 1px 0 rgba(255,255,255,.65); }
.routine-card-top small, .routine-card-meta { color: var(--muted); font-size: 10px; font-weight: 800; }
.routine-card-breakdown { display: grid; gap: 3px; padding-top: 3px; }
.routine-card-breakdown-line {
  display: block;
  font-size: 10px;
  line-height: 1.35;
}
.routine-card-breakdown-today {
  color: #2d2b25;
  font-size: 11px;
  font-weight: 900;
}
.routine-card-breakdown-sub {
  color: #b5b1a8;
  font-weight: 700;
}
.routine-detail { padding: 12px; border: 1px solid var(--line); border-radius: 13px; background: linear-gradient(180deg, color-mix(in srgb, var(--routine-color) 8%, #fffdf8), #fffdf8); }
.routine-detail-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.routine-detail-heading h3 { margin: 0; font-size: 17px; }
.routine-stat-pill { display: inline-block; padding: 4px 9px; border-radius: 14px; color: #27626f; background: #dff3f6; font-size: 10px; font-weight: 900; }
.routine-mode .calendar-toolbar { background: #f7f4ff; }
.routine-mode .add-category-button { display: none; }
.routine-mode .mobile-fab { display: none; }
.routine-day { display: block; position: relative; border: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #fbfaff; text-align: left; }
.routine-day-number { position: absolute; top: 8px; left: 9px; color: var(--ink); font-size: 18px; font-weight: 900; }
.routine-day.sunday .routine-day-number, .routine-day.holiday .routine-day-number { color: var(--sunday); }
.routine-day.saturday .routine-day-number { color: var(--saturday); }
.routine-day.outside .routine-day-number { color: #b9b7b0; }
.routine-check-mark { position: absolute; right: 10px; bottom: 8px; color: var(--routine-color); font-size: 54px; font-weight: 300; line-height: .8; transform: rotate(-7deg); }
.routine-day.selected { box-shadow: inset 0 0 0 2px rgba(79, 111, 214, .25); }
.routine-day.today .routine-day-number { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 50%; color: white; background: #536da8; }
.routine-options-box { display: grid; gap: 8px; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.54); }
.routine-options-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 11px; font-weight: 900; }
.routine-option-list { display: grid; gap: 7px; }
.routine-option-row { display: grid; grid-template-columns: 1fr 34px; align-items: center; gap: 7px; }
.routine-option-row input { min-width: 0; }
.routine-count-day { padding: 38px 7px 7px; cursor: pointer; }
.routine-count-total {
  position: absolute;
  top: 9px;
  right: 8px;
  padding: 3px 7px;
  border-radius: 999px;
  color: #fff;
  background: var(--routine-color);
  font-size: 10px;
  font-weight: 950;
}
.routine-count-list { display: grid; gap: 5px; }
.routine-count-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 5px;
  min-height: 24px;
  padding: 3px 4px;
  border-radius: 8px;
  background: rgba(255,255,255,.58);
}
.routine-count-name {
  min-width: 0;
  overflow: hidden;
  color: #4c493f;
  font-size: 10px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.routine-count-mobile-label { display: none; }
.routine-count-mobile-summary { display: none; }
.routine-count-stepper { display: inline-grid; grid-template-columns: 22px 20px 22px; align-items: center; gap: 2px; }
.routine-count-button {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--routine-color) 28%, var(--line));
  border-radius: 7px;
  color: var(--routine-color);
  background: #fff;
  font-size: 13px;
  font-weight: 950;
}
.routine-count-value { color: var(--ink); font-size: 10px; font-weight: 950; text-align: center; }
.routine-count-editor-list { display: grid; gap: 9px; }
.routine-count-editor-summary {
  padding: 10px 12px;
  border-radius: 12px;
  color: var(--ink);
  background: var(--olive-soft);
  font-size: 13px;
  font-weight: 950;
}
.routine-count-editor-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fffdf8;
}
.routine-count-editor-row strong { min-width: 0; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.routine-count-editor-controls { display: inline-grid; grid-template-columns: 34px 54px 34px; align-items: center; gap: 5px; }
.routine-count-editor-button {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink);
  background: #faf7ef;
  font-size: 18px;
  font-weight: 950;
}
.routine-count-editor-value { color: var(--ink); font-size: 13px; font-weight: 950; text-align: center; }

.user-switcher {
  max-width: 170px;
  min-height: 36px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255,255,255,.72);
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
}
.user-dialog { width: min(520px, calc(100% - 28px)); }
.user-cards {
  display: grid;
  gap: 8px;
  max-height: 190px;
  overflow: auto;
  padding: 2px;
}
.user-card {
  display: grid;
  gap: 4px;
  width: 100%;
  padding: 12px 13px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,.62);
  color: var(--ink);
  text-align: left;
}
.user-card strong { font-size: 13px; }
.user-card span { color: var(--muted); font-size: 11px; font-weight: 750; }
.user-card.active { border-color: rgba(119,124,87,.45); background: rgba(226,232,210,.72); }
.user-card.inactive { opacity: .58; }
.form-hint { margin: -4px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.note-tabs[hidden] { display: none !important; }
.notes-panel .note-cards { height: calc(100% - 76px); }
.logout-trigger {
  border: 1px solid rgba(122, 104, 77, .16);
  background: rgba(255,255,255,.64);
  color: var(--muted);
  font-weight: 850;
}
.logout-trigger:hover { color: var(--danger); background: rgba(255,255,255,.9); }
.header-admin-actions > *,
.header-common-actions > * { flex: 0 0 auto; }
.header-actions .icon-text-button,
.header-actions .sync-badge,
.header-actions .user-switcher { white-space: nowrap; }
.header-common-actions .search-trigger { min-width: 52px; justify-content: center; }
.header-common-actions .sync-badge { min-width: 86px; justify-content: center; }
.header-admin-actions .user-switcher { width: 210px; max-width: 24vw; text-overflow: ellipsis; }
#userAdminButton { min-width: 64px; justify-content: center; }
#logoutButton { min-width: 78px; justify-content: center; }

.notes-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.notes-panel[hidden] { display: none !important; }
.notes-panel .drawer-header { flex: 0 0 auto; }
.notes-panel .note-cards.note-chat-list {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  padding: 14px;
  overflow: auto;
  border: 1px solid rgba(160, 140, 91, .24);
  border-radius: 18px;
  background:
    radial-gradient(circle at 20px 20px, rgba(142, 165, 140, .08) 0 2px, transparent 2px 18px),
    linear-gradient(180deg, rgba(255,253,247,.94), rgba(242,236,220,.62));
  scroll-behavior: auto;
}
.note-chat-list.drag-over {
  outline: 2px dashed rgba(119, 124, 87, .52);
  outline-offset: -8px;
  background: linear-gradient(180deg, rgba(235, 241, 222, .92), rgba(255,253,247,.94));
}
.chat-date-separator {
  width: fit-content;
  margin: 6px auto 12px;
  padding: 4px 11px;
  border-radius: 999px;
  color: #fff;
  background: rgba(119, 124, 87, .72);
  box-shadow: 0 4px 12px rgba(78, 67, 45, .10);
  font-size: 10px;
  font-weight: 900;
}
.chat-message {
  display: block;
  margin: 8px 0;
  outline: none;
}
.chat-message.removing {
  pointer-events: none;
  transform-origin: right center;
  animation: chat-remove .24s ease forwards;
}
.chat-message.removing.has-image-attachment {
  animation: chat-remove .38s ease forwards;
}
@keyframes chat-remove {
  to {
    opacity: 0;
    filter: blur(2px);
    transform: translateY(-8px) scale(.96);
  }
}
.chat-message.attachment-only-message,
.chat-message.image-only-message {
  display: flex;
  justify-content: flex-end;
}
.chat-message:focus-visible .chat-bubble { box-shadow: 0 0 0 3px rgba(119, 124, 87, .18), 0 8px 22px rgba(78,67,45,.10); }
.chat-bubble {
  width: 100%;
  max-width: none;
  padding: 10px 12px 7px;
  border: 1px solid color-mix(in srgb, var(--note-color) 45%, rgba(160,140,91,.24));
  border-radius: 16px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--note-color) 72%, white), #fffdf8 72%);
  box-shadow: 0 8px 22px rgba(78, 67, 45, .10);
}
.chat-message.attachment-only-message .chat-bubble,
.chat-message.image-only-message .chat-bubble {
  width: min(78%, 560px);
  border-radius: 16px 16px 4px 16px;
}
.chat-text {
  margin: 0;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.58;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.chat-link {
  color: #336f85;
  font-weight: 900;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 2px;
}
.chat-link:visited { color: #6b5f8e; }
.chat-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 6px;
}
.chat-order-actions { display: inline-flex; align-items: center; gap: 3px; }
.note-order-button:disabled { opacity: .28; cursor: default; }
.chat-meta {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  flex-wrap: wrap;
  gap: 3px 6px;
}
.chat-time {
  display: block;
  margin-top: 0;
  color: rgba(73, 67, 56, .56);
  font-size: 9px;
  font-weight: 800;
  text-align: left;
}
.chat-edited {
  color: rgba(73, 67, 56, .64);
  font-size: 9px;
  font-weight: 850;
}
.chat-edited::before {
  content: '·';
  margin-right: 6px;
  color: rgba(73, 67, 56, .38);
}
.chat-attachments {
  display: grid;
  gap: 8px;
  margin-top: 4px;
}
.chat-attachments.photo-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3px;
  overflow: hidden;
  border-radius: 12px;
}
.chat-message.has-image-attachment .chat-attachments.photo-grid .chat-image-card {
  width: 100%;
  margin: 0;
  aspect-ratio: 1 / 1;
  border-radius: 7px;
}
.chat-attachments.photo-grid.photo-grid-3 .chat-image-card:first-child {
  grid-column: 1 / -1;
  aspect-ratio: 2 / 1;
}
.chat-attachments.photo-grid .chat-image-link,
.chat-attachments.photo-grid .chat-image {
  width: 100%;
  height: 100%;
}
.chat-attachments.photo-grid .chat-image {
  max-height: none;
  object-fit: cover;
}
.chat-attachments.photo-grid .chat-attachment-download { display: none; }
.chat-text + .chat-attachments { margin-top: 9px; }
.chat-image-card,
.chat-video-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(160, 140, 91, .18);
  border-radius: 12px;
  background: rgba(255,255,255,.72);
}
.chat-message.removing.has-image-attachment .chat-image-card {
  border-color: transparent;
  box-shadow: 0 10px 22px rgba(78, 67, 45, .12);
  animation: image-card-scatter .38s cubic-bezier(.2,.8,.2,1) forwards;
}
.chat-message.removing.has-image-attachment .chat-image-card::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-conic-gradient(from 45deg, rgba(255,255,255,.55) 0 25%, rgba(47,50,39,.16) 0 50%) 0 0 / 16px 16px,
    linear-gradient(135deg, rgba(255,255,255,.25), transparent);
  mix-blend-mode: screen;
  animation: image-mosaic-overlay .38s steps(6, end) forwards;
}
.chat-message.removing.has-image-attachment .chat-image {
  image-rendering: pixelated;
  transform-origin: center;
  animation: image-mosaic-remove .38s steps(6, end) forwards;
}
@keyframes image-card-scatter {
  45% { transform: translateY(-3px) scale(1.015); }
  to { opacity: 0; transform: translate(26px, -14px) rotate(1.5deg) scale(.92); }
}
@keyframes image-mosaic-overlay {
  0% { opacity: 0; background-size: 8px 8px, auto; }
  28% { opacity: .95; background-size: 12px 12px, auto; }
  72% { opacity: .78; background-size: 22px 22px, auto; transform: translate(8px, -6px); }
  100% { opacity: 0; background-size: 30px 30px, auto; transform: translate(28px, -18px) scale(.88); }
}
@keyframes image-mosaic-remove {
  0% { filter: none; clip-path: inset(0); }
  38% { filter: blur(1px) contrast(1.28) saturate(1.15); transform: scale(1.02); clip-path: inset(0); }
  72% { filter: blur(5px) contrast(1.65); transform: translate(12px, -8px) scale(.96); clip-path: inset(10% 7% 12% 10%); }
  100% { opacity: 0; filter: blur(8px) contrast(1.9); transform: translate(28px, -16px) scale(.86); clip-path: inset(38% 0 0 46%); }
}
.chat-message.has-image-attachment .chat-image-card,
.chat-message.has-image-attachment .chat-video-card {
  width: min(78%, 560px);
  margin-left: auto;
}
.chat-message.image-only-message .chat-image-card,
.chat-message.image-only-message .chat-video-card {
  width: 100%;
  max-width: none;
}
.chat-image-link {
  display: block;
  overflow: hidden;
}
.chat-image,
.chat-video {
  display: block;
  width: 100%;
  max-width: none;
  max-height: 360px;
  object-fit: contain;
  background: #fff;
}
.chat-video {
  aspect-ratio: 16 / 9;
  background: #121212;
}
.chat-attachment-download {
  position: absolute;
  right: 8px;
  bottom: 8px;
  padding: 5px 8px;
  border-radius: 999px;
  color: #fff;
  background: rgba(47, 50, 39, .78);
  font-size: 10px;
  font-weight: 900;
  text-decoration: none;
}
.chat-file {
  display: flex;
  align-items: center;
  justify-self: end;
  gap: 8px;
  padding: 9px 10px;
  border: 1px solid rgba(160, 140, 91, .20);
  border-radius: 12px;
  color: var(--ink);
  background: rgba(255,255,255,.68);
  font-size: 12px;
  font-weight: 850;
  text-decoration: none;
  width: min(78%, 560px);
  max-width: 100%;
  margin-left: auto;
}
.chat-message.attachment-only-message .chat-file { width: 100%; }
.chat-file:hover { background: #fff; }
.chat-file-name { overflow-wrap: anywhere; }
.chat-empty p { margin: 0; font-size: 12px; line-height: 1.6; }
.note-composer {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 58px;
  align-items: end;
  gap: 8px;
  padding: 8px;
  border: 1px solid rgba(160, 140, 91, .24);
  border-radius: 18px;
  background: rgba(255,253,247,.94);
  box-shadow: 0 8px 22px rgba(78, 67, 45, .08);
}
.composer-attach,
.composer-send,
.note-file-clear {
  border: 0;
  cursor: pointer;
  font-weight: 900;
}
.composer-attach {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 14px;
  color: var(--olive-dark);
  background: var(--olive-soft);
  font-size: 19px;
}
.composer-input-wrap { min-width: 0; }
#chatNoteInput {
  display: block;
  width: 100%;
  min-height: 42px;
  max-height: 128px;
  padding: 11px 12px;
  resize: vertical;
  border: 1px solid rgba(160, 140, 91, .26);
  border-radius: 14px;
  background: #fffefb;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  line-height: 1.45;
}
#chatNoteInput:focus { outline: 2px solid rgba(119,124,87,.18); border-color: rgba(119,124,87,.42); }
.composer-send {
  min-height: 42px;
  border-radius: 14px;
  color: #fff;
  background: var(--olive-dark);
  font-size: 12px;
}
.note-file-preview {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  margin: 0 0 6px;
}
.note-file-preview[hidden] { display: none !important; }
.note-file-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 180px;
  overflow: hidden;
  padding: 3px 7px;
  border-radius: 999px;
  color: var(--olive-dark);
  background: var(--olive-soft);
  font-size: 9px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.note-file-chip.image-chip {
  max-width: 220px;
  padding-left: 3px;
  border-radius: 12px;
}
.note-file-chip img {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border-radius: 9px;
  object-fit: cover;
  background: #fff;
}
.note-file-chip span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.note-file-chip.muted { color: var(--muted); background: rgba(141,133,112,.13); }
.note-file-clear {
  padding: 3px 7px;
  border-radius: 999px;
  color: var(--danger);
  background: rgba(192, 84, 80, .10);
  font-size: 9px;
}
.note-action-buttons {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.note-action-buttons [hidden] { display: none !important; }
.note-action-form .soft-button,
.note-action-form .danger-text-button {
  width: 100%;
  min-height: 46px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 900;
}
.note-action-form .dialog-actions {
  grid-template-columns: 1fr;
  margin-top: 8px;
}
.note-attach-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.note-attach-options .soft-button {
  min-height: 52px;
  font-size: 14px;
  font-weight: 900;
}
.note-action-buttons .danger-text-button {
  min-height: 46px;
  border: 1px solid rgba(192, 84, 80, .18);
  border-radius: 12px;
  background: rgba(192, 84, 80, .08);
}
.attachment-preview-dialog { width: min(720px, calc(100% - 24px)); }
.attachment-preview-dialog .dialog-heading {
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.attachment-preview-dialog .dialog-heading h2 {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.attachment-preview-counter {
  flex: 0 0 auto;
  min-width: 44px;
  padding: 5px 9px;
  border-radius: 999px;
  color: var(--muted);
  background: rgba(142, 165, 140, .12);
  font-size: 11px;
  font-weight: 900;
  text-align: center;
}
.attachment-preview-counter:empty { display: none; }
.attachment-preview-dialog .dialog-heading .icon-button { flex: 0 0 auto; }
.attachment-preview-frame {
  position: relative;
  display: grid;
  max-height: min(72vh, 680px);
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #111;
  cursor: zoom-in;
  overscroll-behavior: contain;
  touch-action: none;
  user-select: none;
}
.attachment-preview-frame img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: min(72vh, 680px);
  object-fit: contain;
  transform-origin: center center;
  touch-action: none;
  user-select: none;
  -webkit-user-drag: none;
}
.attachment-preview-nav {
  position: absolute;
  top: 50%;
  z-index: 3;
  display: grid;
  width: 46px;
  height: 58px;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 16px;
  color: #fff;
  background: rgba(0,0,0,.46);
  box-shadow: 0 5px 18px rgba(0,0,0,.22);
  font-size: 38px;
  font-weight: 500;
  line-height: 1;
  transform: translateY(-50%);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  touch-action: manipulation;
}
.attachment-preview-nav.previous { left: 10px; }
.attachment-preview-nav.next { right: 10px; }
.attachment-preview-nav:disabled {
  opacity: .28;
  box-shadow: none;
}
.attachment-preview-nav[hidden] { display: none; }
.attachment-preview-frame.is-zoomed {
  cursor: grab;
}
.attachment-preview-frame.is-dragging {
  cursor: grabbing;
}
.attachment-preview-download {
  display: inline-grid;
  place-items: center;
  text-decoration: none;
}
.attachment-preview-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 8px;
}
.attachment-preview-actions > button { min-height: 44px; }
.attachment-preview-actions > [hidden] { display: none; }

/* 가족 및 디데이 스타일 */
.family-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}
.family-table th {
  font-weight: bold;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
  padding: 8px 4px;
}
.family-table td {
  padding: 8px 4px;
  border-bottom: 1px dashed var(--line);
  vertical-align: middle;
  color: var(--ink);
}
.family-table tr.family-row {
  cursor: pointer;
}
.family-table tr.family-row:hover {
  background: rgba(119, 124, 87, 0.05);
}
.family-table td strong {
  font-size: 11px;
  color: var(--ink);
}
.family-table td small {
  color: var(--muted);
  font-weight: 800;
}
.dday-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 12px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--olive-dark);
  border-radius: 12px;
  background: #fffdf8;
  text-align: left;
  cursor: pointer;
  box-sizing: border-box;
}
.dday-card:hover {
  background: #fbf8f0;
}
.dday-card-left {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.dday-card-title {
  font-size: 13px;
  font-weight: bold;
  color: var(--ink);
}
.dday-card-date {
  font-size: 10px;
  color: var(--muted);
  font-weight: 800;
}
.dday-card-days {
  font-size: 14px;
  font-weight: 900;
  color: var(--olive-dark);
}

.dday-card.readonly {
  cursor: default !important;
}
.dday-card.readonly:hover {
  background: #fffdf8 !important;
}