/* 에이스홈픽스 방문턱 제거 — 공사 현장 바닥 단면도·턱 주의 표지 화면
   미장 시멘트 회색 바탕 · 먹색 · 경고 노랑(턱 주의 줄무늬) · 흰 인조대리석 / 원티드 산스 Black(제목) + 시스템 고딕(본문)
   휴대폰 기준으로 먼저 짜고 넓은 화면에서 칸을 늘린다. 숨은 조작(슬라이더·가로 넘김) 없음.
   버튼 글자는 줄바꿈하지 않고(white-space:nowrap), 좁으면 버튼이 통째로 다음 줄로 내려간다(flex-wrap). */
:root{
 --cem:#e8e5de; --cem2:#d9d5cc; --cem3:#c6c1b6; --paper:#fbfaf7; --ink:#161616; --ink2:#3d3b37; --ink3:#625e57;
 --hz:#ffc21a; --hz-d:#e0a400; --hz-l:#fff1c4; --marble:#ffffff; --vein:#cfccc6; --red:#d11f1f;
 --stripe:repeating-linear-gradient(-45deg,var(--hz) 0 12px,var(--ink) 12px 24px);
 --title:'Wanted Sans Variable','Wanted Sans','Apple SD Gothic Neo','Malgun Gothic',sans-serif;
 --sans:-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;color:var(--ink);font:16.5px/1.7 var(--sans);word-break:keep-all;overflow-wrap:break-word;padding-bottom:84px;
 background:var(--cem) radial-gradient(rgba(0,0,0,.05) 1px,transparent 1.4px) 0 0/7px 7px}
img{max-width:100%;height:auto;display:block}
a{color:var(--ink)}
h1,h2,h3{font-weight:800;line-height:1.35;letter-spacing:-.02em;margin:0 0 .5em}
h1,h2{font-family:var(--title);font-weight:900;letter-spacing:-.02em}
h2{font-size:1.75rem;line-height:1.3}
h3{font-size:1.1rem}
p{margin:0 0 .9em}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:8px 12px;z-index:50}
.skip:focus{left:8px}
:focus-visible{outline:3px solid var(--hz-d);outline-offset:2px}

/* ── 머리: 단면 로고 + 수평자 메뉴 ─────────────────── */
.hd{background:var(--paper);color:var(--ink);border-top:6px solid var(--ink)}
.hd-in{max-width:1100px;margin:0 auto;padding:10px 16px 8px}
.logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.logo svg{width:42px;height:38px;flex:none}
.l-bg{fill:var(--ink)} .l-line{fill:none;stroke:var(--hz);stroke-width:2.6;stroke-linejoin:round}
.l-bump{fill:var(--hz);opacity:.35} .l-flat{stroke:#fff;stroke-width:2.6;stroke-linecap:round}
.logo-t{display:flex;align-items:center;gap:8px;flex-wrap:wrap;line-height:1.2}
.logo-t b{font-size:1.2rem;font-weight:900;letter-spacing:-.02em;white-space:nowrap}
.logo-t .kw{font-style:normal;font-size:.8rem;font-weight:900;color:var(--ink);white-space:nowrap;padding:2px 8px;
 background:var(--hz);border-radius:3px;box-shadow:inset 0 -3px 0 var(--hz-d)}
.level{padding:0 12px 12px;background:var(--paper)}
.level ul{list-style:none;margin:0 auto;padding:4px;max-width:1100px;display:grid;grid-template-columns:repeat(4,1fr);gap:0;
 background:linear-gradient(var(--hz) 0 45%,var(--hz-d) 100%);border-radius:6px;border:2px solid #000;position:relative}
.level li{position:relative}
.level li+li::before{content:"";position:absolute;left:-6px;top:50%;width:12px;height:20px;margin-top:-10px;border-radius:6px;
 background:radial-gradient(circle at 50% 50%,#fff 0 2.5px,#b7e35b 3px 100%);border:2px solid #000;z-index:1}
.level a{display:flex;align-items:center;justify-content:center;min-height:44px;padding:6px 10px;color:var(--ink);text-decoration:none;
 font-weight:900;font-size:.92rem;text-align:center;line-height:1.25;border-radius:4px}
.level a:hover,.level a:focus-visible{background:rgba(255,255,255,.55)}

/* ── 버튼: 줄바꿈 금지, 좁으면 한 줄씩 ────────────── */
.cta{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0}
.cta a{flex:1 1 9.8em;display:flex;align-items:center;justify-content:center;min-height:54px;border-radius:4px;text-decoration:none;
 font-weight:900;font-size:1.05rem;padding:8px 12px;text-align:center;white-space:nowrap}
.b-sms{background:var(--hz);color:var(--ink);border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink)}
.b-call{background:var(--marble);color:var(--ink);border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink)}
.b-sms:hover{background:#ffd24d} .b-call:hover{background:var(--hz-l)}

/* ── 전후 사진: 시공전 줄무늬 꼬리표·시공후 대리석 꼬리표 ── */
.pr{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.pr figure{margin:0;position:relative;overflow:hidden;background:var(--cem2);aspect-ratio:3/4;border:2px solid var(--ink)}
.pr img{width:100%;height:100%;object-fit:cover}
.pr.big figure{aspect-ratio:4/5}
.tag{position:absolute;left:0;top:0;z-index:1;font-size:.8rem;font-weight:900;padding:3px 10px;line-height:1.4;white-space:nowrap;border-bottom-right-radius:4px}
.tag-b{background:var(--hz);color:var(--ink);box-shadow:inset 0 -4px 0 var(--ink)}
.tag-a{background:var(--marble);color:var(--ink);box-shadow:inset 0 -4px 0 var(--vein)}

/* ── 줄무늬 띠(턱 주의) ────────────────────────── */
.tape{display:block;height:12px;background:var(--stripe);border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}

/* ── 첫 화면: 제목 → 첫 답 → 버튼 → 단면 액자 ───────── */
.hero{background:var(--paper);border-bottom:3px solid var(--ink)}
.hero-in{max-width:1100px;margin:0 auto;padding:18px 16px 22px}
.kick{margin:0 0 6px;font-size:.84rem;font-weight:900;color:var(--ink3);letter-spacing:.01em}
.hero h1{font-size:2.5rem;line-height:1.15;margin:0 0 12px}
.hero h1 span{display:block;font-family:var(--sans);font-weight:800;font-size:1.08rem;line-height:1.45;margin-top:8px;color:var(--ink2);letter-spacing:-.02em}
.lead{font-size:1.02rem;margin:0 0 4px}
.lead b{background:linear-gradient(transparent 62%,var(--hz-l) 62%)}
.sect{display:block;margin:6px 0 16px;text-decoration:none;color:var(--ink);background:var(--cem);border:2px solid var(--ink);padding:8px 8px 0;box-shadow:6px 6px 0 var(--ink)}
.sect-line{display:block;width:100%;height:28px;margin-top:4px}
.sl-b{fill:none;stroke:var(--ink);stroke-width:3} .sl-bump{fill:var(--hz);stroke:var(--ink);stroke-width:2} .sl-a{fill:none;stroke:var(--ink);stroke-width:3}
.sect-cap{display:block;padding:8px 4px 10px;font-weight:800;font-size:.95rem;border-top:2px dashed var(--ink3)}
.more-lead{font-size:.97rem;color:var(--ink2);margin:0}

/* ── 공통 섹션 ────────────────────────────────── */
main{display:block}
.sec{max-width:1100px;margin:0 auto;padding:36px 16px 8px}
.sub{color:var(--ink2)}
.answer{background:var(--paper);border-left:6px solid var(--hz);padding:12px 14px}
.more{display:inline-flex;align-items:center;min-height:46px;margin:14px 0 0;padding:8px 18px;background:var(--paper);border:2px solid var(--ink);
 color:var(--ink);text-decoration:none;font-weight:900;box-shadow:3px 3px 0 var(--ink)}
.more::after{content:"→";margin-left:8px}
.wrap{max-width:1100px;margin:0 auto;padding:0 16px}
.wrap>.sec{padding-left:0;padding-right:0}

/* ── 어느 문턱인가요: 단면 그림 줄 목록 ────────────── */
.picks{display:grid;gap:0;border-top:2px solid var(--ink)}
.pk{display:grid;grid-template-columns:78px 1fr 22px;align-items:center;gap:12px;padding:12px 6px;text-decoration:none;color:var(--ink);
 border-bottom:2px dashed var(--ink3);background:transparent}
.pk:hover,.pk:focus-visible{background:var(--hz-l)}
.pf{width:78px;height:36px;display:block}
.p-line{fill:none;stroke:var(--ink);stroke-width:3;stroke-linejoin:round}
.p-bump{fill:var(--hz);stroke:none} .p-rot{fill:#8a6f55;stroke:none} .p-tile{stroke:#8c9aa6;stroke-width:3;stroke-dasharray:4 3}
.p-mark{fill:none;stroke:var(--ink3);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.p-new{fill:none;stroke:var(--hz-d);stroke-width:5;stroke-linecap:round}
.p-new-f{fill:var(--marble);stroke:var(--ink);stroke-width:1.5} .p-ghost{stroke:var(--ink3);stroke-width:2;stroke-dasharray:3 3}
.p-marble{fill:var(--marble);stroke:var(--ink);stroke-width:1.5}
.pk-t{display:flex;flex-direction:column;line-height:1.35}
.pk-t b{font-size:1.02rem}
.pk-t small{font-size:.86rem;color:var(--ink3);font-weight:700}
.pk-go{width:22px;height:22px;border-radius:50%;background:var(--ink);position:relative}
.pk-go::after{content:"";position:absolute;left:7px;top:7px;width:6px;height:6px;border-top:2px solid var(--hz);border-right:2px solid var(--hz);transform:rotate(45deg)}

/* ── 사례 카드: 아래에 흰 대리석 문지방 받침 ─────────── */
.scs{display:grid;gap:22px}
.sc{display:flex;flex-direction:column;text-decoration:none;color:var(--ink);background:var(--paper);border:2px solid var(--ink);padding:8px 8px 0;position:relative}
.sc .pr figure{border-width:1px}
.sc-b{display:flex;flex-direction:column;gap:6px;padding:12px 4px 14px}
.kind{align-self:flex-start;font-size:.78rem;font-weight:900;padding:2px 8px;background:var(--ink);color:var(--hz);border-radius:2px}
.sc-t{font-size:1.08rem;line-height:1.42}
.row{display:grid;grid-template-columns:4.6em 1fr;gap:6px;font-size:.92rem;line-height:1.5}
.row b{font-weight:900;border-right:2px solid var(--hz);padding-right:6px}
.sill{display:block;height:14px;margin:0 -10px -2px;background:linear-gradient(100deg,transparent 0 30%,rgba(0,0,0,.06) 31% 32%,transparent 33% 62%,rgba(0,0,0,.05) 63% 64%,transparent 65%),var(--marble);
 border:2px solid var(--ink);border-radius:2px 2px 0 0;box-shadow:0 4px 0 var(--cem3)}
.sc:hover .sc-t,.sc:focus-visible .sc-t{text-decoration:underline;text-decoration-color:var(--hz-d);text-decoration-thickness:3px}

/* ── 마감 방법 단면 비교 ───────────────────────── */
.ways{display:grid;gap:12px}
.way{display:grid;grid-template-columns:96px 1fr;gap:12px;text-decoration:none;color:var(--ink);background:var(--paper);border:2px solid var(--ink);padding:10px}
.way-img{display:block;aspect-ratio:3/4;overflow:hidden;border:1px solid var(--ink)}
.way-img img{width:100%;height:100%;object-fit:cover}
.way-t{display:flex;flex-direction:column;gap:3px;font-size:.92rem;line-height:1.5}
.pf-s{width:80px;height:30px}
.way-t strong{font-size:1.06rem}
.way-t b{font-weight:900;margin-right:6px}
.way:hover,.way:focus-visible{background:var(--hz-l)}

/* ── 질문 카드: 공사 안내판 ────────────────────── */
.signs{display:grid;gap:18px}
.sign{background:var(--paper);border:3px solid var(--ink)}
.sign-h{margin:0;height:34px;background:var(--stripe);border-bottom:3px solid var(--ink);display:flex;align-items:center;padding:0 10px}
.sign-h span{background:var(--ink);color:var(--hz);font-weight:900;font-size:.86rem;padding:1px 10px;line-height:1.6;white-space:nowrap}
.sign-b{padding:14px 14px 16px}
.sign-a{font-weight:800;font-size:1.02rem;border-left:5px solid var(--hz);padding-left:10px}
.sign-more{color:var(--ink2);font-size:.94rem}
.sign-link{display:inline-flex;align-items:center;min-height:44px;font-weight:900;text-decoration:none;border-bottom:3px solid var(--hz)}
.sign-link::after{content:"→";margin-left:6px}

/* ── 서비스 카드: 바닥재 무늬 띠 ───────────────── */
.svcs{display:grid;gap:16px}
.svc{display:grid;grid-template-columns:120px 1fr;grid-template-rows:auto 1fr;text-decoration:none;color:var(--ink);background:var(--paper);border:2px solid var(--ink);overflow:hidden}
.svc-band{grid-column:1/-1;display:block;height:14px;border-bottom:2px solid var(--ink)}
.fl-jang{background:repeating-linear-gradient(90deg,#c99b62 0 38px,#b8864f 38px 40px,#d3a86f 40px 70px,#b8864f 70px 72px)}
.fl-tile{background:repeating-linear-gradient(90deg,#9aa8b4 0 22px,#fff 22px 24px)}
.fl-ramp{background:linear-gradient(170deg,var(--hz) 0 50%,var(--cem2) 50%)}
.fl-marble{background:linear-gradient(115deg,#fff 0 40%,#e3e1dc 41%,#fff 43% 72%,#dedbd5 73%,#fff 75%)}
.svc-img{display:block;min-height:128px;position:relative;border-right:2px solid var(--ink)}
.svc-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.svc-t{display:flex;flex-direction:column;gap:4px;padding:12px 12px 14px;line-height:1.4}
.svc-k{display:flex;align-items:center;gap:6px;font-size:.8rem;font-weight:900;color:var(--ink3)}
.svc-k i{font-style:normal;background:var(--hz);color:var(--ink);padding:0 6px;border:1.5px solid var(--ink)}
.svc-t strong{font-size:1.08rem}
.svc-w{font-size:.9rem;color:var(--ink2)}
.svc:hover strong,.svc:focus-visible strong{text-decoration:underline;text-decoration-color:var(--hz-d);text-decoration-thickness:3px}

/* ── 작업 순서: 층 쌓기 ───────────────────────── */
.layers{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.ly{display:grid;grid-template-columns:52px 1fr;grid-template-rows:auto auto;gap:0 12px;background:var(--paper);border:2px solid var(--ink);padding:10px 12px 12px 0;
 border-left-width:10px}
.ly-1{border-left-color:#d8d3c8} .ly-2{border-left-color:#b9b2a4} .ly-3{border-left-color:#8f887b} .ly-4{border-left-color:#5c574f} .ly-5{border-left-color:var(--hz-d)}
.num{grid-row:1/3;align-self:start;margin-left:10px;display:flex;align-items:center;justify-content:center;width:42px;height:42px;background:var(--hz);border:2px solid var(--ink);
 font-weight:900;font-size:1rem}
.ly figure{margin:0 0 10px;border:1px solid var(--ink);aspect-ratio:4/3;overflow:hidden}
.ly figure img{width:100%;height:100%;object-fit:cover}
.ly div{grid-column:2}
.stage{margin:0 0 2px;font-size:.8rem;font-weight:900;color:var(--ink3)}
.ly h3{margin:0 0 4px}
.ly div p:last-child{margin:0;font-size:.95rem}

/* ── 문의: 줄무늬 테두리 A형 안내판 ─────────────── */
.board{max-width:1100px;margin:40px auto 30px;padding:0 16px;position:relative}
.bd-in{background:var(--stripe);padding:10px;border:3px solid var(--ink);position:relative;z-index:1}
.bd-head{background:var(--hz);border:3px solid var(--ink);padding:16px 14px 6px}
.bd-k{margin:0 0 4px;font-weight:900;font-size:.84rem}
.bd-head h2{font-size:1.6rem}
.bd-body{background:var(--marble);border:3px solid var(--ink);border-top:0;padding:14px}
.bd-sub{margin:4px 0 8px;font-weight:900;font-size:.9rem;display:flex;align-items:center;gap:8px}
.bd-sub::before{content:"";width:14px;height:14px;background:var(--hz);border:2px solid var(--ink);flex:none}
.bd-list{margin:0 0 14px;display:grid;gap:6px}
.bd-r{display:grid;grid-template-columns:6.4em 1fr;gap:10px;align-items:baseline;border-bottom:2px dotted var(--cem3);padding:4px 0}
.bd-r dt{font-weight:900}
.bd-r dd{margin:0;color:var(--ink2)}
.bd-shots{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:10px}
.bd-shots li{display:grid;grid-template-columns:64px 1fr;gap:10px;align-items:start}
.bd-shots svg{width:64px;height:40px;display:block}
.s-frame{fill:var(--cem);stroke:var(--ink);stroke-width:2} .s-floor{stroke:var(--ink);stroke-width:2.5;fill:none}
.s-sill{fill:var(--marble);stroke:var(--ink);stroke-width:2} .s-lens{fill:none;stroke:var(--hz-d);stroke-width:2.5}
.s-door{stroke:var(--ink3);stroke-width:2} .s-sill-l{stroke:var(--hz-d);stroke-width:5}
.bd-shots span{display:flex;flex-direction:column;font-size:.93rem;line-height:1.5}
.bd-shots b{font-weight:900}
.bd-note{font-size:.9rem;color:var(--ink2);margin:0}
.bd-leg{position:absolute;bottom:-18px;width:12px;height:30px;background:var(--ink);z-index:0}
.bd-leg-l{left:48px;transform:skewX(12deg)} .bd-leg-r{right:48px;transform:skewX(-12deg)}

/* ── 질문 답변(펼쳐 보기) ──────────────────────── */
.qa{display:grid;gap:8px}
.qa details{background:var(--paper);border:2px solid var(--ink)}
.qa summary{display:grid;grid-template-columns:30px 1fr 22px;gap:10px;align-items:center;padding:12px;cursor:pointer;list-style:none;font-weight:800;min-height:48px}
.qa summary::-webkit-details-marker{display:none}
.q{font-style:normal;display:flex;align-items:center;justify-content:center;width:30px;height:30px;background:var(--hz);border:2px solid var(--ink);font-weight:900;font-size:.9rem}
.pm{width:22px;height:22px;position:relative}
.pm::before,.pm::after{content:"";position:absolute;left:4px;right:4px;top:10px;height:3px;background:var(--ink)}
.pm::after{transform:rotate(90deg);transition:transform .15s}
.qa details[open] .pm::after{transform:rotate(0)}
.qa details p{margin:0;padding:0 14px 14px 52px;color:var(--ink2)}

/* ── 지역: 수평자 머리 + 문지방 칩 ─────────────── */
.area-red{color:var(--red);font-size:1.02rem}
.zones{display:grid;gap:20px}
.zone h3{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 10px;padding:6px 12px;border-radius:5px;border:2px solid #000;
 background:linear-gradient(var(--hz) 0 45%,var(--hz-d) 100%)}
.zone h3 small{font-size:.82rem;font-weight:800}
.zone ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 6px}
.zone a{display:inline-flex;align-items:center;min-height:40px;padding:4px 11px 2px;background:var(--paper);color:var(--ink);text-decoration:none;font-size:.92rem;font-weight:700;
 border:1.5px solid var(--ink3);border-bottom:5px solid var(--marble);box-shadow:0 2px 0 var(--ink3);white-space:nowrap}
.zone a:hover,.zone a:focus-visible{background:var(--hz-l)}

/* ── 하위 페이지 머리 ─────────────────────────── */
.ph{background:var(--paper);border-bottom:3px solid var(--ink)}
.ph-in{max-width:1100px;margin:0 auto;padding:14px 16px 18px}
.crumb{display:flex;flex-wrap:wrap;gap:6px;font-size:.84rem;color:var(--ink3);margin-bottom:10px}
.crumb a{color:var(--ink3)}
.ph-label{display:inline-block;margin:0 0 8px;font-size:.82rem;font-weight:900;background:var(--ink);color:var(--hz);padding:2px 10px}
.ph h1{font-size:2rem;line-height:1.25}
.upd{font-size:.82rem;color:var(--ink3);margin:6px 0 0}
.pts{margin:16px 0 0;padding:0;list-style:none;counter-reset:p;display:grid;gap:6px}
.pts li{counter-increment:p;display:grid;grid-template-columns:30px 1fr;gap:10px;align-items:start;font-weight:700}
.pts li::before{content:counter(p);display:flex;align-items:center;justify-content:center;width:28px;height:28px;background:var(--hz);border:2px solid var(--ink);font-weight:900;font-size:.85rem}
.wrap>.pr{margin-top:20px}
.toc{background:var(--paper);border:2px solid var(--ink);margin-top:22px;padding:12px 14px}
.toc p{margin:0 0 6px;font-weight:900}
.toc ol{margin:0;padding-left:1.3em}
.toc li{margin:4px 0}
.toc a{text-decoration-color:var(--hz-d);text-decoration-thickness:2px;font-weight:700}
.facts{display:grid;gap:10px}
.facts>div{background:var(--paper);border:2px solid var(--ink);border-top:8px solid var(--hz);padding:12px 14px}
.facts p{margin:0}
.cmp{display:grid;gap:10px}
.cmp-r{background:var(--paper);border:2px solid var(--ink);padding:12px 14px}
.cmp-r strong{display:block;font-size:1.05rem;margin-bottom:4px}
.cmp-r p{margin:0 0 4px;font-size:.95rem}
.cmp-r b{font-weight:900;margin-right:6px;background:var(--hz-l);padding:0 4px}
.chk{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.chk li{background:var(--paper);border:2px solid var(--ink);padding:10px 12px 10px 42px;position:relative;display:flex;flex-direction:column}
.chk li::before{content:"";position:absolute;left:12px;top:14px;width:18px;height:18px;background:var(--hz);border:2px solid var(--ink)}
.chk b{font-weight:900}
.sum{margin:0;display:grid;gap:8px}
.sum>div{display:grid;grid-template-columns:5.6em 1fr;gap:10px;background:var(--paper);border:2px solid var(--ink);padding:10px 12px}
.sum dt{font-weight:900}
.sum dd{margin:0}
.sum ul{margin:0;padding-left:1.1em}
.links h2{margin-top:18px}
.rl{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.rl a{display:inline-flex;align-items:center;min-height:40px;padding:4px 12px;background:var(--paper);border:1.5px solid var(--ink3);border-bottom:5px solid var(--marble);
 box-shadow:0 2px 0 var(--ink3);text-decoration:none;font-weight:700;font-size:.92rem;white-space:nowrap}
.rqs{display:grid;gap:12px}
.rq{display:grid;grid-template-columns:96px 1fr;gap:12px;text-decoration:none;color:var(--ink);background:var(--paper);border:2px solid var(--ink);padding:10px}
.rq-img{display:block;aspect-ratio:3/4;overflow:hidden;border:1px solid var(--ink)}
.rq-img img{width:100%;height:100%;object-fit:cover}
.rq-t{display:flex;flex-direction:column;gap:4px;font-size:.93rem;line-height:1.5}
.rq-t strong{font-size:1.02rem}
.rq-t em{font-style:normal;font-size:.84rem;font-weight:800;color:var(--ink3)}
.rq:hover,.rq:focus-visible{background:var(--hz-l)}
.warn{margin:0;padding-left:1.2em}
.why-pick{background:var(--paper);border-left:6px solid var(--hz);padding:10px 12px}
.local p:first-of-type{font-weight:700}
.ex{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ex figure{margin:0;background:var(--paper);border:2px solid var(--ink)}
.ex img{width:100%;aspect-ratio:3/4;object-fit:cover}
.ex figcaption{padding:8px 10px;font-size:.88rem;display:flex;flex-direction:column}
.ex b{font-weight:900}
.tip{margin-top:10px;background:var(--hz-l);padding:10px 12px;border:2px solid var(--ink)}
.flow-list{margin:0;padding-left:1.3em}
.flow-list li{margin:6px 0}
.sec h2 small{font-family:var(--sans);font-size:.9rem;font-weight:800;color:var(--ink3)}
.sec h2 a{color:var(--ink);text-decoration-color:var(--hz-d)}

/* ── 하단 고정: 줄무늬 윗단 먹색 띠 [번호][문자보내기] ── */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;flex-wrap:wrap;gap:8px;padding:10px 10px calc(8px + env(safe-area-inset-bottom));
 background:var(--ink);border-top:0;transition:opacity .2s,transform .2s}
.dock::before{content:"";position:absolute;left:0;right:0;top:-8px;height:8px;background:var(--stripe)}
.dock a{flex:1 1 8.6em;display:flex;align-items:center;justify-content:center;min-height:48px;border-radius:4px;text-decoration:none;font-weight:900;font-size:1rem;padding:6px 10px;white-space:nowrap}
.dk-call{background:#fff;color:var(--ink)}
.dk-sms{background:var(--hz);color:var(--ink)}
.dock.hide{opacity:0;transform:translateY(18px);visibility:hidden;pointer-events:none}

/* ── 좁은 화면 ───────────────────────────────── */
@media (max-width:374px){
 body{font-size:16px}
 .hero h1{font-size:2.15rem}
 .level{padding:0 8px 10px}
 .level a{font-size:.84rem;padding:6px 4px}
 .level ul{padding:4px 2px}
 .level li+li::before{width:7px;height:14px;margin-top:-7px;left:-3.5px;border-width:1.5px;background:#b7e35b}
 .logo-t b{font-size:1.1rem}
 .cta a{font-size:1rem;padding:8px 8px}
 .dock{padding-left:8px;padding-right:8px;gap:6px}
 .dock a{font-size:.95rem;padding:6px 6px}
 .pk{grid-template-columns:64px 1fr 22px;gap:10px}
 .pf{width:64px;height:30px}
 .svc{grid-template-columns:100px 1fr}
 .way,.rq{grid-template-columns:80px 1fr}
 .bd-r{grid-template-columns:1fr;gap:0}
}

/* ── 넓은 화면 ───────────────────────────────── */
@media (min-width:720px){
 h2{font-size:2.1rem}
 .hero-in{display:grid;grid-template-columns:1.05fr 1fr;gap:10px 36px;align-items:start;padding-top:28px}
 .hero-in .kick,.hero-in h1,.hero-in .lead,.hero-in .cta{grid-column:1}
 .hero-in .sect{grid-column:2;grid-row:1/6}
 .hero-in .more-lead{grid-column:1}
 .hero h1{font-size:3.2rem}
 .cta{max-width:520px}
 .picks{grid-template-columns:1fr 1fr;column-gap:24px}
 .scs{grid-template-columns:1fr 1fr}
 .ways{grid-template-columns:1fr 1fr}
 .signs{grid-template-columns:1fr 1fr}
 .svcs{grid-template-columns:1fr 1fr}
 .layers{grid-template-columns:1fr}
 .ly{grid-template-columns:62px 260px 1fr;grid-template-rows:auto;padding:12px 14px 12px 0}
 .ly figure{margin:0}
 .ly div{grid-column:3}
 .num{grid-row:1}
 .facts{grid-template-columns:repeat(3,1fr)}
 .cmp{grid-template-columns:repeat(3,1fr)}
 .chk{grid-template-columns:1fr 1fr}
 .rqs{grid-template-columns:1fr}
 .board .bd-in{display:grid;grid-template-columns:1fr 1.3fr}
 .bd-body{border-top:3px solid var(--ink);border-left:0}
 .dock{left:50%;right:auto;width:560px;transform:translateX(-50%);border-radius:0}
 .dock.hide{transform:translate(-50%,18px)}
 .ex{max-width:640px}
 .wrap>.pr.big{max-width:760px}
}
@media (min-width:1100px){
 .scs{grid-template-columns:repeat(3,1fr)}
 .ways{grid-template-columns:repeat(3,1fr)}
 .signs{grid-template-columns:repeat(3,1fr)}
 .svcs{grid-template-columns:repeat(4,1fr)}
 .svcs .svc{grid-template-columns:1fr;grid-template-rows:auto 150px 1fr}
 .svcs .svc-img{border-right:0;border-bottom:2px solid var(--ink)}
 .rqs{grid-template-columns:repeat(3,1fr)}
 .rq{grid-template-columns:1fr}
 .rq-img{aspect-ratio:4/3}
}