/* ======================================== 예약 시스템 공통 CSS ======================================== */

/* 기본 제목 스타일 */
h3 { font-size: 1.2rem; font-weight: 700; color: var(--text-primary); margin: 2rem 0px; padding-bottom: 0.5rem; border-bottom: 2px solid #ecf0f1; }

/* 단계별 진행 표시기 */
.progress-steps { display: flex; justify-content: center; align-items: center; margin-bottom: 50px; padding: 0; gap: 0; }
.step { display: flex; flex-direction: column; align-items: center; position: relative; padding: 25px 20px; border-radius: 12px; transition: all 0.3s ease; width: 100%; height: 300px; background: #f8f9fa; color: #6c757d; justify-content: center; }
.step.active { background: #483bc9; color: white; }
.step.completed { opacity: 0.5; box-shadow: none; }
.step-number2 { font-size: 25px; font-weight: bold; margin-bottom: 15px; text-align: center; }
.step-icon { padding: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 15px; transition: all 0.3s ease; background-size: 70px; background-color: #ffffff; background-repeat: no-repeat; background-position: center; }
.step-text { font-size: 20px; text-align: center; line-height: 1.4; font-weight: 500; }
.step.active .step-text { color: white; font-weight: 600; }
.step-arrow { margin: 0 10px; color: #6c757d; font-size: 1.5rem; font-weight: bold; align-self: center; }
.step.active + .step-arrow { color: #483bc9; }
.step.completed + .step-arrow { color: #ccc; }
.step-icon-1 { background-image: url('/resources/view/phcf/images/reservation/reservation_icon1.png'); }
.step-icon-2 { background-image: url('/resources/view/phcf/images/reservation/reservation_icon2.png'); }
.step-icon-3 { background-image: url('/resources/view/phcf/images/reservation/reservation_icon3.png'); }
.step-icon-4 { background-image: url('/resources/view/phcf/images/reservation/reservation_icon4.png'); }
.step-icon-5 { background-image: url('/resources/view/phcf/images/reservation/reservation_icon5.png'); }

/* 애니메이션 키프레임 */
@keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@keyframes successPulse { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.7); } 50% { transform: scale(1.05); box-shadow: 0 0 0 10px rgba(40, 167, 69, 0); } 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(40, 167, 69, 0); } }
@keyframes ripple { 0% { width: 0; height: 0; opacity: 1; } 100% { width: 120px; height: 120px; opacity: 0; } }
@keyframes checkmarkDraw { 0% { stroke-dasharray: 0 50; stroke-dashoffset: 50; } 100% { stroke-dasharray: 50 0; stroke-dashoffset: 0; } }
@keyframes fadeInUp { 0% { opacity: 0; transform: translateY(30px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes slideInUp { 0% { opacity: 0; transform: translateY(50px); } 100% { opacity: 1; transform: translateY(0); } }

/* 반응형 디자인 - 진행 단계 */
@media (max-width: 1200px) { .step { max-width: 180px; height: 160px; padding: 20px 5px; border-radius: 0; border-right: none; } .step:last-child { border-right: 1px solid #dddddd; } .step-icon { display: none; } .step-number2 { font-size: 16px; } .step-text { font-size: 16px; } .step-arrow { display: none; } }
@media (max-width: 1100px) { .main-content { margin-right: 0; } }
@media (max-width: 700px) { .main-content { grid-template-columns: 1fr; gap: 20px; } .venue-list { flex-direction: row; flex-wrap: wrap; } .venue-item { flex: 1 1 auto; min-width: calc(50% - 5px); } .venue-button { width: 100%; } .progress-steps {margin-bottom: 0px;} }
@media (max-width: 500px) { .step { height: 100px; } .step-number2 { font-size: 13px; margin-bottom: 5px; } .step-text { font-size: 13px; } }

/* 공통 헤더 및 메인 레이아웃 */
.content-header { background: #000; color: white; padding: 20px; margin-bottom: 30px; text-align: center; font-size: 1.2rem; font-weight: bold; }
.main-content { display: grid; grid-template-columns: 300px 1fr; gap: 30px; min-height: 600px; }
.left-panel { background: #f8f9fa; padding: 20px; border-radius: 8px; }
.right-panel { background: white; border: 1px solid #dbdbdb; border-radius: 8px; padding: 20px; }
.panel-title { font-size: 1.1rem; font-weight: bold; margin-bottom: 20px; color: #333; display: flex; flex-direction: column; }
.panel-title #areaButtonsContainer { margin-top: 15px; }
.venue-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.venue-item { margin-bottom: 0; }
.venue-button { width: 100%; padding: 15px; border: 1px solid #b5b5b5; background: white; border-radius: 5px; cursor: pointer; transition: all 0.3s ease; text-align: left; }
.venue-button:hover { background: #f8f9fa; }
.venue-button.selected { background: #000; color: white; border-color: #000; }
.venue-button:disabled,
.venue-button.venue-button--disabled { opacity: 0.65; cursor: default; pointer-events: none; background: #e8e8e8; color: #999; border-color: #ccc; }
.venue-button:disabled:hover,
.venue-button.venue-button--disabled:hover { background: #e8e8e8; color: #999; }
/* 대관 일정 현황: 시설(구역) 탭 — 접수 기간 없음 시 회색·클릭 불가 (HTML disabled 미사용) */
.area-btn.area-btn--disabled {
    opacity: 0.65 !important;
    cursor: default !important;
    pointer-events: none !important;
    background: #e8e8e8 !important;
    color: #999 !important;
    border-color: #ccc !important;
}
.area-btn.area-btn--disabled:hover {
    background: #e8e8e8 !important;
    color: #999 !important;
}
@media (max-width: 700px) { .main-content { grid-template-columns: 1fr; gap: 20px; } .venue-list { flex-direction: row; flex-wrap: wrap;gap: 5px; } .venue-item { flex: 1 1 auto; min-width: calc(50% - 5px); } .venue-button { width: 100%; } .calendar-day {padding:5px 5px !important;}}

/* 캘린더 */
.calendar-container { margin-bottom: 20px; }
.calendar-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.calendar-nav { display: flex; align-items: center; gap: 15px; }
.calendar-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

/* 휴관일 목록: 원형 아이콘 · 호버 시 라벨(.list_title .period_closed_btn 와 동일 UX) */
.calendar-actions button.fo-closed-list-icon-btn {
	box-sizing: border-box;
	width: 46px;
	height: 46px;
	min-width: 46px;
	padding: 0;
	margin: 0;
	border: 1px solid #939393;
	border-radius: 50%;
	background: #fff;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: width 0.38s ease, border-radius 0.25s ease, background 0.2s ease, border-color 0.2s ease;
	overflow: hidden;
	white-space: nowrap;
	flex-shrink: 0;
}
.calendar-actions button.fo-closed-list-icon-btn::after {
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	content: "\f03a";
	font-size: 17px;
	color: #444;
	line-height: 1;
}
.calendar-actions button.fo-closed-list-icon-btn:hover,
.calendar-actions button.fo-closed-list-icon-btn:focus-visible {
	width: 138px;
	border-radius: 26px;
	background: var(--primary-color, #324b95);
	border-color: var(--primary-color, #324b95);
}
.calendar-actions button.fo-closed-list-icon-btn:hover::after,
.calendar-actions button.fo-closed-list-icon-btn:focus-visible::after {
	content: "휴관일 목록";
	font-family: inherit, sans-serif;
	font-weight: 400;
	font-size: 13px;
	letter-spacing: 0;
	color: #fff;
}

/* FO 휴관일 목록 모달 — 고정 크기(항목 수와 무관), 컴팩트 버튼 */
.fo-closed-list-backdrop {
	position: fixed;
	inset: 0;
	z-index: 9998;
	background: rgba(0, 0, 0, 0.45);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	box-sizing: border-box;
}
.fo-closed-list-modal {
	box-sizing: border-box;
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 12px 48px rgba(0, 0, 0, 0.2);
	width: min(508px, calc(100vw - 48px));
	height: min(596px, calc(100vh - 48px));
	max-width: 508px;
	max-height: calc(100vh - 48px);
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
.fo-closed-list-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px 22px 18px;
	border-bottom: 1px solid #e9ecef;
	flex-shrink: 0;
}
.fo-closed-list-head h3 {
	margin: 0;
	font-size: 1.125rem;
	font-weight: 700;
	color: #111;
	letter-spacing: -0.02em;
}
.fo-closed-list-x {
	background: none;
	border: none;
	font-size: 1.35rem;
	line-height: 1;
	cursor: pointer;
	color: #888;
	padding: 2px 6px;
	border-radius: 4px;
}
.fo-closed-list-x:hover {
	color: #222;
	background: #f5f5f5;
}
.fo-closed-list-toolbar {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
	padding: 16px 22px;
	border-bottom: 1px solid #eef0f2;
	flex-shrink: 0;
}
.fo-closed-nav {
	background: none;
	border: none;
	font-size: 1.15rem;
	cursor: pointer;
	padding: 6px 10px;
	line-height: 1;
	color: #444;
	border-radius: 6px;
}
.fo-closed-nav:hover {
	color: #000;
	background: #f3f4f6;
}
.fo-closed-list-month-label {
	font-weight: 600;
	font-size: 1.02rem;
	min-width: 9em;
	text-align: center;
	color: #1a1a1a;
}
.fo-closed-list-search-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 22px 18px;
	border-bottom: 1px solid #eef0f2;
	flex-shrink: 0;
}
.fo-closed-list-month-input {
	flex: 1;
	min-width: 0;
	box-sizing: border-box;
	height: 34px;
	padding: 0 10px;
	border: 1px solid #ced4da;
	border-radius: 6px;
	font-size: 0.875rem;
}
.fo-closed-search-btn {
	flex-shrink: 0;
	box-sizing: border-box;
	height: 34px;
	padding: 0 14px;
	font-size: 0.8125rem;
	font-weight: 500;
	line-height: 1;
	border: 1px solid #cdd2d8;
	border-radius: 6px;
	background: #f4f5f7;
	color: #3d4349;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease;
}
.fo-closed-search-btn:hover {
	background: #e9ebef;
	border-color: #bfc6ce;
	color: #2b3036;
}
/* 목록 영역: 표 헤더는 고정(스크롤 밖), 본문만 스크롤 — 검색줄에 바로 붙음 */
.fo-closed-list-list-area {
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	padding: 0 22px 22px;
	box-sizing: border-box;
}
.fo-closed-list-thead-wrap {
	flex-shrink: 0;
	margin: 0;
	padding: 0;
	/* tbody 영역 세로 스크롤바와 열 맞춤(고전 스크롤바 폭 대략 15~17px) */
	padding-right: 15px;
	box-sizing: border-box;
}
.fo-closed-list-thead-wrap table.fo-closed-list-table {
	margin: 0;
}
.fo-closed-list-tbody-wrap {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
}

/* FO 휴관일 목록: CMS 신청목록과 동일 톤의 구분 뱃지 + 표 레이아웃 */
table.fo-closed-list-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	margin: 0;
	padding: 0;
	table-layout: fixed;
	font-size: 0.9375rem;
}
table.fo-closed-list-table col.fo-closed-col-w-kind {
	width: 88px;
}
table.fo-closed-list-table col.fo-closed-col-w-date {
	width: auto;
}
table.fo-closed-list-table col.fo-closed-col-w-del {
	width: 72px;
}
.fo-closed-list-thead-wrap table.fo-closed-list-table thead th {
	position: static;
	padding: 10px 12px;
	text-align: left;
	font-weight: 600;
	font-size: 0.8rem;
	color: #495057;
	background: #f8f9fa;
	border-bottom: 2px solid #dee2e6;
	margin: 0;
}
table.fo-closed-list-table th.fo-closed-col-kind {
	text-align: center;
}
table.fo-closed-list-table th.fo-closed-col-date {
	min-width: 0;
}
table.fo-closed-list-table th.fo-closed-col-del {
	text-align: center;
}
table.fo-closed-list-table tbody td {
	padding: 11px 12px;
	border-bottom: 1px solid #eef0f2;
	vertical-align: middle;
	background: #fff;
}
table.fo-closed-list-table tbody tr:last-child td {
	border-bottom: none;
}
.fo-closed-col-kind {
	text-align: center;
}
.fo-closed-col-del {
	text-align: center;
}
/* 휴관일 목록 모달 구분 · CMS 신청목록과 동일: 휴관 검정 / 신청 파랑 pill */
span.fo-closed-kind-badge {
	display: inline-block;
	font-size: 0.72rem;
	padding: 0.25rem 0.55rem;
	font-weight: 600;
	line-height: 1.2;
	color: #fff;
	background-color: #000;
	border-radius: 999px;
	white-space: nowrap;
}
span.fo-closed-kind-badge.fo-closed-kind-application {
	background-color: #2563eb;
}
span.fo-closed-del-dash {
	color: #adb5bd;
	font-size: 1.1rem;
	font-weight: 500;
	user-select: none;
}
.fo-closed-list-li-date {
	color: #222;
	min-width: 0;
	word-break: keep-all;
	line-height: 1.45;
}
button.fo-closed-cancel-btn {
	flex-shrink: 0;
	box-sizing: border-box;
	height: 28px;
	min-width: 52px;
	padding: 0 12px;
	font-size: 0.75rem;
	font-weight: 500;
	line-height: 1;
	border: 1px solid #e57373;
	border-radius: 5px;
	background: #ffebee;
	color: #c62828;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
button.fo-closed-cancel-btn:hover {
	background: #ffcdd2;
	border-color: #ef5350;
	color: #b71c1c;
}
button.fo-closed-cancel-btn.fo-closed-delete-btn {
	margin: 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.fo-closed-list-empty {
	margin: 0;
	padding: 32px 22px;
	text-align: center;
	color: #6c757d;
	font-size: 0.9rem;
	line-height: 1.5;
}
.fo-closed-list-loading-tr td.fo-closed-list-loading,
td.fo-closed-list-loading {
	padding: 32px 22px !important;
	text-align: center;
	color: #6c757d;
	font-size: 0.9rem;
	border-bottom: none !important;
	vertical-align: middle;
}

.nav-button { background: none; border: none; font-size: 1.2rem; cursor: pointer; padding: 5px; }
.current-month { font-size: 1.1rem; font-weight: bold; color: #000;}
.calendar-legend { display: flex; gap: 15px; margin-bottom: 15px; font-size: 0.9rem; }
.legend-item { display: flex; align-items: center; gap: 5px; }
.legend-color { width: 12px; height: 12px; border-radius: 50%; }
.legend-selected { background: #66bb6a; }
.legend-scheduled { background: #fff59d; border: 1px solid #f9a825; box-sizing: border-box; }
.legend-unavailable { background: #6c757d; }
.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: #e0e0e0; border: 1px solid #b5b5b5; }
.calendar-day {color: #000; background: white; padding: 15px 10px; text-align: center; cursor: pointer; transition: all 0.3s ease; border: 2px solid transparent; }
.calendar-day:hover { background: #f8f9fa; }
.calendar-day.today:not(.period-scheduled):not(.unavailable) { background: #e3f2fd; }
.calendar-day.selected { background: #e8f5e9; border-color: #43a047; }
.calendar-day.period-scheduled { background: #fff9c4; color: #5d4037; cursor: not-allowed; }
.calendar-day.period-scheduled:hover { background: #fff59d; }
.calendar-day.unavailable { background: #f5f5f5; color: #ccc; cursor: not-allowed; }
.calendar-day.other-month { color: #ccc; }

/* 시간 선택 */
.time-selection { margin-top: 20px; }
.time-slots { margin-top: 10px; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.time-slot { padding: 15px; border: 1px solid #ddd; border-radius: 5px; text-align: center; cursor: pointer; transition: all 0.3s ease; }
.time-slot:hover { background: #f8f9fa; }
.time-slot.selected { background: #483bc9; color: white; border-color: #483bc9; }
.time-slot.unavailable { background: #f5f5f5; color: #ccc; cursor: not-allowed; }
.time-btn { padding: 8px 16px; border: 2px solid #e9ecef; background: #ffffff; border-radius: 8px; cursor: pointer; transition: all 0.3s ease; font-size: 0.9rem; font-weight: 500; margin: 4px; display: inline-block; }
.time-btn:hover { border-color: #007bff; background: #fff !important; color: #007bff; transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0, 123, 255, 0.2); }
.time-btn[data-reserved="true"] { background: #f8d7da; border-color: #dc3545; color: #721c24; cursor: not-allowed; opacity: 0.6; }
.time-btn-hover-valid { background: #007bff !important; border-color: #007bff !important; color: #fff; }
.time-btn-hover-invalid { border-color: #f44336 !important; color: #f44336 !important; }
.time-loading { display: flex; align-items: center; justify-content: center; gap: 10px; color: #6c757d; font-style: italic; }
.time-loading i { color: #007bff; font-size: 1.2rem; }
#selectedTimeDisplay { padding: 12px 15px; line-height: 25px; color: #000; font-size: 15px; }
#selectedTimeDisplay i { margin-right: 8px; }

/* 버튼 스타일 */
.btn {border: 1px solid #b7b7b7; padding: 12px 24px; border-radius: 5px; cursor: pointer; font-size: 1rem; transition: all 0.3s ease; }
.btn-primary { background: #000; color: white; }
.btn-primary:hover { background: #333; }
.btn-secondary { background: #6c757d; color: white; }
.btn-secondary:hover { background: #545b62; }
.btn-outline { background: transparent; color: #007bff; border: 1px solid #007bff; }
.btn-outline:hover { background: #007bff; color: white; }
.list_btn { transition: 0.3s; background: #fff; color: #656565; border: 1px solid #cbcbcb; font-size: 16px; cursor: pointer; border-radius: 100%; height: 50px; width: 50px; display: flex; align-items: center; justify-content: center; }
.list_btn:hover { background: #324b95; border: 1px solid #324b95; color: #fff; }
.bottom-actions { display: flex; justify-content: flex-end; align-items: center; margin-top: 30px; padding-top: 20px; border-top: 1px solid #e0e0e0; }
.action-buttons { display: flex; gap: 15px; justify-content: center; flex-wrap: wrap; animation: fadeInUp 1s ease-out 1.4s both; }

/* 공간 카드 */
.space-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin-bottom: 30px; }
.space-card { border: 1px solid #e0e0e0; border-radius: 8px; padding: 20px; background: white; box-shadow: 0 2px 4px rgba(0,0,0,0.1); transition: transform 0.3s ease; }
.space-card:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.15); }
.space-card h3 { color: #333; margin-bottom: 10px; font-size: 1.3rem; }
.space-card p { color: #666; margin-bottom: 15px; line-height: 1.5; }
.space-info { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
.space-capacity { background: #f8f9fa; padding: 5px 10px; border-radius: 15px; font-size: 0.9rem; color: #666; }
.space-price { font-weight: bold; color: #007bff; font-size: 1.1rem; }
.btn-reserve {text-align: center; width: 100%; padding: 12px; background: #007bff; color: white; border: none; border-radius: 8px; font-size: 1rem; cursor: pointer; transition: background-color 0.3s ease; }
.btn-reserve:hover { background: #0056b3; }
.btn-reserve:disabled { background: #ccc; cursor: not-allowed; }

/* 예약 정보 표시 */
.reservation-info { background: #f8f9fa; border: 1px solid #e0e0e0; border-radius: 8px; padding: 30px; margin-bottom: 40px; text-align: left; }
.reservation-info h3 { text-align: center; color: #333; padding-bottom: 20px; font-size: 1.3rem; border-bottom: 2px solid #007bff; }
.info-row { display: flex; justify-content: space-between; align-items: center; padding: 20px 0; border-bottom: 1px solid #e0e0e0; }
.info-row:last-child { border-bottom: none; margin: 0; padding: 20px 0 0 0; }
.info-label { font-weight: bold; color: #666; min-width: 120px; }
.info-value { color: #333; text-align: right; font-size: 1.1rem; }

/* 폼 스타일 */
.reservation-form { background: white; border: 1px solid #e0e0e0; border-radius: 8px; padding: 30px; margin-bottom: 30px; }
.form-section { margin-bottom: 40px; padding-bottom: 30px; border-bottom: 1px solid #f0f0f0; }
.form-section:last-child { border-bottom: none; margin-bottom: 0; }
.form-section h3 { color: #333; margin-bottom: 25px; font-size: 1.4rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
.form-group { position: relative; }
.form-group label { display: block; margin-bottom: 8px; color: #333; }
.form-group label.required::after { content: " *"; color: #dc3545; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: #007bff; box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1); }
.form-group input:focus + label, .form-group input:not(:placeholder-shown) + label, .form-group select:focus + label, .form-group select:not([value=""]) + label, .form-group select:valid + label, .form-group textarea:focus + label, .form-group textarea:not(:placeholder-shown) + label { top: 0; font-size: 12px; color: #007bff; font-weight: 600; transform: translateY(-50%); background: white; }
.form-group textarea { resize: vertical; min-height: 120px; }
.form-group .section-label { position: static !important; background: none !important; padding: 0 !important; transform: none !important; color: #333 !important; font-size: 16px !important; margin-bottom: 10px !important; display: block !important; font-weight: 600 !important; }
.form-group input:invalid, .form-group select:invalid, .form-group date:invalid, .form-group textarea:invalid { border-left: 4px solid #dc3545; background: #fff; height: 60px !important; }
.form-group select:valid, .form-group textarea:valid { height: 60px; }
.form-group select:required:invalid { border-color: #a7a7a7 !important; border-left: 4px solid #dc3545 !important; background: #fff !important; }
.form-group select:required:valid { border-color: #ddd !important; border-left: 4px solid #ddd !important; background: #fff !important; }
.form-group.error .error-message { display: block; }
.form-group.error input, .form-group.error select, .form-group.error textarea { border-color: #dc3545; border-left: 4px solid #dc3545; background: #fff5f5; box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.25); }

/* 플로팅 라벨 스타일 */
.floating-label-group { position: relative; }
.floating-label { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: #999; font-size: 1rem; pointer-events: none; transition: all 0.3s ease; background: white; padding: 0 5px; z-index: 8; }
.floating-label-group input, .floating-label-group select, .floating-label-group textarea, .floating-label-group input[type="date"], .floating-label-group input[type="time"] { width: 100%; padding: 12px 15px; border: 1px solid #ddd; border-radius: 5px; font-size: 1rem; transition: border-color 0.3s ease; box-sizing: border-box; background: transparent; position: relative; z-index: 1; height: 60px !important; }
.floating-label-group input:focus, .floating-label-group select:focus, .floating-label-group textarea:focus { outline: none; border-color: #007bff; box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25); }
.floating-label-group input:focus + .floating-label, .floating-label-group input:not(:placeholder-shown) + .floating-label, .floating-label-group select:focus + .floating-label, .floating-label-group select:not([value=""]) + .floating-label, .floating-label-group select:valid + .floating-label, .floating-label-group textarea:focus + .floating-label, .floating-label-group textarea:not(:placeholder-shown) + .floating-label { top: 0; font-size: 0.8rem; color: #007bff; font-weight: 600; transform: translateY(-50%); }
.floating-label-group textarea { resize: vertical; }
.floating-label-group input:invalid, .floating-label-group select:invalid, .floating-label-group textarea:invalid { border-color: #adadad; border-left: 4px solid #dc3545; height: 60px; }
.floating-label-group input:valid, .floating-label-group select:valid, .floating-label-group textarea:valid { border-color: #2867a7; text-align: left; border-left: 4px solid #2e6ba9; }
.floating-label-group input:invalid + .floating-label, .floating-label-group select:invalid + .floating-label, .floating-label-group textarea:invalid + .floating-label { color: #dc3545; }
.floating-label-group input:valid + .floating-label, .floating-label-group select:valid + .floating-label, .floating-label-group textarea:valid + .floating-label { color: #12385f; }
.error-message { color: #dc3545; font-size: 0.875rem; margin-top: 5px; display: none; }

/* 체크박스 그룹 */
.equipment-list { display: flex; flex-wrap: wrap;  gap: 15px; margin-top: 10px; }
.equipment-list label { height: 60px; display: flex; align-items: center; cursor: pointer; font-weight: normal; margin-bottom: 0; padding: 10px; border: 2px solid #ddd; border-radius: 8px; transition: all 0.3s ease; background: #f8f9fa; position: relative; }
.equipment-list label:hover { background: #e9ecef; border-color: #007bff; transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.1); }
.equipment-list input[type="checkbox"] { display: none; }
.equipment-list input[type="checkbox"]:checked + label { background: #007bff; color: white; border-color: #007bff; }
.equipment-list input[type="checkbox"]:checked + label::before { content: "✓"; position: absolute; right: 15px; top: 50%; transform: translateY(-50%); font-size: 18px; font-weight: bold; }

/* 파일 업로드 */
.file-upload { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.file-section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding-bottom: 5px; border-bottom: 2px solid #f0f0f0; }
.file-section-header h3 { margin: 0; color: #333; font-size: 1.4rem; font-weight: 600; }
.file-section-header h3 i { color: #007bff; margin-right: 8px; }
.file-count-badge { background: linear-gradient(135deg, #007bff, #0056b3); color: white; padding: 6px 12px; border-radius: 20px; font-size: 0.9rem; font-weight: 600; }
.file-upload-container { margin-bottom: 25px; }
.file-upload-area { border: 3px dashed #d1d5db; border-radius: 12px; padding: 40px 20px; text-align: center; background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer; position: relative; overflow: hidden; }
.file-upload-area::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(0, 123, 255, 0.1), transparent); transition: left 0.6s; }
.file-upload-area:hover { border-color: #007bff; background: linear-gradient(135deg, #e3f2fd 0%, #f0f8ff 100%); transform: translateY(-2px); box-shadow: 0 8px 25px rgba(0, 123, 255, 0.15); }
.file-upload-area:hover::before { left: 100%; }
.file-upload-area.dragover { border-color: #28a745; background: linear-gradient(135deg, #d4edda 0%, #e8f5e8 100%); transform: scale(1.02); box-shadow: 0 12px 30px rgba(40, 167, 69, 0.2); }
.upload-icon { margin-bottom: 20px; }
.upload-icon i { font-size: 3.5rem; color: #6c757d; transition: all 0.3s ease; }
.file-upload-area:hover .upload-icon i { color: #007bff; transform: scale(1.1); }
.upload-text h4 { color: #333; margin-bottom: 8px; font-size: 1.3rem; font-weight: 600; }
.upload-text p { color: #666; margin-bottom: 20px; font-size: 1rem; }
.upload-btn { background: linear-gradient(135deg, #007bff, #0056b3); color: white; border: none; padding: 12px 24px; border-radius: 25px; font-size: 1rem; font-weight: 600; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3); }
.upload-btn:hover { background: linear-gradient(135deg, #0056b3, #004085); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0, 123, 255, 0.4); }
.upload-btn i { margin-right: 8px; }
.file-info { display: flex; align-items: center; justify-content: center; margin-top: 15px; padding: 10px 15px; background: #f8f9fa; border-radius: 8px; font-size: 0.9rem; color: #6c757d; }
.file-info i { margin-right: 8px; color: #007bff; }
.file-list-container { margin-top: 25px; background: #ffffff; border: 1px solid #e9ecef; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); }
.file-list-header { background: linear-gradient(135deg, #f8f9fa, #e9ecef); padding: 15px 20px; border-bottom: 1px solid #dee2e6; }
.file-list-header h5 { margin: 0; color: #333; font-size: 1.1rem; font-weight: 600; }
.file-list-header h5 i { color: #007bff; margin-right: 8px; }
.file-list { padding: 0; }
.file-item { display: flex; align-items: center; padding: 15px 20px; border-bottom: 1px solid #f0f0f0; transition: all 0.3s ease; position: relative; }
.file-item:last-child { border-bottom: none; }
.file-item:hover { background: #f8f9fa; }
.file-icon { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 8px; margin-right: 15px; font-size: 1.2rem; }
.file-icon.pdf { background: #ffebee; color: #d32f2f; }
.file-icon.image { background: #e8f5e8; color: #2e7d32; }
.file-icon.archive { background: #fff3e0; color: #f57c00; }
.file-icon.default { background: #f5f5f5; color: #757575; }
.file-details { flex: 1; min-width: 0; }
.file-name { font-weight: 600; color: #333; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.file-date { font-size: 0.85rem; color: #6c757d; }
.file-actions { display: flex; gap: 8px; }
.delete-file-btn { background: #dc3545; color: white; border: none; padding: 8px 12px; border-radius: 6px; cursor: pointer; transition: all 0.3s ease; font-size: 0.85rem; }
.delete-file-btn:hover { background: #c82333; transform: translateY(-1px); box-shadow: 0 2px 8px rgba(220, 53, 69, 0.3); }
.empty-file-list { text-align: center; padding: 40px 20px; color: #6c757d; }
.empty-file-list i { font-size: 3rem; margin-bottom: 15px; color: #dee2e6; }
.empty-file-list h5 { margin-bottom: 8px; color: #495057; }
.empty-file-list p { margin: 0; font-size: 0.9rem; }

/* 라디오 그룹 */
.radio-group { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 25px; padding-bottom: 20px; }
.radio-group label { display: flex; align-items: center; cursor: pointer; font-weight: 500; margin-bottom: 0; padding: 15px 20px; background: white; border: 2px solid #e9ecef; border-radius: 10px; transition: all 0.3s ease; font-size: 14px; }
.radio-group label:hover { background: #e3f2fd; border-color: #007bff; color: #007bff; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 123, 255, 0.15); }
.radio-group input[type="radio"] { margin-right: 10px; width: 16px; height: 16px; accent-color: #007bff; }
.radio-group input[type="radio"]:checked + span { font-weight: 600; }
.radio-group label:has(input[type="radio"]:checked) { background: #007bff; border-color: #007bff; color: white; }

/* 요금 정보 */
.price-summary { background: #f8f9fa; border: 1px solid #e0e0e0; border-radius: 8px; padding: 25px; margin: 30px 0; }
.price-summary h4 { color: #333; font-size: 1.3rem; border-bottom: 2px solid #007bff; padding-bottom: 10px; }
.price-details { padding: 25px 0; border-bottom: 1px solid #e0e0e0; align-items: center; }
/* 1행: 기본요금 | 금액 */
.price-details-basic { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.price-details-basic #basePrice { text-align: right; flex-shrink: 0; }
/* 2·3행: 라벨 | 가운데 안내(센터) | 금액 */
.price-details-split {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr) max-content;
    align-items: center;
    column-gap: 20px;
    row-gap: 8px;
}
.price-details-split .price-row-note {
    text-align: center;
    justify-self: stretch;
    line-height: 1.45;
}
/* 추가요금·총요금 가운데 안내: 동일 본문 스타일 (폼/다크모드 등 범용 선택자와 구분) */
.price-summary .price-details-split #additionalPriceDescription,
.price-summary .price-details-split .price-total-disclaimer.price-disclaimer-text,
.price-details-split .price-disclaimer-text {
    color: #000000 !important;
    font-weight: normal !important;
    font-size: 16px !important;
}
.price-details-split .price-row-amount {
    text-align: right;
    white-space: nowrap;
    flex-shrink: 0;
}
.price-details-split .price-row-label {
    white-space: nowrap;
}
.price-details:last-child { border-bottom: none; margin: 0; }
.price-details.price-total { font-weight: bold; font-size: 1.2rem; color: #007bff; border-top: 2px solid #007bff; padding-top: 15px; }
.price-details.price-total .price-row-label,
.price-details.price-total .price-row-amount { color: #007bff; }
.form-actions { 
    display: flex !important; 
    justify-content: flex-end; 
    gap: 15px; 
    margin-top: 30px; 
    padding-top: 20px; 
    border-top: 1px solid #e0e0e0; 
    width: 100% !important; 
    align-items: flex-end; 
    margin-bottom: 0; 
    position: relative;
    padding-bottom: 80px; /* top 버튼과 겹치지 않도록 하단 여백 추가 */
    min-height: 50px;
    box-sizing: border-box;
}
.form-actions.list_title {
    display: flex !important;
    width: 100% !important;
    flex-direction: row !important;
    justify-content: flex-end !important;
    align-items: flex-end !important;
    margin-bottom: 100px !important; /* top 버튼과 겹치지 않도록 하단 여백 추가 */
}
.form-actions.list_title ul {
    position: relative !important;
    width: auto !important;
    display: flex !important;
    justify-content: flex-end !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    align-self: flex-end !important;
    margin-top: 0 !important;
}
.form-actions.list_title ul li {
    position: relative !important;
    right: auto !important;
    bottom: auto !important;
    margin: 0 !important;
}
.form-actions.list_title .next_btn,
.form-actions.list_title ul li .next_btn {
    position: relative !important;
    right: auto !important;
    bottom: auto !important;
    margin-bottom: 0 !important;
}

/* 알림 메시지 */
.alert { padding: 15px 20px; margin-bottom: 20px; border-radius: 5px; font-weight: 500; }
.alert-danger { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }
.alert-success { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }

/* 신청서 작성 — 임시점유 만료 타이머: 메뉴(#top_menu) 바로 아래 고정 + 콘텐츠 폭만큼만(가운데 정렬) */
.hold-countdown-flow-spacer {
    width: 100%;
    min-height: 52px;
    pointer-events: none;
    flex-shrink: 0;
}
.hold-countdown-bar-outer {
    position: fixed;
    left: 0;
    right: 0;
    /* 메뉴 하단선과 겹치지 않도록 살짝 내림 */
    top: calc(var(--phcf-hold-countdown-top, 92px) + var(--phcf-hold-countdown-menu-gap, 14px));
    z-index: 99;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 8px 16px 12px;
    pointer-events: none;
}
.hold-countdown-bar {
    pointer-events: auto;
    width: fit-content;
    max-width: min(720px, calc(100vw - 32px));
    margin: 0 !important;
    padding: 12px 20px;
    text-align: center;
    border-radius: 10px;
    border: 1px solid #f5d0dc;
    background: #ffe8f0;
    color: #7a1e4a;
    font-size: 14px;
    line-height: 1.5;
    font-weight: 500;
    box-shadow: 0 2px 12px rgba(180, 80, 120, 0.12);
}
.hold-countdown-bar #holdCountdownText.hold-countdown-text--urgent {
    color: #ff0000;
    font-size: 1.3em;
}
.hold-countdown-bar strong {
    color: #5c1538;
    font-weight: 700;
}
.hold-countdown-bar #holdCountdownText {
    font-weight: 800;
    font-size: 1.05em;
    color: #4a0f2e;
    letter-spacing: 0.02em;
    margin: 0 8px;
}
.hold-countdown-bar--expired {
    background: #f8d7da !important;
    color: #721c24 !important;
    border-color: #f5c6cb !important;
    box-shadow: 0 2px 10px rgba(114, 28, 36, 0.2) !important;
}
.hold-countdown-bar--expired #holdCountdownText {
    color: #ff0000 !important;
    font-size: 1.3em !important;
}
.loading { opacity: 0.6; pointer-events: none; }
.loading::after { content: ""; position: absolute; top: 50%; left: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; border: 2px solid #f3f3f3; border-top: 2px solid #007bff; border-radius: 50%; animation: spin 1s linear infinite; }

/* 예약 성공 페이지 스타일 */
.success-container { max-width: 600px; margin: 0 auto; padding: 40px 20px; text-align: center; }
.success-icon { width: 80px; height: 80px; background: #28a745; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 30px; font-size: 2.5rem; color: white; animation: successPulse 2s ease-in-out; position: relative; overflow: hidden; }
.success-icon::before { content: ''; position: absolute; top: 50%; left: 50%; width: 0; height: 0; background: rgba(255, 255, 255, 0.3); border-radius: 50%; transform: translate(-50%, -50%); animation: ripple 2s ease-out; }
.success-icon::after { content: ''; position: absolute; top: 50%; left: 50%; width: 0; height: 0; background: rgba(255, 255, 255, 0.2); border-radius: 50%; transform: translate(-50%, -50%); animation: ripple 2s ease-out 0.5s; }
.success-icon .checkmark { animation: checkmarkDraw 1s ease-in-out 0.5s both; }
.success-title { font-size: 2rem; color: #333; margin-bottom: 15px; animation: fadeInUp 1s ease-out 0.8s both; }
.success-message { font-size: 1.2rem; color: #666; margin-bottom: 40px; line-height: 1.6; animation: fadeInUp 1s ease-out 1s both; }
.reservation-number { background: #007bff; color: white; padding: 5px 15px; border-radius: 15px; font-weight: bold; font-size: 1.1rem; }
.status-badge { padding: 5px 15px; border-radius: 15px; font-weight: bold; font-size: 0.9rem; }
.status-pending { background: #fff3cd; color: #856404; }
.notice-box { background: #e7f3ff; border: 1px solid #b3d7ff; border-radius: 8px; padding: 20px; margin-top: 30px; text-align: left; animation: fadeInUp 1s ease-out 1.6s both; transition: transform 0.3s ease; }
.notice-box:hover { transform: translateY(-2px); }
.notice-box h4 { color: #0066cc; margin-bottom: 15px; }
.notice-box ul { margin: 0; padding-left: 20px; }
.notice-box li { margin-bottom: 8px; color: #333; line-height: 1.5; }
.list_title ul li button { background: #fff; cursor: pointer; white-space: nowrap; transition: 0.5s; letter-spacing: 2px; border: 1px solid #939393; width: 50px; height: 50px; border-radius: 30px; display: flex; align-items: center; justify-content: center; }
.list_title ul li button:hover { width: 100px; background: var(--primary-color); border: 1px solid var(--primary-color); font-weight: 300; }
.list_title ul li button::after { font-family: "Font Awesome 6 Free"; font-weight: 600; transform: translateX(2px); font-size: 20px; color: #444; }
.list_title ul li button:hover:after { transform: translateY(0) translateX(0); font-size: 20px; color: #fff; font-weight: 400; }
.list_title ul li button.next_btn::after { content: '\f061'; }
.list_title ul li button.next_btn:hover::after { content: '다음'; }
.list_title ul li button.period_closed_btn::after { content: '\f073'; }
.list_title ul li button.period_closed_btn:hover { width: 160px; }
.list_title ul li button.period_closed_btn:hover::after {
    content: '휴관일 지정';
    font-family: inherit, sans-serif;
    font-weight: 400;
    font-size: 13px;
    letter-spacing: 0;
}
.list_title ul li button[disabled='disabled'], .list_title ul li button[disabled] { opacity: 0.5; }

/* 시설 상세페이지 */
.facility-detail-header { text-align: center; margin-bottom: 40px; }
.facility-detail-header h1 { font-size: 2.5rem; color: #333; margin-bottom: 10px; }
.facility-detail-header p { font-size: 1.1rem; color: #666; }
.facility-detail-content { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-bottom: 40px; }
.facility-image-large { height: 400px; border-radius: 15px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.1); }
.facility-icon-large { font-size: 6rem; color: white; text-shadow: 0 2px 10px rgba(0,0,0,0.3); }
.facility-info-detail { background: white; padding: 30px; border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); }
.facility-title-large { font-size: 2rem; font-weight: 700; color: #333; margin-bottom: 15px; }
.facility-subtitle-large { color: #666; font-size: 1.2rem; margin-bottom: 30px; }
.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 30px; }
.info-item-detail { display: flex; align-items: center; padding: 15px; background: #f8f9fa; border-radius: 10px; }
.info-item-detail i { margin-right: 15px; font-size: 1.5rem; }
.info-item-detail span { font-size: 1.1rem; font-weight: 600; color: #333; }
.features-section { margin-bottom: 30px; }
.features-title { font-size: 1.3rem; font-weight: 600; color: #333; margin-bottom: 15px; }
.features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.feature-tag-large { background: #007bff; color: white; padding: 10px 15px; border-radius: 20px; font-size: 0.9rem; text-align: center; font-weight: 500; }
.btn-reserve-large, .btn-back { flex: 1; padding: 15px 30px; border: none; border-radius: 10px; font-weight: 600; text-decoration: none; text-align: center; transition: all 0.3s ease; cursor: pointer; font-size: 1.1rem; }
.btn-reserve-large { background: #007bff; color: white; }
.btn-reserve-large:hover { background: #0056b3; color: white; }
.btn-back { background: #6c757d; color: white; }
.btn-back:hover { background: #5a6268; color: white; }

/* 탭 스타일 */
.tab-container, .content-tabs-performance { display: flex; justify-content: center; border-bottom: 2px solid #ecf0f1; background: #ffffff; }
.tab-navigation { display: flex; background: #f8f9fa; border-bottom: 1px solid #e9ecef; }
.tab-button, .tab-btn-performance { padding: 1rem 4rem; background: none; border: none; font-size: 1.2rem; font-weight: 600; color: #000; cursor: pointer; transition: all 0.3s ease; border-bottom: 3px solid transparent; }
.tab-button.active, .tab-btn-performance.active { border-bottom-color: #000; }
.tab-content, .tab-content-performance { padding: 30px 0px; }
.tab-content, .tab-panel-performance { display: none; }
.tab-content.active, .tab-panel-performance.active { display: block; }
.content-section-performance h3 { color: #333; margin-bottom: 20px; font-size: 1.5rem; }
h4, .content-section-performance h4 { color: #555; margin-bottom: 15px; font-size: 1.2rem; }
p, .content-section-performance p { color: #666; line-height: 1.6; }
.equipment-table { width: 100%; border-collapse: collapse; margin: 20px 0; background: white; border-radius: 10px; overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
.equipment-table th { background: #000; color: white; padding: 15px; font-weight: 600; }
.equipment-table td { padding: 15px; border-bottom: 1px solid #e9ecef; }
.equipment-table tr:hover { background: #f8f9fa; }
.contact-info { background: #f8f9fa; padding: 20px; border-radius: 10px; margin: 20px 0; }
.contact-info h4 { color: #007bff; margin-bottom: 15px; }
.contact-item { display: flex; align-items: center; margin-bottom: 10px; }
.contact-item i { margin-right: 10px; color: #007bff; width: 20px; }

/* ===== Performance Detail 스타일 적용 ===== */
.facility-detail-container-performance { margin: 0 auto; max-width: 100%; position: relative; top: 0px; z-index: 8; }
.facility-detail-container-performance .facility-detail-container { overflow: hidden; }
.facility-header-performance { display: grid; grid-template-columns: 1.0fr 2.5fr; gap: 6rem; padding: 40px 80px; border-top: 1px solid #444444; margin-bottom: 20px; background-size: cover !important; position: relative; width: 100%; overflow: hidden; min-height: 600px; }
.facility-header-performance.bg-img { background: linear-gradient(rgb(0 0 0 / 82%), rgb(0 0 0 / 57%)), #000 no-repeat center; background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important; }
.facility-header-performance.bg-img[data-bg-image*="munhwaArtCenter"] { background-image: url('/resources/view/phcf/images/facilities/munhwaArtCenter.png'); }
.facility-header-performance.bg-img[data-bg-image*="daejamHall"] { background-image: url('/resources/view/phcf/images/facilities/daejamHall.png'); }
.facility-header-performance.bg-img[data-bg-image*="joongangArtHall"] { background-image: url('/resources/view/phcf/images/facilities/joongangArtHall.png'); }
.facility-header-performance.bg-img[data-bg-image*="guryongpo"] { background-image: url('/resources/view/phcf/images/facilities/guryongpo.png'); }
.facility-header-performance.bg-img[data-bg-image*="arko"] { background-image: url('/resources/view/phcf/images/facilities/arko.png'); }
.facility-header-performance.bg-img[data-bg-image*="guibigoShilla"] { background-image: url('/resources/view/phcf/images/facilities/guibigoShilla.png'); }
.facility-header-performance.bg-img[data-bg-image*="culture-factory"] { background-image: url('/resources/view/phcf/images/facilities/culture-factory.png'); }
.facility-header-performance.bg-img[data-bg-image*="SPACE298"] { background-image: url('/resources/view/phcf/images/facilities/SPACE298.jpg'); }
.facility-header-performance.bg-img[data-bg-image*="peerlounge"] { background-image: url('/resources/view/phcf/images/facilities/peerlounge.jpg'); }
.facility-header-performance.bg-img[data-bg-image*="support_space"] { background-image: url('/resources/view/phcf/images/facilities/support_space.jpg'); }
.facility-header-performance.bg-img::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-size: cover !important; background-position: center; background-repeat: no-repeat; filter: grayscale(50%) blur(0px) brightness(30%); z-index: -1; }
.facility-header-performance.bg-img[data-bg-image*="munhwaArtCenter"]::before { background-image: url('/resources/view/phcf/images/facilities/munhwaArtCenter.png'); }
.facility-header-performance.bg-img[data-bg-image*="daejamHall"]::before { background-image: url('/resources/view/phcf/images/facilities/daejamHall.png'); }
.facility-header-performance.bg-img[data-bg-image*="joongangArtHall"]::before { background-image: url('/resources/view/phcf/images/facilities/joongangArtHall.png'); }
.facility-header-performance.bg-img[data-bg-image*="guryongpo"]::before { background-image: url('/resources/view/phcf/images/facilities/guryongpo.png'); }
.facility-header-performance.bg-img[data-bg-image*="arko"]::before { background-image: url('/resources/view/phcf/images/facilities/arko.png'); }
.facility-header-performance.bg-img[data-bg-image*="guibigoShilla"]::before { background-image: url('/resources/view/phcf/images/facilities/guibigoShilla.png'); }
.facility-header-performance.bg-img[data-bg-image*="culture-factory"]::before { background-image: url('/resources/view/phcf/images/facilities/culture-factory.png'); }
.facility-header-performance.bg-img[data-bg-image*="SPACE298"]::before { background-image: url('/resources/view/phcf/images/facilities/SPACE298.jpg'); }
.facility-header-performance.bg-img[data-bg-image*="peerlounge"]::before { background-image: url('/resources/view/phcf/images/facilities/peerlounge.jpg'); }
.facility-header-performance.bg-img[data-bg-image*="support_space"]::before { background-image: url('/resources/view/phcf/images/facilities/support_space.jpg'); }
.facility-header-performance .facility-header-title { font-size: 2rem; font-weight: 700; padding-bottom: 10px; color: #fff; }
.facility-status, .facility-priority { position: absolute; top: 20px; right: 20px; padding: 8px 16px; border-radius: 20px; font-size: 0.8rem; font-weight: 600; color: #fff; text-transform: uppercase; z-index: 10; }
.facility-status.ongoing { background: #28a745; }
.facility-priority.featured { background: #ffc107; color: #000; top: 60px; }
.facility-subtitle { font-size: 1.0rem; margin: 5px 0px 20px 0px;opacity: 0.9; font-weight: 400; }
.facility-image-gallery { display: flex; flex-direction: column; gap: 1rem; }
.facility-main-image { width: 100%; min-height: 600px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.1); position: relative; }
.facility-main-image img { width: 100%; height: 100%; object-fit: cover; }
.facility-thumbnail-images { display: flex; gap: 0.5rem; }
.facility-thumbnail { object-fit: cover; width: 80px; height: 90px; border-radius: 0px; cursor: pointer; transition: all 0.3s ease; border: 2px solid transparent; }
.facility-thumbnail:hover { transform: scale(1.05); }
.facility-thumbnail.active { border-color: #007bff; }
.facility-info-summary { display: flex; flex-direction: column; gap: 1.0rem; color: #fff; }
.facility-category-container { display: flex; gap: 0.5rem; }
.facility-category { display: inline-block; padding: 6px 16px; background: #ecf0f1; color: #007bff; border-radius: 20px; font-size: 0.9rem; font-weight: 600; align-self: flex-start; }
.facility-field { display: inline-block; padding: 6px 16px; background: #007bff; color: #fff; border-radius: 20px; font-size: 0.9rem; font-weight: 600; align-self: flex-start; }
.facility-meta { display: flex; flex-wrap: wrap; flex-direction: column; gap: 1rem; }
.facility-meta-item { display: flex; flex-wrap: wrap; gap: 1.0rem; align-items: flex-start; }
.facility-meta-item i { width: 10px; color: #fff; font-size: 0.8rem; flex-shrink: 0; margin-top: 2px; opacity: 0.8; }
.facility-meta-item label { font-size: 0.8rem; font-weight: normal; color: #fff; min-width: 60px; opacity: 0.8; }
.facility-meta-item span { line-height: 1.4; color: #fff; }

/* 시설 액션 버튼 - Performance 스타일 */
.facility-actions-performance { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; gap: 1rem; margin-top: auto; }
.btn-primary-performance { padding: 12px 24px; background: transparent; color: #fff; border: 1px solid #fff; border-radius: 30px; font-size: 1rem; font-weight: 600; cursor: pointer; transition: all 0.3s ease; flex: 0.5; text-decoration: none; text-align: center; }
.btn-primary-performance:hover { transform: translateY(-2px); color: #fff; }
.btn-secondary-performance, .btn-share-performance { padding: 12px 30px; background: #ffffff; border: 2px solid #ecf0f1; border-radius: 30px; cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; gap: 0.5rem; text-decoration: none; font-weight: 600; }
.btn-secondary-performance:hover, .btn-share-performance:hover { background: #f8f9fa; }
.info-grid-performance { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem; margin: 2rem 0; }
.info-card-performance { background: #f8f9fa; padding: 1.5rem; border-radius: 10px; text-align: center; border: 1px solid #e9ecef; }
.info-card-performance h4 { font-size: 1.1rem; font-weight: 600; color: #333; margin-bottom: 0.5rem; }
.info-card-performance p { font-size: 1.2rem; font-weight: 700; color: #007bff; margin-bottom: 0.5rem; }
.info-card-performance small { font-size: 0.8rem; color: #666; }

/* 타임라인 - Performance 스타일 */
.schedule-timeline-performance { position: relative; padding-left: 2rem; margin: 2rem 0; }
.schedule-timeline-performance::before { content: ''; position: absolute; left: 24px; top: 0; bottom: 0; width: 2px; background: #000; }
.timeline-item-performance { position: relative; margin-bottom: 2rem; padding-left: 2rem; }
.timeline-item-performance::before { content: ''; position: absolute; left: -1rem; top: 0; width: 12px; height: 12px; background: #000; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 2px #000; }
.timeline-date-performance { font-size: 1.1rem; font-weight: 700; color: #007bff; margin-bottom: 0.5rem; }
.timeline-content-performance h4 { font-size: 1.2rem; font-weight: 600; color: #333; margin-bottom: 0.5rem; }
.timeline-content-performance p { color: #666; margin: 0; }

/* 신청 방법 - Performance 스타일 */
.apply-methods-performance { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem; margin: 2rem 0; }
.method-card-performance { background: #ffffff; border: 2px solid #ecf0f1; border-radius: 10px; padding: 2rem; text-align: center; transition: all 0.3s ease; }
.method-card-performance:hover { border-color: #007bff; transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0,0,0,0.1); }
.method-icon-performance { width: 60px; height: 60px; background: #ecf0f1; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; }
.method-icon-performance i { font-size: 1.5rem; color: #007bff; }
.method-card-performance h4 { font-size: 1.2rem; font-weight: 600; color: #333; margin-bottom: 0.5rem; }
.method-card-performance p { color: #666; margin-bottom: 1.5rem; }
.btn-apply-performance { padding: 10px 20px; background: #007bff; color: #ffffff; border: none; border-radius: 10px; font-size: 0.9rem; font-weight: 600; cursor: pointer; transition: all 0.3s ease; text-decoration: none; display: inline-block; }
.btn-apply-performance:hover { background: #0056b3; color: #ffffff; }
.notice-box-performance { background: #fff3cd; border: 1px solid #ffeaa7; border-radius: 10px; padding: 1.5rem; margin-bottom: 20px; }
.notice-box-performance ul { margin: 0; }
.notice-box-performance li { color: #856404; padding-left: 1.5rem; }
.notice-box-performance li::before { color: #f39c12; }

/* 시설 특징 테이블 스타일 */
.facility-features-table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
.facility-features-table td { padding: 15px 20px; border-bottom: 1px solid #f0f0f0; vertical-align: top; }
.facility-features-table tr:last-child td { border-bottom: none; }
.feature-label { background: #f8f9fa; font-weight: 600; color: #333; width: 30%; border-right: 1px solid #e9ecef; }
.feature-value { color: #666; line-height: 1.5; }
.facility-layout-table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
.facility-layout-table th, .facility-layout-table td { padding: 15px 20px; text-align: left; border-bottom: 1px solid #f0f0f0; }
.facility-layout-table th { background: #000; color: #fff; font-weight: 600; font-size: 0.95rem; }
.facility-layout-table tr:hover { background: #f8f9fa; }
.facility-layout-table tr:last-child td { border-bottom: none; }

/* 시설 그리드 및 카드 */
.facilities-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(20%, 1fr)); gap: 30px; margin-top: 40px; }

.facility-card { background: white; border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); overflow: hidden; transition: all 0.3s ease; border: 1px solid #e0e0e0; display: flex; flex-direction: column; text-decoration: none; color: inherit; cursor: pointer; }
.facility-card:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(0,0,0,0.15); }
.facility-card:visited { color: inherit; }
.facility-card:link { color: inherit; }
.facility-image { height: 350px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.facility-image-notice { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; margin: 0; padding: 12px 14px; box-sizing: border-box; background: linear-gradient(to top, rgba(0, 0, 0, 0.88), rgba(0, 0, 0, 0.55)); color: #fff; font-size: 0.82rem; font-weight: 500; line-height: 1.45; text-align: center; word-break: keep-all; }
.facility-icon { font-size: 4rem; color: white; text-shadow: 0 2px 10px rgba(0,0,0,0.3); }
.facility-content { padding: 25px;  display: flex; flex-direction: column; justify-content: space-between;}
.facility-title { font-size: 1.4rem; font-weight: 700; color: #333; margin-bottom: 8px; line-height: 1.3;     margin: 0rem 0px;border-bottom: 0px solid #ecf0f1;}
.facility-address { font-size: 0.95rem; color: #666; margin-top: 8px; margin-bottom: 0; line-height: 1.5; word-break: keep-all;}
.facility-info { margin-bottom: 20px; }
.info-item { display: flex; align-items: center; margin-bottom: 8px; font-size: 0.95rem; color: #555; }
.info-item i { margin-right: 10px; font-size: 0.8rem; }
.facility-features {height: 165px;  overflow: hidden;}
.features-list { display: flex; flex-wrap: wrap; gap: 6px; }
.feature-tag { background: #f8f9fa; color: #495057; padding: 4px 10px; border-radius: 15px; font-size: 0.8rem; border: 1px solid #e9ecef; }
.facility-actions { display: flex; gap: 10px; margin-top: auto; padding-top: 20px; }
.btn-detail { flex: 1; padding: 12px 20px; border: none; border-radius: 8px; font-weight: 600; text-decoration: none; text-align: center; transition: all 0.3s ease; cursor: pointer; background: #6c757d; color: white; }
.btn-detail:hover { background: #5a6268; color: white; }

/* Sub tabs (overview inner tabs) */
.subtabs { display: flex; gap: 10px; border-bottom: 2px solid #ecf0f1; margin: 16px 0; }
.subtab-btn { background: none; border: none; padding: 10px 16px; font-weight: 600; cursor: pointer; border-bottom: 3px solid transparent; }
.subtab-btn.active { border-bottom-color: #000; }
.subtab-panel { display: none; padding: 10px 0; }
.subtab-panel.active { display: block; }

/* Usage guide list styling */
.usage-guide { list-style: none; margin: 16px 0; padding: 0; }
.usage-guide li { display: flex; align-items: flex-start; gap: 10px; background: #f8f9fa; border: 1px solid #e9ecef; border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; transition: all .2s ease; }
.usage-guide li:hover { background: #eef4ff; border-color: #cfe0ff; box-shadow: 0 2px 10px rgba(0,0,0,0.05); }
.usage-guide li::before { content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900; color: #0d6efd; background: #e7f1ff; border-radius: 50%; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; flex-shrink: 0; }

/* 반응형 디자인 */
@media (max-width: 768px) { 
    .facility-actions{padding-top: 10px;}
    .btn-detail, .btn-reserve{font-size: 11px; padding: 7px;}
   .form-row { grid-template-columns: 1fr; gap: 15px; } 
   .file-upload-area { padding: 30px 15px; } 
   .upload-icon i { font-size: 2.5rem; } 
   .upload-text h4 { font-size: 1.1rem; } 
   .file-item { flex-direction: column; align-items: flex-start; gap: 10px; } 
   .file-details { width: 100%; } .file-actions { width: 100%; justify-content: flex-end; } 
   .time-btn { font-size: 0.8rem; padding: 10px 12px; width: 100%; } 
   .radio-group { flex-direction: column; gap: 10px; } 
   .radio-group label { padding: 12px 20px; font-size: 13px; } .reservation-form { padding: 10px; } .success-container { padding: 20px 10px; } .success-title { font-size: 1.5rem; } .success-message { font-size: 1rem; } .reservation-info { padding: 20px; } .info-row { flex-direction: column; align-items: flex-start; gap: 5px; } .info-value { text-align: left; } .action-buttons { flex-direction: column; } .btn { width: 100%; } .facility-detail-content { grid-template-columns: 1fr; gap: 20px; } .info-grid { grid-template-columns: 1fr; } 
   .tab-navigation { flex-direction: column; } .tab-button, .tab-btn-performance { text-align: left; flex: 1; min-width: 100px; padding: 0.8rem 0.5rem; font-size: 1rem; } 
   .facility-header-performance {display: flex;flex-direction: column;padding: 20px;  min-height: auto;  gap: 2rem; } 
   .content-tabs-performance { overflow-x: auto; gap: 0.5rem; justify-content: flex-start;} .tab-content-performance { padding: 1rem; } .info-grid-performance { grid-template-columns: 1fr; } .apply-methods-performance { grid-template-columns: 1fr; } .facility-features-table, .facility-layout-table { font-size: 0.9rem; } .facility-features-table td, .facility-layout-table th, .facility-layout-table td { padding: 12px 15px; } .facility-layout-table { display: block; overflow-x: auto; white-space: nowrap; } .usage-guide li { padding: 10px 12px; font-size: .95rem; } }
   .facility-main-image { min-height: auto;}
   .facility-features {height: auto;}
@media (max-width: 480px) { .content-tabs-performance { gap: 0rem; } .tab-button, .tab-btn-performance { padding: 0.6rem 0rem; } .tab-content, .tab-content-performance { padding: 0.8rem; } .equipment-list}

/* 이미지 모달 팝업 스타일 */
.image-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    display: none;
}

.image-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    cursor: pointer;
}

.image-modal-content {
    position: relative;
    width: 90%;
    max-width: 1200px;
    height: 90%;
    max-height: 90vh;
    margin: 5% auto;
    background: #000;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    z-index: 10001;
}

.image-modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    border-radius: 50%;
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    z-index: 10002;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.image-modal-close:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: rotate(90deg);
}

.image-modal-header {
    padding: 20px;
    background: rgba(0, 0, 0, 0.8);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 10002;
}

.image-modal-header h3 {
    color: #fff;
    margin: 0;
    font-size: 1.2rem;
    font-weight: 500;
}

.image-modal-counter {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
}

.image-modal-body {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.image-modal-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
}

.image-modal-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    border-radius: 50%;
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 10002;
}

.image-modal-nav:hover:not(.disabled) {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-50%) scale(1.1);
}

.image-modal-nav.disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.image-modal-prev {
    left: 20px;
}

.image-modal-next {
    right: 20px;
}


/* 화면 크기별 facilities-grid 컬럼 수 조정 */
@media (max-width: 1024px) {
    .facilities-grid {
      grid-template-columns: repeat(3, 1fr);
    }
  }
  
  @media (max-width: 820px) {
    .facilities-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  
@media (max-width: 768px) {
    .image-modal-content {
        width: 95%;
        height: 95%;
        margin: 2.5% auto;
    }
    
    .image-modal-header {
        padding: 15px;
    }
    
    .image-modal-header h3 {
        font-size: 1rem;
    }
    
    .image-modal-nav {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }
    
    .image-modal-prev {
        left: 10px;
    }
    
    .image-modal-next {
        right: 10px;
    }
    
    .image-modal-close {
        width: 35px;
        height: 35px;
        font-size: 18px;
        top: 10px;
        right: 10px;
    }
    .facilities-grid {grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 0; margin-bottom: 50px;}
    .facility-image{min-height: 150px; height: 150px;}
    .facility-image-notice { font-size: 0.72rem; padding: 8px 6px; line-height: 1.35; }
    .facility-content{padding: 20px 10px;}
    .facility-title{font-size: 1rem;}
    .facility-address{font-size: 0.8rem; margin-top: 0;}
}