/* service-detail 공통 보강 스타일 — 모든 서비스 상세페이지(standalone + 템플릿)에 마지막으로 로드 */
html{-webkit-text-size-adjust:100%}
body{overflow-x:hidden;overflow-wrap:break-word;word-break:keep-all}
img,svg,video,iframe{max-width:100%}
h1,h2,h3,p,li,td,th,dd,dt,summary,a{overflow-wrap:anywhere}
body .wrap{width:100%;max-width:920px;padding-left:20px;padding-right:20px}
@media(max-width:480px){body .wrap{padding-left:16px;padding-right:16px}}

/* 현장사진 4장: PC·모바일 모두 2×2, 동일 크기(1:1). 320px 이하 극소폭만 1열 */
body figure.gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-width:640px;width:100%;margin:28px auto;padding:0;list-style:none}
body figure.gallery>picture,body figure.gallery>img,body figure.gallery>a{display:block;margin:0;min-width:0;border-radius:8px;overflow:hidden}
body figure.gallery img{display:block;width:100%;max-width:none;height:auto;aspect-ratio:1/1;object-fit:cover;object-position:center 40%;border-radius:0;transform:none}
body figure.gallery figcaption{display:none}
@media(max-width:480px){body figure.gallery{gap:8px;margin:20px auto}}
@media(max-width:339px){body figure.gallery{grid-template-columns:1fr}}
.gallery-title{font-size:1.2rem;margin:28px 0 0;text-align:center;justify-content:center;color:var(--primary)}
body .gallery-title+figure.gallery{margin-top:14px}

/* 히어로 도입문은 짧게 */
.hero p,header.hero p{max-width:68ch}
@media(max-width:480px){.hero h1,header.hero h1{font-size:clamp(1.55rem,7.4vw,2rem);line-height:1.3}}

/* 표: 모바일에서 카드형으로 자동 전환(svc-common.js가 data-label 부여) */
.table-wrap{max-width:100%;overflow-x:auto}
@media(max-width:640px){
  .table-wrap{overflow:visible}
  table.rt,table.rt thead,table.rt tbody,table.rt tr,table.rt th,table.rt td,table.rt caption{display:block;width:100%;min-width:0;max-width:100%}
  table.rt thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  table.rt{border:0;margin:0}
  table.rt tr{margin:0 0 12px;border:1px solid var(--border,rgba(0,0,0,.14));border-radius:10px;overflow:hidden;background:var(--card,var(--secondary,#fff))}
  table.rt td{border:0;border-bottom:1px solid var(--border,rgba(0,0,0,.1));padding:9px 14px;font-size:.92rem;white-space:normal}
  table.rt td:last-child{border-bottom:0}
  table.rt td::before{content:attr(data-label);display:block;font-size:.76rem;font-weight:700;color:var(--primary);margin-bottom:2px}
  table.rt td:first-child{background:var(--secondary,rgba(0,0,0,.04));font-weight:700}
  table.rt caption{margin-bottom:8px}
}

/* ── 공통 콘텐츠 컴포넌트 ── */
.x-point,.x-warn{border-left:5px solid var(--primary);background:var(--secondary,#f3f4f6);border-radius:8px;padding:16px 20px;margin:18px 0;font-size:.97rem;color:var(--text,#222)}
.x-point::before,.x-warn::before{content:"핵심 POINT";display:block;font-size:.78rem;font-weight:900;letter-spacing:.04em;color:var(--primary);margin-bottom:4px}
.x-warn{border-left-color:var(--accent,#c4711f)}
.x-warn::before{content:"주의사항";color:var(--accent,#c4711f)}
.x-grid{display:grid;gap:12px;margin:14px 0}
.x-grid.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.x-grid.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.x-grid.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:820px){.x-grid.c4{grid-template-columns:repeat(2,minmax(0,1fr))}.x-grid.c3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.x-grid.c2,.x-grid.c3,.x-grid.c4{grid-template-columns:1fr}}
.x-card{background:var(--card,var(--secondary,#fff));border:1px solid var(--border,rgba(0,0,0,.12));border-radius:10px;padding:16px 18px;min-width:0}
.x-card b,.x-card h3{display:block;margin:0 0 4px;font-size:1rem;color:var(--primary)}
.x-card p,.x-card span{display:block;margin:0;font-size:.92rem;line-height:1.7;color:var(--text,#222);opacity:.9}
/* 단계형 타임라인: PC 가로 카드, 모바일 세로 */
ol.x-timeline{list-style:none;margin:16px 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;counter-reset:xt}
ol.x-timeline li{counter-increment:xt;position:relative;background:var(--card,var(--secondary,#fff));border:1px solid var(--border,rgba(0,0,0,.12));border-radius:10px;padding:44px 14px 14px;font-size:.9rem;line-height:1.65;min-width:0}
ol.x-timeline li::before{content:counter(xt,decimal-leading-zero);position:absolute;left:14px;top:10px;font-size:1.15rem;font-weight:900;color:var(--primary)}
ol.x-timeline li b{display:block;margin-bottom:3px;color:var(--text,#222)}
@media(max-width:640px){
  ol.x-timeline{grid-template-columns:1fr;gap:0;border-left:3px solid var(--primary);margin-left:6px}
  ol.x-timeline li{border:0;border-radius:0;background:transparent;padding:4px 0 18px 22px}
  ol.x-timeline li::before{left:-17px;top:2px;width:30px;height:30px;border-radius:50%;background:var(--primary);color:#fff;font-size:.78rem;display:flex;align-items:center;justify-content:center}
}
/* Before → Work → After / 문제 → 원인 → 확인 → 해결 */
.x-bwa,.x-prc{display:grid;gap:12px;margin:16px 0}
.x-bwa{grid-template-columns:repeat(3,minmax(0,1fr))}
.x-prc{grid-template-columns:repeat(4,minmax(0,1fr))}
.x-bwa>div,.x-prc>div{position:relative;background:var(--card,var(--secondary,#fff));border:1px solid var(--border,rgba(0,0,0,.12));border-radius:10px;padding:16px 16px 14px;font-size:.92rem;line-height:1.7;min-width:0}
.x-bwa>div b,.x-prc>div b{display:block;font-size:.78rem;letter-spacing:.06em;font-weight:900;color:var(--primary);margin-bottom:4px}
.x-bwa>div:nth-child(2) b,.x-prc>div:nth-child(2) b{color:var(--accent,var(--primary))}
@media(max-width:820px){.x-prc{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.x-bwa,.x-prc{grid-template-columns:1fr}.x-bwa>div:not(:last-child)::after,.x-prc>div:not(:last-child)::after{content:"↓";position:absolute;left:50%;bottom:-17px;transform:translateX(-50%);z-index:1;color:var(--primary);font-weight:900;line-height:1}}
/* 체크리스트(범용) */
ul.x-chk{list-style:none;margin:14px 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
ul.x-chk li{padding:11px 14px 11px 40px;position:relative;background:var(--card,var(--secondary,#fff));border:1px solid var(--border,rgba(0,0,0,.12));border-radius:8px;font-size:.92rem;line-height:1.6}
ul.x-chk li::before{content:"✓";position:absolute;left:14px;top:10px;font-weight:900;color:var(--accent,var(--primary))}
@media(max-width:640px){ul.x-chk{grid-template-columns:1fr}}
/* 관련 링크 카드(작게) */
.x-rel{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin:14px 0}
.x-rel a{display:block;padding:12px 14px;background:var(--card,var(--secondary,#fff));border:1px solid var(--border,rgba(0,0,0,.14));border-radius:10px;text-decoration:none;color:var(--text,#222);font-size:.86rem;line-height:1.55;min-width:0}
.x-rel a b{display:block;color:var(--primary);font-size:.95rem;margin-bottom:2px}

/* 기존 요소 모바일 안전장치 */
.cases,.cards,.related{grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}
.flow-ans{min-width:0;flex:1 1 200px}
.flow-q,.flow-result{max-width:100%}
.upline a,.linkcard{max-width:100%}
.cta-fixed a{min-width:0;padding-left:6px;padding-right:6px}
.qa-q,.qa-item summary{min-width:0}