/* CALENDAR SEMANTIC COLOURS
   Public holidays and weekends used to be spelled as raw hex in a handful of
   rules, which is why they drifted apart: the weekend number and the holiday
   number were the same red, so a holiday was indistinguishable from a Sunday,
   and the dark theme had an override for the holiday label but not for the
   holiday number or the weekend numbers.

   They are roles now, defined once per theme. A holiday is told apart from a
   weekend by a SURFACE, not by a hue — "a day off" is a block you can see at a
   glance, which is also what keeps the two readable side by side. All three
   theme states are covered: explicit light, explicit dark, and the default
   "system" preference, which stamps data-site-theme="system" rather than
   resolving to dark. */
:root {
  --lotbi-calendar-weekend-sun: #c03a34;
  --lotbi-calendar-weekend-sat: #3568a8;
  --lotbi-calendar-weekend-sun-surface: #fff3f3;
  --lotbi-calendar-weekend-sat-surface: #f2f7ff;
  --lotbi-calendar-holiday-ink: #a8323f;
  --lotbi-calendar-holiday-surface: #fdecee;
  --lotbi-calendar-holiday-surface-outside: #fbf4f5;
  --lotbi-calendar-outside-surface: #f4f6f9;
  --lotbi-calendar-outside-ink: #687182;
  /* The 1px gap between cells IS the grid line -- the container colour showing
     through. It had no dark value, so the lattice stayed light grey over dark
     cells. */
  --lotbi-calendar-grid-line: #dbe1ea;
  /* The 일 월 화... headings never had a dark rule at all, so they kept one grey
     for both themes and measured 3.08:1 on the dark modal. */
  --lotbi-calendar-weekday-ink: #687180;
  /* The 11px helper lines under each setting. var(--lotbi-calendar-muted-ink) measured 4.11:1 on white,
     under the 4.5:1 floor the rest of the Calendar holds itself to. */
  --lotbi-calendar-muted-ink: #687180;
  /* 월간 칸의 음력 글자(양력 숫자 오른쪽 '음28'). muted-ink와 같은 회색이지만
     따로 둔다 — 소비자 화면(.consumer-workspace)은 muted-ink를 본문색으로
     덮어써서, 그대로 쓰면 음력이 양력 숫자와 같은 검정으로 보인다. */
  --lotbi-calendar-lunar-ink: #687180;
  /* The touch day sheet's own surface. It is a token because the pinned
     add-entry row has to repaint exactly that colour as the list scrolls under
     it, in all three theme states. */
  --lotbi-calendar-sheet-surface: #ffffff;
  /* The pale navy tint behind a selected week date/column and an all-day
     chip. It was three separate #e9eef7 literals before this token existed. */
  --lotbi-calendar-week-selected-surface: #e9eef7;
  /* 오늘 칸을 감싸는 링. 대표님이 삼성 캘린더의 "선택된 날짜" 테두리(색
     없는 무채색)를 보여주며 지시 — 틸 등 색을 넣지 말고 이 회색/검정 계열로. */
  --lotbi-calendar-today-ring: #33404f;
  /* 강수확률 물방울 줄. 온도(무채색)와 구분되게 파란 계열 하나만 쓴다. */
  --lotbi-calendar-precip-ink: #0b6fb8;
}

body[data-site-theme="dark"] {
  --lotbi-calendar-weekend-sun: #f2a6a6;
  --lotbi-calendar-weekend-sat: #a7c7ff;
  --lotbi-calendar-weekend-sun-surface: #2d2023;
  --lotbi-calendar-weekend-sat-surface: #1c2736;
  --lotbi-calendar-holiday-ink: #ffb3b8;
  --lotbi-calendar-holiday-surface: #3a2329;
  --lotbi-calendar-holiday-surface-outside: #241a1e;
  --lotbi-calendar-outside-surface: #12171f;
  --lotbi-calendar-outside-ink: #8d97a6;
  --lotbi-calendar-grid-line: #465162;
  --lotbi-calendar-weekday-ink: #95a0b0;
  --lotbi-calendar-muted-ink: #a8b2c0;
  --lotbi-calendar-lunar-ink: #a8b2c0;
  --lotbi-calendar-sheet-surface: #121720;
  --lotbi-calendar-week-selected-surface: #222b38;
  --lotbi-calendar-today-ring: #c7cdd6;
  --lotbi-calendar-precip-ink: #6cb6f2;
}

@media (prefers-color-scheme: dark) {
  body[data-site-theme="system"],
  html[data-site-theme-bootstrap="system"] body:not([data-site-theme]) {
    --lotbi-calendar-weekend-sun: #f2a6a6;
    --lotbi-calendar-weekend-sat: #a7c7ff;
    --lotbi-calendar-weekend-sun-surface: #2d2023;
    --lotbi-calendar-weekend-sat-surface: #1c2736;
    --lotbi-calendar-holiday-ink: #ffb3b8;
    --lotbi-calendar-holiday-surface: #3a2329;
    --lotbi-calendar-holiday-surface-outside: #241a1e;
    --lotbi-calendar-outside-surface: #12171f;
    --lotbi-calendar-outside-ink: #8d97a6;
    --lotbi-calendar-grid-line: #465162;
    --lotbi-calendar-weekday-ink: #95a0b0;
    --lotbi-calendar-muted-ink: #a8b2c0;
    --lotbi-calendar-lunar-ink: #a8b2c0;
    --lotbi-calendar-sheet-surface: #121720;
    --lotbi-calendar-week-selected-surface: #222b38;
    --lotbi-calendar-today-ring: #c7cdd6;
    --lotbi-calendar-precip-ink: #6cb6f2;
  }
}

[data-life-calendar-panel][hidden] {
  display: none !important;
}

.life-calendar-panel {
  box-sizing: border-box;
  width: min(760px, calc(100% - 32px));
  margin: 18px auto 8px;
  padding: 16px 18px;
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.94);
}

.life-calendar-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.life-calendar-heading h2,
.life-calendar-group-title {
  margin: 0;
  color: var(--lotbi-text-primary, var(--text, #212121));
}

.life-calendar-heading h2 {
  font-size: 1rem;
  font-weight: 800;
}

.life-calendar-coverage,
.life-calendar-empty,
.life-calendar-loading,
.life-calendar-error {
  margin: 0;
  color: var(--lotbi-text-primary, var(--text, #212121));
  font-size: 0.82rem;
  line-height: 1.5;
}

.life-calendar-body {
  display: grid;
  gap: 14px;
}

.life-calendar-group {
  display: grid;
  gap: 8px;
}

.life-calendar-group-title {
  font-size: 0.86rem;
  font-weight: 750;
}

.life-calendar-list {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.life-calendar-item {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 9px 10px;
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.035);
}

.life-calendar-item-actions {
  grid-column: 2;
  display: flex;
  gap: 6px;
}

.life-calendar-item-actions button {
  border: 1px solid rgba(15, 23, 42, 0.14);
  border-radius: 999px;
  background: #fff;
  color: var(--lotbi-text-primary, var(--text, #212121));
  cursor: pointer;
  font: inherit;
  font-size: 0.74rem;
  padding: 4px 8px;
}

.life-calendar-item-time {
  color: var(--lotbi-text-primary, var(--text, #212121));
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
}

.life-calendar-item-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.life-calendar-item-title {
  overflow: hidden;
  color: var(--lotbi-text-primary, var(--text, #212121));
  font-size: 0.9rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.life-calendar-item-meta {
  color: var(--lotbi-text-primary, var(--text, #212121));
  font-size: 0.76rem;
}

@media (max-width: 720px) {
  .life-calendar-panel {
    width: calc(100% - 24px);
    margin-top: 10px;
    padding: 14px;
    border-radius: 16px;
  }

  .life-calendar-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .life-calendar-item {
    grid-template-columns: 48px minmax(0, 1fr);
  }
}


/* SITE-PUBLIC-UX-CALENDAR-NAV-09 — shared Desktop/Mobile Calendar navigation. */
.sidebar-calendar-nav {
  flex: 0 0 auto;
}

.sidebar-calendar-summary {
  list-style: none;
  cursor: pointer;
}

.sidebar-calendar-summary::-webkit-details-marker {
  display: none;
}

.sidebar-calendar-summary::after {
  content: '▾';
  margin-left: auto;
  font-size: 11px;
  transition: transform 140ms ease;
}

.sidebar-calendar-nav[open] .sidebar-calendar-summary::after {
  transform: rotate(180deg);
}

.sidebar-calendar-subnav {
  display: grid;
  gap: 2px;
  padding: 4px 0 0 12px;
}

.sidebar-calendar-subnav .nav-item {
  min-height: 36px;
  padding: 7px 10px;
  color: var(--lotbi-text-primary, var(--text, #212121));
  font-size: 13px;
  font-weight: 700;
}

.sidebar-calendar-subnav .nav-item:hover,
.sidebar-calendar-subnav .nav-item:focus-visible,
.sidebar-calendar-subnav .nav-item[aria-current="true"] {
  background: #eceff5;
  color: var(--lotbi-text-primary, var(--text, #212121));
}

/* Full Calendar manager reuses the existing safe modal shell. */
.site-calendar-modal {
  width: min(100%, 860px);
  max-height: min(88vh, 820px);
}

.life-calendar-manager-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.life-calendar-manager-tab {
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid #d5dbe6;
  border-radius: 999px;
  background: #fff;
  color: var(--lotbi-text-primary, var(--text, #212121));
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.life-calendar-manager-tab[aria-selected="true"] {
  border-color: var(--brand-navy, #182a46);
  background: var(--brand-navy, #182a46);
  color: #fff;
}

.life-calendar-manager-tab:focus-visible,
.life-calendar-manager-date input:focus-visible {
  outline: 3px solid rgba(79, 120, 197, .26);
  outline-offset: 2px;
}

.life-calendar-manager-date {
  width: fit-content;
  display: grid;
  gap: 6px;
  color: var(--lotbi-text-primary, var(--text, #212121));
  font-size: 13px;
  font-weight: 800;
}

.life-calendar-manager-date[hidden] {
  display: none !important;
}

.life-calendar-manager-date input {
  min-height: 42px;
  padding: 8px 10px;
  border: 1px solid #cfd6e2;
  border-radius: 10px;
  background: #fff;
  color: var(--lotbi-text-primary, var(--text, #212121));
  font: inherit;
}

.life-calendar-manager-note {
  margin: 0;
  color: var(--lotbi-text-primary, var(--text, #212121));
  font-size: 13px;
  line-height: 1.5;
}

.life-calendar-manager-body {
  display: grid;
  gap: 14px;
  min-height: 120px;
}

.life-calendar-attention-item {
  grid-template-columns: 104px minmax(0, 1fr);
}

body[data-site-theme="dark"] .life-calendar-manager-tab,
body[data-site-theme="dark"] .life-calendar-manager-date input {
  border-color: #515b69;
  background: #171c25;
  color: var(--lotbi-text-primary, var(--text, #212121));
}

body[data-site-theme="dark"] .life-calendar-manager-tab[aria-selected="true"] {
  background: #edf0f5;
  color: #212121;
}

body[data-site-theme="dark"] .life-calendar-manager-note,
body[data-site-theme="dark"] .sidebar-calendar-subnav .nav-item {
  color: var(--lotbi-text-primary, var(--text, #212121));
}

@media (max-width: 760px) {
  .site-calendar-modal {
    width: 100%;
    max-height: 92svh;
  }

  .life-calendar-manager-tabs {
    gap: 6px;
  }

  .life-calendar-manager-tab {
    min-height: 38px;
    padding-inline: 10px;
    font-size: 12px;
  }

  .life-calendar-attention-item {
    grid-template-columns: 86px minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar-calendar-summary::after {
    transition: none;
  }
}

/* LOTBI REAL CALENDAR — month, year and selected-day product surface. */
/* Higher specificity is intentional: site-conversation.css is injected after this file. */
.site-modal.site-calendar-modal {
  width: min(1180px, calc(100vw - 40px));
  max-width: 1180px;
  height: calc(100dvh - 40px);
  max-height: calc(100dvh - 40px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.site-modal.site-calendar-modal > .site-modal-header,
.site-modal.site-calendar-modal > .site-modal-description {
  flex: 0 0 auto;
}

.site-modal.site-calendar-modal > .site-modal-content {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
}

.site-modal.site-calendar-modal > .site-modal-content[data-calendar-manager-view="month"] {
  overflow-y: hidden;
}

.calendar-product-shell {
  height: 100%;
  min-width: 0;
  min-height: 0;
  display: grid;
  /* Row 3 takes the remaining space. The + 기록 bar, when a view shows it
     outside the day detail, gets an implicit row 4 of its own; a hidden bar
     creates no row, so it costs the month no gap either. */
  grid-template-rows: auto auto minmax(0, 1fr);
  grid-auto-rows: auto;
  gap: 10px;
}
.calendar-product-shell[data-amount-visible="true"] {
  grid-template-rows: auto auto auto minmax(0, 1fr);
}

.calendar-toolbar {
  grid-row: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(170px, auto) auto auto auto auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  white-space: nowrap;
}

.calendar-nav-button,
.calendar-title-button,
.calendar-today-button,
.calendar-settings-button,
.calendar-mode-tab,
.calendar-add-button,
.calendar-retry-button {
  min-height: 44px;
  border: 1px solid #d5dbe6;
  border-radius: 12px;
  background: #fff;
  color: var(--lotbi-text-primary, var(--text, #212121));
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  flex-shrink: 0;
}

.calendar-nav-button { min-width: 54px; }
.calendar-title-button { padding-inline: 14px; font-size: 17px; }
.calendar-today-button { padding-inline: 14px; }
.calendar-settings-button {
  width: auto;
  min-width: 68px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.calendar-settings-label { font-size: 12px; }
/* Toolbar icon language, shared with the sidebar's nav icons: 24x24 box,
   stroke-only, 1.8 weight, round caps and joins. An emoji was rendering as a
   different shape on every OS -- on the reporter's screen the gear read as a
   sun, which is why it was mistaken for the weather control. */
.calendar-toolbar-icon {
  width: 19px;
  height: 19px;
  flex: 0 0 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.calendar-mode-tabs { min-width: 0; display: flex; flex-wrap: nowrap; justify-content: flex-start; gap: 6px; }
.calendar-mode-tab { min-width: 58px; padding-inline: 10px; border-radius: 999px; }
.calendar-mode-tab[aria-selected="true"] { border-color: var(--brand-navy, #182a46); background: var(--brand-navy, #182a46); color: #fff; }
.calendar-today-button[data-selected="true"] { border-color: var(--brand-navy, #182a46); background: var(--brand-navy, #182a46); color: #fff; }

/* A more refined toolbar tone: rounder corners, a soft resting shadow
   instead of a flat border-only look, tightened weight/letter-spacing, and
   real hover/active feedback for pointer input. Scoped under .calendar-toolbar
   so the day panel's add/retry buttons -- which share the base rules above --
   are untouched, and deliberately layers only new properties (radius, shadow,
   weight, transform) on top rather than touching background/border-color, so
   every existing light/dark/system colour rule for these buttons still wins
   exactly as before. 44px touch targets and the focus-visible ring above are
   untouched. */
.calendar-toolbar .calendar-nav-button,
.calendar-toolbar .calendar-title-button,
.calendar-toolbar .calendar-today-button,
.calendar-toolbar .calendar-settings-button,
.calendar-toolbar .calendar-mode-tab {
  border-radius: 14px;
  font-weight: 750;
  letter-spacing: .01em;
  transition: box-shadow .15s ease, transform .05s ease, background-color .15s ease;
}
.calendar-toolbar .calendar-title-button { font-weight: 850; letter-spacing: 0; }
.calendar-toolbar .calendar-nav-button,
.calendar-toolbar .calendar-today-button,
.calendar-toolbar .calendar-settings-button {
  box-shadow: 0 1px 2px rgba(15, 23, 42, .06);
}
.calendar-toolbar .calendar-nav-button:hover,
.calendar-toolbar .calendar-today-button:hover,
.calendar-toolbar .calendar-settings-button:hover {
  box-shadow: 0 3px 8px rgba(15, 23, 42, .12);
}
.calendar-toolbar .calendar-nav-button:active,
.calendar-toolbar .calendar-today-button:active,
.calendar-toolbar .calendar-settings-button:active,
.calendar-toolbar .calendar-mode-tab:active {
  transform: scale(.96);
}
.calendar-toolbar .calendar-mode-tabs { gap: 4px; }
.calendar-toolbar .calendar-mode-tab[aria-selected="true"] { box-shadow: 0 1px 4px rgba(15, 23, 42, .22); }

@media (prefers-reduced-motion: reduce) {
  .calendar-toolbar .calendar-nav-button,
  .calendar-toolbar .calendar-title-button,
  .calendar-toolbar .calendar-today-button,
  .calendar-toolbar .calendar-settings-button,
  .calendar-toolbar .calendar-mode-tab { transition: none; }
  .calendar-toolbar .calendar-nav-button:active,
  .calendar-toolbar .calendar-today-button:active,
  .calendar-toolbar .calendar-settings-button:active,
  .calendar-toolbar .calendar-mode-tab:active { transform: none; }
}

.calendar-amount-slot { grid-row: 2; min-width: 0; }
.calendar-amount-slot[hidden] { display: none; }
.calendar-status { grid-row: 2; min-height: 0; }
.calendar-viewport { grid-row: 3; min-width: 0; min-height: 0; }
.calendar-product-shell[data-amount-visible="true"] .calendar-status { grid-row: 3; }
.calendar-product-shell[data-amount-visible="true"] .calendar-viewport { grid-row: 4; }
.calendar-status:empty { display: none; }
.calendar-status:empty + .calendar-viewport { grid-row: 2 / 4; }
.calendar-product-shell[data-amount-visible="true"] .calendar-status:empty + .calendar-viewport { grid-row: 3 / 5; }
/* Transient location notice. Fixed, so it never reserves a row above the date
   grid, and above the Settings backdrop (z-index 1160) because the control that
   triggers it lives inside that dialog. */
.calendar-toast-host {
  position: fixed;
  left: 50%;
  bottom: calc(26px + env(safe-area-inset-bottom, 0px));
  z-index: 1200;
  display: grid;
  justify-items: center;
  width: min(420px, calc(100vw - 32px));
  transform: translateX(-50%);
  pointer-events: none;
}
.calendar-toast-host:empty { display: none; }
.calendar-toast {
  margin: 0;
  max-width: 100%;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(24, 42, 70, .94);
  box-shadow: 0 8px 24px rgba(20, 28, 40, .28);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  animation: calendar-toast-in 180ms ease-out;
}
.calendar-toast[data-reduced-motion="true"] { animation: none; }
@keyframes calendar-toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.calendar-skeleton { height: 4px; overflow: hidden; border-radius: 99px; background: linear-gradient(90deg, #e9edf4 25%, #f7f8fb 50%, #e9edf4 75%); color: transparent; background-size: 200% 100%; animation: calendar-loading 1.1s linear infinite; }
@keyframes calendar-loading { to { background-position: -200% 0; } }

.calendar-month-layout { position: relative; display: block; width: 100%; min-width: 0; min-height: 0; }
.calendar-month { min-width: 0; min-height: 0; }
.calendar-weekdays,
.calendar-month-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.calendar-weekdays { color: var(--lotbi-calendar-weekday-ink); font-size: 12px; font-weight: 800; text-align: center; }
.calendar-weekdays span { padding: 5px 2px 9px; }
/* Keyed to the weekday, not to first/last: with a Monday start those positions
   are 월 and 일, and the weekend hues would land on the wrong two columns. */
.calendar-weekdays span[data-weekday="0"] { color: var(--lotbi-calendar-weekend-sun); }
.calendar-weekdays span[data-weekday="6"] { color: var(--lotbi-calendar-weekend-sat); }
.calendar-month-grid { overflow: hidden; border: 1px solid var(--lotbi-calendar-grid-line); border-radius: 12px; }
/* The setting is the authority for both axes. Do not rely on a bare `gap`
   default here: responsive rules and browser grid normalization must never make
   data-grid-lines="true" render with only one axis (or neither) visible. */
.calendar-month-grid[data-grid-lines="true"] {
  background: var(--lotbi-calendar-grid-line);
  row-gap: 1px;
  column-gap: 1px;
}
/* The lines ARE the gaps showing the container's colour through. Turning them
   off closes both axes and hides the container, while cells keep their surfaces. */
.calendar-month-grid[data-grid-lines="false"] {
  background: transparent;
  row-gap: 0;
  column-gap: 0;
}

.calendar-date-cell {
  min-width: 0;
  min-height: 92px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
  padding: 3px 5px;
  background: #fff;
  color: var(--lotbi-text-primary, var(--text, #212121));
}
/* OUTSIDE THIS MONTH
   One recessive ink for the whole cell, and `*` makes every child give up its
   own colour and inherit it -- the date number, the weekend and holiday hues,
   event chips, the day count, anything another room adds to a cell later. A
   per-property list is what let the weekend and holiday rules escape in the
   first place, so this deliberately is not one.

   Recessive, not invisible: these dates are clickable (the cell's click handler
   is bound regardless of month and jumps to that date), so the ink is chosen to
   clear 4.5:1 against its own surface in both themes while sitting far below
   the current month's own contrast. */
/* Scoped through .calendar-month-grid so it outranks the dark theme's flat cell
   rule without needing a dark twin: the roles already carry the theme. */
.calendar-month-grid .calendar-date-cell[data-current-month="false"] {
  background: var(--lotbi-calendar-outside-surface);
  color: var(--lotbi-calendar-outside-ink);
}
.calendar-month-grid .calendar-date-cell[data-current-month="false"] * { color: inherit; }
/* The weather mark is an emoji glyph, which `color` cannot reach, so it needs
   its own opacity rule to fade with the rest of a neighbouring month's cell. */
.calendar-month-grid .calendar-date-cell[data-current-month="false"] .calendar-weather-icon { opacity: .45; }
/* Weekend and holiday hues say something about THIS month. Scoping them to
   data-current-month="true" is what stops a neighbouring month's Sunday from
   shouting louder than a weekday of the month you are actually looking at --
   and it leaves the one inherit rule below with nothing to fight. */
.calendar-date-cell[data-current-month="true"][data-weekday="0"] .calendar-date-number { color: var(--lotbi-calendar-weekend-sun); }
.calendar-date-cell[data-current-month="true"][data-weekday="6"] .calendar-date-number { color: var(--lotbi-calendar-weekend-sat); }
.calendar-month-grid .calendar-date-cell[data-current-month="true"][data-weekday="0"] { background: var(--lotbi-calendar-weekend-sun-surface); }
.calendar-month-grid .calendar-date-cell[data-current-month="true"][data-weekday="6"] { background: var(--lotbi-calendar-weekend-sat-surface); }
.calendar-date-cell[data-selected="true"] { z-index: 1; box-shadow: inset 0 0 0 1px rgba(24, 42, 70, .42); background: #f6f8fb; }
/* 오늘 표시 — 숫자를 원으로 채우는 대신 칸 전체를 굵은 링으로 감싼다(대표님
   지시, 삼성 캘린더 참고). box-shadow(inset)를 쓰는 이유는 위 선택 칸과 같다:
   border 였다면 칸이 커져 month-density 그리드 계측이 흔들린다. 선택 칸과
   같은 속성 특이도라 소스 순서가 우선순위를 정하므로, 이 규칙을 선택 규칙
   "뒤에" 둬서 오늘이면서 선택된 칸에서도 오늘 링이 보이게 한다. 링 굵기는
   대표님 요청으로 3px에서 20% 줄여 2.4px. */
.calendar-date-cell[data-today="true"] { z-index: 1; box-shadow: inset 0 0 0 2.4px var(--lotbi-calendar-today-ring); }
/* 링만으로는 눈에 덜 띌 수 있어, 날짜 숫자 옆에 작은 점 하나를 더 찍는다 —
   숫자를 감싸는 큰 원은 아니고, 존재만 알리는 보조 표시. 숫자 "아래"에
   absolute로 찍었더니 음력 표시를 켰을 때 그 자리에 음력 날짜 텍스트가
   나와서 점과 겹쳤다(실제 확인됨) — 아래가 아니라 숫자 오른쪽에 inline으로
   붙여서, 그 밑에 뭐가 오든(음력 날짜, 공휴일 라벨) 겹칠 자리 자체가 없게
   한다. */
.calendar-date-cell[data-today="true"] .calendar-date-number::after {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-left: 4px;
  margin-bottom: 3px;
  border-radius: 999px;
  background: var(--lotbi-calendar-today-ring);
  vertical-align: middle;
}
.calendar-date-header { min-width: 0; min-height: 44px; display: flex; align-items: flex-start; gap: 4px; }
.calendar-date-trigger {
  flex: 0 0 auto;
  min-width: 44px;
  min-height: 44px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
}
/* The day-off block. Scoped through .calendar-month-grid so it outranks the
   dark theme's flat cell background without needing a dark twin of its own, and
   it paints background only -- no border, no padding, so the grid geometry the
   month-density contract measures is untouched. */
.calendar-month-grid .calendar-date-cell[data-holiday="true"] {
  background: var(--lotbi-calendar-holiday-surface);
}
/* A holiday in a neighbouring month is worth knowing about -- next month's
   long weekend is real planning information -- but it must never outshine this
   month's. It keeps a trace of the tint, well under the block above. */
.calendar-month-grid .calendar-date-cell[data-holiday="true"][data-current-month="false"] {
  background: var(--lotbi-calendar-holiday-surface-outside);
}
.calendar-date-cell[data-current-month="true"][data-holiday="true"] .calendar-date-number { color: var(--lotbi-calendar-holiday-ink); }
.calendar-date-number { font-size: 17px; font-weight: 850; font-variant-numeric: tabular-nums; }
/* Only present when 음력 표시 is on (site-calendar-manager.js only appends
   it then), so this never affects the geometry of the default cell.
   음력은 양력 숫자 "아래"가 아니라 바로 "오른쪽" 한 줄(.calendar-date-line)에
   붙는다. 좁은 칸의 긴 월 시작 표기는 머리줄 안에서 숫자 밑으로 접힌다. */
.calendar-date-line { display: inline-flex; flex-wrap: wrap; align-items: baseline; column-gap: 2px; row-gap: 0; min-width: 0; max-width: 100%; white-space: nowrap; }
/* Linux fonts can make an ordinary two-digit label a fraction wider than the
   Windows fallback. It must stay beside the solar day; only month-start text
   may use the deliberate narrow-cell second line. */
.calendar-date-line[data-lunar-kind="ordinary"] { flex-wrap: nowrap; }
.calendar-date-cell[data-lunar="true"][data-today="true"] .calendar-date-number { position: relative; }
.calendar-date-cell[data-lunar="true"][data-today="true"] .calendar-date-number::after { position: absolute; top: 0; right: -5px; margin: 0; }
.calendar-date-cell[data-lunar="true"] .calendar-date-trigger { flex-shrink: 1; }
.calendar-date-lunar { color: var(--lotbi-calendar-lunar-ink, var(--lotbi-calendar-muted-ink)); font-size: 10px; font-weight: 600; line-height: 1; letter-spacing: -0.02em; white-space: nowrap; }
.calendar-mobile-event-count { display: none; color: var(--lotbi-text-primary, var(--text, #212121)); font-size: 11px; font-weight: 800; }
.calendar-weather-icon {
  flex: 0 0 auto;
  display: inline-block;
  width: 24px;
  height: 24px;
}
.calendar-weather-summary { margin-left: auto; display: grid; grid-template-columns: 24px 46px; align-items: start; gap: 3px; }
.calendar-weather-temperature { position: relative; width: 46px; height: 30px; font-size: 11px; font-weight: 900; font-variant-numeric: tabular-nums; }
.calendar-weather-temperature-min { position: absolute; left: 0; bottom: 0; color: var(--lotbi-text-primary, var(--text, #212121)); }
.calendar-weather-temperature-max { position: absolute; top: 0; right: 0; color: #d43b32; }
/* In a month cell the max is 9-10px text on the weekend tints, where #d43b32
   is 4.3:1; this red keeps it above 4.5:1. */
.calendar-month-grid .calendar-weather-temperature-max { color: #c62828; }
.calendar-weather-temperature-separator { position: absolute; top: 50%; left: 50%; color: var(--lotbi-text-primary, var(--text, #212121)); font-size: 13px; transform: translate(-50%, -50%) rotate(-8deg); }
.calendar-weather-temperature-value { display: block; padding-top: 6px; color: var(--lotbi-text-primary, var(--text, #212121)); text-align: right; }
/* 강수확률. 온도 칸(24px 아이콘 + 46px 온도, 암묵 1행)에 3번째 자식으로 그냥
   붙이면 24px짜리 아이콘 칸에 눌려 들어간다 -- 두 칸을 모두 가로질러 새
   줄로 내려오게 명시한다. weatherPrecipitationLabel()이 0%나 데이터 없음일
   땐 빈 문자열을 주므로 이 요소 자체가 안 만들어진다(항상 존재하지 않음). */
.calendar-weather-precip {
  grid-column: 1 / -1;
  margin-top: 1px;
  font-size: 10px;
  font-weight: 800;
  color: var(--lotbi-calendar-precip-ink);
  text-align: right;
  white-space: nowrap;
}
.calendar-holiday-label {
  min-width: 0;
  overflow: hidden;
  color: var(--lotbi-calendar-holiday-ink);
  font-size: 10px;
  font-weight: 850;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.calendar-attention-marker { margin-left: auto; overflow: hidden; color: #8a4b16; font-size: 10px; font-weight: 850; text-overflow: ellipsis; white-space: nowrap; }

.calendar-event-stack {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 1px;
  overflow: hidden;
}
.calendar-event-chip {
  width: 100%;
  min-width: 0;
  min-height: 24px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 6px;
  align-items: center;
  overflow: hidden;
  padding: 2px 3px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--lotbi-text-primary, var(--text, #212121));
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.25;
  text-align: left;
}
.calendar-event-chip:hover { background: rgba(53, 104, 168, .08); }
.calendar-event-time { color: var(--lotbi-text-primary, var(--text, #212121)); font-size: 11px; font-variant-numeric: tabular-nums; }
.calendar-event-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.calendar-event-chip[hidden],
.calendar-event-overflow[hidden] { display: none !important; }
/* 알약(pill) 배지. 배경 없는 무채색 글자라 클릭 가능한 요소로 안 읽힌다는
   지적으로 바꿨다 -- 새 색을 더하지 않고 .calendar-week-allday-event가 이미
   쓰는 톤(옅은 남색 배경 + 네이비 글자)을 그대로 재사용한다. */
.calendar-event-overflow {
  width: fit-content;
  min-height: 20px;
  margin-top: 1px;
  padding: 2px 8px;
  border: 0;
  border-radius: 999px;
  background: var(--lotbi-calendar-week-selected-surface);
  color: var(--lotbi-text-primary, var(--text, #212121));
  cursor: pointer;
  font: inherit;
  font-size: 10.5px;
  font-weight: 800;
  text-align: left;
}

.calendar-day-panel {
  /* Named, because the sticky title-box strip has to repaint exactly this
     colour as the entry list scrolls under it -- in both themes, and whether
     the panel is anchored, a sheet, or in the page. */
  --lotbi-calendar-panel-surface: #fafbfc;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border: 1px solid #dbe1ea;
  border-radius: 14px;
  background: var(--lotbi-calendar-panel-surface);
}
.calendar-day-view { width: min(100%, 760px); margin-inline: auto; }
.calendar-day-panel[data-presentation="PAGE"] { width: 100%; }
.calendar-day-detail-backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(15, 23, 42, .42);
}
.calendar-day-panel[data-presentation="MODAL"] {
  position: relative;
  z-index: 91;
  width: min(520px, calc(100vw - 48px));
  max-height: min(760px, calc(100dvh - 48px));
  overflow: hidden;
  box-shadow: 0 24px 70px rgba(15, 23, 42, .28);
}
.calendar-day-panel[data-presentation="MODAL"] .calendar-day-body {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.calendar-day-panel[hidden],
.calendar-day-body[hidden] { display: none !important; }
.calendar-day-panel-head { min-width: 0; display: flex; align-items: center; gap: 8px; }
.calendar-day-heading { flex: 1 1 auto; min-width: 0; margin: 0; color: var(--lotbi-text-primary, var(--text, #212121)); font-size: 16px; }
.calendar-day-panel-actions { flex: 0 0 auto; display: flex; gap: 5px; }
.calendar-day-toggle,
.calendar-day-close {
  min-width: 44px;
  min-height: 44px;
  padding: 7px 10px;
  border: 1px solid #d5dbe6;
  border-radius: 9px;
  background: #fff;
  color: var(--lotbi-text-primary, var(--text, #212121));
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
}
.calendar-day-body { min-height: 0; display: flex; flex-direction: column; gap: 10px; }
.calendar-day-holiday {
  padding: 8px 10px;
  border-radius: 9px;
  background: var(--lotbi-calendar-holiday-surface);
  color: var(--lotbi-calendar-holiday-ink);
  font-size: 12px;
  font-weight: 800;
}
.calendar-day-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.calendar-day-event { min-height: 48px; display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 9px; align-items: start; padding: 9px; border-radius: 10px; background: #fff; cursor: pointer; }
.calendar-day-event time { color: var(--lotbi-text-primary, var(--text, #212121)); font-size: 12px; font-variant-numeric: tabular-nums; }
.calendar-day-event > span { min-width: 0; display: grid; gap: 3px; }
.calendar-day-event strong { overflow: hidden; color: var(--lotbi-text-primary, var(--text, #212121)); font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.calendar-day-event small { color: var(--lotbi-calendar-muted-ink); font-size: 11px; }
.calendar-event-badges { display: flex !important; flex-wrap: wrap; gap: 4px; }
.calendar-event-type,
.calendar-event-status { width: fit-content; padding: 2px 6px; border-radius: 999px; background: #eef2f7; color: var(--lotbi-text-primary, var(--text, #212121)); font-size: 10px; font-weight: 800; line-height: 1.2; }
.calendar-event-status { background: #fff5df; color: #765317; }
.calendar-day-event[data-event-kind="RESERVATION"] { box-shadow: inset 3px 0 #6c79b8; }
.calendar-day-event[data-event-kind="PAYMENT"] { box-shadow: inset 3px 0 #398473; }
.calendar-day-event[data-event-kind="MEDICAL"] { box-shadow: inset 3px 0 #b66b78; }
.calendar-add-button { margin-top: auto; width: 100%; border-color: var(--brand-navy, #182a46); background: var(--brand-navy, #182a46); color: #fff; }

/* The panel's only two controls. They pin to its floor so a day with a long
   list never buries them: on eight entries the row used to be whatever sat
   below the eighth inside the scroller, reachable only by scrolling to the end
   -- on the one surface whose job is adding an entry. */
.calendar-add-actions {
  position: sticky;
  bottom: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 6px;
  background: var(--lotbi-calendar-panel-surface, #ffffff);
}
.calendar-add-actions .calendar-add-button { margin-top: 0; flex: 0 0 auto; width: auto; min-width: 0; }
.calendar-add-actions .life-calendar-empty { flex: 0 1 auto; min-width: 0; overflow: hidden; margin-right: auto; text-overflow: ellipsis; white-space: nowrap; }
.calendar-add-actions .calendar-add-image-button { border-color: var(--brand-navy, #182a46); background: transparent; color: var(--lotbi-text-primary, var(--text, #212121)); }
/* What the picture path has to say, next to the buttons that started it —
   the .calendar-status strip is rewritten by the weather flow on its own
   schedule and swallowed this a moment after it appeared. */
.calendar-add-message { margin: 0 0 8px; padding: 8px 10px; border-radius: 10px; background: #f1f4f9; color: var(--lotbi-text-primary, var(--text, #212121)); font-size: 12px; line-height: 1.45; }
body[data-site-theme="dark"] .calendar-add-message { background: #232a35; color: var(--lotbi-text-primary, var(--text, #212121)); }

.calendar-year-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.calendar-year-month { min-width: 0; padding: 12px; border: 1px solid #dbe1ea; border-radius: 14px; background: #fff; color: var(--lotbi-text-primary, var(--text, #212121)); cursor: pointer; text-align: left; }
.calendar-year-month[data-current="true"] { border-color: #3568a8; box-shadow: inset 0 0 0 1px #3568a8; }
.calendar-year-month > strong { display: block; margin-bottom: 7px; font-size: 14px; }
.calendar-mini-weekdays,
.calendar-mini-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); text-align: center; }
.calendar-mini-weekdays { color: var(--lotbi-text-primary, var(--text, #212121)); font-size: 8px; word-spacing: 0; }
.calendar-mini-grid span { min-height: 17px; display: grid; place-items: center; font-size: 9px; font-variant-numeric: tabular-nums; }
.calendar-year-event-count { display: block; margin-top: 7px; color: var(--lotbi-text-primary, var(--text, #212121)); font-size: 10px; font-weight: 800; }
.calendar-week-agenda { min-width: 0; display: grid; gap: 14px; }
.calendar-week-strip { position: sticky; top: 0; z-index: 3; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; padding: 4px; border: 1px solid #e1e6ed; border-radius: 14px; background: rgba(255, 255, 255, .96); }
.calendar-week-date { min-width: 0; min-height: 52px; display: grid; place-items: center; gap: 2px; padding: 5px 2px; border: 0; border-radius: 10px; background: transparent; color: var(--lotbi-text-primary, var(--text, #212121)); cursor: pointer; font: inherit; }
.calendar-week-date span { font-size: 11px; font-weight: 750; }
.calendar-week-date strong { font-size: 15px; font-variant-numeric: tabular-nums; }
.calendar-week-date[data-selected="true"] { background: #e9eef7; color: var(--lotbi-text-primary, var(--text, #212121)); }
/* Week time-grid: Google-Calendar-style 7 day columns with an hour axis on
   the left. Header (weekday/date/weather), the all-day/holiday row, and the
   scrolling hour grid all share one column template so their cells line up
   pixel-for-pixel without any JS scroll sync. */
.calendar-week-grid {
  --calendar-week-axis-width: 44px;
  --calendar-week-column-min: 84px;
  min-width: 0;
  max-height: min(66vh, 620px);
  overflow: auto;
  overscroll-behavior-x: contain;
  border: 1px solid var(--lotbi-calendar-grid-line);
  border-radius: 14px;
  background: var(--lotbi-calendar-sheet-surface);
}
.calendar-week-grid-sticky-rows { position: sticky; top: 0; z-index: 2; min-width: 100%; background: var(--lotbi-calendar-sheet-surface); }
.calendar-week-grid-header,
.calendar-week-allday-row,
.calendar-week-grid-scroll {
  display: grid;
  grid-template-columns: var(--calendar-week-axis-width) repeat(7, minmax(var(--calendar-week-column-min), 1fr));
  min-width: 100%;
}
.calendar-week-grid-header { border-bottom: 1px solid var(--lotbi-calendar-grid-line); background: var(--lotbi-calendar-sheet-surface); }
.calendar-week-grid-axis-spacer { min-width: 0; }
.calendar-week-day {
  min-width: 0; min-height: 56px; display: grid; place-items: center; gap: 2px;
  padding: 8px 4px; border: 0; border-left: 1px solid var(--lotbi-calendar-grid-line); background: transparent;
  color: var(--lotbi-text-primary, var(--text, #212121)); cursor: pointer; font: inherit; text-align: center;
}
.calendar-week-day-weekday { color: var(--lotbi-calendar-weekday-ink); font-size: 11px; font-weight: 750; }
.calendar-week-day-number { font-size: 16px; font-variant-numeric: tabular-nums; font-weight: 800; }
.calendar-week-day-lunar { color: var(--lotbi-calendar-muted-ink); font-size: 9px; font-weight: 700; }
.calendar-week-day[data-selected="true"] { border-radius: 10px; background: var(--lotbi-calendar-week-selected-surface); }
.calendar-week-day[data-selected="true"] .calendar-week-day-number { color: var(--lotbi-text-primary, var(--text, #212121)); }
.calendar-week-day[data-holiday="true"] { background: var(--lotbi-calendar-holiday-surface); }
.calendar-week-day[data-weekday="0"] { background: var(--lotbi-calendar-weekend-sun-surface); color: var(--lotbi-calendar-weekend-sun); }
.calendar-week-day[data-weekday="6"] { background: var(--lotbi-calendar-weekend-sat-surface); color: var(--lotbi-calendar-weekend-sat); }
.calendar-week-day[data-weekday="0"] .calendar-week-day-weekday,
.calendar-week-day[data-weekday="0"] .calendar-week-day-number { color: var(--lotbi-calendar-weekend-sun); }
.calendar-week-day[data-weekday="6"] .calendar-week-day-weekday,
.calendar-week-day[data-weekday="6"] .calendar-week-day-number { color: var(--lotbi-calendar-weekend-sat); }
.calendar-week-weather { display: inline-flex; align-items: center; gap: 3px; color: var(--lotbi-calendar-muted-ink); font-size: 10px; font-weight: 750; white-space: nowrap; }
.calendar-week-allday-row { min-height: 30px; border-bottom: 1px solid var(--lotbi-calendar-grid-line); background: var(--lotbi-calendar-sheet-surface); }
.calendar-week-allday-cell { min-width: 0; display: flex; flex-wrap: wrap; align-items: flex-start; align-content: flex-start; gap: 3px; padding: 4px; border-left: 1px solid var(--lotbi-calendar-grid-line); }
.calendar-week-allday-cell[data-holiday="true"] { background: var(--lotbi-calendar-holiday-surface); }
.calendar-week-allday-cell[data-selected="true"] { box-shadow: inset 0 0 0 1px var(--brand-navy, #182a46); }
.calendar-week-allday-cell[data-weekday="0"],
.calendar-week-grid-day[data-weekday="0"] { background-color: var(--lotbi-calendar-weekend-sun-surface); }
.calendar-week-allday-cell[data-weekday="6"],
.calendar-week-grid-day[data-weekday="6"] { background-color: var(--lotbi-calendar-weekend-sat-surface); }
.calendar-week-allday-event {
  min-height: 22px; padding: 2px 7px; border: 0; border-radius: 999px;
  background: var(--lotbi-calendar-week-selected-surface); color: var(--lotbi-text-primary, var(--text, #212121));
  cursor: pointer; font: inherit; font-size: 11px; font-weight: 750; text-align: left;
}
.calendar-week-holiday { color: var(--lotbi-calendar-holiday-ink); font-size: 11px; font-weight: 750; }
.calendar-week-grid-scroll { position: relative; align-items: start; overscroll-behavior-y: contain; }
.calendar-week-hour-axis { position: relative; }
.calendar-week-hour-label {
  position: absolute; left: 0; right: 6px; transform: translateY(-50%);
  color: var(--lotbi-calendar-weekday-ink); font-size: 10px; font-variant-numeric: tabular-nums; text-align: right;
}
.calendar-week-hour-label[data-first="true"] { transform: translateY(4px); }
.calendar-week-grid-day { position: relative; min-width: 0; border-left: 1px solid var(--lotbi-calendar-grid-line); }
.calendar-week-grid-scroll[data-grid-lines="true"] .calendar-week-grid-day {
  background-image: repeating-linear-gradient(to bottom, var(--lotbi-calendar-grid-line) 0, var(--lotbi-calendar-grid-line) 1px, transparent 1px, transparent 48px);
}
.calendar-week-grid-day[data-selected="true"] { background-color: rgba(24, 42, 70, .035); }
body[data-site-theme="dark"] .calendar-week-grid-day[data-selected="true"] { background-color: rgba(237, 240, 245, .05); }
.calendar-week-grid-day[data-holiday="true"] { background-color: var(--lotbi-calendar-holiday-surface); }
body[data-site-theme="dark"] .calendar-week-grid-day[data-holiday="true"] { background-color: var(--lotbi-calendar-holiday-surface); }
.calendar-week-grid-event {
  position: absolute;
  left: calc(var(--calendar-event-lane, 0) * (100% / var(--calendar-event-lane-count, 1)));
  width: calc(100% / var(--calendar-event-lane-count, 1) - 3px);
  min-height: 20px; display: flex; flex-direction: column; gap: 1px; overflow: hidden;
  padding: 3px 6px; border: 0; border-left: 3px solid var(--brand-navy, #182a46); border-radius: 6px;
  background: var(--lotbi-calendar-week-selected-surface); color: var(--lotbi-text-primary, var(--text, #212121)); cursor: pointer; font: inherit; text-align: left;
}
.calendar-week-grid-event-time { color: var(--lotbi-text-primary, var(--text, #212121)); font-size: 10px; font-weight: 750; }
.calendar-week-grid-event-title { overflow: hidden; color: var(--lotbi-text-primary, var(--text, #212121)); font-size: 12px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.calendar-week-grid-event[data-event-kind="PAYMENT"] { border-left-color: #b8862f; }
.calendar-week-grid-event[data-event-kind="MEDICAL"] { border-left-color: #b8443f; }
.calendar-week-grid-event[data-event-kind="RESERVATION"] { border-left-color: #2f7cb8; }
/* Below ~7 columns * 84px + the hour axis, the grid no longer fits the
   viewport: the horizontal scroll on .calendar-week-grid (already set above)
   takes over, and a narrower axis/column floor keeps more of the week
   reachable per swipe instead of shrinking text illegibly. */
@media (max-width: 720px) {
  .calendar-week-grid { --calendar-week-axis-width: 36px; --calendar-week-column-min: 68px; }
  .calendar-week-day { min-height: 48px; padding: 6px 2px; }
  .calendar-week-day-number { font-size: 14px; }
  .calendar-week-grid { max-height: min(58vh, 520px); }
}
.calendar-week-add-actions { display: flex; justify-content: flex-end; gap: 8px; }
.calendar-week-add-actions .calendar-add-button { width: auto; min-width: 0; margin-top: 0; }
.calendar-agenda-view { display: grid; gap: 16px; }
.calendar-unscheduled-group { margin-top: 2px; padding-top: 14px; border-top: 1px solid #e4e8ee; }
.calendar-unscheduled-note { margin: -2px 0 10px; color: var(--lotbi-text-primary, var(--text, #212121)); font-size: 13px; line-height: 1.45; }
.calendar-agenda-toolbar { display: flex; flex-wrap: wrap; gap: 6px; }
.calendar-agenda-range {
  min-height: 44px;
  padding: 7px 12px;
  border: 1px solid #d5dbe6;
  border-radius: 999px;
  background: #fff;
  color: var(--lotbi-text-primary, var(--text, #212121));
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
}
.calendar-agenda-range[aria-pressed="true"] { border-color: var(--brand-navy, #182a46); background: var(--brand-navy, #182a46); color: #fff; }
.calendar-agenda-view h3 { margin: 0 0 8px; font-size: 14px; }

body.calendar-editor-open { overflow: hidden; }

.calendar-editor-backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  overscroll-behavior: contain;
  padding: 18px;
  background: rgba(15, 23, 42, .48);
}
.calendar-editor-dialog {
  box-sizing: border-box;
  width: min(100%, 480px);
  max-height: calc(100vh - 36px);
  max-height: calc(100svh - 36px);
  max-height: calc(100dvh - 36px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #e4e8ee;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .12);
}
.calendar-editor-header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 20px 14px;
  border-bottom: 1px solid #e8ecf2;
  background: inherit;
}
.calendar-editor-dialog h3 { min-width: 0; margin: 0; color: var(--lotbi-text-primary, var(--text, #212121)); }
.calendar-editor-close {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--lotbi-text-primary, var(--text, #212121));
  cursor: pointer;
  font: inherit;
  font-size: 26px;
  line-height: 1;
}
.calendar-editor-form { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.calendar-editor-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 13px;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 16px 20px;
}
.calendar-editor-body > label { min-width: 0; display: grid; gap: 6px; color: var(--lotbi-text-primary, var(--text, #212121)); font-size: 13px; font-weight: 800; }
.calendar-editor-primary,
.calendar-editor-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.calendar-editor-primary > label,
.calendar-editor-details > label,
.calendar-editor-category-field { min-width: 0; display: grid; gap: 6px; color: var(--lotbi-text-primary, var(--text, #212121)); font-size: 13px; font-weight: 800; }
.calendar-editor-primary > label:first-child,
.calendar-editor-primary > small,
.calendar-editor-time-control,
.calendar-editor-details > summary { grid-column: 1 / -1; }
.calendar-editor-details { border-top: 1px solid #e8ecf2; padding-top: 10px; }
.calendar-editor-details > summary { list-style-position: inside; min-height: 44px; display: flex; align-items: center; cursor: pointer; color: var(--lotbi-calendar-muted-ink); font-size: 14px; font-weight: 800; }
.calendar-editor-details > summary::after { content: '⌄'; margin-left: auto; font-size: 20px; }
.calendar-editor-details[open] > summary::after { transform: rotate(180deg); }
.calendar-editor-details:not([open]) > :not(summary) { display: none; }
.calendar-editor-time-control { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; position: relative; font-size: 13px; font-weight: 800; color: var(--lotbi-text-primary, var(--text, #212121)); }
.calendar-editor-time-control > span { grid-column: 1 / -1; }
.calendar-editor-time-trigger,
.calendar-editor-end-time-trigger,
.calendar-editor-category-trigger { min-height: 44px; width: 100%; padding: 9px 10px; text-align: left; border: 1px solid #cfd6e2; border-radius: 10px; color: var(--lotbi-text-primary, var(--text, #212121)); background: #fff; font: inherit; cursor: pointer; }
.calendar-editor-time-sheet,
.calendar-editor-category-sheet { grid-column: 1 / -1; padding: 10px; border: 1px solid #cfd6e2; border-radius: 12px; background: #fff; box-shadow: 0 10px 24px rgba(15, 23, 42, .12); }
.calendar-editor-time-quick,
.calendar-editor-time-actions,
.calendar-editor-category-sheet { display: flex; flex-wrap: wrap; gap: 8px; }
.calendar-editor-time-quick button,
.calendar-editor-time-actions button,
.calendar-editor-category-sheet button { min-height: 44px; padding: 7px 12px; border: 1px solid #cfd6e2; border-radius: 9px; background: #fff; color: var(--lotbi-text-primary, var(--text, #212121)); font: inherit; cursor: pointer; }
.calendar-editor-time-actions { justify-content: space-between; margin-top: 8px; }
.calendar-editor-end-time { box-sizing: border-box; width: 100%; min-height: 44px; padding: 9px 10px; border: 1px solid #cfd6e2; border-radius: 10px; background: #fff; color: var(--lotbi-text-primary, var(--text, #212121)); font: inherit; }
.calendar-editor-category[hidden] { display: none; }
.calendar-editor-time-control[hidden], .calendar-editor-time-sheet[hidden], .calendar-editor-category-sheet[hidden], .calendar-editor-time[hidden], .calendar-editor-end-time[hidden] { display: none; }
.calendar-editor-time[aria-invalid="true"], .calendar-editor-end-time[aria-invalid="true"] { border-color: #c95555; }
.calendar-editor-body > label:first-child,
.calendar-editor-body > small,
.calendar-editor-error { grid-column: 1 / -1; }
.calendar-editor-title,
.calendar-editor-date,
.calendar-editor-end-date,
.calendar-editor-time,
.calendar-editor-amount,
.calendar-editor-category,
.calendar-editor-memo,
.calendar-editor-place,
.calendar-editor-merchant { box-sizing: border-box; width: 100%; min-width: 0; min-height: 44px; padding: 9px 10px; border: 1px solid #cfd6e2; border-radius: 10px; background: #fff; color: var(--lotbi-text-primary, var(--text, #212121)); font: inherit; }
/* Date remains a native picker. Remove iOS Safari's intrinsic inner minimum
   and padding so it aligns with the primary text field and keeps the 44px
   touch floor. Time is a keyboard-safe text control in the LOTBI sheet. */
.calendar-editor-date,
.calendar-editor-end-date,
.calendar-editor-time {
  -webkit-appearance: none;
  appearance: none;
  text-align: left;
}
.calendar-editor-date::-webkit-date-and-time-value,
.calendar-editor-end-date::-webkit-date-and-time-value {
  min-height: 0;
  margin: 0;
  text-align: left;
}
/* Chromium adds its own padding to the inner editor AND to the wrapper around
   its fields; zeroing only the first leaves 2px behind, measured. Both, and the
   pickers land on exactly the text fields' height. */
.calendar-editor-date::-webkit-datetime-edit,
.calendar-editor-end-date::-webkit-datetime-edit,
.calendar-editor-date::-webkit-datetime-edit-fields-wrapper,
.calendar-editor-end-date::-webkit-datetime-edit-fields-wrapper { padding: 0; }

.calendar-editor-wide { grid-column: 1 / -1; }
.calendar-editor-memo { min-height: 76px; resize: vertical; }
.calendar-editor-all-day { align-content: end; grid-template-columns: auto 1fr; align-items: center; min-height: 44px; }
.calendar-editor-all-day input { width: 20px; height: 20px; }
.calendar-editor-body > small { margin-top: -8px; color: var(--lotbi-calendar-muted-ink); font-size: 11px; }
.calendar-editor-primary > small { color: var(--lotbi-calendar-muted-ink); font-size: 11px; }
.calendar-editor-error { min-height: 18px; margin: 0; color: #a13232; font-size: 12px; }
.calendar-editor-actions {
  flex: 0 0 auto;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 20px 20px;
  border-top: 1px solid #e8ecf2;
  background: inherit;
}
.calendar-editor-actions button { min-height: 44px; padding: 8px 14px; border: 1px solid #7d8796; border-radius: 10px; background: #fff; color: var(--lotbi-text-primary, var(--text, #212121)); cursor: pointer; font: inherit; font-weight: 800; }
.calendar-editor-save { border-color: var(--brand-navy, #182a46) !important; background: var(--brand-navy, #182a46) !important; color: #fff !important; }
.calendar-editor-save:disabled { cursor: not-allowed; opacity: .45; }
.calendar-editor-delete { margin-right: auto; border-color: #c95555 !important; color: #a13232 !important; }

.calendar-readonly-backdrop {
  position: fixed;
  inset: 0;
  z-index: 92;
  display: grid;
  place-items: center;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 18px;
  background: rgba(15, 23, 42, .48);
}
.calendar-readonly-dialog {
  box-sizing: border-box;
  width: min(100%, 460px);
  max-height: calc(100dvh - 36px);
  overflow: auto;
  border: 1px solid #e4e8ee;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 16px 44px rgba(15, 23, 42, .18);
}
.calendar-readonly-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px 10px;
  border-bottom: 1px solid #e8ecf2;
}
.calendar-readonly-header h3 { flex: 1 1 auto; margin: 0; color: var(--lotbi-text-primary, var(--text, #212121)); font-size: 17px; }
.calendar-readonly-close {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--lotbi-text-primary, var(--text, #212121));
  cursor: pointer;
  font: inherit;
  font-size: 26px;
  line-height: 1;
}
.calendar-readonly-title { display: block; padding: 16px 18px 0; color: var(--lotbi-text-primary, var(--text, #212121)); font-size: 18px; line-height: 1.4; }
.calendar-readonly-notice {
  margin: 8px 18px 0;
  padding: 8px 10px;
  border-radius: 10px;
  background: #f3f5f8;
  color: var(--lotbi-text-primary, var(--text, #212121));
  font-size: 12px;
  font-weight: 800;
}
.calendar-readonly-details {
  display: grid;
  grid-template-columns: minmax(72px, auto) minmax(0, 1fr);
  gap: 8px 14px;
  margin: 0;
  padding: 16px 18px;
}
.calendar-readonly-details dt { color: var(--lotbi-text-primary, var(--text, #212121)); font-size: 12px; font-weight: 800; }
.calendar-readonly-details dd { min-width: 0; margin: 0; color: var(--lotbi-text-primary, var(--text, #212121)); font-size: 13px; line-height: 1.55; overflow-wrap: anywhere; }
.calendar-readonly-actions { display: flex; justify-content: flex-end; padding: 12px 18px 18px; border-top: 1px solid #e8ecf2; }
/* 10-29 가족 점검: 알림장 할 일 [했어요]는 닫기 왼쪽 파란 단추, 실패 글은 단추 위에. */
.calendar-readonly-actions { gap: 8px; }
.calendar-readonly-actions .calendar-readonly-task-toggle { border-color: var(--lotbi-blue, #0b6bdc); background: var(--lotbi-blue, #0b6bdc); color: #fff; font-weight: 700; }
.calendar-readonly-task-error { margin: 0 18px 8px; color: #c62828; font-size: 14px; }
body[data-site-theme] .calendar-readonly-actions .calendar-readonly-task-toggle { border-color: var(--lotbi-blue, #0b6bdc); background: var(--lotbi-blue, #0b6bdc); color: #fff; }
.calendar-readonly-actions button { min-height: 44px; padding: 8px 16px; border: 1px solid #cfd6e2; border-radius: 10px; background: #fff; color: var(--lotbi-text-primary, var(--text, #212121)); cursor: pointer; font: inherit; font-weight: 800; }

.calendar-delete-confirm-backdrop { position: fixed; inset: 0; z-index: 110; display: grid; place-items: center; overflow: auto; overscroll-behavior: contain; padding: 16px; background: rgba(15, 23, 42, .56); }
.calendar-delete-confirm-dialog { box-sizing: border-box; width: min(100%, 420px); max-height: calc(100vh - 32px); max-height: calc(100svh - 32px); max-height: calc(100dvh - 32px); overflow: auto; padding: 22px; border: 1px solid #e4e8ee; border-radius: 18px; background: #fff; box-shadow: 0 16px 44px rgba(15, 23, 42, .22); }
.calendar-delete-confirm-dialog h4 { margin: 0; color: var(--lotbi-text-primary, var(--text, #212121)); font-size: 18px; line-height: 1.45; }
.calendar-delete-confirm-dialog > p { margin: 10px 0 0; color: var(--lotbi-text-primary, var(--text, #212121)); font-size: 14px; line-height: 1.55; }
.calendar-delete-confirm-error { min-height: 20px; color: #a13232 !important; font-size: 12px !important; }
.calendar-delete-confirm-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.calendar-delete-confirm-actions button { min-width: 84px; min-height: 44px; padding: 9px 15px; border: 1px solid #cfd6e2; border-radius: 10px; background: #fff; color: var(--lotbi-text-primary, var(--text, #212121)); cursor: pointer; font: inherit; font-weight: 800; }
.calendar-delete-confirm-submit { border-color: #c95555 !important; color: #a13232 !important; }
.calendar-delete-confirm-actions button:disabled { cursor: wait; opacity: .58; }

.calendar-settings-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1160;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(15, 22, 33, .42);
}
.calendar-settings-dialog {
  display: flex;
  flex-direction: column;
  width: min(440px, calc(100vw - 32px));
  max-height: min(680px, calc(100dvh - 40px));
  overflow: hidden;
  border: 1px solid #d9dfe8;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 20px 60px rgba(15, 25, 40, .24);
}
.calendar-settings-header {
  min-height: 58px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px 10px 18px;
  border-bottom: 1px solid #e2e6ec;
}
.calendar-settings-header h3 { flex: 1 1 auto; margin: 0; color: var(--lotbi-text-primary, var(--text, #212121)); font-size: 17px; }
.calendar-settings-close {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--lotbi-text-primary, var(--text, #212121));
  cursor: pointer;
  font: inherit;
  font-size: 24px;
}
.calendar-settings-body { min-height: 0; max-height: calc(100dvh - 120px); overflow-y: auto; padding: 14px 18px 20px; }
.calendar-settings-body section { display: grid; gap: 6px; }
.calendar-settings-body h4 { margin: 0; color: var(--lotbi-calendar-muted-ink); font-size: 12px; letter-spacing: .02em; }
.calendar-settings-toggle-row {
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 6px 0;
  color: var(--lotbi-text-primary, var(--text, #212121));
}
.calendar-settings-toggle-row > span { flex: 1 1 auto; min-width: 0; display: grid; gap: 3px; }
.calendar-settings-toggle-row strong { font-size: 14px; }
.calendar-settings-toggle-row small { color: var(--lotbi-calendar-muted-ink); font-size: 11px; line-height: 1.45; }
.calendar-settings-toggle-row input { width: 22px; height: 22px; accent-color: var(--brand-navy, #182a46); }
/* COMMON-UI-POLISH-01 (QA #26) — one settings sheet showed black checkboxes next to the
   '현재 위치 자동 사용' ON/OFF switch. The checkboxes keep their element and their change
   handlers and now draw the same 64x44 track and knob as .calendar-location-switch below
   (knob centre 15px off, 49px on). The ON/OFF word needs :has(); without it the switch
   still shows its state by knob and colour, never a wrong word. */
.calendar-settings-toggle-row { position: relative; }
.calendar-settings-toggle-row input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  flex: 0 0 64px; width: 64px; height: 44px; margin: 0;
  border: 0; border-radius: 24px; cursor: pointer;
  background: radial-gradient(circle at 15px 50%, var(--lotbi-text-primary, #212121) 10px, transparent 10.5px), var(--lotbi-surface-hover, #eee);
}
.calendar-settings-toggle-row input[type="checkbox"]:checked {
  background: radial-gradient(circle at 49px 50%, var(--lotbi-surface-primary, #fff) 10px, transparent 10.5px), var(--lotbi-text-primary, #212121);
}
.calendar-settings-toggle-row input[type="checkbox"]:focus-visible { outline: 2px solid var(--lotbi-focus-ring, #212121); outline-offset: 3px; }
@supports selector(:has(*)) {
  .calendar-settings-toggle-row:has(> input[type="checkbox"])::after {
    content: '끔'; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
    box-sizing: border-box; width: 64px; padding: 0 8px 0 26px; text-align: center; pointer-events: none;
    color: var(--lotbi-text-primary, #212121); font-size: 11px; font-weight: 600;
  }
  .calendar-settings-toggle-row:has(> input[type="checkbox"]:checked)::after {
    content: '켬'; padding: 0 26px 0 8px; color: var(--lotbi-surface-primary, #fff);
  }
}
.calendar-settings-select-row {
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 6px 0;
  color: var(--lotbi-text-primary, var(--text, #212121));
}
.calendar-settings-select-row > span { flex: 1 1 auto; min-width: 0; display: grid; gap: 3px; }
.calendar-settings-select-row strong { font-size: 14px; }
.calendar-settings-select-row small { color: var(--lotbi-calendar-muted-ink); font-size: 11px; line-height: 1.45; }
.calendar-settings-select {
  flex: 0 0 auto;
  /* Same 44px floor every other control in the Calendar answers to. */
  min-height: 44px;
  padding: 9px 10px;
  border: 1px solid #cfd6e2;
  border-radius: 10px;
  background: #fff;
  color: var(--lotbi-text-primary, var(--text, #212121));
  font: inherit;
  cursor: pointer;
}
.calendar-settings-body section + section { margin-top: 16px; padding-top: 16px; border-top: 1px solid #edf0f4; }
.calendar-settings-action-row {
  min-height: 52px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 6px 0;
  color: var(--lotbi-text-primary, var(--text, #212121));
}
.calendar-settings-action-row[hidden] { display: none; }
.calendar-settings-action-row > span { flex: 1 1 auto; min-width: 0; display: grid; gap: 4px; }
.calendar-settings-action-row strong { font-size: 14px; }
.calendar-location-switch {
  position: relative; flex: 0 0 64px; width: 64px; min-height: 44px;
  border: 0; border-radius: 24px; padding: 0 8px 0 26px;
  background: var(--lotbi-surface-hover, #eee); color: var(--lotbi-text-primary, #212121);
  font: inherit; font-size: 11px; font-weight: 600; cursor: pointer;
}
.calendar-location-switch::after {
  content: ''; position: absolute; width: 20px; height: 20px; left: 5px; top: 12px;
  border-radius: 50%; background: var(--lotbi-text-primary, #212121);
}
.calendar-location-switch[aria-checked="true"] {
  padding: 0 26px 0 8px; background: var(--lotbi-text-primary, #212121);
  color: var(--lotbi-surface-primary, #fff);
}
.calendar-location-switch[aria-checked="true"]::after {
  left: 39px; background: var(--lotbi-surface-primary, #fff);
}
.calendar-location-switch:focus-visible { outline: 2px solid var(--lotbi-focus-ring, #212121); outline-offset: 3px; }
.calendar-settings-action-row [data-calendar-current-location] { justify-self: start; }
.calendar-settings-action-row [data-calendar-current-location][hidden] { display: none; }
.calendar-settings-status { color: var(--lotbi-calendar-muted-ink); font-size: 11px; line-height: 1.45; }
.calendar-settings-weather-overview {
  display: grid;
  gap: 2px;
  margin: 2px 0 4px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #f5f7fa;
  color: var(--lotbi-text-primary, var(--text, #212121));
}
.calendar-settings-weather-overview strong { font-size: 13px; }
.calendar-settings-weather-overview small { color: var(--lotbi-calendar-muted-ink); font-size: 11px; line-height: 1.45; }
.calendar-settings-location-help { font-size: 11px; line-height: 1.5; color: var(--lotbi-calendar-muted-ink); }
.calendar-settings-location-help > summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 4px 0;
  text-decoration: underline;
}
.calendar-settings-location-help ul { margin: 4px 0 0; padding-left: 18px; display: grid; gap: 4px; }
.calendar-settings-action-button {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 8px 13px;
  border: 1px solid #cfd6e2;
  border-radius: 999px;
  background: #fff;
  color: var(--lotbi-text-primary, var(--text, #212121));
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
}
.calendar-settings-action-button:disabled { cursor: default; opacity: .55; }
.calendar-settings-region-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.calendar-settings-region-row input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 42px;
  padding: 8px 11px;
  border: 1px solid #cfd6e2;
  border-radius: 10px;
  background: #fff;
  color: var(--lotbi-text-primary, var(--text, #212121));
  font: inherit;
  font-size: 13px;
}
.calendar-settings-region-row input:focus-visible {
  outline: 3px solid rgba(53, 104, 168, .24);
  outline-offset: 1px;
}

.calendar-date-trigger:focus-visible,
.calendar-event-chip:focus-visible,
.calendar-event-overflow:focus-visible,
.calendar-year-month:focus-visible,
.calendar-toolbar button:focus-visible,
.calendar-day-toggle:focus-visible,
.calendar-day-close:focus-visible,
.calendar-day-event:focus-visible,
.calendar-settings-action-button:focus-visible { outline: 3px solid rgba(53, 104, 168, .32); outline-offset: 2px; }

body[data-site-theme="dark"] .calendar-nav-button,
body[data-site-theme="dark"] .calendar-title-button,
body[data-site-theme="dark"] .calendar-today-button,
body[data-site-theme="dark"] .calendar-settings-button,
body[data-site-theme="dark"] .calendar-mode-tab,
body[data-site-theme="dark"] .calendar-year-month,
body[data-site-theme="dark"] .calendar-date-cell,
body[data-site-theme="dark"] .calendar-day-event,
body[data-site-theme="dark"] .calendar-day-toggle,
body[data-site-theme="dark"] .calendar-day-close { border-color: #465162; background: #171c25; color: var(--lotbi-text-primary, var(--text, #212121)); }
body[data-site-theme="dark"] .calendar-day-panel { --lotbi-calendar-panel-surface: #121720; border-color: #465162; color: var(--lotbi-text-primary, var(--text, #212121)); }
body[data-site-theme="dark"] .calendar-day-panel[data-presentation="SHEET"] { background: #121720; border-color: #465162; }
/* 이미지로 등록 is an outline button carrying the brand navy as its ink. On the
   dark panel that measured 1.25:1 -- not dim, unreadable -- and it stayed that
   way through every earlier pass because nothing dark-themed it. */
body[data-site-theme="dark"] .calendar-add-actions .calendar-add-image-button {
  border-color: #6d7f9c;
  color: var(--lotbi-text-primary, var(--text, #212121));
}
/* 3.72:1 before, under the 4.5:1 floor the rest of this file holds itself to. */
body[data-site-theme="dark"] .life-calendar-empty { color: var(--lotbi-calendar-muted-ink); }
body[data-site-theme="dark"] .calendar-day-sheet-backdrop { background: rgba(2, 6, 16, .58); }
body[data-site-theme="dark"] .calendar-day-heading,
body[data-site-theme="dark"] .calendar-day-event strong { color: var(--lotbi-text-primary, var(--text, #212121)); }
body[data-site-theme="dark"] .calendar-event-chip { background: transparent; color: var(--lotbi-text-primary, var(--text, #212121)); }
body[data-site-theme="dark"] .calendar-event-chip:hover { background: #263751; }
body[data-site-theme="dark"] .calendar-event-time,
body[data-site-theme="dark"] .calendar-event-overflow { color: var(--lotbi-text-primary, var(--text, #212121)); }
body[data-site-theme="dark"] .calendar-attention-marker { color: #f2b774; }
body[data-site-theme="dark"] .calendar-weather-temperature-max { color: #ff8a80; }
body[data-site-theme="dark"] .calendar-toast { background: #e8edf5; color: #212121; box-shadow: 0 8px 24px rgba(0, 0, 0, .5); }
body[data-site-theme="dark"] .calendar-settings-dialog { border-color: #465162; background: #171c25; }
body[data-site-theme="dark"] .calendar-settings-header { border-color: #39424f; }
body[data-site-theme="dark"] .calendar-settings-header h3,
body[data-site-theme="dark"] .calendar-settings-toggle-row { color: var(--lotbi-text-primary, var(--text, #212121)); }
body[data-site-theme="dark"] .calendar-settings-close,
body[data-site-theme="dark"] .calendar-settings-toggle-row small,
body[data-site-theme="dark"] .calendar-settings-status { color: var(--lotbi-text-primary, var(--text, #212121)); }
body[data-site-theme="dark"] .calendar-settings-location-help { color: var(--lotbi-text-primary, var(--text, #212121)); }
body[data-site-theme="dark"] .calendar-settings-action-row { color: var(--lotbi-text-primary, var(--text, #212121)); }
body[data-site-theme="dark"] .calendar-settings-weather-overview { background: #222936; color: var(--lotbi-text-primary, var(--text, #212121)); }
body[data-site-theme="dark"] .calendar-settings-weather-overview small { color: var(--lotbi-text-primary, var(--text, #212121)); }
body[data-site-theme="dark"] .calendar-settings-action-button { border-color: #465162; background: #171c25; color: var(--lotbi-text-primary, var(--text, #212121)); }
body[data-site-theme="dark"] .calendar-settings-region-row input { border-color: #465162; background: #121720; color: var(--lotbi-text-primary, var(--text, #212121)); }
body[data-site-theme="dark"] .calendar-settings-select-row { color: var(--lotbi-text-primary, var(--text, #212121)); }
body[data-site-theme="dark"] .calendar-settings-select-row small { color: var(--lotbi-text-primary, var(--text, #212121)); }
body[data-site-theme="dark"] .calendar-settings-select { border-color: #465162; background: #121720; color: var(--lotbi-text-primary, var(--text, #212121)); }
body[data-site-theme="dark"] .calendar-settings-body section + section { border-top-color: #39424f; }
body[data-site-theme="dark"] .calendar-unscheduled-group { border-top-color: #39424f; }
body[data-site-theme="dark"] .calendar-unscheduled-note { color: var(--lotbi-text-primary, var(--text, #212121)); }
body[data-site-theme="dark"] .calendar-agenda-range { border-color: #465162; background: #171c25; color: var(--lotbi-text-primary, var(--text, #212121)); }
body[data-site-theme="dark"] .calendar-agenda-range[aria-pressed="true"] { background: #edf0f5; color: #212121; }
body[data-site-theme="dark"] .calendar-week-strip { border-color: #39424f; background: rgba(18, 23, 32, .96); }
body[data-site-theme="dark"] .calendar-week-date { color: var(--lotbi-text-primary, var(--text, #212121)); }
body[data-site-theme="dark"] .calendar-week-date[data-selected="true"],
body[data-site-theme="dark"] .calendar-week-day[data-selected="true"] { background: #222b38; color: var(--lotbi-text-primary, var(--text, #212121)); box-shadow: none; }
body[data-site-theme="dark"] .calendar-week-day { color: var(--lotbi-text-primary, var(--text, #212121)); }
body[data-site-theme="dark"] .calendar-week-day[data-selected="true"] .calendar-week-day-number,
body[data-site-theme="dark"] .calendar-week-grid-event,
body[data-site-theme="dark"] .calendar-week-grid-event-title { color: var(--lotbi-text-primary, var(--text, #212121)); }
body[data-site-theme="dark"] .calendar-event-type { background: #293241; color: var(--lotbi-text-primary, var(--text, #212121)); }
body[data-site-theme="dark"] .calendar-event-status { background: #493b22; color: #f2d490; }
body[data-site-theme="dark"] .calendar-editor-dialog { background: #171c25; }
body[data-site-theme="dark"] .calendar-editor-dialog h3,
body[data-site-theme="dark"] .calendar-editor-body > label { color: var(--lotbi-text-primary, var(--text, #212121)); }
body[data-site-theme="dark"] .calendar-editor-header,
body[data-site-theme="dark"] .calendar-editor-actions { border-color: #39424f; }
body[data-site-theme="dark"] .calendar-editor-close { color: var(--lotbi-text-primary, var(--text, #212121)); }
/* The footer kept the light #fff fill under dark-theme ink: 취소 read 1.09:1.
   Dark fill, light ink, a border that stands out; 저장 as the photo confirm. */
body[data-site-theme="dark"] .calendar-editor-actions button { border-color: #7d8796; background: #121720; color: var(--lotbi-text-primary, var(--text, #212121)); }
body[data-site-theme="dark"] .calendar-editor-save { border-color: #edf0f5 !important; background: #edf0f5 !important; color: #212121 !important; }
body[data-site-theme="dark"] .calendar-editor-delete { border-color: #d36b6b !important; color: #f2a1a1 !important; }
body[data-site-theme="dark"] .calendar-readonly-dialog { border-color: #39424f; background: #171c25; }
body[data-site-theme="dark"] .calendar-readonly-header,
body[data-site-theme="dark"] .calendar-readonly-actions { border-color: #39424f; }
body[data-site-theme="dark"] .calendar-readonly-header h3,
body[data-site-theme="dark"] .calendar-readonly-title,
body[data-site-theme="dark"] .calendar-readonly-details dd { color: var(--lotbi-text-primary, var(--text, #212121)); }
body[data-site-theme="dark"] .calendar-readonly-close,
body[data-site-theme="dark"] .calendar-readonly-details dt { color: var(--lotbi-text-primary, var(--text, #212121)); }
body[data-site-theme="dark"] .calendar-readonly-notice { background: #222b38; color: var(--lotbi-text-primary, var(--text, #212121)); }
body[data-site-theme="dark"] .calendar-readonly-actions button { border-color: #515b69; background: #121720; color: var(--lotbi-text-primary, var(--text, #212121)); }
body[data-site-theme="dark"] .calendar-editor-title,
body[data-site-theme="dark"] .calendar-editor-date,
body[data-site-theme="dark"] .calendar-editor-end-date,
body[data-site-theme="dark"] .calendar-editor-time,
body[data-site-theme="dark"] .calendar-editor-amount,
body[data-site-theme="dark"] .calendar-editor-category,
body[data-site-theme="dark"] .calendar-editor-memo,
body[data-site-theme="dark"] .calendar-editor-place,
body[data-site-theme="dark"] .calendar-editor-merchant { border-color: #515b69; background: #121720; color: var(--lotbi-text-primary, var(--text, #212121)); }
body[data-site-theme="dark"] .calendar-editor-details { border-color: #39424f; }
body[data-site-theme="dark"] .calendar-editor-primary > label,
body[data-site-theme="dark"] .calendar-editor-details > label,
body[data-site-theme="dark"] .calendar-editor-category-field,
body[data-site-theme="dark"] .calendar-editor-time-control { color: var(--lotbi-text-primary, var(--text, #212121)); }
body[data-site-theme="dark"] .calendar-editor-time-trigger,
body[data-site-theme="dark"] .calendar-editor-end-time-trigger,
body[data-site-theme="dark"] .calendar-editor-category-trigger,
body[data-site-theme="dark"] .calendar-editor-time-sheet,
body[data-site-theme="dark"] .calendar-editor-category-sheet,
body[data-site-theme="dark"] .calendar-editor-time-quick button,
body[data-site-theme="dark"] .calendar-editor-time-actions button,
body[data-site-theme="dark"] .calendar-editor-category-sheet button,
body[data-site-theme="dark"] .calendar-editor-end-time { border-color: #515b69; background: #121720; color: var(--lotbi-text-primary, var(--text, #212121)); }
body[data-site-theme="dark"] .calendar-editor-time-period { border-color: #515b69; }
body[data-site-theme="dark"] .calendar-editor-time-period-choice { background: #121720; color: var(--lotbi-text-primary, var(--text, #212121)); }
body[data-site-theme="dark"] .calendar-editor-time-period-choice + .calendar-editor-time-period-choice { border-left-color: #515b69; }
body[data-site-theme="dark"] .calendar-editor-time-period-choice[aria-pressed="true"] { background: #edf0f5; color: #212121; }
body[data-site-theme="dark"] .calendar-delete-confirm-dialog { border-color: #39424f; background: #171c25; }
body[data-site-theme="dark"] .calendar-delete-confirm-dialog h4 { color: var(--lotbi-text-primary, var(--text, #212121)); }
body[data-site-theme="dark"] .calendar-delete-confirm-dialog > p { color: var(--lotbi-text-primary, var(--text, #212121)); }
body[data-site-theme="dark"] .calendar-delete-confirm-actions button { border-color: #515b69; background: #121720; color: var(--lotbi-text-primary, var(--text, #212121)); }
body[data-site-theme="dark"] .calendar-delete-confirm-submit { border-color: #d36b6b !important; color: #f2a1a1 !important; }

@media (min-width: 901px) {
  .calendar-month-layout,
  .calendar-month {
    height: 100%;
  }

  .calendar-month {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
  }

  .calendar-month-grid {
    min-height: 0;
    height: 100%;
  }

  .calendar-month-grid[data-week-count="4"] { grid-template-rows: repeat(4, minmax(0, 1fr)); }
  .calendar-month-grid[data-week-count="5"] { grid-template-rows: repeat(5, minmax(0, 1fr)); }
  .calendar-month-grid[data-week-count="6"] { grid-template-rows: repeat(6, minmax(0, 1fr)); }

  .calendar-date-cell { min-height: 0; gap: 1px; }

  .calendar-month-layout[data-day-detail="SIDE"][data-detail-open="true"] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(290px, 340px);
    gap: 14px;
  }

  .calendar-day-panel[data-presentation="SIDE"] {
    position: sticky;
    top: 0;
    align-self: start;
    max-height: min(620px, calc(100dvh - 72px));
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .10);
  }
  .calendar-day-panel[data-presentation="SIDE"] .calendar-day-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
}

@media (max-width: 900px) {
  .calendar-readonly-backdrop { place-items: end center; padding: 0; }
  .calendar-readonly-dialog { width: min(100%, 560px); max-height: 94dvh; border-radius: 18px 18px 0 0; }
  .calendar-editor-backdrop { align-items: flex-end; padding: 0; }
  .calendar-editor-dialog {
    width: min(100%, 560px);
    max-height: 94vh;
    max-height: 94svh;
    max-height: 94dvh;
    border-radius: 18px 18px 0 0;
  }
  .calendar-editor-body { grid-template-columns: 1fr; }
  .calendar-editor-body > label,
  .calendar-editor-wide { grid-column: 1; }
  .site-modal.site-calendar-modal {
    width: min(100%, 760px);
    height: 94svh;
    max-height: 94svh;
  }

  .site-modal.site-calendar-modal > .site-modal-content[data-calendar-manager-view="month"],
  .site-modal.site-calendar-modal > .site-modal-content[data-calendar-manager-view="week"],
  .site-modal.site-calendar-modal > .site-modal-content[data-calendar-manager-view="year"],
  .site-modal.site-calendar-modal > .site-modal-content[data-calendar-manager-view="agenda"] {
    overflow-y: auto;
  }

  .calendar-product-shell { height: auto; }

  .calendar-toolbar {
    display: grid;
    grid-template-columns: 44px minmax(80px, 1fr) 44px 52px 68px;
    gap: 6px;
    overflow: visible;
    white-space: nowrap;
  }

  .calendar-nav-button { min-width: 44px; }
  .calendar-title-button { min-width: 0; }
  .calendar-today-button { min-width: 52px; }
  .calendar-settings-button { min-width: 68px; }
  .calendar-mode-tabs {
    grid-column: 1 / -1;
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }
  .calendar-mode-tab { min-width: 0; padding-inline: 6px; }

  .calendar-month-layout { height: auto; }
  .calendar-month { height: auto; }
  .calendar-date-cell { min-height: 78px; padding: 3px; }
  .calendar-event-stack { display: none; }
  .calendar-mobile-event-count { display: inline; }
  .calendar-attention-marker { max-width: 56px; font-size: 9px; }
  .calendar-holiday-label { font-size: 9px; }

  /* Horizontal month swipe: tell the browser this surface scrolls vertically only,
     so a sideways drag reaches our handler instead of becoming a page pan. */
  .calendar-month { touch-action: pan-y; }

  /* FLOW keeps the previous below-the-month panel, still reachable via
     setDayDetailPresentation('FLOW'). */
  .calendar-day-panel[data-presentation="FLOW"] {
    position: static;
    width: auto;
    max-height: none;
    margin-top: 12px;
    padding: 14px;
  }
  .calendar-day-panel[data-presentation="FLOW"] .calendar-day-body { overflow: visible; }

  /* SHEET is the default touch presentation: it opens over the tapped month
     instead of making the user scroll to the bottom of the page. */
  .calendar-day-sheet-backdrop {
    position: fixed;
    inset: 0;
    z-index: 90;
    /* No scrim. A dimmed month is a month you cannot read, and the whole point
       of the sheet being small is that the date rows behind it stay usable.
       This layer still exists, and still dismisses on tap -- it just does it
       without covering the calendar, which is raised above it below. */
    background: rgba(15, 23, 42, .42);
    animation: calendar-day-sheet-fade 160ms ease-out;
  }
  .calendar-day-sheet-backdrop[data-reduced-motion="true"] { animation: none; }

  /* The dismiss layer used to swallow every tap on the month, so with the sheet
     open no other date could be reached at all -- the first tap only closed the
     sheet. The month sits above the backdrop (79) and below the sheet (80), so
     a tap on a date selects that date and the sheet simply retargets. */
  .calendar-month-layout[data-day-detail="SHEET"][data-detail-open="true"] .calendar-month {
    position: static;
    z-index: auto;
  }
  /* ...and the rows the sheet does cover can be scrolled clear of it. The
     reserve is the sheet's measured height, written by syncMonthLayout. */
  .calendar-month-layout[data-day-detail="SHEET"][data-detail-open="true"] {
    padding-bottom: 0;
  }

  .calendar-day-panel[data-presentation="SHEET"] {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 91;
    width: auto;
    margin-top: 0;
    /* Compact by default. An empty day is a heading, one line of text and two
       buttons; it has no business taking a phone screen's worth of room. */
    gap: 4px;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
    border: 1px solid #dbe1ea;
    border-bottom: 0;
    border-radius: 16px 16px 0 0;
    --lotbi-calendar-panel-surface: var(--lotbi-calendar-sheet-surface, #ffffff);
    background: var(--lotbi-calendar-panel-surface);
    box-shadow: 0 -12px 40px rgba(15, 23, 42, .22);
    /* svh/dvh ladder keeps Safari from clipping the sheet behind its chrome.
       42dvh, not 82: past this the month underneath stops being readable, and a
       busy day scrolls inside the sheet instead of growing it. */
    max-height: 42vh;
    max-height: 42svh;
    max-height: 42dvh;
    overflow: hidden;
    animation: calendar-day-sheet-rise 200ms ease-out;
  }
  .calendar-day-panel[data-presentation="SHEET"][data-reduced-motion="true"] { animation: none; }
  .calendar-day-panel[data-presentation="SHEET"] .calendar-day-body {
    gap: 4px;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  /* The anchored panel gets the same compact box as the sheet did: on a phone
     it is a couple of date rows' worth of chrome either way. Its position is
     JS's, its size is here. */
  .calendar-day-panel[data-presentation="POPOVER"] {
    gap: 4px;
    padding: 8px 10px;
    border-radius: 14px;
    --lotbi-calendar-panel-surface: var(--lotbi-calendar-sheet-surface, #ffffff);
    background: var(--lotbi-calendar-panel-surface);
  }
  .calendar-day-panel[data-presentation="POPOVER"] .calendar-day-body {
    gap: 4px;
    -webkit-overflow-scrolling: touch;
  }

  /* Everything below is sizing, and both touch presentations want it. FLOW is
     the in-page fallback and keeps the roomier original. */
  .calendar-day-panel:not([data-presentation="FLOW"]) .calendar-day-panel-head {
    align-items: center;
    gap: 6px;
  }
  .calendar-day-panel:not([data-presentation="FLOW"]) .calendar-day-heading {
    overflow: hidden;
    font-size: 13px;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .calendar-day-panel:not([data-presentation="FLOW"]) .calendar-day-panel-actions { gap: 4px; }
  .calendar-day-panel:not([data-presentation="FLOW"]) .calendar-day-toggle,
  .calendar-day-panel:not([data-presentation="FLOW"]) .calendar-day-close {
    min-height: 28px;
    padding: 4px 8px;
    border-radius: 8px;
    font-size: 11px;
  }
  .calendar-day-panel:not([data-presentation="FLOW"]) .life-calendar-empty {
    padding: 2px 0;
    font-size: 12px;
    line-height: 1.25;
  }
  .calendar-day-panel:not([data-presentation="FLOW"]) .calendar-day-holiday {
    padding: 4px 8px;
    font-size: 11px;
  }
  .calendar-day-panel:not([data-presentation="FLOW"]) .calendar-add-message {
    margin: 0;
    padding: 4px 0;
    font-size: 11px;
    line-height: 1.35;
  }
  /* Still above the 24px pointer-target floor. */
  .calendar-day-panel:not([data-presentation="FLOW"]) .calendar-add-actions { gap: 6px; }
  .calendar-day-panel:not([data-presentation="FLOW"]) .calendar-add-button {
    min-height: 30px;
    padding: 5px 9px;
    border-radius: 9px;
    font-size: 11px;
  }
  /* Empty day: "등록된 일정이 없어요." shares the secondary row rather than
     taking a line of its own. The sentence yields the width and the buttons
     keep theirs -- the other way round (buttons on flex: 1 1 0 beside a
     sentence that refuses to shrink) squeezed both boxes narrower than their
     own labels and "이미지로 등록" spilled across the next button. Measured on
     the deployed page at 390px. */
  .calendar-day-panel:not([data-presentation="FLOW"]) .calendar-add-actions .life-calendar-empty {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    padding: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .calendar-day-panel:not([data-presentation="FLOW"]) .calendar-add-actions .calendar-add-button {
    /* width:100% comes from the stacked-panel rule and, with flex-basis auto,
       it is what made both boxes resolve to the same width and outgrow their
       labels. On this row each button is exactly as wide as its own words. */
    flex: 0 0 auto;
    width: auto;
  }

  .calendar-day-panel:not([data-presentation="FLOW"]) .calendar-day-list { gap: 5px; }
  .calendar-day-panel:not([data-presentation="FLOW"]) .calendar-day-event {
    min-height: 40px;
    grid-template-columns: 50px minmax(0, 1fr);
    gap: 7px;
    padding: 6px 7px;
  }
  .calendar-day-panel:not([data-presentation="FLOW"]) .calendar-day-event time { font-size: 11px; }
  .calendar-day-panel:not([data-presentation="FLOW"]) .calendar-day-event strong { font-size: 13px; }
  .calendar-day-panel:not([data-presentation="FLOW"]) .calendar-day-event small { font-size: 10px; }

  /* When the software keyboard is up, ride the visual viewport so the add button
     and controls stay reachable. Mirrors the event editor's handling. */
  .calendar-day-panel[data-presentation="SHEET"][data-visual-viewport-bound="true"] {
    bottom: var(--calendar-day-sheet-bottom-gap, 0px);
    /* min(), so riding the visual viewport can only ever make the sheet
       SHORTER. Without it the keyboard binding quietly re-raised the cap. */
    max-height: min(42dvh, calc(var(--calendar-day-sheet-visual-height, 42dvh) - 24px));
  }

  /* Opacity only, deliberately. A transform-based rise would move the sheet's box
     during the animation, and the Month geometry checks measure this element, so a
     translate makes their readings depend on animation timing. Fading keeps the
     resting geometry true from the first frame. */
  @keyframes calendar-day-sheet-rise {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  @keyframes calendar-day-sheet-fade {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  .calendar-day-panel[data-presentation="FLOW"] .calendar-day-event { min-height: 54px; }
  .calendar-day-panel[data-presentation="FLOW"] .calendar-day-event strong { font-size: 15px; }

  .calendar-year-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
  .site-modal.site-calendar-modal {
    width: 100%;
    height: 96svh;
    max-height: 96svh;
  }
  .site-modal.site-calendar-modal > .site-modal-content { padding-inline: 8px; }

  .calendar-toolbar {
    grid-template-columns: 44px minmax(0, 1fr) 44px 48px 64px;
    gap: 4px;
  }
  .calendar-nav-button { min-width: 44px; font-size: 0; }
  .calendar-nav-button::before { content: '‹'; font-size: 24px; }
  .calendar-nav-button[data-calendar-navigation="next"]::before { content: '›'; }
  .calendar-title-button { padding-inline: 5px; font-size: 15px; }
  .calendar-today-button { min-width: 44px; padding-inline: 5px; }
  .calendar-settings-button { min-width: 64px; width: 64px; padding-inline: 7px; }
  .calendar-mode-tab { min-height: 44px; padding-inline: 3px; font-size: 12px; }
  .calendar-weekdays span { padding-bottom: 6px; }

  .calendar-month-grid { border-inline: 0; }
  .calendar-month-grid[data-grid-lines="true"] { row-gap: 1px; column-gap: 1px; }
  .calendar-month-grid[data-grid-lines="false"] { row-gap: 0; column-gap: 0; }
  .calendar-date-cell { min-height: 86px; gap: 2px; padding: 2px 0; }
  .calendar-date-header {
    position: relative;
    min-height: 70px;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 44px 12px;
    justify-content: center;
    align-items: center;
    column-gap: 1px;
    row-gap: 0;
  }
  .calendar-date-trigger { grid-column: 1; grid-row: 1; min-width: 44px; min-height: 44px; place-items: start; padding: 5px 0 0 4px; justify-self: start; }
  .calendar-date-number { font-size: 12px; }
  /* justify-self: start, not center -- centered put this under the weather
     corner's own column, so a 3rd (precip) row there ran the "N개" badge
     straight into the "💧NN%" text. Left, under the date number, has no
     weather content sharing its column regardless of how many rows the
     weather corner grows to. */
  .calendar-mobile-event-count { grid-column: 1; grid-row: 2; justify-self: start; margin-left: 4px; font-size: 9px; line-height: 12px; }
  .calendar-weather-summary { position: absolute; top: 2px; right: 1px; margin: 0; display: grid; grid-template-columns: 28px; grid-template-rows: 15px 22px; justify-items: center; gap: 0; }
  .calendar-weather-summary > .calendar-weather-icon { grid-row: 1; width: 15px; height: 15px; font-size: 15px; }
  .calendar-weather-temperature { grid-row: 2; width: 27px; height: 21px; font-size: 7px; line-height: 1; }
  .calendar-weather-temperature-separator { font-size: 9px; }
  .calendar-weather-temperature-value { padding-top: 4px; font-size: 8px; text-align: center; }
  .calendar-weather-precip { grid-row: 3; margin-top: 0; font-size: 6.5px; text-align: center; }
  .calendar-holiday-label { font-size: 8px; }
  .calendar-attention-marker { position: absolute; top: 3px; right: 2px; width: 6px; height: 6px; margin: 0; border-radius: 999px; background: #a56720; font-size: 0; }

  .calendar-day-panel[data-presentation="FLOW"] { padding: 13px; }
  .calendar-day-panel[data-presentation="FLOW"] .calendar-day-panel-head { align-items: flex-start; }
  .calendar-day-panel[data-presentation="FLOW"] .calendar-day-heading { font-size: 15px; }
  .calendar-day-panel[data-presentation="FLOW"] .calendar-day-toggle,
  .calendar-day-panel[data-presentation="FLOW"] .calendar-day-close { min-height: 44px; padding-inline: 8px; }
  .calendar-day-panel[data-presentation="FLOW"] .calendar-day-event { min-height: 56px; grid-template-columns: 62px minmax(0, 1fr); }
  .calendar-day-panel[data-presentation="FLOW"] .calendar-day-event strong { font-size: 15px; }
  /* The narrowest phones -- a folded Fold is 344px -- give the panel even less
     to spend. Both buttons stay above the pointer-target floor. */
  .calendar-day-panel:not([data-presentation="FLOW"]) { padding-inline: 9px; }
  .calendar-day-panel:not([data-presentation="FLOW"]) .calendar-day-heading { font-size: 12px; }
  .calendar-day-panel:not([data-presentation="FLOW"]) .calendar-add-button { font-size: 11px; padding-inline: 6px; }

  .calendar-year-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .calendar-year-month { min-height: 74px; padding: 10px; }
  .calendar-mini-weekdays,
  .calendar-mini-grid { display: none; }
  .calendar-year-event-count { font-size: 12px; }

  .calendar-editor-backdrop {
    top: var(--calendar-editor-visual-top, 0px);
    right: 0;
    bottom: auto;
    left: 0;
    height: var(--calendar-editor-visual-height, 100dvh);
    align-items: stretch;
  }
  .calendar-editor-dialog {
    width: 100%;
    height: 100%;
    max-height: none;
    border-width: 0;
    border-radius: 0;
  }
  .calendar-editor-header {
    padding: calc(12px + env(safe-area-inset-top)) 16px 10px;
  }
  .calendar-editor-body {
    grid-template-columns: 1fr;
    padding: 14px 16px;
  }
  .calendar-editor-body > * { grid-column: 1 !important; }
  .calendar-editor-actions {
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  }
  .calendar-editor-title,
  .calendar-editor-date,
  .calendar-editor-end-date,
  .calendar-editor-time,
  .calendar-editor-end-time,
  .calendar-editor-amount,
  .calendar-editor-category,
  .calendar-editor-memo,
  .calendar-editor-place,
  .calendar-editor-merchant { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .calendar-skeleton { animation: none; }
  .calendar-toast { animation: none; }
}

.calendar-deep-open-notice {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid #d9dee8;
  border-radius: 12px;
  background: #f8fafc;
  color: var(--lotbi-text-primary, var(--text, #212121));
  font-size: 13px;
  font-weight: 750;
}

body[data-site-theme="dark"] .calendar-deep-open-notice {
  border-color: #46515f;
  background: #222936;
  color: var(--lotbi-text-primary, var(--text, #212121));
}



@media (max-width: 520px) {
  .calendar-settings-region-row { align-items: stretch; flex-direction: column; }
  .calendar-settings-region-row .calendar-settings-action-button { width: 100%; }
  .calendar-settings-backdrop { place-items: end stretch; padding: 0; }
  .calendar-settings-dialog {
    width: 100%;
    max-height: min(86dvh, 680px);
    border-width: 1px 0 0;
    border-radius: 18px 18px 0 0;
  }
  .calendar-settings-header { min-height: 52px; }
  .calendar-settings-body { max-height: none; flex: 1 1 auto; padding-bottom: calc(22px + env(safe-area-inset-bottom)); }
}

/* ─────────────────────────────────────────────────────────────────────────
   CALENDAR LIFE UX 01
   The Calendar reads as days of a life: a calm month, the selected day as a
   time-ordered list of records, one "+ 기록" within thumb's reach, and the
   month's amounts as a single quiet line. Colours come from the existing
   role tokens, so light, dark and the system preference stay in step.
   ───────────────────────────────────────────────────────────────────────── */

/* Toolbar: the title is also the way into 년. */
.calendar-title-button::after {
  content: '▾';
  display: inline-block;
  margin-left: 6px;
  font-size: .72em;
  opacity: .7;
}
.calendar-title-button[data-year-open="true"]::after { content: '▴'; }

/* Month cells: dots are a phone's indicator; wider cells show titles. */
.calendar-record-dots { display: none; }
.calendar-record-dot {
  width: 5px;
  height: 5px;
  flex: 0 0 5px;
  border-radius: 999px;
  background: currentColor;
  opacity: .72;
}
.calendar-date-cell[data-current-month="false"] .calendar-record-dot { opacity: .45; }

/* A multi-day record is one bar across its days. Only the first slice in a
   week row carries the title; the others keep the bar continuous. */
.calendar-span-chip {
  grid-template-columns: minmax(0, 1fr);
  margin-inline: -5px;
  padding-inline: 8px;
  border-radius: 0;
  background: var(--lotbi-calendar-week-selected-surface);
}
.calendar-span-chip[data-span-start="true"] { margin-left: 0; border-top-left-radius: 5px; border-bottom-left-radius: 5px; }
.calendar-span-chip[data-span-end="true"] { margin-right: 0; border-top-right-radius: 5px; border-bottom-right-radius: 5px; }
.calendar-span-chip:hover { background: var(--lotbi-calendar-week-selected-surface); filter: brightness(.97); }
.calendar-span-placeholder { display: block; min-height: 24px; }

/* The month's amounts: one line, never a ledger. */
.calendar-amount-line {
  box-sizing: border-box;
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0 0;
  padding: 8px 4px;
  border: 0;
  border-top: 1px solid var(--lotbi-calendar-grid-line);
  border-radius: 0;
  background: transparent;
  color: var(--lotbi-text-primary, var(--text, #212121));
  cursor: pointer;
  font: inherit;
  text-align: left;
}
.calendar-amount-line-label { color: var(--lotbi-calendar-muted-ink); font-size: 13px; }
.calendar-amount-line-amount { margin-left: 0; font-size: 15px; font-weight: 650; font-variant-numeric: tabular-nums; }
.calendar-amount-line-chevron { color: var(--lotbi-calendar-muted-ink); font-size: 18px; line-height: 1; }
.calendar-amount-line:hover .calendar-amount-line-amount { text-decoration: underline; text-underline-offset: 3px; }
.calendar-amount-line-error { cursor: default; color: var(--lotbi-calendar-muted-ink); font-size: 13px; }

/* The selected day: a section of the page, not a floating card. */
.calendar-day-panel { gap: 8px; }
.calendar-day-panel-head { flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.calendar-day-heading { font-size: 17px; font-weight: 700; line-height: 1.4; }
.calendar-day-heading:focus { outline: none; }
.calendar-day-heading:focus-visible { outline: 2px solid var(--lotbi-focus-ring, #212121); outline-offset: 3px; border-radius: 4px; }
.calendar-day-today {
  display: inline-block;
  margin-right: 2px;
  padding: 1px 7px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
  vertical-align: 2px;
}
.calendar-day-weather {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--lotbi-calendar-muted-ink);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.calendar-day-weather .calendar-weather-icon { width: 18px; height: 18px; font-size: 16px; line-height: 18px; }
.calendar-day-body { gap: 6px; }
.calendar-day-holiday { margin: 0; }
.calendar-day-amount {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0;
  color: var(--lotbi-calendar-muted-ink);
  font-size: 13px;
}
.calendar-day-amount strong {
  color: var(--lotbi-text-primary, var(--text, #212121));
  font-size: 15px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

/* Life timeline rows: time | what | amount, separated by hairlines. */
.calendar-life-list { gap: 0; }
.calendar-day-event.calendar-life-row {
  min-height: 48px;
  display: grid;
  grid-template-columns: minmax(74px, max-content) minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
  padding: 10px 4px;
  border: 0;
  border-bottom: 1px solid var(--lotbi-calendar-grid-line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
}
.calendar-life-list .calendar-life-row:last-child { border-bottom: 0; }
.calendar-day-event.calendar-life-row:hover { background: var(--lotbi-calendar-week-selected-surface); }
.calendar-day-event.calendar-life-row:focus-visible { outline: 2px solid var(--lotbi-focus-ring, #212121); outline-offset: -2px; }
.calendar-life-time { min-width: 0; display: grid; gap: 1px; padding-top: 1px; }
.calendar-day-event.calendar-life-row time {
  color: var(--lotbi-text-primary, var(--text, #212121));
  font-size: 14px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.calendar-life-row[data-life-group="SPAN"] time,
.calendar-life-row[data-life-group="DEADLINE"] time { font-size: 12px; font-weight: 650; color: var(--lotbi-calendar-muted-ink); }
.calendar-life-time small { color: var(--lotbi-calendar-muted-ink); font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.calendar-life-copy { min-width: 0; display: grid; gap: 2px; }
.calendar-day-event.calendar-life-row .calendar-life-title {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: var(--lotbi-text-primary, var(--text, #212121));
  font-size: 15px;
  font-weight: 650;
  line-height: 1.4;
  overflow-wrap: anywhere;
  white-space: normal;
}
.calendar-day-event.calendar-life-row .calendar-life-meta {
  overflow: hidden;
  color: var(--lotbi-calendar-muted-ink);
  font-size: 12.5px;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.calendar-life-row .calendar-event-status { justify-self: start; margin-top: 2px; }
.calendar-life-amount {
  padding-top: 1px;
  color: var(--lotbi-text-primary, var(--text, #212121));
  font-size: 14px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}
.calendar-life-row[data-life-continued="true"] .calendar-life-title { font-weight: 550; }
.calendar-life-section-label {
  margin: 10px 0 0;
  padding: 0 4px;
  color: var(--lotbi-calendar-muted-ink);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .01em;
}

/* CALENDAR-ADD-UX-01: both add paths keep a 48px target. */
.calendar-add-actions .calendar-add-button { min-height: 48px; padding: 8px 14px; font-size: 14px; }
.calendar-add-actions .calendar-add-detail-button { font-weight: 750; }
.calendar-action-slot[hidden] { display: none !important; }
.calendar-action-slot { min-width: 0; display: grid; gap: 6px; }
.calendar-action-slot .calendar-add-message { margin: 0; }
.calendar-action-slot[data-calendar-action-bar="inline"] .calendar-add-actions,
.calendar-action-slot[data-calendar-action-bar="week-top"] .calendar-add-actions {
  position: static;
  justify-content: flex-end;
  padding-top: 0;
  background: transparent;
}
.calendar-action-slot[data-calendar-action-bar="pinned"] {
  position: sticky;
  bottom: 0;
  z-index: 6;
  /* No bleed into the parent's gutter: the bar may sit in a surface with none. */
  padding: 10px 0 calc(10px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--lotbi-calendar-grid-line);
  background: var(--lotbi-surface-primary, var(--lotbi-calendar-sheet-surface, #ffffff));
  box-shadow: 0 -10px 18px -16px rgba(15, 23, 42, .45);
}
.calendar-action-slot[data-calendar-action-bar="pinned"] .calendar-add-actions {
  position: static;
  margin: 0;
  padding: 0;
  background: transparent;
}
.calendar-action-slot[data-calendar-action-bar="pinned"] .calendar-add-button { min-height: 48px; }
.calendar-action-slot[data-calendar-action-bar="pinned"] .calendar-add-image-button { flex: 0 0 auto; }
.calendar-action-slot[data-calendar-action-bar="pinned"] .calendar-add-detail-button { flex: 1 1 auto; }
.calendar-day-panel .calendar-add-actions { margin-top: 6px; padding-top: 10px; justify-content: flex-end; }
.calendar-action-slot[data-calendar-action-bar="top"] .calendar-add-actions {
  position: static;
  flex-wrap: wrap;
  justify-content: flex-end;
  margin: 0;
  padding: 0;
  background: transparent;
}
.calendar-action-slot[data-calendar-action-bar="top"] .calendar-add-button { min-height: 48px; padding: 10px 16px; font-size: 15px; }
@media (max-width: 900px) {
  .calendar-action-slot[data-calendar-action-bar="top"] .calendar-add-image-button { flex: 0 0 auto; }
  .calendar-action-slot[data-calendar-action-bar="top"] .calendar-add-detail-button { flex: 1 1 auto; }
  .calendar-action-slot[data-calendar-action-bar="top"] .calendar-add-button { line-height: 1.25; white-space: normal; word-break: keep-all; }
}

/* Week: a strip of days, then each day's records. The week's one column is
   the width it is given (beside the day rail on a desk), never the hour grid's
   natural width: the hour grid scrolls sideways inside it instead. */
.calendar-week-agenda { grid-template-columns: minmax(0, 1fr); }
.calendar-week-timegrid { min-width: 0; }
.calendar-week-date .calendar-record-dots { display: flex; gap: 3px; justify-content: center; min-height: 5px; }
.calendar-week-date[data-today="true"] strong { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px; }
.calendar-week-date[data-holiday="true"] { background: var(--lotbi-calendar-holiday-surface); }
.calendar-week-date[data-selected="true"] { box-shadow: inset 0 0 0 1.5px var(--lotbi-calendar-today-ring); }
.calendar-week-layout-toggle { display: flex; justify-content: flex-end; gap: 6px; }
.calendar-week-layout-option {
  min-height: 36px;
  padding: 6px 12px;
  border: 1px solid var(--lotbi-calendar-grid-line);
  border-radius: 999px;
  background: transparent;
  color: var(--lotbi-text-primary, var(--text, #212121));
  cursor: pointer;
  font: inherit;
  font-size: 13px;
}
.calendar-week-layout-option[aria-pressed="true"] { border-color: currentColor; font-weight: 700; }
.calendar-week-list { min-width: 0; display: grid; }
/* The credit line is pinned to the month grid's third row elsewhere; in Week
   it simply follows the list. */
.calendar-week-agenda > .calendar-weather-credit { grid-row: auto; }
/* On a wide screen a day's rows stay a readable length, amounts next to
   their titles rather than a screen away. */
@media (min-width: 901px) {
  .calendar-week-agenda[data-week-layout="list"] > .calendar-week-list,
  .calendar-agenda-view { max-width: 760px; }
}
.calendar-week-day-group {
  min-width: 0;
  display: grid;
  gap: 4px;
  padding: 12px 0 8px;
  border-top: 1px solid var(--lotbi-calendar-grid-line);
  scroll-margin-top: 72px;
}
.calendar-week-day-group:first-child { border-top: 0; }
.calendar-week-day-group[data-weekday="0"] { background: var(--lotbi-calendar-weekend-sun-surface); }
.calendar-week-day-group[data-weekday="6"] { background: var(--lotbi-calendar-weekend-sat-surface); }
.calendar-week-day-group[data-weekday="0"] .calendar-week-day-heading { color: var(--lotbi-calendar-weekend-sun); }
.calendar-week-day-group[data-weekday="6"] .calendar-week-day-heading { color: var(--lotbi-calendar-weekend-sat); }
.calendar-week-day-header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.calendar-week-day-heading { margin: 0; color: var(--lotbi-text-primary, var(--text, #212121)); font-size: 15px; font-weight: 700; }
.calendar-week-day-heading:focus { outline: none; }
.calendar-week-day-group[data-selected="true"] .calendar-week-day-heading { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
.calendar-week-day-group > .life-calendar-empty { margin: 0; padding: 2px 4px 4px; color: var(--lotbi-calendar-muted-ink); font-size: 13px; }

/* Phone Week: the seven days down a narrow rail, the picked day's records as
   hairline rows beside it. Colours are the Calendar's theme tokens only, so
   Light, Dark and the system preference follow without rules of their own. */
.calendar-week-vertical {
  min-width: 0;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
}
.calendar-week-rail {
  position: sticky;
  top: 0;
  z-index: 1;
  min-width: 0;
  display: grid;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--lotbi-calendar-grid-line);
  border-radius: 14px;
  background: var(--lotbi-calendar-sheet-surface);
}
/* One day, one 44px target: "4 일" on a line, the record dots under it. */
.calendar-week-rail-day {
  min-width: 0;
  min-height: 44px;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 3px;
  padding: 4px 2px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--lotbi-text-primary, var(--text, #212121));
  cursor: pointer;
  font: inherit;
  -webkit-tap-highlight-color: transparent;
}
.calendar-week-rail-day:focus-visible { outline: 2px solid var(--lotbi-focus-ring, #212121); outline-offset: 1px; }
.calendar-week-rail-line { display: flex; align-items: center; justify-content: center; gap: 2px; white-space: nowrap; }
.calendar-week-rail-weekday { color: var(--lotbi-calendar-weekday-ink); font-size: 12px; font-weight: 750; line-height: 1; }
.calendar-week-rail-number {
  min-width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  padding: 0 2px;
  box-sizing: border-box;
  border-radius: 999px;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  line-height: 1;
}
.calendar-week-rail-day .calendar-record-dots { display: flex; justify-content: center; gap: 3px; min-height: 4px; }
.calendar-week-rail-day .calendar-record-dot { width: 4px; height: 4px; flex-basis: 4px; }
.calendar-week-rail-day[data-weekday="0"] :is(.calendar-week-rail-weekday, .calendar-week-rail-number) { color: var(--lotbi-calendar-weekend-sun); }
.calendar-week-rail-day[data-weekday="6"] :is(.calendar-week-rail-weekday, .calendar-week-rail-number) { color: var(--lotbi-calendar-weekend-sat); }
.calendar-week-rail-day[data-holiday="true"] :is(.calendar-week-rail-weekday, .calendar-week-rail-number) { color: var(--lotbi-calendar-holiday-ink); }
.calendar-week-rail-day[data-today="true"] .calendar-week-rail-number { box-shadow: inset 0 0 0 1.5px var(--lotbi-calendar-today-ring); }
.calendar-week-rail-day[data-selected="true"] { background: var(--lotbi-calendar-today-ring); color: var(--lotbi-calendar-sheet-surface); }
.calendar-week-rail-day[data-selected="true"] :is(.calendar-week-rail-weekday, .calendar-week-rail-number) { color: var(--lotbi-calendar-sheet-surface); }
.calendar-week-rail-day[data-selected="true"][data-today="true"] .calendar-week-rail-number { box-shadow: inset 0 0 0 1.5px var(--lotbi-calendar-sheet-surface); }
.calendar-week-rail-day[data-selected="true"] .calendar-record-dot { opacity: 1; }

.calendar-week-day-detail { min-width: 0; display: grid; align-content: start; gap: 4px; }
.calendar-week-day-detail-head { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; padding: 2px 2px 4px; border-bottom: 1px solid var(--lotbi-calendar-grid-line); }
.calendar-week-day-detail .calendar-week-day-heading { font-size: 16px; line-height: 1.4; overflow-wrap: anywhere; }
.calendar-week-day-detail-lunar { color: var(--lotbi-calendar-muted-ink); font-size: 12px; white-space: nowrap; }
.calendar-week-day-detail .calendar-day-weather { white-space: normal; color: var(--lotbi-text-primary, var(--text, #212121)); }
.calendar-week-day-weather-note { color: var(--lotbi-calendar-muted-ink); font-size: 12px; line-height: 1.4; }
.calendar-week-day-cards { min-width: 0; display: grid; gap: 0; }
/* One record, one hairline row: time | what (its category under it) | amount.
   No frame of its own -- a border would read as a meaning it does not have.
   The clock column is at least 40px and otherwise as wide as "09:00" draws:
   a wider system font (DejaVu Sans on Linux) ran a fixed 38px column into
   the title. Clocks use tabular digits, so every row's column stays equal. */
.calendar-week-day-cards .calendar-life-list .calendar-day-event.calendar-life-row {
  min-height: 44px;
  grid-template-columns: minmax(40px, max-content) minmax(0, 1fr) auto;
  grid-template-areas: "time copy amount";
  align-items: baseline;
  gap: 2px 8px;
  padding: 9px 4px;
  border-radius: 8px;
}
.calendar-week-day-cards .calendar-life-list .calendar-day-event.calendar-life-row[data-life-group="UNTIMED"] { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "copy amount"; }
.calendar-week-day-cards .calendar-life-row[data-life-group="UNTIMED"] .calendar-life-time { display: none; }
.calendar-week-day-cards .calendar-life-time { grid-area: time; padding-top: 0; white-space: nowrap; }
/* Preserve CALENDAR-ADD-UX-01: the Korean period may stack above the digits
   in the narrow phone week while retaining one accessible time label. */
.calendar-week-day-cards .calendar-life-time .calendar-clock-period { display: block; color: var(--lotbi-calendar-muted-ink); font-size: 11px; font-weight: 650; line-height: 1.2; }
.calendar-week-day-cards .calendar-life-copy { grid-area: copy; min-width: 0; gap: 1px; }
.calendar-week-day-cards .calendar-day-event.calendar-life-row .calendar-life-title { min-width: 0; -webkit-line-clamp: 4; font-size: 14.5px; line-height: 1.35; }
.calendar-week-day-cards .calendar-life-amount { grid-area: amount; justify-self: end; padding-top: 0; white-space: nowrap; }
.calendar-week-day-cards .calendar-life-section-label { margin: 6px 0 0; padding: 0 4px; }
.calendar-week-day-empty { display: grid; gap: 2px; padding: 10px 4px; }
.calendar-week-day-empty .life-calendar-empty { color: var(--lotbi-text-primary, var(--text, #212121)); font-size: 14px; font-weight: 600; }
.calendar-week-day-empty-hint { margin: 0; color: var(--lotbi-calendar-muted-ink); font-size: 12.5px; line-height: 1.5; }
/* "+ 9월 23일에 기록" beside 사진에서 기록 읽기 ran 9px past a 320px phone. On
   a touch width the two share the row and may wrap rather than be clipped. */
@media (max-width: 900px) {
  .calendar-action-slot[data-calendar-action-bar="week-top"] .calendar-add-actions .calendar-add-button {
    flex: 1 1 0;
    min-width: 0;
    line-height: 1.25;
    white-space: normal;
    word-break: keep-all;
  }
}
@media (max-width: 360px) {
  .calendar-week-vertical { grid-template-columns: 54px minmax(0, 1fr); gap: 8px; }
  .calendar-week-rail-number { min-width: 22px; font-size: 15px; }
  .calendar-week-day-cards .calendar-life-list .calendar-day-event.calendar-life-row { grid-template-columns: minmax(38px, max-content) minmax(0, 1fr) auto; gap: 2px 6px; padding: 9px 2px; }
  .calendar-week-day-cards .calendar-life-list .calendar-day-event.calendar-life-row[data-life-group="UNTIMED"] { grid-template-columns: minmax(0, 1fr) auto; }
}

/* 목록 */
.calendar-agenda-day h3[data-today="true"]::after { content: ' · 오늘'; color: var(--lotbi-calendar-muted-ink); font-weight: 600; }

/* Editor, photo confirmation and amount detail share one presentation:
   a bottom sheet on touch widths, a panel at the right edge on a desk. */
.calendar-editor-backdrop[data-editor-presentation="SIDE"],
.calendar-photo-confirm-backdrop[data-editor-presentation="SIDE"],
.calendar-amount-backdrop[data-editor-presentation="SIDE"] {
  justify-content: flex-end;
  align-items: stretch;
  padding: 16px;
}
.calendar-editor-backdrop[data-editor-presentation="SIDE"] > .calendar-editor-dialog {
  width: min(440px, 100%);
  height: auto;
  max-height: 100%;
  align-self: stretch;
}
.calendar-photo-confirm-backdrop,
.calendar-amount-backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(15, 23, 42, .34);
}
.calendar-photo-confirm-dialog,
.calendar-amount-dialog {
  box-sizing: border-box;
  width: min(420px, 100%);
  max-height: calc(100dvh - 32px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow-y: auto;
  padding: 20px;
  border: 1px solid var(--lotbi-calendar-grid-line);
  border-radius: 16px;
  background: var(--lotbi-surface-primary, var(--lotbi-calendar-sheet-surface, #ffffff));
  color: var(--lotbi-text-primary, var(--text, #212121));
  box-shadow: 0 12px 40px rgba(15, 23, 42, .18);
}
.calendar-photo-confirm-backdrop[data-editor-presentation="SIDE"] > .calendar-photo-confirm-dialog,
.calendar-amount-backdrop[data-editor-presentation="SIDE"] > .calendar-amount-dialog { align-self: flex-start; }
.calendar-photo-confirm-header,
.calendar-amount-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.calendar-photo-confirm-header h3,
.calendar-amount-header h3 { margin: 0; font-size: 18px; font-weight: 700; }
.calendar-photo-confirm-close,
.calendar-amount-close {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  font-size: 24px;
  line-height: 1;
}
.calendar-photo-confirm-card {
  display: grid;
  gap: 4px;
  padding: 14px 16px;
  border: 1px solid var(--lotbi-calendar-grid-line);
  border-radius: 12px;
}
.calendar-photo-confirm-title { font-size: 17px; font-weight: 700; line-height: 1.4; overflow-wrap: anywhere; }
.calendar-photo-confirm-amount { margin: 0; font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.calendar-photo-confirm-when,
.calendar-photo-confirm-where { margin: 0; color: var(--lotbi-calendar-muted-ink); font-size: 14px; line-height: 1.5; }
.calendar-photo-confirm-card [data-missing="true"] { color: #a13232; font-weight: 600; }
.calendar-photo-confirm-note { margin: 0; color: var(--lotbi-calendar-muted-ink); font-size: 12.5px; line-height: 1.5; }
.calendar-photo-confirm-error { margin: 0; color: #a13232; font-size: 13px; }
.calendar-photo-confirm-error[data-hint="true"] { color: var(--lotbi-calendar-muted-ink); }
.calendar-photo-confirm-error:empty { display: none; }
.calendar-photo-confirm-actions,
.calendar-amount-actions { display: flex; justify-content: flex-end; gap: 8px; }
.calendar-photo-confirm-actions button,
.calendar-amount-actions button {
  min-height: 48px;
  padding: 10px 18px;
  border: 1px solid var(--lotbi-calendar-grid-line);
  border-radius: 12px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  font-size: 15px;
  font-weight: 650;
}
.calendar-photo-confirm-save { border-color: var(--brand-navy, #182a46) !important; background: var(--brand-navy, #182a46) !important; color: #fff !important; }
.calendar-photo-confirm-actions button:disabled { cursor: not-allowed; opacity: .45; }

.calendar-amount-detail { display: grid; gap: 12px; }
.calendar-amount-detail-scope,
.calendar-amount-detail-storage,
.calendar-amount-detail-empty { margin: 0; color: var(--lotbi-calendar-muted-ink); font-size: 13px; line-height: 1.55; }
.calendar-amount-detail-currency { display: grid; gap: 6px; }
.calendar-amount-detail-total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0; padding-bottom: 8px; border-bottom: 1px solid var(--lotbi-calendar-grid-line); }
.calendar-amount-detail-total strong { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.calendar-amount-detail-rows { display: grid; gap: 0; max-width: none; margin: 0; }
.calendar-amount-detail-row {
  display: flex;
  grid-template-columns: none;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 0;
}
.calendar-amount-detail-row dt { color: var(--lotbi-text-primary, var(--text, #212121)); font-size: 14px; }
.calendar-amount-detail-row dd { margin: 0; font-size: 14px; font-weight: 650; font-variant-numeric: tabular-nums; }
.calendar-amount-detail-row dd small { color: var(--lotbi-calendar-muted-ink); font-size: 12px; font-weight: 500; }

/* The record editor. */
.calendar-editor-body { gap: 12px; }
.calendar-editor-date-row { display: grid; gap: 8px; justify-items: start; }
.calendar-editor-date-chip {
  min-height: 44px;
  padding: 6px 14px;
  border: 1px solid var(--lotbi-calendar-grid-line);
  border-radius: 999px;
  background: transparent;
  color: var(--lotbi-text-primary, var(--text, #212121));
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  font-weight: 650;
  /* A content-sized pill: alignment is invisible, and the form reads left. */
  text-align: left;
}
.calendar-editor-date-field { width: 100%; }
.calendar-editor-date-field[hidden] { display: none; }
.calendar-editor-date-field > label { display: grid; gap: 6px; font-size: 13px; color: var(--lotbi-calendar-muted-ink); }
.calendar-editor-body > .calendar-editor-title-field { display: grid; gap: 8px; font-size: 13px; font-weight: 650; color: var(--lotbi-calendar-muted-ink); }
.calendar-editor-title-field .calendar-editor-title { font-weight: 600; color: var(--lotbi-text-primary, var(--text, #212121)); }
.calendar-editor-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.calendar-editor-chip {
  max-width: 100%;
  min-height: 44px;
  overflow: hidden;
  padding: 6px 14px;
  border: 1px dashed var(--lotbi-calendar-grid-line);
  border-radius: 999px;
  background: transparent;
  color: var(--lotbi-text-primary, var(--text, #212121));
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.calendar-editor-chip[data-filled="false"]::before { content: '+ '; color: var(--lotbi-calendar-muted-ink); }
.calendar-editor-chip[data-filled="true"] { border-style: solid; background: var(--lotbi-calendar-week-selected-surface); font-weight: 650; font-variant-numeric: tabular-nums; }
.calendar-editor-chip[aria-expanded="true"] { border-style: solid; border-color: var(--lotbi-text-primary, var(--text, #212121)); }
.calendar-editor-sections { display: grid; gap: 10px; }
.calendar-editor-sections:not(:has(> .calendar-editor-section:not([hidden]))) { display: none; }
.calendar-editor-section {
  min-width: 0;
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--lotbi-calendar-grid-line);
  border-radius: 12px;
  color: var(--lotbi-text-primary, var(--text, #212121));
}
.calendar-editor-section[hidden] { display: none !important; }
.calendar-editor-section.calendar-editor-time-control { grid-template-columns: minmax(0, 1fr); font-size: 13px; font-weight: 650; }
.calendar-editor-section > label,
.calendar-editor-end-control > label { display: grid; gap: 6px; font-size: 13px; font-weight: 650; color: var(--lotbi-calendar-muted-ink); }
.calendar-editor-section-label { color: var(--lotbi-calendar-muted-ink); font-size: 13px; font-weight: 650; }
.calendar-editor-time-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.calendar-editor-time-row .calendar-editor-time { width: 104px; flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.calendar-editor-time-period { display: inline-flex; flex: 0 0 auto; overflow: hidden; border: 1px solid #cfd6e2; border-radius: 10px; }
.calendar-editor-time-period-choice { min-width: 56px; min-height: 48px; padding: 8px 12px; border: 0; background: #fff; color: var(--lotbi-text-primary, var(--text, #212121)); font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.calendar-editor-time-period-choice + .calendar-editor-time-period-choice { border-left: 1px solid #cfd6e2; }
.calendar-editor-time-period-choice[aria-pressed="true"] { background: var(--brand-navy, #182a46); color: #fff; }
.calendar-editor-dialog .calendar-editor-chip,
.calendar-editor-dialog .calendar-editor-time-quick button,
.calendar-editor-dialog .calendar-editor-amount-control .calendar-editor-category-choice,
body.chat-home-page .calendar-editor-dialog .calendar-editor-actions button { min-height: 48px; }
.calendar-editor-time-clear {
  min-height: 44px;
  padding: 6px 12px;
  border: 0;
  background: transparent;
  color: var(--lotbi-calendar-muted-ink);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.calendar-editor-hint { color: var(--lotbi-calendar-muted-ink); font-size: 12px; line-height: 1.5; }
.calendar-editor-hint[hidden] { display: none; }
.calendar-editor-end-time:disabled { opacity: .5; }
.calendar-editor-amount-field { display: grid; gap: 6px; }
.calendar-editor-amount-box { display: flex; align-items: center; gap: 8px; }
.calendar-editor-amount-box .calendar-editor-amount { flex: 1 1 auto; font-size: 20px; font-weight: 650; font-variant-numeric: tabular-nums; }
.calendar-editor-amount-unit { flex: 0 0 auto; color: var(--lotbi-calendar-muted-ink); font-size: 15px; }
.calendar-editor-section.calendar-editor-amount-control .calendar-editor-category-sheet {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.calendar-editor-amount-control .calendar-editor-category-choice[aria-pressed="true"] {
  border-color: var(--lotbi-text-primary, var(--text, #212121));
  background: var(--lotbi-calendar-week-selected-surface);
  font-weight: 700;
}
.calendar-editor-note { margin: 0; color: var(--lotbi-calendar-muted-ink); font-size: 12.5px; line-height: 1.5; }
/* 반복 · 알림 (로그인 기록). 셀렉트·요일 버튼·날짜 칸도 다른 칸과 같은 44px
   터치 높이이고, 색은 캘린더 토큰만 써서 세 가지 화면 모드를 그대로 따른다. */
.calendar-editor-repeat,
.calendar-editor-reminder,
.calendar-editor-repeat-end-mode,
.calendar-editor-repeat-until,
.calendar-editor-repeat-interval {
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid var(--lotbi-calendar-grid-line);
  border-radius: 10px;
  background: var(--lotbi-calendar-sheet-surface);
  color: var(--lotbi-text-primary, var(--text, #212121));
  font: inherit;
  font-size: 15px;
}
.calendar-editor-repeat-custom { display: grid; gap: 10px; }
.calendar-editor-repeat-custom[hidden],
.calendar-editor-repeat-end[hidden],
.calendar-editor-repeat-until[hidden],
.calendar-editor-reminder-status[hidden] { display: none; }
.calendar-editor-weekdays { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.calendar-editor-weekday {
  min-width: 0;
  min-height: 44px;
  padding: 0;
  border: 1px solid var(--lotbi-calendar-grid-line);
  border-radius: 10px;
  background: transparent;
  color: var(--lotbi-text-primary, var(--text, #212121));
  cursor: pointer;
  font: inherit;
  font-size: 14px;
}
.calendar-editor-weekday[aria-pressed="true"] {
  border-color: var(--lotbi-text-primary, var(--text, #212121));
  background: var(--lotbi-calendar-week-selected-surface);
  font-weight: 700;
}
.calendar-editor-repeat-interval-label { display: flex; align-items: center; gap: 8px; color: var(--lotbi-text-primary, var(--text, #212121)); font-size: 14px; }
.calendar-editor-repeat-interval { width: 80px; font-variant-numeric: tabular-nums; }
.calendar-editor-repeat-end { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; }
.calendar-editor-repeat-end-label { display: grid; gap: 6px; color: var(--lotbi-calendar-muted-ink); font-size: 13px; font-weight: 650; }
.calendar-editor-reminder-status { margin: 0; color: var(--lotbi-calendar-muted-ink); font-size: 12.5px; line-height: 1.5; }
.calendar-editor-reminder-status:is([data-reminder-delivery="DENIED"], [data-reminder-delivery="UNAVAILABLE"]) { color: var(--lotbi-calendar-holiday-ink); }
/* 하루 목록의 반복 표시: 제목 밑 작은 회색 한 줄('↻ 매주'). */
.calendar-life-repeat { justify-self: start; color: var(--lotbi-calendar-muted-ink); font-size: 12px; line-height: 1.4; }
.calendar-life-repeat::before { content: '\21BB  '; }

/* Dark: the base sheet rules paint every day row as a card; a timeline row is
   a line on the panel's own surface instead. */
body[data-site-theme="dark"] .calendar-day-event.calendar-life-row { border-color: var(--lotbi-calendar-grid-line); background: transparent; }
body[data-site-theme="dark"] .calendar-day-event.calendar-life-row:hover { background: var(--lotbi-calendar-week-selected-surface); }
body[data-site-theme="dark"] .calendar-photo-confirm-save { border-color: #edf0f5 !important; background: #edf0f5 !important; color: #212121 !important; }
body[data-site-theme="dark"] .calendar-photo-confirm-card [data-missing="true"] { color: #f2a1a1; }
body[data-site-theme="dark"] .calendar-photo-confirm-error { color: #f2a1a1; }
body[data-site-theme="dark"] .calendar-action-slot[data-calendar-action-bar="pinned"] { box-shadow: 0 -10px 18px -14px rgba(0, 0, 0, .8); }
/* A stay is one bar across its days in the dark too: the transparent dark
   chip would leave only the first day's title and lose the bar. */
body[data-site-theme="dark"] .calendar-span-chip { background: #2a3546; }
/* + 기록 is the Calendar's one primary action, and the selected view is where
   you are. On the dark canvas the brand fill is the canvas colour itself, so
   both take the light fill dark-theme selections already use. */
body[data-site-theme="dark"] .calendar-add-actions .calendar-add-detail-button,
body[data-site-theme="dark"] .calendar-mode-tab[aria-selected="true"] { border-color: #edf0f5; background: #edf0f5; color: #212121; }

/* Desk: the selected day sits beside the month, and beside the week. */
@media (min-width: 901px) {
  .calendar-month-layout[data-day-detail="SIDE"][data-detail-open="true"] {
    grid-template-columns: minmax(0, 1fr) clamp(320px, 30%, 380px);
    gap: 20px;
  }
  .calendar-week-layout[data-day-detail="SIDE"] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(320px, 30%, 380px);
    gap: 20px;
    align-items: start;
  }
  .calendar-week-layout > .calendar-week-agenda { min-width: 0; }
  /* A bar has to reach the cell's edges to read as one bar across days; the
     cell itself still clips, so nothing leaks into a neighbour. */
  .calendar-event-stack { overflow: visible; }
  .calendar-day-panel[data-presentation="SIDE"] { padding: 16px; }
  .calendar-day-panel[data-presentation="SIDE"] .calendar-add-actions { position: sticky; bottom: 0; }
}

/* The month's cells are as wide as the room beside the day rail allows, not
   as wide as the screen, so the forecast follows the grid's own width. Under
   ~96px a cell (a small laptop, a tablet held sideways) keeps the glyph in
   its top-right corner and its "min/max" line under the date; precipitation
   is in the day rail. */
@media (min-width: 601px) {
  .calendar-month-grid { container: calendar-month / inline-size; }
}
@container calendar-month (max-width: 679px) {
  .calendar-month-grid .calendar-weather-precip { display: none; }
  /* The date keeps the left; the glyph takes the corner instead of being
     pushed past the cell's edge by a 44px date button. */
  .calendar-month-grid .calendar-date-trigger { min-width: 0; padding-inline: 4px; justify-items: start; }
  .calendar-month-grid .calendar-weather-summary { position: absolute; top: 6px; right: 5px; margin: 0; }
  .calendar-month-grid .calendar-weather-summary > .calendar-weather-icon { display: inline-flex; align-items: center; justify-content: center; }
  .calendar-month-grid .calendar-date-cell[data-lunar="true"][data-weather="true"] .calendar-date-trigger { max-width: calc(100% - 29px); padding-right: 0; }
  /* A lunar label, or today's "10•", reaches under the glyph (to ~56px in the
     Linux gate's wide fonts), so the min/max line sits in the free band
     between the date line (ends 38px down) and the first record (starts 49px
     down): one 9px line, right-aligned, top 6px + 32px = 38px. */
  .calendar-month-grid .calendar-date-cell .calendar-weather-temperature { position: absolute; top: 32px; right: 0; display: flex; font-size: 9px; line-height: 9px; letter-spacing: -0.05em; }
  .calendar-month-grid .calendar-date-cell .calendar-weather-temperature-separator { margin-inline: 0; }
  /* A lunar month start (음9.1) may fold under the date into that band: that
     one cell keeps the glyph alone, as on a phone. */
  .calendar-month-grid .calendar-date-cell[data-lunar="true"]:has(.calendar-date-line[data-lunar-kind="month-start"]) .calendar-weather-temperature { display: none; }
}
@container calendar-month (max-width: 519px) {
  .calendar-month-grid .calendar-weather-summary > .calendar-weather-icon { width: 18px; height: 18px; font-size: 18px; line-height: 18px; }
  .calendar-month-grid .calendar-date-cell[data-lunar="true"][data-weather="true"] .calendar-date-trigger { max-width: calc(100% - 23px); }
}

/* Any cell wide enough for titles (tablet and desk, ~100px): the glyph keeps
   its full size and the forecast stacks -- glyph, then one "min/max" line --
   so it fits beside the date instead of being clipped by the cell. */
@media (min-width: 601px) {
  .calendar-month-grid .calendar-weather-summary { grid-template-columns: auto; justify-items: end; align-items: start; gap: 0; }
  .calendar-month-grid .calendar-weather-temperature { width: auto; height: auto; font-size: 10px; font-weight: 700; white-space: nowrap; }
  .calendar-month-grid .calendar-weather-temperature > span { position: static; transform: none; }
  .calendar-month-grid .calendar-weather-temperature-separator { margin-inline: 1px; font-size: 10px; }
  .calendar-month-grid .calendar-weather-temperature-value { padding-top: 0; }
  .calendar-month-grid .calendar-weather-precip { grid-column: 1; font-size: 9px; }
  /* 확인 필요 moves to the cell's lower corner so it never fights the forecast
     for the top row; the date button's label still says it in words. */
  .calendar-month-grid .calendar-date-cell { position: relative; }
  .calendar-month-grid .calendar-attention-marker { position: absolute; right: 5px; bottom: 4px; max-width: calc(100% - 10px); margin: 0; font-size: 10px; }
}

/* Touch widths: one scroll, a slimmer toolbar, the day under the month. */
@media (max-width: 900px) {
  .calendar-toolbar { grid-template-columns: 44px minmax(0, 1fr) 44px auto 44px; }
  .calendar-settings-button { width: 44px; min-width: 44px; padding-inline: 0; }
  .calendar-toolbar > .calendar-settings-button { grid-column: 5; grid-row: 1; }
  .calendar-settings-label { display: none; }
  .calendar-mode-tabs { grid-column: 1 / -1; grid-row: 2; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .calendar-day-panel[data-presentation="FLOW"] {
    margin-top: 6px;
    padding: 14px 4px 6px;
    border: 0;
    border-top: 1px solid var(--lotbi-calendar-grid-line);
    border-radius: 0;
    background: transparent;
  }
  .calendar-day-panel[data-presentation="FLOW"] .calendar-day-event.calendar-life-row { min-height: 52px; }
  .calendar-day-panel[data-presentation="FLOW"] .calendar-day-event.calendar-life-row .calendar-life-title { font-size: 15px; }
  .calendar-event-stack { display: grid; }
  .calendar-date-cell { min-height: 96px; }
  /* A busy week must not make its row taller than the others: every week row
     takes the height of the tallest (the grid's height is its content's). */
  .calendar-month-grid { grid-auto-rows: 1fr; }
  .calendar-toast-host { bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }

  .calendar-editor-backdrop[data-editor-presentation="SHEET"],
  .calendar-photo-confirm-backdrop[data-editor-presentation="SHEET"],
  .calendar-amount-backdrop[data-editor-presentation="SHEET"] {
    top: var(--calendar-editor-visual-top, 0px);
    right: 0;
    bottom: auto;
    left: 0;
    height: var(--calendar-editor-visual-height, 100dvh);
    align-items: flex-end;
    justify-content: center;
    padding: 0;
  }
  .calendar-editor-backdrop[data-editor-presentation="SHEET"] > .calendar-editor-dialog,
  .calendar-photo-confirm-backdrop[data-editor-presentation="SHEET"] > .calendar-photo-confirm-dialog,
  .calendar-amount-backdrop[data-editor-presentation="SHEET"] > .calendar-amount-dialog {
    width: min(100%, 640px);
    height: auto;
    max-height: calc(var(--calendar-editor-visual-height, 100dvh) - 12px);
    align-self: flex-end;
    border-width: 1px 0 0;
    border-radius: 18px 18px 0 0;
  }
  .calendar-editor-backdrop[data-editor-presentation="SHEET"] .calendar-editor-actions {
    padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  }
  .calendar-photo-confirm-backdrop[data-editor-presentation="SHEET"] > .calendar-photo-confirm-dialog,
  .calendar-amount-backdrop[data-editor-presentation="SHEET"] > .calendar-amount-dialog {
    padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  }
  /* Within thumb's reach: the two answers split the sheet's width. */
  .calendar-photo-confirm-backdrop[data-editor-presentation="SHEET"] .calendar-photo-confirm-actions button,
  .calendar-amount-backdrop[data-editor-presentation="SHEET"] .calendar-amount-actions button { flex: 1 1 0; }
}

/* Phones: seven cells of date + dots, each cell one target. */
@media (max-width: 600px) {
  .calendar-event-stack { display: none; }
  .calendar-mobile-event-count { display: none !important; }
  .calendar-holiday-label { display: none; }
  /* Keep the mobile row geometry independent of OS font metrics. Lunar text
     may wrap inside the target, but neither state may resize the grid row. */
  .calendar-date-cell {
    height: 52px;
    min-height: 52px;
    max-height: 52px;
    gap: 0;
    padding: 0;
  }
  .calendar-date-header {
    position: relative;
    min-height: 0;
    display: block;
  }
  .calendar-date-trigger {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    height: 52px;
    min-height: 52px;
    max-height: 52px;
    flex: 0 0 52px;
    display: grid;
    grid-template-rows: auto auto;
    justify-items: start;
    align-content: start;
    gap: 5px;
    justify-self: stretch;
    padding: 7px 0 6px 6px;
    border-radius: 0;
  }
  .calendar-date-number { font-size: 15px; line-height: 1.2; }
  .calendar-date-lunar { font-size: 9px; }
  .calendar-date-cell[data-lunar="true"] .calendar-date-trigger { padding-left: 4px; }
  .calendar-date-cell[data-lunar="true"] .calendar-date-line { column-gap: 1px; }
  .calendar-date-cell[data-lunar="true"] .calendar-weather-summary { top: auto; bottom: 4px; right: 3px; display: flex; flex-direction: column; align-items: flex-end; line-height: 0; }
  .calendar-date-cell[data-lunar="true"] .calendar-attention-marker { top: 3px; bottom: auto; right: 3px; }
  .calendar-record-dots { display: flex; gap: 3px; justify-content: flex-start; min-height: 5px; }
  /* Glyph in the top-right corner, the day's min/max on the cell's bottom
     line under it: the one row of a phone cell nothing else uses. */
  .calendar-weather-summary {
    position: absolute;
    top: 6px;
    right: 4px;
    bottom: 4px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
    margin: 0;
    pointer-events: none;
  }
  /* The legibility floor for the glyph on a phone. An emoji draws about 1.4em
     wide, so it is centred on its 15px box: what spills, spills evenly, and
     Saturday's glyph is not clipped by the grid's edge. */
  .calendar-weather-summary > .calendar-weather-icon {
    width: 15px;
    height: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    line-height: 15px;
  }
  /* "월 캘린더에 온도가 안 나온다": the month cell shows the day's min/max as
     one "18°/27°" line, the max in red as on a desk. Precipitation stays in
     the day panel; a ~44px cell has no second free line for it.
     flex, so each number's box is the 9px line and not the font's taller
     inline box, which would reach into the glyph above it. The tight
     spacing keeps "-12°/-3°" inside a 43px cell in wide fonts (DejaVu). */
  .calendar-weather-temperature {
    position: static;
    display: flex;
    justify-content: flex-end;
    width: auto;
    height: auto;
    font-size: 9px;
    font-weight: 800;
    line-height: 9px;
    letter-spacing: -0.05em;
    white-space: nowrap;
    margin-right: -2px;
  }
  .calendar-weather-temperature > span { position: static; transform: none; }
  .calendar-weather-temperature-separator { margin-inline: 0; font-size: 9px; }
  .calendar-weather-temperature-value { padding-top: 0; font-size: 9px; text-align: right; }
  .calendar-weather-precip { display: none; }
  .calendar-attention-marker { top: auto; bottom: 4px; right: 4px; }
  /* The bottom line now carries the temperature, so 확인 필요 sits at the
     end of the record-dot row instead. */
  .calendar-date-cell[data-weather="true"]:not([data-lunar="true"]) .calendar-attention-marker { top: 30px; bottom: auto; }
  /* A lunar month start (음9.1, 윤5.1) may fold under the date and push the
     record dots onto the bottom line: that one cell keeps the glyph alone,
     where it was. */
  .calendar-date-cell[data-lunar="true"]:has(.calendar-date-line[data-lunar-kind="month-start"]) .calendar-weather-summary { top: 35px; bottom: auto; }
  .calendar-date-cell[data-lunar="true"]:has(.calendar-date-line[data-lunar-kind="month-start"]) .calendar-weather-temperature { display: none; }
  .calendar-day-panel[data-presentation="FLOW"] .calendar-day-event.calendar-life-row {
    grid-template-columns: minmax(74px, max-content) minmax(0, 1fr) auto;
    gap: 6px;
  }
  .calendar-editor-body { padding: 14px 16px; }
  .calendar-editor-header { padding: 14px 16px 10px; }
  .calendar-editor-actions { padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 380px) {
  .calendar-day-event.calendar-life-row { grid-template-columns: minmax(70px, max-content) minmax(0, 1fr) auto; gap: 4px; }
  .calendar-add-actions .calendar-add-button { padding-inline: 10px; font-size: 13px; }
  /* The month name must stay whole on a folded phone; the button's own
     label still says it opens the year. */
  .calendar-title-button::after { display: none; }
  .calendar-toolbar .calendar-title-button { padding-inline: 2px; font-size: 15px; }
  /* Even without the caret, "9월 20–26일" and "2026년 9월" were cut to a
     few letters on a 320px phone: five 44px controls left the title ~37px.
     설정 moves down beside the view tabs so the title keeps the row. */
  .calendar-toolbar { grid-template-columns: 44px minmax(0, 1fr) 44px auto; }
  .calendar-toolbar > .calendar-settings-button { grid-column: -2; grid-row: 2; }
  .calendar-toolbar > .calendar-mode-tabs { grid-column: 1 / -2; }
  .calendar-date-cell[data-lunar="true"] .calendar-date-trigger { padding-left: 3px; }
  .calendar-date-cell[data-lunar="true"] .calendar-date-lunar { letter-spacing: -0.04em; }
  .calendar-date-cell[data-lunar="true"] .calendar-record-dots { gap: 2px; }
  .calendar-date-cell[data-lunar="true"] .calendar-weather-summary { right: 2px; }
}
@media (max-width: 350px) {
  /* ~43px cells: the date and its dots first; the forecast stays in the day
     panel, where there is room for it. */
  .calendar-weather-summary,
  .calendar-date-cell[data-lunar="true"] .calendar-weather-summary { display: none; }
}
@media (max-width: 357px) {
  .calendar-date-cell[data-lunar="true"] .calendar-date-line { flex-direction: column; align-items: flex-start; }
  /* A wrapped lunar label pushes the record dots onto the bottom line. */
  .calendar-date-cell[data-lunar="true"] .calendar-weather-temperature { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .calendar-week-day-group { scroll-behavior: auto; }
}



/* CALENDAR-HOME-REDESIGN-01 — confirmed desktop rail and responsive flow. */
body.chat-home-page .site-modal.site-calendar-chat-popup {
  width: min(1180px, calc(100vw - 32px));
  height: min(880px, calc(100dvh - 32px));
  max-height: calc(100dvh - 32px);
  padding: 26px 28px;
}
body.chat-home-page .site-calendar-chat-popup > .site-modal-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  padding: 0;
}
body.chat-home-page .site-calendar-chat-popup > .site-modal-header h2 {
  margin: 0;
  font-size: 30px;
  font-weight: 850;
  letter-spacing: -.045em;
}
body.chat-home-page .site-calendar-chat-popup > .site-modal-description {
  margin: 2px 0 18px;
  padding: 0;
  color: var(--lotbi-calendar-muted-ink);
  font-size: 15px;
}
.calendar-modal-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.calendar-primary-add-button,
.calendar-day-empty-add {
  min-height: 46px;
  padding: 10px 18px;
  border: 1px solid #0877ea;
  border-radius: 12px;
  background: #0877ea;
  color: #fff;
  cursor: pointer;
  font: inherit;
  font-size: 15px;
  font-weight: 800;
  white-space: nowrap;
}
.calendar-modal-actions .calendar-settings-button { min-height: 46px; border-radius: 12px; }
.calendar-primary-add-button:focus-visible,
.calendar-day-empty-add:focus-visible { outline: 3px solid rgba(8, 119, 234, .28); outline-offset: 2px; }

.calendar-product-shell { grid-template-rows: auto auto auto minmax(0, 1fr); gap: 10px; }
.calendar-product-shell > .calendar-toolbar { grid-row: 1; }
.calendar-product-shell > .calendar-status { grid-row: 2; }
.calendar-product-shell > .calendar-action-slot[data-calendar-action-bar="top"] { grid-row: 3; }
.calendar-product-shell > .calendar-viewport { grid-row: 4; }
.calendar-toolbar {
  grid-template-columns: minmax(96px, auto) minmax(220px, 1fr) minmax(96px, auto) minmax(82px, auto);
  grid-template-rows: 50px 48px;
  gap: 8px 10px;
}
.calendar-toolbar > .calendar-nav-button[data-calendar-navigation="previous"] { grid-column: 1; grid-row: 1; }
.calendar-toolbar > .calendar-title-button { grid-column: 2; grid-row: 1; }
.calendar-toolbar > .calendar-nav-button[data-calendar-navigation="next"] { grid-column: 3; grid-row: 1; }
.calendar-toolbar > .calendar-today-button { grid-column: 4; grid-row: 1; }
.calendar-toolbar > .calendar-mode-tabs {
  grid-column: 1 / -1;
  grid-row: 2;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--lotbi-calendar-grid-line);
  border-radius: 12px;
}
.calendar-toolbar .calendar-mode-tab { min-height: 46px; border: 0; border-radius: 0; box-shadow: none; }
.calendar-toolbar .calendar-mode-tab[aria-selected="true"] { background: #0877ea; box-shadow: none; }
.calendar-status { grid-row: 2; }
.calendar-status:empty + .calendar-viewport,
.calendar-viewport { grid-row: 2 / 3; }
.calendar-amount-slot { display: none !important; }

.calendar-month-layout {
  height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 37%);
  gap: 14px;
}
@media (min-width: 901px) {
  .calendar-month-layout[data-day-detail="SIDE"][data-detail-open="true"] {
    grid-template-columns: minmax(0, 1fr) minmax(380px, 37%);
    gap: 14px;
  }
}
.calendar-month { min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.calendar-month-grid { min-height: 0; grid-auto-rows: minmax(0, 1fr); }
.calendar-date-cell { min-height: 0; padding: 4px 5px; }
.calendar-date-header { min-height: 30px; }
.calendar-date-trigger { min-width: 30px; min-height: 30px; place-items: start; padding: 4px; }
.calendar-date-number { font-size: 15px; }
.calendar-weather-summary { grid-template-columns: auto; justify-items: end; gap: 0; }
.calendar-weather-summary > .calendar-weather-icon { width: 18px; height: 18px; font-size: 16px; line-height: 18px; }
.calendar-month-grid .calendar-weather-temperature { width: auto; height: auto; margin-right: 0; font-size: 9px; font-weight: 750; letter-spacing: -.14em; white-space: nowrap; transform: translateX(2px); }
.calendar-month-grid .calendar-date-cell .calendar-weather-temperature { position: static; top: auto; right: auto; }
.calendar-month-grid .calendar-date-cell[data-lunar="true"] .calendar-date-header { min-height: 43px; }
.calendar-month-grid .calendar-date-cell[data-lunar="true"] .calendar-date-line { flex-direction: column; align-items: flex-start; }
.calendar-month-grid .calendar-date-cell[data-lunar="true"] .calendar-date-lunar { line-height: 8px; transform: translateY(-2px); }
.calendar-month-grid .calendar-date-cell[data-lunar="true"] .calendar-weather-temperature { transform: translate(2px, 12px); }
@media (min-width: 901px) {
  @container calendar-month (min-width: 520px) {
    .calendar-month-grid .calendar-date-cell[data-lunar="true"] .calendar-date-header { min-height: 30px; }
    .calendar-month-grid .calendar-date-cell[data-lunar="true"] .calendar-date-line { flex-direction: row; align-items: center; }
    .calendar-month-grid .calendar-date-cell[data-lunar="true"] .calendar-date-lunar { line-height: normal; transform: none; }
    .calendar-month-grid .calendar-date-cell[data-lunar="true"] .calendar-weather-temperature { transform: translateX(2px); }
  }
}
.calendar-month-grid .calendar-weather-temperature > span { position: static; transform: none; }
.calendar-month-grid .calendar-weather-temperature-separator { margin-inline: 1px; font-size: 9px; }
.calendar-month-grid .calendar-weather-temperature-value { padding-top: 0; }
.calendar-event-stack { gap: 0; }
.calendar-month-grid .calendar-event-chip { min-height: 12px; padding: 0 3px; font-size: 9px; line-height: 12px; }
.calendar-month-grid .calendar-event-time { font-size: 8px; }
.calendar-month-grid .calendar-event-overflow { min-height: 12px; margin: 0; padding: 0 5px; font-size: 9px; line-height: 12px; }
.calendar-cell-day-amount {
  min-width: 0;
  overflow: hidden;
  color: var(--lotbi-text-primary, var(--text, #212121));
  font-size: 10px;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.calendar-month-grid .calendar-date-cell[data-selected="true"] { box-shadow: inset 0 0 0 2px #0877ea; }

.calendar-day-panel[data-presentation="SIDE"] {
  position: relative;
  top: auto;
  height: 100%;
  max-height: none;
  overflow: hidden;
  padding: 14px;
  border-color: var(--lotbi-calendar-grid-line);
  background: var(--lotbi-surface-primary, #fff);
  box-shadow: none;
}
.calendar-day-panel[data-presentation="SIDE"] .calendar-day-panel-head { flex: 0 0 auto; }
.calendar-day-panel[data-presentation="SIDE"] .calendar-day-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-right: 2px; }
.calendar-day-panel-head { align-items: center; }
.calendar-day-heading { flex-basis: 100%; font-size: 22px; font-weight: 850; }
.calendar-day-today { margin-left: 6px; margin-right: 0; border: 0; background: #0877ea; color: #fff; vertical-align: 2px; }
.calendar-day-submeta { display: flex; align-items: center; gap: 8px; color: var(--lotbi-calendar-muted-ink); font-size: 12px; }
.calendar-day-lunar { color: inherit; }
.calendar-day-weather-card {
  min-height: 68px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 13px;
  background: var(--lotbi-calendar-week-selected-surface, #f5f8fc);
}
.calendar-day-weather-card-icon { width: 42px; height: 42px; font-size: 36px; line-height: 42px; }
.calendar-day-weather-card-copy { min-width: 0; display: grid; gap: 4px; }
.calendar-day-weather-location,
.calendar-day-weather-unavailable { margin: 0; color: var(--lotbi-calendar-muted-ink); font-size: 12px; line-height: 1.45; }
.calendar-day-weather-readings { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; font-variant-numeric: tabular-nums; }
.calendar-day-weather-readings strong { font-size: 20px; }
.calendar-day-weather-readings span { color: var(--lotbi-calendar-muted-ink); font-size: 12px; }
.calendar-day-timeline { min-width: 0; display: grid; }
.calendar-day-timeline > h4 { margin: 4px 0 0; padding-bottom: 5px; border-bottom: 1px solid var(--lotbi-calendar-grid-line); font-size: 14px; }
.calendar-day-panel[data-presentation="SIDE"] .calendar-day-event.calendar-life-row { grid-template-columns: minmax(68px, max-content) minmax(0, 1fr) auto; gap: 6px; padding: 7px 2px; }
.calendar-day-panel[data-presentation="SIDE"] .calendar-day-event.calendar-life-row time { font-size: 12px; }
.calendar-day-panel[data-presentation="SIDE"] .calendar-day-event.calendar-life-row .calendar-life-title { -webkit-line-clamp: 2; font-size: 13px; }
.calendar-day-panel .calendar-day-event.calendar-life-row .calendar-life-copy { padding-inline-start: 10px; }
.calendar-life-category { justify-self: start; padding: 2px 7px; border-radius: 999px; background: var(--lotbi-calendar-week-selected-surface); color: var(--lotbi-calendar-muted-ink); font-size: 10px; font-weight: 750; }
.calendar-day-panel[data-presentation="SIDE"] .calendar-life-amount { font-size: 12px; }
.calendar-day-empty { min-height: 210px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 18px; border-radius: 13px; background: var(--lotbi-calendar-week-selected-surface); text-align: center; }
.calendar-day-empty .calendar-day-empty-icon { width: 52px; height: 52px; padding: 12px; border-radius: 50%; background: rgba(8, 119, 234, .1); color: #0877ea; }
.calendar-day-empty strong { font-size: 17px; }
.calendar-day-empty p { max-width: 260px; margin: 0; color: var(--lotbi-calendar-muted-ink); font-size: 13px; line-height: 1.6; }
.calendar-day-empty-add { width: 100%; }
.calendar-day-expense-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 8px;
  padding: 13px 14px;
  border: 1px solid var(--lotbi-calendar-grid-line);
  border-radius: 13px;
}
.calendar-day-expense-label { font-size: 13px; font-weight: 750; }
.calendar-day-expense-value { font-size: 20px; font-weight: 850; font-variant-numeric: tabular-nums; }
.calendar-day-panel .calendar-amount-overview { margin-top: 0; padding: 12px 14px; border: 1px solid var(--lotbi-calendar-grid-line); border-radius: 13px; }
.calendar-day-panel .calendar-add-actions { display: none; }
.calendar-weather-credit { font-size: 9px; }

body[data-site-theme="dark"] .calendar-day-panel[data-presentation="SIDE"],
body[data-site-theme="dark"] .calendar-day-weather-card,
body[data-site-theme="dark"] .calendar-day-empty { background: #171c25; }

/* From the tablet edge through the narrow desktop rail, the 9px forecast line
   begins immediately below the 18px glyph. Linux's taller default line box
   let a two-digit date reach into that line even though the visible glyphs
   were separate (Gate returns at 610px and 1024px). Tighten only the date line
   box; its font size and approved position stay unchanged, while the compact
   phone layout keeps its deliberately roomier line height. */
@media (min-width: 601px) {
  .calendar-month-grid .calendar-date-number { line-height: 1; }
}

@media (max-width: 900px) {
  body.chat-home-page .site-modal.site-calendar-chat-popup { width: calc(100vw - 16px); height: calc(100dvh - 16px); max-height: calc(100dvh - 16px); padding: 14px; }
  body.chat-home-page .site-calendar-chat-popup > .site-modal-header { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
  body.chat-home-page .site-calendar-chat-popup > .site-modal-header h2 { font-size: 24px; }
  body.chat-home-page .site-calendar-chat-popup > .site-modal-header .site-modal-close { grid-column: 2; grid-row: 1; }
  .calendar-modal-actions { grid-column: 1 / -1; grid-row: 2; }
  .calendar-modal-actions .calendar-primary-add-button { flex: 1 1 auto; }
  body.chat-home-page .site-calendar-chat-popup > .site-modal-description { margin: 4px 0 12px; font-size: 13px; }
  body.chat-home-page .site-calendar-chat-popup > .site-modal-content[data-calendar-manager-view="month"] { overflow-y: auto; }
  .calendar-product-shell { height: auto; display: grid; grid-template-rows: auto auto auto auto; }
  .calendar-toolbar { grid-template-columns: 64px minmax(0, 1fr) 64px 56px; grid-template-rows: 44px 44px; gap: 6px; }
  .calendar-toolbar .calendar-nav-button,
  .calendar-toolbar .calendar-title-button,
  .calendar-toolbar .calendar-today-button,
  .calendar-toolbar .calendar-mode-tab { min-height: 44px; padding-inline: 6px; font-size: 12px; }
  .calendar-month-layout { height: auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .calendar-month { min-height: 520px; }
  .calendar-date-cell { height: auto; min-height: 78px; max-height: none; gap: 1px; padding: 2px; }
  .calendar-date-header { min-height: 29px; }
  .calendar-date-trigger { width: auto; height: auto; min-width: 29px; min-height: 29px; max-height: none; padding: 3px; }
  .calendar-month-grid .calendar-weather-summary,
  .calendar-month-grid .calendar-date-cell[data-lunar="true"] .calendar-weather-summary {
    top: 3px;
    right: 3px;
    bottom: auto;
    height: 27px;
  }
  .calendar-month-grid .calendar-date-cell .calendar-weather-temperature {
    position: static;
    top: auto;
    right: auto;
  }
  .calendar-date-cell[data-lunar="true"] .calendar-date-header { min-height: 43px; }
  .calendar-date-cell[data-lunar="true"] .calendar-date-line { flex-direction: column; align-items: flex-start; }
  .calendar-date-cell[data-lunar="true"] .calendar-date-lunar { line-height: 8px; transform: translateY(-2px); }
  .calendar-date-cell[data-lunar="true"] .calendar-weather-temperature { transform: translate(2px, 12px); }
  .calendar-month-grid .calendar-record-dots { display: none; }
  .calendar-month-grid .calendar-date-cell[data-weather="true"] .calendar-attention-marker {
    top: 5px;
    right: auto;
    bottom: auto;
    left: 50%;
    width: 6px;
    height: 6px;
    margin: 0;
    border-radius: 999px;
    background: #a56720;
    font-size: 0;
    transform: translateX(-50%);
  }
  .calendar-event-stack { display: grid; }
  .calendar-event-chip { min-height: 12px; padding: 0 2px; font-size: 9px; line-height: 12px; }
  .calendar-event-time { display: none; }
  .calendar-event-overflow { min-height: 12px; padding-block: 0; font-size: 9px; line-height: 12px; }
  .calendar-cell-day-amount { display: none; }
  .calendar-day-panel[data-presentation="FLOW"] { margin: 0; padding: 14px; border: 1px solid var(--lotbi-calendar-grid-line); border-radius: 14px; background: var(--lotbi-surface-primary, #fff); }
  .calendar-day-panel[data-presentation="FLOW"] .calendar-day-body { overflow: visible; }
  .calendar-day-heading { font-size: 20px; }
  .calendar-day-panel[data-presentation="FLOW"] .calendar-day-event.calendar-life-row { grid-template-columns: minmax(74px, max-content) minmax(0, 1fr) auto; gap: 6px; }
  .calendar-day-panel[data-presentation="FLOW"] .calendar-add-actions { display: none; }
}

@media (max-width: 420px) {
  body.chat-home-page .site-modal.site-calendar-chat-popup { padding: 10px; }
  .calendar-modal-actions { gap: 6px; }
  .calendar-primary-add-button { min-height: 44px; padding-inline: 12px; font-size: 14px; }
  .calendar-modal-actions .calendar-settings-button { min-width: 58px; min-height: 44px; }
  .calendar-toolbar { grid-template-columns: 52px minmax(0, 1fr) 52px 48px; gap: 4px; }
  .calendar-toolbar .calendar-title-button { font-size: 13px; }
  .calendar-date-cell[data-lunar="true"] .calendar-date-header { min-height: 43px; }
  .calendar-date-cell[data-lunar="true"] .calendar-date-line { flex-direction: column; align-items: flex-start; }
  .calendar-date-cell[data-lunar="true"] .calendar-date-lunar { line-height: 8px; transform: translateY(-2px); }
  .calendar-date-cell[data-lunar="true"] .calendar-weather-temperature { transform: translate(2px, 12px); }
  .calendar-month { min-height: 500px; }
  .calendar-day-weather-card { padding: 10px; }
  .calendar-day-weather-card-icon { width: 34px; height: 34px; font-size: 30px; line-height: 34px; }
  .calendar-day-expense-card { grid-template-columns: minmax(0, 1fr); }
}

/* CALENDAR-APPROVED-DESIGN-FINAL-03
   네 플랫폼 확정 시안의 계층과 간격을 Site에도 동일하게 적용한다. */
@media (min-width: 901px) {
  .calendar-day-panel[data-presentation='SIDE'] {
    height: auto;
    max-height: min(620px, calc(100dvh - 180px));
  }
  .calendar-product-shell[data-calendar-mode='week'][data-amount-visible='true'] > .calendar-viewport {
    min-height: 0;
    overflow: hidden;
  }
  .calendar-product-shell[data-calendar-mode='week'] .calendar-week-agenda,
  .calendar-product-shell[data-calendar-mode='week'] .calendar-week-grid {
    height: 100%;
    min-height: 0;
    max-height: 100%;
  }
  .consumer-workspace[data-workspace='calendar'] .calendar-product-shell[data-calendar-mode='week'] > .calendar-viewport {
    padding-bottom: 190px;
  }
  .consumer-workspace[data-workspace='calendar'] .calendar-product-shell[data-calendar-mode='week'] > .calendar-amount-slot {
    position: fixed;
    right: 24px;
    bottom: 16px;
    left: 244px;
    max-height: 176px;
    overflow: auto;
    padding: 6px;
    border: 1px solid var(--lotbi-calendar-grid-line);
    border-radius: 16px;
    box-shadow: 0 -8px 24px rgba(15, 23, 42, .18);
  }
}
.consumer-workspace[data-workspace='calendar'] .calendar-product-shell {
  gap: 14px;
}
.calendar-product-shell[data-calendar-mode='week'] {
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
}
.calendar-product-shell[data-calendar-mode='week'][data-amount-visible='true'] > .calendar-action-slot[data-calendar-action-bar='top'] {
  grid-row: 3;
}
.calendar-product-shell[data-calendar-mode='week'][data-amount-visible='true'] > .calendar-viewport {
  grid-row: 4;
}
.calendar-product-shell[data-calendar-mode='week'] > .calendar-amount-slot {
  grid-row: 5;
  display: block !important;
  position: relative;
  z-index: 12;
  min-width: 0;
  padding-top: 6px;
  border-top: 1px solid var(--lotbi-calendar-grid-line);
  background: var(--lotbi-surface-primary, #fff);
  box-shadow: 0 -8px 18px rgba(15, 23, 42, .08);
}
.calendar-product-shell[data-calendar-mode='week'] .calendar-amount-overview[data-calendar-fixed-expense='week'] {
  margin: 0;
  padding: 9px 12px;
  border-radius: 12px;
}
.calendar-product-shell[data-calendar-mode='week'] .calendar-amount-overview[data-calendar-fixed-expense='week'] .calendar-amount-line-amount {
  font-size: 20px;
}
.calendar-product-shell[data-calendar-mode='week'] .calendar-amount-overview[data-calendar-fixed-expense='week'] .calendar-amount-categories {
  margin-top: 5px;
  padding-top: 5px;
}
.calendar-product-shell[data-calendar-mode='week'] .calendar-amount-overview[data-calendar-fixed-expense='week'] .calendar-amount-category {
  padding-block: 2px;
}
.consumer-workspace[data-workspace='calendar'] .calendar-toolbar {
  grid-template-columns: minmax(72px, .7fr) minmax(180px, 4fr) minmax(72px, .7fr) minmax(72px, .8fr);
  grid-template-rows: 58px 52px;
  gap: 10px;
}
.consumer-workspace[data-workspace='calendar'] .calendar-toolbar > .calendar-mode-tabs {
  grid-row: 1;
  grid-column: 1 / -1;
  border: 0;
  gap: 4px;
  background: var(--lotbi-calendar-week-selected-surface, #f1f5fa);
}
.consumer-workspace[data-workspace='calendar'] .calendar-toolbar > .calendar-nav-button[data-calendar-navigation='previous'] { grid-column: 1; grid-row: 2; }
.consumer-workspace[data-workspace='calendar'] .calendar-toolbar > .calendar-title-button { grid-column: 2; grid-row: 2; }
.consumer-workspace[data-workspace='calendar'] .calendar-toolbar > .calendar-nav-button[data-calendar-navigation='next'] { grid-column: 4; grid-row: 2; }
.consumer-workspace[data-workspace='calendar'] .calendar-toolbar > .calendar-today-button { grid-column: 3; grid-row: 2; }
.consumer-workspace[data-workspace='calendar'] .calendar-toolbar .calendar-mode-tab {
  min-height: 52px;
  border-radius: 11px;
  font-size: 15px;
  font-weight: 850;
}
.consumer-workspace[data-workspace='calendar'] .calendar-toolbar .calendar-mode-tab[aria-selected='true'] {
  background: #0877ea;
  color: #fff;
}
.consumer-workspace[data-workspace='calendar'] .calendar-title-button {
  border: 0;
  background: transparent;
  box-shadow: none;
  font-size: clamp(19px, 2vw, 26px);
  font-weight: 900;
}
.consumer-workspace[data-workspace='calendar'] .calendar-nav-button {
  border: 0;
  background: transparent;
  box-shadow: none;
  font-size: 22px;
}
.consumer-workspace[data-workspace='calendar'] .calendar-today-button {
  border-color: var(--lotbi-calendar-grid-line);
  background: var(--lotbi-surface-primary, #fff);
  font-weight: 800;
}
.consumer-workspace[data-workspace='calendar'] .calendar-month {
  border-radius: 16px;
  background: var(--lotbi-surface-primary, #fff);
}
.consumer-workspace[data-workspace='calendar'] .calendar-weekdays {
  font-size: 14px;
  font-weight: 900;
}
.consumer-workspace[data-workspace='calendar'] .calendar-weekdays span { padding: 9px 2px 11px; }
.consumer-workspace[data-workspace='calendar'] .calendar-date-cell {
  min-height: 72px;
  padding: 6px 7px;
}
.consumer-workspace[data-workspace='calendar'] .calendar-date-number {
  font-size: 18px;
  font-weight: 900;
}
.consumer-workspace[data-workspace='calendar'] .calendar-month-grid .calendar-event-chip {
  min-height: 20px;
  border-radius: 6px;
  font-size: 11px;
  line-height: 20px;
}
.consumer-workspace[data-workspace='calendar'] .calendar-month-grid .calendar-event-overflow {
  min-height: 20px;
  font-size: 11px;
  font-weight: 850;
  line-height: 20px;
}
.consumer-workspace[data-workspace='calendar'] .calendar-year-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.consumer-workspace[data-workspace='calendar'] .calendar-year-month {
  min-height: 190px;
  padding: 14px;
  border-color: var(--lotbi-calendar-grid-line);
  border-radius: 15px;
  background: var(--lotbi-surface-primary, #fff);
  text-align: center;
}
.consumer-workspace[data-workspace='calendar'] .calendar-year-month > strong {
  margin-bottom: 10px;
  font-size: 18px;
  font-weight: 900;
}
.consumer-workspace[data-workspace='calendar'] .calendar-mini-weekdays { font-size: 10px; font-weight: 800; }
.consumer-workspace[data-workspace='calendar'] .calendar-mini-grid span { min-height: 20px; font-size: 11px; }
.consumer-workspace[data-workspace='calendar'] .calendar-year-event-count { color: var(--lotbi-calendar-muted-ink); }
.consumer-workspace[data-workspace='calendar'] .calendar-amount-overview {
  margin-top: 14px;
  padding: 16px 18px;
  border: 1px solid var(--lotbi-calendar-grid-line);
  border-radius: 16px;
  background: var(--lotbi-calendar-week-selected-surface, #f5f8fc);
}
.consumer-workspace[data-workspace='calendar'] .calendar-amount-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.consumer-workspace[data-workspace='calendar'] .calendar-amount-head .calendar-amount-line {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: 0;
}
.consumer-workspace[data-workspace='calendar'] .calendar-amount-line-label { font-size: 15px; font-weight: 800; }
.consumer-workspace[data-workspace='calendar'] .calendar-amount-line-amount { font-size: 30px; font-weight: 950; }
.consumer-workspace[data-workspace='calendar'] .calendar-amount-line-chevron { display: none; }
.consumer-workspace[data-workspace='calendar'] .calendar-amount-image-button {
  min-height: 48px;
  padding: 10px 16px;
  border: 1px solid var(--lotbi-calendar-grid-line);
  border-radius: 12px;
  background: var(--lotbi-surface-primary, #fff);
  color: var(--lotbi-text-primary, var(--text, #212121));
  cursor: pointer;
  font: inherit;
  font-weight: 850;
  white-space: nowrap;
}
.consumer-workspace[data-workspace='calendar'] .calendar-amount-categories {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--lotbi-calendar-grid-line);
}
.consumer-workspace[data-workspace='calendar'] .calendar-amount-category {
  min-width: 0;
  padding: 4px 8px;
  text-align: center;
}
.consumer-workspace[data-workspace='calendar'] .calendar-amount-category dt { font-size: 12px; font-weight: 750; }
.consumer-workspace[data-workspace='calendar'] .calendar-amount-category dd { margin-top: 4px; font-size: 15px; font-weight: 900; }
.consumer-workspace[data-workspace='calendar'] .calendar-day-detail-backdrop > .calendar-day-panel {
  border-radius: 24px 24px 0 0;
}
.consumer-workspace[data-workspace='calendar'] .calendar-day-heading {
  font-size: 26px;
  font-weight: 950;
}
.consumer-workspace[data-workspace='calendar'] .calendar-day-weather-card {
  min-height: 92px;
  padding: 16px;
  border: 1px solid var(--lotbi-calendar-grid-line);
  border-radius: 16px;
}
.consumer-workspace[data-workspace='calendar'] .calendar-day-weather-readings strong { font-size: 28px; }
.consumer-workspace[data-workspace='calendar'] .calendar-day-event.calendar-life-row {
  min-height: 52px;
  border-bottom: 1px solid var(--lotbi-calendar-grid-line);
  border-radius: 0;
}
.consumer-workspace[data-workspace='calendar'] .calendar-day-expense-card {
  padding: 18px;
  border-radius: 16px;
  background: var(--lotbi-calendar-week-selected-surface, #f5f8fc);
}
.consumer-workspace[data-workspace='calendar'] .calendar-day-expense-value { font-size: 26px; font-weight: 950; }
.consumer-workspace[data-workspace='calendar'] .calendar-day-empty-add {
  min-height: 54px;
  font-size: 16px;
}
.consumer-workspace[data-workspace='calendar'] .calendar-editor-dialog {
  border-radius: 24px 24px 0 0;
}
.consumer-workspace[data-workspace='calendar'] .calendar-editor-dialog h3 { font-size: 24px; font-weight: 950; }
.consumer-workspace[data-workspace='calendar'] .calendar-editor-title,
.consumer-workspace[data-workspace='calendar'] .calendar-editor-date,
.consumer-workspace[data-workspace='calendar'] .calendar-editor-time,
.consumer-workspace[data-workspace='calendar'] .calendar-editor-amount,
.consumer-workspace[data-workspace='calendar'] .calendar-editor-category,
.consumer-workspace[data-workspace='calendar'] .calendar-editor-memo {
  min-height: 52px;
  border-radius: 11px;
  font-size: 15px;
}
.consumer-workspace[data-workspace='calendar'] .calendar-editor-save {
  background: #0877ea !important;
  border-color: #0877ea !important;
  color: #fff !important;
}

@media (max-width: 900px) {
  .consumer-workspace[data-workspace='calendar'] .calendar-toolbar {
    grid-template-columns: 48px minmax(0, 1fr) 60px 48px;
  }
  .consumer-workspace[data-workspace='calendar'] .calendar-title-button { font-size: 18px; }
  .consumer-workspace[data-workspace='calendar'] .calendar-date-cell { min-height: 86px; padding: 3px; }
  .consumer-workspace[data-workspace='calendar'] .calendar-date-number { font-size: 15px; }
  .consumer-workspace[data-workspace='calendar'] .calendar-year-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .consumer-workspace[data-workspace='calendar'] .calendar-year-month { min-height: 154px; padding: 8px; }
  .consumer-workspace[data-workspace='calendar'] .calendar-year-month > strong { font-size: 16px; }
  .consumer-workspace[data-workspace='calendar'] .calendar-mini-grid span { min-height: 16px; font-size: 9px; }
  .consumer-workspace[data-workspace='calendar'] .calendar-amount-overview { padding: 14px; }
  .consumer-workspace[data-workspace='calendar'] .calendar-amount-line-amount { font-size: 24px; }
  .consumer-workspace[data-workspace='calendar'] .calendar-amount-image-button { padding-inline: 10px; font-size: 12px; }
  .consumer-workspace[data-workspace='calendar'] .calendar-amount-categories { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .calendar-product-shell[data-calendar-mode='week'] > .calendar-viewport {
    padding-bottom: 220px;
  }
  .calendar-product-shell[data-calendar-mode='week'] > .calendar-amount-slot {
    position: fixed;
    right: 8px;
    bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    left: 8px;
    max-height: min(210px, 42dvh);
    overflow: auto;
    padding: 6px;
    border: 1px solid var(--lotbi-calendar-grid-line);
    border-radius: 16px;
    box-shadow: 0 -8px 24px rgba(15, 23, 42, .18);
  }
  .calendar-product-shell[data-calendar-mode='week'] > .calendar-amount-slot .calendar-amount-overview[data-calendar-fixed-expense='week'] {
    padding: 8px 10px;
  }
  .calendar-product-shell[data-calendar-mode='week'] > .calendar-amount-slot .calendar-amount-overview[data-calendar-fixed-expense='week'] .calendar-amount-head {
    gap: 8px;
  }
  .calendar-product-shell[data-calendar-mode='week'] > .calendar-amount-slot .calendar-amount-overview[data-calendar-fixed-expense='week'] .calendar-amount-image-button {
    min-height: 38px;
    padding: 6px 9px;
  }
  .calendar-product-shell[data-calendar-mode='week'] > .calendar-amount-slot .calendar-amount-overview[data-calendar-fixed-expense='week'] .calendar-amount-categories {
    margin-top: 5px;
    padding-top: 5px;
  }
  .calendar-product-shell[data-calendar-mode='week'] > .calendar-amount-slot .calendar-amount-overview[data-calendar-fixed-expense='week'] .calendar-amount-category {
    flex-direction: row;
    justify-content: center;
    gap: 1px;
    padding: 1px 3px;
  }
  .calendar-product-shell[data-calendar-mode='week'] > .calendar-amount-slot .calendar-amount-overview[data-calendar-fixed-expense='week'] .calendar-amount-category dt {
    font-size: 11px;
  }
  .calendar-product-shell[data-calendar-mode='week'] > .calendar-amount-slot .calendar-amount-overview[data-calendar-fixed-expense='week'] .calendar-amount-category dd {
    margin-top: 0;
    font-size: 11px;
  }
}

@media (max-width: 420px) {
  .calendar-toolbar .calendar-nav-button {
    min-width: 0;
    padding-inline: 0;
    font-size: 0;
  }
  .consumer-workspace[data-workspace='calendar'] .calendar-toolbar { grid-template-rows: 48px 50px; gap: 6px; }
  .consumer-workspace[data-workspace='calendar'] .calendar-toolbar .calendar-mode-tab { min-height: 48px; font-size: 13px; }
  .consumer-workspace[data-workspace='calendar'] .calendar-date-cell { min-height: 78px; }
  .consumer-workspace[data-workspace='calendar'] .calendar-month-grid .calendar-event-chip,
  .consumer-workspace[data-workspace='calendar'] .calendar-month-grid .calendar-event-overflow { font-size: 9px; }
  .consumer-workspace[data-workspace='calendar'] .calendar-amount-head { align-items: flex-end; }
}

/* The redesign's tablet rule above restores bounded titled rows up to 900px.
   On phones the date button also keeps its schedule-presence dots. Move those
   below the forecast band so a holiday surface never masks the schedule. */
@media (max-width: 600px) {
  .calendar-month-grid .calendar-record-dots {
    position: absolute;
    left: 6px;
    top: 58px;
    display: flex;
  }
}



/* CALENDAR-APPROVED-FULLPAGE-OVERLAY-02
   The Calendar is a primary workspace beside LOTBI navigation. The month never
   gives up columns for a selected day; desktop overlays the right edge and
   touch widths use the same bottom sheet contract. */
body.chat-home-page .consumer-workspace[data-workspace='calendar'] {
  padding: 32px clamp(20px, 3vw, 48px);
}
body.chat-home-page .consumer-workspace[data-workspace='calendar'] > .site-modal.site-calendar-page {
  width: min(100%, 1280px);
  max-width: 1280px;
  height: auto;
  max-height: none;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
body.chat-home-page .consumer-workspace[data-workspace='calendar'] .site-calendar-page > .site-modal-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 0;
}
body.chat-home-page .consumer-workspace[data-workspace='calendar'] .site-calendar-page > .site-modal-header .site-modal-close {
  grid-column: 1;
  width: 44px;
  height: 44px;
  margin: 0;
}
body.chat-home-page .consumer-workspace[data-workspace='calendar'] .site-calendar-page > .site-modal-header h2 {
  grid-column: 2;
  font-size: 30px;
  font-weight: 850;
}
body.chat-home-page .consumer-workspace[data-workspace='calendar'] .calendar-modal-actions {
  grid-column: 3;
  display: flex;
}
body.chat-home-page .consumer-workspace[data-workspace='calendar'] .site-calendar-page > .site-modal-description {
  margin: 2px 0 18px;
  padding: 0;
}
body.chat-home-page .consumer-workspace[data-workspace='calendar'] .site-calendar-page > .site-modal-content {
  padding: 0;
  overflow: visible;
}
.consumer-workspace[data-workspace='calendar'] .calendar-mode-tabs {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.consumer-workspace[data-workspace='calendar'] .calendar-month-layout {
  height: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}
.consumer-workspace[data-workspace='calendar'] .calendar-month {
  position: relative;
  min-height: clamp(390px, calc(100dvh - 430px), 520px);
  height: auto;
  overflow: hidden;
}
.consumer-workspace[data-workspace='calendar'] .calendar-month-grid {
  min-height: clamp(350px, calc(100dvh - 470px), 480px);
}
.consumer-workspace[data-workspace='calendar'] .calendar-month > .calendar-day-detail-backdrop {
  position: absolute;
  inset: 0;
  z-index: 12;
  display: grid;
  place-items: stretch end;
  padding: 8px;
  background: linear-gradient(90deg, transparent 0 55%, rgba(15, 23, 42, .12) 55% 100%);
}
.consumer-workspace[data-workspace='calendar'] .calendar-month > .calendar-day-detail-backdrop > .calendar-day-panel[data-presentation='MODAL'] {
  width: clamp(340px, 42%, 470px);
  max-height: 100%;
  border-radius: 16px;
  background: var(--lotbi-surface-primary, #fff);
  box-shadow: 0 18px 48px rgba(15, 23, 42, .24);
}
.consumer-workspace[data-workspace='calendar'] .calendar-month > .calendar-day-detail-backdrop > .calendar-day-panel[data-presentation='MODAL'] .calendar-day-body {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.consumer-workspace[data-workspace='calendar'] .calendar-month-layout > .calendar-amount-overview,
.consumer-workspace[data-workspace='calendar'] .calendar-year-view > .calendar-amount-overview {
  margin-top: 0;
}
.consumer-workspace[data-workspace='calendar'] .calendar-year-view {
  display: grid;
  gap: 14px;
}

@media (max-width: 900px) {
  body.chat-home-page .consumer-workspace[data-workspace='calendar'] {
    padding: 14px 12px 0;
  }
  body.chat-home-page .consumer-workspace[data-workspace='calendar'] .site-calendar-page > .site-modal-header {
    grid-template-columns: 44px minmax(0, 1fr) auto;
    gap: 8px;
  }
  body.chat-home-page .consumer-workspace[data-workspace='calendar'] .site-calendar-page > .site-modal-header h2 {
    font-size: 24px;
  }
  body.chat-home-page .consumer-workspace[data-workspace='calendar'] .calendar-modal-actions {
    grid-column: 1 / -1;
    grid-row: 2;
  }
  body.chat-home-page .consumer-workspace[data-workspace='calendar'] .calendar-modal-actions .calendar-primary-add-button {
    flex: 1 1 auto;
  }
  body.chat-home-page .consumer-workspace[data-workspace='calendar'] .site-calendar-page > .site-modal-description {
    margin: 4px 0 12px;
    font-size: 13px;
  }
  .consumer-workspace[data-workspace='calendar'] .calendar-month {
    min-height: 500px;
    overflow: visible;
  }
  .consumer-workspace[data-workspace='calendar'] .calendar-month-grid {
    min-height: 500px;
  }
  .consumer-workspace[data-workspace='calendar'] .calendar-month > .calendar-day-detail-backdrop {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: grid;
    place-items: end center;
    padding: 0;
    background: rgba(15, 23, 42, .42);
  }
  .consumer-workspace[data-workspace='calendar'] .calendar-month > .calendar-day-detail-backdrop > .calendar-day-panel[data-presentation='SHEET'] {
    width: min(100%, 560px);
    max-height: min(82dvh, var(--calendar-day-visual-height, 82dvh));
  }
}

@media (max-width: 420px) {
  body.chat-home-page .consumer-workspace[data-workspace='calendar'] {
    padding-inline: 8px;
  }
  body.chat-home-page .consumer-workspace[data-workspace='calendar'] .site-calendar-page > .site-modal-header h2 {
    font-size: 22px;
  }
  .consumer-workspace[data-workspace='calendar'] .calendar-mode-tab {
    font-size: 12px;
  }
}

/* CALENDAR-DESIGN-04
   소유자 확정 시안 04(2026-10-14). 캘린더 작업 공간 전체를 한 기준으로 그린다:
   흰 카드 · LOTBI 파랑 대표 버튼 하나 · 분류 색 하나(일정 카드 = 합계표 = 입력 칩).
   색은 변수로만 쓰고 다크 모드는 변수만 바꾼다. */
body {
  --c4-blue: #0877ea;
  --c4-blue-ink: #0a5fbd;
  --c4-blue-soft: #eaf3fe;
  --c4-blue-line: #a9c8ee;
  --c4-page: #f4f6f9;
  --c4-card: #ffffff;
  --c4-soft: #f7f9fc;
  --c4-chip: #f1f4f8;
  --c4-line: #e3e8ef;
  --c4-line2: #edf1f6;
  --c4-field: #c5ceda;
  --c4-ink: #111827;
  --c4-ink2: #1f2937;
  --c4-ink3: #374151;
  --c4-ink4: #4b5563;
  --c4-red: #c62828;
  --c4-red-ink: #b42828;
  --c4-red-soft: #fdecec;
  --c4-hol-bg: #fff6f6;
  --c4-sat: #1f5bbf;
  --c4-on-bar: #ffffff;
  --c4-dim: rgba(17, 24, 39, .44);
  --c4-shadow: 0 24px 64px rgba(15, 23, 42, .24);
  --c4-food: #c63f32;
  --c4-travel: #1769c2;
  --c4-shop: #8b3aaf;
  --c4-living: #147a52;
  --c4-other: #a85c00;
  --c4-uncat: #667085;
  --c4-none: #a3aebd;
}
body[data-site-theme="dark"] {
  --c4-blue-ink: #8ec2ff;
  --c4-blue-soft: rgba(8, 119, 234, .2);
  --c4-blue-line: #3f6fa5;
  --c4-page: #16181d;
  --c4-card: #202329;
  --c4-soft: #272b32;
  --c4-chip: #2b3038;
  --c4-line: #353a44;
  --c4-line2: #2c3038;
  --c4-field: #4a515d;
  --c4-ink: #f2f4f7;
  --c4-ink2: #e4e7ec;
  --c4-ink3: #c9ced6;
  --c4-ink4: #b2b9c3;
  --c4-red: #ff8a80;
  --c4-red-ink: #ffaaa2;
  --c4-red-soft: rgba(255, 138, 128, .16);
  --c4-hol-bg: rgba(255, 138, 128, .07);
  --c4-sat: #8ec2ff;
  --c4-on-bar: #16181d;
  --c4-dim: rgba(0, 0, 0, .6);
  --c4-shadow: 0 24px 64px rgba(0, 0, 0, .5);
  --c4-food: #ff9b8f;
  --c4-travel: #86bfff;
  --c4-shop: #d9a5f2;
  --c4-living: #78d7ac;
  --c4-other: #f5b96b;
  --c4-uncat: #c4cbd4;
  --c4-none: #6b7483;
}
/* "system" 설정의 어두운 화면. 생성기는 색 변수 덩어리를 옮기지 않으므로 직접 적는다. */
@media (prefers-color-scheme: dark) {
  body[data-site-theme="system"],
  html[data-site-theme-bootstrap="system"] body:not([data-site-theme]) {
    --c4-blue-ink: #8ec2ff;
    --c4-blue-soft: rgba(8, 119, 234, .2);
    --c4-blue-line: #3f6fa5;
    --c4-page: #16181d;
    --c4-card: #202329;
    --c4-soft: #272b32;
    --c4-chip: #2b3038;
    --c4-line: #353a44;
    --c4-line2: #2c3038;
    --c4-field: #4a515d;
    --c4-ink: #f2f4f7;
    --c4-ink2: #e4e7ec;
    --c4-ink3: #c9ced6;
    --c4-ink4: #b2b9c3;
    --c4-red: #ff8a80;
    --c4-red-ink: #ffaaa2;
    --c4-red-soft: rgba(255, 138, 128, .16);
    --c4-hol-bg: rgba(255, 138, 128, .07);
    --c4-sat: #8ec2ff;
    --c4-on-bar: #16181d;
    --c4-dim: rgba(0, 0, 0, .6);
    --c4-shadow: 0 24px 64px rgba(0, 0, 0, .5);
    --c4-food: #ff9b8f;
    --c4-travel: #86bfff;
    --c4-shop: #d9a5f2;
    --c4-living: #78d7ac;
    --c4-other: #f5b96b;
    --c4-uncat: #c4cbd4;
    --c4-none: #6b7483;
  }
}

/* 분류 색: 막대(bar) · 글자(ink) · 옅은 바탕(soft) · 테두리(line) */
.site-calendar-page[data-calendar-design="c4"] .c4-cat-food{ --bar: var(--c4-food); }
.site-calendar-page[data-calendar-design="c4"] .c4-cat-travel{ --bar: var(--c4-travel); }
.site-calendar-page[data-calendar-design="c4"] .c4-cat-shop{ --bar: var(--c4-shop); }
.site-calendar-page[data-calendar-design="c4"] .c4-cat-living{ --bar: var(--c4-living); }
.site-calendar-page[data-calendar-design="c4"] .c4-cat-other{ --bar: var(--c4-other); }
.site-calendar-page[data-calendar-design="c4"] .c4-cat-uncat{ --bar: var(--c4-uncat); }
.site-calendar-page[data-calendar-design="c4"] .c4-cat-food, .site-calendar-page[data-calendar-design="c4"] .c4-cat-travel, .site-calendar-page[data-calendar-design="c4"] .c4-cat-shop, .site-calendar-page[data-calendar-design="c4"] .c4-cat-living, .site-calendar-page[data-calendar-design="c4"] .c4-cat-other, .site-calendar-page[data-calendar-design="c4"] .c4-cat-uncat{
  --ink: var(--bar);
  --soft: color-mix(in srgb, var(--bar) 9%, var(--c4-card));
  --soft-line: color-mix(in srgb, var(--bar) 30%, var(--c4-card));
}
.site-calendar-page[data-calendar-design="c4"] .c4-cat-none{ --bar: var(--c4-none); --ink: var(--c4-ink3); --soft: var(--c4-soft); --soft-line: var(--c4-line); }

/* 작업 공간 바탕과 머리글 */
body.chat-home-page .consumer-workspace[data-workspace='calendar'] { background: var(--c4-page); }
body.chat-home-page .consumer-workspace[data-workspace='calendar'] .site-calendar-page[data-calendar-design="c4"] > .site-modal-header h2 {
  color: var(--c4-ink);
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -.6px;
}
.site-calendar-page[data-calendar-design="c4"][data-calendar-access="authenticated"] > .site-modal-description { display: none; }
.site-calendar-page[data-calendar-design="c4"] > .site-modal-description { color: var(--c4-ink3); font-size: 14px; }
.site-calendar-page[data-calendar-design="c4"] .calendar-modal-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

.site-calendar-page[data-calendar-design="c4"] .calendar-product-shell[data-design="c4"]{
  display: flex;
  flex-direction: column;
  gap: 14px;
  color: var(--c4-ink);
  font-variant-numeric: tabular-nums;
}
.site-calendar-page[data-calendar-design="c4"] .calendar-product-shell[data-design="c4"] button{ font-family: inherit; }
.site-calendar-page[data-calendar-design="c4"] .c4-ico{ width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.site-calendar-page[data-calendar-design="c4"] .c4-head{ display: flex; justify-content: flex-end; gap: 8px; }

/* 버튼: 대표(파랑 채움) 하나 · 보조(흰 바탕 파랑 글자) · 일반(회색 테두리) */
.site-calendar-page[data-calendar-design="c4"] .c4-btn, .site-calendar-page[data-calendar-design="c4"] .calendar-modal-actions .c4-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  margin: 0;
  padding: 0 20px;
  border-radius: 12px;
  border: 1px solid transparent;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: none;
}
.site-calendar-page[data-calendar-design="c4"] .c4-btn:disabled{ cursor: not-allowed; opacity: .55; }
.site-calendar-page[data-calendar-design="c4"] .c4-btn.c4-pri,
.site-calendar-page[data-calendar-design="c4"] .calendar-modal-actions .c4-pri,
.site-calendar-page[data-calendar-design="c4"] .calendar-product-shell[data-design="c4"] .c4-pri{ background: var(--c4-blue); border-color: var(--c4-blue); color: #fff; }
.site-calendar-page[data-calendar-design="c4"] .c4-btn.c4-pri .c4-ico{ stroke-width: 2.6; }
.site-calendar-page[data-calendar-design="c4"] .c4-btn.c4-sec{ background: var(--c4-card); border: 1.5px solid var(--c4-blue-line); color: var(--c4-blue-ink); }
.site-calendar-page[data-calendar-design="c4"] .c4-btn.c4-ghost,
.site-calendar-page[data-calendar-design="c4"] .calendar-modal-actions .c4-ghost { background: var(--c4-card); border: 1px solid var(--c4-line); color: var(--c4-ink2); }
.site-calendar-page[data-calendar-design="c4"] .c4-btn.c4-danger{ background: var(--c4-card); border: 1px solid color-mix(in srgb, var(--c4-red) 35%, var(--c4-card)); color: var(--c4-red-ink); }
.site-calendar-page[data-calendar-design="c4"] .c4-btn.c4-sm{ min-height: 44px; padding: 0 14px; }
.site-calendar-page[data-calendar-design="c4"] .calendar-settings-button .calendar-toolbar-icon { width: 18px; height: 18px; }
.site-calendar-page[data-calendar-design="c4"] .c4-btn:focus-visible, .site-calendar-page[data-calendar-design="c4"] .c4-x:focus-visible, .site-calendar-page[data-calendar-design="c4"] .c4-rd:focus-visible, .site-calendar-page[data-calendar-design="c4"] .c4-mc:focus-visible, .site-calendar-page[data-calendar-design="c4"] .c4-ev:focus-visible,
.site-calendar-page[data-calendar-design="c4"] .c4-dc-ev:focus-visible, .site-calendar-page[data-calendar-design="c4"] .c4-lr:focus-visible, .site-calendar-page[data-calendar-design="c4"] .c4-chip:focus-visible, .site-calendar-page[data-calendar-design="c4"] .c4-ym:focus-visible, .site-calendar-page[data-calendar-design="c4"] .c4-opt:focus-visible,
.site-calendar-page[data-calendar-design="c4"] .c4-lc-tot:focus-visible, .site-calendar-page[data-calendar-design="c4"] .c4-dock-sum:focus-visible, .site-calendar-page[data-calendar-design="c4"] .c4-tab2:focus-visible, .site-calendar-page[data-calendar-design="c4"] .c4-cc:focus-visible, .site-calendar-page[data-calendar-design="c4"] .c4-seg3-b:focus-visible,
.site-calendar-page[data-calendar-design="c4"] .c4-led-r:focus-visible{ outline: 3px solid color-mix(in srgb, var(--c4-blue) 55%, transparent); outline-offset: 2px; }

/* 날짜 띠 */
.site-calendar-page[data-calendar-design="c4"] .c4-strip{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 24px;
  min-height: 60px;
  padding: 12px 20px;
  border: 1px solid var(--c4-line);
  border-radius: 16px;
  background: var(--c4-card);
}
.site-calendar-page[data-calendar-design="c4"] .c4-strip-l, .site-calendar-page[data-calendar-design="c4"] .c4-strip-r{ display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; min-width: 0; }
.site-calendar-page[data-calendar-design="c4"] .c4-sdate{ font-size: 18px; font-weight: 800; letter-spacing: -.3px; color: var(--c4-ink); }
.site-calendar-page[data-calendar-design="c4"] .c4-lunar{ font-size: 15px; font-weight: 500; color: var(--c4-ink3); }
.site-calendar-page[data-calendar-design="c4"] .c4-pill{ display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border-radius: 999px; font-size: 13px; font-weight: 700; white-space: nowrap; }
.site-calendar-page[data-calendar-design="c4"] .c4-pill.today{ background: var(--c4-blue); color: #fff; }
.site-calendar-page[data-calendar-design="c4"] .c4-pill.hol{ background: var(--c4-red-soft); color: var(--c4-red-ink); }
.site-calendar-page[data-calendar-design="c4"] .c4-strip-r{ font-size: 15px; color: var(--c4-ink2); }
.site-calendar-page[data-calendar-design="c4"] .c4-strip-r .calendar-weather-icon, .site-calendar-page[data-calendar-design="c4"] .c4-wx-ic{ font-size: 22px; line-height: 1; }
.site-calendar-page[data-calendar-design="c4"] .c4-wx-kind{ padding: 2px 8px; border-radius: 6px; font-size: 13px; font-weight: 700; white-space: nowrap; }
.site-calendar-page[data-calendar-design="c4"] .c4-wx-kind.now{ background: var(--c4-blue-soft); color: var(--c4-blue-ink); }
.site-calendar-page[data-calendar-design="c4"] .c4-wx-kind.fc{ background: var(--c4-chip); color: var(--c4-ink3); }
.site-calendar-page[data-calendar-design="c4"] .c4-wx-main{ font-size: 17px; font-weight: 800; color: var(--c4-ink); }
.site-calendar-page[data-calendar-design="c4"] .c4-wx-range{ color: var(--c4-ink2); }
.site-calendar-page[data-calendar-design="c4"] .c4-wx-loc{ color: var(--c4-ink4); }
.site-calendar-page[data-calendar-design="c4"] .c4-wx-note{ font-size: 14px; color: var(--c4-ink3); }
.site-calendar-page[data-calendar-design="c4"] .c4-src{ padding: 1px 7px; border: 1px solid var(--c4-line); border-radius: 6px; font-size: 12.5px; font-weight: 700; color: var(--c4-ink3); white-space: nowrap; }
.site-calendar-page[data-calendar-design="c4"] .c4-strip-slot{ display: flex; flex-direction: column; gap: 8px; }
.site-calendar-page[data-calendar-design="c4"] .c4-strip-slot .calendar-add-message{ margin: 0; padding: 10px 14px; border-radius: 12px; background: var(--c4-blue-soft); color: var(--c4-ink2); font-size: 14px; }

/* 캘린더 카드 + 오른쪽 */
.site-calendar-page[data-calendar-design="c4"] .c4-cols{ display: flex; flex-wrap: wrap; align-items: flex-start; gap: 20px; }
.site-calendar-page[data-calendar-design="c4"] .c4-cal{ flex: 999 1 560px; min-width: 0; overflow: hidden; border: 1px solid var(--c4-line); border-radius: 20px; background: var(--c4-card); }
.site-calendar-page[data-calendar-design="c4"] .c4-side{ flex: 0 0 360px; max-width: 100%; display: flex; flex-direction: column; gap: 16px; }
.site-calendar-page[data-calendar-design="c4"] .c4-card{ padding: 20px; border: 1px solid var(--c4-line); border-radius: 20px; background: var(--c4-card); color: var(--c4-ink); }
.site-calendar-page[data-calendar-design="c4"] .calendar-product-shell[data-design="c4"] .calendar-viewport{ padding: 0; border: 0; background: transparent; overflow: visible; }

/* 보기 전환 · 날짜 이동 */
.site-calendar-page[data-calendar-design="c4"] .calendar-mode-tabs.c4-seg{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 14px 16px 0; border: 0; background: transparent; }
.site-calendar-page[data-calendar-design="c4"] .calendar-mode-tabs.c4-seg .calendar-mode-tab{
  min-height: 48px;
  margin: 0;
  padding: 0 8px;
  border: 0;
  border-radius: 12px;
  background: var(--c4-chip);
  color: var(--c4-ink2);
  font-size: 16px;
  font-weight: 700;
  box-shadow: none;
}
.site-calendar-page[data-calendar-design="c4"] .calendar-mode-tabs.c4-seg .calendar-mode-tab[aria-selected="true"]{ background: var(--c4-blue); color: #fff; }
.site-calendar-page[data-calendar-design="c4"] .calendar-toolbar.c4-navr{ display: flex; align-items: center; gap: 8px; margin: 0; padding: 12px 16px; border: 0; border-bottom: 1px solid var(--c4-line2); background: transparent; }
.site-calendar-page[data-calendar-design="c4"] .calendar-toolbar.c4-navr .calendar-title-button{
  flex: 1;
  min-width: 0;
  min-height: 44px;
  margin: 0;
  padding: 0 4px;
  border: 0;
  background: transparent;
  color: var(--c4-ink);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.4px;
  text-align: left;
  pointer-events: none;
  box-shadow: none;
}
.site-calendar-page[data-calendar-design="c4"] .calendar-toolbar.c4-navr .calendar-nav-button,
.site-calendar-page[data-calendar-design="c4"] .calendar-toolbar.c4-navr .calendar-today-button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0 12px;
  border: 1px solid var(--c4-line);
  border-radius: 12px;
  background: var(--c4-card);
  color: var(--c4-ink2);
  font-weight: 700;
  box-shadow: none;
}
.site-calendar-page[data-calendar-design="c4"] .calendar-toolbar.c4-navr .calendar-nav-button{ padding: 0; width: 44px; }
.site-calendar-page[data-calendar-design="c4"] .calendar-toolbar.c4-navr .calendar-nav-button .c4-ico{ width: 20px; height: 20px; stroke-width: 2.4; }
.site-calendar-page[data-calendar-design="c4"] .calendar-toolbar.c4-navr .calendar-today-button{ padding: 0 16px; }

/* 주: 왼쪽 7일 + 선택한 날 시간표 */
.site-calendar-page[data-calendar-design="c4"] .c4-wk{ display: flex; min-height: 560px; }
.site-calendar-page[data-calendar-design="c4"] .c4-rail{ flex: 0 0 144px; display: flex; flex-direction: column; border-right: 1px solid var(--c4-line2); }
.site-calendar-page[data-calendar-design="c4"] .c4-rd{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  min-height: 76px;
  margin: 0;
  padding: 11px 14px;
  border: 0;
  border-bottom: 1px solid var(--c4-line2);
  border-radius: 0;
  background: transparent;
  color: var(--c4-ink);
  text-align: left;
  cursor: pointer;
}
.site-calendar-page[data-calendar-design="c4"] .c4-rd-top{ display: flex; align-items: center; gap: 6px; }
.site-calendar-page[data-calendar-design="c4"] .c4-rd-num{ font-size: 22px; font-weight: 800; line-height: 1.1; }
.site-calendar-page[data-calendar-design="c4"] .c4-rd-wd{ font-size: 14px; font-weight: 700; color: var(--c4-ink3); }
.site-calendar-page[data-calendar-design="c4"] .c4-rd-meta{ font-size: 13px; color: var(--c4-ink3); line-height: 1.35; }
.site-calendar-page[data-calendar-design="c4"] .c4-rd-hol{ font-size: 12.5px; font-weight: 700; color: var(--c4-red-ink); }
.site-calendar-page[data-calendar-design="c4"] .c4-rd-dots{ display: none; gap: 2px; }
.site-calendar-page[data-calendar-design="c4"] .c4-rd-dots i, .site-calendar-page[data-calendar-design="c4"] .c4-mc-dots i{ width: 5px; height: 5px; border-radius: 50%; background: var(--bar); }
.site-calendar-page[data-calendar-design="c4"] .c4-rd[data-weekday="0"] .c4-rd-num, .site-calendar-page[data-calendar-design="c4"] .c4-rd[data-weekday="0"] .c4-rd-wd, .site-calendar-page[data-calendar-design="c4"] .c4-rd[data-holiday="true"] .c4-rd-num{ color: var(--c4-red); }
.site-calendar-page[data-calendar-design="c4"] .c4-rd[data-weekday="6"] .c4-rd-num, .site-calendar-page[data-calendar-design="c4"] .c4-rd[data-weekday="6"] .c4-rd-wd{ color: var(--c4-sat); }
.site-calendar-page[data-calendar-design="c4"] .c4-rd[data-selected="true"]{ background: var(--c4-blue-soft); box-shadow: inset 4px 0 0 var(--c4-blue); }
.site-calendar-page[data-calendar-design="c4"] .c4-mini-today{ padding: 0 7px; border-radius: 999px; background: var(--c4-blue); color: #fff; font-size: 11.5px; font-weight: 700; line-height: 18px; }
.site-calendar-page[data-calendar-design="c4"] .c4-dayv{ flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; padding: 16px 20px 24px; }
.site-calendar-page[data-calendar-design="c4"] .c4-dayv-hd{ padding-bottom: 6px; }
.site-calendar-page[data-calendar-design="c4"] .c4-dayv-t, .site-calendar-page[data-calendar-design="c4"] .c4-dc-t{ margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -.3px; color: var(--c4-ink); }
.site-calendar-page[data-calendar-design="c4"] .c4-dayv-t:focus, .site-calendar-page[data-calendar-design="c4"] .c4-dc-t:focus{ outline: none; }
.site-calendar-page[data-calendar-design="c4"] .c4-dayv-s, .site-calendar-page[data-calendar-design="c4"] .c4-dc-s{ margin: 2px 0 0; font-size: 14px; color: var(--c4-ink3); }
.site-calendar-page[data-calendar-design="c4"] .c4-slot{ display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 12px; align-items: start; padding: 4px 0; }
.site-calendar-page[data-calendar-design="c4"] .c4-slot-t{ padding-top: 13px; font-size: 14px; font-weight: 700; color: var(--c4-ink2); }
.site-calendar-page[data-calendar-design="c4"] .c4-slot-n{ display: block; margin-top: 2px; font-size: 12px; font-weight: 700; color: var(--c4-blue-ink); }
.site-calendar-page[data-calendar-design="c4"] .c4-slot-evs{ display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; }
.site-calendar-page[data-calendar-design="c4"] .c4-gap{ display: flex; align-items: center; gap: 10px; padding: 2px 0 2px 104px; font-size: 13px; color: var(--c4-ink4); }
.site-calendar-page[data-calendar-design="c4"] .c4-gap-l{ flex: 1; border-top: 1px dashed var(--c4-field); }
.site-calendar-page[data-calendar-design="c4"] .c4-empty-day{ display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 26px 18px; border: 1.5px dashed var(--c4-field); border-radius: 16px; color: var(--c4-ink3); text-align: center; font-size: 14px; }
.site-calendar-page[data-calendar-design="c4"] .c4-empty-day strong{ font-size: 17px; color: var(--c4-ink); }

/* 일정 카드 */
.site-calendar-page[data-calendar-design="c4"] .c4-ev{
  display: flex;
  gap: 12px;
  width: 100%;
  min-height: 64px;
  margin: 0;
  padding: 11px 14px 11px 11px;
  border: 1px solid var(--soft-line);
  border-radius: 14px;
  background: var(--soft);
  color: var(--c4-ink);
  text-align: left;
  cursor: pointer;
}
.site-calendar-page[data-calendar-design="c4"] .c4-ev-bar{ flex: none; width: 5px; border-radius: 4px; background: var(--bar); }
.site-calendar-page[data-calendar-design="c4"] .c4-ev-in{ flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.site-calendar-page[data-calendar-design="c4"] .c4-ev-row{ display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.site-calendar-page[data-calendar-design="c4"] .c4-ev-t{ overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 16px; font-weight: 700; line-height: 1.35; word-break: keep-all; color: var(--c4-ink); }
.site-calendar-page[data-calendar-design="c4"] .c4-ev-amt{ display: inline-flex; align-items: center; gap: 5px; font-size: 15px; font-weight: 800; color: var(--ink); white-space: nowrap; }
.site-calendar-page[data-calendar-design="c4"] .c4-ev-meta{ display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 13px; color: var(--c4-ink3); }
.site-calendar-page[data-calendar-design="c4"] .c4-ev-cat{ font-weight: 700; color: var(--ink); }
.site-calendar-page[data-calendar-design="c4"] .c4-ev-x{ display: inline-flex; align-items: center; gap: 3px; color: var(--c4-ink3); }
.site-calendar-page[data-calendar-design="c4"] .c4-ev-x .c4-ico{ width: 13px; height: 13px; }
.site-calendar-page[data-calendar-design="c4"] .c4-ev-status{ font-weight: 700; color: var(--c4-red-ink); }
.site-calendar-page[data-calendar-design="c4"] .c4-tag{ padding: 0 6px; border-radius: 6px; font-size: 11.5px; font-weight: 700; line-height: 18px; white-space: nowrap; }
.site-calendar-page[data-calendar-design="c4"] .c4-tag.plan{ border: 1px dashed currentColor; background: var(--c4-card); color: var(--ink, var(--c4-ink3)); }
.site-calendar-page[data-calendar-design="c4"] .c4-tag.paid{ background: var(--bar, var(--c4-uncat)); color: var(--c4-on-bar); }

/* 월 */
.site-calendar-page[data-calendar-design="c4"] .c4-mo{ display: flex; flex-direction: column; }
.site-calendar-page[data-calendar-design="c4"] .c4-mo-wd{ display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; padding: 10px 12px 6px; font-size: 14px; font-weight: 700; color: var(--c4-ink3); text-align: center; }
.site-calendar-page[data-calendar-design="c4"] .c4-mo-wd [data-weekday="0"]{ color: var(--c4-red); }
.site-calendar-page[data-calendar-design="c4"] .c4-mo-wd [data-weekday="6"]{ color: var(--c4-sat); }
.site-calendar-page[data-calendar-design="c4"] .c4-mo-g{ display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; padding: 0 12px 14px; }
.site-calendar-page[data-calendar-design="c4"] .c4-mc{
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 100%;
  min-width: 0;
  min-height: 128px;
  margin: 0;
  padding: 7px 7px 6px;
  border: 1px solid var(--c4-line2);
  border-radius: 12px;
  background: var(--c4-card);
  color: var(--c4-ink);
  text-align: left;
  cursor: pointer;
}
.site-calendar-page[data-calendar-design="c4"] .c4-mc[data-current-month="false"]{ background: var(--c4-soft); }
.site-calendar-page[data-calendar-design="c4"] .c4-mc[data-current-month="false"] .c4-mc-num{ color: var(--c4-ink4); }
.site-calendar-page[data-calendar-design="c4"] .c4-mc[data-weekday="0"] .c4-mc-num, .site-calendar-page[data-calendar-design="c4"] .c4-mc[data-holiday="true"] .c4-mc-num{ color: var(--c4-red); }
.site-calendar-page[data-calendar-design="c4"] .c4-mc[data-weekday="6"] .c4-mc-num{ color: var(--c4-sat); }
.site-calendar-page[data-calendar-design="c4"] .c4-mc[data-holiday="true"]{ background: var(--c4-hol-bg); }
.site-calendar-page[data-calendar-design="c4"] .c4-mc[data-selected="true"]{ padding: 6px 6px 5px; border: 2px solid var(--c4-blue); background: color-mix(in srgb, var(--c4-blue) 6%, var(--c4-card)); }
.site-calendar-page[data-calendar-design="c4"] .c4-mc-top{ display: flex; align-items: center; gap: 4px; min-width: 0; }
.site-calendar-page[data-calendar-design="c4"] .c4-mc-num{ display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 28px; border-radius: 50%; font-size: 15px; font-weight: 800; }
.site-calendar-page[data-calendar-design="c4"] .c4-mc[data-today="true"] .c4-mc-num{ background: var(--c4-blue); color: #fff; }
.site-calendar-page[data-calendar-design="c4"] .c4-mc-lunar{ margin-left: auto; font-size: 12px; font-weight: 500; color: var(--c4-ink4); white-space: nowrap; }
.site-calendar-page[data-calendar-design="c4"] .c4-mc-hol{ overflow: hidden; font-size: 12px; font-weight: 700; line-height: 16px; color: var(--c4-red-ink); text-overflow: ellipsis; white-space: nowrap; }
.site-calendar-page[data-calendar-design="c4"] .c4-mc-evs{ display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.site-calendar-page[data-calendar-design="c4"] .c4-mc-ev{ display: flex; align-items: center; gap: 5px; min-width: 0; overflow: hidden; padding: 0 5px; border-radius: 5px; background: var(--soft); font-size: 12.5px; line-height: 19px; color: var(--c4-ink2); white-space: nowrap; }
.site-calendar-page[data-calendar-design="c4"] .c4-mc-dot{ flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--bar); }
.site-calendar-page[data-calendar-design="c4"] .c4-mc-evt{ min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* 10-29 가족 점검: 한 알림장 할 일은 줄을 긋고 흐리게. */
.site-calendar-page[data-calendar-design="c4"] .c4-mc-ev.is-done .c4-mc-evt,
.site-calendar-page[data-calendar-design="c4"] .c4-mc-first.is-done .c4-mc-first-t{ text-decoration: line-through; opacity: .6; }
.site-calendar-page[data-calendar-design="c4"] .c4-mc-more{ padding-left: 2px; font-size: 12px; font-weight: 700; color: var(--c4-ink3); }
.site-calendar-page[data-calendar-design="c4"] .c4-mc-dots{ display: none; align-items: center; gap: 2px; height: 6px; }
.site-calendar-page[data-calendar-design="c4"] .c4-mc-dots b{ font-size: 10px; line-height: 6px; color: var(--c4-ink3); }
.site-calendar-page[data-calendar-design="c4"] .c4-mc-wx{ display: flex; align-items: center; justify-content: flex-end; gap: 3px; margin-top: auto; font-size: 12px; font-weight: 500; color: var(--c4-ink2); }
.site-calendar-page[data-calendar-design="c4"] .c4-mc-wx .calendar-weather-icon{ font-size: 14px; line-height: 1; }
.site-calendar-page[data-calendar-design="c4"] .c4-agenda{ display: none; }

/* 오른쪽 '선택한 날' 카드 · 휴대폰 달력 아래 목록 */
.site-calendar-page[data-calendar-design="c4"] .c4-dc-list{ display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.site-calendar-page[data-calendar-design="c4"] .c4-dc-ev{
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  width: 100%;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--soft-line);
  border-radius: 12px;
  background: var(--soft);
  color: var(--c4-ink);
  text-align: left;
  cursor: pointer;
}
.site-calendar-page[data-calendar-design="c4"] .c4-dc-time{ font-size: 13px; font-weight: 700; color: var(--c4-ink2); }
.site-calendar-page[data-calendar-design="c4"] .c4-dc-main{ display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.site-calendar-page[data-calendar-design="c4"] .c4-dc-tt{ overflow: hidden; font-size: 15px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.site-calendar-page[data-calendar-design="c4"] .c4-dc-sub{ display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.site-calendar-page[data-calendar-design="c4"] .c4-dc-cat{ font-size: 12.5px; font-weight: 700; color: var(--ink); }
.site-calendar-page[data-calendar-design="c4"] .c4-dc-sub .c4-ev-amt{ font-size: 14px; }

/* 가계부 카드 */
.site-calendar-page[data-calendar-design="c4"] .c4-lc-hd{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.site-calendar-page[data-calendar-design="c4"] .c4-lc-tot{ display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin: 0; padding: 0; border: 0; background: transparent; color: var(--c4-ink); text-align: left; cursor: pointer; }
.site-calendar-page[data-calendar-design="c4"] .c4-lc-tot:disabled{ cursor: default; }
.site-calendar-page[data-calendar-design="c4"] .c4-lc-cap{ display: inline-flex; align-items: center; gap: 4px; font-size: 15px; font-weight: 700; color: var(--c4-ink2); }
.site-calendar-page[data-calendar-design="c4"] .c4-lc-cap .c4-ico{ width: 16px; height: 16px; }
.site-calendar-page[data-calendar-design="c4"] .c4-lc-num{ font-size: 30px; font-weight: 800; letter-spacing: -.8px; line-height: 1.2; white-space: nowrap; color: var(--c4-ink); }
.site-calendar-page[data-calendar-design="c4"] .c4-lc-bar{ display: flex; gap: 2px; height: 10px; margin: 16px 0 2px; overflow: hidden; border-radius: 999px; background: var(--c4-chip); }
.site-calendar-page[data-calendar-design="c4"] .c4-lc-seg{ flex: 1 1 0; height: 100%; background: var(--bar); }
.site-calendar-page[data-calendar-design="c4"] .c4-lc-g{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 12px; border-top: 1px solid var(--c4-line2); }
.site-calendar-page[data-calendar-design="c4"] .c4-lc-i{ display: flex; flex-direction: column; gap: 1px; padding: 10px 4px 10px 0; border-bottom: 1px solid var(--c4-line2); }
.site-calendar-page[data-calendar-design="c4"] .c4-lc-i:nth-child(even){ padding-left: 14px; border-left: 1px solid var(--c4-line2); }
.site-calendar-page[data-calendar-design="c4"] .c4-lc-l{ display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: var(--ink); }
.site-calendar-page[data-calendar-design="c4"] .c4-dot{ flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--bar, var(--c4-uncat)); }
.site-calendar-page[data-calendar-design="c4"] .c4-lc-a{ font-size: 17px; font-weight: 800; color: var(--c4-ink); }
.site-calendar-page[data-calendar-design="c4"] .c4-lc-a.zero{ font-weight: 700; color: var(--c4-ink4); }
.site-calendar-page[data-calendar-design="c4"] .c4-lc-plan{ display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: var(--c4-soft); font-size: 14px; color: var(--c4-ink2); }
.site-calendar-page[data-calendar-design="c4"] .c4-lc-plan .c4-tag.plan{ --ink: var(--c4-ink3); }
.site-calendar-page[data-calendar-design="c4"] .c4-lc-plan strong{ font-weight: 800; color: var(--c4-ink); }
.site-calendar-page[data-calendar-design="c4"] .c4-lc-plan-note{ color: var(--c4-ink4); }
.site-calendar-page[data-calendar-design="c4"] .c4-lc-plan-note::before{ content: '· '; }
.site-calendar-page[data-calendar-design="c4"] .c4-lc-msg{ margin: 10px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--c4-ink3); }
.site-calendar-page[data-calendar-design="c4"] .c4-lc-link{ display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 44px; margin: 6px 0 0; padding: 0; border: 0; background: transparent; color: var(--c4-blue-ink); font-size: 15px; font-weight: 700; cursor: pointer; }

/* 연간 */
.site-calendar-page[data-calendar-design="c4"] .c4-yr{ display: flex; flex-direction: column; gap: 18px; padding: 16px 18px 20px; }
.site-calendar-page[data-calendar-design="c4"] .c4-yr-sum{ display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 28px; }
.site-calendar-page[data-calendar-design="c4"] .c4-yr-fig{ display: flex; flex-direction: column; gap: 2px; }
.site-calendar-page[data-calendar-design="c4"] .c4-yr-k{ font-size: 14px; font-weight: 700; color: var(--c4-ink3); }
.site-calendar-page[data-calendar-design="c4"] .c4-yr-v{ font-size: 26px; font-weight: 800; letter-spacing: -.6px; color: var(--c4-ink); }
.site-calendar-page[data-calendar-design="c4"] .c4-yr-chart{ display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 8px; align-items: end; height: 170px; padding: 0 4px; border-bottom: 1px solid var(--c4-line); }
.site-calendar-page[data-calendar-design="c4"] .c4-yb{ display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; height: 100%; }
.site-calendar-page[data-calendar-design="c4"] .c4-yb-v{ min-height: 16px; font-size: 12px; font-weight: 700; color: var(--c4-ink3); white-space: nowrap; }
.site-calendar-page[data-calendar-design="c4"] .c4-yb-bar{ width: 100%; max-width: 36px; height: calc((100% - 20px) * var(--c4-bar-p, 0)); border-radius: 7px 7px 0 0; background: color-mix(in srgb, var(--c4-blue) 30%, var(--c4-card)); }
.site-calendar-page[data-calendar-design="c4"] .c4-yb[data-state="current"] .c4-yb-bar{ background: var(--c4-blue); }
.site-calendar-page[data-calendar-design="c4"] .c4-yb[data-state="current"] .c4-yb-v{ color: var(--c4-blue-ink); }
.site-calendar-page[data-calendar-design="c4"] .c4-yr-lb{ display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 8px; margin-top: -12px; padding: 0 4px; font-size: 13px; font-weight: 700; color: var(--c4-ink3); text-align: center; }
.site-calendar-page[data-calendar-design="c4"] .c4-yr-g{ display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.site-calendar-page[data-calendar-design="c4"] .c4-ym{ display: flex; flex-direction: column; gap: 8px; width: 100%; margin: 0; padding: 10px 12px; border: 1px solid var(--c4-line); border-radius: 16px; background: var(--c4-card); color: var(--c4-ink); text-align: left; cursor: pointer; }
.site-calendar-page[data-calendar-design="c4"] .c4-ym[data-current="true"]{ padding: 9px 11px; border: 2px solid var(--c4-blue); }
.site-calendar-page[data-calendar-design="c4"] .c4-ym-hd{ display: flex; flex-direction: column; gap: 0; }
.site-calendar-page[data-calendar-design="c4"] .c4-ym-n{ font-size: 17px; font-weight: 800; }
.site-calendar-page[data-calendar-design="c4"] .c4-ym-c{ font-size: 13px; font-weight: 500; color: var(--c4-ink3); }
.site-calendar-page[data-calendar-design="c4"] .c4-ym-dots{ display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.site-calendar-page[data-calendar-design="c4"] .c4-yd{ height: 9px; border-radius: 2px; background: var(--c4-chip); }
.site-calendar-page[data-calendar-design="c4"] .c4-yd.x{ background: transparent; }
.site-calendar-page[data-calendar-design="c4"] .c4-yd.l1{ background: color-mix(in srgb, var(--c4-blue) 22%, var(--c4-card)); }
.site-calendar-page[data-calendar-design="c4"] .c4-yd.l2{ background: color-mix(in srgb, var(--c4-blue) 52%, var(--c4-card)); }
.site-calendar-page[data-calendar-design="c4"] .c4-yd.l3{ background: var(--c4-blue); }
.site-calendar-page[data-calendar-design="c4"] .c4-ym-bar{ display: none; height: 6px; overflow: hidden; border-radius: 999px; background: var(--c4-chip); }
.site-calendar-page[data-calendar-design="c4"] .c4-ym-bar i{ display: block; height: 100%; border-radius: 999px; background: color-mix(in srgb, var(--c4-blue) 55%, var(--c4-card)); }
.site-calendar-page[data-calendar-design="c4"] .c4-ym[data-current="true"] .c4-ym-bar i{ background: var(--c4-blue); }
.site-calendar-page[data-calendar-design="c4"] .c4-ym-a{ font-size: 15px; font-weight: 800; }
.site-calendar-page[data-calendar-design="c4"] .c4-ym-a.zero{ font-weight: 700; color: var(--c4-ink4); }

/* 일정 목록 */
.site-calendar-page[data-calendar-design="c4"] .c4-ls{ display: flex; flex-direction: column; gap: 16px; padding: 14px 18px 22px; }
.site-calendar-page[data-calendar-design="c4"] .c4-chips{ display: flex; flex-wrap: wrap; gap: 8px; }
.site-calendar-page[data-calendar-design="c4"] .c4-chip{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  margin: 0;
  padding: 0 16px;
  border: 1.5px solid var(--c4-line);
  border-radius: 999px;
  background: var(--c4-card);
  color: var(--c4-ink2);
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}
.site-calendar-page[data-calendar-design="c4"] .c4-chip[aria-pressed="true"]{ border-color: var(--c4-ink); background: var(--c4-ink); color: var(--c4-card); }
.site-calendar-page[data-calendar-design="c4"] .c4-chip-n{ font-size: 13px; font-weight: 700; opacity: .85; }
.site-calendar-page[data-calendar-design="c4"] .c4-lg{ display: flex; flex-direction: column; gap: 8px; }
.site-calendar-page[data-calendar-design="c4"] .c4-lg-hd{ display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 0; font-size: 15px; font-weight: 800; color: var(--c4-ink2); }
.site-calendar-page[data-calendar-design="c4"] .c4-lg-sub{ font-size: 13px; font-weight: 500; color: var(--c4-ink3); }
.site-calendar-page[data-calendar-design="c4"] .c4-lr{
  display: grid;
  grid-template-columns: 132px 5px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  width: 100%;
  min-height: 62px;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--c4-line2);
  border-radius: 14px;
  background: var(--c4-card);
  color: var(--c4-ink);
  text-align: left;
  cursor: pointer;
}
.site-calendar-page[data-calendar-design="c4"] .c4-lr-time{ font-size: 14px; font-weight: 700; color: var(--c4-ink2); }
.site-calendar-page[data-calendar-design="c4"] .c4-lr-bar{ width: 5px; height: 36px; border-radius: 4px; background: var(--bar); }
.site-calendar-page[data-calendar-design="c4"] .c4-lr-main{ display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.site-calendar-page[data-calendar-design="c4"] .c4-lr-t{ overflow: hidden; font-size: 16px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.site-calendar-page[data-calendar-design="c4"] .c4-lr-m{ display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; font-size: 13px; color: var(--c4-ink3); }
.site-calendar-page[data-calendar-design="c4"] .c4-lr-when{ display: none; }
.site-calendar-page[data-calendar-design="c4"] .c4-note{ margin: 0; padding: 14px 16px; border-radius: 14px; background: var(--c4-soft); font-size: 14px; color: var(--c4-ink3); }
.site-calendar-page[data-calendar-design="c4"] .c4-empty{ display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 36px 24px; border: 1.5px dashed var(--c4-field); border-radius: 20px; text-align: center; }
.site-calendar-page[data-calendar-design="c4"] .c4-empty-art{ width: 120px; height: 96px; }
.site-calendar-page[data-calendar-design="c4"] .c4-art-fill{ fill: var(--c4-blue-soft); stroke: var(--c4-blue); stroke-width: 3; }
.site-calendar-page[data-calendar-design="c4"] .c4-art-line{ fill: none; stroke: var(--c4-blue); stroke-width: 3; stroke-linecap: round; }
.site-calendar-page[data-calendar-design="c4"] .c4-art-soft{ fill: color-mix(in srgb, var(--c4-blue) 30%, var(--c4-card)); }
.site-calendar-page[data-calendar-design="c4"] .c4-art-dot{ fill: var(--c4-blue); }
.site-calendar-page[data-calendar-design="c4"] .c4-art-plus{ fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; }
.site-calendar-page[data-calendar-design="c4"] .c4-empty-t{ font-size: 20px; font-weight: 800; color: var(--c4-ink); }
.site-calendar-page[data-calendar-design="c4"] .c4-empty-s{ max-width: 460px; margin: 0; font-size: 15px; line-height: 1.55; color: var(--c4-ink3); }
.site-calendar-page[data-calendar-design="c4"] .c4-ways{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; width: 100%; max-width: 560px; margin-top: 8px; }
.site-calendar-page[data-calendar-design="c4"] .c4-way{ display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border: 1px solid var(--c4-line); border-radius: 16px; background: var(--c4-card); text-align: left; }
.site-calendar-page[data-calendar-design="c4"] .c4-way-ic{ display: inline-flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; border-radius: 12px; background: var(--c4-chip); color: var(--c4-ink2); }
.site-calendar-page[data-calendar-design="c4"] .c4-way.direct .c4-way-ic{ background: var(--c4-blue-soft); color: var(--c4-blue); }
.site-calendar-page[data-calendar-design="c4"] .c4-way-ic .c4-ico{ width: 22px; height: 22px; }
.site-calendar-page[data-calendar-design="c4"] .c4-way-copy{ display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; line-height: 1.45; color: var(--c4-ink3); }
.site-calendar-page[data-calendar-design="c4"] .c4-way-copy strong{ font-size: 15px; font-weight: 800; color: var(--c4-ink); }

/* 휴대폰 아래 가계부 줄(넓은 화면에서는 숨김) */
.site-calendar-page[data-calendar-design="c4"] .c4-dock-slot{ display: none; }
.site-calendar-page[data-calendar-design="c4"] .c4-dock{ display: flex; align-items: center; gap: 10px; }
.site-calendar-page[data-calendar-design="c4"] .c4-dock-sum{ display: flex; flex: 1; flex-direction: column; align-items: flex-start; justify-content: center; min-width: 0; min-height: 44px; margin: 0; padding: 0; border: 0; background: transparent; color: var(--c4-ink); text-align: left; cursor: pointer; }
.site-calendar-page[data-calendar-design="c4"] .c4-dock-sum:disabled{ cursor: default; }
.site-calendar-page[data-calendar-design="c4"] .c4-dock-k{ display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 700; color: var(--c4-ink3); }
.site-calendar-page[data-calendar-design="c4"] .c4-dock-k .c4-ico{ width: 14px; height: 14px; }
.site-calendar-page[data-calendar-design="c4"] .c4-dock-v{ font-size: 19px; font-weight: 800; letter-spacing: -.4px; }
.site-calendar-page[data-calendar-design="c4"] .c4-dock-msg{ font-size: 13.5px; font-weight: 600; line-height: 1.35; color: var(--c4-ink2); }

/* 겹침 창 */
body.c4-dialog-open { overflow: hidden; }
.site-calendar-page[data-calendar-design="c4"] .c4-dlg-backdrop{
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 16px;
  overflow: hidden;
  overscroll-behavior: contain;
  background: var(--c4-dim);
}
.site-calendar-page[data-calendar-design="c4"] .c4-dlg{
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: min(100%, 600px);
  max-height: calc(100dvh - 80px);
  overflow: hidden;
  border: 0;
  border-radius: 22px;
  background: var(--c4-card);
  color: var(--c4-ink);
  box-shadow: var(--c4-shadow);
}
.site-calendar-page[data-calendar-design="c4"] .c4-dlg:focus{ outline: none; }
.site-calendar-page[data-calendar-design="c4"] .c4-dlg.c4-ledger-dlg{ width: min(100%, 720px); }
.site-calendar-page[data-calendar-design="c4"] .c4-dlg.c4-photo-dlg{ width: min(100%, 980px); }
.site-calendar-page[data-calendar-design="c4"] .c4-dlg-hd{ display: flex; align-items: flex-start; gap: 12px; padding: 20px 24px 10px; }
.site-calendar-page[data-calendar-design="c4"] .c4-dlg-copy{ flex: 1; min-width: 0; }
.site-calendar-page[data-calendar-design="c4"] .c4-dlg-t{ margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -.4px; color: var(--c4-ink); }
.site-calendar-page[data-calendar-design="c4"] .c4-dlg-s{ margin: 3px 0 0; font-size: 14px; color: var(--c4-ink3); }
.site-calendar-page[data-calendar-design="c4"] .c4-x{ display: inline-flex; flex: none; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 0; padding: 0; border: 0; border-radius: 12px; background: transparent; color: var(--c4-ink2); cursor: pointer; }
.site-calendar-page[data-calendar-design="c4"] .c4-x .c4-ico{ width: 22px; height: 22px; stroke-width: 2.4; }
.site-calendar-page[data-calendar-design="c4"] .c4-dlg-bd{ flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 16px; overflow-y: auto; overscroll-behavior: contain; padding: 6px 24px 20px; }
.site-calendar-page[data-calendar-design="c4"] .c4-dlg-ft{ flex: none; display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; padding: 14px 24px 18px; border-top: 1px solid var(--c4-line2); }
.site-calendar-page[data-calendar-design="c4"] .c4-ft-l{ margin-right: auto; }
.site-calendar-page[data-calendar-design="c4"] .c4-ft-note{ font-size: 14px; color: var(--c4-ink3); }
.site-calendar-page[data-calendar-design="c4"] .c4-dlg-err{ margin: 0; font-size: 14px; font-weight: 700; color: var(--c4-red-ink); }
.site-calendar-page[data-calendar-design="c4"] .c4-dlg-err:empty{ display: none; }
.site-calendar-page[data-calendar-design="c4"] .c4-inp, .site-calendar-page[data-calendar-design="c4"] .c4-sel{
  box-sizing: border-box;
  width: 100%;
  min-height: 48px;
  margin: 0;
  padding: 0 14px;
  border: 1.5px solid var(--c4-field);
  border-radius: 12px;
  background: var(--c4-card);
  color: var(--c4-ink);
  font: inherit;
  font-size: 16px;
}
.site-calendar-page[data-calendar-design="c4"] .c4-inp:focus, .site-calendar-page[data-calendar-design="c4"] .c4-sel:focus{ outline: none; border-color: var(--c4-blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c4-blue) 22%, transparent); }
.site-calendar-page[data-calendar-design="c4"] .c4-inp:disabled, .site-calendar-page[data-calendar-design="c4"] .c4-sel:disabled{ opacity: .55; }
.site-calendar-page[data-calendar-design="c4"] .c4-amt{ display: flex; align-items: center; gap: 8px; }
.site-calendar-page[data-calendar-design="c4"] .c4-amt-inp{ text-align: right; font-size: 18px; font-weight: 800; }
.site-calendar-page[data-calendar-design="c4"] .c4-amt-u{ font-size: 17px; font-weight: 800; }
.site-calendar-page[data-calendar-design="c4"] .c4-hint{ display: flex; gap: 8px; margin: 0; padding: 10px 12px; border: 1px solid var(--c4-line); border-radius: 12px; background: var(--c4-card); font-size: 13.5px; line-height: 1.55; color: var(--c4-ink2); }
.site-calendar-page[data-calendar-design="c4"] .c4-hint-warn{ border-color: color-mix(in srgb, var(--c4-other) 40%, var(--c4-card)); }
.site-calendar-page[data-calendar-design="c4"] .c4-seg3{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: 12px; background: var(--c4-chip); }
.site-calendar-page[data-calendar-design="c4"] .c4-seg3.c4-seg2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.site-calendar-page[data-calendar-design="c4"] .c4-seg3-b{ min-height: 42px; margin: 0; padding: 0 6px; border: 0; border-radius: 9px; background: transparent; color: var(--c4-ink2); font-size: 15px; font-weight: 700; cursor: pointer; }
.site-calendar-page[data-calendar-design="c4"] .c4-seg3-b[aria-pressed="true"]{ background: var(--c4-card); color: var(--c4-blue-ink); box-shadow: 0 1px 3px rgba(15, 23, 42, .18); }
.site-calendar-page[data-calendar-design="c4"] .c4-cats{ display: flex; flex-wrap: wrap; gap: 8px; }
.site-calendar-page[data-calendar-design="c4"] .c4-cc{ display: inline-flex; align-items: center; gap: 6px; min-height: 40px; margin: 0; padding: 0 14px; border: 1.5px solid var(--c4-line); border-radius: 999px; background: var(--c4-card); color: var(--c4-ink2); font-size: 14px; font-weight: 700; cursor: pointer; }
.site-calendar-page[data-calendar-design="c4"] .c4-cc[aria-pressed="true"]{ border-color: var(--bar); background: var(--soft); color: var(--ink); }

/* 상세 */
.site-calendar-page[data-calendar-design="c4"] .c4-dt-bar{ flex: none; width: 6px; height: 52px; margin-top: 2px; border-radius: 4px; background: var(--bar); }
.site-calendar-page[data-calendar-design="c4"] .c4-pay{ display: flex; flex-direction: column; gap: 8px; padding: 16px; border: 1px solid var(--soft-line); border-radius: 16px; background: var(--soft); }
.site-calendar-page[data-calendar-design="c4"] .c4-pay-tag{ align-self: flex-start; font-size: 13px; line-height: 22px; padding: 0 8px; }
.site-calendar-page[data-calendar-design="c4"] .c4-pay-amt{ font-size: 26px; font-weight: 800; letter-spacing: -.5px; }
.site-calendar-page[data-calendar-design="c4"] .c4-pay-s{ margin: 0; font-size: 14px; color: var(--c4-ink2); }
.site-calendar-page[data-calendar-design="c4"] .c4-pay-act{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.site-calendar-page[data-calendar-design="c4"] .c4-pay-act .c4-amt-inp{ width: 170px; }
.site-calendar-page[data-calendar-design="c4"] .c4-dt-rows{ display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--c4-line); border-radius: 16px; }
.site-calendar-page[data-calendar-design="c4"] .c4-dt-r{ display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 16px; border-top: 1px solid var(--c4-line2); font-size: 15px; }
.site-calendar-page[data-calendar-design="c4"] .c4-dt-r:first-child{ border-top: 0; }
.site-calendar-page[data-calendar-design="c4"] .c4-dt-r .c4-ico{ width: 20px; height: 20px; color: var(--c4-ink3); }
.site-calendar-page[data-calendar-design="c4"] .c4-dt-k{ width: 56px; flex: none; font-size: 14px; font-weight: 700; color: var(--c4-ink3); }
.site-calendar-page[data-calendar-design="c4"] .c4-dt-v{ flex: 1; min-width: 0; overflow-wrap: anywhere; font-weight: 500; }

/* 지출 내역 */
.site-calendar-page[data-calendar-design="c4"] .c4-lsum{ display: none; }
.site-calendar-page[data-calendar-design="c4"] .c4-tabs2{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.site-calendar-page[data-calendar-design="c4"] .c4-tab2{ display: flex; flex-direction: column; gap: 2px; width: 100%; margin: 0; padding: 10px 14px; border: 1.5px solid var(--c4-line); border-radius: 14px; background: var(--c4-card); color: var(--c4-ink); text-align: left; cursor: pointer; }
.site-calendar-page[data-calendar-design="c4"] .c4-tab2[aria-pressed="true"]{ border-color: var(--c4-blue); background: var(--c4-blue-soft); }
.site-calendar-page[data-calendar-design="c4"] .c4-tab2-k{ font-size: 14px; font-weight: 700; color: var(--c4-ink3); }
.site-calendar-page[data-calendar-design="c4"] .c4-tab2[aria-pressed="true"] .c4-tab2-k{ color: var(--c4-blue-ink); }
.site-calendar-page[data-calendar-design="c4"] .c4-tab2-v{ font-size: 22px; font-weight: 800; letter-spacing: -.5px; }
.site-calendar-page[data-calendar-design="c4"] .c4-led{ display: flex; flex-direction: column; gap: 14px; }
.site-calendar-page[data-calendar-design="c4"] .c4-led-g{ display: flex; flex-direction: column; gap: 6px; }
.site-calendar-page[data-calendar-design="c4"] .c4-led-d{ display: flex; justify-content: space-between; margin: 0; font-size: 14px; font-weight: 800; color: var(--c4-ink2); }
.site-calendar-page[data-calendar-design="c4"] .c4-led-d span{ font-weight: 700; color: var(--c4-ink3); }
.site-calendar-page[data-calendar-design="c4"] .c4-led-r{ display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; gap: 12px; align-items: center; width: 100%; margin: 0; padding: 11px 14px; border: 1px solid var(--c4-line2); border-radius: 12px; background: var(--c4-card); color: var(--c4-ink); text-align: left; cursor: pointer; }
.site-calendar-page[data-calendar-design="c4"] .c4-led-copy{ display: flex; flex-direction: column; min-width: 0; }
.site-calendar-page[data-calendar-design="c4"] .c4-led-t{ overflow: hidden; font-size: 15px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.site-calendar-page[data-calendar-design="c4"] .c4-led-m{ font-size: 13px; color: var(--c4-ink3); }
.site-calendar-page[data-calendar-design="c4"] .c4-led-a{ font-size: 16px; font-weight: 800; }
.site-calendar-page[data-calendar-design="c4"] .c4-rule{ margin: 0; padding: 12px 14px; border-radius: 12px; background: var(--c4-soft); font-size: 13.5px; line-height: 1.55; color: var(--c4-ink2); }

/* 사진 확인 */
.site-calendar-page[data-calendar-design="c4"] .c4-pgrid{ display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 24px; align-items: start; }
.site-calendar-page[data-calendar-design="c4"] .c4-photo{ display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 14px; border-radius: 16px; background: var(--c4-chip); }
.site-calendar-page[data-calendar-design="c4"] .c4-photo-img{ display: block; width: 100%; max-height: 420px; object-fit: contain; border-radius: 10px; background: var(--c4-card); }
.site-calendar-page[data-calendar-design="c4"] .c4-photo-empty{ display: flex; align-items: center; justify-content: center; min-height: 200px; color: var(--c4-ink4); }
.site-calendar-page[data-calendar-design="c4"] .c4-photo-cap{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--c4-ink3); }
.site-calendar-page[data-calendar-design="c4"] .c4-found{ display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.site-calendar-page[data-calendar-design="c4"] .c4-found-s{ display: flex; align-items: center; gap: 8px; margin: 0; font-size: 15px; color: var(--c4-ink2); }
.site-calendar-page[data-calendar-design="c4"] .c4-found-s .c4-ico{ width: 22px; height: 22px; color: var(--c4-living); }
.site-calendar-page[data-calendar-design="c4"] .c4-fc{ display: flex; flex-direction: column; gap: 12px; padding: 14px 16px; border: 1.5px solid color-mix(in srgb, var(--c4-blue) 25%, var(--c4-card)); border-radius: 16px; background: var(--c4-card); }
.site-calendar-page[data-calendar-design="c4"] .c4-fc[data-off="true"]{ border-color: var(--c4-line); opacity: .7; }
.site-calendar-page[data-calendar-design="c4"] .c4-fc-hd{ display: flex; align-items: center; gap: 10px; cursor: pointer; }
.site-calendar-page[data-calendar-design="c4"] .c4-fc-t{ flex: 1; font-size: 16px; font-weight: 800; }
.site-calendar-page[data-calendar-design="c4"] .c4-cb{ flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--c4-blue); }
.site-calendar-page[data-calendar-design="c4"] .c4-fg{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; }
.site-calendar-page[data-calendar-design="c4"] .c4-fg .span2{ grid-column: 1 / -1; }
.site-calendar-page[data-calendar-design="c4"] .c4-fld{ display: flex; flex-direction: column; gap: 4px; min-width: 0; }
/* 시안 06 사진 확인: 날짜는 '10월 23일 (금)' 글자로 보이고, 투명한 기기 날짜 칸이 위에 겹쳐 눌린다. */
.site-calendar-page[data-calendar-design="c4"] .c4-date-box{ position: relative; display: flex; align-items: center; }
.site-calendar-page[data-calendar-design="c4"] .c4-date-box .c4-date-native{ position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; opacity: 0; cursor: pointer; }
.site-calendar-page[data-calendar-design="c4"] .c4-date-box:focus-within{ border-color: var(--c4-blue); box-shadow: 0 0 0 3px var(--c4-blue-soft); }
.site-calendar-page[data-calendar-design="c4"] .c4-flab{ display: block; font-size: 13px; font-weight: 700; color: var(--c4-ink3); }

/* 편집기(일정 추가·수정) */
.site-calendar-page[data-calendar-design="c4"] .c4-editor .calendar-editor-header{ display: flex; align-items: center; gap: 10px; padding: 20px 24px 12px; border-bottom: 0; background: transparent; }
.site-calendar-page[data-calendar-design="c4"] .c4-editor .calendar-editor-header h3{ flex: 1; min-width: 0; margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -.4px; color: var(--c4-ink); }
.site-calendar-page[data-calendar-design="c4"] .c4-editor .calendar-editor-close{ display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 0; padding: 0; border: 0; border-radius: 12px; background: transparent; color: var(--c4-ink2); font-size: 26px; line-height: 1; cursor: pointer; }
.site-calendar-page[data-calendar-design="c4"] .c4-editor .c4-top-cancel, .site-calendar-page[data-calendar-design="c4"] .c4-editor .c4-top-save{ display: none; }
.site-calendar-page[data-calendar-design="c4"] .c4-editor .calendar-editor-form{ display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; margin: 0; }
.site-calendar-page[data-calendar-design="c4"] .c4-editor .calendar-editor-body{ flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 16px; overflow-y: auto; overscroll-behavior: contain; padding: 4px 24px 20px; }
.site-calendar-page[data-calendar-design="c4"] .c4-editor .calendar-editor-title-field{ display: flex; flex-direction: column; gap: 6px; margin: 0; }
.site-calendar-page[data-calendar-design="c4"] .c4-editor .calendar-editor-title-field > span{ font-size: 14px; font-weight: 700; color: var(--c4-ink2); }
.site-calendar-page[data-calendar-design="c4"] .c4-editor .calendar-editor-title{ box-sizing: border-box; width: 100%; min-height: 56px; margin: 0; padding: 0 14px; border: 1.5px solid var(--c4-blue); border-radius: 12px; background: var(--c4-card); color: var(--c4-ink); font: inherit; font-size: 19px; font-weight: 700; box-shadow: 0 0 0 3px color-mix(in srgb, var(--c4-blue) 18%, transparent); }
.site-calendar-page[data-calendar-design="c4"] .c4-editor .calendar-editor-title:focus{ outline: none; }
.site-calendar-page[data-calendar-design="c4"] .c4-editor .calendar-editor-title::placeholder{ color: var(--c4-ink4); font-weight: 500; }
.site-calendar-page[data-calendar-design="c4"] .c4-when{ display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px; }
.site-calendar-page[data-calendar-design="c4"] .c4-when-date, .site-calendar-page[data-calendar-design="c4"] .c4-when-time{ display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.site-calendar-page[data-calendar-design="c4"] .c4-when-time{ flex: 1 1 280px; }
.site-calendar-page[data-calendar-design="c4"] .c4-auto{ padding: 0 6px; border-radius: 6px; background: var(--c4-blue-soft); color: var(--c4-blue-ink); font-size: 12px; font-weight: 700; line-height: 18px; }
.site-calendar-page[data-calendar-design="c4"] .c4-editor .calendar-editor-date-row{ display: flex; flex-direction: column; gap: 8px; margin: 0; }
.site-calendar-page[data-calendar-design="c4"] .c4-editor .calendar-editor-date-chip{ display: inline-flex; align-items: center; gap: 8px; min-height: 48px; margin: 0; padding: 0 14px; border: 1.5px solid var(--c4-field); border-radius: 12px; background: var(--c4-card); color: var(--c4-ink); font-size: 16px; font-weight: 700; white-space: nowrap; cursor: pointer; }
.site-calendar-page[data-calendar-design="c4"] .c4-editor .calendar-editor-date-field label{ display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 700; color: var(--c4-ink3); }
.site-calendar-page[data-calendar-design="c4"] .c4-editor input[type="date"], .site-calendar-page[data-calendar-design="c4"] .c4-editor .calendar-editor-time, .site-calendar-page[data-calendar-design="c4"] .c4-editor .calendar-editor-end-time,
.site-calendar-page[data-calendar-design="c4"] .c4-editor .calendar-editor-place, .site-calendar-page[data-calendar-design="c4"] .c4-editor .calendar-editor-merchant, .site-calendar-page[data-calendar-design="c4"] .c4-editor .calendar-editor-amount,
.site-calendar-page[data-calendar-design="c4"] .c4-editor select, .site-calendar-page[data-calendar-design="c4"] .c4-editor textarea, .site-calendar-page[data-calendar-design="c4"] .c4-editor .calendar-editor-repeat-interval{
  box-sizing: border-box;
  min-height: 48px;
  margin: 0;
  padding: 0 14px;
  border: 1.5px solid var(--c4-field);
  border-radius: 12px;
  background: var(--c4-card);
  color: var(--c4-ink);
  font: inherit;
  font-size: 16px;
}
.site-calendar-page[data-calendar-design="c4"] .c4-editor textarea{ padding: 12px 14px; min-height: 96px; resize: vertical; }
.site-calendar-page[data-calendar-design="c4"] .c4-editor input:focus, .site-calendar-page[data-calendar-design="c4"] .c4-editor select:focus, .site-calendar-page[data-calendar-design="c4"] .c4-editor textarea:focus{ outline: none; border-color: var(--c4-blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c4-blue) 22%, transparent); }
.site-calendar-page[data-calendar-design="c4"] .c4-editor input:disabled{ opacity: .5; }
.site-calendar-page[data-calendar-design="c4"] .c4-time{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.site-calendar-page[data-calendar-design="c4"] .c4-time .calendar-editor-time, .site-calendar-page[data-calendar-design="c4"] .c4-time .calendar-editor-end-time{ flex: 1 1 120px; min-width: 0; width: auto; font-weight: 700; }
.site-calendar-page[data-calendar-design="c4"] .c4-dash{ font-weight: 700; color: var(--c4-ink3); }
.site-calendar-page[data-calendar-design="c4"] .c4-switch{ display: inline-flex; align-items: center; gap: 8px; min-height: 48px; margin: 0; padding: 0 6px; border: 0; background: transparent; color: var(--c4-ink); font-size: 15px; font-weight: 700; cursor: pointer; }
.site-calendar-page[data-calendar-design="c4"] .c4-sw{ position: relative; flex: none; width: 46px; height: 28px; border-radius: 999px; background: var(--c4-field); }
.site-calendar-page[data-calendar-design="c4"] .c4-sw::after{ content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: left .15s ease; }
.site-calendar-page[data-calendar-design="c4"] .c4-switch[aria-pressed="true"] .c4-sw{ background: var(--c4-blue); }
.site-calendar-page[data-calendar-design="c4"] .c4-switch[aria-pressed="true"] .c4-sw::after{ left: 21px; }
.site-calendar-page[data-calendar-design="c4"] .c4-more{ display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; color: var(--c4-ink3); }
.site-calendar-page[data-calendar-design="c4"] .c4-more::after{ content: ''; flex: 1; border-top: 1px solid var(--c4-line); }
.site-calendar-page[data-calendar-design="c4"] .c4-opts{ display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--c4-line); border-radius: 16px; }
.site-calendar-page[data-calendar-design="c4"] .c4-editor .calendar-editor-chip.c4-opt{
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 54px;
  margin: 0;
  padding: 0 16px;
  border: 0;
  border-top: 1px solid var(--c4-line2);
  border-radius: 0;
  background: var(--c4-card);
  color: var(--c4-ink);
  font-size: 15px;
  font-weight: 500;
  text-align: left;
  box-shadow: none;
  cursor: pointer;
}
.site-calendar-page[data-calendar-design="c4"] .c4-opts > .calendar-editor-chip.c4-opt:first-child{ border-top: 0; }
.site-calendar-page[data-calendar-design="c4"] .c4-opt > .c4-ico{ width: 20px; height: 20px; color: var(--c4-ink3); }
.site-calendar-page[data-calendar-design="c4"] .c4-opt-l{ flex: 1; font-weight: 700; }
.site-calendar-page[data-calendar-design="c4"] .c4-opt-v{ color: var(--c4-ink3); font-weight: 500; text-align: right; }
.site-calendar-page[data-calendar-design="c4"] .c4-opt[data-filled="true"] .c4-opt-v{ color: var(--c4-blue-ink); font-weight: 700; }
.site-calendar-page[data-calendar-design="c4"] .c4-opt > .c4-opt-ch{ width: 18px; height: 18px; color: var(--c4-ink4); transition: transform .15s ease; }
.site-calendar-page[data-calendar-design="c4"] .c4-opt[aria-expanded="true"] > .c4-opt-ch{ transform: rotate(180deg); }
.site-calendar-page[data-calendar-design="c4"] .c4-editor .calendar-editor-section{
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 14px 16px 16px;
  border: 0;
  border-top: 1px solid var(--c4-line2);
  border-radius: 0;
  background: var(--c4-soft);
}
.site-calendar-page[data-calendar-design="c4"] .c4-editor .calendar-editor-section[hidden]{ display: none; }
.site-calendar-page[data-calendar-design="c4"] .c4-editor .calendar-editor-section-label, .site-calendar-page[data-calendar-design="c4"] .c4-editor .calendar-editor-wide, .site-calendar-page[data-calendar-design="c4"] .c4-editor .calendar-editor-end-date-label,
.site-calendar-page[data-calendar-design="c4"] .c4-editor .calendar-editor-repeat-end-label, .site-calendar-page[data-calendar-design="c4"] .c4-editor .calendar-editor-repeat-interval-label{ display: flex; flex-direction: column; gap: 6px; margin: 0; font-size: 14px; font-weight: 700; color: var(--c4-ink2); }
.site-calendar-page[data-calendar-design="c4"] .c4-editor .calendar-editor-amount-field{ display: flex; flex-direction: column; gap: 6px; margin: 0; }
.site-calendar-page[data-calendar-design="c4"] .c4-editor .calendar-editor-amount-field[hidden], .site-calendar-page[data-calendar-design="c4"] .c4-editor .calendar-editor-category-field[hidden]{ display: none; }
.site-calendar-page[data-calendar-design="c4"] .c4-editor .calendar-editor-amount-box{ display: flex; align-items: center; gap: 8px; }
.site-calendar-page[data-calendar-design="c4"] .c4-editor .calendar-editor-amount{ max-width: 240px; text-align: right; font-size: 20px; font-weight: 800; }
.site-calendar-page[data-calendar-design="c4"] .c4-editor .calendar-editor-amount-unit{ font-size: 17px; font-weight: 800; color: var(--c4-ink); }
.site-calendar-page[data-calendar-design="c4"] .c4-editor .calendar-editor-category-field{ display: flex; flex-direction: column; gap: 8px; }
.site-calendar-page[data-calendar-design="c4"] .c4-editor .calendar-editor-category-sheet{ display: flex; flex-wrap: wrap; gap: 8px; }
.site-calendar-page[data-calendar-design="c4"] .c4-editor .calendar-editor-category-choice{ display: inline-flex; align-items: center; gap: 6px; min-height: 40px; margin: 0; padding: 0 14px; border: 1.5px solid var(--c4-line); border-radius: 999px; background: var(--c4-card); color: var(--c4-ink2); font-size: 14px; font-weight: 700; cursor: pointer; }
.site-calendar-page[data-calendar-design="c4"] .c4-editor .calendar-editor-category-choice::before{ content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--bar, var(--c4-uncat)); }
.site-calendar-page[data-calendar-design="c4"] .c4-editor .calendar-editor-category-choice[data-category="FOOD"]{ --bar: var(--c4-food); }
.site-calendar-page[data-calendar-design="c4"] .c4-editor .calendar-editor-category-choice[data-category="TRAVEL"]{ --bar: var(--c4-travel); }
.site-calendar-page[data-calendar-design="c4"] .c4-editor .calendar-editor-category-choice[data-category="SHOPPING"]{ --bar: var(--c4-shop); }
.site-calendar-page[data-calendar-design="c4"] .c4-editor .calendar-editor-category-choice[data-category="LIVING"]{ --bar: var(--c4-living); }
.site-calendar-page[data-calendar-design="c4"] .c4-editor .calendar-editor-category-choice[data-category="OTHER"]{ --bar: var(--c4-other); }
.site-calendar-page[data-calendar-design="c4"] .c4-editor .calendar-editor-category-choice[data-category=""]{ --bar: var(--c4-uncat); }
.site-calendar-page[data-calendar-design="c4"] .c4-editor .calendar-editor-category-choice[aria-pressed="true"]{ border-color: var(--bar); background: color-mix(in srgb, var(--bar) 9%, var(--c4-card)); color: var(--bar); }
.site-calendar-page[data-calendar-design="c4"] .c4-editor .calendar-editor-weekdays{ display: flex; flex-wrap: wrap; gap: 6px; }
.site-calendar-page[data-calendar-design="c4"] .c4-editor .calendar-editor-weekday{ min-width: 44px; min-height: 44px; margin: 0; border: 1.5px solid var(--c4-line); border-radius: 12px; background: var(--c4-card); color: var(--c4-ink2); font-weight: 700; cursor: pointer; }
.site-calendar-page[data-calendar-design="c4"] .c4-editor .calendar-editor-weekday[aria-pressed="true"]{ border-color: var(--c4-blue); background: var(--c4-blue-soft); color: var(--c4-blue-ink); }
.site-calendar-page[data-calendar-design="c4"] .c4-editor .calendar-editor-repeat-custom, .site-calendar-page[data-calendar-design="c4"] .c4-editor .calendar-editor-repeat-end{ display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
/* 10-28 폴드7(2번 실기기): 「1 주마다」가 요일 줄 끝에 칸은 위·글자는 아래로 엇갈려 끼었다 — 자기 줄에 「[1] 주마다」 한 줄로. */
.site-calendar-page[data-calendar-design="c4"] .c4-editor .calendar-editor-repeat-custom .calendar-editor-repeat-interval-label{ flex: 0 0 100%; flex-direction: row; align-items: center; gap: 8px; }
.site-calendar-page[data-calendar-design="c4"] .c4-editor .calendar-editor-repeat-custom[hidden], .site-calendar-page[data-calendar-design="c4"] .c4-editor .calendar-editor-repeat-end[hidden], .site-calendar-page[data-calendar-design="c4"] .c4-editor .calendar-editor-repeat-until[hidden]{ display: none; }
.site-calendar-page[data-calendar-design="c4"] .c4-editor .calendar-editor-hint, .site-calendar-page[data-calendar-design="c4"] .c4-editor .calendar-editor-reminder-status{ margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--c4-ink3); }
.site-calendar-page[data-calendar-design="c4"] .c4-editor .calendar-editor-hint[hidden], .site-calendar-page[data-calendar-design="c4"] .c4-editor .calendar-editor-reminder-status[hidden]{ display: none; }
.site-calendar-page[data-calendar-design="c4"] .c4-editor .calendar-editor-note{ margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--c4-blue-soft); font-size: 14px; color: var(--c4-ink2); }
.site-calendar-page[data-calendar-design="c4"] .c4-editor .calendar-editor-error{ margin: 0; font-size: 14px; font-weight: 700; color: var(--c4-red-ink); }
.site-calendar-page[data-calendar-design="c4"] .c4-editor .calendar-editor-error:empty{ display: none; }
.site-calendar-page[data-calendar-design="c4"] .c4-editor .calendar-editor-actions{ flex: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; margin: 0; padding: 14px 24px 18px; border-top: 1px solid var(--c4-line2); background: var(--c4-card); }
.site-calendar-page[data-calendar-design="c4"] .c4-editor .calendar-editor-actions button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  margin: 0;
  padding: 0 20px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: none;
}
.site-calendar-page[data-calendar-design="c4"] .c4-editor .calendar-editor-cancel, .site-calendar-page[data-calendar-design="c4"] .c4-editor .calendar-editor-view-festival{ border: 1px solid var(--c4-line); background: var(--c4-card); color: var(--c4-ink2); }
.site-calendar-page[data-calendar-design="c4"] .c4-editor .calendar-editor-save{ border: 1px solid var(--c4-blue); background: var(--c4-blue); color: #fff; }
.site-calendar-page[data-calendar-design="c4"] .c4-editor .calendar-editor-save:disabled{ opacity: .5; cursor: not-allowed; }
.site-calendar-page[data-calendar-design="c4"] .c4-editor .calendar-editor-delete{ margin-right: auto; border: 1px solid color-mix(in srgb, var(--c4-red) 35%, var(--c4-card)); background: var(--c4-card); color: var(--c4-red-ink); }

/* 휴대폰·좁은 화면(≤900px): 겹침 창은 아래에서 올라오는 시트, 오른쪽 칸은 숨기고
   가계부는 아래 고정 한 줄로 접는다. 내용을 가리지 않도록 같은 흐름 안에 붙는다. */
@media (max-width: 900px) {
  body.chat-home-page .consumer-workspace[data-workspace='calendar'] .site-calendar-page[data-calendar-design="c4"] > .site-modal-header h2 { font-size: 22px; }
  .site-calendar-page[data-calendar-design="c4"] .calendar-modal-actions { gap: 6px; }
  .site-calendar-page[data-calendar-design="c4"] .calendar-modal-actions .c4-pri { min-height: 44px; padding: 0 12px; font-size: 15px; gap: 6px; }
  .site-calendar-page[data-calendar-design="c4"] .calendar-modal-actions .c4-pri .c4-ico { width: 16px; height: 16px; }
  .site-calendar-page[data-calendar-design="c4"] .calendar-modal-actions .calendar-settings-button { width: 44px; min-height: 44px; padding: 0; }
  .site-calendar-page[data-calendar-design="c4"] .calendar-modal-actions .calendar-settings-label { display: none; }
  .site-calendar-page[data-calendar-design="c4"] .calendar-product-shell[data-design="c4"]{ gap: 10px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-strip{ flex-direction: column; align-items: stretch; gap: 4px; min-height: 0; padding: 10px 14px; border-radius: 14px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-strip-l{ gap: 6px 8px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-strip-l .c4-lunar{ margin-left: auto; font-size: 14px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-sdate{ font-size: 16px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-strip-r{ gap: 4px 6px; font-size: 14px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-wx-main{ font-size: 15px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-cols{ gap: 10px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-side{ display: none; }
  .site-calendar-page[data-calendar-design="c4"] .c4-cal{ flex-basis: 100%; border-radius: 16px; }
  .site-calendar-page[data-calendar-design="c4"] .calendar-mode-tabs.c4-seg{ gap: 6px; padding: 10px 10px 0; }
  .site-calendar-page[data-calendar-design="c4"] .calendar-mode-tabs.c4-seg .calendar-mode-tab{ min-height: 44px; font-size: 15px; }
  .site-calendar-page[data-calendar-design="c4"] .calendar-toolbar.c4-navr{ gap: 6px; padding: 10px; }
  .site-calendar-page[data-calendar-design="c4"] .calendar-toolbar.c4-navr .calendar-title-button{ font-size: 17px; }
  .site-calendar-page[data-calendar-design="c4"] .calendar-toolbar.c4-navr .calendar-today-button{ padding: 0 12px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-wk{ min-height: 0; }
  .site-calendar-page[data-calendar-design="c4"] .c4-rail{ flex-basis: 62px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-rd{ align-items: center; justify-content: center; gap: 1px; min-height: 62px; padding: 6px 2px; text-align: center; }
  .site-calendar-page[data-calendar-design="c4"] .c4-rd-top{ flex-direction: column; gap: 0; }
  .site-calendar-page[data-calendar-design="c4"] .c4-rd-num{ font-size: 19px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-rd-wd{ font-size: 12.5px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-mini-today{ font-size: 10.5px; line-height: 15px; padding: 0 5px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-rd-meta, .site-calendar-page[data-calendar-design="c4"] .c4-rd-hol{ display: none; }
  .site-calendar-page[data-calendar-design="c4"] .c4-rd-dots{ display: flex; height: 5px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-rd[data-selected="true"]{ box-shadow: inset 3px 0 0 var(--c4-blue); }
  .site-calendar-page[data-calendar-design="c4"] .c4-dayv{ gap: 6px; padding: 10px 12px 16px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-dayv-t{ font-size: 17px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-dayv-s{ font-size: 13px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-slot{ display: flex; flex-direction: column; gap: 6px; padding-top: 4px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-slot-t{ display: flex; align-items: center; gap: 6px; padding: 0; font-size: 13px; font-weight: 800; }
  .site-calendar-page[data-calendar-design="c4"] .c4-slot-n{ margin: 0; padding: 0 6px; border-radius: 6px; background: var(--c4-blue-soft); line-height: 18px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-slot-evs{ display: flex; flex-direction: column; gap: 6px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-gap{ padding: 2px 0; font-size: 12.5px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-ev{ min-height: 58px; padding: 9px 12px 9px 9px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-ev-t{ font-size: 15px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-ev-amt{ font-size: 14px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-mo-wd{ gap: 0; padding: 6px 8px 2px; font-size: 12.5px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-mo-g{ gap: 2px; padding: 0 8px 8px; border-bottom: 1px solid var(--c4-line2); }
  .site-calendar-page[data-calendar-design="c4"] .c4-mc{ align-items: center; gap: 1px; min-height: 58px; height: 58px; padding: 4px 0 0; border: 0; border-radius: 10px; background: transparent; }
  .site-calendar-page[data-calendar-design="c4"] .c4-mc[data-current-month="false"], .site-calendar-page[data-calendar-design="c4"] .c4-mc[data-holiday="true"]{ background: transparent; }
  .site-calendar-page[data-calendar-design="c4"] .c4-mc[data-selected="true"]{ padding: 4px 0 0; border: 0; background: var(--c4-blue-soft); box-shadow: inset 0 0 0 2px var(--c4-blue); }
  .site-calendar-page[data-calendar-design="c4"] .c4-mc-top{ justify-content: center; }
  .site-calendar-page[data-calendar-design="c4"] .c4-mc-num{ min-width: 26px; height: 26px; font-size: 14.5px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-mc-lunar, .site-calendar-page[data-calendar-design="c4"] .c4-mc-evs, .site-calendar-page[data-calendar-design="c4"] .c4-mc-wx{ display: none; }
  .site-calendar-page[data-calendar-design="c4"] .c4-mc-hol{ max-width: 100%; font-size: 10.5px; line-height: 13px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-mc-dots{ display: flex; }
  .site-calendar-page[data-calendar-design="c4"] .c4-agenda{ display: flex; flex-direction: column; gap: 8px; padding: 12px 14px 16px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-agenda .c4-dc-t{ font-size: 17px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-agenda .c4-dc-s{ font-size: 13px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-agenda .c4-dc-list{ margin-top: 4px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-agenda .c4-dc-ev{ grid-template-columns: 66px minmax(0, 1fr); padding: 9px 12px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-yr{ gap: 12px; padding: 12px 14px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-yr-v{ font-size: 22px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-yr-chart{ height: 120px; gap: 4px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-yb-v{ display: none; }
  .site-calendar-page[data-calendar-design="c4"] .c4-yb-bar{ height: calc(100% * var(--c4-bar-p, 0)); }
  .site-calendar-page[data-calendar-design="c4"] .c4-yr-lb{ gap: 4px; margin-top: -6px; font-size: 11.5px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-yr-g{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-ym{ gap: 4px; padding: 10px 12px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-ym-hd{ flex-direction: row; align-items: baseline; justify-content: space-between; }
  .site-calendar-page[data-calendar-design="c4"] .c4-ym-n{ font-size: 15px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-ym-dots{ display: none; }
  .site-calendar-page[data-calendar-design="c4"] .c4-ym-bar{ display: block; }
  .site-calendar-page[data-calendar-design="c4"] .c4-ls{ gap: 12px; padding: 12px 14px 16px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-chips{ flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -14px; padding: 0 14px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-chips::-webkit-scrollbar{ display: none; }
  .site-calendar-page[data-calendar-design="c4"] .c4-chip{ min-height: 40px; padding: 0 13px; font-size: 14px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-lr{ grid-template-columns: 5px minmax(0, 1fr) auto; gap: 10px; padding: 10px 12px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-lr-time{ display: none; }
  .site-calendar-page[data-calendar-design="c4"] .c4-lr-when{ display: inline; }
  .site-calendar-page[data-calendar-design="c4"] .c4-empty{ padding: 24px 16px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-ways{ grid-template-columns: 1fr; }
  .site-calendar-page[data-calendar-design="c4"] .c4-dock-slot{
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: block;
    /* 캘린더 내용 칸은 좌우 여백이 0이다. 음수 여백을 주면 줄이 16px 삐져나와
       내용이 옆으로 밀린다(2026-10-14 실측). */
    margin: 0;
    padding: 10px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--c4-line);
    background: var(--c4-card);
    box-shadow: 0 -6px 18px rgba(15, 23, 42, .06);
  }
  .site-calendar-page[data-calendar-design="c4"] .c4-dock .c4-btn{ min-height: 44px; padding: 0 14px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-dlg-backdrop{ align-items: flex-end; padding: 12px 0 0; }
  .site-calendar-page[data-calendar-design="c4"] .c4-dlg, .site-calendar-page[data-calendar-design="c4"] .c4-dlg.c4-ledger-dlg, .site-calendar-page[data-calendar-design="c4"] .c4-dlg.c4-photo-dlg{ width: 100%; max-height: calc(100dvh - 12px); border-radius: 22px 22px 0 0; }
  .site-calendar-page[data-calendar-design="c4"] .c4-dlg::before{ content: ''; flex: none; width: 40px; height: 5px; margin: 8px auto 0; border-radius: 999px; background: var(--c4-field); }
  .site-calendar-page[data-calendar-design="c4"] .c4-dlg-hd{ padding: 10px 16px 8px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-dlg-t{ font-size: 19px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-dlg-bd{ padding: 4px 16px 16px; gap: 14px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-dlg-ft{ padding: 10px 16px calc(14px + env(safe-area-inset-bottom, 0px)); }
  .site-calendar-page[data-calendar-design="c4"] .c4-dlg-ft .c4-btn{ flex: 1 1 auto; }
  .site-calendar-page[data-calendar-design="c4"] .c4-dlg-ft .c4-ft-note{ flex-basis: 100%; }
  .site-calendar-page[data-calendar-design="c4"] .c4-pgrid{ grid-template-columns: 1fr; gap: 14px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-photo{ flex-direction: row; align-items: center; padding: 10px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-photo-img{ width: 72px; height: 90px; object-fit: cover; }
  .site-calendar-page[data-calendar-design="c4"] .c4-photo-cap{ flex: 1; }
  .site-calendar-page[data-calendar-design="c4"] .c4-fg{ grid-template-columns: 1fr 1fr; }
  .site-calendar-page[data-calendar-design="c4"] .c4-lsum{ display: flex; flex-direction: column; gap: 2px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-pay-act .c4-amt-inp{ width: 140px; }
  /* 편집기: 머리글에 [취소 · 제목 · 저장], 키보드가 열려도 저장이 보인다. */
  .site-calendar-page[data-calendar-design="c4"] .c4-editor-backdrop .c4-editor{ height: calc(100dvh - 12px); max-height: calc(min(var(--calendar-editor-visual-height, 100dvh), 100dvh) - 12px); }
  /* CALENDAR-SAVE-VISIBLE-01 (민원 mrep_d6216a…, 안드로이드 앱 웹뷰 10-28): 창이 화면보다 길게 잡히면 머리글(취소 · 저장)이
     위로 밀려 저장 버튼이 없어 보였다. 머리글은 창 위에 붙이고, 아래 저장도 같이 둔다(머리가 밀려도 저장할 수 있게). */
  .site-calendar-page[data-calendar-design="c4"] .c4-editor .calendar-editor-header{ position: sticky; top: 0; z-index: 3; background: var(--c4-card, #fff); }
  .site-calendar-page[data-calendar-design="c4"] .c4-editor .calendar-editor-header{ padding: 6px 12px 8px 8px; border-bottom: 1px solid var(--c4-line2); }
  .site-calendar-page[data-calendar-design="c4"] .c4-editor .calendar-editor-header h3{ font-size: 17px; text-align: center; }
  .site-calendar-page[data-calendar-design="c4"] .c4-editor .calendar-editor-close{ display: none; }
  .site-calendar-page[data-calendar-design="c4"] .c4-editor .c4-top-cancel{ display: inline-flex; align-items: center; min-height: 44px; margin: 0; padding: 0 10px; border: 0; background: transparent; color: var(--c4-ink2); font-size: 16px; font-weight: 700; cursor: pointer; }
  .site-calendar-page[data-calendar-design="c4"] .c4-editor .c4-top-save{ display: inline-flex; align-items: center; min-height: 44px; margin: 0; padding: 0 18px; border: 0; border-radius: 12px; background: var(--c4-blue); color: #fff; font-size: 16px; font-weight: 700; cursor: pointer; }
  .site-calendar-page[data-calendar-design="c4"] .c4-editor .c4-top-save:disabled{ opacity: .5; }
  .site-calendar-page[data-calendar-design="c4"] .c4-editor .calendar-editor-body{ padding: 14px 16px 18px; gap: 14px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-editor .calendar-editor-actions{ padding: 10px 16px calc(12px + env(safe-area-inset-bottom, 0px)); }
  .site-calendar-page[data-calendar-design="c4"] .c4-editor .calendar-editor-actions .calendar-editor-cancel{ display: none; }
  .site-calendar-page[data-calendar-design="c4"] .c4-editor .calendar-editor-actions .calendar-editor-save{ flex: 1 1 auto; min-height: 52px; border-radius: 12px; font-size: 17px; }
  /* CALENDAR-EDITOR-KEYBOARD-KEEP-01 (회원 의견 mrep_c991ef06, 10-30 아이폰 「키보드가 올라오면 추가 창이 작아짐」): 키보드가 떠도
     창 크기는 그대로, 칸은 키보드 위로 굴려 보이게 하고, 키보드 위에 붙던 아래 저장 줄은 숨긴다(머리글 저장이 있다). */
  .site-calendar-page[data-calendar-design="c4"] .c4-editor-backdrop[data-keyboard-open="true"] .c4-editor{ max-height: calc(100dvh - 12px); }
  .site-calendar-page[data-calendar-design="c4"] .c4-editor-backdrop[data-keyboard-open="true"] .c4-editor .calendar-editor-body{ padding-bottom: calc(18px + var(--calendar-editor-keyboard-gap, 0px)); }
  .site-calendar-page[data-calendar-design="c4"] .c4-editor-backdrop[data-keyboard-open="true"] .c4-editor .calendar-editor-actions{ display: none; }
  .site-calendar-page[data-calendar-design="c4"] .c4-when{ flex-direction: column; align-items: stretch; }
  .site-calendar-page[data-calendar-design="c4"] .c4-when-time{ flex-basis: auto; }
  .site-calendar-page[data-calendar-design="c4"] .c4-editor .calendar-editor-date-chip{ width: 100%; }
}
@media (max-width: 380px) {
  body.chat-home-page .consumer-workspace[data-workspace='calendar'] .site-calendar-page[data-calendar-design="c4"] > .site-modal-header h2 { font-size: 20px; }
  .site-calendar-page[data-calendar-design="c4"] .calendar-modal-actions .c4-pri { padding: 0 10px; font-size: 14px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-fg{ grid-template-columns: 1fr; }
  .site-calendar-page[data-calendar-design="c4"] .c4-fg .span2{ grid-column: auto; }
}

/* CALENDAR-DESIGN-05 (2026-10-16 소유자 결정)
   지출 합계는 전부 빨강 · PC 맨 위는 날짜 줄 대신 가계부 한 줄 · 오른쪽 칸 없음 · 월은 날짜를 누르면 팝업 ·
   년은 그래프·네모 격자 대신 날짜가 보이는 작은 달력 12개. 휴대폰은 날짜·날씨 줄과 아래 가계부 줄을 그대로 쓴다. */
.site-calendar-page[data-calendar-design="c4"] .c4-paid, .site-calendar-page[data-calendar-design="c4"] .c4-lbar-v, .site-calendar-page[data-calendar-design="c4"] .c4-dock-v, .site-calendar-page[data-calendar-design="c4"] .c4-ym-a:not(.zero), .site-calendar-page[data-calendar-design="c4"] .c4-led-d span,
.site-calendar-page[data-calendar-design="c4"] .c4-tab2[data-ledger-tab="paid"] .c4-tab2-v, .site-calendar-page[data-calendar-design="c4"] .c4-lc-num{ color: var(--c4-red); }
.site-calendar-page[data-calendar-design="c4"] .c4-paid{ font-weight: 800; }
.site-calendar-page[data-calendar-design="c4"] .c4-lbar-tot:focus-visible, .site-calendar-page[data-calendar-design="c4"] .c4-lbar-link:focus-visible, .site-calendar-page[data-calendar-design="c4"] .c4-ym:focus-visible{ outline: 3px solid color-mix(in srgb, var(--c4-blue) 55%, transparent); outline-offset: 2px; }

/* 맨 위 가계부 한 줄(PC) */
.site-calendar-page[data-calendar-design="c4"] .c4-lbar{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; min-height: 60px; padding: 6px 10px 6px 20px; border: 1px solid var(--c4-line); border-radius: 16px; background: var(--c4-card); }
.site-calendar-page[data-calendar-design="c4"] .c4-lbar-tot{ display: inline-flex; align-items: baseline; gap: 10px; min-height: 44px; margin: 0; padding: 0; border: 0; background: transparent; color: var(--c4-ink); text-align: left; cursor: pointer; }
.site-calendar-page[data-calendar-design="c4"] .c4-lbar-tot:disabled{ cursor: default; }
.site-calendar-page[data-calendar-design="c4"] .c4-lbar-k{ font-size: 15px; font-weight: 700; color: var(--c4-ink3); }
.site-calendar-page[data-calendar-design="c4"] .c4-lbar-v{ font-size: 24px; font-weight: 800; letter-spacing: -.5px; white-space: nowrap; }
.site-calendar-page[data-calendar-design="c4"] .c4-lbar-plan{ display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--c4-ink4); }
.site-calendar-page[data-calendar-design="c4"] .c4-lbar-plan .c4-tag.plan{ --ink: var(--c4-ink3); }
.site-calendar-page[data-calendar-design="c4"] .c4-lbar-plan strong{ font-size: 15px; font-weight: 800; color: var(--c4-ink); }
.site-calendar-page[data-calendar-design="c4"] .c4-lbar-msg{ margin: 0; font-size: 14px; color: var(--c4-ink3); }
.site-calendar-page[data-calendar-design="c4"] .c4-lbar-sp{ flex: 1 1 auto; }
.site-calendar-page[data-calendar-design="c4"] .c4-lbar-link{ display: inline-flex; align-items: center; gap: 2px; min-height: 44px; margin: 0; padding: 0 6px; border: 0; background: transparent; color: var(--c4-blue-ink); font-size: 15px; font-weight: 700; cursor: pointer; }
.site-calendar-page[data-calendar-design="c4"] .c4-lbar-link .c4-ico{ width: 16px; height: 16px; }

/* 날짜 제목 옆 음력, 오른쪽 작은 날씨(PC) */
.site-calendar-page[data-calendar-design="c4"] .c4-dayv-hd{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; }
.site-calendar-page[data-calendar-design="c4"] .c4-dayv-tl{ display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.site-calendar-page[data-calendar-design="c4"] .c4-dayv-lunar{ font-size: 14px; font-weight: 500; color: var(--c4-ink4); }
.site-calendar-page[data-calendar-design="c4"] .c4-dayv-tl > .calendar-day-heading{ flex: 0 1 auto; }
.site-calendar-page[data-calendar-design="c4"] .c4-wxs{ display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 14px; color: var(--c4-ink3); }
.site-calendar-page[data-calendar-design="c4"] .c4-wxs .c4-wx-ic{ font-size: 20px; line-height: 1; }
.site-calendar-page[data-calendar-design="c4"] .c4-wxs .c4-wx-main{ font-weight: 800; color: var(--c4-ink); }
.site-calendar-page[data-calendar-design="c4"] .c4-wxs .c4-wx-note{ color: var(--c4-ink4); }

/* 월: 날짜를 누르면 그 칸 옆에 그날 일정 팝업(PC) */
.site-calendar-page[data-calendar-design="c4"] .c4-mo{ position: relative; }
.site-calendar-page[data-calendar-design="c4"] .c4-pop{ position: absolute; z-index: 6; top: 8px; left: 8px; display: flex; flex-direction: column; gap: 12px; width: min(380px, calc(100% - 16px)); padding: 16px 16px 16px 18px; border: 1px solid var(--c4-field); border-radius: 18px; background: var(--c4-card); box-shadow: 0 18px 48px rgba(15, 23, 42, .18); }
.site-calendar-page[data-calendar-design="c4"] .c4-pop-hd{ display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.site-calendar-page[data-calendar-design="c4"] .c4-pop-x{ margin: -8px -8px 0 0; }
.site-calendar-page[data-calendar-design="c4"] .c4-pop .c4-wxs{ font-size: 13.5px; }
.site-calendar-page[data-calendar-design="c4"] .c4-pop .c4-dc-list{ gap: 6px; max-height: 300px; margin: 0; overflow-y: auto; }
.site-calendar-page[data-calendar-design="c4"] .c4-pop .c4-dc-ev{ padding: 8px 12px; }
.site-calendar-page[data-calendar-design="c4"] .c4-pop .c4-empty-day{ padding: 16px; }
.site-calendar-page[data-calendar-design="c4"] .c4-pop-add{ width: 100%; }

/* 년: 날짜가 보이는 작은 달력 12개 */
.site-calendar-page[data-calendar-design="c4"] .c4-yr-g{ grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.site-calendar-page[data-calendar-design="c4"] .c4-ym{ gap: 6px; padding: 12px 12px 8px; }
.site-calendar-page[data-calendar-design="c4"] .c4-ym[data-current="true"]{ padding: 11px 11px 7px; }
.site-calendar-page[data-calendar-design="c4"] .c4-ym-hd{ flex-direction: row; align-items: baseline; gap: 8px; width: 100%; }
.site-calendar-page[data-calendar-design="c4"] .c4-ym-c{ flex: 1 1 auto; min-width: 0; }
.site-calendar-page[data-calendar-design="c4"] .c4-ym-a{ font-size: 14px; white-space: nowrap; }
.site-calendar-page[data-calendar-design="c4"] .c4-ym-a.zero{ font-weight: 600; }
.site-calendar-page[data-calendar-design="c4"] .c4-ym-wd, .site-calendar-page[data-calendar-design="c4"] .c4-ym-days{ display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); width: 100%; text-align: center; }
.site-calendar-page[data-calendar-design="c4"] .c4-ym-wd{ font-size: 11px; font-weight: 700; color: var(--c4-ink4); }
.site-calendar-page[data-calendar-design="c4"] .c4-ym-wd [data-weekday="0"]{ color: var(--c4-red); }
.site-calendar-page[data-calendar-design="c4"] .c4-ym-wd [data-weekday="6"]{ color: var(--c4-sat); }
.site-calendar-page[data-calendar-design="c4"] .c4-ymd{ position: relative; isolation: isolate; height: 26px; font-style: normal; font-size: 13px; font-weight: 600; line-height: 24px; color: var(--c4-ink2); }
.site-calendar-page[data-calendar-design="c4"] .c4-ymd[data-weekday="6"]{ color: var(--c4-sat); }
.site-calendar-page[data-calendar-design="c4"] .c4-ymd[data-weekday="0"], .site-calendar-page[data-calendar-design="c4"] .c4-ymd[data-holiday="true"]{ color: var(--c4-red); }
.site-calendar-page[data-calendar-design="c4"] .c4-ymd[data-has="true"]::after{ content: ''; position: absolute; left: 50%; bottom: 0; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--c4-blue); }
.site-calendar-page[data-calendar-design="c4"] .c4-ymd[data-today="true"]{ color: #fff; font-weight: 800; }
.site-calendar-page[data-calendar-design="c4"] .c4-ymd[data-today="true"]::before{ content: ''; position: absolute; z-index: -1; top: 0; left: 50%; width: 24px; height: 24px; margin-left: -12px; border-radius: 50%; background: var(--c4-blue); }
.site-calendar-page[data-calendar-design="c4"] .c4-ymd[data-today="true"][data-has="true"]::after{ bottom: 3px; background: #fff; }

@media (min-width: 901px) {
  /* PC: 맨 위 날짜 줄은 없다(날짜는 달력에 있다). 오른쪽 칸도 없어서 캘린더가 넓다. */
  .site-calendar-page[data-calendar-design="c4"] .c4-strip{ display: none; }
  .site-calendar-page[data-calendar-design="c4"] .c4-cal{ flex: 1 1 100%; overflow: visible; }
}
@media (max-width: 900px) {
  /* 휴대폰: 맨 위 날짜·날씨 줄과 아래 가계부 줄을 그대로 쓴다. */
  .site-calendar-page[data-calendar-design="c4"] .c4-lbar, .site-calendar-page[data-calendar-design="c4"] .c4-pop, .site-calendar-page[data-calendar-design="c4"] .c4-dayv-lunar, .site-calendar-page[data-calendar-design="c4"] .c4-dayv .c4-wxs{ display: none; }
  .site-calendar-page[data-calendar-design="c4"] .c4-yr{ padding: 6px 8px 8px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-yr-g{ grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-ym{ gap: 0; padding: 3px 3px 2px; border-radius: 10px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-ym[data-current="true"]{ padding: 2px 2px 1px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-ym-hd{ justify-content: space-between; padding: 0 2px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-ym-n{ font-size: 12.5px; line-height: 15px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-ym-c{ display: none; }
  .site-calendar-page[data-calendar-design="c4"] .c4-ym-a{ font-size: 10.5px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-ym-wd{ font-size: 8px; line-height: 11px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-ymd{ height: 11px; font-size: 9px; line-height: 10px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-ymd[data-has="true"]::after{ bottom: -1px; width: 3px; height: 3px; margin-left: -1.5px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-ymd[data-today="true"]::before{ top: -1px; width: 13px; height: 13px; margin-left: -6.5px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-ymd[data-today="true"][data-has="true"]::after{ bottom: 1px; }
}

/* CALENDAR-DESIGN-05 운영 대조 수정(2026-10-16): 카드 시간 뒤 ' · 분류', 넓은 화면 '오늘' 배지는 날짜 뒤,
   휴대폰은 주 제목의 연도를 감추고 날씨 한 줄(지역 이름 포함), 가계부 시트는 위가 조금 보이는 높이. */
.site-calendar-page[data-calendar-design="c4"] .c4-ev-meta .c4-ev-time + .c4-ev-cat::before{ content: '·'; margin-right: 4px; color: var(--c4-ink4); font-weight: 400; }
.site-calendar-page[data-calendar-design="c4"] .c4-led-more{ align-self: flex-start; min-height: 44px; }
@media (min-width: 901px) {
  .site-calendar-page[data-calendar-design="c4"] .c4-rd-top .c4-mini-today{ order: 3; }
}
@media (max-width: 900px) {
  .site-calendar-page[data-calendar-design="c4"] .c4-navr-y{ display: none; }
  .site-calendar-page[data-calendar-design="c4"] .c4-strip-r{ flex-wrap: nowrap; white-space: nowrap; overflow: hidden; }
  .site-calendar-page[data-calendar-design="c4"] .c4-strip-r .c4-wx-loc{ min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .site-calendar-page[data-calendar-design="c4"] .c4-dlg-backdrop[data-editor-presentation="SHEET"] .c4-dlg.c4-ledger-dlg{ max-height: calc(100dvh - 132px); }
}

/* CALENDAR-DESIGN-04: 예전 장식(제목 ▾, 휴대폰 ‹ › 글자, 칩 앞 '+')은 새 화면에서 쓰지 않는다. */
.site-calendar-page[data-calendar-design="c4"] .calendar-toolbar.c4-navr .calendar-title-button::after,
.site-calendar-page[data-calendar-design="c4"] .calendar-toolbar.c4-navr .calendar-nav-button::before,
.site-calendar-page[data-calendar-design="c4"] .calendar-toolbar.c4-navr .calendar-nav-button::after,
.site-calendar-page[data-calendar-design="c4"] .c4-editor .calendar-editor-chip.c4-opt::before,
.site-calendar-page[data-calendar-design="c4"] .c4-editor .calendar-editor-chip.c4-opt::after { content: none; display: none; }

.site-calendar-page[data-calendar-design="c4"] .c4-when-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 20px; }
.site-calendar-page[data-calendar-design="c4"] .c4-when-head .c4-switch { min-height: 32px; padding: 0; font-size: 14px; }
.site-calendar-page[data-calendar-design="c4"] .c4-when-head .c4-sw { width: 40px; height: 24px; }
.site-calendar-page[data-calendar-design="c4"] .c4-when-head .c4-sw::after { width: 18px; height: 18px; }
.site-calendar-page[data-calendar-design="c4"] .c4-when-head .c4-switch[aria-pressed="true"] .c4-sw::after { left: 19px; }
.site-calendar-page[data-calendar-design="c4"] .c4-time { flex-wrap: nowrap; }

/* CALENDAR-DESIGN-06 (2026-10-17 소유자 확정 시안 06)
   상용화 다듬기: 흰 카드 + 분류색 세로 막대(파스텔 바탕 없음), 실제 지출은 진한 숫자 · 예정은 회색 + '예정' 표시,
   날씨는 선 아이콘, PC 머리 한 줄(캘린더 · 오늘 ‹ › 기간 · 주/월/년/일정 · 설정 · + 일정 추가), 휴대폰 위쪽을 가볍게.
   10-16 결정(지출 합계 빨강, PC 가계부 줄, 오른쪽 칸 없음, 월 팝업, 주 음력·날씨, 년 작은 달력 12개)은 그대로다. */
body {
  --c4-blue: #0b6fe8;
  --c4-blue-ink: #0a58bc;
  --c4-blue-soft: #eaf2fe;
  --c4-blue-line: #d9dce2;
  --c4-page: #f5f6f8;
  --c4-card: #ffffff;
  --c4-soft: #f7f8fa;
  --c4-chip: #eef0f3;
  --c4-line: #e7e9ed;
  --c4-line2: #e7e9ed;
  --c4-field: #d9dce2;
  --c4-ink: #16181d;
  --c4-ink2: #3d424b;
  --c4-ink3: #6b717c;
  --c4-ink4: #9aa0aa;
  --c4-red: #c62828;
  --c4-red-ink: #c62828;
  --c4-sat: #1d5fc4;
  --c4-amber: #e39b0b;
  --c4-on-blue: #ffffff;
  --c4-shadow1: 0 1px 2px rgba(16, 24, 40, .06);
  --c4-shadow2: 0 12px 32px rgba(16, 24, 40, .16), 0 2px 6px rgba(16, 24, 40, .08);
  --c4-dim: rgba(17, 19, 24, .42);
  --c4-thumb: #ffffff;
  --c4-none: #aeb4be;
}
body[data-site-theme="dark"] {
  --c4-blue: #4c9bff;
  --c4-blue-ink: #8cc0ff;
  --c4-blue-soft: #1b2a40;
  --c4-blue-line: #3c3c42;
  --c4-page: #161618;
  --c4-card: #1f1f22;
  --c4-soft: #26262a;
  --c4-chip: #2e2e33;
  --c4-line: #303035;
  --c4-line2: #303035;
  --c4-field: #3c3c42;
  --c4-ink: #f2f2f4;
  --c4-ink2: #d4d4d8;
  --c4-ink3: #a1a1aa;
  --c4-ink4: #73737c;
  --c4-red: #ff7a72;
  --c4-red-ink: #ff7a72;
  --c4-sat: #7db2ff;
  --c4-amber: #f4b740;
  --c4-on-blue: #0b1220;
  --c4-on-bar: #0b1220;
  --c4-shadow1: none;
  --c4-shadow2: 0 16px 40px rgba(0, 0, 0, .55);
  --c4-dim: rgba(0, 0, 0, .58);
  --c4-thumb: #45454c;
  --c4-food: #f07a6e;
  --c4-travel: #63a8ff;
  --c4-shop: #c48cf0;
  --c4-living: #4cc98a;
  --c4-other: #eda54a;
  --c4-uncat: #9ca3af;
  --c4-none: #5e636c;
}
@media (prefers-color-scheme: dark) {
  body[data-site-theme="system"],
  html[data-site-theme-bootstrap="system"] body:not([data-site-theme]) {
    --c4-blue: #4c9bff;
    --c4-blue-ink: #8cc0ff;
    --c4-blue-soft: #1b2a40;
    --c4-blue-line: #3c3c42;
    --c4-page: #161618;
    --c4-card: #1f1f22;
    --c4-soft: #26262a;
    --c4-chip: #2e2e33;
    --c4-line: #303035;
    --c4-line2: #303035;
    --c4-field: #3c3c42;
    --c4-ink: #f2f2f4;
    --c4-ink2: #d4d4d8;
    --c4-ink3: #a1a1aa;
    --c4-ink4: #73737c;
    --c4-red: #ff7a72;
    --c4-red-ink: #ff7a72;
    --c4-sat: #7db2ff;
    --c4-amber: #f4b740;
    --c4-on-blue: #0b1220;
    --c4-on-bar: #0b1220;
    --c4-shadow1: none;
    --c4-shadow2: 0 16px 40px rgba(0, 0, 0, .55);
    --c4-dim: rgba(0, 0, 0, .58);
    --c4-thumb: #45454c;
    --c4-food: #f07a6e;
    --c4-travel: #63a8ff;
    --c4-shop: #c48cf0;
    --c4-living: #4cc98a;
    --c4-other: #eda54a;
    --c4-uncat: #9ca3af;
    --c4-none: #5e636c;
  }
}
.site-calendar-page[data-calendar-design="c4"]{ font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans KR", Arial, sans-serif; }
.site-calendar-page[data-calendar-design="c4"] .calendar-product-shell[data-design="c4"]{ gap: 12px; }
.site-calendar-page[data-calendar-design="c4"] .c4-cat-none{ --ink: var(--c4-ink3); }

/* 버튼 */
.site-calendar-page[data-calendar-design="c4"] .c4-btn, .site-calendar-page[data-calendar-design="c4"] .calendar-modal-actions .c4-btn{ min-height: 40px; padding: 0 16px; gap: 6px; border-radius: 10px; font-size: 14.5px; font-weight: 650; }
.site-calendar-page[data-calendar-design="c4"] .c4-btn .c4-ico{ width: 18px; height: 18px; }
.site-calendar-page[data-calendar-design="c4"] .c4-btn.c4-pri, .site-calendar-page[data-calendar-design="c4"] .calendar-modal-actions .c4-pri, .site-calendar-page[data-calendar-design="c4"] .calendar-product-shell[data-design="c4"] .c4-pri{ background: var(--c4-blue); border-color: var(--c4-blue); color: var(--c4-on-blue); }
.site-calendar-page[data-calendar-design="c4"] .c4-btn.c4-sec, .site-calendar-page[data-calendar-design="c4"] .c4-btn.c4-ghost, .site-calendar-page[data-calendar-design="c4"] .calendar-modal-actions .c4-ghost{ background: var(--c4-card); border: 1px solid var(--c4-field); color: var(--c4-ink); }
.site-calendar-page[data-calendar-design="c4"] .c4-btn.c4-danger{ background: var(--c4-card); border: 1px solid var(--c4-field); color: var(--c4-red); }
.site-calendar-page[data-calendar-design="c4"] .c4-btn.c4-sm{ min-height: 34px; padding: 0 12px; border-radius: 9px; font-size: 13.5px; }
.site-calendar-page[data-calendar-design="c4"] .c4-x{ width: 34px; height: 34px; border-radius: 9px; color: var(--c4-ink2); }
.site-calendar-page[data-calendar-design="c4"] .c4-x .c4-ico{ width: 18px; height: 18px; stroke-width: 2.2; }
.site-calendar-page[data-calendar-design="c4"] .c4-phone-only{ display: none; }
.site-calendar-page[data-calendar-design="c4"] .c4-tag{ display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: 5px; font-size: 11px; font-weight: 650; line-height: 1; }
.site-calendar-page[data-calendar-design="c4"] .c4-tag.plan{ border: 1px solid var(--c4-field); background: transparent; color: var(--c4-ink3); }
.site-calendar-page[data-calendar-design="c4"] .c4-tag.paid{ display: none; }

/* 머리: 사이트 줄(휴대폰) · 캘린더 제목 · 설정 · + 일정 추가. 뒤로 화살표와 안내 문장은 쓰지 않는다. */
body.chat-home-page .consumer-workspace[data-workspace='calendar'] .site-calendar-page[data-calendar-design="c4"] > .site-modal-header .site-modal-close,
.site-calendar-page[data-calendar-design="c4"] > .site-modal-description{ display: none; }
.calendar-site-bar{ display: none; }
body.chat-home-page .consumer-workspace[data-workspace='calendar'] .site-calendar-page[data-calendar-design="c4"] > .site-modal-header h2{ font-size: 22px; font-weight: 750; letter-spacing: -.4px; color: var(--c4-ink); }
.site-calendar-page[data-calendar-design="c4"] .calendar-modal-actions{ flex-wrap: nowrap; gap: 10px; }
.site-calendar-page[data-calendar-design="c4"] .calendar-modal-actions .calendar-settings-button{ order: -1; width: 40px; min-height: 40px; padding: 0; border-color: var(--c4-field); color: var(--c4-ink2); }
.site-calendar-page[data-calendar-design="c4"] .calendar-modal-actions .calendar-settings-label{ display: none; }
.site-calendar-page[data-calendar-design="c4"] .calendar-modal-actions .calendar-settings-button .calendar-toolbar-icon{ width: 22px; height: 22px; }
.site-calendar-page[data-calendar-design="c4"] .c4-add-date{ display: none; }

/* 보기 바꾸기: 회색 트랙 + 흰 손잡이 */
.site-calendar-page[data-calendar-design="c4"] .calendar-mode-tabs.c4-seg{ gap: 2px; padding: 3px; border-radius: 10px; background: var(--c4-chip); }
.site-calendar-page[data-calendar-design="c4"] .calendar-mode-tabs.c4-seg .calendar-mode-tab{ min-height: 32px; height: 32px; padding: 0 6px; border-radius: 8px; background: transparent; color: var(--c4-ink3); font-size: 14px; font-weight: 600; }
.site-calendar-page[data-calendar-design="c4"] .calendar-mode-tabs.c4-seg .calendar-mode-tab[aria-selected="true"]{ background: var(--c4-thumb); color: var(--c4-ink); box-shadow: 0 1px 3px rgba(16, 24, 40, .12); }
.site-calendar-page[data-calendar-design="c4"] .calendar-toolbar.c4-navr .calendar-title-button{ font-size: 20px; font-weight: 700; letter-spacing: -.3px; color: var(--c4-ink); }
.site-calendar-page[data-calendar-design="c4"] .calendar-toolbar.c4-navr .calendar-nav-button{ width: 34px; min-width: 34px; min-height: 34px; height: 34px; border: 0; border-radius: 9px; background: transparent; color: var(--c4-ink2); }
.site-calendar-page[data-calendar-design="c4"] .calendar-toolbar.c4-navr .calendar-nav-button .c4-ico{ width: 18px; height: 18px; stroke-width: 2.2; }
.site-calendar-page[data-calendar-design="c4"] .calendar-toolbar.c4-navr .calendar-today-button{ min-height: 36px; height: 36px; padding: 0 14px; border: 1px solid var(--c4-field); border-radius: 9px; background: var(--c4-card); color: var(--c4-ink); font-size: 14px; font-weight: 600; }

/* 가계부 한 줄(PC) */
.site-calendar-page[data-calendar-design="c4"] .c4-lbar{ flex-wrap: nowrap; gap: 16px; min-height: 52px; height: 52px; padding: 0 8px 0 18px; border-radius: 12px; border-color: var(--c4-line); }
.site-calendar-page[data-calendar-design="c4"] .c4-lbar-tot{ gap: 8px; min-height: 44px; align-items: center; }
.site-calendar-page[data-calendar-design="c4"] .c4-lbar-k{ font-size: 14px; font-weight: 600; color: var(--c4-ink3); }
.site-calendar-page[data-calendar-design="c4"] .c4-lbar-v{ font-size: 20px; font-weight: 800; letter-spacing: -.3px; }
.site-calendar-page[data-calendar-design="c4"] .c4-lbar-plan{ gap: 6px; font-size: 13.5px; color: var(--c4-ink3); }
.site-calendar-page[data-calendar-design="c4"] .c4-lbar-plan::before{ content: ''; width: 1px; height: 20px; margin-right: 10px; background: var(--c4-field); }
.site-calendar-page[data-calendar-design="c4"] .c4-lbar-plan strong{ font-size: 13.5px; font-weight: 650; color: var(--c4-ink2); }
.site-calendar-page[data-calendar-design="c4"] .c4-lbar-link{ min-height: 34px; font-size: 14px; font-weight: 600; color: var(--c4-blue-ink); }
.site-calendar-page[data-calendar-design="c4"] .c4-lbar .c4-btn.c4-sec{ min-height: 34px; padding: 0 12px; border-radius: 9px; font-size: 13.5px; }

/* 캘린더 카드 */
.site-calendar-page[data-calendar-design="c4"] .c4-cal{ border-color: var(--c4-line); border-radius: 14px; background: var(--c4-card); }
.site-calendar-page[data-calendar-design="c4"] .calendar-toolbar.c4-navr{ border-bottom-color: var(--c4-line); }

/* 일정 카드: 흰 바탕 · 얇은 테두리 · 분류색 세로 막대 하나 */
.site-calendar-page[data-calendar-design="c4"] .c4-ev{ position: relative; gap: 10px; min-height: 0; padding: 11px 14px 11px 16px; border: 1px solid var(--c4-line); border-radius: 12px; background: var(--c4-card); box-shadow: var(--c4-shadow1); }
.site-calendar-page[data-calendar-design="c4"] .c4-ev-bar{ position: absolute; left: 6px; top: 10px; bottom: 10px; width: 3px; border-radius: 2px; }
.site-calendar-page[data-calendar-design="c4"] .c4-ev-in{ gap: 3px; }
.site-calendar-page[data-calendar-design="c4"] .c4-ev-row{ align-items: center; }
.site-calendar-page[data-calendar-design="c4"] .c4-ev-t{ display: block; overflow: hidden; font-size: 15px; font-weight: 650; line-height: 22px; text-overflow: ellipsis; white-space: nowrap; }
.site-calendar-page[data-calendar-design="c4"] .c4-ev-amt{ gap: 6px; font-size: 15px; font-weight: 700; line-height: 22px; color: var(--c4-ink); font-variant-numeric: tabular-nums; }
.site-calendar-page[data-calendar-design="c4"] .c4-ev-amt:has(.c4-tag.plan){ font-weight: 600; color: var(--c4-ink3); }
.site-calendar-page[data-calendar-design="c4"] .c4-ev-meta{ flex-wrap: nowrap; gap: 6px; font-size: 12.5px; color: var(--c4-ink3); white-space: nowrap; }
.site-calendar-page[data-calendar-design="c4"] .c4-ev-meta .c4-ev-time + .c4-ev-cat::before{ margin-right: 6px; color: var(--c4-ink4); }
.site-calendar-page[data-calendar-design="c4"] .c4-ev-cat{ font-weight: 600; }
.site-calendar-page[data-calendar-design="c4"] .c4-ev-x{ gap: 3px; color: var(--c4-ink3); }

/* 날씨 선 아이콘 */
.site-calendar-page[data-calendar-design="c4"] .c4-wx-svg{ width: 18px; height: 18px; flex: none; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.site-calendar-page[data-calendar-design="c4"] .c4-wx-svg .c4-wx-sun{ stroke: var(--c4-amber); }
.site-calendar-page[data-calendar-design="c4"] .c4-wx-svg .c4-wx-cloud{ stroke: var(--c4-ink3); }
.site-calendar-page[data-calendar-design="c4"] .c4-wx-svg .c4-wx-drop{ stroke: var(--c4-travel); }
.site-calendar-page[data-calendar-design="c4"] .c4-wx-kind, .site-calendar-page[data-calendar-design="c4"] .c4-wx-kind.now, .site-calendar-page[data-calendar-design="c4"] .c4-wx-kind.fc{ padding: 0; border-radius: 0; background: transparent; color: var(--c4-ink3); font-size: inherit; font-weight: 400; }
.site-calendar-page[data-calendar-design="c4"] .c4-wx-main{ font-size: inherit; font-weight: 650; color: var(--c4-ink); }
.site-calendar-page[data-calendar-design="c4"] .c4-wx-range{ color: var(--c4-ink3); font-variant-numeric: tabular-nums; }
.site-calendar-page[data-calendar-design="c4"] .c4-wx-loc{ color: var(--c4-ink3); }
.site-calendar-page[data-calendar-design="c4"] .c4-wx-loc::before{ content: '· '; }
.site-calendar-page[data-calendar-design="c4"] .c4-src{ padding: 0; border: 0; font-size: 11.5px; font-weight: 400; color: var(--c4-ink4); }
.site-calendar-page[data-calendar-design="c4"] .c4-wxs{ flex-wrap: nowrap; gap: 6px; font-size: 13px; color: var(--c4-ink3); white-space: nowrap; }
.site-calendar-page[data-calendar-design="c4"] .c4-wxs .c4-wx-main{ font-weight: 650; }

/* 주(PC): 왼쪽 7일 | 선택한 날 */
.site-calendar-page[data-calendar-design="c4"] .c4-rail{ flex: 0 0 176px; gap: 2px; padding: 8px; border-right: 1px solid var(--c4-line); }
.site-calendar-page[data-calendar-design="c4"] .c4-rd{ display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 8px; row-gap: 1px; align-items: center; min-height: 0; padding: 10px; border: 0; border-radius: 10px; }
.site-calendar-page[data-calendar-design="c4"] .c4-rd-num{ grid-column: 1; grid-row: 1 / span 3; font-size: 22px; font-weight: 750; letter-spacing: -.5px; text-align: center; }
.site-calendar-page[data-calendar-design="c4"] .c4-rd-top{ grid-column: 2; display: flex; align-items: center; gap: 6px; }
.site-calendar-page[data-calendar-design="c4"] .c4-rd-wd{ font-size: 13px; font-weight: 650; color: var(--c4-ink2); }
.site-calendar-page[data-calendar-design="c4"] .c4-rd-hol{ grid-column: 2; font-size: 11px; font-weight: 600; color: var(--c4-red); }
.site-calendar-page[data-calendar-design="c4"] .c4-rd-meta{ grid-column: 2; font-size: 12px; color: var(--c4-ink3); }
.site-calendar-page[data-calendar-design="c4"] .c4-rd-meta .c4-paid{ font-weight: 650; }
.site-calendar-page[data-calendar-design="c4"] .c4-rd[data-weekday="0"] .c4-rd-wd, .site-calendar-page[data-calendar-design="c4"] .c4-rd[data-weekday="0"] .c4-rd-num, .site-calendar-page[data-calendar-design="c4"] .c4-rd[data-holiday="true"] .c4-rd-num{ color: var(--c4-red); }
.site-calendar-page[data-calendar-design="c4"] .c4-rd[data-weekday="6"] .c4-rd-wd, .site-calendar-page[data-calendar-design="c4"] .c4-rd[data-weekday="6"] .c4-rd-num{ color: var(--c4-sat); }
.site-calendar-page[data-calendar-design="c4"] .c4-rd[data-selected="true"]{ background: var(--c4-blue-soft); box-shadow: none; }
.site-calendar-page[data-calendar-design="c4"] .c4-rd[data-selected="true"] .c4-rd-num{ color: var(--c4-blue-ink); }
.site-calendar-page[data-calendar-design="c4"] .c4-mini-today{ display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 10px; background: var(--c4-blue); color: var(--c4-on-blue); font-size: 11.5px; font-weight: 700; line-height: 1; }
.site-calendar-page[data-calendar-design="c4"] .c4-dayv{ gap: 10px; padding: 0 0 24px; }
.site-calendar-page[data-calendar-design="c4"] .c4-dayv-hd{ flex-wrap: nowrap; gap: 16px; padding: 18px 24px 14px; border-bottom: 1px solid var(--c4-line); }
.site-calendar-page[data-calendar-design="c4"] .c4-dayv-t, .site-calendar-page[data-calendar-design="c4"] .c4-dc-t{ font-size: 19px; font-weight: 750; letter-spacing: -.3px; }
.site-calendar-page[data-calendar-design="c4"] .c4-dayv-lunar{ font-size: 13px; font-weight: 500; color: var(--c4-ink3); }
.site-calendar-page[data-calendar-design="c4"] .c4-dayv-s, .site-calendar-page[data-calendar-design="c4"] .c4-dc-s{ margin-top: 4px; font-size: 13.5px; color: var(--c4-ink3); }
.site-calendar-page[data-calendar-design="c4"] .c4-paid{ font-weight: 700; }
.site-calendar-page[data-calendar-design="c4"] .c4-slot{ grid-template-columns: 76px minmax(0, 1fr); gap: 12px; padding: 0 24px; }
.site-calendar-page[data-calendar-design="c4"] .c4-slot-t{ padding-top: 12px; font-size: 13px; font-weight: 650; color: var(--c4-ink2); }
.site-calendar-page[data-calendar-design="c4"] .c4-slot-n{ margin-top: 3px; font-size: 11.5px; font-weight: 600; color: var(--c4-blue-ink); }
.site-calendar-page[data-calendar-design="c4"] .c4-dayv-hd + .c4-slot{ margin-top: 4px; }
.site-calendar-page[data-calendar-design="c4"] .c4-gap{ gap: 10px; padding: 0 24px 0 112px; font-size: 12px; color: var(--c4-ink4); }
.site-calendar-page[data-calendar-design="c4"] .c4-gap-l:first-child{ display: none; }
.site-calendar-page[data-calendar-design="c4"] .c4-gap-l{ border-top: 1px solid var(--c4-line); }

/* 월(PC): 표처럼 칸 선, 오늘 파란 원 */
.site-calendar-page[data-calendar-design="c4"] .c4-mo-wd{ gap: 0; padding: 0; border-bottom: 1px solid var(--c4-line); text-align: left; }
.site-calendar-page[data-calendar-design="c4"] .c4-mo-wd > span{ padding: 10px 12px; font-size: 12.5px; font-weight: 650; color: var(--c4-ink3); }
.site-calendar-page[data-calendar-design="c4"] .c4-mo-wd [data-weekday="0"]{ color: var(--c4-red); }
.site-calendar-page[data-calendar-design="c4"] .c4-mo-wd [data-weekday="6"]{ color: var(--c4-sat); }
.site-calendar-page[data-calendar-design="c4"] .c4-mo-g{ gap: 1px; padding: 0; background: var(--c4-line); }
/* 칸 선은 칸 사이 1px 틈(격자 바탕색)으로 그린다: 요일 시작이 바뀌어도 위치 규칙이 필요 없다. */
.site-calendar-page[data-calendar-design="c4"] .c4-mc{ position: relative; gap: 3px; min-height: 150px; padding: 7px 8px 6px; border: 0; border-radius: 0; background: var(--c4-card); }
.site-calendar-page[data-calendar-design="c4"] .c4-mc[data-current-month="false"], .site-calendar-page[data-calendar-design="c4"] .c4-mc[data-holiday="true"]{ background: var(--c4-card); }
.site-calendar-page[data-calendar-design="c4"] .c4-mc[data-current-month="false"] .c4-mc-num{ color: var(--c4-ink4); font-weight: 500; }
/* 시안 06: 이전·다음 달 칸도 일요일·공휴일은 빨강, 토요일은 파랑(흐린 회색은 평일만). */
.site-calendar-page[data-calendar-design="c4"] .c4-mc[data-current-month="false"][data-weekday="0"] .c4-mc-num, .site-calendar-page[data-calendar-design="c4"] .c4-mc[data-current-month="false"][data-holiday="true"] .c4-mc-num{ color: var(--c4-red); }
.site-calendar-page[data-calendar-design="c4"] .c4-mc[data-current-month="false"][data-weekday="6"] .c4-mc-num{ color: var(--c4-sat); }
/* 시안 06: 일정 상세 금액칸 옆 '원'은 회색 보통 글씨. */
.site-calendar-page[data-calendar-design="c4"] .c4-pay-act .c4-amt-u{ font-size: 15px; font-weight: 400; color: var(--c4-ink3); }
.site-calendar-page[data-calendar-design="c4"] .c4-mc[data-selected="true"]{ padding: 7px 8px 6px; border: 0; background: var(--c4-card); }
.site-calendar-page[data-calendar-design="c4"] .c4-mo:has(.c4-pop) .c4-mc[data-selected="true"]{ background: color-mix(in srgb, var(--c4-blue-soft) 70%, transparent); box-shadow: inset 0 0 0 2px var(--c4-blue); }
.site-calendar-page[data-calendar-design="c4"] .c4-mc-top{ gap: 6px; }
.site-calendar-page[data-calendar-design="c4"] .c4-mc-num{ min-width: 26px; width: 26px; height: 26px; font-size: 13.5px; font-weight: 650; }
.site-calendar-page[data-calendar-design="c4"] .c4-mc[data-today="true"] .c4-mc-num{ background: var(--c4-blue); color: var(--c4-on-blue); }
.site-calendar-page[data-calendar-design="c4"] .c4-mc-lunar{ font-size: 11px; color: var(--c4-ink4); }
.site-calendar-page[data-calendar-design="c4"] .c4-mc-hol{ font-size: 11px; font-weight: 650; color: var(--c4-red); }
.site-calendar-page[data-calendar-design="c4"] .c4-mc-ev{ gap: 6px; height: 19px; padding: 0; border-radius: 0; background: transparent; font-size: 12px; line-height: 19px; color: var(--c4-ink2); }
.site-calendar-page[data-calendar-design="c4"] .c4-mc-dot{ width: 7px; height: 7px; }
.site-calendar-page[data-calendar-design="c4"] .c4-mc-ev.all{ padding: 0 6px; border-radius: 5px; background: color-mix(in srgb, var(--bar) 14%, transparent); color: var(--c4-ink); font-weight: 600; }
.site-calendar-page[data-calendar-design="c4"] .c4-mc-ev.all .c4-mc-dot{ display: none; }
.site-calendar-page[data-calendar-design="c4"] .c4-mc-more{ padding-left: 13px; font-size: 11.5px; font-weight: 600; color: var(--c4-ink3); }
.site-calendar-page[data-calendar-design="c4"] .c4-mc-wx{ position: absolute; right: 8px; bottom: 6px; margin: 0; gap: 3px; font-size: 11px; color: var(--c4-ink3); }
.site-calendar-page[data-calendar-design="c4"] .c4-mc-wx .c4-wx-svg{ width: 15px; height: 15px; }

/* 월 팝업(PC) */
.site-calendar-page[data-calendar-design="c4"] .c4-pop{ width: 344px; gap: 12px; padding: 16px; border: 1px solid var(--c4-line); border-radius: 14px; box-shadow: var(--c4-shadow2); }
.site-calendar-page[data-calendar-design="c4"] .c4-pop .c4-dc-t{ font-size: 17px; }
.site-calendar-page[data-calendar-design="c4"] .c4-pop .c4-dayv-lunar{ font-size: 12.5px; }
.site-calendar-page[data-calendar-design="c4"] .c4-pop .c4-dc-s{ margin-top: 3px; font-size: 13px; }
.site-calendar-page[data-calendar-design="c4"] .c4-pop-x{ margin: 0; }
.site-calendar-page[data-calendar-design="c4"] .c4-pop .c4-dc-list{ gap: 0; max-height: none; }
.site-calendar-page[data-calendar-design="c4"] .c4-dc-ev{ display: grid; grid-template-columns: 66px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 9px 0; border: 0; border-top: 1px solid var(--c4-line); border-radius: 0; background: transparent; }
.site-calendar-page[data-calendar-design="c4"] .c4-dc-bar{ display: none; }
.site-calendar-page[data-calendar-design="c4"] .c4-dc-time{ font-size: 12.5px; font-weight: 400; color: var(--c4-ink3); }
.site-calendar-page[data-calendar-design="c4"] .c4-pop .c4-dc-tt{ display: flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 600; }
.site-calendar-page[data-calendar-design="c4"] .c4-pop .c4-dc-tt::before{ content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--bar); }
.site-calendar-page[data-calendar-design="c4"] .c4-pop .c4-dc-sub{ display: none; }
.site-calendar-page[data-calendar-design="c4"] .c4-dc-ev .c4-ev-amt{ font-size: 13.5px; }
.site-calendar-page[data-calendar-design="c4"] .c4-pop .c4-dc-ev .c4-tag.plan{ height: auto; padding: 0; border: 0; font-size: inherit; font-weight: inherit; color: inherit; }
.site-calendar-page[data-calendar-design="c4"] .c4-pop-add{ width: 100%; }

/* 년: 작은 달력 12개 */
.site-calendar-page[data-calendar-design="c4"] .c4-yr{ padding: 16px 20px; gap: 0; }
.site-calendar-page[data-calendar-design="c4"] .c4-yr-g{ grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 14px; }
.site-calendar-page[data-calendar-design="c4"] .c4-ym, .site-calendar-page[data-calendar-design="c4"] .c4-ym[data-current="true"]{ justify-content: flex-start; gap: 0; padding: 10px 12px; border: 0; border-radius: 12px; background: transparent; }
.site-calendar-page[data-calendar-design="c4"] .c4-ym[data-current="true"]{ background: var(--c4-blue-soft); box-shadow: inset 0 0 0 1.5px var(--c4-blue); }
.site-calendar-page[data-calendar-design="c4"] .c4-ym-hd{ align-items: baseline; gap: 8px; margin-bottom: 6px; }
.site-calendar-page[data-calendar-design="c4"] .c4-ym-n{ font-size: 15px; font-weight: 750; color: var(--c4-ink); }
.site-calendar-page[data-calendar-design="c4"] .c4-ym-c{ font-size: 11.5px; font-weight: 400; color: var(--c4-ink4); }
.site-calendar-page[data-calendar-design="c4"] .c4-ym-a{ margin-left: auto; font-size: 13px; font-weight: 700; }
.site-calendar-page[data-calendar-design="c4"] .c4-ym-a.zero{ font-size: 12px; font-weight: 500; color: var(--c4-ink4); }
.site-calendar-page[data-calendar-design="c4"] .c4-ym-wd{ height: 18px; align-items: center; font-size: 10.5px; font-weight: 600; color: var(--c4-ink4); }
.site-calendar-page[data-calendar-design="c4"] .c4-ym-days{ row-gap: 1px; }
.site-calendar-page[data-calendar-design="c4"] .c4-ymd{ height: 22px; font-size: 11.5px; font-weight: 400; line-height: 22px; }
.site-calendar-page[data-calendar-design="c4"] .c4-ymd[data-has="true"]::after{ bottom: 0; width: 3.5px; height: 3.5px; margin-left: -1.75px; }
.site-calendar-page[data-calendar-design="c4"] .c4-ymd[data-today="true"]{ color: var(--c4-on-blue); font-weight: 700; }
.site-calendar-page[data-calendar-design="c4"] .c4-ymd[data-today="true"]::before{ top: 1px; width: 20px; height: 20px; margin-left: -10px; }

/* 일정 목록 */
.site-calendar-page[data-calendar-design="c4"] .c4-ls{ gap: 14px; padding: 14px 24px 24px; }
.site-calendar-page[data-calendar-design="c4"] .c4-chips{ gap: 8px; }
.site-calendar-page[data-calendar-design="c4"] .c4-chip{ min-height: 34px; height: 34px; padding: 0 13px; gap: 6px; border: 1px solid var(--c4-field); border-radius: 17px; background: var(--c4-card); color: var(--c4-ink2); font-size: 13.5px; font-weight: 600; }
.site-calendar-page[data-calendar-design="c4"] .c4-chip-n{ color: var(--c4-ink4); font-weight: 600; }
.site-calendar-page[data-calendar-design="c4"] .c4-chip[aria-pressed="true"]{ border-color: var(--c4-ink); background: var(--c4-ink); color: var(--c4-card); }
.site-calendar-page[data-calendar-design="c4"] .c4-chip[aria-pressed="true"] .c4-chip-n{ color: color-mix(in srgb, var(--c4-card) 70%, transparent); }
.site-calendar-page[data-calendar-design="c4"] .c4-lg{ display: flex; flex-direction: column; gap: 0; }
.site-calendar-page[data-calendar-design="c4"] .c4-lg-hd{ gap: 10px; padding: 4px 2px 8px; font-size: 13.5px; font-weight: 700; color: var(--c4-ink); }
.site-calendar-page[data-calendar-design="c4"] .c4-lg-sub{ font-size: 12.5px; font-weight: 500; color: var(--c4-ink3); }
.site-calendar-page[data-calendar-design="c4"] .c4-lr{ display: grid; grid-template-columns: 112px 3px minmax(0, 1fr) auto; gap: 14px; align-items: center; min-height: 0; margin: 0; padding: 12px 16px; border: 1px solid var(--c4-line); border-top: 0; border-radius: 0; background: var(--c4-card); }
.site-calendar-page[data-calendar-design="c4"] .c4-lg-hd + .c4-lr{ border-top: 1px solid var(--c4-line); border-radius: 12px 12px 0 0; }
.site-calendar-page[data-calendar-design="c4"] .c4-lr:last-child{ border-radius: 0 0 12px 12px; }
.site-calendar-page[data-calendar-design="c4"] .c4-lg-hd + .c4-lr:last-child{ border-radius: 12px; }
.site-calendar-page[data-calendar-design="c4"] .c4-lr-time{ display: block; font-size: 13px; font-weight: 550; color: var(--c4-ink2); white-space: nowrap; }
.site-calendar-page[data-calendar-design="c4"] .c4-lr-bar{ width: 3px; height: 30px; border-radius: 2px; background: var(--bar); }
.site-calendar-page[data-calendar-design="c4"] .c4-lr-t{ font-size: 14.5px; font-weight: 650; color: var(--c4-ink); }
.site-calendar-page[data-calendar-design="c4"] .c4-lr-m{ display: flex; align-items: center; gap: 6px; margin-top: 2px; font-size: 12.5px; color: var(--c4-ink3); }
.site-calendar-page[data-calendar-design="c4"] .c4-lr-m > span:not(.c4-lr-when) + span::before{ content: '·'; margin-right: 6px; color: var(--c4-ink4); }
.site-calendar-page[data-calendar-design="c4"] .c4-lr-when{ display: none; }
.site-calendar-page[data-calendar-design="c4"] .c4-lr .c4-ev-amt{ font-size: 14.5px; }

/* 겹침 창 */
.site-calendar-page[data-calendar-design="c4"] .c4-dlg-backdrop{ background: var(--c4-dim); }
.site-calendar-page[data-calendar-design="c4"] .c4-dlg{ border-radius: 16px; background: var(--c4-card); box-shadow: var(--c4-shadow2); }
.site-calendar-page[data-calendar-design="c4"] .c4-dlg-hd{ gap: 12px; padding: 20px 20px 14px 24px; }
.site-calendar-page[data-calendar-design="c4"] .c4-dlg-t{ font-size: 19px; font-weight: 750; letter-spacing: -.3px; }
.site-calendar-page[data-calendar-design="c4"] .c4-dlg-s{ margin-top: 4px; font-size: 13px; color: var(--c4-ink3); }
.site-calendar-page[data-calendar-design="c4"] .c4-dlg-bd{ gap: 14px; padding: 4px 24px 20px; }
.site-calendar-page[data-calendar-design="c4"] .c4-dlg-ft{ gap: 8px; padding: 14px 20px; border-top: 1px solid var(--c4-line); }
/* 지출 내역 */
.site-calendar-page[data-calendar-design="c4"] .c4-ledger-dlg{ width: min(560px, calc(100vw - 32px)); }
.site-calendar-page[data-calendar-design="c4"] .c4-tabs2{ gap: 10px; }
.site-calendar-page[data-calendar-design="c4"] .c4-tab2{ padding: 12px 14px; border: 1px solid var(--c4-line); border-radius: 12px; }
.site-calendar-page[data-calendar-design="c4"] .c4-tab2[aria-pressed="true"]{ border-color: var(--c4-ink); box-shadow: inset 0 0 0 1px var(--c4-ink); }
.site-calendar-page[data-calendar-design="c4"] .c4-tab2-k{ font-size: 12.5px; font-weight: 600; color: var(--c4-ink3); }
.site-calendar-page[data-calendar-design="c4"] .c4-tab2-v{ font-size: 22px; font-weight: 800; letter-spacing: -.4px; }
.site-calendar-page[data-calendar-design="c4"] .c4-lc-bar{ height: 8px; gap: 2px; margin: 0; border-radius: 4px; background: transparent; }
.site-calendar-page[data-calendar-design="c4"] .c4-lc-seg{ background: var(--bar); }
.site-calendar-page[data-calendar-design="c4"] .c4-lc-g{ grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 16px; margin: 0; border: 0; }
.site-calendar-page[data-calendar-design="c4"] .c4-lc-i{ display: flex; align-items: center; height: 26px; padding: 0; border: 0; font-size: 13px; color: var(--c4-ink2); }
.site-calendar-page[data-calendar-design="c4"] .c4-lc-l{ display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 400; color: var(--c4-ink2); }
.site-calendar-page[data-calendar-design="c4"] .c4-lc-a{ margin-left: auto; font-size: 13px; font-weight: 650; color: var(--c4-ink); }
.site-calendar-page[data-calendar-design="c4"] .c4-lc-a.zero{ font-weight: 500; color: var(--c4-ink4); }
.site-calendar-page[data-calendar-design="c4"] .c4-dot{ width: 7px; height: 7px; background: var(--bar); }
.site-calendar-page[data-calendar-design="c4"] .c4-led{ gap: 0; }
.site-calendar-page[data-calendar-design="c4"] .c4-led-g{ gap: 0; }
.site-calendar-page[data-calendar-design="c4"] .c4-led-d{ display: flex; justify-content: space-between; margin: 0; padding: 10px 2px 6px; font-size: 13px; font-weight: 700; color: var(--c4-ink); }
.site-calendar-page[data-calendar-design="c4"] .c4-led-r{ grid-template-columns: 7px minmax(0, 1fr) auto; gap: 10px; padding: 9px 2px; border: 0; border-top: 1px solid var(--c4-line); border-radius: 0; background: transparent; }
.site-calendar-page[data-calendar-design="c4"] .c4-led-t{ font-size: 14px; font-weight: 600; }
.site-calendar-page[data-calendar-design="c4"] .c4-led-m{ margin-top: 1px; font-size: 12px; color: var(--c4-ink3); }
.site-calendar-page[data-calendar-design="c4"] .c4-led-a{ font-size: 14px; font-weight: 700; }
.site-calendar-page[data-calendar-design="c4"] .c4-led-ft .c4-rule{ display: flex; align-items: flex-start; gap: 6px; margin: 0 auto 0 0; font-size: 12.5px; color: var(--c4-ink3); }
.site-calendar-page[data-calendar-design="c4"] .c4-led-ft .c4-rule .c4-ico{ width: 15px; height: 15px; margin-top: 1px; }
/* 일정 상세 */
.site-calendar-page[data-calendar-design="c4"] .c4-detail{ width: min(480px, calc(100vw - 32px)); }
.site-calendar-page[data-calendar-design="c4"] .c4-dt-bar{ width: 4px; align-self: stretch; border-radius: 2px; background: var(--bar); }
.site-calendar-page[data-calendar-design="c4"] .c4-pay{ display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 6px 8px; padding: 14px 16px; border: 1px solid var(--c4-line); border-radius: 12px; background: var(--c4-card); }
.site-calendar-page[data-calendar-design="c4"] .c4-pay-tag{ grid-column: 1; grid-row: 1; }
.site-calendar-page[data-calendar-design="c4"] .c4-pay .c4-tag.paid{ display: inline-flex; border: 1px solid var(--c4-field); background: transparent; color: var(--c4-ink3); }
.site-calendar-page[data-calendar-design="c4"] .c4-pay-s{ grid-column: 2; grid-row: 1; margin: 0; font-size: 13px; color: var(--c4-ink3); }
.site-calendar-page[data-calendar-design="c4"] .c4-pay-amt{ grid-column: 1 / -1; font-size: 26px; font-weight: 800; letter-spacing: -.5px; color: var(--c4-ink); }
.site-calendar-page[data-calendar-design="c4"] .c4-pay-act{ grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.site-calendar-page[data-calendar-design="c4"] .c4-pay-act .c4-amt-inp{ width: 160px; text-align: right; font-weight: 700; }
.site-calendar-page[data-calendar-design="c4"] .c4-pay-act .c4-btn{ margin-left: auto; }
.site-calendar-page[data-calendar-design="c4"] .c4-dt-rows{ border-radius: 12px; border-color: var(--c4-line); }
.site-calendar-page[data-calendar-design="c4"] .c4-dt-r{ min-height: 46px; gap: 12px; padding: 0 14px; border-top-color: var(--c4-line); font-size: 14px; }
.site-calendar-page[data-calendar-design="c4"] .c4-dt-k{ width: 44px; color: var(--c4-ink3); font-weight: 400; }
.site-calendar-page[data-calendar-design="c4"] .c4-dt-v{ font-weight: 550; color: var(--c4-ink); }
.site-calendar-page[data-calendar-design="c4"] .c4-inp{ min-height: 44px; border: 1px solid var(--c4-field); border-radius: 10px; background: var(--c4-card); color: var(--c4-ink); font-size: 15px; }
.site-calendar-page[data-calendar-design="c4"] .c4-seg3{ gap: 2px; padding: 3px; border-radius: 10px; background: var(--c4-chip); }
.site-calendar-page[data-calendar-design="c4"] .c4-seg3-b{ min-height: 34px; border: 0; border-radius: 8px; background: transparent; color: var(--c4-ink3); font-size: 13.5px; font-weight: 600; }
.site-calendar-page[data-calendar-design="c4"] .c4-seg3-b[aria-pressed="true"]{ background: var(--c4-thumb); color: var(--c4-ink); box-shadow: 0 1px 3px rgba(16, 24, 40, .12); }
.site-calendar-page[data-calendar-design="c4"] .c4-cc{ min-height: 32px; padding: 0 11px; gap: 6px; border: 1px solid var(--c4-field); border-radius: 16px; background: var(--c4-card); color: var(--c4-ink2); font-size: 13px; font-weight: 600; }
.site-calendar-page[data-calendar-design="c4"] .c4-cc[aria-pressed="true"]{ border-color: var(--bar); box-shadow: inset 0 0 0 1px var(--bar); background: var(--c4-card); color: var(--c4-ink); }

@media (min-width: 901px) {
  /* PC 머리 한 줄: 캘린더 · 오늘 ‹ › 기간 · (빈칸) · 주/월/년/일정 · 설정 · + 일정 추가 */
  body.chat-home-page .consumer-workspace[data-workspace='calendar'] .site-calendar-page[data-calendar-design="c4"] > .site-modal-header{ display: flex; align-items: center; gap: 10px; min-height: 48px; margin: 4px 0 12px; }
  body.chat-home-page .consumer-workspace[data-workspace='calendar'] .site-calendar-page[data-calendar-design="c4"] > .site-modal-header h2{ order: 1; margin: 0 14px 0 0; }
  .site-calendar-page[data-calendar-design="c4"] > .site-modal-header .calendar-toolbar.c4-navr{ order: 2; flex: 1 1 auto; min-width: 0; gap: 4px; padding: 0; border: 0; }
  .site-calendar-page[data-calendar-design="c4"] > .site-modal-header .calendar-toolbar.c4-navr .calendar-title-button{ flex: 0 1 auto; min-height: 0; margin-left: 8px; padding: 0; }
  .site-calendar-page[data-calendar-design="c4"] > .site-modal-header .calendar-mode-tabs.c4-seg{ order: 3; width: 280px; flex: none; }
  .site-calendar-page[data-calendar-design="c4"] > .site-modal-header .calendar-modal-actions{ order: 4; margin-left: auto; }
  .site-calendar-page[data-calendar-design="c4"] .c4-rd-wd::after{ content: '요일'; }
  .site-calendar-page[data-calendar-design="c4"] .c4-rd-dots{ display: none; }
  .site-calendar-page[data-calendar-design="c4"] .c4-cal{ min-height: calc(100dvh - 146px); border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
  .site-calendar-page[data-calendar-design="c4"] .c4-wk{ min-height: calc(100dvh - 148px); }
  .site-calendar-page[data-calendar-design="c4"] .c4-mo-g{ grid-auto-rows: minmax(150px, 1fr); }
}

@media (max-width: 900px) {
  /* 휴대폰 웹: 사이트 줄(메뉴 · LOTBI · 로그인) 아래 '캘린더  설정 +' 한 줄 */
  body.chat-home-page .consumer-workspace[data-workspace='calendar'] .site-calendar-page[data-calendar-design="c4"] > .site-modal-header{ display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 50px; gap: 0; margin: 0; padding: 0; }
  .site-calendar-page[data-calendar-design="c4"] .calendar-site-bar{ grid-column: 1 / -1; grid-row: 1; display: flex; align-items: center; gap: 6px; height: 52px; padding: 0 12px 0 6px; border-bottom: 1px solid var(--c4-line); }
  .site-calendar-page[data-calendar-design="c4"] .calendar-site-menu{ display: inline-grid; place-items: center; width: 40px; height: 40px; margin: 0; padding: 0; border: 0; border-radius: 10px; background: transparent; color: var(--c4-ink2); cursor: pointer; }
  .site-calendar-page[data-calendar-design="c4"] .calendar-site-menu svg{ width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
  .site-calendar-page[data-calendar-design="c4"] .calendar-site-brand{ display: flex; align-items: center; text-decoration: none; }
  .site-calendar-page[data-calendar-design="c4"] .calendar-site-brand-logo{ width: auto; height: 28px; object-fit: contain; }
  .site-calendar-page[data-calendar-design="c4"] .calendar-site-login{ margin: 0 0 0 auto; height: 32px; padding: 0 12px; border: 0; border-radius: 16px; background: var(--c4-chip); color: var(--c4-ink); font-size: 13px; font-weight: 650; cursor: pointer; }
  body.chat-home-page .consumer-workspace[data-workspace='calendar'] .site-calendar-page[data-calendar-design="c4"] > .site-modal-header h2{ grid-column: 1; grid-row: 2; align-self: center; margin: 0; padding-left: 16px; font-size: 21px; }
  body.chat-home-page .consumer-workspace[data-workspace='calendar'] .site-calendar-page[data-calendar-design="c4"] .calendar-modal-actions{ grid-column: 2; grid-row: 2; align-self: center; gap: 2px; padding-right: 8px; }
  .site-calendar-page[data-calendar-design="c4"] .calendar-modal-actions .calendar-settings-button{ width: 40px; min-height: 40px; border: 0; background: transparent; }
  .site-calendar-page[data-calendar-design="c4"] .calendar-modal-actions .c4-pri{ width: 36px; min-height: 36px; height: 36px; margin-left: 4px; padding: 0; border-radius: 18px; }
  .site-calendar-page[data-calendar-design="c4"] .calendar-modal-actions .c4-pri .c4-btn-label{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .site-calendar-page[data-calendar-design="c4"] .calendar-modal-actions .c4-pri .c4-ico{ width: 20px; height: 20px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-phone-only{ display: inline; }

  /* 날짜·날씨: 회색 상자 두 줄 */
  .site-calendar-page[data-calendar-design="c4"] .calendar-product-shell[data-design="c4"]{ gap: 0; }
  .site-calendar-page[data-calendar-design="c4"] .c4-strip{ gap: 5px; margin: 2px 16px 10px; padding: 10px 14px; border: 0; border-radius: 12px; background: var(--c4-soft); }
  .site-calendar-page[data-calendar-design="c4"] .c4-strip-l{ flex-wrap: nowrap; gap: 8px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-sdate{ font-size: 16px; font-weight: 750; letter-spacing: -.3px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-pill{ min-height: 20px; height: 20px; padding: 0 7px; border-radius: 10px; font-size: 11.5px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-pill.today{ background: var(--c4-blue); color: var(--c4-on-blue); }
  .site-calendar-page[data-calendar-design="c4"] .c4-strip-l .c4-lunar{ font-size: 12.5px; color: var(--c4-ink3); }
  .site-calendar-page[data-calendar-design="c4"] .c4-strip-r{ gap: 6px; font-size: 13px; color: var(--c4-ink3); }
  .site-calendar-page[data-calendar-design="c4"] .c4-strip-r .c4-src{ margin-left: auto; }

  /* 카드: 위아래 선만, 보기 바꾸기는 회색 트랙 */
  .site-calendar-page[data-calendar-design="c4"] .c4-cal{ border: 0; border-radius: 0; background: var(--c4-card); }
  .site-calendar-page[data-calendar-design="c4"] .calendar-mode-tabs.c4-seg{ margin: 0 16px; padding: 3px; }
  .site-calendar-page[data-calendar-design="c4"] .calendar-mode-tabs.c4-seg .calendar-mode-tab{ min-height: 32px; font-size: 14px; }
  .site-calendar-page[data-calendar-design="c4"] .calendar-toolbar.c4-navr{ gap: 2px; height: 48px; padding: 0 10px 0 18px; border-bottom: 1px solid var(--c4-line); }
  .site-calendar-page[data-calendar-design="c4"] .calendar-toolbar.c4-navr .calendar-title-button{ min-height: 0; padding: 0; font-size: 19px; font-weight: 750; letter-spacing: -.4px; }
  .site-calendar-page[data-calendar-design="c4"] .calendar-toolbar.c4-navr .calendar-today-button{ min-height: 32px; height: 32px; margin: 0 2px; padding: 0 12px; border-radius: 8px; font-size: 13.5px; }

  /* 주: 세로 날짜 줄 58px | 그날 */
  .site-calendar-page[data-calendar-design="c4"] .c4-rail{ flex: 0 0 58px; gap: 0; padding: 0; border-right: 1px solid var(--c4-line); }
  /* 시안 06: 한 칸 66px이 기준이지만 화면이 낮으면 줄어 7일이 날짜 줄~가계부 줄 사이에 다 들어간다(최소 52px, 390×763에서 약 61px). */
  .site-calendar-page[data-calendar-design="c4"] .c4-rd{ position: relative; display: flex; flex: 0 0 auto; flex-direction: column; align-items: center; justify-content: center; gap: 1px; height: clamp(52px, calc((100dvh - 334px) / 7), 66px); min-height: 52px; padding: 0; border: 0; border-radius: 0; }
  .site-calendar-page[data-calendar-design="c4"] .c4-rd-num{ font-size: 19px; font-weight: 750; letter-spacing: -.4px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-rd-top{ flex-direction: column; gap: 0; }
  .site-calendar-page[data-calendar-design="c4"] .c4-rd-wd{ font-size: 11.5px; font-weight: 600; color: var(--c4-ink3); }
  .site-calendar-page[data-calendar-design="c4"] .c4-rd .c4-mini-today, .site-calendar-page[data-calendar-design="c4"] .c4-rd-meta, .site-calendar-page[data-calendar-design="c4"] .c4-rd-hol{ display: none; }
  .site-calendar-page[data-calendar-design="c4"] .c4-rd-dots{ display: flex; gap: 3px; height: 5px; margin-top: 3px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-rd[data-selected="true"]{ background: var(--c4-blue-soft); box-shadow: none; }
  .site-calendar-page[data-calendar-design="c4"] .c4-rd[data-selected="true"]::before{ content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 2px 2px 0; background: var(--c4-blue); }
  .site-calendar-page[data-calendar-design="c4"] .c4-rd[data-today="true"] .c4-rd-num{ color: var(--c4-blue-ink); }
  .site-calendar-page[data-calendar-design="c4"] .c4-dayv{ gap: 8px; padding: 12px 14px 12px 12px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-dayv-hd{ padding: 0 2px 2px; border: 0; }
  .site-calendar-page[data-calendar-design="c4"] .c4-dayv-tl{ display: none; }
  .site-calendar-page[data-calendar-design="c4"] .c4-dayv-s{ margin: 0; font-size: 13px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-slot{ gap: 8px; padding: 0; }
  .site-calendar-page[data-calendar-design="c4"] .c4-slot-t{ gap: 6px; padding: 4px 2px 0; font-size: 12.5px; font-weight: 650; color: var(--c4-ink2); }
  .site-calendar-page[data-calendar-design="c4"] .c4-slot-n{ padding: 0; background: transparent; font-size: 11.5px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-slot-evs{ gap: 8px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-gap{ padding: 2px; font-size: 11.5px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-ev{ padding: 10px 12px 10px 15px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-ev-t{ font-size: 14.5px; }
  /* 시안 06 휴대폰 주: 요약 19px · 시간 머리 21px · 카드 60px(제목 20px + 3px + 보조 줄 17px)로 7일 화면과 같은 높이. */
  .site-calendar-page[data-calendar-design="c4"] .c4-dayv-hd{ min-height: 0; margin: 0; line-height: 17px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-slot{ margin: 0; }
  .site-calendar-page[data-calendar-design="c4"] .c4-slot-t{ min-height: 0; line-height: 17px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-ev-t, .site-calendar-page[data-calendar-design="c4"] .c4-ev-amt{ line-height: 20px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-ev-amt{ font-size: 14px; }

  /* 월: 숫자 원 + 공휴일 이름 또는 점, 아래 그날 목록 */
  .site-calendar-page[data-calendar-design="c4"] .c4-mo-wd{ padding: 8px 6px 2px; border: 0; text-align: center; }
  .site-calendar-page[data-calendar-design="c4"] .c4-mo-wd > span{ padding: 0; font-size: 11.5px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-mo-g{ gap: 0; padding: 0 6px; border: 0; background: transparent; }
  .site-calendar-page[data-calendar-design="c4"] .c4-mc, .site-calendar-page[data-calendar-design="c4"] .c4-mc[data-selected="true"]{ align-items: center; gap: 1px; min-height: 54px; height: 54px; padding: 4px 0 0; border: 0; background: transparent; box-shadow: none; }
  .site-calendar-page[data-calendar-design="c4"] .c4-mc-top{ flex-direction: column; gap: 1px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-mc-num{ width: 30px; min-width: 30px; height: 30px; font-size: 15px; font-weight: 600; }
  .site-calendar-page[data-calendar-design="c4"] .c4-mc-hol{ font-size: 9.5px; line-height: 1; margin-top: -1px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-mc:has(.c4-mc-hol) .c4-mc-dots{ display: none; }
  .site-calendar-page[data-calendar-design="c4"] .c4-mc-dots{ gap: 2.5px; height: 5px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-mc-dots i{ width: 4.5px; height: 4.5px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-mc-dots b{ font-size: 9px; font-weight: 700; color: var(--c4-ink3); }
  .site-calendar-page[data-calendar-design="c4"] .c4-agenda{ gap: 0; margin-top: 4px; padding: 10px 16px 0; border-top: 1px solid var(--c4-line); }
  .site-calendar-page[data-calendar-design="c4"] .c4-agenda > .c4-dc-t{ display: none; }
  .site-calendar-page[data-calendar-design="c4"] .c4-agenda .c4-dc-s{ margin: 0 0 6px; font-size: 13px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-agenda .c4-dc-list{ gap: 0; margin: 0; }
  .site-calendar-page[data-calendar-design="c4"] .c4-agenda .c4-dc-ev{ grid-template-columns: 62px 3px minmax(0, 1fr) auto; gap: 10px; padding: 9px 0; }
  .site-calendar-page[data-calendar-design="c4"] .c4-agenda .c4-dc-ev:first-child{ border-top: 0; }
  .site-calendar-page[data-calendar-design="c4"] .c4-agenda .c4-dc-bar{ display: block; width: 3px; height: 28px; border-radius: 2px; background: var(--bar); }
  .site-calendar-page[data-calendar-design="c4"] .c4-agenda .c4-dc-time{ font-size: 12.5px; font-weight: 550; color: var(--c4-ink2); white-space: nowrap; }
  .site-calendar-page[data-calendar-design="c4"] .c4-agenda .c4-dc-tt{ font-size: 14.5px; font-weight: 650; }
  .site-calendar-page[data-calendar-design="c4"] .c4-agenda .c4-dc-cat{ font-size: 12px; font-weight: 600; }
  .site-calendar-page[data-calendar-design="c4"] .c4-agenda .c4-ev-amt{ font-size: 14px; }

  /* 년: 3칸 작은 달력 */
  .site-calendar-page[data-calendar-design="c4"] .c4-yr{ padding: 6px 8px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-yr-g{ grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px 4px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-ym, .site-calendar-page[data-calendar-design="c4"] .c4-ym[data-current="true"]{ padding: 7px 5px 6px; border-radius: 10px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-ym-hd{ gap: 4px; margin-bottom: 3px; padding: 0 2px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-ym-n{ font-size: 13.5px; line-height: 1.2; }
  .site-calendar-page[data-calendar-design="c4"] .c4-ym-a{ font-size: 10.5px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-ym-a.zero{ font-size: 10px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-ym-wd{ height: 13px; font-size: 8px; line-height: 13px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-ymd{ height: 15.5px; font-size: 9px; line-height: 15.5px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-ymd[data-has="true"]::after{ bottom: -1px; width: 3px; height: 3px; margin-left: -1.5px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-ymd[data-today="true"]::before{ top: .25px; width: 15px; height: 15px; margin-left: -7.5px; }

  /* 일정 목록 */
  .site-calendar-page[data-calendar-design="c4"] .c4-ls{ gap: 12px; padding: 12px 16px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-chips{ margin: 0; padding: 0; }
  .site-calendar-page[data-calendar-design="c4"] .c4-chip{ min-height: 32px; height: 32px; padding: 0 12px; font-size: 13px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-lg-hd{ padding: 2px 0 6px; font-size: 13px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-lr{ grid-template-columns: 66px 3px minmax(0, 1fr) auto; gap: 10px; padding: 10px 12px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-lr-time{ display: block; font-size: 12.5px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-lr-bar{ height: 28px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-lr-m{ font-size: 12px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-lr .c4-ev-amt{ font-size: 14px; }

  /* 아래 가계부 줄 */
  .site-calendar-page[data-calendar-design="c4"] .c4-dock-slot{ margin: 0; padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px)) 18px; border-top: 1px solid var(--c4-line); background: var(--c4-card); box-shadow: none; }
  .site-calendar-page[data-calendar-design="c4"] .c4-dock-k{ display: inline-flex; align-items: center; gap: 3px; font-size: 12.5px; font-weight: 600; color: var(--c4-ink3); }
  .site-calendar-page[data-calendar-design="c4"] .c4-dock-k .c4-ico{ width: 14px; height: 14px; stroke-width: 2.4; }
  .site-calendar-page[data-calendar-design="c4"] .c4-dock-v{ font-size: 20px; font-weight: 800; letter-spacing: -.4px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-dock .c4-btn{ min-height: 40px; height: 40px; }

  /* 시트 */
  .site-calendar-page[data-calendar-design="c4"] .c4-dlg, .site-calendar-page[data-calendar-design="c4"] .c4-dlg.c4-ledger-dlg, .site-calendar-page[data-calendar-design="c4"] .c4-dlg.c4-photo-dlg{ border-radius: 14px 14px 0 0; }
  .site-calendar-page[data-calendar-design="c4"] .c4-dlg::before{ width: 38px; height: 5px; margin: 7px auto 0; background: var(--c4-field); }
  .site-calendar-page[data-calendar-design="c4"] .c4-dlg-hd{ padding: 10px 8px 6px 18px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-dlg-bd{ gap: 12px; padding: 6px 16px 16px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-dlg-ft{ padding: 10px 16px calc(8px + env(safe-area-inset-bottom, 0px)); }
  .site-calendar-page[data-calendar-design="c4"] .c4-dlg-ft .c4-btn{ min-height: 48px; border-radius: 12px; font-size: 15.5px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-tab2-v{ font-size: 19px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-lc-g{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 18px; margin-top: 10px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-ledger-dlg .c4-rule{ display: none; }
  .site-calendar-page[data-calendar-design="c4"] .c4-pay-act .c4-amt-inp, .site-calendar-page[data-calendar-design="c4"] .c4-pay-act .c4-amt-u{ display: none; }
  .site-calendar-page[data-calendar-design="c4"] .c4-pay-act .c4-btn{ width: 100%; min-height: 46px; margin: 0; }
}

/* CALENDAR-DESIGN-06 시안 대조 뒤 고침(같은 커밋에서 시안 옆에 놓고 맞춤) */
.site-calendar-page[data-calendar-design="c4"] .c4-gear{ stroke-width: 1.8; }
.site-calendar-page[data-calendar-design="c4"] .c4-dlg-backdrop[data-editor-presentation="CENTER"]{ align-items: center; }
.site-calendar-page[data-calendar-design="c4"] .c4-dlg-ft .c4-btn.c4-ghost{ border-color: transparent; background: transparent; color: var(--c4-ink2); }
.site-calendar-page[data-calendar-design="c4"] .c4-lsum, .site-calendar-page[data-calendar-design="c4"] .c4-ledger-dlg .c4-lsum{ display: flex; flex-direction: column; gap: 14px; order: 0; margin: 0; padding: 0; }
.site-calendar-page[data-calendar-design="c4"] .c4-lsum-hd{ display: none; }
.site-calendar-page[data-calendar-design="c4"] .c4-tab2[aria-pressed="true"]{ background: var(--c4-card); }
.site-calendar-page[data-calendar-design="c4"] .c4-tab2[aria-pressed="true"] .c4-tab2-k{ color: var(--c4-ink3); }
.site-calendar-page[data-calendar-design="c4"] .c4-led-ft .c4-rule{ padding: 0; border: 0; background: transparent; }
@media (min-width: 901px) {
  .site-calendar-page[data-calendar-design="c4"] .c4-dlg.c4-ledger-dlg{ width: min(560px, calc(100vw - 32px)); }
  .site-calendar-page[data-calendar-design="c4"] .c4-dlg.c4-detail{ width: min(480px, calc(100vw - 32px)); }
  .site-calendar-page[data-calendar-design="c4"] .c4-mo{ min-height: calc(100dvh - 146px); }
  .site-calendar-page[data-calendar-design="c4"] .c4-mo-g{ flex: 1 1 auto; grid-auto-rows: minmax(150px, 1fr); }
}
@media (max-width: 900px) {
  body.chat-home-page .consumer-workspace[data-workspace='calendar']{ background: var(--c4-card); }
  .site-calendar-page[data-calendar-design="c4"] .c4-slot{ align-items: stretch; }
  .site-calendar-page[data-calendar-design="c4"] .c4-strip-l, .site-calendar-page[data-calendar-design="c4"] .c4-strip-r{ min-height: 0; line-height: 1.35; }
  .site-calendar-page[data-calendar-design="c4"] .c4-ledger-dlg .c4-dlg-copy{ display: none; }
  .site-calendar-page[data-calendar-design="c4"] .c4-ledger-dlg .c4-lsum-hd{ display: flex; flex: 1; flex-direction: column; gap: 2px; padding-top: 6px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-ledger-dlg .c4-lsum-hd .c4-lc-cap{ font-size: 13px; font-weight: 600; color: var(--c4-ink3); }
  .site-calendar-page[data-calendar-design="c4"] .c4-ledger-dlg .c4-lsum-hd .c4-lc-num{ font-size: 30px; font-weight: 800; letter-spacing: -.6px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-dlg-backdrop[data-editor-presentation="SHEET"] .c4-dlg.c4-ledger-dlg{ height: calc(100dvh - 73px); max-height: calc(100dvh - 73px); }
}

.site-calendar-page[data-calendar-design="c4"] .c4-lc-g .c4-lc-i{ flex-direction: row; justify-content: flex-start; gap: 0; padding: 0; border: 0; }
@media (max-width: 900px) {
  /* 시안 06: 휴대폰은 캘린더가 화면 끝까지(작업 공간 좌우·위 여백 0). 음수 여백은 넘침을 만든다. */
  body.chat-home-page .consumer-workspace[data-workspace='calendar']:has(.site-calendar-page[data-calendar-design="c4"]){ padding: 0; }
  body.chat-home-page .consumer-workspace[data-workspace='calendar'] > .site-modal.site-calendar-page[data-calendar-design="c4"]{ margin-top: 0; padding-top: 0; }
}

/* CALENDAR-DESIGN-06: 일정 추가 창 */
.site-calendar-page[data-calendar-design="c4"] .c4-dlg.c4-editor .calendar-editor-header h3{ font-size: 19px; font-weight: 750; letter-spacing: -.3px; color: var(--c4-ink); }
.site-calendar-page[data-calendar-design="c4"] .c4-editor .calendar-editor-body{ gap: 14px; }
.site-calendar-page[data-calendar-design="c4"] .c4-editor .calendar-editor-title-field{ display: flex; flex-direction: column; gap: 6px; }
.site-calendar-page[data-calendar-design="c4"] .c4-editor .calendar-editor-title-field > span, .site-calendar-page[data-calendar-design="c4"] .c4-editor .c4-flab{ font-size: 12.5px; font-weight: 650; color: var(--c4-ink3); }
.site-calendar-page[data-calendar-design="c4"] .c4-editor .c4-auto{ margin-left: 4px; padding: 0; background: transparent; color: var(--c4-blue-ink); font-size: 12.5px; font-weight: 600; }
.site-calendar-page[data-calendar-design="c4"] .c4-editor .calendar-editor-title{ height: 50px; min-height: 50px; padding: 0 14px; border: 1px solid var(--c4-field); border-radius: 10px; background: var(--c4-card); color: var(--c4-ink); font-size: 18px; font-weight: 600; }
.site-calendar-page[data-calendar-design="c4"] .c4-editor .calendar-editor-title:focus{ border-color: var(--c4-blue); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--c4-blue) 22%, transparent); }
.site-calendar-page[data-calendar-design="c4"] .c4-editor .c4-when{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 12px; align-items: start; }
.site-calendar-page[data-calendar-design="c4"] .c4-editor .c4-when-date, .site-calendar-page[data-calendar-design="c4"] .c4-editor .c4-when-time{ display: flex; flex-direction: column; gap: 6px; }
.site-calendar-page[data-calendar-design="c4"] .c4-editor .c4-when-head{ min-height: 0; }
.site-calendar-page[data-calendar-design="c4"] .c4-editor .calendar-editor-date-chip{ display: flex; align-items: center; gap: 8px; width: 100%; height: 44px; min-height: 44px; padding: 0 12px; border: 1px solid var(--c4-field); border-radius: 10px; background: var(--c4-card); color: var(--c4-ink); font-size: 14.5px; font-weight: 400; }
.site-calendar-page[data-calendar-design="c4"] .c4-editor .calendar-editor-date-chip .c4-ico{ width: 17px; height: 17px; color: var(--c4-ink3); }
.site-calendar-page[data-calendar-design="c4"] .c4-editor .c4-time{ display: flex; align-items: center; gap: 8px; }
.site-calendar-page[data-calendar-design="c4"] .c4-editor .calendar-editor-time, .site-calendar-page[data-calendar-design="c4"] .c4-editor .calendar-editor-end-time{ width: 100px; flex: none; height: 44px; min-height: 44px; padding: 0 12px; border: 1px solid var(--c4-field); border-radius: 10px; background: var(--c4-card); color: var(--c4-ink); font-size: 14.5px; font-weight: 400; }
.site-calendar-page[data-calendar-design="c4"] .c4-editor .c4-dash{ color: var(--c4-ink4); }
.site-calendar-page[data-calendar-design="c4"] .c4-editor .c4-allday-row{ display: flex; justify-content: flex-end; margin-top: -4px; }
.site-calendar-page[data-calendar-design="c4"] .c4-editor .c4-allday-row .c4-switch{ display: inline-flex; align-items: center; gap: 8px; min-height: 0; padding: 0; border: 0; background: transparent; color: var(--c4-ink2); font-size: 14px; }
.site-calendar-page[data-calendar-design="c4"] .c4-editor .c4-allday-row .c4-sw{ position: relative; width: 38px; height: 22px; border-radius: 11px; background: var(--c4-field); }
.site-calendar-page[data-calendar-design="c4"] .c4-editor .c4-allday-row .c4-sw::after{ content: ''; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); }
.site-calendar-page[data-calendar-design="c4"] .c4-editor .c4-allday-row .c4-switch[aria-pressed="true"] .c4-sw{ background: var(--c4-blue); }
.site-calendar-page[data-calendar-design="c4"] .c4-editor .c4-allday-row .c4-switch[aria-pressed="true"] .c4-sw::after{ left: 19px; }
.site-calendar-page[data-calendar-design="c4"] .c4-editor .c4-opts{ display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--c4-line); border-radius: 12px; }
.site-calendar-page[data-calendar-design="c4"] .c4-editor .c4-opt{ display: flex; align-items: center; gap: 12px; width: 100%; height: 50px; min-height: 50px; margin: 0; padding: 0 14px; border: 0; border-top: 1px solid var(--c4-line); border-radius: 0; background: transparent; color: var(--c4-ink); font-size: 14.5px; font-weight: 400; }
.site-calendar-page[data-calendar-design="c4"] .c4-editor .c4-opts > .c4-opt:first-child{ border-top: 0; }
.site-calendar-page[data-calendar-design="c4"] .c4-editor .c4-opt > .c4-ico:first-child{ width: 19px; height: 19px; color: var(--c4-ink3); }
.site-calendar-page[data-calendar-design="c4"] .c4-editor .c4-opt-l{ font-weight: 400; color: var(--c4-ink); }
.site-calendar-page[data-calendar-design="c4"] .c4-editor .c4-opt-v{ margin-left: auto; font-size: 14px; font-weight: 400; color: var(--c4-ink3); }
.site-calendar-page[data-calendar-design="c4"] .c4-editor .c4-opt[data-filled="true"] .c4-opt-v{ font-weight: 650; color: var(--c4-ink); }
.site-calendar-page[data-calendar-design="c4"] .c4-editor .c4-opt-ch{ width: 16px; height: 16px; color: var(--c4-ink4); }
.site-calendar-page[data-calendar-design="c4"] .c4-editor .c4-opt[aria-expanded="true"] .c4-opt-ch{ display: none; }
.site-calendar-page[data-calendar-design="c4"] .c4-editor .calendar-editor-amount-control{ display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 14px; border: 0; border-top: 1px solid var(--c4-line); border-radius: 0; background: var(--c4-soft); }
.site-calendar-page[data-calendar-design="c4"] .c4-editor .calendar-editor-amount-control[hidden]{ display: none; }
.site-calendar-page[data-calendar-design="c4"] .c4-editor .calendar-editor-amount-control .calendar-editor-section-label{ display: none; }
.site-calendar-page[data-calendar-design="c4"] .c4-editor .calendar-editor-amount-box{ display: flex; align-items: center; gap: 8px; }
.site-calendar-page[data-calendar-design="c4"] .c4-editor .calendar-editor-amount{ flex: 1; height: 44px; min-height: 44px; padding: 0 14px; border: 1px solid var(--c4-field); border-radius: 10px; background: var(--c4-card); color: var(--c4-ink); font-size: 18px; font-weight: 700; text-align: right; }
.site-calendar-page[data-calendar-design="c4"] .c4-editor .calendar-editor-amount-unit{ font-size: 15px; font-weight: 400; color: var(--c4-ink3); }
.site-calendar-page[data-calendar-design="c4"] .c4-editor .calendar-editor-category-sheet{ display: flex; flex-wrap: wrap; gap: 6px; }
.site-calendar-page[data-calendar-design="c4"] .c4-editor .calendar-editor-category-choice{ display: inline-flex; align-items: center; gap: 6px; height: 32px; min-height: 32px; padding: 0 11px; border: 1px solid var(--c4-field); border-radius: 16px; background: var(--c4-card); color: var(--c4-ink2); font-size: 13px; font-weight: 600; }
.site-calendar-page[data-calendar-design="c4"] .c4-editor .calendar-editor-category-choice[aria-pressed="true"]{ border-color: var(--bar, var(--c4-blue)); box-shadow: inset 0 0 0 1px var(--bar, var(--c4-blue)); color: var(--c4-ink); }
.site-calendar-page[data-calendar-design="c4"] .c4-editor .calendar-editor-category-choice[data-category="UNCLASSIFIED"], .site-calendar-page[data-calendar-design="c4"] .c4-editor .calendar-editor-category-choice[data-category=""]{ display: none; }
.site-calendar-page[data-calendar-design="c4"] .c4-editor .calendar-editor-money-hint{ display: flex; align-items: flex-start; gap: 6px; margin: 0; padding: 0; border: 0; background: transparent; color: var(--c4-ink3); font-size: 12.5px; }
.site-calendar-page[data-calendar-design="c4"] .c4-editor .calendar-editor-money-hint[hidden]{ display: none; }
.site-calendar-page[data-calendar-design="c4"] .c4-editor .calendar-editor-money-hint .c4-ico{ width: 15px; height: 15px; margin-top: 1px; }
.site-calendar-page[data-calendar-design="c4"] .c4-editor .calendar-editor-actions .calendar-editor-cancel{ min-height: 40px; padding: 0 16px; border: 0; background: transparent; color: var(--c4-ink2); font-size: 14.5px; font-weight: 650; }
.site-calendar-page[data-calendar-design="c4"] .c4-editor .calendar-editor-actions .calendar-editor-save{ min-width: 96px; min-height: 40px; border-radius: 10px; background: var(--c4-blue); color: var(--c4-on-blue); font-size: 14.5px; font-weight: 650; }
@media (min-width: 901px) {
  .site-calendar-page[data-calendar-design="c4"] .c4-dlg.c4-editor{ width: min(560px, calc(100vw - 32px)); }
}
.site-calendar-page[data-calendar-design="c4"] .c4-lr-t{ line-height: 1.35; }
.site-calendar-page[data-calendar-design="c4"] .c4-lr-m{ line-height: 1.3; }

.site-calendar-page[data-calendar-design="c4"] .c4-lr-time-s{ display: none; }
@media (max-width: 900px) {
  .site-calendar-page[data-calendar-design="c4"] .c4-lr-time-l{ display: none; }
  .site-calendar-page[data-calendar-design="c4"] .c4-lr-time-s{ display: inline; }
  .site-calendar-page[data-calendar-design="c4"] .c4-ledger-dlg .c4-lc-bar{ display: none; }
}

/* CALENDAR-DESIGN-06: 사진 확인 창 */
.site-calendar-page[data-calendar-design="c4"] .c4-pgrid{ grid-template-columns: 330px minmax(0, 1fr); gap: 22px; }
.site-calendar-page[data-calendar-design="c4"] .c4-photo{ position: relative; display: block; height: 470px; margin: 0; padding: 0; overflow: hidden; border-radius: 12px; background: #4a4238; }
.site-calendar-page[data-calendar-design="c4"] .c4-photo-img{ display: block; width: 100%; height: 100%; max-height: none; object-fit: cover; border-radius: 0; background: transparent; }
.site-calendar-page[data-calendar-design="c4"] .c4-photo-cap{ position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; align-items: center; justify-content: space-between; color: #fff; font-size: 12.5px; text-shadow: 0 1px 2px rgba(0, 0, 0, .35); }
.site-calendar-page[data-calendar-design="c4"] .c4-photo-cap .c4-btn{ min-height: 34px; border: 0; background: rgba(255, 255, 255, .92); color: #222; text-shadow: none; }
.site-calendar-page[data-calendar-design="c4"] .c4-found{ display: flex; flex-direction: column; gap: 12px; }
.site-calendar-page[data-calendar-design="c4"] .c4-found-s{ gap: 8px; font-size: 14px; font-weight: 600; color: var(--c4-ink); }
.site-calendar-page[data-calendar-design="c4"] .c4-found-s .c4-ico{ width: 20px; height: 20px; }
.site-calendar-page[data-calendar-design="c4"] .c4-fc, .site-calendar-page[data-calendar-design="c4"] .c4-fc[data-off="true"]{ gap: 10px; padding: 12px 14px; border: 1px solid var(--c4-line); border-radius: 12px; }
.site-calendar-page[data-calendar-design="c4"] .c4-fc-hd{ gap: 8px; }
.site-calendar-page[data-calendar-design="c4"] .c4-fc-t{ flex: 0 0 auto; font-size: 14.5px; font-weight: 700; }
.site-calendar-page[data-calendar-design="c4"] .c4-fc-kind{ margin-left: 4px; }
.site-calendar-page[data-calendar-design="c4"] .c4-fc .c4-cb{ width: 20px; height: 20px; margin: 0; accent-color: var(--c4-blue); }
.site-calendar-page[data-calendar-design="c4"] .c4-fg{ grid-template-columns: 1fr 1fr; gap: 10px; }
.site-calendar-page[data-calendar-design="c4"] .c4-fld{ gap: 6px; }
.site-calendar-page[data-calendar-design="c4"] .c4-flab{ font-size: 12.5px; font-weight: 650; }
.site-calendar-page[data-calendar-design="c4"] .c4-found > .c4-fc:first-of-type .c4-fld.span2 > .c4-flab,
.site-calendar-page[data-calendar-design="c4"] .c4-fld:has(.c4-seg2) > .c4-flab,
.site-calendar-page[data-calendar-design="c4"] .c4-fld:has(.c4-cats) > .c4-flab{ display: none; }
.site-calendar-page[data-calendar-design="c4"] .c4-fc .c4-inp{ height: 40px; min-height: 40px; padding: 0 12px; font-size: 14px; }
.site-calendar-page[data-calendar-design="c4"] .c4-fc .c4-amt{ display: flex; align-items: center; gap: 8px; }
.site-calendar-page[data-calendar-design="c4"] .c4-fc .c4-amt-inp{ text-align: right; font-weight: 700; }
.site-calendar-page[data-calendar-design="c4"] .c4-fc .c4-amt-u{ font-size: 15px; color: var(--c4-ink3); }
.site-calendar-page[data-calendar-design="c4"] .c4-fc .c4-hint{ display: flex; align-items: flex-start; gap: 6px; margin: 0; padding: 0; border: 0; background: transparent; font-size: 12.5px; color: var(--c4-ink3); }
.site-calendar-page[data-calendar-design="c4"] .c4-fc .c4-hint[hidden]{ display: none; }
.site-calendar-page[data-calendar-design="c4"] .c4-fc .c4-hint .c4-ico{ width: 15px; height: 15px; margin-top: 1px; }
.site-calendar-page[data-calendar-design="c4"] .c4-keep{ margin: 0; font-size: 12px; color: var(--c4-ink4); }
/* CALENDAR-LEASE-CONTRACT-01: the lease facts read from a photo (보증금 · 월세 · 계약 기간). */
.site-calendar-page[data-calendar-design="c4"] .c4-lease-facts{ display: grid; gap: 6px; margin: 0; padding: 12px 14px; border: 1px solid var(--c4-line); border-radius: 12px; background: var(--c4-card); }
.site-calendar-page[data-calendar-design="c4"] .c4-lease-row{ display: flex; justify-content: space-between; gap: 12px; min-width: 0; }
.site-calendar-page[data-calendar-design="c4"] .c4-lease-row dt{ flex-shrink: 0; font-size: 13.5px; color: var(--c4-ink3); }
.site-calendar-page[data-calendar-design="c4"] .c4-lease-row dd{ margin: 0; min-width: 0; text-align: right; font-size: 14px; font-weight: 700; color: var(--c4-ink); overflow-wrap: anywhere; }
.site-calendar-page[data-calendar-design="c4"] .c4-photo-dlg .c4-ft-note{ font-size: 14px; color: var(--c4-ink3); }
/* 시안 06 사진 확인 높이 맞춤: 칸 40px, 찾은 줄 20px, 카드 머리 21px, 창 머리 84px. */
body.chat-home-page .site-calendar-page[data-calendar-design="c4"] .c4-dlg.c4-photo-dlg .c4-fc .c4-inp, body.chat-home-page .site-calendar-page[data-calendar-design="c4"] .c4-dlg.c4-photo-dlg .c4-fc .c4-sel{ height: 40px; min-height: 40px; padding: 0 12px; }
.site-calendar-page[data-calendar-design="c4"] .c4-photo-dlg .c4-found-s{ min-height: 0; line-height: 20px; }
.site-calendar-page[data-calendar-design="c4"] .c4-photo-dlg .c4-fc-hd{ min-height: 0; height: 21px; line-height: 21px; }
.site-calendar-page[data-calendar-design="c4"] .c4-photo-dlg .c4-keep{ line-height: 17px; }
body.chat-home-page .site-calendar-page[data-calendar-design="c4"] .c4-dlg.c4-photo-dlg.calendar-photo-confirm-dialog{ padding: 0; gap: 0; }
.site-calendar-page[data-calendar-design="c4"] .c4-dlg.c4-photo-dlg .c4-dlg-hd{ padding-bottom: 9px; }
.site-calendar-page[data-calendar-design="c4"] .c4-photo-dlg .c4-flab{ line-height: 17px; }
.site-calendar-page[data-calendar-design="c4"] .c4-photo-dlg .c4-sel{ appearance: none; -webkit-appearance: none; background-image: none; }
@media (min-width: 901px) {
  .site-calendar-page[data-calendar-design="c4"] .c4-dlg.c4-photo-dlg{ width: min(920px, calc(100vw - 32px)); }
}
@media (max-width: 900px) {
  /* The desktop photo column must not override the earlier mobile grid. */
  .site-calendar-page[data-calendar-design="c4"] .c4-photo-dlg .c4-pgrid{ grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-photo{ display: flex; height: auto; align-items: center; gap: 12px; padding: 10px; border-radius: 12px; background: var(--c4-soft); }
  .site-calendar-page[data-calendar-design="c4"] .c4-photo-img{ width: 54px; height: 64px; border-radius: 8px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-photo-cap{ position: static; flex: 1; color: var(--c4-ink); text-shadow: none; }
  .site-calendar-page[data-calendar-design="c4"] .c4-photo-cap .c4-btn{ border: 1px solid var(--c4-field); background: var(--c4-card); color: var(--c4-ink); }
}


/* CALENDAR-DESIGN-06: 보기 전환·날짜 이동은 캘린더 안에 있고, 넓은 화면은 머리 줄 높이에 겹쳐 놓는다. */
.site-calendar-page[data-calendar-design="c4"] .calendar-toolbar.c4-navr .calendar-title-button{ order: 1; }
.site-calendar-page[data-calendar-design="c4"] .calendar-toolbar.c4-navr .calendar-nav-button[data-calendar-navigation="previous"]{ order: 2; }
.site-calendar-page[data-calendar-design="c4"] .calendar-toolbar.c4-navr .calendar-today-button{ order: 3; }
.site-calendar-page[data-calendar-design="c4"] .calendar-toolbar.c4-navr .calendar-nav-button[data-calendar-navigation="next"]{ order: 4; }
@media (min-width: 901px) {
  body.chat-home-page .consumer-workspace[data-workspace='calendar'] > .site-modal.site-calendar-page[data-calendar-design="c4"]{ position: relative; }
  .site-calendar-page[data-calendar-design="c4"] .calendar-product-shell[data-design="c4"], .site-calendar-page[data-calendar-design="c4"] .c4-cols, .site-calendar-page[data-calendar-design="c4"] .c4-cal{ position: static; }
  .site-calendar-page[data-calendar-design="c4"] .c4-cal > .calendar-mode-tabs.c4-seg{ position: absolute; z-index: 3; top: 9px; right: calc(var(--c4-head-actions-w, 160px) + 10px); width: 280px; margin: 0; }
  .site-calendar-page[data-calendar-design="c4"] .c4-cal > .calendar-toolbar.c4-navr{ position: absolute; z-index: 3; top: 10px; left: calc(var(--c4-head-title-w, 66px) + 24px); height: 36px; gap: 4px; padding: 0; border: 0; background: transparent; }
  .site-calendar-page[data-calendar-design="c4"] .c4-cal > .calendar-toolbar.c4-navr .calendar-today-button{ order: 1; }
  .site-calendar-page[data-calendar-design="c4"] .c4-cal > .calendar-toolbar.c4-navr .calendar-nav-button[data-calendar-navigation="previous"]{ order: 2; }
  .site-calendar-page[data-calendar-design="c4"] .c4-cal > .calendar-toolbar.c4-navr .calendar-nav-button[data-calendar-navigation="next"]{ order: 3; }
  .site-calendar-page[data-calendar-design="c4"] .c4-cal > .calendar-toolbar.c4-navr .calendar-title-button{ order: 4; flex: 0 1 auto; min-height: 0; margin-left: 8px; padding: 0; }
}


/* 시안 모양(+ 36px 원, 사진 단추 40px)은 그대로, 누르는 영역은 44px(투명 테두리). */
@media (max-width: 900px) {
  .site-calendar-page[data-calendar-design="c4"] .calendar-modal-actions .c4-pri{ width: 44px; min-height: 44px; height: 44px; margin-left: 0; border: 4px solid transparent; border-radius: 50%; background-clip: padding-box; }
  .site-calendar-page[data-calendar-design="c4"] .calendar-modal-actions .calendar-settings-button{ width: 44px; min-height: 44px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-dock .c4-btn{ min-height: 44px; height: 44px; border: 2px solid transparent; background-clip: padding-box; box-shadow: inset 0 0 0 1px var(--c4-field); }
}

@media (min-width: 901px) {
  .site-calendar-page[data-calendar-design="c4"] .calendar-modal-actions .c4-pri{ min-height: 44px; height: 44px; border: 2px solid transparent; background-clip: padding-box; }
  .site-calendar-page[data-calendar-design="c4"] .c4-lbar .c4-btn.c4-sec{ min-height: 44px; height: 44px; border: 5px solid transparent; background-clip: padding-box; box-shadow: inset 0 0 0 1px var(--c4-field); }
}


/* 시안 06-1: 합계 옆 얇은 분류 색 막대(누르는 영역 44px, 보이는 막대 8px). 휴대폰은 아래 줄 그대로. */
.site-calendar-page[data-calendar-design="c4"] .c4-lbar-mix{ display: flex; align-items: center; gap: 2px; width: 160px; min-height: 44px; margin: 0; padding: 0; border: 0; background: transparent; cursor: pointer; }
.site-calendar-page[data-calendar-design="c4"] .c4-lbar-mix i{ flex: 1 1 0; min-width: 0; height: 8px; background: var(--bar); }
.site-calendar-page[data-calendar-design="c4"] .c4-lbar-mix i:first-child{ border-radius: 4px 0 0 4px; }
.site-calendar-page[data-calendar-design="c4"] .c4-lbar-mix i:last-child{ border-radius: 0 4px 4px 0; }
.site-calendar-page[data-calendar-design="c4"] .c4-lbar-mix i:only-child{ border-radius: 4px; }
.site-calendar-page[data-calendar-design="c4"] .c4-lbar-mix:focus-visible{ outline: 3px solid color-mix(in srgb, var(--c4-blue) 55%, transparent); outline-offset: 2px; border-radius: 6px; }

/* ── 운영 확인 수정 01 (2026-10-18, 소유자 지시) ─────────────────────────────
   1) 날씨 아이콘 가독성: 위치·모양은 시안 06 그대로, 한 단계 크게·선 굵게.
      구름 = 진한 회색(--c4-ink2), 비·눈 = 파랑(--c4-travel), 해 = 노랑(--c4-amber) 유지. 라이트·다크 같은 규칙(변수가 테마를 따름). */
.site-calendar-page[data-calendar-design="c4"] .c4-wx-svg{ stroke-width: 2.3; }
.site-calendar-page[data-calendar-design="c4"] .c4-wx-svg .c4-wx-cloud{ stroke: var(--c4-ink2); }
.site-calendar-page[data-calendar-design="c4"] .c4-wx-svg .c4-wx-drop{ stroke: var(--c4-travel); stroke-width: 2.5; }
.site-calendar-page[data-calendar-design="c4"] .c4-wx-svg .c4-wx-sun{ stroke: var(--c4-amber); }
.site-calendar-page[data-calendar-design="c4"] .c4-mc-wx{ font-size: 12px; color: var(--c4-ink2); }
.site-calendar-page[data-calendar-design="c4"] .c4-mc-wx .c4-wx-svg{ width: 18px; height: 18px; }
/* 주간 오른쪽 위 현재 날씨도 같은 크기·진하기(PC 20px, 휴대폰 18px). */
.site-calendar-page[data-calendar-design="c4"] .c4-wx-ic.c4-wx-svg{ width: 20px; height: 20px; }
@media (max-width: 900px) {
  .site-calendar-page[data-calendar-design="c4"] .c4-wx-ic.c4-wx-svg{ width: 18px; height: 18px; }
}
/* 2) 좁은 칸 공휴일: 이름이 칸에 다 안 들어가면(JS가 data-hol-compact) 이름 대신 빨간 점.
      이름은 날짜를 누르면 팝업 머리(PC)·달력 아래 목록 머리(휴대폰·태블릿)에 나온다. */
.site-calendar-page[data-calendar-design="c4"] .c4-mc[data-hol-compact="true"] .c4-mc-hol{ flex: none; width: 7px; height: 7px; min-width: 7px; padding: 0; overflow: hidden; border-radius: 50%; background: var(--c4-red); color: transparent; font-size: 0; line-height: 0; }
.site-calendar-page[data-calendar-design="c4"] .c4-pop-hol{ margin-left: 8px; font-size: 13px; font-weight: 700; color: var(--c4-red); }
.site-calendar-page[data-calendar-design="c4"] .c4-agenda .c4-agenda-hol{ display: none; }
.site-calendar-page[data-calendar-design="c4"] .c4-mo:has(.c4-mc[data-selected="true"][data-hol-compact="true"]) .c4-agenda .c4-agenda-hol{ display: inline; }
/* 4) 좁은 PC(901~1199px): 기간 제목이 주·월·년·일정 전환에 붙어 겹치지 않게, 전환 단추는 카드 맨 위 둘째 줄로.
      제목은 오른쪽 단추 앞에서 멈추고, 그래도 좁으면 글자를 줄이고 말줄임. */
@media (min-width: 901px) and (max-width: 1199px) {
  .site-calendar-page[data-calendar-design="c4"] .c4-cal > .calendar-mode-tabs.c4-seg{ position: static; width: 280px; margin: 12px 16px 4px auto; }
  .site-calendar-page[data-calendar-design="c4"] .c4-cal > .calendar-toolbar.c4-navr{ right: calc(var(--c4-head-actions-w, 160px) + 16px); min-width: 0; }
  .site-calendar-page[data-calendar-design="c4"] .c4-cal > .calendar-toolbar.c4-navr .calendar-title-button{ flex: 0 1 auto; min-width: 0; overflow: hidden; font-size: 18px; text-overflow: ellipsis; white-space: nowrap; }
}
/* 5) 좁은 PC(901~1199px) 가계부 줄: 'N월 지출'·'내역 보기'가 두 줄로 꺾이지 않게 한 줄 유지.
      분류 색 막대가 먼저 줄고(160px → 최소 56px), 예정 안내는 말줄임. 금액·내역 보기·사진 단추는 줄지 않음. */
@media (min-width: 901px) and (max-width: 1199px) {
  .site-calendar-page[data-calendar-design="c4"] .c4-lbar{ gap: 12px; padding-left: 14px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-lbar-tot, .site-calendar-page[data-calendar-design="c4"] .c4-lbar-link, .site-calendar-page[data-calendar-design="c4"] .c4-lbar .c4-btn.c4-sec{ flex: none; white-space: nowrap; }
  .site-calendar-page[data-calendar-design="c4"] .c4-lbar-k{ white-space: nowrap; }
  .site-calendar-page[data-calendar-design="c4"] .c4-lbar-mix{ flex: 0 1 160px; width: auto; min-width: 56px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-lbar-plan{ display: block; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .site-calendar-page[data-calendar-design="c4"] .c4-lbar-plan::before{ display: inline-block; vertical-align: middle; }
  .site-calendar-page[data-calendar-design="c4"] .c4-lbar-plan .c4-tag{ vertical-align: middle; }
}
/* 넓은 PC에서도 제목과 전환 단추 사이에 최소 12px. */
@media (min-width: 1200px) {
  .site-calendar-page[data-calendar-design="c4"] .c4-cal > .calendar-toolbar.c4-navr{ right: calc(var(--c4-head-actions-w, 160px) + 10px + 280px + 12px); min-width: 0; }
  .site-calendar-page[data-calendar-design="c4"] .c4-cal > .calendar-toolbar.c4-navr .calendar-title-button{ min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
/* ── 사진 흐름 01 (2026-10-18): 여러 장·확인 표시·같은 기록 경고·제안·다시 시도 ───────────── */
.site-calendar-page[data-calendar-design="c4"] .c4-photo-panel[hidden]{ display: none; }
.site-calendar-page[data-calendar-design="c4"] .c4-photo-tabs{ display: flex; flex-wrap: wrap; gap: 6px; }
.site-calendar-page[data-calendar-design="c4"] .c4-photo-tab{ display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px; min-width: 88px; min-height: 44px; padding: 6px 12px; border: 1px solid var(--c4-line); border-radius: 10px; background: var(--c4-card); color: var(--c4-ink); text-align: left; cursor: pointer; }
.site-calendar-page[data-calendar-design="c4"] .c4-photo-tab[aria-selected="true"]{ border-color: var(--c4-blue); box-shadow: inset 0 0 0 1px var(--c4-blue); }
.site-calendar-page[data-calendar-design="c4"] .c4-photo-tab-n{ font-size: 13.5px; font-weight: 700; }
.site-calendar-page[data-calendar-design="c4"] .c4-photo-tab-s{ font-size: 12px; color: var(--c4-ink3); }
.site-calendar-page[data-calendar-design="c4"] .c4-photo-tab[data-photo-state="check"] .c4-photo-tab-s, .site-calendar-page[data-calendar-design="c4"] .c4-photo-tab[data-photo-state="failed"] .c4-photo-tab-s{ color: var(--c4-amber-ink, #9a5b00); font-weight: 650; }
.site-calendar-page[data-calendar-design="c4"] .c4-photo-tab[data-photo-state="saved"] .c4-photo-tab-s{ color: var(--c4-blue-ink); }
.site-calendar-page[data-calendar-design="c4"] .c4-photo-fail{ align-self: center; gap: 12px; }
.site-calendar-page[data-calendar-design="c4"] .c4-photo-fail .c4-btn{ align-self: flex-start; }
/* 확인이 필요한 칸: 노란 테두리 + '확인' 표 */
.site-calendar-page[data-calendar-design="c4"] .c4-fld[data-photo-check="true"] .c4-inp, .site-calendar-page[data-calendar-design="c4"] .c4-fld[data-photo-check="true"] .c4-amt-inp{ border-color: var(--c4-amber); box-shadow: 0 0 0 2px color-mix(in srgb, var(--c4-amber) 22%, transparent); }
.site-calendar-page[data-calendar-design="c4"] .c4-cats[data-photo-check="true"]{ padding: 4px; border-radius: 12px; box-shadow: 0 0 0 2px color-mix(in srgb, var(--c4-amber) 35%, transparent); }
.site-calendar-page[data-calendar-design="c4"] .c4-chk{ display: inline-flex; align-items: center; height: 17px; margin-left: 6px; padding: 0 6px; border-radius: 5px; background: color-mix(in srgb, var(--c4-amber) 18%, transparent); color: var(--c4-amber-ink, #9a5b00); font-size: 11px; font-weight: 700; vertical-align: middle; }
body[data-site-theme="dark"] .site-calendar-page[data-calendar-design="c4"] .c4-chk, body[data-site-theme="dark"] .site-calendar-page[data-calendar-design="c4"] .c4-photo-tab[data-photo-state="check"] .c4-photo-tab-s{ color: #f4b740; }
/* 같은 기록 경고 */
.site-calendar-page[data-calendar-design="c4"] .c4-dup{ display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--c4-red) 40%, var(--c4-line)); border-radius: 12px; background: color-mix(in srgb, var(--c4-red) 7%, var(--c4-card)); }
.site-calendar-page[data-calendar-design="c4"] .c4-dup[hidden]{ display: none; }
.site-calendar-page[data-calendar-design="c4"] .c4-dup-t{ display: flex; align-items: flex-start; gap: 6px; margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--c4-ink); }
.site-calendar-page[data-calendar-design="c4"] .c4-dup-t .c4-ico{ flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--c4-red); }
.site-calendar-page[data-calendar-design="c4"] .c4-dup-ok{ display: inline-flex; align-items: center; gap: 8px; min-height: 36px; font-size: 13.5px; font-weight: 650; cursor: pointer; }
/* 제안(매월 반복 · 예약 알림) */
.site-calendar-page[data-calendar-design="c4"] .c4-suggest{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: var(--c4-soft); font-size: 13px; color: var(--c4-ink2); }
.site-calendar-page[data-calendar-design="c4"] .c4-suggest[hidden]{ display: none; }
.site-calendar-page[data-calendar-design="c4"] .c4-suggest .c4-ico{ width: 15px; height: 15px; color: var(--c4-blue-ink); }
.site-calendar-page[data-calendar-design="c4"] label.c4-suggest{ grid-column: 1 / -1; min-height: 40px; cursor: pointer; }
.site-calendar-page[data-calendar-design="c4"] .c4-cat-memory[hidden]{ display: none; }
.site-calendar-page[data-calendar-design="c4"] .c4-fc-kind[hidden]{ display: none; }
/* 사진 등록 정확도 03 × 사진 흐름 01: 가게 칸 안의 상호 후보 확인 */
.site-calendar-page[data-calendar-design="c4"] .c4-merchant-confirm{ grid-column: 1 / -1; display: inline-flex; align-items: center; gap: 8px; min-height: 36px; margin-top: -4px; font-size: 13.5px; font-weight: 650; color: var(--c4-ink); cursor: pointer; }
.site-calendar-page[data-calendar-design="c4"] .c4-merchant-confirm[hidden]{ display: none; }
.site-calendar-page[data-calendar-design="c4"] .c4-fld.c4-fld-wide{ grid-column: 1 / -1; }
/* 휴대폰: 원본 사진 줄 위, 확인 칸 아래 한 줄(넓은 화면 330px 두 칸 규칙이 뒤에 있어 여기서 다시 한 칸으로). */
@media (max-width: 900px) {
  .site-calendar-page[data-calendar-design="c4"] .c4-pgrid{ grid-template-columns: minmax(0, 1fr); gap: 14px; }
}
/* 읽기 실패 안내 옆 [다시 시도] */
.calendar-add-retry{ min-height: 36px; margin-left: 6px; padding: 0 12px; border: 1px solid var(--c4-field, #cfd4dc); border-radius: 9px; background: var(--c4-card, #fff); color: var(--c4-blue-ink, #0a58bc); font-size: 13.5px; font-weight: 700; cursor: pointer; }



@media (max-width: 380px) {
  .site-calendar-page[data-calendar-design="c4"] .c4-photo-dlg .c4-fg{ grid-template-columns: minmax(0, 1fr); }
  .site-calendar-page[data-calendar-design="c4"] .c4-photo-dlg .c4-fg .span2{ grid-column: auto; }
}

/* 대조 2차(10-19): 휴대폰에서 일정이 적으면 'N월 지출' 줄이 목록 바로 밑에 떴다(sticky bottom은 내용이 화면보다
   길 때만 바닥에 붙는다). 캘린더 화면이 최소 화면 높이를 채우고, 지출 줄은 내용 끝이 아니라 화면 맨 아래에 놓인다. */
@media (max-width: 900px) {
  body.chat-home-page .consumer-workspace[data-workspace='calendar'] > .site-modal.site-calendar-page[data-calendar-design="c4"]{ min-height: 100dvh; }
  .site-calendar-page[data-calendar-design="c4"] > .site-modal-content{ flex: 1 0 auto; align-content: stretch; }
  .site-calendar-page[data-calendar-design="c4"] .calendar-product-shell[data-design="c4"]{ min-height: 100%; }
  .site-calendar-page[data-calendar-design="c4"] .c4-dock-slot{ margin-top: auto; }
}

/* CALENDAR-WEATHER-RESTORE-01(10-19 소유자 "날씨 이모티콘 고치라니까 아예 없애 버렸네?"):
   설정에서 켠 것은 휴대폰 달력에도 보인다. 시안 04부터 휴대폰 월 칸이 음력·일정 이름·날씨를 display:none으로
   숨겼고 시안 06도 그대로였다. 소유자 최신 지시가 시안보다 우선이다. 설정을 끈 것만 숨긴다.
   1) 다른 달 날짜는 일요일·공휴일·토요일도 흐리게(이번 달처럼 보이지 않게). */
.site-calendar-page[data-calendar-design="c4"] .c4-mc[data-current-month="false"][data-weekday="0"] .c4-mc-num, .site-calendar-page[data-calendar-design="c4"] .c4-mc[data-current-month="false"][data-holiday="true"] .c4-mc-num{ color: color-mix(in srgb, var(--c4-red) 42%, var(--c4-card)); }
.site-calendar-page[data-calendar-design="c4"] .c4-mc[data-current-month="false"][data-weekday="6"] .c4-mc-num{ color: color-mix(in srgb, var(--c4-sat) 42%, var(--c4-card)); }
.site-calendar-page[data-calendar-design="c4"] .c4-mc[data-current-month="false"] > :not(.c4-mc-top){ opacity: .5; }
/* 2) 격자선 표시 설정을 따른다(끄면 칸 사이 선이 없다). */
.site-calendar-page[data-calendar-design="c4"] .c4-mo-g[data-grid-lines="false"]{ background: var(--c4-card); }
/* 3) 휴대폰은 칸 안의 일정 이름(c4-mc-first)·짧은 음력(c4-mc-lunar-s)을 쓴다. 넓은 화면은 시안 06 그대로. */
.site-calendar-page[data-calendar-design="c4"] .c4-mc-first, .site-calendar-page[data-calendar-design="c4"] .c4-mc-lunar-s{ display: none; }
.site-calendar-page[data-calendar-design="c4"] .c4-mc-wx-pop, .site-calendar-page[data-calendar-design="c4"] .c4-rd-wx-pop, .site-calendar-page[data-calendar-design="c4"] .c4-wx-precip[data-rain-likely="true"]{ font-weight: 750; color: var(--c4-travel); }
/* 4) 주 날짜 줄 날씨(넓은 화면): 요일·개수 아래 한 줄. */
.site-calendar-page[data-calendar-design="c4"] .c4-rd-wx{ grid-column: 2; display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--c4-ink2); }
.site-calendar-page[data-calendar-design="c4"] .c4-rd-wx .c4-wx-svg{ width: 18px; height: 18px; }
@media (max-width: 900px) {
  /* 월 칸: 숫자 → 공휴일 이름 또는 음력 → 첫 일정 이름 → 날씨. 줄 높이를 고정해 칸끼리 줄이 맞는다. */
  /* QA P1(10-20): 가장 옅은 선(line2)은 휴대폰에서 켜도 꺼도 같아 보였다 → 한 단계 진한 선. */
  .site-calendar-page[data-calendar-design="c4"] .c4-mo-g[data-grid-lines="true"]{ gap: 1px; padding: 0; border-top: 1px solid var(--c4-line); border-bottom: 1px solid var(--c4-line); background: color-mix(in srgb, var(--c4-ink4) 55%, var(--c4-line)); }
  .site-calendar-page[data-calendar-design="c4"] .c4-mo-g[data-grid-lines="true"] .c4-mc{ background: var(--c4-card); }
  .site-calendar-page[data-calendar-design="c4"] .c4-mc, .site-calendar-page[data-calendar-design="c4"] .c4-mc[data-selected="true"]{ position: relative; justify-content: flex-start; gap: 0; height: 100px; min-height: 100px; padding: 4px 1px 3px; overflow: hidden; }
  .site-calendar-page[data-calendar-design="c4"] .c4-mo-g .c4-mc[data-selected="true"]:not([data-today="true"]){ background: var(--c4-blue-soft); }
  .site-calendar-page[data-calendar-design="c4"] .c4-mc-top{ min-height: 45px; justify-content: flex-start; }
  .site-calendar-page[data-calendar-design="c4"] .c4-mc-hol{ max-width: calc(100% - 2px); font-size: 10.5px; line-height: 13px; margin-top: 1px; }
  /* LUNAR-SMALL-01 (민원 mrep_adf870456b1c44ee81d9, 10-28 아이폰 「음력 날짜는 더 작게, 한 칸에 너무 큰 글씨로 차지함」): 9.5px, lighter. */
  .site-calendar-page[data-calendar-design="c4"] .c4-mc-lunar-s{ position: absolute; top: 35px; left: 0; right: 0; display: block; font-size: 9.5px; font-weight: 500; line-height: 12px; color: var(--c4-ink4); text-align: center; }
  .site-calendar-page[data-calendar-design="c4"] .c4-mc-lunar-s[data-lunar-key="true"]{ font-weight: 700; color: var(--c4-ink2); }
  .site-calendar-page[data-calendar-design="c4"] .c4-mc:has(.c4-mc-hol) .c4-mc-lunar-s{ display: none; }
  .site-calendar-page[data-calendar-design="c4"] .c4-mc-dots, .site-calendar-page[data-calendar-design="c4"] .c4-mc:has(.c4-mc-hol) .c4-mc-dots{ display: none; }
  .site-calendar-page[data-calendar-design="c4"] .c4-mc-first{ display: flex; align-items: flex-start; gap: 1px; width: calc(100% - 4px); padding: 1px 2px 1px 3px; border-left: 2px solid var(--bar); border-radius: 3px; background: color-mix(in srgb, var(--bar) 13%, var(--c4-card)); font-size: 10.5px; font-weight: 600; line-height: 13px; color: var(--c4-ink); }
  /* 20번: 3글자로 잘려 뜻을 몰랐다 → 두 줄까지(약 8글자) 보이고 넘치면 말줄임. 전체 이름은 날짜를 누르면 아래 목록. */
  .site-calendar-page[data-calendar-design="c4"] .c4-mc-first-t{ flex: 1 1 auto; min-width: 0; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; word-break: keep-all; overflow-wrap: anywhere; }
  /* '+N'은 칸 오른쪽 위 구석(숫자 원 옆 빈자리): 이름이 칸 폭을 다 쓰게. */
  .site-calendar-page[data-calendar-design="c4"] .c4-mc-first-n{ position: absolute; top: 3px; right: 2px; font-size: 10px; font-weight: 750; line-height: 12px; color: var(--c4-ink3); }
  .site-calendar-page[data-calendar-design="c4"] .c4-mc-wx{ position: static; display: flex; align-items: center; justify-content: center; gap: 1px; height: 20px; margin: 2px 0 0; font-size: 10.5px; line-height: 1; }
  .site-calendar-page[data-calendar-design="c4"] .c4-mc-wx .c4-wx-svg{ width: 19px; height: 19px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-mc-wx-t{ display: none; }
  .site-calendar-page[data-calendar-design="c4"] .c4-mc-top{ width: 100%; }
  /* 오늘 카드: 지역 이름이 길어도 카드가 화면 밖으로 밀리지 않게(지역 이름만 말줄임). */
  .site-calendar-page[data-calendar-design="c4"] .c4-strip, .site-calendar-page[data-calendar-design="c4"] .c4-strip-r{ min-width: 0; max-width: 100%; }
  .site-calendar-page[data-calendar-design="c4"] .c4-strip{ box-sizing: border-box; max-width: calc(100% - 32px); }
  .site-calendar-page[data-calendar-design="c4"] .c4-strip-r > *{ flex: none; }
  .site-calendar-page[data-calendar-design="c4"] .c4-strip-r .c4-wx-loc{ flex: 0 1 auto; }
  /* 주 날짜 줄: 숫자·요일 아래 날씨 아이콘(비 올 확률 높으면 파란 %). */
  .site-calendar-page[data-calendar-design="c4"] .c4-rd{ height: 72px; min-height: 72px; justify-content: flex-start; gap: 0; padding-top: 6px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-rd-wx{ display: flex; justify-content: center; gap: 1px; margin-top: 1px; font-size: 10.5px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-rd-wx .c4-wx-svg{ width: 19px; height: 19px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-rd-wx-t{ display: none; }
}
/* 5) 일정 추가(10-19 소유자 1~6): 날짜 칸 하나(투명 날짜 입력을 겹쳐 누르면 기기 달력), 시간은 눌러 고르기,
      한 번에 하나만 펼치기, 펼친 칸에는 선택지만, 알림·장소·메모 밖의 줄은 '더 보기'. */
.site-calendar-page[data-calendar-design="c4"] .c4-editor .c4-date-pick{ position: relative; }
.site-calendar-page[data-calendar-design="c4"] .c4-editor .c4-date-pick .c4-date-native{ position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0; border: 0; opacity: 0; cursor: pointer; }
.site-calendar-page[data-calendar-design="c4"] .c4-editor .c4-date-pick:focus-within .calendar-editor-date-chip{ border-color: var(--c4-blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c4-blue) 22%, transparent); }
.site-calendar-page[data-calendar-design="c4"] .c4-editor .c4-time .c4-time-pick{ flex: 1 1 0; width: auto; min-width: 0; cursor: pointer; caret-color: transparent; }
.site-calendar-page[data-calendar-design="c4"] .c4-editor .c4-time .c4-time-pick[aria-expanded="true"]{ border-color: var(--c4-blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c4-blue) 22%, transparent); }
.site-calendar-page[data-calendar-design="c4"] .c4-editor .c4-time .c4-time-pick:disabled{ cursor: default; opacity: .55; }
.site-calendar-page[data-calendar-design="c4"] .c4-editor .c4-tp{ display: flex; flex-direction: column; gap: 10px; padding: 14px; border: 1px solid var(--c4-line); border-radius: 12px; background: var(--c4-soft); }
.site-calendar-page[data-calendar-design="c4"] .c4-editor .c4-tp[hidden]{ display: none; }
.site-calendar-page[data-calendar-design="c4"] .c4-editor .c4-tp-t{ font-size: 14px; font-weight: 700; color: var(--c4-ink2); }
.site-calendar-page[data-calendar-design="c4"] .c4-editor .c4-tp-ampm{ display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.site-calendar-page[data-calendar-design="c4"] .c4-editor .c4-tp-h{ display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.site-calendar-page[data-calendar-design="c4"] .c4-editor .c4-tp-m{ display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.site-calendar-page[data-calendar-design="c4"] .c4-editor .c4-tp-b{ min-width: 0; height: 44px; min-height: 44px; padding: 0; border: 1px solid var(--c4-field); border-radius: 10px; background: var(--c4-card); color: var(--c4-ink); font-size: 15px; font-weight: 600; }
.site-calendar-page[data-calendar-design="c4"] .c4-editor .c4-tp-b[aria-pressed="true"]{ border-color: var(--c4-blue); background: var(--c4-blue); color: var(--c4-on-blue); }
.site-calendar-page[data-calendar-design="c4"] .c4-editor .c4-tp-act{ display: flex; justify-content: flex-end; gap: 8px; }
.site-calendar-page[data-calendar-design="c4"] .c4-editor .c4-tp-act .c4-btn{ min-width: 88px; min-height: 44px; }
/* 펼친 칸이 목록 상자 안에서 위로 밀려(포커스 스크롤) 제목·'지출 없음/예정/실제'가 안 보이던 원인: overflow hidden 상자는 스크롤된다. clip은 안 된다. */
.site-calendar-page[data-calendar-design="c4"] .c4-editor .c4-opts{ overflow: clip; }
.site-calendar-page[data-calendar-design="c4"] .c4-editor .c4-opts-more{ display: flex; flex-direction: column; }
.site-calendar-page[data-calendar-design="c4"] .c4-editor .c4-opts-more[hidden]{ display: none; }
.site-calendar-page[data-calendar-design="c4"] .c4-editor .c4-opts-more > .c4-opt{ padding-left: 22px; }
.site-calendar-page[data-calendar-design="c4"] .c4-editor .c4-opt-more .c4-opt-v{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.site-calendar-page[data-calendar-design="c4"] .c4-editor .c4-opt-more .c4-opt-l{ flex: none; font-weight: 650; }
.site-calendar-page[data-calendar-design="c4"] .c4-editor .c4-opt-more[aria-expanded="true"] .c4-opt-ch{ display: block; }
.site-calendar-page[data-calendar-design="c4"] .c4-editor .c4-choices{ display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 6px; }
.site-calendar-page[data-calendar-design="c4"] .c4-editor .c4-choice{ min-height: 44px; padding: 0 10px; border: 1px solid var(--c4-field); border-radius: 10px; background: var(--c4-card); color: var(--c4-ink); font-size: 14.5px; font-weight: 600; text-align: center; }
.site-calendar-page[data-calendar-design="c4"] .c4-editor .c4-choice[aria-checked="true"]{ border-color: var(--c4-blue); box-shadow: inset 0 0 0 1px var(--c4-blue); background: var(--c4-blue-soft); color: var(--c4-blue-ink); }
.site-calendar-page[data-calendar-design="c4"] .c4-editor .calendar-editor-wide[hidden]{ display: none; }
.site-calendar-page[data-calendar-design="c4"] .c4-editor .c4-end-date-pick{ display: block; }
.site-calendar-page[data-calendar-design="c4"] .c4-editor .c4-sec-hint{ font-size: 13px; font-weight: 500; color: var(--c4-ink3); }
.site-calendar-page[data-calendar-design="c4"] .c4-editor .calendar-editor-repeat-control > .calendar-editor-wide:has(> select[hidden]:only-child),
.site-calendar-page[data-calendar-design="c4"] .c4-editor .calendar-editor-reminder-control > .calendar-editor-wide:has(> select[hidden]:only-child){ display: none; }
@media (max-width: 900px) {
  /* 휴대폰: 날짜 줄 아래 시간 줄(두 칸이 반씩) — 390px에서 끝 시간 칸이 오른쪽으로 잘리지 않게. */
  .site-calendar-page[data-calendar-design="c4"] .c4-editor .c4-when{ grid-template-columns: minmax(0, 1fr); }
  .site-calendar-page[data-calendar-design="c4"] .c4-editor .c4-tp-h{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .site-calendar-page[data-calendar-design="c4"] .c4-editor .c4-tp-m{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .site-calendar-page[data-calendar-design="c4"] .c4-editor .c4-choices{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* 6) '+' 고르는 창(10-19 소유자 11): 큰 줄 3개, 아이콘 + 한 줄 설명. 휴대폰은 아래에서 올라오는 시트. */
.site-calendar-page[data-calendar-design="c4"] .c4-add-choose{ width: min(480px, calc(100vw - 32px)); }
.site-calendar-page[data-calendar-design="c4"] .c4-add-choose-list{ display: flex; flex-direction: column; gap: 8px; padding: 4px 16px 18px; }
.site-calendar-page[data-calendar-design="c4"] .c4-add-choose-row{ display: flex; align-items: center; gap: 14px; width: 100%; min-height: 72px; padding: 12px 14px; border: 1px solid var(--c4-line); border-radius: 14px; background: var(--c4-card); color: var(--c4-ink); text-align: left; }
.site-calendar-page[data-calendar-design="c4"] .c4-add-choose-row:hover, .site-calendar-page[data-calendar-design="c4"] .c4-add-choose-row:focus-visible{ border-color: var(--c4-blue); background: var(--c4-blue-soft); }
.site-calendar-page[data-calendar-design="c4"] .c4-add-choose-ic{ display: inline-flex; flex: none; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: var(--c4-blue-soft); color: var(--c4-blue-ink); }
.site-calendar-page[data-calendar-design="c4"] .c4-add-choose-ic .c4-ico{ width: 24px; height: 24px; }
.site-calendar-page[data-calendar-design="c4"] .c4-add-choose-copy{ display: flex; flex: 1 1 auto; flex-direction: column; gap: 3px; min-width: 0; }
.site-calendar-page[data-calendar-design="c4"] .c4-add-choose-copy strong{ font-size: 17px; font-weight: 700; }
.site-calendar-page[data-calendar-design="c4"] .c4-add-choose-copy span{ font-size: 13.5px; line-height: 1.4; color: var(--c4-ink3); }
.site-calendar-page[data-calendar-design="c4"] .c4-add-choose-ways{ display: flex; gap: 8px; margin-top: 8px; }
.site-calendar-page[data-calendar-design="c4"] .c4-add-choose-ways .c4-add-choose-way{ flex: 1 1 0; min-height: 44px; font-size: 15px; font-weight: 700; color: var(--c4-ink); }
.site-calendar-page[data-calendar-design="c4"] .c4-add-choose-ch{ flex: none; width: 18px; height: 18px; color: var(--c4-ink4); }
.site-calendar-page[data-calendar-design="c4"] .c4-editor .c4-quick-amount{ border: 1px solid var(--c4-line); border-radius: 12px; }
.site-calendar-page[data-calendar-design="c4"] .c4-editor[data-quick="expense"] .c4-when{ grid-template-columns: minmax(0, 1fr); }
.site-calendar-page[data-calendar-design="c4"] .c4-editor[data-quick="expense"] .c4-when-time{ display: none; }
.site-calendar-page[data-calendar-design="c4"] .c4-editor[data-quick="expense"] .calendar-editor-expense-status{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.site-calendar-page[data-calendar-design="c4"] .c4-editor .c4-seg3-b[hidden]{ display: none; }
@media (max-width: 900px) {
  .site-calendar-page[data-calendar-design="c4"] .c4-add-choose{ width: 100%; }
}
/* 7) 어르신(10-19 17): 휴대폰 이전·다음 달 단추·보기 탭은 48px. 지운 뒤 알림의 [되돌리기], 반복 요일 [평일][주말]. */
@media (max-width: 900px) {
  /* 20번(점검방): 휴대폰 머리줄 연·월 제목·[오늘]도 48px 누름 영역. 줄 높이를 같이 키워 구분선을 넘지 않는다. */
  .site-calendar-page[data-calendar-design="c4"] .calendar-toolbar.c4-navr{ height: 60px; }
  .site-calendar-page[data-calendar-design="c4"] .calendar-toolbar.c4-navr .calendar-title-button{ min-height: 48px; }
  .site-calendar-page[data-calendar-design="c4"] .calendar-toolbar.c4-navr .calendar-today-button{ min-height: 48px; height: 48px; padding: 0 16px; font-size: 15px; }
  .site-calendar-page[data-calendar-design="c4"] .calendar-toolbar.c4-navr .calendar-nav-button{ width: 48px; min-width: 48px; height: 48px; min-height: 48px; }
  .site-calendar-page[data-calendar-design="c4"] .calendar-mode-tabs.c4-seg .calendar-mode-tab{ height: 48px; min-height: 48px; }
}
.calendar-toast .calendar-toast-action{ min-height: 40px; margin-left: 8px; padding: 0 14px; border: 1px solid currentColor; border-radius: 10px; background: transparent; color: inherit; font: inherit; font-weight: 700; pointer-events: auto; cursor: pointer; }
.calendar-toast-host:has(.calendar-toast-action){ pointer-events: auto; }
.site-calendar-page[data-calendar-design="c4"] .c4-editor .calendar-editor-weekday-presets{ display: flex; gap: 6px; margin-bottom: 8px; }
.site-calendar-page[data-calendar-design="c4"] .c4-editor .calendar-editor-weekday-preset{ min-height: 44px; padding: 0 16px; border: 1px solid var(--c4-field); border-radius: 22px; background: var(--c4-card); color: var(--c4-ink); font-size: 14.5px; font-weight: 650; }
.site-calendar-page[data-calendar-design="c4"] .c4-wx-pick{ min-height: 40px; padding: 0 14px; font-size: 14px; }
/* 8) 지출 시트(10-19 소유자 13): 요약 먼저(월별 합계·가장 큰 5건), 날짜별 전체는 '전체 보기'에서 검색·거르기·더 불러오기. */
.site-calendar-page[data-calendar-design="c4"] .c4-ledger-dlg [hidden]{ display: none !important; }
.site-calendar-page[data-calendar-design="c4"] .c4-ledger-dlg .c4-lsec-t{ margin: 14px 0 6px; font-size: 14px; font-weight: 700; color: var(--c4-ink2); }
.site-calendar-page[data-calendar-design="c4"] .c4-lmon{ display: flex; flex-direction: column; gap: 2px; }
.site-calendar-page[data-calendar-design="c4"] .c4-lmon-r{ display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 0 6px; border: 0; border-radius: 10px; background: transparent; color: var(--c4-ink); text-align: left; }
.site-calendar-page[data-calendar-design="c4"] .c4-lmon-r:hover:not(:disabled), .site-calendar-page[data-calendar-design="c4"] .c4-lmon-r:focus-visible{ background: var(--c4-soft); }
.site-calendar-page[data-calendar-design="c4"] .c4-lmon-k{ font-size: 14.5px; font-weight: 650; }
.site-calendar-page[data-calendar-design="c4"] .c4-lmon-bar{ height: 10px; overflow: hidden; border-radius: 5px; background: var(--c4-soft); }
.site-calendar-page[data-calendar-design="c4"] .c4-lmon-fill{ display: block; height: 100%; border-radius: 5px; background: var(--c4-red); }
.site-calendar-page[data-calendar-design="c4"] .c4-ledger-dlg[data-ledger-view] .c4-tab2[data-ledger-tab="planned"][aria-pressed="true"] ~ * .c4-lmon-fill{ background: var(--c4-ink3); }
.site-calendar-page[data-calendar-design="c4"] .c4-lmon-v{ min-width: 92px; font-size: 14.5px; font-weight: 700; text-align: right; }
.site-calendar-page[data-calendar-design="c4"] .c4-lmon-v.zero{ font-weight: 400; color: var(--c4-ink4); }
.site-calendar-page[data-calendar-design="c4"] .c4-ltop-list{ display: flex; flex-direction: column; }
.site-calendar-page[data-calendar-design="c4"] .c4-ledger-dlg .c4-led-all{ width: 100%; min-height: 48px; margin-top: 14px; font-size: 15px; font-weight: 700; }
.site-calendar-page[data-calendar-design="c4"] .c4-lfull{ display: flex; flex-direction: column; gap: 10px; }
.site-calendar-page[data-calendar-design="c4"] .c4-lfull-top{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.site-calendar-page[data-calendar-design="c4"] .c4-lfull-back{ min-height: 44px; }
.site-calendar-page[data-calendar-design="c4"] .c4-lfull-q{ flex: 1 1 180px; min-width: 0; height: 44px; padding: 0 12px; font-size: 15px; }
.site-calendar-page[data-calendar-design="c4"] .c4-lfull-m{ flex: 0 0 auto; height: 44px; padding: 0 10px; font-size: 15px; }
.site-calendar-page[data-calendar-design="c4"] .c4-lfull .c4-chips{ display: flex; flex-wrap: wrap; gap: 6px; }
.site-calendar-page[data-calendar-design="c4"] .c4-lfull-n{ margin: 0; font-size: 13.5px; color: var(--c4-ink3); }
.site-calendar-page[data-calendar-design="c4"] .c4-led-loadmore{ min-height: 44px; }
.site-calendar-page[data-calendar-design="c4"] .c4-led-sentinel{ height: 1px; }
/* 9) 확인 창(삭제·작성 취소)은 c4 창(z-index 1200) 위에 뜬다. 110이면 편집기 뒤에 깔려 '지우기'를 누를 수 없었다. */
.site-calendar-page[data-calendar-design="c4"] .calendar-delete-confirm-backdrop{ z-index: 1300; }
.site-calendar-page[data-calendar-design="c4"] .c4-lg-wx{ display: inline-flex; align-items: center; gap: 4px; margin-left: auto; padding-left: 8px; font-size: 13px; font-weight: 500; color: var(--c4-ink2); }
.site-calendar-page[data-calendar-design="c4"] .c4-lg-wx .c4-wx-svg{ width: 20px; height: 20px; }
.site-calendar-page[data-calendar-design="c4"] .c4-lg-hd:has(.c4-lg-wx){ display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
/* 10) 200% 확대(휴대폰 390px → 실제 195px)에서 '2026년 10월'이 '2'로 잘렸다(17번). 아주 좁으면 제목을 한 줄로 내리고,
       날씨 줄과 아래 지출 줄은 줄을 바꿔 다 보이게 한다. */
@media (max-width: 320px) {
  .site-calendar-page[data-calendar-design="c4"] .calendar-toolbar.c4-navr{ flex-wrap: wrap; height: auto; min-height: 48px; padding: 8px 10px; row-gap: 4px; }
  .site-calendar-page[data-calendar-design="c4"] .calendar-toolbar.c4-navr .calendar-title-button{ flex: 1 0 100%; order: 0; overflow: visible; white-space: normal; text-align: left; }
  .site-calendar-page[data-calendar-design="c4"] .c4-strip-r{ flex-wrap: wrap; white-space: normal; overflow: visible; }
  .site-calendar-page[data-calendar-design="c4"] .c4-dock{ flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 6px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-dock > *{ width: 100%; min-width: 0; }
}
/* 11) 웹 알림함(18번): 캘린더 맨 위 '알림' 칸. */
.site-calendar-page[data-calendar-design="c4"] .c4-remind{ display: flex; flex-direction: column; gap: 6px; margin: 0 16px 10px; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--c4-blue) 35%, var(--c4-line)); border-radius: 12px; background: var(--c4-blue-soft); }
.site-calendar-page[data-calendar-design="c4"] .c4-remind-hd{ display: flex; align-items: center; gap: 8px; color: var(--c4-blue-ink); font-size: 15px; }
.site-calendar-page[data-calendar-design="c4"] .c4-remind-hd .c4-ico{ width: 20px; height: 20px; }
.site-calendar-page[data-calendar-design="c4"] .c4-remind-ok{ margin-left: auto; min-height: 40px; padding: 0 12px; font-size: 14px; }
.site-calendar-page[data-calendar-design="c4"] .c4-remind-list{ display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }
.site-calendar-page[data-calendar-design="c4"] .c4-remind-r{ display: flex; flex-direction: column; gap: 1px; }
.site-calendar-page[data-calendar-design="c4"] .c4-remind-t{ font-size: 15px; font-weight: 700; color: var(--c4-ink); }
.site-calendar-page[data-calendar-design="c4"] .c4-remind-b{ font-size: 13.5px; color: var(--c4-ink2); }
.site-calendar-page[data-calendar-design="c4"] .c4-remind-more{ font-size: 13px; color: var(--c4-ink3); }
.site-calendar-page[data-calendar-design="c4"] .c4-editor .c4-remind-time{ min-height: 40px; margin-top: 6px; padding: 0 12px; font-size: 14px; }
.site-calendar-page[data-calendar-design="c4"] .c4-editor .c4-guest-note{ margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--c4-soft); }
/* 12) 뒤로 가기(QA 뒤로 표 01, 소유자 10-20 "홈이 아닌 모든 화면은 왼쪽 위에 <와 화면 이름"): '캘린더' 앞 〈.
       누르면 위에 열린 창부터 하나씩 닫고, 없으면 이전 화면(없으면 홈)으로 간다(site-conversation.js). */
body.chat-home-page .consumer-workspace[data-workspace='calendar'] .site-calendar-page[data-calendar-design="c4"] > .site-modal-header .site-modal-close.c4-head-back{ display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; min-width: 44px; margin: 0; padding: 0; border: 0; border-radius: 10px; background: transparent; color: var(--c4-ink); box-shadow: none; font-size: 0; cursor: pointer; }
body.chat-home-page .consumer-workspace[data-workspace='calendar'] .site-calendar-page[data-calendar-design="c4"] > .site-modal-header .c4-head-back .c4-ico{ width: 24px; height: 24px; }
body.chat-home-page .consumer-workspace[data-workspace='calendar'] .site-calendar-page[data-calendar-design="c4"] > .site-modal-header .c4-head-back:hover{ background: var(--c4-soft); }
body.chat-home-page .consumer-workspace[data-workspace='calendar'] .site-calendar-page[data-calendar-design="c4"] > .site-modal-header .c4-head-back:focus-visible{ outline: 2px solid var(--c4-blue); outline-offset: -2px; }
/* 제목은 누르면 '년' 보기(한 칸)·다시 누르면 돌아간다. 시안 04는 장식으로 막아 두었다(pointer-events: none). */
.site-calendar-page[data-calendar-design="c4"] .calendar-toolbar.c4-navr .calendar-title-button{ pointer-events: auto; cursor: pointer; }
@media (min-width: 901px) {
  body.chat-home-page .consumer-workspace[data-workspace='calendar'] .site-calendar-page[data-calendar-design="c4"] > .site-modal-header .c4-head-back{ order: 0; margin-right: -6px; }
}
@media (max-width: 900px) {
  body.chat-home-page .consumer-workspace[data-workspace='calendar'] .site-calendar-page[data-calendar-design="c4"] > .site-modal-header:has(> .c4-head-back){ grid-template-columns: auto minmax(0, 1fr) auto; }
  body.chat-home-page .consumer-workspace[data-workspace='calendar'] .site-calendar-page[data-calendar-design="c4"] > .site-modal-header .c4-head-back{ grid-column: 1; grid-row: 2; align-self: center; margin-left: 6px; }
  body.chat-home-page .consumer-workspace[data-workspace='calendar'] .site-calendar-page[data-calendar-design="c4"] > .site-modal-header:has(> .c4-head-back) h2{ grid-column: 2; padding-left: 2px; }
  body.chat-home-page .consumer-workspace[data-workspace='calendar'] .site-calendar-page[data-calendar-design="c4"] > .site-modal-header:has(> .c4-head-back) .calendar-modal-actions{ grid-column: 3; }
}

/* 13) 누름 영역 44px(마스터 10-20, 웹공통 공통 토큰 --lotbi-tap-min). PC 머리줄 탭 32·이전/다음 34·오늘 36·설정 40·제목 30,
       휴대폰 사이트 줄 메뉴 40·로그인 32였다. PC는 머리줄 가운데 높이(28px)를 그대로 두고 키운다. */
@media (min-width: 901px) {
  .site-calendar-page[data-calendar-design="c4"] .calendar-mode-tabs.c4-seg .calendar-mode-tab{ min-height: var(--lotbi-tap-min, 44px); height: var(--lotbi-tap-min, 44px); }
  .site-calendar-page[data-calendar-design="c4"] .c4-cal > .calendar-mode-tabs.c4-seg{ top: 3px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-cal > .calendar-toolbar.c4-navr{ top: 6px; height: var(--lotbi-tap-min, 44px); }
  .site-calendar-page[data-calendar-design="c4"] .calendar-toolbar.c4-navr .calendar-nav-button{ width: var(--lotbi-tap-min, 44px); min-width: var(--lotbi-tap-min, 44px); height: var(--lotbi-tap-min, 44px); min-height: var(--lotbi-tap-min, 44px); }
  .site-calendar-page[data-calendar-design="c4"] .calendar-toolbar.c4-navr .calendar-today-button{ height: var(--lotbi-tap-min, 44px); min-height: var(--lotbi-tap-min, 44px); }
  .site-calendar-page[data-calendar-design="c4"] .c4-cal > .calendar-toolbar.c4-navr .calendar-title-button{ min-height: var(--lotbi-tap-min, 44px); }
  .site-calendar-page[data-calendar-design="c4"] .calendar-modal-actions .calendar-settings-button{ min-height: var(--lotbi-tap-min, 44px); height: var(--lotbi-tap-min, 44px); }
}
@media (max-width: 900px) {
  .site-calendar-page[data-calendar-design="c4"] .calendar-site-menu{ width: var(--lotbi-tap-min, 44px); height: var(--lotbi-tap-min, 44px); }
  .site-calendar-page[data-calendar-design="c4"] .calendar-site-login{ height: var(--lotbi-tap-min, 44px); padding: 0 14px; border-radius: 22px; }
  /* 어르신 390폭 점검(보좌방 10-21): '지역 고르기' 98×40 → 높이 44. 월 칸 음력 숫자·공휴일 이름 10.5px →
     12·11px. 칸 폭(390에서 55px)은 그대로, 줄이 하나 커진 만큼 칸 높이만 100 → 104px. */
  .site-calendar-page[data-calendar-design="c4"] .c4-wx-pick{ min-height: var(--lotbi-tap-min, 44px); }
  .site-calendar-page[data-calendar-design="c4"] .c4-mc, .site-calendar-page[data-calendar-design="c4"] .c4-mc[data-selected="true"]{ height: 104px; min-height: 104px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-mc-top{ min-height: 48px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-mc-lunar-s{ top: 34px; font-size: 12px; line-height: 14px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-mc-hol{ font-size: 11px; line-height: 14px; }
}

.site-calendar-page[data-calendar-design="c4"] .c4-editor .c4-opt-hint{ font-size: 13.5px; font-weight: 500; color: var(--c4-ink3); }

/* ── 날씨 색 아이콘 · 최저/최고 온도 색 (2026-10-21 소유자: "날씨 이모티콘을 발로 그렸어?") ──────────
   해 = 노랑, 구름 = 회색 채움, 비 = 파란 빗방울, 눈 = 눈송이, 구름 많음 = 해 + 구름, 소나기 = 해 + 구름 + 빗방울.
   온도는 네이버 날씨·기상청처럼 최저 파랑 / 최고 빨강. 월·주·일정·오늘 줄 모두 같은 규칙.
   글자 색 대비(흰 배경): 최저 #1a5dd1 5.9:1, 최고 #c62828 5.6:1 / 다크: #7db0ff, #ff8a80 둘 다 7:1 이상. */
.site-calendar-page[data-calendar-design="c4"]{
  --c4-wx-sun: #ffb300; --c4-wx-ray: #f29900; --c4-wx-cloud: #b9c2ce; --c4-wx-cloud-edge: #7b8594;
  --c4-wx-drop: #1e78e6; --c4-wx-flake: #1f86d1; --c4-t-lo: #1a5dd1; --c4-t-hi: #c62828;
}
body[data-site-theme="dark"] .site-calendar-page[data-calendar-design="c4"]{
  --c4-wx-sun: #ffc940; --c4-wx-ray: #ffc940; --c4-wx-cloud: #d4dae2; --c4-wx-cloud-edge: #aab3bf;
  --c4-wx-drop: #5ca8ff; --c4-wx-flake: #8dcbff; --c4-t-lo: #7db0ff; --c4-t-hi: #ff8a80;
}
.site-calendar-page[data-calendar-design="c4"] .c4-wx-svg{ fill: none; stroke-width: 1.4; overflow: visible; }
.site-calendar-page[data-calendar-design="c4"] .c4-wx-svg .c4-wx-sun{ fill: var(--c4-wx-sun); stroke: var(--c4-wx-ray); stroke-width: 1; }
.site-calendar-page[data-calendar-design="c4"] .c4-wx-svg .c4-wx-ray{ fill: none; stroke: var(--c4-wx-ray); stroke-width: 2; }
.site-calendar-page[data-calendar-design="c4"] .c4-wx-svg .c4-wx-cloud{ fill: var(--c4-wx-cloud); stroke: var(--c4-wx-cloud-edge); stroke-width: 1.3; }
.site-calendar-page[data-calendar-design="c4"] .c4-wx-svg .c4-wx-drop{ fill: var(--c4-wx-drop); stroke: none; }
.site-calendar-page[data-calendar-design="c4"] .c4-wx-svg .c4-wx-flake{ fill: none; stroke: var(--c4-wx-flake); stroke-width: 1.8; }
.site-calendar-page[data-calendar-design="c4"] .c4-wx-svg .c4-wx-therm{ fill: none; stroke: var(--c4-ink2); stroke-width: 1.8; }
.site-calendar-page[data-calendar-design="c4"] .c4-wx-svg .c4-wx-therm-in{ fill: none; stroke: var(--c4-t-hi); stroke-width: 2.2; }
.site-calendar-page[data-calendar-design="c4"] .c4-mc-wx .c4-wx-svg{ width: 20px; height: 20px; }
.site-calendar-page[data-calendar-design="c4"] .c4-temps{ display: inline-flex; align-items: baseline; gap: 0; font-variant-numeric: tabular-nums; white-space: nowrap; }
.site-calendar-page[data-calendar-design="c4"] .c4-temps .c4-t-lo{ color: var(--c4-t-lo); font-weight: 650; }
.site-calendar-page[data-calendar-design="c4"] .c4-temps .c4-t-hi{ color: var(--c4-t-hi); font-weight: 650; }
.site-calendar-page[data-calendar-design="c4"] .c4-temps .c4-t-sep{ margin: 0 1px; color: var(--c4-ink3); font-weight: 400; }
.site-calendar-page[data-calendar-design="c4"] .c4-temps .c4-t-now{ color: var(--c4-ink); font-weight: 650; }
.site-calendar-page[data-calendar-design="c4"] .c4-mc-wx-pop, .site-calendar-page[data-calendar-design="c4"] .c4-rd-wx-pop, .site-calendar-page[data-calendar-design="c4"] .c4-wh-wx-pop{ font-weight: 600; color: var(--c4-t-lo); }
.site-calendar-page[data-calendar-design="c4"] .c4-mc-wx-pop[data-rain-likely="true"], .site-calendar-page[data-calendar-design="c4"] .c4-rd-wx-pop[data-rain-likely="true"], .site-calendar-page[data-calendar-design="c4"] .c4-wh-wx-pop[data-rain-likely="true"]{ font-weight: 800; }
@media (max-width: 900px) {
  .site-calendar-page[data-calendar-design="c4"] .c4-mc-wx .c4-wx-svg{ width: 20px; height: 20px; }
  /* 좁은 월 칸은 전처럼 아이콘 + 비 확률만(온도는 날짜를 누르면 위 줄·목록에). */
  .site-calendar-page[data-calendar-design="c4"] .c4-mc-wx .c4-mc-wx-t.c4-temps{ display: none; }
}
/* 10-21: 좁은 칸 공휴일 이름은 점 대신 두 줄로 접어서라도 보인다('대체'/'휴일'). */
.site-calendar-page[data-calendar-design="c4"] .c4-mc[data-hol-wrap="true"] .c4-mc-hol{ white-space: normal; word-break: keep-all; overflow-wrap: anywhere; font-size: 10px; line-height: 11px; text-align: center; }
/* 10-21 마스터: 지출 0원은 경고처럼 빨간 굵은 글씨가 아니라 보통 색. 빈 지출 창의 [지출 추가]. */
.site-calendar-page[data-calendar-design="c4"] .c4-lbar-v[data-zero="true"], .site-calendar-page[data-calendar-design="c4"] .c4-dock-v[data-zero="true"], .site-calendar-page[data-calendar-design="c4"] .c4-lc-num[data-zero="true"], .site-calendar-page[data-calendar-design="c4"] .c4-tab2 .c4-tab2-v[data-zero="true"]{ color: var(--c4-ink2); font-weight: 650; }
.site-calendar-page[data-calendar-design="c4"] .c4-led-add{ align-self: flex-start; margin-top: 12px; }
/* 10-21: PC 가계부 줄 안의 오늘 날씨(월·년·일정 화면). */
.site-calendar-page[data-calendar-design="c4"] .c4-lbar .c4-lbar-wx{ flex-wrap: nowrap; min-width: 0; margin-left: 14px; padding-left: 14px; border-left: 1px solid var(--c4-line); font-size: 13.5px; white-space: nowrap; overflow: hidden; }
.site-calendar-page[data-calendar-design="c4"] .c4-lbar .c4-lbar-wx-k{ font-weight: 700; color: var(--c4-ink2); }
.site-calendar-page[data-calendar-design="c4"] .c4-lbar .c4-lbar-wx .c4-wx-loc, .site-calendar-page[data-calendar-design="c4"] .c4-lbar .c4-lbar-wx .c4-src{ overflow: hidden; text-overflow: ellipsis; }
/* 10-21 마스터: 휴대폰 세로식 주 보기 = 한 주 날짜별 목록(c4-wklist). 넓은 화면·달력식은 전처럼. */
.site-calendar-page[data-calendar-design="c4"] .c4-wklist{ display: none; }
@media (max-width: 900px) {
  .site-calendar-page[data-calendar-design="c4"] .c4-wk[data-week-view="vertical"]{ display: block; min-height: 0; }
  .site-calendar-page[data-calendar-design="c4"] .c4-wk[data-week-view="vertical"] > .c4-rail, .site-calendar-page[data-calendar-design="c4"] .c4-wk[data-week-view="vertical"] > .c4-dayv{ display: none; }
  .site-calendar-page[data-calendar-design="c4"] .c4-wk[data-week-view="vertical"] > .c4-wklist{ display: flex; flex-direction: column; gap: 0; padding: 4px 0 112px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-wkl-day{ display: flex; flex-direction: column; border-bottom: 1px solid var(--c4-line); }
  .site-calendar-page[data-calendar-design="c4"] .c4-wkl-hd{ display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 16px 4px; border: 0; background: transparent; color: var(--c4-ink); font: inherit; text-align: left; cursor: pointer; }
  .site-calendar-page[data-calendar-design="c4"] .c4-wkl-num{ font-size: 20px; font-weight: 800; letter-spacing: -.3px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-wkl-wd{ font-size: 14px; font-weight: 600; color: var(--c4-ink2); }
  .site-calendar-page[data-calendar-design="c4"] .c4-wkl-day[data-weekday="0"] .c4-wkl-num, .site-calendar-page[data-calendar-design="c4"] .c4-wkl-day[data-weekday="0"] .c4-wkl-wd, .site-calendar-page[data-calendar-design="c4"] .c4-wkl-day[data-holiday="true"] .c4-wkl-num, .site-calendar-page[data-calendar-design="c4"] .c4-wkl-day[data-holiday="true"] .c4-wkl-wd{ color: var(--c4-red); }
  .site-calendar-page[data-calendar-design="c4"] .c4-wkl-day[data-weekday="6"]:not([data-holiday="true"]) .c4-wkl-num, .site-calendar-page[data-calendar-design="c4"] .c4-wkl-day[data-weekday="6"]:not([data-holiday="true"]) .c4-wkl-wd{ color: var(--c4-sat); }
  .site-calendar-page[data-calendar-design="c4"] .c4-wkl-day[data-selected="true"]{ background: color-mix(in srgb, var(--c4-blue) 6%, transparent); }
  .site-calendar-page[data-calendar-design="c4"] .c4-wkl-hol{ font-size: 13px; font-weight: 700; color: var(--c4-red); }
  .site-calendar-page[data-calendar-design="c4"] .c4-wkl-wx{ display: inline-flex; align-items: center; gap: 3px; margin-left: auto; font-size: 13px; white-space: nowrap; }
  .site-calendar-page[data-calendar-design="c4"] .c4-wkl-wx .c4-wx-svg{ width: 22px; height: 22px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-wkl-day .c4-lr{ box-sizing: border-box; width: auto; max-width: calc(100% - 24px); margin: 0 12px 6px; border: 1px solid var(--c4-line); border-radius: 12px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-wkl-none{ display: flex; align-items: center; justify-content: space-between; min-height: 44px; margin: 0 12px 8px; padding: 0 12px; border: 1px dashed var(--c4-line); border-radius: 12px; background: transparent; color: var(--c4-ink3); font: inherit; font-size: 14px; cursor: pointer; }
  .site-calendar-page[data-calendar-design="c4"] .c4-wkl-add{ font-weight: 700; color: var(--c4-blue); }
  .site-calendar-page[data-calendar-design="c4"] .c4-wkl-empty{ display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 0; border-bottom: 1px solid var(--c4-line); background: transparent; color: var(--c4-ink3); font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
  .site-calendar-page[data-calendar-design="c4"] .c4-wkl-empty-d{ font-weight: 650; color: var(--c4-ink2); }
}

/* 주 보기 달력식(설정 '주 보기: 달력식', 직원 의견 10-20): 위에 7일이 가로로 나란한 주간 달력,
   아래에 고른 날 시간표. 색은 c4 토큰만 써서 밝은·어두운·시스템 테마가 따로 규칙 없이 따라간다. */
.site-calendar-page[data-calendar-design="c4"] .c4-wk[data-week-view="calendar"]{ flex-direction: column; }
.site-calendar-page[data-calendar-design="c4"] .c4-wgrid{ display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-bottom: 1px solid var(--c4-line); }
.site-calendar-page[data-calendar-design="c4"] .c4-wcol{ min-width: 0; min-height: 220px; display: flex; flex-direction: column; gap: 4px; padding: 6px 5px 8px; cursor: pointer; }
.site-calendar-page[data-calendar-design="c4"] .c4-wcol + .c4-wcol{ border-left: 1px solid var(--c4-line); }
.site-calendar-page[data-calendar-design="c4"] .c4-wcol[data-selected="true"]{ background: var(--c4-blue-soft); }
.site-calendar-page[data-calendar-design="c4"] .c4-wh{ min-width: 0; min-height: var(--lotbi-tap-min, 44px); display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 0; padding: 2px 0 4px; border: 0; border-radius: 10px; background: transparent; color: var(--c4-ink); font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.site-calendar-page[data-calendar-design="c4"] .c4-wh:focus-visible, .site-calendar-page[data-calendar-design="c4"] .c4-wev:focus-visible, .site-calendar-page[data-calendar-design="c4"] .c4-wmore:focus-visible{ outline: 2px solid var(--c4-blue); outline-offset: 1px; }
.site-calendar-page[data-calendar-design="c4"] .c4-wh-wd{ font-size: 12.5px; font-weight: 650; line-height: 1.2; color: var(--c4-ink3); }
.site-calendar-page[data-calendar-design="c4"] .c4-wh-num{ display: grid; place-items: center; min-width: 30px; height: 30px; padding: 0 3px; box-sizing: border-box; border-radius: 15px; font-size: 17px; font-weight: 750; font-variant-numeric: tabular-nums; letter-spacing: -.4px; line-height: 1; }
.site-calendar-page[data-calendar-design="c4"] .c4-wh[data-weekday="0"] .c4-wh-wd, .site-calendar-page[data-calendar-design="c4"] .c4-wh[data-weekday="0"] .c4-wh-num, .site-calendar-page[data-calendar-design="c4"] .c4-wh[data-holiday="true"] .c4-wh-num{ color: var(--c4-red); }
.site-calendar-page[data-calendar-design="c4"] .c4-wh[data-weekday="6"] .c4-wh-wd, .site-calendar-page[data-calendar-design="c4"] .c4-wh[data-weekday="6"] .c4-wh-num{ color: var(--c4-sat); }
.site-calendar-page[data-calendar-design="c4"] .c4-wh[data-today="true"] .c4-wh-num, .site-calendar-page[data-calendar-design="c4"] .c4-wh[data-today="true"][data-weekday] .c4-wh-num{ background: var(--c4-blue); color: var(--c4-on-blue); }
.site-calendar-page[data-calendar-design="c4"] .c4-wh-hol{ max-width: 100%; overflow: hidden; font-size: 11px; font-weight: 650; line-height: 1.2; color: var(--c4-red-ink); text-overflow: ellipsis; white-space: nowrap; }
.site-calendar-page[data-calendar-design="c4"] .c4-wh-wx{ display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0 3px; max-width: 100%; font-size: 11.5px; line-height: 1.25; color: var(--c4-ink3); font-variant-numeric: tabular-nums; }
.site-calendar-page[data-calendar-design="c4"] .c4-wh-wx .c4-ico, .site-calendar-page[data-calendar-design="c4"] .c4-wh-wx svg{ width: 15px; height: 15px; }
.site-calendar-page[data-calendar-design="c4"] .c4-wh-wx-pop{ font-weight: 700; color: var(--c4-blue-ink); }
.site-calendar-page[data-calendar-design="c4"] .c4-wevs{ min-width: 0; display: flex; flex-direction: column; gap: 3px; }
/* 일정 막대: 왼쪽 색 띠 = 지출 분류 색(월 칸과 같은 뜻), 금액 없는 일정은 회색. */
.site-calendar-page[data-calendar-design="c4"] .c4-wev{ min-width: 0; display: flex; flex-direction: column; gap: 0; margin: 0; padding: 3px 5px 3px 7px; border: 0; border-radius: 5px; background: var(--soft); box-shadow: inset 3px 0 0 var(--bar); color: var(--c4-ink); font: inherit; text-align: left; cursor: pointer; }
.site-calendar-page[data-calendar-design="c4"] .c4-wev-tm{ font-size: 11px; font-weight: 650; line-height: 1.3; color: var(--c4-ink3); font-variant-numeric: tabular-nums; }
.site-calendar-page[data-calendar-design="c4"] .c4-wev-t{ display: -webkit-box; overflow: hidden; font-size: 12.5px; font-weight: 650; line-height: 1.3; overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.site-calendar-page[data-calendar-design="c4"] .c4-wmore{ align-self: flex-start; min-height: 24px; margin: 0; padding: 0 5px; border: 0; border-radius: 5px; background: transparent; color: var(--c4-ink3); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.site-calendar-page[data-calendar-design="c4"] .c4-wpaid{ margin-top: auto; overflow: hidden; font-size: 11.5px; font-weight: 700; color: var(--c4-red-ink); font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 900px) {
  .site-calendar-page[data-calendar-design="c4"] .c4-wgrid{ margin: 0 4px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-wcol{ min-height: 150px; gap: 3px; padding: 3px 2px 5px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-wh{ gap: 1px; padding: 2px 0 3px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-wh-wd{ font-size: 11px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-wh-num{ min-width: 27px; height: 27px; font-size: 15px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-wh-hol{ font-size: 9.5px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-wh-wx{ font-size: 9.5px; letter-spacing: -.3px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-wh-wx .c4-ico, .site-calendar-page[data-calendar-design="c4"] .c4-wh-wx svg{ width: 13px; height: 13px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-wev{ padding: 2px 2px 2px 5px; box-shadow: inset 2px 0 0 var(--bar); border-radius: 4px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-wev-tm{ font-size: 9.5px; letter-spacing: -.3px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-wev-t{ font-size: 10.5px; line-height: 1.25; letter-spacing: -.3px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-wmore{ min-height: 22px; padding: 0 2px; font-size: 11px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-wpaid{ font-size: 9.5px; letter-spacing: -.3px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-wk[data-week-view="calendar"] .c4-dayv{ padding-top: 10px; }
}

/* CALENDAR-FOLD-SHEET-01 (2026-10-24 소유자 확정 시안: 갤럭시 S26 390px · 폴드 펼침 884px)
   1) 휴대폰·폴드: 날짜를 누르면 그날 상세가 아래에서 올라온다(달력 아래 목록 대신). 아래 지출 줄은 배경 아래로.
   2) 폴드(700~900px): 머리줄에 ‹ 2026년 10월 › 오늘, 둘째 줄에 주/월/년/일정 · 10월 지출 · 사진 단추,
      달력은 화면 폭을 다 쓰고 칸에 일정 이름 두 줄·지출 금액·날씨·음력(매일)을 쓴다. PC·휴대폰 칸은 그대로. */
.site-calendar-page[data-calendar-design="c4"] .c4-mc-eva, .site-calendar-page[data-calendar-design="c4"] .c4-mc-lunar-d{ display: none; }
.site-calendar-page[data-calendar-design="c4"] .c4-dsheet{ gap: 0; min-height: min(470px, 72dvh); }
.site-calendar-page[data-calendar-design="c4"] .c4-dsheet-hd{ display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 6px 10px 0 18px; }
.site-calendar-page[data-calendar-design="c4"] .c4-dsheet-t{ margin: 0; font-size: 19px; font-weight: 800; line-height: 1.3; color: var(--c4-ink); }
.site-calendar-page[data-calendar-design="c4"] .c4-dsheet-lunar{ font-size: 13px; font-weight: 500; color: var(--c4-ink3); }
.site-calendar-page[data-calendar-design="c4"] .c4-dsheet-x{ margin-left: auto; }
.site-calendar-page[data-calendar-design="c4"] .c4-dsheet-bd{ display: flex; flex: 1 1 auto; flex-direction: column; gap: 10px; min-height: 0; padding: 2px 18px 10px; overflow-y: auto; overscroll-behavior: contain; }
.site-calendar-page[data-calendar-design="c4"] .c4-dsheet-bd .c4-wxs{ font-size: 13.5px; }
.site-calendar-page[data-calendar-design="c4"] .c4-dsheet-sum{ margin: 0; padding-top: 10px; border-top: 1px solid var(--c4-line); font-size: 13.5px; }
.site-calendar-page[data-calendar-design="c4"] .c4-dsheet-bd .c4-dc-list{ gap: 6px; margin: 0; }
.site-calendar-page[data-calendar-design="c4"] .c4-dsheet-bd .c4-dc-list{ gap: 0; }
.site-calendar-page[data-calendar-design="c4"] .c4-dsheet-bd .c4-dc-ev{ grid-template-columns: 66px 3px minmax(0, 1fr) auto; gap: 10px; padding: 10px 0; }
.site-calendar-page[data-calendar-design="c4"] .c4-dsheet-bd .c4-dc-ev:first-child{ border-top: 0; }
.site-calendar-page[data-calendar-design="c4"] .c4-dsheet-bd .c4-dc-bar{ display: block; width: 3px; height: 30px; border-radius: 2px; background: var(--bar); }
.site-calendar-page[data-calendar-design="c4"] .c4-dsheet-bd .c4-dc-time{ font-size: 13px; font-weight: 550; color: var(--c4-ink2); white-space: nowrap; }
.site-calendar-page[data-calendar-design="c4"] .c4-dsheet-bd .c4-dc-tt{ font-size: 15.5px; font-weight: 700; }
.site-calendar-page[data-calendar-design="c4"] .c4-dsheet-bd .c4-dc-sub{ display: block; font-size: 12.5px; color: var(--c4-ink3); }
.site-calendar-page[data-calendar-design="c4"] .c4-dsheet-bd .c4-ev-amt{ font-size: 14.5px; font-weight: 700; white-space: nowrap; }
.site-calendar-page[data-calendar-design="c4"] .c4-dsheet-hd .c4-dsheet-t{ flex: 0 1 auto; }
.site-calendar-page[data-calendar-design="c4"] .c4-dsheet-bd .c4-empty-day{ padding: 18px 16px; }
.site-calendar-page[data-calendar-design="c4"] .c4-dsheet-ft{ display: flex; gap: 8px; padding: 10px 18px calc(14px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--c4-line); }
.site-calendar-page[data-calendar-design="c4"] .c4-dsheet-ft .c4-btn{ flex: 1 1 0; justify-content: center; min-height: 48px; height: 48px; font-size: 15px; }
@media (min-width: 700px) and (max-width: 900px) {
  .site-calendar-page[data-calendar-design="c4"] .c4-dsheet{ min-height: min(430px, 60dvh); }
  /* 머리줄: 〈 캘린더  ‹ 2026년 10월 › 오늘 ……… 설정 + */
  body.chat-home-page .consumer-workspace[data-workspace='calendar'] > .site-modal.site-calendar-page[data-calendar-design="c4"]{ position: relative; }
  .site-calendar-page[data-calendar-design="c4"] .calendar-product-shell[data-design="c4"], .site-calendar-page[data-calendar-design="c4"] .c4-cols, .site-calendar-page[data-calendar-design="c4"] .c4-cal{ position: static; }
  .site-calendar-page[data-calendar-design="c4"] .c4-cal > .calendar-toolbar.c4-navr{ position: absolute; z-index: 3; top: var(--c4-head-row-top, 10px); left: 124px; height: 36px; gap: 2px; padding: 0; border: 0; background: transparent; }
  .site-calendar-page[data-calendar-design="c4"] .c4-cal > .calendar-toolbar.c4-navr .calendar-nav-button[data-calendar-navigation="previous"]{ order: 1; }
  .site-calendar-page[data-calendar-design="c4"] .c4-cal > .calendar-toolbar.c4-navr .calendar-title-button{ order: 2; flex: 0 1 auto; min-height: 0; padding: 0 4px; font-size: 18px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-cal > .calendar-toolbar.c4-navr .calendar-nav-button[data-calendar-navigation="next"]{ order: 3; }
  .site-calendar-page[data-calendar-design="c4"] .c4-cal > .calendar-toolbar.c4-navr .calendar-today-button{ order: 4; margin-left: 6px; }
  /* 맨 위 날짜·날씨 줄은 날짜 상세(아래 시트)와 칸 안 날씨로 옮긴다. 알림 줄은 그대로. */
  .site-calendar-page[data-calendar-design="c4"] .c4-strip{ display: none; }
  /* 둘째 줄: 보기 전환 · 10월 지출 · 사진 찍기 · 사진첩 */
  .site-calendar-page[data-calendar-design="c4"] .c4-strip-slot{ order: -2; }
  .site-calendar-page[data-calendar-design="c4"] .c4-dock-slot{ order: -1; position: static; display: flex; align-items: center; gap: 12px; margin: 0; padding: 6px 16px 10px; border: 0; box-shadow: none; background: transparent; }
  .site-calendar-page[data-calendar-design="c4"] .c4-dock-slot > .calendar-mode-tabs.c4-seg{ flex: 0 0 300px; width: 300px; margin: 0; }
  .site-calendar-page[data-calendar-design="c4"] .c4-dock{ flex: 1 1 auto; justify-content: flex-end; min-width: 0; }
  .site-calendar-page[data-calendar-design="c4"] .c4-dock-sum{ flex: 0 0 auto; flex-direction: row; align-items: baseline; gap: 8px; margin-right: 4px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-dock-v{ font-size: 18px; }
  /* 달력: 폭 전체, 칸은 숫자·음력 → 공휴일 → 일정 이름 두 줄(지출은 금액까지) → 오른쪽 위 날씨 */
  .site-calendar-page[data-calendar-design="c4"] .c4-mc, .site-calendar-page[data-calendar-design="c4"] .c4-mc[data-selected="true"]{ align-items: stretch; gap: 3px; height: 128px; min-height: 128px; padding: 6px 6px 4px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-mo-g[data-week-count="4"] .c4-mc{ height: max(128px, calc((100dvh - 165px) / 4)); }
  .site-calendar-page[data-calendar-design="c4"] .c4-mo-g[data-week-count="5"] .c4-mc{ height: max(118px, calc((100dvh - 165px) / 5)); }
  .site-calendar-page[data-calendar-design="c4"] .c4-mo-g[data-week-count="6"] .c4-mc{ height: max(108px, calc((100dvh - 165px) / 6)); }
  .site-calendar-page[data-calendar-design="c4"] .c4-mc-top{ display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 5px; min-height: 26px; width: auto; }
  .site-calendar-page[data-calendar-design="c4"] .c4-mc-lunar{ display: inline; font-size: 10.5px; font-weight: 500; color: var(--c4-ink3); }
  .site-calendar-page[data-calendar-design="c4"] .c4-mc-lunar[data-lunar-key="true"]{ font-weight: 700; color: var(--c4-ink2); }
  .site-calendar-page[data-calendar-design="c4"] .c4-mc-lunar-d{ display: inline; }
  .site-calendar-page[data-calendar-design="c4"] .c4-mc-lunar-s, .site-calendar-page[data-calendar-design="c4"] .c4-mc-first, .site-calendar-page[data-calendar-design="c4"] .c4-mc-dots{ display: none; }
  .site-calendar-page[data-calendar-design="c4"] .c4-mc-hol{ max-width: 100%; font-size: 11px; line-height: 14px; }
  /* 운영 폴드(10-24 소유자 화면): '대체공휴일'이 숫자·음력 사이에 끼어 '대체휴/일' 두 줄로 쪼개졌다. 공휴일 이름은 숫자 아래 자기 줄(시안). */
  .site-calendar-page[data-calendar-design="c4"] .c4-mc-top{ flex-wrap: wrap; row-gap: 1px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-mc-top .c4-mc-hol, .site-calendar-page[data-calendar-design="c4"] .c4-mc[data-hol-wrap="true"] .c4-mc-top .c4-mc-hol{ order: 3; flex: 0 0 100%; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-align: left; }
  .site-calendar-page[data-calendar-design="c4"] .c4-mc-evs{ display: flex; flex-direction: column; gap: 3px; min-width: 0; }
  .site-calendar-page[data-calendar-design="c4"] .c4-mc-ev, .site-calendar-page[data-calendar-design="c4"] .c4-mc-ev.all{ display: block; height: auto; max-height: calc(2 * 1.3em + 4px); padding: 2px 6px; border-radius: 6px; font-size: 12px; line-height: 1.3; }
  .site-calendar-page[data-calendar-design="c4"] .c4-mc-ev .c4-mc-dot{ display: none; }
  .site-calendar-page[data-calendar-design="c4"] .c4-mc-evt, .site-calendar-page[data-calendar-design="c4"] .c4-mc-ev{ overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; word-break: keep-all; overflow-wrap: anywhere; }
  .site-calendar-page[data-calendar-design="c4"] .c4-mc-evt{ display: inline; }
  .site-calendar-page[data-calendar-design="c4"] .c4-mc-eva{ display: inline; margin-left: 0; font-weight: 700; white-space: nowrap; }
  .site-calendar-page[data-calendar-design="c4"] .c4-mc-more{ font-size: 11px; color: var(--c4-ink3); }
  .site-calendar-page[data-calendar-design="c4"] .c4-mc-wx{ position: absolute; top: 7px; right: 6px; display: flex; height: auto; margin: 0; gap: 2px; font-size: 11px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-mc-wx .c4-wx-svg{ width: 17px; height: 17px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-mc-wx-t{ display: none; }
}

/* 10-24 운영 확인(2번): 토요일 공휴일(10/3 개천절, 2027-02-06 설 연휴)은 이름만 빨강이고 숫자는 토요일 파랑이었다.
   토요일 규칙이 뒤에 있어 이겼다. 공휴일이면 토요일이어도 빨강(이전·다음 달은 흐린 빨강). */
.site-calendar-page[data-calendar-design="c4"] .c4-mc[data-weekday="6"][data-holiday="true"] .c4-mc-num, .site-calendar-page[data-calendar-design="c4"] .c4-ymd[data-weekday="6"][data-holiday="true"], .site-calendar-page[data-calendar-design="c4"] .c4-rd[data-weekday="6"][data-holiday="true"] .c4-rd-num, .site-calendar-page[data-calendar-design="c4"] .c4-rd[data-weekday="6"][data-holiday="true"] .c4-rd-wd, .site-calendar-page[data-calendar-design="c4"] .c4-wh[data-weekday="6"][data-holiday="true"] .c4-wh-num, .site-calendar-page[data-calendar-design="c4"] .c4-wh[data-weekday="6"][data-holiday="true"] .c4-wh-wd{ color: var(--c4-red); }
.site-calendar-page[data-calendar-design="c4"] .c4-mc[data-current-month="false"][data-weekday="6"][data-holiday="true"] .c4-mc-num{ color: color-mix(in srgb, var(--c4-red) 42%, var(--c4-card)); }

/* CALENDAR-PHOTO-PROGRESS-01 (소유자 10-24): 사진을 읽는 동안 단계와 진행 막대(투어 「여행을 짜고 있어요」처럼). */
.site-calendar-page[data-calendar-design="c4"] .c4-dlg.c4-photo-progress{ width: min(100%, 460px); }
.site-calendar-page[data-calendar-design="c4"] .c4-pp-bd{ display: flex; flex-direction: column; gap: 12px; padding: 22px 22px 10px; }
.site-calendar-page[data-calendar-design="c4"] .c4-pp-t{ margin: 0; font-size: 22px; font-weight: 800; line-height: 1.3; color: var(--c4-ink); }
.site-calendar-page[data-calendar-design="c4"] .c4-pp-s, .site-calendar-page[data-calendar-design="c4"] .c4-pp-n{ margin: -6px 0 0; font-size: 14.5px; color: var(--c4-ink2); }
.site-calendar-page[data-calendar-design="c4"] .c4-pp-bar{ height: 8px; border-radius: 999px; background: var(--c4-field); overflow: hidden; }
.site-calendar-page[data-calendar-design="c4"] .c4-pp-fill{ display: block; width: 0; height: 100%; border-radius: inherit; background: var(--c4-blue); transition: width .25s linear; }
.site-calendar-page[data-calendar-design="c4"] .c4-pp-steps{ display: flex; flex-direction: column; gap: 14px; margin: 6px 0 0; padding: 0; list-style: none; }
.site-calendar-page[data-calendar-design="c4"] .c4-pp-step{ display: flex; align-items: center; gap: 12px; font-size: 16px; color: var(--c4-ink3); }
.site-calendar-page[data-calendar-design="c4"] .c4-pp-dot{ flex: none; box-sizing: border-box; width: 28px; height: 28px; border: 2px solid var(--c4-line); border-radius: 50%; background: var(--c4-card); }
.site-calendar-page[data-calendar-design="c4"] .c4-pp-step[data-state="done"]{ color: var(--c4-ink); }
.site-calendar-page[data-calendar-design="c4"] .c4-pp-step[data-state="done"] .c4-pp-dot{ border-color: var(--c4-blue); background: var(--c4-blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12l4 4 8-8'/%3E%3C/svg%3E") center / 16px no-repeat; }
.site-calendar-page[data-calendar-design="c4"] .c4-pp-step[data-state="now"]{ font-weight: 700; color: var(--c4-ink); }
.site-calendar-page[data-calendar-design="c4"] .c4-pp-step[data-state="now"] .c4-pp-dot{ border-color: color-mix(in srgb, var(--c4-blue) 25%, var(--c4-line)); border-top-color: var(--c4-blue); animation: c4-pp-spin .9s linear infinite; }
@keyframes c4-pp-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .site-calendar-page[data-calendar-design="c4"] .c4-pp-step[data-state="now"] .c4-pp-dot{ animation: none; border-color: var(--c4-blue); }
}
.site-calendar-page[data-calendar-design="c4"] .c4-pp-note{ margin: 4px 0 0; font-size: 12.5px; color: var(--c4-ink3); }
.site-calendar-page[data-calendar-design="c4"] .c4-photo-progress .c4-dlg-ft .c4-pp-stop{ flex: 1 1 auto; justify-content: center; min-height: 48px; }

/* CALENDAR-TODAY-XLARGE-01 (애플 방 아이폰 15 「아주 크게」 10-27): 글씨 아주 크게면 작업 공간이 1.3배(zoom)라 48px [오늘]이
   머리줄 전체 높이(62px)를 다 차지해 위아래로 길어 보였다. 겉모양만 36px(→ 실제 47px, 누름 44px 기준 그대로). */
html[data-site-text-size="xlarge"] .site-calendar-page[data-calendar-design="c4"] .calendar-toolbar.c4-navr .calendar-today-button{ height: 36px; min-height: 36px; }

/* 10-27 마스터(아이폰 15에서 「대체공...」): 휴대폰 월 칸의 공휴일 이름은 말줄임 없이 글자 그대로 두 줄까지. */
@media (max-width: 699px) {
  .site-calendar-page[data-calendar-design="c4"] .c4-mc-hol{ display: -webkit-box; max-width: calc(100% - 2px); overflow: hidden; white-space: normal; word-break: keep-all; overflow-wrap: anywhere; text-overflow: clip; text-align: center; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
}
/* BEGIN GENERATED: system-dark mirror -- scripts/generate_calendar_system_dark.mjs */
/* Do not edit by hand. Run the generator; the validator fails on drift. */
@media (prefers-color-scheme: dark) {
  body[data-site-theme="system"] .life-calendar-manager-tab,
  html[data-site-theme-bootstrap="system"] body:not([data-site-theme]) .life-calendar-manager-tab,
  body[data-site-theme="system"] .life-calendar-manager-date input,
  html[data-site-theme-bootstrap="system"] body:not([data-site-theme]) .life-calendar-manager-date input { border-color: #515b69;
  background: #171c25;
  color: var(--lotbi-text-primary, var(--text, #212121)); }
  body[data-site-theme="system"] .life-calendar-manager-tab[aria-selected="true"],
  html[data-site-theme-bootstrap="system"] body:not([data-site-theme]) .life-calendar-manager-tab[aria-selected="true"] { background: #edf0f5;
  color: #212121; }
  body[data-site-theme="system"] .life-calendar-manager-note,
  html[data-site-theme-bootstrap="system"] body:not([data-site-theme]) .life-calendar-manager-note,
  body[data-site-theme="system"] .sidebar-calendar-subnav .nav-item,
  html[data-site-theme-bootstrap="system"] body:not([data-site-theme]) .sidebar-calendar-subnav .nav-item { color: var(--lotbi-text-primary, var(--text, #212121)); }
  body[data-site-theme="system"] .calendar-add-message,
  html[data-site-theme-bootstrap="system"] body:not([data-site-theme]) .calendar-add-message { background: #232a35; color: var(--lotbi-text-primary, var(--text, #212121)); }
  body[data-site-theme="system"] .calendar-week-grid-day[data-selected="true"],
  html[data-site-theme-bootstrap="system"] body:not([data-site-theme]) .calendar-week-grid-day[data-selected="true"] { background-color: rgba(237, 240, 245, .05); }
  body[data-site-theme="system"] .calendar-week-grid-day[data-holiday="true"],
  html[data-site-theme-bootstrap="system"] body:not([data-site-theme]) .calendar-week-grid-day[data-holiday="true"] { background-color: var(--lotbi-calendar-holiday-surface); }
  body[data-site-theme="system"] .calendar-nav-button,
  html[data-site-theme-bootstrap="system"] body:not([data-site-theme]) .calendar-nav-button,
  body[data-site-theme="system"] .calendar-title-button,
  html[data-site-theme-bootstrap="system"] body:not([data-site-theme]) .calendar-title-button,
  body[data-site-theme="system"] .calendar-today-button,
  html[data-site-theme-bootstrap="system"] body:not([data-site-theme]) .calendar-today-button,
  body[data-site-theme="system"] .calendar-settings-button,
  html[data-site-theme-bootstrap="system"] body:not([data-site-theme]) .calendar-settings-button,
  body[data-site-theme="system"] .calendar-mode-tab,
  html[data-site-theme-bootstrap="system"] body:not([data-site-theme]) .calendar-mode-tab,
  body[data-site-theme="system"] .calendar-year-month,
  html[data-site-theme-bootstrap="system"] body:not([data-site-theme]) .calendar-year-month,
  body[data-site-theme="system"] .calendar-date-cell,
  html[data-site-theme-bootstrap="system"] body:not([data-site-theme]) .calendar-date-cell,
  body[data-site-theme="system"] .calendar-day-event,
  html[data-site-theme-bootstrap="system"] body:not([data-site-theme]) .calendar-day-event,
  body[data-site-theme="system"] .calendar-day-toggle,
  html[data-site-theme-bootstrap="system"] body:not([data-site-theme]) .calendar-day-toggle,
  body[data-site-theme="system"] .calendar-day-close,
  html[data-site-theme-bootstrap="system"] body:not([data-site-theme]) .calendar-day-close { border-color: #465162; background: #171c25; color: var(--lotbi-text-primary, var(--text, #212121)); }
  body[data-site-theme="system"] .calendar-day-panel,
  html[data-site-theme-bootstrap="system"] body:not([data-site-theme]) .calendar-day-panel { --lotbi-calendar-panel-surface: #121720; border-color: #465162; color: var(--lotbi-text-primary, var(--text, #212121)); }
  body[data-site-theme="system"] .calendar-day-panel[data-presentation="SHEET"],
  html[data-site-theme-bootstrap="system"] body:not([data-site-theme]) .calendar-day-panel[data-presentation="SHEET"] { background: #121720; border-color: #465162; }
  body[data-site-theme="system"] .calendar-add-actions .calendar-add-image-button,
  html[data-site-theme-bootstrap="system"] body:not([data-site-theme]) .calendar-add-actions .calendar-add-image-button { border-color: #6d7f9c;
  color: var(--lotbi-text-primary, var(--text, #212121)); }
  body[data-site-theme="system"] .life-calendar-empty,
  html[data-site-theme-bootstrap="system"] body:not([data-site-theme]) .life-calendar-empty { color: var(--lotbi-calendar-muted-ink); }
  body[data-site-theme="system"] .calendar-day-sheet-backdrop,
  html[data-site-theme-bootstrap="system"] body:not([data-site-theme]) .calendar-day-sheet-backdrop { background: rgba(2, 6, 16, .58); }
  body[data-site-theme="system"] .calendar-day-heading,
  html[data-site-theme-bootstrap="system"] body:not([data-site-theme]) .calendar-day-heading,
  body[data-site-theme="system"] .calendar-day-event strong,
  html[data-site-theme-bootstrap="system"] body:not([data-site-theme]) .calendar-day-event strong { color: var(--lotbi-text-primary, var(--text, #212121)); }
  body[data-site-theme="system"] .calendar-event-chip,
  html[data-site-theme-bootstrap="system"] body:not([data-site-theme]) .calendar-event-chip { background: transparent; color: var(--lotbi-text-primary, var(--text, #212121)); }
  body[data-site-theme="system"] .calendar-event-chip:hover,
  html[data-site-theme-bootstrap="system"] body:not([data-site-theme]) .calendar-event-chip:hover { background: #263751; }
  body[data-site-theme="system"] .calendar-event-time,
  html[data-site-theme-bootstrap="system"] body:not([data-site-theme]) .calendar-event-time,
  body[data-site-theme="system"] .calendar-event-overflow,
  html[data-site-theme-bootstrap="system"] body:not([data-site-theme]) .calendar-event-overflow { color: var(--lotbi-text-primary, var(--text, #212121)); }
  body[data-site-theme="system"] .calendar-attention-marker,
  html[data-site-theme-bootstrap="system"] body:not([data-site-theme]) .calendar-attention-marker { color: #f2b774; }
  body[data-site-theme="system"] .calendar-weather-temperature-max,
  html[data-site-theme-bootstrap="system"] body:not([data-site-theme]) .calendar-weather-temperature-max { color: #ff8a80; }
  body[data-site-theme="system"] .calendar-toast,
  html[data-site-theme-bootstrap="system"] body:not([data-site-theme]) .calendar-toast { background: #e8edf5; color: #212121; box-shadow: 0 8px 24px rgba(0, 0, 0, .5); }
  body[data-site-theme="system"] .calendar-settings-dialog,
  html[data-site-theme-bootstrap="system"] body:not([data-site-theme]) .calendar-settings-dialog { border-color: #465162; background: #171c25; }
  body[data-site-theme="system"] .calendar-settings-header,
  html[data-site-theme-bootstrap="system"] body:not([data-site-theme]) .calendar-settings-header { border-color: #39424f; }
  body[data-site-theme="system"] .calendar-settings-header h3,
  html[data-site-theme-bootstrap="system"] body:not([data-site-theme]) .calendar-settings-header h3,
  body[data-site-theme="system"] .calendar-settings-toggle-row,
  html[data-site-theme-bootstrap="system"] body:not([data-site-theme]) .calendar-settings-toggle-row { color: var(--lotbi-text-primary, var(--text, #212121)); }
  body[data-site-theme="system"] .calendar-settings-close,
  html[data-site-theme-bootstrap="system"] body:not([data-site-theme]) .calendar-settings-close,
  body[data-site-theme="system"] .calendar-settings-toggle-row small,
  html[data-site-theme-bootstrap="system"] body:not([data-site-theme]) .calendar-settings-toggle-row small,
  body[data-site-theme="system"] .calendar-settings-status,
  html[data-site-theme-bootstrap="system"] body:not([data-site-theme]) .calendar-settings-status { color: var(--lotbi-text-primary, var(--text, #212121)); }
  body[data-site-theme="system"] .calendar-settings-location-help,
  html[data-site-theme-bootstrap="system"] body:not([data-site-theme]) .calendar-settings-location-help { color: var(--lotbi-text-primary, var(--text, #212121)); }
  body[data-site-theme="system"] .calendar-settings-action-row,
  html[data-site-theme-bootstrap="system"] body:not([data-site-theme]) .calendar-settings-action-row { color: var(--lotbi-text-primary, var(--text, #212121)); }
  body[data-site-theme="system"] .calendar-settings-weather-overview,
  html[data-site-theme-bootstrap="system"] body:not([data-site-theme]) .calendar-settings-weather-overview { background: #222936; color: var(--lotbi-text-primary, var(--text, #212121)); }
  body[data-site-theme="system"] .calendar-settings-weather-overview small,
  html[data-site-theme-bootstrap="system"] body:not([data-site-theme]) .calendar-settings-weather-overview small { color: var(--lotbi-text-primary, var(--text, #212121)); }
  body[data-site-theme="system"] .calendar-settings-action-button,
  html[data-site-theme-bootstrap="system"] body:not([data-site-theme]) .calendar-settings-action-button { border-color: #465162; background: #171c25; color: var(--lotbi-text-primary, var(--text, #212121)); }
  body[data-site-theme="system"] .calendar-settings-region-row input,
  html[data-site-theme-bootstrap="system"] body:not([data-site-theme]) .calendar-settings-region-row input { border-color: #465162; background: #121720; color: var(--lotbi-text-primary, var(--text, #212121)); }
  body[data-site-theme="system"] .calendar-settings-select-row,
  html[data-site-theme-bootstrap="system"] body:not([data-site-theme]) .calendar-settings-select-row { color: var(--lotbi-text-primary, var(--text, #212121)); }
  body[data-site-theme="system"] .calendar-settings-select-row small,
  html[data-site-theme-bootstrap="system"] body:not([data-site-theme]) .calendar-settings-select-row small { color: var(--lotbi-text-primary, var(--text, #212121)); }
  body[data-site-theme="system"] .calendar-settings-select,
  html[data-site-theme-bootstrap="system"] body:not([data-site-theme]) .calendar-settings-select { border-color: #465162; background: #121720; color: var(--lotbi-text-primary, var(--text, #212121)); }
  body[data-site-theme="system"] .calendar-settings-body section + section,
  html[data-site-theme-bootstrap="system"] body:not([data-site-theme]) .calendar-settings-body section + section { border-top-color: #39424f; }
  body[data-site-theme="system"] .calendar-unscheduled-group,
  html[data-site-theme-bootstrap="system"] body:not([data-site-theme]) .calendar-unscheduled-group { border-top-color: #39424f; }
  body[data-site-theme="system"] .calendar-unscheduled-note,
  html[data-site-theme-bootstrap="system"] body:not([data-site-theme]) .calendar-unscheduled-note { color: var(--lotbi-text-primary, var(--text, #212121)); }
  body[data-site-theme="system"] .calendar-agenda-range,
  html[data-site-theme-bootstrap="system"] body:not([data-site-theme]) .calendar-agenda-range { border-color: #465162; background: #171c25; color: var(--lotbi-text-primary, var(--text, #212121)); }
  body[data-site-theme="system"] .calendar-agenda-range[aria-pressed="true"],
  html[data-site-theme-bootstrap="system"] body:not([data-site-theme]) .calendar-agenda-range[aria-pressed="true"] { background: #edf0f5; color: #212121; }
  body[data-site-theme="system"] .calendar-week-strip,
  html[data-site-theme-bootstrap="system"] body:not([data-site-theme]) .calendar-week-strip { border-color: #39424f; background: rgba(18, 23, 32, .96); }
  body[data-site-theme="system"] .calendar-week-date,
  html[data-site-theme-bootstrap="system"] body:not([data-site-theme]) .calendar-week-date { color: var(--lotbi-text-primary, var(--text, #212121)); }
  body[data-site-theme="system"] .calendar-week-date[data-selected="true"],
  html[data-site-theme-bootstrap="system"] body:not([data-site-theme]) .calendar-week-date[data-selected="true"],
  body[data-site-theme="system"] .calendar-week-day[data-selected="true"],
  html[data-site-theme-bootstrap="system"] body:not([data-site-theme]) .calendar-week-day[data-selected="true"] { background: #222b38; color: var(--lotbi-text-primary, var(--text, #212121)); box-shadow: none; }
  body[data-site-theme="system"] .calendar-week-day,
  html[data-site-theme-bootstrap="system"] body:not([data-site-theme]) .calendar-week-day { color: var(--lotbi-text-primary, var(--text, #212121)); }
  body[data-site-theme="system"] .calendar-week-day[data-selected="true"] .calendar-week-day-number,
  html[data-site-theme-bootstrap="system"] body:not([data-site-theme]) .calendar-week-day[data-selected="true"] .calendar-week-day-number,
  body[data-site-theme="system"] .calendar-week-grid-event,
  html[data-site-theme-bootstrap="system"] body:not([data-site-theme]) .calendar-week-grid-event,
  body[data-site-theme="system"] .calendar-week-grid-event-title,
  html[data-site-theme-bootstrap="system"] body:not([data-site-theme]) .calendar-week-grid-event-title { color: var(--lotbi-text-primary, var(--text, #212121)); }
  body[data-site-theme="system"] .calendar-event-type,
  html[data-site-theme-bootstrap="system"] body:not([data-site-theme]) .calendar-event-type { background: #293241; color: var(--lotbi-text-primary, var(--text, #212121)); }
  body[data-site-theme="system"] .calendar-event-status,
  html[data-site-theme-bootstrap="system"] body:not([data-site-theme]) .calendar-event-status { background: #493b22; color: #f2d490; }
  body[data-site-theme="system"] .calendar-editor-dialog,
  html[data-site-theme-bootstrap="system"] body:not([data-site-theme]) .calendar-editor-dialog { background: #171c25; }
  body[data-site-theme="system"] .calendar-editor-dialog h3,
  html[data-site-theme-bootstrap="system"] body:not([data-site-theme]) .calendar-editor-dialog h3,
  body[data-site-theme="system"] .calendar-editor-body > label,
  html[data-site-theme-bootstrap="system"] body:not([data-site-theme]) .calendar-editor-body > label { color: var(--lotbi-text-primary, var(--text, #212121)); }
  body[data-site-theme="system"] .calendar-editor-header,
  html[data-site-theme-bootstrap="system"] body:not([data-site-theme]) .calendar-editor-header,
  body[data-site-theme="system"] .calendar-editor-actions,
  html[data-site-theme-bootstrap="system"] body:not([data-site-theme]) .calendar-editor-actions { border-color: #39424f; }
  body[data-site-theme="system"] .calendar-editor-close,
  html[data-site-theme-bootstrap="system"] body:not([data-site-theme]) .calendar-editor-close { color: var(--lotbi-text-primary, var(--text, #212121)); }
  body[data-site-theme="system"] .calendar-editor-actions button,
  html[data-site-theme-bootstrap="system"] body:not([data-site-theme]) .calendar-editor-actions button { border-color: #7d8796; background: #121720; color: var(--lotbi-text-primary, var(--text, #212121)); }
  body[data-site-theme="system"] .calendar-editor-save,
  html[data-site-theme-bootstrap="system"] body:not([data-site-theme]) .calendar-editor-save { border-color: #edf0f5 !important; background: #edf0f5 !important; color: #212121 !important; }
  body[data-site-theme="system"] .calendar-editor-delete,
  html[data-site-theme-bootstrap="system"] body:not([data-site-theme]) .calendar-editor-delete { border-color: #d36b6b !important; color: #f2a1a1 !important; }
  body[data-site-theme="system"] .calendar-readonly-dialog,
  html[data-site-theme-bootstrap="system"] body:not([data-site-theme]) .calendar-readonly-dialog { border-color: #39424f; background: #171c25; }
  body[data-site-theme="system"] .calendar-readonly-header,
  html[data-site-theme-bootstrap="system"] body:not([data-site-theme]) .calendar-readonly-header,
  body[data-site-theme="system"] .calendar-readonly-actions,
  html[data-site-theme-bootstrap="system"] body:not([data-site-theme]) .calendar-readonly-actions { border-color: #39424f; }
  body[data-site-theme="system"] .calendar-readonly-header h3,
  html[data-site-theme-bootstrap="system"] body:not([data-site-theme]) .calendar-readonly-header h3,
  body[data-site-theme="system"] .calendar-readonly-title,
  html[data-site-theme-bootstrap="system"] body:not([data-site-theme]) .calendar-readonly-title,
  body[data-site-theme="system"] .calendar-readonly-details dd,
  html[data-site-theme-bootstrap="system"] body:not([data-site-theme]) .calendar-readonly-details dd { color: var(--lotbi-text-primary, var(--text, #212121)); }
  body[data-site-theme="system"] .calendar-readonly-close,
  html[data-site-theme-bootstrap="system"] body:not([data-site-theme]) .calendar-readonly-close,
  body[data-site-theme="system"] .calendar-readonly-details dt,
  html[data-site-theme-bootstrap="system"] body:not([data-site-theme]) .calendar-readonly-details dt { color: var(--lotbi-text-primary, var(--text, #212121)); }
  body[data-site-theme="system"] .calendar-readonly-notice,
  html[data-site-theme-bootstrap="system"] body:not([data-site-theme]) .calendar-readonly-notice { background: #222b38; color: var(--lotbi-text-primary, var(--text, #212121)); }
  body[data-site-theme="system"] .calendar-readonly-actions button,
  html[data-site-theme-bootstrap="system"] body:not([data-site-theme]) .calendar-readonly-actions button { border-color: #515b69; background: #121720; color: var(--lotbi-text-primary, var(--text, #212121)); }
  body[data-site-theme="system"] .calendar-editor-title,
  html[data-site-theme-bootstrap="system"] body:not([data-site-theme]) .calendar-editor-title,
  body[data-site-theme="system"] .calendar-editor-date,
  html[data-site-theme-bootstrap="system"] body:not([data-site-theme]) .calendar-editor-date,
  body[data-site-theme="system"] .calendar-editor-end-date,
  html[data-site-theme-bootstrap="system"] body:not([data-site-theme]) .calendar-editor-end-date,
  body[data-site-theme="system"] .calendar-editor-time,
  html[data-site-theme-bootstrap="system"] body:not([data-site-theme]) .calendar-editor-time,
  body[data-site-theme="system"] .calendar-editor-amount,
  html[data-site-theme-bootstrap="system"] body:not([data-site-theme]) .calendar-editor-amount,
  body[data-site-theme="system"] .calendar-editor-category,
  html[data-site-theme-bootstrap="system"] body:not([data-site-theme]) .calendar-editor-category,
  body[data-site-theme="system"] .calendar-editor-memo,
  html[data-site-theme-bootstrap="system"] body:not([data-site-theme]) .calendar-editor-memo,
  body[data-site-theme="system"] .calendar-editor-place,
  html[data-site-theme-bootstrap="system"] body:not([data-site-theme]) .calendar-editor-place,
  body[data-site-theme="system"] .calendar-editor-merchant,
  html[data-site-theme-bootstrap="system"] body:not([data-site-theme]) .calendar-editor-merchant { border-color: #515b69; background: #121720; color: var(--lotbi-text-primary, var(--text, #212121)); }
  body[data-site-theme="system"] .calendar-editor-details,
  html[data-site-theme-bootstrap="system"] body:not([data-site-theme]) .calendar-editor-details { border-color: #39424f; }
  body[data-site-theme="system"] .calendar-editor-primary > label,
  html[data-site-theme-bootstrap="system"] body:not([data-site-theme]) .calendar-editor-primary > label,
  body[data-site-theme="system"] .calendar-editor-details > label,
  html[data-site-theme-bootstrap="system"] body:not([data-site-theme]) .calendar-editor-details > label,
  body[data-site-theme="system"] .calendar-editor-category-field,
  html[data-site-theme-bootstrap="system"] body:not([data-site-theme]) .calendar-editor-category-field,
  body[data-site-theme="system"] .calendar-editor-time-control,
  html[data-site-theme-bootstrap="system"] body:not([data-site-theme]) .calendar-editor-time-control { color: var(--lotbi-text-primary, var(--text, #212121)); }
  body[data-site-theme="system"] .calendar-editor-time-trigger,
  html[data-site-theme-bootstrap="system"] body:not([data-site-theme]) .calendar-editor-time-trigger,
  body[data-site-theme="system"] .calendar-editor-end-time-trigger,
  html[data-site-theme-bootstrap="system"] body:not([data-site-theme]) .calendar-editor-end-time-trigger,
  body[data-site-theme="system"] .calendar-editor-category-trigger,
  html[data-site-theme-bootstrap="system"] body:not([data-site-theme]) .calendar-editor-category-trigger,
  body[data-site-theme="system"] .calendar-editor-time-sheet,
  html[data-site-theme-bootstrap="system"] body:not([data-site-theme]) .calendar-editor-time-sheet,
  body[data-site-theme="system"] .calendar-editor-category-sheet,
  html[data-site-theme-bootstrap="system"] body:not([data-site-theme]) .calendar-editor-category-sheet,
  body[data-site-theme="system"] .calendar-editor-time-quick button,
  html[data-site-theme-bootstrap="system"] body:not([data-site-theme]) .calendar-editor-time-quick button,
  body[data-site-theme="system"] .calendar-editor-time-actions button,
  html[data-site-theme-bootstrap="system"] body:not([data-site-theme]) .calendar-editor-time-actions button,
  body[data-site-theme="system"] .calendar-editor-category-sheet button,
  html[data-site-theme-bootstrap="system"] body:not([data-site-theme]) .calendar-editor-category-sheet button,
  body[data-site-theme="system"] .calendar-editor-end-time,
  html[data-site-theme-bootstrap="system"] body:not([data-site-theme]) .calendar-editor-end-time { border-color: #515b69; background: #121720; color: var(--lotbi-text-primary, var(--text, #212121)); }
  body[data-site-theme="system"] .calendar-editor-time-period,
  html[data-site-theme-bootstrap="system"] body:not([data-site-theme]) .calendar-editor-time-period { border-color: #515b69; }
  body[data-site-theme="system"] .calendar-editor-time-period-choice,
  html[data-site-theme-bootstrap="system"] body:not([data-site-theme]) .calendar-editor-time-period-choice { background: #121720; color: var(--lotbi-text-primary, var(--text, #212121)); }
  body[data-site-theme="system"] .calendar-editor-time-period-choice + .calendar-editor-time-period-choice,
  html[data-site-theme-bootstrap="system"] body:not([data-site-theme]) .calendar-editor-time-period-choice + .calendar-editor-time-period-choice { border-left-color: #515b69; }
  body[data-site-theme="system"] .calendar-editor-time-period-choice[aria-pressed="true"],
  html[data-site-theme-bootstrap="system"] body:not([data-site-theme]) .calendar-editor-time-period-choice[aria-pressed="true"] { background: #edf0f5; color: #212121; }
  body[data-site-theme="system"] .calendar-delete-confirm-dialog,
  html[data-site-theme-bootstrap="system"] body:not([data-site-theme]) .calendar-delete-confirm-dialog { border-color: #39424f; background: #171c25; }
  body[data-site-theme="system"] .calendar-delete-confirm-dialog h4,
  html[data-site-theme-bootstrap="system"] body:not([data-site-theme]) .calendar-delete-confirm-dialog h4 { color: var(--lotbi-text-primary, var(--text, #212121)); }
  body[data-site-theme="system"] .calendar-delete-confirm-dialog > p,
  html[data-site-theme-bootstrap="system"] body:not([data-site-theme]) .calendar-delete-confirm-dialog > p { color: var(--lotbi-text-primary, var(--text, #212121)); }
  body[data-site-theme="system"] .calendar-delete-confirm-actions button,
  html[data-site-theme-bootstrap="system"] body:not([data-site-theme]) .calendar-delete-confirm-actions button { border-color: #515b69; background: #121720; color: var(--lotbi-text-primary, var(--text, #212121)); }
  body[data-site-theme="system"] .calendar-delete-confirm-submit,
  html[data-site-theme-bootstrap="system"] body:not([data-site-theme]) .calendar-delete-confirm-submit { border-color: #d36b6b !important; color: #f2a1a1 !important; }
  body[data-site-theme="system"] .calendar-deep-open-notice,
  html[data-site-theme-bootstrap="system"] body:not([data-site-theme]) .calendar-deep-open-notice { border-color: #46515f;
  background: #222936;
  color: var(--lotbi-text-primary, var(--text, #212121)); }
  body[data-site-theme="system"] .calendar-day-event.calendar-life-row,
  html[data-site-theme-bootstrap="system"] body:not([data-site-theme]) .calendar-day-event.calendar-life-row { border-color: var(--lotbi-calendar-grid-line); background: transparent; }
  body[data-site-theme="system"] .calendar-day-event.calendar-life-row:hover,
  html[data-site-theme-bootstrap="system"] body:not([data-site-theme]) .calendar-day-event.calendar-life-row:hover { background: var(--lotbi-calendar-week-selected-surface); }
  body[data-site-theme="system"] .calendar-photo-confirm-save,
  html[data-site-theme-bootstrap="system"] body:not([data-site-theme]) .calendar-photo-confirm-save { border-color: #edf0f5 !important; background: #edf0f5 !important; color: #212121 !important; }
  body[data-site-theme="system"] .calendar-photo-confirm-card [data-missing="true"],
  html[data-site-theme-bootstrap="system"] body:not([data-site-theme]) .calendar-photo-confirm-card [data-missing="true"] { color: #f2a1a1; }
  body[data-site-theme="system"] .calendar-photo-confirm-error,
  html[data-site-theme-bootstrap="system"] body:not([data-site-theme]) .calendar-photo-confirm-error { color: #f2a1a1; }
  body[data-site-theme="system"] .calendar-action-slot[data-calendar-action-bar="pinned"],
  html[data-site-theme-bootstrap="system"] body:not([data-site-theme]) .calendar-action-slot[data-calendar-action-bar="pinned"] { box-shadow: 0 -10px 18px -14px rgba(0, 0, 0, .8); }
  body[data-site-theme="system"] .calendar-span-chip,
  html[data-site-theme-bootstrap="system"] body:not([data-site-theme]) .calendar-span-chip { background: #2a3546; }
  body[data-site-theme="system"] .calendar-add-actions .calendar-add-detail-button,
  html[data-site-theme-bootstrap="system"] body:not([data-site-theme]) .calendar-add-actions .calendar-add-detail-button,
  body[data-site-theme="system"] .calendar-mode-tab[aria-selected="true"],
  html[data-site-theme-bootstrap="system"] body:not([data-site-theme]) .calendar-mode-tab[aria-selected="true"] { border-color: #edf0f5; background: #edf0f5; color: #212121; }
  body[data-site-theme="system"] .calendar-day-panel[data-presentation="SIDE"],
  html[data-site-theme-bootstrap="system"] body:not([data-site-theme]) .calendar-day-panel[data-presentation="SIDE"],
  body[data-site-theme="system"] .calendar-day-weather-card,
  html[data-site-theme-bootstrap="system"] body:not([data-site-theme]) .calendar-day-weather-card,
  body[data-site-theme="system"] .calendar-day-empty,
  html[data-site-theme-bootstrap="system"] body:not([data-site-theme]) .calendar-day-empty { background: #171c25; }
  body[data-site-theme="system"] .site-calendar-page[data-calendar-design="c4"] .c4-chk,
  html[data-site-theme-bootstrap="system"] body:not([data-site-theme]) .site-calendar-page[data-calendar-design="c4"] .c4-chk,
  body[data-site-theme="system"] .site-calendar-page[data-calendar-design="c4"] .c4-photo-tab[data-photo-state="check"] .c4-photo-tab-s,
  html[data-site-theme-bootstrap="system"] body:not([data-site-theme]) .site-calendar-page[data-calendar-design="c4"] .c4-photo-tab[data-photo-state="check"] .c4-photo-tab-s { color: #f4b740; }
  body[data-site-theme="system"] .site-calendar-page[data-calendar-design="c4"],
  html[data-site-theme-bootstrap="system"] body:not([data-site-theme]) .site-calendar-page[data-calendar-design="c4"] { --c4-wx-sun: #ffc940; --c4-wx-ray: #ffc940; --c4-wx-cloud: #d4dae2; --c4-wx-cloud-edge: #aab3bf;
  --c4-wx-drop: #5ca8ff; --c4-wx-flake: #8dcbff; --c4-t-lo: #7db0ff; --c4-t-hi: #ff8a80; }
}
/* END GENERATED: system-dark mirror */

/* CALENDAR-CATEGORY-PICKER-01 (소유자 10-26): 분류는 칸 하나 + 아래에서 올라오는 고르기 시트(최대 55%). 칩 줄 없음. */
.site-calendar-page .c4-pick{ display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; margin: 0; padding: 0 12px; border: 1px solid var(--c4-field, #d6dbe3); border-radius: 12px; background: var(--c4-card, #fff); color: var(--c4-ink, #17202c); font: inherit; font-size: 15px; font-weight: 600; text-align: left; cursor: pointer; }
.site-calendar-page .c4-pick[data-empty="true"] .c4-pick-v{ color: var(--c4-ink3, #7a8494); font-weight: 500; }
.site-calendar-page .c4-pick .c4-pick-v{ flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.site-calendar-page .c4-pick .c4-pick-ico{ width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; color: var(--c4-ink3, #7a8494); }
.site-calendar-page .c4-pick:disabled{ opacity: .5; cursor: default; }
.site-calendar-page .c4-pick:focus-visible, .site-calendar-page .c4-pick-o:focus-visible{ outline: 2px solid var(--c4-blue, #1f6feb); outline-offset: 2px; }
.site-calendar-page .lotbi-sheet-backdrop.c4-pick-scrim{ z-index: 1305; }
.site-calendar-page .lotbi-sheet.c4-pick-sheet{ z-index: 1310; max-height: 55vh; max-height: 55dvh; padding-bottom: max(12px, env(safe-area-inset-bottom)); }
.site-calendar-page .c4-pick-sheet .lotbi-sheet-body{ max-height: calc(55dvh - 64px); overflow-y: auto; overscroll-behavior: contain; }
.site-calendar-page .c4-pick-list{ display: flex; flex-direction: column; padding: 0 4px 4px; }
.site-calendar-page .c4-pick-h{ margin: 0 0 6px; padding: 0 12px; color: var(--c4-ink2, #4a5566); font-size: 14px; font-weight: 700; }
.site-calendar-page .c4-pick-o{ display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; margin: 0; padding: 0 12px; border: 0; border-radius: 10px; background: transparent; color: var(--c4-ink, #17202c); font: inherit; font-size: 16px; text-align: left; cursor: pointer; }
.site-calendar-page .c4-pick-o[aria-selected="true"]{ background: var(--c4-soft, #f1f4f8); font-weight: 700; }
.site-calendar-page .c4-pick-o .c4-dot, .site-calendar-page .c4-pick .c4-dot{ width: 10px; height: 10px; }
.site-calendar-page .c4-pick-o .c4-pick-tick{ width: 20px; height: 20px; margin-left: auto; fill: none; stroke: var(--c4-blue, #1f6feb); stroke-width: 2.4; }

/* CALENDAR-MONTH-FIT-01 (소유자 10-26 "월 화면 위에 비중이 많아 캘린더가 한 화면에 안 보여, 위 비중 줄여"): on a phone
   the strip, the 주/월/년/일정 tabs, the month row and the weekday row give back their spare space (every button
   keeps its 44px tap height), and the month cells share what is left of the screen down to the bottom bar. */
@media (max-width: 900px) {
  .site-calendar-page[data-calendar-design="c4"] .c4-strip{ margin: 0 16px 6px; padding: 6px 12px; row-gap: 2px; }
  .site-calendar-page[data-calendar-design="c4"] .calendar-mode-tabs.c4-seg{ margin-bottom: 0; }
  .site-calendar-page[data-calendar-design="c4"] .calendar-mode-tabs.c4-seg > *{ min-height: var(--lotbi-tap-min, 44px); height: var(--lotbi-tap-min, 44px); }
  .site-calendar-page[data-calendar-design="c4"] .c4-cal > .calendar-toolbar.c4-navr{ height: 48px; min-height: 48px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-mo-wd{ padding-top: 4px; padding-bottom: 2px; }
  /* 10-27 소유자 S26 노멀(큰 글씨): 고정 높이면 일정+날씨 칸의 최저·최고 기온이 잘렸다 — 맞춘 높이는 최소값, 내용이 더 있으면 그 주만 늘어난다. */
  .site-calendar-page[data-calendar-design="c4"] .c4-mo-g[data-fit-cell] .c4-mc, .site-calendar-page[data-calendar-design="c4"] .c4-mo-g[data-fit-cell] .c4-mc[data-selected="true"]{ height: auto; min-height: 0; }
  /* 10-28 S24 앱(로그인, 일정·학교 층): 맞춘 뒤 늦게 자란 마지막 주가 지출 막대 밑으로 갔다. 다시 재는 때에 기대지 않게, 달력 전체 높이를
     화면에 맞춰 두고 각 주는 「제 내용만큼은 꼭, 남는 높이는 나눠서」 — 한 주가 언제 자라도 다른 주가 그만큼 줄어든다. */
  .site-calendar-page[data-calendar-design="c4"] .c4-mo-g[data-fit-cell][data-week-count="4"]{ height: calc(var(--c4-fit-cell) * 4 + 4px); grid-template-rows: repeat(4, minmax(min-content, 1fr)); grid-auto-rows: unset; }
  .site-calendar-page[data-calendar-design="c4"] .c4-mo-g[data-fit-cell][data-week-count="5"]{ height: calc(var(--c4-fit-cell) * 5 + 5px); grid-template-rows: repeat(5, minmax(min-content, 1fr)); grid-auto-rows: unset; }
  .site-calendar-page[data-calendar-design="c4"] .c4-mo-g[data-fit-cell] .c4-mc[data-fit-tight="true"] .c4-mc-first-t{ -webkit-line-clamp: 1; line-clamp: 1; }
  .site-calendar-page[data-calendar-design="c4"] .c4-mo-g[data-fit-cell][data-week-count="6"]{ height: calc(var(--c4-fit-cell) * 6 + 6px); grid-template-rows: repeat(6, minmax(min-content, 1fr)); grid-auto-rows: unset; }
}

/* CALENDAR-EDITOR-PICKER-SHEET-01 (실제 폰 확인 10-26 · 소유자 디자인 기준): 휴대폰·폴드 편집기의 알림·반복은 줄 아래 버튼 판
   대신 아래에서 올라오는 고르기 시트에서 고른다(줄 아래에는 반복의 '사용자 지정'·'반복 종료'만). 시간 판도 시트 안에 뜬다. */
@media (max-width: 900px) {
  .site-calendar-page[data-calendar-design="c4"] .c4-editor .calendar-editor-repeat-control .c4-choices, .site-calendar-page[data-calendar-design="c4"] .c4-editor .calendar-editor-reminder-control .c4-choices{ display: none; }
  .site-calendar-page[data-calendar-design="c4"] .c4-pick-o.c4-pick-o-plain{ padding-left: 16px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-pick-note{ margin: 8px 12px 4px; color: var(--c4-ink2, #4a5566); font-size: 13px; line-height: 1.45; }
  .site-calendar-page[data-calendar-design="c4"] .c4-tp-sheet .c4-tp{ margin: 0; border: 0; box-shadow: none; background: transparent; }
}
/* CALENDAR-SHEET-DRAG-CLOSE-01 · 앱 확인 10-26: 하루 시트는 일정이 하나여도 화면 72%를 차지했다 → 내용만큼, 최대 55%(넘치면
   목록만 안에서 스크롤). 아이폰: 사진 결과 창 입력칸이 15·14px라 누르면 화면이 확대됐다 → 휴대폰에서는 16px. */
@media (max-width: 900px) {
  .site-calendar-page[data-calendar-design="c4"] .c4-dsheet{ min-height: 0; max-height: 55vh; max-height: 55dvh; }
  .site-calendar-page[data-calendar-design="c4"] .c4-inp, .site-calendar-page[data-calendar-design="c4"] .c4-fc .c4-inp{ font-size: 16px; }
}
/* CALENDAR-LUNAR-DAILY-01 (소유자 10-26 "음력을 달력 칸에 날마다 보이게 바꿔"): PC 칸도 날마다 흐린 '음 8.27'. */
@media (min-width: 901px) {
  .site-calendar-page[data-calendar-design="c4"] .c4-mc-lunar-d{ display: inline; }
}

/* CALENDAR-CELL-TEMPS-01 (소유자 10-26 폰 C 앱 "캘린더 왜 온도가 안 돼?"): 휴대폰·폴드 월 칸도 날씨 그림·비 확률 아래에
   최저/최고 온도를 한 줄로 보인다(예전에는 좁은 칸이라 숨겼다). */
@media (max-width: 900px) {
  .site-calendar-page[data-calendar-design="c4"] .c4-mc-wx{ flex-wrap: wrap; height: auto; row-gap: 0; }
  .site-calendar-page[data-calendar-design="c4"] .c4-mc-wx .c4-mc-wx-t.c4-temps{ display: flex; order: 3; flex-basis: 100%; justify-content: center; margin-top: 1px; font-size: 10px; line-height: 12px; letter-spacing: -0.2px; white-space: nowrap; }
}

/* 10-28 폴드7 펼친 화면(심사관 계정, 2번 실기기): 칸 안에 떠 있던 날씨(위 7px·아래 6px 둘 다 붙어 칸 높이만큼 늘어남)가 오늘 칸 일정
   이름들 위에 해와 「5°/14°」로 겹쳤다. 펼친 폴드는 날씨를 숫자·음력 줄 바로 아래 한 줄(그림 · 비 확률 · 최저/최고)로 칸 흐름에 넣는다. */
@media (min-width: 700px) and (max-width: 900px) {
  .site-calendar-page[data-calendar-design="c4"] .c4-mc-wx{ position: static; order: 1; flex-wrap: nowrap; justify-content: flex-start; height: 18px; margin: 0; gap: 3px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-mc-wx .c4-mc-wx-t.c4-temps{ order: 0; flex-basis: auto; margin-top: 0; font-size: 11px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-mc-evs{ order: 2; }
}

/* CALENDAR-PHONE-NO-TOP-STRIP-01 (소유자 10-26 "이거 상단에 나오는 거 없앴냐고 — 앱들에서 이것 때문에 하단이 잘려서 보이잖아"):
   휴대폰도 폴드·PC처럼 맨 위 날짜·날씨 줄을 두지 않는다. 날짜·음력·날씨·지역 고르기는 날짜를 누르면 뜨는 하루 시트에, 날씨는 월 칸에 그대로 있다. */
@media (max-width: 900px) {
  .site-calendar-page[data-calendar-design="c4"] .c4-strip{ display: none; }
}

/* CALENDAR-GUEST-PHOTO-LOGIN-SHEET-01: 손님이 사진으로 넣기를 누르면 뜨는 로그인 시트. */
.site-calendar-page[data-calendar-design="c4"] .c4-guest-photo{ display: grid; gap: 8px; padding: 4px 4px 8px; }
.site-calendar-page[data-calendar-design="c4"] .c4-guest-photo .c4-pick-note{ margin: 0 12px 8px; }
.site-calendar-page[data-calendar-design="c4"] .c4-guest-photo .c4-guest-photo-login{ min-height: 48px; margin: 0 12px; justify-content: center; }

/* CALENDAR-NO-DOCK-PHOTO-01 (소유자 10-26 "+ 버튼 누르면 나오는건데 왜 사진찍기 사진첩이 자리를 차지하냐"): 휴대폰·폴드는
   아래(폴드는 둘째) 줄의 '사진 찍기'·'사진첩'을 두지 않는다. 같은 두 길은 '+'를 누르면 나오는 추가 시트에 그대로 있다. */
@media (max-width: 900px) {
  .site-calendar-page[data-calendar-design="c4"] .c4-dock .c4-dock-photo{ display: none; }
}

/* CALENDAR-DATE-SHEET-01: 휴대폰·폴드 날짜 고르기 시트(한 달 달력). */
.site-calendar-page[data-calendar-design="c4"] .c4-date-sheet{ padding: 0 4px 8px; }
.site-calendar-page[data-calendar-design="c4"] .c4-date-sheet-nav{ display: flex; align-items: center; justify-content: space-between; margin: 0 4px 6px; }
.site-calendar-page[data-calendar-design="c4"] .c4-date-sheet-month{ font-size: 17px; font-weight: 700; color: var(--c4-ink, #1a2230); }
.site-calendar-page[data-calendar-design="c4"] .c4-date-sheet-step{ width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 12px; background: transparent; color: var(--c4-ink2, #4a5566); }
.site-calendar-page[data-calendar-design="c4"] .c4-date-sheet-grid{ display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.site-calendar-page[data-calendar-design="c4"] .c4-date-sheet-wd{ text-align: center; font-size: 12px; color: var(--c4-ink3, #6b7585); padding: 4px 0; }
.site-calendar-page[data-calendar-design="c4"] .c4-date-sheet-wd[data-weekday="0"], .site-calendar-page[data-calendar-design="c4"] .c4-date-sheet-day[data-weekday="0"]{ color: var(--c4-red, #d93a3a); }
.site-calendar-page[data-calendar-design="c4"] .c4-date-sheet-wd[data-weekday="6"], .site-calendar-page[data-calendar-design="c4"] .c4-date-sheet-day[data-weekday="6"]{ color: var(--c4-sat, #2f6fd1); }
.site-calendar-page[data-calendar-design="c4"] .c4-date-sheet-day{ min-height: 44px; border: 0; border-radius: 50%; background: transparent; font-size: 16px; font-weight: 600; color: var(--c4-ink, #1a2230); }
.site-calendar-page[data-calendar-design="c4"] .c4-date-sheet-day[data-today="true"]{ box-shadow: inset 0 0 0 1.5px var(--c4-blue, #1f6feb); }
.site-calendar-page[data-calendar-design="c4"] .c4-date-sheet-day[aria-pressed="true"]{ background: var(--c4-blue, #1f6feb); color: #fff; }

/* CALENDAR-TOAST-ABOVE-SHEET-01 (S26 앱 10-26): 하루 시트가 열린 채 지우면 「삭제했어요 · 되돌리기」가 시트 목록 줄을
   덮었다 → 시트가 열려 있을 때는 알림을 화면 위쪽(머리 아래)에 띄운다. */
@media (max-width: 900px) {
  body.c4-dialog-open .calendar-toast-host{ top: calc(env(safe-area-inset-top, 0px) + 72px); bottom: auto; }
}

/* CALENDAR-PHOTO-CROSSCHECK-01: 사진에서 금액·날짜가 두 가지로 읽혔을 때 고르는 줄. */
.site-calendar-page[data-calendar-design="c4"] .c4-xcheck{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0; padding: 12px; border-radius: 12px; background: var(--c4-warn-soft, #fff6e5); }
.site-calendar-page[data-calendar-design="c4"] .c4-xcheck-q{ flex: 1 1 100%; margin: 0; font-size: 14px; font-weight: 700; color: var(--c4-ink, #1a2230); }
.site-calendar-page[data-calendar-design="c4"] .c4-xcheck-o{ min-height: 44px; flex: 1 1 0; }
.site-calendar-page[data-calendar-design="c4"] .c4-xcheck-o[aria-pressed="true"]{ background: var(--c4-blue, #1f6feb); color: #fff; border-color: var(--c4-blue, #1f6feb); }

/* CALENDAR-READABLE-TEXT-01 (애플 앱방 아이폰 측정 10-26, 마스터·소유자 지시 "어르신이 못 읽는 크기"): 기본 크기에서도
   캘린더 글자는 12px 아래로 내려가지 않게 하고, 흐린 글자는 진하게. 기능·배치는 그대로, 값만 바꾼다. */
@media (max-width: 900px) {
  .site-calendar-page[data-calendar-design="c4"] .c4-mo-wd > span,
  .site-calendar-page[data-calendar-design="c4"] .c4-temps,
  .site-calendar-page[data-calendar-design="c4"] .c4-temps .c4-t-lo,
  .site-calendar-page[data-calendar-design="c4"] .c4-temps .c4-t-hi,
  .site-calendar-page[data-calendar-design="c4"] .c4-temps .c4-t-sep,
  .site-calendar-page[data-calendar-design="c4"] .c4-mc-wx-pop,
  .site-calendar-page[data-calendar-design="c4"] .c4-mc-hol,
  .site-calendar-page[data-calendar-design="c4"] .c4-mc-first-t,
  .site-calendar-page[data-calendar-design="c4"] .c4-mc-first-n{ font-size: 12px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-mc-hol{ line-height: 15px; }
}
.site-calendar-page[data-calendar-design="c4"] .c4-mc[data-current-month="false"]:not([data-weekday="0"]):not([data-weekday="6"]):not([data-holiday="true"]) .c4-mc-num{ color: var(--c4-ink3); }
.site-calendar-page[data-calendar-design="c4"] .calendar-mode-tabs.c4-seg .calendar-mode-tab:not([aria-selected="true"]){ color: var(--c4-ink2); }
/* CALENDAR-EMPTY-WAYS-TAP-01·CALENDAR-DATE-SHEET-HOLIDAY-01 (S22 앱 10-26) */
.site-calendar-page[data-calendar-design="c4"] button.c4-way{ width: 100%; font: inherit; color: inherit; cursor: pointer; }
.site-calendar-page[data-calendar-design="c4"] button.c4-way:active{ background: var(--c4-chip); }
.site-calendar-page[data-calendar-design="c4"] .c4-date-sheet-day[data-holiday="true"]:not([aria-pressed="true"]){ color: var(--c4-red, #d93a3a); }
/* APP-HEADER-ONE-02 (안드로이드 앱방 S24 10-26): 캘린더 첫 줄 = 다른 메뉴와 같은 사이트 줄(64px, 로고 34px, LOTBI함·계정).
   다른 메뉴의 줄 규칙은 760px까지라, 폴드 펼침(900px까지)도 같게 보이도록 캘린더 안에서 같은 값을 준다. */
@media (max-width: 900px) {
  .site-calendar-page[data-calendar-design="c4"] .calendar-site-bar.ws-logo-topbar{ height: 64px; gap: 6px; padding: 0 8px 0 1px; background: var(--c4-card); }
  .site-calendar-page[data-calendar-design="c4"] .calendar-site-bar .ri-topbar-brand{ display: flex; align-items: center; flex: 1 1 auto; min-width: 0; min-height: 48px; text-decoration: none; }
  .site-calendar-page[data-calendar-design="c4"] .calendar-site-bar .ri-topbar-logo{ width: auto; height: 34px; object-fit: contain; border: 0; box-shadow: none; filter: none; }
  .site-calendar-page[data-calendar-design="c4"] .calendar-site-bar :is(.ri-topbar-menu, .ri-topbar-account){ display: grid; place-items: center; flex: 0 0 48px; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 10px; background: transparent; color: var(--c4-ink); cursor: pointer; }
  .site-calendar-page[data-calendar-design="c4"] .calendar-site-bar .ri-topbar-menu svg{ width: 21px; height: 21px; fill: currentColor; }
  .site-calendar-page[data-calendar-design="c4"] .calendar-site-bar .ri-topbar-account{ display: none; border-radius: 999px; }
  body[data-site-authenticated="true"] .site-calendar-page[data-calendar-design="c4"] .calendar-site-bar .ri-topbar-account{ display: grid; }
  .site-calendar-page[data-calendar-design="c4"] .calendar-site-bar .ri-topbar-account .sidebar-profile-avatar{ width: 34px; height: 34px; flex-basis: 34px; }
  .site-calendar-page[data-calendar-design="c4"] .calendar-site-bar .ri-topbar-login{ display: none; flex: 0 0 auto; align-items: center; justify-content: center; box-sizing: border-box; min-width: 44px; height: 44px; padding: 0 16px; border: 1px solid var(--c4-line); border-radius: 22px; background: var(--c4-card); color: var(--c4-ink); font: inherit; font-size: 14px; font-weight: 600; line-height: 1; cursor: pointer; }
  body[data-site-auth-state="unauthenticated"] .site-calendar-page[data-calendar-design="c4"] .calendar-site-bar .ri-topbar-login{ display: inline-flex; }
  /* 달력 칸 음력도 12px 아래로 내려가지 않게(CALENDAR-READABLE-TEXT-01 보탬) */
}
/* 휴대폰 칸(699px까지)만: 폴드 펼침(700~900px)은 칸 윗줄이 26px 한 줄이라 그대로 둔다(CALENDAR-READABLE-TEXT-03, s186 Gate). */
@media (max-width: 699px) {
  /* LUNAR-SMALL-02 (민원 adf8 아이폰 「음력 날짜는 더 작게, 한 칸에 너무 큰 글씨로 차지함」; 소유자 10-28 「휴대폰만 10px」 -- 실제
     사용자는 30~50대, 어르신은 가족이 대신 쓴다): 휴대폰 월 칸의 음력만 10px·한 단계 옅게. 공휴일 이름·폴드·넓은 화면은 그대로. */
  .site-calendar-page[data-calendar-design="c4"] .c4-mc-lunar-s{ top: 33px; font-size: 10px; line-height: 12px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-mc-lunar-s:not([data-lunar-key="true"]){ opacity: .8; }
  .site-calendar-page[data-calendar-design="c4"] .c4-mc-top{ min-height: 46px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-mc-first-t{ line-height: 14px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-chips{ gap: 6px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-chip{ padding: 0 9px; gap: 4px; font-size: 13px; letter-spacing: -0.2px; }
}
/* CALENDAR-READABLE-TEXT-04 (애플 앱방 iPad 세로 820·744폭 측정 10-27): 월 칸 음력이 700~900px(폴드 펼침·iPad 세로)에서
   10.5px, 넓은 화면에서 11px였다 → 모든 폭 12px. 「2026년 10월」 단추는 iPad에서 높이 27px → 터치 화면은 44px. */
.site-calendar-page[data-calendar-design="c4"] .c4-mc-lunar{ font-size: 12px; }
@media (pointer: coarse) {
  /* CALENDAR-TITLE-TOUCH-02 (s195 iPad 세로 실측: 여전히 27px) -- the toolbar rules that set min-height: 0 are more specific,
     so the same selectors are named here, after them. */
  .site-calendar-page[data-calendar-design="c4"] .calendar-title-button,
  .site-calendar-page[data-calendar-design="c4"] .calendar-toolbar.c4-navr .calendar-title-button,
  .site-calendar-page[data-calendar-design="c4"] .c4-cal > .calendar-toolbar.c4-navr .calendar-title-button,
  .site-calendar-page[data-calendar-design="c4"] > .site-modal-header .calendar-toolbar.c4-navr .calendar-title-button{ min-height: 44px; display: inline-flex; align-items: center; }
}

/* WEATHER-WARNING-01 (소유자 10-28 기상청 기상특보): 오늘 날씨 줄 끝 「기상특보 발효 중: 한파주의보 · 출처: 기상청」. 줄이 모자라면 다음 줄로. */
.site-calendar-page[data-calendar-design="c4"] .c4-wx-warn{ flex: 0 1 auto; min-width: 0; padding: 1px 6px; border-radius: 6px; background: color-mix(in srgb, var(--c4-red) 10%, var(--c4-card)); color: var(--c4-red); font-size: 12px; font-weight: 700; line-height: 1.35; white-space: normal; overflow-wrap: anywhere; }
.site-calendar-page[data-calendar-design="c4"] .c4-strip-r:has(.c4-wx-warn), .site-calendar-page[data-calendar-design="c4"] .c4-wxs:has(.c4-wx-warn){ flex-wrap: wrap; row-gap: 3px; }

/* 회원 의견 f77f(10-28 아이폰 모바일웹 「일정 3개 중 1개만 보이고 +2 표시는 좋은데, 날씨 정보가 너무 크게 가려서 일정이 있는지
   잘 안 보임」): 휴대폰 월 칸에 일정이 있으면 날씨는 두 줄을 한 줄로 — 그림(18px 그대로) 옆에 비 확률(30% 이상일 때) 또는
   최저/최고 하나만. 비 오는 날의 최저/최고와 모든 날의 자세한 날씨는 날짜를 누르면 뜨는 하루 화면에 그대로 있다. 일정 없는 칸은 지금처럼.
   (LUNAR-SMALL-02는 파일의 마지막 699px 미디어 블록을 휴대폰 블록으로 읽는다 — 같은 폭을 screen으로 적어 그 자리를 비켜 둔다.) */
@media screen and (max-width: 699px) {
  .site-calendar-page[data-calendar-design="c4"] .c4-mc:has(.c4-mc-first) .c4-mc-wx{ flex-wrap: nowrap; height: auto; gap: 1px; margin-top: 1px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-mc:has(.c4-mc-first) .c4-mc-wx .c4-wx-svg{ flex: none; }
  .site-calendar-page[data-calendar-design="c4"] .c4-mc:has(.c4-mc-first) .c4-mc-wx .c4-mc-wx-t.c4-temps{ order: 0; flex-basis: auto; margin-top: 0; font-size: 9.5px; line-height: 12px; letter-spacing: -0.3px; }
  .site-calendar-page[data-calendar-design="c4"] .c4-mc:has(.c4-mc-first):has(.c4-mc-wx-pop) .c4-mc-wx .c4-mc-wx-t.c4-temps{ display: none; }
  /* 10-28 운영 375px(s257 뒤): 칸 안쪽 51px에 그림 18px + 「2°/14°」가 56px라 「14°」가 칸 끝에 잘렸다(「-10°/19°」면 62px).
     일정 있는 칸은 그림 옆에 최고 기온 하나만 — 최저는 하루 화면에. */
  .site-calendar-page[data-calendar-design="c4"] .c4-mc:has(.c4-mc-first) .c4-mc-wx .c4-temps .c4-t-lo,
  .site-calendar-page[data-calendar-design="c4"] .c4-mc:has(.c4-mc-first) .c4-mc-wx .c4-temps .c4-t-sep{ display: none; }
  /* 10-29 운영 375px: 「+2」·「+3」(12px)이 날짜 숫자 원과 6px 겹쳐 오늘 파란 원을 가렸다. 휴대폰 칸에서는 9px로 칸 오른쪽 맨 위 구석에(원은 둥글어서 위쪽 구석은 비어 있다). */
  .site-calendar-page[data-calendar-design="c4"] .c4-mc-first-n{ top: 0; right: 0; font-size: 9px; line-height: 11px; letter-spacing: -0.5px; }
}

/* 10-29 처음 쓰는 사람 점검: 편집 창 알림 줄 밑, 이 기기로 알림이 오지 않을 때의 한 줄. */
.site-calendar-page[data-calendar-design="c4"] .c4-opt-note{ margin: 0; padding: 6px 14px 10px 44px; font-size: 12.5px; line-height: 1.45; color: var(--c4-red); border-bottom: 1px solid var(--c4-line); }
.site-calendar-page[data-calendar-design="c4"] .c4-opt-note[hidden]{ display: none; }

/* 10-29 2번 전 메뉴 점검: 처음 받는 달·주의 학교 일정을 기다리는 동안 머리 줄 밑에 떠 있는 작은 표시(달력 자리를 밀지 않는다). */
.site-calendar-page[data-calendar-design="c4"] .c4-school-load{ position: relative; height: 0; margin: 0; z-index: 4; pointer-events: none; }
.site-calendar-page[data-calendar-design="c4"] .c4-school-load[hidden]{ display: none; }
.site-calendar-page[data-calendar-design="c4"] .c4-school-load > span{ position: absolute; top: 4px; left: 50%; transform: translateX(-50%); white-space: nowrap; padding: 3px 10px; border-radius: 999px; font-size: 12px; line-height: 16px; color: var(--c4-ink2); background: var(--c4-card); border: 1px solid var(--c4-line); box-shadow: 0 2px 8px rgba(15, 23, 42, .12); }

/* 10-29 2번 전 메뉴 점검: 월 칸은 아이 이름 대신 아이마다 다른 색 점(제목이 먼저 보이게). */
.site-calendar-page[data-calendar-design="c4"] .c4-kid{ flex: none; display: inline-block; width: 6px; height: 6px; margin: 3.5px 2px 0 0; border-radius: 50%; background: #7c3aed; }
.site-calendar-page[data-calendar-design="c4"] .c4-kid[data-kid="1"]{ background: #ea580c; }
.site-calendar-page[data-calendar-design="c4"] .c4-kid[data-kid="2"]{ background: #0891b2; }
.site-calendar-page[data-calendar-design="c4"] .c4-kid[data-kid="3"]{ background: #db2777; }
.site-calendar-page[data-calendar-design="c4"] .c4-mc-ev .c4-kid{ margin: 0; }

/* 10-29 2번 전 메뉴 점검(웹375_학교일정상세_하루시트뒤에깔려가림·웹375_일정상세_시트두겹): 학교 일정(읽기 전용) 상세는 z 92라 하루 시트(1200) 뒤에
   깔려 출처·[닫기]가 가렸고, 내 일정 상세는 하루 시트 위에 한 겹 더 떠 손잡이가 둘이었다. 상세는 하루 시트 위로, 상세가 열린 동안 하루 시트는 숨긴다(닫으면 그대로 돌아온다). */
.site-calendar-page[data-calendar-design="c4"] .calendar-readonly-backdrop{ z-index: 1250; }
.site-calendar-page[data-calendar-design="c4"]:has(.c4-detail-backdrop, .calendar-readonly-backdrop) .c4-dsheet-bg{ visibility: hidden; }

/* 10-29 2번 전 메뉴 점검(웹375_일정목록_다가오는_칩잘림): 375px에서 넷째 칩 「날짜 미…」가 오른쪽에서 잘렸다. 휴대폰은 칩 넷이 한 줄에 다 보이게 좁힌다. */
.site-calendar-page[data-calendar-design="c4"] .c4-dt-rows .c4-dt-note{ padding: 2px 12px 8px 40px; border-bottom: 0; }

/* 10-29: 저장 안내 띠가 하루 시트(1200)와 같은 높이라 시트 밑에 깔려 안 보였다 → 시트·상세 위로. */
.site-calendar-page[data-calendar-design="c4"] .calendar-toast-host,
body:has(.site-calendar-page[data-calendar-design="c4"]) .calendar-toast-host{ z-index: 1320; }

/* 10-29 앱 점검(user-walk-20261029/app/11b): 캘린더가 화면보다 길면(앱: 알림 동의 안내 + 월) 작업 공간 전체가 스크롤되며 머리글(메뉴·LOTBI·종·계정,
   〈 캘린더 ⚙ +)이 같이 올라가 다른 메뉴로 못 갔다. 머리글은 위에 붙어 있는다.
   10-29 23시 운영 PC(1280): 이 머리글이 PC에서 머리 줄에 얹힌 주/월/년/일정·오늘 ‹ ›를 덮어 달을 못 넘겼다 → 휴대폰 폭에만. */
@media (max-width: 900px) {
  body.chat-home-page .consumer-workspace[data-workspace='calendar'] .site-calendar-page[data-calendar-design="c4"] > .site-modal-header{
    position: sticky; top: 0; z-index: 30; background: var(--c4-card);
  }
}

/* 10-29 2차 걷기(로컬375_월_일정못불러옴): c4 화면에서 「일정을 불러오지 못했어요」와 [다시 시도]가 칸 없이 화면 왼쪽 끝에 붙었다 →
   카드 폭에 맞춘 한 줄 안내(글 왼쪽, 단추 오른쪽). */
.site-calendar-page[data-calendar-design="c4"] .calendar-status:has(> .life-calendar-error){
  display: flex; align-items: center; gap: 10px; margin: 8px 16px 0; padding: 10px 12px; border-radius: 12px;
  background: var(--c4-red-soft); color: var(--c4-red-ink);
}
.site-calendar-page[data-calendar-design="c4"] .calendar-status > .life-calendar-error{ flex: 1; min-width: 0; color: var(--c4-red-ink); font-size: 13.5px; line-height: 1.45; }
.site-calendar-page[data-calendar-design="c4"] .calendar-status > .calendar-retry-button{ flex: none; min-height: 40px; padding: 0 14px; border-radius: 10px; background: var(--c4-card); border-color: var(--c4-line); }
/* 학교 일정을 못 받았을 때는 같은 자리 알약이 붉은 글로, 요일 줄을 계속 가리지 않게 6초 뒤 사라진다(다음 넘김에서 다시 받는다). */
.site-calendar-page[data-calendar-design="c4"] .c4-school-load[data-failed="true"] > span{ color: var(--c4-red-ink); background: var(--c4-red-soft); animation: c4-school-fail-fade 6s ease forwards; }
@keyframes c4-school-fail-fade{ 0%, 85%{ opacity: 1; } 100%{ opacity: 0; visibility: hidden; } }

/* 10-29 마스터(끝까지 걷기 5): 앱 설치 안내는 오류가 아니라 회색 한 줄. */
.site-calendar-page[data-calendar-design="c4"] .c4-opt-note[data-reminder-reach]{ color: var(--c4-ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 10-29 탭 뒤로 가기: 셸이 누르는 숨은 단추(보이지 않고 자리도 차지하지 않는다). */
.calendar-tab-back { display: none; }
/* 10-29 소유자 S24 점검: 알림에서 일정 찾기가 꺼져 있으면 읽을 앱 줄을 숨긴다. */
.calendar-settings-toggle-row[hidden] { display: none; }
.site-calendar-page[data-calendar-design="c4"] .c4-fc > .c4-fg[hidden]{ display: none; }