/* 변기막힘 요석 — service/scale-buildup/style.css */

:root{
  --h: 44;
  --bg: hsl(var(--h) 26% 14%);
  --surface: hsl(var(--h) 20% 19%);
  --ink: hsl(var(--h) 14% 94%);
  --muted: hsl(var(--h) 10% 68%);
  --accent: hsl(var(--h) 62% 62%);
  --accent-ink: hsl(var(--h) 26% 12%);
  --line: hsl(var(--h) 16% 29%);
}
:root{ --font-title: 'Pretendard Variable', Pretendard, sans-serif; --font-body: 'Pretendard Variable', Pretendard, sans-serif; }

body{ background: var(--bg); color: var(--ink); font-family: var(--font-body); }
h1,h2,h3,.logo{ font-family: var(--font-title); }
.container{ width:100%; max-width:1080px; margin-inline:auto; padding-inline:1.25rem; }
a{ color: var(--accent); }
main{ padding-block: 2.5rem; }
main section{ margin-bottom: 2.75rem; }
main h2{ font-size: clamp(1.3rem,1rem + 1.2vw,1.7rem); margin-bottom: 1rem; }
main h3{ font-size: 1.05rem; margin-bottom: .5rem; }
main p{ color: var(--ink); }
.lead{ color: var(--muted); }
.check-table{ width:100%; border-collapse:collapse; background:var(--surface); border:1px solid var(--line); }
.check-table th,.check-table td{ text-align:left; padding:.7rem .9rem; border-bottom:1px solid var(--line); font-size:.92rem; }
.check-table th{ color:var(--muted); font-weight:600; width:32%; }
.warn-box{ background:var(--surface); border-left:3px solid var(--accent); padding:1rem 1.1rem; margin-bottom:.9rem; border-radius:4px; font-size:.94rem; color:var(--ink); }
.faq{ background:var(--surface); border:1px solid var(--line); border-radius:6px; padding:.2rem 1.1rem; }
.faq details{ padding:.9rem 0; border-bottom:1px solid var(--line); }
.faq details:last-child{ border-bottom:none; }
.faq summary{ cursor:pointer; font-weight:600; }
.faq p{ margin-top:.6rem; color:var(--muted); font-size:.94rem; }
.term-list{ display:grid; gap:.7rem; }
.term-list dt{ font-weight:700; color:var(--accent); }
.term-list dd{ color:var(--muted); font-size:.92rem; margin-bottom:.6rem; }
.compare-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1rem; }
.compare-card{ background:var(--surface); border:1px solid var(--line); border-radius:6px; padding:1rem 1.1rem; }
.steps{ counter-reset: step; }
.steps li{ position:relative; padding-left:2.4rem; margin-bottom:1rem; }
.steps li::before{ counter-increment:step; content: counter(step); position:absolute; left:0; top:0; width:1.7rem; height:1.7rem; border-radius:50%; background:var(--accent); color:var(--accent-ink); display:flex; align-items:center; justify-content:center; font-size:.85rem; font-weight:700; }
.related-links{ display:flex; flex-wrap:wrap; gap:.6rem; }
.related-links a{ background:var(--surface); border:1px solid var(--line); padding:.5rem .9rem; border-radius:999px; font-size:.88rem; }
.shot{ margin: 2.5rem auto; max-width: 1000px; }
.shot__row{ display:flex; justify-content:center; align-items:stretch; gap:1rem; flex-wrap:nowrap; }
.shot__row img{ flex:1 1 0; min-width:0; width:100%; height:auto; display:block; object-fit:cover; border-radius:6px; }
.shot figcaption{ text-align:center; color:var(--muted); font-size:.85rem; margin-top:.5rem; }
@media (max-width:640px){ .shot__row{ flex-wrap:wrap; } .shot__row img{ flex:1 1 100%; } }
.diagram{ background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:1.2rem; }
.diagram svg{ width:100%; height:auto; display:block; }

.btn-tel{ display:inline-block; margin-top:1rem; background:var(--accent); color:var(--accent-ink); padding:.7rem 1.6rem; border-radius:6px; font-weight:700; }
.hdr--v07{{ position:sticky; top:0; z-index:50; background:var(--bg); border-bottom:1px solid var(--line); }} .hdr--v07 .hdr__inner{{ display:flex; justify-content:space-between; align-items:center; padding-block:.6rem; }} .hdr--v07 .logo{{ font-size:1rem; font-weight:700; color:var(--accent); }} .hdr--v07 nav ul{{ display:flex; gap:.8rem; }} .hdr--v07 nav a{{ font-size:.82rem; color:var(--muted); }}
.hero--v07{ background:var(--bg); color:var(--ink); text-align:center; padding-block:3.2rem 2.4rem; } .hero--v07 h1{ font-size:clamp(2.2rem,1.4rem + 3.4vw,3.6rem); font-weight:900; margin-block:.6rem 1rem; } .hero--v07 .kicker{ color:var(--accent); font-weight:700; font-size:.85rem; } .hero--v07 .lead{ color:var(--muted); max-width:600px; margin-inline:auto; }
.cta--v07{ text-align:center; padding-block:2.2rem; } .cta--v07 p{ margin-bottom:.9rem; } .cta--v07::after{ content:""; } .cta--v07 a{ display:inline-flex; gap:.6rem; background:var(--accent); color:var(--accent-ink); padding:.65rem 1.5rem; border-radius:6px; font-weight:700; flex-direction:column; }
.ftr--v07{{ background:hsl(var(--h) 26% 10%); color:hsl(var(--h) 12% 82%); }} .ftr--v07 .ftr__inner{{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem; padding-block:2rem; }} .ftr--v07 a{{ color:hsl(var(--h) 12% 82%); }} .ftr--v07 .ftr__biz{{ font-size:.85rem; color:var(--muted); line-height:1.9; }} .ftr--v07 .ftr__nav{{ display:flex; flex-wrap:wrap; gap:.9rem; font-size:.85rem; }} .ftr--v07 .ftr__copy{{ font-size:.78rem; color:var(--muted); }}