/* 에이스홈픽스 싱크대 수전 호스 교체 — '하부장 속 호스'
   스테인리스 회색 바탕 · 짙은 하부장 청록 · 황동 너트 · 물빛 파랑 · 금속 편조 호스 줄무늬.
   제목 롯데 자이언츠체 Bold(가운뎃점 U+00B7은 글자가 없어 시스템 글꼴로), 본문 시스템 고딕. 휴대폰 기준, 숨은 조작 없음. */
@font-face{font-family:'GiantsKR';font-weight:400;src:url('https://cdn.jsdelivr.net/gh/fonts-archive/Giants/Giants-Bold.woff2') format('woff2');
  font-display:swap;unicode-range:U+0000-00B6,U+00B8-FFFF}
:root{
  --bg:#e6ecef;--bg2:#f3f6f7;--card:#fff;--ink:#13222a;--ink2:#3e5059;--line:#c3cfd5;
  --cab:#18302e;--cab2:#23443f;--brass:#d09434;--brass-d:#85550e;--water:#0b7aa3;--water-d:#085f80;--red:#c4161c;
  --braid:repeating-linear-gradient(45deg,#8da2ad 0 2px,#e2e9ed 2px 5px),repeating-linear-gradient(-45deg,#8da2ad 0 2px,transparent 2px 5px);
  --head:'GiantsKR',-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  --hex:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.7 -apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Malgun Gothic','Noto Sans KR',sans-serif;
  word-break:keep-all;overflow-wrap:anywhere;padding-bottom:76px}
img{max-width:100%;height:auto;display:block}
a{color:var(--water-d)}
h1,h2,h3{line-height:1.3;margin:0 0 .5em}
h1,h2{font-family:var(--head);font-weight:400;letter-spacing:-.01em}
h3{font-size:1.06rem}
p{margin:0 0 .8em}
.skip{position:absolute;left:-999px;top:0;background:#fff;padding:8px 12px;z-index:99}
.skip:focus{left:8px}
:focus-visible{outline:3px solid var(--brass);outline-offset:2px}

/* 머리: 하부장 띠 + 호스에 매달린 꼬리표 메뉴 */
.top{background:var(--cab);color:#fff}
.top-in{max-width:1080px;margin:0 auto;padding:10px 16px}
.brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none}
.brand svg{width:40px;height:40px;flex:0 0 40px}
.l-bg{fill:#0f2321;stroke:#3c625c;stroke-width:1.5}.l-fc{fill:none;stroke:#e7ecef;stroke-width:3.4;stroke-linecap:round}
.l-hs{fill:none;stroke:#9fb3bd;stroke-width:3;stroke-dasharray:2 1.4}.l-nut{fill:var(--brass)}
.brand-t{display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0}
.brand-t b{font-family:var(--head);font-weight:400;font-size:1.25rem;line-height:1.1;white-space:nowrap}
.kw-tag{font-style:normal;font-weight:800;font-size:.8rem;line-height:1.3;color:#221503;background:var(--brass);border-radius:3px 10px 10px 3px;
  padding:2px 10px 2px 18px;position:relative}
.kw-tag::before{content:"";position:absolute;left:5px;top:50%;width:8px;height:8px;margin-top:-4px;background:#221503;clip-path:var(--hex)}
.hang{background:var(--bg2);position:relative;padding:0 10px 10px;border-bottom:1px solid var(--line)}
.hang::before{content:"";display:block;height:9px;margin:0 -10px;background:var(--braid);border-bottom:1px solid #7f95a0}
.hang ul{list-style:none;margin:0 auto;padding:0;max-width:760px;display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.hang li{position:relative;padding-top:9px}
.hang li::before{content:"";position:absolute;left:50%;top:0;width:2px;height:12px;margin-left:-1px;background:#6f8591}
.hang a{display:flex;align-items:center;justify-content:center;min-height:44px;padding:10px 2px 6px;background:#fff;color:var(--ink);text-decoration:none;
  font-weight:800;font-size:.92rem;line-height:1.2;text-align:center;border:2px solid var(--ink);border-radius:3px 3px 10px 10px;
  clip-path:polygon(22% 0,78% 0,100% 18%,100% 100%,0 100%,0 18%);position:relative}
.hang a::before{content:"";position:absolute;left:50%;top:5px;width:7px;height:7px;margin-left:-3.5px;border-radius:50%;background:var(--bg2);box-shadow:0 0 0 2px var(--ink)}
.hang a:hover{background:#fff7e8}

/* 첫 화면 */
.hero{max-width:1080px;margin:0 auto;padding:18px 16px 8px;display:grid;gap:14px}
.hero-t{position:relative;padding-left:24px}
.hero-t::before,.ph-in::before{content:"";position:absolute;left:0;top:4px;bottom:14px;width:10px;border-radius:6px;background:var(--braid);box-shadow:inset 0 0 0 1px #7f95a0}
.hero-t::after,.ph-in::after{content:"";position:absolute;left:-3px;bottom:0;width:16px;height:14px;background:var(--brass);clip-path:var(--hex)}
.kick{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}
.kick span{font-size:.8rem;font-weight:800;color:var(--water-d);border:1.5px solid var(--water);border-radius:999px;padding:1px 10px;background:#fff}
.hero h1{margin-bottom:10px}
.h-main{display:block;font-size:clamp(1.85rem,8.4vw,2.7rem);color:var(--cab)}
.h-sub{display:block;margin-top:6px;font:800 1.08rem/1.4 -apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;color:var(--water-d)}
.lead{font-size:1rem}
.lead b{font-weight:700}
.cab{display:block;background:var(--cab);border-radius:16px;padding:10px 10px 12px;color:#fff;text-decoration:none;box-shadow:0 6px 0 #0d1c1b}
.cab-top{display:block;font-size:.84rem;line-height:1.4;color:#cfe3df;padding:0 4px 8px;font-weight:700}
.doors{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.door{margin:0;position:relative;border-radius:8px;overflow:hidden;background:#0f2220;border:3px solid #34605a;aspect-ratio:1/1}
.doors.big .door{aspect-ratio:3/4}
.door img{width:100%;height:100%;object-fit:cover}
.door::after{content:"";position:absolute;top:50%;width:5px;height:34px;margin-top:-17px;border-radius:3px;background:var(--brass);box-shadow:0 0 0 1.5px #221503}
.d-b::after{right:6px}.d-a::after{left:6px}
.nut{position:absolute;left:6px;top:6px;z-index:1;background:var(--brass);color:#221503;font-weight:800;font-size:.76rem;line-height:1.3;
  padding:2px 9px 2px 19px;border-radius:999px;white-space:nowrap}
.d-a .nut{left:auto;right:6px}
.nut::before{content:"";position:absolute;left:6px;top:50%;width:8px;height:8px;margin-top:-4px;background:#221503;clip-path:var(--hex)}
.hero-c .more-lead{color:var(--ink2);font-size:.95rem;margin-top:12px}

/* 문의 버튼 [문자보내기][번호] */
.cta{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.cta a{flex:1 1 auto;min-height:50px;display:flex;align-items:center;justify-content:center;padding:0 16px;border-radius:12px;font-weight:800;
  font-size:1.02rem;text-decoration:none;white-space:nowrap}
.b-sms{background:var(--water);color:#fff;box-shadow:0 3px 0 var(--water-d)}
.b-call{background:#fff;color:var(--ink);border:2px solid var(--ink);font-variant-numeric:tabular-nums}

/* 공통 절 */
.sec{max-width:1080px;margin:0 auto;padding:28px 16px}
.sec h2{font-size:1.55rem;color:var(--cab)}
.kick-s{margin:0 0 4px;font-weight:800;font-size:.84rem;color:var(--brass-d);display:flex;align-items:center;gap:6px}
.kick-s::before{content:"";width:12px;height:11px;background:var(--brass);clip-path:var(--hex)}
.sub{color:var(--ink2)}
.answer{background:#fff;border-radius:12px;padding:14px;border-left:6px solid var(--water)}
.more{display:inline-flex;align-items:center;min-height:46px;margin-top:14px;padding:0 18px;border:2px solid var(--cab);border-radius:999px;color:var(--cab);
  font-weight:800;text-decoration:none;background:#fff}
.more::after{content:"";width:9px;height:9px;margin-left:8px;background:var(--brass);clip-path:var(--hex)}

/* 증상 바로가기: 호스 토막 */
.hoses{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.hose{display:grid;grid-template-columns:42px 1fr 16px;align-items:center;gap:10px;position:relative;padding:9px 14px 9px 22px;background:#fff;
  border:2px solid var(--line);border-radius:14px;color:var(--ink);text-decoration:none;min-height:62px}
.hose::before{content:"";position:absolute;left:-2px;top:-2px;bottom:-2px;width:12px;border-radius:14px 0 0 14px;background:var(--braid);box-shadow:inset 0 0 0 1px #7f95a0}
.hose:hover{border-color:var(--water)}
.ic{width:42px;height:42px;border-radius:50%;background:#e8f2f6}
.i-w{fill:#bfe3f0;stroke:var(--water);stroke-width:2.4}.i-ln{fill:none;stroke:var(--ink);stroke-width:2.6;stroke-linecap:round}
.i-hs{fill:none;stroke:#7f95a0;stroke-width:4;stroke-dasharray:3 2}.i-b{fill:var(--brass);stroke:#5f3d08;stroke-width:1.6}
.i-y{fill:#f3c84b;stroke:#8a6a10;stroke-width:1.6}.i-d{fill:#4a4038;opacity:.55}
.hose-t{display:grid;min-width:0}
.hose-t b{font-size:1rem;line-height:1.35}
.hose-t small{font-size:.82rem;color:var(--water-d);font-weight:700}
.hose-n{width:16px;height:14px;background:var(--brass);clip-path:var(--hex)}

/* 사례 카드: 꼬리표 */
.cards{display:grid;gap:18px}
.card{display:block;position:relative;background:#fff;color:var(--ink);text-decoration:none;border:2px solid var(--ink);border-radius:6px 18px 18px 18px;
  padding:26px 10px 14px;box-shadow:0 4px 0 var(--ink)}
.card::before{content:"";position:absolute;left:0;right:0;top:0;height:16px;border-radius:4px 16px 0 0;background:var(--braid);border-bottom:2px solid var(--ink)}
.hole{position:absolute;left:14px;top:2px;width:12px;height:12px;border-radius:50%;background:var(--bg);box-shadow:0 0 0 2px var(--ink);z-index:1}
.card .door{border-width:2px;border-color:#9fb3bd;background:#dfe6ea}
.card .door::after{height:24px;margin-top:-12px;width:4px}
.card-b{display:grid;gap:5px;margin-top:10px}
.kind{justify-self:start;font-size:.78rem;font-weight:800;color:var(--water-d);background:#e1f0f6;border-radius:4px;padding:2px 8px;line-height:1.4}
.card-t{font-family:var(--head);font-weight:400;font-size:1.08rem;line-height:1.4}
.row{display:grid;grid-template-columns:4.6em 1fr;gap:6px;font-size:.9rem;line-height:1.5}
.row b{color:var(--brass-d)}
.card:hover{box-shadow:0 4px 0 var(--water)}

/* 서비스 카드: 부품 라벨 */
.parts{display:grid;gap:12px}
.part{display:grid;grid-template-columns:108px 1fr;min-height:112px;background:#fff;border:2px solid var(--line);border-radius:14px;overflow:hidden;color:var(--ink);text-decoration:none}
.part-img img{width:100%;height:100%;object-fit:cover}
.part-t{display:grid;align-content:center;gap:4px;padding:10px 12px}
.hex{display:inline-flex;align-items:center;justify-content:center;width:36px;height:30px;background:var(--brass);color:#221503;font-weight:800;font-size:.85rem;clip-path:var(--hex)}
.part-t strong{font-family:var(--head);font-weight:400;font-size:1.1rem;line-height:1.35}
.part-w{font-size:.86rem;color:var(--ink2);line-height:1.45}
.part:hover{border-color:var(--water)}

/* 호스만·수전째 */
.whole{display:grid;gap:12px;margin-top:12px}
.wh{background:#fff;border-radius:12px;padding:14px 16px;border-top:8px solid var(--water)}
.wh+.wh{border-top-color:var(--brass)}
.wh strong{display:block;font-family:var(--head);font-weight:400;font-size:1.25rem;margin-bottom:6px}
.wh p b{display:block;font-size:.82rem;color:var(--brass-d)}
.wh-ref{font-weight:800;font-size:.92rem}

/* 질문 카드 */
.qts{display:grid;gap:14px}
.qt{background:#fff;border-radius:16px;padding:16px;border:1px solid var(--line)}
.qt-k{display:inline-block;position:relative;margin:0 0 8px;background:var(--water);color:#fff;font-weight:800;font-size:.8rem;padding:2px 12px 2px 24px;border-radius:999px}
.qt-k::before{content:"";position:absolute;left:9px;top:50%;width:9px;height:11px;margin-top:-6px;background:#fff;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;clip-path:polygon(50% 0,100% 60%,85% 100%,15% 100%,0 60%)}
.qt-a{font-weight:700;border-left:4px solid var(--water);padding-left:10px}
.qt-more{color:var(--ink2);font-size:.95rem}
.qt-link{font-weight:800}

/* 작업 순서: 세로 편조 호스 */
.line{list-style:none;margin:0;padding:0 0 0 36px;position:relative}
.line::before{content:"";position:absolute;left:12px;top:12px;bottom:12px;width:10px;border-radius:6px;background:var(--braid);box-shadow:inset 0 0 0 1px #7f95a0}
.line li{position:relative;display:grid;gap:8px;margin:0 0 16px;background:#fff;border-radius:12px;padding:10px}
.line .no{position:absolute;left:-36px;top:12px;width:34px;height:30px;display:flex;align-items:center;justify-content:center;background:var(--brass);color:#221503;font-weight:800;clip-path:var(--hex)}
.line figure{margin:0}
.line img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:8px}
.stage{margin:0;font-size:.8rem;font-weight:800;color:var(--water-d)}
.line h3{margin:2px 0 4px}
.line p{margin:0 0 4px}

/* 문의 영역: 싱크볼 판 */
.sink{padding:30px 12px;background:linear-gradient(180deg,var(--bg),#d5dee3)}
.sink-in{max-width:780px;margin:0 auto;background:linear-gradient(165deg,#fbfdfe,#dde6ea);border:2px solid #aebdc5;border-radius:28px;padding:22px 16px;
  box-shadow:inset 0 3px 10px rgba(19,34,42,.12)}
.sink-k{margin:0 0 4px;font-weight:800;color:var(--brass-d);font-size:.85rem}
.sink h2{font-size:1.45rem;color:var(--cab)}
.sink-lead{color:var(--ink2)}
.slip{background:#fff;border-radius:14px;border-top:10px solid var(--water);padding:12px 14px;box-shadow:0 2px 6px rgba(19,34,42,.12)}
.slip-h{margin:0 0 6px;font-size:.8rem;font-weight:800;color:var(--water-d)}
.slip-b span{display:block;font-weight:700;font-size:.95rem;margin-bottom:8px;line-height:1.5}
.slip-n{margin:0;font-size:.85rem;color:var(--ink2)}
.sink-h{margin-top:18px}
.snap{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.snap li{display:grid;grid-template-columns:40px 1fr;gap:10px;align-items:start}
.snap svg{width:40px;height:40px;background:#fff;border-radius:10px}
.s-ln{fill:none;stroke:var(--ink);stroke-width:2.4;stroke-linejoin:round}.s-hs{fill:none;stroke:#7f95a0;stroke-width:3.4;stroke-dasharray:3 2}.s-b{fill:var(--brass);stroke:var(--brass-d);stroke-width:2}
.snap b{display:block}
.snap span{font-size:.92rem}

/* 질문 답변 */
.qa details{background:#fff;border:1px solid var(--line);border-radius:12px;margin-bottom:8px}
.qa summary{list-style:none;cursor:pointer;position:relative;padding:14px 48px 14px 14px;font-weight:800;line-height:1.5}
.qa summary::-webkit-details-marker{display:none}
.pm{position:absolute;right:14px;top:50%;width:22px;height:22px;margin-top:-11px;border-radius:50%;background:#e1f0f6}
.pm::before,.pm::after{content:"";position:absolute;left:5px;right:5px;top:10px;height:2px;background:var(--water-d)}
.pm::after{transform:rotate(90deg);transition:transform .15s}
details[open] .pm::after{transform:rotate(0)}
.qa details p{padding:0 14px 14px;margin:0}

/* 지역 */
.area-red{color:var(--red);font-size:1.02rem}
.zones{display:grid;gap:18px}
.zone h3{display:flex;justify-content:space-between;align-items:center;background:var(--brass);color:#221503;padding:6px 12px;border-radius:6px;margin-bottom:10px;
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.14)}
.zone h3 span{font-family:var(--head);font-weight:400;font-size:1.15rem}
.zone h3 small{font-weight:800}
.zone ul,.rl{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.zone a,.rl a{display:inline-flex;align-items:center;min-height:36px;padding:4px 11px 4px 19px;background:#fff;border:1.5px solid #93a8b3;border-radius:4px 14px 14px 4px;
  color:var(--ink);text-decoration:none;font-size:.9rem;position:relative;line-height:1.3}
.zone a::before,.rl a::before{content:"";position:absolute;left:6px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;box-shadow:0 0 0 1.5px #6f8591}
.zone a:hover,.rl a:hover{border-color:var(--water)}

/* 하위 페이지 머리 */
.ph{background:var(--bg2)}
.ph-in{max-width:1080px;margin:0 auto;padding:14px 16px 18px 40px;position:relative}
.ph-in::before{left:16px;top:18px;bottom:30px}
.ph-in::after{left:13px;bottom:14px}
.crumb{font-size:.82rem;color:var(--ink2);display:flex;flex-wrap:wrap;gap:4px 6px;margin-bottom:10px}
.crumb a{color:var(--ink2)}
.ph-k{display:flex;align-items:center;gap:6px;margin:0 0 6px;font-weight:800;font-size:.86rem;color:var(--brass-d)}
.hex-s{width:12px;height:11px;flex:0 0 12px;background:var(--brass);clip-path:var(--hex)}
.ph h1{font-size:clamp(1.5rem,6.4vw,2.2rem);color:var(--cab)}
.upd{font-size:.8rem;color:var(--ink2);margin:0}
.braid{height:10px;background:var(--braid);border-top:1px solid #7f95a0;border-bottom:1px solid #7f95a0}
.wrap{max-width:1080px;margin:0 auto}
.wrap>.doors.big{margin:16px;background:var(--cab);padding:10px;border-radius:16px}
.pts{list-style:none;counter-reset:p;margin:0 16px;padding:0;display:grid;gap:8px}
.pts li{counter-increment:p;position:relative;padding:10px 12px 10px 48px;background:#fff;border-radius:10px;font-weight:700}
.pts li::before{content:counter(p);position:absolute;left:10px;top:9px;width:28px;height:24px;display:flex;align-items:center;justify-content:center;background:var(--brass);color:#221503;font-size:.85rem;clip-path:var(--hex)}
.sec .pts{margin:0 0 12px}
.toc{margin:18px 16px 0;background:#fff;border-left:6px solid var(--water);border-radius:10px;padding:12px 14px}
.toc p{margin:0 0 4px;font-weight:800;font-size:.9rem}
.toc ol{margin:0;padding-left:1.3em}
.toc li{margin:3px 0}
.facts{display:grid;gap:10px}
.facts div{background:#fff;border-radius:12px;padding:12px 14px;border-top:4px solid var(--brass)}
.cmp{display:grid;gap:10px}
.cmp-r{background:#fff;border-radius:12px;padding:12px 14px;border:1px solid var(--line)}
.cmp-r strong{display:block;font-family:var(--head);font-weight:400;font-size:1.12rem;margin-bottom:6px;color:var(--cab)}
.cmp-r p{margin:0 0 6px}
.cmp-r b{display:block;font-size:.8rem;color:var(--brass-d)}
.chk{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.chk li{background:#fff;border-radius:10px;padding:10px 14px;display:grid;gap:2px;border-left:5px solid var(--water)}
.sum{margin:0;display:grid;gap:8px}
.sum div{background:#fff;border-radius:10px;padding:10px 14px;display:grid;grid-template-columns:5.4em 1fr;gap:8px}
.sum dt{font-weight:800;color:var(--brass-d)}
.sum dd{margin:0}
.sum ul{margin:0;padding-left:1.1em}
.rqs{display:grid;gap:10px}
.rq{display:grid;grid-template-columns:96px 1fr;background:#fff;border-radius:12px;overflow:hidden;color:var(--ink);text-decoration:none;border:1px solid var(--line)}
.rq-img img{width:100%;height:100%;object-fit:cover}
.rq-t{display:grid;gap:3px;padding:10px 12px;font-size:.92rem}
.rq-t strong{font-size:1rem}
.rq-t em{font-style:normal;font-size:.8rem;color:var(--water-d);font-weight:700}
.warn{padding-left:1.2em}
.why-pick{background:#fff;border-radius:10px;padding:10px 14px}
.ex{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ex figure{margin:0;background:#fff;border-radius:12px;overflow:hidden}
.ex img{width:100%;aspect-ratio:1/1;object-fit:cover}
.ex figcaption{padding:8px 10px;font-size:.86rem}
.ex figcaption b{display:block}
.tip{background:#fff;border-radius:10px;padding:10px 14px;margin-top:10px}
.flow{padding-left:1.3em}
.flow li{margin-bottom:6px}
.links h2{margin-top:10px}
.links .rl{margin-bottom:10px}

/* 하단 고정 [번호][문자보내기] */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:50;display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:8px 8px calc(8px + env(safe-area-inset-bottom));
  background:var(--cab);transition:transform .2s}
.dock a{min-height:50px;display:flex;align-items:center;justify-content:center;border-radius:12px;font-weight:800;text-decoration:none;white-space:nowrap;padding:0 8px}
.dk-call{color:#fff;border:2px solid #cfe3df;font-variant-numeric:tabular-nums}
.dk-sms{background:var(--water);color:#fff}
.dock.hide{transform:translateY(110%);visibility:hidden}

@media (max-width:359px){
  .part{grid-template-columns:88px 1fr}
  .rq{grid-template-columns:80px 1fr}
  .hang a{font-size:.86rem}
  .dock a{font-size:.95rem}
}
@media (min-width:640px){
  .hoses{grid-template-columns:1fr 1fr}
  .cards{grid-template-columns:1fr 1fr}
  .whole,.qts,.facts,.cmp,.zones,.rqs{grid-template-columns:1fr 1fr}
  .line li{grid-template-columns:240px 1fr;align-items:start}
  .part{grid-template-columns:140px 1fr}
}
@media (min-width:1000px){
  .hero{grid-template-columns:1fr 1.05fr;grid-template-areas:"t c" "b c";align-items:start;padding-top:28px}
  .hero-t{grid-area:t}.cab{grid-area:c}.hero-c{grid-area:b}
  .cards{grid-template-columns:repeat(3,1fr)}
  .parts{grid-template-columns:repeat(3,1fr)}
  .part{grid-template-columns:1fr;grid-template-rows:170px auto}
  .hoses{grid-template-columns:repeat(3,1fr)}
  .zones{grid-template-columns:repeat(3,1fr)}
  .facts,.cmp{grid-template-columns:repeat(3,1fr)}
  .wrap>.doors.big{max-width:720px}
  .dock{left:auto;right:16px;bottom:16px;width:380px;border-radius:16px}
}