/* AI 영상 스튜디오 — 다크 작업실: 좌 설정 패널 + 우 결과 피드 */
:root{--k0:#0a0a10;--k1:#13131b;--k2:#1c1c27;--k3:#2a2a38;--k4:#3a3a4c;--t0:#f4f4f8;--t1:#b9b9c9;--t2:#7d7d93;--acc:#d6ff3a;--pk:#ff3ea5;--vi:#7b2cbf;--ok:#3ddc97;--bad:#ff5d6c;--r:14px;color-scheme:dark}
*{box-sizing:border-box}
html,body{margin:0;background:var(--k0);color:var(--t0);font-family:"Pretendard","Space Grotesk",system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased}
body.vs{padding-top:60px;min-height:100vh}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,a:focus-visible,.vs-drop:focus-visible,textarea:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
[hidden]{display:none!important}

/* ── 레이아웃 ── */
.vs-studio{display:grid;grid-template-columns:400px minmax(0,1fr);gap:20px;max-width:1600px;margin:0 auto;padding:20px}
.vs-panel{position:sticky;top:80px;height:calc(100vh - 100px);display:flex;flex-direction:column;background:var(--k1);border:1px solid var(--k2);border-radius:20px;overflow:hidden}
.vs-panel-scroll{flex:1;overflow:auto;padding:18px 18px 8px;scrollbar-width:thin;scrollbar-color:var(--k3) transparent}
.vs-sec{margin-bottom:20px}
.vs-lbl{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin:0 0 10px;font-size:13px;font-weight:700;color:var(--t0);letter-spacing:-.01em}
.vs-lbl small{font-weight:500;font-size:11px;color:var(--t2)}

/* 모델 카드 */
.vs-models{display:grid;gap:8px}
.vs-model{display:grid;grid-template-columns:1fr auto;gap:2px 8px;text-align:left;padding:12px 14px;background:var(--k2);border:1px solid transparent;border-radius:12px;transition:.15s}
.vs-model:hover{border-color:var(--k4)}
.vs-model b{font-size:14px}
.vs-model em{font-style:normal;font-size:11px;color:var(--t2);align-self:center}
.vs-model span{grid-column:1/-1;font-size:12px;color:var(--t1);line-height:1.45}
.vs-model.on{border-color:var(--acc);background:linear-gradient(180deg,rgba(214,255,58,.08),rgba(214,255,58,.02))}
.vs-model.on em{color:var(--acc)}

/* 프레임 업로드 */
.vs-frames{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.vs-drop{position:relative;aspect-ratio:4/3;border:1.5px dashed var(--k4);border-radius:12px;background:var(--k2);display:grid;place-items:center;cursor:pointer;overflow:hidden;transition:.15s}
.vs-drop:hover,.vs-drop.over{border-color:var(--acc);background:#20202c}
.vs-drop.has{border-style:solid;border-color:var(--k3)}
.vs-drop.dim{opacity:.45}
.vs-drop-empty{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:12px;color:var(--t1)}
.vs-drop-empty b{font-size:22px;font-weight:400;color:var(--t2)}
.vs-drop img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vs-drop-x{position:absolute;top:6px;right:6px;width:26px;height:26px;border-radius:50%;border:0;background:rgba(0,0,0,.7);font-size:16px;line-height:1}
.vs-drop-busy{position:absolute;inset:0;display:grid;place-items:center;background:rgba(10,10,16,.75);font-size:12px}
.vs-hint{margin:8px 0 0;font-size:11.5px;color:var(--t2);min-height:1em}

/* 프롬프트 */
textarea#vs-prompt{width:100%;resize:vertical;min-height:110px;padding:12px 14px;border-radius:12px;border:1px solid var(--k3);background:var(--k2);color:var(--t0);font:inherit;font-size:14px;line-height:1.55}
textarea#vs-prompt::placeholder{color:var(--t2)}
textarea#vs-prompt:focus{border-color:var(--k4);outline:none}
.vs-ideas{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.vs-ideas button{border:0;background:transparent;color:var(--t2);font-size:12px;padding:3px 8px;border-radius:6px;border:1px solid var(--k3)}
.vs-ideas button:hover{color:var(--t0);border-color:var(--k4)}

/* 칩 */
.vs-chips{display:flex;flex-wrap:wrap;gap:6px}
.vs-chip{display:inline-flex;align-items:center;gap:6px;padding:7px 11px;border-radius:999px;border:1px solid var(--k3);background:var(--k2);font-size:12.5px;color:var(--t1);transition:.12s}
.vs-chip:hover{color:var(--t0);border-color:var(--k4)}
.vs-chip.on{background:var(--t0);color:var(--k0);border-color:var(--t0);font-weight:600}
.vs-chip i{font-style:normal;display:inline-grid;place-items:center;width:16px;height:16px;border-radius:50%;background:var(--pk);color:#fff;font-size:10px;font-weight:800}

/* 세그먼트 */
.vs-opts{display:grid;gap:14px}
.vs-seg{display:flex;flex-wrap:wrap;gap:4px;background:var(--k2);padding:4px;border-radius:10px}
.vs-seg button{flex:1 0 auto;min-width:48px;padding:7px 8px;border:0;border-radius:7px;background:transparent;font-size:12.5px;color:var(--t1)}
.vs-seg button.on{background:var(--k4);color:var(--t0);font-weight:600}
.vs-switch{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--t1);cursor:pointer;margin-top:10px}
.vs-switch input{position:absolute;opacity:0;pointer-events:none}
.vs-switch span{width:36px;height:20px;border-radius:999px;background:var(--k3);position:relative;transition:.15s;flex:none}
.vs-switch span::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:.15s}
.vs-switch input:checked+span{background:var(--acc)}
.vs-switch input:checked+span::after{left:18px;background:var(--k0)}
.vs-switch input:focus-visible+span{outline:2px solid var(--acc);outline-offset:2px}

/* 생성 버튼 */
.vs-go{padding:12px 18px 16px;border-top:1px solid var(--k2);background:var(--k1)}
.vs-msg{margin:0 0 8px;font-size:12.5px;color:var(--bad);min-height:0}
.vs-msg:empty{display:none}
.vs-msg.ok{color:var(--ok)}
.vs-btn{display:flex;align-items:center;justify-content:center;width:100%;height:50px;border:0;border-radius:12px;font-size:15px;font-weight:800;letter-spacing:-.01em;color:var(--k0);background:var(--acc);text-decoration:none;transition:transform .1s,filter .15s}
.vs-btn:hover:not(:disabled){filter:brightness(1.07)}
.vs-btn:active:not(:disabled){transform:scale(.99)}
.vs-btn:disabled{background:var(--k3);color:var(--t2);cursor:not-allowed}
.vs-btn-s{display:inline-flex;width:auto;height:44px;padding:0 24px;margin-top:8px}
.vs-left{margin:8px 0 0;text-align:center;font-size:12px;color:var(--t2)}

/* ── 결과 피드 ── */
.vs-feed{min-width:0}
.vs-feed-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:4px 0 16px}
.vs-feed-head h1{margin:0;font-size:22px;letter-spacing:-.03em}
.vs-link{color:var(--t1);font-size:13px;text-decoration:none}
.vs-link:hover{color:var(--t0)}
.vs-jobs{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px}
.vs-job{background:var(--k1);border:1px solid var(--k2);border-radius:16px;overflow:hidden;display:flex;flex-direction:column}
.vs-media{position:relative;aspect-ratio:16/9;background:#000}
.vs-media video{width:100%;height:100%;object-fit:contain;display:block;background:#000}
.vs-play{position:absolute;right:10px;bottom:10px;width:38px;height:38px;border-radius:50%;border:0;background:rgba(0,0,0,.65);font-size:13px;opacity:.85}
.vs-play:hover{opacity:1;background:var(--acc);color:var(--k0)}
.vs-wait,.vs-fail{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:16px}
.vs-wait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(14px) brightness(.45);transform:scale(1.1)}
.vs-wait{background:radial-gradient(circle at 30% 30%,rgba(255,62,165,.18),transparent 55%),radial-gradient(circle at 70% 70%,rgba(123,44,191,.22),transparent 55%),var(--k1);overflow:hidden}
.vs-wait-in{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:13px;color:var(--t1)}
.vs-wait-in b{font-size:15px;color:var(--t0)}
.vs-wait-in small{margin-top:6px;font-size:11px;color:var(--t2);max-width:240px}
.vs-spin{width:28px;height:28px;border-radius:50%;border:3px solid rgba(255,255,255,.15);border-top-color:var(--acc);animation:vs-spin 1s linear infinite;margin-bottom:6px}
@keyframes vs-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.vs-spin{animation-duration:3s}}
.vs-fail{background:linear-gradient(180deg,rgba(255,93,108,.08),transparent),var(--k1)}
.vs-fail b{color:var(--bad);font-size:14px}
.vs-fail p{margin:6px 0;font-size:12.5px;color:var(--t1);line-height:1.5}
.vs-fail small{font-size:11px;color:var(--t2)}
.vs-job-b{padding:12px 14px 14px;display:flex;flex-direction:column;gap:8px;flex:1}
.vs-job-p{margin:0;font-size:13.5px;line-height:1.5;color:var(--t0);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.vs-job-m{margin:0;font-size:11.5px;color:var(--t2);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.vs-st{padding:2px 8px;border-radius:999px;font-weight:700;font-size:10.5px;background:var(--k3);color:var(--t1)}
.vs-st-done{background:rgba(61,220,151,.15);color:var(--ok)}
.vs-st-failed{background:rgba(255,93,108,.15);color:var(--bad)}
.vs-st-queued,.vs-st-running{background:rgba(214,255,58,.12);color:var(--acc)}
.vs-job-a{display:flex;gap:6px;flex-wrap:wrap;margin-top:auto}
.vs-a{padding:6px 12px;border-radius:8px;border:1px solid var(--k3);background:transparent;font-size:12px;color:var(--t1);text-decoration:none}
.vs-a:hover{color:var(--t0);border-color:var(--k4)}
.vs-a-del:hover{color:var(--bad);border-color:var(--bad)}
.vs-a:disabled{opacity:.5}

/* 빈 상태 */
.vs-empty{grid-column:1/-1;text-align:center;padding:56px 20px;border:1px dashed var(--k3);border-radius:20px;background:radial-gradient(circle at 50% 0%,rgba(123,44,191,.14),transparent 60%)}
.vs-empty h2{margin:0 0 6px;font-size:20px;letter-spacing:-.02em}
.vs-empty p{margin:0;color:var(--t1);font-size:14px}
.vs-ex{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;margin-top:22px;text-align:left}
.vs-ex button{padding:14px;border-radius:12px;border:1px solid var(--k3);background:var(--k1);font-size:12.5px;line-height:1.5;color:var(--t1);text-align:left}
.vs-ex button:hover{border-color:var(--acc);color:var(--t0)}
.vs-ex b{display:block;margin-bottom:4px;font-size:13px;color:var(--t0)}

/* ── 라이브러리 ── */
.vs-lib{max-width:1600px;margin:0 auto;padding:24px 20px 60px}
.vs-filter{display:flex;gap:4px;background:var(--k1);border:1px solid var(--k2);padding:4px;border-radius:999px}
.vs-filter button{border:0;background:transparent;padding:7px 14px;border-radius:999px;font-size:13px;color:var(--t1)}
.vs-filter button.on{background:var(--t0);color:var(--k0);font-weight:700}

/* ── 모달 ── */
.vs-modal{border:0;padding:0;background:transparent;max-width:min(1100px,94vw);width:100%;color:var(--t0)}
.vs-modal::backdrop{background:rgba(0,0,0,.82);backdrop-filter:blur(4px)}
.vs-modal-in{position:relative;background:var(--k1);border:1px solid var(--k2);border-radius:18px;padding:14px}
.vs-modal video{width:100%;max-height:72vh;border-radius:10px;background:#000;display:block}
.vs-modal p{font-size:14px;line-height:1.55;color:var(--t1);margin:12px 4px}
.vs-modal-x{position:absolute;top:-14px;right:-14px;width:34px;height:34px;border-radius:50%;border:0;background:var(--t0);color:var(--k0);font-size:20px;line-height:1;z-index:2}

/* ── 설명(AEO) ── */
.vs-about{max-width:880px;margin:40px auto 80px;padding:0 20px;color:var(--t1);font-size:15px;line-height:1.75}
.vs-about h2{color:var(--t0);font-size:24px;letter-spacing:-.03em;margin:0 0 12px}
.vs-about h3{color:var(--t0);font-size:17px;margin:32px 0 10px}
.vs-about strong{color:var(--t0)}
.vs-table{overflow-x:auto;margin:20px 0;border:1px solid var(--k2);border-radius:12px}
.vs-about table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:560px}
.vs-about th,.vs-about td{padding:10px 14px;text-align:left;border-bottom:1px solid var(--k2)}
.vs-about th{color:var(--t0);background:var(--k1);font-weight:700}
.vs-about tr:last-child td{border-bottom:0}
.vs-about ol{padding-left:20px}
.vs-about details{border:1px solid var(--k2);border-radius:12px;padding:12px 16px;margin-bottom:8px;background:var(--k1)}
.vs-about summary{cursor:pointer;color:var(--t0);font-weight:600}
.vs-about details p{margin:8px 0 0;font-size:14px}
.vs-updated{margin-top:28px;font-size:12px;color:var(--t2)}

/* ── 반응형 ── */
@media (max-width:900px){
  .vs-studio{grid-template-columns:1fr;padding:12px}
  .vs-panel{position:static;height:auto}
  .vs-panel-scroll{overflow:visible}
  .vs-go{position:sticky;bottom:0;padding-bottom:max(16px,env(safe-area-inset-bottom));z-index:5}
  .vs-jobs{grid-template-columns:1fr}
}
@media (max-width:640px){body.vs{padding-top:56px}.vs-lib{padding:16px 12px 40px}.vs-modal-x{top:6px;right:6px}}