/* 상세페이지 공통 컴포넌트 (서비스·지역). 접두사 dc-. 모바일 우선, 가로 스크롤 금지 */
.dc,.dc *{box-sizing:border-box;min-width:0}
html,body{overflow-x:hidden}
.dc{width:100%;max-width:100%;overflow-wrap:anywhere;word-break:keep-all;font-family:"Pretendard",-apple-system,"Malgun Gothic","Apple SD Gothic Neo",sans-serif;color:#262a31;line-height:1.75;font-size:16px}
.dc img{max-width:100%;height:auto;display:block}
.dc-wrap{width:100%;max-width:1000px;margin:0 auto;padding:0 18px}
.dc-sec{padding:40px 0}
.dc-sec.alt{background:#f4f5f7}
.dc h2{font-size:24px;line-height:1.4;margin:0 0 6px;font-weight:800;color:#1b1e23}
.dc h3{font-size:17px;line-height:1.5;margin:0 0 6px;font-weight:800;color:#1b1e23}
.dc p{margin:0 0 12px;font-size:15.5px}
.dc .dc-lead{font-size:17px;color:#383e46;margin:0 0 6px}
.dc .dc-sub{color:#6b7280;font-size:14.5px;margin:0 0 18px}

/* 현장사진 4장: 모바일 2x2, 340px 이하 1열, PC 2x2(넓으면 4열 허용 안 함 — 사진 크기 확보) */
.dc-photos{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0;padding:0;list-style:none}
.dc-photos figure{margin:0;position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:10px;background:#e4e6ea}
.dc-photos img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.dc-photos figcaption{position:absolute;left:0;right:0;bottom:0;padding:18px 10px 6px;font-size:12px;line-height:1.4;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.6))}
@media (max-width:340px){.dc-photos{grid-template-columns:1fr}}
@media (min-width:768px){.dc-photos{gap:14px}.dc-photos figcaption{font-size:13px;padding:22px 14px 8px}}

/* 카드 */
.dc-cards{display:grid;gap:12px;grid-template-columns:1fr;margin:14px 0 0}
.dc-cards .c{background:#fff;border:1px solid #e4e6ea;border-radius:12px;padding:16px;box-shadow:0 2px 10px rgba(20,20,25,.05)}
.dc-cards .c b{display:block;font-size:16px;color:#1b1e23;margin-bottom:4px}
.dc-cards .c span{display:block;font-size:14.5px;color:#4d545e;line-height:1.7}
@media (min-width:480px){.dc-cards.n2,.dc-cards.n3,.dc-cards.n4{grid-template-columns:1fr 1fr}}
@media (min-width:860px){.dc-cards.n3{grid-template-columns:repeat(3,1fr)}.dc-cards.n4{grid-template-columns:repeat(4,1fr)}}

/* 단계형 작업과정: 모바일 세로 타임라인, PC 가로 카드 */
.dc-steps{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:0}
.dc-steps li{position:relative;padding:0 0 18px 52px}
.dc-steps li::before{content:attr(data-n);position:absolute;left:0;top:0;width:38px;height:38px;border-radius:50%;background:#ffb400;color:#1b1e23;font-weight:800;display:flex;align-items:center;justify-content:center}
.dc-steps li::after{content:"";position:absolute;left:18px;top:40px;bottom:2px;width:2px;background:#e4e6ea}
.dc-steps li:last-child::after{display:none}
.dc-steps b{display:block;font-size:16px;color:#1b1e23}
.dc-steps span{display:block;font-size:14.5px;color:#4d545e}
@media (min-width:860px){
 .dc-steps{grid-template-columns:repeat(5,1fr);gap:12px}
 .dc-steps li{padding:50px 12px 14px;background:#fff;border:1px solid #e4e6ea;border-radius:12px}
 .dc-steps li::before{left:12px;top:10px}
 .dc-steps li::after{display:none}
}

/* 체크리스트 */
.dc-check{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:8px;grid-template-columns:1fr}
.dc-check li{position:relative;padding:10px 12px 10px 38px;background:#fff;border:1px solid #e4e6ea;border-radius:10px;font-size:15px}
.dc-check li::before{content:"✓";position:absolute;left:12px;top:9px;color:#e08e00;font-weight:900}
@media (min-width:600px){.dc-check{grid-template-columns:1fr 1fr}}

/* 표: 모바일에서 행을 카드로 변환 (td의 data-l 라벨 표시) */
.dc-table{width:100%;border-collapse:collapse;margin:14px 0 0;background:#fff;font-size:14.5px}
.dc-table th,.dc-table td{border:1px solid #e4e6ea;padding:10px 12px;text-align:left;vertical-align:top}
.dc-table th{background:#fff2d9;color:#1b1e23;font-weight:800}
@media (max-width:700px){
 .dc-table,.dc-table tbody,.dc-table tr,.dc-table td{display:block;width:100%}
 .dc-table thead{display:none}
 .dc-table tr{margin:0 0 10px;border:1px solid #e4e6ea;border-radius:12px;overflow:hidden}
 .dc-table td{border:0;border-bottom:1px solid #f0f1f3;padding:8px 12px}
 .dc-table td:last-child{border-bottom:0}
 .dc-table td::before{content:attr(data-l);display:block;font-size:12px;font-weight:800;color:#e08e00;margin-bottom:1px}
 .dc-table td:first-child{background:#fff2d9;font-weight:800}
}

/* 박스 */
.dc-point{margin:16px 0 0;padding:14px 16px;border-left:4px solid #ffb400;background:#fff2d9;border-radius:0 10px 10px 0}
.dc-point b{display:block;color:#e08e00;font-size:13px;letter-spacing:.04em;margin-bottom:2px}
.dc-point p{margin:0}
.dc-warn{border-left-color:#e2542a;background:#fdeee9}
.dc-warn b{color:#e2542a}

/* 문제→원인→현장확인→작업방향 / BEFORE→WORK→AFTER: 모바일 세로, PC 가로 */
.dc-flow{display:grid;gap:10px;grid-template-columns:1fr;margin:14px 0 0}
.dc-flow .f{background:#fff;border:1px solid #e4e6ea;border-radius:12px;padding:14px 16px;position:relative}
.dc-flow .f em{display:block;font-style:normal;font-size:12px;font-weight:800;letter-spacing:.06em;color:#e08e00;margin-bottom:2px}
.dc-flow .f b{display:block;font-size:15.5px;margin-bottom:2px}
.dc-flow .f span{display:block;font-size:14.5px;color:#4d545e}
@media (min-width:860px){.dc-flow.n3{grid-template-columns:repeat(3,1fr)}.dc-flow.n4{grid-template-columns:repeat(4,1fr)}}

/* FAQ / 관련 링크 / CTA */
.dc-faq{display:grid;gap:10px;margin:14px 0 0}
.dc-faq div{background:#fff;border:1px solid #e4e6ea;border-radius:12px;padding:14px 16px}
.dc-faq p{margin:0;font-size:14.5px;color:#4d545e}
.dc-links{display:grid;gap:8px;grid-template-columns:1fr 1fr;margin:12px 0 0}
.dc-links a{display:block;padding:10px 12px;border:1px solid #e4e6ea;border-radius:10px;background:#fff;color:#1b1e23;text-decoration:none;font-size:14px;font-weight:700;line-height:1.4}
.dc-links a:hover{border-color:#ffb400}
@media (min-width:700px){.dc-links{grid-template-columns:repeat(3,1fr)}}
@media (max-width:340px){.dc-links{grid-template-columns:1fr}}
.dc-cta{display:flex;flex-direction:column;gap:10px;margin:18px 0 0}
.dc-cta a{display:flex;align-items:center;justify-content:center;min-height:48px;padding:10px 16px;border-radius:10px;font-weight:800;text-decoration:none;text-align:center;background:#ffb400;color:#1b1e23}
.dc-cta a.o{background:#fff;border:2px solid #ffb400}
@media (min-width:600px){.dc-cta{flex-direction:row}.dc-cta a{flex:1}}
.dc-date{font-size:13px;color:#6b7280;margin-top:18px}

/* S_02 서비스 상세 히어로 */
.dc-s2hero{background:#1b1e23;color:#fff;padding:26px 0 24px}
.dc-s2hero .bc{font-size:13px;color:#b8bcc4;margin:0 0 10px}
.dc-s2hero .bc a{color:#ffd37a;text-decoration:none}
.dc .dc-s2hero h1{color:#fff;font-size:clamp(26px,6vw,38px);line-height:1.3;margin:0 0 10px;font-weight:800}
.dc .dc-s2hero p.lead{color:#e3e5e9;font-size:16px;margin:0 0 4px}

/* 인라인 SVG 도식 (모바일 폭 맞춤) */
.dc-svg{margin:14px 0 0;overflow:hidden;border-radius:10px}
.dc-svg svg{display:block;width:100%;height:auto;max-width:100%}