/*-------------------------- 공통 페이지 헤더 ----------------------------*/
.page-head { max-width: var(--layout-width); width: calc(100% - var(--layout-flax-margin)); margin: 0 auto; padding: var(--gap-100) 0 var(--gap-60); }
.page-head .title-kr { font-size: var(--font-size-huge); font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; }

/*-------------------------- 건립개요 : 인사말 ----------------------------*/
.build-intro { background: var(--color-bright); color: var(--color-dark); }
.build-intro .inner-wrap { max-width: var(--layout-width); width: calc(100% - var(--layout-flax-margin)); margin: 0 auto; padding: var(--gap-140) 0; }

/* 그리드 레이아웃 */
.greeting-grid { display: grid; grid-template-columns: 400px 1fr; gap: var(--gap-60); align-items: start; }
.greet-aside { display: flex; flex-direction: column;}
.greet-step { font-size: var(--font-size-medium); font-weight: 900; color:#D2D8DF;}
.greet-title { font-size: var(--font-size-xxxlarge); font-weight: 700; color: var(--color-dark);  margin-top:-10px; }

/* 본문 */
.greet-body { max-width: 900px; margin-left: auto; }
.greet-body .headline { font-size: var(--font-size-xlarge); font-weight: 700; line-height: 1.4; }
.greet-body p { font-size: var(--font-size-medium); color: var(--color-font); margin-bottom: var(--gap-20); line-height: 1.4; }

/* 하단 이미지 (오른쪽 정렬) */
.hero-image { width: 100%; max-width: 900px; margin-left: auto; margin-top: var(--gap-80); transform-style: preserve-3d; transition: all 1.5s ease-in-out;}
.hero-image img { width: 100%; height: auto; display: block; }
.hero-image video{width: 100%; height: auto; display: block; border:1px solid #d6d6d6; }


@media (max-width: 1024px) { 
	.greeting-grid { grid-template-columns: 150px 1fr; gap: var(--gap-40); } 
}
@media (max-width: 768px) { 
	.page-head { padding: var(--gap-60) 0 var(--gap-40); } 
	.page-head .title-kr { font-size: var(--font-size-xxlarge); } 
	.greeting-grid { grid-template-columns: 1fr; gap: var(--gap-30); } 
}
@media (max-width: 420px) { 
	.greet-step { font-size: var(--font-size-small); } 
	.greet-title { font-size: var(--font-size-large); } 
	.greet-body .headline { font-size: var(--font-size-medium); } 
}


/*-------------------------- 비전·미션 ----------------------------*/
.vm-split { background: var(--color-bright); color: var(--color-dark); }
.vm-grid { display: grid; grid-template-columns: 1fr 1fr; }
.vm-panel { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: var(--gap-140) var(--gap-40); }
.vm-vision { background: var(--color-light-gray); }
.vm-mission { background: #E8DCCE; } /* 베이지 톤 */
.vm-title { font-size: var(--font-size-xxxlarge); font-weight: 800; line-height: 1.2; letter-spacing: 0.02em; margin-bottom: var(--gap-40); }
.vm-desc { font-size: var(--font-size-xlarge); line-height: 1.8; color: var(--color-dark); }


@media (max-width: 1024px) { .vm-panel { padding: var(--gap-80) var(--gap-30); } }
@media (max-width: 768px) { 
	.vm-grid { grid-template-columns: 1fr; } 
	.vm-title { font-size: var(--font-size-xxlarge); } 
}

/*-------------------------- 건립개요 : 개요표 ----------------------------*/
.build-overview { background: var(--color-bright); color: var(--color-dark); }
.build-overview .inner-wrap { max-width: var(--layout-width); width: calc(100% - var(--layout-flax-margin)); margin: 0 auto; padding: var(--gap-140) 0; }
.ov-grid { display: grid; grid-template-columns: 400px 1fr; gap: var(--gap-60); align-items: start; }
.ov-aside { display: flex; flex-direction: column; gap: var(--gap-10); }
.ov-step { font-size: var(--font-size-medium); font-weight: 900; color: #D2D8DF; }
.ov-title { font-size: var(--font-size-xxxlarge); font-weight: 700; color: var(--color-dark); margin-top: -10px; }
.ov-table { max-width: 900px; margin-left: auto; width: 100%; }
.ov-table .row { display: grid; grid-template-columns: 120px 1fr; align-items: center; gap: var(--gap-20); padding: var(--gap-15) 0; border-bottom: 1px solid var(--color-border); }
.ov-table .row:first-child { border-top: 1px solid var(--color-border); }
.ov-table .th { font-size: var(--font-size-medium); color: var(--color-dark); white-space: nowrap; font-weight: 500;}
.ov-table .td { font-size: var(--font-size-medium); color: var(--color-font); line-height: 1.7; word-break: keep-all; }

/*-------------------------- 반응형 ----------------------------*/
@media (max-width: 1024px) { 
	.ov-grid { grid-template-columns: 220px 1fr; gap: var(--gap-40); } 
	.ov-table .row { grid-template-columns: 110px 1fr; } }
@media (max-width: 768px) { .build-overview .inner-wrap { padding: var(--gap-80) 0 var(--gap-60); } 
	.ov-grid { grid-template-columns: 1fr; gap: var(--gap-30); } 
	.ov-table { max-width: 100%; margin-left: 0; } 
}
@media (max-width: 420px) { 
	.ov-title { font-size: var(--font-size-large); } 
	.ov-step { font-size: var(--font-size-small); } 
	.ov-table .row { grid-template-columns: 1fr; gap: var(--gap-5); } 
}
/*-------------------------- 건립의의 ----------------------------*/
.build-meaning { background: var(--color-bright); color: var(--color-dark); }
.build-meaning .inner-wrap { max-width: var(--layout-width); width: calc(100% - var(--layout-flax-margin)); margin: 0 auto; padding: var(--gap-140) 0; }
.meaning-grid { display: grid; grid-template-columns: 400px 1fr; gap: var(--gap-60); align-items: start; }
.meaning-aside { display: flex; flex-direction: column; }
.meaning-step { font-size: var(--font-size-medium); font-weight: 900; color: #D2D8DF; }
.meaning-title { font-size: var(--font-size-xxxlarge); font-weight: 700; color: var(--color-dark); margin-top: -10px; }

/* 본문 (오른쪽 정렬 폭 제한) */
.meaning-body { max-width: 900px; margin-left: auto; }
.meaning-headline { font-size: var(--font-size-xlarge); font-weight: 700; line-height: 1.5; color: var(--color-dark); margin-bottom: var(--gap-10); word-break: break-all; }
.meaning-desc { font-size: var(--font-size-medium); line-height: 1.8; color: var(--color-font); }

@media (max-width: 1024px) {
    .meaning-grid { grid-template-columns: 220px 1fr; gap: var(--gap-40); }
}

@media (max-width: 768px) {
    .meaning-grid { grid-template-columns: 1fr; gap: var(--gap-30); }
    .meaning-body { max-width: 100%; margin-left: 0; }
}

@media (max-width: 447px) {
	.meaning-headline > br{display:none;}
}

@media (max-width: 420px) {
    .meaning-title { font-size: var(--font-size-large); }
    .meaning-step { font-size: var(--font-size-small); }
    .meaning-headline { font-size: var(--font-size-large); line-height: 1.6; }
}