/* 투표 큰 창(web/ui/eventVoteModal*.js · 11-02 오너: 타일을 누르면 큰 창에서 재생) — 화면 전체를 덮는 <dialog>(바탕: 어두운 블러) 안에 패널 하나.
 *   데스크톱: 가운데 패널, 왼쪽 9:16 영상 · 오른쪽 정보(제목 · 한 줄 · 소개 · 댓글 — 스크롤) · 그 아래 댓글 입력 칸 · ♥ ☆. 모바일(<720px): 전체 화면 시트 — 위 영상(9:16, 화면 62% 상한) · 아래 정보 스크롤 · 입력 칸과 ♥ ☆ 는 바닥에 고정.
 *   영상 아래 탐색 줄(.ev-vm-ctl)은 재생 층(hit) 위에 있다 — 끌어도 재생/정지가 바뀌지 않는다.
 *   릴스(11-02 오너): 영상 크기는 트랙(.ev-vm-track)이 갖고, 상자(.ev-vm-media)는 트랙 안에 겹쳐 서서 --p(칸 번호) · --dy(끄는 px)로 세로로 밀린다. 넘기는 동안만 .is-anim 이 전환을 건다.
 *   데스크톱 ▲▼(.ev-vm-rail)는 패널 오른쪽 바깥(dlg 자식), 폭이 모자라면 패널 안쪽에 겹친다. 모바일은 rail 없이 세로 밀기.
 *   글자 크기는 사다리 값만. event.css · eventVote.css 뒤에 싣는다. */

body.shell-v2 dialog.ev-vm { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(0,0,0,.72); color: var(--ink); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); opacity: 0; transition: opacity .16s ease; overflow: hidden; }
body.shell-v2 dialog.ev-vm[open] { display: grid; place-items: center; }
body.shell-v2 dialog.ev-vm.is-open { opacity: 1; }
body.shell-v2 dialog.ev-vm::backdrop { background: transparent; }
body.shell-v2 dialog.ev-vm:focus { outline: none; }

body.shell-v2 .ev-vm-panel { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); width: min(960px, 92vw); max-height: 90vh; background: #0f0f13; border: 1px solid rgba(255,255,255,.1); border-radius: 20px; overflow: hidden; box-shadow: 0 24px 80px rgba(0,0,0,.6); transform: translateY(10px) scale(.985); transition: transform .2s cubic-bezier(.2,.8,.2,1); }
body.shell-v2 dialog.ev-vm.is-open .ev-vm-panel { transform: none; }

/* 영상 칸 */
body.shell-v2 .ev-vm-stage { background: #000; display: flex; }
body.shell-v2 .ev-vm-track { position: relative; flex: none; width: min(calc(86vh * 9 / 16), 48vw); aspect-ratio: 9 / 16; background: #000; overflow: hidden; }
body.shell-v2 .ev-vm-media { position: absolute; inset: 0; background: #000; overflow: hidden; transform: translateY(calc(var(--p, 0) * 100% + var(--dy, 0px))); will-change: transform; }
body.shell-v2 .ev-vm-track.is-anim .ev-vm-media { transition: transform .22s cubic-bezier(.2,.8,.2,1); }
body.shell-v2 .ev-vm-poster, body.shell-v2 .ev-vm-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
body.shell-v2 .ev-vm-vid { background: #000; opacity: 0; transition: opacity .2s; }
body.shell-v2 .ev-vm-media.is-ready .ev-vm-vid { opacity: 1; }
body.shell-v2 .ev-vm-media.is-loading .ev-vm-poster { animation: ev-vm-pulse 1.1s ease-in-out infinite; }
@keyframes ev-vm-pulse { 50% { opacity: .62; } }
body.shell-v2 .ev-vm-hit { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; }
body.shell-v2 .ev-vm-hit:focus-visible { outline: none; box-shadow: inset 0 0 0 3px #fff; }
body.shell-v2 .ev-vm-mark { position: absolute; inset: 0; z-index: 0; display: none; place-items: center; color: #fff; background: rgba(0,0,0,.3); pointer-events: none; }
body.shell-v2 .ev-vm-media.is-paused .ev-vm-mark { display: grid; z-index: 2; }
body.shell-v2 .ev-vm-spin { position: absolute; left: 50%; top: 50%; z-index: 2; width: 34px; height: 34px; margin: -17px 0 0 -17px; border: 3px solid rgba(255,255,255,.25); border-top-color: #fff; border-radius: 50%; display: none; animation: ev-vm-spin .8s linear infinite; pointer-events: none; }
body.shell-v2 .ev-vm-media.is-loading .ev-vm-spin { display: block; }
@keyframes ev-vm-spin { to { transform: rotate(360deg); } }
/* 탐색 줄 — 보이는 줄은 4px, 누르는 칸은 24px. 손잡이 점은 올리거나 끄는 동안 커진다. 시각 글은 멈췄을 때 · 올렸을 때 · 끄는 동안만. */
body.shell-v2 .ev-vm-ctl { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: flex; flex-direction: column; padding: 28px 12px 2px; background: linear-gradient(to top, rgba(0,0,0,.5), rgba(0,0,0,0)); pointer-events: none; opacity: 0; transition: opacity .2s; }
body.shell-v2 .ev-vm-media.is-playing .ev-vm-ctl { opacity: 1; }
body.shell-v2 .ev-vm-clock { align-self: flex-start; color: #fff; font-size: var(--fs-caption); font-variant-numeric: tabular-nums; text-shadow: 0 1px 3px rgba(0,0,0,.7); opacity: 0; transition: opacity .15s; }
body.shell-v2 .ev-vm-media.is-paused .ev-vm-clock, body.shell-v2 .ev-vm-media.is-seeking .ev-vm-clock, body.shell-v2 .ev-vm-media:hover .ev-vm-clock, body.shell-v2 .ev-vm-ctl:focus-within .ev-vm-clock { opacity: 1; }
body.shell-v2 .ev-vm-seek { position: relative; height: 24px; display: flex; align-items: center; pointer-events: auto; cursor: pointer; touch-action: none; outline: none; -webkit-tap-highlight-color: transparent; }
body.shell-v2 .ev-vm-seek.is-off { pointer-events: none; cursor: default; }
body.shell-v2 .ev-vm-seek-track { position: relative; flex: 1 1 auto; height: 4px; border-radius: 2px; background: rgba(255,255,255,.3); transition: height .12s; }
body.shell-v2 .ev-vm-seek-fill { position: absolute; inset: 0; border-radius: 2px; background: #fff; transform: scaleX(0); transform-origin: left; }
body.shell-v2 .ev-vm-seek-knob { position: absolute; top: 50%; left: 0; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.5); transform: scale(.6); transition: transform .12s; }
body.shell-v2 .ev-vm-seek.is-off .ev-vm-seek-knob { transform: scale(0); }
body.shell-v2 .ev-vm-seek:hover .ev-vm-seek-track, body.shell-v2 .ev-vm-media.is-seeking .ev-vm-seek-track, body.shell-v2 .ev-vm-seek:focus-visible .ev-vm-seek-track { height: 6px; }
body.shell-v2 .ev-vm-seek:hover .ev-vm-seek-knob, body.shell-v2 .ev-vm-media.is-seeking .ev-vm-seek-knob, body.shell-v2 .ev-vm-seek:focus-visible .ev-vm-seek-knob { transform: scale(1); }
body.shell-v2 .ev-vm-seek:focus-visible .ev-vm-seek-knob { box-shadow: 0 0 0 3px rgba(255,255,255,.45); }
/* 배속 칩(11-02 오너) — 탐색 줄(아래 26px) 바로 위 오른쪽. 누르는 칸은 44px, 보이는 알약은 28px. 닫기(우상단 패널) · 카운트(좌상단) · 재생 표시(가운데)와 겹치지 않는다. */
body.shell-v2 .ev-vm-rate { position: absolute; right: 4px; bottom: 26px; z-index: 3; display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0; border: 0; background: transparent; color: #fff; cursor: pointer; -webkit-tap-highlight-color: transparent; }
body.shell-v2 .ev-vm-rate-pill { display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border-radius: var(--r-pill); background: rgba(0,0,0,.55); box-shadow: 0 0 0 1px rgba(255,255,255,.28); font-size: var(--fs-caption); font-weight: 600; font-variant-numeric: tabular-nums; }
body.shell-v2 .ev-vm-rate:hover .ev-vm-rate-pill { background: rgba(0,0,0,.72); }
body.shell-v2 .ev-vm-rate:focus-visible { outline: none; }
body.shell-v2 .ev-vm-rate:focus-visible .ev-vm-rate-pill { box-shadow: 0 0 0 2px #fff; }
body.shell-v2 .ev-vm-media.is-error .ev-vm-rate { display: none; }
body.shell-v2 .ev-vm-err { position: absolute; inset: 0; z-index: 4; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 24px; text-align: center; background: rgba(0,0,0,.72); }
body.shell-v2 .ev-vm-media.is-error .ev-vm-err { display: flex; }
body.shell-v2 .ev-vm-media.is-error .ev-vm-poster { opacity: .3; }
body.shell-v2 .ev-vm-err-text { margin: 0; color: #fff; font-size: var(--fs-body); line-height: 1.4; }

/* 정보 칸 */
body.shell-v2 .ev-vm-info { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
body.shell-v2 .ev-vm-nav { display: flex; align-items: center; padding: 14px 64px 0 28px; }
body.shell-v2 .ev-vm-nav[hidden] { display: none; }
body.shell-v2 .ev-vm-count { color: var(--ink-48); font-size: var(--fs-caption); font-variant-numeric: tabular-nums; }
body.shell-v2 .ev-vm-text { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 18px 28px 18px; }
body.shell-v2 .ev-vm-title { margin: 0; color: #fff; font-size: var(--fs-title-1); line-height: var(--lh-title-1); font-weight: 600; letter-spacing: -.01em; overflow-wrap: anywhere; }
body.shell-v2 .ev-vm-logline { margin: 8px 0 0; color: var(--ink-80); font-size: var(--fs-title-3); line-height: var(--lh-title-3); overflow-wrap: anywhere; }
body.shell-v2 .ev-vm-intro { margin: 18px 0 0; color: var(--ink); font-size: var(--fs-body); line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
body.shell-v2 .ev-vm-logline[hidden], body.shell-v2 .ev-vm-intro[hidden] { display: none; }
body.shell-v2 .ev-vm-foot { flex: none; display: flex; gap: 8px; padding: 14px 28px 20px; border-top: 1px solid rgba(255,255,255,.08); }

/* 댓글(11-02 오너) — 목록은 정보 칸 스크롤 안(소개 아래), 입력 칸은 스크롤 밖(♥ 줄 바로 위). */
body.shell-v2 .ev-vc { margin: 24px 0 0; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.08); }
body.shell-v2 .ev-vc-head { margin: 0 0 10px; color: #fff; font-size: var(--fs-body); font-weight: 600; font-variant-numeric: tabular-nums; }
body.shell-v2 .ev-vc-state { display: flex; align-items: center; gap: 8px; color: var(--ink-48); font-size: var(--fs-caption); }
body.shell-v2 .ev-vc-state-text { margin: 0; }
body.shell-v2 .ev-vc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
body.shell-v2 .ev-vc-list:empty { display: none; }
body.shell-v2 .ev-vc-meta { display: flex; align-items: center; gap: 8px; min-height: 28px; color: var(--ink-48); font-size: var(--fs-caption); }
body.shell-v2 .ev-vc-author { color: var(--ink-80); font-weight: 600; }
body.shell-v2 .ev-vc-del { margin-left: auto; min-height: 28px; padding: 0 8px; color: var(--ink-48); font-size: var(--fs-caption); }
body.shell-v2 .ev-vc-del:hover:not(:disabled) { color: var(--ink); }
body.shell-v2 .ev-vc-text { margin: 2px 0 0; color: var(--ink); font-size: var(--fs-body); line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
body.shell-v2 .ev-vc-form { flex: none; display: flex; align-items: flex-end; gap: 8px; padding: 12px 28px 0; border-top: 1px solid rgba(255,255,255,.08); }
body.shell-v2 .ev-vc-form + .ev-vm-foot { border-top: 0; padding-top: 10px; }
body.shell-v2 .ev-vc-input { flex: 1 1 auto; min-width: 0; box-sizing: border-box; min-height: 40px; max-height: 120px; resize: none; overflow-y: auto; padding: 9px 12px; border: 1px solid rgba(255,255,255,.14); border-radius: 12px; background: rgba(255,255,255,.06); color: #fff; font: inherit; font-size: var(--fs-body); line-height: 1.4; }
body.shell-v2 .ev-vc-input:focus { outline: none; border-color: rgba(255,255,255,.42); }
body.shell-v2 .ev-vc-input::placeholder { color: var(--ink-48); }
body.shell-v2 .ev-vc-side { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
body.shell-v2 .ev-vc-count { color: var(--ink-48); font-size: var(--fs-fine); font-variant-numeric: tabular-nums; }
body.shell-v2 .ev-vc-count.is-full { color: #ff8a8a; }
body.shell-v2 .ev-vc-send { min-height: 40px; }

body.shell-v2 .ev-vm-like { min-height: 48px; padding: 0 22px; gap: 8px; border-radius: var(--r-pill); font-size: var(--fs-body); font-weight: 600; }
body.shell-v2 .ev-vm-like.is-on { color: #ff5c8a; }
body.shell-v2 .ev-vm-like.is-mine:disabled { opacity: .55; cursor: not-allowed; }
body.shell-v2 .ev-vm-fav, body.shell-v2 .ev-vm-copy { flex: none; width: 48px; min-width: 48px; height: 48px; padding: 0; border-radius: 50%; }
body.shell-v2 .ev-vm-fav.is-on { color: #ffc94d; }
body.shell-v2 .ev-vm-fav:focus-visible, body.shell-v2 .ev-vm-copy:focus-visible { outline: none; box-shadow: 0 0 0 2px #fff; }
body.shell-v2 .ev-vm-like:focus-visible, body.shell-v2 .ev-vm-rail-btn:focus-visible, body.shell-v2 .ev-vm-close:focus-visible { outline: none; box-shadow: 0 0 0 2px #fff; }
body.shell-v2 .ev-vm-like.is-pop svg { animation: ev-vt-pop .32s ease-out; }

body.shell-v2 .ev-vm-panel .ev-vm-close { position: absolute; top: 10px; right: 10px; z-index: 5; width: 40px; height: 40px; min-width: 40px; padding: 0; border-radius: 50%; background: rgba(255,255,255,.1); color: #fff; }
body.shell-v2 .ev-vm-close:hover { background: rgba(255,255,255,.2); }

/* ▲▼ 넘기기 — 패널 오른쪽 바깥에 큰 원형 버튼 둘(52px). 컨테이너는 클릭을 통과시키고 버튼만 받는다. */
body.shell-v2 .ev-vm-rail { position: absolute; left: calc(50% + min(480px, 46vw) + 16px); top: 50%; transform: translateY(-50%); z-index: 6; display: flex; flex-direction: column; gap: 12px; pointer-events: none; }
body.shell-v2 .ev-vm-rail[hidden] { display: none; }
body.shell-v2 .ev-vm-rail-btn { pointer-events: auto; display: grid; place-items: center; width: 52px; height: 52px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.22); box-shadow: 0 0 0 1px rgba(255,255,255,.14); color: #fff; cursor: pointer; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background .15s, transform .12s; }
body.shell-v2 .ev-vm-rail-btn:hover { background: rgba(255,255,255,.36); }
body.shell-v2 .ev-vm-rail-btn:active { transform: scale(.94); }
/* 바깥 자리가 없는 폭(패널 960 + 여백 + 버튼 52 + 간격 16 ≈ 1112px 미만) — 패널 안쪽 오른쪽에 겹치고 본문이 비켜 선다. */
@media (max-width: 1111.98px) {
  body.shell-v2 .ev-vm-rail { left: calc(50% + min(480px, 46vw) - 62px); }
  body.shell-v2 .ev-vm-rail-btn { background: rgba(0,0,0,.5); box-shadow: 0 0 0 1px rgba(255,255,255,.24); }
  body.shell-v2 .ev-vm-text { padding-right: 76px; }
}

@media (max-width: 719.98px) {
  body.shell-v2 dialog.ev-vm[open] { display: block; background: #0f0f13; }
  body.shell-v2 .ev-vm-panel { display: flex; flex-direction: column; width: 100%; height: 100%; max-height: none; border: 0; border-radius: 0; box-shadow: none; transform: translateY(16px); }
  body.shell-v2 .ev-vm-stage { flex: none; justify-content: center; }
  body.shell-v2 .ev-vm-track { width: auto; height: min(62vh, calc(100vw * 16 / 9)); touch-action: none; }
  body.shell-v2 .ev-vm-rail { display: none; }
  body.shell-v2 .ev-vm-info { flex: 1 1 auto; }
  body.shell-v2 .ev-vm-nav { position: absolute; top: 14px; left: 12px; z-index: 5; padding: 0; pointer-events: none; }
  body.shell-v2 .ev-vm-count { padding: 4px 10px; border-radius: var(--r-pill); background: rgba(0,0,0,.55); color: #fff; }
  body.shell-v2 .ev-vm-text { padding: 16px 16px 12px; }
  body.shell-v2 .ev-vm-foot { padding: 10px 16px calc(12px + env(safe-area-inset-bottom, 0px)); background: #0f0f13; }
  body.shell-v2 .ev-vm-like { flex: 1 1 auto; justify-content: center; }
  body.shell-v2 .ev-vc-form { padding: 8px 16px 0; background: #0f0f13; }
  body.shell-v2 .ev-vc-input { font-size: max(16px, var(--fs-body)); max-height: 96px; } /* 16px 아래면 iOS 가 확대한다 */
  body.shell-v2 .ev-vm-panel .ev-vm-close { background: rgba(0,0,0,.6); box-shadow: 0 0 0 1px rgba(255,255,255,.28); }
}
@supports (height: 100dvh) {
  @media (max-width: 719.98px) { body.shell-v2 .ev-vm-track { height: min(62dvh, calc(100vw * 16 / 9)); } }
}
@media (prefers-reduced-motion: reduce) {
  body.shell-v2 .ev-vm-panel { transform: none; transition: none; }
  body.shell-v2 .ev-vm-media.is-loading .ev-vm-poster, body.shell-v2 .ev-vm-like.is-pop svg { animation: none; }
  body.shell-v2 .ev-vm-vid, body.shell-v2 .ev-vm-rail-btn { transition: none; }
  body.shell-v2 .ev-vm-track.is-anim .ev-vm-media { transition: none; }
}