/* Calculator "이 차, 실제 영상" — page tokens only (--text, --sub, --orange, --font-kr), so light and dark follow the site theme. */
.pf-vv { margin: 0; }
.pf-vv-scope { margin: 0 0 14px; font: 600 12px/1.6 var(--font-kr); color: var(--sub); word-break: keep-all; }
.pf-vv-list { list-style: none; margin: 0; padding: 0; display: flex; align-items: flex-start; gap: 20px; }
.pf-vv-list li { margin: 0; min-width: 0; }
/* each card keeps its own shape (Shorts 9:16, videos 16:9); flex-grow = aspect ratio, so covers in one row share a height */
.pf-vv-list li[data-kind="long"] { flex: 1.7778 1 0; }
.pf-vv-list li[data-kind="short"] { flex: .5625 1 0; max-width: 170px; }
.pf-vv-list li[data-kind="long"]:only-child { max-width: 360px; }
.pf-vv-tile { display: flex; flex-direction: column; gap: 10px; width: 100%; padding: 0; border: 0; border-radius: 12px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.pf-vv-thumb { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 12px; background: #111; }
.pf-vv-tile[data-kind="short"] .pf-vv-thumb { aspect-ratio: 9 / 16; }
.pf-vv-img { position: absolute; inset: 0; background: #111 center / cover no-repeat; transition: transform .35s ease; }
.pf-vv-text { display: block; min-width: 0; padding: 0 2px; }
.pf-vv-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font: 600 15px/1.5 var(--font-kr); color: var(--text); word-break: keep-all; overflow-wrap: anywhere; }
.pf-vv-tile[data-kind="short"] .pf-vv-title { -webkit-line-clamp: 3; font-size: 14px; }
.pf-vv-meta { display: flex; align-items: center; gap: 6px; margin-top: 4px; font: 500 12px/1.4 var(--font-kr); color: var(--sub); }
/* play mark lives beside the label, not on the cover art (covers carry their own text) */
.pf-vv-meta::before { content: ''; flex: none; border-style: solid; border-width: 4.5px 0 4.5px 7px; border-color: transparent transparent transparent var(--orange); }
.pf-vv-tile:hover .pf-vv-img { transform: scale(1.04); }
.pf-vv-tile:hover .pf-vv-title { text-decoration: underline; text-underline-offset: 4px; }
.pf-vv-tile:focus-visible { outline: 3px solid var(--orange); outline-offset: 4px; }
.pf-decision-answer .pf-vv-note { margin: 16px 0 4px; font-size: 12px; line-height: 1.7; color: var(--sub); }

/* player */
html.pf-vv-open { overflow: hidden; }
.pf-vv-dialog { margin: auto; padding: 52px 0 0; border: 0; background: transparent; max-width: none; max-height: none; overflow: visible; }
.pf-vv-dialog::backdrop { background: rgba(9, 9, 11, .84); }
.pf-vv-frame { position: relative; overflow: hidden; border-radius: 14px; background: #000; }
.pf-vv-frame[data-kind="long"] { width: min(92vw, 960px, calc((100vh - 150px) * 16 / 9)); aspect-ratio: 16 / 9; }
.pf-vv-frame[data-kind="short"] { width: min(92vw, calc(78vh * 9 / 16), 428px); aspect-ratio: 9 / 16; margin: 0 auto; }
.pf-vv-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.pf-vv-close { position: absolute; top: 0; right: 0; width: 40px; height: 40px; border: 1px solid rgba(255, 255, 255, .35); border-radius: 50%; background: rgba(9, 9, 11, .6); color: #fff; font: 400 24px/1 'Outfit', sans-serif; cursor: pointer; }
.pf-vv-close:focus-visible { outline: 3px solid var(--orange, #F07B1C); outline-offset: 3px; }
.pf-vv-dialog-title { margin: 12px auto 0; max-width: min(92vw, 960px); color: #F0F0F0; font: 600 14px/1.5 var(--font-kr, 'Noto Sans KR', sans-serif); text-align: center; word-break: keep-all; }

/* phones: a video takes the full width on top, Shorts sit two across below it */
@media (max-width: 560px) {
  .pf-vv-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 12px; }
  .pf-vv-list li[data-kind] { max-width: none; }
  .pf-vv-list li[data-kind="long"] { grid-column: 1 / -1; order: -1; }
  /* a lone Short (alone, or under a video) spans the row with its title beside it, so no half row stays empty */
  .pf-vv-list:not(:has(li[data-kind="short"] ~ li[data-kind="short"])) li[data-kind="short"] { grid-column: 1 / -1; }
  .pf-vv-list:not(:has(li[data-kind="short"] ~ li[data-kind="short"])) .pf-vv-tile[data-kind="short"] { flex-direction: row; align-items: center; gap: 16px; }
  .pf-vv-list:not(:has(li[data-kind="short"] ~ li[data-kind="short"])) .pf-vv-tile[data-kind="short"] .pf-vv-thumb { flex: none; width: 42%; max-width: 168px; }
  .pf-vv-list:not(:has(li[data-kind="short"] ~ li[data-kind="short"])) .pf-vv-tile[data-kind="short"] .pf-vv-title { -webkit-line-clamp: 4; font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .pf-vv-img { transition: none; }
  .pf-vv-tile:hover .pf-vv-img { transform: none; }
}