@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard-dynamic-subset.css');
:root{--ink:#10273d;--muted:#465d70;--blue:#0864b0;--sky:#edf8ff;--line:#d8e9f5;--radius:22px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);background:white;font:16px/1.6 Pretendard,"Noto Sans KR","Malgun Gothic",sans-serif;word-break:keep-all}a{color:inherit;text-decoration:none}img{display:block;max-width:100%}button{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:3px solid #0674c8;outline-offset:4px}h1,h2,h3,p,figure{margin:0}h1,h2,h3{letter-spacing:-.045em;line-height:1.18}h2{font-size:clamp(32px,4vw,51px);font-weight:790}h3{font-size:23px}section[id]{scroll-margin-top:70px}.wrap{width:min(1200px,calc(100% - 80px));margin-inline:auto}.definitions{position:absolute;width:0;height:0}.icon{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linejoin:round;stroke-linecap:round;flex:none}.skip{position:fixed;top:8px;left:12px;z-index:9;padding:10px;background:#fff;transform:translateY(-140%)}.skip:focus{transform:none}
.header{position:sticky;z-index:5;top:0;background:#fffffff7;border-bottom:1px solid var(--line)}.header-row{display:flex;min-height:76px;align-items:center;justify-content:space-between;gap:18px}.brand{display:inline-flex;align-items:center;gap:10px;font-size:20px;font-weight:800;white-space:nowrap;line-height:1.15;letter-spacing:-.04em}.brand small{display:block;margin-top:5px;font-size:11px;font-weight:650;letter-spacing:0;color:var(--muted)}nav{display:flex;gap:30px;font-size:15px;font-weight:700;color:#405a70}nav a:hover,.text-link:hover,.source:hover{text-decoration:underline}.header-contact{display:flex;align-items:center;gap:8px;font-weight:800;color:var(--blue)}
.hero{background:radial-gradient(ellipse at 75% 25%,#d8f0ff 0%,transparent 52%),linear-gradient(#f1faff,#eaf7ff);border-bottom:1px solid var(--line);padding:54px 0 58px}.hero-layout{display:grid;grid-template-columns:1.05fr 1fr;align-items:center;gap:56px}.pill,.tags span{display:inline-flex;gap:8px;align-items:center;background:#fff;color:#07538e;border:1px solid #cde6fa;border-radius:50px;padding:6px 13px;font-size:13px;font-weight:760}.pill span{width:8px;height:8px;border-radius:50%;background:#1189d4;box-shadow:0 0 0 3px #e0f4ff}h1{font-size:clamp(38px,4.65vw,67px);margin:16px 0 16px;font-weight:830}h1 em{font-style:normal;color:var(--blue)}.lede{font-size:17px;color:var(--muted);margin-bottom:21px}
.price{display:flex;gap:9px;align-items:stretch;max-width:472px}.price-main{position:relative;display:flex;flex-direction:column;justify-content:center;flex:1;padding:11px 16px;line-height:1.15;border-radius:15px;font-weight:750}.price-main{flex:1.25;color:#fff;background:#0963ae;box-shadow:0 7px 22px #0963ae2a;overflow:hidden}.price-main::after{content:"";position:absolute;inset:-50% auto -50% -32%;width:24%;transform:skew(-23deg);background:linear-gradient(90deg,transparent,#ffffff45,transparent);animation:shine 1.2s ease-out .45s 2}.price-main:hover{background:#074c88}.price-main .icon{position:absolute;right:12px;bottom:15px}.price strong{display:block;margin-top:5px;font-weight:840;letter-spacing:-.055em}.price-note{margin:8px 0 18px;color:var(--muted);font-size:12px}.actions{display:flex;gap:9px;flex-wrap:wrap}.button{display:inline-flex;justify-content:center;align-items:center;gap:8px;padding:12px 18px;min-height:49px;border-radius:11px;font-size:15px;font-weight:790;transition:filter .18s ease}.button:hover,.floating a:hover{filter:brightness(.92)}.primary{background:#102d4c;color:white}.kakao,.float-chat{background:#ffe34f;color:#302200}.white{background:white;color:#0c4273}
.hero-media{position:relative;overflow:hidden;min-height:460px;aspect-ratio:1.04;border-radius:29px;background:#132d42;box-shadow:0 16px 44px #143a5925}.hero-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:74% 50%;filter:brightness(1.2)}.hero-media::after{content:"";position:absolute;inset:48% 0 0;background:linear-gradient(transparent,#10243bd9)}.media-caption{position:absolute;z-index:1;bottom:28px;left:29px;color:#fff}.media-caption span,.label{display:block;font-size:12px;font-weight:820;letter-spacing:.11em;color:#1768a2;margin-bottom:10px}.media-caption span{color:#a9ddff;margin-bottom:5px}.media-caption b{font-size:27px;line-height:1.23;display:block;letter-spacing:-.04em}
.section{padding:85px 0}.section-head{display:flex;justify-content:space-between;align-items:end;gap:16px;margin-bottom:27px}.section-head>p,.area p:not(.label){color:var(--muted)}.services,.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px}.services article,.steps li{position:relative;min-height:193px;padding:22px;border:1px solid var(--line);border-radius:var(--radius);background:#fff}.services .icon{box-sizing:content-box;background:#eaf7ff;border-radius:13px;padding:10px;color:var(--blue);margin-bottom:16px}.services article>span{position:absolute;right:21px;top:19px;color:#56748c;font-weight:770;font-size:12px}.services h3,.steps h3,.review-track h3{margin-bottom:9px}.services p,.steps p,.review-track p,.advantages p{color:var(--muted);font-size:15px;line-height:1.6}
.reviews,.process{background:#f2f9fe;border-block:1px solid #e2eff8}.review-nav{display:flex;gap:6px}.review-nav button{width:38px;height:38px;border:1px solid #cee1f1;background:white;color:#114974;border-radius:9px;cursor:pointer;font-weight:800}.review-window{overflow-x:auto;scrollbar-width:thin;scrollbar-color:#bad8ed transparent;padding-bottom:7px}.review-window.ready{overflow:hidden}.review-track{display:flex;gap:13px}.review-track article{flex:0 0 calc((100% - 26px)/3);min-width:0;padding:22px;border-radius:var(--radius);border:1px solid var(--line);background:white;min-height:160px}.location{display:inline-block;margin-bottom:12px;color:#07578c;font-size:13px;font-weight:780}.source{display:inline-block;margin-top:14px;color:#315e80;font-size:13px}
.split{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:62px}.work-photo{overflow:hidden;border-radius:var(--radius);background:#d9eaf6}.work-photo img{width:100%;height:auto}.advantages{margin:22px 0 0}.advantages>div{display:flex;gap:14px;border-top:1px solid var(--line);padding:14px 0}.advantages dt,.steps span{color:var(--blue);font-weight:830}.advantages dd{margin:0}.advantages h3{font-size:20px;margin-bottom:4px}.steps{list-style:none;padding:0;margin:0}.steps li{min-height:155px}.steps span{display:block;margin-bottom:12px}.area{gap:45px}.area h2{margin-bottom:16px}.tags{display:flex;gap:7px;margin:17px 0}.tags span{background:#f0f9ff}.text-link{display:inline-flex;gap:6px;align-items:center;color:var(--blue);font-weight:780}.text-link .icon{width:17px}.area figure{background:#f4faff;border:1px solid var(--line);border-radius:var(--radius);padding:16px;text-align:center}.area figure img{width:100%;max-height:350px;object-fit:contain;mix-blend-mode:multiply}.area figcaption{color:var(--muted);font-size:13px}
.contact{background:linear-gradient(120deg,#0b3d73,#076bb5);color:white;padding:49px 0}.contact-row,.footer-row{display:flex;justify-content:space-between;align-items:center;gap:18px}.contact .label{color:#bbecff}.contact h2{font-size:clamp(28px,4vw,42px);margin-bottom:9px}.contact p:not(.label){color:#e3f3ff}footer{padding:27px 0 35px;background:#10273d;color:#e3edf5}.footer-row>div{font-size:13px}.footer-row a[href^="tel"]{text-decoration:underline}.floating{position:fixed;z-index:6;right:max(15px,env(safe-area-inset-right));bottom:max(15px,env(safe-area-inset-bottom));display:grid;gap:7px}.floating a{display:grid;align-content:center;justify-items:center;gap:1px;width:55px;height:55px;border-radius:15px;box-shadow:0 4px 14px #12283b35;font-size:11px;font-weight:850}.float-phone{background:#0864b0;color:#fff}
@keyframes shine{to{left:119%}}
@media(max-width:1040px){.wrap{width:calc(100% - 58px)}.hero-layout,.split{gap:28px}.hero-media{min-height:410px}.services article,.steps li{padding:17px}.contact-row{flex-wrap:wrap}}
@media(max-width:760px){.wrap{width:calc(100% - 36px)}.header-row{min-height:60px}.header nav{display:none}.brand{font-size:17px}.brand img{width:36px;height:36px}.header-contact{gap:4px;font-size:12px}.header-contact .icon{width:17px}.hero{padding:28px 0}.hero-layout,.split{grid-template-columns:1fr;gap:23px}h1{font-size:clamp(36px,7.9vw,54px);margin:13px 0 10px}.lede{font-size:15px;margin-bottom:15px}.desktop{display:none}.hero-media{min-height:0;aspect-ratio:1.9;border-radius:18px}.media-caption{left:15px;bottom:15px}.media-caption b{font-size:21px}.section{padding:50px 0}.section-head{align-items:start;flex-wrap:wrap;margin-bottom:19px}.services,.steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.services article,.steps li,.review-track article{padding:14px;border-radius:14px}.services article{min-height:159px}.services .icon{margin-bottom:9px}.services h3,.steps h3,.review-track h3{font-size:18px}.services p,.steps p,.review-track p{font-size:14px}.review-track article{flex-basis:calc((100% - 13px)/2)}.work-photo{order:2}.footer-row{align-items:start;flex-direction:column}.contact{padding:33px 0}.contact .actions .button{padding-inline:10px}.floating{right:8px;bottom:max(8px,env(safe-area-inset-bottom))}.floating a{width:48px;height:48px;border-radius:13px}footer{padding-bottom:70px}}
@media(max-width:475px){.review-track article{flex-basis:100%}.services article>span{right:11px}.contact-row{padding-right:34px}}
@media(prefers-reduced-motion:reduce){*,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}
nav {gap: clamp(14px, 2vw, 26px)}
.price {max-width: 520px}
.price-main {padding-right: 38px; animation: price-emphasis 1.45s ease .15s 3}
.price-main > span {font-size: clamp(15px, 2vw, 19px)}
.price .price-main strong {font-size: clamp(19px, 3.5vw, 31px); line-height: 1.28; word-break: keep-all}


@keyframes price-emphasis {
  0%, 100% {box-shadow: 0 7px 22px #0963ae2a; transform: translateY(0)}
  44% {box-shadow: 0 10px 25px #076dc66e, 0 0 0 4px #64bcff55; transform: translateY(-3px)}
}
.hero-media {background: #dcecf5}
.hero-media img {object-position: 48% 48%; filter: none}
.hero-media::after {display: none}
.media-caption {left: 18px; bottom: 18px; background: #f7fcfff2; color: #102d4c; border-radius: 13px; padding: 12px 15px; box-shadow: 0 4px 15px #102d4c18}
.media-caption span {color: #07578c}
.media-caption b {font-size: clamp(17px, 2vw, 23px)}

#services {background: #fbfdff}
#services .label, .cases .label {color: #0864b0}
#services h2 em {color: #0967b2; font-style: normal}
#services .section-head strong {color: #173d61}
.services article {border-top: 3px solid #abd9f6}
.services article:nth-child(2n) {background: #f3faff}
.services h3 {color: #07578c}
.services article > span {color: #386b91}

.review-meta {display: flex; gap: 6px 10px; align-items: center; flex-wrap: wrap; margin-bottom: 6px}
.review-meta .location {margin: 0; padding: 2px 8px; background: #eaf6ff; border-radius: 6px}
.review-author {color: #0864b0; font-weight: 800; font-size: 14px}
.review-rating {margin-bottom: 10px; font-size: 14px; letter-spacing: .04em}
.review-track h3 {color: #075eaa}
.review-track p {line-height: 1.72}

.case-grid {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px}
.case-card {display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff}
.case-card h3 {display: flex; align-items: center; gap: 8px; padding: 15px; min-height: 67px; background: #f0f8ff; color: #07578c; font-size: clamp(16px, 1.7vw, 21px)}
.case-card h3 span {display: grid; place-items: center; flex: 0 0 29px; height: 29px; border-radius: 8px; background: #d6eefe; font-size: 12px}
.case-slides {display: grid; flex: 1}
.case-card.is-ready .case-slide {grid-area: 1 / 1; visibility: hidden; opacity: 0; transition: opacity .3s ease}
.case-card.is-ready .case-slide.is-active {visibility: visible; opacity: 1}
.case-slide img {width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; background: #e8f1f8}
.case-copy {padding: 15px 16px 13px}
.case-tag {display: inline-block; margin-bottom: 6px; color: #07578c; font-weight: 750; font-size: 12px}
.case-copy h4 {margin: 0 0 7px; font-size: 19px; line-height: 1.28; letter-spacing: -.035em}
.case-copy p {color: var(--muted); font-size: 14px}
.case-controls:not([hidden]) {display: flex; justify-content: space-between; align-items: center; padding: 0 16px 13px}
.case-controls > span {color: #315e80; font-size: 13px; font-weight: 750; font-variant-numeric: tabular-nums}
.case-controls .review-nav button {width: 34px; height: 34px}
@media (max-width: 760px) {
  .hero-media {aspect-ratio: 1.56}
  .hero-media img {object-position: 48% 42%}
  .media-caption {left: 10px; bottom: 10px; padding: 8px 11px}
  .media-caption span {font-size: 9px; margin-bottom: 2px}
  .case-grid {grid-template-columns: 1fr}
  .case-card h3 {min-height: 0}
}
@media (max-width: 365px) {
  .price-main {padding-left: 11px; padding-right: 30px}

  .price-main .icon {right: 7px; width: 17px}
}
.price-note a {color: #07578c; font-weight: 760; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap}
.case-subtitle {margin-bottom: 13px}
.example-title {margin-top: 32px}
.actual-grid {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px}
.actual-card {border: 1px solid var(--line); border-radius: var(--radius); background: #fff}
.actual-card a {display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); align-items: stretch; min-height: 180px; border-radius: inherit}
.actual-card img {width: 100%; height: 100%; min-height: 180px; max-height: 235px; object-fit: cover; border-radius: var(--radius) 0 0 var(--radius)}
.actual-copy {padding: 17px; align-self: center}
.actual-copy > span {color: #07578c; font-size: 12px; font-weight: 800}
.actual-copy h4 {margin: 5px 0 6px; font-size: 20px; line-height: 1.26; letter-spacing: -.04em}
.actual-copy p {margin-bottom: 9px; color: var(--muted); font-size: 14px}
.actual-card a:hover .actual-link {text-decoration: underline}
.faq {background: #f2f9fe; border-top: 1px solid var(--line)}
.faq-layout {display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 22px; align-items: start}
.faq-list {display: grid; gap: 8px}
.faq-list details {border: 1px solid var(--line); border-radius: 14px; background: white}
.faq-list summary {position: relative; display: block; padding: 16px 48px 16px 17px; color: #173d61; font-weight: 780; cursor: pointer; border-radius: 14px; list-style: none}
.faq-list summary::-webkit-details-marker {display: none}
.faq-list summary::after {content: '+'; position: absolute; top: 50%; right: 17px; transform: translateY(-50%); color: var(--blue); font-size: 21px; line-height: 1}
.faq-list details[open] summary::after {content: '−'}
.faq-list details p {padding: 0 17px 16px; color: var(--muted); font-size: 15px}
.consult-check {padding: 23px; border: 1px solid #c8e3f7; border-radius: var(--radius); background: #e7f4fe}
.consult-check h3 {color: #173d61; line-height: 1.28}
.consult-check ul {margin: 14px 0 18px; padding-left: 1.2em; color: #405a70; font-size: 15px}
.consult-check li + li {margin-top: 4px}
.consult-check strong {color: #173d61}
@media (max-width: 965px) {
  .header nav {gap: 12px; font-size: 13px}
}
@media (max-width: 760px) {
  .actual-grid, .faq-layout {grid-template-columns: 1fr; gap: 10px}
  .actual-card a {min-height: 150px}
  .actual-card img {min-height: 150px}
  .actual-copy {padding: 13px}
  .actual-copy h4 {font-size: 18px}
  .faq-layout {gap: 15px}
}
#faq-cost {scroll-margin-top: 92px}
.cases-all {display: inline-flex; margin-top: 20px}

/* Leak detection process */
#process {
  scroll-margin-top: 76px;
  background: linear-gradient(180deg, #eef8ff, #f8fcff);
}
@media (prefers-reduced-motion: no-preference) {
  html:has(#process:target) {scroll-behavior: smooth}
}
#process .section-head h2 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .16em .32em;
}
#process h2 em {
  color: #075eaa;
  font-style: normal;
  box-shadow: inset 0 -.24em #cceaff;
}
.process-title-icon, .steps .step-icon {
  display: inline-grid;
  place-items: center;
  width: 2em;
  height: 2em;
  margin: 0;
  border-radius: .65em;
  background: #e3f3ff;
  font-size: 24px;
}
.process-title-icon {font-size: clamp(19px, 3vw, 26px)}
.steps li {
  border-top: 3px solid #5eafe2;
  box-shadow: 0 8px 22px #124a7410;
}
.step-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 14px;
}
.steps .step-number {
  margin: 0;
  color: #176397;
  font-size: 11px;
  letter-spacing: .08em;
  white-space: nowrap;
}
@media (max-width: 760px) {
  #process {scroll-margin-top: 60px}
  .steps .step-icon {font-size: 20px}
}

.header-row {flex-wrap: wrap; padding-block: 10px; row-gap: 8px}
.header .brand {flex-shrink: 0}
.header .brand img {flex-shrink: 0}
.header-contact {margin-left: auto; white-space: nowrap}
@media (min-width: 761px) and (max-width: 1100px) {
  .header nav {order: 3; flex-basis: 100%; justify-content: center}
}
@media (max-width: 760px) {
  .header .brand {font-size: clamp(14px, 3.8vw, 17px); gap: 8px}
  .header .brand small {font-size: 10px}
  #process {scroll-margin-top: 100px}
}
