@charset "utf-8";
/* 빡클린 브릿지 — 해운대 에어컨청소 (템플릿 A-bbakclean)
   배치 출처: 클릭엔 designskin169(출장수리·집수리) — 섹션 순서·분할 비율·여백만 참고
   색·글꼴·문안·이미지는 빡클린 것. 클래스 앞머리는 bk-. */

@font-face{
  font-family:'PretendardVariable';
  src:url('../fonts/PretendardVariable-sub.woff2') format('woff2-variations');
  font-weight:45 920; font-style:normal; font-display:swap;
}

:root{
  --blue:#1B62E8; --blue-l:#4B8BFF; --blue-d:#0F49BD; --navy:#0B2E70;
  --yellow:#FFE45E;
  --ink:#141A24; --gray:#5B6472; --gray-l:#8A93A2;
  --line:#E4E9F1; --soft:#F4F7FC; --white:#fff;
  --wrap:1240px; --hero:1110px;
  --r:18px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--white); color:var(--ink);
  font-family:'PretendardVariable','Pretendard',-apple-system,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  font-size:16px; line-height:1.72; letter-spacing:-.01em;
  padding-bottom:0;
}
/* width/height 속성은 레이아웃 예약용이다. 실제 높이는 aspect-ratio 가 정한다 */
img{max-width:100%; height:auto; display:block; border:0}
a{color:inherit; text-decoration:none}
ul,ol{margin:0; padding:0; list-style:none}
h1,h2,h3,h4{margin:0; word-break:keep-all; text-wrap:balance; line-height:1.34; letter-spacing:-.025em}
p,li,dd,dt,summary,figcaption{word-break:keep-all; text-wrap:pretty}
p{margin:0}
strong{font-weight:800}
.bk-wrap{width:100%; max-width:var(--wrap); margin:0 auto; padding:0 20px}
.bk-mark{background:linear-gradient(180deg,transparent 62%,rgba(27,98,232,.22) 62%); padding:0 2px}
.bk-only-pc{display:block}
.bk-only-mo{display:none}

/* ── 섹션 공통 ───────────────────────────────── */
.bk-sec{padding:76px 0}
.bk-sec.alt{background:var(--soft); box-shadow:0 0 0 100vmax var(--soft); clip-path:inset(0 -100vmax)}
.bk-head{text-align:center; margin-bottom:38px}
.bk-head .eyebrow{
  display:inline-block; font-size:13px; font-weight:800; letter-spacing:.06em;
  color:var(--blue); background:rgba(27,98,232,.09);
  padding:6px 14px; border-radius:999px; margin-bottom:14px
}
.bk-head h2{font-size:29px; font-weight:800}
.bk-head .sub{margin-top:14px; color:var(--gray); font-size:16px}
.bk-head .sub span{display:block}

/* ── 헤더 ───────────────────────────────────── */
.bk-header{
  position:sticky; top:0; z-index:60; background:rgba(255,255,255,.96);
  backdrop-filter:saturate(1.4) blur(6px); border-bottom:1px solid var(--line)
}
.bk-header .in{display:flex; align-items:center; gap:20px; height:74px}
.bk-logo{display:flex; align-items:center; gap:9px; font-weight:900; font-size:21px; letter-spacing:-.04em}
.bk-logo i{
  width:32px; height:32px; border-radius:9px; background:var(--blue); color:#fff;
  display:grid; place-items:center; font-style:normal; font-size:16px; font-weight:900
}
.bk-logo b{color:var(--blue)}
.bk-logo em{font-style:normal; font-size:12px; font-weight:600; color:var(--gray-l); letter-spacing:0}
.bk-gnb{margin-left:auto; display:flex; gap:28px; font-size:15px; font-weight:600; color:#39414F}
.bk-gnb a:hover{color:var(--blue)}
.bk-callbtn{
  display:inline-flex; align-items:center; gap:7px; background:var(--blue); color:#fff;
  font-weight:800; font-size:15px; padding:11px 18px; border-radius:10px; white-space:nowrap
}

/* ── 히어로 (169 배치: 가운데 큰 카드 + 좌우 살짝 보이는 패널) ── */
.bk-hero{padding:26px 0 8px}
.bk-hero .rail{display:flex; align-items:stretch; justify-content:center; gap:16px}
.bk-hero .peek{
  flex:0 0 auto; width:200px; border-radius:var(--r); min-height:560px;
  background:linear-gradient(160deg,var(--navy),var(--blue-d));
  opacity:.16
}
.bk-hero .peek.r{background:linear-gradient(200deg,var(--blue),var(--navy))}
.bk-card{
  position:relative; flex:1 1 var(--hero); max-width:var(--hero); min-height:560px;
  border-radius:var(--r); overflow:hidden; background:#0B1220
}
.bk-card>img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:52% 34%}
.bk-card .veil{
  position:absolute; inset:0;
  background:linear-gradient(100deg,rgba(9,17,34,.90) 0%,rgba(9,17,34,.72) 42%,rgba(9,17,34,.12) 78%)
}
.bk-card .txt{position:relative; padding:60px 56px; max-width:640px; color:#fff}
.bk-card .tag{
  display:inline-block; font-size:13px; font-weight:800; letter-spacing:.02em;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.28);
  padding:6px 13px; border-radius:999px; margin-bottom:20px
}
.bk-card h1{font-size:44px; font-weight:900; color:#fff}
.bk-card h1 span{display:block}
.bk-card h1 span.l2{color:var(--yellow)}
.bk-card .lead{margin-top:20px; font-size:17px; color:rgba(255,255,255,.88)}
.bk-card .lead span{display:block}
.bk-btns{display:flex; flex-wrap:wrap; gap:11px; margin-top:30px}
.bk-btn{
  display:inline-flex; align-items:center; gap:8px; font-weight:800; font-size:16px;
  padding:15px 26px; border-radius:12px; border:2px solid transparent
}
.bk-btn.primary{background:var(--blue); color:#fff; box-shadow:0 10px 24px rgba(27,98,232,.34)}
.bk-btn.ghost{border-color:rgba(255,255,255,.55); color:#fff}
.bk-btn.line{border-color:var(--blue); color:var(--blue); background:#fff}
.bk-hero .strip{
  max-width:var(--hero); margin:16px auto 0; display:grid; grid-template-columns:repeat(4,1fr);
  gap:10px
}
.bk-hero .strip li{
  background:var(--soft); border:1px solid var(--line); border-radius:12px;
  padding:14px 12px; text-align:center; font-size:14px; font-weight:700; color:#2A3341
}
.bk-hero .strip li b{display:block; color:var(--blue); font-size:15px; margin-bottom:2px}

/* ── 인트로 ─────────────────────────────────── */
.bk-intro{padding:66px 0 10px; text-align:center}
.bk-intro h2{font-size:31px; font-weight:800}
.bk-intro p{margin-top:18px; color:var(--gray); font-size:16.5px}
.bk-intro p span{display:block}

/* ── 품목 5열 ───────────────────────────────── */
.bk-items{display:grid; grid-template-columns:repeat(5,1fr); gap:18px}
.bk-item{background:#fff; border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
.bk-item .ph{aspect-ratio:4/3; background:#EEF2F8}
.bk-item .ph img{width:100%; height:100%; object-fit:cover}
.bk-item .tx{padding:18px 16px 22px}
.bk-item h3{font-size:16.5px; font-weight:800}
.bk-item h3 i{
  display:block; font-style:normal; font-size:12px; font-weight:800; color:var(--blue);
  letter-spacing:.03em; margin-bottom:5px
}
.bk-item p{margin-top:9px; font-size:14px; color:var(--gray); line-height:1.66}

/* ── 전화 배너 띠 ───────────────────────────── */
.bk-callbar{background:linear-gradient(105deg,var(--navy),var(--blue-d) 62%,var(--blue))}
.bk-callbar .in{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:34px 20px; color:#fff; flex-wrap:wrap
}
.bk-callbar .t{font-size:16px; font-weight:700; color:rgba(255,255,255,.86)}
.bk-callbar .n{
  display:block; font-size:38px; font-weight:900; letter-spacing:-.02em; line-height:1.2; color:#fff
}
.bk-callbar .n:hover{color:var(--yellow)}
.bk-callbar .r{text-align:right; font-size:14.5px; color:rgba(255,255,255,.82)}
.bk-callbar .r b{color:var(--yellow)}

/* ── 요금표 ─────────────────────────────────── */
.bk-price{max-width:900px; margin:0 auto; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:#fff}
.bk-row{display:grid; grid-template-columns:1fr 118px 168px; align-items:center; gap:12px; padding:19px 24px; border-top:1px solid var(--line)}
.bk-row:first-child{border-top:0}
.bk-row .nm{font-size:16px; font-weight:700}
.bk-row .nm i{display:block; font-style:normal; font-size:13px; font-weight:500; color:var(--gray-l); margin-top:3px}
.bk-row .qt{text-align:center; font-size:14px; font-weight:800; color:var(--blue); background:rgba(27,98,232,.08); border-radius:999px; padding:6px 0}
.bk-row .wn{text-align:right; font-size:23px; font-weight:900; letter-spacing:-.03em}
.bk-row .wn u{text-decoration:none; font-size:15px; font-weight:700; margin-left:3px}
.bk-price .note{background:var(--soft); padding:18px 24px; font-size:14.5px; color:var(--gray); border-top:1px solid var(--line)}
.bk-badges{display:flex; flex-wrap:wrap; justify-content:center; gap:9px; margin-top:22px}
.bk-badges span{
  font-size:14px; font-weight:700; color:var(--blue-d); background:rgba(27,98,232,.09);
  border:1px solid rgba(27,98,232,.18); border-radius:999px; padding:8px 16px
}

/* ── 동네 3열 × 2 ───────────────────────────── */
.bk-dongs{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.bk-dong{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:26px 24px}
.bk-dong h3{font-size:19px; font-weight:800}
.bk-dong h3 em{font-style:normal; font-size:13px; font-weight:700; color:var(--blue); display:block; margin-bottom:6px}
.bk-dong p{margin-top:11px; font-size:14.5px; color:var(--gray)}

/* ── 비포애프터 ─────────────────────────────── */
.bk-bas{display:grid; grid-template-columns:repeat(2,1fr); gap:26px}
.bk-ba{background:#fff; border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
.bk-ba .pair{display:grid; grid-template-columns:1fr 1fr; gap:2px; background:var(--line)}
.bk-ba figure{margin:0; position:relative; background:#EEF2F8}
.bk-ba figure img{width:100%; aspect-ratio:3/4; object-fit:cover}
.bk-ba figcaption{
  position:absolute; left:10px; top:10px; font-size:12px; font-weight:900; letter-spacing:.06em;
  color:#fff; background:rgba(11,18,32,.78); padding:5px 11px; border-radius:999px
}
.bk-ba figure.after figcaption{background:var(--blue)}
.bk-ba .cap{padding:18px 20px 22px}
.bk-ba .cap h3{font-size:17px; font-weight:800}
.bk-ba .cap p{margin-top:8px; font-size:14.5px; color:var(--gray)}

/* ── 공정 4열 ───────────────────────────────── */
.bk-steps{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
.bk-step{background:#fff; border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
.bk-step .ph{position:relative}
.bk-step .ph img{width:100%; aspect-ratio:4/3; object-fit:cover}
.bk-step .ph b{
  position:absolute; left:12px; top:12px; width:34px; height:34px; border-radius:10px;
  background:var(--blue); color:#fff; display:grid; place-items:center; font-size:15px; font-weight:900
}
.bk-step .tx{padding:17px 18px 21px}
.bk-step h3{font-size:16.5px; font-weight:800}
.bk-step p{margin-top:8px; font-size:14px; color:var(--gray)}

/* ── 실적 ───────────────────────────────────── */
.bk-facts{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; max-width:820px; margin:0 auto}
.bk-fact{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:28px 18px; text-align:center}
.bk-fact b{display:block; font-size:38px; font-weight:900; color:var(--blue); letter-spacing:-.03em; line-height:1.2}
.bk-fact span{display:block; margin-top:6px; font-size:14.5px; font-weight:700; color:#2A3341}
.bk-factnote{text-align:center; margin-top:20px; font-size:14px; color:var(--gray-l)}

/* ── 동선 / 업체정보 ───────────────────────── */
.bk-route{display:grid; grid-template-columns:1.15fr 1fr; gap:26px; align-items:stretch}
.bk-route .box{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:32px 30px}
.bk-route .box h3{font-size:21px; font-weight:800}
.bk-route .box p{margin-top:14px; font-size:15.5px; color:var(--gray)}
.bk-route .box p span{display:block}
.bk-path{display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-top:22px}
.bk-path li{font-size:14px; font-weight:800; color:var(--blue-d); background:rgba(27,98,232,.09); border-radius:10px; padding:9px 14px}
.bk-path li.ar{background:none; color:var(--gray-l); padding:0 2px; font-weight:600}
.bk-info li{display:flex; gap:14px; padding:13px 0; border-top:1px solid var(--line); font-size:15px}
.bk-info li:first-child{border-top:0; padding-top:0}
.bk-info li b{flex:0 0 82px; color:var(--gray-l); font-weight:700}
.bk-info li span{color:#2A3341; font-weight:600}
.bk-info li a{color:var(--blue); font-weight:800}

/* ── FAQ ────────────────────────────────────── */
.bk-faq{max-width:900px; margin:0 auto}
.bk-faq details{background:#fff; border:1px solid var(--line); border-radius:14px; margin-top:11px; overflow:hidden}
.bk-faq details[open]{border-color:var(--blue-l); box-shadow:0 8px 24px rgba(27,98,232,.09)}
.bk-faq summary{
  list-style:none; cursor:pointer; padding:20px 56px 20px 22px; position:relative;
  font-size:16.5px; font-weight:800
}
.bk-faq summary::-webkit-details-marker{display:none}
.bk-faq summary::before{content:'Q'; color:var(--blue); font-weight:900; margin-right:9px}
.bk-faq summary::after{
  content:''; position:absolute; right:24px; top:50%; width:10px; height:10px;
  border-right:2.5px solid var(--gray-l); border-bottom:2.5px solid var(--gray-l);
  transform:translateY(-70%) rotate(45deg); transition:transform .18s
}
.bk-faq details[open] summary::after{transform:translateY(-30%) rotate(225deg); border-color:var(--blue)}
.bk-faq .ans{padding:0 22px 22px; font-size:15.5px; color:var(--gray)}
.bk-faq .ans span{display:block}
.bk-faq .ans span+span{margin-top:9px}
.bk-faq .ans b{color:var(--ink)}

/* ── 하단 CTA ───────────────────────────────── */
.bk-cta{background:linear-gradient(120deg,var(--navy),var(--blue-d)); color:#fff; text-align:center; padding:74px 0}
.bk-cta h2{font-size:31px; font-weight:900}
.bk-cta p{margin-top:16px; font-size:16.5px; color:rgba(255,255,255,.85)}
.bk-cta p span{display:block}
.bk-cta .bk-btns{justify-content:center; margin-top:30px}
.bk-cta .bk-btn.primary{background:#fff; color:var(--blue-d); box-shadow:0 12px 26px rgba(0,0,0,.24)}

/* ── 푸터 ───────────────────────────────────── */
.bk-footer{background:#0E1420; color:#9AA5B5; padding:52px 0 40px; font-size:14px}
.bk-footer .top{display:flex; justify-content:space-between; gap:26px; flex-wrap:wrap; padding-bottom:26px; border-bottom:1px solid rgba(255,255,255,.09)}
.bk-footer .bk-logo{color:#fff}
.bk-footer .bk-logo b{color:var(--blue-l)}
.bk-footer .bk-logo em{color:#6E7A8C}
.bk-footer nav{display:flex; gap:22px; font-weight:600; color:#C3CCD9}
.bk-footer dl{margin:24px 0 0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 30px}
.bk-footer dl div{display:flex; gap:11px}
.bk-footer dt{flex:0 0 74px; color:#6E7A8C}
.bk-footer dd{margin:0; color:#C3CCD9}
.bk-footer dd a{color:var(--blue-l); font-weight:800}
.bk-footer .cr{margin-top:26px; font-size:13px; color:#5D6879}

/* ── 모바일 하단 고정 전화 바 ───────────────── */
.bk-fixbar{display:none}

/* ── 반응형 ─────────────────────────────────── */
@media (max-width:1180px){
  .bk-hero .peek{display:none}
  .bk-items{grid-template-columns:repeat(3,1fr)}
  .bk-steps{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .bk-gnb{display:none}
  .bk-card{min-height:0}
  .bk-card .txt{padding:44px 26px}
  .bk-card h1{font-size:32px}
  .bk-hero .strip{grid-template-columns:repeat(2,1fr)}
  .bk-dongs{grid-template-columns:repeat(2,1fr)}
  .bk-bas{grid-template-columns:1fr}
  .bk-route{grid-template-columns:1fr}
  .bk-row{grid-template-columns:1fr 92px; row-gap:6px}
  .bk-row .wn{grid-column:2/3; text-align:right}
  .bk-callbar .in{justify-content:center; text-align:center}
  .bk-callbar .r{text-align:center; width:100%}
  /* 요금 행: 품목은 한 줄 전체, 아래에 수량칩과 금액 */
  .bk-row{grid-template-columns:1fr auto; row-gap:10px; padding:17px 18px}
  .bk-row .nm{grid-column:1/-1}
  .bk-row .qt{grid-column:1/2; width:92px}
  .bk-row .wn{grid-column:2/3; white-space:nowrap; font-size:21px}
}
@media (max-width:620px){
  body{padding-bottom:70px}
  .bk-sec{padding:52px 0}
  .bk-head h2,.bk-intro h2,.bk-cta h2{font-size:24px}
  /* h1 두 줄(16·15자)이 모바일에서 세 줄로 접히지 않게 글자 크기를 맞춘다 */
  .bk-card h1{font-size:22px}
  .bk-card .lead{font-size:15.5px}
  .bk-card .txt{padding:34px 17px}
  .bk-btn{font-size:15px; padding:14px 18px; justify-content:center}
  .bk-hero .bk-btns .bk-btn,.bk-cta .bk-btns .bk-btn{flex:1 1 100%}
  .bk-logo em{display:none}
  .bk-logo{font-size:19px}
  .bk-callbtn{font-size:13.5px; padding:10px 12px}
  .bk-hero .strip li{font-size:13px; padding:12px 9px}
  .bk-items{grid-template-columns:repeat(2,1fr)}
  .bk-items .bk-item:last-child{grid-column:1/-1}
  .bk-items .bk-item:last-child .ph{aspect-ratio:16/9}
  .bk-dongs{grid-template-columns:1fr}
  .bk-facts{grid-template-columns:1fr}
  .bk-footer dl{grid-template-columns:1fr}
  .bk-only-pc{display:none}
  .bk-only-mo{display:block}
  .bk-callbar .n{font-size:30px}
  .bk-fixbar{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:80;
    background:rgba(255,255,255,.97); border-top:1px solid var(--line);
    padding:10px 12px; gap:9px; box-shadow:0 -6px 18px rgba(16,24,40,.10)
  }
  .bk-fixbar a{
    flex:1 1 0; display:flex; align-items:center; justify-content:center; gap:7px;
    height:50px; border-radius:12px; font-size:16px; font-weight:800
  }
  .bk-fixbar .call{background:var(--blue); color:#fff}
  .bk-fixbar .price{background:var(--soft); color:var(--blue-d); border:1px solid var(--line)}
}