/* =========================================================
   누수마스터 — site.css (style.css 위에 덧입히는 브랜드 레이어)
   - 로고 블루 톤으로 액센트 1개 교체
   - SVG 크기 안전망 (버튼·아이콘 부풀림 방지)
   ========================================================= */
:root{
  --primary:#1569b0;
  --primary-focus:#1e7ac9;
  --primary-on-dark:#5aa9e6;
}
a,button,label,summary{-webkit-tap-highlight-color:rgba(21,105,176,.12)}
.btn--primary:hover{background:#115c9b}
.btn--ghost:hover{background:rgba(21,105,176,.06)}
.dbl a.hi:hover{background:#1e7ac9}
.form__msg.ok{background:#eaf4ff;color:#115c9b;border:1px solid #b9dbff}

/* ---- 브랜드 워드마크 (상호 + 지역) ---- */
.brand__wrap{display:flex;flex-direction:column;line-height:1.05}
.brand__wrap small{font-size:11px;font-weight:500;color:var(--ink-48);letter-spacing:0}
.ft__brand .brand__wrap small{color:var(--ink-48)}

/* ---- 긴급 배지(히어로) ---- */
.hero__badge{display:inline-flex;align-items:center;gap:8px;background:rgba(21,105,176,.9);
  color:#fff;font-size:14px;font-weight:600;padding:7px 15px;border-radius:var(--r-pill);
  margin-bottom:16px;backdrop-filter:blur(6px)}
.hero__badge i{font-style:normal;width:7px;height:7px;border-radius:50%;background:#7fffd4;
  box-shadow:0 0 0 0 rgba(127,255,212,.7);animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(127,255,212,.6)}70%{box-shadow:0 0 0 8px rgba(127,255,212,0)}100%{box-shadow:0 0 0 0 rgba(127,255,212,0)}}

/* ---- 증상 체크 그리드 ---- */
.sym{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.sym .card{padding:26px 24px}
.sym .card h3{margin-top:0;font-size:18px}
.sym .card p{margin-top:10px;font-size:15px}
.sym .ic{width:44px;height:44px;border-radius:var(--r-md);background:rgba(21,105,176,.1);
  color:var(--primary);display:grid;place-items:center;margin-bottom:16px}

/* ---- 장비/방식 피처 ---- */
.feat{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.feat .item{text-align:left}
.feat__i{width:48px;height:48px;border-radius:var(--r-md);display:grid;place-items:center;
  background:rgba(21,105,176,.1);color:var(--primary);margin-bottom:16px}
.sec--dark .feat__i{background:rgba(90,169,230,.14);color:var(--primary-on-dark)}
.feat h3{font-size:18px}
.feat p{margin-top:9px;font-size:15px;line-height:1.6;color:var(--ink-48)}
.sec--dark .feat p{color:#c7c7cc}
.sec-head{max-width:760px}
.sec-head.center{margin-left:auto;margin-right:auto}

/* ---- 지역 태그 ---- */
.area-tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.area-tags span{border:1px solid var(--hairline);background:#fff;border-radius:var(--r-pill);
  padding:8px 16px;font-size:15px;font-weight:600;color:var(--ink-80)}
.sec--dark .area-tags span{background:transparent;border-color:rgba(255,255,255,.22);color:#e8e8ed}

/* =========================================================
   SVG 크기 안전망 (2026-10-20 사고 대응)
   ========================================================= */
.btn svg,.hd__cta svg,.mbar a svg,.float a svg,.area-tags svg{width:20px;height:20px;flex:none}
.btn{white-space:nowrap}
.feat__i svg,.sym .ic svg,.chan .ic svg{width:24px;height:24px}
svg:not([width]):not([height]){max-width:48px;max-height:48px}

@media (max-width:1000px){.feat{grid-template-columns:1fr 1fr}.sym{grid-template-columns:1fr}}
@media (max-width:560px){.feat{grid-template-columns:1fr 1fr;gap:16px}}