/* 집수리홈픽서 석고벽 보수(gypsumwall.zipsurihomefixer.kr) — 화면 콘셉트 '벽 단면 도면'.
   조인트 컴파운드(퍼티) 색의 따뜻한 흰 바탕에 짙은 이끼녹색을 구조 색으로, 공사장 안전황색을
   강조색으로 쓴다(빨강 없음 — bathtile의 진한 남색·주황, crackedtile의 크림·차콜·시그널 레드와
   색과 느낌이 모두 다르다). 머리는 한 줄 고정 헤더(로고 왼쪽·메뉴 오른쪽, 줄바꿈 허용, 접지 않음),
   첫 화면은 사진 대신 벽 단면(벽지·석고보드·각재) SVG 도해 + 글, 증상 바로가기는 가로 스크롤 없는
   줄바꿈 칩 목록, 시공 순서는 세로 점선 + 사각 번호표, 카드는 테두리·그림자 없이 사진이 카드
   전체를 채운다(사진이 주인공). 문의 영역은 절취선 점선 테두리를 두른 종이 질감 카드.
   제목 글꼴 Gugi(가운뎃점·화살표 글자가 없어 큰 제목에만 쓴다), 본문 Noto Sans KR(둘 다 Google Fonts · OFL). */

:root{
 --ink:#2b2823;        /* 본문 글자 */
 --ink-2:#5c5748;      /* 보조 글자 */
 --ink-3:#8b8471;      /* 더 옅은 글자 */
 --line:#d9d0ba;       /* 기본 선 */
 --line-2:#c2b79a;     /* 진한 선 */
 --bg:#f3efe4;         /* 바탕(조인트 컴파운드) */
 --paper:#fbf9f3;      /* 카드 바탕 */
 --paper-2:#ece4d1;    /* 옅은 카드 바탕 */
 --moss:#2f4030;       /* 짙은 이끼녹색(구조·라벨) */
 --moss-2:#1c2a1c;     /* 더 짙은 녹색 */
 --moss-3:#46603f;     /* 밝은 쪽 녹색 */
 --moss-l:#e4e9df;     /* 녹색 옅은 바탕 */
 --amber:#d99420;      /* 강조(문의·표시) */
 --amber-d:#a5700f;    /* 강조 진한 쪽 */
 --amber-l:#faedd2;    /* 강조 옅은 바탕 */
 --r:6px; --r-2:8px;
 --head:'Gugi','Noto Sans KR','Apple SD Gothic Neo',-apple-system,'Malgun Gothic',sans-serif;
 --body:'Noto Sans KR',-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:64px}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.75;
 word-break:keep-all;overflow-wrap:anywhere;padding-bottom:76px}
img{max-width:100%}
a{color:inherit}
h1,h2,h3{margin:0;line-height:1.35}
h1,h2{font-family:var(--head);font-weight:400;letter-spacing:0}
h3{font-family:var(--body);font-weight:900;letter-spacing:-.01em}
p{margin:0 0 12px}
ul,ol{margin:0;padding:0;list-style:none}
b,strong{font-weight:800}
.skip{position:absolute;left:-9999px;top:0}
.skip:focus{left:8px;top:8px;background:var(--moss-2);color:#fff;padding:10px 14px;z-index:70;border-radius:6px}
:focus-visible{outline:3px solid var(--amber);outline-offset:2px}

/* ── 폭과 여백 ──────────────────────────────────────────── */
.wrap{max-width:1100px;margin:0 auto;padding:0 16px}
.wrap.wide{max-width:1100px;padding:0}
@media(min-width:1100px){.wrap.wide{padding:0 16px}}

/* ── 머리: 한 줄 고정 헤더(접지 않고 줄바꿈) ───────────────── */
.hd{position:sticky;top:0;z-index:40;background:var(--paper);border-bottom:2px solid var(--moss)}
.hd-in{max-width:1100px;margin:0 auto;padding:9px 16px;display:flex;flex-wrap:wrap;align-items:center;
 justify-content:space-between;gap:6px 14px}
.brand{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--moss-2)}
.brand svg{width:28px;height:28px;flex:0 0 28px}
.brand b{font-family:var(--head);font-size:18px;font-weight:400;white-space:nowrap}
.brand em{font-style:normal;font-size:12.5px;font-weight:800;color:var(--amber-d);white-space:nowrap;
 padding:2px 8px;border-radius:999px;background:var(--amber-l)}
.menu{display:flex;flex-wrap:wrap;gap:2px 4px;justify-content:flex-end}
.menu a{display:flex;align-items:center;min-height:34px;padding:5px 9px;text-decoration:none;
 font-size:13.5px;font-weight:700;color:var(--ink-2);border-radius:4px}
.menu a:hover{background:var(--moss-l);color:var(--moss-2)}
@media(max-width:400px){.brand b{font-size:16.5px}.menu a{font-size:12.5px;padding:5px 7px}}
@media(max-width:345px){.hd-in{gap:5px 10px;padding:9px 12px}.brand{gap:6px}.brand b{font-size:15px}
 .brand em{font-size:11px;padding:2px 6px}}

/* ── 첫 화면: 사진 대신 벽 단면 도해 + 글, 두 칸 배치 ─────────── */
.hero{background:var(--paper-2);border-bottom:2px dashed var(--line-2)}
.hero-in{max-width:1100px;margin:0 auto;padding:26px 16px 22px;display:grid;gap:18px;align-items:center}
.hero-tx{min-width:0}
.hero .kick{display:inline-block;font-size:12.5px;font-weight:800;letter-spacing:.05em;margin:0 0 12px;
 padding:5px 11px;border-radius:999px;background:var(--moss);color:#fff}
.hero h1{font-size:clamp(28px,8vw,46px);line-height:1.24;margin:0 0 12px;color:var(--moss-2)}
.hero h1 i{font-style:normal;color:var(--amber-d)}
.hero .lead{font-size:15.5px;line-height:1.85;color:var(--ink-2);margin:0}
.hero .lead b{color:var(--ink);font-weight:800;box-shadow:inset 0 -.3em 0 var(--amber-l)}
.hero-fig{display:flex;justify-content:center}
.hero-svg{width:100%;max-width:320px;height:auto}
.hd-wall{fill:var(--paper);stroke:var(--line-2);stroke-width:2}
.hd-paper{fill:#e7ded0;opacity:.9}
.hd-crack{fill:none;stroke:var(--amber-d);stroke-width:3;stroke-linecap:round}
.hd-board{fill:var(--moss-l);stroke:var(--moss-3);stroke-width:2}
.hd-cut{fill:none;stroke:var(--moss-3);stroke-width:1.4;stroke-dasharray:4 4}
.hd-dim{fill:none;stroke:var(--ink-3);stroke-width:1.4}
.hd-mark{fill:var(--amber)}
@media(min-width:760px){.hero-in{grid-template-columns:1.2fr 1fr;padding:44px 16px 36px}.hero .lead{max-width:520px}}

/* 사례 미리보기 사진 카드(서비스·사례 첫 사진, 문서형) */
.hero-shot{display:block;position:relative;text-decoration:none;color:inherit;margin:16px 0 0}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--line-2)}
.duo figure{margin:0;position:relative;min-width:0;background:var(--paper-2)}
.duo img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.lb{position:absolute;left:0;top:0;padding:4px 11px;background:var(--moss-2);color:#fff;
 font-size:12px;font-weight:800;line-height:1.5;letter-spacing:.01em}
.duo figure:last-child .lb{background:var(--amber);color:var(--moss-2)}
.duo-cap{display:block;background:var(--paper);color:var(--ink);padding:11px 14px 12px;border:1px solid var(--line);border-top:0;
 font-size:15.5px;font-weight:800;line-height:1.45}
.duo-cap::after{content:" ›";color:var(--amber-d);font-weight:800}
.doc-shot{margin-top:0}
@media(min-width:760px){.duo img{aspect-ratio:3/2}.duo-cap{font-size:16.5px;padding:13px 18px 14px}}

/* ── 문의 버튼 ──────────────────────────────────────────── */
.cta{display:grid;grid-template-columns:1.1fr 1fr;gap:9px;margin:18px 0 24px}
.cta a{display:flex;align-items:center;justify-content:center;gap:7px;min-height:54px;padding:10px 8px;
 border-radius:var(--r);text-decoration:none;font-size:16.5px;font-weight:800;line-height:1.3;white-space:nowrap}
.b-sms{background:var(--moss);color:#fff}
.b-sms::before{content:"";width:19px;height:19px;flex:none;background:currentColor;
 -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 2H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h4v4l5-4h7a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2zM7 11.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z'/%3E%3C/svg%3E") center/contain no-repeat;
 mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 2H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h4v4l5-4h7a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2zM7 11.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z'/%3E%3C/svg%3E") center/contain no-repeat}
.b-sms:hover{background:var(--moss-2)}
.b-call{background:var(--paper);color:var(--moss-2);border:2px solid var(--moss)}
.b-call::before{content:"";width:17px;height:17px;flex:none;background:currentColor;
 -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E") center/contain no-repeat;
 mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E") center/contain no-repeat}
@media(min-width:760px){.cta{max-width:560px}}
@media(max-width:400px){.cta a{font-size:15px;padding:10px 5px;gap:5px}.b-sms::before{width:16px;height:16px}}
@media(max-width:345px){.cta a{font-size:13.5px;padding:10px 3px;gap:4px}.b-sms::before,.b-call::before{display:none}}

.dock{position:fixed;left:0;right:0;bottom:0;z-index:50;display:grid;grid-template-columns:1.1fr 1fr;gap:8px;
 padding:8px 10px calc(8px + env(safe-area-inset-bottom));background:var(--paper);
 border-top:2px solid var(--moss)}
.dock a{display:flex;align-items:center;justify-content:center;min-height:52px;border-radius:var(--r);text-decoration:none;
 font-size:16px;font-weight:800;line-height:1.3;white-space:nowrap}
.dock .dk-sms{background:var(--moss);color:#fff}
.dock .dk-call{background:var(--amber);color:var(--moss-2)}
.dock.hide{visibility:hidden}
@media(max-width:400px){.dock a{font-size:14.5px}}
@media(max-width:345px){.dock a{font-size:13px}}
@media(min-width:1024px){
 body{padding-bottom:0}
 .dock{left:auto;right:22px;bottom:22px;width:340px;border-radius:var(--r-2);border:2px solid var(--moss)}
}

/* ── 구역 머리 ──────────────────────────────────────────── */
.sec{padding:28px 0}
.sec>.kick{position:relative;padding-left:12px;font-size:12px;font-weight:800;letter-spacing:.06em;
 color:var(--amber-d);margin:0 0 7px;text-transform:uppercase}
.sec>.kick::before{content:"";position:absolute;left:0;top:.22em;bottom:.22em;width:4px;background:var(--moss)}
.sec h2{font-size:clamp(21px,5.8vw,30px);margin:0 0 10px;color:var(--moss-2)}
.sec h3{font-size:18px;margin:20px 0 8px}
.sec .sub{color:var(--ink-2);font-size:14.5px;margin:0 0 18px}
.answer{background:var(--moss-l);border-left:4px solid var(--moss);padding:14px 16px;margin:0 0 18px;
 font-size:15.5px;line-height:1.8}
.upd{font-size:13px;color:var(--ink-3);margin:0 0 14px}
.sec p a{color:var(--moss-3);font-weight:800}
.more{display:flex;align-items:center;justify-content:center;min-height:50px;margin:18px 0 0;padding:10px 16px;
 border:2px solid var(--moss);border-radius:var(--r);background:var(--paper);color:var(--moss-2);
 text-decoration:none;font-weight:800;font-size:15px;text-align:center;line-height:1.35}
.more::after{content:" →";margin-left:5px;color:var(--amber-d)}
.more:hover{background:var(--moss);color:#fff}
.more:hover::after{color:var(--amber)}

/* ── 증상 바로가기: 줄바꿈 가로 칩 목록(가로 스크롤 없음) ───────── */
.paths{display:grid;grid-template-columns:1fr;gap:2px;background:var(--line);border:1px solid var(--line)}
.paths a{display:flex;align-items:center;gap:12px;padding:12px 13px;background:var(--paper);text-decoration:none}
.paths a:hover{background:var(--moss-l)}
.paths .fig{display:block;flex:0 0 52px;width:52px;height:40px}
.paths .fig svg{width:100%;height:100%;display:block}
.paths .tx{display:block;min-width:0;flex:1 1 auto}
.paths .tx b{display:block;font-size:15.5px;font-weight:800;line-height:1.35;color:var(--ink)}
.paths .tx small{display:block;color:var(--ink-2);font-size:13px;line-height:1.5;margin-top:2px}
.paths .go{display:block;color:var(--amber-d);font-size:20px;font-weight:800;line-height:1;flex:0 0 auto}
.d-l{fill:none;stroke:var(--ink-3);stroke-width:1.6}
.d-m{fill:none;stroke:var(--amber-d);stroke-width:2.2;stroke-linecap:round}
.d-f{fill:var(--moss-l)}
.d-o{fill:none;stroke:var(--amber-d);stroke-width:1.6;stroke-dasharray:3 3}
@media(min-width:760px){.paths{grid-template-columns:1fr 1fr}}

/* ── 시공사례 카드: 테두리·그림자 없음, 사진이 카드 전체 ───────── */
.cases{display:grid;grid-template-columns:1fr;gap:22px}
.cc{display:block;text-decoration:none;color:inherit}
.cc .duo{background:var(--paper-2)}
.cc-b{display:block;padding:12px 2px 0}
.kind{display:inline-block;padding:3px 10px;border-radius:999px;background:var(--moss-l);color:var(--moss-3);
 font-size:12px;font-weight:800;letter-spacing:.02em}
.cc-t{display:block;font-family:var(--head);font-weight:400;font-size:19px;line-height:1.4;margin:8px 0 9px;color:var(--moss-2)}
.row{display:flex;gap:9px;font-size:14px;line-height:1.65;padding:2px 0}
.row>b{flex:0 0 58px;color:var(--ink-3);font-weight:800;font-size:12.5px}
.row>span{flex:1 1 auto;min-width:0;color:var(--ink-2)}
.cc-go{display:block;margin-top:9px;color:var(--amber-d);font-weight:800;font-size:14.5px}
.cc-go::after{content:" →"}
@media(min-width:760px){.cases{grid-template-columns:1fr 1fr;gap:26px}.cc-t{font-size:20px}}
@media(min-width:1080px){.cases{grid-template-columns:repeat(3,1fr)}}

/* ── 시공내용 카드: 번호 배지 + 가로 썸네일(테두리 없음) ───────── */
.svs{display:grid;grid-template-columns:1fr;gap:2px;background:var(--line)}
.sv{display:flex;gap:13px;align-items:center;padding:11px;background:var(--paper);text-decoration:none;color:inherit}
.sv:hover{background:var(--moss-l)}
.sv-img{position:relative;flex:0 0 88px;width:88px}
.sv-img img{display:block;width:88px;height:88px;object-fit:cover}
.sv-t{flex:1 1 auto;min-width:0}
.sv-t strong{display:block;font-size:17px;font-weight:800;line-height:1.35;margin:6px 0 4px;color:var(--moss-2)}
.sv-t span{display:block;color:var(--ink-2);font-size:13.5px;line-height:1.6}
.sv-t span.sv-n{display:inline-block;width:auto;padding:2px 9px;background:var(--moss);color:#fff;
 font-size:11px;font-weight:800;letter-spacing:.03em;line-height:1.6}
@media(min-width:760px){.svs{grid-template-columns:repeat(3,1fr)}}

/* ── 질문 카드: 좌측 황색 막대(테두리 없음) ───────────────────── */
.qs{display:grid;gap:2px;background:var(--line)}
.q{padding:15px 16px;background:var(--paper);border-left:4px solid var(--amber)}
.q .tag{display:inline-block;padding:2px 9px;border-radius:4px;background:var(--amber-l);color:var(--amber-d);
 font-size:12px;font-weight:800;margin:0 0 7px}
.q h3{font-size:18px;margin:0 0 7px}
.q-a{font-weight:800;margin:0 0 9px;padding:9px 12px;background:var(--moss-l);
 font-size:15px;line-height:1.7}
.q-m{color:var(--ink-2);font-size:14px;margin:0 0 9px}
.q-l{display:inline-block;color:var(--moss-3);font-size:14px;font-weight:800;text-decoration:none;
 border-bottom:2px solid var(--moss-l);padding-bottom:1px}
.q-l::after{content:" ›"}
@media(min-width:760px){.qs{grid-template-columns:1fr 1fr}}

/* ── 질문 답변(펼침) ────────────────────────────────────── */
.qa{display:grid;gap:2px;background:var(--line)}
.qa details{background:var(--paper)}
.qa summary{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;min-height:54px;
 padding:14px 16px;cursor:pointer;list-style:none;font-weight:800;font-size:15.5px;line-height:1.55}
.qa summary::-webkit-details-marker{display:none}
.qa .pm{flex:0 0 24px;width:24px;height:24px;background:var(--amber-l);position:relative;margin-top:1px}
.qa .pm::before,.qa .pm::after{content:"";position:absolute;background:var(--amber-d)}
.qa .pm::before{left:5px;right:5px;top:11px;height:2px}
.qa .pm::after{top:5px;bottom:5px;left:11px;width:2px}
.qa details[open] .pm{background:var(--moss)}
.qa details[open] .pm::before{background:#fff}
.qa details[open] .pm::after{display:none}
.qa details p{margin:0;padding:0 16px 16px;color:var(--ink-2);font-size:15px}

/* ── 작업 순서: 세로 점선 + 사각 번호표(도면 느낌) ─────────────── */
.steps{position:relative;padding-left:28px}
.steps::before{content:"";position:absolute;left:11px;top:14px;bottom:14px;width:0;
 border-left:2px dashed var(--line-2)}
.steps li{position:relative;padding:0 0 22px}
.steps .stage{position:relative;font-size:12px;font-weight:800;letter-spacing:.04em;color:var(--ink-3);margin:0 0 9px}
.steps .no{position:absolute;left:-28px;top:-2px;display:flex;align-items:center;justify-content:center;
 width:22px;height:22px;background:var(--moss);color:#fff;font-size:12px;font-weight:800}
.steps figure{margin:0 0 11px;background:var(--paper-2)}
.steps figure img{display:block;width:100%;height:auto}
.steps h3{font-size:17px;margin:0 0 5px;color:var(--moss-2)}
.steps p{margin:0;font-size:15px;color:var(--ink-2)}
@media(min-width:760px){.steps li{padding-bottom:28px}}

/* ── 문의 영역: 절취선 테두리를 두른 종이 카드 ────────────────── */
.ask{background:var(--moss-2);color:#fff;margin-top:8px}
.ask-in{max-width:1100px;margin:0 auto;padding:28px 16px 26px}
.ask .kick{display:inline-block;padding:4px 11px;border-radius:999px;background:rgba(217,148,32,.22);
 color:var(--amber);font-size:12.5px;font-weight:800;letter-spacing:.05em;margin:0 0 9px}
.ask h2{font-family:var(--head);font-weight:400;font-size:clamp(22px,5.8vw,30px);margin:0 0 9px}
.ask p{color:#d8dfd3}
.paper{background:var(--paper);color:var(--ink);border:2px dashed var(--line-2);padding:15px 16px;margin:16px 0 12px}
.paper-h{font-size:12px;font-weight:800;letter-spacing:.05em;color:var(--ink-3);margin:0 0 9px}
.paper-b li{display:flex;gap:10px;padding:3px 0;font-size:14.5px;line-height:1.6}
.paper-b .no{flex:0 0 20px;height:20px;margin-top:3px;display:flex;align-items:center;justify-content:center;
 background:var(--paper-2);color:var(--ink-3);font-size:11.5px;font-weight:800}
.shots{display:grid;grid-template-columns:1fr;gap:10px;margin:12px 0 0}
.shots li{display:flex;gap:12px;align-items:center;padding:10px 12px;background:rgba(255,255,255,.06)}
.shots svg{flex:0 0 92px;width:92px;height:70px}
.shots b{display:block;font-size:14.5px;font-weight:800}
.shots span{display:block;font-size:13px;color:#c4cec0;line-height:1.6}
.s-l{fill:none;stroke:#8fa08a;stroke-width:1.6}
.s-m{fill:none;stroke:var(--amber);stroke-width:2.2;stroke-linecap:round}
.s-o{fill:none;stroke:var(--amber);stroke-width:1.4;stroke-dasharray:3 3}
@media(min-width:760px){.shots{grid-template-columns:repeat(3,1fr)}.shots li{flex-direction:column;align-items:flex-start}
 .ask-in{padding:40px 16px 34px}}

/* ── 출장 지역 ──────────────────────────────────────────── */
.area{background:var(--paper-2);margin-top:8px;border-top:2px dashed var(--line-2)}
.area-red{margin:0 0 10px;padding:11px 14px;background:var(--paper);border-left:4px solid var(--moss);
 color:var(--moss-2);font-size:15px;line-height:1.65}
.zone{background:var(--paper);padding:14px 15px 12px;margin:0 0 2px}
.zone h3{display:flex;align-items:center;gap:9px;font-size:17.5px;margin:0 0 10px;color:var(--moss-2)}
.zone h3 span{position:relative;padding-left:11px}
.zone h3 span::before{content:"";position:absolute;left:0;top:.2em;bottom:.2em;width:4px;background:var(--amber)}
.zone h3 small{font-size:12px;font-weight:800;color:var(--moss-3);background:var(--moss-l);padding:2px 9px}
.zone ul{display:flex;flex-wrap:wrap;gap:6px}
.zone li{flex:0 0 auto}
.zone a{display:inline-flex;align-items:center;min-height:34px;padding:4px 12px;
 background:var(--paper-2);font-size:13.5px;font-weight:700;text-decoration:none;color:var(--ink)}
.zone a:hover{background:var(--moss);color:#fff}

/* ── 본문 부품 ──────────────────────────────────────────── */
.crumb{font-size:13px;color:var(--ink-3);margin:0;padding:11px 0 0;line-height:1.6}
.crumb a{text-decoration:none;color:var(--moss-3);font-weight:700}
.crumb span{margin:0 5px}
.ph{padding:4px 0 0}
.ph .tag{display:inline-block;padding:4px 11px;background:var(--moss);color:#fff;
 font-size:12px;font-weight:800;letter-spacing:.03em;margin:10px 0 10px}
.ph h1{font-size:clamp(24px,6.8vw,40px);line-height:1.3;margin:0 0 12px;color:var(--moss-2)}
.ph .lead{font-size:15.5px;line-height:1.85;color:var(--ink-2);margin:0 0 12px}
.ph .lead b{color:var(--ink)}
.note{margin:22px 0 0;padding:14px 16px;background:var(--paper);border-left:4px solid var(--moss-3);
 font-size:15px;line-height:1.75;color:var(--ink-2)}
.toc{background:var(--paper);border-left:4px solid var(--amber);padding:14px 16px;margin:0 0 22px}
.toc p{font-size:12px;font-weight:800;letter-spacing:.04em;color:var(--amber-d);margin:0 0 7px}
.toc ol{counter-reset:t;display:grid;gap:2px}
.toc li{counter-increment:t;font-size:14.5px;line-height:1.75}
.toc li::before{content:counter(t);display:inline-flex;align-items:center;justify-content:center;
 width:19px;height:19px;margin-right:8px;background:var(--paper-2);color:var(--ink-3);
 font-size:11px;font-weight:800;vertical-align:-3px}
.toc a{text-decoration:none;font-weight:700}
.toc a:hover{color:var(--moss-3)}
.pts{display:grid;gap:2px;background:var(--line);margin:0 0 22px}
.pts li{position:relative;padding:11px 14px 11px 38px;background:var(--paper);font-size:15px;font-weight:700;line-height:1.65}
.pts li::before{content:"";position:absolute;left:14px;top:18px;width:12px;height:7px;
 border-left:3px solid var(--amber-d);border-bottom:3px solid var(--amber-d);transform:rotate(-45deg)}
@media(min-width:760px){.pts{grid-template-columns:1fr 1fr}}
.facts{display:grid;gap:2px;background:var(--line)}
.facts div{position:relative;padding:14px 16px;background:var(--paper);border-top:3px solid var(--moss-3)}
.facts h3{font-size:17px;margin:0 0 5px;color:var(--moss-2)}
.facts p{margin:0;font-size:15px;color:var(--ink-2)}
@media(min-width:760px){.facts{grid-template-columns:1fr 1fr}}
.cmp{display:grid;gap:2px;background:var(--line)}
.cmp-r{padding:15px 16px;background:var(--paper);border-top:3px solid var(--amber)}
.cmp-r strong{display:block;font-family:var(--head);font-weight:400;font-size:18.5px;line-height:1.4;margin:0 0 9px;color:var(--moss-2)}
.cmp-r p{margin:0 0 6px;font-size:14.5px;line-height:1.7;color:var(--ink-2)}
.cmp-r p:last-child{margin-bottom:0}
.cmp-r b{display:inline-block;min-width:60px;margin-right:6px;padding:1px 8px;
 background:var(--amber-l);color:var(--amber-d);font-size:12px;font-weight:800;text-align:center}
@media(min-width:760px){.cmp{grid-template-columns:repeat(3,1fr)}}
.chk{display:grid;gap:2px;background:var(--line)}
.chk li{padding:13px 15px;background:var(--paper)}
.chk b{display:block;font-size:15.5px;margin:0 0 4px;color:var(--moss-2)}
.chk span{display:block;color:var(--ink-2);font-size:14.5px;line-height:1.7}
@media(min-width:760px){.chk{grid-template-columns:1fr 1fr}}
.warn{display:grid;gap:2px}
.warn li{position:relative;padding:11px 14px 11px 42px;background:var(--amber-l);font-size:14.5px;line-height:1.7}
.warn li::before{content:"!";position:absolute;left:14px;top:12px;display:flex;align-items:center;justify-content:center;
 width:19px;height:19px;background:var(--amber-d);color:#fff;font-size:12.5px;font-weight:800}
.flow{display:grid;gap:2px;counter-reset:f;background:var(--line)}
.flow li{counter-increment:f;display:flex;gap:12px;align-items:center;padding:12px 15px;background:var(--paper);
 font-size:14.5px;font-weight:700;line-height:1.65}
.flow li::before{content:counter(f);flex:0 0 28px;height:28px;display:flex;align-items:center;justify-content:center;
 background:var(--moss);color:#fff;font-size:13.5px;font-weight:800}
.sum{display:grid;gap:2px;background:var(--line)}
.sum div{display:flex;gap:11px;padding:12px 15px;background:var(--paper)}
.sum dt{flex:0 0 72px;color:var(--ink-3);font-size:13px;font-weight:800}
.sum dd{flex:1 1 auto;min-width:0;margin:0;font-size:15px;line-height:1.7}
.sum dd a{color:var(--moss-3);font-weight:800}
.sum dd li{list-style:none;padding:1px 0}
@media(min-width:760px){.sum{grid-template-columns:1fr 1fr}}
.ex{display:grid;grid-template-columns:1fr;gap:16px}
.ex figure{margin:0;background:var(--paper)}
.ex img{display:block;width:100%;height:auto}
.ex figcaption{padding:10px 2px 0;font-size:14px;line-height:1.7;color:var(--ink-2)}
.ex figcaption b{display:block;color:var(--ink);font-size:16px;font-weight:800;margin-bottom:4px}
@media(min-width:620px){.ex{grid-template-columns:1fr 1fr}}
.tip{margin:16px 0 0;padding:13px 15px;background:var(--moss-l);border-left:4px solid var(--moss);
 font-size:14.5px;line-height:1.7}
.rl{display:flex;flex-wrap:wrap;gap:7px}
.rl li{flex:0 0 auto}
.rl a{display:inline-flex;align-items:center;min-height:34px;padding:4px 12px;
 background:var(--paper-2);font-size:13.5px;font-weight:700;text-decoration:none}
.rl a:hover{background:var(--moss);color:#fff}
.rqs{display:grid;gap:2px;background:var(--line)}
.rq{display:flex;gap:13px;align-items:flex-start;padding:11px;background:var(--paper);text-decoration:none;color:inherit}
.rq:hover{background:var(--moss-l)}
.rq-img{flex:0 0 100px;width:100px}
.rq-img img{display:block;width:100px;height:78px;object-fit:cover}
.rq-t{flex:1 1 auto;min-width:0}
.rq-t strong{display:block;font-size:16.5px;font-weight:800;line-height:1.35;margin:0 0 5px;color:var(--moss-2)}
.rq-t span{display:block;font-size:14px;line-height:1.65;color:var(--ink-2)}
.rq-t em{display:block;font-style:normal;color:var(--moss-3);font-size:12.5px;font-weight:700;margin-top:5px}
@media(min-width:760px){.rqs{grid-template-columns:1fr 1fr}}
.why-pick{padding:13px 15px;background:var(--paper);border:2px dashed var(--line-2);font-size:14.5px;line-height:1.7;margin:0 0 4px}
.local p{color:var(--ink)}
.links{padding-bottom:14px}
.links h2{font-size:20px;margin-top:26px}
.links h2:first-child{margin-top:0}

/* ── 푸터 ───────────────────────────────────────────────── */
.ft{background:var(--moss-2);color:#c9d2c5;margin-top:0;padding:26px 0 calc(92px + env(safe-area-inset-bottom))}
.ft-in{max-width:1100px;margin:0 auto;padding:0 16px}
.ft-brand{display:flex;align-items:center;gap:10px;margin:0 0 6px}
.ft-brand svg{width:28px;height:28px;flex:0 0 28px;color:#fff}
.ft-brand b{font-family:var(--head);font-weight:400;font-size:19px;color:#fff}
.ft-tel{display:inline-flex;align-items:center;gap:8px;min-height:46px;margin:6px 0 12px;padding:6px 18px;
 background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.28);
 color:#fff;font-size:18px;font-weight:800;letter-spacing:-.01em;text-decoration:none;white-space:nowrap}
.ft-tel:hover{background:var(--amber);color:var(--moss-2);border-color:var(--amber)}
.ft-area{font-size:14px;line-height:1.75;margin:0 0 16px;color:#a9b8a4}
.ft-nav{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px;padding:16px 0 0;border-top:1px solid rgba(255,255,255,.15)}
.ft-nav a{display:inline-flex;align-items:center;min-height:34px;padding:3px 13px;
 background:rgba(255,255,255,.07);color:#dbe4d7;font-size:13.5px;font-weight:700;text-decoration:none}
.ft-nav a:hover{background:var(--amber);color:var(--moss-2)}
.ft-note{font-size:13px;line-height:1.7;color:#87977f;margin:0}
@media(min-width:760px){
 .ft{padding-bottom:34px}
 .ft-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:8px 40px;align-items:start}
 .ft-nav{grid-column:2;grid-row:1/span 4;margin:0;padding:0;border-top:0;align-content:start}
}
@media(min-width:1024px){.ft{padding-bottom:34px}}

/* ── 눌리는 곳의 부드러운 반응(움직임 줄이기 설정은 끔) ──────── */
.cc,.sv,.paths a,.rq,.more,.b-sms,.b-call,.menu a,.zone a,.rl a,.q-l,.ft-nav a,.ft-tel,.qa details{
 transition:background-color .15s ease,border-color .15s ease,color .15s ease}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}