.photo-open{position:relative;cursor:zoom-in}
.photo-open-hint{position:absolute;right:15px;bottom:15px;display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border:1px solid #ffffff44;border-radius:30px;background:#23383ae8;color:#fff;font-size:11px;line-height:1.4;pointer-events:none;box-shadow:0 2px 12px #0002}
.photo-open-hint .icon{width:15px;height:15px}
.photo-grid .photo-open-hint{display:inline-flex;bottom:auto;top:12px;right:12px;margin:0;color:#fff;overflow:visible}
.work-visual>.gallery-photo-open{padding:0;min-height:260px}
.archive-photo-open{display:block}
html.photo-viewer-open,html.photo-viewer-open body{overflow:hidden}
.photo-viewer{width:calc(100% - 32px);height:calc(100dvh - 32px);max-width:1440px;max-height:none;margin:auto;padding:0;overflow:hidden;border:1px solid #b2986555;border-radius:12px;background:#1d2b2c;color:#f6f3eb;box-shadow:0 18px 90px #0007;overscroll-behavior:contain}
.photo-viewer[open]{display:flex;flex-direction:column}
.photo-viewer::backdrop{background:#101b1de8}
.photo-viewer[open]::backdrop{animation:photo-backdrop-in 220ms ease-out}
.photo-viewer.is-opening .photo-viewer-image{transform-origin:left center;animation:photo-grow-from-left 420ms cubic-bezier(.16,1,.3,1) both}
.photo-viewer.is-closing{pointer-events:none;animation:photo-viewer-exit 240ms ease-in both}
.photo-viewer.is-closing .photo-viewer-image{transform-origin:left center;animation:photo-shrink-to-left 240ms ease-in both}
.photo-viewer.is-closing::backdrop{animation:photo-backdrop-out 240ms ease-in both}
@keyframes photo-grow-from-left{from{opacity:0;transform:translateX(-18vw) scale(.72)}to{opacity:1;transform:none}}
@keyframes photo-shrink-to-left{from{opacity:1;transform:none}to{opacity:0;transform:translateX(-12vw) scale(.65)}}
@keyframes photo-viewer-exit{from{opacity:1}to{opacity:0}}
@keyframes photo-backdrop-in{from{background:#101b1d00}to{background:#101b1de8}}
@keyframes photo-backdrop-out{from{background:#101b1de8}to{background:#101b1d00}}
.photo-viewer-toolbar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px 18px;border-bottom:1px solid #ffffff1c;flex-shrink:0;background:#23383a}
.photo-viewer-toolbar h2{min-width:0;margin:0;font-family:var(--serif);font-weight:400;font-size:21px;line-height:1.4;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;letter-spacing:0}
.photo-viewer-controls{display:flex;align-items:center;gap:7px;flex-shrink:0}
.photo-viewer-controls button{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:7px;border:1px solid #ffffff30;border-radius:7px;background:transparent;color:inherit;font-size:24px;line-height:1;touch-action:manipulation}
.photo-viewer-controls button:hover{background:#ffffff12}
.photo-viewer-controls button:disabled{opacity:.3;cursor:default}
.photo-viewer-controls .photo-viewer-fit{font-size:12px;padding:9px 12px}
.photo-viewer-controls .photo-viewer-close{margin-left:10px;border-color:transparent}
.photo-viewer-controls output{min-width:27px;text-align:center;font-size:12px;font-variant-numeric:tabular-nums}
.photo-viewer-viewport{position:relative;flex:1;min-height:0;overflow:auto;scroll-behavior:auto;overscroll-behavior:contain;touch-action:pan-x pan-y pinch-zoom}
.photo-viewer-viewport:focus-visible{outline:2px solid var(--gold);outline-offset:-4px}
.photo-viewer-canvas{display:flex;min-width:100%;min-height:100%;width:max-content;padding:24px}
.photo-viewer-image{display:block;max-width:none;max-height:none;margin:auto;flex-shrink:0;cursor:zoom-in;user-select:none;-webkit-user-select:none;-webkit-user-drag:none}
.photo-viewer-image[hidden]{display:none}
.photo-viewer.is-zoomed .photo-viewer-image{cursor:grab}
.photo-viewer.is-dragging .photo-viewer-image{cursor:grabbing}
.photo-viewer-footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:5px 16px;flex-shrink:0;padding:10px 18px;border-top:1px solid #ffffff1c;font-size:12px;color:#b8c6c1}
.photo-viewer-footer [role=status]{color:#e0c18e}
@media(max-width:600px){
  .photo-viewer{width:100%;height:100dvh;max-height:100dvh;border:0;border-radius:0}
  .photo-viewer-toolbar{flex-wrap:wrap;gap:8px;padding:calc(10px + env(safe-area-inset-top)) 12px 10px}
  .photo-viewer-toolbar h2{width:100%;font-size:18px}
  .photo-viewer-controls{width:100%}
  .photo-viewer-controls .photo-viewer-close{margin-left:auto}
  .photo-viewer-canvas{padding:16px}
  .photo-viewer-footer{padding:10px 12px calc(10px + env(safe-area-inset-bottom));font-size:11px}
}
@media(prefers-reduced-motion:reduce){.photo-viewer,.photo-viewer::backdrop,.photo-viewer .photo-viewer-image{animation:none!important}}
@media print{.photo-viewer,.photo-open-hint{display:none!important}}