/* 에이스홈픽스 샤워기 수전 교체 — 연분홍 타일 벽 위 가로 크롬 막대(바형 샤워수전).
   연분홍 타일 격자 바탕·흰 줄눈·먹갈색 글자·크롬 은색·초록 문자 버튼.
   제목 Jalnan(여기어때 잘난체, jsdelivr) + 본문 시스템 고딕. 휴대폰 먼저: 기본이 좁은 화면, 넓은 화면은 아래 미디어 쿼리. */
@font-face{font-family:'Jalnan';font-weight:400;font-display:swap;src:url('https://cdn.jsdelivr.net/gh/fonts-archive/Jalnan/Jalnan.woff2') format('woff2')}
:root{
 --tile:#f6ddd6; --tile2:#efcbc1; --tile3:#fbeeea; --grout:#fffaf8; --paper:#ffffff;
 --ink:#2a1d1b; --mute:#6b5652; --line:#e3c3ba; --rose:#b8574a;
 --green:#0b7a55; --green2:#07623f; --red:#c4231f;
 --chrome:linear-gradient(180deg,#fbfbfc 0%,#cfd4d8 40%,#f1f3f4 55%,#a7afb5 100%);
 --grid:linear-gradient(var(--grout) 0 2px,transparent 2px) 0 0/46px 46px,linear-gradient(90deg,var(--grout) 0 2px,transparent 2px) 0 0/46px 46px;
 --h:'Jalnan','Apple SD Gothic Neo','Malgun Gothic',sans-serif;
 --b:-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Malgun Gothic','Noto Sans KR',sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:12px}
body{margin:0;background:var(--grid),var(--tile);color:var(--ink);font:16px/1.72 var(--b);word-break:keep-all;overflow-wrap:anywhere;padding-bottom:84px}
img{max-width:100%;height:auto;display:block}
a{color:var(--rose)}
h1,h2,h3{font-family:var(--h);font-weight:400;line-height:1.34;margin:0 0 .5em;letter-spacing:-.01em}
h2{font-size:1.38rem}
h3{font-size:1.06rem}
p{margin:0 0 .9em}
ul,ol{margin:0;padding:0}
.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(--paper);border-bottom:3px solid var(--grout);box-shadow:0 2px 0 var(--line)}
.hd-in{padding:10px 16px 8px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.logo svg{width:44px;height:40px;flex:none}
.l-tile{fill:var(--tile)}.l-grout{stroke:#fff;stroke-width:2.4}.l-bar{fill:var(--ink)}
.l-lever{stroke:var(--ink);stroke-width:3.4;stroke-linecap:round}.l-spout{stroke:var(--ink);stroke-width:3.4;fill:none;stroke-linecap:round}
.logo-t{display:flex;flex-direction:column;min-width:0;line-height:1.2}
.logo-t b{font-family:var(--h);font-weight:400;font-size:1.12rem;white-space:nowrap}
.logo-t .kw{font-style:normal;font-size:.9rem;font-weight:800;color:var(--rose);position:relative;padding-bottom:7px;align-self:flex-start}
.logo-t .kw::after{content:"";position:absolute;left:0;right:10px;bottom:0;height:5px;border-radius:3px;background:var(--chrome);box-shadow:0 0 0 1px #9aa2a8 inset}
.logo-t .kw::before{content:"";position:absolute;right:0;bottom:1px;width:12px;height:3px;border-radius:2px;background:#8b949a;transform:rotate(-35deg);transform-origin:left center}
.tiles ul{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:3px;background:var(--grout);padding:3px}
.tiles a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:60px;background:var(--tile);text-decoration:none;color:var(--ink);font-weight:800;font-size:.86rem;text-align:center;line-height:1.25;padding:6px 2px;border-radius:6px}
.tiles a:hover,.tiles a:focus-visible{background:var(--tile2)}
.tiles svg{width:24px;height:24px;fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* 공통 틀 */
main{display:block}
.sec{background:var(--paper);margin:14px 12px;padding:22px 16px;border-radius:14px;box-shadow:0 0 0 3px var(--grout)}
.sec.band{background:var(--tile3)}
.wrap{padding:0}
.wrap>.pr.big{margin:14px 12px}
.kick{font-size:.8rem;font-weight:800;letter-spacing:.06em;color:var(--rose);margin:0 0 4px}
.sub{color:var(--mute);font-size:.95rem}
.more{display:inline-block;margin-top:14px;font-weight:800;color:var(--ink);text-decoration:none;border-bottom:3px solid var(--tile2);padding-bottom:2px}
.upd{font-size:.8rem;color:var(--mute);margin:.2em 0 12px}

/* 첫 화면: 타일 벽 판 + 전후 사진 + 가로 크롬 막대 */
.hero-wall{padding:22px 16px 14px}
.hero h1{font-size:1.9rem;margin-bottom:14px}
.hero h1 span{display:block;font-family:var(--b);font-weight:800;font-size:1.02rem;color:var(--mute);margin-top:6px;letter-spacing:0}
.hero-pair{display:block;text-decoration:none;color:var(--ink);position:relative}
.hero-cap{display:block;font-size:.84rem;font-weight:700;color:var(--mute);margin-top:4px;text-align:center}
.hbar{height:44px;margin-top:-26px;position:relative;z-index:2;padding:0 6px}
.hbar svg{width:100%;height:44px;display:block}
.hb{fill:#dfe3e6;stroke:#8f989e;stroke-width:1.5}.hl{stroke:#7d868c;stroke-width:6;stroke-linecap:round}.hs2{stroke:#8f989e;stroke-width:6;fill:none;stroke-linecap:round}
.hero-body{background:var(--paper);margin:0 12px;padding:18px 16px 20px;border-radius:14px;box-shadow:0 0 0 3px var(--grout)}
.lead{font-size:1rem}
.kinds{list-style:none;display:grid;gap:6px;margin-top:6px}
.kinds li{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;font-size:.88rem;font-weight:700;background:var(--tile3);border-radius:8px;padding:7px 10px}
.kinds i{font-style:normal;color:var(--rose)}
.k-new{color:var(--green2)}

/* 전후 사진: 흰 줄눈 틀 두 칸 */
.pr{display:grid;grid-template-columns:1fr 1fr;gap:4px;background:var(--grout);padding:4px;border-radius:10px}
.pr figure{margin:0;position:relative;aspect-ratio:3/4;overflow:hidden;border-radius:7px;background:var(--tile2)}
.pr img{width:100%;height:100%;object-fit:cover}
.tg{position:absolute;left:6px;top:6px;z-index:1;font-size:.78rem;font-weight:800;padding:3px 9px;border-radius:5px;line-height:1.3}
.tg-b{background:#fff;color:var(--ink);box-shadow:0 0 0 1px var(--line)}
.tg-a{background:var(--ink);color:#fff}

/* 버튼 [문자보내기][번호] */
.cta{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 4px}
.cta a{flex:1 1 auto;white-space:nowrap;display:flex;align-items:center;justify-content:center;min-height:52px;border-radius:12px;font-weight:800;font-size:1.02rem;text-decoration:none;text-align:center;line-height:1.2;padding:8px 10px}
.b-sms{background:var(--green);color:#fff;box-shadow:0 3px 0 var(--green2)}
.b-call{background:#fff;color:var(--ink);border:2px solid var(--ink);box-shadow:0 3px 0 var(--ink);white-space:nowrap}
.cta-hero{margin-top:0}

/* 어떤 수전을 무엇으로: 변환 줄 */
.swaps{display:grid;gap:8px;margin-top:10px}
.swap{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);background:var(--tile3);border-radius:12px;padding:10px 12px;border:2px solid transparent}
.swap:hover,.swap:focus-visible{border-color:var(--tile2)}
.sw{display:flex;align-items:center;gap:2px;flex:none;background:#fff;border-radius:9px;padding:4px 6px;box-shadow:0 0 0 2px var(--grout)}
.sw svg{width:40px;height:40px}
.sw .arr{width:14px;height:10px;display:block;position:relative}
.sw .arr::before{content:"";position:absolute;left:0;right:3px;top:4px;height:2px;background:var(--rose)}
.sw .arr::after{content:"";position:absolute;right:0;top:1px;border:4px solid transparent;border-left:6px solid var(--rose);border-right:0}
.sw-one{padding:4px 30px}
.sw-t{display:flex;flex-direction:column;min-width:0;line-height:1.35}
.sw-t b{font-size:.98rem}
.sw-t small{font-size:.84rem;color:var(--rose);font-weight:700}
.swap svg .bd{fill:#e5e8ea;stroke:var(--ink);stroke-width:2.4}
.swap svg .bd2{fill:none;stroke:var(--ink);stroke-width:3;stroke-linecap:round}
.swap svg .lv2{fill:none;stroke:var(--ink);stroke-width:3.4;stroke-linecap:round}
.swap svg .hs{fill:none;stroke:#8f989e;stroke-width:2.4}
.swap svg .hd2{fill:none;stroke:#8f989e;stroke-width:6;stroke-linecap:round}
.swap svg .tb{fill:#fff;stroke:var(--rose);stroke-width:2.4}

/* 서비스 카드: 위 사진 + 크롬 명판 */
.svs{display:grid;gap:14px;margin-top:10px}
.sv{display:block;text-decoration:none;color:var(--ink);background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 0 0 2px var(--line)}
.sv-img{display:block;aspect-ratio:16/9;overflow:hidden;background:var(--tile2)}
.sv-img img{width:100%;height:100%;object-fit:cover}
.sv-plate{display:block;background:var(--chrome);border-top:1px solid #9aa2a8;border-bottom:1px solid #9aa2a8;font-weight:800;font-size:.84rem;padding:4px 14px;color:var(--ink)}
.sv-t{display:block;padding:10px 14px 14px}
.sv-t strong{display:block;font-family:var(--h);font-weight:400;font-size:1.16rem;line-height:1.35}
.sv-w{display:block;color:var(--mute);font-size:.92rem}

/* 사례 카드 */
.ccs{display:grid;gap:16px;margin-top:10px}
.cc{display:block;text-decoration:none;color:var(--ink);background:#fff;border-radius:12px;padding:6px;box-shadow:0 0 0 2px var(--line)}
.cc .pr{padding:0;background:none}
.cc-b{display:block;padding:4px 8px 10px}
.lv{display:block;position:relative;height:10px;margin:10px 18px 10px 0;border-radius:5px;background:var(--chrome);box-shadow:0 0 0 1px #9aa2a8 inset}
.lv i{position:absolute;right:-16px;top:-6px;width:20px;height:5px;border-radius:3px;background:#848d93;transform:rotate(-32deg)}
.cc-k{display:inline-block;font-size:.8rem;font-weight:800;background:var(--tile);border-radius:5px;padding:2px 8px;margin-bottom:6px}
.cc-t{display:block;font-family:var(--h);font-weight:400;font-size:1.08rem;line-height:1.4;margin-bottom:6px}
.cc-r{display:block;font-size:.9rem;color:var(--mute);margin-top:3px}
.cc-r b{color:var(--ink);margin-right:6px}

/* 문의 영역: 샤워부스 유리문 */
.door{margin:18px 12px;padding:10px;border-radius:18px;background:linear-gradient(135deg,#c9ced2,#f4f5f6 40%,#b2b9be);}
.door-in{position:relative;background:rgba(255,255,255,.82);border-radius:12px;padding:22px 16px 18px 30px;box-shadow:inset 0 0 0 2px rgba(255,255,255,.9);
 background-image:linear-gradient(115deg,rgba(255,255,255,.0) 0 60%,rgba(255,255,255,.55) 60% 64%,rgba(255,255,255,0) 64%)}
.door-h{position:absolute;left:10px;top:40px;bottom:40px;width:8px;border-radius:4px;background:var(--chrome);box-shadow:0 0 0 1px #8f989e}
.door-k{font-size:.8rem;font-weight:800;color:var(--green2);margin:0 0 4px;letter-spacing:.04em}
.door-p{color:var(--mute);font-size:.95rem}
.fls{display:grid;gap:4px;margin:10px 0 12px;background:var(--grout);padding:4px;border-radius:9px}
.fl{display:flex;flex-wrap:wrap;gap:2px 10px;background:var(--tile);border-radius:6px;padding:8px 10px}
.fl dt{font-weight:800;min-width:4.5em}
.fl dd{margin:0;color:var(--mute);font-size:.92rem}
.door-sub{font-weight:800;margin:0 0 6px}
.shots{list-style:none;display:grid;gap:8px}
.shots li{display:flex;gap:10px;align-items:flex-start;background:#fff;border-radius:9px;padding:9px 10px;box-shadow:0 0 0 1px var(--line)}
.shots svg{width:40px;height:40px;flex:none}
.shots .fr{fill:var(--tile3);stroke:var(--ink);stroke-width:2}.shots .br{stroke:var(--ink);stroke-width:3;stroke-linecap:round;fill:none}.shots .gr{stroke:#fff;stroke-width:1.5}
.shots span{font-size:.9rem;color:var(--mute);line-height:1.5}
.shots b{display:block;color:var(--ink);font-size:.96rem}
.door-tip{font-size:.88rem;color:var(--mute);margin:10px 0 6px}
.door-tip b{color:var(--ink)}
.door-note{font-size:.88rem;margin:0}

/* 작업 순서: 세로 배관 줄 + 타일 번호 */
.steps{list-style:none;position:relative;margin-top:12px;display:grid;gap:14px}
.steps::before{content:"";position:absolute;left:15px;top:8px;bottom:8px;width:6px;border-radius:3px;background:var(--chrome);box-shadow:0 0 0 1px #9aa2a8}
.steps li{position:relative;display:grid;grid-template-columns:36px 96px 1fr;gap:10px;align-items:start}
.sn{position:relative;z-index:1;width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:var(--tile);border:3px solid var(--grout);border-radius:8px;font-family:var(--h);font-size:1.05rem;box-shadow:0 0 0 1px var(--line)}
.steps figure{margin:0;border-radius:8px;overflow:hidden;aspect-ratio:3/4;background:var(--tile2)}
.steps figure img{width:100%;height:100%;object-fit:cover}
.st-t h3{font-size:1rem;margin-bottom:.3em}
.st-t p{font-size:.9rem;margin:0 0 .3em}
.stage{font-size:.78rem!important;font-weight:800;color:var(--rose)}

/* 질문 카드 */
.qcs{display:grid;gap:12px;margin-top:10px}
.qc{background:var(--tile3);border-radius:12px;padding:16px 14px;box-shadow:0 0 0 2px var(--grout),0 0 0 3px var(--line)}
.qc-tag{display:inline-block;font-size:.78rem;font-weight:800;background:#fff;border:2px solid var(--tile2);border-radius:6px;padding:1px 9px;margin-bottom:8px}
.qc h3{font-size:1.05rem}
.qc-a{font-weight:800}
.qc-more{font-size:.92rem;color:var(--mute)}
.qc-link{font-weight:800;color:var(--green2)}

/* 질문 답변 펼치기 */
.qa{display:grid;gap:8px;margin-top:8px}
.qa details{background:var(--tile3);border-radius:10px;box-shadow:0 0 0 2px var(--grout)}
.qa summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 14px;font-weight:800}
.qa summary::-webkit-details-marker{display:none}
.qa summary i{flex:none;width:26px;height:26px;border-radius:6px;background:#fff;position:relative;box-shadow:0 0 0 2px var(--tile2)}
.qa summary i::before,.qa summary i::after{content:"";position:absolute;left:7px;right:7px;top:12px;height:2px;background:var(--ink)}
.qa summary i::after{transform:rotate(90deg)}
.qa details[open] summary i::after{transform:none}
.qa details p{padding:0 14px 14px;margin:0;color:var(--mute)}

/* 지역 목록 */
.area-red{color:var(--red);font-size:1rem}
.zones{display:grid;gap:16px;margin-top:12px}
.zone h3{display:flex;justify-content:space-between;align-items:center;background:var(--chrome);border:1px solid #9aa2a8;border-radius:8px;padding:6px 12px;font-size:1.02rem;margin-bottom:6px}
.zone h3 small{font-family:var(--b);font-weight:700;font-size:.82rem;color:var(--mute)}
.zone ul{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:3px;background:var(--grout);padding:3px;border-radius:8px}
.zone a{display:flex;align-items:center;justify-content:center;min-height:42px;background:var(--tile3);border-radius:5px;font-size:.86rem;font-weight:700;color:var(--ink);text-decoration:none;text-align:center;line-height:1.25;padding:4px}
.zone a:hover,.zone a:focus-visible{background:var(--tile2)}

/* 하위 페이지 머리 */
.ph-tile{padding:16px 16px 14px}
.ph h1{font-size:1.6rem;margin:0}
.ph-label{font-size:.82rem;font-weight:800;color:var(--rose);margin:8px 0 4px}
.crumb{font-size:.8rem;color:var(--mute);display:flex;flex-wrap:wrap;gap:4px}
.crumb a{color:var(--ink)}
.ph-body{background:var(--paper);margin:0 12px;padding:18px 16px;border-radius:14px;box-shadow:0 0 0 3px var(--grout)}
.pts{list-style:none;counter-reset:p;display:grid;gap:6px;margin:12px}
.pts li{counter-increment:p;display:flex;gap:10px;align-items:flex-start;background:#fff;border-radius:9px;padding:9px 12px;box-shadow:0 0 0 2px var(--grout);font-weight:700;font-size:.95rem}
.pts li::before{content:counter(p);flex:none;width:24px;height:24px;border-radius:6px;background:var(--tile);display:flex;align-items:center;justify-content:center;font-family:var(--h);font-size:.9rem}
.toc{background:#fff;margin:12px;padding:14px 16px;border-radius:12px;box-shadow:0 0 0 3px var(--grout)}
.toc p{font-weight:800;margin:0 0 6px}
.toc ol{padding-left:1.3em}
.toc li{margin:3px 0}
.toc a{color:var(--ink)}
.facts{display:grid;gap:8px}
.facts div{background:var(--tile3);border-radius:10px;padding:12px 14px}
.facts h3{margin-bottom:.2em}
.facts p{margin:0;font-size:.93rem;color:var(--mute)}
.cmp{display:grid;gap:8px;margin-top:8px}
.cmp-r{border-left:6px solid var(--tile2);background:var(--tile3);border-radius:0 10px 10px 0;padding:10px 14px}
.cmp-r strong{display:block;font-family:var(--h);font-weight:400;font-size:1.02rem;margin-bottom:4px}
.cmp-r p{margin:2px 0;font-size:.92rem}
.cmp-r b{margin-right:6px;color:var(--rose)}
.chk{list-style:none;display:grid;gap:6px}
.chk li{display:flex;flex-direction:column;background:var(--tile3);border-radius:9px;padding:9px 12px}
.chk b{font-size:.96rem}
.chk span{font-size:.92rem;color:var(--mute)}
.sum{display:grid;gap:8px;margin:0}
.sum div{background:var(--tile3);border-radius:9px;padding:10px 12px}
.sum dt{font-weight:800;font-size:.86rem;color:var(--rose)}
.sum dd{margin:2px 0 0}
.sum ul{padding-left:1.2em}
.rl{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.rl a{display:inline-block;background:var(--tile3);border-radius:6px;padding:6px 10px;font-size:.88rem;font-weight:700;color:var(--ink);text-decoration:none}
.links h2+.svs{margin-bottom:18px}
.rqs{display:grid;gap:10px}
.rq{display:flex;gap:12px;align-items:flex-start;text-decoration:none;color:var(--ink);background:var(--tile3);border-radius:10px;padding:10px}
.rq-img{flex:none;width:78px;aspect-ratio:3/4;border-radius:7px;overflow:hidden}
.rq-img img{width:100%;height:100%;object-fit:cover}
.rq-t{display:flex;flex-direction:column;gap:3px;min-width:0}
.rq-t strong{font-size:.98rem}
.rq-t span{font-size:.9rem;color:var(--mute)}
.rq-t em{font-style:normal;font-size:.82rem;font-weight:700;color:var(--green2)}
.warn{list-style:none;display:grid;gap:5px}
.warn li{padding-left:18px;position:relative;font-size:.93rem}
.warn li::before{content:"";position:absolute;left:2px;top:.62em;width:9px;height:9px;border-radius:2px;background:var(--rose)}
.why-pick{color:var(--mute);font-size:.94rem}
.ex{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ex figure{margin:0;background:var(--tile3);border-radius:10px;overflow:hidden}
.ex img{aspect-ratio:3/4;object-fit:cover;width:100%}
.ex figcaption{padding:8px 10px;font-size:.86rem;color:var(--mute)}
.ex figcaption b{display:block;color:var(--ink)}
.tip{font-size:.9rem;color:var(--mute);margin-top:10px}
.tip b{color:var(--ink)}
.flow{padding-left:1.4em;display:grid;gap:6px}
.sec h2 small{font-family:var(--b);font-size:.85rem;color:var(--mute)}
.sec h2 a{color:var(--ink)}

/* 하단 고정: 크롬 테 긴 막대 */
.dock{position:fixed;left:8px;right:8px;bottom:calc(8px + env(safe-area-inset-bottom));z-index:20;display:flex;gap:6px;padding:6px;border-radius:18px;
 background:var(--chrome);box-shadow:0 0 0 1px #8f989e,0 6px 16px rgba(42,29,27,.25);transition:transform .2s}
.dock a{flex:1;display:flex;align-items:center;justify-content:center;min-height:50px;border-radius:13px;font-weight:800;text-decoration:none;font-size:1.02rem;text-align:center;line-height:1.2;padding:6px 8px}
.dk-call{background:#fff;color:var(--ink);white-space:nowrap}
.dk-sms{background:var(--green);color:#fff}
.dock.hide{transform:translateY(140%);visibility:hidden}

a:focus-visible,summary:focus-visible{outline:3px solid var(--green);outline-offset:2px}

@media (max-width:359px){
 .hero h1{font-size:1.66rem}
 .logo-t b{font-size:1.02rem}
 .tiles a{font-size:.8rem}
 .cta a,.dock a{font-size:.95rem;padding:6px}
 .steps li{grid-template-columns:32px 78px 1fr;gap:8px}
 .sn{width:32px;height:32px}
 .steps::before{left:13px}
 .sw svg{width:34px;height:34px}
 .sw-one{padding:4px 24px}
}

@media (min-width:720px){
 body{font-size:17px}
 .hd{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-right:12px}
 .tiles ul{width:420px}
 .sec,.hero-body,.ph-body,.toc,.pts,.door,.wrap>.pr.big{max-width:980px;margin-left:auto;margin-right:auto}
 .hero{max-width:980px;margin:0 auto;display:grid;grid-template-columns:1.05fr 1fr;gap:16px;align-items:start;padding:10px 12px 0}
 .hero-body{margin:22px 0 0}
 .hero h1{font-size:2.3rem}
 .ph-tile .ph-in{max-width:980px;margin:0 auto}
 .ph h1{font-size:2rem}
 .svs{grid-template-columns:1fr 1fr}
 .ccs{grid-template-columns:repeat(auto-fill,minmax(290px,1fr))}
 .qcs{grid-template-columns:1fr 1fr}
 .swaps{grid-template-columns:1fr 1fr}
 .steps li{grid-template-columns:40px 180px 1fr;gap:14px}
 .steps::before{left:17px}
 .sn{width:40px;height:40px}
 .facts{grid-template-columns:repeat(3,1fr)}
 .zone ul{grid-template-columns:repeat(auto-fill,minmax(110px,1fr))}
 .dock{left:50%;right:auto;width:520px;transform:translateX(-50%)}
 .dock.hide{transform:translate(-50%,140%)}
 .ex{max-width:560px}
}