/* ─────────────────────────────────────────────────────────────
   평강프라자 — 상세 이미지 갤러리 (콘크리트 스테이지, pk-gal) · PC + 모바일
   시안: docs/design/detail-rest-draft.html 1번 (2026-09-15 확정) · 마크업 extend/pk.gallery.php · JS 는 문성 js/pk-gallery.js 재사용
   세로 사각 썸네일 레일(활성 블루) + 콘크리트 정사각 스테이지: 누끼는 multiply 로 판 위에, 연출컷(.photo)은 꽉 채운 사진. (진열대 선은 2026-09-22 제거)
   문성의 카테고리 색 타일·그림자 구름·둥근 24px·알약 컨트롤 없음.
   ───────────────────────────────────────────────────────────── */
.pk-gal{display:grid;grid-template-columns:76px 1fr;gap:14px;align-items:start;line-height:1.33;font-family:var(--pk-kr)}
.pk-gal *{box-sizing:border-box}
/* 상세 좌측 열 — 스킨 인라인 width(400px)를 넘어 남는 폭을 갤러리가 채우도록 (문성과 동일) */
.vi_info .vi_img_bx{width:auto !important;flex:1 1 0%;min-width:0;margin-right:44px}
.vi_info .vi_txt_bx{flex:none}
/* 레일 */
.pk-gal-rail{display:flex;flex-direction:column;gap:6px}
.pk-gal-rail button{width:76px;height:76px;border:1px solid var(--pk-line);border-radius:var(--pk-r);background:var(--pk-tile,#fff);padding:0;overflow:hidden;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:border-color .15s,box-shadow .15s}
.pk-gal-rail button img{width:100% !important;height:100% !important;object-fit:cover;display:block}
.pk-gal-rail button.cut img{width:78% !important;height:78% !important;object-fit:contain;mix-blend-mode:multiply}
.pk-gal-rail button:hover{border-color:var(--pk-ink)}
.pk-gal-rail button.on{border-color:var(--pk-blue);box-shadow:inset 0 0 0 1px var(--pk-blue)}
/* 스테이지 */
.pk-gal-stage{position:relative;aspect-ratio:1/1;border-radius:var(--pk-r);background:var(--pk-tile,#fff);overflow:hidden;display:flex;align-items:center;justify-content:center}
/* 진열대 선(.pk-gal-stage:after)은 2026-09-22 제거 — 사용자 요청 "하단 바닥 보더 지워줘" */
/* 카테고리 색을 깐 칸에만 1px 링 (2026-09-22) — 흰 배경이면 --pk-tile-line 이 없어 투명.
   :after 는 진열대 선이 쓰고 있어 :before 로 그린다 (absolute 라 flex 아이템이 되지 않는다) */
.pk-gal-stage:before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1;box-shadow:inset 0 0 0 1px var(--pk-tile-line,transparent)}
/* 연출 사진은 늘 흰 배경이라 테두리 없음 — 종전 border 를 빼면서 썸네일 전환 시 테두리만 깜빡이던 것도 사라졌다 */
.pk-gal-stage.photo{background:#fff}
.pk-gal-stage.photo:before{display:none}
.pk-gal-stage img{position:relative;width:78% !important;height:78% !important;object-fit:contain;mix-blend-mode:multiply;transition:opacity .3s;cursor:zoom-in;display:block}
.pk-gal-stage.photo img{width:100% !important;height:100% !important;object-fit:cover;mix-blend-mode:normal}
.pk-gal-stage.fade img{opacity:0}
.pk-gal .labels{position:absolute;left:14px;top:14px;display:flex;flex-direction:column;gap:4px;z-index:2}
.pk-gal .label{height:22px;padding:0 8px;display:inline-flex;align-items:center;font-size:12px;font-weight:700;border-radius:var(--pk-r);background:#fff;color:var(--pk-ink);border:1px solid var(--pk-line);white-space:nowrap}
.pk-gal .label.sale{background:var(--pk-blue);color:#fff;border-color:var(--pk-blue)}
.pk-gal .color{position:absolute;right:14px;top:14px;display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;border-radius:var(--pk-r);background:#fff;border:1px solid var(--pk-line);font-size:12px;color:var(--pk-ink);z-index:2;white-space:nowrap}
.pk-gal .color i{width:10px;height:10px;border-radius:50%;border:1px solid var(--pk-line);display:inline-block}
.pk-gal-stage .ctl{position:absolute;left:14px;right:14px;bottom:12px;display:flex;align-items:center;gap:4px;z-index:2}
.pk-gal-stage .ctl button{width:32px;height:32px;border:1px solid var(--pk-line);border-radius:var(--pk-r);background:#fff;color:var(--pk-ink);cursor:pointer;display:grid;place-items:center;font-size:14px;font-family:inherit;transition:border-color .15s;padding:0}
.pk-gal-stage .ctl button:hover{border-color:var(--pk-ink)}
.pk-gal-stage .ctl .cnt{font-family:var(--pk-en);font-size:12px;color:var(--pk-ink);margin-left:8px;letter-spacing:.06em}
.pk-gal-stage .ctl .zoom{margin-left:auto;width:auto;padding:0 10px;display:inline-flex;gap:6px;font-size:12px;font-weight:700}
.pk-gal-stage .ctl .zoom svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
/* 모바일 스테이지 */
.pk-gal.m{display:block}
.pk-mstage{position:relative;aspect-ratio:1/1;background:var(--pk-tile,#fff);overflow:hidden;touch-action:pan-y}
.pk-track{display:flex;height:100%;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.pk-track figure{flex:none;width:100%;height:100%;margin:0;display:flex;align-items:center;justify-content:center;position:relative}
.pk-track img{position:relative;width:76% !important;height:76% !important;object-fit:contain;mix-blend-mode:multiply;display:block}
.pk-track figure.photo{background:#fff}.pk-track figure.photo img{width:100% !important;height:100% !important;object-fit:cover;mix-blend-mode:normal}
.pk-mstage .labels{left:12px;top:12px}
.pk-mstage .dots{position:absolute;left:14px;bottom:12px;display:flex;gap:4px;z-index:2}
.pk-mstage .dots i{width:16px;height:2px;background:var(--pk-line);transition:background .2s}
.pk-mstage .dots i.on{background:var(--pk-blue)}
.pk-mstage .zoom{position:absolute;right:12px;bottom:10px;width:30px;height:30px;border:1px solid var(--pk-line);border-radius:var(--pk-r);background:#fff;display:grid;place-items:center;z-index:2;cursor:pointer;padding:0}
.pk-mstage .zoom svg{width:13px;height:13px;stroke:var(--pk-ink);fill:none;stroke-width:2;stroke-linecap:round}
/* 라이트박스 */
.pk-lb{position:fixed;inset:0;background:rgba(17,18,20,.9);display:none;align-items:center;justify-content:center;z-index:9999;padding:40px}
.pk-lb.open{display:flex}
.pk-lb img{max-width:min(1100px,90vw);max-height:84vh;border-radius:var(--pk-r);background:#fff;object-fit:contain}
.pk-lb .x{position:absolute;right:24px;top:20px;width:40px;height:40px;border-radius:var(--pk-r);border:1px solid rgba(255,255,255,.3);background:transparent;color:#fff;font-size:18px;cursor:pointer}
.pk-lb .nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:var(--pk-r);border:1px solid rgba(255,255,255,.3);background:transparent;color:#fff;font-size:18px;cursor:pointer}
.pk-lb .prev{left:24px}.pk-lb .next{right:24px}
.pk-lb .cap{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);color:#fff;font-size:14px;display:flex;gap:12px;align-items:center;white-space:nowrap}
.pk-lb .cap b{font-family:var(--pk-en);letter-spacing:.06em}
@media (max-width:640px){.pk-lb{padding:16px}.pk-lb .x{right:12px;top:12px}.pk-lb .nav{width:38px;height:38px}.pk-lb .prev{left:10px}.pk-lb .next{right:10px}.pk-lb img{max-width:96vw}}
@media (prefers-reduced-motion:reduce){.pk-gal-stage img,.pk-track,.pk-mstage .dots i{transition:none}}