@charset "utf-8";

.church-love-homepage-container {
	font-family: 'Noto Sans KR', sans-serif;
}

/* =============================================
   1. Hero Section
   canvas ref: top 0~650, width 1100px
============================================= */
.clh-hero {
	position: relative;
	width: 100%;
	height: 650px;
	margin: 0 auto;
	background-color: #4C4D56;
	z-index: 10;
	overflow: hidden;
}

/* Dark background (repeat pattern) - kept for internal layering if needed */
.clh-hero .hero-bg {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	margin: 0 auto;
	height: 592px;
	background-color: #4C4D56;
}

/* Top-right decoration image */
.clh-hero .hero-deco {
	position: absolute;
	top: 31px;
	left: 688px;
	width: 382px;
	height: 211px;
	display: block;
}

/* Main title */
.clh-hero .hero-title {
	position: absolute;
	top: 85px;
	left: 51px;
	width: 997px;
	font-family: '양진체', sans-serif;
	font-size: 54px;
	font-weight: normal;
	letter-spacing: 0;
	line-height: 1.6;
	color: #FFFFFF;
	text-align: center;
	text-shadow: 0 0 5px #000000;
	margin: 0;
}

.clh-hero .hero-title .title-blue {
	color: #84BBDE;
}

.clh-hero .hero-title .title-yellow {
	color: #FFB901;
	font-size: 76px;
}

/* Subtitle row wrapper (groups sub1 + sub2 side-by-side) */
.clh-hero .hero-sub-row {
	position: absolute;
	top: 186px;
	left: 42px;
	display: flex;
	align-items: flex-start;
}

/* Subtitle 1 (left, Nanum Brush Script) */
.clh-hero .hero-sub1 {
	width: 556px;
	max-width: 100%;
	font-family: 'Nanum Brush Script', cursive;
	font-size: 34px;
	font-weight: normal;
	letter-spacing: 0;
	line-height: 1.6;
	color: #FFF497;
	text-align: right;
	text-shadow: 0 0 2px #333333;
	margin: 0;
}

/* Subtitle 2 (right) */
.clh-hero .hero-sub2 {
	width: 429px;
	max-width: 100%;
	font-size: 18px;
	font-weight: normal;
	letter-spacing: 0;
	line-height: 1.6;
	color: #FFFFFF;
	text-align: left;
	text-shadow: 0 0 2px #333333;
	margin: 0;
	margin-left: 9px;
	/* 607 - (42 + 556) = 9px */
}

/* CMS screenshot - left panel */
.clh-hero .cms-left {
	position: absolute;
	top: 301px;
	left: 100px;
	width: 389px;
	height: 331px;
	background-image: url('../../images/build/church-love-homepage/boxBG_33359.png');
	background-repeat: no-repeat;
	background-position: left top;
	z-index: 1;
}

/* CMS screenshot - right panel */
.clh-hero .cms-right {
	position: absolute;
	top: 308px;
	left: 569px;
	width: 524px;
	height: 295px;
	background-image: url('../../images/build/church-love-homepage/boxBG_33360.png');
	background-repeat: no-repeat;
	background-position: left top;
	z-index: 2;
}

/* CMS screenshot - main overlay */
.clh-hero .cms-main {
	position: absolute;
	top: 266px;
	left: 192px;
	width: 719px;
	height: 357px;
	background-image: url('../../images/build/church-love-homepage/boxBG_33361.png');
	background-repeat: no-repeat;
	background-position: left top;
	z-index: 3;
}



/* =============================================
   2. Reasons Section (이유있는 선택 01~09)
   canvas ref: top 650~2550, width 1100px
   gray texture (boxBG_33352): left:30, width:1040
   white card: left:60, width:980, border-radius bottom 50px
   visible texture strips: 30px on each side of white card
============================================= */
.clh-reasons {
	width: 100%;
	/* Overlap with hero for seamless transition */
	padding: 0 0 60px;
	margin: 0 auto;
	box-sizing: border-box;
	background-color: #4C4D56;
	position: relative;
	z-index: 5;
}

.reasons-wrapper {
	background-color: #FFFFFF;
	border-radius: 50px;
	padding: 56px 40px 50px;
	margin: 0 30px;
}

.reason-item {
	display: flex;
	align-items: flex-start;
	gap: 20px;
	padding: 14px 0;
	border-bottom: 1px solid #D6D6D6;
}

.reason-item.reason-item-last {
	border-bottom: none;
}

.reason-left {
	flex: 1;
	min-width: 0;
}

.reason-meta {
	display: flex;
	align-items: flex-start;
	margin-bottom: 8px;
}

.reason-label {
	font-family: 'Noto Sans KR', sans-serif;
	font-size: 24px;
	font-weight: 600;
	letter-spacing: -1px;
	line-height: 1.6;
	color: #333333;
	margin-top: 3px;
}

.reason-num {
	font-size: 28px;
	font-weight: 600;
	letter-spacing: -1px;
	line-height: 1.6;
	color: #FF9C00;
	margin-left: 8px;
	margin-top: 0;
}

.reason-body {
	display: flex;
	align-items: flex-start;
}

.reason-text {
	flex: 1;
	min-width: 0;
}

.reason-h1,
.reason-h2 {
	display: flex;
	align-items: flex-start;
	font-family: 'Noto Sans KR', sans-serif;
	font-size: 18px;
	font-weight: 500;
	letter-spacing: -1px;
	line-height: 1.6;
	color: #333333;
	margin: 0;
}

.reason-h1::before,
.reason-h2::before {
	content: "";
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background-color: #555555;
	flex-shrink: 0;
	margin-right: 5px;
	margin-top: 6px;
}

.reason-desc {
	font-family: 'Noto Sans KR', sans-serif;
	font-size: 16px;
	font-weight: 400;
	letter-spacing: -1px;
	line-height: 1.6;
	color: #333333;
	margin: 4px 0 0 15px;
	/* Aligned with title text (bullet 10px + gap 5px) */
	word-break: keep-all;
}

.reason-img {
	flex-shrink: 0;
	width: 256px;
	height: 155px;
	background-repeat: no-repeat;
	background-position: right top;
	background-size: auto;
}

/* =============================================
   3. Cards Section (CHOICE / DESIGN / PRICE&DESIGN)
   canvas ref: top 2717~3074, width 1100px
   cards overlap: CHOICE left:213, DESIGN left:401, PRICE left:583
============================================= */
.clh-cards {
	width: 100%;
	margin: 0 auto;
	padding: 0 60px;
	box-sizing: border-box;
	background-color: #4C4D56;
}

.cards-inner {
	position: relative;
	height: 357px;
}

.card-item {
	position: absolute;
	width: 300px;
	height: 282px;
}

.card-choice {
	top: 13px;
	left: 153px;
	z-index: 1;
}

.card-design {
	top: 55px;
	left: 341px;
	z-index: 3;
}

.card-price {
	top: 0;
	left: 523px;
	z-index: 2;
}

.card-bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-position: center top;
	background-size: auto;
}

.card-en {
	position: absolute;
	width: 200px;
	left: 50px;
	top: 92px;
	font-family: 'Noto Sans KR', sans-serif;
	font-size: 36px;
	font-weight: 900;
	letter-spacing: -1px;
	line-height: 1.6;
	color: #222222;
	text-align: center;
	margin: 0;
}

.card-price .card-en {
	top: 100px;
	font-size: 22px;
}

.card-ko {
	position: absolute;
	width: 200px;
	left: 50px;
	top: 144px;
	font-family: 'Noto Sans KR', sans-serif;
	font-size: 18px;
	font-weight: 600;
	letter-spacing: -1px;
	line-height: 1.3;
	color: #555555;
	text-align: center;
	margin: 0;
}

.card-price .card-ko {
	top: 134px;
}

/* Decorative image overlapping cards (original: top:2846, left:161 → offset from section top 2717) */
.cards-deco {
	position: absolute;
	top: 129px;
	left: 101px;
	width: 198px;
	height: 142px;
	background-repeat: no-repeat;
	background-position: left top;
	background-size: auto;
}

/* Banner image (original: top:2943, left:80, width:900, height:131) */
.cards-banner {
	position: absolute;
	top: 226px;
	left: 20px;
	width: 900px;
	height: 131px;
	background-repeat: no-repeat;
	background-position: right top;
	background-size: auto;
}

/* =============================================
   4. Design Pledge Section
   canvas ref: top 3119~3337
============================================= */
.clh-design-pledge {
	width: 100%;
	margin: 30px auto 0;
	padding: 0 60px;
	/* Aligned with sections above (60px gutter) */
	box-sizing: border-box;
}

.section-heading {
	display: flex;
	align-items: center;
	margin-bottom: 12px;
}

.section-heading-bullet {
	display: inline-block;
	width: 10px;
	height: 10px;
	background-color: rgb(85, 86, 98);
	border-radius: 2px;
	flex-shrink: 0;
	margin-right: 7px;
}

.pledge-title {
	font-family: 'Noto Sans KR', sans-serif;
	font-size: 24px;
	font-weight: 500;
	letter-spacing: -1px;
	line-height: 1.4;
	color: #333333;
	margin: 0;
	word-break: keep-all;
}

.pledge-box {
	display: flex;
	align-items: flex-start;
	background-color: #F6F6F6;
	border: 1px solid #D9D9D9;
	padding: 14px 16px;
	box-sizing: border-box;
}

.pledge-list {
	list-style: none;
	padding: 0;
	margin: 0;
	flex: 1;
}

.pledge-list li {
	display: flex;
	align-items: flex-start;
	font-family: 'Noto Sans KR', sans-serif;
	font-size: 16px;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.4;
	color: #333333;
	padding: 4px 0;
	word-break: keep-all;
}

.pledge-list li::before {
	content: "✓";
	color: rgb(48, 124, 84);
	font-size: 14px;
	font-weight: 700;
	flex-shrink: 0;
	margin-right: 6px;
	margin-top: 1px;
}

/* =============================================
   5. 3-in-1 Section
   canvas ref: top 3326~3689
   green bordered box: border:3px solid #188A4F
============================================= */
.clh-3in1 {
	width: 100%;
	margin: 30px auto 0;
	padding: 0 60px;
	/* Aligned with sections above (60px gutter) */
	box-sizing: border-box;
}

.three-title {
	font-family: 'Noto Sans KR', sans-serif;
	font-size: 24px;
	font-weight: 500;
	letter-spacing: -1px;
	line-height: 1.4;
	color: #333333;
	margin: 0;
	word-break: keep-all;
}

.three-box {
	background-color: #F6F6F6;
	border: 3px solid #188A4F;
	padding: 10px 20px;
	box-sizing: border-box;
}

.three-item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 14px 0;
}

.three-item+.three-item {
	border-top: 1px solid #D9D9D9;
}

.three-circle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 27px;
	height: 27px;
	border-radius: 50%;
	background-color: #2E3140;
	font-family: 'Noto Sans KR', sans-serif;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1;
	color: #FFFFFF;
	flex-shrink: 0;
}

.three-text {
	flex: 1;
	min-width: 0;
}

.three-body {
	display: flex;
	align-items: flex-start;
	margin-top: 4px;
}

.three-body::before {
	content: "✓";
	color: rgb(48, 124, 84);
	font-size: 14px;
	font-weight: 700;
	flex-shrink: 0;
	margin-right: 6px;
	margin-top: 1px;
}

.three-h {
	font-family: 'Noto Sans KR', sans-serif;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.4;
	color: #333333;
	margin: 0 0 4px;
	word-break: keep-all;
}

.three-desc {
	font-family: 'Noto Sans KR', sans-serif;
	font-size: 16px;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.4;
	color: #333333;
	margin: 0;
	word-break: keep-all;
}

/* Per-item right image size overrides */
.reason-item:nth-child(1) .reason-img,
.reason-item:nth-child(2) .reason-img {
	height: 140px;
}

.reason-item:nth-child(3) .reason-img {
	width: 224px;
	height: 144px;
}

/* Responsive: 1200px */
@media screen and (max-width: 1100px) {

	/* Hero Section */
	.clh-hero {
		height: auto;
		overflow: visible;
		padding: 50px 30px;
		box-sizing: border-box;
	}

	.clh-hero .hero-bg,
	.clh-hero .hero-deco,
	.clh-hero .cms-left,
	.clh-hero .cms-right,
	.clh-hero .cms-main {
		display: none;
	}

	.clh-hero .hero-title {
		position: relative;
		top: auto;
		left: auto;
		width: 100%;
		font-size: 38px;
	}

	.clh-hero .hero-title .title-yellow {
		font-size: 48px;
	}

	.clh-hero .hero-sub-row {
		position: relative;
		top: auto;
		left: auto;
		flex-direction: column;
		margin-top: 30px;
		align-items: center;
	}

	.clh-hero .hero-sub1,
	.clh-hero .hero-sub2 {
		width: 100%;
		text-align: center;
		margin-left: 0;
	}

	/* Cards section */
	.clh-cards {
		display: none;
	}

	.clh-design-pledge {
		padding: 0;
	}

	.clh-3in1 {
		padding: 0;
	}
}

/* Responsive: 800px */
@media screen and (max-width: 800px) {
	.clh-hero .hero-title {
		font-size: 28px;
	}

	.clh-hero .hero-title .title-yellow {
		font-size: 34px;
	}

	/* Reasons Section */
	.reasons-wrapper {
		padding: 56px 20px 50px;
		margin: 0 16px;
	}

	.reason-item {
		flex-direction: column;
	}

	.reason-img {
		width: 100%;
		height: auto;
		min-height: 100px;
	}

	.reason-item:nth-child(3) .reason-img {
		width: 100%;
		height: auto;
	}
}