/* 상세페이지 공통 컴포넌트 (.dv 범위) — 서비스·지역 상세 공용. 모바일 우선, 가로 스크롤 금지 */
.dv,.dv *{box-sizing:border-box}
.dv{--dv-ink:#1f2a2e;--dv-ink2:#4a5a60;--dv-line:#d9e2e4;--dv-bg:#f3f7f7;--dv-acc:#1f8f7a;--dv-acc2:#e8f5f2;--dv-warn:#b4551b;--dv-warnbg:#fdf3ea;
  max-width:100%;overflow-wrap:anywhere;word-break:keep-all;color:var(--dv-ink)}
.dv .dv-wrap{width:100%;max-width:960px;margin:0 auto;padding:0 16px}
.dv h2{font-size:clamp(1.15rem,3.6vw,1.45rem);line-height:1.4;margin:40px 0 14px;padding-bottom:10px;border-bottom:2px solid var(--dv-acc);color:var(--dv-ink)}
.dv h3{font-size:1.02rem;line-height:1.45;margin:0 0 6px;color:var(--dv-ink)}
.dv p{font-size:.98rem;line-height:1.8;margin:0 0 12px;color:var(--dv-ink2)}
.dv img{max-width:100%;height:auto;display:block}
.dv .dv-intro{font-size:1.02rem;line-height:1.85;margin:22px 0 20px;color:var(--dv-ink)}
/* 현장사진 4장 — 2×2 고정, 아주 좁은 화면(≤339px)만 1열 */
.dv .dv-photos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:8px 0 28px}
.dv .dv-photos h2{grid-column:1/-1}
.dv .dv-photos figure{margin:0;border-radius:12px;overflow:hidden;background:var(--dv-bg)}
.dv .dv-photos img{width:100%;aspect-ratio:4/3;object-fit:cover}
.dv .dv-photos figcaption{font-size:.78rem;line-height:1.45;padding:7px 9px;color:var(--dv-ink2)}
@media(max-width:339px){.dv .dv-photos{grid-template-columns:minmax(0,1fr)}}
/* 카드 */
.dv .dv-cards{display:grid;gap:12px;margin:0 0 20px;grid-template-columns:repeat(2,minmax(0,1fr))}
.dv .dv-cards.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.dv .dv-cards.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
.dv .dv-card{background:var(--dv-bg);border:1px solid var(--dv-line);border-radius:14px;padding:16px}
.dv .dv-card p{margin:0;font-size:.92rem;line-height:1.7}
.dv .dv-card .tag{display:inline-block;font-size:.72rem;font-weight:700;color:var(--dv-acc);margin-bottom:4px;letter-spacing:.04em}
@media(max-width:760px){.dv .dv-cards.c3,.dv .dv-cards.c4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.dv .dv-cards,.dv .dv-cards.c3,.dv .dv-cards.c4{grid-template-columns:minmax(0,1fr)}}
/* 단계형 — PC 가로 카드, 모바일 세로 타임라인 */
.dv ol.dv-steps{list-style:none;margin:0 0 20px;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;counter-reset:s}
.dv .dv-steps li{counter-increment:s;background:#fff;border:1px solid var(--dv-line);border-radius:14px;padding:14px;position:relative}
.dv .dv-steps li::before{content:counter(s,decimal-leading-zero);display:block;font-weight:800;font-size:1.1rem;color:var(--dv-acc);margin-bottom:4px}
.dv .dv-steps b{display:block;margin-bottom:4px;font-size:.98rem}
.dv .dv-steps span{display:block;font-size:.9rem;line-height:1.65;color:var(--dv-ink2)}
@media(max-width:760px){
 .dv ol.dv-steps{grid-template-columns:minmax(0,1fr);gap:0;border-left:3px solid var(--dv-acc2);margin-left:10px;padding-left:0}
 .dv .dv-steps li{border:0;border-radius:0;padding:4px 0 18px 22px}
 .dv .dv-steps li::before{position:absolute;left:-15px;top:0;width:27px;height:27px;line-height:27px;text-align:center;background:var(--dv-acc);color:#fff;border-radius:50%;font-size:.78rem;margin:0}
 .dv .dv-steps li b{padding-top:2px}}
/* 체크리스트 */
.dv ul.dv-check{list-style:none;margin:0 0 20px;padding:0}
.dv .dv-check li{position:relative;padding:10px 0 10px 28px;border-bottom:1px solid var(--dv-line);line-height:1.7;font-size:.95rem;color:var(--dv-ink2)}
.dv .dv-check li::before{content:"✓";position:absolute;left:2px;top:9px;font-weight:800;color:var(--dv-acc)}
/* 표 — 모바일에서 카드형(td data-label) */
.dv .dv-table{width:100%;border-collapse:collapse;margin:0 0 20px;font-size:.93rem}
.dv .dv-table th,.dv .dv-table td{border:1px solid var(--dv-line);padding:10px 12px;text-align:left;vertical-align:top;line-height:1.6}
.dv .dv-table thead th{background:var(--dv-acc2);color:var(--dv-ink)}
@media(max-width:640px){
 .dv .dv-table,.dv .dv-table tbody,.dv .dv-table tr,.dv .dv-table td{display:block;width:100%}
 .dv .dv-table thead{position:absolute;left:-9999px}
 .dv .dv-table tr{border:1px solid var(--dv-line);border-radius:12px;margin-bottom:10px;overflow:hidden;background:#fff}
 .dv .dv-table td{border:0;border-bottom:1px solid var(--dv-line);padding:9px 12px}
 .dv .dv-table td:last-child{border-bottom:0}
 .dv .dv-table td::before{content:attr(data-label);display:block;font-size:.74rem;font-weight:700;color:var(--dv-acc);margin-bottom:2px}}
/* 흐름(문제→원인→해결, Before→Work→After) */
.dv .dv-flow{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin:0 0 20px}
.dv .dv-flow>div{border:1px solid var(--dv-line);border-radius:14px;padding:14px;background:#fff;position:relative}
.dv .dv-flow>div>b{display:block;font-size:.76rem;letter-spacing:.06em;color:var(--dv-acc);margin-bottom:4px}
.dv .dv-flow>div:last-child{background:var(--dv-acc2)}
.dv .dv-flow p{margin:0;font-size:.92rem;line-height:1.7}
@media(max-width:640px){.dv .dv-flow{grid-template-columns:minmax(0,1fr)}.dv .dv-flow>div:not(:last-child)::after{content:"↓";position:absolute;left:50%;bottom:-17px;transform:translateX(-50%);background:#fff;color:var(--dv-acc);font-weight:800;line-height:1;z-index:1}}
/* POINT / 주의 */
.dv .dv-point,.dv .dv-warn{border-radius:14px;padding:16px 18px;margin:0 0 20px;background:var(--dv-acc2);border-left:5px solid var(--dv-acc)}
.dv .dv-warn{background:var(--dv-warnbg);border-left-color:var(--dv-warn)}
.dv .dv-point b,.dv .dv-warn b{display:block;margin-bottom:4px;font-size:.84rem;letter-spacing:.06em;color:var(--dv-acc)}
.dv .dv-warn b{color:var(--dv-warn)}
.dv .dv-point p,.dv .dv-warn p{margin:0;color:var(--dv-ink)}
/* FAQ */
.dv details{border:1px solid var(--dv-line);border-radius:12px;padding:13px 16px;margin-bottom:10px;background:#fff}
.dv details summary{cursor:pointer;font-weight:700;line-height:1.55;color:var(--dv-ink)}
.dv details p{margin:10px 0 0}
/* 관련 링크 */
.dv .dv-related{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;margin:0 0 24px}
.dv .dv-related a{display:block;border:1px solid var(--dv-line);border-radius:12px;padding:13px 15px;background:#fff}
.dv .dv-related b{display:block;font-size:.95rem;color:var(--dv-ink);margin-bottom:2px}
.dv .dv-related span{display:block;font-size:.84rem;line-height:1.55;color:var(--dv-ink2)}
@media(max-width:480px){.dv .dv-related{grid-template-columns:minmax(0,1fr)}}
.dv .dv-foot{font-size:.8rem;color:var(--dv-ink2);margin:8px 0 0}

/* CTA */
.dv .dv-cta{margin:36px 0 8px;padding:20px 18px;border-radius:14px;background:var(--dv-acc2);text-align:center}
.dv .dv-cta h2{border:0;margin:0 0 6px;padding:0;font-size:clamp(1.05rem,3.4vw,1.3rem)}
.dv .dv-cta-btns{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:12px}
.dv .dv-btn{flex:1 1 140px;max-width:100%;min-height:46px;display:flex;align-items:center;justify-content:center;padding:10px 16px;border-radius:10px;border:1px solid var(--dv-acc);color:var(--dv-acc);background:#fff;font-weight:700;text-decoration:none}
.dv .dv-btn-main{background:var(--dv-acc);color:#fff}
@media(max-width:480px){.dv .dv-cta-btns{flex-direction:column}.dv .dv-btn{flex:0 0 auto;width:100%}}
/* 가로 넘침 방지 */
.dv .dv-wrap,.dv section,.dv article{min-width:0}
.dv a,.dv summary,.dv td,.dv th{overflow-wrap:anywhere}
/* 히어로 모바일 가드 (페이지별 인라인 히어로 CSS 보정) */
@media(max-width:640px){
 .hero .hero-body{max-width:100%;padding-left:16px;padding-right:16px}
 .hero h1,.hero .lead{max-width:100%;overflow-wrap:anywhere;word-break:keep-all}
  .hero .hero-cta{padding:0 16px;box-sizing:border-box;width:auto!important;max-width:100%;flex-wrap:wrap;justify-content:center}
 .hero .hero-cta .btn{flex:1 1 140px;max-width:100%;text-align:center}
}