@charset "utf-8";
/* CSS Document */

.calendar {width: 100%; background: #fff; border:0;}
.calendar .month-select {float: right;width: 260px; background: none;z-index: 20;}
.calendar .month-select h3 {font-size: 2rem;}
.calendar .month-select button img {width: 10px;}
.calendar .month-select button.left {left:0;}
.calendar .month-select button.right {right:0;}
.calendar .toggle-btn {top: 30px; left: 0; z-index: 20;}

.calendar .table-wrap {position: relative; padding-top: 100px;}
.calendar .table-wrap .table-scroll {max-height: 601px; overflow-y: scroll;}
.calendar table {border:1px solid #e5e5e5; border-top: 0;}
.calendar table tbody tr td { height: 150px; text-align: left; padding: 10px; vertical-align: top; font-size: 1.2rem; border-right: 1px solid #e5e5e5; width: 14.2%;}
.calendar table thead tr th {background: #f8f8f8; vertical-align: bottom; font-weight: 500; border-right: 1px solid #e5e5e5;}
.calendar table thead tr th:last-child,
.calendar table tbody tr td:last-child {border-right: 0;}
.calendar table tbody tr.date {border-left: 1px solid #e5e5e5; border-right: 1px solid #e5e5e5;}
.calendar table tbody tr.date th { font-size: 2rem; font-weight: 900; height: 69px; background:#f8f8f8; text-align: center; border-right: 1px solid #e5e5e5; border-top: 1px solid #e5e5e5;}
.calendar table tbody tr.date th p {font-weight: 400; font-size: 1.3rem;}
.calendar table tbody tr.fixed-top {display: inline-table; position: absolute; top:71px; width: 100%; left:0; }
.calendar table tbody tr td ul {margin-top: 10px; padding-top: 10px; border-top: 1px dashed #ccc;}
.calendar table tbody tr td ul li {font-size:1.2rem; font-weight: 400; padding-left: 10px; position: relative; margin-bottom: 4px;}
.calendar table tbody tr td ul li:after { content: ''; position: absolute; top:8px; left:0; width: 3px; height: 3px; border-radius: 10px; background: #5496ff;}

@media all and (max-width: 728px) {
	.calendar .table-wrap {overflow: hidden; width: 100%; padding-top: 0;}
	.calendar .table-wrap .table-scroll {max-width:728px; overflow-x: scroll; }
	.calendar table {width: 728px;}
	.calendar table tbody tr.fixed-top {display: contents; position: static; top: auto; left: auto;}
}
@media all and (max-width:425px) {
	.calendar .month-select {width:100%; float: none;}
}

/* 스크롤 스타일 변경 */
::-webkit-scrollbar {
  width: 1px;  /* 세로축 스크롤바 길이 */
  height: 5px;  /* 가로축 스크롤바 길이 */
}
::-webkit-scrollbar-track {
  background-color: lightblue;
}
::-webkit-scrollbar-track-piece {
  background-color: #eee;
}
::-webkit-scrollbar-thumb {
  border-radius: 8px;
  background-color: #ccc;
}
::-webkit-scrollbar-button {
  background-color: #eee;
  width: 5px;
  height: 5px;
}
::-webkit-scrollbar-button:start {
  background-color: #eee; /* Top, Left 방향의 이동버튼 */
  border-radius: 5px 5px 0 0;
}
::-webkit-scrollbar-button:end {
  background-color: #eee; /* Bottom, Right 방향의 이동버튼 */
  border-radius: 0 0 5px 5px;
}