:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;font:16px/1.5 system-ui,Segoe UI,Roboto,sans-serif}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}}body{margin:0}:root{--bg:#131419;--panel:#1e2128;--elevated:#262a33;--border:#2e333b;--border-dim:#23272e;--accent:#3f63f3;--accent-hover:#2b4cd1;--text:#fff;--text-dim:#b5b6bc;--text-muted:#8b8c93;--danger:#f07d80;--danger-bg:#200b0c;--warn:#f9ce72;--warn-bg:#241c07;--ok:#5fddcf;--shadow-panel:0 2px 8px #0a0a0b66;--r-sm:6px;--r-md:10px;--r-xl:20px;--fs-caption:.75rem;--fs-xs:.875rem;--fs-sm:.9375rem;--fs-base:1rem;--fs-xl:1.375rem;--sans:"Pretendard", "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Segoe UI", Roboto, sans-serif;--mono:ui-monospace, "JetBrains Mono", SFMono-Regular, Consolas, Menlo, monospace}@media (prefers-color-scheme:light){:root{--bg:#f2f4f6;--panel:#fff;--elevated:#f2f4f6;--border:#e5e8eb;--border-dim:#eef0f3;--text:#0a0a0b;--text-dim:#2c2d31;--text-muted:#6b6c73;--danger:#c5363b;--danger-bg:#fdecec;--warn:#b45309;--warn-bg:#fef6e7;--ok:#028a57;--shadow-panel:0 2px 8px #0a0a0b0a}}*,:before,:after{box-sizing:border-box}body{background:var(--bg);color:var(--text);font-family:var(--sans);font-size:var(--fs-base);letter-spacing:-.005em;-webkit-font-smoothing:antialiased;margin:0;line-height:1.5}.shell{max-width:1180px;margin:0 auto;padding:24px 24px 64px}.page-head h1{font-size:var(--fs-xl);margin:0;font-weight:700}.page-head p{font-size:var(--fs-sm);color:var(--text-dim);margin:6px 0 0}.tabs{background:var(--panel);border:1px solid var(--border-dim);border-radius:var(--r-md);gap:6px;width:fit-content;margin:14px 0 20px;padding:4px;display:flex}.tabs button{color:var(--text-muted);font:inherit;font-size:var(--fs-sm);border-radius:var(--r-sm);cursor:pointer;background:0 0;border:none;padding:6px 18px}.tabs button.on{background:var(--elevated);color:var(--text);font-weight:600}.cols{grid-template-columns:minmax(0,1fr) 380px;align-items:start;gap:14px;display:grid}.col{flex-direction:column;gap:14px;min-width:0;display:flex}.col.side{position:sticky;top:24px}@media (width<=960px){.cols{grid-template-columns:1fr}.col.side{position:static}}.card{background:var(--panel);border:1px solid var(--border-dim);border-radius:var(--r-xl);box-shadow:var(--shadow-panel);overflow:hidden}.card>header{border-bottom:1px solid var(--border-dim);padding:12px 16px}.card h2{font-size:var(--fs-sm);align-items:center;gap:8px;margin:0;font-weight:600;display:flex}.card .step{background:var(--elevated);width:20px;height:20px;color:var(--text-dim);font-size:var(--fs-caption);border-radius:999px;place-items:center;font-weight:600;display:inline-grid}.card header p{font-size:var(--fs-xs);color:var(--text-muted);margin:4px 0 0}.card-body{flex-direction:column;gap:14px;padding:16px;display:flex}.field{flex-direction:column;gap:6px;min-width:0;display:flex}.field>span:first-child{font-size:var(--fs-sm);color:var(--text)}.field-desc{font-size:var(--fs-xs);color:var(--text-muted);line-height:1.45}input,select,textarea{font:inherit;font-size:var(--fs-sm);color:var(--text);background:var(--bg);border:1px solid var(--border);border-radius:var(--r-md);width:100%;padding:9px 11px}input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:1px}textarea{resize:vertical;font-family:var(--mono);font-size:var(--fs-xs);line-height:1.6}input[type=file]{color:var(--text-dim);font-size:var(--fs-xs);padding:7px 9px}input[type=color]{cursor:pointer;width:52px;height:36px;padding:2px}input[type=number]{width:88px}input[type=checkbox]{width:16px;height:16px;accent-color:var(--accent);cursor:pointer}.row{flex-wrap:wrap;align-items:flex-end;gap:14px;display:flex}.row .field{flex:none}.check{font-size:var(--fs-sm);cursor:pointer;align-items:center;gap:8px;padding-bottom:9px;display:flex}code{font-family:var(--mono);background:var(--elevated);border-radius:4px;padding:1px 5px;font-size:.85em}button{font:inherit;font-size:var(--fs-sm);color:var(--text);background:var(--elevated);border:1px solid var(--border);border-radius:var(--r-md);cursor:pointer;padding:9px 14px}button:hover:not(:disabled){border-color:var(--text-muted)}button.primary{background:var(--accent);border-color:var(--accent);color:#fff;width:100%;padding:11px;font-weight:600}button.primary:hover:not(:disabled){background:var(--accent-hover);border-color:var(--accent-hover)}button:disabled{opacity:.45;cursor:not-allowed}.preview{background:var(--bg);border-radius:var(--r-md);border:1px solid var(--border-dim);place-items:center;min-height:260px;padding:20px;display:grid}.preview.alpha{background-image:linear-gradient(45deg, var(--border-dim) 25%, transparent 25%), linear-gradient(-45deg, var(--border-dim) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--border-dim) 75%), linear-gradient(-45deg, transparent 75%, var(--border-dim) 75%);background-position:0 0,0 8px,8px -8px,-8px 0;background-size:16px 16px}.preview canvas{border-radius:4px;max-width:100%;height:auto}.hint,.note{font-size:var(--fs-xs);color:var(--text-muted);margin:0}.banner{font-size:var(--fs-xs);border-radius:var(--r-md);white-space:pre-wrap;margin:0;padding:10px 12px;line-height:1.45}.banner.error{color:var(--danger);background:var(--danger-bg)}.banner.warn{color:var(--warn);background:var(--warn-bg)}.banner.ok{color:var(--ok);background:var(--elevated)}