.attendance-section {
	color:#333;
	line-height:1.6;
}
.attendance-container {}
.check-in-section {
	text-align:center;
	margin:30px 0;
	padding:0;
}
.calendar-section h3 {
	font-size:22px;
	font-weight:700;
	margin-bottom:25px;
	color:#333;
	text-align:center;
	display:flex;
	align-items:center;
	justify-content:center;
	gap:8px;
	white-space:nowrap;
}
.calendar-header {
	display:flex;
	justify-content:center;
	align-items:center;
	margin-bottom:30px;
}
.calendar-nav {
	display:flex;
	align-items:center;
	gap:20px;
}
.current-month {
	font-size:20px;
	font-weight:700;
	color:#333;
	min-width:180px;
	text-align:center;
}
.calendar {
	width:100%;
	border-collapse:collapse;
	margin-bottom:20px;
	font-size:16px;
	border-radius:8px;
	overflow:hidden;
	box-shadow:0 2px 8px rgba(0,0,0,0.1);
}
.calendar th,
.calendar td {
	width:14.28%;
	height:60px;
	text-align:center;
	vertical-align:middle;
	border:1px solid #e9ecef;
	position:relative;
}
.calendar th {
	background:#f8f9fa;
	font-weight:700;
	color:#495057;
	font-size:16px;
	height:50px;
}
.calendar th:first-child {
	color:#dc3545;
}
.calendar th:last-child {
	color:#007bff;
}
.calendar td {
	font-size:16px;
	font-weight:500;
	cursor:pointer;
	transition:all 0.2s;
	background:white;
	position:relative;
}
.calendar td:hover {
	background:#f8f9fa;
}
.calendar td:first-child {
	color:#dc3545;
}
.calendar td:last-child {
	color:#007bff;
}
.calendar .empty-cell {
	background:#f8f9fa;
	cursor:default;
}
.calendar .empty-cell:hover {
	background:#f8f9fa;
}
.calendar .today {
	background:white;
	color:#4361ee;
	font-weight:700;
	font-size:18px;
}
.calendar .attended {
	background:white;
	color:#333;
	font-weight:500;
	position:relative;
}
.calendar .attended::after {
	content: '\f00c';
	font-family: 'FontAwesome';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 24px;
	font-weight: normal;
	color: #00a69c;
}
.calendar .today.attended {
	background:white;
	color:#4361ee;
	font-weight:700;
	font-size:18px;
}
.calendar td a {
	color:inherit !important;
	text-decoration:none;
	display:block;
	width:auto;
	height:auto;
	line-height:normal;
	position:absolute;
	top:0;
	left:0;
	padding:4px 6px;
}
.calendar td a:hover {
	text-decoration:none;
	color:inherit;
}
.calendar .selected {
	background:#e3f2fd;
	color:#1976d2;
	font-weight:700;
}
.current-month-btn {
	text-align:center;
	margin-top:15px;
}
.today-attendance-list {
	margin-top:30px;
}
.today-attendance-list h5 {
	font-size:18px;
	font-weight:700;
	color:#333;
	margin-bottom:15px;
	display:flex;
	align-items:center;
	gap:8px;
}
.today-attendance-list .card {
	border:1px solid #e9ecef;
	border-radius:8px;
	overflow:hidden;
	box-shadow:0 2px 8px rgba(0,0,0,0.05);
}
.na-table-head {
	background:#f8f9fa;
	font-weight:600;
	color:#495057;
	border-bottom:2px solid #dee2e6;
}
.na-table-head .d-md-table-cell {
	padding:12px 15px;
	font-size:14px;
}
.today-attendance-list .na-table li {
	border-bottom:1px solid #f1f3f4;
	transition:background-color 0.2s ease;
}
.today-attendance-list .na-table li:hover {
	background-color:#f8f9fa;
}
.today-attendance-list .na-table li:last-child {
	border-bottom:none;
}
.today-attendance-list .d-md-table-cell {
	padding:12px 15px;
	font-size:14px;
	vertical-align:middle;
}
.bottom-buttons {
	text-align:center;
	padding:0 15px;
}
.sr-only {
	position:absolute;
	width:1px;
	height:1px;
	padding:0;
	margin:-1px;
	overflow:hidden;
	clip:rect(0, 0, 0, 0);
	white-space:nowrap;
	border:0;
}
@keyframes pulse {
	0% { transform:scale(1); }
	50% { transform:scale(1.05); }
	100% { transform:scale(1); }
}
.loading {
	opacity:0.6;
	pointer-events:none;
}
.loading::after {
	content:'';
	position:absolute;
	top:50%;
	left:50%;
	width:20px;
	height:20px;
	margin:-10px 0 0 -10px;
	border:2px solid #f3f3f3;
	border-top:2px solid #4361ee;
	border-radius:50%;
	animation:spin 1s linear infinite;
}
@keyframes spin {
	0% { transform:rotate(0deg); }
	100% { transform:rotate(360deg); }
}
/* 반응형 디자인 */
@media (max-width:768px) {
	.attendance-container {}

	.check-in-section {
		padding:0;
		margin:25px 15px 30px;
	}
	.calendar-section h3 {
		font-size:18px;
		gap:6px;
	}
	.calendar th,
	.calendar td {
		height:45px;
		font-size:14px;
	}
	.calendar td a {
		position: absolute;
		top: 0;
		left: 0;
		font-size: 13px;
		padding: 2px 4px;
		line-height: normal;
		width: auto;
		height: auto;
	}
	.calendar th {
		font-size:14px;
		height:40px;
	}
	.calendar .attended::after,
	.calendar .today.attended::after {
		font-size:18px;
	}
	.current-month {
		font-size:18px;
		min-width:140px;
	}
	.calendar-nav {
		gap:15px;
	}
	.today-attendance-list .na-table li {
		padding:8px 0 !important;
		display:table !important;
		width:100%;
	}
	.today-attendance-list .d-md-table-cell {
		display:table-cell !important;
		padding:8px 4px !important;
		margin:0 !important;
		vertical-align:middle;
		text-align:center;
	}
	.today-attendance-list .d-md-table-cell:nth-child(1) {
		width:40%;
		text-align:left;
		padding-left:15px !important;
	}
	.today-attendance-list .d-md-table-cell:nth-child(2) {
		width:20%;
		font-size:11px;
		color:#6c757d;
	}
	.today-attendance-list .d-md-table-cell:nth-child(3),
	.today-attendance-list .d-md-table-cell:nth-child(4) {
		width:20%;
		font-size:12px;
	}
	.today-attendance-list .d-md-none {
		display:none !important;
	}
	.mobile-block {
		display:none !important;
	}
}
@media (max-width:480px) {
	.attendance-container {}

	.calendar-section h3 {
		font-size:16px;
		gap:4px;
	}

	.check-in-section {
		padding:0;
		margin:20px 10px 25px;
	}

	.calendar th,
	.calendar td {
		height:40px;
		font-size:12px;
	}

	.calendar td a {
		line-height:40px;
		top:2px;
		left:2px;
	}

	.calendar th {
		height:35px;
	}

	.calendar .attended::after,
	.calendar .today.attended::after {
		font-size:9px;
		bottom:1px;
		right:1px;
	}

	.current-month {
		font-size:16px;
		min-width:120px;
	}

	.today-attendance-list .na-table li {
		padding:6px 0 !important;
	}

	.today-attendance-list .d-md-table-cell:nth-child(2) {
		font-size:10px;
	}

	.today-attendance-list .d-md-table-cell:nth-child(3),
	.today-attendance-list .d-md-table-cell:nth-child(4) {
		font-size:11px;
	}
}