:root{--c-bg-0: #0b0f1a;--c-bg-1: #131829;--c-bg-2: #1b2238;--c-ink-0: #f7f8ff;--c-ink-1: #c8cdf2;--c-ink-2: #8a90b8;--c-line: rgba(255, 255, 255, .08);--c-line-strong: rgba(255, 255, 255, .18);--c-primary: #a78bfa;--c-primary-ink: #0b0f1a;--c-accent: #22d3ee;--c-accent-2: #f472b6;--c-warn: #fbbf24;--c-danger: #f87171;--c-success: #34d399;--s-0: 0;--s-1: 4px;--s-2: 8px;--s-3: 12px;--s-4: 16px;--s-5: 24px;--s-6: 32px;--s-7: 48px;--s-8: 64px;--s-9: 96px;--r-1: 6px;--r-2: 10px;--r-3: 16px;--r-4: 22px;--r-pill: 999px;--sh-1: 0 1px 2px rgba(0, 0, 0, .25);--sh-2: 0 4px 12px rgba(0, 0, 0, .32);--sh-3: 0 14px 36px rgba(0, 0, 0, .42);--sh-glow: 0 0 0 1px rgba(167, 139, 250, .55), 0 8px 32px rgba(167, 139, 250, .35);--f-sans: "Pretendard Variable", "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", system-ui, sans-serif;--f-display: "Pretendard Variable", "Pretendard", "Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif;--f-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;--t-12: .75rem;--t-14: .875rem;--t-16: 1rem;--t-18: 1.125rem;--t-20: 1.25rem;--t-24: 1.5rem;--t-32: 2rem;--t-40: 2.5rem;--t-56: 3.5rem;--m-fast: .12s;--m-base: .24s;--m-slow: .42s;--m-hero: .6s;--m-ease-out: cubic-bezier(.16, 1, .3, 1);--m-ease-in: cubic-bezier(.7, 0, .84, 0);--m-ease-spring: cubic-bezier(.34, 1.56, .64, 1);--z-canvas: 1;--z-deco: 5;--z-tools: 10;--z-banner: 20;--z-toast: 30;--dice-glow: 0;--dice-hue: 0deg;--dice-radius: 22px;--dice-bg: #1b2238;--dice-ink: #f7f8ff;--dice-accent: #a78bfa;--dice-font: var(--f-sans)}@media(prefers-color-scheme:light){:root{--c-bg-0: #f6f7fb;--c-bg-1: #ffffff;--c-bg-2: #eef0f8;--c-ink-0: #0b0f1a;--c-ink-1: #2a3050;--c-ink-2: #5e668d;--c-line: rgba(11, 15, 26, .08);--c-line-strong: rgba(11, 15, 26, .18);--c-primary-ink: #ffffff}}*,*:before,*:after{box-sizing:border-box}html,body{margin:0;padding:0}html{color-scheme:dark light}body{min-height:100dvh;background:radial-gradient(1200px 800px at 20% -10%,rgba(167,139,250,.22),transparent 60%),radial-gradient(900px 600px at 110% 110%,rgba(34,211,238,.18),transparent 60%),var(--c-bg-0);color:var(--c-ink-0);font-family:var(--f-sans);font-size:var(--t-16);line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow:hidden}img,svg,canvas{display:block;max-width:100%}button{font:inherit;color:inherit;cursor:pointer}button:disabled{cursor:not-allowed;opacity:.55}:focus-visible{outline:2px solid var(--c-accent);outline-offset:2px;border-radius:4px}[hidden]{display:none!important}::selection{background:var(--c-primary);color:var(--c-primary-ink)}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}.app-shell{position:relative;display:grid;grid-template-columns:1fr 380px;grid-template-rows:1fr;grid-template-areas:"stage tools";gap:var(--s-4);height:100dvh;padding:var(--s-4)}@media(max-width:960px){.app-shell{grid-template-columns:1fr;grid-template-rows:minmax(48dvh,1fr) auto;grid-template-areas:"stage" "tools"}}.app-stage{grid-area:stage;position:relative;min-height:0;border-radius:var(--r-3);overflow:hidden;background:radial-gradient(60% 70% at 50% 100%,rgba(34,211,238,.1),transparent 70%),linear-gradient(160deg,#ffffff0a,#fff0 60%),var(--c-bg-1);box-shadow:var(--sh-3),inset 0 0 0 1px var(--c-line)}.app-tools{grid-area:tools;min-height:0}.stage-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:1}.stage-iframe{position:absolute;z-index:2;border:0;background:#fff;border-radius:8px;box-shadow:0 10px 40px #00000059;pointer-events:auto}.tools-panel{background:linear-gradient(180deg,var(--c-bg-1),var(--c-bg-2));border:1px solid var(--c-line);border-radius:var(--r-3);box-shadow:var(--sh-2);overflow:hidden;display:flex;flex-direction:column;min-height:0}.tools-tabs{display:flex;gap:2px;padding:var(--s-2);border-bottom:1px solid var(--c-line);background:#ffffff05}.tools-tabs button{flex:1;padding:var(--s-2) var(--s-3);background:transparent;border:none;border-radius:var(--r-2);color:var(--c-ink-2);font-size:var(--t-14);font-weight:600;transition:background var(--m-fast) var(--m-ease-out),color var(--m-fast)}.tools-tabs button[aria-selected=true]{background:var(--c-bg-0);color:var(--c-ink-0);box-shadow:inset 0 0 0 1px var(--c-line-strong)}.tools-tabs button:hover:not([aria-selected=true]){background:#ffffff0d;color:var(--c-ink-1)}.tools-body{flex:1;overflow-y:auto;padding:var(--s-4);display:grid;gap:var(--s-4);scrollbar-width:thin;scrollbar-color:var(--c-line-strong) transparent}.tools-body::-webkit-scrollbar{width:8px}.tools-body::-webkit-scrollbar-thumb{background:var(--c-line-strong);border-radius:var(--r-pill)}.tools-footer{display:flex;align-items:center;justify-content:space-between;gap:var(--s-2);padding:var(--s-3) var(--s-4);border-top:1px solid var(--c-line);background:#ffffff05}.btn{--bg: var(--c-bg-2);--ink: var(--c-ink-0);--bd: var(--c-line-strong);display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);min-height:44px;padding:0 var(--s-4);border-radius:var(--r-pill);background:var(--bg);color:var(--ink);border:1px solid var(--bd);font-weight:600;font-size:var(--t-14);letter-spacing:-.005em;transition:transform var(--m-fast) var(--m-ease-out),background var(--m-fast),box-shadow var(--m-fast)}.btn:hover{transform:translateY(-1px)}.btn:active{transform:translateY(0)}.btn--primary{--bg: linear-gradient(135deg, var(--c-primary), var(--c-accent));--ink: var(--c-primary-ink);--bd: transparent;box-shadow:var(--sh-glow)}.btn--primary:hover{box-shadow:0 0 0 1px var(--c-accent),0 12px 36px #22d3ee66}.btn--hero{min-height:56px;padding:0 var(--s-6);font-size:var(--t-18);border-radius:var(--r-pill)}.btn--ghost{--bg: transparent;--bd: var(--c-line-strong)}.btn--ghost:hover{background:#ffffff0f}.btn__chev{display:inline-flex;width:1.2em;height:1.2em;align-items:center;justify-content:center;transition:transform var(--m-base) var(--m-ease-spring)}.btn:hover .btn__chev{transform:translate(4px)}.field{display:grid;gap:var(--s-2)}.field__label{font-size:var(--t-12);color:var(--c-ink-2);text-transform:uppercase;letter-spacing:.12em;font-weight:600}.field__control{display:flex;align-items:center;gap:var(--s-3)}.slider{-webkit-appearance:none;appearance:none;width:100%;height:4px;background:var(--c-bg-0);border-radius:var(--r-pill);outline:none;box-shadow:inset 0 0 0 1px var(--c-line)}.slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:22px;background:linear-gradient(135deg,var(--c-primary),var(--c-accent));border-radius:50%;cursor:grab;box-shadow:var(--sh-1);transition:transform var(--m-fast) var(--m-ease-out)}.slider::-webkit-slider-thumb:active{transform:scale(1.1);cursor:grabbing}.slider::-moz-range-thumb{width:22px;height:22px;background:linear-gradient(135deg,var(--c-primary),var(--c-accent));border-radius:50%;border:none;cursor:grab}.slider:focus-visible{box-shadow:inset 0 0 0 1px var(--c-line),0 0 0 3px #22d3ee66}input[type=color].swatch{-webkit-appearance:none;appearance:none;width:44px;height:44px;border:1px solid var(--c-line-strong);border-radius:var(--r-2);background:transparent;padding:0;cursor:pointer}input[type=color].swatch::-webkit-color-swatch-wrapper{padding:0;border-radius:var(--r-2)}input[type=color].swatch::-webkit-color-swatch{border:none;border-radius:var(--r-2)}.preset-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:var(--s-2)}.preset{position:relative;min-height:96px;border-radius:var(--r-2);border:1px solid var(--c-line-strong);padding:var(--s-3);background:var(--c-bg-2);color:var(--c-ink-0);font-size:var(--t-12);font-weight:600;text-align:left;cursor:pointer;overflow:hidden;transition:transform var(--m-fast) var(--m-ease-out),box-shadow var(--m-fast)}.preset:hover{transform:translateY(-1px);box-shadow:var(--sh-2)}.preset[aria-pressed=true]{box-shadow:var(--sh-glow);border-color:transparent}.preset:before{content:"";position:absolute;inset:0;opacity:.92;z-index:0}.preset__name{position:relative;z-index:1;mix-blend-mode:difference;color:#fff}.preset[data-preset=y2k]:before{background:linear-gradient(135deg,#ff5fa2,#5ce1ff,#8c52ff)}.preset[data-preset=aero]:before{background:linear-gradient(160deg,#bde0fe,#a2d2ff,#cdb4db)}.preset[data-preset=pastel]:before{background:linear-gradient(160deg,#ffe5ec,#d4f1f4,#ddb6ff)}.preset[data-preset=holo]:before{background:conic-gradient(from 210deg,#c0c0ff,#ffd6ff,#c0f0ff,#d0ffc0,#ffe0c0,#c0c0ff)}.preset[data-preset=bento]:before{background:linear-gradient(180deg,#f6f6f6,#e7e7e7)}.preset[data-preset=bento] .preset__name{color:#0b0f1a;mix-blend-mode:normal}.sticker-tray{display:grid;grid-template-columns:repeat(auto-fill,minmax(56px,1fr));gap:var(--s-2)}.sticker-chip{aspect-ratio:1;border-radius:var(--r-2);border:1px solid var(--c-line-strong);background:var(--c-bg-2);display:grid;place-items:center;font-size:24px;cursor:grab;transition:transform var(--m-fast) var(--m-ease-spring)}.sticker-chip:active{cursor:grabbing;transform:scale(.96)}.sticker-chip:hover{transform:translateY(-1px) scale(1.04);box-shadow:var(--sh-2)}.face-select{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--s-1)}.face-pill{min-height:36px;display:grid;place-items:center;border-radius:var(--r-2);border:1px solid var(--c-line-strong);background:var(--c-bg-2);font-size:var(--t-12);font-weight:700;color:var(--c-ink-1)}.face-pill[aria-pressed=true]{background:linear-gradient(135deg,var(--c-primary),var(--c-accent));color:var(--c-primary-ink);border-color:transparent}.banner{position:absolute;top:var(--s-3);left:50%;transform:translate(-50%);z-index:var(--z-banner);background:#0b0f1ac7;backdrop-filter:blur(12px);border:1px solid var(--c-line-strong);border-radius:var(--r-pill);padding:var(--s-2) var(--s-4);font-size:var(--t-12);color:var(--c-ink-1);display:flex;align-items:center;gap:var(--s-2);max-width:calc(100% - var(--s-8))}.banner__dot{width:8px;height:8px;border-radius:50%;background:var(--c-warn);box-shadow:0 0 12px var(--c-warn)}.banner.is-ok .banner__dot{background:var(--c-success);box-shadow:0 0 12px var(--c-success)}.toast{position:fixed;right:var(--s-5);bottom:var(--s-5);z-index:var(--z-toast);background:var(--c-bg-1);border:1px solid var(--c-line-strong);border-radius:var(--r-2);padding:var(--s-3) var(--s-4);box-shadow:var(--sh-3);font-size:var(--t-14);display:flex;gap:var(--s-2);align-items:center;animation:toast-in var(--m-base) var(--m-ease-spring)}@keyframes toast-in{0%{transform:translateY(12px);opacity:0}to{transform:translateY(0);opacity:1}}.input,.select,.textarea{width:100%;background:var(--c-bg-0);border:1px solid var(--c-line-strong);border-radius:var(--r-2);padding:var(--s-2) var(--s-3);color:var(--c-ink-0);min-height:44px;font-size:var(--t-14)}.input:focus-visible,.select:focus-visible,.textarea:focus-visible{border-color:var(--c-accent)}.textarea{min-height:80px;padding:var(--s-3);resize:vertical;font-family:var(--f-sans)}.row{display:flex;gap:var(--s-2);align-items:center}.row--space{justify-content:space-between}.muted{color:var(--c-ink-2)}.kbd{font-family:var(--f-mono);font-size:var(--t-12);padding:2px 6px;border-radius:4px;background:var(--c-bg-0);border:1px solid var(--c-line-strong)}.mode-pill{flex:1;min-height:40px;border-radius:var(--r-pill);border:1px solid var(--c-line-strong);background:var(--c-bg-2);color:var(--c-ink-1);font-weight:600;font-size:var(--t-14);cursor:pointer;transition:background var(--m-fast),color var(--m-fast),box-shadow var(--m-fast)}.mode-pill[aria-pressed=true]{background:linear-gradient(135deg,var(--c-primary),var(--c-accent));color:var(--c-primary-ink);border-color:transparent;box-shadow:var(--sh-1)}.mode-pill:hover:not([aria-pressed=true]):not([disabled]){background:#ffffff0f;color:var(--c-ink-0)}.mode-pill[disabled]{opacity:.45;cursor:not-allowed}input[aria-invalid=true]{border-color:var(--c-danger)}