/* 클린앤환경 배관막힘 랜딩 — 서비스/지역 상세 공통 스타일
   모바일 우선(375px 기준), 최대 폭 560px. 값은 :root 토큰만 수정하세요. */
:root{
  --primary-900:#0a1f4d; --primary-700:#0f3a8f; --primary-600:#1650d8;
  --primary-100:#dfe8fb; --primary-50:#f2f6fe;
  --accent-600:#f36a1d; --accent-700:#d4550f; --accent-100:#ffe6d6;
  --call-500:#f2483a; --call-700:#d61a0e; --call-900:#9d130a;
  --yellow:#ffd400; --navy:#0d2039; --gray-600:#5b6b80; --line:#e6ecf7;
  --pad-x:clamp(14px,4.5vw,20px); --pad-y:clamp(24px,7vw,34px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#e9eef7;color:var(--navy);word-break:keep-all;
  font-family:'Pretendard Variable',Pretendard,-apple-system,sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--primary-600);text-decoration:none}
a:hover{color:var(--primary-700)}
img{max-width:100%;height:auto}
.page{width:100%;max-width:560px;margin:0 auto;background:#fff;overflow:clip}
@media (min-width:600px){.page{border-radius:22px;box-shadow:0 12px 40px rgba(10,31,77,.16);margin-top:16px}}

/* 헤더 */
.site-header{position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;align-items:center;
  gap:12px;padding:10px var(--pad-x);background:#fff;border-bottom:1px solid var(--line)}
.logo-img{display:block;height:34px;width:auto}

/* 버튼 공통 — 알약형 + 입체 + 누름 효과 */
.btn{display:flex;align-items:center;justify-content:center;gap:6px;border:0;cursor:pointer;
  font:inherit;font-weight:900;text-align:center;border-radius:999px;min-height:54px;padding:14px 18px;
  transition:transform .08s ease,box-shadow .08s ease}
.btn-block{width:100%}
.btn-call{background:linear-gradient(180deg,var(--call-500) 0%,var(--call-700) 100%);color:#fff;font-size:18px;
  box-shadow:0 5px 0 var(--call-900),0 10px 22px rgba(214,26,14,.3)}
.btn-call:hover{color:#fff;background:linear-gradient(180deg,#f75a4c 0%,#e01f12 100%)}
.btn-call:active{transform:translateY(5px);box-shadow:0 0 0 var(--call-900),0 3px 8px rgba(214,26,14,.3)}
.btn-form{background:linear-gradient(180deg,#f8823a 0%,#e05a10 100%);color:#fff;font-size:18px;min-height:58px;
  box-shadow:0 5px 0 #a8410a,0 10px 22px rgba(224,90,16,.28)}
.btn-form:hover{color:#fff}
.btn-form:active{transform:translateY(5px);box-shadow:0 0 0 #a8410a,0 3px 8px rgba(224,90,16,.3)}
.btn-outline{background:#fff;border:2px solid var(--primary-600);color:var(--primary-700);font-size:16px;font-weight:800;
  box-shadow:0 4px 0 #c3d3f2}
.btn-outline:hover{background:var(--primary-50);color:var(--primary-700)}
.btn-outline:active{transform:translateY(4px);box-shadow:0 0 0 #c3d3f2}
.header-call{display:inline-flex;align-items:center;min-height:44px;gap:6px;padding:9px 18px;border-radius:999px;
  font-size:14px;font-weight:900;color:#fff;background:linear-gradient(180deg,var(--call-500) 0%,var(--call-700) 100%);
  box-shadow:0 3px 0 var(--call-900),0 5px 12px rgba(214,26,14,.32);transition:transform .08s ease,box-shadow .08s ease}
.header-call:hover{color:#fff}
.header-call:active{transform:translateY(3px);box-shadow:0 0 0 var(--call-900)}
:focus-visible{outline:2px solid var(--primary-600);outline-offset:2px}

/* 히어로 */
.hero-banner img{display:block;width:100%}
.hero-callbar{display:flex;justify-content:space-between;align-items:center;min-height:52px;gap:10px;
  background:var(--primary-900);padding:8px var(--pad-x);color:#fff}
.hero-callbar:hover{color:#fff;background:#12306e}
.hero-callbar b{font-size:17px;font-weight:900;color:var(--yellow)}
.hero-callbar span{font-size:13.5px;font-weight:800}
.hero-body{padding:18px var(--pad-x) 0;display:flex;flex-direction:column;gap:14px}
.hero-badges{display:flex;flex-wrap:wrap;gap:6px}
.badge{font-size:12px;font-weight:800;padding:6px 11px;border-radius:999px}
.badge-accent{background:var(--accent-100);color:var(--accent-700)}
.badge-primary{background:var(--primary-100);color:var(--primary-700)}
h1{margin:0;font-size:clamp(26px,7.4vw,32px);font-weight:900;line-height:1.28;letter-spacing:-.02em;text-wrap:pretty}
h1 em{font-style:normal;color:var(--accent-600)}
.hero-sub{margin:0;font-size:15px;line-height:1.65;color:var(--gray-600)}
.hero-sub strong{color:var(--navy)}
.hero-cta{display:flex;flex-direction:column;gap:9px}
.hero-trust{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:7px;
  font-size:14px;font-weight:600;color:var(--gray-600)}

/* 섹션 공통 */
.section{padding:var(--pad-y) var(--pad-x);display:flex;flex-direction:column;gap:14px;border-top:1px solid var(--line)}
.eyebrow{margin:0;font-size:11.5px;font-weight:900;letter-spacing:.14em;color:var(--accent-600)}
h2{margin:0;font-size:clamp(21px,5.6vw,25px);font-weight:900;text-wrap:pretty}
.section-desc{margin:0;font-size:14.5px;line-height:1.65;color:var(--gray-600)}
.note{margin:0;font-size:12.5px;line-height:1.6;color:var(--gray-600)}

/* 서비스 */
.service-section{background:#f7f9fe}
.service-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.service-tab{display:flex;align-items:center;justify-content:center;min-height:48px;padding:12px 4px;
  font:inherit;font-size:15px;font-weight:800;color:var(--primary-700);background:#fff;
  border:1.5px solid var(--primary-100);border-radius:999px;box-shadow:0 3px 0 #e0e8f7;cursor:pointer;
  transition:transform .08s ease,box-shadow .08s ease}
.service-tab:hover{border-color:var(--primary-600);background:var(--primary-50)}
.service-tab:active{transform:translateY(3px);box-shadow:0 0 0 #e0e8f7}
.service-tab.is-active{border-color:var(--primary-600);background:var(--primary-50)}
.service-panel{display:none;background:#fff;border-radius:16px;padding:20px 18px;
  flex-direction:column;gap:14px;box-shadow:0 2px 10px rgba(10,31,77,.07)}
.service-panel.is-active{display:flex}
.service-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.service-head h3{margin:0;font-size:19px;font-weight:900;line-height:1.35}
.service-price{margin:0;text-align:right;line-height:1.3}
.service-price span{display:block;font-size:11px;font-weight:700;color:var(--gray-600)}
.service-price strong{font-size:21px;font-weight:900;color:var(--accent-600)}
.service-lead{margin:0;font-size:14.5px;line-height:1.65;color:var(--gray-600)}
.symptom-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.symptom-list li{font-size:14.5px;font-weight:600;line-height:1.5}
.method-box{background:var(--primary-50);border-radius:12px;padding:15px;display:flex;flex-direction:column;gap:7px}
.method-box h4{margin:0;font-size:15px;font-weight:900;color:var(--primary-700)}
.method-box p{margin:0;font-size:14px;line-height:1.65;color:var(--gray-600)}
.cross-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
.cross-link{display:flex;justify-content:space-between;align-items:center;min-height:48px;gap:6px;background:#fff;
  border:1.5px solid var(--primary-100);border-radius:999px;padding:12px 18px;font-size:14px;font-weight:800;
  color:var(--primary-700);box-shadow:0 3px 0 #e0e8f7;transition:transform .08s ease,box-shadow .08s ease}
.cross-link:active{transform:translateY(3px);box-shadow:0 0 0 #e0e8f7}

/* 원인 이미지·영상 — 폭을 줄여 스크롤 길이를 관리 */
.media-figure{margin:0;display:flex;flex-direction:column;gap:8px}
.media-figure img{display:block;margin:0 auto;border-radius:12px}
.media-figure figcaption{font-size:13px;line-height:1.55;color:var(--gray-600)}
.w-62{width:62%}
.w-78{width:78%}

/* 선택 이유 */
.why-section{background:var(--primary-900);color:#fff;border-top:0}
.why-section .eyebrow{color:var(--yellow)}
.why-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.why-card{background:#12306e;border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:5px}
.why-card strong{font-size:15px;font-weight:900}
.why-card span{font-size:12.5px;line-height:1.5;color:#c3d2ee}

/* 후기 */
.review-list{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:10px}
.review-card{display:flex;flex-direction:column;gap:9px;background:#f7f9fe;border-radius:14px;padding:16px 15px 15px}
.review-card-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.review-card-top i{font-family:Georgia,serif;font-style:normal;font-size:26px;line-height:1;color:#c7d5ee}
.review-card p{margin:0;font-size:15px;font-weight:700;line-height:1.5;text-wrap:pretty}
.review-tag{font-size:11.5px;font-weight:900;padding:5px 10px;border-radius:999px}
.tag-toilet{background:var(--primary-100);color:var(--primary-700)}
.tag-sink{background:#d9f0e4;color:#136c43}
.tag-drain{background:var(--accent-100);color:var(--accent-700)}

/* 지역 */
.area-section{background:#f7f9fe}
.area-box{background:#fff;border-radius:16px;padding:20px 18px;display:flex;flex-direction:column;gap:12px;
  box-shadow:0 2px 10px rgba(10,31,77,.07)}
.area-main{margin:0;font-size:19px;font-weight:900;line-height:1.45;color:var(--primary-900)}
.area-sub{margin:0;font-size:14px;line-height:1.6;color:var(--gray-600)}
.area-links{display:flex;flex-wrap:wrap;gap:6px}
.area-chip{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;
  font-size:13.5px;font-weight:800;background:var(--primary-50);color:var(--primary-700);
  border:1px solid var(--primary-100);box-shadow:0 2px 0 #dbe4f6;transition:transform .08s ease,box-shadow .08s ease}
.area-chip:active{transform:translateY(2px);box-shadow:0 0 0 #dbe4f6}

/* 폼 */
.lead-form{display:flex;flex-direction:column;gap:13px}
.form-row{display:flex;flex-direction:column;gap:6px;font-size:13.5px;font-weight:800}
.form-row .req{font-weight:600;color:var(--gray-600);font-size:12px}
.input,.lead-form input[type=text],.lead-form input[type=tel]{font:inherit;font-size:16px;padding:14px;min-height:50px;
  width:100%;border:1.5px solid var(--primary-100);border-radius:12px;background:#fff;color:var(--navy)}
.radio-group{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.radio-item{display:flex;align-items:center;min-height:50px;gap:8px;padding:12px;font-size:14.5px;font-weight:700;
  border:1.5px solid var(--primary-100);border-radius:12px;background:#fff;cursor:pointer}
.radio-item input{width:18px;height:18px;accent-color:var(--primary-600)}
.radio-item:has(input:checked){border-color:var(--primary-600);background:var(--primary-50)}
.consent{display:flex;gap:9px;align-items:flex-start;font-size:13px;line-height:1.55;color:var(--gray-600)}
.consent input{margin-top:2px;width:17px;height:17px;accent-color:var(--primary-600)}
.form-msg{font-size:13.5px;font-weight:700;min-height:20px}
.form-msg.error{color:var(--call-700)}
.form-msg.success{color:#136c43}

/* 푸터 · 고정바 */
.site-footer{padding:26px var(--pad-x) 22px;background:var(--primary-900);color:#a9bde0;
  display:flex;flex-direction:column;gap:7px;font-size:12px;line-height:1.6}
.footer-logo-img{display:block;height:30px;width:auto;background:#fff;border-radius:6px;padding:5px 8px;align-self:flex-start}
.footer-lead{margin:4px 0 0;font-size:13.5px;font-weight:800;color:#fff}
.footer-meta{margin:0}
.footer-meta a{color:#cddaf3}
.footer-copy{margin:0;color:#7e93bb}
.sticky-cta{position:sticky;bottom:0;z-index:30;display:grid;grid-template-columns:1fr 1fr;gap:8px;
  padding:10px clamp(10px,3.5vw,14px) 12px;background:rgba(255,255,255,.94);border-top:1px solid var(--line);
  backdrop-filter:blur(6px)}
.sticky-btn{display:flex;align-items:center;justify-content:center;min-height:52px;border-radius:999px;
  font-size:16px;font-weight:900;color:#fff;transition:transform .08s ease,box-shadow .08s ease}
.sticky-form{background:linear-gradient(180deg,#2c66e6 0%,var(--primary-700) 100%);box-shadow:0 4px 0 #0a2a69,0 8px 16px rgba(15,58,143,.3)}
.sticky-call{background:linear-gradient(180deg,var(--call-500) 0%,var(--call-700) 100%);box-shadow:0 4px 0 var(--call-900),0 8px 16px rgba(214,26,14,.3)}
.sticky-btn:hover{color:#fff}
.sticky-btn:active{transform:translateY(4px)}

/* ───────── 이하: 서비스 상세·지역 페이지 구조용 추가 스타일 ───────── */
.media-figure video.media{display:block;width:100%;height:auto;border-radius:12px;background:#0a1f4d}
.causes-section{background:#fff}
.causes-quote{margin:6px 0 0;text-align:center;font-size:15px;line-height:1.55;color:var(--gray-600)}
.causes-quote strong{display:block;font-size:clamp(19px,5.4vw,23px);font-weight:900;color:var(--primary-700)}

/* 현재 위치 */
.breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:var(--gray-600)}
.breadcrumb a{color:var(--gray-600);text-decoration:underline;text-underline-offset:2px}
.breadcrumb i{font-style:normal;color:#b3c0d6}
.breadcrumb [aria-current]{color:var(--primary-700)}

/* 홈 서비스 카드 */
.service-cards{display:flex;flex-direction:column;gap:10px}
.service-card{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:12px;background:#fff;
  border:1.5px solid var(--primary-100);border-radius:16px;padding:16px 14px;color:var(--navy);
  box-shadow:0 3px 0 #e0e8f7;transition:transform .08s ease,box-shadow .08s ease}
.service-card:hover{border-color:var(--primary-600);color:var(--navy)}
.service-card:active{transform:translateY(3px);box-shadow:0 0 0 #e0e8f7}
.service-card-icon{font-size:28px;line-height:1}
.service-card-body{display:flex;flex-direction:column;gap:3px;min-width:0}
.service-card-body strong{font-size:16.5px;font-weight:900}
.service-card-body span{font-size:12.5px;color:var(--gray-600);line-height:1.45}
.service-card-price{text-align:right;font-size:17px;font-weight:900;color:var(--accent-600);line-height:1.2;white-space:nowrap}
.service-card-price small{display:block;font-size:10.5px;font-weight:700;color:var(--gray-600)}
.service-card-arrow{font-size:22px;font-weight:900;color:var(--primary-600)}

/* 서비스 패널 보강 */
.symptom-list li{position:relative;padding-left:26px}
.symptom-list li::before{content:"✓";position:absolute;left:0;top:1px;width:18px;height:18px;border-radius:50%;
  background:var(--primary-100);color:var(--primary-700);font-size:11px;font-weight:900;
  display:flex;align-items:center;justify-content:center}
.cross{display:flex;flex-direction:column;gap:8px}
.cross-title{margin:0;font-size:13.5px;font-weight:800;color:var(--primary-900)}

/* 작업진행 */
.process-grid{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:9px}
.process-grid img{display:block;width:100%;border-radius:12px;border:1px solid var(--line)}

/* 수상 */
.awards-section{background:#111318;color:#fff;border-top:0}
.awards-section h2{color:var(--yellow)}
.awards-section .eyebrow{color:var(--yellow)}
.awards-section .section-desc{color:#c3cad6}

/* FAQ */
.faq-list{display:flex;flex-direction:column;gap:8px}
.faq-item{background:#f7f9fe;border:1px solid var(--line);border-radius:12px}
.faq-item summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:15px 16px;min-height:48px;font-size:15px;font-weight:800}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";font-size:20px;font-weight:700;color:var(--primary-600);flex:none}
.faq-item[open] summary::after{content:"−"}
.faq-item p{margin:0;padding:0 16px 16px;font-size:14px;line-height:1.65;color:var(--gray-600)}

/* 지역 */
.region-table{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;border-top:1px solid var(--line)}
.region-table li{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line)}
.region-table b{font-size:14.5px;font-weight:900;color:var(--primary-900)}
.region-table span{display:flex;gap:6px}
.region-table a{display:inline-flex;align-items:center;min-height:36px;padding:0 12px;border-radius:999px;font-size:13px;font-weight:800;
  background:var(--primary-50);border:1px solid var(--primary-100)}
.area-dist-title{margin:4px 0 0;font-size:13px;font-weight:900;color:var(--primary-900)}
.area-dist{margin:0;font-size:13px;line-height:1.7;color:var(--gray-600)}
.area-map{display:block;width:100%;height:220px;border:0;border-radius:12px;background:var(--primary-50)}
.form-label{font-size:13.5px;font-weight:800}

/* 푸터 링크 */
.footer-nav{display:flex;gap:14px;margin:2px 0 4px}
.footer-nav a{color:#fff;font-weight:800;font-size:13px}

@media (min-width:600px){
  .process-grid{grid-template-columns:repeat(4,1fr)}
  .why-grid{grid-template-columns:repeat(3,1fr)}
}

/* 서비스 지역 접기 — 검색엔진·AI는 HTML을 그대로 읽고, 고객 화면에서는 한 줄로만 보인다 */
.area-section{background:#fff;padding-top:18px;padding-bottom:18px}
.area-fold summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;min-height:44px}
.area-fold summary::-webkit-details-marker{display:none}
.area-fold summary::after{content:"+";margin-left:auto;font-size:20px;font-weight:700;color:var(--gray-600)}
.area-fold[open] summary::after{content:"−"}
.area-fold-title{font-size:14px;font-weight:800;color:var(--gray-600)}
.area-fold-body{display:flex;flex-direction:column;gap:14px;padding-top:12px}
.area-fold-body h2{font-size:clamp(18px,5vw,21px)}

/* 후기: 원문 제목 + 발췌 + 작성자(가림)·작성일·원문 링크 */
.review-card p.review-title{font-size:15.5px;font-weight:900}
.review-card p.review-body{font-size:13.5px;font-weight:500;line-height:1.65;color:var(--gray-600)}
.review-meta{margin:2px 0 0;display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;font-size:12.5px;color:var(--gray-600)}
.review-meta b{font-weight:800;color:var(--navy)}
.review-meta a{margin-left:auto;font-weight:700;text-decoration:underline;text-underline-offset:2px}