@charset "UTF-8";

.subDepth4 {border-bottom:1px solid #dee0e8; margin-bottom:8rem;}
.subDepth4 ul {display:flex; gap:3rem;}
.subDepth4 ul li a {padding:3rem 0px; margin:0 3rem; position:relative; display:block;}
.subDepth4 ul li.on a {color:#095bcc; font-size:1.8rem; font-weight:700;}
.subDepth4 ul li.on a::after {content:""; display:block; position:absolute; width:100%; height:3px; background:#095bcc; right:0; bottom:-1px; }
@media screen and (max-width:1056px) {
	.subDepth4 ul {gap:3rem; justify-content:center;}
	.subDepth4 ul li a {margin:0; text-align:center; align-content:center;}
}
@media screen and (max-width:768px) {
	.subDepth4 ul {gap:1.5rem;}
}


/* ===== 대관 STEP ===== */
.rentStep {margin-bottom:6rem;  position:relative;}
.rentStep ul {display:flex; align-items:stretch; justify-content:space-between; }
.rentStep ul li {display:flex; align-items:center; gap:1.2rem; padding:1.8rem 0; position:relative; color:#aaa; flex-shrink:0; width:calc(33.33% - 4rem);}
.rentStep ul li:after {content:""; position:absolute; bottom:-5px; left:0; width:100%; height:5px; background:#f3f3f3; z-index:1;}
.rentStep ul li .stepNum {display:inline-block; padding:0.4rem 1.4rem; border-radius:3rem; font-size:1.5rem; font-weight:700; color:#565656; letter-spacing:0.5px; background:#ececec;}
.rentStep ul li .stepTxt {font-size:2.4rem; font-weight:700; color:#aaa;}
.rentStep ul li i {position:absolute; top:calc(50% - 1.5rem); right:0; font-size:3rem; color:#dedede;}
.rentStep ul li.on .stepNum {background: #009678; background: linear-gradient(90deg,rgba(0, 150, 120, 1) 0%, rgba(5, 94, 202, 1) 100%); color:#fff; border-color:#333;}
.rentStep ul li.on .stepTxt {color:#222;}
.rentStep ul li.on::after { background: #009678; background: linear-gradient(90deg,rgba(0, 150, 120, 1) 0%, rgba(5, 94, 202, 1) 100%); z-index:1;}
@media screen and (max-width:1056px) {
	.rentStep ul li {width:calc(40% - 3rem); margin-right:3rem;}
}
@media screen and (max-width:768px) {
	.rentStep ul {flex-direction:column; }
	.rentStep ul li {width:100%; padding:2.1rem 1.5rem 1.8rem;}
	.rentStep ul li:not(.on) {display:none;} 
}



/* ===== 대관 안내 박스 ===== */
.rentInfobox {display:flex; align-items:flex-start; gap:3rem; background:#fafafa; border-radius:2rem; padding:4rem 5rem; margin-bottom:5rem;}
.rentInfobox .infoIcon {flex-shrink:0; width:14rem; height:14rem; background:url(/culture/portal/images/common/iconbg.jpg); border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:0.3rem 0.3rem 1rem rgba(0,0,0,0.1);}
.rentInfobox .infoIcon img {width:6rem; height:6rem;}
.rentInfobox .infoTxt {flex:1;}
.rentInfobox .infoTitle {font-size:3.6rem; font-weight:700; color:#222; margin-bottom:2rem;}
.rentInfobox .infoTitle strong {color:#008b83;}
.rentInfobox .infoList {display:flex; flex-direction:column; gap:1rem; margin-bottom:1.6rem;}
.rentInfobox .infoList li {display:flex; align-items:center; gap:1.2rem; font-size:1.8rem; color:#333;}
.rentInfobox .infoList li em {color:#f53a72!important; font-weight:700; font-style:normal; font-size:2.2rem;}
.rentInfobox .badge {display:inline-block; padding:0.5rem 1.5rem 0.5rem; border-radius:20px; font-size:1.6rem; font-weight:700; color:#fff; min-width:6rem; text-align:center;}
.rentInfobox .badgeUse {background:#095bcc;}
.rentInfobox .badgeReceipt {background:#5a5f7d;}
.rentInfobox .badgeResult {background:#222;}
.rentInfobox .infoNotice {display:flex; flex-direction:column; gap:0.6rem;}
.rentInfobox .infoNotice li {display:flex; align-items:center; gap:0.6rem;  color:#888;}
.rentInfobox .infoNotice .ico_info {display:inline-block; width:2rem; height:2rem; background:#ccc; border-radius:50%; flex-shrink:0; position:relative; align-content:center;}
.rentInfobox .infoNotice .ico_info::after {content:"i"; display:block; text-align:center; line-height:1.6rem; font-size:1rem; font-weight:700; color:#fff; font-style:normal;}
@media screen and (max-width:768px) {
	.rentInfobox {flex-direction:column; padding:2.4rem; gap:2rem;}
	.rentInfobox .infoIcon {width:5rem; height:5rem;}
	.rentInfobox .infoIcon img {width:2.8rem; height:2.8rem;}
}

/* ===== 대관 콘텐츠 (3단) ===== */
.rentContent {display:flex; gap:2rem; margin-bottom:5rem; flex-wrap:wrap;}
.rentContent > div {border:5px solid #f3f3f3;; border-radius:2.5rem; padding:2.4rem; order:initail;}



/* --- 달력 --- */
.rentCal {flex:1 1 42%;}
.rentContent.rentintro .rentCal {flex:1 1 70%;}
.calHeader {display:flex; align-items:center; justify-content:space-between; gap:2rem; margin-bottom:2rem; padding-bottom:1.6rem; border-bottom:1px solid #eee;}
.calHeader .calYear {font-size:2.2rem; font-weight:700; color:#222;}
.calHeader .calMonth {font-size:2.2rem; font-weight:700; color:#095bcc;}
.calHeader .btnPrev, .calHeader .btnNext {width:4rem; height:4rem; border-radius:50%; background:#f3f3f3; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:2.2rem; color:#666; transition:background 0.2s;}
.calHeader .btnPrev:hover, .calHeader .btnNext:hover {background:#333; color:#fff;}
.calTable {width:100%; border-collapse:collapse; text-align:center; table-layout:fixed;}
.calTable caption {position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0);}
.calTable thead th {padding:1.2rem 0;font-weight:700; color:#666;}
.calTable thead th.sun {color:#e53e3e;}
.calTable thead th.sat {color:#095bcc;}
.calTable tbody td {padding:1.5rem 0;color:#333; cursor:pointer; position:relative; vertical-align:middle; height:4rem;}
.calTable tbody td:empty {cursor:default;}
.calTable tbody td.sun {color:#e53e3e;}
.calTable tbody td.sat {color:#095bcc;}

.calTable tbody td.hasEvent {position:relative; z-index:1;}
.calTable tbody td.hasEvent::before {content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:4rem; height:4rem; border-radius:50%; background:#e0edff; z-index:-1;}

.calTable tbody td.disabled {color:#ccc; /*cursor:not-allowed;*/}
.calTable tbody td.disabled::before {content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:4rem; height:4rem; border-radius:50%; background:#f3f3f3; z-index:-1;}

.calTable tbody td.holiday {color:#f41c62; position:relative;}
.calTable tbody td.holiday::before {content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:4rem; height:4rem; border-radius:50%; background:#fee8ef; z-index:-1;}

.calTable tbody td.today {position:relative; z-index:1; color:#fff;}
.calTable tbody td.today::before {content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:4rem; height:4rem; border-radius:50%; background:#333; z-index:-1;}

.calTable tbody td.selected {color:#fff; position:relative; z-index:1;}
.calTable tbody td.selected::before {content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:4rem; height:4rem; border-radius:50%; background:#095bcc; z-index:-1;}

.calTable tbody td .reason {display:none; position:absolute; left:50%; bottom:100%; transform:translateX(-50%); z-index:10; background:#333; color:#fff; font-size:1.4rem; padding:0.5rem 1rem; border-radius:0.5rem; margin-bottom:0.5rem; width:15rem; word-break:break-all;}
.calTable tbody td:hover .reason {display:block;}
.calTable tbody td .reason::after {content:""; position:absolute; top:100%; left:50%; transform:translateX(-50%); border:5px solid transparent; border-top-color:#333;}

/* 달력 범례 */
.calLegend {display:flex; flex-wrap:wrap; align-items:center; gap:2rem; padding-top:0; border:0!important; order:4; width:100%; margin-top:-3rem;}
.calLegend .legendItem {display:flex; align-items:center; gap:0.5rem; color:#666;}
.calLegend .dot {display:inline-block; width:1.6rem; height:1.6rem; border-radius:50%; transform:translateY(-0.1rem)}
.calLegend .dotSelected {background:#095bcc;}
.calLegend .dotToday {background:#222;}
.calLegend .dotDisabled {background:#f3f3f3;}
.calLegend .dotHoliday {background:#fee8ef;}
/* --- 사용시간 선택 --- */
.rentTime {flex:1 1 25%;}
.rentContent.rentintro .rentTime {flex:1 1 25%;}

.rentTime .reason {border-radius:1rem; background:#333; color:#fff; padding:1rem; margin-bottom:1rem;}
.rentSubTitle {font-size:1.8rem; font-weight:700; color:#222; text-align:center; margin-bottom:2rem; padding-bottom:1.6rem; border-bottom:1px solid #eee;}
.timeList {display:flex; flex-direction:column; gap:1.2rem;}
.timeList li {}
.timeLabel {display:flex; align-items:center; gap:1rem; padding:1.4rem 1.6rem; border:3px solid #f3f3f3; border-radius:3rem; cursor:pointer; transition:all 0.2s;}
.timeLabel input[type="checkbox"] {-webkit-appearance:none !important;-moz-appearance:none !important;appearance:none !important;display:inline-block !important;visibility:visible !important;opacity:1 !important;width:2rem !important;height:2rem !important;border:2px solid #ccc;border-radius:4px;cursor:pointer;flex-shrink:0;position:relative;transition:all 0.2s;background:#fff;}
.timeLabel input[type="checkbox"]:checked {background:#095bcc !important; border-color:#095bcc !important; z-index:initial;}
.timeLabel input[type="checkbox"]:checked::after {content:"\eb7b"; display:block; text-align:center; line-height:1.6rem; font-size:1.2rem; color:#fff; font-weight:700; z-index:initial;font-family: remixicon !important; font-style: normal; -webkit-font-smoothing: antialiased;}
.timeLabel .timeRange {flex:1; font-size:1.5rem; font-weight:500; color:#333;}
.timeLabel .timeStatus {font-size:1.6rem;  }
.timeLabel .timeStatus.available {color:#0167ba; }
.timeLabel .timeStatus.unavailable {color:#999;  }

.timeLabel:has( input:checked) {border-color:#0167ba; background:#f0f5ff;}
.timeLabel.disabled {background:#fafafa; cursor:not-allowed; opacity:0.6;}
.timeLabel.disabled input[type="checkbox"] {cursor:not-allowed;}

/* --- 예약 일자 선택 --- */
.rentDay {flex:1 1 25%;}
.dayList {display:flex; flex-direction:column; gap:1rem; overflow-y:auto; height:40rem; }
.dayList::-webkit-scrollbar { width:6px;}
.dayList::-webkit-scrollbar-track { background:rgba(0,0,0,0.1);border-radius: 10px; }
.dayList::-webkit-scrollbar-thumb {background:rgba(0,0,0,0.2);border-radius:3px; }
.dayList::-webkit-scrollbar-thumb:hover {background:rgba(0,0,0,0.2);}  
.dayList li {}
.dayLabel {display:flex; align-items:center; gap:1rem; padding:1.2rem 1.6rem; cursor:pointer; border-bottom:1px solid #f0f0f0; transition:background 0.2s; position:relative;}
.dayLabel:hover {background:#f7f8fb;}
.dayLabel input[type="checkbox"] {-webkit-appearance:none !important; -moz-appearance:none !important; appearance:none !important; display:inline-block !important; visibility:visible !important; opacity:1 !important; width:2rem !important; height:2rem !important; min-width:2rem !important; min-height:2rem !important; border:2px solid #ccc; border-radius:4px; cursor:pointer; flex-shrink:0; position:relative; z-index:2; transition:all 0.2s; background:#fff; margin:0;}
.dayLabel input[type="checkbox"]:checked {background:#095bcc !important; border-color:#095bcc !important;}
.dayLabel input[type="checkbox"]:checked::after {content:"\eb7b";  display:block; text-align:center; line-height:1.6rem; font-size:1.2rem; color:#fff; font-weight:700; z-index:initial;font-family: remixicon !important; font-style: normal; -webkit-font-smoothing: antialiased;}
.dayLabel .dayDate {flex:1; font-size:1.5rem; color:#333;}
.dayLabel .dayStatus {font-size:1.6rem;}
.dayLabel .dayStatus.available {color:#0167ba;}
.dayLabel .dayStatus.unavailable {color:#999;}
.dayLabel.disabled {background:#fafafa; cursor:not-allowed; opacity:0.6;}
.dayLabel.disabled input[type="checkbox"] {cursor:not-allowed;}

/* ===== 반응형 ===== */
@media screen and (max-width:1056px) {
	.rentContent > div {order:1;}
}
@media screen and (max-width:768px) {
	.calTable {font-size:1.6rem;}
	.calTable tbody td .reason {display:none!important;}
	.calTable tbody td::before {width:3.6rem!important; height:3.6rem!important;}
	.rentContent {flex-direction:column;}
	.rentContent > div {flex:1 1 100%; max-width:100%;}
}

.percheckbox {padding:2rem 3rem; border:5px solid #f3f3f3; border-radius:5rem; margin-bottom:3rem; font-weight:700;}
.perConbox {padding:2rem; border-radius:2rem; background:#fafafa;}