/* Shared long-image browsing and full-resolution image viewer. */
.case-long-shell {
  position: relative; isolation: isolate; width: 100%; height: clamp(320px, 48vw, 560px);
  max-height: 72vh; overflow: hidden; border-radius: inherit;
}
.case-long-shell.is-phone { height: auto; max-height: none; aspect-ratio: 750 / 1624; }
.case-long-shell.is-board { height: clamp(320px, 42vw, 460px); }
.case-long-shell.is-spec { height: clamp(280px, 32vw, 400px); }
.case-long-shell.is-gallery { height: auto; max-height: none; aspect-ratio: 16 / 10; }
body .case-long-shell > .case-long-view {
  position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0;
  overflow: auto; overscroll-behavior: auto; scrollbar-width: none;
  border-radius: inherit; touch-action: pan-y;
}
.case-long-view::-webkit-scrollbar { display: none; }
body .case-long-view > img {
  display: block; width: 100%; max-width: 100%; height: auto;
  max-height: none; aspect-ratio: auto; object-fit: contain;
  transform: none !important; transition: none !important;
}
.case-long-view.spec-win::after { display: none; }
.case-long-shell:focus-within { outline: 1px solid var(--muted, #777); outline-offset: 3px; }
.case-long-view:focus { outline: none; }
.case-long-hint {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.case-long-cue {
  position: absolute; z-index: 1; right: 10px; bottom: 10px;
  display: grid; place-items: center; width: 26px; height: 30px;
  border: 1px solid rgba(255,255,255,.32); border-radius: 15px;
  color: #fff; background: rgba(20,22,20,.42); backdrop-filter: blur(8px);
  pointer-events: none; opacity: .85; transition: opacity .25s ease;
}
.case-long-cue svg { width: 13px; height: 19px; }
.case-long-progress {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 2px;
  pointer-events: none; background: rgba(255,255,255,.2); opacity: 0;
  transition: opacity .25s ease;
}
.case-long-progress::after {
  content: ''; display: block; width: 100%; height: 100%; background: #fff;
  box-shadow: 0 0 2px rgba(0,0,0,.35); transform-origin: left;
  transform: scaleX(var(--long-progress, 0));
}
.case-long-shell:hover .case-long-cue, .case-long-shell:focus-within .case-long-cue { opacity: 0; }
.case-long-shell:hover .case-long-progress, .case-long-shell:focus-within .case-long-progress { opacity: 1; }
.case-long-shell:not(.can-scroll) .case-long-cue,
.case-long-shell:not(.can-scroll) .case-long-progress { display: none; }
@media (hover:none), (pointer:coarse) { .case-long-progress { opacity: .7; } }
@media (prefers-reduced-motion:reduce) { .case-long-cue, .case-long-progress { transition: none; } }
.case-zoomable { cursor: zoom-in; }
.case-image-dialog {
  box-sizing: border-box; width: 100vw; height: 100vh; height: 100dvh;
  max-width: none; max-height: none; margin: 0; padding: 64px clamp(20px, 5vw, 80px) 40px;
  border: 0; border-radius: 0; background: transparent; color: #f5f5f2;
  overflow: hidden; cursor: auto;
}
.case-image-dialog::backdrop { background: rgba(12,13,12,.88); backdrop-filter: blur(12px); }
.case-image-close {
  position: absolute; top: max(16px, env(safe-area-inset-top)); right: max(20px, env(safe-area-inset-right));
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border: 1px solid rgba(255,255,255,.22); border-radius: 50%;
  background: rgba(255,255,255,.04); color: #f5f5f2; cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
}
.case-image-close:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.5); }
.case-image-close:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.case-image-close svg { width: 18px; height: 18px; pointer-events: none; }
.case-image-stage { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; cursor: zoom-out; }
.case-image-stage img, .case-image-stage video {
  display: block; flex: 0 1 auto; width: auto; height: auto;
  max-width: min(100%, 1280px); max-height: 100%; object-fit: contain;
  margin: 0; border-radius: 3px; box-shadow: 0 16px 60px rgba(0,0,0,.24);
}
.case-image-stage img { cursor: zoom-out; }
.case-image-stage video { cursor: auto; background: #000; }
.case-image-stage [hidden] { display: none !important; }
@media (prefers-reduced-motion:no-preference) {
  .case-image-dialog[open] .case-image-stage { animation: case-media-reveal .24s cubic-bezier(.22,1,.36,1) both; }
  @keyframes case-media-reveal { from { opacity: 0; transform: translateY(6px) scale(.985); } to { opacity: 1; transform: none; } }
}
@media (max-width:600px) {
  .case-image-dialog { padding: 70px 14px 24px; }
}
.case-video-wrap { position: relative; min-width: 0; }
.case-video-wrap > video { display: block; width: 100%; }
.case-video-expand { position: absolute; top: 10px; right: 10px; z-index: 2; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid rgba(255,255,255,.3); border-radius: 50%; background: rgba(12,13,12,.48); color: #fff; cursor: pointer; backdrop-filter: blur(8px); }
.case-video-expand:hover { background: rgba(12,13,12,.75); }
.case-video-expand svg { width: 16px; height: 16px; pointer-events: none; }
html.case-image-open { overflow: hidden; }