:root{color-scheme:light;--static-white: #ffffff;--static-black: #000000;--primary: #6541F2;--primary-strong: #5B37ED;--primary-heavy: #4F29E5;--primary-line: #6541F247;--primary-fill: #6541F214;--label: #171719;--label-strong: #000000;--label-neutral: #2E2F33E0;--label-alt: #37383C9C;--label-assistive: #37383C47;--label-disable: #37383C29;--bg: #ffffff;--bg-alt: #F7F7F8;--bg-elevated: #ffffff;--bg-elevated-alt: #F7F7F8;--fill: #70737C14;--fill-strong: #70737C29;--fill-alt: #70737C0D;--line: #70737C38;--line-neutral: #70737C29;--line-alt: #70737C14;--line-solid: #E1E2E4;--line-solid-neutral: #EAEBEC;--inactive: #989BA2;--disable: #F4F4F5;--status-positive: #00BF40;--status-cautionary: #FF9200;--status-negative: #FF4242;--bg-status-negative: #FF424214;--inverse-bg: #1B1C1E;--inverse-label: #F7F7F8;--dimmer: #17171985;--shadow-xs: 0px 1px 2px -1px #1717171A;--shadow-sm: 0px 2px 4px -2px #1717170F, 0px 4px 6px -1px #1717170F;--shadow-md: 0px 4px 6px -2px #17171712, 0px 10px 15px -3px #17171712;--shadow-lg: 0px 6px 10px -4px #17171714, 0px 16px 24px -6px #17171714;--shadow-xl: 0px 10px 15px -5px #1717171A, 0px 24px 38px -10px #1717171F;--space-0: 0px;--space-1: 1px;--space-2: 2px;--space-4: 4px;--space-6: 6px;--space-8: 8px;--space-10: 10px;--space-12: 12px;--space-14: 14px;--space-16: 16px;--space-20: 20px;--space-24: 24px;--space-32: 32px;--space-40: 40px;--space-48: 48px;--space-56: 56px;--space-64: 64px;--space-72: 72px;--space-80: 80px;--radius-xs: 6px;--radius-sm: 8px;--radius-md: 10px;--radius-lg: 12px;--radius-xl: 16px;--radius-2xl: 20px;--radius-full: 9999px;--font-title3-size: 1.5rem;--font-title3-height: 2rem;--font-title3-spacing: -.023em;--font-heading2-size: 1.25rem;--font-heading2-height: 1.75rem;--font-heading2-spacing: -.012em;--font-headline2-size: 1.0625rem;--font-headline2-height: 1.5rem;--font-headline2-spacing: 0em;--font-body1-size: 1rem;--font-body1-height: 1.5rem;--font-body1-spacing: .0057em;--font-body2-size: .9375rem;--font-body2-height: 1.375rem;--font-body2-spacing: .0096em;--font-label1-size: .875rem;--font-label1-height: 1.25rem;--font-label1-spacing: .0145em;--font-label2-size: .8125rem;--font-label2-height: 1.125rem;--font-label2-spacing: .0194em;--font-caption1-size: .75rem;--font-caption1-height: 1rem;--font-caption1-spacing: .0252em;--font-caption2-size: .6875rem;--font-caption2-height: .875rem;--font-caption2-spacing: .0311em;--z-sticky: 10;--z-overlay: 1299;--z-modal: 1300;--bp-sm: 768px;--bp-md: 992px;--bp-lg: 1200px}:root[data-theme=dark]{color-scheme:dark;--static-white: #ffffff;--static-black: #000000;--primary: #7D5EF7;--primary-strong: #9E86FC;--primary-heavy: #C0B0FF;--primary-line: #7D5EF752;--primary-fill: #7D5EF71F;--label: #F7F7F8;--label-strong: #ffffff;--label-neutral: #C2C4C8E0;--label-alt: #AEB0B69C;--label-assistive: #AEB0B647;--label-disable: #989BA229;--bg: #1B1C1E;--bg-alt: #0F0F10;--bg-elevated: #212225;--bg-elevated-alt: #141415;--fill: #70737C38;--fill-strong: #70737C47;--fill-alt: #70737C1F;--line: #70737C52;--line-neutral: #70737C47;--line-alt: #70737C38;--line-solid: #37383C;--line-solid-neutral: #333438;--inactive: #5A5C63;--disable: #2E2F33;--status-positive: #1ED45A;--status-cautionary: #FFA938;--status-negative: #FF6363;--bg-status-negative: #FF636314;--inverse-bg: #ffffff;--inverse-label: #171719;--dimmer: #171719BD;--shadow-xs: 0px 1px 2px -1px #1717171A;--shadow-sm: 0px 2px 4px -2px #1717170F, 0px 4px 6px -1px #1717170F;--shadow-md: 0px 4px 6px -2px #17171712, 0px 10px 15px -3px #17171712;--shadow-lg: 0px 6px 10px -4px #17171714, 0px 16px 24px -6px #17171714;--shadow-xl: 0px 10px 15px -5px #1717171A, 0px 24px 38px -10px #1717171F}:root{--primary: #d4879c;--primary-strong: #a85d74;--primary-heavy: #8c4a60;--primary-line: #d4879c52;--primary-fill: #d4879c1f}:root[data-theme=dark]{--primary: #e7a9c0;--primary-strong: #f0c2d2;--primary-heavy: #f7d9e3;--primary-line: #e7a9c05c;--primary-fill: #e7a9c01f}*,*:before,*:after{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg-alt);color:var(--label);font-family:Pretendard Variable,Pretendard,system-ui,-apple-system,Noto Sans KR,sans-serif;font-size:var(--font-label1-size);line-height:var(--font-label1-height);letter-spacing:var(--font-label1-spacing);-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}button,input,select,textarea{font:inherit;letter-spacing:inherit;color:inherit}button{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-6);min-height:34px;padding:0 var(--space-12);border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--bg-elevated);color:var(--label);cursor:pointer;transition:background .12s ease,border-color .12s ease,color .12s ease}button:hover:not(:disabled){background:var(--fill-alt);border-color:var(--line-neutral)}button:active:not(:disabled){background:var(--fill)}button:disabled{color:var(--label-disable);background:var(--disable);border-color:transparent;cursor:default}button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{outline:2px solid var(--primary);outline-offset:2px}button.on{background:var(--primary-fill);border-color:var(--primary-line);color:var(--primary-strong);font-weight:600}button.primary{background:var(--primary-strong);border-color:var(--primary-strong);color:#fff;font-weight:600;box-shadow:var(--shadow-xs)}button.primary:hover:not(:disabled){background:var(--primary-heavy);border-color:var(--primary-heavy)}:root[data-theme=dark] button.primary{color:var(--static-black, #17171a)}.icon-button{min-width:34px;padding:0;color:var(--label-alt)}.icon-button:hover:not(:disabled){color:var(--label)}input[type=text],input[type=number],select{min-height:34px;padding:0 var(--space-10);border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--bg-elevated);color:var(--label)}input[type=text]:focus,input[type=number]:focus,select:focus{border-color:var(--primary);outline:none;box-shadow:0 0 0 3px var(--primary-fill)}input[type=range]{accent-color:var(--primary);width:100%;height:20px}input[type=checkbox]{accent-color:var(--primary);width:16px;height:16px}input[type=color]{width:34px;height:34px;padding:0;flex:0 0 auto;border:1px solid var(--line);border-radius:var(--radius-sm);background:none;cursor:pointer}.check{display:inline-flex;align-items:center;gap:var(--space-8);color:var(--label-neutral);cursor:pointer}.app{display:grid;grid-template-rows:auto minmax(0,1fr);height:100dvh}.topbar{display:flex;align-items:center;gap:var(--space-16);padding:var(--space-10) var(--space-16);background:var(--bg);border-bottom:1px solid var(--line-alt)}.brand{display:flex;align-items:center;gap:var(--space-10)}.logo{display:grid;place-items:center;width:32px;height:32px;border-radius:var(--radius-md);background:linear-gradient(135deg,var(--primary),var(--primary-strong));color:#fff;font-size:15px}.brand-copy{display:flex;flex-direction:column;line-height:1.2}.brand-copy strong{font-size:var(--font-headline2-size);letter-spacing:-.01em}.brand-copy small{color:var(--label-assistive);font-size:var(--font-caption2-size)}.topbar .tools{display:flex;align-items:center;gap:var(--space-12)}.topbar .actions{margin-left:auto;display:flex;align-items:center;gap:var(--space-6)}.action-wide{white-space:nowrap}.segmented{display:inline-flex;padding:var(--space-2);border:1px solid var(--line);border-radius:var(--radius-md);background:var(--bg-alt)}.segmented button{min-height:30px;border:none;background:transparent;color:var(--label-alt);border-radius:var(--radius-xs)}.segmented button:hover:not(:disabled){background:transparent;color:var(--label)}.segmented button.on{background:var(--bg-elevated);color:var(--primary-strong);box-shadow:var(--shadow-xs)}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 372px;grid-template-rows:minmax(0,1fr);gap:var(--space-12);min-height:0;padding:var(--space-12)}.left{display:flex;flex-direction:column;gap:var(--space-10);min-height:0;min-width:0}.stage{position:relative;flex:1;min-height:0;display:grid;place-items:center;padding:var(--space-16);border:1px solid var(--line-alt);border-radius:var(--radius-xl);background:var(--bg);overflow:hidden}.stage-canvas{max-width:100%;max-height:100%;width:auto;height:auto;min-width:0;min-height:0;display:block;touch-action:none;cursor:crosshair;border-radius:var(--radius-sm);box-shadow:var(--shadow-md)}.stage.checker .stage-canvas{background-color:var(--bg-alt);background-image:linear-gradient(45deg,var(--fill-alt) 25%,transparent 25%),linear-gradient(-45deg,var(--fill-alt) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--fill-alt) 75%),linear-gradient(-45deg,transparent 75%,var(--fill-alt) 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0}.stage-meta{position:absolute;top:var(--space-12);left:var(--space-12);display:flex;gap:var(--space-6);flex-wrap:wrap;z-index:var(--z-sticky)}.stage-pill{display:inline-flex;align-items:center;gap:var(--space-6);padding:var(--space-4) var(--space-10);border:1px solid var(--line-alt);border-radius:var(--radius-full);background:var(--bg-elevated);box-shadow:var(--shadow-xs);color:var(--label-alt);font-size:var(--font-caption1-size);line-height:var(--font-caption1-height)}.transition-pill strong{color:var(--primary-strong)}.transition-pill svg{color:var(--label-assistive)}.stage-empty{position:absolute;inset:auto;display:grid;justify-items:center;gap:var(--space-4);padding:var(--space-20) var(--space-24);border-radius:var(--radius-lg);color:var(--label-alt);text-align:center;pointer-events:none}.stage-empty strong{color:var(--label);font-size:var(--font-headline2-size)}.stage-empty span{font-size:var(--font-label2-size)}.empty-sparkle{color:var(--primary);font-size:22px}.timeline{display:flex;flex-direction:column;gap:var(--space-8);padding:var(--space-10) var(--space-12);border:1px solid var(--line-alt);border-radius:var(--radius-xl);background:var(--bg)}.transport{display:flex;align-items:center;gap:var(--space-10)}.transport .play{min-width:40px;min-height:40px;border-radius:var(--radius-full)}.transport .stop{min-width:34px;border-radius:var(--radius-full)}.transport .scrub{flex:1;min-width:60px}.transport .time{color:var(--label-alt);font-variant-numeric:tabular-nums;white-space:nowrap;font-size:var(--font-label2-size)}.timeline-badge{padding:var(--space-2) var(--space-8);border-radius:var(--radius-full);background:var(--fill-alt);color:var(--label-assistive);font-size:var(--font-caption2-size);white-space:nowrap}.transport-2{display:flex;align-items:center;gap:var(--space-10);flex-wrap:wrap}.mini-label{color:var(--label-assistive);font-size:var(--font-caption1-size);white-space:nowrap}.transport-2 .numfield{max-width:280px}.transport-2 .segmented button{font-size:var(--font-label2-size)}.sidebar{display:flex;flex-direction:column;min-height:0;min-width:0;border:1px solid var(--line-alt);border-radius:var(--radius-xl);background:var(--bg);overflow:hidden}.sheet-handle,.sidebar-titlebar{display:none}.tabs{display:flex;gap:var(--space-2);padding:var(--space-8) var(--space-8) 0;border-bottom:1px solid var(--line-alt);overflow-x:auto;scrollbar-width:none}.tabs::-webkit-scrollbar{display:none}.tabs button{flex:1 1 auto;min-height:36px;padding:0 var(--space-6);font-size:var(--font-label2-size);border:none;border-radius:var(--radius-sm) var(--radius-sm) 0 0;background:transparent;color:var(--label-alt);white-space:nowrap}.tabs button:hover:not(:disabled){background:var(--fill-alt)}.tabs button.on{color:var(--primary-strong);font-weight:600;background:var(--primary-fill);box-shadow:inset 0 -2px 0 var(--primary)}.panel{flex:1;min-height:0;overflow-y:auto;padding:var(--space-8) var(--space-14) var(--space-32)}.section{border-bottom:1px solid var(--line-alt)}.section:last-child{border-bottom:none}.section>summary{display:flex;align-items:center;justify-content:space-between;padding:var(--space-12) var(--space-2);font-size:var(--font-label1-size);font-weight:600;list-style:none;cursor:pointer}.section>summary::-webkit-details-marker{display:none}.section>summary:after{content:"";width:8px;height:8px;margin-right:var(--space-4);border-right:1.5px solid var(--label-assistive);border-bottom:1.5px solid var(--label-assistive);transform:rotate(45deg) translate(-2px,-2px);transition:transform .15s ease}.section[open]>summary:after{transform:rotate(-135deg) translate(-2px,-2px)}.section-body{display:flex;flex-direction:column;gap:var(--space-8);padding:0 var(--space-2) var(--space-14)}.row{display:grid;grid-template-columns:92px minmax(0,1fr);align-items:center;gap:var(--space-10)}.row:not(:has(>.row-label)){grid-template-columns:minmax(0,1fr)}.row .check span{line-height:var(--font-label1-height)}.row-label{color:var(--label-alt);font-size:var(--font-caption1-size)}.row-body{display:flex;align-items:center;gap:var(--space-6);min-width:0}.row-body>*{min-width:0}.row-body select,.row-body>input[type=text]{width:100%}.numfield{display:flex;align-items:center;gap:var(--space-8);width:100%}.numfield input[type=range]{flex:1;min-width:40px}.numfield input[type=number]{width:72px;flex:0 0 auto;text-align:right}.numfield .unit{color:var(--label-assistive);font-size:var(--font-caption2-size)}.colorfield{display:flex;align-items:center;gap:var(--space-6);width:100%}.colorfield input[type=text]{flex:1}.swatches{display:flex;align-items:center;gap:var(--space-6);flex-wrap:wrap}.swatch{width:26px;height:26px;min-height:0;padding:0;border:1px solid var(--line);border-radius:var(--radius-sm);box-shadow:inset 0 0 0 2px var(--bg)}.swatch.on{border-color:var(--primary);box-shadow:inset 0 0 0 2px var(--bg),0 0 0 2px var(--primary-line)}.hint{color:var(--label-assistive);font-size:var(--font-caption1-size);line-height:var(--font-caption1-height);margin:0}.hint b{color:var(--label-neutral)}.curve-hint{padding:var(--space-8) var(--space-10);border-radius:var(--radius-sm);background:var(--fill-alt)}.dim{color:var(--label-assistive);font-weight:400}.grow{flex:1;min-width:0}.btn-row{display:flex;gap:var(--space-6);padding-top:var(--space-4)}.btn-row.wrap{flex-wrap:wrap}.label-transition{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--space-10);padding:var(--space-14) var(--space-16);border:1px solid var(--line-alt);border-radius:var(--radius-lg);background:var(--bg-alt)}.transition-state{display:grid;gap:var(--space-2)}.transition-state small{color:var(--label-assistive);font-size:var(--font-caption2-size)}.transition-state strong{font-size:var(--font-heading2-size);letter-spacing:-.01em}.transition-state.after{justify-items:end;text-align:right}.transition-state.after strong{color:var(--primary-strong)}.transition-arrow{display:grid;place-items:center;width:26px;height:26px;border-radius:var(--radius-full);background:var(--primary-fill);color:var(--primary-strong)}.transition-copy{color:var(--label-assistive);font-size:var(--font-caption1-size);margin:var(--space-8) 0 0}.list{display:flex;flex-direction:column;gap:var(--space-6)}.list-item{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-4) var(--space-6);border:1px solid var(--line-alt);border-radius:var(--radius-md);background:var(--bg-elevated)}.list-item.on{border-color:var(--primary-line);background:var(--primary-fill)}.list-item.column{flex-direction:column;align-items:stretch;gap:var(--space-6)}.list-item .line{display:flex;align-items:center;gap:var(--space-6)}.play-badge{flex:0 0 auto;padding:0 var(--space-6);border-radius:var(--radius-full);background:var(--primary-fill);color:var(--primary-strong);font-size:var(--font-caption2-size);line-height:18px;font-weight:600}.play-badge.static{background:var(--fill);color:var(--label-alt)}.path-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.list-item .name{flex:1;min-width:0;justify-content:flex-start;gap:var(--space-6);border:none;background:none;min-height:30px;overflow:hidden;white-space:nowrap}.list-item button{min-height:28px;padding:0 var(--space-6)}.list-item .eye{border:none;background:none;min-width:26px}.dots{display:flex;flex-direction:column;gap:var(--space-6);max-height:46vh;overflow-y:auto}.dot-row{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-4) var(--space-6);border:1px solid var(--line-alt);border-radius:var(--radius-md);background:var(--bg-elevated)}.dot-row.on{border-color:var(--primary-line);background:var(--primary-fill)}.dot-row .idx{min-width:46px;min-height:28px;padding:0;border:none;background:none;color:var(--primary-strong);font-weight:700;font-size:var(--font-label2-size)}.dot-row input[type=text]{min-height:30px}.dot-row button{min-height:28px;padding:0 var(--space-6)}.progress{display:flex;align-items:center;gap:var(--space-10);padding:var(--space-8) 0}.progress .bar{flex:1;height:6px;border-radius:var(--radius-full);background:var(--fill);overflow:hidden}.progress .bar span{display:block;height:100%;background:var(--primary);transition:width .15s ease}.sheet-backdrop,.mobile-dock{display:none}@media(max-width:991px){.topbar{padding:var(--space-8) var(--space-12);gap:var(--space-8)}.topbar .tools{display:none}.topbar .actions{gap:var(--space-4)}.topbar .action-wide span{display:none}.topbar .action-wide{min-width:34px;padding:0 var(--space-8)}.workspace{grid-template-columns:minmax(0,1fr);padding:var(--space-8);padding-bottom:calc(64px + env(safe-area-inset-bottom))}.stage{padding:var(--space-8);border-radius:var(--radius-lg)}.timeline{border-radius:var(--radius-lg)}.transport-2{display:none}.sheet-backdrop{display:block;position:fixed;inset:0;width:100%;height:100%;padding:0;border:none;border-radius:0;background:var(--dimmer);opacity:0;pointer-events:none;transition:opacity .2s ease;z-index:var(--z-overlay)}.sheet-backdrop.show{opacity:1;pointer-events:auto}.sidebar{position:fixed;left:0;right:0;bottom:0;height:var(--sheet-height, 62dvh);max-height:calc(100dvh - 40px);border:none;border-radius:var(--radius-2xl) var(--radius-2xl) 0 0;box-shadow:var(--shadow-xl);transform:translateY(calc(100% + 24px));transition:transform .24s cubic-bezier(.2,0,0,1);z-index:var(--z-modal)}.sidebar.open{transform:translateY(0)}.sheet-handle{display:block;flex:0 0 auto;width:40px;height:4px;margin:var(--space-10) auto var(--space-2);border-radius:var(--radius-full);background:var(--line);touch-action:none;cursor:grab}.sidebar-titlebar{display:flex;align-items:center;justify-content:space-between;padding:var(--space-6) var(--space-14) var(--space-8);font-size:var(--font-headline2-size);font-weight:600}.sidebar-titlebar>span{display:inline-flex;align-items:center;gap:var(--space-8)}.mobile-dock{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;position:fixed;left:0;right:0;bottom:0;padding:var(--space-6) var(--space-8) calc(var(--space-6) + env(safe-area-inset-bottom));background:var(--bg);border-top:1px solid var(--line-alt);z-index:var(--z-sticky)}.mobile-dock button{flex-direction:column;gap:var(--space-2);min-height:48px;border:none;background:none;color:var(--label-assistive);font-size:var(--font-caption2-size)}.mobile-dock button.on{background:none;color:var(--primary-strong)}.mobile-dock button:hover:not(:disabled){background:none}.row{grid-template-columns:84px minmax(0,1fr)}.dots{max-height:none}}@media(min-width:992px)and (max-width:1199px){.workspace{grid-template-columns:minmax(0,1fr) 320px}.brand-copy{display:none}}