/* 투표 탭(#/events/…/vote · web/ui/eventVote*.js · 11-02 오너: 인기 투표 = 순수 영상 갤러리) — 틈 없는 9:16 타일 격자. 카드 껍데기 · 둥근 모서리 · 테두리 없음.
 *   페이지 여백(--page-gutter)만큼 음수 마진으로 가장자리까지 채운다. 타일 위 글자는 썸네일 밝기와 무관하게 읽히도록 하단 그라데이션 위에만 둔다.
 *   글자 크기는 사다리 값만. event.css 뒤에 싣는다. */

body.shell-v2 .ev-pane--vote { margin: 0 calc(-1 * var(--page-gutter)); padding-top: 12px; }
/* 페이지가 가로를 잘라 두면(overflow-x: clip) 음수 마진이 잘린다 — 투표 탭에서만 풀고, 히어로 쪽(.ev-top)이 대신 자른다(옆으로 번지는 글로우 방지). */
body.shell-v2 .ev-page:has(.ev-pane--vote) { overflow-x: visible; }
body.shell-v2 .ev-page:has(.ev-pane--vote) .ev-top { overflow-x: clip; overflow-clip-margin: var(--page-gutter); }
body.shell-v2 .ev-vgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; }
@media (min-width: 640px) { body.shell-v2 .ev-vgrid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { body.shell-v2 .ev-vgrid { grid-template-columns: repeat(4, 1fr); } }
/* 섹션(11-04 오너 시안): 대상 · 최우수상 · 우수상 · 인기상 후보 + 전체 작품. 제목 줄만 페이지 여백을 되돌린다(격자는 가장자리까지). */
body.shell-v2 .ev-vsec { margin: 0 0 28px; }
body.shell-v2 .ev-vsec-h { margin: 0 0 10px; padding: 0 var(--page-gutter); display: flex; align-items: baseline; gap: 8px; font-size: var(--fs-body); font-weight: 600; color: var(--ink); }
body.shell-v2 .ev-vsec-n { font-size: var(--fs-caption); font-weight: 400; color: var(--ink-48); }
body.shell-v2 .ev-vsec-more { height: 1px; }
body.shell-v2 .ev-pane--vote > .state-empty, body.shell-v2 .ev-pane--vote > .state-error { margin: 24px var(--page-gutter); }

body.shell-v2 .ev-vt { position: relative; aspect-ratio: 9 / 16; overflow: hidden; background: #16161b; min-width: 0; contain: layout paint; }
body.shell-v2 .ev-vt-art { position: absolute; inset: 0; background: linear-gradient(160deg, #24232b, #121216); }
body.shell-v2 .ev-vt-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
body.shell-v2 .ev-vt-img { opacity: 0; transition: opacity .25s ease; }
body.shell-v2 .ev-vt-img.is-ready { opacity: 1; }
body.shell-v2 .ev-vt-nothumb { position: absolute; inset: 0; display: none; place-items: center; color: var(--ink-48); }
body.shell-v2 .ev-vt.is-nothumb .ev-vt-nothumb { display: grid; }

body.shell-v2 .ev-vt-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-vt-hit:focus-visible { outline: none; box-shadow: inset 0 0 0 3px #fff; }

body.shell-v2 .ev-vt-shade { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; align-items: flex-end; gap: 4px; padding: 28px 8px 8px 10px; background: linear-gradient(to top, rgba(0,0,0,.78), rgba(0,0,0,.42) 55%, rgba(0,0,0,0)); pointer-events: none; }
body.shell-v2 .ev-vt-title { flex: 1 1 auto; min-width: 0; padding-bottom: 12px; color: #fff; font-size: var(--fs-caption); font-weight: 600; line-height: 1.3; text-shadow: 0 1px 3px rgba(0,0,0,.7); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

body.shell-v2 .ev-vt-like { pointer-events: auto; flex: none; min-width: 44px; min-height: 44px; padding: 0 4px; gap: 4px; background: transparent; color: #fff; font-size: var(--fs-caption); font-weight: 600; text-shadow: 0 1px 3px rgba(0,0,0,.7); filter: drop-shadow(0 1px 2px rgba(0,0,0,.6)); }
body.shell-v2 .ev-vt-like:hover:not(:disabled) { background: transparent; color: #fff; }
body.shell-v2 .ev-vt-like.is-on { color: #ff5c8a; }
body.shell-v2 .ev-vt-like.is-mine:disabled { opacity: .55; cursor: not-allowed; }
body.shell-v2 .ev-vt-like.is-closed:disabled, body.shell-v2 .ev-vm-like.is-closed:disabled { opacity: 1; cursor: default; } /* 마감 뒤 열람 — 개수와 내 표시는 그대로 보인다 */
body.shell-v2 .ev-vbanner { margin: 0 0 8px; padding: 0 4px; font-size: var(--fs-caption); color: var(--ink-48); }
/* 💬 댓글 수(11-02 오너) — ♥ 와 같은 글자 · 그림자. 누를 수 없다(아래 타일 버튼으로 눌림이 지나간다). 좁은 타일에서도 제목만 줄어든다. */
body.shell-v2 .ev-vt-cmt { flex: none; display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 2px 0 0; color: #fff; font-size: var(--fs-caption); font-weight: 600; font-variant-numeric: tabular-nums; text-shadow: 0 1px 3px rgba(0,0,0,.7); filter: drop-shadow(0 1px 2px rgba(0,0,0,.6)); }
body.shell-v2 .ev-vt-cmt svg { flex: none; }
body.shell-v2 .ev-vt-like:focus-visible { outline: none; box-shadow: 0 0 0 2px #fff; border-radius: var(--r-pill); }
body.shell-v2 .ev-vt-like.is-pop svg { animation: ev-vt-pop .32s ease-out; }
@keyframes ev-vt-pop { 0% { transform: scale(1); } 45% { transform: scale(1.32); } 100% { transform: scale(1); } }

/* ☆ 즐겨찾기(11-02 오너) — 타일 오른쪽 위. 켠 것은 채운 노란 별로 늘 보이고, 안 켠 것은 작게 흐리게(마우스가 있는 화면은 타일에 올렸을 때만). 재생 층(hit) 위라 눌러도 창이 열리지 않는다. */
body.shell-v2 .ev-vt-fav { position: absolute; top: 2px; right: 2px; z-index: 2; min-width: 44px; min-height: 44px; padding: 0; background: transparent; color: #fff; opacity: .72; filter: drop-shadow(0 1px 2px rgba(0,0,0,.7)); transition: opacity .15s ease; }
body.shell-v2 .ev-vt-fav:hover { background: transparent; color: #fff; opacity: 1; }
body.shell-v2 .ev-vt-fav.is-on { color: #ffc94d; opacity: 1; }
body.shell-v2 .ev-vt-fav:focus-visible { outline: none; opacity: 1; box-shadow: inset 0 0 0 2px #fff; border-radius: var(--r-pill); }
@media (hover: hover) {
  body.shell-v2 .ev-vt-fav:not(.is-on) { opacity: 0; }
  body.shell-v2 .ev-vt:hover .ev-vt-fav:not(.is-on), body.shell-v2 .ev-vt:focus-within .ev-vt-fav:not(.is-on) { opacity: .85; }
}

body.shell-v2 .ev-vt--skel { background: linear-gradient(100deg, var(--surface-1) 30%, rgba(255,255,255,.06) 50%, var(--surface-1) 70%); background-size: 200% 100%; animation: ev-vt-shimmer 1.4s linear infinite; }
@keyframes ev-vt-shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) {
  body.shell-v2 .ev-vt--skel, body.shell-v2 .ev-vt-like.is-pop svg { animation: none; }
  body.shell-v2 .ev-vt-img, body.shell-v2 .ev-vt-fav { transition: none; }
}
