:root{--g:#123524;--g2:#1d4a33;--iv:#faf6ee;--iv2:#f1ebdd;--ink:#1c2620;--mut:#4b574f;--r:#b3202a;--r2:#8f1820;--ln:#d9d1bd}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--iv);color:var(--ink);font:17px/1.8 -apple-system,"Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",sans-serif;word-break:keep-all;overflow-wrap:break-word}
body.home,body.subpage{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
.wrap{width:100%;max-width:1120px;margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-999px;top:0;background:#fff;padding:8px 12px;z-index:99}.skip:focus{left:8px}
h1,h2,h3{font-family:"Noto Serif KR","Nanum Myeongjo","Batang",serif;line-height:1.35;margin:0 0 .5em;font-weight:700}
h2{font-size:clamp(1.55rem,4.6vw,2.1rem)}h3{font-size:1.15rem}
p{margin:0 0 1em}
/* header */
.hd{background:var(--g);color:#fff}
.hd-in{max-width:1120px;margin:0 auto;padding:12px 20px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 16px}
.brand{text-decoration:none;display:flex;align-items:baseline;gap:8px}
.brand .en{font-family:"Noto Serif KR","Batang",serif;font-size:1.2rem;font-weight:700;letter-spacing:.02em}.brand .ko{font-size:.85rem;opacity:.85}
.gnb{display:flex;gap:4px}
.gnb a{text-decoration:none;font-size:.95rem;padding:8px 10px;min-height:44px;display:inline-flex;align-items:center}
.gnb a:hover{text-decoration:underline}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 26px;background:var(--r);color:#fff;text-decoration:none;font-weight:700;font-size:1.05rem;border-radius:4px;border:2px solid var(--r)}
.btn:hover{background:var(--r2);border-color:var(--r2)}
.btn.ghost{background:transparent;color:var(--g);border-color:var(--g)}
.btn.ghost:hover{background:var(--g);color:#fff}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin:1.2em 0}
/* hero: 사진+SVG 설계선은 같은 프레임·같은 cover 크롭 */
.hero{background:var(--g);color:#fff}
.hero-pic{position:relative;aspect-ratio:4/3;overflow:hidden;background:#2b4a3a}
.hero-pic img,.hero-pic .wire{position:absolute;inset:0;width:100%;height:100%}
.hero-pic img{object-fit:cover;object-position:50% 50%}
.hero-pic img{filter:contrast(1.06) saturate(.9) brightness(.97)}
.hero-pic:after{content:"";position:absolute;inset:auto 0 0 0;height:38%;background:linear-gradient(0deg,rgba(10,32,21,.42),rgba(10,32,21,0));pointer-events:none}
.wire{pointer-events:none;z-index:1}
.wire .ln path,.wire .ln rect{fill:none;stroke:#cdeedd;stroke-width:1.3px;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-dasharray:4000;stroke-dashoffset:0;animation:draw 1.3s ease-out both}
.wire .dash path{fill:none;stroke:#cdeedd;stroke-width:1px;vector-effect:non-scaling-stroke;stroke-dasharray:5 7;opacity:.6;animation:fade 1.5s ease-out both}
.wire .ld path{fill:none;stroke:#cdeedd;stroke-width:1px;vector-effect:non-scaling-stroke;opacity:.9}
.wire .nd circle{fill:rgba(18,53,36,.85);stroke:#cdeedd;stroke-width:1.3px;vector-effect:non-scaling-stroke;r:40px}
.wire .nn text{fill:#e6f7ee;font:700 50px/1 sans-serif;text-anchor:middle;dominant-baseline:central}
.wire .lb,.wire .ld{display:none}
@keyframes draw{from{stroke-dashoffset:4000}to{stroke-dashoffset:0}}
@keyframes fade{from{opacity:0}to{opacity:.6}}
@keyframes spark{from{stroke-dashoffset:120}to{stroke-dashoffset:-20}}
.dpanel{position:absolute;z-index:2;right:8px;bottom:8px;max-width:62%;padding:7px 10px;background:rgba(14,43,29,.72);border:1px solid rgba(205,238,221,.4);color:#e6f7ee;pointer-events:none;font-size:12.5px;line-height:1.45}
.dpanel p{margin:0}.dt{font-weight:700;font-size:13px}.dc{opacity:.9;font-size:12px}
.dpanel ol{list-style:none;margin:2px 0;padding:0;display:flex;flex-wrap:wrap;gap:0 10px;counter-reset:d}
.dpanel li{counter-increment:d}.dpanel li:before{content:counter(d);display:inline-block;width:1.3em;height:1.3em;line-height:1.25em;margin-right:4px;text-align:center;border:1px solid #cdeedd;border-radius:50%;font-size:.8em}
.dflow{display:none;fill:none;stroke:#cdeedd;stroke-width:1.2;margin:2px 0}
.dflow .base{stroke-dasharray:3 4;opacity:.7}.dflow .spark{stroke:#fff;stroke-width:2;stroke-dasharray:14 400;stroke-dashoffset:120;animation:spark 4s ease-in-out 1.4s 1 both}
@media(prefers-reduced-motion:reduce){.wire .ln path,.wire .ln rect,.wire .dash path{animation:none}.dflow .spark{animation:none;display:none}}
.hero-tx{padding:24px 0 12px}
.berry{display:block;fill:none;stroke:#e5545c;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;margin-bottom:6px}
.hero h1{font-size:clamp(2.8rem,14vw,5.2rem);margin:0 0 .2em;line-height:1.15}
.lead{font-size:1.2rem;max-width:30em;margin:0 0 .3em}.lead2{font-size:1rem;opacity:.9;margin:0 0 1em}
.hero-note{border-top:1px solid rgba(213,236,180,.25);padding:10px 0 14px;font-size:.9rem;line-height:1.55;color:#dbe6df}
.hero-note p{margin:0 0 .35em}.key{list-style:none;margin:0;padding:0}.key li{margin:.1em 0}.key strong{color:#d5ecb4;margin-right:.4em}
.chain{display:inline-block;vertical-align:middle;fill:none;stroke:#d5ecb4;stroke-width:1.2}
@media(min-width:900px){
 .hero-stage{position:relative;min-height:clamp(480px,64vh,700px);display:flex;align-items:flex-end}
 .hero-pic{position:absolute;inset:0;aspect-ratio:auto}
 .hero-stage:before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(10,32,21,.86) 0%,rgba(10,32,21,.55) 38%,rgba(10,32,21,0) 62%)}
 .hero-tx{position:relative;z-index:2;width:100%;padding:60px 0 56px}
 .wire .ln rect{display:none}.wire .nd circle{r:17px}.wire .nn text{font-size:21px}.wire .lb,.wire .ld{display:block}
 .wire .lb text{fill:#e6f7ee;font:600 27px/1 sans-serif;paint-order:stroke;stroke:#0c2418;stroke-width:6px;stroke-linejoin:round}
 .dpanel{right:22px;bottom:22px;max-width:260px;padding:10px 14px;font-size:14px}.dt{font-size:15px}.dc{font-size:13px}
 .dpanel ol{display:block}.dpanel li{margin:1px 0}.dflow{display:block}
 .hero-note{font-size:.95rem}
}
/* sections */
.sec{padding:56px 0}
.sec.dark{background:var(--g);color:#fff}.sec.alt{background:var(--iv2)}
.sub{max-width:46em;color:var(--mut)}.dark .sub{color:#e2ece5}
.g3{display:grid;grid-template-columns:1fr;gap:24px;margin-top:24px}
.g2{display:grid;grid-template-columns:1fr;gap:24px;margin-top:24px}
@media(min-width:760px){.g3{grid-template-columns:repeat(3,1fr)}.g2{grid-template-columns:repeat(2,1fr)}}
figure{margin:0}
figure img{width:100%;aspect-ratio:4/3;object-fit:cover;background:#ddd}
figcaption{font-size:.9rem;color:var(--mut);padding:6px 0}.dark figcaption{color:#cfdcd3}
.card h3{margin:.5em 0 .3em}.card h3 a{text-decoration:none;border-bottom:2px solid var(--r)}
.card p{margin:0;font-size:.98rem}
.three{list-style:none;padding:0;margin:32px 0 0;display:grid;gap:14px;border-top:1px solid rgba(255,255,255,.25);padding-top:24px}
.three strong{display:block;font-size:1.1rem}
@media(min-width:760px){.three{grid-template-columns:repeat(3,1fr)}}
/* case */
.case{display:grid;gap:16px;margin-top:24px}
.case-sub{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.case-sub figure img{aspect-ratio:1/1}
@media(min-width:900px){.case{grid-template-columns:1.7fr 1fr;align-items:stretch}.case-main,.case-main figure{height:100%}.case-main figure{display:flex;flex-direction:column}.case-main figure img{flex:1;min-height:0;aspect-ratio:auto}.case-sub{grid-template-columns:1fr}.case-sub figure img{aspect-ratio:16/10}}
.more{margin-top:20px;font-weight:700}.more a{color:var(--r)}
.rh{margin-top:40px}
.regions{list-style:none;padding:0;margin:20px 0 0;display:grid;grid-template-columns:1fr;gap:24px}
.regions a{text-decoration:none;display:block}.regions img{aspect-ratio:4/3;object-fit:cover;width:100%}
.regions span{display:block;padding-top:8px;font-size:1rem;line-height:1.5}
@media(min-width:760px){.regions{grid-template-columns:repeat(2,1fr)}}
/* text sections */
.txt h3{margin-top:1.8em}
.list{padding-left:1.2em;margin:0 0 1em}.list li{margin:.35em 0}
.steps{padding-left:1.3em}.steps li{margin:.7em 0}.steps strong{display:block}
.note{background:#fff;border-left:4px solid var(--r);padding:12px 16px;font-size:.98rem}
.tblw{overflow-x:auto}
.tbl{width:100%;border-collapse:collapse;background:#fff;font-size:.98rem}
.tbl th,.tbl td{border:1px solid var(--ln);padding:12px 14px;text-align:left;vertical-align:top}
.tbl thead th{background:var(--g);color:#fff}.tbl tbody th{background:var(--iv2);white-space:nowrap}
@media(max-width:640px){
 .tbl thead{position:absolute;left:-9999px}
 .tbl,.tbl tbody,.tbl tr,.tbl th,.tbl td{display:block;width:100%}
 .tbl tr{border:1px solid var(--ln);margin-bottom:12px;background:#fff}
 .tbl th,.tbl td{border:0;border-bottom:1px solid var(--ln)}
 .tbl tbody th{background:var(--g);color:#fff;white-space:normal}
 .tbl td:before{content:attr(data-l);display:block;font-size:.82rem;font-weight:700;color:var(--r);margin-bottom:2px}
}
.faq .qa{border-top:1px solid var(--ln);padding:18px 0}.faq .qa:last-child{border-bottom:1px solid var(--ln)}
.faq h3{margin:0 0 .4em;font-size:1.1rem}.faq p{margin:0}
.dl{margin:0}.dl div{display:grid;grid-template-columns:6em 1fr;gap:8px;padding:8px 0;border-bottom:1px solid var(--ln)}.dl dt{font-weight:700}.dl dd{margin:0}
/* detail */
.detail{padding-top:20px}
.detail>.wrap:first-child{padding-bottom:12px}
.crumb{font-size:.9rem;color:var(--mut);margin:8px 0 18px}.crumb a{color:var(--g)}
.detail h1{font-size:clamp(1.9rem,6vw,2.8rem)}
.answer{font-size:1.1rem;border-left:4px solid var(--r);padding-left:16px;max-width:46em}
.detail .wrap>figure{margin:22px 0 0;max-width:900px}.detail .wrap>figure img{aspect-ratio:16/9}
.gal{display:grid;grid-template-columns:1fr;gap:18px;margin:20px 0}
@media(min-width:640px){.gal{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.gal{grid-template-columns:repeat(3,1fr)}}
.gal figure img{aspect-ratio:4/3}
.rel a{font-weight:700}
/* footer / cta bar */
.ft{background:#0d261a;color:#dbe6df;padding:28px 0;font-size:.92rem;line-height:1.7}.ft p{margin:.2em 0}.ft a{color:#fff}
.ctabar{position:fixed;left:0;right:0;bottom:0;z-index:50;background:rgba(250,246,238,.96);border-top:1px solid var(--ln);padding:10px 16px calc(10px + env(safe-area-inset-bottom))}
.ctabar .btn{display:flex;width:100%;max-width:520px;margin:0 auto}
@media(min-width:900px){.ctabar{display:none}body.home,body.subpage{padding-bottom:0}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

@media(max-width:759px){.g3.real{grid-template-columns:1fr 1fr;gap:16px}.g3.real .card:last-child{grid-column:1/-1}.g3.real .card p{font-size:1rem}.g3.real figure img{aspect-ratio:1/1}.g3.real .card:last-child figure img{aspect-ratio:16/9}}
.g3.real figure img{aspect-ratio:4/3}@media(max-width:759px){.g3.real figure img{aspect-ratio:1/1}.g3.real .card:last-child figure img{aspect-ratio:16/9}}

/* 모바일 압축: 내용은 유지하고 간격·배치만 줄임 */
@media(max-width:759px){
 body{line-height:1.65}
 .sec{padding:34px 0}.wrap{padding:0 16px}
 h2{margin-bottom:.35em}.sub{margin-bottom:.7em}
 .txt h3{margin-top:1.1em;margin-bottom:.3em}
 .g3,.g2{gap:16px;margin-top:14px}
 #system .g3{grid-template-columns:1fr 1fr}#system .g3 .card:last-child{grid-column:1/-1}
 #system .card p{font-size:1rem}#system figure img{aspect-ratio:1/1}#system .card:last-child figure img{aspect-ratio:16/9}
 .three{margin-top:16px;padding-top:14px;gap:8px}
 .regions{grid-template-columns:1fr 1fr;gap:12px}.regions span{font-size:1rem}
 .list li{margin:.2em 0}
 .steps{padding-left:1.2em;margin:.4em 0}.steps li{margin:.35em 0}.steps strong{display:inline;margin-right:.3em}
 .note{padding:8px 12px;font-size:1rem;margin:.6em 0}
 .faq .qa{padding:11px 0}.faq h3{font-size:1.02rem;margin-bottom:.25em}.faq p{font-size:1rem;line-height:1.6}
 .dl div{grid-template-columns:4.5em 1fr;padding:5px 0}
 .actions{margin:.8em 0;gap:8px}.btn{min-height:48px}
 .ft{padding:20px 0}
 .tbl tr{margin-bottom:8px;padding:8px 12px}
 .tbl th,.tbl td{border:0;padding:0;font-size:1rem}
 .tbl tbody th{background:none;color:var(--g);font-size:1.05rem;margin-bottom:2px}
 .tbl td{padding:1px 0}
 .tbl td:before{display:inline;margin:0 6px 0 0;font-size:.9rem}
}

@media(max-width:759px){
 body{line-height:1.55}
 .sec{padding:26px 0}h2{font-size:1.45rem}
 .hidem{display:none}
 .tbl,.tbl tbody{display:block}.tbl tr{display:block;border:0;border-bottom:1px solid var(--ln);background:none;margin:0;padding:7px 0}
 .tbl tbody th{display:inline;font-size:1rem;margin:0 6px 0 0}.tbl tbody th:after{content:" ·"}
 .tbl td{display:inline;font-size:1rem}.tbl td:before{display:none}
 .tbl td:nth-of-type(2):before{content:"(준비: ";display:inline;color:var(--r);font-size:.95rem;margin:0}.tbl td:nth-of-type(2):after{content:")";color:var(--r)}
 .tbl td:nth-of-type(2){display:block;margin-top:1px}
 .txt h3{margin-top:.9em}.steps li{margin:.25em 0}.faq .qa{padding:8px 0}.faq p{line-height:1.5}
 .dl div{padding:3px 0}.list li{margin:.1em 0}
}
/* 모바일: 섹션 2·3·4 사진은 1열 */
@media(max-width:759px){
 .g3.real,#system .g3{grid-template-columns:1fr;gap:18px}
 .g3.real .card:last-child,#system .g3 .card:last-child{grid-column:auto}
 .g3.real figure img,#system figure img,.g3.real .card:last-child figure img,#system .card:last-child figure img{aspect-ratio:4/3}
 .case-sub{grid-template-columns:1fr;gap:16px}.case-sub figure img{aspect-ratio:4/3}
}
@media(max-width:759px){.regions{grid-template-columns:1fr;gap:18px}}
@media(max-width:899px){.dpanel{max-width:calc(100% - 16px);padding:5px 9px;line-height:1.35}.dpanel ol{flex-wrap:nowrap;gap:0 8px;margin:1px 0}.dpanel li{white-space:nowrap}}
@media(max-width:899px){.dpanel{right:6px;bottom:6px;padding:4px 7px;font-size:12px;line-height:1.3;background:rgba(14,43,29,.68)}.dt{font-size:12px}.dc{font-size:12px;opacity:.85}.dpanel ol{gap:0 6px}.dpanel li:before{width:1.25em;height:1.25em;line-height:1.2em;margin-right:3px;font-size:.72em}}
@media(max-width:899px){.dpanel{right:5px;bottom:5px;padding:3px 7px;line-height:1.25;max-width:calc(100% - 10px)}.dc{display:none}.dt:after{content:" · 개념도";font-weight:400;opacity:.85}.dpanel ol{margin:0;gap:0 7px}.dpanel li:before{display:none}.dpanel li{counter-increment:d}.dpanel li:after{content:"";}.dpanel ol{counter-reset:d}.dpanel li:nth-child(1):before,.dpanel li:nth-child(2):before,.dpanel li:nth-child(3):before{display:inline;border:0;width:auto;height:auto;margin-right:2px;font-size:1em;color:#9fe3c4}}
/* 노드 3(급수 계획): 사진 속 위치가 아닌 개념 패널에 붙여 표시 */
.dpanel:before{content:"3";position:absolute;left:-12px;top:50%;transform:translateY(-50%);width:24px;height:24px;line-height:22px;text-align:center;border-radius:50%;background:rgba(18,53,36,.9);border:1.3px solid #cdeedd;color:#e6f7ee;font:700 14px/22px sans-serif}
@media(min-width:900px){.dpanel:before{left:-14px;width:28px;height:28px;line-height:26px;font-size:16px}}
.dpanel:before{left:-9px;top:-14px;transform:none}
@media(min-width:900px){.dpanel:before{left:-12px;top:-16px}}
.dpanel:before{display:none!important}