/* 에이스홈픽스 세면대 팝업 교체 — 짙은 청록·산호색·옅은 물빛, Bagel Fat One 제목 + Gowun Batang 본문.
   청록 머리와 산호색 밑줄 글자 메뉴, 물빛 첫 화면(청록 상자 키워드)과 회색·산호 테두리 전후 사진, 세로 관으로 잇는 부위 바로가기,
   U자 밑면 사례 카드, 사진 위 번호 띠 작업 순서, 산호색 판 촬영 안내 문의 영역, 칸 나눈 지역 표, 화면 폭 가득 붙은 고정 버튼.
   (같은 날 만든 kitchenfaucet이 먹색·라임·Sunflower라 겹치지 않게 1차 먹색·라임 안을 바꿨다.)
   휴대폰(390px) 기준으로 쓰고 넓은 화면에서 칸을 늘린다. 가로로 넘기거나 눌러야 바뀌는 조작은 없다. */
:root{
  --ink:#0f2e2c; --ink2:#3f5553; --bg:#eaf4f2; --paper:#fff; --line:#c6d8d4; --steel:#d7e6e3;
  --lime:#ff7a55; --lime-l:#ffe4da; --lime-d:#b2381a; --rust:#5d6b6a; --rust-l:#e5ecea; --red:#cf1f1a;
  --head:'Bagel Fat One','Gowun Batang',sans-serif;
  --body:'Gowun Batang','Apple SD Gothic Neo','Malgun Gothic',serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:12px}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.75 var(--body);word-break:keep-all;overflow-wrap:anywhere;padding-bottom:62px}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
b,strong{font-weight:700}
h1,h2,h3{margin:0;line-height:1.3}
h1,h2{font-family:var(--head);font-weight:400;letter-spacing:-.005em}
h2{font-size:1.6rem;margin-bottom:.6rem}
h3{font-size:1.12rem;font-weight:700}
p{margin:.5rem 0}
ul,ol,dl,dd{margin:0;padding:0;list-style:none}
figure{margin:0}
:focus-visible{outline:3px solid var(--lime);outline-offset:2px;box-shadow:0 0 0 6px var(--ink)}
.ic{width:1.15em;height:1.15em;flex:none}
.pn{white-space:nowrap}
.skip{position:absolute;left:-999px;top:0;background:var(--lime);color:var(--ink);padding:.6rem 1rem;z-index:50}
.skip:focus{left:8px;top:8px}

/* 머리: 먹색 줄 + 라임 밑줄 글자 메뉴 */
.hd{background:var(--ink);color:#fff}
.hd-in{display:flex;align-items:center;gap:.55rem;padding:.7rem 16px .5rem;max-width:1180px;margin:0 auto}
.logo{display:flex;align-items:center;gap:.45rem;text-decoration:none;white-space:nowrap;flex:none}
.logo .mark{width:30px;height:30px}
.logo b{font-family:var(--head);font-weight:400;font-size:1.15rem;letter-spacing:.01em}
.kw{font-size:.84rem;font-weight:700;color:var(--ink);background:var(--lime);padding:.12rem .55rem;border-radius:4px;white-space:nowrap;line-height:1.5}
.hd-tel{display:none;margin-left:auto;align-items:center;gap:.4rem;color:var(--lime);text-decoration:none;font-weight:700}
.tabs{display:grid;grid-template-columns:repeat(4,1fr);max-width:1180px;margin:0 auto;padding:0 8px}
.tabs a{text-align:center;text-decoration:none;font-weight:700;font-size:.95rem;padding:.55rem .1rem .6rem;border-bottom:4px solid transparent;color:#e9e9e4;white-space:nowrap}
.tabs a:hover,.tabs a[aria-current]{border-bottom-color:var(--lime);color:#fff}

/* 첫 화면 */
.hero{background:#cfe7e2;color:var(--ink);padding:1.1rem 16px 1.6rem;border-bottom:6px solid var(--ink)}
.hero>*{max-width:1080px;margin-left:auto;margin-right:auto}
.eye{display:flex;align-items:center;gap:.4rem;font-size:.9rem;font-weight:700;color:var(--lime-d);margin:0 0 .35rem}
.hero .eye{color:var(--lime-d)}
.hero h1{font-size:2.05rem;line-height:1.22}
.hero h1 em{font-style:normal;color:var(--lime);background:var(--ink);display:inline-block;padding:.05rem .45rem .15rem;border-radius:6px;margin-bottom:.3rem}
.hero-ba{display:block;text-decoration:none;margin-top:1rem}
.hero-c{display:block;font-size:.9rem;color:var(--ink2);margin-top:.45rem}
.hero .lead b{background:linear-gradient(transparent 60%,var(--lime-l) 60%)}

/* 전후 사진: 녹 빛(시공전) · 라임(시공후) 테두리 */
.ba{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ba figure{position:relative;aspect-ratio:1/1;overflow:hidden;border-radius:6px;border:3px solid var(--rust);background:var(--steel)}
.ba .af{border-color:var(--lime)}
.ba img{width:100%;height:100%;object-fit:cover}
.ba figcaption{position:absolute;left:0;top:0;padding:.12rem .55rem .15rem;font-weight:700;font-size:.85rem;background:var(--rust);color:#fff;border-bottom-right-radius:6px}
.ba .af figcaption{background:var(--lime);color:var(--ink)}
.ba.wide{margin:1rem 0}
.ba.wide figure{aspect-ratio:4/5}

/* 문의 버튼 [문자보내기][번호] */
.cta-inline{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:1rem 0 .3rem}
.cta-inline a{display:flex;align-items:center;justify-content:center;gap:.4rem;min-height:52px;padding:.5rem .4rem;font-weight:700;text-decoration:none;border-radius:6px;font-size:1rem;text-align:center}
.b-sms{background:var(--lime);color:var(--ink);border:2px solid var(--lime)}
.b-tel{background:var(--paper);color:var(--ink);border:2px solid var(--ink)}

/* 본문 공통 */
.sec{padding:1.9rem 16px 0;max-width:1120px;margin:0 auto}
.wrap .sec{padding-left:0;padding-right:0}
.wrap{max-width:1120px;margin:0 auto;padding:0 16px}
.kick{font-size:.8rem;font-weight:700;letter-spacing:.12em;color:var(--lime-d);margin:0 0 .2rem;text-transform:uppercase}
.sub{color:var(--ink2);margin-top:-.2rem}
.more{display:inline-flex;align-items:center;gap:.3rem;font-weight:700;margin-top:.8rem;text-decoration:none;border-bottom:3px solid var(--lime);line-height:1.4}
.more::after{content:'→'}
.crumb{max-width:1120px;margin:0 auto;padding:.7rem 16px 0;font-size:.85rem;color:var(--ink2)}
.crumb a{text-decoration:none;border-bottom:1px solid var(--line)}
.upd{font-size:.82rem;color:var(--ink2)}

/* 속 페이지 머리 띠 */
.band{max-width:1120px;margin:.6rem auto 0;padding:1.2rem 16px 1.2rem;background:var(--paper);border-top:6px solid var(--ink);border-bottom:2px solid var(--ink)}
.band h1{font-size:1.72rem;line-height:1.28}
.band .lead{font-size:1.02rem}

/* 부위 바로가기: 세로 관으로 잇는 목록 */
.pipe{position:relative;margin-top:.8rem}
.pipe::before{content:'';position:absolute;left:27px;top:24px;bottom:24px;width:8px;background:var(--steel);border:2px solid var(--ink);border-radius:4px}
.pipe li{position:relative;margin-bottom:10px}
.node{display:flex;align-items:center;gap:.8rem;text-decoration:none;background:var(--paper);border:2px solid var(--ink);border-radius:10px;padding:.7rem .8rem .7rem .55rem;position:relative}
.node .dot{width:48px;height:48px;border-radius:50%;background:var(--ink);color:var(--lime);display:grid;place-items:center;flex:none;border:3px solid var(--lime)}
.node .dot .ic{width:24px;height:24px}
.nd-t{display:flex;flex-direction:column;min-width:0;flex:1}
.nd-t strong{font-family:var(--head);font-weight:400;font-size:1.25rem;line-height:1.25}
.nd-t span{color:var(--ink2);font-size:.95rem;line-height:1.45}
.node .go{width:22px;height:22px;flex:none}
.node:hover{background:var(--lime-l)}

/* 사례 카드: U자 밑면 */
.ucs{display:grid;gap:18px;margin-top:.9rem}
.uc{display:block;text-decoration:none;background:var(--paper);border:2px solid var(--ink);border-radius:6px 6px 34px 34px;padding:8px 8px 0;overflow:hidden}
.uc .ba figure{border-width:2px}
.uc-b{display:block;padding:.75rem .5rem 1.3rem}
.kind{display:inline-flex;align-items:center;gap:.4rem;flex-wrap:wrap;font-size:.84rem;font-weight:700;background:var(--ink);color:var(--lime);padding:.1rem .55rem;border-radius:4px}
.kind i{font-style:normal;color:#fff;font-weight:500;border-left:1px solid #666;padding-left:.4rem}
.uc-t{display:block;font-size:1.12rem;line-height:1.4;margin:.45rem 0 .5rem}
.row{display:block;font-size:.93rem;line-height:1.55;color:var(--ink2);padding-left:.6rem;border-left:4px solid var(--lime);margin-top:.4rem}
.row em{font-style:normal;font-weight:700;color:var(--ink);margin-right:.4rem}
.uc:hover{box-shadow:0 0 0 4px var(--lime)}

/* 서비스 카드: 사진 위에 부위 딱지 */
.svs{display:grid;gap:14px;margin-top:.9rem}
.sv{display:grid;grid-template-columns:128px 1fr;text-decoration:none;background:var(--paper);border:2px solid var(--ink);border-radius:10px;overflow:hidden}
.sv-img{position:relative;display:block;background:var(--steel)}
.sv-img img{width:100%;height:100%;min-height:150px;object-fit:cover}
.sv-part{position:absolute;left:6px;bottom:6px;display:flex;align-items:center;gap:.25rem;background:var(--lime);color:var(--ink);font-weight:700;font-size:.82rem;padding:.08rem .45rem;border-radius:4px}
.sv-b{display:flex;flex-direction:column;padding:.7rem .75rem .75rem;min-width:0}
.sv-b strong{font-size:1.1rem;line-height:1.35}
.sv-s{font-size:.85rem;font-weight:700;color:var(--rust)}
.sv-d{font-size:.92rem;color:var(--ink2);line-height:1.5;margin-top:.2rem}
.sv-go{display:flex;align-items:center;gap:.3rem;font-weight:700;font-size:.9rem;margin-top:auto;padding-top:.35rem}
.sv:hover{background:var(--lime-l)}

/* 질문 카드 */
.qcs{display:grid;gap:14px;margin-top:.9rem}
.qc{background:var(--paper);border-radius:10px;padding:1rem 1rem 1.1rem;border:2px solid var(--line);border-top:8px solid var(--ink)}
.badge{display:inline-block;font-size:.8rem;font-weight:700;background:var(--lime);color:var(--ink);padding:.05rem .5rem;border-radius:99px}
.qc h3{margin:.45rem 0 .3rem;font-size:1.15rem}
.a1{font-weight:700;background:linear-gradient(transparent 62%,var(--lime-l) 62%)}

/* 벽 배수 · 바닥 배수 */
.dws{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:.9rem}
.dw{display:flex;flex-direction:column;text-decoration:none;background:var(--paper);border:2px solid var(--ink);border-radius:8px;overflow:hidden}
.dw img{width:100%;aspect-ratio:3/4;object-fit:cover}
.dw span{padding:.55rem .6rem .7rem;font-size:.9rem;line-height:1.5;color:var(--ink2)}
.dw strong{display:block;font-family:var(--head);font-weight:400;font-size:1.2rem;color:var(--ink)}

/* 문의 판: 라임 바탕 + 촬영 안내 그림 */
.ask{background:var(--lime);margin-top:2.2rem;border-top:3px solid var(--ink);border-bottom:3px solid var(--ink)}
.ask-in{max-width:1080px;margin:0 auto;padding:1.5rem 16px 1.4rem}
.ask h2{font-size:1.7rem}
.ask-l{font-weight:700}
.shots{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:.9rem 0 .4rem}
.shot{background:var(--paper);border:2px solid var(--ink);border-radius:8px;padding:.6rem;display:flex;flex-direction:column;gap:.3rem}
.shot svg{width:100%;height:auto;color:var(--ink)}
.shot b{font-size:.98rem;line-height:1.35}
.shot span{font-size:.86rem;line-height:1.5;color:var(--ink2)}
.ask-t{font-size:.93rem}
.ask .b-sms{background:var(--ink);color:#fff;border-color:var(--ink)}
.ask .b-tel{background:var(--paper)}
.ask-n{font-size:.85rem;margin-top:.5rem}

/* 작업 순서: 사진 위 번호 띠 */
.film{display:grid;gap:16px;margin-top:.9rem;counter-reset:f}
.film li{background:var(--paper);border:2px solid var(--ink);border-radius:8px;overflow:hidden}
.film figure{position:relative;background:var(--steel)}
.film img{width:100%;aspect-ratio:4/3;object-fit:cover}
.film figcaption{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:.5rem;background:rgba(15,46,44,.88);color:#fff;font-weight:700;font-size:.9rem;padding:.3rem .7rem}
.film figcaption b{font-family:var(--head);font-weight:400;color:var(--lime);font-size:1.15rem}
.film h3{padding:.65rem .8rem 0}
.film p{padding:0 .8rem .8rem;margin:.25rem 0 0;color:var(--ink2);font-size:.97rem}

/* 질문 답변(기본 details) */
.qa{border-top:2px solid var(--ink)}
.qa details{border-bottom:1px solid var(--line);background:var(--paper)}
.qa summary{cursor:pointer;list-style:none;display:flex;gap:.7rem;align-items:flex-start;padding:.85rem .8rem;font-weight:700;line-height:1.45}
.qa summary::-webkit-details-marker{display:none}
.qa summary::before{content:'+';flex:none;width:26px;height:26px;display:grid;place-items:center;background:var(--lime);color:var(--ink);font-weight:700;border-radius:4px;line-height:1}
.qa details[open] summary::before{content:'−';background:var(--ink);color:var(--lime)}
.qa details p{margin:0;padding:0 .8rem 1rem 3rem;color:var(--ink2)}

/* 지역 표 */
.area .red{color:var(--red)}
.ar-g{margin-top:1.1rem}
.ar-g h3{display:flex;align-items:baseline;justify-content:space-between;background:var(--ink);color:#fff;padding:.4rem .7rem;border-radius:6px 6px 0 0;font-family:var(--head);font-weight:400;font-size:1.2rem}
.ar-g small{font-family:var(--body);font-size:.85rem;color:var(--lime)}
.grid-a{display:grid;grid-template-columns:repeat(3,1fr);border-left:1px solid var(--ink);border-top:1px solid var(--ink);background:var(--paper);margin-top:.9rem}
.ar-g .grid-a{margin-top:0}
.grid-a li{border-right:1px solid var(--ink);border-bottom:1px solid var(--ink);min-width:0}
.grid-a a{display:block;padding:.45rem .35rem;font-size:.9rem;line-height:1.35;text-decoration:none;text-align:center;min-height:44px;display:flex;align-items:center;justify-content:center}
.grid-a a:hover{background:var(--lime)}

/* 서비스·사례·지역 상세 */
.ticks{display:grid;gap:.4rem;margin:.9rem 0}
.ticks li{display:flex;gap:.5rem;align-items:flex-start;line-height:1.5}
.ticks .ic{color:var(--lime-d);margin-top:.2rem;width:20px;height:20px}
.jump{display:flex;flex-wrap:wrap;gap:6px;margin:1rem 0 0}
.jump a{font-size:.88rem;font-weight:700;text-decoration:none;border:2px solid var(--ink);border-radius:4px;padding:.2rem .55rem;background:var(--paper)}
.facts{display:grid;gap:8px;margin-top:.7rem}
.facts div{background:var(--paper);border-left:6px solid var(--ink);padding:.6rem .8rem}
.facts dt{font-weight:700}
.facts dd{color:var(--ink2)}
.vs{display:grid;gap:10px;margin-top:.7rem}
.vs-c{background:var(--paper);border:2px solid var(--ink);border-radius:8px;padding:.8rem .9rem}
.vs-c strong{font-size:1.08rem;display:block;margin-bottom:.2rem}
.vs-c p{margin:.25rem 0;font-size:.95rem;line-height:1.55}
.vs-c em{font-style:normal;font-weight:700;display:inline-block;background:var(--lime-l);padding:0 .35rem;margin-right:.4rem;border-radius:3px}
.vs-c .warn em{background:var(--rust-l);color:var(--rust)}

ol.num{display:grid;gap:8px;margin-top:.7rem}
ol.num li{counter-increment:n;display:flex;flex-direction:column;background:var(--paper);border:2px solid var(--line);border-radius:8px;padding:.6rem .8rem .7rem 3.1rem;position:relative}
ol.num li::before{content:counter(n);position:absolute;left:.7rem;top:.6rem;width:28px;height:28px;border-radius:50%;background:var(--ink);color:var(--lime);display:grid;place-items:center;font-weight:700;font-size:.9rem}
ol.num li span{color:var(--ink2)}
.note{background:var(--rust-l);border-left:6px solid var(--rust);padding:1rem;margin-top:1.9rem;border-radius:0 8px 8px 0}
.conds{display:grid;gap:6px;margin-top:.6rem}
.conds li{background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:.55rem .8rem;display:flex;flex-direction:column}
.conds li b::before{content:'■ ';color:var(--lime-d)}
.conds li span{color:var(--ink2);font-size:.95rem}
.h2b{margin-top:1.6rem}
.dongs{display:flex;flex-wrap:wrap;gap:6px;margin:.5rem 0}
.dongs span{background:var(--ink);color:var(--lime);font-weight:700;font-size:.85rem;padding:.08rem .55rem;border-radius:4px}
.pick{background:var(--lime-l);padding:.6rem .8rem;border-radius:6px}
.mqs{display:grid;gap:12px;margin-top:.7rem}
.mq{background:var(--paper);border:2px solid var(--line);border-top:6px solid var(--lime);border-radius:8px;padding:.85rem .9rem 1rem}
.mq h3{margin:.4rem 0 .2rem}
.mq-case{display:grid;grid-template-columns:84px 1fr;gap:.6rem;align-items:center;text-decoration:none;margin-top:.5rem;font-weight:700;font-size:.93rem;line-height:1.4}
.mq-case img{width:84px;height:84px;object-fit:cover;border-radius:6px;border:2px solid var(--ink)}
.exs{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:.7rem}
.exs figure{background:var(--paper);border:2px solid var(--ink);border-radius:8px;overflow:hidden}
.exs img{width:100%;aspect-ratio:1/1;object-fit:cover}
.exs figcaption{padding:.5rem .6rem .7rem;font-size:.88rem;line-height:1.5;color:var(--ink2)}
.exs figcaption b{display:block;color:var(--ink);font-size:.95rem}
.tip{background:var(--paper);border:2px dashed var(--ink);border-radius:8px;padding:.6rem .8rem}
.visit p{color:var(--ink2)}
main{padding-bottom:2rem}

/* 하단 고정 버튼: 화면 폭 가득 붙은 두 칸 [번호][문자보내기] */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:40;display:grid;grid-template-columns:1fr 1fr;border-top:3px solid var(--ink);transition:transform .2s,visibility .2s}
.dock a{display:flex;align-items:center;justify-content:center;gap:.4rem;min-height:58px;font-weight:700;text-decoration:none;font-size:1rem;padding:.3rem .4rem}
.d-tel{background:var(--ink);color:#fff}
.d-sms{background:var(--lime);color:var(--ink)}
.dock.off{transform:translateY(110%);visibility:hidden}

@media (max-width:359px){
  body{font-size:16px}
  .hd-in{gap:.4rem;padding-left:12px;padding-right:12px}
  .logo .mark{width:26px;height:26px}
  .logo b{font-size:1.02rem}
  .kw{font-size:.76rem;padding:.1rem .4rem}
  .tabs a{font-size:.86rem}
  .hero{padding-left:12px;padding-right:12px}
  .hero h1{font-size:1.75rem}
  .sec,.wrap,.crumb,.band,.ask-in{padding-left:12px;padding-right:12px}
  .wrap .sec{padding-left:0;padding-right:0}
  .cta-inline a,.dock a{font-size:.93rem;gap:.3rem}
  .sv{grid-template-columns:100px 1fr}
  .grid-a{grid-template-columns:repeat(2,1fr)}
  .shots,.exs{gap:8px}
}
@media (min-width:720px){
  body{padding-bottom:0}
  .hd-tel{display:flex}
  .tabs{justify-content:start;grid-template-columns:repeat(4,max-content);gap:1.6rem;padding:0 16px}
  .hero{padding-top:1.8rem}
  .hero>.eye,.hero>h1,.hero>.lead,.hero>.cta-inline{max-width:1080px}
  .hero h1{font-size:2.8rem}
  .hero-ba{max-width:620px}
  .cta-inline{max-width:520px}
  h2{font-size:1.9rem}
  .ucs{grid-template-columns:repeat(2,1fr)}
  .svs{grid-template-columns:1fr 1fr}
  .qcs{grid-template-columns:1fr 1fr}
  .film{grid-template-columns:repeat(3,1fr)}
  .vs{grid-template-columns:repeat(3,1fr)}
  .mqs{grid-template-columns:1fr 1fr}
  .grid-a{grid-template-columns:repeat(5,1fr)}
  .pipe{max-width:720px}
  .ba.wide{max-width:720px}
  .dws{max-width:720px}
  .dock{left:auto;right:16px;bottom:16px;width:380px;border:3px solid var(--ink);border-radius:8px;overflow:hidden}
}
@media (min-width:1100px){
  .ucs{grid-template-columns:repeat(3,1fr)}
  .svs{grid-template-columns:repeat(3,1fr)}
  .grid-a{grid-template-columns:repeat(7,1fr)}
  .hero{display:grid;grid-template-columns:1.05fr .95fr;column-gap:2.4rem;align-items:start;padding-left:max(16px,calc((100% - 1120px)/2));padding-right:max(16px,calc((100% - 1120px)/2))}
  .hero>*{max-width:none;margin:0;grid-column:1}
  .hero .hero-ba{grid-column:2;grid-row:1/span 5;margin-top:0;max-width:none}
}
@media (prefers-reduced-motion:reduce){.dock{transition:none}}