/*
 * 캘린더 스킨 스타일
 * 색·여백·모서리는 아래 --cal-* 토큰에서만 정하고, 토큰은 라공에디션 디자인 변수를 따른다.
 * 디자인을 바꿀 땐 토큰부터 손대면 된다. 카테고리 색은 요소마다 --c 로 들어온다.
 */
#cal_wrap {
    --cal-text:    var(--text-primary, #222);
    --cal-muted:   var(--text-muted, #8b8b93);
    --cal-sub:     var(--text-secondary, #5b5b66);
    --cal-bg:      var(--card-bg, #fff);
    --cal-soft:    var(--bg-secondary, #f4f4f6);
    --cal-line:    var(--border-light, var(--border-color, #ececf0));
    --cal-primary: var(--primary-color, #6366f1);
    --cal-red:     var(--danger-color, var(--error-color, #e5484d));
    --cal-blue:    var(--info-color, #3b82f6);
    --cal-radius:  var(--radius-md, 10px);
    --cal-radius-lg: var(--radius-xl, 16px);
    --cal-shadow:  var(--shadow-md, 0 6px 20px rgba(0,0,0,.07));
    --cal-ease:    var(--motion-ease, ease);
    --cal-pop:     var(--motion-ease-pop, cubic-bezier(.34,1.56,.64,1));
    --cal-fast:    var(--motion-duration-fast, .15s);
    --c: var(--cal-primary);

    padding: 30px 10px;
    color: var(--cal-text);
    font-family: var(--font-family, inherit);
}
#cal_wrap *, #cal_wrap *::before, #cal_wrap *::after { box-sizing: border-box; }
#cal_wrap [hidden] { display: none !important; }
#cal_wrap.is-busy { cursor: progress; }
#cal_wrap.is-busy .cal-main { opacity: .6; pointer-events: none; }

.cal-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 18px;
    align-items: start;
}

/* ---------------------------------------------------------------- 버튼 */
.cal-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    border: 0; border-radius: 999px; padding: 9px 16px;
    font: inherit; font-size: .86rem; font-weight: 600; white-space: nowrap; cursor: pointer;
    transition: transform var(--cal-fast) var(--cal-pop), background var(--cal-fast) var(--cal-ease), box-shadow var(--cal-fast) var(--cal-ease);
}
.cal-btn:active { transform: scale(.96); }
.cal-btn:disabled { opacity: .5; cursor: default; }
.cal-btn-primary { background: var(--cal-primary); color: var(--btn-primary-text, #fff); }
.cal-btn-primary:hover { box-shadow: 0 4px 12px color-mix(in srgb, var(--cal-primary) 35%, transparent); }
.cal-btn-soft { background: var(--cal-soft); color: var(--cal-text); }
.cal-btn-soft:hover { background: color-mix(in srgb, var(--cal-primary) 12%, var(--cal-soft)); }
.cal-btn-ghost { background: transparent; color: var(--cal-muted); }
.cal-btn-block { width: 100%; }

.cal-icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; flex-shrink: 0;
    border: 0; border-radius: 50%; background: transparent; color: var(--cal-sub);
    cursor: pointer; text-decoration: none;
    transition: background var(--cal-fast) var(--cal-ease), color var(--cal-fast) var(--cal-ease), transform var(--cal-fast) var(--cal-pop);
}
.cal-icon-btn:hover { background: var(--cal-soft); color: var(--cal-text); }
.cal-icon-btn:active { transform: scale(.92); }
.cal-icon-btn.is-danger:hover { background: color-mix(in srgb, var(--cal-red) 14%, transparent); color: var(--cal-red); }

.cal-chip-btn {
    border-radius: 999px; padding: 5px 12px; font-size: .78rem; font-weight: 600;
    background: var(--cal-soft); color: var(--cal-sub); text-decoration: none;
}
.cal-chip-btn:hover { color: var(--cal-primary); }

/* ---------------------------------------------------------------- 상단 */
.cal-legacy {
    display: flex; align-items: center; gap: 8px; margin-bottom: 14px; padding: 10px 14px;
    border-radius: var(--cal-radius); text-decoration: none; font-size: .86rem; font-weight: 600;
    background: color-mix(in srgb, var(--cal-red) 12%, var(--cal-bg)); color: var(--cal-red);
}

.cal-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.cal-nav-month { position: relative; display: flex; align-items: center; gap: 4px; }
.cal-nav-tools { display: flex; align-items: center; gap: 6px; }
.cal-title {
    border: 0; background: transparent; cursor: pointer; padding: 4px 10px; border-radius: var(--cal-radius);
    font: inherit; font-size: var(--title-font-size, 1.35rem); font-weight: 800; color: var(--title-font-color, var(--cal-text));
    font-variant-numeric: tabular-nums;
}
.cal-title:hover { background: var(--cal-soft); }

.cal-picker {
    position: absolute; top: calc(100% + 6px); left: 0; z-index: 60; width: 248px; padding: 12px;
    background: var(--cal-bg); border-radius: var(--cal-radius-lg); box-shadow: var(--shadow-lg, 0 14px 34px rgba(0,0,0,.16));
}
.cal-picker-year { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.cal-picker-months { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.cal-picker-months button {
    border: 0; background: transparent; padding: 8px 0; border-radius: var(--cal-radius);
    font: inherit; font-size: .84rem; color: var(--cal-text); cursor: pointer;
}
.cal-picker-months button:hover { background: var(--cal-soft); }
.cal-picker-months button.is-current { background: var(--cal-primary); color: #fff; }

.cal-seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 999px; background: var(--cal-soft); }
.cal-seg button { border: 0; background: transparent; width: 32px; height: 28px; border-radius: 999px; color: var(--cal-muted); cursor: pointer; }
.cal-seg button[aria-pressed="true"] { background: var(--cal-bg); color: var(--cal-primary); box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,.08)); }

/* ---------------------------------------------------------------- 달력형 */
.cal-grid {
    background: var(--cal-bg);
    border: 1px solid var(--cal-line);
    border-radius: var(--cal-radius-lg);
    overflow: hidden;
}
.cal-dows { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-dows span { padding: 8px 0; text-align: center; font-size: .76rem; font-weight: 700; color: var(--cal-muted); }
.cal-dows .is-sun { color: var(--cal-red); }
.cal-dows .is-sat { color: var(--cal-blue); }

.cal-week {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    grid-template-rows: 28px repeat(var(--lanes), 22px) 20px;
    row-gap: 2px;
    min-height: 118px;
    border-top: 1px solid var(--cal-line);
}
.cal-day {
    grid-row: 1 / -1;
    display: flex; align-items: flex-start; gap: 4px; min-width: 0;
    padding: 4px 6px;
    border-left: 1px solid var(--cal-line);
    transition: background var(--cal-fast) var(--cal-ease);
}
.cal-day[style*="grid-column:1"] { border-left: 0; }
.cal-day.is-outside { background: color-mix(in srgb, var(--cal-soft) 60%, var(--cal-bg)); }
.cal-day.is-outside .cal-day-num { opacity: .45; }
.cal-day-num {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    min-width: 22px; height: 22px; padding: 0 3px; border-radius: 999px;
    font-size: .8rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.cal-day.is-red .cal-day-num { color: var(--cal-red); }
.cal-day.is-sat .cal-day-num { color: var(--cal-blue); }
.cal-day.is-today .cal-day-num { background: var(--cal-primary); color: #fff; }
.cal-day-hol { min-width: 0; padding-top: 4px; font-size: .66rem; color: var(--cal-red); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-day.is-drop { background: color-mix(in srgb, var(--cal-primary) 12%, var(--cal-bg)); box-shadow: inset 0 0 0 2px var(--cal-primary); }

/* 관리자: 빈 칸을 누르면 그 날짜로 등록 */
#cal_wrap.can-edit .cal-day, #cal_wrap.can-edit .cal-row { cursor: pointer; }
#cal_wrap .cal-grid .cal-day:hover { background: color-mix(in srgb, var(--cal-primary) 5%, transparent); }

/* 일정 칩 */
.cal-ev {
    position: relative; z-index: 1;
    display: flex; align-items: center; gap: 4px; min-width: 0;
    height: 20px; margin: 0 4px; padding: 0 6px;
    border: 0; border-radius: 6px; background: transparent;
    font: inherit; font-size: .74rem; line-height: 1; color: var(--cal-text); text-align: left;
    white-space: nowrap; overflow: hidden; cursor: pointer;
    transition: background var(--cal-fast) var(--cal-ease), opacity var(--cal-fast) var(--cal-ease), transform var(--cal-fast) var(--cal-pop);
}
.cal-ev:hover { background: color-mix(in srgb, var(--c) 14%, var(--cal-bg)); }
.cal-ev.is-bar { background: color-mix(in srgb, var(--c) 20%, var(--cal-bg)); box-shadow: inset 3px 0 0 var(--c); }
.cal-ev.is-bar:hover { background: color-mix(in srgb, var(--c) 30%, var(--cal-bg)); }
.cal-ev.is-bar.cont-l { margin-left: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; box-shadow: none; }
.cal-ev.is-bar.cont-r { margin-right: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.cal-ev.is-dot::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--c); flex-shrink: 0; }
.cal-ev.is-active { box-shadow: inset 0 0 0 2px var(--c); background: color-mix(in srgb, var(--c) 26%, var(--cal-bg)); }
.cal-ev.is-past { opacity: .55; }
.cal-ev.is-past:hover { opacity: 1; }
.cal-ev.is-filtered, .cal-agenda-item.is-filtered { display: none; }
.cal-ev[draggable="true"] { cursor: grab; }
.cal-ev.is-dragging { opacity: .35; }

.cal-ev-time { flex-shrink: 0; color: var(--cal-sub); font-variant-numeric: tabular-nums; }
.cal-ev-title { flex: 1 1 auto; min-width: 2.5em; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.cal-ev-icon { flex-shrink: 0; font-size: .6rem; color: var(--cal-muted); }
.cal-ev-prog {
    flex-shrink: 0; padding: 2px 5px; border-radius: 999px;
    background: color-mix(in srgb, var(--c) 85%, #000); color: #fff;
    font-size: .6rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.cal-ev-prog.is-last { background: var(--accent-color, #22c55e); }

.cal-more {
    z-index: 1; justify-self: start; align-self: center; margin-left: 8px; padding: 1px 6px;
    border: 0; border-radius: 999px; background: transparent;
    font: inherit; font-size: .7rem; font-weight: 700; color: var(--cal-sub); cursor: pointer;
}
.cal-more:hover { background: var(--cal-soft); color: var(--cal-primary); }

/* ---------------------------------------------------------------- 목록형 */
.cal-list { background: var(--cal-bg); border: 1px solid var(--cal-line); border-radius: var(--cal-radius-lg); overflow: hidden; }
.cal-row {
    display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 10px; align-items: start;
    padding: 10px 12px; border-top: 1px solid var(--cal-line);
}
.cal-row:first-child { border-top: 0; }
.cal-row.is-empty { padding-top: 4px; padding-bottom: 4px; }
.cal-row.is-empty .cal-row-date { flex-direction: row; gap: 6px; opacity: .55; }
.cal-row.is-today { background: color-mix(in srgb, var(--cal-primary) 7%, var(--cal-bg)); }
.cal-row.is-past:not(.is-today) .cal-row-date { opacity: .5; }
.cal-row-date { display: flex; flex-direction: column; align-items: center; line-height: 1.15; padding-top: 2px; }
.cal-row-date b { font-size: .95rem; font-variant-numeric: tabular-nums; }
.cal-row-date small { font-size: .68rem; color: var(--cal-muted); }
.cal-row-date.is-red, .cal-row-date.is-red small { color: var(--cal-red); }
.cal-row-date.is-sat, .cal-row-date.is-sat small { color: var(--cal-blue); }
.cal-row.is-today .cal-row-date b { color: var(--cal-primary); }
.cal-row-events { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cal-row-hol { font-size: .74rem; color: var(--cal-red); font-weight: 600; }
.cal-ev.is-row {
    height: auto; margin: 0; padding: 7px 10px; gap: 6px; font-size: .84rem; white-space: normal;
    background: color-mix(in srgb, var(--c) 12%, var(--cal-bg)); box-shadow: inset 3px 0 0 var(--c); border-radius: 8px;
}
.cal-ev.is-row .cal-ev-title { white-space: normal; word-break: keep-all; overflow-wrap: anywhere; }
.cal-ev-span { flex-shrink: 0; font-size: .68rem; color: var(--cal-muted); }

/* ---------------------------------------------------------------- 오른쪽 패널 */
.cal-side { position: sticky; top: 18px; display: flex; flex-direction: column; gap: 12px; }
.cal-sheet {
    background: var(--cal-bg); border-radius: var(--cal-radius-lg); box-shadow: var(--cal-shadow);
    padding: 18px; min-height: 240px;
}
.cal-sheet-backdrop { display: none; }
.cal-pane { display: flex; flex-direction: column; gap: 12px; animation: cal-fade .18s var(--cal-ease); }
@keyframes cal-fade { from { opacity: 0; transform: translateY(4px); } }
.cal-pane-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 34px; }
.cal-pane-title { margin: 0; font-size: 1rem; font-weight: 800; color: var(--title-font-color, var(--cal-text)); }
.cal-pane-actions { display: flex; align-items: center; gap: 6px; }
.cal-pane-actions .cal-btn { flex: 1; }
.cal-empty { margin: 0; padding: 18px 0; text-align: center; font-size: .84rem; color: var(--cal-muted); }

/* 일정 목록 (다가오는 일정 · 하루 목록 공용) */
/* 목록이 길어지면 패널 안에서만 스크롤 — 브라우저 전체를 내리지 않아도 되게 */
.cal-agenda {
    display: flex; flex-direction: column; gap: 4px;
    max-height: clamp(200px, 48vh, 440px);
    overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
    margin-right: -8px; padding: 0 8px 18px 0;            /* 스크롤바가 항목을 가리지 않게 */
    -webkit-mask-image: linear-gradient(#000 calc(100% - 18px), transparent);
            mask-image: linear-gradient(#000 calc(100% - 18px), transparent);
    scrollbar-width: thin; scrollbar-color: var(--cal-line) transparent;
}
.cal-agenda::-webkit-scrollbar { width: 6px; }
.cal-agenda::-webkit-scrollbar-thumb { background: var(--cal-line); border-radius: 999px; }
.cal-agenda h4 {
    position: sticky; top: 0; z-index: 1;                 /* 날짜 제목은 스크롤해도 위에 붙어 있다 */
    margin: 6px 0 0; padding: 4px 0 2px; background: var(--cal-bg);
    font-size: .74rem; font-weight: 700; color: var(--cal-muted);
}
.cal-agenda h4:first-child { margin-top: 0; }
.cal-agenda-item {
    --c: var(--cal-primary);
    display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px;
    border: 0; border-radius: var(--cal-radius); background: var(--cal-soft);
    box-shadow: inset 3px 0 0 var(--c);
    font: inherit; text-align: left; color: var(--cal-text); cursor: pointer;
    transition: background var(--cal-fast) var(--cal-ease), transform var(--cal-fast) var(--cal-pop);
}
.cal-agenda-item:hover { background: color-mix(in srgb, var(--c) 14%, var(--cal-soft)); transform: translateX(2px); }
.cal-agenda-time { flex-shrink: 0; min-width: 38px; font-size: .74rem; color: var(--cal-sub); font-variant-numeric: tabular-nums; }
.cal-agenda-title { flex: 1; min-width: 0; font-size: .85rem; font-weight: 600; word-break: keep-all; overflow-wrap: anywhere; }

/* 상세 */
.cal-detail-cat {
    display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px;
    background: color-mix(in srgb, var(--c) 16%, var(--cal-bg)); color: color-mix(in srgb, var(--c) 70%, var(--cal-text));
    font-size: .74rem; font-weight: 700;
}
.cal-detail-cat::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.cal-detail-title { margin: 0; font-size: 1.15rem; font-weight: 800; line-height: 1.35; word-break: keep-all; overflow-wrap: anywhere; color: var(--title-font-color, var(--cal-text)); }
.cal-detail-meta { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cal-detail-meta li { display: flex; align-items: baseline; gap: 10px; font-size: .85rem; color: var(--cal-sub); }
.cal-detail-meta i { width: 14px; text-align: center; color: var(--cal-muted); font-size: .8rem; }
.cal-detail-body {
    padding-top: 12px; border-top: 1px dashed var(--cal-line);
    white-space: pre-wrap; line-height: 1.65; font-size: .88rem; color: var(--content-font-color, var(--cal-text));
    overflow-wrap: anywhere;
}
.cal-detail-body a { color: var(--cal-primary); }

.cal-progress { height: 6px; border-radius: 999px; background: var(--cal-soft); overflow: hidden; }
.cal-progress i { display: block; height: 100%; border-radius: inherit; background: var(--c, var(--cal-primary)); transition: width .4s var(--cal-ease); }

/* 폼 */
.cal-form { display: flex; flex-direction: column; gap: 12px; }
.cal-form-mode { font-size: .78rem; font-weight: 700; color: var(--cal-muted); }
.cal-input {
    width: 100%; min-width: 0; padding: 8px 10px;
    border: 1px solid var(--form-border-color, var(--cal-line)); border-radius: var(--cal-radius);
    background: var(--form-bg, var(--cal-bg)); color: var(--form-text-color, var(--cal-text));
    font: inherit; font-size: .88rem;
    transition: border-color var(--cal-fast) var(--cal-ease), box-shadow var(--cal-fast) var(--cal-ease);
}
.cal-input:focus { outline: none; border-color: var(--cal-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cal-primary) 18%, transparent); }
.cal-input:disabled { opacity: .45; }
.cal-input-title { padding: 10px 2px; border-width: 0 0 2px; border-radius: 0; font-size: 1.05rem; font-weight: 700; background: transparent; }
.cal-input-title:focus { box-shadow: none; }
textarea.cal-input { resize: vertical; line-height: 1.55; }

.cal-when, .cal-repeat { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 10px; align-items: start; }
.cal-when > i, .cal-repeat > i { padding-top: 11px; color: var(--cal-muted); font-size: .85rem; text-align: center; }
.cal-when-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 6px; }
.cal-repeat-body { display: flex; flex-direction: column; gap: 8px; }
.cal-repeat-weekly, .cal-repeat-end { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.cal-repeat-weekly select, .cal-repeat-end select { width: auto; flex: 1 1 90px; }
.cal-repeat-end input[type="date"] { flex: 1 1 130px; width: auto; }

.cal-days { display: flex; gap: 3px; width: 100%; }
.cal-days label { flex: 1; cursor: pointer; }
.cal-days input, .cal-cats input { position: absolute; opacity: 0; pointer-events: none; }
.cal-days span {
    display: flex; align-items: center; justify-content: center; height: 30px; border-radius: 999px;
    background: var(--cal-soft); font-size: .78rem; font-weight: 700; color: var(--cal-sub);
    transition: background var(--cal-fast) var(--cal-ease), color var(--cal-fast) var(--cal-ease), transform var(--cal-fast) var(--cal-pop);
}
.cal-days .is-sun span { color: var(--cal-red); }
.cal-days .is-sat span { color: var(--cal-blue); }
.cal-days input:checked + span { background: var(--cal-primary); color: #fff; transform: scale(1.04); }
.cal-days input:focus-visible + span, .cal-cats input:focus-visible + span { outline: 2px solid var(--cal-primary); outline-offset: 2px; }
.cal-count { display: flex; align-items: center; gap: 6px; flex: 1 1 100px; font-size: .85rem; color: var(--cal-sub); }

.cal-cats { display: flex; flex-wrap: wrap; gap: 6px; }
.cal-cats label { --c: var(--cal-muted); cursor: pointer; }
.cal-cats span {
    display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px;
    border: 1px solid var(--cal-line); font-size: .8rem; font-weight: 600; color: var(--cal-sub);
    transition: all var(--cal-fast) var(--cal-ease);
}
.cal-cats span::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.cal-cats input:checked + span { border-color: var(--c); background: color-mix(in srgb, var(--c) 14%, var(--cal-bg)); color: var(--cal-text); }

.cal-field-label { font-size: .84rem; font-weight: 700; }
.cal-field-label small { margin-left: 4px; font-weight: 500; color: var(--cal-muted); }
.cal-settings-status { margin: 0; min-height: 1em; font-size: .78rem; color: var(--cal-sub); }

/* 아래 접는 섹션: 진행도 · 카테고리 */
.cal-fold { background: var(--cal-bg); border-radius: var(--cal-radius-lg); box-shadow: var(--cal-shadow); padding: 12px 16px; }
.cal-fold summary {
    display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none;
    font-size: .88rem; font-weight: 800; color: var(--title-font-color, var(--cal-text));
}
.cal-fold summary::-webkit-details-marker { display: none; }
.cal-fold summary::after { content: '\25BE'; margin-left: auto; color: var(--cal-muted); transition: transform var(--cal-fast) var(--cal-ease); }
.cal-fold:not([open]) summary::after { transform: rotate(-90deg); }
.cal-fold summary i { color: var(--cal-muted); font-size: .8rem; }

.cal-prog-list { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.cal-prog-list li > div:first-child { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 4px; font-size: .82rem; }
.cal-prog-list span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.cal-prog-list b { flex-shrink: 0; font-size: .76rem; color: var(--cal-sub); font-variant-numeric: tabular-nums; }

.cal-legend { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.cal-legend li { display: flex; align-items: center; gap: 8px; padding: 2px 4px; border-radius: var(--cal-radius); }
.cal-legend li.is-on { background: color-mix(in srgb, var(--c) 14%, var(--cal-bg)); }
.cal-legend button {
    flex: 1; min-width: 0; padding: 6px 0; border: 0; background: transparent; text-align: left; cursor: pointer;
    font: inherit; font-size: .84rem; font-weight: 600; color: var(--cal-text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cal-legend small { font-size: .72rem; color: var(--cal-muted); font-variant-numeric: tabular-nums; }
#cal_wrap.is-filtering .cal-legend li:not(.is-on) { opacity: .5; }
.cal-swatch {
    position: relative; width: 14px; height: 14px; flex-shrink: 0; border-radius: 50%; background: var(--c);
    transition: transform var(--cal-fast) var(--cal-pop);
}
label.cal-swatch { cursor: pointer; }
label.cal-swatch:hover { transform: scale(1.3); }
.cal-swatch input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0; }

/* ---------------------------------------------------------------- 범위 선택 다이얼로그 · 토스트 */
.cal-dialog {
    width: min(300px, 92vw); padding: 18px; border: 0; border-radius: var(--cal-radius-lg);
    background: var(--cal-bg); color: var(--cal-text); box-shadow: var(--shadow-lg, 0 18px 40px rgba(0,0,0,.2));
}
.cal-dialog::backdrop { background: rgba(0,0,0,.35); }
.cal-dialog form { display: flex; flex-direction: column; gap: 6px; }
.cal-dialog-title { margin: 0 0 6px; font-weight: 800; }
.cal-dialog .cal-btn-soft { justify-content: flex-start; }

.cal-toast {
    position: fixed; left: 50%; bottom: 24px; z-index: 2000; transform: translateX(-50%);
    max-width: 90vw; padding: 10px 18px; border-radius: 999px;
    background: var(--cal-text); color: var(--cal-bg); font-size: .86rem; font-weight: 600;
    box-shadow: var(--cal-shadow); animation: cal-fade .2s var(--cal-ease);
}

/* ---------------------------------------------------------------- 반응형 */
@media (max-width: 900px) {
    .cal-layout { grid-template-columns: minmax(0, 1fr); }
    .cal-side { position: static; }
    /* 상세 · 폼은 아래에서 올라오는 시트로 */
    #cal_wrap:not([data-panel="home"]) .cal-sheet {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 1001;
        max-height: 88vh; overflow-y: auto; border-radius: 20px 20px 0 0;
        padding-bottom: max(18px, env(safe-area-inset-bottom));
        animation: cal-sheet .22s var(--cal-ease);
    }
    #cal_wrap:not([data-panel="home"]) .cal-sheet-backdrop { display: block; position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,.35); }
    @keyframes cal-sheet { from { transform: translateY(40px); opacity: 0; } }
}
@media (max-width: 640px) {
    #cal_wrap { padding: 16px 0; }
    #cal_view_toggle { display: none; }
    .cal-grid { display: none !important; }   /* JS가 늦게 떠도 좁은 화면은 목록형 */
    .cal-list { display: block !important; }
    #cal_wrap .cal-list[hidden] { display: block !important; }
    .cal-title { font-size: 1.15rem; }
}

/* 칸이 좁으면 제목을 살리고 부가 정보부터 뺀다 (시각 → 반복 아이콘 → 회차 배지) */
.cal-grid { container-type: inline-size; }
@container (max-width: 760px) {
    .cal-week .cal-ev-time, .cal-week .cal-ev-icon { display: none; }
}
@container (max-width: 700px) {
    .cal-week .cal-ev-prog { display: none; }
}

/* 넓은 화면: 오른쪽 패널은 달력 높이에 맞춘다. 패널 내용이 줄 높이를 키우지 않도록 contain: size,
   남는 높이는 일정 목록이 채우고 넘치면 목록 안에서만 스크롤. 폼처럼 긴 화면은 카드 안에서 스크롤. */
@media (min-width: 901px) {
    .cal-layout { align-items: stretch; }
    .cal-side { position: static; contain: size; min-height: 560px; overflow-y: auto; scrollbar-width: none; }
    .cal-side::-webkit-scrollbar { display: none; }
    .cal-sheet { flex: 1 1 auto; min-height: 240px; display: flex; flex-direction: column; overflow-y: auto; scrollbar-width: thin; }
    .cal-pane[data-pane="home"], .cal-pane[data-pane="list"] { flex: 1 1 auto; min-height: 0; }
    .cal-pane[data-pane="home"] .cal-agenda, .cal-pane[data-pane="list"] .cal-agenda { flex: 1 1 0; min-height: 120px; max-height: none; }
    .cal-fold { flex: none; }
    /* 작성 · 설정 중에는 아래 요약을 접어 두고 폼에 높이를 다 준다 */
    #cal_wrap[data-panel="form"] .cal-fold, #cal_wrap[data-panel="settings"] .cal-fold { display: none; }
}