/* 고침터 싱크홀보수공사 — flat/editorial. 아스팔트 그레이 + 안전주황 단일 액센트 */
:root{--bg:#F5F4F1;--surface:#fff;--alt:#ECEAE5;--ink:#181A1C;--soft:#4B5056;--faint:#868B91;--line:#D9D7D0;--accent:#B8480F;--accent-d:#8F3508;--accent-s:#F6E7DD;--panel:#17191B;--panel-t:#F3F2EE;--panel-m:#A3A7AC;--r:3px;--maxw:1240px;--g:clamp(20px,4vw,48px);--sp:clamp(56px,8vw,100px)}
@font-face{font-family:'Pretendard Variable';src:url('https://cdn.jsdelivr.net/npm/pretendard@1.3.9/dist/web/variable/woff2/PretendardVariable.woff2') format('woff2-variations');font-weight:45 920;font-display:swap}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font-family:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,'Malgun Gothic',ui-sans-serif,system-ui,sans-serif;color:var(--ink);background:var(--bg);line-height:1.75;letter-spacing:-.008em;word-break:keep-all;overflow-wrap:break-word;padding-bottom:64px}
img{max-width:100%;height:auto;display:block}a{color:inherit;text-decoration:none}p,h1,h2,h3,ul,ol,figure{margin:0}
h1,h2,h3{font-weight:800;letter-spacing:-.015em;line-height:1.3}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--g)}.sec{padding:var(--sp) 0}.alt{background:var(--alt)}.inv{background:var(--surface);border-block:1px solid var(--line)}
.dark{background:var(--panel);color:var(--panel-t)}.dark .sub{color:var(--panel-m)}
.eyebrow{display:block;font-size:.78rem;font-weight:700;letter-spacing:.12em;color:var(--accent);margin-bottom:12px}.dark .eyebrow{color:#E9A47C}
h2.t{font-size:clamp(1.55rem,3.4vw,2.4rem);margin-bottom:14px}.sub{color:var(--soft);max-width:760px}
.btn{display:inline-block;padding:14px 26px;border-radius:var(--r);font-weight:700;border:1px solid var(--accent);background:var(--accent);color:#fff;transition:background .2s}
.btn:hover{background:var(--accent-d)}.btn.ghost{background:transparent;color:var(--accent)}.dark .btn.ghost{color:#fff;border-color:#fff}
.hdr{position:sticky;top:0;z-index:20;background:var(--surface);border-bottom:1px solid var(--line)}
.hdr .wrap{display:flex;align-items:center;justify-content:space-between;height:64px;gap:16px}
.logo{font-weight:900;font-size:1.2rem;letter-spacing:-.03em}.logo b{color:var(--accent)}
.nav{display:flex;gap:26px;font-size:.95rem;font-weight:600;align-items:center}.nav a:hover{color:var(--accent)}
@media(max-width:760px){.nav a.hide-m{display:none}.nav{gap:14px}}
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--g);align-items:center;padding:var(--sp) 0}
.hero h1{font-size:clamp(2rem,5vw,3.4rem);margin-bottom:20px}.hero .lead{font-size:1.1rem;color:var(--soft);margin-bottom:28px}
.hero img{border-radius:var(--r);aspect-ratio:4/5;object-fit:cover;width:100%}
@media(max-width:860px){.hero{grid-template-columns:1fr}.hero img{aspect-ratio:4/3}}
.crumb{font-size:.85rem;color:var(--faint);padding-top:20px}.crumb a:hover{color:var(--accent)}
.dg{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line);margin-top:32px}
.dg>*{padding:28px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--surface)}.dg h3{font-size:1.1rem;margin-bottom:8px}.dg p{color:var(--soft);font-size:.95rem}
@media(max-width:860px){.dg{grid-template-columns:1fr}}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:32px}
@media(max-width:960px){.cards{grid-template-columns:repeat(2,1fr)}}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:block;transition:border-color .2s}.card:hover{border-color:var(--accent)}
.cmp{display:grid;grid-template-columns:1fr 1fr;position:relative}.cmp figure{position:relative}.cmp img{aspect-ratio:3/4;object-fit:cover;width:100%}
.cmp figcaption,.tag{position:absolute;left:8px;top:8px;background:rgba(24,26,28,.85);color:#fff;font-size:.75rem;font-weight:700;padding:2px 8px;border-radius:2px}
.card .cb{padding:18px 20px}.card h3{font-size:1.05rem;margin-bottom:6px}.card p{font-size:.9rem;color:var(--soft)}
.card .meta{font-size:.8rem;color:var(--faint);margin-top:8px}
.rel .card img{aspect-ratio:4/3;object-fit:cover;width:100%}
.tbl{overflow-x:auto;margin:20px 0;border:1px solid var(--line);background:var(--surface)}
table{border-collapse:collapse;width:100%;min-width:560px;font-size:.95rem}th,td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}th{background:var(--alt);font-weight:700}
.steps{list-style:none;padding:0;margin-top:32px;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;counter-reset:s}
.steps li{counter-increment:s;border-top:2px solid var(--ink);padding-top:14px}.steps li::before{content:"0" counter(s);font-weight:800;color:var(--accent);display:block}.steps b{display:block;margin:4px 0}.steps span{font-size:.9rem;color:var(--soft)}
@media(max-width:860px){.steps{grid-template-columns:1fr 1fr}}
.faq{border-bottom:1px solid var(--line);background:var(--surface)}.faq summary{cursor:pointer;padding:18px 20px;list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq summary::-webkit-details-marker{display:none}.faq summary h3{font-size:1rem;font-weight:700}.faq summary::after{content:"+";font-weight:800;color:var(--accent)}.faq[open] summary::after{content:"\2212"}
.faq p{padding:0 20px 20px;color:var(--soft)}.faqs{margin-top:28px;border:1px solid var(--line);border-bottom:0}
.art{max-width:820px}.art h2{font-size:1.5rem;margin:48px 0 14px}.art p{margin-bottom:16px}.art ul,.art ol{padding-left:22px;margin-bottom:16px}.art li{margin-bottom:6px}
.art figure{margin:24px 0}.art figure img{border-radius:var(--r);width:100%;max-width:560px;aspect-ratio:3/4;object-fit:cover}.art figcaption{font-size:.85rem;color:var(--faint);margin-top:8px}
.upd{font-size:.85rem;color:var(--faint);margin-top:40px}.quote{border-left:3px solid var(--accent);padding:6px 0 6px 18px;margin:24px 0;color:var(--soft)}
.ftr{background:var(--panel);color:var(--panel-m);padding:48px 0 32px;font-size:.9rem}.ftr .wrap{display:grid;grid-template-columns:1.2fr 1fr;gap:32px}.ftr b{color:var(--panel-t)}.ftr a:hover{color:#fff}
.ftr ul{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:6px 18px}.ftr .copy{grid-column:1/-1;border-top:1px solid #33373B;padding-top:20px}
@media(max-width:760px){.ftr .wrap{grid-template-columns:1fr}}
.float{position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--accent);text-align:center}.float a{display:block;padding:16px;color:#fff;font-weight:800}
.cta2{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
