@charset "UTF-8";
/* =========================================================
   신청·참석 통합 화면 (educationContentsTimeApply.jsp) 전용
   - educationV2.css 는 수정하지 않고 이 파일에서만 확장
   - 공용 규칙(#education-26 단일 ID)보다 우선하도록 #education-26 #main 2중 ID 스코프 사용
   ========================================================= */

/* ---------- 본인 확인 박스 (미확인 상태) ---------- */
#education-26 #main .auth-box {
	margin-top: 20px;
	background: #FFFFFF;
	border: 1px solid #E3E6EA;
	border-radius: 14px;
	overflow: hidden;
	transition: box-shadow .2s ease, border-color .2s ease;
}

/* "확인 후 신청" 클릭 시 강조 */
#education-26 #main .auth-box.highlight {
	border-color: #5D4AB8;
	box-shadow: 0 0 0 3px rgba(93, 74, 184, .2);
}

/* 탭 */
#education-26 #main .auth-tabs {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	border-bottom: 1px solid #E3E6EA;
}
#education-26 #main .auth-tab {
	height: 48px;
	border: 0;
	border-bottom: 3px solid transparent;
	background: #FFFFFF;
	font-size: 14px;
	color: #5B6270;
	cursor: pointer;
}
#education-26 #main .auth-tab.active {
	border-bottom-color: #5D4AB8;
	font-weight: 700;
	color: #1F2329;
}

/* 탭 패널 */
#education-26 #main .auth-panel {
	display: none;
	padding: 16px;
}
#education-26 #main .auth-panel.active {
	display: block;
}
#education-26 #main .auth-label {
	display: block;
	margin-bottom: 8px;
	font-size: 13px;
	font-weight: 700;
	color: #1F2329;
}
#education-26 #main .auth-desc {
	margin: 8px 0 0;
	font-size: 13px;
	line-height: 1.6;
	color: #5B6270;
}
#education-26 #main .auth-panel .auth-desc:first-child {
	margin: 0 0 12px;
}
#education-26 #main .auth-submit {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 48px;
	margin-top: 12px;
	font-size: 15px;
	font-weight: 700;
}

/* 기관코드 확인 결과 */
#education-26 #main .auth-confirm {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-top: 10px;
	padding: 10px 12px;
	background: #FFF5F5;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 700;
	color: #1F2329;
}
#education-26 #main .auth-confirm .auth-confirm-btn {
	flex: 0 0 auto;
	min-width: 72px;
	background: #5D4AB8;
	border-color: #5D4AB8;
	color: #FFFFFF;
	font-weight: 700;
}

/* 비회원 신규 정보 입력 */
#education-26 #main .auth-guest-form {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid #E3E6EA;
}
#education-26 #main .auth-guest-title {
	margin: 0 0 12px;
	font-size: 14px;
	font-weight: 700;
	color: #1F2329;
}

/* ---------- 본인 확인 완료 : 요약 바 ---------- */
#education-26 #main .auth-identity {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: 20px;
	padding: 12px 14px;
	background: #FFFFFF;
	border: 1px solid #E3E6EA;
	border-radius: 12px;
	font-size: 13px;
	color: #4B4F55;
}
#education-26 #main .auth-identity-badge {
	padding: 3px 8px;
	border-radius: 6px;
	background: #E8F9F6;
	font-size: 12px;
	font-weight: 700;
	color: #0B5E52;
}
#education-26 #main .auth-identity-text {
	flex: 1 1 auto;
	min-width: 0;
}
#education-26 #main .auth-identity-link {
	font-weight: 700;
	color: #4B3A9E;
	text-decoration: underline;
}

/* ---------- 일정 카드 버튼 ---------- */
/* 신청 가능 (기존 inline style #5D4AB8 이관) */
#education-26 #main .education-list .list-item a.button.apply-on {
	background-color: #5D4AB8;
}
/* 미확인 상태 : 본인 확인 유도 */
#education-26 #main .education-list .list-item a.button.need-auth {
	background-color: #F4F5F7;
	border: 1px dashed #A3AAB5;
	color: #4B4F55;
}
/* 참석하기 (기존 inline style display:block 이관) */
#education-26 #main .education-list .btn-block {
	display: block;
}
/* 추가 참석하기 (기존 inline style 이관) */
#education-26 #main .education-list .btn-additional {
	margin-top: 15px;
	font-size: 15px;
	font-weight: 700;
	background-color: #FF3356;
	border-color: #FF3356;
	color: #FFFFFF;
}

/* ---------- 지역별 담당 연락처 (educationContentsTime.jsp inline style 이관) ---------- */
#education-26 #main .notice-contact-box {
	margin-top: 28px;
	padding: 18px 20px;
	background: #FFFFFF;
	border: 1px solid #F3B4BB;
	border-radius: 12px;
	text-align: center;
}
#education-26 #main .notice-contact-box .notice-desc {
	margin: 0;
	font-size: 14px;
	line-height: 1.7;
	font-weight: 600;
	color: #E5484D;
}
#education-26 #main .notice-contact-box .contact-line {
	margin: 4px 0 0;
	font-size: 14px;
	line-height: 1.7;
	color: #4B4F55;
}

/* ---------- 본인 확인 입력행 (입력칸 + 확인 버튼 한 줄) ----------
   .input-with 는 모달 스코프 규칙이라 페이지 본문에서는 적용되지 않아 별도 클래스로 구성 */
#education-26 #main .auth-input-row {
	display: flex;
	align-items: stretch;
	gap: 8px;
}
#education-26 #main .auth-input-row .form-input {
	flex: 1 1 auto;
	min-width: 0;
	width: auto;
	height: 48px;
	margin: 0;
	padding: 0 14px;
	border: 1px solid #C9CED6;
	border-radius: 8px;
	font-size: 15px;
	text-align: left;
	box-sizing: border-box;
}
#education-26 #main .auth-input-row .form-input:focus {
	border-color: #5D4AB8;
	outline: none;
}
#education-26 #main .auth-input-row .btn {
	flex: 0 0 auto;
	min-width: 72px;
	height: 48px;
	margin: 0;
	padding: 0 18px;
	border-radius: 8px;
}
/* number 입력 스핀 버튼 제거 */
#education-26 #main .auth-input-row input[type=number]::-webkit-outer-spin-button,
#education-26 #main .auth-input-row input[type=number]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
#education-26 #main .auth-input-row input[type=number] {
	-moz-appearance: textfield;
}

/* 비회원 신규 정보 입력 폼 : 모달용 폼 규칙을 본문에서도 동일하게 */
#education-26 #main .auth-guest-form .form-block {
	text-align: left;
}
#education-26 #main .auth-guest-form .form-label {
	display: block;
	margin-bottom: 6px;
	font-size: 13px;
	font-weight: 700;
}
#education-26 #main .auth-guest-form .form-input {
	width: 100%;
	height: 44px;
	padding: 0 12px;
	border: 1px solid #C9CED6;
	border-radius: 8px;
	font-size: 15px;
	text-align: left;
	box-sizing: border-box;
}
#education-26 #main .auth-guest-form .form-input[readonly] {
	background: #F4F5F7;
}
#education-26 #main .auth-guest-form .input-with {
	display: flex;
	gap: 8px;
}
#education-26 #main .auth-guest-form .input-with .form-input {
	flex: 1 1 0;
	min-width: 0;
}

/* ---------- 헤더 : 현재 시간 (로그인/로그아웃 버튼 옆) ---------- */
#education-26 #header .info-area {
	display: flex;
	align-items: center;
	gap: 10px;
}
/* 현재 시간 칩 : 아이콘 + 날짜(보조) + 시각(강조)
   - 교육 입장 가능 시각(시작 30분 전) 판단용이라 시각을 가장 크게, 숫자 폭 고정으로 흔들림 방지
   - 높이 36px 로 로그인/로그아웃 버튼(btn-sm)과 맞춤 */
#education-26 #header .header-clock {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 36px;
	padding: 0 12px;
	background: #F4F5F7;
	border: 1px solid #E3E6EA;
	border-radius: 18px;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
	box-sizing: border-box;
}
#education-26 #header .header-clock .clock-icon {
	flex: 0 0 auto;
	color: #19CEB3;
}
#education-26 #header .header-clock .clock-date {
	font-size: 13px;
	font-weight: 500;
	color: #5B6270;
}
#education-26 #header .header-clock .clock-time {
	min-width: 64px;
	font-size: 16px;
	font-weight: 800;
	letter-spacing: .2px;
	color: #1F2329;
}
@media (max-width: 480px) {
	#education-26 #header .info-area {
		gap: 6px;
	}
	#education-26 #header .header-clock {
		gap: 4px;
		height: 32px;
		padding: 0 10px;
	}
	#education-26 #header .header-clock .clock-icon {
		display: none;
	}
	#education-26 #header .header-clock .clock-date {
		font-size: 11px;
	}
	#education-26 #header .header-clock .clock-time {
		min-width: 54px;
		font-size: 14px;
	}
}