/*
Theme Name: 전국24시누수탐지
Theme URI: https://nusu24h.kr
Author: KH Consulting
Description: 전국24시누수탐지 자연검색 전용 테마 (CI 네이비 #12304A / 청록 #009FAD)
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: nusu24h
*/

:root{
  --navy:#12304A;        /* CI 기준색 · 신뢰를 담은 네이비 */
  --navy-d:#0b2035;
  --teal:#009FAD;        /* CI 기준색 · 탐지를 강조하는 청록 */
  --teal-d:#00808c;
  --ink:#15202b;
  --muted:#5a6675;
  --line:#dfe5ec;
  --soft:#f2f6fa;
  --white:#fff;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"Malgun Gothic","맑은 고딕","Apple SD Gothic Neo",system-ui,sans-serif;
  color:var(--ink);background:var(--white);font-size:18px;line-height:1.8;-webkit-text-size-adjust:100%;
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{margin:0;word-break:keep-all;line-height:1.3}
p{margin:0;word-break:keep-all}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
@media(max-width:640px){.wrap{padding:0 16px}}

/* 상단 안내바 */
.util{background:var(--navy);color:#cfe3ec;font-size:15px;padding:7px 0}
.util .wrap{display:flex;justify-content:space-between;gap:12px}
.util b{color:#7fe3ee}
@media(max-width:600px){.util .r{display:none}}

/* 헤더 */
.head{position:sticky;top:0;z-index:60;background:#fff;border-bottom:1px solid var(--line)}
.head .wrap{display:flex;align-items:center;justify-content:space-between;height:64px;gap:12px}
.head .logo img{height:34px;width:auto}
.head .call{background:var(--teal);color:#fff;text-decoration:none;font-weight:800;font-size:18px;
  padding:12px 22px;border-radius:8px;white-space:nowrap}
.head .call:hover{background:var(--teal-d)}
@media(max-width:420px){.head .logo img{height:28px}.head .call{font-size:16px;padding:10px 16px}}

/* 히어로 */
.hero{position:relative;background:var(--navy);color:#fff;overflow:hidden}
.hero .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.32}
.hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,rgba(18,48,74,.94) 0%,rgba(18,48,74,.78) 52%,rgba(18,48,74,.42) 100%)}
.hero .wrap{position:relative;z-index:2;padding:62px 20px 66px}
.tag{display:inline-block;background:var(--teal);color:#fff;font-weight:800;font-size:16px;
  padding:6px 15px;border-radius:999px;margin-bottom:18px}
.hero h1{font-size:clamp(30px,5.4vw,50px);font-weight:800;letter-spacing:-.03em}
.hero h1 em{font-style:normal;color:#7fe3ee}
.hero .lead{font-size:clamp(17.5px,2.3vw,21px);color:#c8dbe6;margin-top:18px;max-width:600px}
.cta{display:flex;gap:11px;flex-wrap:wrap;margin-top:30px}
.btn{display:inline-block;text-decoration:none;font-weight:800;border-radius:10px;text-align:center}
.b1{background:var(--teal);color:#fff;font-size:22px;padding:16px 30px}
.b1:hover{background:var(--teal-d)}
.b2{border:1.5px solid rgba(255,255,255,.55);color:#fff;font-size:18.5px;padding:16px 24px}
.b3{background:#FEE500;color:#191919;font-size:22px;padding:16px 30px}
.b3:hover{background:#f5dc00}
.b2:hover{background:rgba(255,255,255,.14)}
.hero .lead .guar{display:block;margin-top:16px;padding-top:14px;border-top:2px solid var(--teal);font-size:1.75em;font-weight:800;color:#fff;line-height:1.4;letter-spacing:-.02em}
.hero .sub{margin-top:15px;font-size:15.5px;color:#9dbccd}

/* 배지 */
.badges{background:#fff}
.badges .wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding:34px 20px 8px}
.bd{background:var(--soft);border:1px solid var(--line);border-radius:14px;overflow:hidden;text-align:center}
.bd img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block}
.bd .tx{padding:18px 10px 22px}
.bd b{display:block;font-size:clamp(26px,3.8vw,36px);color:var(--navy);font-weight:800;letter-spacing:-.02em}
.bd span{display:block;margin-top:4px;font-size:17px;color:var(--muted)}
@media(max-width:760px){.badges .wrap{gap:12px;padding:22px 16px 4px}
  .bd .tx{padding:13px 6px 16px}.bd span{font-size:14px}}
@media(max-width:480px){.badges .wrap{grid-template-columns:1fr}
  .bd{display:grid;grid-template-columns:132px 1fr;align-items:center;text-align:left}
  .bd img{height:100%;aspect-ratio:1/1}
  .bd .tx{padding:14px 16px}.bd span{font-size:15px}}

section{padding:58px 0}
.st{font-size:clamp(22px,3.3vw,30px);font-weight:800;letter-spacing:-.02em}
.ss b{color:var(--navy);font-weight:800}
.ss{color:var(--muted);font-size:18px;margin-top:10px;max-width:60ch}
.head-gap{margin-bottom:30px}

/* 증상 */
.sym{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:13px}
.sym div{border:1px solid var(--line);border-left:3px solid var(--teal);border-radius:0 10px 10px 0;
  padding:17px 19px;background:#fff}
.sym b{display:block;font-size:19px;color:var(--navy);margin-bottom:3px}
.sym p{font-size:16px;color:var(--muted)}

/* 3단계 */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;counter-reset:s}
@media(max-width:800px){.steps{grid-template-columns:1fr}}
.step{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff}
.step img{width:100%;aspect-ratio:4/5;object-fit:cover}
.step .tx{padding:20px 20px 24px}
.step h3{font-size:20px;color:var(--navy);margin-bottom:6px}
.step h3::before{counter-increment:s;content:counter(s);display:inline-grid;place-items:center;
  width:24px;height:24px;border-radius:50%;background:var(--teal);color:#fff;font-size:13px;
  margin-right:9px;vertical-align:2px}
.step p{font-size:16.5px;color:var(--muted)}

/* 사례 스트립 */
.strip{overflow:hidden;padding:4px 0 16px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.strip .track{display:flex;width:max-content;animation:striproll 64s linear infinite}
.strip:hover .track,.strip:focus-within .track{animation-play-state:paused}
@keyframes striproll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.strip figure{flex:0 0 320px;margin:0 16px 0 0;scroll-snap-align:start}
.strip img{width:320px;aspect-ratio:4/5;object-fit:cover;border-radius:12px;background:var(--soft)}
@media(max-width:640px){.strip figure{flex:0 0 240px}.strip img{width:240px}
  .strip .track{animation-duration:48s}}
.strip figcaption{font-size:15px;color:var(--muted);margin-top:9px;padding-top:8px;
  border-top:1px solid var(--line)}
.strip figcaption b{color:var(--navy)}

/* FAQ */
.faq{max-width:840px}
.faq details{border-bottom:1px solid var(--line)}
.faq details:first-of-type{border-top:2px solid var(--navy)}
.faq summary{list-style:none;cursor:pointer;display:flex;gap:13px;align-items:flex-start;
  padding:18px 0;font-weight:700;font-size:19px;color:var(--navy)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"Q";flex:none;width:25px;height:25px;border-radius:6px;
  background:var(--teal);color:#fff;display:grid;place-items:center;font-size:13.5px;margin-top:2px}
.faq .a{padding:0 0 20px 38px;font-size:17px;color:var(--muted)}

/* 마지막 CTA */
.final{background:var(--navy);color:#fff;text-align:center;padding:64px 0 70px}
.final h2{font-size:clamp(25px,4.4vw,38px);font-weight:800;letter-spacing:-.02em}
.final h2 em{font-style:normal;color:#7fe3ee}
.final p{color:#b9d2df;margin:14px 0 26px}
.final .btns{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.final .btns a{flex:0 0 auto;min-width:300px;box-sizing:border-box;text-align:center;
  font-size:clamp(21px,4vw,29px);font-weight:800;padding:17px 34px;border-radius:12px;text-decoration:none}
.final .kk{background:#FEE500;color:#191919}
.final .kk:hover{background:#f5dc00}
@media(max-width:720px){.final .btns a{min-width:0;width:100%}}
.final .tel{display:inline-block;background:var(--teal);color:#fff;text-decoration:none;
  font-size:clamp(21px,4vw,29px);font-weight:800;padding:17px 42px;border-radius:12px}
.final .tel:hover{background:var(--teal-d)}

/* 푸터 */
.foot{background:var(--navy-d);color:#8ba7bb;font-size:14.5px;line-height:1.9;padding:28px 0 124px}
.foot b{color:#fff}
.foot .row{display:flex;flex-wrap:wrap;gap:2px 18px}
.foot img{height:26px;width:auto;margin-bottom:12px;opacity:.9}

/* 고정 바 */
.bar{position:fixed;left:0;right:0;bottom:0;z-index:99;background:var(--navy);
  padding:14px 16px 16px;box-shadow:0 -4px 18px rgba(0,0,0,.32);
  display:flex;align-items:center;justify-content:center;gap:22px}
.bar .t{color:#fff;font-weight:700;font-size:19px;white-space:nowrap}
.bar .t em{font-style:normal;color:#7fe3ee}
.bar a{background:var(--teal);color:#fff;text-decoration:none;font-weight:800;font-size:25px;
  padding:15px 38px;border-radius:999px;white-space:nowrap;min-width:280px;text-align:center}
.bar a.kk{background:#FEE500;color:#191919}
@media(max-width:640px){.bar .t{display:none}.bar{gap:10px;padding:12px 12px 14px}
  .bar a{flex:1 1 0;min-width:0;text-align:center;font-size:19px;padding:14px 8px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---- 사례 글 목록 / 본문 ---- */
.postlist{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:18px}
.pcard{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff}
.pcard img{aspect-ratio:4/3;object-fit:cover;width:100%}
.pcard .tx{padding:16px 18px 20px}
.pcard h3{font-size:18px;margin-bottom:6px}
.pcard p{color:var(--muted);font-size:14px}
.pcard a{text-decoration:none;display:block}
.entry{max-width:820px;margin:0 auto;padding:38px 0 12px}
.entry h1{font-size:30px;margin-bottom:10px}
.entry .meta{color:var(--muted);font-size:14px;margin-bottom:22px}
.entry p{margin:0 0 16px}
.entry img{border-radius:10px;margin:14px 0}
.entry h2{font-size:22px;margin:28px 0 10px}
.pager{padding:26px 0}
.pager ul{display:flex;gap:10px;justify-content:center;list-style:none;padding:0;margin:0}
.pager a,.pager span{padding:8px 14px;border:1px solid var(--line);border-radius:8px;text-decoration:none;display:block}
.pager .current{background:var(--navy);color:#fff;border-color:var(--navy)}