
:root{color-scheme:dark;--ink:#f1f2f7;--muted:#a8afc2;--line:#303449;--surface:#15192b;--purple:#a995ff}*{box-sizing:border-box}body{margin:0;background:#0c1020;color:var(--ink);font:16px/1.65 system-ui,-apple-system,"Segoe UI",sans-serif}a{color:inherit;text-decoration:none}a:hover{color:#c8bdff}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #a995ff;outline-offset:4px}.site-header{max-width:1440px;margin:auto;padding:22px 32px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:8px;font-size:21px;font-weight:750;letter-spacing:-.4px}.brand-icon{display:inline-grid;place-items:center;background:#765cff;color:white;width:34px;height:34px;border-radius:9px;font-size:24px}.brand-light{font-weight:400;color:#a8afc2}.site-header nav{display:flex;gap:25px;font-size:14px}.site-header nav a[aria-current=page]{color:#c5b6ff}.site-footer{max-width:1376px;margin:45px auto 0;border-top:1px solid var(--line);padding:28px 0 38px;display:flex;align-items:center;flex-wrap:wrap;gap:20px}.site-footer .brand{font-size:17px}.site-footer div{display:flex;gap:22px;margin-left:auto;font-size:14px}.site-footer p{font-size:14px;color:var(--muted);margin:0;width:100%}main{max-width:1440px;margin:25px auto;padding:0 32px}h1{font-size:30px;line-height:1.3;letter-spacing:-1px;margin:0 0 8px;font-family:inherit}p{color:var(--muted);margin:8px 0 16px}section{background:var(--surface);border:1px solid var(--line);padding:20px;border-radius:14px;margin:18px 0}.intro{display:flex;justify-content:space-between;align-items:center;gap:20px}.intro p{margin:0}.local-note{font-size:14px;padding:7px 12px;border:1px solid #414052;border-radius:20px;white-space:nowrap}.grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;background:none;border:0;padding:0}.dropzone{padding:15px 20px;border:1px dashed #595579;background:#15192b;border-radius:12px}.dropzone strong{display:block;font-size:16px;margin-bottom:3px}.dropzone small{font-size:14px;color:var(--muted)}.dropzone label{font-size:14px;margin-top:8px}.dropzone input[type=file]{padding:6px;margin:4px 0;font-size:14px;width:100%}.dropzone:hover{border-color:#ad98ff}.workspace{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(380px,1fr);gap:24px;align-items:start;padding:22px}.preview-pane{position:sticky;top:24px}canvas{width:100%;display:block;aspect-ratio:16/9;border-radius:10px;background:#171c30}.controls{display:grid;grid-template-columns:1fr 1fr;gap:8px 16px}label{display:block;font-size:14px;color:#e0e4f2;margin:5px 0}select,input[type=file]{background:#0e1325;color:#e6e9f1;border:1px solid #353b52;border-radius:7px}select{display:block;width:100%;padding:8px;margin-top:7px;font:inherit;font-size:14px}input[type=range]{width:100%;accent-color:#a995ff}input[type=color]{width:65px;height:35px;border:0;background:transparent;vertical-align:middle}output{float:right;color:#beacff}button,.download{display:inline-block;background:#a995ff;color:#171326;border:0;border-radius:8px;padding:11px 16px;font:inherit;font-size:14px;font-weight:650;cursor:pointer;margin:6px 6px 6px 0;text-decoration:none}button.secondary{background:#2b3148;color:#e2e5ef}button:disabled{opacity:.42;cursor:default}#batch{background:#c6b7ff}progress{width:100%;height:7px;accent-color:#a995ff;margin-top:12px}#status{font-size:14px;color:#dfe1ed;min-height:22px}.muted{font-size:14px;color:var(--muted);line-height:1.6}.hidden{display:none!important}.queue-title{display:flex;align-items:center;justify-content:space-between}.queue-title h2{font-size:18px;margin:0}#queueSummary{font-size:14px;color:var(--muted)}.queue-row{display:flex;align-items:center;gap:10px;padding:12px 0;border-bottom:1px solid var(--line)}.queue-name{flex:1;word-break:break-word;font-size:14px}.queue-state{font-size:14px;color:#c1b4ff}.queue-row button,.queue-row a{font-size:14px;padding:6px 10px;margin:0}.queue-row a{color:#cdbfff}.guide-links{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin:24px 0}.guide-links a{border:1px solid var(--line);padding:18px 22px;border-radius:12px;background:#11162a}.guide-links strong{display:block}.guide-links span{font-size:14px;color:var(--muted)}body.dragging::after{content:"음악·배경 이미지·영상을 여기에 놓으세요";position:fixed;inset:14px;background:rgba(22,22,50,.93);border:3px dashed #ac98ff;border-radius:18px;z-index:20;display:flex;align-items:center;justify-content:center;font-size:26px;color:#fff;pointer-events:none}.article{max-width:880px;margin:35px auto 65px}.article .eyebrow{color:#baa8ff;font-size:14px;letter-spacing:2px;margin-bottom:15px}.article h1{font-size:38px;margin-bottom:20px}.article h2{font-size:23px;margin:35px 0 12px;color:#f4f5fa}.article h3{font-size:18px;color:#eee;margin:25px 0 8px}.article p,.article li{font-size:16px;color:#c3c8d5;line-height:1.95}.article ul,.article ol{padding-left:24px}.article li{margin:9px 0}.article a{color:#c0b1ff;text-decoration:underline}.article figure{margin:25px 0}.article img{width:100%;border-radius:12px}.article figcaption{color:var(--muted);font-size:14px}.article details{border-bottom:1px solid var(--line);padding:18px 0}.article summary{font-size:18px;cursor:pointer;color:#eceef5;font-weight:600}.article .note{border-left:3px solid #a995ff;padding:12px 20px;background:#171c31;border-radius:0 10px 10px 0}.article table{border-collapse:collapse;width:100%;font-size:15px}.article td,.article th{border-bottom:1px solid var(--line);padding:12px;text-align:left;vertical-align:top}.article th{color:#eceef5}.article td{color:#c4c9d7}@media(max-width:1000px){.workspace{grid-template-columns:1fr}.preview-pane{position:static}.site-footer{margin:30px 32px}.controls{grid-template-columns:repeat(3,1fr)}}@media(max-width:650px){main{padding:0 16px}.site-header{padding:17px 16px;flex-wrap:wrap;gap:15px}.site-header nav{gap:16px;flex-wrap:wrap}.brand{font-size:18px}.intro{display:block}.local-note{display:inline-block;margin-top:10px}.grid,.guide-links{grid-template-columns:1fr}.workspace{padding:14px;gap:16px}.controls{grid-template-columns:1fr 1fr}.site-footer{margin:25px 16px;display:block}.site-footer div{margin:15px 0;flex-wrap:wrap;gap:15px}.queue-row{flex-wrap:wrap}.queue-name{min-width:100%;flex:1}.article h1{font-size:30px}.article td,.article th{padding:8px}.article{margin-top:25px}}

.site-footer div{flex-wrap:wrap}.guide-links{grid-template-columns:repeat(2,minmax(0,1fr))}.article a{overflow-wrap:anywhere}@media(max-width:650px){.guide-links{grid-template-columns:1fr}}
