@charset "utf-8";
/* 용인 수목장 서브 페이지 본문 (html/*.html 을 페이지 모듈에 붙여 넣어 사용) */

.yg-page {
	--yg-ink: #0f1718;
	--yg-green: #4b5e46;
	--yg-leaf: #9fd18b;
	--yg-line: #e4e5df;
	--yg-cream: #f7f6f1;
	font-family: 'SUITE Variable', SUITE, 'Pretendard Variable', Pretendard, 'Apple SD Gothic Neo', sans-serif;
	color: #555;
	word-break: keep-all;
}
.yg-page p { margin: 0; }
.yg-page a { text-decoration: none; }
.yg-page ul, .yg-page ol { list-style: none; margin: 0; padding: 0; }
.yg-p-block + .yg-p-block { margin-top: 120px; }
.yg-p-eyebrow, .yg-p-num, .yg-p-step b, .yg-p-chip, .yg-p-price-label, .yg-p-type em { font-family: 'Jost', 'SUITE Variable', sans-serif; }

/* 소개: 왼쪽 큰 제목, 오른쪽 설명 */
.yg-p-intro { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 60px; align-items: end; }
.yg-p-eyebrow { font-size: 14px; letter-spacing: .3em; color: var(--yg-green); }
.yg-p-title { margin: 14px 0 0; font-size: 44px; line-height: 1.25; font-weight: 300; letter-spacing: -.02em; color: var(--yg-ink); }
.yg-p-title strong { font-weight: 600; }
.yg-p-lead { font-size: 17px; line-height: 1.9; color: #444; }
.yg-p-head { margin-bottom: 48px; }
.yg-p-head.is-center { text-align: center; }
.yg-p-head .yg-p-title { font-size: 36px; }
.yg-p-head p.yg-p-desc { margin-top: 16px; font-size: 16px; line-height: 1.8; }

/* 넓은 이미지 */
.yg-p-figure { position: relative; margin: 60px 0 0; overflow: hidden; border-radius: 24px; aspect-ratio: 16 / 7; background: var(--yg-ink) center/cover no-repeat; }
.yg-p-chip { position: absolute; left: 28px; bottom: 28px; display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; border-radius: 30px; background: rgba(255,255,255,.9); color: var(--yg-ink); font-size: 13px; letter-spacing: .15em; }
.yg-p-chip:before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--yg-green); }

/* 번호 붙은 특징 */
.yg-p-points { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 0 40px; }
.yg-p-points.is-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.yg-p-points li { padding: 28px 0 0; border-top: 1px solid var(--yg-ink); }
.yg-p-num { font-size: 15px; letter-spacing: .1em; color: var(--yg-green); }
.yg-p-points h4 { margin: 18px 0 12px; font-size: 21px; font-weight: 600; color: var(--yg-ink); }
.yg-p-points p { font-size: 15px; line-height: 1.8; }

/* 이미지 + 글 나란히 */
.yg-p-split { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 70px; align-items: center; }
.yg-p-split.is-reverse > :first-child { order: 2; }
.yg-p-split-img { overflow: hidden; border-radius: 24px; aspect-ratio: 4 / 3; background: var(--yg-cream) center/cover no-repeat; }
.yg-p-split .yg-p-title { font-size: 34px; }
.yg-p-split .yg-p-lead { margin-top: 22px; }
.yg-p-check { margin-top: 26px !important; }
.yg-p-check li { position: relative; padding: 12px 0 12px 32px; border-bottom: 1px solid var(--yg-line); font-size: 15px; color: #333; }
.yg-p-check li i { position: absolute; left: 0; top: 11px; font-size: 18px; color: var(--yg-green); }

/* 상품 구성표 */
.yg-p-spec { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); border-top: 2px solid var(--yg-ink); }
.yg-p-spec div { display: grid; grid-template-columns: 130px minmax(0,1fr); gap: 20px; padding: 22px 8px; border-bottom: 1px solid var(--yg-line); }
.yg-p-spec dt { font-weight: 600; color: var(--yg-ink); }
.yg-p-spec dd { margin: 0; line-height: 1.7; }

/* 분양가 */
.yg-p-price { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; margin-top: 40px; padding: 36px 44px; border-radius: 24px; background: var(--yg-ink); color: rgba(255,255,255,.75); }
.yg-p-price-label { font-size: 13px; letter-spacing: .3em; color: var(--yg-leaf); }
.yg-p-price strong { display: block; margin-top: 8px; font-size: 34px; font-weight: 400; color: #fff; }
.yg-p-price p { max-width: 420px; font-size: 14px; line-height: 1.8; }

/* 유형 카드 (다른 페이지로 이동) */
.yg-p-types { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; }
.yg-p-type { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 340px; padding: 30px; overflow: hidden; border-radius: 22px; color: #fff !important; background: var(--yg-ink) center/cover no-repeat; }
.yg-p-type:before { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(15,23,24,.8), rgba(15,23,24,.05) 65%); transition: background .4s; }
.yg-p-type > * { position: relative; }
.yg-p-type em { font-style: normal; font-size: 13px; letter-spacing: .25em; opacity: .8; }
.yg-p-type h4 { margin: 8px 0 10px; font-size: 24px; font-weight: 500; color: #fff; }
.yg-p-type p { font-size: 14px; line-height: 1.7; opacity: .85; }
.yg-p-type i { position: absolute; right: 26px; top: 26px; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.2); font-size: 18px; transition: background .3s, color .3s, transform .3s; }
.yg-p-type:hover:before { background: linear-gradient(to top, rgba(15,23,24,.9), rgba(75,94,70,.35)); }
.yg-p-type:hover i { background: #fff; color: var(--yg-ink); transform: rotate(-45deg); }

/* 진행 순서 (가로 타임라인) */
.yg-p-steps { display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0,1fr)); gap: 16px; counter-reset: yg-step; }
.yg-p-step { position: relative; padding: 30px 24px; border-radius: 20px; background: var(--yg-cream); }
.yg-p-step b { display: block; font-size: 13px; font-weight: 500; letter-spacing: .2em; color: var(--yg-green); }
.yg-p-step h4 { margin: 14px 0 10px; font-size: 18px; font-weight: 600; color: var(--yg-ink); }
.yg-p-step p { font-size: 14px; line-height: 1.75; }
.yg-p-step:not(:last-child):after { content: '\F285'; position: absolute; right: -14px; top: 50%; z-index: 1; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin-top: -14px; border-radius: 50%; background: #fff; box-shadow: 0 4px 12px rgba(0,0,0,.08); font-family: 'bootstrap-icons'; font-size: 12px; color: var(--yg-ink); }

/* 표 */
.yg-p-table-wrap { overflow-x: auto; }
.yg-p-table { width: 100%; min-width: 640px; border-top: 2px solid var(--yg-ink); font-size: 15px; }
.yg-p-table th, .yg-p-table td { padding: 18px 16px; border-bottom: 1px solid var(--yg-line); vertical-align: middle; }
.yg-p-table thead th { background: var(--yg-cream); color: var(--yg-ink); font-weight: 600; text-align: center; }
.yg-p-table tbody th { background: #fbfbf8; color: var(--yg-ink); font-weight: 600; text-align: center; white-space: nowrap; }
.yg-p-table td.is-center { text-align: center; }

/* 자주 묻는 질문 */
.yg-p-faq details { border-bottom: 1px solid var(--yg-line); }
.yg-p-faq details:first-child { border-top: 2px solid var(--yg-ink); }
.yg-p-faq summary { position: relative; display: block; padding: 24px 56px 24px 44px; font-size: 17px; font-weight: 500; color: var(--yg-ink); cursor: pointer; list-style: none; }
.yg-p-faq summary::-webkit-details-marker { display: none; }
.yg-p-faq summary:before { content: 'Q'; position: absolute; left: 8px; top: 22px; font-family: 'Jost', sans-serif; font-size: 20px; color: var(--yg-green); }
.yg-p-faq summary:after { content: '\F4FE'; position: absolute; right: 12px; top: 24px; font-family: 'bootstrap-icons'; font-size: 18px; transition: transform .3s; }
.yg-p-faq details[open] summary:after { transform: rotate(45deg); }
.yg-p-faq details p { padding: 0 24px 26px 44px; font-size: 15px; line-height: 1.85; }

/* 안내 */
.yg-p-note { display: flex; gap: 16px; padding: 26px 30px; border-radius: 18px; background: var(--yg-cream); font-size: 14px; line-height: 1.85; }
.yg-p-note > i { flex: 0 0 auto; font-size: 20px; color: var(--yg-green); }
.yg-p-note strong { color: var(--yg-ink); }
.yg-p-note li { position: relative; padding-left: 12px; }
.yg-p-note li:before { content: ''; position: absolute; left: 0; top: .8em; width: 4px; height: 4px; border-radius: 50%; background: #999; }

/* 숫자 강조 */
.yg-p-stats { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); border-top: 1px solid var(--yg-line); border-bottom: 1px solid var(--yg-line); }
.yg-p-stats li { padding: 36px 20px; text-align: center; }
.yg-p-stats li + li { border-left: 1px solid var(--yg-line); }
.yg-p-stats strong { display: block; font-family: 'Jost', 'SUITE Variable', sans-serif; font-size: 40px; font-weight: 300; color: var(--yg-ink); }
.yg-p-stats span { display: block; margin-top: 6px; font-size: 14px; }

@media (max-width: 1199px) {
	.yg-p-block + .yg-p-block { margin-top: 90px; }
	.yg-p-intro, .yg-p-split { grid-template-columns: minmax(0,1fr); gap: 30px; }
	.yg-p-split.is-reverse > :first-child { order: 0; }
	.yg-p-points.is-4 { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 40px; }
	.yg-p-types { grid-template-columns: repeat(2, minmax(0,1fr)); }
	.yg-p-steps { grid-template-columns: repeat(2, minmax(0,1fr)); }
	.yg-p-step:after { display: none; }
	.yg-p-stats { grid-template-columns: repeat(2, minmax(0,1fr)); }
	.yg-p-stats li:nth-child(3) { border-left: 0; }
	.yg-p-stats li:nth-child(n+3) { border-top: 1px solid var(--yg-line); }
}
@media (max-width: 767px) {
	.yg-p-block + .yg-p-block { margin-top: 70px; }
	.yg-p-title { font-size: 30px; }
	.yg-p-head { margin-bottom: 32px; }
	.yg-p-head .yg-p-title, .yg-p-split .yg-p-title { font-size: 26px; }
	.yg-p-lead { font-size: 15px; }
	.yg-p-figure { margin-top: 36px; border-radius: 16px; aspect-ratio: 4 / 3; }
	.yg-p-chip { left: 16px; bottom: 16px; }
	.yg-p-points, .yg-p-points.is-4 { grid-template-columns: minmax(0,1fr); gap: 32px; }
	.yg-p-split-img { border-radius: 16px; }
	.yg-p-spec { grid-template-columns: minmax(0,1fr); }
	.yg-p-spec div { grid-template-columns: 96px minmax(0,1fr); gap: 12px; padding: 18px 4px; }
	.yg-p-price { padding: 28px 24px; border-radius: 18px; }
	.yg-p-price strong { font-size: 26px; }
	.yg-p-types { grid-template-columns: minmax(0,1fr); }
	.yg-p-type { min-height: 260px; }
	.yg-p-steps { grid-template-columns: minmax(0,1fr); }
	.yg-p-faq summary { padding: 20px 44px 20px 36px; font-size: 15px; }
	.yg-p-faq summary:before { left: 4px; top: 18px; }
	.yg-p-faq summary:after { top: 20px; }
	.yg-p-faq details p { padding: 0 8px 22px 36px; }
	.yg-p-note { padding: 22px 20px; }
	.yg-p-stats strong { font-size: 30px; }
}