/* 상세페이지 공통: 현장사진 블록 + 모바일 안전장치. 테마 중립(어두운/밝은 페이지 모두 사용). */
*,*::before,*::after{box-sizing:border-box}
html,body{max-width:100%}
body{overflow-x:clip}
img,video,iframe,svg{max-width:100%}
img{height:auto}
p,li,h1,h2,h3,h4,td,th,summary,figcaption,a,span,dd,dt{overflow-wrap:anywhere;word-break:keep-all}

.dp{padding:48px 0;background:transparent}
.dp .dp-wrap{width:100%;max-width:1120px;margin:0 auto;padding:0 24px;min-width:0}
.dp h2{margin:0 0 16px}
.dp h3{margin:0 0 8px}
.dp p{margin:0 0 12px}
.dp-lead{max-width:720px;margin-bottom:24px!important;opacity:.9}

.dp-grid{display:grid;gap:14px}
.dp-grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
.dp-fig{margin:0;min-width:0}
.dp-fig img{display:block;width:100%;aspect-ratio:1/1;height:auto;object-fit:cover;border-radius:10px;background:rgba(127,127,127,.18)}
.dp-fig figcaption{margin-top:8px;font-size:13.5px;line-height:1.5;opacity:.85}

.dp-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.dp-card,.dp-note,.dp-point,.dp-steps li{background:rgba(127,127,127,.12);border:1px solid rgba(127,127,127,.28);border-radius:10px}
.dp-card{padding:18px;min-width:0}
.dp-card h3{font-size:16px}
.dp-card p{font-size:14.5px;margin:0}

.dp-check{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 24px}
.dp-check li{position:relative;padding-left:26px;font-size:15px;line-height:1.55}
.dp-check li::before{content:"✓";position:absolute;left:0;top:0;font-weight:700}

.dp-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.dp-steps li{display:block;padding:16px;min-width:0}
.dp-num{display:inline-block;font-weight:800;font-size:14px;margin-bottom:8px;opacity:.8}
.dp-steps h3{font-size:15.5px}
.dp-steps p{font-size:14px;margin:0}

.dp-point{padding:18px 20px}
.dp-point b{display:block;font-size:12.5px;letter-spacing:.1em;margin-bottom:6px;opacity:.8}
.dp-point p{margin:0;font-size:15.5px}

.dp-pairs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.dp-pair{display:flex;flex-direction:column;gap:12px;min-width:0}
.dp-note{padding:16px 18px}
.dp-note h3{font-size:15.5px}
.dp-note p{font-size:14.5px;margin:0}

.dp-table{width:100%;border-collapse:collapse;display:table!important;overflow:visible!important}
.dp-table th,.dp-table td{padding:12px 14px;text-align:left;vertical-align:top;border-bottom:1px solid rgba(127,127,127,.3);font-size:14.5px}
.dp-table th{background:rgba(127,127,127,.16)}

@media(max-width:899px){
  .dp-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dp-steps{grid-template-columns:1fr}
  .dp-steps li{display:flex;gap:14px;align-items:flex-start}
  .dp-steps .dp-num{margin:2px 0 0;min-width:28px}
}
@media(max-width:599px){
  .dp{padding:36px 0}
  .dp .dp-wrap{padding:0 16px}
  .dp-grid{gap:10px}
  .dp-fig figcaption{font-size:12.5px}
  .dp-cards,.dp-check,.dp-pairs{grid-template-columns:1fr}
}
/* 320~359px: 사진이 너무 작아지지 않도록 1열 */
@media(max-width:359px){.dp-grid--4{grid-template-columns:1fr}}

/* 모바일 표 → 카드형. 페이지를 좌우로 밀지 않고 읽도록 항목명을 셀 앞에 표시 */
@media(max-width:699px){
  table.dp-stack,table.dp-stack tbody,table.dp-stack tr,table.dp-stack td{display:block!important;width:100%!important;max-width:100%!important;min-width:0!important}
  table.dp-stack thead{display:none!important}
  table.dp-stack{overflow:visible!important;background:transparent!important}
  table.dp-stack tr{margin:0 0 12px;border:1px solid rgba(127,127,127,.3);border-radius:10px;overflow:hidden;background:rgba(127,127,127,.1)}
  table.dp-stack td{border:0!important;border-bottom:1px solid rgba(127,127,127,.22)!important;padding:10px 14px!important}
  table.dp-stack td:last-child{border-bottom:0!important}
  table.dp-stack td::before{content:attr(data-label);display:block;font-size:12px;font-weight:700;opacity:.7;margin-bottom:2px}
  table.dp-stack caption{display:block;text-align:left}
}