@font-face{font-family:'DJ Sans';font-weight:400;font-display:swap;src:url(../fonts/djsans-400.woff) format('woff')}
@font-face{font-family:'DJ Sans';font-weight:500;font-display:swap;src:url(../fonts/djsans-500.woff) format('woff')}
@font-face{font-family:'DJ Sans';font-weight:700;font-display:swap;src:url(../fonts/djsans-700.woff) format('woff')}
@font-face{font-family:'DJ Sans';font-weight:900;font-display:swap;src:url(../fonts/djsans-900.woff) format('woff')}
:root{--blue:#1565C0;--blue2:#0D47A1;--navy:#0B2447;--ink:#15213A;--body:#3E4A5E;--muted:#6B778C;--line:#E3E8F0;--soft:#F3F7FC;--chip:#E6F0FB;--white:#fff}
*{box-sizing:border-box}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:'DJ Sans','Noto Sans KR','Apple SD Gothic Neo','Malgun Gothic',sans-serif;color:var(--ink);background:#fff;line-height:1.6;word-break:keep-all;overflow-wrap:anywhere}
img{display:block;max-width:100%}a{color:inherit;text-decoration:none}h1,h2,h3,p{margin:0}
h1{font-size:clamp(1.9rem,4.2vw,3.1rem);line-height:1.2;font-weight:900;letter-spacing:-.02em}
h2{font-size:clamp(1.45rem,2.6vw,2rem);line-height:1.25;font-weight:900;letter-spacing:-.02em}
h3{font-size:1.08rem;font-weight:700}
.wrap{width:min(1200px,100% - 40px);margin-inline:auto}
section{padding:72px 0}.soft{background:var(--soft)}
.sec-head{display:grid;gap:8px;margin-bottom:30px}.sec-head p{color:var(--muted)}
.eyebrow{font-size:.78rem;font-weight:800;letter-spacing:.14em;color:var(--blue);text-transform:uppercase}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:.95em 1.5em;border-radius:999px;font-weight:700;font-size:.98rem;border:1.5px solid transparent;transition:.2s;cursor:pointer;font-family:inherit}
.btn-blue{background:var(--blue);color:#fff}.btn-blue:hover{background:var(--blue2)}
.btn-white{background:#fff;color:var(--navy)}.btn-white:hover{background:#EAF2FC}
.btn-line{border-color:#C9D4E3;color:var(--navy);background:#fff}.btn-line:hover{border-color:var(--blue);color:var(--blue)}
.btn-ghost{border-color:rgba(255,255,255,.6);color:#fff}.btn-ghost:hover{background:rgba(255,255,255,.12)}
/* header */
.top{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:22px;height:66px}
.logo{display:flex;align-items:center;gap:9px;font-weight:900;font-size:1.22rem;color:var(--navy);letter-spacing:-.02em}
.logo .ymark{width:42px;height:42px;flex:none}
.logo .lw{display:grid;line-height:1.05}
.logo .lw b{font-size:1.28rem;font-weight:700;letter-spacing:.08em;color:var(--navy)}
.logo .lw small{font-size:.58rem;font-weight:500;letter-spacing:.32em;color:#5A8FC7;margin:3px 0 0 1px}
.logo small{font-weight:600;color:var(--blue);font-size:.86rem;margin-left:-2px}
.nav{display:flex;gap:4px;margin-left:auto}.nav a{padding:.5em .8em;border-radius:8px;font-weight:600;font-size:.93rem;color:var(--body)}
.nav a:hover,.nav a[aria-current]{color:var(--blue);background:var(--chip)}
.tel{display:inline-flex;align-items:center;gap:8px;background:var(--navy);color:#fff;padding:.6em 1.1em;border-radius:999px;font-weight:800;font-size:.95rem}
.burger{display:none;margin-left:auto;width:42px;height:42px;border:1px solid var(--line);border-radius:10px;background:#fff;cursor:pointer}
.burger span{display:block;width:18px;height:2px;background:var(--navy);margin:4px auto}
.mnav{display:none;border-top:1px solid var(--line);background:#fff}.mnav a{display:block;padding:14px 20px;border-bottom:1px solid var(--line);font-weight:600}
@media (max-width:980px){.nav,.top .tel{display:none}.burger{display:block}.mnav[hidden]{display:none}.mnav:not([hidden]){display:block}}
/* hero */
.hero{position:relative;min-height:min(78vh,720px);display:grid;align-items:end;color:#fff;overflow:hidden}
.hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 50%}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,36,71,.15) 0%,rgba(11,36,71,.55) 55%,rgba(11,36,71,.85) 100%)}
.hero .wrap{position:relative;z-index:1;padding:80px 0 56px;display:grid;gap:18px;max-width:1200px}
.hero p{font-size:clamp(1rem,1.6vw,1.2rem);color:rgba(255,255,255,.9);max-width:620px}
.hero .cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.stats{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.stats span{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);backdrop-filter:blur(6px);padding:.45em 1em;border-radius:999px;font-size:.86rem;font-weight:700}
.kicker{display:inline-flex;align-items:center;gap:8px;background:var(--blue);padding:.35em .9em;border-radius:999px;font-size:.8rem;font-weight:800;letter-spacing:.06em;width:max-content}
/* 두 가지 약속 */
.promise{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.promise article{position:relative;border-radius:24px;overflow:hidden;min-height:420px;display:grid;align-items:end;color:#fff}
.promise img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.promise .t{position:relative;z-index:1;padding:30px;background:linear-gradient(180deg,rgba(11,36,71,0),rgba(11,36,71,.9) 60%);display:grid;gap:12px}
.promise h3{font-size:1.5rem;font-weight:900}.promise .t p{color:rgba(255,255,255,.88)}
.promise ul{margin:0;padding:0;list-style:none;display:grid;gap:5px;font-size:.94rem}
.promise li::before{content:"✓";color:#8FC4FF;font-weight:900;margin-right:8px}
.promise .num{font-size:.8rem;font-weight:800;letter-spacing:.12em;color:#8FC4FF}
@media (max-width:800px){.promise{grid-template-columns:1fr}.promise article{min-height:340px}}
/* 사진 그리드 */
.gal{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:220px;gap:12px}
.gal a{position:relative;border-radius:16px;overflow:hidden;background:#dde}
.gal img{width:100%;height:100%;object-fit:cover;transition:transform .5s}.gal a:hover img{transform:scale(1.04)}
.gal a:nth-child(1),.gal a:nth-child(6){grid-column:span 2;grid-row:span 2}
.gal .cap{position:absolute;left:0;right:0;bottom:0;padding:34px 14px 12px;color:#fff;font-size:.86rem;font-weight:700;background:linear-gradient(180deg,transparent,rgba(0,0,0,.6))}
@media (max-width:900px){.gal{grid-template-columns:repeat(2,1fr);grid-auto-rows:180px}.gal a:nth-child(1),.gal a:nth-child(6){grid-column:span 2;grid-row:span 1}}
.pf-top{display:flex;justify-content:space-between;align-items:end;gap:16px;flex-wrap:wrap;margin-bottom:26px}
/* before after */
.ba{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ba figure{margin:0;position:relative;border-radius:20px;overflow:hidden;aspect-ratio:16/10}
.ba img{width:100%;height:100%;object-fit:cover}
.ba figcaption{position:absolute;left:14px;top:14px;padding:.4em 1em;border-radius:999px;font-weight:800;font-size:.85rem;background:#fff;color:var(--navy)}
.ba figure.af figcaption{background:var(--blue);color:#fff}
@media (max-width:700px){.ba{grid-template-columns:1fr}}
/* 공정 */
.proc{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.proc article{display:grid;gap:10px}
.proc figure{margin:0;border-radius:16px;overflow:hidden;aspect-ratio:1;position:relative}
.proc img{width:100%;height:100%;object-fit:cover}
.proc b{position:absolute;left:10px;top:10px;width:28px;height:28px;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center;font-size:.8rem}
.proc h3{font-size:.98rem}.proc p{font-size:.86rem;color:var(--muted)}
@media (max-width:980px){.proc{grid-template-columns:repeat(3,1fr)}}@media (max-width:560px){.proc{grid-template-columns:repeat(2,1fr)}}
/* 서비스 타일 */
.svc{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.svc a{position:relative;border-radius:20px;overflow:hidden;aspect-ratio:4/3;display:grid;align-items:end;color:#fff}
.svc img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s}.svc a:hover img{transform:scale(1.04)}
.svc .t{position:relative;z-index:1;padding:22px;background:linear-gradient(180deg,transparent,rgba(11,36,71,.85));display:grid;gap:4px}
.svc h3{font-size:1.25rem;font-weight:900}.svc p{font-size:.9rem;color:rgba(255,255,255,.85)}
@media (max-width:900px){.svc{grid-template-columns:1fr 1fr}}
/* 지역 */
.dongs{display:flex;flex-wrap:wrap;gap:8px}.dongs span{background:#fff;border:1px solid var(--line);padding:.5em 1em;border-radius:999px;font-weight:600;font-size:.92rem}
.split{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:center}
.split img{border-radius:22px;aspect-ratio:4/3;object-fit:cover;width:100%}
@media (max-width:860px){.split{grid-template-columns:1fr}}
/* 폼 */
.form{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form label{display:grid;gap:6px;font-size:.88rem;font-weight:700;color:var(--navy)}
.form input,.form select,.form textarea{font:inherit;padding:.85em 1em;border:1px solid #C9D4E3;border-radius:12px;background:#fff;width:100%}
.form textarea{min-height:110px;resize:vertical}.form .full{grid-column:1/-1}
.form .agree{grid-column:1/-1;display:grid;gap:8px;font-size:.86rem;font-weight:500;color:var(--body)}
.form .agree label{display:flex;gap:8px;align-items:center;font-weight:500}
.form .agree input{width:auto}
@media (max-width:640px){.form{grid-template-columns:1fr}}
.card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:30px}
.msg{margin-top:10px;font-weight:700;color:var(--blue)}
/* 하단 */
.final{background:var(--navy);color:#fff;text-align:center}
.final h2{color:#fff}.final p{color:rgba(255,255,255,.8);margin-top:10px}
.final .cta{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:24px}
footer{background:#071A36;color:rgba(255,255,255,.75);padding:40px 0;font-size:.88rem}
footer .wrap{display:grid;gap:14px}footer b{color:#fff}
footer nav{display:flex;flex-wrap:wrap;gap:14px}footer a:hover{color:#fff}
.fab{position:fixed;right:16px;bottom:16px;z-index:60;display:flex;flex-direction:column;gap:8px}
.fab a{display:flex;align-items:center;gap:8px;padding:.8em 1.2em;border-radius:999px;font-weight:800;box-shadow:0 10px 30px rgba(11,36,71,.25)}
.fab .call{background:var(--blue);color:#fff}.fab .est{background:#fff;color:var(--navy);border:1px solid var(--line)}
/* 내부 페이지 헤더 */
.phero{position:relative;color:#fff;padding:64px 0;overflow:hidden;background:var(--navy)}
.phero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.45}
.phero .wrap{position:relative;z-index:1;display:grid;gap:12px}
.phero p{color:rgba(255,255,255,.85);max-width:640px}
.crumb ol{list-style:none;margin:0;padding:0;display:flex;gap:8px;font-size:.84rem;color:rgba(255,255,255,.75)}
.crumb li+li::before{content:"›";margin-right:8px}
/* 포트폴리오 카드(사진 크게) */
.cases .case{border-radius:18px}.case figure{aspect-ratio:4/3}
.case .b{padding:16px 18px 18px;gap:6px}.case h3{font-size:1rem}
.case p{font-size:.86rem;color:var(--muted)}
/* 3 포인트 */
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.three article{background:#fff;border:1px solid var(--line);border-radius:20px;padding:26px;display:grid;gap:8px;align-content:start}
.three b.n{font-size:2rem;color:var(--blue);font-weight:900;line-height:1}
.three p{font-size:.92rem;color:var(--body)}
@media (max-width:800px){.three{grid-template-columns:1fr}}
/* 계산기 */
.calc{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.calc fieldset{border:0;padding:0;margin:0;display:grid;gap:10px}
.calc legend{font-weight:800;color:var(--navy);margin-bottom:6px}
.calc .opts{display:flex;flex-wrap:wrap;gap:8px}
.calc .opts label{border:1px solid #C9D4E3;border-radius:999px;padding:.5em 1em;cursor:pointer;font-weight:600;font-size:.92rem}
.calc .opts input{margin-right:6px}
.calc input[type=number]{font:inherit;padding:.8em 1em;border:1px solid #C9D4E3;border-radius:12px;width:160px}
.out{display:grid;gap:12px;background:var(--navy);color:#fff;border-radius:22px;padding:28px}
.out div{display:flex;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.15);padding-bottom:10px}
.out b{font-size:1.3rem}.out small{color:rgba(255,255,255,.7);font-size:.84rem}
@media (max-width:760px){.calc{grid-template-columns:1fr}}
.on-dark.final{padding:72px 0}
.notice{font-size:.84rem;color:var(--muted)}
@media (max-width:640px){
 section{padding:48px 0}.wrap{width:min(1200px,100% - 32px)}
 .hero{min-height:72vh}.hero .wrap{padding:56px 0 110px}
 h1{font-size:2rem}h2{font-size:1.4rem}
 .btn-xl{font-size:1.05rem;padding:.95em 1.4em;width:100%}
 .stats span{font-size:.78rem}
 .gal{grid-template-columns:1fr 1fr;grid-auto-rows:150px}
 .gal a:nth-child(1),.gal a:nth-child(6){grid-column:span 2;grid-row:span 1}
 .proc{grid-template-columns:repeat(3,1fr);gap:8px}.proc h3{font-size:.82rem}
 .svc{grid-template-columns:1fr 1fr;gap:10px}.svc .t{padding:12px}.svc h3{font-size:1rem}.svc p{display:none}
 .promise article{min-height:280px}.promise .t{padding:20px}.promise h3{font-size:1.2rem}
 .three article{padding:20px}
 .callbox{flex-direction:column;align-items:stretch;text-align:center}
 .guidebar{flex-direction:column;align-items:stretch;text-align:center}
 .tbl table{min-width:420px;font-size:.85rem}
 .art p{font-size:.98rem}
 footer{padding-bottom:90px}
}
@media (max-width:400px){.gal{grid-auto-rows:130px}.proc{grid-template-columns:repeat(2,1fr)}}
.btn-xl{font-size:1.25rem;padding:1.05em 1.9em}
.guidebar{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.guidebar b{display:block;font-size:1.15rem;color:var(--navy)}.guidebar span{font-size:.9rem;color:var(--muted)}
.callbox{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.fab .call{font-size:1.05rem;padding:1em 1.5em}
@media (max-width:640px){.fab{left:12px;right:12px}.fab a{justify-content:center;width:100%}}

/* ===== 서비스 상세 ===== */
.svc-detail{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.svc-detail article{background:#fff;border:1px solid var(--line);border-radius:20px;padding:28px;display:grid;gap:10px;align-content:start}
.svc-detail h3{font-size:1.15rem}
.svc-detail p{color:var(--body);font-size:.93rem}
.svc-detail dl{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;margin:6px 0 0;font-size:.86rem}
.svc-detail dt{color:var(--blue);font-weight:700;white-space:nowrap}
.svc-detail dd{margin:0;color:var(--body)}
@media (max-width:1000px){.svc-detail{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.svc-detail{grid-template-columns:1fr}}
.tbl{overflow-x:auto;background:#fff;border:1px solid var(--line);border-radius:18px}
.tbl table{width:100%;border-collapse:collapse;font-size:.92rem;min-width:560px}
.tbl th,.tbl td{padding:14px 16px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.tbl th{background:var(--soft);color:var(--navy);font-weight:700}
.tbl tr:last-child td{border-bottom:0}
.steps6{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;counter-reset:s}
.steps6 article{background:#fff;border:1px solid var(--line);border-radius:18px;padding:24px;display:grid;gap:8px;align-content:start;counter-increment:s}
.steps6 article::before{content:"STEP " counter(s);font-size:.75rem;font-weight:800;letter-spacing:.12em;color:var(--blue)}
.steps6 h3{font-size:1.08rem}.steps6 p{font-size:.9rem;color:var(--body)}
@media (max-width:900px){.steps6{grid-template-columns:1fr 1fr}}@media (max-width:560px){.steps6{grid-template-columns:1fr}}
/* ===== 시공사례 ===== */
.chips-f{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.chips-f button{font:inherit;font-size:.88rem;font-weight:600;padding:.55em 1.1em;border-radius:999px;border:1px solid #D3D9E0;background:#fff;cursor:pointer;color:var(--ink)}
.chips-f button[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff}
.cases{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.case{background:#fff;border:1px solid var(--line);border-radius:20px;overflow:hidden;display:grid;grid-template-rows:auto 1fr}
.case figure{margin:0;position:relative;aspect-ratio:4/3}
.case figure img{width:100%;height:100%;object-fit:cover}
.case .pill{position:absolute;left:12px;top:12px;background:rgba(255,255,255,.95);font-size:.74rem;font-weight:700;padding:.3em .8em;border-radius:999px}
.case .b{padding:20px 22px 22px;display:grid;gap:10px;align-content:start}
.case h3{font-size:1.08rem}
.case .meta{display:flex;flex-wrap:wrap;gap:6px}
.case .meta span{font-size:.74rem;font-weight:700;padding:.3em .75em;border-radius:999px;background:var(--chip);color:var(--navy)}
.case dl{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;margin:0;font-size:.88rem}
.case dt{color:var(--blue);font-weight:700}.case dd{margin:0;color:var(--body)}
@media (max-width:1000px){.cases{grid-template-columns:1fr 1fr}}@media (max-width:600px){.cases{grid-template-columns:1fr}}
/* ===== 블로그 ===== */
.bsearch{display:flex;gap:8px;max-width:640px;margin-top:10px}
.bsearch input{flex:1;font:inherit;padding:.9em 1.1em;border-radius:999px;border:0;min-width:0}
.bcat{display:grid;gap:14px;margin-bottom:44px}
.bcat h2{font-size:1.35rem;display:flex;align-items:baseline;gap:10px}
.bcat h2 small{font-size:.85rem;color:var(--muted);font-weight:500}
.blist{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.blist a{display:grid;gap:6px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px 22px;transition:border-color .2s,transform .2s}
.blist a:hover{border-color:var(--blue);transform:translateY(-2px)}
.blist b{font-size:1.05rem;color:var(--ink)}
.blist span{font-size:.9rem;color:var(--muted)}
@media (max-width:760px){.blist{grid-template-columns:1fr}}
.art{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:48px;align-items:start}
.art .body{display:grid;gap:30px;min-width:0}
.art h2{font-size:1.45rem;line-height:1.35;padding-top:8px}
.art p{color:var(--body);font-size:1.02rem;line-height:1.85}
.art ul.li{margin:0;padding-left:20px;display:grid;gap:8px;color:var(--body)}
.sumbox{background:var(--soft);border:1px solid #D6E6F4;border-radius:18px;padding:24px 26px;display:grid;gap:10px}
.sumbox b{color:var(--navy)}
.sumbox ul{margin:0;padding-left:20px;display:grid;gap:6px}
.toc{position:sticky;top:96px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px;display:grid;gap:8px;font-size:.9rem}
.toc b{color:var(--navy)}
.toc a{color:var(--body)}.toc a:hover{color:var(--blue)}
.faqbox{display:grid;gap:12px}
.faqbox article{background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px 22px;display:grid;gap:8px}
.faqbox h3{font-size:1.02rem;display:flex;gap:8px}.faqbox h3::before{content:"Q";color:var(--blue);font-weight:900}
.ctabox{background:var(--navy);color:#fff;border-radius:22px;padding:30px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px}
.ctabox p{color:rgba(255,255,255,.8)!important}
.rel{display:grid;gap:10px}
.rel a{display:block;background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 18px;font-weight:700}
.rel a span{display:block;font-weight:400;font-size:.86rem;color:var(--muted);margin-top:4px}
.updated{font-size:.85rem;color:rgba(255,255,255,.7)}
@media (max-width:980px){.art{grid-template-columns:1fr}.toc{position:static}}
.hblog{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.hblog a{display:grid;gap:8px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px;align-content:start}
.hblog em{font-style:normal;font-size:.75rem;font-weight:700;color:var(--blue)}
.hblog b{font-size:1.05rem}.hblog span{font-size:.88rem;color:var(--muted)}
@media (max-width:900px){.hblog{grid-template-columns:1fr}}