/* 공장 변기막힘 — service/factory-toilet-blockage/style.css */

:root{
  --h: 218;
  --bg: hsl(var(--h) 14% 95%);
  --surface: hsl(var(--h) 22% 99%);
  --ink: hsl(var(--h) 30% 15%);
  --muted: hsl(var(--h) 10% 42%);
  --accent: hsl(var(--h) 65% 50%);
  --accent-ink: #fff;
  --line: hsl(var(--h) 16% 84%);
}
:root{ --font-title: 'Hahmlet', 'Pretendard Variable', Pretendard, serif; --font-body: 'Pretendard Variable', Pretendard, 'Noto Sans KR', sans-serif; }

body{ background: var(--bg); color: var(--ink); font-family: var(--font-body); }
h1,h2,h3,.logo{ font-family: var(--font-title); font-weight:700; }
.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.4rem,1.05rem + 1.2vw,1.85rem); margin-bottom: 1rem; }
main h3{ font-size: 1.1rem; 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; }
.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; }
.onsite-photo-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; max-width:900px; margin:0 auto; }
.onsite-photo-grid img{ width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:10px; box-shadow:0 4px 12px rgba(0,0,0,.08); }
@media(max-width:700px){ .onsite-photo-grid{ grid-template-columns:repeat(2,1fr); } }

.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; }

/* v40: 다크 산업풍 헤더(대괄호 로고+필박스 전화) + 스플릿 히어로(텍스트+스탯카드) + 다크 바형 CTA */
.hdr--v40{ background:hsl(var(--h) 35% 14%); padding-block:1.1rem; }
.hdr--v40 .hdr__inner{ display:flex; justify-content:space-between; align-items:center; }
.hdr--v40 .logo{ font-weight:700; font-size:1.3rem; color:#fff; }
.hdr--v40 .logo::before{ content:"["; color:var(--accent); }
.hdr--v40 .logo::after{ content:"]"; color:var(--accent); }
.hdr--v40 .hdr__tel{ background:var(--accent); color:#fff; font-weight:700; font-size:.9rem; padding:.4rem 1rem; border-radius:4px; }

.hero--v40{ padding-block:3.6rem; background:hsl(var(--h) 35% 14%); }
.hero--v40 .hero__inner{ display:grid; grid-template-columns:1.2fr 1fr; gap:2rem; align-items:center; }
.hero--v40 h1{ font-size:clamp(1.9rem,1.3rem + 2.2vw,2.7rem); margin-block:.6rem .9rem; color:#fff; }
.hero--v40 .kicker{ background:var(--accent); color:#fff; padding:.3rem .8rem; font-size:.82rem; font-weight:700; }
.hero--v40 .lead{ color:hsl(var(--h) 20% 78%); }
.hero--v40 .btn-tel{ background:var(--accent); }
.hero__stat{ background:hsl(var(--h) 35% 20%); border:1px solid hsl(var(--h) 30% 30%); border-radius:8px; padding:1.6rem; text-align:center; }
.hero__stat-num{ display:block; font-family:var(--font-title); font-size:clamp(1.5rem,1.15rem + 1.3vw,2rem); color:var(--accent); margin-bottom:.4rem; }
.hero__stat-label{ color:hsl(var(--h) 20% 78%); font-size:.85rem; }
@media(max-width:760px){ .hero--v40 .hero__inner{ grid-template-columns:1fr; } }

.cta--v40{ background:hsl(var(--h) 35% 14%); padding-block:2.2rem; margin-block:1rem; }
.cta--v40 .container{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.cta--v40 h3{ font-family:var(--font-title); font-weight:700; font-size:1.4rem; margin:0 0 .3rem; color:#fff; }
.cta--v40 p{ color:hsl(var(--h) 20% 78%); margin:0; }
.cta--v40 a{ display:inline-block; background:var(--accent); color:#fff; padding:.7rem 1.6rem; border-radius:4px; font-weight:700; white-space:nowrap; }

.ftr--v40{ background:hsl(var(--h) 14% 92%); border-top:1px solid var(--line); }
.ftr--v40 .ftr__inner{ display:flex; justify-content:center; padding-block:1.1rem; }
.ftr--v40 .ftr__biz{ font-size:.78rem; margin:0; text-align:center; }