@charset "utf-8";

:root {
    --blue: #6997ED;
}

/* component */
table.vertic-table tbody tr th { color: var(--blue); }
table.vertic-table tbody tr td { font-size: 1.5rem; }
table.vertic-table tbody tr td.add-data {font-size: 1.3rem;}
.form .school-wrap .depth02 { width: 150px; max-width: calc(50% - 7px);}
.noti-txt { font-size: 1.4rem; color: #999; margin-top: 5px; line-height: 1.5;}
.noti-txt.align-right { text-align: right; }


/* banner */
.banner-container .banner-wrap .banner { background: url(../../../img/sub/sick-child/bn_bg.png) no-repeat center 100%; background-size: cover;}
.banner-container .banner-wrap .banner .banner-area .bn-title { color: #FEF081; }
.banner-container .banner-wrap .banner .banner-area .bn-title h1 {text-shadow: 3.632px 6.053px 0 #93A6D0; -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: #889BC5;}


/* 센터 정보 */
.body-container .content-background-wrap .content-background { padding-top: 60px;}
.content-tab-area { padding-top: 60px; border-bottom: 2px solid var(--blue);}
.content-tab-area ul { width: 1200px; margin: 0 auto; max-width: 100%; display: flex; flex-wrap: wrap; }
.content-tab-area ul li { flex: 1; background-color: #ECF0EE; }
.content-tab-area ul li a { font-size: 1.5rem; font-weight: 600; color: #888; display: block; padding: 20px 0; text-align: center; }
.content-tab-area ul li.active { background-color: var(--blue); }
.content-tab-area ul li.active a { color: #fff; }

.center-detail-info-background {background: #F1F5F7;}
.center-detail-info .check-notice { text-align: right; margin-top: 10px;}
.center-detail-info .title-wrap h2 { color: var(--blue); }
.more-info h3 { color: var(--blue);}
table.notice-table tr th { background: var(--blue); }
.notice-tab ul li.notice-on a { background: var(--blue); border-color: var(--blue); }
.notice-tab ul:after { background: var(--blue); }

/* 예약 현황 UI 스타일 */
.reservation-status { display: inline-block; width: calc(100% - 27px);}
.reservation-status .service-tit { font-size: 1.4rem; font-weight: 600; color: #5e5e5e; padding-bottom: 7px;}
.reservation-status .service-category { display: flex; flex-direction: column; gap: 10px;}
.reservation-status .service-box .time-slot-wrap { background: #F1F5F7; border-radius: 5px; padding: 10px;}
.reservation-status .time-slot { margin-bottom: 8px;}
.reservation-status .time-slot:last-child { margin-bottom: 0;}
.reservation-status .time-info { display: flex; gap: 5px; flex-wrap: wrap; font-size: 1.3rem;}
.reservation-status .time { color: #666; font-weight: 500; }
.reservation-status .count { font-weight: 600; }
.reservation-status .count.orange { color: #FB9229;}
.reservation-status .capacity { color: #666;}
.reservation-status .status { font-weight: 600; }
.reservation-status .status.available { color: #30B64D; }
.reservation-status .status.unavailable { color: #B63030; }
.center-detail-info-wrap .reservation-status { width: 100%; padding-top: 10px;}
.center-detail-info-wrap .reservation-status .service-tit { font-size: 1.6rem; }
.center-detail-info-wrap .reservation-status .time-info { font-size: 1.4rem; }
.center-detail-info-wrap .reservation-status .service-category { flex-direction: row; }
.center-detail-info-wrap .reservation-status .service-category .service-box { flex: 1; }
.center-detail-info-wrap .reservation-status .service-category .service-box .apply-btn { width: 100%; font-size: 1.4rem; margin-top: 10px; color: #fff; background: #143066; font-weight: 600; border: 0; border-radius: 5px; padding: 10px 0; box-shadow: 5px 5px 0px #D4DAEA; }

input[type=radio]:not(old) + label { width: auto; }

@media (max-width: 768px) {
    .reservation-status .time-info { font-size: 1.2rem; }
    .reservation-status .service-tit { font-size: 1.2rem;}
}

@media (max-width: 700px) {
    .center-detail-info-wrap .reservation-status .service-category { flex-direction: column; gap: 20px; }
    .center-detail-info-wrap .reservation-status .service-tit { font-size: 1.3rem; }
    .center-detail-info-wrap .reservation-status .time-info { font-size: 1.3rem; }
    .center-detail-info-wrap .reservation-status .service-category .service-box .apply-btn { font-size: 1.3rem; margin-top: 5px;}
}

@media (max-width: 500px) {
    .btn-wrap.step-btn { display: flex; gap: 10px;}
    .btn-wrap.step-btn > div { flex: 1; }
}

/* 개발자 CSS */
/* 라벨도 비활성화 표시 (회색 처리 + 클릭 안 되게) */
.check-label[disabled],
input[type="radio"]:disabled + .check-label { color: #aaa; cursor: not-allowed; pointer-events: none; opacity: 0.6;}

input[type="radio"]:disabled + .check-label.my-apply { cursor: not-allowed; pointer-events: none; color: unset; opacity: unset;}

/* 동의 레이어팝업 */
.agree-pop {position: fixed; width: 100%; height: 100%; z-index: 400; background-color: rgba(0,0,0,0.3); top: 0; left: 0; display: none}
.agree-pop .pop-modal {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); border-radius: 5px; z-index: 400; background-color: #fff; padding: 20px; width: 650px; box-shadow: 3px 3px 0 #d2dbd7;}
.agree-pop .pop-modal .modal-top {padding-bottom: 10px; border-bottom: 1px solid #888; margin-bottom: 10px}
.agree-pop .pop-modal .modal-top-tit {float: left}
.agree-pop .pop-modal .modal-top-tit h2 {font-size: 1.7rem; padding-top: 3px;}
.agree-pop .pop-modal .modal-close-btn {float: right}
.agree-pop .modal-content-area {max-height:500px; overflow-y:auto; padding:15px 10px;}
.agree-pop .modal-content-area .m-sub-tit {font-size:1.4rem; padding-bottom:15px; margin-bottom:15px; border-bottom:1px solid #e5e5e5;}
.agree-pop .modal-content-area .m-sub-tit .bold {font-weight: 600; display:inline-block; margin-right:5px}
.agree-pop .modal-content-area .file-info {font-size:1.4rem ; line-height:21px}
.agree-pop .modal-content-area .file-info p {padding-bottom:15px; font-weight:600;}
.agree-pop .modal-content-area .file-info p.center {text-align: center;}
.agree-pop .modal-content-area img { max-width: 100%; }
.agree-pop .modal-footer-area {border-top:1px solid #999;}
.agree-pop .pop-modal .btn-wrap {margin-top: 15px}
.agree-pop .pop-modal .btn-wrap button {width: calc(50% - 5px); font-size: 1.3rem; height: 40px; line-height: 40px; border-radius: 5px; box-shadow: none}
.agree-pop .modal-content-area .conts {margin-bottom:20px; border-bottom:1px solid #818181; padding-bottom:20px;}
.agree-pop .modal-content-area .conts:last-child {border-bottom:0; margin-bottom:0}

@media(max-width:768px) {
	.agree-pop .pop-modal {width:calc(100% - 60px)}
	.agree-pop .pop-modal .modal-top-tit h2 {font-size: 1.5rem;}
	.agree-pop .modal-content-area {padding:10px 0;}
	.agree-pop .modal-content-area .m-sub-tit {padding-bottom:10px ;margin-bottom:10px;}	
	.agree-pop .modal-content-area .file-info {font-size:1.3rem;}
	.agree-pop .modal-content-area .file-info p {font-size:1.4rem;} 
}

@media(max-width:500px) {
	.agree-pop .pop-modal {width:calc(100% - 20px)}
	.agree-pop .modal-content-area {max-height:350px}
}

/* 예약 안내 레이어팝업 */
.notice-pop { z-index: 9999; }
.notice-pop .pop-modal { width: 720px; background: #dddddd; 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; }
.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 .notice-content { font-size: 1.4rem; }
.notice-pop .modal-content-area .notice-content p {padding-bottom: 40px;  }
.notice-pop .modal-content-area .notice-content li {padding-bottom: 20px; }
.notice-pop .modal-content-area .notice-content .warn { color:#c62828; font-weight:700; }
.notice-pop .modal-content-area .notice-content strong { font-weight:700; }
.notice-pop .modal-content-area .notice-content .agree-text { text-align: center; }
.notice-pop .modal-content-area .notice-content .agree-text {
    text-align: center;
    padding-top: 20px;         /* 위쪽 여백 */
    border-top: 1px solid #ddd; /* 구분선 추가 */
  }
  .notice-pop .modal-content-area .notice-content .agree-text p:last-child {
    font-weight: 700;          /* 마지막 문장 강조 */
    font-size: 1.6rem;         /* 살짝 더 크게 */
    margin-top: 10px;
  }
@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; }
}

/* 첨부파일 관련 스타일 */
table.attach-file { table-layout: auto; }

@media(max-width:768px) {
    table.vertic-table tbody tr td .file-input { width: calc(100%);}
}

/* 개발자 커스텀 css */
/* 센터 정보 - url 스타일 */
.center-detail-info table.normal-table tr td.link-td {text-decoration: underline}
.center-detail-info table.normal-table tr td .link {vertical-align: middle;margin-right: 5px;}

/* 필수/선택 텍스트 스타일*/
table.vertic-table tbody tr th span.small-txt { font-size: 1.3rem; color: var(--blue); display: inline-block; }
table.vertic-table tbody tr th span .dot { color: #ed6c5f; }

.form table.normal-table tr th span.small-txt { font-size: 1.3rem; }
.form table.normal-table tr th span .dot { color: #ed6c5f; }

.term-check-wrap ul li > .term-box input[type=checkbox]:not(old) + label span .dot { color: #ed6c5f; }

/* 개발자 커스텀 css */
.txt-green {color: #30b686 !important;}
.txt-red {color: #f05050 !important;}
.txt-orange {color: #ff6000 !important;}
.txt-blue {color: blue !important;}
.txt-black {color: #000000 !important;}