/* 영상 편집 가이드(2026-10-05) — 본문 태그 [[shot]]·[[shots]]·[[vhelp]] (partials/rich_shot·rich_vhelp). 정적 페이지(.prose.post-body 760px) 안에서 쓴다. */

/* 화면 캡처: 한 장은 본문보다 넓게(1100px 이상 화면에서 1080px), 여러 장은 나란히 */
.prose .vh-shot{ margin:26px 0 10px }
.prose .vh-shot__grid{ display:grid; gap:14px }
.prose .vh-shot--2 .vh-shot__grid{ grid-template-columns:repeat(2, minmax(0, 1fr)) }
.prose .vh-shot--3 .vh-shot__grid{ grid-template-columns:repeat(3, minmax(0, 1fr)) }
.prose .vh-shot--4 .vh-shot__grid{ grid-template-columns:repeat(4, minmax(0, 1fr)) }
.prose .vh-shot__item{ display:flex; flex-direction:column; gap:8px; border-bottom:0; color:inherit; text-decoration:none }
.prose .vh-shot__item img{ display:block; width:100%; height:auto; border:1.5px solid var(--line-strong, #1a1a1a); border-radius:12px; background:#111;
  box-shadow:0 10px 30px -18px rgba(0,0,0,.45) }
.prose .vh-shot__item:hover img{ border-color:var(--ink, #1a1a1a) }
.prose .vh-shot__cap{ font-size:var(--fs-sm, 14px); line-height:1.55; color:var(--ink-2, #444) }
.prose .vh-shot figcaption{ margin-top:10px; font-size:var(--fs-sm, 14px); line-height:1.6; color:var(--ink-2, #444); text-align:center }
@media (min-width:1100px){
  .prose.post-body > .vh-shot:not(.vh-shot--many),
  .prose.post-body > .vh-shot--3, .prose.post-body > .vh-shot--4{ width:min(1080px, 100vw - 2 * var(--gutter, 24px)); margin-left:50%; transform:translateX(-50%) }
}
@media (max-width:640px){
  .prose .vh-shot--3 .vh-shot__grid, .prose .vh-shot--4 .vh-shot__grid{ grid-template-columns:repeat(2, minmax(0, 1fr)) }
}

/* 가이드 목차: 일곱 장 카드(지금 페이지 강조) */
.prose .vh-nav{ display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:12px; margin:26px 0 8px }
@media (min-width:1100px){ .prose.post-body > .vh-nav{ width:min(1080px, 100vw - 2 * var(--gutter, 24px)); margin-left:50%; transform:translateX(-50%) } }
.prose .vh-nav__item{ display:flex; flex-direction:column; gap:4px; padding:10px 10px 12px; border:1.5px solid var(--line, #d6d6d6); border-radius:12px;
  border-bottom:1.5px solid var(--line, #d6d6d6); color:inherit; text-decoration:none; background:var(--paper, #fff); transition:border-color .15s, transform .15s }
.prose .vh-nav__item:hover{ border-color:var(--ink, #1a1a1a); transform:translateY(-2px) }
.prose .vh-nav__item.is-on{ border-color:var(--ink, #1a1a1a); background:var(--ink, #1a1a1a); color:var(--paper, #fff) }
.prose .vh-nav__item.is-on small{ color:rgba(255,255,255,.75) }
.prose .vh-nav__img{ display:block; border-radius:8px; overflow:hidden; aspect-ratio:16/10; background:#111; margin-bottom:6px }
.prose .vh-nav__img img{ display:block; width:100%; height:100%; object-fit:cover }
.prose .vh-nav__no{ font-size:11px; letter-spacing:.12em; opacity:.6 }
.prose .vh-nav__item b{ font-size:var(--fs-sm, 15px); line-height:1.35 }
.prose .vh-nav__item small{ font-size:12.5px; line-height:1.45; color:var(--ink-2, #555) }

/* 본문 보조: 따라 하기 번호 목록(ol.vh-steps)·팁 상자(blockquote)·모드 비교표(table.vh-modes) */
.prose ol.vh-steps{ list-style:none; padding-left:0; counter-reset:vh }
.prose ol.vh-steps > li{ counter-increment:vh; position:relative; padding:6px 0 6px 40px }
.prose ol.vh-steps > li::before{ content:counter(vh); position:absolute; left:0; top:6px; width:26px; height:26px; border-radius:50%;
  background:var(--ink, #1a1a1a); color:var(--paper, #fff); font:700 13px/26px var(--mono, monospace); text-align:center }
.prose blockquote{ margin:22px 0; padding:14px 18px; border-left:4px solid var(--ink, #1a1a1a); background:var(--paper-2, #f4f2ee); border-radius:0 10px 10px 0; color:var(--ink-2, #333) }
.prose blockquote p{ margin-top:6px }
.prose blockquote p:first-child{ margin-top:0 }
.prose .vh-modes td:first-child, .prose .vh-modes th:first-child{ white-space:nowrap; font-weight:700 }

/* 내 작업실 · 영상 쇼츠 목록 위 「영상 편집 도움말」 카드(partials/vhelp_card) */
.vh-card{ margin:22px 0 8px; padding:20px 22px; border:1.5px solid var(--line-strong, #1a1a1a); border-radius:16px; background:var(--paper, #fff) }
.vh-card__head h2{ font-family:var(--disp, inherit); font-weight:700; font-size:var(--fs-lg, 22px); margin:6px 0 6px; line-height:1.3 }
.vh-card__head p{ color:var(--ink-2, #444); font-size:var(--fs-sm, 15px); line-height:1.7; max-width:72ch }
.vh-card__modes{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:12px; margin-top:16px }
.vh-card__mode{ display:flex; flex-direction:column; gap:4px; padding:10px; border:1.5px solid var(--line, #d6d6d6); border-radius:12px; color:inherit; text-decoration:none;
  transition:border-color .15s, transform .15s }
.vh-card__mode:hover{ border-color:var(--ink, #1a1a1a); transform:translateY(-2px) }
.vh-card__img{ display:block; aspect-ratio:16/10; border-radius:8px; overflow:hidden; background:#111; margin-bottom:6px }
.vh-card__img img{ display:block; width:100%; height:100%; object-fit:cover }
.vh-card__mode b{ font-size:var(--fs-sm, 15px) }
.vh-card__mode small{ font-size:12.5px; line-height:1.45; color:var(--ink-2, #555) }
.vh-card__links{ display:flex; flex-wrap:wrap; gap:6px 18px; margin-top:14px; font-size:var(--fs-sm, 14px) }
.vh-card__links a{ border-bottom:1px dashed var(--line-strong, #1a1a1a) }
@media (max-width:900px){ .vh-card__modes{ grid-template-columns:repeat(2, minmax(0, 1fr)) } }

/* 휴대폰: 목차 카드 일곱 장은 세로로 쌓지 않고 가로로 넘긴다 */
@media (max-width:640px){
  .prose .vh-nav{ grid-auto-flow:column; grid-template-columns:none; grid-auto-columns:minmax(150px, 44%); overflow-x:auto; scroll-snap-type:x mandatory;
    padding-bottom:8px; -webkit-overflow-scrolling:touch }
  .prose .vh-nav__item{ scroll-snap-align:start }
}