/* 캘린더 화면에 참고 이미지와 공통 디자인 시스템을 결합한다. */
.calendar-view-page {
    color: var(--fm-color-text-primary);
}

/* 캘린더 화면 제목과 명령 영역 사이의 간격을 정의한다. */
.calendar-view-page .calendar-page-heading {
    align-items: flex-start;
    margin-bottom: var(--fm-space-4);
}

/* 제목 설명과 상단 행동은 샘플의 간격과 공통 버튼 규격을 사용한다. */
.calendar-view-page .calendar-page-description { margin: var(--fm-space-2) 0 0; color: var(--fm-color-text-secondary); font-size: var(--fm-font-size-body); }
.calendar-view-page .calendar-secondary-controls { flex-shrink: 0; }
.calendar-view-page .calendar-secondary-controls .is-primary-outline,
.calendar-view-page :is(#calendar, #artloopCalendar)FilterButton { color: var(--fm-color-text-primary); }
.calendar-view-page :is(#calendar, #artloopCalendar)FilterButton > i { margin-left: var(--fm-space-3); transition: transform .2s; }
.calendar-view-page :is(#calendar, #artloopCalendar)FilterButton[aria-expanded="true"] > i { transform: rotate(180deg); }

/* 캘린더 상단 명령 영역의 좌우 행동을 정렬한다. */
.calendar-view-page .calendar-command-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: var(--fm-button-height-lg);
    gap: var(--fm-space-4);
    margin-bottom: var(--fm-space-4);
}

/* 태블릿의 두 줄 도구 영역은 보기를 전환해도 같은 높이를 유지합니다. */
@media (768px <= width < 1024px) {
    .calendar-view-page .calendar-command-bar {
        min-height: calc(var(--fm-button-height-lg) * 2 + var(--fm-space-2));
    }
}

/* 캘린더 상단의 주요 이동 및 보기 컨트롤을 묶는다. */
.calendar-view-page .calendar-primary-controls,
.calendar-view-page .calendar-secondary-controls {
    display: flex;
    align-items: center;
    gap: var(--fm-space-2);
}

/* 캘린더 보기 선택 및 필터 메뉴의 공통 부유 패널을 정의한다. */
.calendar-view-page .calendar-view-menu {
    display: none;
    position: absolute;
    top: calc(100% + var(--fm-space-1));
    right: 0;
    min-width: 110px;
    padding: var(--fm-space-2);
    border: 1px solid var(--fm-color-border);
    border-radius: var(--fm-radius-medium);
    background: var(--fm-color-surface);
    box-shadow: var(--fm-shadow-card);
    z-index: var(--k-z-dropdown);
}

/* 캘린더 보기 메뉴를 버튼 왼쪽 기준으로 열어 사이드바와 겹치지 않게 한다. */
.calendar-view-page .calendar-view-menu {
    right: auto;
    left: 0;
}

/* 캘린더 본문은 시안의 흰색 표면과 얇은 외곽선을 사용한다. */
.calendar-view-page .calendar-surface {
    min-width: 0;
    padding: 0;
    background: transparent;
}

/* 날짜 이동 버튼과 표시 기간을 검색 행 왼쪽의 한 컨트롤로 묶는다. */
.calendar-view-page .calendar-period-navigation {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--fm-space-2);
    min-height: 44px;
    border: 1px solid var(--fm-color-border);
    border-radius: var(--fm-radius-medium);
    background: var(--fm-color-surface);
}

/* 캘린더 표시 기간의 글자 위계를 정의한다. */
.calendar-view-page .calendar-period-navigation .current-range {
    min-width: 132px;
    margin: 0;
    color: var(--fm-color-text-primary);
    font-size: var(--fm-font-size-body-large);
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
}

/* 캘린더 기간 이동 아이콘 버튼의 모양을 정의한다. */
.calendar-view-page .calendar-period-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: var(--fm-radius-medium);
    background: transparent;
    color: var(--fm-color-text-primary);
    font-size: var(--fm-font-size-body-large);
    cursor: pointer;
}

/* 캘린더 기간 이동 버튼은 hover 시 배경 없이 아이콘 색상만 강조한다. */
.calendar-view-page .calendar-period-button:hover {
    background: transparent;
    color: var(--fm-color-primary);
}

/* 캘린더 기간 이동 버튼의 키보드 포커스를 표시한다. */
.calendar-view-page .calendar-period-button:focus-visible {
    outline: 3px solid var(--fm-color-primary-subtle);
    outline-offset: 1px;
}

/* 캘린더 라이브러리 컨테이너를 본문의 남은 높이에 맞추고 최소 높이를 보존한다. */
.calendar-view-page .cal-content #calendar {
    width: 100%;
    height: var(--calendar-available-height, calc(100dvh - 400px));
    min-height: 440px;
    padding: 0;
    border: 1px solid var(--fm-color-border);
    border-radius: var(--fm-radius-medium);
    background: var(--fm-color-surface);
    overflow: hidden;
}

/* 캘린더 라이브러리의 기본 표면과 모서리를 통일한다. */
.calendar-view-page :is(#calendar, #artloopCalendar) .toastui-calendar-layout {
    border-radius: var(--fm-radius-medium) !important;
    overflow: hidden !important;
}

/* 주간 캘린더의 시간 패널이 보기 영역의 남은 높이를 정확히 채우도록 한다. */
.calendar-view-page :is(#calendar, #artloopCalendar) .toastui-calendar-week-view {
    display: flex;
    flex-direction: column;
}

.calendar-view-page :is(#calendar, #artloopCalendar) .toastui-calendar-week-view > .toastui-calendar-time {
    flex: 1 1 0;
    min-height: 0;
    height: auto !important;
}

/* 변경된 요일 헤더 높이에 맞춰 월간 날짜 영역의 높이를 다시 계산한다. */
.calendar-view-page :is(#calendar, #artloopCalendar) .toastui-calendar-month .toastui-calendar-month-daygrid {
    height: calc(100% - 40px) !important;
    background: var(--fm-color-surface) !important;
}

/* 월간 주 행의 배경을 셀 구분선 색상과 통일한다. */
.calendar-view-page :is(#calendar, #artloopCalendar) .toastui-calendar-month-week-item {
    background: var(--fm-color-surface);
}

/* Toast UI 인라인 가로선과 셀 테두리가 겹치지 않도록 한 줄로 통일한다. */
.calendar-view-page :is(#calendar, #artloopCalendar) .toastui-calendar-weekday-grid {
    border-top: 1px solid var(--fm-color-border) !important;
}

/* 캘린더 요일 헤더를 시안의 연한 배경으로 구분합니다. */
.calendar-view-page :is(#calendar, #artloopCalendar) .toastui-calendar-day-names.toastui-calendar-month {
    height: 40px !important;
    padding: 0 !important;
    border: 0 !important;
    background: var(--fm-color-canvas) !important;
}

/* 캘린더 요일 헤더 문구의 정렬과 글자 위계를 정의한다. */
.calendar-view-page :is(#calendar, #artloopCalendar) .toastui-calendar-day-name-item {
    height: 40px !important;
    padding: 0 var(--fm-space-2) !important;
    color: var(--fm-color-text-primary) !important;
    font-size: var(--fm-font-size-body) !important;
    font-weight: 600 !important;
    line-height: 40px !important;
    text-align: center !important;
}

/* 주간 날짜 헤더 패널의 불필요한 스크롤을 숨긴다. */
.calendar-view-page :is(#calendar, #artloopCalendar) .toastui-calendar-panel.toastui-calendar-week-view-day-names {
    overflow: hidden !important;
}

/* 주간 날짜 헤더의 날짜와 요일을 패널 가운데에 정렬한다. */
.calendar-view-page :is(#calendar, #artloopCalendar) .toastui-calendar-week-view-day-names .toastui-calendar-day-names.toastui-calendar-week,
.calendar-view-page :is(#calendar, #artloopCalendar) .toastui-calendar-week-view-day-names .toastui-calendar-day-name-container {
    height: 100% !important;
}

.calendar-view-page :is(#calendar, #artloopCalendar) .toastui-calendar-week-view-day-names .toastui-calendar-day-name-item.toastui-calendar-week {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100% !important;
    line-height: normal !important;
    text-align: center !important;
}

.calendar-view-page :is(#calendar, #artloopCalendar) .toastui-calendar-week-view-day-names .toastui-calendar-day-name-item.toastui-calendar-week > span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.calendar-view-page :is(#calendar, #artloopCalendar) .toastui-calendar-week-view-day-names .calendar-week-day-name {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    margin: 0;
    text-align: center;
}

/* 주간 종일 제목을 제목 칸의 우측 가운데에 정렬한다. */
.calendar-view-page :is(#calendar, #artloopCalendar) .toastui-calendar-panel.toastui-calendar-allday .toastui-calendar-panel-title {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    box-sizing: border-box;
    padding-right: var(--fm-space-2) !important;
    text-align: right !important;
}

.calendar-view-page :is(#calendar, #artloopCalendar) .toastui-calendar-panel.toastui-calendar-allday .toastui-calendar-panel-title .tui-full-calendar-left-content,
.calendar-view-page :is(#calendar, #artloopCalendar) .toastui-calendar-panel.toastui-calendar-allday .toastui-calendar-panel-title .toastui-calendar-left-content {
    width: 100%;
    text-align: right;
}

/* 패널 높이는 유지하고 종일 격자와 일정 블록 내부에만 위아래 여백을 적용한다. */
.calendar-view-page :is(#calendar, #artloopCalendar) .toastui-calendar-panel.toastui-calendar-allday .toastui-calendar-allday-panel > .toastui-calendar-panel-grid-wrapper {
    top: var(--fm-space-1);
    height: calc(100% - var(--fm-space-2));
}

.calendar-view-page :is(#calendar, #artloopCalendar) .toastui-calendar-panel.toastui-calendar-allday .toastui-calendar-panel-allday-events {
    position: absolute;
    top: var(--fm-space-1);
    right: 0;
    bottom: var(--fm-space-1);
    left: 0;
    pointer-events: none;
}

.calendar-view-page :is(#calendar, #artloopCalendar) .toastui-calendar-panel.toastui-calendar-allday .toastui-calendar-panel-allday-events .toastui-calendar-weekday-event {
    pointer-events: auto;
}

/* 캘린더 일요일 헤더를 위험색으로 구분한다. */
.calendar-view-page :is(#calendar, #artloopCalendar) .toastui-calendar-day-names.toastui-calendar-month .toastui-calendar-day-name-item:nth-child(1) {
    color: var(--fm-color-danger) !important;
}

/* 캘린더 토요일 헤더를 주요색으로 구분한다. */
.calendar-view-page :is(#calendar, #artloopCalendar) .toastui-calendar-day-names.toastui-calendar-month .toastui-calendar-day-name-item:nth-child(7) {
    color: var(--fm-color-primary) !important;
}

/* 캘린더 날짜 셀을 흰색 카드형 칸으로 표시한다. */
.calendar-view-page :is(#calendar, #artloopCalendar) .toastui-calendar-daygrid-cell {
    padding: var(--fm-space-2) 0 !important;
    border: 0 !important;
    border-radius: 0;
    background: var(--fm-color-surface) !important;
}

/* 캘린더 날짜 셀 사이에 하나의 세로 구분선만 표시한다. */
.calendar-view-page :is(#calendar, #artloopCalendar) .toastui-calendar-daygrid-cell + .toastui-calendar-daygrid-cell {
    border-left: 1px solid var(--fm-color-border) !important;
}

/* 오늘 날짜는 셀 배경과 원형 날짜 표시로 강조한다. */
.calendar-view-page :is(#calendar, #artloopCalendar) .toastui-calendar-daygrid-cell.today-cell-highlight {
	/* background: var(--fm-color-primary-soft) !important;  */
	box-shadow: none !important; 
	outline: none !important; 
	}

/* 캘린더 날짜 숫자의 기본 글자색과 크기를 정의한다. */
.calendar-view-page :is(#calendar, #artloopCalendar) .toastui-calendar-grid-cell-date {
    padding: 0 var(--fm-space-3) !important;
    color: var(--fm-color-text-primary) !important;
    font-size: var(--fm-font-size-body) !important;
    font-weight: 500 !important;
}

/* 캘린더 일요일과 공휴일 날짜를 위험색으로 표시한다. */
.calendar-view-page :is(#calendar, #artloopCalendar) .calendar-date-sunday,
.calendar-view-page :is(#calendar, #artloopCalendar) .calendar-date-holiday {
    color: var(--fm-color-danger) !important;
}

/* 캘린더 토요일 날짜를 주요색으로 표시한다. */
.calendar-view-page :is(#calendar, #artloopCalendar) .calendar-date-saturday {
    color: var(--fm-color-primary) !important;
}

/* 월간 화면에서 이전·다음 달 날짜를 희미한 보조색으로 표시한다. */
.calendar-view-page :is(#calendar, #artloopCalendar) .calendar-date-other-month {
    color: var(--fm-color-text-disabled) !important;
}

/* 캘린더 오늘 날짜를 주요색 원형 배지로 강조한다. */
.calendar-view-page :is(#calendar, #artloopCalendar) .toastui-calendar-weekday-grid-date-decorator {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 26px !important;
    height: 26px !important;
    border-radius: var(--fm-radius-pill) !important;
    background: var(--fm-color-primary) !important;
    color: var(--fm-color-surface) !important;
    font-weight: 700 !important;
}

/* Toast UI의 단일 일정 점과 다일 일정 기간 배경을 유지하며 내부를 정렬한다. */
.calendar-view-page :is(#calendar, #artloopCalendar) .toastui-calendar-weekday-event {
    display: flex !important;
    align-items: center !important;
    min-width: 0;
    padding: 0 var(--fm-space-2) !important;
    border-radius: var(--fm-radius-small) !important;
    box-shadow: none !important;
}

/* 시간 지정 일정은 템플릿의 색상 점을 사용해 중복 표시를 방지합니다. */
.calendar-view-page :is(#calendar, #artloopCalendar) .toastui-calendar-weekday-event-dot {
    display: none;
}

/* 종일·날짜를 넘기는 일정은 배경을 표시하고 당일 시간 지정 일정은 배경·색상 테두리를 숨깁니다. */
.calendar-view-page :is(#calendar, #artloopCalendar) .toastui-calendar-weekday-event,
.calendar-view-page :is(#calendar, #artloopCalendar) .toastui-calendar-event-time-content {
    background-color: var(--schedule-item-background, color-mix(in srgb, var(--schedule-item-color) 12%, var(--fm-color-surface))) !important;
    border-left-width: var(--schedule-item-border-width, 3px) !important;
    color: var(--fm-color-text-primary) !important;
}

/* 시간 지정 일정의 제목 앞에 저장 색상으로 작은 점을 표시합니다. */
.calendar-view-page :is(#calendar, #artloopCalendar) .calendar-event-dot {
    display: inline-block;
    flex: 0 0 8px;
    width: 8px;
    height: 8px;
    margin-right: var(--fm-space-2);
    border-radius: var(--fm-radius-pill);
    background-color: var(--schedule-item-color);
}

.calendar-view-page :is(#calendar, #artloopCalendar) .toastui-calendar-event-time-content {
    display: flex;
    align-items: flex-start;
}

.calendar-view-page :is(#calendar, #artloopCalendar) .toastui-calendar-event-time-content .calendar-event-dot {
    margin-top: var(--fm-space-2);
}

/* 캘린더 일정 제목을 한 줄 말줄임으로 표시한다. */
.calendar-view-page :is(#calendar, #artloopCalendar) .toastui-calendar-weekday-event-title,
.calendar-view-page :is(#calendar, #artloopCalendar) .calendar-event-title {
    min-width: 0;
    flex: 1;
    overflow: hidden;
    color: inherit;
    font-size: var(--fm-font-size-small);
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 단일 일정의 제목은 색상 점 뒤에서 기본 본문색으로 표시한다. */
.calendar-view-page :is(#calendar, #artloopCalendar) .toastui-calendar-weekday-event-dot + .toastui-calendar-weekday-event-title {
    color: var(--fm-color-text-primary) !important;
}

/* 캘린더 일정 hover 시 기존 점과 기간 색상을 유지한 채 강조한다. */
.calendar-view-page :is(#calendar, #artloopCalendar) .toastui-calendar-weekday-event:hover {
    opacity: 0.82 !important;
    transform: none !important;
}

/* 날짜 아래 일정 영역과 겹치지 않도록 더보기를 칸 하단에 한 번만 표시합니다. */
.calendar-view-page :is(#calendar, #artloopCalendar) .toastui-calendar-grid-cell-header .toastui-calendar-grid-cell-more-events,
.calendar-view-page :is(#calendar, #artloopCalendar) .toastui-calendar-grid-cell-footer .toastui-calendar-grid-cell-date {
    display: none;
}

.calendar-view-page :is(#calendar, #artloopCalendar) .toastui-calendar-grid-cell-footer {
    padding: 0 8px 8px;
}

.calendar-view-page :is(#calendar, #artloopCalendar) .toastui-calendar-grid-cell-footer .toastui-calendar-grid-cell-more-events {
    float: none;
    display: block;
    width: 100%;
    height: 26px;
    padding: 0;
    line-height: 1.4;
}

/* 일정관리의 텍스트 더보기 높이에 맞춰 날짜 칸의 하단 여백을 줄입니다. */
.calendar-view-page #calendar .toastui-calendar-grid-cell-footer {
    padding-bottom: 4px;
}

.calendar-view-page #calendar .toastui-calendar-grid-cell-footer .toastui-calendar-grid-cell-more-events {
    display: inline-flex;
    width: auto;
    height: 18px;
}

.calendar-view-page :is(#calendar, #artloopCalendar) .toastui-calendar-grid-cell-more-events:focus-visible {
    outline: 2px solid var(--fm-color-primary);
    outline-offset: 2px;
    border-radius: var(--fm-radius-small);
}

/* 문서 좌표 대신 화면 좌표로 배치해 내부 잘림과 팝업 위치 밀림을 방지합니다. */
.calendar-view-page #calendar .toastui-calendar-see-more-container {
    position: fixed;
    visibility: hidden;
    max-width: calc(100vw - 16px);
    z-index: var(--k-z-dropdown);
}

.calendar-view-page :is(#calendar, #artloopCalendar) .toastui-calendar-see-more {
    height: 100% !important;
    border-color: var(--fm-color-border) !important;
    border-radius: var(--fm-radius-small);
    background: var(--fm-color-surface) !important;
    box-shadow: var(--fm-shadow-card) !important;
}

/* 일정 팝업 배경 레이어의 노출 전 상태를 정의한다. */
.calendar-event-drawer-backdrop {
    /* 배경 전환은 공통 드로어 오버레이가 담당합니다. */
    display: none;
    position: fixed;
    inset: 0;
    background: color-mix(in srgb, var(--fm-color-text-primary) 60%, transparent);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, visibility 0s linear 0.2s;
    z-index: var(--k-z-fullscreen);
}

/* 일정 등록·수정 드로어는 기존 배경 레이어 위에서 오른쪽에 정렬합니다. */
#eventModal.calendar-event-modal[hidden] {
    display: none;
}

#eventModal.calendar-event-modal {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: stretch;
    justify-content: flex-end;
    padding: 0;
    background: transparent;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: none;
    z-index: calc(var(--k-z-fullscreen) + 1);
}

/* 일정 팝업이 열린 상태에서 배경 레이어를 표시한다. */
body.is-calendar-event-modal-open .calendar-event-drawer-backdrop {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.2s ease;
}

/* 일정 팝업이 열린 상태에서 오버레이 상호작용을 활성화한다. */
body.is-calendar-event-modal-open #eventModal.calendar-event-modal {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: none;
}

/* 패널이 닫히는 동안에는 배경만 흐려지고 패널의 슬라이드는 끝까지 유지합니다. */
body.is-calendar-event-modal-closing .calendar-event-drawer-backdrop {
    opacity: 0;
    pointer-events: none;
}

/* 일정 등록 팝업을 디자인 가이드의 입력 모달 너비로 정의한다. */
#eventModal.calendar-event-modal:not(.fm-drawer) .calendar-event-card-modal {
    width: min(100%, 432px);
    max-width: 432px;
    height: auto;
    max-height: calc(100vh - 48px);
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--fm-radius-medium);
    background: var(--fm-color-surface);
    box-shadow: var(--fm-shadow-modal);
    opacity: 1;
    overflow: hidden;
    transform: none;
    transition: none;
}

/* 일정 팝업 헤더를 구분선 없는 공통 모달 구조로 정의한다. */
#eventModal.calendar-event-modal .modal-header {
    display: flex;
    align-items: center;
    border: 0;
    background: var(--fm-color-surface);
}

/* 일정 팝업 제목을 공통 모달 제목 위계로 정의한다. */
#eventModal.calendar-event-modal .modal-title {
    margin: 0;
    color: var(--fm-color-text-primary);
    font-size: var(--fm-font-size-heading-small);
    font-weight: 600;
}

/* 일정 팝업 폼을 헤더·본문·푸터 세로 구조로 구성한다. */
#eventModal.calendar-event-modal #eventForm {
    display: flex;
    min-height: 0;
    flex-direction: column;
}

/* 일정 팝업 본문에 스크롤과 공통 여백을 적용한다. */
#eventModal.calendar-event-modal .modal-body {
    display: block;
    min-height: 0;
    overflow-y: auto !important;
}

/* 일정 팝업 입력 구획의 세로 간격을 정의한다. */
#eventModal.calendar-event-modal .form-section {
    display: flex;
    flex-direction: column;
    gap: var(--fm-space-6);
    padding: 0;
    overflow: visible;
}

/* 일정 팝업 입력 그룹의 기존 하단 여백을 제거한다. */
#eventModal.calendar-event-modal .form-group {
    margin: 0;
}

/* 일정 팝업 라벨의 글자 위계를 정의한다. */
#eventModal.calendar-event-modal .form-label {
    display: block;
    margin: 0 0 var(--fm-space-2);
    color: var(--fm-color-text-primary);
    font-size: var(--fm-font-size-label);
    font-weight: 600;
}

/* 일정 팝업 필수 입력 표시를 위험색으로 정의한다. */
#eventModal.calendar-event-modal .required-mark {
    color: var(--fm-color-danger);
}

/* 일정 팝업 입력 요소의 공통 40픽셀 높이와 모양을 정의한다. */
#eventModal.calendar-event-modal .input-freemode,
#eventModal.calendar-event-modal .flatpickr-settle-input,
#eventModal.calendar-event-modal textarea.input-freemode {
    width: 100%;
    min-width: 0;
    height: var(--fm-control-height-medium);
    padding: 0 var(--fm-space-3);
    border: 1px solid var(--fm-color-border-strong);
    border-radius: var(--fm-radius-medium);
    outline: none;
    background: var(--fm-color-surface);
    color: var(--fm-color-text-primary);
    box-shadow: none;
    font-family: var(--fm-font-family);
    font-size: var(--fm-font-size-body);
}

/* 일정 팝업 설명 입력창의 높이와 내부 여백을 정의한다. */
#eventModal.calendar-event-modal textarea.input-freemode {
    min-height: 120px;
    height: 120px;
    padding-top: var(--fm-space-3);
    padding-bottom: var(--fm-space-3);
    line-height: 1.5;
    resize: vertical;
}

/* 일정 날짜 라벨과 종일 토글을 양끝으로 정렬한다. */
#eventModal.calendar-event-modal .calendar-date-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--fm-space-4);
    margin-bottom: var(--fm-space-3);
}

/* 일정 날짜 라벨의 중복 여백을 제거한다. */
#eventModal.calendar-event-modal .calendar-date-heading .form-label {
    margin: 0;
}

/* 일정 종일 토글의 문구와 스위치를 정렬한다. */
#eventModal.calendar-event-modal .calendar-all-day-control {
    display: flex;
    align-items: center;
    gap: var(--fm-space-2);
    color: var(--fm-color-text-primary);
    font-size: var(--fm-font-size-body);
    font-weight: 500;
}

/* 일정 날짜 범위를 두 입력과 구분자로 배치한다. */
#eventModal.calendar-event-modal .calendar-date-range {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: var(--fm-space-3);
}


/* 일정 날짜 입력의 아이콘 기준 위치를 정의한다. */
#eventModal.calendar-event-modal .calendar-date-input-wrap {
    position: relative;
    display: block;
    width: 100%;
    min-width: 0;
}

/* 일정 시작일과 종료일의 날짜·시간 입력을 세로로 배치한다. */
#eventModal.calendar-event-modal .calendar-date-column {
    min-width: 0;
}

/* 종일 일정에서는 시간 입력을 숨긴다. */
#eventModal.calendar-event-modal .calendar-time-input-wrap {
    display: none;
}

/* 시간 일정에서는 날짜 아래에 시간 입력을 표시한다. */
#eventModal.calendar-event-modal .calendar-date-range.is-timed .calendar-time-input-wrap {
    display: block;
    margin-top: var(--fm-space-2);
}

/* 일정 날짜 입력의 우측 아이콘 공간을 확보한다. */
#eventModal.calendar-event-modal .calendar-date-input-wrap .flatpickr-settle-input {
    padding-right: var(--fm-space-10);
}

/* 일정 날짜 입력의 캘린더 아이콘을 우측에 배치한다. */
#eventModal.calendar-event-modal .calendar-date-input-icon {
    position: absolute;
    top: 50%;
    right: var(--fm-space-3);
    color: var(--fm-color-text-disabled);
    transform: translateY(-50%);
    pointer-events: none;
}

/* 일정 날짜 범위 구분자의 보조색을 정의한다. */
#eventModal.calendar-event-modal .calendar-date-separator {
    color: var(--fm-color-text-secondary);
}

/* 일정 팝업 푸터를 동일 너비 행동 버튼 구조로 정의한다. */
#eventModal.calendar-event-modal .calendar-event-modal-footer {
    display: flex;
    align-items: center;
    gap: var(--fm-space-2);
    border: 0;
    background: var(--fm-color-surface);
}

/* 일정 팝업 푸터의 버튼 그룹이 남은 너비를 채우도록 정의한다. */
#eventModal.calendar-event-modal .calendar-event-footer-actions {
    display: flex;
    flex: 1;
    gap: var(--fm-space-2);
}

/* 일정 팝업 푸터 버튼을 같은 너비와 높이로 정의한다. */
#eventModal.calendar-event-modal .calendar-event-modal-footer .btn-freemode {
    flex: 1;
}

/* 전체일정 드로어의 시안 간격과 읽기 전용 프로젝트 정보를 적용합니다. */
#eventModal .form-label,
#scheduleSourceDialog.is-project-period .form-label {
    margin: 0 0 var(--k-space-form-label);
    font-size: var(--fm-font-size-body);
    font-weight: 600;
    line-height: 1.4;
}

#eventModal .calendar-date-heading {
    margin-bottom: var(--k-space-form-label);
}

#eventModal .calendar-date-heading .form-label {
    margin-bottom: 0;
}

#eventModal .calendar-all-day-control {
    margin-top: 0;
    gap: 6px;
    font-size: var(--fm-font-size-small);
}

#eventModal [hidden] {
    display: none !important;
}

#eventModal .calendar-delete-button {
    padding: 0;
    border: 0;
    background: none;
    color: var(--fm-color-danger);
    font: inherit;
    font-size: var(--fm-font-size-body);
    cursor: pointer;
}

#calendarProjectGroup .select-arrow-wrapper {
    display: block;
    width: 100%;
}

#calendarProjectGroup .select-arrow-wrapper > .select-menu-trigger {
    width: 100%;
    justify-content: space-between;
}

#calendarProjectGroup .select-menu-trigger::after {
    background-image: url('/images/icons/calendar-drawer-select.svg');
}

#calendarProjectGroup .select-menu-trigger:disabled,
#calendarProjectGroup select:disabled {
    background-color: var(--fm-color-canvas);
    color: var(--fm-color-text-primary);
    opacity: 1;
}

#eventModal .calendar-date-input-wrap:not(.calendar-time-input-wrap) .calendar-date-input-icon {
    background: url('/images/icons/calendar-drawer-date.svg') center no-repeat;
}

#eventModal .calendar-date-input-wrap:not(.calendar-time-input-wrap) .calendar-date-input-icon i {
    visibility: hidden;
}

#eventModal .modal-close-btn,
#scheduleSourceDialog.is-project-period .modal-close-btn {
    font-size: 0;
    background: url('/images/icons/calendar-drawer-close.svg') center no-repeat;
}

#eventModal .calendar-event-footer-actions .is-primary {
    background: var(--fm-color-text-primary);
    border-color: var(--fm-color-text-primary);
    color: var(--fm-color-surface);
}

.calendar-project-detail {
    display: flex;
    flex-direction: column;
    gap: var(--fm-space-6);
}

.calendar-project-detail .form-group {
    margin: 0;
}

.calendar-readonly-field {
    padding: 10px 14px;
    border: 1px solid var(--fm-color-border-strong);
    border-radius: var(--fm-radius-medium);
    color: var(--fm-color-text-primary);
    font-size: var(--fm-font-size-body);
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.calendar-readonly-dates {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: var(--k-space-form-label);
    align-items: center;
}

.calendar-readonly-dates .calendar-readonly-field {
    padding-right: 36px;
    background: url('/images/icons/calendar-drawer-date.svg') right 14px center no-repeat;
}

.calendar-readonly-memo {
    min-height: 120px;
    white-space: pre-wrap;
}

.calendar-project-notice {
    margin: var(--k-space-form-label) 0 0;
    color: var(--fm-color-text-secondary);
    font-size: var(--fm-font-size-small);
    line-height: 1.4;
}

#scheduleSourceDialog.is-project-period .modal-footer .btn-freemode {
    width: 100%;
    border-color: var(--fm-color-text-primary);
    color: var(--fm-color-text-primary);
}

/* 카테고리 선택기와 관리 목록의 빈 상태 안내 문구를 정의한다. */
.calendar-view-page .calendar-category-empty {
    margin: 0;
    padding: var(--fm-space-6);
    border: 1px dashed var(--fm-color-border-strong);
    border-radius: var(--fm-radius-medium);
    color: var(--fm-color-text-secondary);
    font-size: var(--fm-font-size-small);
    text-align: center;
}

/* 태블릿 이하에서 캘린더 상단 행동을 두 줄로 배치한다. */
@media (max-width: 1023px) {
    .calendar-view-page .calendar-page-heading {
        margin-bottom: var(--fm-space-8);
    }

    .calendar-view-page .calendar-command-bar {
        align-items: stretch;
        flex-direction: column;
    }

    .calendar-view-page .calendar-primary-controls,
    .calendar-view-page .calendar-secondary-controls {
        justify-content: space-between;
    }

    .calendar-view-page .calendar-secondary-controls {
        overflow-x: auto;
    }

    .calendar-view-page .calendar-command-bar .btn-freemode,
    .calendar-view-page .calendar-period-button {
        touch-action: manipulation;
    }

    .calendar-view-page .calendar-period-button {
        min-height: var(--fm-touch-target-min);
    }

    .calendar-view-page #addEventBtn {
        display: inline-flex;
    }

    .calendar-view-page .calendar-surface {
        padding: 0;
    }

    .calendar-view-page .cal-content #calendar {
        min-height: 520px;
    }

    .calendar-view-page .calendar-mobile {
        min-height: auto;
    }

    .calendar-view-page .calendar-grid-mobile {
        min-height: 0;
        margin-bottom: var(--fm-space-3);
        padding: 0 var(--fm-space-3) var(--fm-space-3);
    }

    .calendar-view-page .calendar-events-mobile {
        padding-bottom: calc(var(--fm-space-12) + env(safe-area-inset-bottom));
    }

    .calendar-view-page .calendar-mobile-add-btn {
        position: fixed;
        right: max(var(--fm-space-4), env(safe-area-inset-right));
        bottom: calc(var(--fm-space-5) + env(safe-area-inset-bottom));
        align-items: center;
        justify-content: center;
        width: 56px;
        min-width: 56px;
        height: 56px;
        min-height: 56px;
        padding: 0;
        border-radius: var(--fm-radius-pill);
        z-index: var(--k-z-sticky);
        touch-action: manipulation;
    }

    #eventModal.calendar-event-modal .calendar-event-card-modal{
        display: flex;
        min-height: 0;
        flex-direction: column;
    }

    #eventModal.calendar-event-modal:not(.fm-drawer) .calendar-event-card-modal{
        width: min(100%, 432px) !important;
        max-width: 432px !important;
    }

    #eventModal.calendar-event-modal #eventForm {
        min-height: 0;
        flex: 1 1 auto;
    }

    #eventModal.calendar-event-modal .modal-body{
        min-height: 0;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    #eventModal.calendar-event-modal .input-freemode,
    #eventModal.calendar-event-modal .flatpickr-settle-input,
    #eventModal.calendar-event-modal textarea.input-freemode{
        min-height: var(--fm-touch-target-min);
        font-size: var(--fm-mobile-control-font-size);
    }

    #eventModal.calendar-event-modal .calendar-event-modal-footer{
        flex-shrink: 0;
        padding-bottom: calc(var(--fm-space-4) + env(safe-area-inset-bottom));
    }

}

/* 모바일에서 캘린더와 팝업이 화면 폭 안에 맞도록 조정한다. */
@media (max-width: 767px) {
    .calendar-view-page .calendar-page-heading {
        margin-bottom: var(--fm-space-6);
    }

    .calendar-view-page .calendar-primary-controls,
    .calendar-view-page .calendar-secondary-controls {
        display: flex;
        justify-content: flex-start;
        width: auto;
        overflow: visible;
    }

    .calendar-view-page .calendar-command-bar .btn-freemode {
        width: auto;
    }

    .calendar-view-page .calendar-surface {
        padding: 0;
    }

    .calendar-view-page .calendar-period-navigation {
        gap: var(--fm-space-2);
        min-height: 44px;
    }

    .calendar-view-page .calendar-period-navigation .current-range {
        font-size: var(--fm-font-size-heading-small);
    }

    #eventModal.calendar-event-modal:not(.fm-drawer){
        padding: var(--fm-space-3);
    }

    #eventModal.calendar-event-modal:not(.fm-drawer) .calendar-event-card-modal{
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: calc(100dvh - var(--fm-space-6) - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
        border-radius: var(--fm-radius-medium) !important;
        transform: none !important;
        opacity: 1 !important;
    }

    #eventModal.calendar-event-modal .calendar-date-range {
        grid-template-columns: 1fr;
        gap: var(--fm-space-2);
    }

    #eventModal.calendar-event-modal .calendar-date-separator {
        display: none;
    }


}
/* 네 보기의 도구모음은 기존 버튼과 공통 탭을 사용한다. */
.calendar-view-page .calendar-command-bar { flex-wrap: wrap; }
.calendar-view-page .calendar-primary-controls { min-width: 0; flex-wrap: wrap; }
.calendar-view-page .calendar-view-menu.tabs-freemode { position: static; display: flex; width: 100%; min-width: 0; margin-bottom: var(--fm-space-5); padding: 0; background: transparent; box-shadow: none; border: 0; border-bottom: 1px solid var(--fm-color-border); border-radius: 0; z-index: auto; }
.calendar-view-page .schedule-filter-bar { display: flex; align-items: center; justify-content: flex-end; gap: var(--fm-space-2); margin: 0 0 0 auto; min-width: 0; }
.calendar-view-page :is(#calendar, #artloopCalendar)FilterButton {
    white-space: nowrap; 
}
.calendar-view-page #todayBtn { 
    border-color: var(--fm-color-border); 
}





.calendar-view-page .schedule-item-title { padding: 0; border: 0; background: transparent; color: var(--fm-color-text-primary); font: inherit; text-align: left; cursor: pointer; overflow-wrap: anywhere; }
.calendar-view-page .schedule-item-title:hover { color: var(--fm-color-primary); }
.calendar-view-page .schedule-item-title:focus-visible, .calendar-view-page .schedule-add-link:focus-visible { outline: 2px solid var(--fm-color-primary); outline-offset: 2px; }
.calendar-view-page .schedule-add-link { border: 0; background: transparent; color: var(--fm-color-primary); font: inherit; padding: var(--fm-space-3) 0; cursor: pointer; }
.calendar-view-page .fm-plan-board .schedule-add-link {
    display: flex;
    align-items: center;
    gap: var(--fm-space-1);
    height: 28px;
    margin: 0;
    padding: 5px 0;
    font-size: var(--fm-font-size-small);
    font-weight: 600;
    line-height: 1.4;
}

.fm-plan-add-icon {
    display: grid;
    place-items: center;
    width: 14px;
    height: 14px;
}

.fm-plan-add-icon img {
    width: 8px;
    height: 8px;
}

/* 주간 ToDo는 본문 전체 너비를 사용하며 달력 필터의 저장 상태는 유지합니다. */
.calendar-view-page[data-schedule-view="plan"] .calendar-workspace,
.calendar-view-page[data-schedule-view="plan"] .calendar-workspace.is-filter-open {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
}

.calendar-view-page[data-schedule-view="plan"] .calendar-filter-sidebar,
.calendar-view-page[data-schedule-view="plan"] .calendar-filter-toggle {
    display: none;
}

@media (max-width: 1023px) {
    .calendar-view-page .fm-plan-board .schedule-add-link,
    .calendar-view-page .fm-plan-delete {
        display: none;
    }
}
.calendar-view-page .schedule-project-label { display: inline-flex; align-items: center; gap: var(--fm-space-2); min-width: 0; color: var(--fm-color-text-secondary); }
.calendar-view-page .schedule-project-label::before { content: ''; flex: 0 0 8px; width: 8px; height: 8px; border-radius: var(--fm-radius-pill); background: var(--schedule-item-color, var(--fm-color-text-secondary)); }
.calendar-view-page .schedule-item-meta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--fm-space-2); }
.calendar-view-page .schedule-help, #eventModal .schedule-help { margin-top: var(--fm-space-2); font-size: var(--fm-font-size-small); color: var(--fm-color-text-secondary); }
.calendar-view-page .calendar-event-title.is-completed { text-decoration: line-through; opacity: .65; }












/* 자동 연결 공통 모달이 열리면 배경 스크롤을 막는다. */
body.is-calendar-source-modal-open,
body.is-calendar-event-modal-open { overflow: hidden; }







@media (max-width: 1199px) {
    .calendar-view-page .schedule-filter-bar { margin-left: 0; width: 100%; }
}
@media (max-width: 767px) {
    .calendar-view-page .calendar-command-bar { display: flex; gap: var(--fm-space-3); }
    .calendar-view-page .calendar-primary-controls { display: flex; flex-wrap: nowrap; justify-content: flex-start; width: 100%; }
    .calendar-view-page .calendar-page-heading { gap: var(--fm-space-3); }
    .calendar-view-page .calendar-secondary-controls { position: relative; margin-top: 0; justify-content: flex-start; flex-wrap: wrap; }
    .calendar-view-page .schedule-filter-bar { position: relative; }
    .calendar-view-page .calendar-primary-controls > button { margin: 0; }
    .calendar-view-page .calendar-period-navigation { gap: 0; flex: 1; }
    .calendar-view-page .calendar-period-navigation .current-range { min-width: 0; font-size: var(--fm-font-size-body); }
    .calendar-view-page .calendar-view-menu.tabs-freemode .tab-freemode { padding: 0 var(--fm-space-3); }
}

/* 전체 일정의 필터 사이드바와 본문 너비를 함께 전환합니다. */
.calendar-view-page [hidden],
#eventModal [hidden] {
    display: none !important;
}

.calendar-view-page .calendar-secondary-controls .is-line {
    border-color: var(--fm-color-text-primary);
}

.calendar-view-page .calendar-workspace {
    position: relative;
    display: grid;
    grid-template-columns: 0 minmax(0, 1fr);
    gap: 0;
    align-items: stretch;
    transition: grid-template-columns .24s ease, gap .24s ease;
}

.calendar-view-page .calendar-workspace.is-filter-open {
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 12px;
}

.calendar-filter-sidebar {
    min-width: 0;
    overflow: clip;
    border-radius: var(--fm-radius-medium);
    background: var(--fm-color-surface);
    box-shadow: var(--fm-shadow-card);
    opacity: 0;
    visibility: hidden;
    transition: opacity .24s ease, visibility .24s;
}

/* 패널의 배경과 그림자도 내용과 함께 숨겨 닫힐 때 잔상이 남지 않도록 합니다. */
.is-filter-open .calendar-filter-sidebar {
    opacity: 1;
    visibility: visible;
}

/* 컨테이너의 기본 테두리만 제거하고 내부 조작 요소의 포커스 표시는 유지합니다. */
.calendar-filter-sidebar:focus {
    outline: none;
}

.calendar-filter-content {
    width: 250px;
    max-height: calc(100dvh - 235px);
    min-height: 440px;
    padding: 24px 20px;
    box-sizing: border-box;
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(-100%);
    transition: transform .24s ease;
}

.is-filter-open .calendar-filter-content {
    transform: translateX(0);
}

.calendar-view-page .calendar-filter-toggle {
    position: absolute;
    z-index: 2;
    top: 286px;
    left: -20px;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: var(--fm-radius-pill);
    background: var(--fm-color-surface);
    box-shadow: var(--fm-shadow-card);
    cursor: pointer;
    transition: left .24s ease;
}

.calendar-view-page .is-filter-open .calendar-filter-toggle {
    left: 236px;
}

.calendar-view-page .calendar-filter-toggle:focus-visible,
.calendar-mini button:focus-visible,
.calendar-category-more:focus-visible {
    outline: 2px solid var(--fm-color-primary);
    outline-offset: 2px;
}

.calendar-view-page .calendar-surface {
    padding: 24px;
    border-radius: var(--fm-radius-medium);
    background: var(--fm-color-surface);
    box-shadow: var(--fm-shadow-card);
}

.calendar-view-page .calendar-command-bar {
    margin-bottom: 24px;
}

/* 보기 전환은 새 일정 본문만 부드럽게 표시하고 도구모음 위치를 유지합니다. */
.calendar-view-page .is-calendar-view-entering,
#projectWorkspace #pwCalendar.is-calendar-view-entering {
    animation: calendar-view-fade-in .24s ease-out;
}

@keyframes calendar-view-fade-in {
    from {
        opacity: 0.25;
    }

    to {
        opacity: 1;
    }
}

.calendar-view-page .calendar-primary-controls {
    gap: 16px;
}

.calendar-view-page .calendar-period-navigation {
    gap: 16px;
    min-height: 28px;
    border: 0;
    background: transparent;
}

.calendar-view-page .calendar-period-navigation .current-range {
    min-width: 0;
    font-size: 18px;
    font-weight: 600;
    white-space: nowrap;
}

.calendar-view-page .calendar-period-button {
    flex-shrink: 0;
    width: 20px;
    height: 28px;
    min-height: 0;
}

.calendar-view-page #todayBtn {
    border-color: var(--fm-color-primary);
    background: var(--fm-color-primary);
    color: var(--fm-color-surface);
}

.calendar-period-views {
    display: flex;
    gap: 6px;
}

.calendar-period-views [aria-pressed="true"] {
    border-color: var(--fm-color-primary);
    color: var(--fm-color-primary);
}

.calendar-mini-navigation {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 6px;
    font-size: 14px;
}

.calendar-mini-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-auto-rows: 30px;
    text-align: center;
}

.calendar-mini-grid > span,
.calendar-mini-grid > button {
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--fm-color-text-primary);
    font: inherit;
    font-size: 13px;
}

.calendar-mini-grid > button {
    width: 30px;
    height: 30px;
    border-radius: var(--fm-radius-pill);
    cursor: pointer;
}

.calendar-mini-grid [data-weekday="0"] {
    color: var(--fm-color-danger);
}

.calendar-mini-grid [data-weekday="6"] {
    color: var(--fm-color-primary);
}

.calendar-mini-grid [aria-pressed="true"] {
    background: var(--fm-color-primary-soft);
    box-shadow: inset 0 0 0 1px var(--fm-color-primary);
}

.calendar-mini-grid [aria-current="date"] {
    background: var(--fm-color-primary);
    color: var(--fm-color-surface);
}

.calendar-filter-section {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--fm-color-border);
}

.calendar-filter-section h2 {
    margin: 0 0 12px;
    font-size: 14px;
    font-weight: 600;
}

.calendar-filter-help {
    margin: 0 0 16px;
    color: var(--fm-color-text-secondary);
    font-size: 12px;
    line-height: 1.5;
}

.calendar-filter-row {
    display: flex;
    align-items: center;
    min-height: 36px;
    gap: 4px;
    padding: 0 4px;
    border-radius: 4px;
    --calendar-filter-color: var(--fm-color-primary);
}

.calendar-filter-row:hover,
.calendar-filter-row:focus-within {
    background: var(--fm-color-canvas);
}

.calendar-filter-row > label {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 12px;
    min-width: 0;
    margin: 0;
    font-size: 13px;
    font-weight: 400;
    cursor: pointer;
}

.calendar-filter-row label > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.calendar-filter-row input[type="checkbox"] {
    appearance: none;
    position: relative;
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    margin: 0;
    border: 1px solid var(--calendar-filter-color);
    border-radius: 2px;
    background: var(--fm-color-surface);
    cursor: pointer;
}

.calendar-filter-row input:checked {
    background: var(--calendar-filter-color);
}

.calendar-filter-row input:checked::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 5px;
    width: 4px;
    height: 8px;
    border: solid var(--fm-color-surface);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.calendar-filter-row input:focus-visible {
    outline: 2px solid var(--fm-color-primary);
    outline-offset: 3px;
}

.calendar-holiday-filter {
    --calendar-filter-color: var(--fm-color-logo-cyan);
}

#calendarConnectedFilters .calendar-filter-row {
    --calendar-filter-color: var(--fm-color-info);
}

.calendar-category-more {
    display: grid;
    place-items: center;
    width: 20px;
    height: 30px;
    padding: 0;
    border: 0;
    background: transparent;
    opacity: 0;
    cursor: pointer;
}

.calendar-category-more img {
    transform: rotate(90deg);
}

.calendar-filter-row:hover .calendar-category-more,
.calendar-filter-row:focus-within .calendar-category-more {
    opacity: 1;
}

.calendar-view-page .calendar-page-title {
    font-size: 22px;
    font-weight: 600;
}

@media (max-width: 1023px) {
    .calendar-view-page .calendar-workspace.is-filter-open {
        grid-template-columns: 0 minmax(0, 1fr);
        gap: 0;
    }

    .calendar-filter-sidebar {
        position: absolute;
        inset: 0 auto auto 0;
        z-index: 3;
        width: 250px;
        visibility: hidden;
    }

    .is-filter-open .calendar-filter-sidebar {
        visibility: visible;
    }

    .calendar-view-page .calendar-filter-toggle {
        left: -12px;
        z-index: 4;
    }

    .calendar-view-page .is-filter-open .calendar-filter-toggle {
        left: 230px;
    }

    .calendar-view-page .calendar-surface {
        grid-column: 2;
        min-width: 0;
        padding: 16px;
    }

    /* 필터가 없는 주간 ToDo는 한 열 그리드의 첫 번째 열에 배치합니다. */
    .calendar-view-page[data-schedule-view="plan"] .calendar-surface {
        grid-column: 1;
    }

    .calendar-view-page .calendar-command-bar {
        align-items: flex-start;
    }

    .calendar-view-page .calendar-primary-controls {
        flex-wrap: wrap;
        gap: 12px;
    }
}

/* 전체일정 간트는 일정 목록과 월별 날짜 축을 같은 카드에 표시합니다. */
.calendar-workspace.is-gantt-view .calendar-surface {
    grid-column: 2;
}

.calendar-gantt-view[hidden] {
    display: none;
}

.calendar-gantt-view {
    padding: 0;
    min-width: 0;
}

.calendar-gantt-view .gantt-toolbar__actions {
    margin-bottom: var(--fm-space-4);
}

.calendar-gantt-view .gantt-main-layout {
    grid-template-columns: 340px minmax(0, 1fr);
    min-height: 0;
    height: max(0px, calc(100dvh - 340px));
}

/* 피그마의 목록·날짜 격자는 외곽 라운드 없이 맞닿도록 배치합니다. */
.calendar-gantt-view .gantt-task-panel,
.calendar-gantt-view .gantt-canvas-panel {
    border-color: var(--fm-color-border);
    border-radius: 0;
    box-shadow: none;
}

/* 일정 목록의 오른쪽 구분선과 그림자를 차트 위에 표시합니다. */
.calendar-gantt-view .gantt-task-panel {
    position: relative;
    z-index: 1;
    border-right: 1px solid var(--fm-color-border-strong);
    box-shadow: 4px 0 8px -4px var(--k-overlay-dark-15);
}

.calendar-gantt-view .gantt-canvas-panel {
    position: relative;
    z-index: 0;
    border-left: 0;
}

.calendar-gantt-view .gantt-chart-container {
    flex: 1;
    min-height: 0;
    overflow: auto;
}

.calendar-gantt-view .gantt-container {
    width: max-content;
    height: auto;
    overflow: visible;
}

.calendar-gantt-view .gantt-task-table {
    table-layout: fixed;
    font-size: 14px;
}

/* 우측 가로 스크롤바 높이만큼 마지막 행의 세로 이동 여유를 맞춥니다. */
.calendar-gantt-view .gantt-task-table-wrap {
    padding-bottom: 16px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

/* 목록의 스크롤 동작과 차트 동기화를 유지하면서 스크롤바만 숨깁니다. */
.calendar-gantt-view .gantt-task-table-wrap::-webkit-scrollbar {
    display: none;
}

.calendar-gantt-view .gantt-task-table th:first-child {
    width: auto;
}

.calendar-gantt-view .gantt-task-table th:nth-child(3) {
    width: 80px;
}
.calendar-gantt-view .gantt-task-table th:nth-child(4) {
    width: 76px;
}

.calendar-gantt-view .gantt-task-table th {
    position: static;
    height: 30px;
    padding: 0 14px;
    background: var(--fm-color-surface);
    color: var(--fm-color-text-secondary);
    font-size: 13px;
    text-align: center;
}

/* 40px 목록 행과 차트 행을 맞추고 하위 일정은 32px 들여씁니다. */
.calendar-gantt-view .gantt-task-table td {
    height: 40px;
    padding: 0 14px;
    border-color: var(--fm-color-border);
    color: var(--fm-color-text-primary);
}

.calendar-gantt-view .is-child td {
    padding-left: 32px;
}

.calendar-gantt-name {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 39px;
    min-width: 0;
}

.calendar-gantt-name > .gantt-task-name-text,
.calendar-gantt-name > span:not(.gantt-task-color-dot) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.calendar-gantt-view .is-group .calendar-gantt-name {
    font-weight: 600;
}

.calendar-gantt-view .gantt-task-color-dot {
    flex: 0 0 8px;
    width: 8px;
    height: 8px;
    border-radius: var(--fm-radius-pill);
}

/* 그룹 접기는 공통 버튼 색상과 원본 아이콘을 사용합니다. */
.calendar-gantt-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--fm-color-primary);
    font: inherit;
    cursor: pointer;
}

.calendar-gantt-toggle {
    flex: 0 0 24px;
    height: 32px;
    margin-left: auto;
}

.calendar-gantt-view button:focus-visible {
    outline: 2px solid var(--fm-color-primary);
    outline-offset: 2px;
}

/* 날짜 헤더와 주말 배경은 기존 캘린더 토큰으로 그립니다. */
.calendar-gantt-view .gantt .grid-row,
.calendar-gantt-view .gantt .grid-row:nth-child(even) {
    fill: none;
}

.calendar-gantt-view .gantt .grid-header {
    fill: var(--fm-color-surface);
    stroke: var(--fm-color-border);
    stroke-width: 1;
}

.calendar-gantt-view .gantt .row-line,
.calendar-gantt-view .gantt .tick,
.calendar-gantt-view .gantt .tick.thick {
    stroke: var(--fm-color-border);
    stroke-width: 1;
}

.calendar-gantt-weekend {
    fill: var(--fm-color-canvas);
}

.calendar-gantt-date-cell {
    fill: transparent;
    stroke: var(--fm-color-border);
    stroke-width: 1;
}

.calendar-gantt-date {
    fill: var(--fm-color-text-primary);
    font-size: 14px;
}

.calendar-gantt-date {
    text-anchor: middle;
}

.calendar-gantt-date.is-sunday {
    fill: var(--fm-color-danger);
}

.calendar-gantt-date.is-saturday {
    fill: var(--fm-color-info);
}

.calendar-gantt-date-cell.is-weekend {
    fill: var(--fm-color-canvas);
}

.calendar-gantt-date-cell.is-today {
    fill: var(--fm-color-primary);
}

.calendar-gantt-date.is-today {
    fill: var(--fm-color-surface);
}

.calendar-gantt-today-line {
    stroke: var(--fm-color-primary);
    stroke-width: 1;
    pointer-events: none;
}

.calendar-gantt-view .gantt .bar-label {
    display: none;
}

.calendar-gantt-view .gantt {
    overflow: hidden;
}

.calendar-gantt-view .gantt-task-name-text {
    border: 0;
    padding: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

/* 날짜만 표시하는 차트 헤더와 목록 헤더 높이를 동일하게 맞춥니다. */
.calendar-gantt-view .gantt-task-table thead tr {
    height: 30px;
}

.calendar-gantt-view .calendar-gantt-group-only {
    visibility: hidden;
    pointer-events: none;
}

.calendar-gantt-view .calendar-gantt-readonly .handle {
    display: none;
}

/* 간트의 세부 일정 막대에도 같은 프로젝트 색상의 30% 배경을 적용합니다. */
.calendar-gantt-view .calendar-gantt-detail .bar,
.calendar-gantt-view .calendar-gantt-detail .bar-progress {
    fill: color-mix(in srgb, var(--schedule-item-color) 30%, var(--fm-color-surface)) !important;
    stroke: var(--schedule-item-color);
    stroke-width: 1;
}

.calendar-gantt-view .calendar-gantt-message {
    color: var(--fm-color-text-secondary);
}

.calendar-gantt-view .gantt-mobile-card {
    margin-bottom: var(--fm-space-3);
    padding: var(--fm-space-4);
    border: 1px solid var(--fm-color-border);
}

@media (prefers-reduced-motion: reduce) {
    .calendar-view-page .is-calendar-view-entering,
    #projectWorkspace #pwCalendar.is-calendar-view-entering {
        animation: none;
    }

    body.is-calendar-event-modal-open #eventModal.calendar-event-modal,
    body.is-calendar-event-modal-open .calendar-event-drawer-backdrop,
    #eventModal.calendar-event-modal,
    .calendar-event-drawer-backdrop,
    .calendar-workspace,
    .calendar-filter-sidebar,
    .calendar-filter-content,
    .calendar-view-page .calendar-filter-toggle {
        transition: none;
    }
}