@charset "utf-8";

/*
 * 캠퍼스투어 사용자 화면 자체 스타일.
 * 퍼블 자산(ipsi-app / ipsi-board / ipsi-board-write / ipsi-popup / ipsi-table / schedule)이
 * 커버하지 못하는 클래스만 둔다. 색상은 ipsi-app.css 의 값을 따른다.
 */

/* 상태 배지 -- 진행중 / 진행예정 / 진행종료, 접수완료 / 승인 / 반려 / 신청취소 */
.ct-badge {display: inline-block; margin-left: 10px; padding: 6px 14px; border-radius: 99px; font-weight: 700; font-size: 14px; line-height: 1; letter-spacing: -0.02em; vertical-align: middle;}
.ct-badge--open {background-color: #01314d; color: #fff;}
.ct-badge--ready {background-color: #f6f6f6; border: 1px solid #e5e5e5; color: #555;}
.ct-badge--closed {background-color: #c10230; color: #fff;}

/*
 * 안내 화면의 배지는 JS(app.campus-tour.js moveStatusBadge)가 페이지 제목(h3) 줄로 옮긴다.
 * 그 줄은 flex + justify-content:space-between 이라 margin-left:auto 로 우측에 붙인다.
 * 제목이 50px 이라 본문용 14px 로는 균형이 맞지 않아 별도 크기를 준다.
 * ct-status-line 은 이식에 성공하면 JS 가 제거한다 -- 이식 실패 시에만 앱 상단에 남는다.
 * (CSS :empty 로는 못 지운다. JSP 가 남긴 줄바꿈이 텍스트 노드라 :empty 가 매칭되지 않는다.)
 */
.ct-status-line {display: flex; justify-content: flex-end; padding-bottom: 10px;}
.sub-title-wrap .ct-badge--title {margin-left: auto; padding: 12px 26px; font-size: 20px;}

/* 안내 문구 한 줄 */
.ct-guide {padding-top: 20px; font-weight: 500; font-size: 16px; line-height: 140%; letter-spacing: -0.02em; text-align: center; color: #555;}

/* 선택한 일정 표시 */
.ct-picked {display: inline-block; margin-right: 10px; font-weight: 700; font-size: 16px; line-height: 1.4; letter-spacing: -0.02em; color: #111;}
.ct-user .bn-write-common .b-table-box .b-col-box .b-con-box .b-con > .ct-picked {color:#111;}

/* 접수기간이 아닐 때의 신청 버튼 */
.b-tour .b-tour-button ul li a.ct-disabled {border-color: #ccc; color: #999; cursor: not-allowed;}
.b-tour .b-tour-button ul li a.ct-disabled:after {filter: grayscale(1) opacity(0.5);}

/* 고교검색 결과 행 */
.b-popup-wrap[data-popup-type="popup-ct-school"] .b-popup-con-box {overflow-y: auto;}
#ctSchoolResult tr[data-action="pick-school"] {cursor: pointer;}
#ctSchoolResult tr[data-action="pick-school"]:hover td,
#ctSchoolResult tr[data-action="pick-school"]:focus-within td {background-color: #f6f6f6;}

/* 캘린더 슬롯 칩 -- 선택 가능한 것만 커서를 바꾼다 */
.calendar-box .fc .fc-daygrid-event.btn-event {cursor: pointer;}
.calendar-box .fc .fc-daygrid-event.btn-event.is-red {cursor: default;}
/* schedule.css 가 모든 칩의 .event-btn-inner:after 에 화살표 아이콘을 그린다. 신청불가 칩은
   화살표 대신 X 를 쓰므로 그대로 두면 둘이 함께 나와 눌리지 않는 칩이 클릭을 유도한다. */
.calendar-box .fc .fc-daygrid-event.btn-event.is-red .event-btn-inner:after {display: none;}

/*
 * schedule.css 가 .fc-event 계열에 pointer-events:none 을 전역으로 걸어 두어 fullcalendar 의
 * eventClick(.fc-event 위임)이 발화하지 않는다. 표시 전용 캘린더를 위한 규칙이므로 퍼블 소관인
 * _res 를 고치지 않고 이 앱 안에서만 되살린다. pointer-events 는 상속 속성이고 .fc-event-main
 * 에도 none 이 걸려 있어, 컨테이너만 풀면 자식이 다시 none 을 물려받는다.
 * 예약불가(is-red) 칩도 클릭은 닿되 controller.js 의 selectable 검사가 막는다.
 */
.ct-user .calendar-box .fc-event.btn-event,
.ct-user .calendar-box .fc-event.btn-event .fc-event-main,
.ct-user .calendar-box .fc-event.btn-event .event-btn-inner,
.ct-user .calendar-box .fc-event.btn-event .event-btn-inner > * {pointer-events: auto !important;}

@media (max-width: 1024px) {
	.ct-badge {margin-left: 6px; padding: 5px 10px; font-size: 12px;}
	.sub-title-wrap .ct-badge--title {padding: 8px 16px; font-size: 14px;}
	.ct-guide {padding-top: 15px; font-size: 14px;}
	.ct-picked {font-size: 14px;}
}

/* 캘린더 칩 원천 데이터 컨테이너 (calendar.jsp) */
#ctData { display: none; }

.b-popup-wrap[data-popup-type="popup-ct-mail"] .note {text-align: center;}