/* calendar-schedule.css — calendar schedule widget */
/* calendar-schedule.css START */
/* 2026-06-12: Day event chips — left bar, rounded right, single-line ellipsis */

.calendar-schedule-widget { width: 100%; box-sizing: border-box; --cal-radius: 16px; --cal-radius-sm: 10px; --cal-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.06); --cal-shadow-hover: 0 4px 16px rgba(15, 23, 42, 0.08); --cal-accent: var(--site-accent, #2563eb); --cal-accent-soft: color-mix(in srgb, var(--cal-accent) 16%, var(--site-surface, #f8fafc)); --cal-accent-ring: color-mix(in srgb, var(--cal-accent) 28%, transparent); --cal-grid-line: color-mix(in srgb, var(--site-border, #cbd5e1) 92%, var(--cal-accent)); --cal-event-bg: #e9edf2; --cal-event-bg-active: #dfe6ee; --cal-event-fg: var(--site-text, #0f172a); --cal-event-border: #d5dde6; --cal-event-bar: color-mix(in srgb, var(--cal-accent) 42%, #1e293b); --cal-day-has-events-bg: color-mix(in srgb, var(--cal-accent) 5%, var(--site-bg, #fff)); --cal-holiday: #f43f5e; --cal-holiday-fg: color-mix(in srgb, var(--cal-holiday) 58%, var(--site-text, #0f172a)); --cal-holiday-bg: color-mix(in srgb, var(--cal-holiday) 16%, var(--site-surface, #f8fafc)); --cal-holiday-border: color-mix(in srgb, var(--cal-holiday) 38%, var(--site-border, #e2e8f0)); --cal-holiday-accent: color-mix(in srgb, var(--cal-holiday) 82%, #fff); --cal-weekend-sun: color-mix(in srgb, #9e3636 52%, var(--site-text, #0f172a)); --cal-weekend-sat: color-mix(in srgb, #3b82f6 52%, var(--site-text, #0f172a)); }
[data-theme="dark"] .calendar-schedule-widget,
[data-theme="charcoal"] .calendar-schedule-widget { --cal-holiday-bg: color-mix(in srgb, var(--cal-holiday) 34%, var(--site-surface, #1e293b)); --cal-holiday-border: color-mix(in srgb, var(--cal-holiday) 62%, var(--site-border, #334155)); --cal-holiday-fg: color-mix(in srgb, var(--cal-holiday) 28%, var(--site-text, #f8fafc)); --cal-holiday-accent: #fb7185; --cal-event-bg: color-mix(in srgb, var(--cal-accent) 18%, var(--site-surface, #1e293b)); --cal-event-bg-active: color-mix(in srgb, var(--cal-accent) 26%, var(--site-surface, #1e293b)); --cal-event-fg: var(--site-text, #f8fafc); --cal-event-border: color-mix(in srgb, var(--site-border, #334155) 88%, var(--cal-accent)); --cal-event-bar: color-mix(in srgb, var(--cal-accent) 35%, #cbd5e1); --cal-day-has-events-bg: color-mix(in srgb, var(--cal-accent) 10%, var(--site-surface, #1e293b)); }
.grid-widget.has-calendar-schedule { padding: 14px; box-sizing: border-box; }
.calendar-schedule-header { margin-bottom: 14px; }
.calendar-schedule-heading { margin: 0; font-size: clamp(1.05rem, 2.4vw, 1.28rem); font-weight: 600; letter-spacing: -0.02em; color: var(--site-text, #0f172a); line-height: 1.3; }
.calendar-schedule-shell { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: stretch; }
.calendar-schedule-panel-inner { background: var(--site-bg, #fff); border: 1px solid color-mix(in srgb, var(--site-border, #e2e8f0) 88%, var(--cal-accent)); border-radius: var(--cal-radius); box-shadow: var(--cal-shadow); padding: 16px; box-sizing: border-box; }
.calendar-schedule-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.calendar-schedule-toolbar-main { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1 1 auto; }
.calendar-schedule-month-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 42px; border-radius: 12px; background: linear-gradient(145deg, color-mix(in srgb, var(--cal-accent) 88%, #0f172a), var(--cal-accent)); color: #fff; font-size: 0.95rem; font-weight: 800; letter-spacing: -0.02em; box-shadow: 0 6px 16px var(--cal-accent-ring); flex-shrink: 0; }
.calendar-schedule-month-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.calendar-schedule-month { font-size: 1.02rem; font-weight: 600; letter-spacing: -0.02em; color: var(--site-text, #0f172a); line-height: 1.2; }
.calendar-schedule-month-sub { font-size: 0.76rem; font-weight: 500; color: var(--site-muted, #64748b); }
.calendar-schedule-toolbar-actions { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
.calendar-schedule-date-nav { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.calendar-schedule-nav-group--year .calendar-schedule-year-label,
.calendar-schedule-nav-group--month .calendar-schedule-month-label { display: inline-flex; align-items: center; justify-content: center; min-width: 52px; padding: 0 4px; font-size: 0.76rem; font-weight: 800; color: var(--site-text, #0f172a); letter-spacing: -0.01em; }
.calendar-schedule-nav-group--year .calendar-schedule-year-label { min-width: 44px; }
.calendar-schedule-today { height: 34px; padding: 0 12px; border: 1px solid color-mix(in srgb, var(--cal-accent) 24%, var(--site-border, #e2e8f0)); border-radius: 999px; background: var(--cal-accent-soft); color: var(--cal-accent); font-size: 0.76rem; font-weight: 700; cursor: pointer; transition: background 0.18s ease, border-color 0.18s ease; }
.calendar-schedule-today:hover { background: color-mix(in srgb, var(--cal-accent) 20%, var(--site-bg, #fff)); border-color: color-mix(in srgb, var(--cal-accent) 40%, var(--site-border, #e2e8f0)); }
.calendar-schedule-nav-group { display: inline-flex; align-items: center; border: 1px solid var(--site-border, #e2e8f0); border-radius: 999px; overflow: hidden; background: var(--site-surface, #f8fafc); }
.calendar-schedule-nav { width: 34px; height: 34px; border: 0; background: transparent; color: var(--site-text, #334155); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background 0.18s ease, color 0.18s ease; }
.calendar-schedule-nav + .calendar-schedule-nav { border-left: 1px solid var(--site-border, #e2e8f0); }
.calendar-schedule-nav:hover { background: color-mix(in srgb, var(--cal-accent) 10%, var(--site-surface, #f8fafc)); color: var(--cal-accent); }
.calendar-schedule-grid-wrap { border: 1px solid var(--cal-grid-line); border-radius: var(--cal-radius-sm); overflow: visible; background: var(--site-bg, #fff); }
.calendar-schedule-weekdays { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0; background: color-mix(in srgb, var(--site-surface, #f8fafc) 88%, var(--site-bg, #fff)); border-bottom: 1px solid var(--cal-grid-line); }
.calendar-schedule-weekday { text-align: center; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.02em; color: var(--site-muted, #64748b); padding: 10px 4px; border-right: 1px solid var(--cal-grid-line); box-sizing: border-box; }
.calendar-schedule-weekday:last-child { border-right: 0; }
.calendar-schedule-weekday.is-weekend-sun { color: var(--cal-weekend-sun); }
.calendar-schedule-weekday.is-weekend-sat { color: var(--cal-weekend-sat); }
.calendar-schedule-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0; overflow: visible; }
.calendar-schedule-day { position: relative; z-index: 1; min-height: 92px; border: 0; border-right: 1px solid var(--cal-grid-line); border-bottom: 1px solid var(--cal-grid-line); border-radius: 0; background: var(--site-bg, #fff); color: var(--site-text, #0f172a); cursor: pointer; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 4px; padding: 8px 6px 6px; font: inherit; text-align: left; transition: background 0.15s ease; box-sizing: border-box; overflow: visible; }
.calendar-schedule-day:nth-child(7n) { border-right: 0; }
.calendar-schedule-day:nth-last-child(-n+7) { border-bottom: 0; }
.calendar-schedule-day.is-empty { pointer-events: none; background: color-mix(in srgb, var(--site-surface, #f8fafc) 75%, var(--site-bg, #fff)); min-height: 92px; }
.calendar-schedule-day.has-events:not(.is-empty) { background: var(--cal-day-has-events-bg); }
.calendar-schedule-day.is-range-title-origin { z-index: 6; }
.calendar-schedule-day.is-range-continuation { z-index: 1; }
.calendar-schedule-day.is-range-continuation .calendar-schedule-day-top { position: relative; z-index: 3; }
.calendar-schedule-day:hover:not(.is-empty) { background: color-mix(in srgb, var(--cal-accent) 10%, var(--site-bg, #fff)); }
.calendar-schedule-day.has-events:hover:not(.is-empty) { background: color-mix(in srgb, var(--cal-accent) 12%, var(--site-bg, #fff)); }
.calendar-schedule-day.is-today .calendar-schedule-day-num { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 999px; background: var(--cal-accent); color: #fff; font-weight: 800; }
.calendar-schedule-day.is-selected { background: color-mix(in srgb, var(--cal-accent) 8%, var(--site-bg, #fff)); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--cal-accent) 55%, transparent); }
.calendar-schedule-day.is-selected.is-today .calendar-schedule-day-num { box-shadow: 0 0 0 2px var(--site-bg, #fff); }
.calendar-schedule-day.is-weekend-sun:not(.is-today) .calendar-schedule-day-num { color: var(--cal-weekend-sun); }
.calendar-schedule-day.is-weekend-sat:not(.is-today) .calendar-schedule-day-num { color: var(--cal-weekend-sat); }
.calendar-schedule-day-num { font-size: 0.88rem; line-height: 1; font-weight: 800; flex-shrink: 0; color: var(--site-text, #0f172a); }
.calendar-schedule-day-top { display: flex; align-items: baseline; justify-content: space-between; gap: 4px; width: 100%; flex-shrink: 0; }
.calendar-schedule-day-lunar { font-size: 0.62rem; font-weight: 700; color: var(--site-muted, #64748b); white-space: nowrap; flex-shrink: 0; letter-spacing: -0.02em; }
.calendar-schedule-day-events { display: flex; flex-direction: column; gap: 5px; position: relative; min-width: 0; width: 100%; margin-top: 5px; flex: 1 1 auto; overflow: visible; }
.calendar-schedule-range-title { position: absolute; left: 14px; z-index: 9; display: block; max-width: none; width: calc(var(--range-span) * 100% + (var(--range-span) - 1) * 7px - 8px); white-space: nowrap; overflow: visible; color: var(--cal-event-fg); font-size: clamp(0.7rem, 1.5vw, 0.78rem); font-weight: 600; line-height: 28px; pointer-events: none; text-shadow: 0 0 1px var(--cal-event-bg), 0 0 2px var(--cal-event-bg); }
.calendar-schedule-day-event { display: block; position: relative; z-index: 2; width: 100%; max-width: none; min-width: 0; min-height: 28px; padding: 6px 10px 6px 10px; border-radius: 0 10px 10px 0; border: 1px solid var(--cal-event-border); border-left: 4px solid var(--cal-event-bar); background: var(--cal-event-bg); color: var(--cal-event-fg); box-sizing: border-box; box-shadow: none; font-size: clamp(0.7rem, 1.5vw, 0.78rem); font-weight: 600; line-height: 1.35; letter-spacing: -0.01em; overflow: visible; }
.calendar-schedule-day-event.is-range-start { border-radius: 10px 0 0 10px; margin-right: calc(-6px - 1px); padding-right: 12px; border-right-color: transparent; z-index: 3; }
.calendar-schedule-day-event.is-range-middle { border-radius: 0; margin-left: calc(-6px - 1px); margin-right: calc(-6px - 1px); padding-left: 8px; padding-right: 8px; border-left-color: transparent; border-right-color: transparent; border-left-width: 1px; z-index: 2; }
.calendar-schedule-day-event.is-range-end { border-radius: 0 10px 10px 0; margin-left: calc(-6px - 1px); padding-left: 10px; border-left-color: transparent; border-left-width: 1px; z-index: 2; }
.calendar-schedule-day-event-text.is-continuation { display: block; min-height: 1.35em; opacity: 0; }
.calendar-schedule-day-event-text { display: block; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--cal-event-fg); font-weight: 600; }
.calendar-schedule-day.is-selected .calendar-schedule-day-event { background: var(--cal-event-bg-active); border-color: var(--cal-event-border); border-left-color: var(--cal-event-bar); }
.calendar-schedule-day.has-events:hover .calendar-schedule-day-event { background: var(--cal-event-bg-active); }
.calendar-schedule-day-more { display: block; max-width: 100%; min-height: 24px; padding: 4px 10px; border-radius: 0 10px 10px 0; border: 1px solid var(--cal-event-border); border-left: 4px solid color-mix(in srgb, var(--cal-event-bar) 55%, var(--site-muted, #94a3b8)); background: color-mix(in srgb, var(--cal-event-bg) 88%, var(--site-bg, #fff)); font-size: 0.68rem; font-weight: 700; color: var(--site-muted, #64748b); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-sizing: border-box; }
.calendar-schedule-day-holidays { display: flex; flex-direction: column; gap: 2px; min-width: 0; width: 100%; margin-top: 2px; flex-shrink: 0; }
.calendar-schedule-day-holiday { display: block; max-width: 100%; padding: 3px 6px; border-radius: 6px; background: var(--cal-holiday-bg); color: var(--cal-holiday-fg); border: 1px solid var(--cal-holiday-border); font-size: 0.64rem; font-weight: 700; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.calendar-schedule-day-holiday-more { display: inline-flex; align-items: center; align-self: flex-start; padding: 1px 6px; border-radius: 999px; font-size: 0.6rem; font-weight: 700; color: var(--cal-holiday-fg); background: var(--cal-holiday-bg); border: 1px solid var(--cal-holiday-border); }
.calendar-schedule-day.is-holiday:not(.is-today) .calendar-schedule-day-num { color: var(--cal-holiday-fg); }
.calendar-schedule-day.is-holiday.is-weekend-sat:not(.is-today) .calendar-schedule-day-num,
.calendar-schedule-day.is-holiday.is-weekend-sun:not(.is-today) .calendar-schedule-day-num { color: var(--cal-holiday-fg); }
.calendar-schedule-list-item.is-korean-holiday { background: var(--cal-holiday-bg); border-color: var(--cal-holiday-border); }
.calendar-schedule-list-item.is-korean-holiday:hover { background: color-mix(in srgb, var(--cal-holiday) 22%, var(--site-surface, #f8fafc)); border-color: color-mix(in srgb, var(--cal-holiday) 48%, var(--site-border, #e2e8f0)); }
[data-theme="dark"] .calendar-schedule-list-item.is-korean-holiday:hover,
[data-theme="charcoal"] .calendar-schedule-list-item.is-korean-holiday:hover { background: color-mix(in srgb, var(--cal-holiday) 40%, var(--site-surface, #1e293b)); border-color: color-mix(in srgb, var(--cal-holiday) 68%, var(--site-border, #334155)); }
.calendar-schedule-list-accent--holiday { background: var(--cal-holiday-accent); }
.calendar-schedule-list-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 0.72rem; font-weight: 700; color: var(--cal-holiday-fg); background: var(--cal-holiday-bg); padding: 2px 8px; border-radius: 999px; border: 1px solid var(--cal-holiday-border); }
.calendar-schedule-list-badge i { font-size: 0.68rem; }
.calendar-schedule-events { min-width: 0; }
.calendar-schedule-events .calendar-schedule-panel-inner { display: flex; flex-direction: column; min-height: 100%; padding: 14px; }
.calendar-schedule-list-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--cal-grid-line); }
.calendar-schedule-list-head-main { display: flex; align-items: center; gap: 10px; min-width: 0; }
.calendar-schedule-list-icon { width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--cal-accent-soft); color: var(--cal-accent); font-size: 0.9rem; flex-shrink: 0; }
.calendar-schedule-list-head strong { display: block; font-size: 0.92rem; font-weight: 600; color: var(--site-text, #0f172a); letter-spacing: -0.01em; }
.calendar-schedule-list-sub { display: block; margin-top: 2px; font-size: 0.74rem; font-weight: 600; color: var(--site-muted, #64748b); }
.calendar-schedule-list-count { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 28px; padding: 0 8px; border-radius: 999px; background: var(--cal-accent-soft); color: var(--cal-accent); font-size: 0.74rem; font-weight: 800; flex-shrink: 0; }
.calendar-schedule-list-empty { margin: 0; padding: 28px 12px; text-align: center; font-size: 0.84rem; color: var(--site-muted, #64748b); border: 1px dashed var(--cal-grid-line); border-radius: var(--cal-radius-sm); background: color-mix(in srgb, var(--site-surface, #f8fafc) 70%, var(--site-bg, #fff)); line-height: 1.55; }
.calendar-schedule-list-empty i { display: block; margin-bottom: 8px; font-size: 1.35rem; color: color-mix(in srgb, var(--cal-accent) 55%, var(--site-muted, #94a3b8)); opacity: 0.9; }
.calendar-schedule-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; max-height: min(360px, 52vh); overflow-y: auto; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--cal-accent) 45%, transparent) transparent; }
.calendar-schedule-list::-webkit-scrollbar { width: 5px; }
.calendar-schedule-list::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--cal-accent) 50%, var(--site-border, #cbd5e1)); border-radius: 999px; }
.calendar-schedule-list-item { position: relative; display: block; padding: 14px 14px 14px 18px; border: 1px solid var(--cal-event-border); border-radius: var(--cal-radius-sm); background: var(--cal-event-bg); overflow: hidden; transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease; }
.calendar-schedule-list-item.is-schedule-event:hover { border-color: color-mix(in srgb, var(--cal-accent) 48%, var(--site-border, #e2e8f0)); background: var(--cal-event-bg-active); box-shadow: var(--cal-shadow); }
.calendar-schedule-list-item.is-korean-holiday:hover { border-color: color-mix(in srgb, var(--cal-holiday) 48%, var(--site-border, #e2e8f0)); background: color-mix(in srgb, var(--cal-holiday) 22%, var(--site-surface, #f8fafc)); box-shadow: var(--cal-shadow); }
.calendar-schedule-list-accent { position: absolute; left: 0; top: 10px; bottom: 10px; width: 5px; border-radius: 0 999px 999px 0; background: var(--cal-accent); }
.calendar-schedule-list-body { min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.calendar-schedule-list-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; }
.calendar-schedule-list-event-date { display: inline-flex; align-items: center; gap: 5px; margin: 0; font-size: 0.76rem; font-weight: 700; color: var(--site-muted, #64748b); }
.calendar-schedule-list-event-date i { color: var(--cal-accent); font-size: 0.72rem; }
.calendar-schedule-list-badge.is-event-meta { background: var(--cal-accent-soft); color: var(--cal-accent); border: 1px solid color-mix(in srgb, var(--cal-accent) 28%, var(--site-border, #e2e8f0)); font-size: 0.7rem; font-weight: 800; padding: 3px 9px; }
.calendar-schedule-list-time { display: inline-flex; align-items: center; gap: 5px; font-size: 0.8rem; font-weight: 800; color: var(--cal-accent); background: color-mix(in srgb, var(--cal-accent) 14%, var(--site-bg, #fff)); padding: 4px 10px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--cal-accent) 26%, var(--site-border, #e2e8f0)); }
.calendar-schedule-list-time i { font-size: 0.76rem; opacity: 0.9; }
.calendar-schedule-list-title { margin: 0; font-size: clamp(0.96rem, 2.2vw, 1.04rem); font-weight: 800; line-height: 1.45; color: var(--site-text, #0f172a); text-decoration: none; word-break: keep-all; overflow-wrap: anywhere; }
a.calendar-schedule-list-title { display: inline-flex; align-items: center; gap: 6px; }
a.calendar-schedule-list-title::after { content: "\f08e"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 0.68rem; color: var(--site-muted, #94a3b8); }
a.calendar-schedule-list-title:hover { color: var(--cal-accent); text-decoration: none; }
.calendar-schedule-list-desc { margin: 0; font-size: 0.84rem; color: var(--site-muted, #64748b); line-height: 1.55; }
.grid-widget-calendar-empty { padding: 28px 20px; text-align: center; color: var(--site-muted, #64748b); border: 1px dashed var(--site-border, #e2e8f0); border-radius: var(--cal-radius); background: color-mix(in srgb, var(--site-surface, #f8fafc) 80%, var(--site-bg, #fff)); }
.grid-widget-calendar-empty strong { display: block; margin-bottom: 6px; color: var(--site-text, #0f172a); font-weight: 800; }

@media (min-width: 768px) {
  .calendar-schedule-shell.is-split { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 16px; align-items: start; }
  .calendar-schedule-shell.is-split .calendar-schedule-events .calendar-schedule-panel-inner { min-height: 100%; }
  .calendar-schedule-panel-inner { padding: 18px; }
  .calendar-schedule-day { min-height: 98px; }
  .calendar-schedule-day.is-empty { min-height: 98px; }
}

@media (max-width: 767px) {
  .calendar-schedule-toolbar { align-items: stretch; }
  .calendar-schedule-toolbar-main { width: 100%; }
  .calendar-schedule-toolbar-actions { width: 100%; justify-content: space-between; }
  .calendar-schedule-date-nav { width: 100%; justify-content: flex-end; }
  .calendar-schedule-shell.is-split { grid-template-columns: minmax(0, 1fr); }
  .calendar-schedule-day { min-height: 78px; padding: 7px 5px 5px; }
  .calendar-schedule-day.is-empty { min-height: 78px; }
  .calendar-schedule-day-event { min-height: 26px; padding: 5px 8px; font-size: 0.68rem; }
  .calendar-schedule-day-more { min-height: 22px; font-size: 0.64rem; }
  .calendar-schedule-list { max-height: none; }
}

@media (prefers-reduced-motion: reduce) {
  .calendar-schedule-day, .calendar-schedule-list-item, .calendar-schedule-today, .calendar-schedule-nav { transition: none; }
}

/* calendar-schedule.css END */