/* ── 팝업 카드 공통 ─────────────────────────────── */

.popup-card {
	aspect-ratio: 1 / 1;
	background-size: cover;
	background-position: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	padding: 10%;
	box-sizing: border-box;
	color: #fff;
	text-shadow: 0 0.15em 0.5em rgba(0, 0, 0, 0.5);
	word-break: keep-all;
	/* 카드(셀) 폭에 비례: 350px일 때 ≈28px, 폭이 줄면 글자도 같이 줄어듦 */
	font-size: 6cqw;
	font-family: "GangwonEduPowerExtraBold", "Pretendard", "Apple SD Gothic Neo", sans-serif;
}
/* 각 화면의 전역 `* { font-family }`(homepage layout_v2.css, parkGolf reservation_v2/common.css 등)가
   자식 <p>에 직접 박혀 .popup-card 상속을 덮으므로, 카드 텍스트는 항상 카드 폰트를 상속하도록 강제 */
.popup-card * { font-family: inherit; }
.popup-card p { margin: initial; }

/* 배경 이미지 위 가독성 오버레이. 다크(기본)=어둡게, 라이트=밝게. */
.popup-card::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.4);
	pointer-events: none;
	z-index: 0;
}
.popup-card.light::before {
	background: rgba(255, 255, 255, 0.45);
}
/* 텍스트는 오버레이 위로 */
.popup-card > * {
	position: relative;
	z-index: 1;
	filter: drop-shadow(2px 2px 2px black);
}

.popup-card .card-sub {
	font-size: 0.75em;
	font-weight: 600;
	margin-bottom: 0.2em;
	letter-spacing: -0.02em;
}
.popup-card .card-title {
	font-size: 1.4em;
	font-weight: 900;
	line-height: 1.25;
	margin-bottom: 0.3em;
}
.popup-card .card-highlight {
	font-size: 1.1em;
	font-weight: 800;
	line-height: 1.3;
}
.popup-card .card-date {
	font-size: 0.9em;
	font-weight: 700;
	margin-top: 0.4em;
}
.popup-card .card-desc {
	font-size: 0.65em;
	font-weight: 400;
	margin-top: 0.4em;
	line-height: 1.5;
	opacity: 0.9;
}
.popup-card .red { color: #ff3b3b; }
.popup-card .yellow { color: #ffd600; }
.popup-card .cyan { color: #00e5ff; }
.popup-card .green { color: #7cfc00; }
.popup-card .orange { color: #ff9100; }
.popup-card .gray { color: #ccc; }

/* 밝은 배경용 (light) */
.popup-card.light {
	color: #222;
	text-shadow: none;
}
.popup-card.light .card-highlight.green { color: #2e7d32; }
.popup-card.light .card-highlight.red { color: #d32f2f; }
.popup-card.light .card-date.red { color: #d32f2f; }

/* 시스템점검 카드 - 정보 영역 */
.popup-card .card-info-box {
	background: rgba(0, 20, 80, 0.6);
	border-radius: 0.8em;
	padding: 8% 6%;
	margin-top: 0.5em;
	width: 100%;
	text-align: center;
}
.popup-card .card-info-box dt {
	font-size: 0.6em;
	font-weight: 700;
	color: #ffd600;
	margin-top: 0.5em;
}
.popup-card .card-info-box dt:first-child { margin-top: 0; }
.popup-card .card-info-box dd {
	font-size: 0.65em;
	font-weight: 400;
	margin: 0.15em 0 0 0;
	line-height: 1.4;
}

/* ── 팝업 레이아웃 프리셋 ─────────────────────────── */

/* 레이아웃 프리셋: 정렬만 담당 (강조 색/크기는 input_key 클래스로 표현) */
/* layout-center = 기본값. .popup-card 기본 스타일(수직·수평 가운데)이 곧 center이므로 별도 규칙 없음 */

/* 좌측 정렬 */
.layout-left .popup-card { align-items: flex-start; text-align: left; }

/* 상단 정렬 */
.layout-top .popup-card { justify-content: flex-start; padding-top: 8%; }

/* ── 크기 강조 modifier (.lg) ───────────────────── */
/* input_key 값에 "lg" 클래스를 덧붙여 사용한다. 예: "card-title lg", "card-highlight lg red" */
.popup-card .card-sub.lg       { font-size: 1em; }
.popup-card .card-title.lg     { font-size: 1.85em; }
.popup-card .card-highlight.lg { font-size: 1.45em; }
.popup-card .card-date.lg      { font-size: 1.35em; }
.popup-card .card-desc.lg      { font-size: 0.85em; }