/* 에이스홈픽스 화장실 거울 교체 — 진주빛 은회색·짙은 남보라·구리색, Orbit 제목 + Gowun Dodum 본문.
   흰 질문 판 첫 화면 → 은빛 두꺼운 거울 액자 안 시공전|시공후(가운데 이음선·비스듬한 반사광) → 버튼,
   머리 아래 매달린 책갈피 탭 메뉴, 2열 체크 카드 증상, 은빛 액자 사례 카드, 닦기·가리기·교체 3단 비교, 지그재그 번호 원 작업 순서,
   세로 거울 사진 서비스 줄, 김 서린 거울 판 문의 영역, 권역별 알약 칩 지역, 반투명 선반 하단 고정 버튼.
   휴대폰(390px) 기준으로 쓰고 넓은 화면에서 칸을 늘린다. 가로로 넘기거나 눌러야 바뀌는 조작은 없다. */
:root{
  --pearl:#eef0f4; --pearl2:#e3e6ed; --paper:#fff; --ink:#23214a; --ink2:#4d4b6b; --muted:#5d6072; --line:#d4d8e2;
  --silver1:#f8f9fb; --silver2:#c3cad6; --silver3:#8f98a8; --indigo:#23214a; --indigo2:#34316a; --indigo-l:#e8e7f4;
  --copper:#b8552a; --copper-d:#8f3f1c; --copper-l:#f7e4d9; --red:#c8231a;
  --head:'Orbit','Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  --body:'Gowun Dodum','Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  --silver:linear-gradient(135deg,#fdfdfe 0%,#c9cfd9 28%,#f4f6f9 52%,#a9b1bf 78%,#e9ecf1 100%);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:16px}
body{margin:0;background:var(--pearl);color:var(--ink);font:16px/1.75 var(--body);word-break:keep-all;overflow-wrap:anywhere;padding-bottom:84px}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
ul,ol{list-style:none;margin:0;padding:0}
h1,h2,h3,p,figure,dl,dd{margin:0}
h1,h2,h3{font-family:var(--head);font-weight:400;line-height:1.35;letter-spacing:-.01em;word-spacing:-.12em}
b,strong{font-weight:700}
:focus-visible{outline:3px solid var(--copper);outline-offset:2px}
.nw{white-space:nowrap}
.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:1px solid var(--line)}
.hd-in{max-width:1080px;margin:0 auto;padding:12px 16px 10px}
.logo{display:flex;align-items:center;gap:8px;text-decoration:none;white-space:nowrap;min-width:0}
.logo svg{width:30px;height:30px;flex:none}
.lg-frame{fill:#eef1f6;stroke:var(--silver3);stroke-width:2.5}
.lg-shine{stroke:#fff;stroke-width:2.6;stroke-linecap:round;fill:none}
.lg-base{stroke:var(--copper);stroke-width:3;stroke-linecap:round}
.logo b{font-family:var(--head);font-weight:400;font-size:19px;color:var(--ink)}
.logo .tag{font-size:14px;color:var(--ink2);padding-left:9px;border-left:2px solid var(--silver2);overflow:hidden;text-overflow:ellipsis}
.tabs{max-width:1080px;margin:0 auto;padding:0 12px;display:grid;grid-template-columns:repeat(4,1fr);gap:6px;transform:translateY(1px)}
.tabs a{display:flex;align-items:center;justify-content:center;text-align:center;text-decoration:none;font-size:14px;line-height:1.3;
  min-height:42px;padding:6px 4px;background:var(--pearl2);border:1px solid var(--line);border-top:0;border-radius:0 0 12px 12px;color:var(--ink)}
.tabs a:nth-child(2){background:#dfe3ea}
.tabs a:nth-child(3){background:var(--copper-l);border-color:#ecc9b6}
.tabs a:hover{background:var(--indigo);color:#fff}

/* 첫 화면 */
.hero{max-width:1080px;margin:0 auto;padding:18px 16px 8px}
.hero-q{background:var(--paper);border-radius:22px;padding:22px 18px 20px;box-shadow:0 1px 0 var(--line)}
.hero-kick{display:inline-block;font-size:13px;color:var(--copper-d);background:var(--copper-l);border-radius:999px;padding:3px 12px;margin-bottom:10px}
.hero h1{font-size:30px;color:var(--ink)}
.hero h1 span{display:block;font-size:18px;color:var(--ink2);margin-top:4px}
.hero .lead{margin-top:12px;color:var(--ink)}
.hero .lead b{background:linear-gradient(transparent 62%,var(--copper-l) 62%)}
.hero-frame{display:block;text-decoration:none;margin-top:16px}
.frame{position:relative;display:block;padding:10px;border-radius:26px;background:var(--silver);box-shadow:0 10px 28px rgba(35,33,74,.18),inset 0 0 0 1px rgba(255,255,255,.7)}
.frame .duo{border-radius:18px;overflow:hidden;gap:3px;background:var(--silver3)}
.frame .duo figure{border-radius:0}
.shine{position:absolute;inset:10px;border-radius:18px;pointer-events:none;
  background:linear-gradient(115deg,transparent 22%,rgba(255,255,255,.28) 30%,transparent 38%,transparent 60%,rgba(255,255,255,.18) 66%,transparent 72%)}
.hf-cap{display:block;text-align:center;font-size:14px;color:var(--ink2);margin-top:10px}
.frame-sm{margin:18px 0 6px}

/* 시공전·시공후 나란히 */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.duo figure{position:relative;overflow:hidden;border-radius:12px;background:var(--pearl2);aspect-ratio:3/4}
.duo img{width:100%;height:100%;object-fit:cover}
.duo.big figure{aspect-ratio:3/4}
.lbl{position:absolute;left:8px;bottom:8px;z-index:1;font-size:13px;line-height:1;padding:6px 10px;border-radius:999px;font-weight:700}
.l-b{background:rgba(255,255,255,.92);color:var(--ink)}
.l-a{background:var(--copper);color:#fff}

/* 문의 버튼 [문자보내기][번호] */
.cta{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:16px}
.cta a{display:flex;align-items:center;justify-content:center;min-height:52px;border-radius:14px;text-decoration:none;font-weight:700;font-size:16px;white-space:nowrap;padding:0 8px}
.c-sms{background:var(--copper);color:#fff}
.c-sms:hover{background:var(--copper-d)}
.c-call{background:var(--paper);color:var(--ink);border:2px solid var(--ink)}
.c-call:hover{background:var(--indigo);color:#fff}

/* 공통 구역 */
.wrap{max-width:1080px;margin:0 auto;padding:0 16px}
.blk{max-width:1080px;margin:0 auto;padding:30px 16px 6px}
.wrap .blk{padding-left:0;padding-right:0}
.blk h2{font-size:23px;margin-bottom:12px}
.blk h3{font-size:18px;margin:18px 0 6px}
.blk p+p{margin-top:10px}
.kick{font-size:13px;color:var(--copper-d);letter-spacing:.04em;margin-bottom:4px}
.kick::before{content:'';display:inline-block;width:18px;height:2px;background:var(--copper);vertical-align:middle;margin-right:6px}
.sub{color:var(--muted);margin:-4px 0 14px}
.answer{background:var(--paper);border-left:4px solid var(--indigo);border-radius:0 14px 14px 0;padding:14px 16px;margin-bottom:14px}
.more{display:inline-flex;align-items:center;gap:6px;margin-top:14px;font-weight:700;text-decoration:none;border-bottom:2px solid var(--copper);padding-bottom:2px}
.more::after{content:'→'}

/* 증상 체크 카드 2열 */
.cks{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ck{display:flex;flex-direction:column;gap:8px;height:100%;padding:14px 12px;border-radius:16px;background:var(--paper);border:1px solid var(--line);text-decoration:none;position:relative}
.ck::after{content:'';position:absolute;right:12px;top:14px;width:16px;height:16px;border:2px solid var(--silver2);border-radius:5px}
.ck:hover{border-color:var(--indigo)}
.ck:hover::after{background:var(--copper);border-color:var(--copper)}
.ck .ico{width:34px;height:34px}
.ico{fill:none;stroke:var(--indigo);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.ck b{display:block;font-size:15px;line-height:1.4}
.ck small{display:block;font-size:13px;color:var(--muted);margin-top:2px}

/* 사례 카드: 은빛 액자 */
.mcs{display:grid;gap:16px}
.mc{display:block;text-decoration:none;padding:5px;border-radius:22px;background:var(--silver);box-shadow:0 6px 18px rgba(35,33,74,.12)}
.mc-in{display:block;background:var(--paper);border-radius:18px;padding:10px}
.mc:hover{box-shadow:0 8px 24px rgba(35,33,74,.24)}
.mc-body{display:block;padding:12px 4px 4px}
.mc-kind{display:inline-block;font-size:13px;color:var(--copper-d);border:1px solid #e8bfa9;border-radius:6px;padding:1px 8px}
.mc-title{display:block;font-family:var(--head);font-weight:400;font-size:18px;line-height:1.4;margin:8px 0 10px}
.mc-row{display:grid;grid-template-columns:70px 1fr;gap:8px;font-size:14px;padding:7px 0;border-top:1px dashed var(--line)}
.mc-row b{color:var(--ink2)}

/* 닦기·가리기·교체 비교 */
.cvs{display:grid;gap:12px}
.cv{background:var(--paper);border-radius:16px;padding:16px;border:1px solid var(--line);position:relative}
.cv-pick{border:2px solid var(--copper);background:#fffaf6}
.cv-n{position:absolute;right:14px;top:10px;font-family:var(--head);font-size:30px;color:var(--pearl2)}
.cv strong{display:block;font-family:var(--head);font-weight:400;font-size:19px}
.cv-for{display:inline-block;font-size:13px;background:var(--indigo-l);border-radius:999px;padding:2px 10px;margin:6px 0 8px}
.cv p b{display:block;font-size:13px;color:var(--copper-d)}
.cv p+p{margin-top:6px}
.cv-link{display:block;margin-top:10px;font-weight:700;font-size:14px}

/* 지그재그 작업 순서 */
.zz{display:grid;gap:18px}
.zz li{display:grid;grid-template-columns:42% 1fr;gap:14px;align-items:start}
.zz li:nth-child(even){grid-template-columns:1fr 42%}
.zz li:nth-child(even) figure{order:2}
.zz figure{position:relative;border-radius:14px;overflow:hidden;background:var(--pearl2);aspect-ratio:3/4}
.zz figure img{width:100%;height:100%;object-fit:cover}
.zz-no{position:absolute;top:8px;left:8px;width:32px;height:32px;border-radius:50%;background:var(--indigo);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--head);font-size:16px;border:2px solid #fff}
.zz h3{margin:2px 0 4px;font-size:17px}
.zz p{font-size:15px}
.stage{font-size:13px;color:var(--copper-d)}

/* 서비스 줄: 세로 거울 모양 사진 + 글 */
.svs{display:grid;gap:12px}
.sv{display:grid;grid-template-columns:96px 1fr;gap:14px;align-items:start;text-decoration:none;background:var(--paper);border-radius:18px;padding:12px;border:1px solid var(--line)}
.sv:hover{border-color:var(--indigo)}
.sv-img{display:block;border-radius:48px 48px 12px 12px;overflow:hidden;border:3px solid var(--silver2);aspect-ratio:2/3}
.sv-img img{width:100%;height:100%;object-fit:cover}
.sv-txt{display:block;min-width:0}
.sv-txt em{display:block;font-style:normal;font-size:13px;color:var(--copper-d)}
.sv-txt strong{display:block;font-family:var(--head);font-weight:400;font-size:18px;line-height:1.35;margin:2px 0 4px}
.sv-sym{display:block;font-size:14px;color:var(--ink2)}
.sv-ans{display:block;font-size:14px;margin-top:6px}
.sv-go{display:inline-block;margin-top:8px;font-size:14px;font-weight:700;border-bottom:2px solid var(--copper)}

/* 문의 영역: 김 서린 거울 판 */
.fr-wrap{background:var(--indigo);margin-top:34px;padding:30px 16px 32px}
.fr{max-width:760px;margin:0 auto;color:#fff}
.fr-kick{font-size:13px;color:#f3c4a8;letter-spacing:.04em}
.fr h2{font-size:23px;margin:4px 0 8px}
.fr-lead{color:#d9d8ec}
.fr-glass{margin-top:16px;padding:16px 16px 18px;border-radius:24px;color:var(--ink);
  background:radial-gradient(circle at 18% 12%,rgba(255,255,255,.95),rgba(255,255,255,0) 42%),linear-gradient(160deg,#f3f5f8,#cfd5df 70%,#e7eaf0);
  border:6px solid #b7bfcc;box-shadow:inset 0 0 22px rgba(255,255,255,.8)}
.fr-to{font-size:13px;color:var(--muted);border-bottom:1px solid rgba(35,33,74,.15);padding-bottom:8px;margin-bottom:8px}
.fr-lines li{font-size:15px;padding:5px 0}
.fr-lines li:first-child{font-weight:700}
.fr-lines li:last-child{color:var(--copper-d)}
.fr-shots{display:grid;gap:8px;margin-top:14px}
.fr-shots li{display:grid;grid-template-columns:56px 1fr;gap:10px;align-items:start;font-size:14px;color:#e6e5f3}
.fr-shots b{display:block;color:#fff}
.fr-ic{display:flex;align-items:center;justify-content:center;height:40px;border-radius:12px 12px 4px 4px;border:2px solid #b7bfcc;font-size:12px;color:#fff}
.fr .c-call{background:transparent;color:#fff;border-color:#fff}
.fr .c-call:hover{background:#fff;color:var(--ink)}

/* 질문 답변 */
.qa{display:grid;gap:8px}
.qa details{background:var(--paper);border-radius:14px;border:1px solid var(--line)}
.qa summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:30px 1fr 18px;gap:8px;align-items:start;padding:14px;font-weight:700}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:'+';font-size:20px;line-height:1.2;color:var(--copper)}
.qa details[open] summary::after{content:'−'}
.q{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:var(--indigo-l);color:var(--indigo);font-family:var(--head)}
.qa details p{padding:0 16px 16px 52px}

/* 지역 */
.area-red{color:var(--red);margin-bottom:6px}
.area-red strong{font-family:'Apple SD Gothic Neo','Malgun Gothic','Noto Sans KR',sans-serif;font-weight:800}
.ar{display:grid;gap:18px}
.ar-g h3{font-size:19px;margin:0 0 8px;padding-bottom:6px;border-bottom:2px solid var(--silver2)}
.ar-g h3 small{font-family:var(--body);font-size:13px;color:var(--muted)}
.ar-g ul{display:flex;flex-wrap:wrap;gap:6px}
.ar-g a{display:inline-block;text-decoration:none;font-size:14px;padding:5px 11px;border-radius:999px;background:var(--paper);border:1px solid var(--line)}
.ar-g a:hover{background:var(--indigo);color:#fff;border-color:var(--indigo)}

/* 하위 페이지 머리 */
.ph{background:var(--paper);border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.ph::before{content:'';position:absolute;top:0;right:-40px;width:120px;height:100%;background:linear-gradient(100deg,transparent,rgba(195,202,214,.35),transparent);transform:skewX(-18deg);pointer-events:none}
.ph-in{max-width:1080px;margin:0 auto;padding:16px 16px 22px;position:relative}
.crumb{font-size:13px;color:var(--muted);display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.crumb a{text-decoration:none}
.ph-label{display:inline-block;font-size:13px;color:#fff;background:var(--copper);border-radius:6px;padding:2px 10px;margin-bottom:8px}
.ph h1{font-size:26px}
.ph .lead{margin-top:10px}
.upd{font-size:13px;color:var(--muted);margin-top:10px}

.pts{display:grid;gap:8px;margin:18px 0}
.pts li{display:grid;grid-template-columns:30px 1fr;gap:10px;align-items:start;background:var(--paper);border-radius:12px;padding:10px 12px}
.pts li span{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:var(--indigo);color:#fff;font-family:var(--head);font-size:14px}
.pts.small li{font-size:15px}
.toc{background:var(--paper);border-radius:16px;padding:14px 16px;border:1px dashed var(--silver3);margin:10px 0 4px}
.toc p{font-weight:700;margin-bottom:6px}
.toc ol{list-style:decimal;padding-left:22px}
.toc li{padding:2px 0}
.toc a{text-decoration:none;border-bottom:1px solid var(--silver2)}
.facts{display:grid;gap:10px;margin-top:12px}
.facts div{background:var(--paper);border-radius:14px;padding:14px;border-top:3px solid var(--copper)}
.facts h3{margin:0 0 4px;font-size:17px}
.vs{display:grid;gap:10px;margin-top:12px}
.vs-c{background:var(--paper);border-radius:14px;padding:14px;border:1px solid var(--line)}
.vs-c strong{display:block;font-family:var(--head);font-weight:400;font-size:18px;margin-bottom:6px}
.vs-c p b{display:block;font-size:13px;color:var(--copper-d)}
.vs-c p+p{margin-top:6px}
.chk{display:grid;gap:8px}
.chk li{background:var(--paper);border-radius:12px;padding:12px 14px;border-left:4px solid var(--silver2)}
.chk b{display:block}
.chk span{display:block;font-size:15px;color:var(--ink2)}
.sum{display:grid;gap:8px}
.sum div{display:grid;grid-template-columns:80px 1fr;gap:10px;background:var(--paper);border-radius:12px;padding:12px 14px}
.sum dt{font-weight:700;color:var(--ink2)}
.sum li{padding:1px 0}
.sum li::before{content:'· '}
.qcs{display:grid;gap:12px}
.qc{display:grid;grid-template-columns:92px 1fr;gap:12px;text-decoration:none;background:var(--paper);border-radius:16px;padding:12px;border:1px solid var(--line)}
.qc-img{border-radius:12px;overflow:hidden;aspect-ratio:3/4}
.qc-img img{width:100%;height:100%;object-fit:cover}
.qc-t{display:block;min-width:0}
.qc-t strong{display:block;font-size:16px;margin-bottom:4px}
.qc-t span{display:block;font-size:14px}
.qc-t em{display:block;font-style:normal;font-size:13px;color:var(--copper-d);margin-top:6px}
.why-pick{background:var(--indigo-l);border-radius:12px;padding:12px 14px;margin-bottom:12px}
.rl{display:flex;flex-wrap:wrap;gap:6px}
.rl a{display:inline-block;text-decoration:none;font-size:14px;padding:5px 11px;border-radius:999px;background:var(--paper);border:1px solid var(--line)}
.links h2+.svs,.links h2+.mcs{margin-bottom:22px}
.ex{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ex figure{background:var(--paper);border-radius:14px;overflow:hidden}
.ex img{width:100%;aspect-ratio:3/4;object-fit:cover}
.ex figcaption{padding:10px;font-size:14px}
.ex figcaption b{display:block}
.tip{margin-top:12px;background:var(--paper);border-radius:12px;padding:12px 14px}
.flow{counter-reset:f;display:grid;gap:8px}
.flow li{counter-increment:f;display:grid;grid-template-columns:30px 1fr;gap:10px;background:var(--paper);border-radius:12px;padding:10px 12px}
.flow li::before{content:counter(f);display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;border:2px solid var(--copper);color:var(--copper-d);font-family:var(--head)}

/* 하단 고정: 반투명 선반 */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:30;display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  background:rgba(238,240,244,.9);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:3px solid var(--silver2);transition:transform .2s,opacity .2s}
.dock a{display:flex;align-items:center;justify-content:center;min-height:50px;border-radius:14px;text-decoration:none;font-weight:700;white-space:nowrap}
.dk-call{background:var(--indigo);color:#fff}
.dk-sms{background:var(--copper);color:#fff}
.dock.hide{visibility:hidden;opacity:0;transform:translateY(100%)}

@media (max-width:359px){
  .logo b{font-size:17px}
  .logo .tag{font-size:13px;padding-left:7px}
  .logo{gap:6px}
  .logo svg{width:26px;height:26px}
  .tabs a{font-size:13px}
  .hero h1{font-size:26px}
  .cks{grid-template-columns:1fr}
  .cta a,.dock a{font-size:15px}
  .sv{grid-template-columns:76px 1fr}
  .qc{grid-template-columns:76px 1fr}
  .zz li,.zz li:nth-child(even){grid-template-columns:40% 1fr}
  .zz li:nth-child(even) figure{order:0}
  .mc-row{grid-template-columns:62px 1fr}
}
@media (min-width:720px){
  .hero{display:grid;grid-template-columns:1.05fr 1fr;gap:26px;align-items:center;padding-top:30px}
  .hero-q{grid-row:span 2}
  .hero .cta{grid-column:2}
  .hero h1{font-size:38px}
  .cks{grid-template-columns:repeat(3,1fr)}
  .mcs{grid-template-columns:repeat(2,1fr)}
  .cvs{grid-template-columns:repeat(3,1fr)}
  .svs{grid-template-columns:repeat(2,1fr)}
  .facts,.vs{grid-template-columns:repeat(3,1fr)}
  .qcs{grid-template-columns:1fr}
  .zz li,.zz li:nth-child(even){grid-template-columns:220px 1fr}
  .zz li:nth-child(even) figure{order:0}
  .ex{max-width:560px}
  .ar{grid-template-columns:1fr}
  .dock{left:auto;right:20px;bottom:20px;width:380px;border-radius:20px;border:3px solid var(--silver2);padding:10px}
  .blk h2{font-size:27px}
}
@media (min-width:1080px){
  .mcs{grid-template-columns:repeat(3,1fr)}
}