/* 과천 바로하수구. 머스터드 노랑 + 남색. 아치형(위만 둥근) 사진, 사진 2장 높이 어긋나게, 남색 띠 섹션. 버튼은 작은 모서리 직사각형. */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css');
:root{--y:#0f8f8a;--y-l:#d9f0ee;--n:#15303a;--n-2:#2a4a56;--ink:#1a2a30;--ink2:#56707a;--bg:#fff;--bg2:#eef7f6;--line:#cfe3e0;--on:#fff;--font:"Pretendard Variable",Pretendard,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;--wrap:1080px;--r:10px}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:17px;line-height:1.7;word-break:keep-all;overflow-wrap:anywhere;letter-spacing:-.01em}
img{max-width:100%;height:auto;display:block;background:var(--bg2)}
a{color:var(--n)}
h1,h2,h3{margin:0 0 .4em;line-height:1.22;letter-spacing:-.03em;font-weight:800;color:var(--n)}
h1{font-size:clamp(32px,5.2vw,56px)}
h2{font-size:clamp(24px,3.4vw,36px)}
h3{font-size:19px}
p{margin:0 0 1em}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-999px;top:0;background:var(--n);color:#fff;padding:8px 12px}.skip:focus{left:8px;top:8px;z-index:99}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:15px 24px;font-weight:800;text-decoration:none;font-size:17px;border-radius:var(--r);border:2px solid var(--n);background:#fff;color:var(--n)}
.btn--n{background:var(--n);color:#fff}
.hero .btn{border-color:#fff;color:#fff;background:transparent}.hero .btn--n{background:#fff;color:var(--y);border-color:#fff}.phead .btn{border-color:#fff;color:#fff;background:transparent}.phead .btn--n{background:#fff;color:var(--y);border-color:#fff}
.btn--n:hover{background:var(--n-2);border-color:var(--n-2)}
.btn--y{background:var(--y);border-color:var(--y);color:var(--n)}
.arch{border-radius:18px;overflow:hidden}
.arch img{aspect-ratio:4/5;object-fit:cover;width:100%}

/* 상단: 투명 느낌, 노란 띠 아래 */
.top{background:#fff;border-bottom:3px solid var(--y);position:sticky;top:0;z-index:50}
.top__in{display:flex;align-items:center;gap:18px;height:64px}
.brand{text-decoration:none;color:var(--n);display:flex;align-items:baseline;gap:8px}
.brand__logo{height:0}
.brand__name{font-weight:900;font-size:21px;letter-spacing:-.03em;white-space:nowrap}
.brand__sub{font-size:12px;font-weight:700;color:var(--n-2);white-space:nowrap}
.nav{display:flex;margin-left:auto}
.nav a{text-decoration:none;color:var(--n);font-weight:700;font-size:14px;padding:8px 9px;white-space:nowrap;border-radius:6px}
.nav a[aria-current]{background:var(--y);color:#fff}
.top__tel{text-decoration:none;color:#fff;background:var(--y);font-weight:900;font-size:17px;padding:9px 14px;border:2px solid var(--y);border-radius:var(--r);white-space:nowrap;flex:none}
.menu-btn{display:none;background:var(--y);color:#fff;border:0;padding:8px 12px;font-weight:800;font-size:14px;border-radius:6px;white-space:nowrap;flex:none}
.mnav{display:none;background:var(--y-l)}
.mnav.open{display:block}
.mnav a{display:block;padding:14px 20px;text-decoration:none;color:var(--n);font-weight:700;border-bottom:1px solid var(--line)}

/* 첫 화면: 노란 배경, 왼쪽 글 + 오른쪽 아치 사진 2장 어긋나게 */
.hero{background:var(--y);padding:40px 0 60px;color:#fff}
.hero__in{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center}
.hero__tag{display:inline-block;background:#fff;color:var(--y);font-weight:800;font-size:14px;padding:5px 12px;border-radius:6px;margin-bottom:18px}
.hero h1{margin-bottom:16px;color:#fff}
.hero h1 mark{background:#fff;color:var(--y);padding:0 8px;border-radius:6px}
.hero__lead{font-size:18px;color:#e6f5f3;font-weight:600;max-width:520px;margin-bottom:22px}
.hero__btns{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px}
.hero__tel{display:inline-block;text-decoration:none;color:#fff;font-weight:900;font-size:clamp(30px,4.6vw,46px);letter-spacing:-.02em;line-height:1.1}
.hero__tel small{display:block;font-size:14px;font-weight:700;color:#d9f0ee;letter-spacing:0;margin-bottom:4px}
.hero__pics{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:end}
.hero__pics figure{margin:0}
.hero__pics figure:first-child{transform:translateY(-28px)}
.hero__pics figcaption{font-size:13px;font-weight:700;color:#e6f5f3;margin-top:8px;text-align:center}
.facts{background:var(--n);color:#fff}
.facts ul{list-style:none;padding:14px 0;margin:0;display:flex;flex-wrap:wrap;gap:6px 28px;font-weight:700;font-size:15px;justify-content:center}
.facts li::before{content:"";display:inline-block;width:10px;height:10px;background:var(--y);border-radius:50%;margin-right:8px}

section{padding:60px 0}
.sec{margin-bottom:28px}
.sec h2{margin-bottom:6px}
.sec p{margin:0;color:var(--ink2);font-weight:500}
.sec .tag{display:inline-block;background:var(--y);color:#fff;font-weight:800;font-size:13px;padding:3px 10px;border-radius:6px;margin-bottom:10px}

/* 증상: 아치 사진 카드 가로 5개 */
.symp{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.symp a{text-decoration:none;color:var(--ink);text-align:center}
.symp .arch{border:3px solid var(--y-l);border-radius:14px}.symp .arch img{aspect-ratio:1}
.symp a:hover .arch{border-color:var(--y)}
.symp b{display:block;font-size:17px;font-weight:800;color:var(--n);margin-top:10px}
.symp span{display:block;font-size:14px;color:var(--ink2)}

/* 요금: 남색 보드 */
.board{background:var(--n);color:#fff;border-radius:16px;padding:30px 34px}
.board ul{list-style:none;padding:0;margin:0;columns:2;column-gap:44px}
.board li{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.15);break-inside:avoid}
.board .n{font-weight:700}
.board .d{flex:1;min-width:20px}
.board .p{font-weight:900;color:#7fe3dc;font-size:19px;white-space:nowrap}
.board small{display:block;width:100%;font-size:13px;color:#b7c0d6;margin-top:-4px}
.board__note{font-size:14px;color:#b7c0d6;margin:14px 0 0}
.board a{color:#7fe3dc}

/* 작업 사례: 사진 2장 높이 다르게 + 글 */
.job{display:grid;grid-template-columns:.95fr 1.05fr;gap:30px;align-items:center;margin-bottom:46px}
.job:nth-of-type(even) .job__txt{order:-1}
.job__pics{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:end}
.job__pics figure{margin:0}
.job__pics figure:first-child{transform:translateY(-26px)}
.job__pics img{aspect-ratio:3/4;object-fit:cover;border-radius:var(--r)}
.job__pics figcaption{font-size:13px;font-weight:700;color:var(--ink2);margin-top:6px;text-align:center}
.job__meta{display:inline-block;background:var(--y-l);color:var(--y);font-weight:800;font-size:13px;padding:3px 10px;border-radius:6px;margin-bottom:10px}
.job h3{font-size:clamp(20px,2.4vw,26px)}
.job p{color:var(--ink2);font-size:16px;margin:0}
.more{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.more figure{margin:0}.more img{aspect-ratio:4/3;object-fit:cover;border-radius:6px}.more figcaption{font-size:12px;color:var(--ink2);margin-top:3px}

/* 진행: 노란 번호 없는 가로 단계 (점 + 선) */
.steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative}
.steps::before{content:"";position:absolute;left:8%;right:8%;top:11px;height:3px;background:var(--y)}
.steps li{padding:0 14px;text-align:center}
.steps li::before{content:"";display:block;width:22px;height:22px;border-radius:50%;background:var(--y);border:4px solid #fff;margin:0 auto 14px;position:relative;box-shadow:0 0 0 2px var(--y)}
.steps b{display:block;font-size:18px;color:var(--n);margin-bottom:6px}
.steps span{font-size:15px;color:var(--ink2)}

/* 동네: 남색 띠 */
.local{background:var(--n);color:#fff}
.local h2{color:#fff}.local .sec p{color:#b7c0d6}
.cards{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.card{background:#fff;color:var(--ink);border-radius:12px;padding:22px 24px;border-top:6px solid var(--y)}
.card b{display:block;font-size:19px;color:var(--n);margin-bottom:6px}
.card span{color:var(--ink2);font-size:15px}

/* FAQ */
.faq__item{border-bottom:1px solid var(--line)}
.faq__item summary{cursor:pointer;padding:15px 36px 15px 0;font-weight:800;list-style:none;position:relative;font-size:17px;color:var(--n)}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{content:"";position:absolute;right:6px;top:22px;width:10px;height:10px;border-right:3px solid var(--y);border-bottom:3px solid var(--y);transform:rotate(45deg)}
.faq__item[open] summary::after{transform:rotate(-135deg);top:26px}
.faq__a{padding:0 0 16px}.faq__a p{margin:0;color:var(--ink2)}

/* 지역 */
.area{background:var(--bg2)}
.area__in{display:block;max-width:820px}
.amap{width:100%;height:auto}
.amap .gu{fill:#fff;stroke:var(--n);stroke-width:3;stroke-linejoin:round}
.amap .gu-label{font:900 30px var(--font);fill:var(--n)}
.amap .pin circle{fill:var(--y);stroke:#fff;stroke-width:3}
.amap .pin text{font:700 18px var(--font);fill:var(--n)}
.dongs{font-size:15px;line-height:1.9;margin:0 0 6px}
.dongs b{display:inline-block;background:var(--n);color:#fff;padding:0 8px;border-radius:4px;margin-right:8px;font-size:13px}

/* 하단 */
.cta{background:var(--y);text-align:center;padding:56px 0;color:#fff}.cta h2{color:#fff}
.cta p{color:#e6f5f3;font-weight:600;margin:0 0 18px}
.cta .tel{display:inline-block;background:#fff;color:var(--y);font-weight:900;font-size:clamp(26px,4.4vw,44px);padding:12px 32px;text-decoration:none;border-radius:var(--r)}
.quote__in{display:grid;grid-template-columns:.8fr 1.2fr;gap:36px;align-items:start}
.qform{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.qform label{display:grid;gap:4px;font-size:14px;font-weight:800;color:var(--n)}
.qform input,.qform select,.qform textarea{font:inherit;font-size:16px;padding:12px 14px;border:2px solid var(--line);background:#fff;color:var(--ink);width:100%;border-radius:var(--r)}
.qform input:focus,.qform select:focus,.qform textarea:focus{outline:none;border-color:var(--y)}
.qform__full,.qform__btn,.qform__msg{grid-column:1/3}
.qform__msg{margin:0;font-size:15px;min-height:1.4em;font-weight:600}
.qform__msg.err{color:#b3261e}
.foot{padding:28px 0 100px;font-size:14px;color:var(--ink2);border-top:4px solid var(--y)}
.foot__nav{display:flex;flex-wrap:wrap;gap:4px 18px;margin-bottom:16px}
.foot__nav a{text-decoration:none;font-weight:700}
.foot__biz{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:4px 20px;margin:0 0 14px}
.foot__biz div{display:flex;gap:8px}.foot__biz dt{font-weight:800;white-space:nowrap;color:var(--n)}.foot__biz dd{margin:0}.foot__biz a{text-decoration:none}
.foot__note,.foot__copy{margin:0 0 4px}
.callbar{position:fixed;left:0;right:0;bottom:0;display:none;grid-template-columns:1.4fr 1fr;z-index:60}
.callbar a{display:flex;align-items:center;justify-content:center;padding:16px 8px;font-weight:900;text-decoration:none;font-size:17px}
.callbar__tel{background:var(--y);color:#fff}.callbar__q{background:#fff;color:var(--y);border-top:2px solid var(--y)}

/* 서브페이지 */
.phead{background:var(--y);padding:40px 0 50px;color:#fff}.phead h1{color:#fff}
.phead__in{display:grid;grid-template-columns:1.1fr .9fr;gap:36px;align-items:center}
.crumb{font-size:14px;color:#d9f0ee;font-weight:700;margin:0 0 10px}.crumb a{color:#d9f0ee}
.phead__lead{color:#e6f5f3;font-size:18px;font-weight:600;max-width:560px}
.phead__btns{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.phead figure{margin:0;max-width:360px;justify-self:end}
.phead figcaption{font-size:13px;font-weight:700;color:#e6f5f3;margin-top:8px;text-align:center}
.two{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center;margin-bottom:34px}
.two figure{margin:0}.two img{aspect-ratio:4/3;object-fit:cover;border-radius:var(--r)}.two figcaption{font-size:14px;color:var(--ink2);margin-top:6px;font-weight:600}
.list{padding-left:0;list-style:none;margin:0 0 14px}
.list li{padding:8px 0 8px 26px;position:relative;font-weight:600}
.list li::before{content:"";position:absolute;left:2px;top:15px;width:12px;height:12px;border-radius:50%;background:var(--y)}
.cap{font-size:14px;color:var(--ink2);font-weight:600}

@media (max-width:1200px){.brand__sub{display:none}}
@media (max-width:960px){
  .nav{display:none}.menu-btn{display:inline-block}.top__tel{margin-left:auto}
  .hero__in,.job,.two,.quote__in,.area__in,.cards,.phead__in{grid-template-columns:1fr}
  .job:nth-of-type(even) .job__txt{order:0}
  .hero__pics{max-width:420px}
  .symp{grid-template-columns:repeat(3,1fr)}
  .steps{grid-template-columns:1fr 1fr;gap:24px 0}.steps::before{display:none}
  .board ul{columns:1}.board{padding:22px}
  .phead figure{justify-self:start}
}
@media (max-width:640px){
  body{font-size:16px}section{padding:40px 0}
  .top__in{gap:8px}.brand__name{font-size:17px}.top__tel{font-size:13px;padding:7px 9px}.menu-btn{padding:7px 9px;font-size:13px}
  .hero{padding:30px 0 40px}.hero__pics figure:first-child{transform:translateY(-16px)}
  .symp{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr}
  .callbar{display:grid}
  .qform{grid-template-columns:1fr}.qform__full,.qform__btn,.qform__msg{grid-column:auto}
  .job__pics figure:first-child{transform:translateY(-12px)}
}