body {
	background-color: var(--bg-brand-color);
}

/* =======================================
   plan.css – 구독서비스 페이지
   ======================================= */

.plan-page {
	padding: 60px 16px 100px;
	box-sizing: border-box;
}

.plan-head {
	text-align: center;
	margin-bottom: 50px;
}

.plan-top-title {
	text-align: center;
	font-size: 36px;
	font-weight: 800;
	color: #1b2e2b;
	letter-spacing: -0.3px;
	margin: 28px 0 6px;
}

.plan-top-line {
	width: 90px;
	height: 4px;
	background: #00a793;
	border-radius: 4px;
	margin: 0 auto 32px;
}


.plan-head .sub-title {
	font-size: 18px;
	color: #888;
	margin-bottom: 8px;
}

.plan-head .main-title {
	font-size: 28px;
	font-weight: 600;
	color: #222;
	line-height: 1.4;
}

.plan-cards {
	display: flex;
	gap: 24px;
	justify-content: space-between;
	flex-wrap: wrap;
}

/* 카드 공통 */
.plan-card {
	flex: 1;
	min-width: 300px;
	border-radius: 20px;
	background: #fff;
	box-shadow: 0 12px 24px rgba(0,0,0,0.05);
	border: 1px solid #e5e9ee;
	padding: 32px 26px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	transition: transform .25s;
}

.plan-card:hover {
	transform: translateY(-8px);
}

/* 카드 상단 */
.plan-card-head {
	background: #b8e5df;
	color: #004c48;
	font-size: 20px;
	font-weight: 600;
	padding: 14px 20px;
	border-radius: 12px;
	text-align: center;
	margin-bottom: 20px;
}

.plan-card-head.mid { background: #c8e0f5; color: #16446c; }
.plan-card-head.pro { background: #ffd6b8; color: #8a4100; }

/* 가격 */
.price {
	font-size: 24px;
	font-weight: 700;
	margin-bottom: 12px;
	color: #222;
	text-align: center;
}

/* 큰 제목 */
.plan-title {
	font-size: 26px;
	font-weight: 700;
	text-align: center;
	color: #008073;
	margin-bottom: 26px;
}

/* 리스트 */
.plan-list {
	font-size: 15px;
	line-height: 1.7;
	color: #333;
	margin-bottom: 30px;
	padding-left: 18px;
}

.plan-list li {
	margin-bottom: 6px;
}

/* 하단 문구 */
.plan-bottom-msg {
	margin-top: auto;
	font-size: 14px;
	line-height: 1.6;
	background: #eef7f6;
	color: #004c48;
	padding: 15px 18px;
	border-radius: 12px;
	text-align: center;
}

.plan-foot-note {
	font-size: 12px;
	color: #777;
	margin-top: 14px;
	text-align: right;
}


.plan-bottom-btn {
	margin-top: 20px;
	padding: 10px 0;
	text-align: center;
	border-radius: 15px;
	background-color: var(--brand-line-color);
	color: #fff;
	font-size: 1.2rem;
	cursor: default;
}


/* 모바일 대응 */
@media (max-width: 900px) {
	.plan-cards {
		flex-direction: column;
		gap: 32px;
	}
}


/* =======================================
   상단 구독 프로세스 섹션 (Hero 스타일)
   ======================================= */

.plan-flow {
	margin: 0 auto 60px;
	padding: 70px 20px 80px;
	border-radius: 26px;
	background: linear-gradient(135deg, #f8fbfd 0%, #eef7f5 60%, #f8fbfc 100%);
	border: 1px solid #e4eaef;
	box-sizing: border-box;
	position: relative;
	overflow: hidden;

	margin-top: 50px;
}

/* 은은한 백그라운드 패턴 */
.plan-flow::after {
	content: "";
	position: absolute;
	right: -60px;
	top: -40px;
	width: 260px;
	height: 260px;
	background: radial-gradient(circle, rgba(0,171,160,0.13), rgba(0,171,160,0));
	border-radius: 50%;

}

.flow-head {
	text-align: center;
	margin-bottom: 48px;
	position: relative;
	z-index: 2;
}

.flow-sub {
	font-size: 15px;
	color: #666;
	margin-bottom: 8px;
}

.flow-title {
	font-size: 26px;
	font-weight: 700;
	color: #1a1a1a;
	line-height: 1.5;
}

/* 스텝 카드 컨테이너 */
.flow-steps {
	display: flex;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
	position: relative;
	z-index: 2;
}

/* 스텝 카드 */
.flow-step {
	flex: 1;
	min-width: 260px;
	background: #fff;
	border-radius: 20px;
	padding: 26px 22px;
	box-shadow: 0 10px 22px rgba(0,0,0,0.04);
	border: 1px solid #dde6eb;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	transition: transform .25s;
}

.flow-step:hover {
	transform: translateY(-6px);
}

/* 상단 숫자 라운드 아이콘 */
.step-icon {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	font-weight: 700;
	background: #00b0a4;
	color: #fff;
	margin-bottom: 14px;
	box-shadow: 0 6px 15px rgba(0,176,164,0.35);
}

/* 타이틀 */
.step-title {
	font-size: 18px;
	font-weight: 600;
	color: #111;
	margin-bottom: 10px;
}

/* 설명 */
.step-desc {
	font-size: 15px;
	line-height: 1.7;
	color: #444;
}

/* 반응형 */
@media (max-width: 900px) {

	.plan-flow {
		margin-top: 50px;
		padding: 50px 18px 60px;
		margin-bottom: 40px;
	}

	.flow-steps {
		flex-direction: column;
	}

	.flow-step {
		min-width: 100%;
	}
}


/* =======================================
   모바일 최적화 (구독서비스 페이지)
   ======================================= */
@media (max-width: 768px) {

	/* 전체 여백/스크롤 조정 */
	.plan-page {
		padding: 24px 10px 60px;
		box-sizing: border-box;
		overflow-x: hidden; /* 가로 스크롤 방지 */
	}

	/* 상단 타이틀 영역 */
	.plan-head {
		margin-bottom: 24px;
	}

	.plan-head .sub-title {
		font-size: 14px;
	}

	.plan-head .main-title {
		font-size: 22px;
		line-height: 1.5;
	}

	/* 구독 프로세스 박스(연한 초록 박스) */
	.plan-flow {
		margin: 30px auto 28px;
		padding: 24px 14px 30px;
		border-radius: 18px;
	}

	.flow-head {
		margin-bottom: 24px;
	}

	.flow-title {
		font-size: 18px;
	}

	.flow-steps {
		flex-direction: column;
		gap: 16px;
	}

	.flow-step {
		min-width: 100%;
		padding: 18px 14px 16px;
		border-radius: 16px;
	}

	.step-icon {
		width: 36px;
		height: 36px;
		font-size: 16px;
		margin-bottom: 10px;
	}

	.step-title {
		font-size: 15px;
	}

	.step-desc {
		font-size: 13px;
	}

	/* 플랜 카드 3개 영역 */
	.plan-cards {
		flex-direction: column;
		gap: 20px;
		margin: 0;
		padding: 0; /* 좌우 여백으로 인한 튀어나옴 방지 */
	}

	.plan-card {
		flex: none;
		width: 100%;
		min-width: 0;           /* 가로폭 강제 제한 */
		padding: 22px 16px 20px;
		border-radius: 18px;
		box-sizing: border-box;
	}

	.plan-card-head {
		font-size: 16px;
		padding: 10px 12px;
		margin-bottom: 16px;
	}

	.price {
		font-size: 20px;
	}

	.plan-title {
		font-size: 20px;
		margin-bottom: 18px;
	}

	.plan-list {
		font-size: 13px;
		margin-bottom: 22px;
	}

	.plan-bottom-msg {
		font-size: 13px;
		padding: 12px 12px;
	}
}

/* 아주 작은 모바일 (예: 360px 이하) */
@media (max-width: 480px) {
	.plan-page {
		padding-left: 8px;
		padding-right: 8px;
	}

	.plan-head .main-title {
		font-size: 20px;
	}
}