/* ============================================================================
 * 일정관리(Schedule) 프론트 달력 스킨 스타일
 * calendar.php 의 인라인 <style> 을 분리한 파일.
 * 로드: calendar.php 에서 base_url('views/schedule/hdmain/css/style.css') 로 <link>
 * ========================================================================== */


.schedule-calendar-wrap {
	margin:30px auto;
}

.fc-event { cursor: pointer; }

/* --- 이전/다음 화살표 아이콘 보정 ---
   FullCalendar 는 자체 임베드 폰트(fcicons)로 화살표를 그리는데, 일부 환경에서
   이 글리프가 깨져 화살표가 안 보이는 문제가 있음. 사이트에 이미 로드된
   Font Awesome 4 아이콘으로 대체해 항상 정상 표시되도록 한다. */
.fc .fc-icon-chevron-left,
.fc .fc-icon-chevron-right {
	font-family: FontAwesome !important;
	font-size: 1.2em;
	line-height: 1;
	vertical-align: middle;
}
.fc .fc-icon-chevron-left::before { content: "\f104" !important; }   /* fa-angle-left */
.fc .fc-icon-chevron-right::before { content: "\f105" !important; }  /* fa-angle-right */

/* --- 월(month) 뷰 일정 블록이 좁아 내용이 잘리는 문제 보정 --- */
/* 1) 날짜 칸에 최소 높이를 줘서 여러 건이 들어가도 칸이 눌리지 않게 */
.fc .fc-daygrid-day-frame { min-height: 100px; }
/* 2) 일정 블록: 제목이 길면 줄바꿈되고, 그만큼 블록 높이가 자라도록 */
.fc-daygrid-event-harness { margin-bottom: 2px; }
.fc-daygrid-event {
	white-space: normal !important;
	align-items: flex-start;      /* 시간/제목이 여러 줄일 때 위 정렬 */
	padding: 2px 4px;
	line-height: 1.3;
	border-radius: 3px;
	font-size: 13px;              /* 이벤트 기본 글자 크기 확대 */
}
/* 시간 표시: FC 기본 flex 행에서 좁은 칸일 때 잘려 작게 보이므로,
   프레임을 block 으로 바꿔 시간을 자체 줄에 온전히 표시 */
.fc-daygrid-event .fc-event-main-frame { display: block; }
.fc-daygrid-event .fc-event-time {
	display: block;
	font-weight: bold;
	white-space: normal;
	overflow: visible;            /* FC 의 overflow:hidden 클리핑 방지 */
	max-width: none;
	font-size: 13px !important;   /* 시간 표시가 너무 작게 나오는 문제 보정 */
	line-height: 1.2;
}
.fc-daygrid-event .fc-event-title {
	white-space: normal;          /* 제목 줄바꿈 허용 */
	overflow: visible;            /* 잘림 방지 */
	line-height: 1.3;
	font-size: 13px;
}
/* 3) 주/일(timeGrid) 뷰에서도 제목이 잘리지 않도록 */
.fc-timegrid-event .fc-event-title { white-space: normal; }

/* 달력 + 다가오는 일정 2단 레이아웃 */
.schedule-layout { display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap; }
.schedule-calendar-col { flex: 1 1 640px; min-width: 0; }
.schedule-upcoming-col { flex: 0 0 300px; }
.schedule-upcoming-title { font-size: 18px; font-weight: bold; margin: 0 0 14px; padding-bottom: 10px; border-bottom: 2px solid #333; }
.schedule-upcoming-empty { color: #999; font-size: 14px; }
.schedule-upcoming-list { list-style: none; margin: 0; padding: 0; }
.schedule-upcoming-item { border: 1px solid #e5e5e5; border-left: 4px solid #4a9eff; border-radius: 4px; margin-bottom: 10px; background: #fff; }
.schedule-upcoming-item > a { display: block; padding: 12px 14px; text-decoration: none; color: inherit; }
.schedule-upcoming-item > a:hover { background: #f7f9fc; }
.schedule-upcoming-head { margin-bottom: 6px; }
.schedule-dday { font-weight: bold; font-size: 13px; margin-right: 6px; }
.schedule-upcoming-date { font-size: 12px; color: #555; vertical-align: middle; }
.schedule-cate { display: inline-block; color: #fff; font-size: 11px; padding: 1px 7px; border-radius: 10px; vertical-align: middle; }
.schedule-file { font-size: 12px; }
.schedule-upcoming-name { font-size: 15px; font-weight: bold; margin-bottom: 4px; line-height: 1.4; }
.schedule-upcoming-meta { color: #666; font-size: 12px; line-height: 1.6; }

/* 태블릿: 다가오는 일정이 달력 아래로 내려가고 가로 전체 사용 */
@media (max-width: 900px) {
	.schedule-upcoming-col { flex: 1 1 100%; }
}
/* 모바일: 달력은 숨기고 "다가오는 일정"만 표시 */
@media (max-width: 767px) {
	.schedule-calendar-col { display: none; }
	.schedule-upcoming-col { flex: 1 1 100%; }
	/* 좌우 여백을 줘서 upcoming 목록이 화면 가장자리에 붙지 않도록 */
	.schedule-calendar-wrap { margin: 20px auto; padding: 0 16px; box-sizing: border-box; }
}

/* --- 상세보기 dim 모달 --- */
.schedule-modal-overlay {
	display: none;
	position: fixed;
	inset: 0;
	top: 0; left: 0; right: 0; bottom: 0;   /* inset 미지원 브라우저 대비 */
	background: rgba(0, 0, 0, 0.55);          /* dim */
	z-index: 10000;
	padding: 20px;
	overflow-y: auto;
}
.schedule-modal-overlay.is-open { display: flex; align-items: flex-start; justify-content: center; }
body.schedule-modal-open { overflow: hidden; }   /* 배경 스크롤 잠금 */
.schedule-modal-box {
	position: relative;
	background: #fff;
	width: 100%;
	max-width: 640px;
	margin: 40px auto;
	border-radius: 6px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
	padding: 28px 28px 24px;
}
.schedule-modal-close {
	position: absolute;
	top: 10px; right: 14px;
	border: 0; background: transparent;
	font-size: 26px; line-height: 1;
	color: #888; cursor: pointer;
}
.schedule-modal-close:hover { color: #333; }
.schedule-modal-loading, .schedule-modal-error { padding: 30px 0; text-align: center; color: #777; }
.schedule-modal-error { color: #c0392b; }

/* 모달 내 상세 콘텐츠 */
.schedule-modal-tags { margin-bottom: 10px; }
.schedule-modal-cate { display: inline-block; color: #fff; font-size: 12px; padding: 2px 10px; border-radius: 10px; }
.schedule-modal-repeat { display: inline-block; font-size: 12px; padding: 2px 10px; border-radius: 10px; background: #337ab7; color: #fff; }
.schedule-modal-title { margin: 0 0 16px; font-size: 22px; font-weight: bold; line-height: 1.3; padding-right: 24px; }
.schedule-modal-table { width: 100%; border-collapse: collapse; margin-bottom: 18px; }
.schedule-modal-table th, .schedule-modal-table td { border-top: 1px solid #eee; padding: 8px 6px; font-size: 14px; text-align: left; vertical-align: top; }
.schedule-modal-table th { width: 110px; color: #666; font-weight: bold; }
.schedule-modal-allday { display: inline-block; font-size: 11px; background: #5bc0de; color: #fff; padding: 1px 7px; border-radius: 8px; margin-left: 4px; }
.schedule-modal-content { line-height: 1.7; font-size: 14px; margin-bottom: 18px; }
.schedule-modal-files { border-top: 1px solid #eee; padding-top: 14px; font-size: 14px; }
.schedule-modal-files ul { list-style: none; margin: 8px 0 0; padding: 0; }
.schedule-modal-files li { margin-bottom: 4px; }
.schedule-modal-filesize { color: #999; font-size: 12px; }