/* 상세페이지 공통: 이미지 우선 구조(.vis-gallery) · 모바일 최적화. 새 상세페이지도 이 클래스를 그대로 사용한다.
   변형: vis-a(대표1+보조2) vis-b(2장) vis-f3(3장) vis-e(대표1+과정3) vis-f4(4장) vis-s(1장) vis-ba(BEFORE/AFTER 한 세트, 실제 전후사진이 있을 때만) */
.vis-gallery{display:grid;gap:10px;margin:0 0 34px;grid-template-columns:1fr}
.vis-gallery figure{margin:0;border-radius:var(--radius,12px);overflow:hidden;background:#e4e7ea;position:relative;aspect-ratio:4/3}
.vis-gallery img{width:100%;height:100%;object-fit:cover;display:block}
.vis-gallery figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 12px 9px;font-size:12.5px;line-height:1.45;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.68))}
.vis-ba figure:first-child figcaption::before{content:"BEFORE · "}.vis-ba figure:nth-child(2) figcaption::before{content:"AFTER · "}
.vis-ba{grid-template-columns:1fr 1fr;gap:6px}
.vis-ba figcaption{font-size:11.5px;padding:20px 8px 7px}
@media(max-width:340px){.vis-ba{grid-template-columns:1fr}}
@media(min-width:768px){
 .vis-a,.vis-b{grid-template-columns:repeat(2,1fr)}
 .vis-a figure:first-child{grid-column:1/-1;aspect-ratio:21/9}
 .vis-a figure:not(:first-child),.vis-b figure{aspect-ratio:16/10}
 .vis-f3{grid-template-columns:repeat(3,1fr)}
 .vis-e{grid-template-columns:repeat(3,1fr)}
 .vis-e figure:first-child{grid-column:1/-1;aspect-ratio:21/9}
 .vis-f4{grid-template-columns:repeat(2,1fr)}
 .vis-s figure{aspect-ratio:21/9}
 .vis-ba figure{aspect-ratio:4/3}
 .detail-body .detail-img{aspect-ratio:16/9;max-height:520px}
 .vis-pair{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:24px 0}
 .vis-pair .detail-img{margin:0;aspect-ratio:4/3}
}
@media(min-width:1024px){.vis-f4{grid-template-columns:repeat(4,1fr)}.vis-f4 figure{aspect-ratio:1/1}}
@media(max-width:767px){
 .vis-pair .detail-img{aspect-ratio:4/3}
 .detail-body .detail-img{aspect-ratio:4/3}
 /* 모바일 히어로: 여백 축소 + 제목 clamp, 첫 사진이 빨리 보이도록 */
 main:has(.vis-gallery)>section:first-of-type{padding-top:calc(var(--header-h,64px) + 18px)!important;padding-bottom:22px!important;min-height:0!important}
 main:has(.vis-gallery)>section:first-of-type h1,main:has(.vis-gallery)>article>section:first-of-type h1,main:has(.vis-gallery)>article>header h1{font-size:clamp(24px,7.2vw,32px)!important;line-height:1.25;overflow-wrap:anywhere;word-break:keep-all}
 .detail-body{padding-top:22px!important}
 .detail-body p,.detail-body li{line-height:1.8}
 .detail-body .container{padding-left:20px;padding-right:20px}
 .vis-gallery{margin-bottom:26px}
}
.vis-table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;margin:20px 0}
.vis-table-scroll>table{margin:0}
.cta-group .btn{min-height:48px}
@media(max-width:480px){.cta-group{gap:10px}.cta-group .btn{flex:1 1 140px;padding:0 14px}}
/* width/height 속성이 있는 사진이 좁은 칸에서 세로로 늘어나지 않도록(낮은 specificity — 개별 규칙이 우선) */
main img{height:auto}