body.image-viewer-open { overflow:hidden; }
.scan-enlarge { display:inline-block;border:0;padding:0;background:transparent;cursor:zoom-in;max-width:100%; }
.detail-images.in-gift-frame>figure>.scan-enlarge { display:block;width:100%; }
dialog.image-viewer { position:fixed;inset:0;width:100%;height:100%;height:100dvh;max-width:none;max-height:none;margin:0;border:0;border-radius:0;background:#17251f;color:#f7f5ed;overflow:hidden;overscroll-behavior:contain; }
.image-viewer[open] { display:grid;grid-template-rows:auto minmax(0,1fr) auto; }
.image-viewer::backdrop { background:#17251f; }
.viewer-header { display:flex;align-items:center;gap:24px;padding:18px max(24px,env(safe-area-inset-right)) 18px max(24px,env(safe-area-inset-left));border-bottom:1px solid #f7f5ed20; }
.viewer-heading { flex:1;min-width:0; }
.viewer-heading span { font-size:9px;letter-spacing:.2em;color:#c1c9be; }
.viewer-heading h2 { font-size:23px;margin-top:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.viewer-sides { display:flex;gap:4px;padding:4px;background:#ffffff0a;border-radius:8px; }
.image-viewer button { min-height:42px;border:1px solid #f7f5ed35;border-radius:6px;padding:9px 14px;color:#f7f5ed;background:transparent; }
.image-viewer button:hover:not(:disabled) { background:#ffffff14; }
.image-viewer button:focus-visible { outline:2px solid #ddbf8d;outline-offset:3px; }
.viewer-sides button { min-width:65px;border-color:transparent; }
.viewer-sides button[aria-pressed=true] { background:#f6f3e8;color:#263d31; }
.viewer-original[aria-pressed=true] { background:#f6f3e8;color:#263d31; }
.viewer-original { white-space:nowrap;font-size:12px; }
.image-viewer .viewer-close { font-size:26px;line-height:1;width:44px;padding:4px; }
.viewer-stage { position:relative;min-height:0;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none; }
.viewer-stage.can-pan { cursor:grab; }
.viewer-stage.is-dragging { cursor:grabbing; }
.viewer-image { position:absolute;left:50%;top:50%;max-width:none;max-height:none;transform-origin:center;box-shadow:0 14px 60px #0005;pointer-events:none;user-select:none;-webkit-user-drag:none; }
.viewer-feedback { position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;pointer-events:none; }
.viewer-feedback button { pointer-events:auto; }
.viewer-footer { padding:14px 24px max(15px,env(safe-area-inset-bottom));display:flex;align-items:center;justify-content:center;gap:24px;border-top:1px solid #f7f5ed20; }
.viewer-tools { display:flex;align-items:center;gap:8px; }
.viewer-tools button { white-space:nowrap; }
.viewer-tools .viewer-step { font-size:22px;width:44px;padding:3px; }
#viewer-zoom { min-width:57px;text-align:center;font-variant-numeric:tabular-nums;font-size:12px;color:#e2e5dc; }
.viewer-hint { color:#bac3b8;font-size:11px;line-height:1.6; }
.viewer-hint-touch { display:none; }
@media(max-width:700px) {
  .viewer-header { gap:12px;padding:12px 16px;flex-wrap:wrap; }
  .viewer-heading h2 { font-size:20px; }
  .viewer-heading { order:0;flex-basis:calc(100% - 64px); }
  .image-viewer .viewer-close { order:1; }
  .viewer-sides { order:2;margin:0 auto; }
  .viewer-original { order:3;margin:0 auto; }
  .viewer-footer { padding:12px 10px max(12px,env(safe-area-inset-bottom));flex-direction:column;gap:9px; }
  .viewer-tools { gap:5px; }
  .viewer-tools button { padding:8px 10px;font-size:12px; }
  #viewer-zoom { min-width:48px;font-size:11px; }
  .viewer-hint { text-align:center;font-size:10px; }
}
@media(pointer:coarse) { .viewer-hint-desktop { display:none; }.viewer-hint-touch { display:inline; } }
@media(max-height:450px) { .viewer-header { padding:6px 14px;flex-wrap:nowrap; }.viewer-heading { flex:1; }.viewer-sides { order:0; }.viewer-footer { padding:6px 12px; }.viewer-hint { display:none; }.viewer-heading span { display:none; } }