@charset "UTF-8";

/* ====== base ====== */
:root{
	--border:#2f2f2f;
	--bg:#ffffff;
	--soft:#eef0f7;
	--lav:#8c9ee6;
	--lav-deep:#6d86ec;
	--text:#111;
	--muted:#666;
	--danger:#c70000;
	--radius:10px;
}

*{box-sizing:border-box}
.checkup-wrap{
	display:grid;
	gap:22px;
	max-width:1280px;
	margin:0 auto;
	color:var(--text);
}

/* ====== row layout (badge + plus + card) ====== */
.program-row{
	display:grid;
	grid-template-columns: 140px 56px 1fr;
	align-items:stretch;
	gap:14px;
}

.addon-badge{
	background:#f4f5f9;
	border-radius:14px;
	display:flex;
	align-items:center;
	justify-content:center;
	text-align:center;
	color:#555;
	line-height:1.1;
	padding:14px;
}

.plus{
	display:flex;
	align-items:center;
	justify-content:center;
	font-size:34px;
	color:#777;
}

/* ====== card ====== */
.program-card{
	background:var(--bg);
	border:1px solid var(--border);
	border-radius:var(--radius);
	overflow:hidden;
}

.program-head{
	display:grid;
	grid-template-columns: 1fr auto;
	gap:10px;
	align-items:center;
	padding:14px 14px 12px;
	border-bottom:1px solid var(--border);
}

.program-title{
	background:var(--lav-deep);
	color:#fff;
	padding:10px 12px;
	border-radius:8px;  
	display:inline-flex;
	align-items:center;
	gap:8px;
}
.program-title .num{opacity:.95}

.program-price{
	text-align:right;
	font-size:14px;
	line-height:1.2;
}
.program-price b{font-size:16px}
.note{
	color:var(--danger);
	font-weight:700;
}

.program-body{padding:0}

/* ====== spec grid ====== */
.spec-grid{
	display:grid;
	grid-template-columns: 160px 1fr;
	min-height:1px;
}

.spec-left{
	background:var(--lav);
	border-right:1px solid var(--border);
	display:flex;
	align-items:center;
	justify-content:center;  
	padding:14px 10px;
	text-align:center;
}

.spec-right{padding:0}

.spec{
	margin:0;
}

.spec .row{
	display:grid;
	grid-template-columns: 170px 1fr;
	border-bottom:1px solid var(--border);
}
.spec dt, .spec dd{
	margin:0;
	padding:10px 10px;
	font-size:14px;
}
.spec dt{
	background:#f6f6fa;
	border-right:1px solid var(--border);
	text-align:center;
}
.spec dd{color:#222}

.desc{
	margin:0;
	padding:10px 10px;
	font-size:13px;
	color:#222;
	background:#fafafe;
	text-align:center;
}

/* compact rows (2~5번 같은 카드) */
.spec-grid.compact .spec .row{
	grid-template-columns: 130px 1fr;
}

/* ====== responsive ====== */
@media (max-width: 900px){
	.checkup-wrap{
		padding:18px;
	}
	.program-row{
		grid-template-columns: 120px 40px 1fr;
	}
	.spec .row{
		grid-template-columns: 140px 1fr;
	}
}

@media (max-width: 640px){
	.checkup-wrap{
		padding:18px;
	}
	.program-head{
		grid-template-columns: 1fr;
		text-align:left;
	}
	.program-price{ text-align:left; }

	/* badge + plus + card -> 세로 스택 */
	.program-row{
		grid-template-columns: 1fr;
	}
	.plus{ display:none; }

	.addon-badge{
		border-radius:12px;
	}

	/* spec left 컬럼도 위로 올림 */
	.spec-grid{
		grid-template-columns: 1fr;
	}
	.spec-left{
		border-right:none;
		border-bottom:1px solid var(--border);
		padding:10px 12px;
	}
	.spec .row{
		grid-template-columns: 1fr;
	}
	.spec dt{
		border-right:none;
		border-bottom:1px dashed #ddd;
	}
}