/* ===== theme: plumb ===== */
/* 테마: plumb — 기본 뼈대 테마 (Claude Design 캔버스 이식)
   색·글꼴·모서리는 시안 가이드라인 값이 맨 끝 :root 로 덮어쓴다. 여기 :root 는 가이드라인이 없을 때의 기본값.
   bold · soft 테마는 이 파일을 extends 로 물려받고 차이만 덧쓴다. */
:root{
  --main:#1460D2; --accent:#FF6A1A; --dark:#10202E; --ink:#10202E; --bg:#F2F4F3; --soft:#FFF1E8;
  --on-accent:#FFFFFF; --on-main:#FFFFFF; --main-text:#1460D2; --accent-text:#D9530C;
  --surface:#FFFFFF; --ink-2:color-mix(in srgb,var(--ink) 74%,var(--bg)); --ink-3:color-mix(in srgb,var(--ink) 60%,var(--bg));
  --line:color-mix(in srgb,var(--ink) 14%,var(--bg)); --ok:#17804A; --radius:10px;
  --display:"Gothic A1","Apple SD Gothic Neo","Malgun Gothic",sans-serif; --display-weight:800;
  --font:"IBM Plex Sans KR","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --r-sm:calc(var(--radius) * .6); --r-lg:calc(var(--radius) * 1.5);
  --shadow:0 12px 30px -18px color-mix(in srgb,var(--ink) 45%,transparent);
  --step-0:1rem; --step-1:1.125rem; --step-2:clamp(1.3rem,2.4vw,1.6rem); --step-3:clamp(1.6rem,3vw,2.2rem); --step-4:clamp(2.2rem,5vw,3.6rem);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:var(--step-0);line-height:1.75;word-break:keep-all;overflow-wrap:break-word}
body.has-callbar{padding-bottom:62px}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
h1,h2,h3{line-height:1.3;letter-spacing:-.03em;text-wrap:balance;margin:0;font-family:var(--display);font-weight:var(--display-weight)}
p{margin:0 0 .9em}
.wrap{max-width:1140px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}

/* ---------- 상단 ---------- */
.draft-bar{background:#16212b;color:#ffd666;text-align:center;font-size:.86rem;font-weight:700;padding:8px 16px}
.notice-bar{background:var(--ink);color:#fff;text-align:center;font-size:.88rem;font-weight:500;padding:7px 16px}
.site-header{background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.site-header>.wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-block:12px}
.brand{font-family:var(--display);font-weight:var(--display-weight);font-size:1.25rem;color:var(--ink);text-decoration:none;letter-spacing:-.03em;display:flex;align-items:center;gap:8px;min-width:0}
.brand:before{content:"";flex:none;width:14px;height:18px;background:var(--main);border-radius:50% 50% 50% 50%/60% 60% 40% 40%;transform:rotate(180deg)}
.call{display:flex;flex-direction:column;align-items:flex-end;text-decoration:none;line-height:1.2;flex:none}
.call span{font-size:.75rem;color:var(--ink-3)}
.call b{font-size:1.25rem;font-variant-numeric:tabular-nums;color:var(--accent-text)}
.gnb{border-top:1px solid var(--line);position:relative}
.gnb ul{list-style:none;margin:0;padding:0;display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
.gnb ul::-webkit-scrollbar{display:none}
.gnb a{display:block;padding:10px 12px;font-size:.94rem;font-weight:500;color:var(--ink-2);text-decoration:none;white-space:nowrap;border-bottom:2px solid transparent}
.gnb a:hover{color:var(--ink);border-bottom-color:var(--main)}
.crumbs{font-size:.82rem;color:var(--ink-3);padding-block:12px 0}
.crumbs .wrap{display:flex;flex-wrap:wrap;gap:6px}
.crumbs a{text-decoration:none}.crumbs a:after{content:"/";margin-left:6px;color:var(--line)}
.crumbs span{color:var(--ink-2)}

/* ---------- 첫 화면 ---------- */
.hero{padding-block:36px 32px}
.hero-grid{display:grid;gap:28px;align-items:center}
.hero-copy{min-width:0}
.hero-kicker{display:inline-block;font-size:.86rem;font-weight:700;color:var(--main-text);background:color-mix(in srgb,var(--main) 11%,var(--surface));border-radius:999px;padding:4px 12px;margin-bottom:14px}
.hero h1{font-size:var(--step-4);line-height:1.16;margin-bottom:14px}
.hero-place h1{font-size:clamp(2rem,4.4vw,3.1rem)}
.hero-area{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;font-size:1.05rem;margin:0 0 14px;color:var(--ink)}
.hero-area:before{content:"";flex:none;width:9px;height:9px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 4px color-mix(in srgb,var(--ok) 22%,transparent)}
.hero-area b{font-weight:700}
.hero-area span{color:var(--ink-3);font-size:.9rem}
.hero-chips{display:flex;flex-wrap:wrap;gap:6px;margin:-2px 0 16px}
.hero-chips a{font-size:.84rem;text-decoration:none;padding:3px 10px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink-2)}
.hero-chips a:hover{border-color:var(--main);color:var(--ink)}
.hero-chips .more{border-style:dashed}
.hero-find{margin:0 0 16px;max-width:30rem}
.hero-find .finder-search input{font-size:1rem;padding:12px 14px 12px 44px;background-position:14px center;background-size:18px}
.hero-lead{font-size:var(--step-1);color:var(--ink-2);max-width:34em}
.hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0 6px}
.btn-call{white-space:nowrap;display:inline-flex;align-items:center;gap:10px;background:var(--accent);color:var(--on-accent);font-weight:700;font-size:1.2rem;text-decoration:none;padding:14px 24px;border-radius:var(--radius);font-variant-numeric:tabular-nums}
.btn-call:before{content:"";flex:none;width:.8em;height:.8em;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}
.btn-call:hover{filter:brightness(.95)}
.btn-line{display:inline-flex;align-items:center;padding:14px 20px;border:1.5px solid var(--ink);border-radius:var(--radius);text-decoration:none;font-weight:500;color:var(--ink)}
.badge-ok{display:inline-flex;align-items:center;gap:8px;font-size:.9rem;font-weight:500;color:var(--ok);margin:8px 0 0}
.badge-ok:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 4px color-mix(in srgb,var(--ok) 20%,transparent)}
.hero-visual{min-width:0}
.hero-photo{margin:0}
.hero-img{border-radius:var(--r-lg);aspect-ratio:4/3;object-fit:cover;width:100%;box-shadow:var(--shadow)}

/* 지도(선택지) */
.map{margin:0;overflow:hidden;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:5%;max-width:100%}
.map-in{position:relative}
.map img{width:100%}
.map-pin{position:absolute;width:0;height:0}
.map-pin:before{content:"";position:absolute;left:-11px;top:-11px;width:22px;height:22px;border-radius:50%;background:var(--accent);border:3px solid var(--ink)}
.map-pin.pin-left span{left:auto;right:18px}
.map-pin.pin-below span{left:50%;top:16px;transform:translateX(-50%)}
.map-pin span{position:absolute;left:18px;top:-15px;white-space:nowrap;background:var(--ink);color:#fff;font-size:.82rem;font-weight:700;padding:3px 10px;border-radius:4px}

/* 단면도 */
.diagram,.compass{margin:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px;box-shadow:var(--shadow)}
.diagram figcaption,.compass figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:12px;font-size:.88rem}
.diagram figcaption span,.compass figcaption span{color:var(--ink-3);font-size:.78rem}
.diagram-art{position:relative;height:210px;border-radius:var(--radius);overflow:hidden;background:#E9EDEF}
.dg-finish{position:absolute;left:0;right:0;top:0;height:26px;display:grid;grid-template-columns:repeat(5,1fr);gap:2px;background:#C9B79A}
.dg-finish i{background:#DCCBAE}
.dg-mortar{position:absolute;left:0;right:0;top:26px;height:74px;background:repeating-linear-gradient(135deg,#D3D9DC 0 6px,#CBD2D5 6px 12px)}
.dg-slab{position:absolute;left:0;right:0;top:100px;bottom:0;background:repeating-linear-gradient(45deg,#A9B3B9 0 3px,#B6BFC4 3px 14px)}
.dg-pipe{position:absolute;left:-4%;right:-4%;top:58px;height:14px;border-radius:7px;background:#1460D2;box-shadow:0 26px 0 -2px #5B8FE0}
.dg-point{position:absolute;left:62%;top:57px;width:16px;height:16px;border-radius:50%;background:#FF6A1A;border:3px solid #fff;box-shadow:0 0 0 3px #FF6A1A}
.dg-ring{position:absolute;left:calc(62% - 22px);top:35px;width:60px;height:60px;border-radius:50%;background:radial-gradient(circle,rgba(255,106,26,.55),rgba(255,106,26,0) 70%)}
.dg-cut{position:absolute;left:calc(62% - 30px);top:0;width:76px;height:100px;border:2px dashed #10202E;border-top:0;border-radius:0 0 6px 6px}
.dg-tag{position:absolute;left:calc(62% + 52px);top:20px;background:#FF6A1A;color:#fff;font-size:.74rem;font-weight:700;padding:2px 8px;border-radius:4px;white-space:nowrap}
.diagram-art>span[class^="dg-l"]{position:absolute;left:10px;font-size:.72rem;font-weight:700;color:#10202E;background:rgba(255,255,255,.88);padding:1px 6px;border-radius:3px}
.dg-l1{top:5px}.dg-l2{top:78px}.dg-l3{bottom:10px}
.diagram-steps{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px}
.diagram-steps li{display:flex;gap:10px;align-items:center;font-size:.92rem}
.diagram-steps b{flex:none;width:24px;height:24px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-size:.8rem}

/* 나침반 · 반경 */
.compass-art{container-type:inline-size;position:relative;aspect-ratio:1/1;max-height:400px;margin:0 auto;border-radius:var(--radius);background:radial-gradient(circle,color-mix(in srgb,var(--bg) 40%,#fff),var(--bg));overflow:hidden}
.cp-ring{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border:1.5px dashed color-mix(in srgb,var(--ink) 25%,transparent);border-radius:50%}
.cp-n{position:absolute;left:50%;top:1.2%;transform:translateX(-50%);font-size:min(2.6cqw,11px);line-height:1.4;font-weight:800;color:var(--ink-3)}
.cp-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:var(--accent);color:var(--on-accent);font-weight:800;font-size:min(3.6cqw,15px);padding:.4em .85em;border-radius:999px;white-space:nowrap;box-shadow:0 0 0 6px color-mix(in srgb,var(--accent) 20%,transparent)}
.cp-item{position:absolute;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:5px;white-space:nowrap;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:.25em .75em;font-size:min(3cqw,12.5px);color:var(--ink-3);text-decoration:none;font-variant-numeric:tabular-nums}
.cp-item b{color:var(--ink);font-weight:700}
.cp-item i{width:.75em;height:.75em;border-radius:50%;flex:none}
.cp-item:hover{border-color:var(--main)}
.cp-station{background:color-mix(in srgb,var(--surface) 70%,var(--bg))}

/* ---------- 우리 동네 찾기 ---------- */
.finder{background:var(--surface);padding-block:36px 40px;scroll-margin-top:90px}
.finder-head{display:grid;gap:6px;margin-bottom:16px}
.finder-head h2{font-size:var(--step-3)}
.finder-head p{color:var(--ink-2);margin:0}
.finder-box{position:relative}
.finder-search{display:block;position:relative}
.finder-search span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.finder-search input{width:100%;font:inherit;font-size:1.15rem;padding:16px 18px 16px 52px;border:2px solid var(--ink);border-radius:var(--radius);background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316212b' stroke-width='2.4'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E") 18px center/22px no-repeat;color:var(--ink)}
.finder-results{list-style:none;margin:8px 0 0;padding:0;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--surface)}
.hero-find .finder-results{position:absolute;left:0;right:0;z-index:15;box-shadow:var(--shadow)}
.finder-results li+li{border-top:1px solid var(--line)}
.finder-results a{display:flex;justify-content:space-between;gap:12px;padding:12px 16px;text-decoration:none}
.finder-results a:hover{background:var(--soft)}
.finder-results span{color:var(--ok);font-size:.88rem;white-space:nowrap}
.finder-results .none{padding:12px 16px;color:var(--ink-2)}
.finder-tabs{display:inline-flex;flex-wrap:wrap;margin:22px 0 12px;border:1px solid var(--line);border-radius:var(--radius);padding:3px;background:var(--bg)}
.finder-tab{font:inherit;font-weight:700;border:0;background:transparent;padding:8px 18px;border-radius:var(--r-sm);cursor:pointer;color:var(--ink-2)}
.finder-tab small{font-weight:400;color:var(--ink-3);margin-left:2px}
.finder-tab[aria-pressed="true"]{background:var(--ink);color:#fff}
.finder-tab[aria-pressed="true"] small{color:rgba(255,255,255,.75)}
.finder-tabs-gap{height:18px}
.region-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px}
.region-grid a{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px;text-decoration:none;display:flex;flex-direction:column;line-height:1.35}
.region-grid a:hover{border-color:var(--main)}
.region-grid strong{font-size:1rem}
.region-grid span{font-size:.8rem;color:var(--ink-3);font-variant-numeric:tabular-nums}
.station-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));max-height:440px;overflow:auto;padding-right:4px}

/* ---------- 요약 직답 ---------- */
.summary{padding-block:40px 8px}
.summary .wrap>*{max-width:46rem}
.summary-label{font-size:.88rem;font-weight:700;color:var(--accent);margin-bottom:6px}
.summary-text{font-size:var(--step-1);line-height:1.85}

/* ---------- 블록 ---------- */
.block{padding-block:44px}
.block-title{font-size:var(--step-2);margin-bottom:18px}
.block h1{font-size:var(--step-3);margin-bottom:18px}
.lead{font-size:var(--step-1);color:var(--ink-2)}
.wide-img{border-radius:var(--r-lg);aspect-ratio:21/9;object-fit:cover;width:100%;margin-top:18px}
.split{display:grid;gap:28px;align-items:center}
.split-media img{border-radius:var(--r-lg);aspect-ratio:4/3;object-fit:cover;width:100%}

.svc-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.svc-item a{display:grid;gap:14px;text-decoration:none;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px 18px 16px;height:100%}
.svc-item a:hover{border-color:var(--main)}
.svc-img{border-radius:var(--radius);aspect-ratio:4/3;object-fit:cover;width:100%}
.svc-text{display:grid;gap:3px;align-content:start;min-width:0}
.svc-tag{font-style:normal;font-size:.74rem;font-weight:700;color:var(--main-text);letter-spacing:.02em}
.svc-tag:before{content:"#"}
.svc-text strong{font-size:var(--step-1);color:var(--ink);font-family:var(--display);font-weight:var(--display-weight);line-height:1.4}
.svc-text span{color:var(--ink-2);font-size:.94rem;line-height:1.6}

.trust{list-style:none;margin:0;padding:0;display:grid}
.trust li{display:grid;gap:2px;padding-block:14px;border-top:1px solid var(--line)}
.trust li:last-child{border-bottom:1px solid var(--line)}
.trust strong{font-size:var(--step-1)}
.trust span{color:var(--ink-2)}

.steps{list-style:none;margin:0;padding:0;display:grid;gap:10px;counter-reset:s}
.steps li{counter-increment:s;display:flex;gap:14px;align-items:flex-start;padding:16px 18px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}
.steps li:before{flex:none;content:counter(s,decimal-leading-zero);color:var(--main-text);font-family:var(--display);font-weight:var(--display-weight);font-size:1.6rem;line-height:1}
.steps span{padding-top:2px}

.signs{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.signs li{position:relative;padding:12px 16px 12px 44px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}
.signs li:before{content:"";position:absolute;left:16px;top:50%;width:14px;height:8px;border-left:3px solid var(--main);border-bottom:3px solid var(--main);transform:translateY(-70%) rotate(-45deg)}

.facts{margin:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}
.facts>div{display:grid;grid-template-columns:7.5rem 1fr;gap:12px;padding:14px 18px}
.facts>div+div{border-top:1px solid var(--line)}
.facts dt{color:var(--ink-3);font-size:.92rem;font-weight:500}
.facts dd{margin:0;min-width:0}

.case-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.case-item a{display:grid;grid-template-columns:150px 1fr;gap:16px;text-decoration:none;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:10px}
.case-item img{border-radius:var(--r-sm);aspect-ratio:4/3;object-fit:cover;width:100%}
.case-text{display:grid;gap:4px;align-content:start;min-width:0}
.case-text strong{font-size:1.02rem;line-height:1.45}
.case-text span{color:var(--ink-2);font-size:.92rem;line-height:1.6}
.case-text time{color:var(--ink-3);font-size:.82rem;font-variant-numeric:tabular-nums}
.sample-badge{font-style:normal;font-size:.72rem;font-weight:700;background:#fdecc0;color:#7a5400;border-radius:4px;padding:1px 6px;margin-right:6px;vertical-align:2px}
.sample-note{background:#fff6dc;border:1px solid #f3dfa4;border-radius:var(--radius);padding:8px 12px;font-size:.92rem}

.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:16px 36px 16px 0;font-weight:700;font-size:1.05rem;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"";position:absolute;right:6px;top:50%;width:10px;height:10px;border-right:2px solid var(--ink-2);border-bottom:2px solid var(--ink-2);transform:translateY(-70%) rotate(45deg);transition:transform .2s}
.faq details[open] summary:after{transform:translateY(-30%) rotate(-135deg)}
.faq details p{color:var(--ink-2);padding-bottom:16px;margin:0}

.chips{display:flex;flex-wrap:wrap;gap:8px;margin:0}
.chips a{text-decoration:none;font-size:.92rem;padding:6px 12px;border:1px solid var(--line);border-radius:999px;background:var(--surface)}
.chips a:hover{border-color:var(--main)}
.chips-dense{gap:6px}.chips-dense a{font-size:.85rem;padding:4px 10px}
.hub{padding-block:16px;border-top:1px solid var(--line)}
.hub h3{font-size:var(--step-1);margin-bottom:10px}
.hub h3 a{text-decoration:none;color:var(--ink)}
.more-link{margin:12px 0 0}
.more-link a{font-weight:700;color:var(--main-text);text-underline-offset:3px}

.article .wrap{max-width:780px}
.article h1{font-size:var(--step-3)}
.photos{display:grid;gap:10px;margin:18px 0}
.photos figure{margin:0}.photos img{border-radius:var(--radius);width:100%}

/* 보험 */
.ins-band{background:var(--ink);color:#fff;padding-block:52px}
.ins-grid{display:grid;gap:24px}
.ins-kicker{color:var(--accent);font-weight:700;font-size:.86rem;margin-bottom:6px}
.ins-band h2{font-size:var(--step-3);margin-bottom:12px}
.ins-band p{color:rgba(255,255,255,.78)}
.ins-band .more-link a{color:#fff}
.ins-docs{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:var(--r-lg);padding:18px 20px}
.ins-docs p{color:#fff;font-weight:700;margin-bottom:10px}
.ins-docs ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ins-docs li{position:relative;padding-left:26px;color:rgba(255,255,255,.86)}
.ins-docs li:before{content:"";position:absolute;left:2px;top:.45em;width:14px;height:14px;border-radius:4px;border:2px solid var(--accent)}
.block-ins .wrap{background:var(--soft);border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);border-radius:var(--r-lg);padding-block:24px}

/* ---------- 상담 띠 ---------- */
.callout{background:var(--accent);color:var(--on-accent);padding-block:48px;margin-top:24px}
.callout h2{font-size:var(--step-3);margin-bottom:8px}
.callout p{opacity:.9;max-width:40em}
.callout .btn-call{background:var(--ink);color:#fff;font-size:clamp(1.7rem,5vw,3rem);font-family:var(--display);font-weight:var(--display-weight);padding:14px 26px;margin-top:8px}

.site-footer{background:#101820;color:#9aa6b2;font-size:.86rem;padding-block:28px}
.site-footer p{margin:0 0 8px}
.footer-brand{color:#fff;font-weight:700;font-size:1rem}
.footer-links{display:flex;flex-wrap:wrap;gap:6px 14px}
.site-footer a{color:#c9d2db}

.callbar{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;padding-bottom:env(safe-area-inset-bottom,0px);background:var(--ink)}
.callbar a{flex:1;text-align:center;padding:16px 8px;font-weight:700;text-decoration:none;color:#fff}
.callbar-tel{background:var(--accent);color:var(--on-accent)!important;flex:2!important}
.callbar-kakao{background:#fee500;color:#191919!important}

@media (min-width:860px){
  body.has-callbar{padding-bottom:0}
  .callbar{display:none}
  .hero{padding-block:56px 48px}
  .hero-grid{grid-template-columns:1.12fr .88fr;gap:48px}
  .finder-head{grid-template-columns:auto 1fr;align-items:end;gap:24px}
  .svc-list{grid-template-columns:repeat(3,1fr)}
  .split{grid-template-columns:1fr 1fr;gap:48px}
  .steps{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
  .steps li{flex-direction:column;gap:10px}
  .case-list{grid-template-columns:1fr 1fr}
  .photos{grid-template-columns:1fr 1fr}
  .ins-grid{grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
}
@media (min-width:600px) and (max-width:859px){.svc-list{grid-template-columns:1fr 1fr}}
@media (max-width:520px){
  .case-item a{grid-template-columns:104px 1fr}
  .facts>div{grid-template-columns:1fr;gap:2px}
  .call span{display:none}
  .brand{font-size:1.1rem}
  .call b{font-size:1.08rem}
  .hero-actions{flex-direction:column}
  .hero-actions .btn-call,.hero-actions .btn-line{justify-content:center;width:100%}
  .hero-chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:-16px;padding-inline:16px;padding-bottom:2px}
  .hero-chips::-webkit-scrollbar{display:none}
  .hero-chips a{flex:none}
  .notice-bar{font-size:.8rem;padding:6px 12px}
  .gnb:after{content:"";position:absolute;right:0;top:0;bottom:0;width:36px;pointer-events:none;background:linear-gradient(90deg,transparent,var(--surface))}
  .hero-chips{-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent)}
}
.hero-near{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:14px 0 0;font-size:.86rem}
.hero-near span{color:var(--ink-3);margin-right:2px}
.hero-near a{text-decoration:none;padding:3px 10px;border-radius:999px;background:var(--surface);border:1px solid var(--line);color:var(--ink-2)}
.hero-near a:hover{border-color:var(--main);color:var(--ink)}

/* 네이버 플레이스 */
.place-list{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
.place-card{display:flex;align-items:center;gap:12px;padding:14px 16px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);text-decoration:none;height:100%}
.place-card:hover{border-color:#03C75A}
.place-n{flex:none;width:34px;height:34px;border-radius:8px;background:#03C75A;color:#fff;font-weight:900;font-family:Arial,sans-serif;display:grid;place-items:center;font-size:1.05rem}
.place-t{display:grid;min-width:0;line-height:1.35}
.place-t strong{font-size:.98rem}
.place-t span{font-size:.8rem;color:var(--ink-3)}
.place-card em{margin-left:auto;flex:none;font-style:normal;font-size:.78rem;color:var(--ink-2);white-space:nowrap}
.place-card em:after{content:" ↗"}

/* ===== 시안 가이드라인 공통 선택지 ===== */
/* 시안 가이드라인 선택지 — 모든 테마 공통. body 클래스로 켠다 (엔진 body_cls) */
/* 서비스카드: 태그카드 / 사진카드 */
.d-svc-tag .svc-img{display:none}
.d-svc-photo .svc-item a{padding:10px 10px 16px}
.d-svc-photo .svc-text{padding-inline:6px}
/* 순서번호: 큰숫자 / 원형 */
.d-steps-circle .steps li:before{content:counter(s);width:32px;height:32px;border-radius:50%;background:var(--main);color:var(--on-main);display:grid;place-items:center;font-size:.95rem;font-family:var(--font);font-weight:700}
/* 상담띠색: 강조 / 어두움 */
.d-callout-dark .callout{background:var(--ink);color:#fff}
.d-callout-dark .callout .btn-call{background:var(--accent);color:var(--on-accent)}

/* ===== 시안 가이드라인 값 ===== */
:root{--main:#1460D2;--accent:#FF6A1A;--dark:#10202E;--ink:#10202E;--bg:#F2F4F3;--soft:#FFF1E8;--on-accent:#111111;--on-main:#FFFFFF;--main-text:#1460D2;--accent-text:#ED6218;--radius:10px;--display:"Gothic A1","Apple SD Gothic Neo","Malgun Gothic",sans-serif;--font:"IBM Plex Sans KR","Apple SD Gothic Neo","Malgun Gothic",sans-serif;--display-weight:800}

/* ===== theme: clay (2026-10-26) =====
   레퍼런스 clay.com: 크림 바탕, 검정 버튼, 6색 기능 카드(핑크·틸·라벤더·피치·오커·크림), 크림 푸터.
   위 규칙은 그대로 두고 여기서 덮어쓴다. 움직임은 /assets/motion.js(GSAP). */
:root{
  --canvas:#fffaf0; --cream-soft:#faf5e8; --cream-card:#f5f0e0; --cream-strong:#ebe6d6;
  --c-pink:#ff4d8b; --c-teal:#1a3a3a; --c-lavender:#b8a4ed; --c-peach:#ffb084; --c-ochre:#e8b94a; --c-mint:#a4d4c5;
  --main:#1a3a3a; --accent:#0a0a0a; --ink:#0a0a0a; --dark:#0a0a0a; --bg:var(--canvas); --soft:var(--cream-card); --surface:#ffffff;
  --on-accent:#ffffff; --on-main:#ffffff; --main-text:#1a3a3a; --accent-text:#0a0a0a;
  --ink-2:#3a3a3a; --ink-3:#6a6a6a; --line:#e8e1cf; --ok:#1f9d55;
  --radius:12px; --r-sm:8px; --r-lg:24px; --r-card:16px;
  --display:"Pretendard Variable",Pretendard,-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif; --display-weight:650;
  --font:"Pretendard Variable",Pretendard,-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --shadow:0 24px 48px -32px rgba(26,26,10,.35);
  --ease-clay:cubic-bezier(.625,.05,0,1);
  --step-0:1rem; --step-1:1.125rem; --step-2:clamp(1.75rem,3.6vw,2.5rem); --step-3:clamp(2rem,4.4vw,3.5rem); --step-4:clamp(2.6rem,7vw,4.75rem);
  --sec:clamp(64px,9vw,112px);
}
body{background:var(--canvas);color:var(--ink-2);line-height:1.65;-webkit-font-smoothing:antialiased}
h1,h2,h3{color:var(--ink);letter-spacing:-.045em;line-height:1.08}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid var(--c-pink);outline-offset:3px}
.wrap{max-width:1240px;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}

/* 머리 */
.site-header{background:color-mix(in srgb,var(--canvas) 86%,transparent);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid transparent;transition:transform .45s var(--ease-clay),border-color .3s}
.site-header.is-scrolled{border-bottom-color:var(--line)}
.site-header.is-hidden{transform:translateY(-100%)}
.site-header>.wrap{padding-block:14px}
.brand{font-weight:700;letter-spacing:-.04em}
.brand:before{background:var(--c-pink);width:16px;height:20px}
.call{background:var(--ink);color:#fff;border-radius:var(--radius);padding:8px 14px;flex-direction:row;align-items:center;gap:8px;transition:transform .3s var(--ease-clay)}
.call span{color:rgba(255,255,255,.7)}
.call b{color:#fff;font-size:1.02rem}
.gnb{border-top:0}
.gnb ul{gap:2px;padding-bottom:8px}
.gnb a{border:0;border-radius:999px;padding:7px 14px;font-size:.9rem;color:var(--ink-3);transition:background .25s,color .25s}
.gnb a:hover{background:var(--cream-card);color:var(--ink)}
.gnb:after{background:linear-gradient(90deg,transparent,var(--canvas))!important}
.crumbs{color:var(--ink-3)}

/* 첫 화면 */
.hero{padding-block:clamp(40px,7vw,96px) clamp(40px,6vw,80px)}
.hero h1{font-size:var(--step-4);line-height:1.04;letter-spacing:-.055em;margin-bottom:22px}
.hero-place h1{font-size:clamp(2.3rem,5.4vw,4rem)}
.hero-kicker{background:var(--cream-card);color:var(--ink);font-weight:600;font-size:.84rem;padding:6px 14px;margin-bottom:22px}
.hero-area{font-size:1rem;color:var(--ink-2)}
.hero-area b{color:var(--ink)}
.hero-lead{font-size:clamp(1.05rem,1.6vw,1.25rem);color:var(--ink-2);line-height:1.6}
.hero-actions{gap:12px;margin-top:28px}
.btn-call{background:var(--ink);color:#fff;border-radius:var(--radius);font-size:1.12rem;padding:15px 24px;transition:transform .3s var(--ease-clay),background .25s}
.btn-call:hover{filter:none;background:#1f1f1f}
.btn-call:active,.btn-line:active,.call:active{transform:scale(.97)}
.btn-line{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);color:var(--ink);font-weight:600;padding:15px 20px;gap:10px;transition:border-color .25s,transform .3s var(--ease-clay)}
.btn-line:hover{border-color:var(--ink)}
.hero-chips a,.hero-near a{background:var(--surface);border-color:var(--line)}
.hero-img{border-radius:var(--r-lg);box-shadow:none}

/* 단면도·지도·나침반 */
.diagram,.compass,.map{background:var(--cream-soft);border:0;border-radius:var(--r-lg);box-shadow:none;padding:22px}
.diagram-art{background:#efe8d6;border-radius:var(--r-card)}
.dg-finish{background:#d9c49e}.dg-finish i{background:#e8d6b2}
.dg-mortar{background:repeating-linear-gradient(135deg,#e2dccb 0 6px,#d9d3c1 6px 12px)}
.dg-slab{background:repeating-linear-gradient(45deg,#b9b4a4 0 3px,#c6c1b1 3px 14px)}
.dg-pipe{background:var(--c-teal);box-shadow:0 26px 0 -2px #4f7a76}
.dg-point{background:var(--c-pink);box-shadow:0 0 0 3px var(--c-pink)}
.dg-ring{background:radial-gradient(circle,rgba(255,77,139,.5),rgba(255,77,139,0) 70%)}
.dg-tag{background:var(--c-pink);color:#0a0a0a;border-radius:999px;padding:2px 10px}
.dg-cut{border-color:var(--ink)}
.diagram-steps b{background:var(--ink)}
.map-pin:before{background:var(--c-pink)}
.cp-center{background:var(--ink);color:#fff;box-shadow:0 0 0 6px color-mix(in srgb,var(--c-pink) 30%,transparent)}

/* 지역 찾기 */
.finder{background:var(--cream-soft);padding-block:var(--sec)}
.finder-head h2,.block-title,.block h1{font-size:var(--step-3);letter-spacing:-.05em;line-height:1.06}
.finder-head{margin-bottom:28px}
.finder-search input{border:1px solid var(--line);border-radius:var(--r-card);background-color:var(--surface);transition:border-color .2s,box-shadow .2s}
.finder-search input:focus{outline:0;border-color:var(--ink);box-shadow:0 0 0 4px color-mix(in srgb,var(--c-lavender) 45%,transparent)}
.finder-results{border-radius:var(--r-card)}
.finder-results a:hover{background:var(--cream-card)}
.finder-tabs{position:relative;border:0;border-radius:999px;background:var(--cream-strong);padding:4px}
.finder-tab{position:relative;z-index:1;border-radius:999px;padding:9px 20px;transition:color .3s}
.finder-tab[aria-pressed="true"]{background:var(--ink)}
.finder-tabs.has-pill .finder-tab[aria-pressed="true"]{background:transparent}
.finder-pill{position:absolute;z-index:0;border-radius:999px;background:var(--ink);pointer-events:none}
.region-grid{gap:10px}
.region-grid a{border-radius:var(--r-card);border-color:transparent;padding:14px 16px;transition:transform .35s var(--ease-clay),border-color .25s}
.region-grid a:hover{border-color:var(--ink);transform:translateY(-3px)}

/* 지역명 흐르는 띠 */
.marquee{overflow:hidden;border-block:1px solid var(--line);padding-block:16px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;width:max-content}
.marquee-track span{flex:none;font-weight:600;font-size:1.05rem;color:var(--ink);letter-spacing:-.02em;padding-inline:18px;display:inline-flex;align-items:center;gap:36px}
.marquee-track span:after{content:"";width:7px;height:7px;border-radius:50%;background:var(--c-pink)}
.marquee-track span:nth-child(3n+2):after{background:var(--c-lavender)}
.marquee-track span:nth-child(3n):after{background:var(--c-ochre)}

/* 요약·블록 */
.summary{padding-block:var(--sec) 0}
.summary-label{color:#c2185b}
.summary-text{font-size:clamp(1.15rem,2vw,1.45rem);line-height:1.6;color:var(--ink);letter-spacing:-.02em}
.block{padding-block:var(--sec) 0}
.block-title{margin-bottom:28px}
main>.block:last-child{padding-bottom:var(--sec)}
.lead{color:var(--ink-2)}
.wide-img,.split-media img{border-radius:var(--r-lg)}
.media-clip{overflow:hidden;border-radius:var(--r-lg);margin-top:18px}
.media-clip>img{margin-top:0!important}

/* 서비스: 6색 기능 카드 */
.svc-list{gap:16px}
.svc-item a{border:0;border-radius:var(--r-lg);padding:22px;gap:18px;background:var(--cream-card);color:var(--ink);position:relative;overflow:hidden;transition:transform .45s var(--ease-clay)}
.d-svc-photo .svc-item a{padding:12px 12px 22px}
.svc-item:nth-child(6n+1) a{background:var(--c-pink)}
.svc-item:nth-child(6n+2) a{background:var(--c-teal);color:#fff}
.svc-item:nth-child(6n+3) a{background:var(--c-lavender)}
.svc-item:nth-child(6n+4) a{background:var(--c-peach)}
.svc-item:nth-child(6n+5) a{background:var(--c-ochre)}
.svc-item:nth-child(6n) a{background:var(--cream-card)}
.svc-item a:hover{border:0;transform:translateY(-6px)}
.svc-img{border-radius:var(--r-card)}
.svc-tag{color:inherit;opacity:.78;font-weight:600;letter-spacing:0}
.svc-text strong{color:inherit;font-size:clamp(1.25rem,2vw,1.5rem);letter-spacing:-.04em;line-height:1.2;display:flex;align-items:center;justify-content:space-between;gap:10px}
.svc-text span{color:inherit;opacity:.85}

/* 화살표 바꿔치기 */
.arw{position:relative;flex:none;display:inline-grid;width:1.9em;height:1.9em;border-radius:50%;overflow:hidden;background:rgba(10,10,10,.09);font-size:.62em;font-weight:700;line-height:1}
.svc-item:nth-child(6n+2) .arw{background:rgba(255,255,255,.16)}
.btn-line .arw,.more-link .arw{background:var(--cream-card);font-size:.8em}
.arw i{grid-area:1/1;display:grid;place-items:center;font-style:normal}

/* 커서 따라다니는 말풍선 */
.cursor-tip{position:fixed;left:0;top:0;z-index:60;pointer-events:none;background:var(--ink);color:#fff;font-size:.82rem;font-weight:600;padding:8px 14px;border-radius:999px;white-space:nowrap;opacity:0;visibility:hidden}

/* 신뢰·단계·사실 */
.trust li{border-color:var(--line);padding-block:18px}
.trust strong{color:var(--ink);letter-spacing:-.03em}
.steps{gap:16px;max-width:820px}
.steps li{border:0;border-radius:var(--r-lg);padding:28px 30px;min-height:150px;align-items:flex-end;color:var(--ink);font-size:clamp(1.1rem,1.8vw,1.35rem);font-weight:600;letter-spacing:-.03em;transform-origin:50% 0}
.steps li:nth-child(5n+1){background:var(--c-lavender)}
.steps li:nth-child(5n+2){background:var(--c-peach)}
.steps li:nth-child(5n+3){background:var(--c-mint)}
.steps li:nth-child(5n+4){background:var(--c-ochre)}
.steps li:nth-child(5n){background:var(--cream-card)}
.steps li:before{color:var(--ink);font-size:clamp(2.6rem,6vw,4rem);font-weight:700;letter-spacing:-.05em}
.steps.is-stack li{position:sticky;top:calc(var(--hd,110px) + 16px + var(--i,0) * 14px)}
.signs li,.facts,.case-item a,.place-card{border-color:var(--line);border-radius:var(--r-card)}
.signs li:before{border-color:#c2185b}
.facts{background:var(--surface)}
.case-item a,.place-card{transition:transform .35s var(--ease-clay),border-color .25s}
.case-item a:hover,.place-card:hover{transform:translateY(-3px);border-color:var(--ink)}

/* FAQ */
.faq,.faq details{border-color:var(--line)}
.faq summary{font-size:clamp(1.02rem,1.5vw,1.15rem);color:var(--ink);padding:22px 52px 22px 0;letter-spacing:-.02em}
.faq summary:after{right:0;width:32px;height:32px;border:0;border-radius:50%;background:var(--cream-card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a0a0a' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center/14px no-repeat;transform:translateY(-50%);transition:transform .4s var(--ease-clay),background-color .25s}
.faq details[open] summary:after{transform:translateY(-50%) rotate(135deg);background-color:var(--c-lavender)}
.faq details p{padding-bottom:22px}

/* 칩·허브·링크 */
.chips a{background:var(--surface);border-color:var(--line);transition:border-color .2s,background .2s}
.chips a:hover{border-color:var(--ink);background:var(--cream-card)}
.hub{border-color:var(--line)}
.more-link a{color:var(--ink);display:inline-flex;align-items:center;gap:8px;text-decoration:none}

/* 보험 띠: 틸 카드 */
.ins-band{background:transparent;color:#fff;padding-block:var(--sec) 0}
.ins-band>.wrap{background:var(--c-teal);border-radius:var(--r-lg);padding:clamp(28px,5vw,64px)}
.ins-band h2{color:#fff}
.ins-kicker{color:var(--c-peach)}
.ins-docs{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.14);border-radius:var(--r-card)}
.ins-docs li:before{border-color:var(--c-peach)}
.block-ins .wrap{background:var(--cream-card);border:0}

/* 상담 띠: 크림 카드 */
.callout,.d-callout-accent .callout,.d-callout-dark .callout{background:transparent;color:var(--ink);padding-block:var(--sec);margin-top:0}
.callout>.wrap{background:var(--cream-card);border-radius:var(--r-lg);padding:clamp(32px,6vw,80px);text-align:center;display:grid;justify-items:center}
.callout h2{font-size:var(--step-3);letter-spacing:-.05em;margin-bottom:14px}
.callout p{color:var(--ink-2);opacity:1;margin-inline:auto}
.callout .btn-call,.d-callout-dark .callout .btn-call{background:var(--ink);color:#fff;font-family:var(--display);font-weight:700;letter-spacing:-.03em;border-radius:999px;padding:16px 32px;font-size:clamp(1.5rem,4.4vw,2.6rem)}

/* 푸터: 크림(clay 는 어두운 푸터를 쓰지 않는다) */
.site-footer{background:var(--cream-soft);color:var(--ink-3);padding-block:56px 72px;border-top:1px solid var(--line)}
.footer-brand{color:var(--ink);font-size:1.4rem;letter-spacing:-.04em}
.site-footer a{color:var(--ink-2)}
.site-footer a:hover{color:var(--ink)}

/* 휴대폰 하단 바 */
.callbar{background:color-mix(in srgb,var(--canvas) 92%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);gap:8px;padding:8px 10px calc(8px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line)}
.callbar a{border-radius:var(--radius);padding:14px 8px}
.callbar-tel{background:var(--ink);color:#fff!important}
.callbar-sms{background:var(--cream-card);color:var(--ink)!important}
body.has-callbar{padding-bottom:76px}

/* 움직임 시작 전: 첫 화면만 미리 숨김(JS 가 못 뜨면 head 스크립트가 2.5초 뒤 해제) */
html.motion-on .hero h1,html.motion-on .hero-copy>:not(h1),html.motion-on .hero-visual{visibility:hidden}
.split-mask{overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}

@media (min-width:860px){
  body.has-callbar{padding-bottom:0}
  .hero-grid{grid-template-columns:1.15fr .85fr;gap:64px}
  .steps{grid-template-columns:1fr}
  .steps li{flex-direction:row;gap:14px}
}
@media (max-width:520px){
  .call{padding:7px 12px}
  .hero-actions .btn-call,.hero-actions .btn-line{justify-content:center}
}

/* ===== theme: clay v2 — 첫 화면·머리·글자 (clay.com 실제 CSS 값 기준) =====
   clay: h1 wght 575 · 자간 -.04em · 행간 1 / h2 wght 530 · -.02em / 버튼 반경 .75rem · 1.125rem
   첫 화면 = 짙은 초록(#035d44) 판, 제목은 왼쪽 아래, 설명·버튼은 오른쪽 아래, 글자는 oat-100. */
:root{--hero-green:#035d44;--oat-100:#f6f3ec;--oat-300:#d9d3c4;--display-weight:540}
h1{font-weight:580;letter-spacing:-.04em}
h2,h3{font-weight:540;letter-spacing:-.03em}
.finder-head h2,.block-title,.block h1,.callout h2{font-weight:560;letter-spacing:-.035em;line-height:1.1}
.svc-text strong{font-weight:600}

/* 머리: 넓은 화면에서 한 줄(로고 · 메뉴 · 전화) */
.brand{font-weight:650;font-size:1.3rem}
.brand:before{background:var(--hero-green);border-radius:50% 50% 50% 50%/60% 60% 40% 40%}
.call{border-radius:.75rem}
@media (min-width:1024px){
  .site-header{display:flex;align-items:center;gap:28px;min-height:68px;padding-inline:max(20px,calc((100vw - 1240px)/2 + 20px))}
  .site-header>.wrap{display:contents}
  .site-header .brand{order:1}
  .site-header .gnb{order:2;flex:1}
  .site-header .call{order:3}
  .gnb .wrap{max-width:none;padding:0}
  .gnb ul{padding:0;justify-content:center;gap:4px}
  .gnb a{font-size:.95rem;color:var(--ink-2)}
}

/* 첫 화면: 초록 판 */
.hero{background:var(--hero-green);color:var(--oat-100);position:relative;overflow:hidden;padding-block:clamp(48px,7vw,96px)}
.hero h1{color:var(--oat-100);font-size:clamp(2.6rem,6.4vw,4.5rem);font-weight:580;letter-spacing:-.04em;line-height:1.06;margin-bottom:0}
.hero-place h1{font-size:clamp(2.4rem,5.6vw,4rem)}
.hero-kicker{background:rgba(246,243,236,.12);color:var(--oat-100);border:1px solid rgba(246,243,236,.18);font-weight:500;margin-bottom:18px}
.hero-area{color:rgba(246,243,236,.82)}
.hero-area b{color:var(--oat-100);font-weight:600}
.hero-area span{color:rgba(246,243,236,.62)}
.hero-area:before{background:#7be3a8;box-shadow:0 0 0 4px rgba(123,227,168,.22)}
.hero-lead{color:rgba(246,243,236,.84);margin-top:18px}
.badge-ok{color:#9ff0c1}
.badge-ok:before{background:#7be3a8;box-shadow:0 0 0 4px rgba(123,227,168,.22)}
.hero-near span{color:rgba(246,243,236,.62)}
.hero-near a,.hero-chips a{background:rgba(246,243,236,.1);border-color:rgba(246,243,236,.2);color:var(--oat-100)}
.hero-near a:hover,.hero-chips a:hover{background:rgba(246,243,236,.2);border-color:rgba(246,243,236,.5);color:#fff}
/* 버튼: clay cc-light(흰 바탕) · cc-light cc-outline(흰 테두리) */
.btn-call,.btn-line{border-radius:.75rem;font-size:1.125rem;font-weight:600;letter-spacing:-.01em;padding:.9em 1.35em}
.hero .btn-call{background:var(--oat-100);color:var(--ink)}
.hero .btn-call:hover{background:#fff}
.hero .btn-line{background:transparent;border:1px solid rgba(246,243,236,.55);color:var(--oat-100)}
.hero .btn-line:hover{border-color:var(--oat-100);background:rgba(246,243,236,.08)}
.hero .btn-line .arw{background:rgba(246,243,236,.16)}
.hero-actions{margin-top:26px}
/* 오른쪽 그림 카드는 크림 카드로 띄움 */
.hero .diagram,.hero .map,.hero .compass{background:var(--canvas);color:var(--ink)}
.hero .hero-img{border-radius:var(--r-lg)}

/* 메인 첫 화면: 실제 현장 사진 위에 초록 그러데이션, 글자는 아래쪽 */
.page-home .hero{background:var(--hero-green)}
.page-home .hero:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(3,93,68,.96) 0%,rgba(3,93,68,.82) 42%,rgba(3,93,68,.25) 100%),linear-gradient(0deg,rgba(3,93,68,.85),rgba(3,93,68,0) 55%)}
.page-home .hero-grid{position:relative}
@media (min-width:1024px){
  .page-home .hero{min-height:min(86vh,820px);display:flex;align-items:flex-end;padding-block:64px 72px}
  .page-home .hero-grid{width:100%;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);column-gap:72px;row-gap:0;grid-template-areas:". vis" "kick vis" "title area" "title lead" "title act";grid-template-rows:1fr auto auto auto auto;align-items:end}
  .page-home .hero-copy{display:contents}
  .page-home .hero-kicker{grid-area:kick;justify-self:start}
  .page-home .hero h1{grid-area:title;align-self:end;font-size:clamp(3.4rem,6vw,5rem);line-height:1.02}
  .page-home .hero-area{grid-area:area;margin:0 0 10px}
  .page-home .hero-lead{grid-area:lead;margin:0;font-size:1.1rem}
  .page-home .hero-actions{grid-area:act;margin:22px 0 0}
  .page-home .hero-visual{grid-area:vis;align-self:start;justify-self:end;width:min(100%,420px);margin-bottom:48px}
  .page-home .diagram{background:rgba(255,250,240,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
}
@media (max-width:1023px){
  .page-home .hero:before{background:linear-gradient(180deg,rgba(3,93,68,.62),rgba(3,93,68,.9) 48%,rgba(3,93,68,.97))}
  .hero-grid{gap:36px}
}
/* 첫 화면 바로 아래 흐르는 띠는 초록에서 크림으로 넘어가는 경계 */
.marquee{background:var(--canvas)}
.map img{filter:hue-rotate(-62deg) saturate(.75) brightness(.9)}
@media (max-width:1023px){.hero h1{margin-bottom:16px}}

/* ===== 글자 체계 (type system) — clay.com 구조 그대로, 서체만 한글용 =====
   clay: 서체 한 벌(Roobert), 제목은 Medium, 본문은 Regular, 큰 제목일수록 자간을 좁힘.
   누수박사: Roobert 와 결이 같은 기하학 산세리프 Gmarket Sans(무료) 한 벌.
     300 Light = 본문 · 500 Medium = 제목·버튼·강조 (700 은 쓰지 않음)
   크기 단계(clay restart 값 → 한글 폭에 맞춰 약간 줄임)와 역할은 아래 토큰만 쓴다. */
:root{
  --font:"Gmarket Sans",-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --display:var(--font); --display-weight:500;
  --fw-body:300; --fw-medium:500;
  --fs-h1:clamp(2.75rem,5.6vw,5rem);    --lh-h1:1.12; --ls-h1:-.035em;
  --fs-h2:clamp(2.25rem,4.4vw,4rem);    --lh-h2:1.14; --ls-h2:-.03em;
  --fs-h3:clamp(1.625rem,2.6vw,2.5rem); --lh-h3:1.2;  --ls-h3:-.02em;
  --fs-h4:1.25rem;                      --lh-h4:1.4;  --ls-h4:-.01em;
  --fs-lead:clamp(1.125rem,1.5vw,1.375rem); --lh-lead:1.55;
  --fs-body:1rem;   --lh-body:1.7;
  --fs-sm:.875rem;  --lh-sm:1.55;
  --fs-eyebrow:.8125rem; --ls-eyebrow:.08em;
}
body{font-family:var(--font);font-size:var(--fs-body);font-weight:var(--fw-body);line-height:var(--lh-body);letter-spacing:0;color:#2b2b2b}
b,strong,th,dt,summary,button,input,label{font-weight:var(--fw-medium)}
h1,h2,h3,h4{font-family:var(--font);font-weight:var(--fw-medium)}

/* 제목 역할 */
h1,.hero h1,.page-home .hero h1,.hero-place h1,.block h1{font-size:var(--fs-h1);line-height:var(--lh-h1);letter-spacing:var(--ls-h1);font-weight:var(--fw-medium)}
.hero-place h1,.block h1{font-size:calc(var(--fs-h1) * .86)}
h2,.block-title,.finder-head h2,.callout h2,.ins-band h2,.article h1{font-size:var(--fs-h2);line-height:var(--lh-h2);letter-spacing:var(--ls-h2);font-weight:var(--fw-medium)}
h3,.hub h3,.article h2{font-size:var(--fs-h3);line-height:var(--lh-h3);letter-spacing:var(--ls-h3);font-weight:var(--fw-medium)}
.svc-text strong,.trust strong,.case-text strong,.place-t strong,.faq summary,.steps li,.diagram figcaption strong,.compass figcaption strong{font-size:var(--fs-h4);line-height:var(--lh-h4);letter-spacing:var(--ls-h4);font-weight:var(--fw-medium)}
.place-t strong,.diagram figcaption strong,.compass figcaption strong{font-size:1rem}
.steps li:before{font-weight:var(--fw-medium);letter-spacing:-.03em}

/* 본문 역할 */
.hero-lead,.lead,.summary-text,.finder-head p,.callout p,.ins-band p{font-size:var(--fs-lead);line-height:var(--lh-lead);font-weight:var(--fw-body);letter-spacing:0}
.svc-text span,.trust span,.case-text span,.facts dd,.faq details p,.signs li,.ins-docs li,.diagram-steps li{font-size:var(--fs-body);line-height:var(--lh-body);font-weight:var(--fw-body)}
.crumbs,.facts dt,.place-t span,.region-grid span,.hero-area span,.site-footer,.case-text time,.diagram figcaption span,.compass figcaption span{font-size:var(--fs-sm);line-height:var(--lh-sm)}
/* 눈썹(eyebrow): clay 처럼 작은 글자 + 넓은 자간, 알약 없음 */
.hero-kicker,.summary-label,.ins-kicker,.svc-tag{font-size:var(--fs-eyebrow);letter-spacing:var(--ls-eyebrow);font-weight:var(--fw-medium)}
.hero-kicker{background:none;border:0;padding:0;margin-bottom:22px;color:rgba(246,243,236,.72)}

/* 화면 부품 */
.brand{font-weight:var(--fw-medium);font-size:1.25rem;letter-spacing:-.02em}
.gnb a{font-weight:var(--fw-body);font-size:.95rem;color:var(--ink-2)}
.call b,.btn-call,.btn-line,.finder-tab,.callbar a,.chips a,.hero-near a,.region-grid strong,.dong-grid strong,.station-grid strong,.marquee-track span,.more-link a,.cursor-tip,.dg-tag{font-weight:var(--fw-medium);letter-spacing:-.01em}
.btn-call,.btn-line{font-size:1.0625rem;padding:1em 1.4em .9em}
.callout .btn-call{font-size:clamp(1.5rem,4vw,2.5rem);letter-spacing:-.02em}
.dong-grid strong,.station-grid strong{font-size:.95rem}
.hero-area b,.footer-brand{font-weight:var(--fw-medium)}

/* 굵기는 300·500 두 단계만 — 700 이상을 쓰면 Bold 파일을 또 받으므로 500 으로 묶는다 */
.notice-bar,.draft-bar,.diagram-steps b,.map-pin span,.dg-tag,.diagram-art>span,.cp-n,.cp-center,.cp-item b,.ins-docs p,.callbar a,.sample-badge,.more-link a,.hero-area b,.footer-brand,.summary-label,.ins-kicker{font-weight:var(--fw-medium)}
.gnb a{color:var(--ink)}

/* 앞 단계에 남은 굵은 값(540~900)을 모두 Medium 500 으로 */
.draft-bar,.hero-kicker,.hero-area b,.btn-call,.map-pin span,.dg-tag,.diagram-art>span[class^="dg-l"],.cp-n,.cp-center,.cp-item b,.finder-tab,.summary-label,.svc-tag,.sample-badge,.faq summary,.more-link a,.ins-kicker,.ins-docs p,.footer-brand,.callbar a,.d-steps-circle .steps li:before,.brand,.btn-line,.marquee-track span,.arw,.cursor-tip,.steps li,.steps li:before,.callout .btn-call,.d-callout-dark .callout .btn-call,h1,h2,h3,.finder-head h2,.block-title,.block h1,.callout h2,.svc-text strong,.hero h1{font-weight:var(--fw-medium)}
/* 가독성: Gmarket Light 는 Roobert Regular 보다 가늘다 → 16px 미만 글자와 색 카드 위 글자는 Medium, 투명도 없음 */
.gnb a,.crumbs,.facts dt,.place-t span,.region-grid span,.hero-area span,.site-footer,.case-text time,.diagram figcaption span,.compass figcaption span,.finder-results span,.hero-near span{font-weight:var(--fw-medium)}
.gnb a{color:var(--ink-2)}
.svc-text span{opacity:1;font-weight:var(--fw-medium);color:inherit;font-size:.9375rem}
.svc-item a{color:#0a0a0a}
.svc-item:nth-child(6n+2) a{color:#fff}
.svc-tag{opacity:1}

/* 지역 찾기: 동으로 바로 — 4칸, 약 5줄만 보이고 나머지는 상자 안에서 스크롤 */
.dong-grid,.station-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;max-height:calc(5 * 58px + 4 * 8px);overflow-y:auto;overscroll-behavior:contain;padding:2px 8px 2px 2px;scrollbar-width:thin;scrollbar-color:var(--oat-300) transparent}
.dong-grid a,.station-grid a{min-height:58px;justify-content:center;padding:10px 16px;border-radius:12px}
.dong-grid strong{font-size:.98rem;font-weight:500;line-height:1.3;letter-spacing:-.01em}
.station-grid strong{font-weight:500}
.dong-grid::-webkit-scrollbar,.station-grid::-webkit-scrollbar{width:6px}
.dong-grid::-webkit-scrollbar-thumb,.station-grid::-webkit-scrollbar-thumb{background:var(--oat-300);border-radius:6px}
@media (max-width:1023px){.dong-grid,.station-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:700px){.dong-grid,.station-grid{grid-template-columns:repeat(2,minmax(0,1fr));max-height:calc(6 * 58px + 5 * 8px)}}
/* 메인 첫 화면 영상: 실제 현장(바닥 속 배관에서 물이 새는 장면). 소리 없음, 반복, 위에 초록 그러데이션 */
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.page-home .hero:before{z-index:1}
.page-home .hero-grid{z-index:2}

/* ===== v5 — 초록 계열 없앰 · 메인은 영상이 주인공 (2026-10-26 사장님) =====
   초록·틸·민트 토큰을 중립색으로 바꾸고, 메인 첫 화면은 영상 원래 색 그대로 + 아래쪽만 옅은 검정 그러데이션.
   다른 페이지 첫 화면은 clay 의 크림판(cc-white)으로. */
:root{--c-teal:#1c1b19;--c-mint:#f3d9c9;--hero-green:#1c1b19;--ok:#e2306c;--main:#1c1b19;--main-text:#1c1b19}
.brand:before{background:var(--ink)}
.hero-area:before,.badge-ok:before{background:var(--c-pink);box-shadow:0 0 0 4px rgba(255,77,139,.22)}
.map img{filter:grayscale(1) brightness(.55) contrast(1.2)}

/* 다른 페이지 첫 화면: 크림판 + 검정 글자 */
.hero{background:var(--cream-soft);color:var(--ink)}
.hero h1{color:var(--ink)}
.hero-kicker{color:var(--ink-3)}
.hero-area{color:var(--ink-2)}
.hero-area b{color:var(--ink)}
.hero-area span,.hero-near span{color:var(--ink-3)}
.hero-lead{color:var(--ink-2)}
.badge-ok{color:#c2185b}
.hero-near a,.hero-chips a{background:var(--surface);border-color:var(--line);color:var(--ink-2)}
.hero-near a:hover,.hero-chips a:hover{background:var(--cream-card);border-color:var(--ink);color:var(--ink)}
.hero .btn-call{background:var(--ink);color:#fff}
.hero .btn-call:hover{background:#1f1f1f}
.hero .btn-line{background:var(--surface);border:1px solid var(--line);color:var(--ink)}
.hero .btn-line:hover{border-color:var(--ink);background:var(--surface)}
.hero .btn-line .arw{background:var(--cream-card)}
.hero .diagram,.hero .map,.hero .compass{background:var(--surface)}

/* 메인 첫 화면: 영상이 화면을 채우고, 글자는 영상 위 흰색 */
.page-home .hero{background:#0b0b0a;color:#fff;min-height:min(92vh,880px)}
.page-home .hero:before{background:linear-gradient(0deg,rgba(0,0,0,.62) 0%,rgba(0,0,0,.28) 38%,rgba(0,0,0,0) 62%),linear-gradient(90deg,rgba(0,0,0,.28),rgba(0,0,0,0) 55%)}
.page-home .hero h1{color:#fff;text-shadow:0 2px 24px rgba(0,0,0,.25)}
.page-home .hero-kicker{color:rgba(255,255,255,.82)}
.page-home .hero-area{color:rgba(255,255,255,.88)}
.page-home .hero-area b{color:#fff}
.page-home .hero-area span{color:rgba(255,255,255,.7)}
.page-home .hero-lead{color:rgba(255,255,255,.9)}
.page-home .hero .btn-call{background:#fff;color:var(--ink)}
.page-home .hero .btn-call:hover{background:var(--canvas)}
.page-home .hero .btn-line{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.6);color:#fff;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.page-home .hero .btn-line:hover{background:rgba(255,255,255,.16);border-color:#fff}
.page-home .hero .btn-line .arw{background:rgba(255,255,255,.18)}
/* 영상을 가리지 않게 단면도 카드는 메인 첫 화면에서 뺌(같은 3단계가 아래 '진행 순서'에 있음) */
.page-home .hero-visual{display:none}
@media (min-width:1024px){
  .page-home .hero-grid{grid-template-areas:"kick kick" "title area" "title lead" "title act";grid-template-rows:auto auto auto auto}
}
@media (max-width:1023px){
  .page-home .hero{display:flex;align-items:flex-end;min-height:min(88svh,760px)}
  .page-home .hero-grid{width:100%}
  .page-home .hero:before{background:linear-gradient(0deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.4) 45%,rgba(0,0,0,.05) 75%)}
}
/* 글씨가 보이게: 영상 전체에 옅은 검정 한 겹 + 글자 있는 아래쪽만 조금 더 */
.page-home .hero:before{background:linear-gradient(0deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,.15) 45%,rgba(0,0,0,0) 70%),rgba(0,0,0,.32)}
@media (max-width:1023px){.page-home .hero:before{background:linear-gradient(0deg,rgba(0,0,0,.6) 0%,rgba(0,0,0,.2) 55%,rgba(0,0,0,0) 80%),rgba(0,0,0,.34)}}
.page-home .hero-lead,.page-home .hero-area{text-shadow:0 1px 12px rgba(0,0,0,.35)}

/* ===== v6 — 단색 통일 (2026-10-26 사장님): '진행 순서' 카드만 여러 색, 나머지는 한 색 =====
   카드 면 = 크림(--cream-card), 강조색 = 검정(--ink). */
:root{--card:#f3ecdc;--accent-one:#0a0a0a}
.svc-item a,.svc-item:nth-child(n) a{background:var(--card);color:var(--ink)}
.svc-item:nth-child(n) .arw{background:rgba(10,10,10,.08)}
.svc-item a:hover{background:#ece3cf}
.marquee-track span:after,.marquee-track span:nth-child(n):after{background:var(--accent-one)}
.summary-label,.badge-ok,.ins-kicker{color:var(--ink)}
.hero-area:before,.badge-ok:before{background:var(--ink);box-shadow:0 0 0 4px rgba(10,10,10,.12)}
.page-home .hero-area:before{background:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.25)}
.signs li:before{border-color:var(--ink)}
.dg-point{background:var(--ink);box-shadow:0 0 0 3px var(--ink)}
.dg-ring{background:radial-gradient(circle,rgba(10,10,10,.35),rgba(10,10,10,0) 70%)}
.dg-tag{background:var(--ink);color:#fff}
.map-pin:before{background:var(--ink);border-color:#fff}
.cp-center{box-shadow:0 0 0 6px rgba(10,10,10,.12)}
.brand:before{background:var(--ink)}
.faq details[open] summary:after{background-color:var(--card)}
.finder-search input:focus{box-shadow:0 0 0 4px rgba(10,10,10,.1)}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{outline-color:var(--ink)}
.ins-docs li:before{border-color:#fff}
.block-ins .wrap,.callout>.wrap{background:var(--card)}

/* 로고 (assets/logo.svg: 물방울+돋보기 표식 + 글자 윤곽선) */
.brand:before{display:none}
.brand img{height:30px;width:auto;display:block}
.footer-brand img{height:34px;width:auto;display:block}
@media (max-width:520px){.brand img{height:26px}}

/* 구·시 페이지 현장 사진(다른 현장 참고 사진, 페이지마다 다른 사진) */
.field-photo{margin:0;max-width:880px}
.field-photo img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-lg)}
.field-photo figcaption{margin-top:10px;font-size:var(--fs-sm);color:var(--ink-3)}

/* 동·역 주변 지도(실제 행정동 경계, 인라인 SVG) */
.dongmap{display:block;width:100%;height:auto;border-radius:var(--r-card);background:#f6f1e6}
.dm-dong{fill:#efe6d3;stroke:#fffaf0;stroke-width:1.4;stroke-linejoin:round}
.dm-target{fill:#0a0a0a;stroke:#fffaf0;stroke-width:1.6}
.dm-here{fill:#e3d6ba;stroke:#fffaf0;stroke-width:1.6}
.dm-item rect{fill:#fff;stroke:#e2d9c4}
.dm-item text{font:500 11.5px var(--font);fill:#6a6a6a}
.dm-item .dm-name{fill:#0a0a0a}
.dm-item:hover rect{stroke:#0a0a0a}
.dm-center rect{fill:#fff;stroke:#0a0a0a;stroke-width:1.5}
.dm-center text{font:500 13px var(--font);fill:#0a0a0a}
.dm-scale path{stroke:#0a0a0a;stroke-width:2}
.dm-scale text,.dm-north text{font:500 10px var(--font);fill:#3a3a3a}
.dm-north path{fill:#0a0a0a}
.dm-credit{margin:10px 2px 0;font-size:.75rem;line-height:1.5;color:var(--ink-3)}
.dm-credit a{color:inherit}
.dm-lead{stroke:#0a0a0a;stroke-width:1;stroke-dasharray:2 2;opacity:.5}
.dm-pt{fill:#0a0a0a}
/* 지도 v2 — 저스트 방식(회색 바탕·흰 경계·파스텔 면·굵은 동 이름·회색 구 이름) */
.dm-bg{fill:#f1f1ec}
.dm-dong{fill:#f1f1ec;stroke:#fff;stroke-width:1.3;stroke-linejoin:round}
.dm-area{stroke:#fff;stroke-width:1.5;stroke-linejoin:round}
.dm-name{font:600 15px var(--font);fill:#0a0a0a;text-anchor:middle;paint-order:stroke;stroke:rgba(255,255,255,.55);stroke-width:3px}
.dm-main{font-size:17px}
.dm-sgg{font:500 12px var(--font);fill:#9a9a94;text-anchor:middle}
.dm-stn{font:500 11.5px var(--font);fill:#3a3a3a;paint-order:stroke;stroke:#f1f1ec;stroke-width:3px}
.dm-st{stroke:#fff;stroke-width:2}
.dm-here-pt{fill:#0a0a0a;stroke:#fff;stroke-width:3}
a:hover .dm-name,a:hover .dm-stn{text-decoration:underline}
.dongmap-fig .dongmap{background:#f1f1ec}

/* 동 페이지 '실제 시공 현장' 사진 4장 */
.case-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:18px}
.case-grid figure{margin:0}
.case-grid img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-card)}
.case-grid figcaption{margin-top:8px;font-size:var(--fs-sm);color:var(--ink-3)}
@media (max-width:520px){.case-grid{gap:10px}}

/* 동 페이지 본문 원고 */
.article-body{max-width:780px}
.article-body h2{font-size:var(--fs-h3);line-height:var(--lh-h3);letter-spacing:var(--ls-h3);margin:44px 0 14px}
.article-body h2:first-child{margin-top:0}
.article-body p{font-size:1.0625rem;line-height:1.8;margin:0 0 14px;color:var(--ink-2)}