/* PO:VE 시술 상세 페이지 공용 섹션 — 기술 설명 · 타 시술 비교 · 전후 사진 · 시술 부위.
   올타이트(lift-alltite.html)에서 처음 만들었고, 다른 시술 페이지도 같은 마크업을 쓰면 그대로 적용됩니다.
   쓰는 방법과 마크업 예시는 docs/treatment-page-sections.md 에 있습니다.

   불러오기 (페이지 <head>):
     <link rel="stylesheet" href="/pove-treatment.css">
     <script src="/pove-lightbox.js"></script>      ← 전후 사진 확대 보기를 쓸 때

   클래스
     .pvat-2 / .pvat-3 / .pvat-4   2·3·4칸 그리드(모바일에서 1칸 또는 2칸으로 접힘)
     .pvat-panel · .pvat-layers    도해 두 개를 나란히 놓고 가운데에 층 이름(.pvat-layer)을 선으로 잇는 패널
     .pvat-table                   비교표
     .pvzoom-t                     누르면 크게 보이는 사진(data-pv-zoom 과 함께)
     .pvar · .pvar-box · .pvar-c   시술 부위 배너(사진 1820×1024, 가운데 정사각형이 인물) + 점·선·라벨 */

.pvzoom-t img{transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.pvzoom-t:hover img{transform:scale(1.03)}

/* 시술 부위 배너: 가운데 정사각형(.pvar-box)이 인물 사진 영역이고, 라벨은 그 양옆 여백까지 뻗습니다.
   라벨 위치는 요소마다 --x --y(점의 위치) --d(PC 에서 라벨 가장자리) --m(모바일 가장자리) 로 적습니다. 단위는 정사각형 기준 %. */
.pvar{position:relative;margin:0;aspect-ratio:1820/1024;border-radius:6px;overflow:hidden;background:#d1c9b8}
.pvar>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.pvar-box{position:absolute;top:0;bottom:0;left:50%;aspect-ratio:1/1;transform:translateX(-50%)}
.pvar-c{position:absolute;top:var(--y);transform:translateY(-50%);display:flex;align-items:center}
.pvar-l{left:var(--d);width:calc(var(--x) - var(--d))}
.pvar-r{left:var(--x);right:var(--d)}
.pvar-pill{flex:none;padding:6px 15px;border-radius:999px;background:rgba(255,255,255,.95);color:#2b291d;font-size:13.5px;font-weight:500;letter-spacing:-.01em;white-space:nowrap;box-shadow:0 8px 18px -10px rgba(42,40,24,.5)}
.pvar-line{flex:1;height:1px;background:rgba(255,255,255,.92)}
.pvar-dot{flex:none;width:10px;height:10px;border-radius:50%;background:#fff;box-shadow:0 0 0 5px rgba(255,255,255,.36)}

@media(max-width:860px){
  .pvat-2,.pvat-3{grid-template-columns:1fr!important}
  .pvar{aspect-ratio:1/1}
  .pvar-l{left:var(--m);width:calc(var(--x) - var(--m))}
  .pvar-r{right:var(--m)}
  .pvar-pill{padding:3px 8px;font-size:10.5px}
  .pvar-dot{width:7px;height:7px;box-shadow:0 0 0 3px rgba(255,255,255,.36)}
  .pvar-tags{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .pvat-panel{padding:22px 14px 24px!important}
  .pvat-layers{grid-template-columns:minmax(0,1fr) 86px minmax(0,1fr)!important;row-gap:14px!important}
  .pvat-layers>div>span{padding:5px 11px!important;font-size:11.5px!important}
  .pvat-name{flex:0 1 auto!important;min-width:0;padding:0 4px!important;font-size:10.5px!important;line-height:1.25!important}
  .pvat-line{flex:1 0 6px!important}
  .pvat-sub{font-size:9.5px!important}
  .pvat-panel .pvat-2{gap:20px!important}
  .pvat-4{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:22px 18px!important}
  .pvat-table{min-width:0!important;table-layout:fixed}
  .pvat-table th,.pvat-table td{padding:12px 5px!important;font-size:12px!important;word-break:keep-all}
}