/* SELECTED WORK — UI·UX 외 포트폴리오 탭 전용 캐러셀. 웹사이트 파노라마 자리에 들어가며 캡션과 이동 버튼을 함께 쓴다.
   kind: video(홍보영상·3D, 16:9, 자동재생) / screen(플랫폼·AI Agent, 16:10) / bx(16:10). 카드 폭은 모두 min(680px,52vw) */
.work-section .work-stage[hidden],.work-section .media-stage[hidden],.work-section .work-pause[hidden]{display:none!important}
.work-section.is-media .work-tabs{margin-bottom:8px}
.media-stage{--media-w:min(680px,52vw);--media-ratio:.625;position:relative;height:calc((clamp(460px,38vw,730px) - var(--media-w) * .625) / 2 + var(--media-w) * var(--media-ratio));touch-action:pan-y;user-select:none;outline:none}
.media-stage[data-kind="video"]{--media-ratio:.5625}
.media-stage:focus-visible{outline:2px solid var(--blue);outline-offset:-2px;border-radius:18px}
.media-slide{--rel:0;position:absolute;left:50%;top:50%;width:var(--media-w);aspect-ratio:16/10;border-radius:18px;overflow:hidden;background:#e5e7eb;box-shadow:0 16px 30px #0f1f3826;transform:translate(calc(-50% + var(--rel) * 92%),-50%) scale(.76);opacity:0;filter:saturate(.6) brightness(.94);pointer-events:none;transition:transform .7s cubic-bezier(.22,.61,.36,1),opacity .5s,filter .5s}
.media-stage[data-kind="video"] .media-slide{aspect-ratio:16/9}
.media-slide.is-near{opacity:.55;pointer-events:auto;cursor:pointer;z-index:1}
.media-slide.is-active{transform:translate(-50%,-50%) scale(1);opacity:1;filter:none;pointer-events:auto;z-index:2}
.media-slide img{display:block;width:100%;height:100%;object-fit:cover;-webkit-user-drag:none}
.media-stage[data-kind="screen"] .media-slide img{object-position:top center}
.media-slide__video{position:absolute;inset:0;width:100%;height:100%;border:0;pointer-events:none;opacity:0;transition:opacity .6s}
.media-slide.is-playing .media-slide__video{opacity:1}
.media-slide.is-playing .media-slide__play{opacity:0}
.media-slide:focus-visible{outline:3px solid var(--blue);outline-offset:4px}
.media-slide__play{position:absolute;left:50%;top:50%;width:76px;height:76px;border-radius:50%;background:#000000a6;transform:translate(-50%,-50%);transition:background .2s,transform .2s}
.media-slide__play::after{content:"";position:absolute;left:30px;top:24px;border-style:solid;border-width:14px 0 14px 22px;border-color:transparent transparent transparent #fff}
.media-slide:not(.is-active) .media-slide__play{opacity:0}
.media-slide.is-active:hover .media-slide__play,.media-slide.is-active:focus-visible .media-slide__play{background:var(--blue);transform:translate(-50%,-50%) scale(1.06)}
@media(max-width:768px){
  .media-stage,.media-stage[data-kind="bx"]{--media-w:84vw;height:calc((var(--media-w) * .625 + 48px + var(--media-w) * var(--media-ratio)) / 2)}
  .media-slide{border-radius:14px}
  .media-slide__play{width:56px;height:56px}
  .media-slide__play::after{left:22px;top:17px;border-width:11px 0 11px 17px}
}
@media(prefers-reduced-motion:reduce){.media-slide,.media-slide__play,.media-slide__video{transition:none}}