/* 상세페이지 공통 블록 (서비스·지역 상세 공용, 밝은/어두운 테마 겸용)
   사용법: includes/DETAIL-PAGE-SPEC.md 참고. 색은 currentColor/반투명 회색 기반, 강조색만 --db-accent 로 지정. */
:root{--db-line:rgba(128,128,128,.32);--db-soft:rgba(128,128,128,.10)}
.db-wrap,.db-wrap *{box-sizing:border-box}
.db-wrap{width:100%;max-width:1000px;margin:0 auto;padding:0 20px;overflow-wrap:anywhere;word-break:keep-all;color:inherit;--db-line:rgba(128,128,128,.32);--db-soft:rgba(128,128,128,.10)}
.db-wrap img{max-width:100%;height:auto}
.db-sec{margin:44px 0}
.db-sec>h2{font-size:1.4rem;line-height:1.35;margin:0 0 6px;padding-bottom:10px;border-bottom:2px solid var(--db-accent,#2E86FF)}
.db-sec>h2+.db-lead{margin-top:14px}
.db-sec h3{font-size:1.05rem;line-height:1.4;margin:0 0 6px}
.db-lead{margin:0 0 16px;font-size:.98rem;line-height:1.8;max-width:760px}
.db-sec p{margin:0 0 12px;line-height:1.8}

/* 현장사진 4장: PC 2×2, 모바일 2×2, 아주 좁은 폭만 1열 */
.db-photos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-width:760px;margin:0 auto}
.db-photos figure{margin:0;min-width:0}
.db-photos img{display:block;width:100%;aspect-ratio:4/3;height:auto;object-fit:cover;border-radius:10px;border:1px solid var(--db-line)}
.db-photos figcaption{margin-top:6px;font-size:.8rem;line-height:1.4;opacity:.75;text-align:center}
@media(max-width:299px){.db-photos{grid-template-columns:1fr}}

/* 카드 (2/3/4열) */
.db-cards{display:grid;gap:12px;margin:14px 0;grid-template-columns:repeat(2,minmax(0,1fr))}
.db-cards.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.db-cards.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
.db-card{background:var(--db-soft);border:1px solid var(--db-line);border-radius:10px;padding:16px;min-width:0}
.db-card h3,.db-card h4{margin:0 0 6px;font-size:1rem;line-height:1.4}
.db-card p{margin:0;font-size:.92rem;line-height:1.65;opacity:.9}
.db-card .db-tag{display:inline-block;font-size:.75rem;font-weight:700;letter-spacing:.04em;color:var(--db-accent,#2E86FF);margin-bottom:4px}
@media(max-width:860px){.db-cards.c4{grid-template-columns:repeat(2,minmax(0,1fr))}.db-cards.c3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:420px){.db-cards,.db-cards.c3,.db-cards.c4{grid-template-columns:1fr}}

/* 단계: PC 가로 카드, 모바일 세로 타임라인 */
.db-steps{list-style:none;margin:16px 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;counter-reset:dbstep}
.db-steps li{counter-increment:dbstep;background:var(--db-soft);border:1px solid var(--db-line);border-radius:10px;padding:14px;min-width:0}
.db-steps li::before{content:counter(dbstep,decimal-leading-zero);display:block;font-weight:800;font-size:1.1rem;color:var(--db-accent,#2E86FF);margin-bottom:4px}
.db-steps b{display:block;margin-bottom:4px;line-height:1.4}
.db-steps span{display:block;font-size:.9rem;line-height:1.6;opacity:.9}
@media(max-width:640px){
  .db-steps{display:block;position:relative;padding-left:34px}
  .db-steps::before{content:"";position:absolute;left:13px;top:8px;bottom:8px;width:2px;background:var(--db-line)}
  .db-steps li{position:relative;margin-bottom:10px}
  .db-steps li::before{position:absolute;left:-34px;top:12px;width:28px;height:28px;border-radius:50%;background:var(--db-accent,#2E86FF);color:#fff;display:flex;align-items:center;justify-content:center;font-size:.78rem;margin:0}
}

/* 체크리스트 */
.db-check{list-style:none;margin:14px 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 16px}
.db-check li{position:relative;padding:8px 0 8px 28px;border-bottom:1px dashed var(--db-line);line-height:1.6;min-width:0}
.db-check li::before{content:"✓";position:absolute;left:4px;top:8px;font-weight:800;color:var(--db-accent,#2E86FF)}
@media(max-width:640px){.db-check{grid-template-columns:1fr}}

/* 표: 모바일에서 카드형으로 변환 (td 에 data-label 필수) */
.db-table{width:100%;border-collapse:collapse;margin:14px 0;font-size:.92rem;table-layout:auto}
.db-table th,.db-table td{border:1px solid var(--db-line);padding:10px 12px;text-align:left;vertical-align:top;line-height:1.6;overflow-wrap:anywhere}
.db-table thead th{background:var(--db-soft);font-weight:700}
@media(max-width:640px){
  .db-table,.db-table tbody,.db-table tr,.db-table td{display:block;width:100%}
  .db-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .db-table caption{display:block;width:100%;text-align:left}
  .db-table tbody tr{margin-bottom:12px!important;background:var(--db-soft)!important;border:1px solid var(--db-line)!important;border-radius:10px;overflow:hidden}
  .db-table td{background:transparent!important}
  .db-table tr{margin-bottom:12px;border:1px solid var(--db-line);border-radius:10px;overflow:hidden;background:var(--db-soft)}
  .db-table td{border:0;border-bottom:1px solid var(--db-line);padding:9px 12px}
  .db-table tr td:last-child{border-bottom:0}
  .db-table td::before{content:attr(data-label);display:block;font-size:.76rem;font-weight:700;color:var(--db-accent,#2E86FF);margin-bottom:2px}
}

/* 문제→원인→해결, BEFORE→WORK→AFTER (3단 흐름) */
.db-flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:14px 0}
.db-flow>div{background:var(--db-soft);border:1px solid var(--db-line);border-radius:10px;padding:14px;position:relative;min-width:0}
.db-flow>div+div::before{content:"→";position:absolute;left:-12px;top:50%;transform:translateY(-50%);width:12px;text-align:center;font-weight:800;color:var(--db-accent,#2E86FF)}
.db-flow b{display:block;font-size:.78rem;letter-spacing:.06em;color:var(--db-accent,#2E86FF);margin-bottom:4px}
.db-flow p{margin:0;font-size:.92rem;line-height:1.65}
@media(max-width:640px){.db-flow{grid-template-columns:1fr}.db-flow>div+div::before{content:"↓";left:50%;top:-14px;transform:translateX(-50%);width:auto;height:14px;line-height:14px}.db-flow>div{margin-top:8px}.db-flow>div:first-child{margin-top:0}}

/* 핵심요약 / POINT / 주의 박스 */
.db-point,.db-warn{margin:18px 0;padding:14px 16px;border-radius:10px;border:1px solid var(--db-line);border-left:5px solid var(--db-accent,#2E86FF);background:var(--db-soft);line-height:1.75}
.db-warn{border-left-color:#e5483d}
.db-point b,.db-warn b{display:block;margin-bottom:4px;font-size:.8rem;letter-spacing:.06em;color:var(--db-accent,#2E86FF)}
.db-warn b{color:#e5483d}
.db-point p,.db-warn p{margin:0}

/* 관련 서비스·지역: 작은 링크 칩 */
.db-links{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin:12px 0;padding:0;list-style:none}
.db-links a{display:block;padding:11px 12px;border:1px solid var(--db-line);border-radius:8px;background:var(--db-soft);color:inherit;text-decoration:none;font-weight:600;font-size:.88rem;line-height:1.4}
.db-links a:hover{border-color:var(--db-accent,#2E86FF)}
@media(max-width:420px){.db-links{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* CTA 버튼 줄 */
.db-cta{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:16px 0}
.db-cta a{flex:1 1 160px;max-width:280px;min-height:46px;display:flex;align-items:center;justify-content:center;text-align:center;padding:12px 16px;border-radius:8px;font-weight:700;text-decoration:none;background:var(--db-accent,#2E86FF);color:#fff}
.db-cta a.alt{background:transparent;border:1px solid currentColor;color:inherit}

/* 가로 스크롤 방지 (상세페이지 공통 안전장치) */
html,body{max-width:100%;overflow-x:hidden}

/* 정적 서비스 페이지 헤더 네비 (PC 가로 / 모바일 햄버거) */
.db-nav-t{display:none}
.db-nav-btn{display:none;cursor:pointer;font-size:24px;line-height:1;padding:4px 8px;color:inherit}
.db-nav{display:flex;gap:18px;margin-left:auto;padding-left:16px}
.db-nav a{color:inherit;text-decoration:none;font-size:.9rem;font-weight:600;white-space:nowrap}
.db-nav a:hover{text-decoration:underline}
@media(max-width:720px){
  .db-nav-btn{display:block;margin-left:auto}
  .db-nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;padding:4px 20px 10px;background:inherit;border-top:1px solid rgba(255,255,255,.2);box-shadow:0 8px 14px rgba(0,0,0,.25)}
  .db-nav a{display:block;padding:14px 0;border-bottom:1px solid rgba(128,128,128,.3);white-space:normal}
  .db-nav-t:checked ~ .db-nav{display:flex}
}