/* UIV2 result — 이 파일은 해당 화면 카드(W) 한 명만 고친다. 모든 규칙은 .ui-v2 아래에만 */
/* W4: 04 결과물(results.js ResultV2 · engine.js 완성 직후) + 14 영상 만드는 중(engine.js 진행) + 편집 화면 버튼 위계 */

/* 04 결과물 — 제목 줄 */
html.ui-v2 .v2-res{margin:0 0 48px}
html.ui-v2 .v2-res-head{margin:8px 0 32px}
html.ui-v2 .v2-res-title{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
html.ui-v2 .v2-res-title h1,html.ui-v2 .v2-res-title h2{margin:0;color:var(--text-1)}
html.ui-v2 .v2-res-sub{margin:8px 0 0;font-size:17px;line-height:25.5px;font-weight:400;color:var(--text-2)}

/* 왼쪽 플레이어 카드 · 오른쪽 카드 묶음 */
html.ui-v2 .v2-res-grid{display:grid;grid-template-columns:400px minmax(0,1fr);gap:32px;align-items:start}
html.ui-v2 .v2-res-player{padding:20px}
html.ui-v2 .v2-res-player:hover,html.ui-v2 .v2-res-side .v2-card:hover{box-shadow:var(--shadow-1)}
html.ui-v2 .v2-res-frame{position:relative;width:100%;max-width:360px;margin:0 auto}
html.ui-v2 .v2-res-frame video{display:block;width:100%;aspect-ratio:9/16;object-fit:contain;background:#131416;border-radius:var(--r-md)}
html.ui-v2 .v2-res-ai{position:absolute;top:16px;left:16px;z-index:1;padding:2px 10px;border-radius:4px;background:var(--ai-soft);color:var(--ai);font:700 13px/19.5px Pretendard,system-ui,sans-serif;pointer-events:none}
html.ui-v2 .v2-res-side{display:grid;gap:24px;min-width:0}
html.ui-v2 .v2-res-actions{display:grid;gap:12px;padding:24px}
html.ui-v2 .v2-res-actions .v2-btn-primary,html.ui-v2 .v2-res-actions .v2-btn-weak{width:100%;box-sizing:border-box}
html.ui-v2 .v2-res-actions .warn{margin:0}
html.ui-v2 .v2-res-picks{display:flex;flex-wrap:wrap;gap:8px}
html.ui-v2 .v2-res-hint{margin:0;font-size:13px;line-height:19.5px;color:var(--text-2)}
html.ui-v2 .v2-res-links{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px}
html.ui-v2 .v2-res-links .v2-btn-weak{width:auto}
html.ui-v2 .v2-res-guide summary{cursor:pointer;list-style:none;display:inline}
html.ui-v2 .v2-res-guide summary::-webkit-details-marker{display:none}
html.ui-v2 .v2-res-guide[open] summary{display:block;margin-bottom:8px}
/* 올리는 방법 안의 탭(growth.js)은 약한 버튼 — 주 버튼은 화면에 1개 */
html.ui-v2 .v2-res-guide .btn,html.ui-v2 .v2-res-guide .btn.sm{background:var(--accent-soft) !important;color:var(--accent) !important;border-color:transparent !important}
html.ui-v2 .v2-res-guide .btn[aria-selected="true"]{box-shadow:inset 0 0 0 2px var(--accent)}

/* 이 영상에 쓴 것 */
html.ui-v2 .v2-res-used{padding:24px}
html.ui-v2 .v2-res-used h3{margin:0 0 12px;font-size:17px;line-height:25.5px;font-weight:700;color:var(--text-1)}
html.ui-v2 .v2-res-used dl{display:grid;grid-template-columns:104px minmax(0,1fr);gap:10px 0;margin:0}
html.ui-v2 .v2-res-used dt{font-size:15px;line-height:22.5px;font-weight:400;color:var(--text-3)}
html.ui-v2 .v2-res-used dd{margin:0;font-size:15px;line-height:22.5px;font-weight:500;color:var(--text-1);overflow-wrap:anywhere}
html.ui-v2 .v2-res-used dd.is-ok{color:var(--success);font-weight:700}
html.ui-v2 .v2-res-used dd.is-ok::before{content:"✓ "}
html.ui-v2 .v2-res ~ .v2-ai-note,html.ui-v2 .v2-res + .v2-ai-note{display:inline-flex;margin-top:8px}

/* 14 영상 만드는 중 — 왼쪽 9:16 자리 · 오른쪽 4단계 */
html.ui-v2 .v2-make-wrap{display:grid;grid-template-columns:360px minmax(0,1fr);gap:32px;align-items:start;margin:16px 0 48px}
html.ui-v2 .v2-make-ph{width:100%;max-width:360px}
html.ui-v2 .v2-make-ph .v2-pill{position:absolute;top:16px;left:16px;z-index:1}
html.ui-v2 .v2-make-side{padding:24px;min-width:0;overflow-wrap:anywhere}
html.ui-v2 .v2-make-side:hover{box-shadow:var(--shadow-1)}
html.ui-v2 .v2-make-side h2{margin:0 0 4px}
html.ui-v2 .v2-make-todo{margin:0 0 20px;font-size:15px;line-height:22.5px;color:var(--text-2)}
html.ui-v2 .v2-steps{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:12px}
html.ui-v2 .v2-steps li{display:flex;align-items:center;gap:12px;font-size:17px;line-height:25.5px;color:var(--text-2)}
html.ui-v2 .v2-step-dot{flex:none;width:28px;height:28px;border-radius:50%;display:inline-grid;place-items:center;box-sizing:border-box;background:var(--surface-2);color:var(--text-3);font:700 13px/1 Pretendard,system-ui,sans-serif}
html.ui-v2 .v2-step-name{flex:1;min-width:0}
html.ui-v2 .v2-step-state{font-size:13px;line-height:19.5px;color:var(--text-3)}
html.ui-v2 .v2-steps li.is-done .v2-step-dot{background:var(--accent);color:var(--on-accent)}
html.ui-v2 .v2-steps li.is-now .v2-step-dot,html.ui-v2 .v2-steps li.is-wait .v2-step-dot{background:var(--surface);border:2px solid var(--accent);color:var(--accent)}
html.ui-v2 .v2-steps li.is-now,html.ui-v2 .v2-steps li.is-wait{color:var(--text-1);font-weight:700}
html.ui-v2 .v2-steps li.is-now .v2-step-state,html.ui-v2 .v2-steps li.is-wait .v2-step-state{color:var(--accent);font-weight:700}
html.ui-v2 .v2-steps li.is-stop .v2-step-dot{background:var(--danger-soft);color:var(--danger)}
html.ui-v2 .v2-steps li.is-stop .v2-step-state{color:var(--danger);font-weight:700}
html.ui-v2 .v2-make-side progress{accent-color:var(--accent)}
/* 무료 모드 안내는 상태가 아니라 설명 — 노란 상자 대신 회색(§7 노랑은 상태 표시에만) */
html.ui-v2 .v2-make-side [data-testid="fast-mode"]{background:var(--surface-2);color:var(--text-2);border:0;font-weight:400}
html.ui-v2 .v2-make-cuts{margin:12px 0 0}
html.ui-v2 .v2-make-cuts summary{cursor:pointer;color:var(--accent);font-weight:700;font-size:15px}

/* 폰(768px 미만): 한 줄로 쌓는다 — 지금 모바일 배치처럼 영상 다음 버튼 */
@media (max-width:767px){
  html.ui-v2 .v2-res-grid,html.ui-v2 .v2-make-wrap{grid-template-columns:minmax(0,1fr);gap:16px}
  html.ui-v2 .v2-res-player{padding:12px}
  html.ui-v2 .v2-res-actions,html.ui-v2 .v2-res-used,html.ui-v2 .v2-make-side{padding:16px}
  html.ui-v2 .v2-make-ph{max-width:200px;margin:0 auto}
  html.ui-v2 .v2-res-used dl{grid-template-columns:88px minmax(0,1fr)}
}