/* KWONMO — genmpg 제작 · 운영 재생 화면 */
.gmp-app { padding: var(--sp-lg); color: var(--text); }
.gmp-app [hidden] { display: none !important; }
.gmp-section { margin-block: var(--sp-lg); padding: var(--sp-md); background: var(--surface); border: var(--hairline) solid var(--line); }
.gmp-section h2 { margin: 0 0 var(--sp-md); font-size: 1.1rem; }
.gmp-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-sm); margin-block: var(--sp-sm); }
.gmp-name { flex: 1 1 16rem; overflow-wrap: anywhere; }
.gmp-app input { width: 7em; }
.gmp-app input, .gmp-app button { padding: var(--sp-xs) var(--sp-sm); color: var(--text); background: var(--surface-2); border: var(--hairline) solid var(--line); font: inherit; }
.gmp-app button { cursor: pointer; }
.gmp-app button:disabled { opacity: .5; cursor: default; }
.gmp-app label { display: inline-flex; align-items: center; gap: var(--sp-xs); }
/* 완전한 검정은 영상 레터박스와 판의 경계를 없애기 위해 쓴다. */
.gmp-preview { position: relative; width: 100%; max-width: 60rem; aspect-ratio: 16 / 9; background: black; }
.gmp-preview video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.gmp-app pre { overflow: auto; padding: var(--sp-sm); background: var(--surface-2); }
.gmp-app p { color: var(--text-mid); }
.gmp-app #gmpStatus { color: var(--accent); }
.gmp-title { flex: 1 1 20rem; }
.gmp-app .gmp-title input { flex: 1; width: 100%; min-width: 0; }
.gmp-output { display: block; width: 100%; max-width: 60rem; }
.gmp-editor { margin: 0; padding: 0; border: 0; min-width: 0; }