/* 에이스홈픽스 세면대 수도꼭지 교체 — 온수·냉수 레버: 도기 흰색·남색·온수 빨강·냉수 파랑·크롬 은색.
   제목 엘리스 디지털배움 Bold(fonts-archive/EliceDigitalBaeum), 본문 시스템 고딕. 휴대폰 먼저, 숨은 조작 없음. */
@font-face{font-family:'Elice Digital Baeum';font-weight:700;font-style:normal;font-display:swap;
 src:url('https://cdn.jsdelivr.net/gh/fonts-archive/EliceDigitalBaeum/EliceDigitalBaeum-Bold.woff2') format('woff2'),url('https://cdn.jsdelivr.net/gh/fonts-archive/EliceDigitalBaeum/EliceDigitalBaeum-Bold.woff') format('woff')}
:root{--ink:#14213d;--ink2:#3d4a66;--mute:#5d6982;--paper:#f5f7f9;--white:#fff;--line:#d5dce5;
 --hot:#d93a22;--hot-l:#fdebe6;--cold:#1d63c9;--cold-l:#e6f0fc;
 --chrome:linear-gradient(180deg,#fbfcfd 0%,#dfe5ec 45%,#b9c3ce 55%,#eef2f5 100%);
 --hd:'Elice Digital Baeum','Apple SD Gothic Neo','Malgun Gothic',sans-serif;--bd:-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Malgun Gothic','Noto Sans KR',sans-serif}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--bd);font-size:16px;line-height:1.7;word-break:keep-all;overflow-wrap:anywhere;padding-bottom:80px}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--hd);font-weight:700;line-height:1.35;letter-spacing:-.02em;margin:0}
p{margin:0 0 .8em}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:8px 12px;z-index:50}
.skip:focus{left:8px}

/* 머리: 두 색 윗띠 + 흰 바탕 로고 + 눈금 메뉴 */
.hd{background:var(--white);border-top:5px solid;border-image:linear-gradient(90deg,var(--hot) 0 50%,var(--cold) 50% 100%) 1;box-shadow:0 1px 0 var(--line)}
.hd-in{max-width:1080px;margin:0 auto;padding:10px 16px 6px}
.logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none;max-width:100%}
.logo svg{width:40px;height:40px;flex:none}
.l-bg{fill:var(--ink)}.l-sp{fill:none;stroke:#dfe5ec;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.l-hd{stroke:var(--hot);stroke-width:3.2;stroke-linecap:round}.l-dr{stroke:#6fb0ff;stroke-width:2.6;stroke-linecap:round}.l-bs{stroke:#8a96a8;stroke-width:2}
.logo-t{display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px;min-width:0}
.logo-t b{font-family:var(--hd);font-size:19px;white-space:nowrap;letter-spacing:-.02em}
.logo-t .kw{font-style:normal;font-size:12.5px;font-weight:700;color:#fff;background:var(--ink);border-radius:999px;padding:2px 10px;line-height:1.5;
 box-shadow:inset 3px 0 0 var(--hot),inset -3px 0 0 var(--cold)}
.dial{max-width:1080px;margin:0 auto;padding:4px 16px 12px}
.dial ul{list-style:none;margin:0;padding:3px;display:grid;grid-template-columns:repeat(4,1fr);gap:3px;border-radius:999px;background:var(--chrome);box-shadow:inset 0 1px 2px rgba(20,33,61,.25),0 0 0 1px #aeb8c4}
.dial li{display:flex}
.dial a{flex:1;display:flex;align-items:center;justify-content:center;gap:5px;min-height:38px;text-decoration:none;font-size:13.5px;font-weight:800;color:var(--ink);background:#fff;border-radius:999px;padding:2px 4px;text-align:center;line-height:1.25;box-shadow:0 1px 1px rgba(20,33,61,.15)}
.dial li:first-child a{box-shadow:inset 3px 0 0 var(--hot),0 1px 1px rgba(20,33,61,.15)}
.dial li:last-child a{box-shadow:inset -3px 0 0 var(--cold),0 1px 1px rgba(20,33,61,.15)}
.dial a:hover{color:var(--cold)}

/* 공통 틀 */
main{display:block}
.sec,.wrap>.sec{max-width:1080px;margin:0 auto;padding:36px 16px 8px}
.wrap{max-width:1080px;margin:0 auto}
.wrap>.sec{padding-left:16px;padding-right:16px}
.sec h2{font-size:24px;margin-bottom:12px}
.sec h3{font-size:18px;margin:18px 0 8px}
.kick{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:13px;font-weight:800;color:var(--cold);letter-spacing:.02em;margin:0 0 6px}
.kick i{width:9px;height:9px;border-radius:50%;display:inline-block}
.k-c{background:var(--cold)}.k-h{background:var(--hot)}
.sub{color:var(--mute)}
.answer{background:var(--white);border:1px solid var(--line);border-left:5px solid var(--cold);border-radius:12px;padding:14px 16px}
.more{display:inline-flex;align-items:center;gap:8px;margin:16px 0 4px;font-weight:800;text-decoration:none;color:var(--cold);border-bottom:2px solid var(--cold-l)}
.more::after{content:'→'}
.upd{font-size:13px;color:var(--mute);margin:6px 0 0}

/* 첫 화면: 냉·온으로 나뉜 판 */
.hero{background:linear-gradient(160deg,var(--cold-l) 0 48%,var(--white) 48% 52%,var(--hot-l) 52% 100%);border-bottom:1px solid var(--line)}
.hero-in{max-width:1080px;margin:0 auto;padding:26px 16px 26px}
.hero h1{font-size:31px;margin:6px 0 12px}
.h-main{display:block;color:var(--ink)}
.h-sub{display:block;font-size:.62em;color:var(--ink2);margin-top:6px}
.hero .lead{font-size:16.5px}
.hero .lead b{color:var(--ink);background:linear-gradient(transparent 62%,rgba(29,99,201,.16) 62%)}
.hero-pair{display:block;text-decoration:none;margin:18px 0 6px}
.hero-cap{display:block;font-size:14px;font-weight:700;color:var(--ink2);margin-top:8px;text-align:center}
.more-lead{font-size:14.5px;color:var(--ink2);margin:14px 0 0}

/* 크롬 테 전후 */
.fx{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:7px;border-radius:18px;background:var(--chrome);box-shadow:0 1px 2px rgba(20,33,61,.18)}
.fx-f{margin:0;position:relative;border-radius:12px;overflow:hidden;background:#dde3ea;aspect-ratio:3/4}
.fx-f img{width:100%;height:100%;object-fit:cover}
.fx .lb{position:absolute;left:0;right:0;top:0;z-index:1;text-align:center;font-size:13px;font-weight:800;color:#fff;padding:3px 4px;line-height:1.4}
.fx-b .lb{background:var(--cold)}.fx-a .lb{background:var(--hot)}
.fx-lv{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:38px;height:38px;border-radius:50%;background:var(--chrome);box-shadow:0 0 0 3px #fff,0 2px 6px rgba(20,33,61,.3);z-index:2;display:grid;place-items:center}
.fx-lv svg{width:30px;height:30px}
.lv-o{fill:none;stroke:#8a96a8;stroke-width:1.5}.lv-b{stroke:var(--ink);stroke-width:2.6;stroke-linecap:round}
.lv-h{stroke:var(--hot);stroke-width:3;stroke-linecap:round}.lv-c{fill:var(--cold)}
.fx.big{max-width:720px;margin-left:auto;margin-right:auto}
.fx.big .lb{font-size:14px;padding:5px}

/* 문의 버튼 */
.cta{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 4px}
.cta a{flex:1 1 150px;display:flex;align-items:center;justify-content:center;min-height:52px;border-radius:14px;font-weight:800;font-size:17px;text-decoration:none;white-space:nowrap;padding:0 12px}
.b-sms{background:var(--cold);color:#fff;box-shadow:inset 0 -3px 0 rgba(0,0,0,.18)}
.b-call{background:var(--white);color:var(--ink);border:2px solid var(--ink)}
.b-call::before{content:'';width:10px;height:10px;border-radius:50%;background:var(--hot);margin-right:8px;flex:none}

/* 증상 다이얼 목록 */
.dials{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:10px}
.dr{display:flex;align-items:center;gap:12px;background:var(--white);border:1px solid var(--line);border-radius:14px;padding:12px 14px;text-decoration:none;position:relative;overflow:hidden}
.dr::before{content:'';position:absolute;left:0;top:0;bottom:0;width:5px}
.dr.t-cold::before{background:var(--cold)}.dr.t-hot::before{background:var(--hot)}
.dl{width:46px;height:46px;flex:none}
.dl-o{fill:#f0f3f6;stroke:#b9c3ce;stroke-width:2}.dl-h{stroke:var(--ink);stroke-width:5;stroke-linecap:round}.dl-c{fill:#fff;stroke:var(--ink);stroke-width:2.5}
.dl-hot .dl-o{fill:var(--hot-l)}.dl-cold .dl-o{fill:var(--cold-l)}
.dr>span{flex:1;min-width:0;display:flex;flex-direction:column}
.dr b{font-size:16px;line-height:1.4}
.dr small{font-size:13.5px;color:var(--mute);font-weight:700}
.dr.t-cold small{color:var(--cold)}.dr.t-hot small{color:var(--hot)}
.go{width:26px;height:26px;border-radius:50%;background:var(--chrome);flex:none;position:relative;box-shadow:0 0 0 1px #b9c3ce}
.go::after{content:'';position:absolute;left:8px;top:8px;width:8px;height:8px;border-right:2.5px solid var(--ink);border-top:2.5px solid var(--ink);transform:rotate(45deg)}
.dr:hover{border-color:var(--ink2)}

/* 사례 명판 카드 */
.plates{display:grid;gap:18px;margin-top:12px}
.plate{display:block;text-decoration:none;background:var(--white);border-radius:20px;border:1px solid var(--line);overflow:hidden;box-shadow:0 2px 0 #c7d0da}
.plate .fx{border-radius:0;box-shadow:none;padding:8px 8px 0;background:transparent}
.plate-b{display:flex;flex-direction:column;gap:6px;padding:0 16px 16px}
.plate .kind{align-self:stretch;margin:10px -16px 4px;background:var(--chrome);border-top:1px solid #c7d0da;border-bottom:1px solid #c7d0da;font-size:13px;font-weight:800;color:var(--ink2);padding:5px 16px;letter-spacing:.02em}
.plate-t{font-family:var(--hd);font-size:18.5px;line-height:1.4}
.row{display:flex;gap:8px;font-size:14.5px;line-height:1.55}
.row b{flex:none;display:inline-flex;align-items:center;gap:5px;font-size:13px;color:var(--ink);min-width:66px}
.row b::before{content:'';width:8px;height:8px;border-radius:50%}
.r-c b::before{background:var(--cold)}.r-h b::before{background:var(--hot)}
.row span{color:var(--ink2)}
.plate:hover{border-color:var(--ink2)}

/* 서비스 카드: 왼쪽 사진·오른쪽 글 */
.svcs{display:grid;gap:14px;margin-top:12px}
.svc{display:grid;grid-template-columns:128px 1fr;min-height:150px;text-decoration:none;background:var(--white);border:1px solid var(--line);border-radius:16px;overflow:hidden;position:relative}
.svc-img img{width:100%;height:100%;object-fit:cover}
.svc-t{display:flex;flex-direction:column;justify-content:center;gap:4px;padding:14px 14px 14px 16px;min-width:0}
.svc-k{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:800}
.svc-k i{width:26px;height:9px;border-radius:9px;display:inline-block}
.t-cold .svc-k{color:var(--cold)}.t-cold .svc-k i{background:var(--cold)}
.t-hot .svc-k{color:var(--hot)}.t-hot .svc-k i{background:var(--hot)}
.svc strong{font-family:var(--hd);font-size:18px;line-height:1.35}
.svc-w{font-size:14px;color:var(--mute)}
.svc::after{content:'';position:absolute;right:12px;top:12px;width:34px;height:6px;border-radius:6px;background:var(--chrome);box-shadow:0 0 0 1px #b9c3ce}
.svc:hover{border-color:var(--ink2)}

/* 질문 카드: 물방울 배지 */
.qcs{display:grid;gap:14px;margin-top:10px}
.qc{background:var(--white);border:1px solid var(--line);border-radius:16px;padding:16px}
.qc-k{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:800;color:var(--cold);background:var(--cold-l);border-radius:999px;padding:3px 12px 3px 8px;margin:0 0 8px}
.qc:nth-child(even) .qc-k{color:var(--hot);background:var(--hot-l)}
.qc-k svg{width:12px;height:15px;fill:currentColor}
.qc h3{font-size:18px;margin:0 0 8px}
.qc-a{font-weight:700;color:var(--ink)}
.qc-more{color:var(--ink2);font-size:15px}
.qc-link{display:inline-flex;align-items:center;gap:6px;font-weight:800;font-size:14.5px;color:var(--cold);text-decoration:none}
.qc-link::after{content:'→'}

/* 작업 순서: 두 가닥 호스 + 육각 너트 */
.hose{list-style:none;margin:14px 0 0;padding:0;position:relative}
.hose::before,.hose::after{content:'';position:absolute;top:18px;bottom:18px;width:3px;border-radius:3px}
.hose::before{left:15px;background:var(--hot)}.hose::after{left:21px;background:var(--cold)}
.hose li{position:relative;display:grid;grid-template-columns:110px 1fr;gap:12px;padding:0 0 22px 50px}
.nut{position:absolute;left:0;top:0;width:40px;height:40px;display:grid;place-items:center;font-family:var(--hd);font-size:17px;color:#fff;z-index:1;
 background:var(--ink);clip-path:polygon(25% 3%,75% 3%,100% 50%,75% 97%,25% 97%,0 50%)}
.hose figure{margin:0;border-radius:12px;overflow:hidden;aspect-ratio:3/4;background:#dde3ea}
.hose figure img{width:100%;height:100%;object-fit:cover}
.stage{font-size:12.5px;font-weight:800;color:var(--cold);margin:0 0 2px}
.hose h3{font-size:16.5px;margin:0 0 4px}
.hose p{font-size:14.5px;color:var(--ink2);margin:0}
.hose li:last-child .stage{color:var(--hot)}

/* 문의: 남색 판 + 문자 미리보기 */
.msg{background:var(--ink);color:#fff;margin-top:40px}
.msg-in{max-width:760px;margin:0 auto;padding:32px 16px 30px}
.msg-k{font-size:13px;font-weight:800;color:#8fbcff;margin:0 0 6px}
.msg h2{font-size:23px;margin-bottom:10px}
.msg-lead{color:#d6deea}
.phone{background:#0c1629;border:2px solid #3b4a68;border-radius:26px;padding:14px 14px 12px;margin:16px 0}
.phone-h{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:800;color:#b8c6dc;margin:0 0 10px}
.phone-h i{width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,var(--hot) 0 50%,var(--cold) 50%)}
.bubble{background:var(--cold);color:#fff;border-radius:18px 18px 4px 18px;padding:12px 14px;margin:0 0 10px auto;max-width:94%;font-size:14.5px;line-height:1.5}
.bubble span{display:block}
.bubble span+span{margin-top:12px}
.bubble span:first-child{font-weight:800}
.phone-n{font-size:13px;color:#9fb0c9;margin:0}
.msg-h{font-size:16px;margin:18px 0 8px;color:#fff}
.shots{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.shots li{display:flex;gap:12px;align-items:flex-start;background:#1d2d4f;border-radius:14px;padding:10px 12px}
.shots svg{width:44px;height:44px;flex:none}
.s-ln,.s-fr{fill:none;stroke:#dfe5ec;stroke-width:2.4;stroke-linejoin:round;stroke-linecap:round}.s-mk{fill:none;stroke:#8fbcff;stroke-width:3;stroke-linecap:round}
.s-hot{fill:var(--hot)}.s-cold{fill:#4d9bff}
.shots span{font-size:14px;color:#d6deea;display:flex;flex-direction:column}
.shots b{color:#fff;font-size:15px}
.msg .b-call{background:transparent;color:#fff;border-color:#fff}
.msg .b-sms{background:#fff;color:var(--ink)}

/* 질문 답변 */
.qa{display:grid;gap:8px}
.qa details{background:var(--white);border:1px solid var(--line);border-radius:14px}
.qa summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;padding:14px 14px;font-weight:800;font-size:15.5px}
.qa summary::-webkit-details-marker{display:none}
.qa summary span{flex:1;min-width:0}
.pm{width:24px;height:24px;border-radius:50%;background:var(--chrome);box-shadow:0 0 0 1px #b9c3ce;flex:none;position:relative}
.pm::before,.pm::after{content:'';position:absolute;left:6px;right:6px;top:11px;height:2px;background:var(--ink)}
.pm::after{transform:rotate(90deg);transition:transform .15s}
.qa details[open] .pm::after{transform:rotate(0)}
.qa details[open]{border-color:var(--cold)}
.qa details p{padding:0 14px 14px;margin:0;color:var(--ink2)}

/* 지역 */
.area-red{color:#c8161d;font-size:16.5px}
.ars{display:grid;gap:18px;margin-top:12px}
.ar h3{display:flex;align-items:baseline;gap:8px;margin:0 0 8px;font-size:18px}
.ar h3 span{padding:2px 12px;border-radius:999px;color:#fff}
.ar-0 h3 span{background:var(--hot)}.ar-1 h3 span{background:var(--cold)}.ar-2 h3 span{background:var(--ink)}
.ar h3 small{font-family:var(--bd);font-size:13px;color:var(--mute)}
.ar ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:6px}
.ar a{display:flex;align-items:center;justify-content:center;text-align:center;min-height:40px;padding:4px 6px;background:var(--white);border:1px solid var(--line);border-radius:10px;text-decoration:none;font-size:14px;font-weight:700;line-height:1.3}
.ar a:hover{border-color:var(--cold);color:var(--cold)}

/* 하위 페이지 머리 */
.ph{background:linear-gradient(160deg,var(--cold-l) 0 55%,var(--hot-l) 55% 100%);border-bottom:1px solid var(--line)}
.ph-in{max-width:1080px;margin:0 auto;padding:16px 16px 22px}
.crumb{font-size:13px;color:var(--mute);display:flex;flex-wrap:wrap;gap:4px 6px;margin-bottom:12px}
.crumb a{color:var(--ink2)}
.tag{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:800;background:var(--white);border:1px solid var(--line);border-radius:999px;padding:3px 12px;margin:0 0 10px}
.tag i{width:18px;height:9px;border-radius:9px;background:linear-gradient(90deg,var(--hot) 0 50%,var(--cold) 50%)}
.ph h1{font-size:26px;margin-bottom:10px}
.ph .lead{color:var(--ink2)}
.wrap>.fx.big{margin-top:22px;margin-left:16px;margin-right:16px}

/* 본문 요소 */
.pts{margin:16px 16px 0;padding:0;list-style:none;counter-reset:p;display:grid;gap:8px}
.pts li{counter-increment:p;display:flex;gap:10px;align-items:flex-start;background:var(--white);border:1px solid var(--line);border-radius:12px;padding:10px 12px;font-weight:700;font-size:15px}
.pts li::before{content:counter(p);flex:none;width:24px;height:24px;border-radius:50%;background:var(--ink);color:#fff;font-size:13px;display:grid;place-items:center;font-family:var(--hd)}
.sec .pts{margin:10px 0}
.toc{margin:22px 16px 0;background:var(--white);border:1px solid var(--line);border-radius:14px;padding:12px 16px}
.toc p{font-weight:800;margin:0 0 6px;font-size:14px;color:var(--cold)}
.toc ol{margin:0;padding-left:20px;display:grid;gap:4px}
.toc a{text-decoration:none;font-weight:700;font-size:15px}
.facts{display:grid;gap:10px}
.facts div{background:var(--white);border:1px solid var(--line);border-top:4px solid var(--cold);border-radius:12px;padding:12px 14px}
.facts div:nth-child(2){border-top-color:var(--hot)}
.facts h3{margin:0 0 4px;font-size:16.5px}
.facts p{margin:0;font-size:15px;color:var(--ink2)}
.cmp{display:grid;gap:10px}
.cmp-r{background:var(--white);border:1px solid var(--line);border-radius:14px;padding:12px 14px}
.cmp-r strong{display:block;font-family:var(--hd);font-size:17px;margin-bottom:6px}
.cmp-r p{margin:0 0 4px;font-size:14.5px;color:var(--ink2);display:flex;gap:8px}
.cmp-r p b{flex:none;color:var(--ink);min-width:62px}
.chk{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.chk li{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line);border-left:4px solid var(--hot);border-radius:10px;padding:10px 12px}
.chk li:nth-child(even){border-left-color:var(--cold)}
.chk b{font-size:15.5px}
.chk span{font-size:14.5px;color:var(--ink2)}
.sum{margin:0;display:grid;gap:8px}
.sum div{display:flex;gap:10px;background:var(--white);border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.sum dt{flex:none;min-width:72px;font-weight:800;color:var(--cold)}
.sum dd{margin:0}
.sum ul{margin:0;padding-left:18px}
.rqs{display:grid;gap:12px}
.rq{display:grid;grid-template-columns:96px 1fr;gap:12px;background:var(--white);border:1px solid var(--line);border-radius:14px;overflow:hidden;text-decoration:none}
.rq-img img{width:100%;height:100%;object-fit:cover}
.rq-t{display:flex;flex-direction:column;gap:4px;padding:10px 12px 10px 0;font-size:14.5px;color:var(--ink2)}
.rq-t strong{color:var(--ink);font-size:16px}
.rq-t em{font-style:normal;font-size:13px;font-weight:700;color:var(--cold)}
.warn{margin:0;padding-left:20px;display:grid;gap:4px}
.why-pick{color:var(--ink2)}
.rl{list-style:none;margin:0 0 10px;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.rl a{display:inline-block;padding:6px 12px;border:1px solid var(--line);border-radius:999px;background:var(--white);text-decoration:none;font-size:14px;font-weight:700}
.links h2{margin-top:10px}
.ex{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ex figure{margin:0;background:var(--white);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.ex img{aspect-ratio:3/4;object-fit:cover;width:100%}
.ex figcaption{padding:8px 10px;font-size:13.5px;color:var(--ink2);display:flex;flex-direction:column}
.ex figcaption b{color:var(--ink);font-size:14.5px}
.tip{background:var(--cold-l);border-radius:12px;padding:10px 12px;margin-top:10px;font-size:14.5px}
.flow-list{margin:0;padding-left:22px;display:grid;gap:6px}
.sec h2 small{font-family:var(--bd);font-size:14px;color:var(--mute)}
.sec h2 a{text-decoration:none}

/* 하단 고정 [번호][문자보내기] */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;gap:8px;padding:8px 10px calc(8px + env(safe-area-inset-bottom));background:var(--white);
 border-top:4px solid;border-image:linear-gradient(90deg,var(--hot) 0 50%,var(--cold) 50% 100%) 1;box-shadow:0 -4px 14px rgba(20,33,61,.12);transition:transform .2s,visibility .2s}
.dock a{flex:1;display:flex;align-items:center;justify-content:center;min-height:50px;border-radius:12px;font-weight:800;font-size:16.5px;text-decoration:none;white-space:nowrap}
.dk-call{border:2px solid var(--ink);color:var(--ink)}
.dk-sms{background:var(--cold);color:#fff}
.dock.hide{transform:translateY(110%);visibility:hidden}

/* 넓은 화면 */
@media (min-width:700px){
 .hero h1{font-size:42px}
 .dials{grid-template-columns:1fr 1fr}
 .plates{grid-template-columns:repeat(auto-fill,minmax(310px,1fr))}
 .svcs{grid-template-columns:1fr 1fr}
 .svc{grid-template-columns:170px 1fr}
 .qcs{grid-template-columns:1fr 1fr}
 .facts,.cmp{grid-template-columns:repeat(3,1fr)}
 .hose li{grid-template-columns:180px 1fr}
 .rqs{grid-template-columns:1fr 1fr 1fr}
 .rq{grid-template-columns:1fr;}
 .rq-img img{aspect-ratio:4/3}
 .rq-t{padding:0 12px 12px}
 .ex{max-width:560px}
 .dock{width:min(560px,100%);left:50%;right:auto;transform:translateX(-50%);border-radius:16px 16px 0 0}
 .dock.hide{transform:translate(-50%,110%)}
 .ph h1{font-size:32px}
 .hero .fx.big{max-width:560px}
}
@media (min-width:1000px){
 .hero-in{display:grid;grid-template-columns:1fr 480px;column-gap:40px;align-items:start}
 .hero-in>*{grid-column:1}
 .hero-pair{grid-column:2;grid-row:1/span 6;margin-top:6px}
}
@media (max-width:359px){
 .logo-t b{font-size:17px}
 .logo svg{width:34px;height:34px}
 .hero h1{font-size:27px}
 .svc{grid-template-columns:100px 1fr}
 .hose li{grid-template-columns:86px 1fr;padding-left:46px}
 .dial a{font-size:12.5px}
 .cta a{font-size:16px}
 .dock a{font-size:15.5px}
}