@charset "utf-8";
:root {
	--rental-orange: #caa064;
	--rental-orange-hover: rgb(189, 116, 0);
	--rental-charcoal: #4a4e57;
	--rental-charcoal-soft: #5c6069;
	--rental-line: #d9d9d9;
	--rental-bg-soft: #f0f0f0;
	--rental-bg-row: #ebebeb;
	--rental-bg-muted: #e8e8e8;
	--rental-radius-lg: 24px;
	--rental-radius-md: 999px;
	--rental-radius-sm: 1.2rem;
} 

/* 공통 */
.rental-contents input[type="radio"]:disabled + label ,
.rental-contents input[type="checkbox"]:disabled + label { cursor: default; background: var(--rental-bg-muted);border-color: #ddd;color: #aaa; }
.rental-contents input[type="radio"],
.rental-contents input[type="checkbox"] { display: none; }
.rental-contents input[type="radio"] + label,
.rental-contents input[type="checkbox"] + label {padding: 14px 24px 12px; border-radius: var(--rental-radius-md);border: 1px solid var(--rental-line); background: none; margin-right: 0; line-height: 1.3;font-weight: 500;transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; } 
.rental-contents input[type="radio"]:checked + label,
.rental-contents input[type="checkbox"]:checked + label {background: var(--rental-orange);border-color: var(--rental-orange); } 
.rental-contents input[type="radio"]:not(:disabled) + label:hover,
.rental-contents input[type="checkbox"]:not(:disabled) + label:hover {border-color: #bbb; }


/* 폼 카드 */
.rental-form-card {max-width:1024px; margin:0 auto; border: 1px solid var(--rental-line); border-radius: var(--rental-radius-lg); overflow: hidden; }
.rental-form-card__head {padding: 24px 32px 20px; background: #343651; color:white; border-bottom: 1px solid var(--rental-line);}
.rental-form-card__title { font-size: 22px; font-weight: 700; line-height: 1.3; text-align: center; } 
.rental-form { display: flex;flex-direction: column; } 
.rental-form__row { display: grid; grid-template-columns: 180px 1fr; align-items: stretch; border-bottom: 1px solid var(--rental-line); }
.rental-form__row--noborder { border-bottom: 0; }
.rental-form__label { display: flex; align-items: center; padding: 24px 32px; background: var(--rental-bg-row); font-size: 17px; font-weight: 500; border-right: 1px solid var(--rental-line); }
.rental-form__field { padding: 24px 32px; display: flex; align-items: center; flex-wrap: wrap; gap: 12px; background: #fff; } 
.rental-form__row--stack .rental-form__field--equip { flex-direction: column; align-items: flex-start; gap: 16px; } 
.rental-pill-group { display: flex; flex-wrap: wrap; gap: 12px; }

/* 일자 */
.rental-date-wrap { display: flex; align-items: center; gap: 12px; } 
.rental-input[type="text"],
.rental-input[type="date"] { padding: 14px 24px 12px;  border: 1px solid var(--rental-line); border-radius: var(--rental-radius-md); font-size: 17px; min-width: 160px; background: #fff; line-height: 1.4; } 
.rental-input[type="text"]:focus,
.rental-input[type="date"]:focus { outline: 2px solid var(--rental-orange); outline-offset: 2px; } 
.rental-btn-calendar {width: 4.4rem;height: 4.4rem;border: 1px solid var(--rental-line);border-radius: var(--rental-radius-sm);background: var(--rental-bg-soft);color: var(--sub-black);display: inline-flex;align-items: center;justify-content: center;flex-shrink: 0; } 
.rental-btn-calendar:hover {border-color: var(--rental-orange);color: var(--rental-orange); } 


/* 부속설비 */
.rental-equip-line {display: flex; flex-wrap: wrap;align-items: center;gap: 6px; }
.rental-select-wrap {position: relative; } 
.rental-qty {display: inline-flex; align-items: center; border: 1px solid var(--rental-line); border-radius: var(--rental-radius-md); overflow: hidden; background: #fff; } 
.rental-qty__btn { width: 45px; height: 45px; font-size: 20px; display: flex; align-items: center; justify-content: center; padding-top: 2px; padding-left: 4px; padding-right: 0; border-right: 1px solid var(--rental-line); } 
.rental-qty__btn:last-of-type {padding-left: 0; padding-right: 4px; border-right: 0;border-left: 1px solid var(--rental-line); } 
.rental-qty__btn:hover {background: var(--rental-bg-soft); } 
.rental-qty__val {width: 50px; text-align: center; font-size: 17px; font-weight: 600; padding: 0 4px; border: none; outline: none; } 
.rental-qty__val:focus {outline: none; } 
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; }
input[type="number"] { -moz-appearance: textfield; }

/* 냉난방 안내 */
.rental-form__cost { font-size: 18px; font-weight: 600; line-height: 1.5; }
.rental-notice { position: relative; width: 100%; line-height: 1.5; padding-left: 20px; }
.rental-notice::before { content: '※'; position: absolute; left: 0; top: 0; }

/* 비용 */
.rental-cost-list {width: 100%;max-width: 42rem;display: flex;flex-direction: column;gap: 0.8rem;list-style: none; } 
.rental-cost-item {display: flex;justify-content: space-between;align-items: center;gap: 1.6rem;padding: 1.4rem 2rem;background: #fafafa;line-height: 1.4; } 
.rental-cost-item__lbl::after {content: " :"; } 
.rental-cost-item__val {font-weight: 600;white-space: nowrap; } 
.rental-cost-item--total {background: var(--rental-orange);border-color: var(--rental-orange); font-weight: 600; } 
.rental-cost-item--total .rental-cost-item__val { font-size: 20px; }

/* 제출 */
.rental-form__actions {padding: 30px 32px 40px;display: flex;justify-content: center;background: #fff; box-sizing: border-box; } 
.rental-btn-submit {max-width: 280px; width: 100%; text-align: center; padding: 16px; border-radius: var(--rental-radius-md); border: 1px solid #343651; background: #343651; font-size: 18px; font-weight: 700; color:white; line-height: 1.4;transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease; } 
.rental-btn-submit:hover { background: var(--rental-orange); border-color: var(--rental-orange); }


/* 같은 페이지 단계 전환: 신청서 작성 */
.rental-flow {position: relative; } 
.rental-panel[hidden] {display: none !important; } 
.rental-form-section__tit {padding: 24px 32px; font-size: 18px; font-weight: 700; line-height: 1.3; background: var(--rental-bg-soft); border-bottom: 1px solid var(--rental-line); }
.rental-input--full {width: 100%;max-width: 52rem;border-radius: var(--rental-radius-sm); } 
.rental-file-row {position: relative;display: flex;flex-wrap: wrap;align-items: center;gap: 12px;width: 100%; } 
.rental-file-input {position: absolute;width: 1px;height: 1px;margin: -1px;overflow: hidden;clip: rect(0, 0, 0, 0);white-space: nowrap;border: 0; } 
.rental-btn-file {padding: 14px 24px 12px; border-radius: var(--rental-radius-md); border: 1px solid var(--rental-line); background: var(--rental-bg-soft); font-weight: 600; line-height: 1.3; transition: .3s; }
.rental-btn-file:hover {border-color: #bbb;background: #e8e8e8; } 
.rental-file-name {flex: 1;min-width: 14rem;line-height: 1.4;color: var(--sub-black); } 
.rental-summary-text {font-size: 17px;line-height: 1.5;width: 100%; } 
.rental-summary-text--cost {font-weight: 700;font-size: 18px; } 
.rental-form__actions--split { max-width: 420px; width: 100%; margin:0 auto; gap: 12px; } 
.rental-form__actions--split button { width: 100%; padding: 16px 32px; font-weight: 700; font-size: 18px; transition: 0.15s ease; border-radius: var(--rental-radius-md);}
.rental-btn-teal { border: 1px solid var(--rental-line);background: #fff; } 
.rental-btn-teal:hover {border-color: #bbb;background: #e8e8e8; } 
.rental-btn-apply {background: #343651;color: #fff;} 
.rental-btn-apply:hover {background: var(--rental-orange); } 


/* 확인 모달 */
body.rental-modal-open {overflow: hidden; } 
.rental-modal[hidden] {display: none; } 
.rental-modal {position: fixed;inset: 0;z-index: 1000;display: flex;align-items: center;justify-content: center;padding: 2rem; } 
.rental-modal__backdrop {position: absolute;inset: 0;background: rgba(0, 0, 0, 0.45); } 
.rental-modal__dialog {position: relative;z-index: 1;width: 90%;max-width: 440px;background: #fff;border-radius: 24px;padding: 3.2rem 2.8rem 2.4rem;box-shadow: 0 1.2rem 4.8rem rgba(0, 0, 0, 0.12); }
.rental-modal__close {position: absolute;top: 1rem;right: 1rem;width: 40px;height: 40px;border-radius: 50%;display: flex;align-items: center;justify-content: center;font-size: 28px;line-height: 1;color: var(--sub-black);background: transparent;transition: background 0.15s ease, color 0.15s ease; } 
.rental-modal__close:hover {background: var(--rental-bg-soft); } 
.rental-modal__msg {margin: 1rem 0 2.6rem;padding: 0 2rem;font-size: 18px;line-height: 1.55;text-align: center; } 
.rental-modal__actions {display: flex;justify-content: center; gap: 6px; } 
.rental-modal__btn {width: 100%; text-align: center; padding: 14px 28px 12px;border-radius: var(--rental-radius-md);font-weight: 600;line-height: 1.3;min-width: 10rem; transition: 0.15s ease; }
.rental-modal__btn--ghost {border: 1px solid var(--rental-line);background: #fff; }
.rental-modal__btn--ghost:hover {border-color: #999; } 
.rental-modal__btn--primary {border: 0;background: #343651;color: #fff; } 
.rental-modal__btn--primary:hover {background: var(--rental-orange); } 


/* 대관 신청 리스트 */
.rental-contents .board_list .num { width: 80px; }
.rental-contents .board_list .date { width: 120px; }
.rental-contents .board_list .tit { width: auto; }
.rental-contents .board_list .status { width: 20%; }
.rental-contents .board_list .writer { width: 120px; }

.rental-contents .status__text { display: inline-block; padding: 4px 12px; border-radius: 50px; text-align: center; font-size: 14px; font-weight: 600; }
.rental-contents .status_apply { color: #008000; background: #00800010; }
.rental-contents .status_review { color: #000080; background: #00008010; }
.rental-contents .status_deposit { color: #808000; background: #80800010; }
.rental-contents .status_approve { color: #008080; background: #00808010; }
.rental-contents .status_cancel { color: #cc0000; }
.rental-contents .status_complete { color: #666; }

/* 대관 상세 */
.rental-detail-status {padding: 1.8rem 2.4rem;background: var(--rental-bg-soft);border-bottom: 1px solid var(--rental-line);font-size: var(--fs-18);line-height: 1.4; } 
.rental-detail-status__text {display: block; } 
.rental-detail-status__lbl {font-weight: 600; } 
.rental-detail-status__val {font-weight: 700;color: var(--rental-orange); } 
.rental-form--detailview .rental-form__actions {justify-content: center;padding-top: 2rem; } 
.rental-form--detailview .rental-btn-submit {min-width: 28rem; text-align: center;} 
.rental-btn-filelink {display: inline-flex;align-items: center;justify-content: center;padding: 14px 24px 12px; border-radius: var(--rental-radius-md);border: 1px solid var(--rental-line);background:white; font-weight: 600;line-height: 1.3;text-decoration: none;transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease; } 
.rental-btn-filelink:hover {border-color: var(--rental-orange);color: var(--rental-orange);background: #fffaf3; } 

@media screen and (max-width: 768px) {
	.rental-subvis__inner {grid-template-columns: 1fr;min-height: auto; } 
	.rental-subvis__left {min-height: 10rem; } 
	.rental-subvis__right {min-height: 8rem; } 
	.rental-form__row {grid-template-columns: 1fr; } 
	.rental-form__label {border-right: 0;border-bottom: 1px solid var(--rental-line); padding: 12px 24px; } 
	.rental-form-section__tit {padding: 12px 24px; } 
	.rental-form__field { padding: 12px 24px; } 
	.rental-cost-item { padding: 12px 18px; }
	.rental-btn-submit {width: 100%;min-width: 0; } 
	.rental-btn-teal,
	.rental-btn-apply {width: 100%;min-width: 0; } 
	.rental-form__actions--split {flex-direction: column-reverse; } 
	.rental-form--detailview .rental-btn-submit {width: 100%;min-width: 0; } 
	.rental-input[type="text"], .rental-input[type="password"] { width: 100%; }
	.rental-form__label br { display: none; }
}
