@media (max-width: 1120px) {
  .workspace { grid-template-columns: minmax(620px, 1fr) 280px; padding: 10px; gap: 10px; }
  .day-cell { min-height: 210px; }
}

@media (max-width: 760px) {
  body { padding-bottom: calc(66px + env(safe-area-inset-bottom)); }
  .app-header { min-height: 62px; padding: 8px 12px; }
  .brand-mark.small { width: 37px; height: 37px; }
  .brand .eyebrow, .header-actions .icon-text-button span, .header-actions .icon-button { display: none; }
  .header-actions .search-trigger { display: grid; width: 42px; height: 42px; place-items: center; padding: 0; font-size: 26px; }
  .brand h1 { font-size: 17px; }
  .sync-badge { max-width: 118px; }
  .workspace { display: block; padding: 8px; }
  .calendar-pane { border-radius: 18px; }
  .calendar-toolbar { padding: 11px 12px; }
  .month-title-button { min-width: 128px; font-size: 17px; }
  .desktop-board { display: none; }
  .mobile-agenda { display: block; padding: 12px; }
  .mobile-date-strip { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 14px; }
  .mobile-date-button { display: grid; gap: 2px; min-width: 0; padding: 7px 2px; border: 1px solid var(--line); border-radius: 10px; background: #faf7ef; font-size: 9px; text-align: center; }
  .mobile-date-button strong { font-size: 13px; }
  .mobile-date-button.active { color: white; border-color: var(--olive); background: var(--olive); }
  .mobile-month-picker { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; margin-bottom: 15px; }
  .mobile-month-weekday { padding: 4px; color: var(--muted); text-align: center; font-size: 9px; font-weight: 800; }
  .mobile-month-date { min-height: 36px; border: 1px solid var(--line); border-radius: 8px; background: #faf7ef; font-size: 11px; }
  .mobile-month-date.outside { opacity: .35; }
  .mobile-month-date.active { color: white; border-color: var(--olive); background: var(--olive); }
  .mobile-day-heading { display: flex; align-items: center; justify-content: space-between; margin: 4px 2px 12px; }
  .mobile-day-heading h3 { margin: 0; font-size: 17px; }
  .mobile-category { margin-bottom: 10px; border: 1px solid var(--line); border-radius: 13px; overflow: hidden; }
  .mobile-category-heading { display: flex; align-items: center; padding: 9px 10px; gap: 7px; background: #f8f4ea; font-size: 12px; font-weight: 850; }
  .mobile-category-heading .add-task-mini { margin-left: auto; }
  .mobile-category .task-list { gap: 6px; padding: 8px; }
  .mobile-category .task-item { grid-template-columns: 24px minmax(0,1fr) auto; padding: 9px; font-size: 12px; }
  .mobile-category .task-check { width: 21px; height: 21px; font-size: 12px; }
  .mobile-category .task-tag { font-size: 9px; }
  .notes-drawer { display: none; position: static; height: auto; min-height: calc(100vh - 150px); margin-top: 8px; }
  .notes-drawer.mobile-open { display: block; }
  .calendar-pane.mobile-hidden { display: none; }
  .mobile-nav { position: fixed; z-index: 50; right: 0; bottom: 0; left: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); min-height: calc(58px + env(safe-area-inset-bottom)); padding: 4px 8px env(safe-area-inset-bottom); border-top: 1px solid var(--line); background: rgba(255,253,247,.96); backdrop-filter: blur(12px); }
  .mobile-nav button { border: 0; border-radius: 10px; color: var(--muted); background: transparent; font-size: 11px; font-weight: 800; }
  .mobile-nav button.active { color: var(--olive-dark); background: var(--olive-soft); }
  .mobile-fab { position: fixed; z-index: 55; right: 16px; bottom: calc(70px + env(safe-area-inset-bottom)); display: grid; width: 52px; height: 52px; place-items: center; border: 0; border-radius: 17px; color: white; background: var(--coral); box-shadow: 0 8px 22px rgba(192,122,98,.35); font-size: 28px; }
  .form-grid.two-columns { grid-template-columns: 1fr; }
  .lunar-task-options { grid-template-columns: 1fr 1fr; }
  .lunar-task-preview { grid-column: 1 / -1; }
  .app-dialog { max-height: calc(100dvh - 20px); overflow: hidden; }
  .dialog-form { max-height: calc(100dvh - 20px); overflow: auto; padding: 18px; overscroll-behavior: contain; }
  #taskDialog {
    width: min(560px, calc(100vw - 16px));
    max-height: calc(100dvh - 16px);
    margin: auto;
    overflow: hidden;
    touch-action: manipulation;
  }
  #taskDialog .dialog-form {
    max-height: calc(100dvh - 16px);
    gap: 8px;
    padding: 12px 12px calc(92px + env(safe-area-inset-bottom));
    overflow: auto;
    overscroll-behavior: contain;
    scroll-padding-bottom: calc(108px + env(safe-area-inset-bottom));
  }
  #taskDialog .dialog-heading { align-items: center; min-height: 36px; }
  #taskDialog .dialog-heading h2 { font-size: 17px; }
  #taskDialog .eyebrow { margin-bottom: 1px; font-size: 7px; }
  #taskDialog label,
  #taskDialog .task-content-field { gap: 4px; font-size: 11px; }
  #taskDialog input,
  #taskDialog select,
  #taskDialog textarea { min-height: 36px; }
  #taskDialog textarea { max-height: 92px; resize: none; scroll-margin-bottom: calc(112px + env(safe-area-inset-bottom)); }
  #taskDialog .task-content-field { scroll-margin-bottom: calc(112px + env(safe-area-inset-bottom)); }
  #taskDialog .form-grid { gap: 7px; }
  #taskDialog .task-option-strip { grid-template-columns: minmax(0, .95fr) minmax(0, .9fr); gap: 7px; }
  #taskDialog .task-icon-trigger { grid-template-columns: 28px minmax(0, 1fr); min-height: 36px; padding: 4px 7px 4px 4px; gap: 6px; }
  #taskDialog .task-icon-preview { width: 26px; height: 26px; border-radius: 8px; font-size: 15px; }
  #taskDialog .task-icon-trigger strong { font-size: 11px; }
  #taskDialog .check-field { min-height: 36px; padding: 6px 7px; font-size: 11px; }
  #taskDialog .check-field input { width: 15px; height: 15px; margin-right: 5px; }
  #taskDialog .lunar-task-options { grid-template-columns: auto auto; gap: 6px; margin-top: 0; }
  #taskDialog .lunar-task-preview { grid-column: 1 / -1; min-height: 14px; font-size: 9px; }
  #taskDialog .repeat-grid { grid-template-columns: 1fr 1fr; }
  #taskDialog .repeat-grid label { min-width: 0; }
  #taskDialog .repeat-interval-field { grid-template-columns: 54px 1fr; }
  #taskDialog .repeat-interval-field span { min-height: 36px; padding: 0 6px; font-size: 10px; }
  #taskDialog .color-picker-trigger { width: 38px; min-width: 38px; min-height: 36px; grid-template-columns: 24px; padding: 5px 6px; }
  #taskDialog .color-picker-preview { width: 24px; height: 24px; }
  #taskDialog .dialog-actions { gap: 7px; position: sticky; bottom: 0; z-index: 5; background: var(--sheet); padding-top: 8px; box-shadow: 0 -8px 8px var(--sheet); }
  .dialog-actions { grid-template-columns: auto 1fr auto; }
  .dialog-actions > :nth-last-child(2) { display: none; }
  .attachment-preview-dialog {
    width: calc(100vw - 20px);
    max-width: calc(100vw - 20px);
    overflow: hidden;
  }
  .attachment-preview-dialog .dialog-form {
    min-width: 0;
    gap: 12px;
    padding: 12px;
  }
  .attachment-preview-dialog .dialog-heading {
    align-items: flex-start;
  }
  .attachment-preview-dialog .dialog-heading h2 {
    font-size: 16px;
    line-height: 1.25;
    overflow: visible;
    overflow-wrap: anywhere;
    text-overflow: clip;
    white-space: normal;
  }
  .attachment-preview-counter {
    min-width: 42px;
    padding: 5px 8px;
  }
  .attachment-preview-frame {
    width: 100%;
    max-height: calc(100dvh - 218px);
    overflow: hidden;
    place-items: center;
    touch-action: none;
  }
  .attachment-preview-frame img {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: calc(100dvh - 218px);
    margin: 0 auto;
    touch-action: none;
  }
  .attachment-preview-nav {
    width: 42px;
    height: 54px;
    border-radius: 14px;
    font-size: 34px;
  }
  .attachment-preview-nav.previous { left: 7px; }
  .attachment-preview-nav.next { right: 7px; }
  .attachment-preview-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }
  .attachment-preview-actions > button {
    min-width: 0;
    padding-inline: 7px;
    font-size: 11px;
  }
  .lock-card { padding: 30px 24px; }
}

/* Calendar 2.0 responsive layout */
@media (min-width: 761px) {
  .mobile-calendar { display: none !important; }
  .desktop-day-agenda { height: calc(100% - 48px); }
}

@media (max-width: 760px) {
  html, body { overscroll-behavior: none; }
  body { overflow-x: hidden; }
  .app-shell, .calendar-pane, .mobile-calendar { overscroll-behavior: none; }
  .workspace { padding: 0; }
  .calendar-pane {
    min-height: calc(100dvh - 120px);
    border-right: 0;
    border-left: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .calendar-toolbar {
    min-height: 54px;
    padding: 8px 10px;
    background: #fffdf8;
  }
  .month-navigation { gap: 6px; }
  .month-title-button { min-width: 118px; font-size: 18px; }
  .calendar-toolbar .round-button { width: 32px; height: 32px; }
  .mobile-calendar { display: block; position: relative; background: #fffdf8; }
  .mobile-calendar.animating-month,
  .mobile-calendar.dragging-month {
    overflow: hidden;
  }
  .mobile-calendar.animating-month .mobile-month-board,
  .mobile-calendar.dragging-month .mobile-month-board {
    position: relative;
    z-index: 2;
    will-change: transform, opacity, filter;
  }
  .mobile-calendar.dragging-month .mobile-month-board {
    transform: translateX(var(--month-drag-x, 0));
    transition: none;
  }
  .mobile-calendar.settling-month-drag .mobile-month-board {
    transform: translateX(var(--month-drag-x, 0));
    transition: transform .18s cubic-bezier(.2, .8, .2, 1);
  }
  .mobile-calendar.animating-month .mobile-month-board-ghost {
    position: absolute;
    top: 27px;
    right: 0;
    left: 0;
    z-index: 1;
    pointer-events: none;
    filter: saturate(.96);
    will-change: transform, opacity, filter;
  }
  .mobile-calendar.animating-month { perspective: 900px; }
  .mobile-month-board.slide-in-right { animation: month-slide-in-right .38s cubic-bezier(.15, .85, .2, 1) both; }
  .mobile-month-board.slide-in-left { animation: month-slide-in-left .38s cubic-bezier(.15, .85, .2, 1) both; }
  .mobile-month-board-ghost.slide-out-left { animation: month-slide-out-left .38s cubic-bezier(.3, 0, .6, .8) both; }
  .mobile-month-board-ghost.slide-out-right { animation: month-slide-out-right .38s cubic-bezier(.3, 0, .6, .8) both; }
  @media (prefers-reduced-motion: reduce) {
    .mobile-month-board.slide-in-right,
    .mobile-month-board.slide-in-left,
    .mobile-month-board-ghost.slide-out-left,
    .mobile-month-board-ghost.slide-out-right {
      animation: none;
    }
  }
  .mobile-weekday-row {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    min-height: 27px;
    border-bottom: 1px solid var(--line);
    background: #faf7ef;
  }
  .mobile-weekday-row span {
    display: grid;
    place-items: center;
    font-size: 10px;
    font-weight: 850;
  }
  .mobile-month-board {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    grid-auto-rows: minmax(70px, 1fr);
    min-height: calc(100dvh - 201px);
    touch-action: none;
  }
  .mobile-month-board .calendar-day {
    min-height: 70px;
    padding: 4px 2px 5px;
    border-color: #eee8dc;
    touch-action: none;
  }
  .mobile-month-board .calendar-date-button {
    width: 23px;
    height: 23px;
    margin-bottom: 3px;
    font-size: 11px;
  }
  .mobile-month-board .calendar-event-labels { gap: 2px; }
  .mobile-month-board .calendar-event-chip {
    min-height: 15px;
    padding: 1px 3px;
    border-left-width: 2px;
    border-radius: 2px;
    gap: 1px;
    font-size: 7.5px;
    font-weight: 900;
  }
  .mobile-month-board .event-avatar {
    width: 12px;
    height: 12px;
  }
  .mobile-month-board .calendar-day.has-range-slots .calendar-event-labels {
    margin-top: calc((var(--range-slots) * 16px) + 1px);
  }
  .mobile-month-board .calendar-range-bar {
    height: 14px;
    margin: calc(30px + (var(--range-lane) * 16px)) 1px 0;
    padding: 0 4px;
    border-radius: 3px;
    font-size: 7.5px;
  }
  .mobile-month-board .calendar-range-text { gap: 2px; }
  .mobile-month-board .holiday-label { margin-bottom: 2px; font-size: 6.5px; }
  .mobile-month-board .event-important { display: none; }
  .mobile-month-board .calendar-more { padding-left: 2px; font-size: 7px; }

  .mobile-calendar.detail-open .mobile-month-board {
    grid-auto-rows: 46px;
    min-height: 0;
  }
  .mobile-calendar.detail-open .calendar-day {
    min-height: 46px;
    padding-top: 3px;
  }
  .mobile-calendar.detail-open .calendar-event-labels { display: none; }
  .mobile-calendar.detail-open .calendar-range-bar { display: none; }
  .mobile-calendar.detail-open .calendar-event-dots { display: flex; }
  .mobile-calendar.detail-open .calendar-date-button { margin-bottom: 1px; }

  .mobile-day-sheet {
    position: fixed;
    z-index: 46;
    right: 0;
    bottom: calc(58px + env(safe-area-inset-bottom));
    left: 0;
    display: flex;
    flex-direction: column;
    height: min(48dvh, 430px);
    padding: 0 14px env(safe-area-inset-bottom);
    border-top: 1px solid var(--line-strong);
    border-radius: 22px 22px 0 0;
    background: #fffdf8;
    box-shadow: 0 -10px 35px rgba(70, 60, 44, .16);
    transform: translateY(calc(100% + 80px));
    transition: height .25s ease, transform .25s ease;
    visibility: hidden;
    overscroll-behavior: contain;
  }
  .mobile-calendar.detail-open .mobile-day-sheet {
    transform: translateY(0);
    visibility: visible;
  }
  .mobile-day-sheet.sheet-expanded { height: calc(100dvh - 70px - env(safe-area-inset-bottom)); }
  /* 손가락 추적 드래그 중에는 transition 을 꺼 시트가 손끝을 1:1 로 따라오게 한다. */
  .mobile-day-sheet.dragging { transition: none; will-change: height; }
  .sheet-handle-button {
    flex: 0 0 auto;
    width: 80px;
    height: 24px;
    margin: 0 auto;
    padding: 0;
    border: 0;
    background: transparent;
    touch-action: none;
  }
  .sheet-handle {
    display: block;
    width: 40px;
    height: 4px;
    margin: auto;
    border-radius: 4px;
    background: #c6c5be;
  }
  .mobile-sheet-heading {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    min-height: 52px;
    padding: 2px 0 8px;
    border-bottom: 1px solid var(--line);
    touch-action: none;
  }
  .mobile-sheet-heading .eyebrow { margin: 0 0 2px; font-size: 7px; }
  .mobile-sheet-heading h2 { margin: 0; font-size: 17px; }
  .mobile-day-sheet .day-agenda { flex: 1 1 auto; height: auto; padding: 12px 4px 24px; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  .mobile-day-sheet .agenda-category { margin-bottom: 9px; }
  .mobile-day-sheet .agenda-category-heading { min-height: 36px; }
  .mobile-day-sheet .agenda-task-list .task-item { min-height: 47px; font-size: 12px; }
  .mobile-sheet-heading h2 { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px; }
  .mobile-sheet-heading .lunar-date { margin-left: 4px; font-size: 10px; }
  .mobile-month-board .routine-day { min-height: 70px; padding: 0; }
  .mobile-month-board .routine-day-number { top: 6px; left: 6px; font-size: 15px; }
  .mobile-month-board .routine-check-mark { right: 6px; bottom: 7px; font-size: 45px; }
  .mobile-month-board .routine-day.today .routine-day-number { width: 25px; height: 25px; }
  .mobile-month-board .routine-count-day { min-height: 70px; padding: 28px 3px 3px; overflow: hidden; }
  .mobile-month-board .routine-count-total { top: 30px; left: 50%; right: auto; transform: translateX(-50%); padding: 2px 9px; font-size: 11px; white-space: nowrap; max-width: none; }
  .mobile-month-board .routine-count-list {
    display: none;
  }
  .mobile-month-board .routine-count-row { display: block; min-height: 0; padding: 0; background: transparent; }
  .mobile-month-board .routine-count-name,
  .mobile-month-board .routine-count-stepper { display: none; }
  .mobile-month-board .routine-count-mobile-label {
    display: none;
  }
  .mobile-month-board .routine-count-mobile-summary {
    display: grid;
    position: absolute;
    right: 3px;
    bottom: 4px;
    left: 3px;
    overflow: hidden;
    gap: 1px;
    color: #4c493f;
    font-size: 8px;
    font-weight: 950;
    line-height: 1.35;
    text-align: center;
  }
  .mobile-month-board .routine-count-mobile-summary span {
    display: block;
    overflow: hidden;
    padding: 1px 3px;
    border-radius: 5px;
    background: rgba(255,255,255,.78);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .notes-drawer.utility-panel {
    min-height: calc(100dvh - 132px);
    margin: 0;
    border-right: 0;
    border-left: 0;
    border-radius: 0;
  }
  .notes-drawer .utility-section { height: calc(100dvh - 182px); }
  .notes-drawer .note-cards.note-chat-list { height: auto; }
  .mobile-fab { border-radius: 50%; background: var(--ink); }
  .toast-region { right: 12px; bottom: calc(72px + env(safe-area-inset-bottom)); }
  .repeat-interval-field { grid-template-columns: 68px 1fr; }
  .task-icon-picker { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .task-icon-option { min-height: 34px; font-size: 17px; }
  .mobile-schedule-group {
    grid-template-columns: minmax(46px, 72px) minmax(0, 1fr);
    gap: 10px;
  }
  .mobile-schedule-row {
    grid-template-columns: 4px 23px minmax(0, 1fr);
    gap: 10px;
  }
  .mobile-schedule-content { font-size: 15px; }
}

@media (min-width: 761px) {
  body { padding-bottom: 108px; }
  .mobile-nav {
    bottom: 28px;
    width: min(860px, calc(100% - 48px));
    min-height: 62px;
    padding: 7px;
    border-radius: 18px;
  }
  .mobile-nav button {
    border-radius: 13px;
    font-size: 13px;
  }
}

@media (min-width: 1121px) {
  .workspace {
    grid-template-columns: minmax(720px, 1fr) clamp(360px, 24vw, 540px);
  }
}

@media (min-width: 1500px) {
  .workspace {
    grid-template-columns: minmax(840px, 1fr) clamp(430px, 25vw, 560px);
    gap: 22px;
  }
  .notes-drawer { padding: 20px; }
}

@media (max-width: 760px) {
  .mobile-nav {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    width: auto;
    border: 0;
    border-top: 1px solid var(--line);
    border-radius: 0;
    box-shadow: none;
    transform: none;
  }
  .notes-drawer .utility-section { height: calc(100dvh - 132px); }
  .notes-drawer .note-cards.note-chat-list { height: auto; }
}

@media (max-width: 390px) {
  .mobile-month-board { grid-auto-rows: minmax(64px, 1fr); }
  .mobile-month-board .calendar-day { min-height: 64px; }
  .mobile-month-board .calendar-event-chip { font-size: 7px; }
  .sync-badge { max-width: 102px; padding-inline: 7px; }
}

@media (max-width: 760px) {
  .user-switcher { max-width: 112px; min-height: 34px; padding-inline: 7px; font-size: 11px; }
  #userAdminButton { display: grid; width: 36px; height: 36px; place-items: center; padding: 0; font-size: 17px; }
  .app-info-dialog { width: min(390px, calc(100% - 24px)); }
  .app-info-content { padding: 30px 22px 22px; }
  .app-info-logo { width: 72px; height: 72px; border-radius: 20px; }
  .app-info-list div { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); padding: 12px 13px; }
}

@media (max-width: 380px) {
  .user-switcher { max-width: 86px; }
}
@media (max-width: 760px) {
  #logoutButton { display: grid; width: 36px; height: 36px; place-items: center; padding: 0; font-size: 18px; }
}
@media (max-width: 760px) {
  .app-header { display: grid; grid-template-columns: 39px minmax(0, 1fr); gap: 6px; min-height: 58px; padding: 7px 8px 7px 10px; }
  .brand { width: 39px; min-width: 0; gap: 0; }
  .brand > div:not(.brand-mark) { display: none; }
  .brand-info-button { width: 39px; height: 39px; border-radius: 13px; }
  .brand-mark.small { width: 39px; height: 39px; border-radius: 13px; }
  .header-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    justify-content: stretch;
    gap: 5px;
    width: 100%;
    min-width: 0;
    overflow: hidden;
  }
  .header-admin-actions {
    display: grid;
    grid-template-columns: minmax(84px, 120px) 34px;
    align-items: center;
    justify-content: start;
    gap: 5px;
    min-width: 0;
  }
  .header-common-actions {
    display: grid;
    grid-template-columns: 34px minmax(58px, auto) 34px;
    align-items: center;
    justify-content: end;
    gap: 5px;
    min-width: 0;
  }
  .header-common-actions > .icon-button { display: none; }
  .header-actions .search-trigger,
  #userAdminButton,
  #logoutButton {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    min-width: 0;
    min-height: 34px;
    padding: 0;
    border-radius: 12px;
  }
  .header-actions .search-trigger {
    border: 1px solid var(--line);
    background: rgba(255,255,255,.72);
    font-size: 20px;
  }
  #userAdminButton { font-size: 17px; }
  #logoutButton { font-size: 17px; }
  .user-switcher {
    width: 100%;
    min-width: 0;
    max-width: none;
    height: 34px;
    min-height: 34px;
    padding: 0 7px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .header-actions .sync-badge {
    width: 100%;
    max-width: none;
    min-width: 0;
    height: 34px;
    padding: 0 7px;
    overflow: hidden;
    justify-content: center;
    white-space: nowrap;
    line-height: 1;
  }
  .header-actions .sync-badge span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

@media (max-width: 380px) {
  .app-header { grid-template-columns: 36px minmax(0, 1fr); gap: 6px; padding-inline: 7px; }
  .brand { width: 36px; }
  .brand-info-button { width: 36px; height: 36px; border-radius: 12px; }
  .brand-mark.small { width: 36px; height: 36px; }
  .header-actions { grid-template-columns: minmax(0, 1fr) auto; gap: 4px; }
  .header-admin-actions { grid-template-columns: minmax(76px, 104px) 30px; gap: 4px; }
  .header-common-actions { grid-template-columns: 30px minmax(48px, auto) 30px; gap: 4px; }
  .user-switcher { font-size: 10px; }
  .header-actions .sync-badge { min-width: 0; padding-inline: 5px; font-size: 9px; }
  .header-actions .search-trigger,
  #userAdminButton,
  #logoutButton { width: 30px; height: 30px; min-height: 30px; }
}

@media (max-width: 760px) {
  .notes-drawer .notes-panel { gap: 8px; }
  .notes-drawer .note-cards.note-chat-list { min-height: 0; padding: 12px 0; border-radius: 0; border-right: 0; border-left: 0; }
  .notes-drawer .note-composer { grid-template-columns: 40px minmax(0, 1fr) 54px; margin: 0 8px 8px; }
  .notes-drawer .chat-message { margin: 8px 0; }
  .notes-drawer .chat-bubble { max-width: none; border-right: 0; border-left: 0; border-radius: 0; }
  .notes-drawer .chat-message.has-image-attachment .chat-image-card,
  .notes-drawer .chat-message.has-image-attachment .chat-video-card { width: min(88%, 560px); }
  .notes-drawer .chat-file { width: min(88%, 560px); }
  .notes-drawer .chat-message.attachment-only-message .chat-file { width: 100%; }
  .notes-drawer .chat-message.attachment-only-message .chat-bubble,
  .notes-drawer .chat-message.image-only-message .chat-bubble {
    width: min(88%, 560px);
    border: 1px solid color-mix(in srgb, var(--note-color) 45%, rgba(160,140,91,.24));
    border-radius: 16px 16px 4px 16px;
  }
  .notes-drawer .chat-message.image-only-message .chat-image-card,
  .notes-drawer .chat-message.image-only-message .chat-video-card { width: 100%; }
  .notes-drawer .chat-image,
  .notes-drawer .chat-video { max-height: 360px; }
  .notes-drawer #chatNoteInput { font-size: 16px; }
  .ledger-assets-mode .app-shell {
    height: calc(100dvh - 58px - env(safe-area-inset-bottom));
  }
  .ledger-assets-mode .workspace {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
  }
  .ledger-assets-mode .calendar-pane {
    width: 100%;
    max-width: none;
    border-right: 0;
    border-left: 0;
  }
  .ledger-assets-mode .calendar-pane:not(.mobile-hidden) {
    display: flex;
    flex-direction: column;
    height: calc(100dvh - 120px);
    overflow: hidden;
  }
  .ledger-assets-mode .mobile-calendar {
    display: flex;
    flex: 1 1 auto;
    width: 100%;
    max-width: none;
    min-height: 0;
    overflow: hidden;
  }
  .ledger-assets-mode .mobile-month-board {
    flex: 1 1 auto;
    width: 100%;
    max-width: none;
    min-height: 0;
    padding-bottom: 14px;
    overflow: auto;
  }
  .asset-panel {
    gap: 10px;
    width: 100%;
    padding: 12px 8px 14px;
  }
  .asset-heading {
    min-width: 0;
  }
  .asset-heading h2,
  .asset-heading h3 {
    font-size: 18px;
  }
  .asset-table {
    min-width: 0;
  }
  .asset-summary {
    grid-template-columns: 1fr;
    min-width: 0;
    gap: 8px;
  }
  .asset-summary-item strong {
    font-size: 14px;
  }
  .ledger-mode:not(.ledger-assets-mode) .calendar-toolbar {
    gap: 4px;
  }
  .ledger-mode:not(.ledger-assets-mode) .month-navigation {
    gap: 3px;
  }
  .ledger-mode:not(.ledger-assets-mode) .month-navigation .round-button {
    width: 30px;
    height: 30px;
  }
  .ledger-mode:not(.ledger-assets-mode) .month-title-button {
    min-width: 124px;
    padding-inline: 0;
    white-space: nowrap;
  }
  .ledger-mode:not(.ledger-assets-mode) .month-title-button::after {
    min-height: 16px;
    margin-left: 4px;
    padding: 2px 5px;
    font-size: 8px;
  }
  .calendar-toolbar-actions { gap: 4px; }
  .goal-button,
  .calendar-toolbar-actions .soft-button {
    min-height: 34px;
    padding: 6px 10px;
    border-radius: 11px;
    font-size: 11px;
  }
  .ledger-mode:not(.ledger-assets-mode) .calendar-toolbar-actions .soft-button[data-action="today"] {
    width: 38px;
    min-width: 38px;
    padding-inline: 0;
    white-space: nowrap;
  }
  .ledger-month-total {
    display: grid;
    align-content: center;
    justify-items: end;
    gap: 1px;
    min-width: 106px;
    max-width: 112px;
    min-height: 34px;
    padding: 4px 7px;
  }
  .ledger-month-total span {
    font-size: 8px;
  }
  .ledger-month-total strong {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    text-align: right;
  }
  .ledger-day-total {
    margin-top: 5px;
    font-size: 8px;
    line-height: 1.15;
    word-break: keep-all;
  }
  .ledger-method-dots {
    margin-top: 4px;
    gap: 3px;
  }
  .ledger-method-dots span {
    width: 5px;
    height: 5px;
  }
  .ledger-expense-row {
    gap: 5px;
    min-height: 56px;
    padding: 7px 10px;
  }
  .ledger-expense-detail { gap: 7px; }
}

@media (max-width: 760px) {
  html,
  body {
    height: 100%;
    overflow: hidden;
  }
  body {
    min-height: 100dvh;
    padding-top: env(safe-area-inset-top);
    padding-bottom: 0;
  }
  .app-shell {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: calc(100dvh - 58px - env(safe-area-inset-bottom) - env(safe-area-inset-top));
    min-height: 0;
    overflow: hidden;
  }
  .app-header {
    position: relative;
    top: auto;
    flex: 0 0 auto;
  }
  .workspace {
    flex: 1 1 auto;
    width: 100%;
    max-width: none;
    min-height: 0;
    height: auto;
    margin: 0;
    overflow: hidden;
  }
  .calendar-pane {
    width: 100%;
    max-width: none;
    height: 100%;
    min-height: 0;
  }
  .calendar-pane:not(.mobile-hidden) {
    display: flex;
    flex-direction: column;
  }
  .calendar-toolbar,
  .mobile-weekday-row {
    flex: 0 0 auto;
  }
  .mobile-calendar {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    width: 100%;
    max-width: none;
    min-height: 0;
    height: auto;
    overflow: hidden;
  }
  .mobile-month-board {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    grid-auto-rows: minmax(0, 1fr);
    overflow: hidden;
  }
  .mobile-month-board .calendar-day,
  .mobile-month-board .routine-day {
    min-height: 0;
  }
  .notes-drawer.utility-panel {
    width: 100%;
    max-width: none;
    height: 100%;
    min-height: 0;
    padding: 0;
    overflow: hidden;
  }
  .notes-drawer .utility-section {
    width: 100%;
    max-width: none;
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }
  .notes-drawer .notes-panel,
  .notes-drawer .routine-panel,
  .notes-drawer .schedule-panel {
    min-height: 0;
  }
  .notes-drawer .notes-panel,
  .notes-drawer .routine-panel {
    display: flex;
    flex-direction: column;
  }
  .notes-drawer .note-cards.note-chat-list,
  .notes-drawer .routine-cards {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    overflow: auto;
  }
}

/* Desktop: lock layout to viewport — no page scroll */
@media (min-width: 761px) {
  html, body { height: 100%; overflow: hidden; }
  body { padding-bottom: 0; }
  .app-shell {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
  }
  .app-header { flex: 0 0 auto; position: relative; top: auto; }
  .workspace {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    align-items: stretch;
    padding-bottom: 108px;
  }
  .calendar-pane {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
  }
  .calendar-toolbar { flex: 0 0 auto; }
  .desktop-board {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding-bottom: 0;
  }
  .weekday-row { flex: 0 0 auto; }
  .month-board {
    flex: 1 1 auto;
    min-height: 0;
    grid-auto-rows: minmax(0, 1fr);
  }
  .notes-drawer {
    position: relative;
    top: auto;
    align-self: stretch;
    height: auto;
  }
}

/* ── 달력 책장 애니메이션 (공유 키프레임 + 데스크탑) ── */
@keyframes month-slide-in-right {
  0%   { opacity: .3;  filter: blur(2.5px); transform: translateX(78%) scale(.93); }
  55%  { opacity: 1;   filter: none;        transform: translateX(-2%) scale(1.004); }
  100% { opacity: 1;   filter: none;        transform: translateX(0)   scale(1); }
}
@keyframes month-slide-in-left {
  0%   { opacity: .3;  filter: blur(2.5px); transform: translateX(-78%) scale(.93); }
  55%  { opacity: 1;   filter: none;        transform: translateX(2%)   scale(1.004); }
  100% { opacity: 1;   filter: none;        transform: translateX(0)    scale(1); }
}
@keyframes month-slide-out-left {
  0%   { opacity: 1;   filter: none;       transform: translateX(0)    scale(1); }
  100% { opacity: .18; filter: blur(2px);  transform: translateX(-58%) scale(.93); }
}
@keyframes month-slide-out-right {
  0%   { opacity: 1;   filter: none;       transform: translateX(0)   scale(1); }
  100% { opacity: .18; filter: blur(2px);  transform: translateX(58%) scale(.93); }
}

.desktop-board {
  position: relative;
}
.desktop-board.animating-month {
  overflow: hidden;
  perspective: 900px;
}
.desktop-board.animating-month .month-board {
  position: relative;
  z-index: 2;
  will-change: transform, opacity, filter;
}
.desktop-month-board-ghost {
  position: absolute;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: 1;
  pointer-events: none;
  will-change: transform, opacity, filter;
}
.month-board.slide-in-right  { animation: month-slide-in-right  .38s cubic-bezier(.15, .85, .2, 1) both; }
.month-board.slide-in-left   { animation: month-slide-in-left   .38s cubic-bezier(.15, .85, .2, 1) both; }
.desktop-month-board-ghost.slide-out-left  { animation: month-slide-out-left  .38s cubic-bezier(.3, 0, .6, .8) both; }
.desktop-month-board-ghost.slide-out-right { animation: month-slide-out-right .38s cubic-bezier(.3, 0, .6, .8) both; }
@media (prefers-reduced-motion: reduce) {
  .month-board.slide-in-right,
  .month-board.slide-in-left,
  .desktop-month-board-ghost.slide-out-left,
  .desktop-month-board-ghost.slide-out-right { animation: none; }
}