.photo-zoom{--photo-scale:1;--zoom-max-height:72dvh;position:relative;width:100%;max-width:calc(var(--zoom-max-height) * var(--zoom-ratio));margin-inline:auto;background:#0d111a}
.work-detail .photo-zoom{--zoom-max-height:82dvh}
.photo-zoom-viewport{position:relative;width:100%;aspect-ratio:var(--zoom-ratio);overflow:hidden;cursor:zoom-in;touch-action:pan-y pinch-zoom;scrollbar-width:thin;scrollbar-color:#536071 transparent}
.photo-zoom[data-zoomed=true] .photo-zoom-viewport{overflow:auto;overscroll-behavior:contain;cursor:zoom-out;touch-action:pan-x pan-y pinch-zoom}
.photo-zoom[data-dragging=true] .photo-zoom-viewport{cursor:grabbing}
.photo-zoom-canvas{position:relative;width:calc(100% * var(--photo-scale));aspect-ratio:var(--zoom-ratio);max-width:none}
.photo-zoom-canvas>img,.work-detail .photo-zoom-canvas>img{display:block;width:100%;height:100%;max-width:none;max-height:none;object-fit:fill;user-select:none;-webkit-user-drag:none}
.photo-zoom-canvas>.piece-photo-crop{width:100%;max-width:none!important;margin:0}
.photo-zoom-toggle{position:absolute;top:10px;right:10px;z-index:3;display:flex;align-items:center;justify-content:center;gap:6px;min-width:52px;min-height:44px;padding:8px 10px;border:1px solid #66717d;background:#080b13d9;color:#f3f5fa;font:12px var(--mono);cursor:pointer}
.photo-zoom-toggle svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.photo-zoom-toggle:focus-visible,.photo-zoom-viewport:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.photo-zoom-toggle[hidden]{display:none}
.photo-zoom[data-can-zoom=false] .photo-zoom-viewport{cursor:default}