.room-media { position: relative; height: 220px; min-width: 0; background: #E2E8F0; overflow: hidden; }
.media-track { display: flex; width: 100%; height: 100%; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.media-track::-webkit-scrollbar { display: none; }
.media-track:focus-visible { outline: 3px solid #06B6D4; outline-offset: -3px; }
.media-slide { flex: 0 0 100%; min-width: 0; height: 100%; position: relative; scroll-snap-align: start; scroll-snap-stop: always; }
.media-slide img, .media-slide video { display: block; width: 100%; height: 100%; object-fit: cover; }
.media-slide video { background: #0F172A; object-fit: contain; }
.media-open { display: block; border: 0; padding: 0; width: 100%; height: 100%; cursor: pointer; background: transparent; }
.media-open:focus-visible { outline: 3px solid #06B6D4; outline-offset: -3px; }
.media-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); padding: 12px 18px; border: 1px solid #94A3B8; border-radius: 28px; background: #0F172AE6; color: white; font-size: 14px; white-space: nowrap; cursor: pointer; }
.media-play[hidden], .media-error[hidden] { display: none; }
.media-error { position: absolute; bottom: 54px; left: 12px; right: 12px; padding: 8px; border-radius: 8px; background: #0F172AE6; color: #fff; font-size: 13px; text-align: center; pointer-events: none; }
.media-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 36px; height: 44px; border: 0; border-radius: 8px; background: #0F172A99; color: #fff; font-size: 30px; line-height: 1; cursor: pointer; }
.media-previous { left: 8px; } .media-next { right: 8px; }
.media-toolbar { position: absolute; bottom: 10px; right: 10px; display: flex; align-items: center; gap: 6px; color: #fff; }
.media-count { padding: 5px 10px; border-radius: 16px; background: #0F172ABF; font-size: 12px; font-variant-numeric: tabular-nums; pointer-events: none; }
.media-auto { width: 36px; height: 32px; border: 1px solid #FFFFFF80; border-radius: 16px; color: #fff; background: #0F172ABF; cursor: pointer; }
.room-media button:focus-visible { outline: 3px solid #22D3EE; outline-offset: -3px; }
.media-empty { display: flex; height: 100%; align-items: center; justify-content: center; font-size: 60px; color: #94A3B8; }
.detail-gallery { height: auto; aspect-ratio: 4 / 3; max-height: 440px; max-height: min(440px, 48dvh); }
.detail-gallery .media-slide img { object-fit: contain; background: #E2E8F0; }
.detail-gallery .media-toolbar { bottom: 12px; }
.media-video-active .media-toolbar { top: 12px; left: 12px; bottom: auto; right: auto; }
@media (max-width: 640px) { .detail-gallery { height: 240px; aspect-ratio: auto; } }
@media (prefers-reduced-motion: reduce) { .room-media * { scroll-behavior: auto; } }