@charset "utf-8";

/* sub - common css */
@import url("../sub-common.css");


/* 공통 */
.info-txt { font-size: 1.3rem; color: #ff9a00; margin: 0 0 0 5px; word-break: keep-all; font-weight: 600; line-height: 1.6; }

/* 일시돌봄 레이어팝업 */
.temporary-pop .pop-modal { width: 1100px; }
.temporary-pop .pop-modal .btn-wrap button { width: auto; }
.temporary-pop .pop-modal .btn-wrap button.off { pointer-events: none;}
.temporary-pop .pop-modal .modal-content-area { max-height: unset; height: calc(95vh - 200px); }

@media (max-width: 1200px) {
  .temporary-pop .pop-modal { width: 95%; }
}


/* 예약 안내 레이어팝업 */
.notice-pop { z-index: 9999; }
.notice-pop .pop-modal { width: 550px; background: #3885F1; box-shadow: none; border-radius: 10px; }
.notice-pop .pop-modal .btn-wrap button { width: auto; }
.notice-pop .modal-footer-area { border-top: 0; }
.notice-pop .modal-content-area { padding: 50px 20px 20px; background: #fff; border-radius: 10px;}
.notice-pop .modal-content-area .notice-title { text-align: center; padding-bottom: 40px;}
.notice-pop .modal-content-area .notice-title .tit { font-size: 3rem; display: inline-block; position: relative; }
.notice-pop .modal-content-area .notice-title .tit:after { content: ''; display: block; position: absolute; bottom:-3px; left: 0; width: 100%; height: 1px; background: #000;}
.notice-pop .modal-content-area .check-area {padding-bottom: 20px; }
.notice-pop .modal-content-area .check-area .check-input { margin-bottom: 10px; font-weight: 500; }
.notice-pop .modal-content-area .check-area .check-input .info-txt { padding-top: 5px; padding-left: 30px; color: #d31a1a; }
.notice-pop .modal-content-area .sameday-notice { padding-top: 20px; border-top: 1px solid #ccc;}
.notice-pop .modal-content-area .sameday-notice .title { position: relative; padding-left: 20px; font-size: 1.5rem; font-weight: 600; color: #345077; }
.notice-pop .modal-content-area .sameday-notice .title:after { content: ''; display: block; width: 12px; height: 12px; border-radius: 15px; border: 3px solid #345077; position: absolute; top: 3px; left: 0; }
.notice-pop .modal-content-area .sameday-notice .cont-text { height: 240px; overflow-y: auto; margin-top: 10px; padding: 10px 15px; background: #eee; font-size: 1.3rem; font-weight: 600; color: #666; }

@media (max-width: 630px) {
  .notice-pop .pop-modal { width: 90%; }
  .notice-pop .modal-content-area { padding: 30px 20px 20px;}
  .notice-pop .modal-content-area .notice-title { padding-bottom: 30px; }
  .notice-pop .modal-content-area .notice-title .tit { font-size: 2rem; }
  .notice-pop .modal-content-area .sameday-notice .cont-text { height: 220px; }
}


/* 달력 레이아웃 */
.reservation-wrap { position: relative; }
.reservation-wrap .left-box { float: left; width: calc(100% - 450px); }
.reservation-wrap .right-box { float: right; width: 420px; position: relative; }
.reservation-wrap .right-box .save-btn button { color: #fff; font-weight: 600; min-width: 70px; height: 30px;font-size: 1.3rem; }

@media (max-width: 1024px) {
	.reservation-wrap .left-box { width: calc(100% - 390px); }
	.reservation-wrap .right-box { width: 370px; }

}
@media (max-width: 780px) {
	.reservation-wrap { margin-top: 50px; }
	.reservation-wrap .left-box { width: 100%; margin-right: 0; }
	.reservation-wrap .right-box { width: 100%; margin-top: 50px; }
}



/* 일시돌봄 예약현황 */
.temporary-wrap .signup-cont .sub-tit { font-size: 1.4rem; padding-bottom: 10px;}
.temporary-wrap table.top-table tbody tr th { width: 180px; padding: 15px 5px; font-size: 1.4rem; color: #000; background: #f2f2f2; }
.temporary-wrap table.top-table tbody tr td { padding: 15px;}
.temporary-wrap table.top-table tbody tr td .info-txt { color: #999; }
.temporary-wrap table.top-table tbody tr td p.vertic-tit { font-size: 1.4rem; }
.temporary-wrap table.top-table tbody tr td p.vertic-tit-temp { font-size: 1.4rem; word-break : break-all; }

@media (max-width: 1200px) {
  .temporary-wrap table.top-table tbody tr th { font-size: 1.3rem; width: 150px;}
}
@media (max-width: 768px) {
  .temporary-wrap table.top-table tbody tr th { width: auto; line-height: 1.5; word-break: keep-all; font-size: 1.2rem;}
  .temporary-wrap table.top-table tbody tr td { padding: 15px 5px; line-height: 1.5; }
  .temporary-wrap .info-txt { margin-left: 0; word-break: break-all; display: block; }
}

/* calendar - left box */
.reservation-wrap .calendar { position: relative; width: 100%; }
.reservation-wrap .calendar .head { position: relative; margin-top: 5px;}
.reservation-wrap .calendar .head h1 { font-size: 2rem; display: inline-block; padding: 0 15px; }
.reservation-wrap .calendar .head a { display: inline-block; line-height: 30px; opacity: .5; width: 25px; height: 25px; }
.reservation-wrap .calendar .head a > img { width: 100%; height: 100%; }
.reservation-wrap .calendar .head a:hover { opacity: .8; }

/* calendar legend */
.reservation-wrap .calendar .head .legend-item { position: absolute; top:5px; right:0; }
.reservation-wrap .calendar .head .legend-item .item { display: inline-block; margin-left: 10px; font-weight: 600; font-size: 1.2rem; }
.reservation-wrap .calendar .head .legend-item .item .label { display: inline-block; position: relative; margin-right: 5px; }
.reservation-wrap .calendar .head .legend-item .item.today { color: #ffad00; }
.reservation-wrap .calendar .head .legend-item .item.today .label { width: 13px; height: 14px; top: 3px; border:1px solid #aaa; border-top-color: #ffad00; border-top-width: 3px; }
.reservation-wrap .calendar .head .legend-item .item.open { color: #26B787; }
.reservation-wrap .calendar .head .legend-item .item.open .label { width: 10px; height: 10px; top: 1px; border-radius: 20px; background: #26B787; }
.reservation-wrap .calendar .head .legend-item .item.close { color: #d73535; }
.reservation-wrap .calendar .head .legend-item .item.close .label { width: 10px; height: 10px; top: 1px; border-radius: 20px; background: #d73535; }
.reservation-wrap .calendar .head .legend-item .item.wait { color: #d3d3d3; }
.reservation-wrap .calendar .head .legend-item .item.wait .label { width: 10px; height: 10px; top: 1px; border-radius: 20px; background: #d3d3d3; }
.reservation-wrap .calendar .head .legend-item .item.selected { color: #568a79; }
.reservation-wrap .calendar .head .legend-item .item.selected .label { width: 13px; height: 14px; top: 3px; border:1px solid #568a79; }

/* calendar */
.reservation-wrap .calendar table { table-layout: fixed; width: 100%; margin-top: 15px; border-right: 1px solid #c9c9c9; border-left: 1px solid #c9c9c9;}
.reservation-wrap .calendar table thead th { padding: 10px 15px; text-align: center; border-bottom: 1px solid #c9c9c9; border-top: 1px solid #555; background: #f5f5f5; font-weight: 600; font-size: 1.2rem;}
.reservation-wrap .calendar table thead th:not(:last-child) { border-right: 1px solid #e1e1e1; }

.reservation-wrap .calendar table tbody td { position: relative; height: 100px; padding: 15px; text-align: center; border-bottom: 1px solid #c9c9c9; cursor: pointer; font-size: 1.3rem; font-weight: 600; }
.reservation-wrap .calendar table tbody td:not(.disabled, .today, .wait):hover { background: #f5f5f5; }
.reservation-wrap .calendar table tbody td:not(:last-child) { border-right: 1px solid #e1e1e1; }
.reservation-wrap .calendar table tbody td:not(:first-child) { border-left: 1px solid #e1e1e1; }

/* 주말 */
.reservation-wrap .calendar table tbody td.sat { color: #386ddc; }
.reservation-wrap .calendar table tbody td.sun { color: #f37070; }

/* 오늘 */
.reservation-wrap .calendar table tbody td.today { position: relative; background: #fbf8f5; }
.reservation-wrap .calendar table tbody td.today:after { content: ''; position: absolute; top: -1px; left: -1px; width: 100%; height: 3px; background: #ffad00; }
.reservation-wrap .calendar table tbody td.today .date { position: relative; color: #ffad00; font-weight: 600; }
.reservation-wrap .calendar table tbody td.today .date:after { content: ''; display: block; width: calc(100% + 4px); height: 1.5px; background: #ffad00; position: absolute; bottom: -4px; left: -2px;}

/* 오늘 신규 */
.reservation-wrap .calendar table tbody td.today.on:after { width: 100%; height: 100%; top: 0; left: 0; border: 1px solid #26B787; background: none;}
.reservation-wrap .calendar table tbody td.today.on .date { color: #26B787;}
.reservation-wrap .calendar table tbody td.today.on .date:after { content: none;}

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

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


.reservation-wrap .calendar table tbody td { position: relative;}

.reservation-wrap .calendar table tbody td:after { content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

.reservation-wrap .calendar table tbody td.on:after { border: 1px solid #26B787;}

.reservation-wrap .calendar table tbody td.close.on:after { border: 1px solid #d73535; }

/* 예약 가능한 날짜 */
.reservation-wrap .calendar table tbody td.open .date,
.reservation-wrap .calendar table tbody td.wait .date,
.reservation-wrap .calendar table tbody td.close .date { position: relative; z-index: 2; color: #fff;}

.reservation-wrap .calendar table tbody td.open .date:after,
.reservation-wrap .calendar table tbody td.wait .date:after,
.reservation-wrap .calendar table tbody td.close .date:after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-48%, -50%); width: 27px; height: 27px; border-radius: 50%; z-index: -1;}

.reservation-wrap .calendar table tbody td.open .date:after { background: #26B787;}
.reservation-wrap .calendar table tbody td.wait .date:after { background: #d3d3d3;}
.reservation-wrap .calendar table tbody td.close .date:after { background: #d73535;}

@media (max-width: 970px) {
	.reservation-wrap .calendar .head { text-align: center; padding-bottom: 30px;}
  .reservation-wrap .calendar .head .legend-item { top: 40px; }
}
@media (max-width: 840px) {
	.reservation-wrap .calendar table tbody td { height: 50px; padding: 0; }
  .reservation-wrap .calendar table tbody td.open .date:after { width: 25px; height: 25px; }
}
@media (max-width: 425px) {
	.reservation-wrap .calendar table tbody td { height: 55px; }
	.reservation-wrap .calendar .head h1 { font-size: 2.1rem; }
}

/* 예약현황 목록 - right box  */
.reserv-list .head { border-bottom: 1px solid #555; background: #fff;}
.reserv-list .head h1 { text-align: center; font-size: 1.9rem; font-weight: 300; background: #fff; padding: 5px 0 20px;}
.reserv-list .head h1 img { width: 20px; height: 20px; margin-right: 5px; }
.reserv-list .list { padding: 10px 0 0; }
.reserv-list.temporary .normal-table tbody tr td { padding: 5px 16px;}
.reserv-list .normal-table { margin-top: 10px; background: #fff; width: 100%; table-layout: fixed; text-align: center; border-top: 1px solid #aaa;}
.reserv-list .normal-table thead tr th { font-size: 1.2rem; text-align: center; width: auto; padding: 5px; height: 35px; background: #f2f2f2; }
.reserv-list .normal-table tbody tr td { position: relative; font-size: 1.3rem; font-weight: 600; padding: 5px; height: 35px;}
.reserv-list .normal-table tbody tr td.left { text-align: left;}
.reserv-list .normal-table tbody tr td span.close { padding-left: 3px; font-size: 1.2rem; color: #d73535; }
.reserv-list .normal-table tbody tr td span.open { padding-left: 3px; font-size: 1.2rem; color: #26B787; }
.reserv-list .normal-table tbody tr td a.a-link { color: #386ddc; }
.reserv-list .normal-table tbody tr td a.a-link .material-icons { font-size: 14px; }
.reserv-list .normal-table tbody tr td a.a-link:hover { text-decoration: underline; }
.reserv-list .normal-table tbody tr.tr-open { border-top: 1px solid #e5e5e5; border-left: 1px solid #26B787; background: #f1f7f5;}
.reserv-list .normal-table tbody tr.tr-open td { padding: 15px; }
.reserv-list .normal-table tbody tr.tr-open td .inner-table { border-top: 0; margin: 0; background: transparent; }
.reserv-list .normal-table tbody tr.tr-open td .inner-table thead tr th { background: #30b686; color: #fff; height: 30px; }
.reserv-list .normal-table tbody tr.tr-open td .inner-table tbody tr td { height: 30px; padding: 5px; background: #fff; font-size: 1.2rem;}
.reserv-list .check-input.no-label label { text-indent: -9999px; }