@charset "utf-8";
/* ==========================================================
	제작가이드 상세 (guide_*.asp) 공통 — 2026-09-30
	- 20개 가이드 상세 페이지가 공유. 페이지에는 내용만 둔다.
	- STEP 색 : .gd-area.s1(업체 선정·비용) / .s2(업종·구조 설계) / .s3(운영·발주 실무)
	- 기준 html 10px (1rem = 10px), 톤은 prix_guide.asp 와 동일
========================================================== */
/* 목차(.gd-toc) sticky 동작용 — #wrap 의 overflow:hidden 해제 (sticky 를 쓰는 PC 구간만) */
@media only screen and (min-width : 1281px){
	#wrap{overflow:visible;}
}
#container{max-width:100%; padding:7rem 0 0;}

.gd-area{
	--blue:#0066FF; --navy:#0b132b; --sky:#78d7ff; --lav:#b4c3eb; --line:#d8d8d8; --bg:#f3f8ff;
	--c:#bc955a; --ct:#603e2e;
	font-family:'Pretendard Variable', Pretendard, sans-serif; color:#000; word-break:keep-all;
}
.gd-area.s2{--c:#4f8b77; --ct:#2e5446;}
.gd-area.s3{--c:#4475ad; --ct:#28486e;}
.gd-area *{box-sizing:border-box;}
.gd-area img{max-width:100%; vertical-align:top;}
.gd-area .inConts{max-width:124rem;}
.gd-area [data-aos][data-aos-delay="0"].aos-animate{transition-delay:0s;}
.gd-area [data-aos][data-aos]{transition-property:opacity, transform, border-color, box-shadow, background-color, color;}
.gd-area [data-aos][data-aos].aos-animate[data-aos-delay="50"]{transition-delay:.05s, .05s, 0s, 0s, 0s, 0s;}
.gd-area [data-aos][data-aos].aos-animate[data-aos-delay="100"]{transition-delay:.1s, .1s, 0s, 0s, 0s, 0s;}

/* ---------- 상단 ---------- */
.gd-hero{padding:9rem 0 10rem; background-color:var(--navy); color:#fff; position:relative; overflow:hidden;}
.gd-hero:before{content:""; width:120rem; height:120rem; background:radial-gradient(closest-side, rgba(104,142,255,.35), rgba(104,142,255,0)); position:absolute; left:50%; top:-80rem; transform:translateX(-50%); pointer-events:none;}
.gd-hero .inConts{z-index:1;}
.gd-crumb{display:flex; flex-flow:row wrap; align-items:center; gap:.8rem; font-size:1.6rem; line-height:1.4; color:var(--lav);}
.gd-crumb a{color:var(--lav); transition:color .3s ease-out;}
.gd-crumb a:hover{color:#fff;}
.gd-crumb span[aria-hidden]{opacity:.5;}
.gd-eyebrow{margin-top:5rem; display:flex; flex-flow:row wrap; align-items:center; gap:1.2rem;}
.gd-eyebrow .num{padding:.8rem 1.8rem; background-color:var(--c); border-radius:999px; font-weight:700; font-size:1.6rem; line-height:1.2; color:#fff;}
.gd-eyebrow .step{font-size:1.8rem; line-height:1.4; color:var(--lav);}
.gd-hero h2{margin-top:2.4rem; font-weight:800; font-size:5.6rem; line-height:1.25; color:#fff;}
.gd-hero .lead{margin-top:2.4rem; max-width:90rem; font-size:2.2rem; line-height:3.4rem; color:#dfe6fb;}
.gd-meta{margin-top:3.2rem; display:flex; flex-flow:row wrap; gap:.8rem 2.4rem; font-size:1.6rem; line-height:1.4; color:var(--lav);}
.gd-meta b{font-weight:600; color:#fff;}

/* ---------- 본문 레이아웃 ---------- */
.gd-body{padding:10rem 0 14rem;}
.gd-body .inConts{display:grid; grid-template-columns:26rem minmax(0, 1fr); gap:7rem; align-items:start;}
.gd-toc{position:sticky; top:11rem; padding:3rem; background-color:#f7f9fb; border-radius:1rem;}
.gd-toc strong{font-weight:700; font-size:1.8rem; line-height:1.4; color:#000; display:block;}
.gd-toc ol{margin-top:1.6rem; counter-reset:toc;}
.gd-toc li{counter-increment:toc;}
.gd-toc li+li{margin-top:.4rem;}
.gd-toc a{padding:.6rem 0 .6rem 2.8rem; font-size:1.6rem; line-height:1.5; color:#555; display:block; position:relative; transition:color .3s ease-out;}
.gd-toc a:before{content:counter(toc, decimal-leading-zero); font-weight:700; font-size:1.3rem; color:var(--c); position:absolute; left:0; top:.9rem;}
.gd-toc a:hover,
.gd-toc a.on{color:#000; font-weight:600;}

.gd-main>section{scroll-margin-top:11rem;}
.gd-main>section+section{margin-top:9rem;}
.gd-main h3{font-weight:800; font-size:3.4rem; line-height:1.35; color:#000;}
.gd-main h3 em{font-style:normal; color:var(--blue);}
.gd-main .p{margin-top:2rem; font-size:1.9rem; line-height:3.2rem; color:#444;}
.gd-main .p+.p{margin-top:1.6rem;}
.gd-main .p strong{font-weight:700; color:#000;}

/* 한눈에 보는 답 */
.gd-answer{padding:4rem 4.5rem; background-color:var(--bg); border:1px solid rgba(0,62,156,.2); border-left:.6rem solid var(--blue); border-radius:1rem;}
.gd-answer .tit{font-weight:700; font-size:1.8rem; line-height:1.4; color:var(--blue);}
.gd-answer p{margin-top:1.4rem; font-weight:500; font-size:2.1rem; line-height:3.4rem; color:#10203f;}
.gd-answer ul{margin-top:2rem; display:flex; flex-flow:row wrap; gap:1rem;}
.gd-answer li{padding:.6rem 1.6rem; background-color:#fff; border:1px solid rgba(0,102,255,.3); border-radius:999px; font-size:1.6rem; line-height:1.5; color:#10203f;}

/* 체크포인트 카드 */
.gd-points{margin-top:4rem; display:flex; flex-flow:column nowrap; gap:2rem;}
.gd-points>li{padding:4rem 4.5rem 4rem 10rem; background-color:#fff; border:1px solid var(--line); border-radius:1rem; position:relative; transition:border-color .3s ease-out, box-shadow .3s ease-out;}
.gd-points>li:hover{border-color:var(--c); box-shadow:.5rem .5rem 2rem rgba(0,0,0,.08);}
.gd-points .n{width:5.2rem; height:5.2rem; background-color:var(--c); border-radius:.5rem 1.6rem .5rem 1.6rem; font-weight:700; font-size:2rem; line-height:1; color:#fff; display:flex; align-items:center; justify-content:center; position:absolute; left:3rem; top:3.6rem;}
.gd-points h4{font-weight:700; font-size:2.4rem; line-height:1.4; color:#000;}
.gd-points .why{margin-top:1.4rem; font-size:1.8rem; line-height:3rem; color:#555;}
.gd-points dl{margin-top:2rem; padding:2rem 2.4rem; background-color:#f7f9fb; border-radius:.8rem;}
.gd-points dt{font-weight:700; font-size:1.6rem; line-height:1.4; color:var(--ct);}
.gd-points dd{margin-top:.8rem; padding-left:1.6rem; font-size:1.7rem; line-height:2.8rem; color:#333; position:relative;}
.gd-points dd:before{content:""; width:.5rem; height:.5rem; background-color:var(--c); border-radius:50%; position:absolute; left:0; top:1.2rem;}
.gd-points .ask{margin-top:1.6rem; font-size:1.7rem; line-height:2.8rem; color:var(--blue);}
.gd-points .ask b{font-weight:700;}

/* 비교표 */
.gd-table{width:100%; margin-top:4rem; border-collapse:separate; border-spacing:0; table-layout:fixed;}
.gd-table col.c1{width:20%;}
.gd-table th,
.gd-table td{padding:2.2rem 1.8rem; font-size:1.7rem; line-height:2.7rem; text-align:left; vertical-align:top; border-bottom:1px solid var(--line);}
.gd-table thead th{padding:2rem 1.8rem; background-color:var(--c); border:0; font-weight:700; color:#fff;}
.gd-table thead th:first-child{border-radius:1rem 0 0 1rem;}
.gd-table thead th:last-child{border-radius:0 1rem 1rem 0;}
.gd-table tbody th{font-weight:700; color:#000;}
.gd-table tbody td{color:#444;}
.gd-table tbody tr{transition:background-color .3s ease-out;}
.gd-table tbody tr:hover{background-color:#fbf8f3;}
.gd-table tbody tr.pick th{color:var(--blue);}
.gd-note{margin-top:1.6rem; font-size:1.6rem; line-height:2.6rem; color:#777;}

/* 체크리스트 · 주의 신호 */
.gd-check{margin-top:4rem; display:grid; grid-template-columns:repeat(2, 1fr); gap:1.2rem 3rem;}
.gd-check li{padding:1.6rem 0 1.6rem 4rem; border-bottom:1px solid #eee; font-size:1.8rem; line-height:2.8rem; color:#222; position:relative;}
.gd-check li:before{content:""; width:2.2rem; height:2.2rem; background:url('/new/images/guide/ic_chk_circle.svg') no-repeat center/contain; position:absolute; left:0; top:1.9rem;}
.gd-warn{margin-top:4rem; padding:4rem 4.5rem; background-color:#fff7f2; border:1px solid #ffd9c2; border-radius:1rem;}
.gd-warn li{padding-left:3.4rem; font-size:1.8rem; line-height:3rem; color:#3a2a20; position:relative;}
.gd-warn li+li{margin-top:1.2rem;}
.gd-warn li:before{content:"!"; width:2.2rem; height:2.2rem; background-color:#ff5400; border-radius:50%; font-weight:800; font-size:1.4rem; line-height:2.2rem; color:#fff; text-align:center; position:absolute; left:0; top:.4rem;}

/* 프릭스 팁 */
.gd-tip{margin-top:4rem; padding:4rem 4.5rem; background-color:rgba(243,248,255,.6); border:1px solid rgba(0,62,156,.2); border-radius:1rem;}
.gd-tip dt{padding-left:3.4rem; font-weight:700; font-size:2.2rem; line-height:3rem; color:var(--blue); position:relative;}
.gd-tip dt:before{content:""; width:2.4rem; height:2.4rem; background:url('/new/images/guide/ic_tip.svg') no-repeat center/contain; position:absolute; left:0; top:.3rem;}
.gd-tip dd{margin-top:1.6rem; font-size:1.8rem; line-height:3rem; color:#3b4c62;}
.gd-tip dd a{color:var(--blue); font-weight:600; text-decoration:underline; text-underline-position:under;}

/* FAQ (details — 내용이 HTML 에 그대로 있어 검색·AI 가 읽음) */
.gd-faq{margin-top:4rem; border-top:1px solid #000;}
.gd-faq details{border-bottom:1px solid var(--line);}
.gd-faq summary{padding:2.6rem 6rem 2.6rem 5rem; font-weight:700; font-size:2rem; line-height:3rem; color:#000; list-style:none; cursor:pointer; position:relative; transition:color .3s ease-out;}
.gd-faq summary::-webkit-details-marker{display:none;}
.gd-faq summary:before{content:"Q"; font-weight:800; color:var(--blue); position:absolute; left:1rem; top:2.6rem;}
.gd-faq summary:after{content:""; width:1.2rem; height:1.2rem; border-right:2px solid #999; border-bottom:2px solid #999; position:absolute; right:2.4rem; top:3.2rem; transform:rotate(45deg); transition:transform .3s ease-out;}
.gd-faq details[open] summary:after{transform:rotate(-135deg); top:3.8rem;}
.gd-faq summary:hover{color:var(--blue);}
.gd-faq .a{padding:0 3rem 3rem 5rem; font-size:1.8rem; line-height:3rem; color:#444; position:relative;}
.gd-faq .a:before{content:"A"; font-weight:800; color:var(--c); position:absolute; left:1rem; top:0;}

/* 관련 가이드 */
.gd-related{margin-top:4rem; display:grid; grid-template-columns:repeat(2, 1fr); gap:2rem;}
.gd-related a{min-height:12rem; padding:3rem 6rem 3rem 3rem; background-color:#fff; border:1px solid var(--line); border-radius:1rem; display:flex; flex-flow:column nowrap; justify-content:center; gap:.8rem; position:relative; transition:border-color .3s ease-out, box-shadow .3s ease-out;}
.gd-related a:after{content:"\2192"; font-size:2.2rem; color:var(--c); position:absolute; right:3rem; top:50%; transform:translateY(-50%); transition:transform .3s ease-out;}
.gd-related a:hover{border-color:var(--c); box-shadow:.5rem .5rem 2rem rgba(0,0,0,.08);}
.gd-related a:hover:after{transform:translate(.6rem, -50%);}
.gd-related em{font-style:normal; font-weight:700; font-size:1.4rem; line-height:1.4; color:var(--c);}
.gd-related span{font-weight:700; font-size:1.9rem; line-height:1.45; color:#000;}

/* CTA */
.gd-cta{padding:10rem 0; background-color:var(--navy); text-align:center;}
.gd-cta h3{font-weight:800; font-size:4.4rem; line-height:1.3; color:#fff;}
.gd-cta h3 strong{font-weight:800; color:var(--sky);}
.gd-cta p{margin-top:2rem; font-size:2rem; line-height:3rem; color:var(--lav);}
.gd-cta .btns{margin-top:5rem; display:flex; flex-flow:row wrap; justify-content:center; gap:1rem;}
.gd-cta .btns a{height:6rem; padding:0 3rem; border:1px solid transparent; border-radius:.5rem; font-weight:700; font-size:1.8rem; line-height:1; color:#fff; display:inline-flex; align-items:center; justify-content:center; transition:all .3s ease-out;}
.gd-cta .btns .b1{background-color:var(--blue);}
.gd-cta .btns .b1:hover{background-color:#0052cc;}
.gd-cta .btns .b2{background-color:rgba(255,255,255,.05); border-color:rgba(255,255,255,.4);}
.gd-cta .btns .b2:hover{background-color:rgba(255,255,255,.15); border-color:#fff;}

/* ================= 반응형 ================= */
@media only screen and (max-width : 1280px){
	.gd-body .inConts{grid-template-columns:1fr; gap:5rem;}
	.gd-toc{position:static;}
	.gd-toc ol{display:grid; grid-template-columns:repeat(2, 1fr); column-gap:3rem;}
}
@media only screen and (max-width : 840px){
	/* html 6.5px 구간 */
	.gd-hero{padding:8rem 0 9rem;}
	.gd-hero h2{font-size:5rem;}
	.gd-hero .lead{font-size:2.6rem; line-height:4rem;}
	.gd-crumb,
	.gd-meta,
	.gd-eyebrow .step{font-size:2rem;}
	.gd-body{padding:8rem 0 10rem;}
	.gd-main h3{font-size:3.6rem;}
	.gd-main .p,
	.gd-points .why,
	.gd-points dd,
	.gd-points .ask,
	.gd-check li,
	.gd-warn li,
	.gd-tip dd,
	.gd-faq .a,
	.gd-toc a{font-size:2.4rem; line-height:3.8rem;}
	.gd-answer p{font-size:2.6rem; line-height:4rem;}
	.gd-answer li{font-size:2.2rem;}
	.gd-points>li{padding:10rem 3.5rem 3.5rem;}
	.gd-points .n{left:3.5rem; top:3rem;}
	.gd-points h4{font-size:2.8rem;}
	.gd-check{grid-template-columns:1fr;}
	.gd-related{grid-template-columns:1fr;}
	.gd-related span{font-size:2.4rem;}
	.gd-faq summary{font-size:2.5rem; line-height:3.6rem;}
	.gd-cta h3{font-size:4rem;}
	.gd-cta p{font-size:2.4rem; line-height:3.6rem;}

	/* 비교표 → 카드 */
	.gd-table,
	.gd-table tbody,
	.gd-table tr,
	.gd-table th,
	.gd-table td{display:block; width:100%;}
	.gd-table colgroup,
	.gd-table thead{display:none;}
	.gd-table tbody tr{margin-top:2rem; border:1px solid var(--line); border-radius:1rem; overflow:hidden;}
	.gd-table tbody tr:hover{background-color:transparent;}
	.gd-table tbody th{padding:2rem 2.4rem; background-color:var(--c); border:0; font-size:2.6rem; color:#fff;}
	.gd-table tbody tr.pick th{background-color:var(--blue); color:#fff;}
	.gd-table tbody td{padding:2rem 2.4rem; border-bottom:1px solid #eee; font-size:2.4rem; line-height:3.6rem;}
	.gd-table tbody td:last-child{border-bottom:0;}
	.gd-table tbody td:before{content:attr(data-label); margin-bottom:.6rem; font-weight:700; font-size:2rem; color:var(--ct); display:block;}
}
@media only screen and (max-width : 480px){
	.gd-hero h2{font-size:4.8rem;}
	.gd-toc ol{grid-template-columns:1fr;}
	.gd-toc a,
	.gd-main .p,
	.gd-points .why,
	.gd-points dd,
	.gd-points .ask,
	.gd-check li,
	.gd-warn li,
	.gd-tip dd,
	.gd-faq .a{font-size:2.8rem; line-height:4.4rem;}
	.gd-answer,
	.gd-warn,
	.gd-tip{padding:3.5rem 3rem;}
	.gd-answer p{font-size:2.9rem; line-height:4.5rem;}
	.gd-points h4{font-size:3.2rem;}
	.gd-faq summary{font-size:2.9rem; line-height:4.2rem;}
	.gd-cta .btns{flex-flow:column nowrap; align-items:stretch; padding:0 3rem;}
	.gd-cta .btns a{height:8rem; font-size:2.6rem;}
}
@media (prefers-reduced-motion: reduce){ .gd-area *{transition:none !important;} }