@import"./design-tokens.css";:root{--sel-color: var(--color-selection);--sel-color-hover: var(--color-selection-hover);--sel-color-fill: var(--color-selection-fill);--sel-outline-w: calc(1px * var(--inv-zoom, 1));--preset-h1-color: #111111;--preset-h1-family: "Noto Sans KR", sans-serif;--preset-h2-color: #1a1a1a;--preset-h2-family: "Noto Sans KR", sans-serif;--preset-h3-color: #333333;--preset-h3-family: "Noto Sans KR", sans-serif;--preset-body-color: #555555;--preset-body-family: "Noto Sans KR", sans-serif;--preset-caption-color: #999999;--preset-label-bg: #111111;--preset-label-color: #ffffff;--preset-label-radius: 8px;--preset-chat-bg-left: #e5e5ea;--preset-chat-bg-right: #1888fe;--preset-chat-text-left: #111111;--preset-chat-text-right: #ffffff;--preset-step-num-bg: #222222;--preset-step-num-color: #ffffff;--preset-step-title: #222222;--preset-step-desc: #555555;--preset-step-card-bg: #f5f5f5;--preset-table-header-bg: #f0f0f0;--preset-table-text: #222222;--preset-table-line: #cccccc;--preset-table-col-bg: #f5f5f5;--ui-bg-app: #1a1a1a;--ui-bg-base: #1e1e1e;--ui-bg-elevated: #242424;--ui-bg-card: #252525;--ui-bg-input: #2a2a2a;--ui-bg-hover: #2e2e2e;--ui-border: #333333;--ui-border-mid: #3a3a3a;--ui-border-strong: #444444;--ui-text: #e0e0e0;--ui-text-sub: #aaaaaa;--ui-text-muted: #9e9e9e;--ui-text-dim: #969696;--ui-divider: #555555;--ui-danger: #e06c6c;--ui-danger-bg: rgba(224,108,108,0.12);--ui-danger-border: #e06c6c;--ui-danger-hover: #e74c3c;--ui-success: #7fc87f;--ui-accent: #7cb8ff;--ui-accent-primary: #2d6fe8;--ui-accent-primary-hover: #3a7df0;--ui-highlight: #ffeb3b;--ui-accent-text: #6fa3f7;--ui-sel-overlay: #9966ff;--ui-sel-ai: #c084fc;--ui-sel-outline-offset-out: calc(1px * var(--inv-zoom, 1));--ui-accent-fill: rgba(45,111,232,0.15);--ui-saved: #4ecb7a;--ui-cat-a: var(--ui-accent-primary);--ui-cat-a-hover: #1a5ac8;--ui-cat-b: #e88c2d;--ui-cat-b-hover: #c87018;--ui-cat-c: #2db87a;--ui-cat-c-hover: #1e9460;--ui-cat-d: #9b59b6;--ui-cat-d-hover: #7d4394;--ui-cat-e: #e84c4c;--ui-cat-e-hover: #c03030;--ui-handle-border-w: 1px;--ui-handle-border-w-round: 1.5px;--ui-btn-h: 24px;--ui-input-h: 24px;--ui-radius-sm: 4px;--ui-radius-md: 6px;--ui-radius-lg: 10px;--ui-form-label-w: 56px;--ui-row-gap: 4px;--ui-pad-panel: 8px;--ui-disabled-opacity: 0.5;--ui-bg-panel: var(--ui-bg-card);--ui-bg-2: var(--ui-bg-base);--ui-text-base: var(--ui-text);--ui-text-main: var(--ui-text);--ui-text-primary: var(--ui-text);--ui-text-secondary: var(--ui-text-muted);--ui-shadow-sm: 0 2px 8px rgba(0,0,0,0.4);--ui-shadow-md: 0 4px 16px rgba(0,0,0,0.5);--ui-shadow-lg: 0 8px 24px rgba(0,0,0,0.5);--ui-shadow-xl: 0 12px 48px rgba(0,0,0,0.6);--ui-fs-9: 9px;--ui-fs-10: 10px;--ui-fs-base: 11px;--ui-fs-12: 12px;--ui-fs-13: 13px;--ui-fs-14: 14px;--ui-fs-16: 16px;--ui-fs-20: 20px;--ui-fs-28: 28px;--ui-fw-medium: 500;--ui-fw-semibold: 600;--ui-fw-bold: 700;--preset-*) \c81c\c678  (DS-22,2026-06-14) \2500\2500  */ --ui-lh-tight: 1.3;--ui-lh-normal: 1.4;--ui-lh-relaxed: 1.6}#design-system-panel{border-top:1px solid var(--ui-border);padding:10px 12px 12px}#ds-panel-header{display:flex;align-items:center;justify-content:space-between;cursor:pointer;user-select:none;margin-bottom:0}#ds-panel-header .ds-panel-title{font-size:var(--ui-fs-9);font-weight:var(--ui-fw-bold);letter-spacing:0.1em;text-transform:uppercase;color:var(--ui-text-dim)}#ds-panel-header .ds-panel-chevron{color:var(--ui-text-dim);transition:transform 0.18s;font-size:var(--ui-fs-10)}#design-system-panel.open #ds-panel-header .ds-panel-chevron{transform:rotate(180deg)}#ds-panel-body{display:none;margin-top:10px}#design-system-panel.open #ds-panel-body{display:block}.ds-section-label{font-size:var(--ui-fs-9);font-weight:var(--ui-fw-bold);letter-spacing:0.08em;text-transform:uppercase;color:var(--ui-text-dim);margin:10px 0 5px}.ds-section-label:first-child{margin-top:0}.ds-base-row{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:4px}.ds-base-select{flex:1;height:24px;background:var(--ui-bg-input);border:1px solid var(--ui-border);border-radius:4px;color:var(--ui-text-sub);font-size:var(--ui-fs-base);padding:0 6px;outline:none;cursor:pointer;transition:border-color 0.15s}.ds-base-select:focus{border-color:var(--ui-accent-primary)}.ds-new-preset-btn{flex:1;padding:4px 8px;font-size:var(--ui-fs-10);background:var(--ui-bg-elevated);border:1px dashed var(--ui-border);border-radius:4px;color:var(--ui-text-muted);cursor:pointer;text-align:center;transition:border-color 0.15s,color 0.15s}.ds-new-preset-btn:hover{border-color:var(--ui-accent-primary);color:var(--ui-accent-primary)}.ds-token-row{display:flex;align-items:center;gap:var(--ui-row-gap);margin-bottom:5px}.ds-token-label{font-size:var(--ui-fs-10);color:var(--ui-text-sub);width:var(--ui-form-label-w);flex-shrink:0}.ds-token-picker{width:24px;height:20px;padding:0;border:1px solid var(--ui-border);border-radius:3px;cursor:pointer;background:transparent;flex-shrink:0}.ds-token-hex{flex:1;height:20px;background:var(--ui-bg-input);border:1px solid var(--ui-border);border-radius:4px;color:var(--ui-text-sub);font-size:var(--ui-fs-10);font-family:monospace;padding:0 5px;outline:none}.ds-token-hex:focus{border-color:var(--ui-accent-primary)}.ds-font-select{flex:1;height:22px;background:var(--ui-bg-input);border:1px solid var(--ui-border);border-radius:4px;color:var(--ui-text-sub);font-size:var(--ui-fs-10);padding:0 4px;outline:none;cursor:pointer}.ds-slider-row{gap:8px}.ds-slider-row input[type=range]{flex:1;accent-color:var(--ui-accent-primary)}.ds-slider-row span{font-size:var(--ui-fs-10);color:var(--ui-text-sub);width:28px;text-align:right;flex-shrink:0}.ds-btn-row{display:flex;gap:6px;margin-top:10px}.ds-apply-btn{flex:1;padding:6px 0;background:var(--ui-accent-primary);border:none;border-radius:var(--ui-radius-sm);color:#fff;font-size:var(--ui-fs-base);font-weight:var(--ui-fw-semibold);cursor:pointer;transition:opacity 0.15s}.ds-apply-btn:hover{opacity:0.85}.ds-reset-btn{flex:1;padding:5px 0;background:transparent;border:1px solid var(--ui-border);border-radius:var(--ui-radius-sm);color:var(--ui-text-muted);font-size:var(--ui-fs-base);cursor:pointer;transition:border-color 0.15s,color 0.15s}.ds-reset-btn:hover{border-color:var(--ui-border-mid);color:var(--ui-text-sub)}.ds-colorvars-list{display:flex;flex-direction:column;margin-bottom:4px}.ds-colorvars-empty{font-size:var(--ui-fs-10);color:var(--ui-text-dim);padding:4px 0 6px}.ds-colorvar-row{gap:6px}.ds-colorvar-name{flex:1;width:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ds-colorvar-del{width:20px;height:20px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:transparent;border:1px solid var(--ui-border);border-radius:3px;color:var(--ui-text-muted);font-size:var(--ui-fs-14);line-height:1;cursor:pointer;transition:border-color 0.15s,color 0.15s}.ds-colorvar-del:hover{border-color:var(--ui-accent-primary);color:var(--ui-accent-primary)}#var-toggle-btn{display:none;align-items:center;gap:8px;width:100%;height:36px;padding:0 14px;background:transparent;border:none;border-bottom:1px solid #2e2e2e;color:var(--ui-text-muted);font-size:var(--ui-fs-base);font-weight:var(--ui-fw-semibold);letter-spacing:0.05em;text-transform:uppercase;cursor:pointer;transition:color 0.15s,background 0.15s;text-align:left;flex-shrink:0}#var-toggle-btn svg{width:14px;height:14px;opacity:0.6;flex-shrink:0}#var-toggle-btn:hover{color:var(--ui-text-sub);background:var(--ui-bg-hover)}#var-toggle-btn.active{color:var(--ui-accent);background:rgba(106,176,255,0.06)}#var-panel{max-height:0;overflow:hidden;transition:max-height 0.2s ease,opacity 0.18s ease;opacity:0;border-bottom:1px solid var(--ui-border);background:var(--ui-bg-base)}#var-panel.open{max-height:420px;opacity:1;overflow-y:auto}#var-panel.open::-webkit-scrollbar{width:4px}#var-panel.open::-webkit-scrollbar-thumb{background:var(--ui-border-mid);border-radius:2px}.var-panel-inner{padding:8px 10px 10px}.var-panel-section-title{display:flex;align-items:center;justify-content:space-between;font-size:var(--ui-fs-9);font-weight:var(--ui-fw-bold);letter-spacing:0.1em;text-transform:uppercase;color:var(--ui-text-dim);margin-bottom:6px}.var-add-btn{width:18px;height:18px;background:var(--ui-bg-input);border:1px solid var(--ui-border);border-radius:4px;color:var(--ui-text-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background 0.12s,color 0.12s}.var-add-btn:hover{background:var(--ui-bg-hover);color:var(--ui-text)}.var-empty{font-size:var(--ui-fs-base);color:var(--ui-text-dim);padding:4px 0}.var-item{display:flex;align-items:center;gap:5px;margin-bottom:4px;padding:3px 4px;border-radius:var(--ui-radius-sm);background:var(--ui-bg-input);border:1px solid var(--ui-border)}.var-item:hover{border-color:var(--ui-border-mid)}.var-item-type{font-size:var(--ui-fs-9);font-weight:var(--ui-fw-bold);letter-spacing:0.04em;padding:1px 4px;border-radius:3px;flex-shrink:0}.var-type-color{background:rgba(106,176,255,0.15);color:var(--ui-accent)}.var-type-text{background:rgba(127,200,127,0.15);color:var(--ui-success)}.var-type-number{background:rgba(224,108,108,0.12);color:var(--ui-danger)}.var-item-swatch{width:14px;height:14px;border-radius:3px;border:1px solid rgba(255,255,255,0.12);flex-shrink:0}.var-item-name{flex:1;font-size:var(--ui-fs-base);color:var(--ui-text-sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.var-item-value{width:54px;height:20px;flex-shrink:0;background:var(--ui-bg-app);border:1px solid var(--ui-border);border-radius:3px;color:var(--ui-text-sub);font-size:var(--ui-fs-base);font-family:monospace;text-align:center;outline:none;padding:0 3px}.var-item-value:focus{border-color:var(--ui-accent-primary)}.var-item-value-color{width:28px;padding:0;cursor:pointer;background:transparent}.var-item-del{width:18px;height:18px;background:transparent;border:none;color:var(--ui-text-dim);cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:3px;flex-shrink:0;transition:color 0.12s,background 0.12s}.var-item-del:hover{color:var(--ui-danger);background:rgba(224,108,108,0.1)}.var-add-form{padding:6px 0 2px;display:flex;flex-direction:column;gap:5px}.var-input{width:100%;height:24px;background:var(--ui-bg-input);border:1px solid var(--ui-border);border-radius:4px;color:var(--ui-text);font-size:var(--ui-fs-base);padding:0 7px;outline:none}.var-input:focus{border-color:var(--ui-accent-primary)}.var-input::placeholder{color:var(--ui-text-dim)}.var-select{width:100%;height:24px;background:var(--ui-bg-input);border:1px solid var(--ui-border);border-radius:4px;color:var(--ui-text-sub);font-size:var(--ui-fs-base);padding:0 5px;outline:none;cursor:pointer}.var-select:focus{border-color:var(--ui-accent-primary)}.var-form-actions{display:flex;gap:5px;margin-top:2px}.var-btn{flex:1;height:24px;border-radius:4px;font-size:var(--ui-fs-base);font-weight:var(--ui-fw-semibold);cursor:pointer;border:none;transition:opacity 0.13s}.var-btn:hover{opacity:0.82}.var-btn-primary{background:var(--ui-accent-primary);color:#fff}.var-btn-ghost{background:transparent;border:1px solid var(--ui-border);color:var(--ui-text-muted)}.var-bind-section{border-top:1px solid var(--ui-border);padding-top:6px;margin-top:4px}.var-bind-row{display:flex;align-items:center;gap:6px;margin-bottom:5px}.var-bind-label{font-size:var(--ui-fs-10);color:var(--ui-text-dim);width:34px;flex-shrink:0}.var-bind-select{flex:1;height:22px;font-size:var(--ui-fs-10)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:"Pretendard",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--ui-bg-app);color:var(--ui-text);height:100vh;display:flex;flex-direction:column;overflow:hidden}#topbar{height:44px;background:var(--ui-bg-elevated);border-bottom:1px solid var(--ui-border);display:flex;align-items:center;padding:0 12px;gap:6px;flex-shrink:0;position:relative;z-index:10000;-webkit-app-region:drag}#topbar button,#topbar label,#topbar input,#topbar select{-webkit-app-region:no-drag}.electron-app #topbar{padding-left:80px}.electron-app.fullscreen #topbar{padding-left:12px}#topbar .logo{font-size:var(--ui-fs-14);font-weight:var(--ui-fw-semibold);color:#fff;margin-right:8px}#topbar .divider{width:1px;height:20px;background:var(--ui-border-mid);flex-shrink:0;margin:0 2px}#topbar .spacer{flex:1}#home-btn{width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;border-radius:6px;color:var(--ui-text-muted);cursor:pointer;flex-shrink:0;transition:all 0.15s}#home-btn:hover{background:var(--ui-border);color:#ccc}#project-dd-wrap{position:relative;flex-shrink:1;min-width:0;-webkit-app-region:no-drag}#project-dd-btn{display:flex;align-items:center;gap:6px;max-width:260px;min-width:0;height:28px;padding:0 9px;background:var(--ui-bg-elevated);border:1px solid var(--ui-border);border-radius:6px;cursor:pointer;font-size:var(--ui-fs-12);font-weight:var(--ui-fw-medium);color:var(--ui-text-muted);font-family:inherit;transition:background 0.12s,color 0.12s,border-color 0.12s}#project-dd-btn:hover{background:var(--ui-bg-hover);border-color:var(--ui-divider);color:#ddd}#project-dd-wrap.open #project-dd-btn{background:var(--ui-border);border-color:var(--ui-border-strong);color:#ddd}#project-dd-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pdd-chevron{flex-shrink:0;opacity:0.55;transition:transform 0.15s}#project-dd-wrap.open .pdd-chevron{transform:rotate(180deg)}#project-dd-menu{display:none;position:absolute;top:calc(100% + 6px);left:0;width:268px;max-height:calc(100vh - 90px);overflow-y:auto;background:var(--ui-bg-card);border:1px solid var(--ui-border-mid);border-radius:8px;padding:0 0 6px;box-shadow:var(--ui-shadow-lg);z-index:9999}#project-dd-wrap.open #project-dd-menu{display:block}#project-dd-menu #project-name-bar{border-radius:8px 8px 0 0}#project-dd-list{padding:4px 0}.pdd-item{display:flex;align-items:center;gap:8px;padding:7px 14px;cursor:pointer;font-size:var(--ui-fs-12);color:#ccc;transition:background 0.1s}.pdd-item:hover{background:var(--ui-bg-hover);color:#fff}.pdd-item svg{flex-shrink:0;opacity:0.5}.pdd-item-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pdd-item-date{font-size:var(--ui-fs-10);color:var(--ui-text-dim);flex-shrink:0}.pdd-empty{padding:10px 14px;font-size:var(--ui-fs-12);color:var(--ui-text-dim)}.pdd-divider{height:1px;margin:4px 0;background:var(--ui-border)}.pdd-action{color:var(--ui-text-sub)}.tb-btn{height:28px;padding:0 10px;display:inline-flex;align-items:center;justify-content:center;background:transparent;border:1px solid transparent;border-radius:var(--ui-radius-sm);color:var(--ui-text-sub);font-size:var(--ui-fs-base);cursor:pointer;transition:all 0.15s}.tb-btn:hover{background:var(--ui-border);color:#fff;border-color:var(--ui-border-strong)}.tb-btn.active{background:var(--ui-accent-primary);color:#fff;border-color:var(--ui-accent-primary)}.tb-btn--icon{width:28px;padding:0;color:var(--ui-text-dim)}.tb-btn--icon:hover{color:#fff}.tb-btn--icon.has-commit{color:var(--ui-text-sub)}.tb-btn--icon:not(.has-commit){opacity:0.35;pointer-events:none}.tb-hidden-mvp{display:none!important}.tb-badge{display:inline-flex;align-items:center;font-size:var(--ui-fs-10);color:var(--ui-text-dim);background:var(--ui-bg-input);border:1px solid var(--ui-border-mid);border-radius:4px;padding:2px 6px;font-family:monospace;white-space:nowrap;flex-shrink:0}.tb-badge--pill{border-radius:10px;padding:1px 6px;border-color:transparent;background:var(--ui-border-mid);font-family:inherit}.tb-badge--accent{color:#fff;background:var(--ui-accent-primary);border-color:var(--ui-accent-primary)}.tb-badge--warn{font-family:inherit;color:var(--ui-danger);background:var(--ui-danger-bg);border-color:var(--ui-danger-border)}.tb-badge--muted{font-family:inherit;color:var(--ui-text-muted)}.pub-dd-item--row{justify-content:space-between}#topbar button[onclick="saveProject()"]{color:var(--ui-accent)}#topbar button[onclick="saveProject()"]:hover{background:rgba(106,176,255,0.12);border-color:rgba(106,176,255,0.35);color:var(--ui-accent)}#zoom-ctrl{display:flex;align-items:center;gap:4px;background:var(--ui-bg-app);border:1px solid var(--ui-border-mid);border-radius:6px;padding:0 4px;height:28px}.zoom-btn{width:22px;height:22px;background:transparent;border:none;border-radius:var(--ui-radius-sm);color:var(--ui-text-sub);font-size:var(--ui-fs-12);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.15s}.zoom-btn:hover{background:var(--ui-border);color:#fff}#zoom-display{font-size:var(--ui-fs-base);color:#ccc;width:36px;text-align:center;user-select:none}.zoom-sep{width:1px;height:14px;background:var(--ui-border-mid);margin:0 2px}#canvas-size-label{font-size:var(--ui-fs-base);color:var(--ui-text-muted);letter-spacing:0.01em}#autosave-indicator{font-size:var(--ui-fs-10);color:var(--ui-text-dim);display:inline-flex;align-items:center;gap:4px;opacity:0;transition:opacity 0.3s;white-space:nowrap;padding:0 4px}#autosave-indicator.saving{opacity:1;color:var(--ui-text-muted)}#autosave-indicator.saved{opacity:1;color:var(--ui-saved)}#autosave-indicator.error{opacity:1}#autosave-indicator.saved::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--ui-saved)}#autosave-indicator.saving::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--ui-divider);animation:blink 0.8s ease infinite}@keyframes blink{0%,100%{opacity:1}50%{opacity:0.3}}button:focus-visible,.tb-btn:focus-visible,.prop-btn:focus-visible,.prop-action-btn:focus-visible,.cpm-btn:focus-visible,.cpm-action:focus-visible,.layer-item:focus-visible,.file-page-item:focus-visible,.file-page-add:focus-visible,.file-page-copy:focus-visible,.file-page-del:focus-visible,.file-page-info:focus-visible,.zoom-btn:focus-visible,.prop-align-btn:focus-visible,.cv-chip:focus-visible,.prop-slider:focus-visible,[role=button]:focus-visible,[role=tab]:focus-visible{outline:2px solid var(--ui-accent-primary, #2d6fe8);outline-offset:1px}.layer-item:focus-visible,.layer-row-header:focus-visible,.file-page-item:focus-visible{outline-offset:-2px}