: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}}

.canvas-wrap{position:relative;width:100%;max-width:calc(70vh * var(--preview-ratio,1.77778));margin-inline:auto}.safe-overlay{position:absolute;inset:0;pointer-events:none;border-radius:10px;overflow:hidden;font-size:clamp(12px,1.2vw,15px);color:white;text-shadow:0 1px 3px #000}.guide-top,.guide-side,.guide-bottom{position:absolute;background:rgba(244,78,91,.3);display:flex;align-items:center;justify-content:center;text-align:center;padding:5px}.guide-top{inset:0 0 auto;height:var(--guide-top)}.guide-bottom{inset:auto 0 0;height:var(--guide-bottom)}.guide-side{right:0;top:var(--guide-top);bottom:var(--guide-bottom);width:var(--guide-right);writing-mode:vertical-rl}.guide-safe{position:absolute;top:var(--guide-top);right:var(--guide-right);bottom:var(--guide-bottom);left:var(--guide-left);border:2px dashed #83ffce;display:flex;justify-content:center;align-items:flex-start;padding:8px;color:#c7ffe7}.guide-controls{padding-top:10px}.guide-controls label{display:inline-block;margin-right:12px}.guide-controls select{max-width:240px}.guide-controls input[type=checkbox]{accent-color:#a995ff}.guide-controls summary{cursor:pointer;font-size:14px}.guide-controls table{width:100%;border-collapse:collapse;font-size:14px}.guide-controls th,.guide-controls td{padding:8px;text-align:left;border-bottom:1px solid var(--line)}

.phone-preview{width:100%;max-width:min(360px,calc(70vh * .5625));margin:auto;aspect-ratio:9/16;position:relative;overflow:hidden;border-radius:8px;background:#000;border:1px solid #343444;container-type:inline-size}.phone-preview canvas{width:100%;height:100%;aspect-ratio:9/16;border-radius:0;background:#000}.phone-ui{position:absolute;inset:0;color:#fff;pointer-events:none;font-size:clamp(12px,3.8cqw,15px);text-shadow:0 1px 3px #000}.phone-status{position:absolute;top:1.2%;left:5%;right:5%;display:flex;justify-content:space-between;font-size:12px;color:#d4d4d4}.phone-header{position:absolute;top:6%;left:5%;right:5%;display:flex;justify-content:space-between;align-items:center}.phone-header strong{font-size:clamp(14px,4.5cqw,18px)}.phone-actions{position:absolute;right:3%;bottom:23%;display:grid;gap:1.7cqw;text-align:center}.phone-actions div{display:grid;justify-items:center}.phone-actions span{font-size:clamp(20px,7cqw,28px);line-height:1.1}.phone-actions small{font-size:12px}.phone-caption{position:absolute;left:4%;right:20%;bottom:8%;line-height:1.4}.phone-account{display:flex;align-items:center;gap:5px;flex-wrap:wrap;font-size:12px}.phone-avatar{display:inline-grid;place-items:center;width:24px;height:24px;background:#777;border-radius:50%;color:#ddd}.phone-follow{background:#fff;color:#111;border-radius:12px;padding:3px 8px;text-shadow:none}.phone-caption p{margin:8px 0 0;color:#fff;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.phone-caption .phone-music{color:#ccc}.phone-nav{position:absolute;bottom:0;height:5.5%;left:0;right:0;display:flex;justify-content:space-around;align-items:center;background:#050505;border-top:1px solid #222;font-size:18px}.phone-preview[data-platform=tiktok] .phone-caption{bottom:9%}.phone-preview[data-platform=reels] .phone-actions{bottom:22%}

.output-tabs{display:flex;gap:8px;margin-top:20px;flex-wrap:wrap}.output-tabs button{margin:0}.alpha-input{grid-template-columns:1fr}.checkerboard{background-color:#323747;background-image:linear-gradient(45deg,#4b5164 25%,transparent 25%),linear-gradient(-45deg,#4b5164 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#4b5164 75%),linear-gradient(-45deg,transparent 75%,#4b5164 75%);background-size:24px 24px;background-position:0 0,0 12px,12px -12px,-12px 0}canvas.alpha-canvas{background:transparent}#alphaNote{margin-top:14px;max-width:850px}#alphaTestLabel{margin-top:14px}

.alpha-mode #canvasWrap,.alpha-mode #phonePreview,.alpha-mode .guide-controls{display:none!important}#alphaPreviewWrap{border-radius:10px;padding:12px;min-height:100px;display:flex;align-items:center;justify-content:center}#alphaPreview{width:100%;height:auto;aspect-ratio:auto;background:transparent;border-radius:0}