:root{--char:#0f1c33;--white:#fff;--por:#f2f5f9;--grout:#dde3ec;--muted:#5d686d;--on:#aeb9bd;--teal:#e85a05;--teal-d:#c94c02;--mint:#ffb07a;--soft:#fff1e8;color-scheme:light}
*{box-sizing:border-box}
body{margin:0;background:var(--white);color:var(--char);font:16px/1.7 "IBM Plex Sans KR","Apple SD Gothic Neo","Malgun Gothic",sans-serif;word-break:keep-all}
.wrap{max-width:1080px;margin:0 auto;padding-inline:20px}
h1,h2,h3{font-family:"Gothic A1","Apple SD Gothic Neo",sans-serif;line-height:1.3;margin:0;text-wrap:balance}
h2{font-size:clamp(1.4rem,3.2vw,1.9rem);margin-bottom:20px}
a{color:inherit}
section{padding-block:56px}
.alt{background:var(--por)}
.top{position:sticky;top:0;z-index:10;background:var(--white);border-bottom:1px solid var(--grout)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-block:10px;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:8px;text-decoration:none;font-family:"Gothic A1",sans-serif;font-size:1.25rem}
.mk{width:28px;height:28px;display:grid;grid-template-columns:1fr 1fr;gap:3px;background:var(--grout);border-radius:3px;overflow:hidden}
.mk i{background:var(--char)}.mk i:nth-child(4){background:var(--teal)}
.top nav{display:flex;gap:4px;overflow-x:auto}
.top nav a{text-decoration:none;padding:6px 12px;font-weight:600;white-space:nowrap}
.top nav a:hover{color:var(--teal)}
.btn{display:inline-flex;align-items:center;gap:6px;background:var(--teal);color:var(--white);text-decoration:none;font-weight:700;padding:11px 18px;border-radius:4px}
.btn:hover{background:var(--teal-d)}
.btn.line{background:transparent;border:1.5px solid rgba(255,255,255,.6)}
.btn.dark{background:var(--char)}
.top .btn{padding:8px 14px;font-size:.95rem}
@media(max-width:760px){.top nav{order:3;width:100%}.top>.wrap>.btn{display:none}}
.hero{background:var(--char);color:var(--white)}
.crumb{font-size:.85rem;color:var(--on);margin:0 0 12px}.crumb a{color:var(--on)}
.hero h1{font-size:clamp(1.8rem,4.6vw,2.8rem)}
.lead{color:var(--on);max-width:42em;margin:16px 0}
.lead strong{color:var(--mint)}
.kw{list-style:none;padding:0;margin:0 0 22px;display:flex;flex-wrap:wrap;gap:6px}
.kw li{font-size:.85rem;padding:4px 11px;border:1px solid rgba(255,255,255,.25);border-radius:999px}
.cta{display:flex;flex-wrap:wrap;gap:10px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.grid3 article{border:1px solid var(--grout);border-top:3px solid var(--teal);border-radius:4px;padding:20px}
.grid3 h3{font-size:1.1rem;margin-bottom:8px}.grid3 p{margin:0;color:var(--muted);font-size:.95rem}
.note{color:var(--muted);font-size:.9rem;margin-top:16px}
@media(max-width:760px){.grid3{grid-template-columns:1fr}}
.cases{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.cc{display:grid;gap:6px;text-decoration:none;background:var(--white);border:1px solid var(--grout);border-radius:4px;padding:8px 8px 14px}
.cc img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:3px;display:block}
.cc .cl{font-size:.8rem;color:var(--teal);font-weight:700;padding-inline:4px}
.cc b{padding-inline:4px;font-size:.98rem;line-height:1.4}
@media(max-width:760px){.cases{grid-template-columns:1fr}}
.more{margin-top:16px}.more a{color:var(--teal);font-weight:700}
.steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;counter-reset:s}
.steps li{border-top:3px solid var(--teal);padding-top:10px;color:var(--muted);font-size:.92rem;display:grid;gap:2px}
.steps b{color:var(--char);font-size:1.02rem}
@media(max-width:760px){.steps{grid-template-columns:1fr 1fr}}
.faq dt{font-weight:700;margin-top:16px}.faq dd{margin:4px 0 0;color:var(--muted)}
.near{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px}
.near a{display:block;text-decoration:none;padding:6px 12px;border:1px solid var(--grout);border-radius:4px;font-size:.92rem}
.near a:hover{border-color:var(--teal);color:var(--teal)}
.near.big{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
.near.big a{display:grid;gap:2px;padding:14px}.near.big span{font-size:.8rem;color:var(--muted)}
.gus{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;margin-bottom:36px}
.gus article{border:1px solid var(--grout);border-radius:4px;padding:18px}
.gus h3{font-size:1.1rem;margin-bottom:10px}.gus h3 a{text-decoration:none}.gus h3 a:hover{color:var(--teal)}
.gus ul{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:6px}
.gus li a{display:block;font-size:.86rem;padding:3px 10px;background:var(--por);border:1px solid var(--grout);border-radius:3px;text-decoration:none}
.gus li a:hover{color:var(--teal);border-color:var(--teal)}
footer{background:#121719;color:var(--on);padding:32px 0 100px;font-size:.88rem}footer b{color:var(--white)}
.callbar{position:fixed;left:0;right:0;bottom:0;display:none;gap:8px;padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));background:var(--white);border-top:1px solid var(--grout)}
.callbar .btn{flex:1;justify-content:center}
@media(max-width:760px){.callbar{display:flex}}
:focus-visible{outline:3px solid var(--teal);outline-offset:2px}

.hero{background:#0b2a5b}
.mk{background:#fff}.mk i{background:#0b2a5b}.mk i:nth-child(2){background:#ff6a13}.mk i:nth-child(4){background:#0b2a5b}
.tilecard{border-style:dashed!important}
.tg{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:5px}.tg li{font-size:.78rem;padding:2px 8px;border-radius:999px;background:#f2f5f9;color:#0b2a5b}
.logo b em{font-style:normal;color:#ff6a13}.logo-svg{flex:none}

/* v2 밝고 친근한 스타일 */
:root{--cream:#fff7ef;--peach:#ffe9db;--sky:#eaf3ff;--mint:#e6f6ef}
.top{border-bottom:0;box-shadow:0 4px 20px rgba(11,42,91,.06)}
.top nav a{border-radius:999px}.top nav a:hover{background:var(--peach)}
.btn{border-radius:999px;background:#ff6a13}
.btn:hover{background:#e85a05}
.hero{background:linear-gradient(160deg,#fff8f1 0%,#fff 55%,#eef5ff 100%)!important;color:#0f1c33}
.hero h1{color:#0b2a5b}
.crumb,.crumb a{color:#5b667a}
.lead{color:#5b667a}.lead strong{color:#e85a05}
.kw li{background:#fff;border:1px solid #dde3ec;color:#0f1c33}
.btn.line{background:#fff;color:#0b2a5b;border:1.5px solid #0b2a5b}
.btn.dark{background:#0b2a5b}
.alt{background:var(--cream)}
.grid3 article{border:0;border-radius:18px;box-shadow:0 4px 20px rgba(11,42,91,.07);background:#fff}
.grid3 article:nth-child(6n+1){border-top:5px solid var(--sky)}.grid3 article:nth-child(6n+2){border-top:5px solid var(--peach)}.grid3 article:nth-child(6n+3){border-top:5px solid #fff4cf}
.grid3 article:nth-child(6n+4){border-top:5px solid var(--mint)}.grid3 article:nth-child(6n+5){border-top:5px solid #f1ecff}.grid3 article:nth-child(6n+6){border-top:5px solid #e8eef6}
.tilecard{border-style:solid!important}
.tg li{background:var(--cream)}
.steps li{border-top:0;background:#fff;border-radius:18px;padding:16px;box-shadow:0 4px 16px rgba(11,42,91,.07)}
.steps li::before{counter-increment:s;content:counter(s);display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#ff6a13;color:#fff;font-weight:800;margin-bottom:6px}
.faq dt{background:#fff;border-radius:14px 14px 0 0;padding:12px 16px 4px;margin-top:12px}
.faq dt::before{content:"Q ";color:#e85a05}
.faq dd{background:#fff;border-radius:0 0 14px 14px;padding:0 16px 12px;margin:0;box-shadow:0 4px 14px rgba(11,42,91,.05)}
.near a{border-radius:999px;background:#fff}
.near a:hover{border-color:#ff6a13;color:#e85a05}
.near.big a{border-radius:16px}
footer{background:#0b2a5b}

/* 컬러 보강 */
.hero{background:radial-gradient(1000px 420px at 50% -10%,#ffc49c 0%,#ffe2cc 45%,#fff6ee 85%)!important}
.alt{background:#fff0e3}
.grid3 article:nth-child(6n+1){border-top-color:#9cc4ff}.grid3 article:nth-child(6n+2){border-top-color:#ffb27f}.grid3 article:nth-child(6n+3){border-top-color:#ffd65c}
.grid3 article:nth-child(6n+4){border-top-color:#7fd3a8}.grid3 article:nth-child(6n+5){border-top-color:#b9a6ff}.grid3 article:nth-child(6n+6){border-top-color:#9fb4d4}
.tg li{background:#ffe8d6}

/* 신뢰 컬러 */
.hero{background:linear-gradient(180deg,#d9e8fb 0%,#eef4fd 70%,#f7faff 100%)!important}
.alt{background:#eef4fb}
.grid3 article{border-top:5px solid #1f5fbf!important}
.tilecard{border-top-style:solid!important}
.tg li{background:#eef4fb}
.steps li::before{background:#1f5fbf}
.faq dt::before{color:#1f5fbf}
.lead strong{color:#1f5fbf}

/* 시공사례 갤러리 */
.jc-list{display:grid;gap:18px}
.jc{background:#fff;border-radius:18px;overflow:hidden;box-shadow:0 4px 18px rgba(11,42,91,.08);display:grid}
.jc-strip{display:flex;gap:4px;overflow-x:auto;scroll-snap-type:x mandatory;background:#0b2a5b;scrollbar-width:thin}
.jc-strip figure{flex:0 0 min(78%,320px);margin:0;position:relative;scroll-snap-align:start}
.jc-strip img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover}
.jc-strip figcaption{position:absolute;left:8px;top:8px;background:rgba(11,42,91,.88);color:#fff;font-size:.75rem;font-weight:700;padding:3px 8px;border-radius:6px}
.jc-body{padding:14px 18px 18px}
.jc-body h3{margin:4px 0 6px;font-size:1.08rem;color:#0b2a5b}
.jc-body p{margin:0 0 6px;font-size:.93rem;color:#4a5568}
.jc-meta{display:flex;gap:8px;align-items:center;font-weight:700;color:#c2410c!important;font-size:.85rem!important}
.jc-meta span{background:#0b2a5b;color:#fff;border-radius:5px;padding:2px 8px;font-size:.75rem}
.jc-tag{color:#0b2a5b!important;font-weight:600;font-size:.85rem!important}
@media(min-width:900px){.jc-strip figure{flex-basis:260px}}