@charset "utf-8";
/* 빡클린 브릿지 — 부산 북구 에어컨청소 / 템플릿 C-bbakclean (designskin08 배치) */

:root{
  --blue:#1B62E8;
  --light:#4B8BFF;
  --dark:#0F49BD;
  --navy:#0B2E70;
  --yellow:#FFE45E;
  --ink:#16233d;
  --muted:#5b6b88;
  --soft:#F4F7FE;
  --line:#dbe4f7;
  --w:1180px;
  --font:"Pretendard","Pretendard Variable",-apple-system,BlinkMacSystemFont,system-ui,
         "Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font);color:var(--ink);background:#fff;
     font-size:16px;line-height:1.75;letter-spacing:-.01em;padding-bottom:0}
/* height:auto 가 없으면 <img width height> 속성값이 이겨서 aspect-ratio 를 준 사진이 세로로 늘어난다 */
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{word-break:keep-all;text-wrap:balance;margin:0;line-height:1.35}
p{word-break:keep-all;text-wrap:pretty;margin:0}
/* 카드·표·토글 안 글자가 낱말 가운데서 끊기지 않게 — h*·p 만으로는 모자란다 */
li,dt,dd,summary,figcaption,b,i,u,span,mark{word-break:keep-all}
mark{background:linear-gradient(to top,rgba(255,228,94,.85) 42%,transparent 42%);
     color:inherit;padding:0 2px}

/* ── 공통 ─────────────────────────────── */
.bk-sec{max-width:var(--w);margin:0 auto;padding:88px 20px 96px}
.bk-sec-alt{max-width:none;background:var(--soft);padding-left:20px;padding-right:20px}
/* .bk-sec-head 의 margin 단축속성에 지지 않도록 클래스 두 개로 특정도를 올린다 */
.bk-sec.bk-sec-alt>*{max-width:var(--w);margin-left:auto;margin-right:auto}
.bk-sec-head{margin:0 0 44px}
.bk-eyebrow{font-size:13px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
            color:rgba(255,255,255,.72);margin:0 0 12px}
.bk-eyebrow-d{color:var(--blue)}
.bk-sec-head h2{font-size:34px;font-weight:900;letter-spacing:-.03em}
.bk-lead{margin:18px 0 0;color:var(--muted);font-size:17px}
.bk-sec-head-w h2,.bk-sec-head-w .bk-lead{color:#fff}
.bk-sec-head-w .bk-lead{color:rgba(255,255,255,.82)}

.bk-btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.bk-btn{display:inline-block;padding:15px 26px;border-radius:999px;font-weight:800;
        font-size:16px;letter-spacing:-.02em;border:2px solid transparent;transition:.15s}
.bk-btn-p{background:var(--blue);color:#fff;border-color:var(--blue)}
.bk-btn-p:hover{background:var(--dark);border-color:var(--dark)}
.bk-btn-g{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.bk-btn-g:hover{background:rgba(255,255,255,.14)}
.bk-btn-y{background:var(--yellow);color:var(--navy);border-color:var(--yellow);
          font-size:19px;padding:18px 38px}
.bk-btn-y:hover{filter:brightness(.95)}

/* ── 헤더 ─────────────────────────────── */
.bk-head{position:sticky;top:0;z-index:50;background:var(--navy)}
.bk-head-in{max-width:var(--w);margin:0 auto;padding:0 20px;height:66px;
            display:flex;align-items:center;gap:20px}
.bk-logo{display:flex;align-items:baseline;gap:8px;color:#fff}
.bk-logo b{font-size:22px;font-weight:900;letter-spacing:-.04em}
.bk-logo span{font-size:12px;color:rgba(255,255,255,.62);letter-spacing:.02em}
.bk-nav{margin-left:auto;display:flex;gap:26px}
.bk-nav a{color:rgba(255,255,255,.8);font-size:15px;font-weight:700}
.bk-nav a:hover{color:var(--yellow)}
.bk-head-tel{background:var(--blue);color:#fff;font-weight:800;font-size:15px;
             padding:10px 18px;border-radius:999px;white-space:nowrap}
.bk-head-tel:hover{background:var(--light)}

/* ── 1. 히어로 ────────────────────────── */
.bk-hero{background:var(--navy)}
.bk-hero-img{position:relative;overflow:hidden;border-top-left-radius:180px;
             background:#0a2258;padding:0;margin:0 0 0 0}
.bk-hero-img>img{width:100%;height:clamp(320px,52vw,620px);object-fit:cover;object-position:center 42%}
.bk-hero-img::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(11,46,112,.55) 0%,rgba(11,46,112,.12) 55%,rgba(11,46,112,0) 100%)}
.bk-hero-mark{position:absolute;left:4%;bottom:-.18em;z-index:2;
  font-size:clamp(64px,12vw,168px);font-weight:900;line-height:.9;letter-spacing:-.04em;
  color:rgba(255,255,255,.22)}
.bk-hero-band{background:var(--navy)}
.bk-hero-band-in{max-width:var(--w);margin:0 auto;padding:44px 20px 62px;
                 display:flex;flex-direction:column;align-items:flex-end;text-align:right}
.bk-hero-band-in h1{font-size:clamp(30px,4.6vw,50px);font-weight:900;color:#fff;
                    letter-spacing:-.035em;line-height:1.28}
.bk-hero-sub{margin:20px 0 0;color:rgba(255,255,255,.82);font-size:17px;line-height:1.8}
.bk-hero-band-in .bk-btns{justify-content:flex-end}

/* ── 2. 브랜드 한 줄 ──────────────────── */
.bk-brand{text-align:center;padding:76px 20px 20px}
.bk-brand-big{font-size:clamp(24px,3.2vw,34px);font-weight:900;letter-spacing:-.035em;
              color:var(--ink)}
.bk-brand-sub{margin-top:14px;color:#9aa7bd;font-size:15px}

/* ── 3. 2단 특징 ──────────────────────── */
.bk-feature{max-width:var(--w);margin:0 auto;padding:40px 20px 130px}
.bk-feature-in{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.bk-feature-img img{width:100%;border-radius:8px}
.bk-cap{margin-top:12px;font-size:14px;color:var(--muted)}
.bk-feature-txt h2{font-size:clamp(24px,2.9vw,32px);font-weight:900;letter-spacing:-.035em;
                   margin-bottom:22px}
.bk-feature-txt p{margin-bottom:14px;color:#3d4b66;font-size:16.5px}

/* ── 4. 공정 3카드 ────────────────────── */
.bk-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:34px}
.bk-step-img{overflow:hidden;border-radius:8px;background:var(--soft)}
.bk-step-img img{width:100%;aspect-ratio:4/3;object-fit:cover}
.bk-num{margin:22px 0 6px;font-size:14px;font-weight:900;letter-spacing:.16em;color:var(--light)}
.bk-step h3{font-size:21px;font-weight:900;letter-spacing:-.03em;margin-bottom:12px}
.bk-step p{color:var(--muted);font-size:15.5px}

/* ── 5. 세척 결과 ─────────────────────── */
.bk-result{background:var(--blue);padding:88px 20px 100px}
.bk-result>*{max-width:var(--w);margin-left:auto;margin-right:auto}
.bk-parts{display:grid;grid-template-columns:repeat(3,1fr);gap:40px 30px}
.bk-part{margin:0;text-align:center}
.bk-circ{width:100%;max-width:250px;margin:0 auto;aspect-ratio:1;border-radius:50%;
         overflow:hidden;background:#fff;border:6px solid rgba(255,255,255,.22)}
.bk-circ img{width:100%;height:100%;object-fit:cover}
.bk-part figcaption{margin-top:16px;color:#fff;font-weight:800;font-size:17px}

/* ── 6. 가격 ──────────────────────────── */
.bk-price{border-top:2px solid var(--ink)}
.bk-row{display:grid;grid-template-columns:1fr auto auto;gap:16px;align-items:center;
        padding:20px 8px;border-bottom:1px solid var(--line)}
.bk-row-hi{background:var(--soft)}
.bk-pname b{display:block;font-size:17px;font-weight:800;letter-spacing:-.02em}
.bk-pname i{display:block;font-style:normal;font-size:13.5px;color:#9aa7bd;margin-top:3px}
.bk-qty{min-width:86px;text-align:center;font-size:14px;font-weight:800;color:var(--blue);
        background:var(--soft);border-radius:999px;padding:6px 12px}
.bk-row-hi .bk-qty{background:#fff}
.bk-won{min-width:130px;text-align:right;font-size:23px;font-weight:900;letter-spacing:-.03em}
.bk-won u{text-decoration:none;font-size:14px;font-weight:700;color:var(--muted);margin-left:3px}
.bk-badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.bk-badges span{background:var(--soft);color:var(--dark);font-size:14px;font-weight:800;
                padding:8px 16px;border-radius:999px}
.bk-note{margin-top:20px;color:var(--muted);font-size:15px}

/* ── 7. 출장지역 ──────────────────────── */
.bk-areas{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.bk-area{background:#fff;border:1px solid var(--line);border-radius:10px;padding:26px 24px}
.bk-area h3{font-size:19px;font-weight:900;letter-spacing:-.03em;margin-bottom:10px;color:var(--dark)}
.bk-area p{color:var(--muted);font-size:15px}

/* ── 8. FAQ ───────────────────────────── */
.bk-faq{border-top:2px solid var(--ink)}
.bk-faq details{border-bottom:1px solid var(--line)}
.bk-faq summary{list-style:none;cursor:pointer;padding:22px 46px 22px 4px;position:relative;
                font-size:18px;font-weight:800;letter-spacing:-.025em;word-break:keep-all}
.bk-faq summary::-webkit-details-marker{display:none}
.bk-faq summary::after{content:"+";position:absolute;right:10px;top:50%;transform:translateY(-50%);
                       font-size:26px;font-weight:400;color:var(--blue);line-height:1}
.bk-faq details[open] summary::after{content:"−"}
.bk-faq details[open] summary{color:var(--blue)}
.bk-faq details>div{padding:0 46px 26px 4px}
.bk-faq details>div p{color:#3d4b66;font-size:16px}
.bk-faq details>div b{color:var(--ink)}

/* ── 9. 업체정보 ──────────────────────── */
.bk-info{border-top:2px solid var(--ink)}
.bk-info dl{display:grid;grid-template-columns:120px 1fr;gap:16px;margin:0;
            padding:18px 6px;border-bottom:1px solid var(--line)}
.bk-info dt{font-weight:800;color:var(--muted);font-size:15px}
.bk-info dd{margin:0;font-size:16px;font-weight:600}
.bk-info dd a{color:var(--blue);font-weight:900}

/* ── 10. 마지막 CTA ───────────────────── */
.bk-cta{background:var(--navy);border-top-right-radius:180px}
.bk-cta-in{max-width:var(--w);margin:0 auto;padding:92px 20px 100px;text-align:center}
.bk-cta-in h2{font-size:clamp(26px,3.6vw,38px);font-weight:900;color:#fff;letter-spacing:-.035em}
.bk-cta-in p{margin:20px 0 30px;color:rgba(255,255,255,.82);font-size:17px}
.bk-cta-sub{margin:26px 0 0!important;font-size:14px!important;color:rgba(255,255,255,.6)!important}

/* ── 푸터 ─────────────────────────────── */
.bk-foot{background:#08214f;color:rgba(255,255,255,.68);font-size:14.5px}
.bk-foot-in{max-width:var(--w);margin:0 auto;padding:44px 20px 56px}
.bk-foot p{margin:0 0 6px}
.bk-foot-b{font-size:20px;font-weight:900;color:#fff;letter-spacing:-.03em;margin-bottom:14px!important}
.bk-foot-b span{font-size:14px;font-weight:600;color:rgba(255,255,255,.6);margin-left:8px}
.bk-foot a{color:var(--yellow);font-weight:800}
.bk-foot-s{margin-top:16px!important;font-size:13px;color:rgba(255,255,255,.42)}

/* ── 모바일 하단 전화 바 ──────────────── */
.bk-bar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:60;
        background:var(--blue);color:#fff;text-align:center;font-weight:800;font-size:17px;
        padding:16px 12px calc(16px + env(safe-area-inset-bottom));
        box-shadow:0 -6px 20px rgba(11,46,112,.28)}

/* ── 반응형 ───────────────────────────── */
@media (max-width:1024px){
  .bk-nav{display:none}
  .bk-feature-in{gap:36px}
  .bk-parts{gap:32px 24px}
}
@media (max-width:760px){
  body{padding-bottom:74px}
  .bk-bar{display:block}
  .bk-head-in{height:58px;gap:12px}
  .bk-logo b{font-size:19px}
  .bk-head-tel{font-size:13px;padding:8px 13px}
  .bk-sec{padding:56px 18px 60px}
  .bk-sec-head{margin-bottom:30px}
  .bk-sec-head h2{font-size:26px}
  .bk-lead{font-size:15.5px}
  .bk-hero-img{border-top-left-radius:76px}
  .bk-hero-img>img{height:300px}
  .bk-hero-band-in{padding:30px 18px 40px;align-items:flex-start;text-align:left}
  .bk-hero-band-in .bk-btns{justify-content:flex-start}
  .bk-hero-sub{font-size:15.5px}
  .bk-brand{padding:52px 18px 8px}
  .bk-feature{padding:28px 18px 66px}
  .bk-feature-in{grid-template-columns:1fr;gap:28px}
  .bk-steps{grid-template-columns:1fr;gap:38px}
  .bk-result{padding:56px 18px 64px}
  .bk-parts{grid-template-columns:repeat(2,1fr);gap:26px 18px}
  .bk-circ{max-width:170px;border-width:4px}
  .bk-part figcaption{font-size:15px;margin-top:12px}
  .bk-row{grid-template-columns:1fr auto;gap:6px 12px;padding:16px 4px}
  .bk-pname{grid-column:1/-1}
  .bk-qty{min-width:74px;justify-self:start}
  .bk-won{font-size:21px;min-width:0}
  .bk-areas{grid-template-columns:1fr;gap:14px}
  .bk-area{padding:20px 18px}
  .bk-faq summary{font-size:16.5px;padding:18px 40px 18px 2px}
  .bk-faq details>div{padding:0 8px 22px 2px}
  .bk-info dl{grid-template-columns:78px 1fr;gap:10px;padding:14px 4px}
  .bk-cta{border-top-right-radius:76px}
  .bk-cta-in{padding:60px 18px 68px}
  .bk-btn{padding:14px 22px;font-size:15px}
  .bk-btn-y{font-size:17px;padding:16px 28px}
}
@media (max-width:380px){
  .bk-hero-band-in h1{font-size:27px}
  .bk-btns{gap:8px}
  .bk-btn{width:100%;text-align:center}
}