.relation-inline-fields {display: flex; align-items: center; gap: 1rem;}
.relation-inline-fields > * {min-width: 0;}
#relationBudget {min-height: 12rem;}
.relation-course-options {display: flex; flex-wrap: wrap; gap: .8rem;}
.relation-course-option {display: flex; align-items: center; gap: .8rem; min-height: 4.4rem; margin: 0; padding: .8rem 1.4rem; border: 1px solid #D9D9D9; border-radius: .4rem; background: #fff; color: #333; font-size: 1.6rem; cursor: pointer; transition: background .15s, border-color .15s, color .15s;}
.relation-course-option.active {border-color: #18B8CC; background: #18B8CC; color: #fff;}
.relation-course-option input[type='radio'] {position: absolute; opacity: 0; pointer-events: none;}
.relation-course-option span {line-height: 1.3; white-space: nowrap;}
.relation-course-etc {flex: 0 0 100%; max-width: 42rem; height: 4.2rem; margin-top: .2rem; padding: 0 1.2rem; border: 1px solid #BFEAF0; border-left: .4rem solid #18B8CC; border-radius: .3rem; background: #F8FEFF; color: #333; font-size: 1.4rem;}

.relation-calendar-section {margin-bottom: 6rem; padding: 5rem; background-color: #FAFAFA;}
.relation-calendar-filter {display: flex; gap: 1rem; margin-bottom: 3rem;}
.relation-calendar-filter button {flex: 1; height: 4.8rem; border: 0; border-radius: .3rem; background: #E8E8E8; color: #555; font-size: 1.7rem; font-weight: 700;}
.relation-calendar-filter button.active, .relation-calendar-filter button:hover {background: #18B8CC; color: #fff;}
.relation-calendar-filter button[data-status='receipt'].active, .relation-calendar-filter button[data-status='receipt']:hover {background: #8FC31F;}
.relation-calendar-box {padding: 0; overflow: hidden; background: transparent;}
#relationCalendar {min-height: 52rem;}

#relationCalendar .fc-toolbar {justify-content: center; margin-bottom: 2rem; padding: 0;}
#relationCalendar .fc-toolbar .fc-toolbar-chunk > div {display: flex; align-items: center; gap: 1rem;}
#relationCalendar .fc-toolbar-title {font-size: 2.8rem; font-weight: 700;}
#relationCalendar .fc-button {width: 3rem; height: 3rem; padding: 0; border: 0; border-radius: 50%; background: #E8E8E8; color: #7A7A7A; box-shadow: none;}
#relationCalendar .fc-button:focus {box-shadow: none;}
#relationCalendar .fc-icon {font-size: 1.6rem;}

#relationCalendar .fc-scrollgrid {border-color: #E5E5E5;}
#relationCalendar .fc-col-header-cell {background: #fff; font-size: 1.6rem;}
#relationCalendar .fc-col-header-cell-cushion {padding: 1.6rem 0; color: #111; font-weight: 700; text-decoration: none;}
#relationCalendar .fc-col-header-cell:first-child .fc-col-header-cell-cushion, #relationCalendar .fc-day-sun .fc-daygrid-day-number {color: #F03E3E;}
#relationCalendar .fc-col-header-cell:last-child .fc-col-header-cell-cushion, #relationCalendar .fc-day-sat .fc-daygrid-day-number {color: #1677FF;}
#relationCalendar .fc-daygrid-day {border-color: #EDEDED; background: #fff;}
#relationCalendar .fc-day-past {background: #F7F7F7;}
#relationCalendar .fc-day-today {background: #fff;}
#relationCalendar .fc-day-selected {background: #EFFBEA;}
#relationCalendar .fc-daygrid-day-frame {position: relative; min-height: 13rem; padding: .9rem 1rem; cursor: pointer;}
#relationCalendar .fc-daygrid-day-top {display: flex; justify-content: start; padding: 0; font-size: 1.5rem; font-weight: 700;}
#relationCalendar .fc-daygrid-day-events {margin-top: .8rem;}
#relationCalendar .fc-daygrid-more-link {display: none;}

#relationCalendar .fc-daygrid-event {margin: .45rem 0 0; border: 0 !important; border-radius: .3rem; color: #fff;}
#relationCalendar .fc-event-main {color: inherit;}
#relationCalendar .relation-calendar-event {display: flex; align-items: center; min-width: 0; color: inherit; font-size: 1.2rem;}
#relationCalendar .relation-calendar-title {display: block; min-width: 0; padding: .6rem .8rem; overflow: hidden; color: inherit; font-size: 1.6rem; line-height: 1; text-overflow: ellipsis; white-space: nowrap;}
#relationCalendar .relation-calendar-count {position: absolute; top: 0; right: 0; min-width: 4.8rem; padding: .6rem .8rem; background: #111; color: #fff; font-size: 1.6rem; font-weight: 700; line-height: 1.8rem; text-align: center;}
.relation-status-receipt {background-color: #8FC31F;}
.relation-status-complete {background-color: #18B8CC;}

.relation-calendar-detail {margin-top: 3rem;}
.relation-calendar-detail-title {margin-bottom: 1rem; font-size: 2.2rem; font-weight: 700;}
.relation-calendar-detail-list {display: flex; flex-direction: column; gap: 1.4rem;}
.relation-calendar-detail-group {display: flex; border: 1px solid #E5E5E5; background: #fff;}
.relation-calendar-detail-group-title {display: flex; align-items: center; justify-content: center; flex: 0 0 15rem; flex-direction: column; gap: .4rem; padding: 0 1.5rem; color: #fff; font-size: 1.8rem; font-weight: 700; text-align: center;}
.relation-calendar-detail-group-title span {display: block;}
.relation-calendar-detail-group-list {display: flex; flex: 1; flex-direction: column;}
.relation-calendar-detail-item, .relation-calendar-empty {background: #fff;}
.relation-calendar-detail-item {display: flex; min-height: 5.2rem; border-bottom: 1px solid #EFEFEF;}
.relation-calendar-detail-item:last-child {border-bottom: 0;}
.relation-calendar-detail-info {display: flex; align-items: center; gap: 3rem; min-width: 0; padding: 2rem; font-size: 1.6rem;}
.relation-calendar-detail-info span {min-width: 0;}
.relation-calendar-detail-info b {font-weight: 700;}
.relation-calendar-empty {padding: 2rem; font-size: 1.6rem;}

@media (max-width: 768px) {
	.relation-calendar-section {padding: 2rem 0;}
	.relation-calendar-filter {gap: .6rem;}
	.relation-calendar-filter button {height: 4rem; font-size: 1.3rem;}
	.relation-course-option {min-height: 4rem; padding: .7rem 1.1rem; font-size: 1.3rem;}
	.relation-course-etc {width: 100%;}
	.relation-inline-fields {flex-direction: column; align-items: stretch;}
	.relation-inline-fields > * {width: 100% !important; max-width: none !important;}
	#relationCalendar {min-height: 42rem;}
	#relationCalendar .fc-toolbar {padding: 1.2rem;}
	#relationCalendar .fc-daygrid-day-frame {min-height: 8.4rem; padding: .6rem;}
	#relationCalendar .fc-daygrid-day-number {font-size: 1.4rem;}
	#relationCalendar .relation-calendar-event {font-size: 1.2rem;}
	#relationCalendar .relation-calendar-count {min-width: 3.8rem; height: 2.2rem; padding: .25rem .5rem; font-size: 1.1rem; line-height: 1.7rem;}
	.relation-calendar-detail-group {flex-direction: column;}
	.relation-calendar-detail-item {flex-direction: column;}
	.relation-calendar-detail-group-title {min-height: 4.4rem; flex-basis: auto; padding: 0 1.2rem; font-size: 1.7rem;}
	.relation-calendar-detail-info {flex-direction: column; align-items: flex-start; gap: .6rem;}
}