/* 홍보영상 (video-ui.js) — 모바일 우선, min-width 미디어쿼리만 */
.vd-root{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--gap,14px);min-width:0;overflow-wrap:anywhere}
.vd-title{gap:12px;align-items:flex-start}.vd-title>div{min-width:0}.vd-title h2{margin:0}.vd-title p{margin:4px 0 0;word-break:keep-all}
.vd-new{min-height:44px;flex:none;display:inline-flex;align-items:center;gap:6px}
.vd-quota{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:13px;color:var(--secondary)}.vd-quota b{color:var(--text)}
.vd-skeleton{display:grid;gap:10px}.vd-skeleton span{height:72px;border-radius:14px;background:linear-gradient(90deg,var(--panel),var(--panel-2),var(--panel));background-size:200% 100%;animation:vd-sh 1.4s linear infinite}
@keyframes vd-sh{to{background-position:-200% 0}}
.vd-steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:14px}
.vd-step{display:grid;gap:2px;padding:12px;border:1px solid var(--border);border-radius:14px;background:var(--panel-2);min-width:0}
.vd-step b{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:#0b1612;font-size:13px}
.vd-step span{font-weight:700;word-break:keep-all}.vd-step small{color:var(--secondary);font-size:12px;word-break:keep-all}
.vd-samples{display:flex;gap:12px;margin:0 0 14px;overflow-x:auto}.vd-samples figure{margin:0;flex:none;width:clamp(110px,30vw,180px)}
.vd-samples img{width:100%;height:auto;border-radius:12px;display:block}.vd-samples figcaption{font-size:12px;color:var(--secondary);margin-top:4px}
.vd-tpls{display:grid;gap:10px;margin-bottom:14px}
.vd-tpl{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;align-items:center;text-align:left;padding:14px;min-height:64px;border-radius:14px;border:1px solid var(--border);background:var(--panel-2);color:var(--text);cursor:pointer}
.vd-tpl .icon{grid-row:span 2;width:26px;height:26px}.vd-tpl b{min-width:0}.vd-tpl small{color:var(--secondary);min-width:0;word-break:keep-all}
.vd-tpl.active,.vd-tpl:hover,.vd-tpl:focus-visible{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
.vd-form h3,.vd-detail h3,.vd-edit h3{margin:14px 0 8px}.vd-form h3:first-child{margin-top:0}
.vd-fields{display:grid;gap:12px;margin-top:12px}.vd-fields .field{min-width:0}
.vd-multi{border:0;padding:0;margin:0;min-width:0}.vd-multi legend{padding:0;margin-bottom:6px}
.vd-root .chip input,.vd-admin .chip input{position:absolute;opacity:0;pointer-events:none}.vd-root label.chip,.vd-admin label.chip{position:relative;cursor:pointer;min-height:44px;display:inline-flex;align-items:center;gap:6px}
.vd-admin label.chip:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.vd-root label.chip:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.vd-root .chip small{color:inherit;opacity:.8;font-size:12px}
.vd-check{display:flex;gap:8px;align-items:flex-start;min-height:44px}.vd-check input{width:22px;height:22px;flex:none;margin-top:2px}
.vd-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.vd-actions .btn{min-height:44px}.vd-actions.vd-sub .btn{min-height:44px}
.vd-progress{display:grid;gap:8px;margin:12px 0}.vd-bar{height:10px;border-radius:6px;background:var(--panel-2);overflow:hidden}
.vd-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--amber));border-radius:6px;transition:width .6s ease}
.vd-progress p{display:flex;justify-content:space-between;gap:8px;margin:0;flex-wrap:wrap}
.vd-dhead{gap:8px;flex-wrap:wrap}.vd-dhead>div{min-width:0;word-break:keep-all}
.vd-status{display:inline-flex;align-items:center;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:700;white-space:nowrap;background:var(--panel-2);color:var(--secondary)}
.vd-status.wait{color:var(--amber)}.vd-status.ready{color:var(--accent)}.vd-status.warn{background:rgba(242,184,75,.15);color:var(--amber)}.vd-status.done{background:rgba(201,238,139,.15);color:var(--accent)}.vd-status.fail{background:rgba(255,90,90,.12);color:#ff8a8a}
.vd-cands{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.vd-cands.f16x9{grid-template-columns:1fr}
.vd-cand{display:grid;gap:6px;min-width:0}
.vd-media{position:relative;aspect-ratio:9/16;border-radius:12px;overflow:hidden;background:var(--panel-2)}
.vd-cands.f16x9 .vd-media{aspect-ratio:16/9}
.vd-media video{width:100%;height:100%;object-fit:cover;display:block;cursor:pointer}
.vd-media span{position:absolute;left:6px;top:6px;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:rgba(0,0,0,.6);color:#fff;font-weight:800;font-size:13px}
.vd-cands.skeleton .vd-media{animation:vd-pulse 1.6s ease-in-out infinite}@keyframes vd-pulse{50%{opacity:.5}}
.vd-pick{display:grid;gap:1px;text-align:left;padding:8px 10px;min-height:44px;border-radius:12px;border:1px solid var(--border);background:var(--panel-2);color:var(--text);cursor:pointer;min-width:0}
.vd-pick b{font-size:13px;word-break:keep-all;min-width:0}.vd-pick small{font-size:12px;color:var(--secondary);word-break:keep-all}.vd-pick em{font-style:normal;font-size:12px;color:var(--accent);font-weight:700}
.vd-cand.active .vd-pick{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}.vd-cand.active .vd-media{outline:2px solid var(--accent)}
.vd-edit{display:grid;gap:10px;margin-top:6px}.vd-edit .field{min-width:0}
.vd-result{display:grid;gap:14px}.vd-final{margin:0;display:grid;gap:8px;min-width:0}
.vd-final video{width:100%;max-height:70vh;border-radius:14px;background:#000;display:block}
.vd-final.f9x16 video{aspect-ratio:9/16;max-width:420px}.vd-final.f16x9 video{aspect-ratio:16/9}
.vd-final figcaption{display:grid;gap:6px}.vd-meta{font-size:13px;color:var(--secondary)}
.vd-dl{display:flex;flex-wrap:wrap;gap:6px}.vd-dl .btn{min-height:44px;display:inline-flex;align-items:center}
.vd-history ul{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:6px}
.vd-hrow{width:100%;display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px;min-height:56px;border-radius:12px;border:1px solid var(--border);background:var(--panel-2);color:var(--text);text-align:left;cursor:pointer}
.vd-hthumb{width:44px;height:44px;border-radius:8px;display:grid;place-items:center;background:var(--panel)}.vd-hthumb img{width:44px;height:44px;object-fit:cover;border-radius:8px;display:block}
.vd-hmeta{display:grid;min-width:0}.vd-hmeta b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vd-hmeta small{color:var(--secondary)}
.vd-admin{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--gap,14px);min-width:0;overflow-wrap:anywhere}.vd-astats{grid-template-columns:repeat(2,minmax(0,1fr))}.vd-astats .stat{display:grid;gap:4px;align-content:start;min-width:0}.vd-astats .stat small,.vd-astats .stat b{position:static;display:block}
.vd-admin .btn{min-height:44px;display:inline-flex;align-items:center}.vd-brand{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.vd-brand .btn{min-width:88px;justify-content:center}
.vd-aitem.warn{border-color:rgba(242,184,75,.5)}.vd-flag{color:var(--amber);font-size:13px;overflow-wrap:anywhere}
.vd-texts{margin:6px 0;padding-left:18px;font-size:13px;display:grid;gap:3px;overflow-wrap:anywhere}.vd-texts code{color:var(--secondary);font-size:12px}
.vd-review{display:grid;gap:8px;margin-top:8px}.vd-review .btn,.vd-aitem .btn{min-height:44px}
.vd-settings{display:grid;gap:10px}.vd-settings .table-wrap{overflow-x:auto}.vd-settings table{width:100%;border-collapse:collapse;font-size:14px}
.vd-settings th,.vd-settings td{padding:6px;text-align:left;border-bottom:1px solid var(--border)}.vd-settings td input{width:100%;min-width:64px;max-width:96px;min-height:44px}
.vd-settings .fields{display:grid;gap:10px}
@media (min-width:640px){.vd-tpls{grid-template-columns:repeat(2,minmax(0,1fr))}.vd-steps{grid-template-columns:repeat(4,minmax(0,1fr))}.vd-cands{gap:14px}.vd-settings .fields{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:768px){.vd-fields{grid-template-columns:repeat(2,minmax(0,1fr))}.vd-fields .vd-multi,.vd-fields .vd-actions,.vd-fields>p,.vd-fields label:has(textarea),.vd-fields .vd-check{grid-column:1/-1}.vd-astats{grid-template-columns:repeat(4,minmax(0,1fr))}.vd-cands.f16x9{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1024px){.vd-result{grid-template-columns:minmax(0,420px) minmax(0,1fr);align-items:start}}
@media (prefers-reduced-motion:reduce){.vd-skeleton span,.vd-cands.skeleton .vd-media{animation:none}.vd-bar i{transition:none}}
/* A안: 샘플 갤러리 · 실시간 미리보기 편집기 */
.vd-gallery{display:grid;gap:12px}.vd-gallery h3{margin:0}
.vd-samples-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.vd-sample{display:grid;gap:8px;min-width:0;align-content:start}.vd-sample .vd-media{aspect-ratio:9/16}
.vd-sample video{width:100%;height:100%;object-fit:cover;display:block;cursor:pointer}
.vd-wait{position:absolute;inset:0;display:grid;place-items:center;color:var(--secondary);font-size:13px;width:auto;height:auto;border-radius:0;background:none;left:0;top:0}
.vd-sample-meta{display:grid;min-width:0}.vd-sample-meta b{font-size:14px;word-break:keep-all}.vd-sample-meta small{color:var(--secondary);font-size:12px;word-break:keep-all}
.vd-sample .btn{min-height:44px;justify-content:center;display:inline-flex;align-items:center}
.vd-editor{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;min-width:0}
.vd-pv{position:sticky;top:64px;z-index:3;display:grid;gap:8px;justify-items:center;padding:8px 0;background:var(--canvas)}
.vd-pvbox{position:relative;border-radius:14px;overflow:hidden;background:#000;max-width:100%}
.vd-pvbox.f9x16{aspect-ratio:9/16;height:min(40vh,560px)}.vd-pvbox.f16x9{aspect-ratio:16/9;width:100%;max-width:640px}
.vd-pvbox video{width:100%;height:100%;object-fit:cover;display:block}
.vd-pvstate{position:absolute;left:8px;right:8px;bottom:8px;padding:6px 10px;border-radius:10px;background:rgba(0,0,0,.65);color:#fff;font-size:12px;text-align:center}
.vd-pvstate:empty,.vd-pvstate[hidden]{display:none}
.vd-pv .kind-chips{justify-content:center}.vd-pv .chip{min-height:44px}.vd-pv p{margin:0;text-align:center}
.vd-edform{display:grid;gap:10px;min-width:0}.vd-edform h3{margin:6px 0 0}.vd-edform>.between{gap:8px;flex-wrap:wrap}
.vd-edform .vd-fields{margin-top:0}.vd-copyhead{gap:8px;align-items:center}.vd-copyhead .btn{min-height:44px}
.vd-err{color:#ff9a9a;font-size:13px;margin:0;overflow-wrap:anywhere}.vd-err:empty{display:none}
.vd-vars .chip{min-height:44px}
@media (min-width:640px){.vd-samples-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1024px){.vd-editor{grid-template-columns:minmax(0,360px) minmax(0,1fr);align-items:start}.vd-pv{top:84px;padding:0;background:none}.vd-pvbox.f9x16{height:auto;width:100%}}
@media (min-width:1280px){.vd-samples-grid{grid-template-columns:repeat(6,minmax(0,1fr))}}
/* 휴대폰: 위에 고정된 미리보기 뒤로 입력칸·버튼이 숨지 않도록 스크롤 여백 */
.vd-edform :is(input,textarea,button,label,fieldset,h3){scroll-margin-top:calc(min(40vh,560px) + 150px)}
@media (min-width:1024px){.vd-edform :is(input,textarea,button,label,fieldset,h3){scroll-margin-top:100px}}
/* 편집기 안 입력칸: 미리보기 옆 열이 좁은 1024~1279px에서는 한 줄씩 */
.vd-editor .vd-fields{grid-template-columns:minmax(0,1fr)}.vd-editor .vd-fields .field input{min-width:0;width:100%;max-width:100%}
@media (min-width:1280px){.vd-editor .vd-fields{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* 샘플 '준비 중': 후보 번호 배지(.vd-media span)보다 우선. 가운데에, 만드는 중임을 알 수 있게 은은히 깜빡 */
.vd-media .vd-wait{position:absolute;inset:0;left:0;top:0;width:auto;height:auto;border-radius:0;background:none;display:grid;place-items:center;color:var(--secondary);font-size:13px;font-weight:700;white-space:nowrap;animation:vd-pulse 1.6s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.vd-media .vd-wait{animation:none}}