/* rb2026 — DIVA Signature 사진 티커형(2026-09-29 프리뷰 ?dvsigidx=1 · 전환 touch SIGIDX). header.php 가 home-layout.css 뒤에 싣는다.
   머리글·배경은 home-layout.css(라이브) 그대로. 왼쪽 시술명 목록 + 사진 줄(오른쪽 화면 끝까지; 폰은 양쪽), 세로 사진 5:6 + 시술명(Pretendard 700, 라이브 .dv-sig2-nm 과 같은 크기)만.
   흐름·루프·드래그는 sections/v2/signature-index.php 의 인라인 스크립트. 이전 판(정지 트랙·바·화살표)은 sig-index.css.bak-static */
.dv-sig2--idx{--sigx-bleed:max(var(--dv-gut),(100vw - var(--dv-wrap)) / 2)}
/* [왼쪽 시술명 목록 | 사진 트랙] — 트랙은 오른쪽 화면 끝까지. 목록은 트랙 높이 가운데 */
.dv-sigx-body{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:clamp(24px,3.2vw,48px);align-items:center;margin-top:clamp(28px,2.6vw,42px)}   /* 목록 칸은 가장 긴 이름(활성 크기)만큼만 — 사진이 글 바로 옆에서 시작한다(2026-09-29 사용자 「글과 이미지 사이가 넓다」) */
.dv-sigx-list{min-width:0}
.dv-sigx-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.dv-sig2--idx a.dv-sigx-it{display:inline-block;padding:4px 0;font-family:var(--dv-ff);font-size:15px;font-weight:400;line-height:1.4;letter-spacing:-.01em;color:var(--dv-muted);text-decoration:none;word-break:keep-all;transition:font-size .55s var(--dv-ease),color .4s,font-weight .2s}
.dv-sig2--idx a.dv-sigx-it:hover{color:var(--dv-ink-2)}
.dv-sig2--idx a.dv-sigx-it.is-active{font-size:clamp(20px,1.65vw,24px);font-weight:600;color:var(--dv-ink)}   /* 트랙 왼쪽 끝에 온 카드의 이름 — 사진 위 시술명과 같은 크기 */
.dv-sig2--idx a.dv-sigx-it:focus-visible{outline:2px solid var(--dv-olive);outline-offset:2px}
.dv-sigx-loop{position:relative;min-width:0;margin-right:calc(-1 * var(--sigx-bleed))}
.dv-sigx-track{display:flex;gap:clamp(14px,1.4vw,20px);margin:0;padding:0;list-style:none;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;cursor:grab;-webkit-user-select:none;user-select:none}
.dv-sigx-track::-webkit-scrollbar{display:none}
.dv-sigx-track.is-drag{cursor:grabbing}
.dv-sigx-card{flex:0 0 clamp(240px,23.5vw,360px)}   /* 시안 셀 폭(1440 에서 339px). 3.5~4장 + 조각이 화면을 채운다 */
.dv-sigx-card a.dv-sigx-link{position:relative;display:block;color:#FCFAF7;text-decoration:none;-webkit-user-drag:none}
.dv-sigx-card .dv-sig2-img{position:relative;aspect-ratio:5/6;margin:0;overflow:hidden;background:var(--dv-cream-2)}
.dv-sigx-card .dv-sig2-img img{display:block;width:100%;height:100%;object-fit:cover;-webkit-user-drag:none;pointer-events:none}
.dv-sigx-card .dv-sig2-img::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(47,43,40,0) 0,rgba(47,43,40,0) 38%,rgba(47,43,40,.34) 60%,rgba(47,43,40,.78) 100%);pointer-events:none}   /* 2026-09-29 사용자 「블러 말고 어둡게」: 블러 띠는 빼고 차콜 오버레이만 — 위 38% 는 그대로, 아래로 갈수록 78% 까지(「좀 더 어둡게」로 62→78, 원칙 밴드 오버레이와 같은 농도) */
.dv-sigx-nm{position:absolute;z-index:2;left:0;right:0;bottom:clamp(18px,2vw,28px);padding:0 12px;text-align:center;font-family:var(--dv-ff);font-size:clamp(21px,1.6vw,24px);font-weight:700;line-height:1.3;letter-spacing:-.01em;color:#FCFAF7;text-shadow:0 1px 8px rgba(47,43,40,.35);word-break:keep-all;text-wrap:balance}
.dv-sigx-card a.dv-sigx-link:focus-visible{outline:2px solid var(--dv-olive);outline-offset:-3px}
@media (prefers-reduced-motion:no-preference){
  .dv-sigx-card .dv-sig2-img img{transition:transform .6s var(--dv-ease)}
  .dv-sigx-card:hover .dv-sig2-img img{transform:scale(1.04)}
}
@media (min-width:768px) and (max-width:1023px){
  .dv-sigx-body{grid-template-columns:max-content minmax(0,1fr);gap:24px}
  .dv-sig2--idx a.dv-sigx-it{font-size:14px}
  .dv-sig2--idx a.dv-sigx-it.is-active{font-size:20px}
}
@media (max-width:767px){
  /* 폰: 목록은 트랙 위 가로 한 줄(스크롤, 오른쪽 페이드), 현재 이름이 커지며 가운데로 밀려온다. 트랙은 양쪽 화면 끝까지 */
  .dv-sigx-body{display:block;margin-top:20px}
  .dv-sigx-list{flex-direction:row;align-items:baseline;gap:0 18px;overflow-x:auto;scrollbar-width:none;margin:0 calc(var(--dv-gut) * -1) 14px;padding-inline:var(--dv-gut);-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--dv-gut),#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,transparent 0,#000 var(--dv-gut),#000 calc(100% - 40px),transparent)}
  .dv-sigx-list::-webkit-scrollbar{display:none}
  .dv-sigx-list li{flex:0 0 auto}
  .dv-sig2--idx a.dv-sigx-it{display:flex;align-items:center;min-height:44px;padding:0;font-size:14.5px;white-space:nowrap}
  .dv-sig2--idx a.dv-sigx-it.is-active{font-size:20px}
  .dv-sigx-loop{margin-inline:calc(var(--dv-gut) * -1)}
  .dv-sigx-card{flex-basis:64vw}
  .dv-sigx-card .dv-sig2-img{aspect-ratio:4/5}
}