.calendar-wrap { display: flex; }

.calendar-wrap .calendar-area {position: relative; width: 50%; border: 1px solid #d9d9d9; border-bottom: 0; }
.calendar-wrap .calendar-area .header { height: 70px; width: 100%; text-align: center; position: relative; padding: 10px 0; }
.calendar-wrap .calendar-area .header .navi { background: transparent; border: none; width: 50px; height: 50px; text-align: center; outline: 0; position: absolute; top: 10px; }
.calendar-wrap .calendar-area .header .navi:hover { background: #f8f8f8; }
.calendar-wrap .calendar-area .header .navi.prev-btn { left: 10px; }
.calendar-wrap .calendar-area .header .navi.next-btn { right: 10px; }
.calendar-wrap .calendar-area .header .navi img { width: 70%; opacity: 0.3; }
.calendar-wrap .calendar-area .header .navi:hover img { opacity: 0.6; }
.calendar-wrap .calendar-area .header .selected-date { line-height: 50px; font-size: 2.3rem; font-weight: bold; letter-spacing: 0; }

/* calendar legend */
.calendar-wrap .calendar-area .legend-item { position: absolute; top: -40px; right:0; }
.calendar-wrap .calendar-area .legend-item .item { display: inline-block; margin-left: 10px; font-weight: 600; font-size: 1.2rem; }
.calendar-wrap .calendar-area .legend-item .item .label { display: inline-block; position: relative; margin-right: 5px; }
.calendar-wrap .calendar-area .legend-item .item.today { color: #ffad00; }
.calendar-wrap .calendar-area .legend-item .item.today .label { width: 13px; height: 14px; top: 3px; border:1px solid #aaa; border-top-color: #ffad00; border-top-width: 3px; }
.calendar-wrap .calendar-area .legend-item .item.open { color: #0084ff; }
.calendar-wrap .calendar-area .legend-item .item.open .label { width: 10px; height: 10px; top: 1px; border-radius: 20px; background: #0084ff; }
.calendar-wrap .calendar-area .legend-item .item.selected { color: #0084ff; }
.calendar-wrap .calendar-area .legend-item .item.selected .label { width: 13px; height: 14px; top: 3px; border:1px solid #0084ff; }

.calendar-wrap .calendar table { width: 100%; }
.calendar-wrap .calendar table thead tr { border-top: 1px solid #d9d9d9; border-bottom: 1px solid #d9d9d9; }
.calendar-wrap .calendar table thead tr th { width: 14.2857%; text-align: center; color: #999; padding: 20px 0; font-size: 1.6rem; }
.calendar-wrap .calendar table thead tr th.sat { color: #0046D5; }
.calendar-wrap .calendar table thead tr th.sun { color: #D00025; }
.calendar-wrap .calendar table tbody tr { border-bottom: 1px solid #fff; }
.calendar-wrap .calendar table tbody tr td { text-align: center; height: 75px; border-right: 1px solid #d9d9d9; border-bottom: 1px solid #d9d9d9; font-size: 1.7rem; cursor: pointer; }
.calendar-wrap .calendar table tbody tr td:last-child { border-right: none; }
.calendar-wrap .calendar table tbody td:not(.disabled, .today):hover { background: #f5f5f5; }


/* 오늘 */
.calendar-wrap .calendar table tbody td.today { position: relative; background: #fbf8f5; }
.calendar-wrap .calendar table tbody td.today:after { content: ''; position: absolute; top: -1px; left: -1px; width: 100%; height: 3px; background: #ffad00; }
.calendar-wrap .calendar table tbody td.today .date { position: relative; color: #ffad00; font-weight: 600; }

/* 지난날짜 */
.calendar-wrap .calendar table tbody td.disabled { color: #cacaca; cursor: default; }
.calendar-wrap .calendar table tbody td.disabled:hover .date { color: #cacaca; }

/* 선택한 날짜 */
.calendar-wrap .calendar table tbody td.on { position: relative; }
.calendar-wrap .calendar table tbody td.on:after { content: ''; display: block; position: absolute; top:0; left: 0; width: 100%; height: 100%; border: 1px solid #0084ff; }

/* 예약 가능한 날짜 */
.calendar-wrap .calendar table tbody td.open .date { position: relative; }
.calendar-wrap .calendar table tbody td.open .date { position: relative; z-index: 2; color: #fff; }
.calendar-wrap .calendar table tbody td.open .date:after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 27px; height: 27px; background: #0084ff; z-index: -1; border-radius: 50%; }


/* 일정 목록 */
.calendar-wrap .schedule-area { position: relative; width: 50%; height: 512px; overflow-y: auto; border: 1px solid #d9d9d9; border-left: 0; padding: 0 20px 20px;}
.calendar-wrap .schedule-area .header { position: sticky; top: 0; left: 0; width: 100%; height: 70px; text-align: center; padding: 10px 0; border-bottom: 1px solid #d9d9d9; background: #fff; z-index: 1;}
.calendar-wrap .schedule-area .header .selected-date { line-height: 50px; font-size: 2.3rem; font-weight: bold; letter-spacing: 0; }
.calendar-wrap .schedule-area .schedule-list { position: relative; padding-top: 20px; }
.calendar-wrap .schedule-area .schedule-list .item-box { position: relative; padding-bottom: 15px; margin-bottom: 15px; border-bottom: 1px solid #d9d9d9; }
.calendar-wrap .schedule-area .schedule-list .item-box .title { padding-bottom: 10px; }
.calendar-wrap .schedule-area .schedule-list .item-box .title .label { display: inline-block; padding: 3px 10px; border-radius: 3px; font-size: 1.2rem; background: #eee; margin-right: 5px; font-weight: 500;}
.calendar-wrap .schedule-area .schedule-list .item-box .title .label.ing {background: #e3f9e3; color: #145d10;}
.calendar-wrap .schedule-area .schedule-list .item-box .title .label.end {background: #f3e2e2; color: #830000;}
.calendar-wrap .schedule-area .schedule-list .item-box .title .time { font-size: 1.6rem; font-weight: 500; display: inline-block;}
.calendar-wrap .schedule-area .schedule-list .item-box .info .txt { position: relative; display: inline-block; font-size: 1.4rem; padding-right: 15px; color: #777;}
.calendar-wrap .schedule-area .schedule-list .item-box .info .txt:not(:last-child):after { content: ''; width: 1px; height: 10px; background-color: #aaa; position: absolute; top: 5px; right: 5px;}
.calendar-wrap .schedule-area .schedule-list .item-box .btn { position: absolute; top: 0; right: 0; padding: 20px 15px; }