/* 서비스상세·지역상세 공통 (모바일 우선, 가로 스크롤 금지) */
.dt-page{overflow-x:clip;width:100%;max-width:100%}
.dt-page *{box-sizing:border-box;min-width:0;max-width:100%}
.dt-page{word-break:keep-all;overflow-wrap:break-word;line-height:1.75}
.dt-page img{max-width:100%}

.dt-hero{padding:112px 0 36px;background:linear-gradient(135deg,var(--bg-alt),#2a1d14);border-bottom:1px solid var(--border)}
.dt-hero .breadcrumb{display:flex;flex-wrap:wrap;gap:6px;font-size:.82rem;color:var(--text-dim);margin-bottom:14px}
.dt-hero .breadcrumb a:hover{color:var(--primary)}
.dt-badge{display:inline-block;padding:4px 14px;border:1px solid var(--primary);border-radius:999px;color:var(--primary);font-size:.8rem;font-weight:700;margin-bottom:12px}
.dt-hero h1{font-size:clamp(1.55rem,5.2vw,2.5rem);font-weight:900;line-height:1.3;margin-bottom:12px;letter-spacing:-.02em}
.dt-hero-sub{color:#dcdfe3;font-size:clamp(.95rem,2.6vw,1.1rem);max-width:720px}

.dt-intro{padding:28px 0 8px}
.dt-intro p{font-size:1.02rem;color:var(--text);max-width:820px}

.dt-h2{font-size:clamp(1.25rem,3.6vw,1.65rem);font-weight:900;margin:0 0 14px;line-height:1.35}
.dt-photos{padding:24px 0 12px}
.dt-photo-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.dt-photo-grid figure{margin:0;background:var(--surface);border:1px solid var(--border);border-radius:12px;overflow:hidden}
.dt-photo-grid img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover}
.dt-photo-grid figcaption{padding:8px 10px;font-size:.78rem;color:var(--text-dim);line-height:1.45}
@media(min-width:900px){.dt-photo-grid{gap:16px;max-width:880px}}
@media(max-width:339px){.dt-photo-grid{grid-template-columns:1fr}}

.dt-body{padding:16px 0 56px}
.dt-sec{margin-top:40px}
.dt-lead,.dt-p{color:var(--text-dim);margin:0 0 12px;max-width:820px}
.dt-p{color:var(--text)}

/* 박스 */
.dt-box{margin-top:32px;padding:18px 20px;border-radius:12px;border:1px solid var(--border);border-left:5px solid var(--primary);background:var(--surface)}
.dt-box-label{display:inline-block;font-size:.75rem;font-weight:900;letter-spacing:.06em;color:var(--primary);margin-bottom:6px}
.dt-box h3{font-size:1.05rem;margin:0 0 6px}
.dt-box p{color:var(--text);margin:0}
.dt-box ul{margin:0;padding-left:1.2em}.dt-box li{margin:4px 0}
.dt-box-point{border-left-color:#38bdf8}.dt-box-point .dt-box-label{color:#38bdf8}
.dt-box-warn{border-left-color:#facc15;background:#2a2615}.dt-box-warn .dt-box-label{color:#facc15}

/* 카드 */
.dt-cards{display:grid;gap:14px;grid-template-columns:1fr}
.dt-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:16px 18px}
.dt-card h3{font-size:1.02rem;margin:0 0 6px;color:var(--primary-light)}
.dt-card p{margin:0;color:var(--text-dim);font-size:.94rem}
.dt-ico{display:block;font-size:1.5rem;margin-bottom:6px}
@media(min-width:561px){.dt-cols-2,.dt-cols-3,.dt-cols-4{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.dt-cols-3{grid-template-columns:repeat(3,1fr)}.dt-cols-4{grid-template-columns:repeat(4,1fr)}}

/* 단계: PC 가로 카드 / 모바일 세로 타임라인 */
.dt-steps{list-style:none;margin:0;padding:0;display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.dt-step{display:flex;gap:12px;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:14px 16px}
.dt-num{flex:0 0 auto;width:36px;height:36px;border-radius:50%;background:var(--primary);color:#fff;font-weight:900;font-size:.85rem;display:flex;align-items:center;justify-content:center}
.dt-step h3{font-size:1rem;margin:0 0 4px}.dt-step p{margin:0;color:var(--text-dim);font-size:.92rem}
@media(max-width:700px){
  .dt-steps{display:block;position:relative;padding-left:0}
  .dt-step{position:relative;margin-bottom:12px}
  .dt-step:not(:last-child)::after{content:"";position:absolute;left:34px;bottom:-12px;height:12px;width:2px;background:var(--primary);opacity:.5}
}

/* 체크리스트 */
.dt-check{list-style:none;margin:0;padding:0;display:grid;gap:8px;grid-template-columns:1fr}
.dt-check li{position:relative;padding:10px 12px 10px 38px;background:var(--surface);border:1px solid var(--border);border-radius:10px;font-size:.95rem}
.dt-check li::before{content:"✓";position:absolute;left:12px;top:9px;width:20px;height:20px;border-radius:50%;background:var(--primary);color:#fff;font-size:.8rem;font-weight:900;display:flex;align-items:center;justify-content:center}
@media(min-width:700px){.dt-check{grid-template-columns:repeat(2,1fr)}}

/* 표: PC 표 / 모바일 카드 */
.dt-table-wrap{width:100%;max-width:100%}
.dt-table{width:100%;border-collapse:collapse;background:var(--surface);border:1px solid var(--border);border-radius:12px;overflow:hidden;table-layout:auto}
.dt-table th,.dt-table td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--border);vertical-align:top;font-size:.93rem}
.dt-table thead th{background:#2a2f36;color:var(--primary-light);font-weight:700;white-space:normal}
.dt-table tbody tr:last-child td{border-bottom:0}
.dt-table tbody td:first-child{font-weight:700}
@media(max-width:700px){
  .dt-table,.dt-table tbody,.dt-table tr,.dt-table td{display:block;width:100%}
  .dt-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .dt-table{background:none;border:0}
  .dt-table tr{margin-bottom:12px;border:1px solid var(--border);border-radius:12px;background:var(--surface);overflow:hidden}
  .dt-table td{border-bottom:1px solid var(--border);padding:9px 14px}
  .dt-table td::before{content:attr(data-label);display:block;font-size:.74rem;font-weight:700;color:var(--primary-light);margin-bottom:2px}
  .dt-table tbody td:first-child{background:#2a2f36;color:var(--text)}
}

/* 문제→원인→확인→방향 */
.dt-pcs{display:grid;gap:14px}
.dt-pcs-row{display:grid;gap:8px;grid-template-columns:1fr}
.dt-pcs-cell{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:12px 14px;position:relative}
.dt-pcs-cell b{display:block;font-size:.74rem;letter-spacing:.04em;color:var(--primary-light);margin-bottom:3px}
.dt-pcs-cell span{font-size:.93rem;color:var(--text)}
.dt-pcs-problem{border-left:4px solid #ef4444}.dt-pcs-solve{border-left:4px solid #22c55e}
@media(min-width:900px){
  .dt-pcs-row{grid-template-columns:repeat(4,1fr);gap:22px}
  .dt-pcs-cell:not(:last-child)::after{content:"→";position:absolute;right:-18px;top:50%;transform:translateY(-50%);color:var(--primary);font-weight:900}
}

/* BEFORE → WORK → AFTER */
.dt-baw{display:grid;gap:10px;grid-template-columns:1fr}
.dt-baw-cell{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:14px 16px;position:relative}
.dt-baw-cell b{display:inline-block;font-size:.78rem;letter-spacing:.08em;padding:2px 10px;border-radius:999px;margin-bottom:6px;background:#3a2a22;color:#fdba74}
.dt-baw-work b{background:#1e3a4a;color:#7dd3fc}.dt-baw-after b{background:#14352a;color:#86efac}
.dt-baw-cell p{margin:0;font-size:.94rem}
@media(min-width:900px){.dt-baw{grid-template-columns:repeat(3,1fr);gap:26px}.dt-baw-cell:not(:last-child)::after{content:"→";position:absolute;right:-20px;top:50%;transform:translateY(-50%);color:var(--primary);font-weight:900}}
@media(max-width:899px){.dt-baw-cell:not(:last-child)::after{content:"↓";position:absolute;left:50%;bottom:-16px;transform:translateX(-50%);color:var(--primary);font-weight:900;line-height:1}}

/* 관련 */
.dt-rel-grid{display:grid;gap:10px;grid-template-columns:1fr}
.dt-rel{display:block;padding:12px 14px;background:var(--surface);border:1px solid var(--border);border-radius:10px;transition:border-color .2s}
.dt-rel:hover{border-color:var(--primary)}
.dt-rel b{display:block;font-size:.98rem;color:var(--primary-light)}
.dt-rel span{display:block;font-size:.84rem;color:var(--text-dim);margin-top:2px}
@media(min-width:561px){.dt-rel-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.dt-rel-grid{grid-template-columns:repeat(3,1fr)}}

/* FAQ */
.dt-faq details{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:0;margin-bottom:10px}
.dt-faq summary{cursor:pointer;font-weight:700;padding:14px 16px;list-style:none;position:relative;padding-right:40px}
.dt-faq summary::-webkit-details-marker{display:none}
.dt-faq summary::after{content:"+";position:absolute;right:16px;top:12px;color:var(--primary);font-size:1.2rem}
.dt-faq details[open] summary::after{content:"−"}
.dt-faq p{padding:0 16px 14px;margin:0;color:var(--text-dim);font-size:.95rem}
.dt-updated{margin-top:28px;font-size:.8rem;color:var(--text-dim)}