*{margin:0;padding:0;box-sizing:border-box}:root{--bg-body: #101014;--fg: #f0f0f4;--muted: #9a9aa8;--accent: #ff3b6b;--canvas-base: #121218;--canvas-glow-1: #1a1a22;--canvas-glow-2: #16161d;--panel-bg: #17171e;--border: #26262f;--btn-bg: #1d1d26;--btn-border: #33333f;--hover-bg: #26262f;--hover-fg: #fff;--clear-border: #3a3a46;--clear-fg: #c8c8d4;--input-bg: #101014;--statusbar-bg: #0c0c10;--swatch-active-border: #fff;--swatch-ring: #ffffff55}[data-theme=light]{--bg-body: #f2f2f6;--fg: #22222a;--muted: #6a6a78;--accent: #e02555;--canvas-base: #e9e9ef;--canvas-glow-1: #ffffff;--canvas-glow-2: #f4f4f8;--panel-bg: #ffffff;--border: #d9d9e3;--btn-bg: #f0f0f4;--btn-border: #cfcfda;--hover-bg: #e4e4ec;--hover-fg: #16161c;--clear-border: #c4c4d0;--clear-fg: #55555f;--input-bg: #ffffff;--statusbar-bg: #e8e8ee;--swatch-active-border: #22222a;--swatch-ring: #00000030}html,body,#root{width:100%;height:100%}body{background:var(--bg-body);color:var(--fg);font-family:Pretendard,Noto Sans KR,system-ui,sans-serif;overflow:hidden}.app-layout{display:grid;grid-template-columns:1fr 280px;grid-template-rows:1fr auto;width:100%;height:100%}.app-layout.fullscreen{grid-template-columns:1fr;grid-template-rows:1fr}.app-layout.fullscreen .control-panel,.app-layout.fullscreen .status-bar{display:none}.fs-exit{position:absolute;top:14px;right:14px;width:40px;height:40px;border:1px solid #ffffff2e;border-radius:10px;background:#00000042;color:#ffffffb8;font-size:18px;cursor:pointer;opacity:.35;transition:opacity .2s;z-index:10}.fs-exit:hover{opacity:1}[data-theme=light] .fs-exit{border-color:#0002;background:#ffffff8c;color:#22222a}.canvas-wrap{grid-column:1;grid-row:1;position:relative;container-type:size;background:radial-gradient(ellipse at 30% 20%,var(--canvas-glow-1) 0%,transparent 60%),radial-gradient(ellipse at 80% 80%,var(--canvas-glow-2) 0%,transparent 55%),var(--canvas-base)}.spray-canvas{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;display:block;cursor:crosshair;touch-action:none}.asset-layer{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;overflow:hidden}.placed-asset{position:absolute;aspect-ratio:1;transform:translate(-50%,-50%) rotate(var(--rot, 0deg));animation:asset-in .45s ease-out;will-change:transform}.asset-img{width:100%;height:100%;display:block}.motion-wing_flap{animation:wing-flap .9s ease-in-out infinite}.motion-float{animation:float-y 2.6s ease-in-out infinite}@keyframes wing-flap{0%,to{transform:scaleX(1)}50%{transform:scaleX(.35)}}@keyframes float-y{0%,to{transform:translateY(0)}50%{transform:translateY(-10%)}}@keyframes asset-in{0%{opacity:0;transform:translate(-50%,-50%) rotate(var(--rot, 0deg)) scale(.5)}to{opacity:1;transform:translate(-50%,-50%) rotate(var(--rot, 0deg)) scale(1)}}.poem-layer{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;overflow:hidden}.poem-line{position:absolute;transform:translate(-50%,-50%);opacity:0;transition:opacity 1.2s ease;white-space:nowrap;letter-spacing:.04em;text-shadow:0 0 14px rgba(0,0,0,.85),0 2px 6px rgba(0,0,0,.7)}.poem-line.visible{opacity:1}.typo-mode .asset-layer,.typo-mode .poem-layer{display:none}.typo-layer{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;overflow:hidden}.canvas-wrap.typo-mode[data-typo-preset=space]{background:radial-gradient(ellipse 55% 40% at 72% 18%,rgba(88,104,182,.22),transparent 62%),radial-gradient(ellipse 48% 34% at 22% 72%,rgba(128,76,148,.16),transparent 60%),linear-gradient(180deg,#04050e,#0a0d1f 55%,#10132a)}.typo-line{position:absolute;left:0;right:0;text-align:center;white-space:pre;font-weight:600;letter-spacing:.08em;text-shadow:0 0 18px rgba(205,215,255,.45),0 0 42px rgba(150,170,255,.25);will-change:top,opacity}.typo-star{position:absolute;border-radius:50%;background:#fff;opacity:var(--o, .5);animation:star-twinkle 3.6s ease-in-out infinite}@keyframes star-twinkle{0%,to{opacity:var(--o, .5)}50%{opacity:calc(var(--o, .5) * .3)}}.control-panel{grid-column:2;grid-row:1;background:var(--panel-bg);border-left:1px solid var(--border);padding:20px 18px;display:flex;flex-direction:column;gap:18px;overflow-y:auto}.panel-head{display:flex;align-items:center;justify-content:space-between;gap:8px}.panel-title{font-size:18px;font-weight:800;letter-spacing:.06em;color:var(--accent);text-transform:uppercase}.theme-toggle{padding:6px 10px;border:1px solid var(--btn-border);border-radius:8px;background:var(--btn-bg);color:var(--muted);font-size:12px;font-weight:700;cursor:pointer;transition:all .15s;white-space:nowrap}.theme-toggle:hover{background:var(--hover-bg);color:var(--hover-fg)}.control-panel section{display:flex;flex-direction:column;gap:8px}.control-panel label{font-size:12px;font-weight:600;color:var(--muted);letter-spacing:.04em}.control-panel label .value{color:var(--fg);font-variant-numeric:tabular-nums}.control-panel input[type=range]{width:100%;accent-color:var(--accent)}.palette{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.swatch{aspect-ratio:1;border-radius:8px;border:2px solid transparent;cursor:pointer;transition:transform .1s}[data-theme=light] .swatch:not(.active){border-color:#00000014}.swatch:hover{transform:scale(1.08)}.swatch.active{border-color:var(--swatch-active-border);box-shadow:0 0 0 2px var(--panel-bg),0 0 0 4px var(--swatch-ring)}.color-picker{grid-column:span 4;width:100%;height:32px;border:1px solid var(--btn-border);border-radius:8px;background:var(--input-bg);cursor:pointer}.mode-toggle{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px}.style-toggle{grid-template-columns:1fr 1fr}.spray-text-input{padding:8px 10px;border:1px solid var(--btn-border);border-radius:8px;background:var(--input-bg);color:var(--fg);font-size:13px;font-weight:700}.mode-toggle button{padding:10px 4px;border:1px solid var(--btn-border);border-radius:8px;background:var(--btn-bg);color:var(--muted);font-size:11px;font-weight:700;cursor:pointer;transition:all .15s;word-break:keep-all}.mode-toggle button.active{background:var(--accent);border-color:var(--accent);color:#fff}.auto-btn{margin-top:auto;padding:12px;border:1px solid var(--clear-border);border-radius:10px;background:transparent;color:var(--clear-fg);font-size:13px;font-weight:700;cursor:pointer;transition:all .15s}.auto-btn:hover{background:var(--hover-bg);color:var(--hover-fg)}.auto-btn.active{background:var(--accent);border-color:var(--accent);color:#fff}.clear-btn{margin-top:0;padding:12px;border:1px solid var(--clear-border);border-radius:10px;background:transparent;color:var(--clear-fg);font-size:13px;font-weight:700;cursor:pointer;transition:all .15s}.clear-btn:hover{background:var(--hover-bg);color:var(--hover-fg)}.status-bar{grid-column:1 / -1;grid-row:2;display:flex;gap:20px;align-items:center;padding:8px 16px;background:var(--statusbar-bg);border-top:1px solid var(--border);font-size:12px;color:var(--muted);white-space:nowrap;overflow-x:auto}.ws-chip{font-weight:700}.ws-chip.open{color:#3ddc84}.ws-chip.connecting{color:#ffe066}.ws-chip.closed{color:#ff5c5c}[data-theme=light] .ws-chip.open{color:#178f53}[data-theme=light] .ws-chip.connecting{color:#a67c00}[data-theme=light] .ws-chip.closed{color:#d03434}