:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#0a0e18;--bg-radial:radial-gradient(1200px 600px at 50% -10%, #1a2242 0%, #0a0e18 60%);--surface:#141a2b;--surface-2:#1a2236;--surface-hover:#202a42;--border:#262f47;--text:#eef1f8;--text-dim:#8b93ab;--accent:#7c6cf6;--accent-2:#5b8def;--accent-grad:linear-gradient(135deg, #7c6cf6 0%, #5b8def 100%);--on-accent:#fff;--success:#34d399;--success-bg:#0f2e22;--success-border:#34d3994d;--danger:#fb7185;--danger-bg:#3a1220;--danger-border:#fb71854d;--warn:#fbbf24;--warn-bg:#fbbf241a;--warn-border:#fbbf2459;--glass-bg:#0a0e18b8;--glass-border:#ffffff1f;--focus-ring:#ffffff26;--focus-ring-solid:#fff;--canvas-bg:radial-gradient(circle at 50% 20%, #151d34 0%, #080b13 75%);--canvas-glass-bg:#0a0e18b8;--canvas-glass-border:#ffffff1f;--canvas-text:#eef1f8;--canvas-text-dim:#8b93ab;--radius-lg:18px;--radius:12px;--radius-sm:8px;--shadow:0 10px 30px #0006;-webkit-font-smoothing:antialiased;font:16px/1.5 -apple-system,Malgun Gothic,Apple SD Gothic Neo,Noto Sans KR,system-ui,sans-serif}@media (prefers-color-scheme:light){:root:not([data-theme=dark]){--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--bg:#f4f6fb;--bg-radial:radial-gradient(1200px 600px at 50% -10%, #e3e9ff 0%, #f4f6fb 60%);--surface:#fff;--surface-2:#eef1f8;--surface-hover:#e5eaf5;--border:#d5dced;--text:#141827;--text-dim:#5a6480;--accent:#5a49dd;--accent-2:#3a6ed4;--accent-grad:linear-gradient(135deg, #6a5af0 0%, #4a7ce0 100%);--on-accent:#fff;--success:#0d8f5a;--success-bg:#ddf3e8;--success-border:#0d8f5a4d;--danger:#cf3450;--danger-bg:#fce7ec;--danger-border:#cf34504d;--warn:#b45309;--warn-bg:#b453091a;--warn-border:#b4530959;--glass-bg:#ffffffb8;--glass-border:#141e3c1f;--focus-ring:#5a49dd40;--focus-ring-solid:#5a49dd;--shadow:0 10px 30px #141e3c1f}}:root[data-theme=light]{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--bg:#f4f6fb;--bg-radial:radial-gradient(1200px 600px at 50% -10%, #e3e9ff 0%, #f4f6fb 60%);--surface:#fff;--surface-2:#eef1f8;--surface-hover:#e5eaf5;--border:#d5dced;--text:#141827;--text-dim:#5a6480;--accent:#5a49dd;--accent-2:#3a6ed4;--accent-grad:linear-gradient(135deg, #6a5af0 0%, #4a7ce0 100%);--on-accent:#fff;--success:#0d8f5a;--success-bg:#ddf3e8;--success-border:#0d8f5a4d;--danger:#cf3450;--danger-bg:#fce7ec;--danger-border:#cf34504d;--warn:#b45309;--warn-bg:#b453091a;--warn-border:#b4530959;--glass-bg:#ffffffb8;--glass-border:#141e3c1f;--focus-ring:#5a49dd40;--focus-ring-solid:#5a49dd;--shadow:0 10px 30px #141e3c1f}*{box-sizing:border-box}html,body{overscroll-behavior:none}body{background:var(--bg-radial), var(--bg);color:var(--text);min-height:100svh;margin:0}#root{min-height:100svh}h1{letter-spacing:-.3px;margin:0 0 4px;font-size:26px;font-weight:700}button{font:inherit;color:inherit}.board-screen{flex-direction:column;gap:18px;max-width:640px;margin:0 auto;padding:16px;display:flex}.board-main{flex-direction:column;gap:16px;display:flex}.board-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;display:flex}.board-title{font-size:14px;font-weight:700}.block-counter{font-variant-numeric:tabular-nums;color:var(--text-dim);background:var(--surface-2);border:1px solid var(--border);border-radius:999px;padding:4px 10px;font-size:13px;font-weight:600}.target-views{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);flex-wrap:wrap;justify-content:center;gap:14px;padding:16px;display:flex}.editor-area{flex-direction:column;align-items:center;gap:12px;display:flex}.control-dock{flex-direction:column;align-items:center;gap:12px;width:100%;display:flex}.layer-tabs{background:var(--surface);border:1px solid var(--border);border-radius:999px;flex-wrap:wrap;justify-content:center;gap:6px;padding:4px;display:flex}.layer-tab{color:var(--text-dim);cursor:pointer;background:0 0;border:none;border-radius:999px;padding:6px 14px;font-size:13px;font-weight:600;transition:background .12s,color .12s}.layer-tab.active{background:var(--accent-grad);color:var(--on-accent);box-shadow:0 3px 10px #7c6cf659}.board3d-canvas{touch-action:none;overscroll-behavior:contain;border-radius:var(--radius-lg);background:var(--canvas-bg);border:1px solid var(--border);width:100%;max-width:520px;height:380px;box-shadow:var(--shadow);position:relative;overflow:hidden}.board3d-canvas,.board3d-canvas>div,.board3d-canvas>div>div,.board3d-canvas canvas{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:none!important}.view-presets,.vp,.height-ruler,.hr-tick{touch-action:manipulation}.height-ruler{z-index:2;background:var(--canvas-glass-bg);border:1px solid var(--canvas-glass-border);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);border-radius:999px;flex-direction:column;width:34px;max-height:calc(100% - 16px);padding:4px;display:flex;position:absolute;top:50%;left:8px;transform:translateY(-50%)}.hr-tick{min-height:20px;color:var(--canvas-text-dim);font-variant-numeric:tabular-nums;cursor:pointer;background:0 0;border:none;border-radius:999px;flex:1 1 0;justify-content:center;align-items:center;font-size:11px;font-weight:700;display:flex;position:relative}.hr-tick:after{content:"";position:absolute;inset:-6px -10px}.hr-bar{background:var(--accent);opacity:calc(var(--fill) * .35);pointer-events:none;border-radius:999px;position:absolute;inset:2px}.hr-num{position:relative}.hr-tick.active{background:var(--accent-grad);color:var(--on-accent);box-shadow:0 2px 8px #7c6cf666}.hr-tick.hr-ground{border-bottom:2px solid var(--accent-2);border-radius:999px 999px 4px 4px}@media (width<=699px){.height-ruler{width:28px;left:6px}.hr-tick{min-height:18px;font-size:10px}}.view-presets{z-index:2;grid-template-rows:repeat(3,26px);grid-template-columns:repeat(3,26px);grid-template-areas:".top.""left front right"".back.";gap:2px;display:grid;position:absolute;top:8px;right:8px}.vp{border:1px solid var(--canvas-glass-border);background:var(--canvas-glass-bg);width:26px;height:26px;color:var(--canvas-text-dim);cursor:pointer;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);border-radius:6px;justify-content:center;align-items:center;font-size:11px;font-weight:700;transition:background .12s,color .12s;display:flex}.vp:hover,.vp:active{color:var(--canvas-text);background:#7c6cf659}.vp-top{grid-area:top}.vp-left{grid-area:left}.vp-front{color:var(--canvas-text);grid-area:front}.vp-right{grid-area:right}.vp-back{grid-area:back}.direction-label{color:var(--canvas-text);text-shadow:0 1px 4px #000000e6,0 0 2px #000000e6;white-space:nowrap;-webkit-user-select:none;user-select:none;font-size:13px;font-weight:700}.direction-label.dim{color:var(--canvas-text-dim)}.board3d-hint{color:var(--text-dim);text-align:center;margin:0;font-size:12px}.view-grid{flex-direction:column;align-items:center;gap:6px;display:flex}.view-grid-title{color:var(--text-dim);text-transform:uppercase;letter-spacing:.04em;font-size:11px;font-weight:600}.view-grid-cells{--vg-frame:120px;width:var(--vg-frame);height:var(--vg-frame);background:var(--bg);border-radius:var(--radius-sm);border:1px solid var(--border);gap:2px;padding:3px;display:grid}.view-grid-cell{background:var(--surface-2);color:#0000008c;font-size:calc(var(--vg-frame) / var(--vg-cols) * .5);-webkit-user-select:none;user-select:none;border-radius:3px;justify-content:center;align-items:center;display:flex;overflow:hidden}.view-grid-cell.clickable{cursor:pointer}.view-grid-cell.clickable:hover{outline:2px solid var(--accent-2);outline-offset:-1px}.palette-row{flex-wrap:wrap;justify-content:center;gap:8px;display:flex}.palette-swatch{border-radius:var(--radius-sm);cursor:pointer;color:#0009;border:2px solid #0000;width:42px;height:42px;font-size:17px;transition:transform .1s,border-color .1s,filter .15s,opacity .15s;position:relative;box-shadow:inset 0 -2px 4px #0003}.palette-count{background:var(--bg);border:1px solid var(--border);min-width:16px;color:var(--text);font-variant-numeric:tabular-nums;border-radius:999px;padding:1px 3px;font-size:10px;font-weight:700;line-height:1.3;position:absolute;bottom:-4px;right:-4px}.palette-swatch.exhausted{filter:grayscale();opacity:.45}.palette-swatch.exhausted .palette-count{color:var(--text-dim)}.palette-swatch:hover{transform:translateY(-2px)}.palette-swatch.erase{background:var(--surface-2);color:var(--text-dim);width:58px;box-shadow:none;border:1px solid var(--border);font-size:11px;font-weight:600}.palette-swatch.active{border-color:var(--focus-ring-solid);box-shadow:0 0 0 3px var(--focus-ring)}@media (width>=700px){.board-screen{grid-template-rows:auto auto minmax(240px,1fr) auto auto;gap:12px;max-width:760px;height:100dvh;display:grid;overflow:hidden}.board-main,.editor-area{display:contents}.view-grid-cells{--vg-frame:clamp(64px, calc((100vw - 150px) / 5), 120px)}.board3d-canvas{justify-self:center;width:100%;max-width:560px;height:100%;min-height:0}}@media (width<=699px){.board-screen{height:100dvh;padding:8px 10px calc(8px + env(safe-area-inset-bottom));grid-template-rows:auto auto minmax(160px,1fr) auto;gap:8px;display:grid;overflow:hidden}.board-main,.editor-area{display:contents}.board3d-canvas{width:100%;max-width:100%;height:100%;min-height:0}.board3d-hint{display:none}.target-views{scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;flex-wrap:nowrap;justify-content:flex-start;gap:6px;padding:6px;overflow:auto hidden}.view-grid{scroll-snap-align:start;flex:none;gap:2px}.view-grid-title{letter-spacing:0;font-size:9px}.view-grid-cells{--vg-frame:max(52px, calc((100vw - 56px) / 5))}.control-dock{gap:8px}.palette-swatch{width:36px;height:36px}.ghost-btn,.primary-btn{padding:9px 14px;font-size:13px}}.cl-screen{flex-direction:column;gap:14px;max-width:560px;margin:0 auto;padding:16px;display:flex}.cl-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;display:flex}.cl-title{font-size:14px;font-weight:700}.cl-counter{font-variant-numeric:tabular-nums;color:var(--text-dim);background:var(--surface-2);border:1px solid var(--border);border-radius:999px;padding:4px 10px;font-size:13px;font-weight:600}.cl-board{aspect-ratio:1;touch-action:none;overscroll-behavior:contain;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;border-radius:var(--radius-lg);background:var(--bg);border:1px solid var(--border);width:100%;box-shadow:var(--shadow);position:relative;overflow:hidden;touch-action:none!important}.cl-board.locked{opacity:.85}.cl-board svg{width:100%;height:100%;display:block}.cl-zoom{z-index:2;flex-direction:column;gap:4px;display:flex;position:absolute;top:8px;right:8px}.cl-zoom-btn{border:1px solid var(--glass-border);background:var(--glass-bg);width:30px;height:30px;color:var(--text);cursor:pointer;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);border-radius:8px;justify-content:center;align-items:center;font-size:16px;font-weight:700;line-height:1;display:flex}.cl-zoom-btn:hover{background:#7c6cf659}.cl-zoom-reset{font-size:13px}.cl-dock{flex-direction:column;align-items:center;gap:10px;display:flex}.cl-hint{color:var(--text-dim);text-align:center;margin:0;font-size:12px}@media (width<=699px){.cl-screen{height:100dvh;padding:8px 10px calc(8px + env(safe-area-inset-bottom));grid-template-rows:auto 1fr auto;gap:10px;max-width:100%;display:grid;overflow:hidden}.cl-board{place-self:center;width:100%;height:auto;max-height:100%;margin:0 auto}.cl-hint{display:none}}.home-screen{max-width:640px;margin:0 auto;padding:32px 20px 40px}@media (width>=700px){.home-screen{max-width:860px}}.home-header{text-align:center;margin-bottom:24px;position:relative}.theme-toggle{border:1px solid var(--border);background:var(--surface);cursor:pointer;border-radius:999px;justify-content:center;align-items:center;width:36px;height:36px;font-size:16px;transition:background .12s;display:flex;position:absolute;top:0;right:0}.theme-toggle:hover{background:var(--surface-hover)}.home-subtitle{color:var(--text-dim);margin:0;font-size:14px}.game-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;display:grid}.game-card{border-radius:var(--radius-lg);border:1px solid var(--border);background:var(--surface);color:var(--text);cursor:pointer;text-align:left;padding:20px 16px;transition:transform .12s,background .12s,border-color .12s;position:relative}.game-card:hover{background:var(--surface-hover);transform:translateY(-1px)}.game-card.soon{cursor:default;opacity:.55}.game-card.soon:hover{background:var(--surface);transform:none}.game-card-emoji{margin-bottom:10px;font-size:28px}.game-card-title{margin-bottom:4px;font-size:16px;font-weight:700}.game-card-tagline{color:var(--text-dim);font-size:12px;line-height:1.4}.game-card-badge{background:var(--surface-2);color:var(--text-dim);border-radius:999px;padding:3px 7px;font-size:10px;font-weight:700;position:absolute;top:12px;right:12px}.game-screen{max-width:640px;margin:0 auto;padding:24px 20px 40px}@media (width>=700px){.game-screen{max-width:860px}}.game-screen-header{align-items:center;gap:12px;margin-bottom:20px;display:flex}.game-screen-title{margin:0;font-size:18px}.tab-bar{background:var(--surface);border:1px solid var(--border);border-radius:999px;gap:6px;margin-bottom:20px;padding:4px;display:flex}.tab-btn{color:var(--text-dim);cursor:pointer;background:0 0;border:none;border-radius:999px;flex:1;padding:10px 16px;font-size:14px;font-weight:600;transition:background .15s,color .15s}.tab-btn.active{background:var(--accent-grad);color:var(--on-accent);box-shadow:0 4px 14px #7c6cf659}.puzzle-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;display:grid}.puzzle-card{border-radius:var(--radius);border:1px solid var(--border);background:var(--surface);color:var(--text);cursor:pointer;text-align:left;padding:16px 14px;transition:transform .12s,background .12s,border-color .12s;position:relative}.puzzle-card:hover{background:var(--surface-hover);transform:translateY(-1px)}.puzzle-card.solved{border-color:var(--success)}.puzzle-card-id{margin-bottom:4px;font-size:14px;font-weight:700}.puzzle-card-meta{color:var(--text-dim);font-size:12px}.puzzle-card-badge{background:var(--success-bg);color:var(--success);border-radius:999px;padding:3px 7px;font-size:10px;font-weight:700;position:absolute;top:8px;right:8px}.random-panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);text-align:center;padding:24px 20px}.random-desc{color:var(--text-dim);margin:0 0 18px;font-size:14px}.random-streak{color:var(--success);font-weight:600}.option-label{color:var(--text-dim);text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px;font-size:11px;font-weight:700}.difficulty-row{flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:20px;display:flex}.difficulty-btn{border:1px solid var(--border);background:var(--surface-2);color:var(--text-dim);cursor:pointer;border-radius:999px;padding:8px 18px;font-size:13px;font-weight:600;transition:all .12s}.difficulty-btn.active{background:var(--accent-grad);color:var(--on-accent);border-color:#0000}.generate-btn{width:100%;max-width:280px}.action-row{justify-content:center;gap:12px;display:flex}.ghost-btn,.primary-btn{border-radius:var(--radius-sm);border:1px solid var(--border);cursor:pointer;padding:11px 22px;font-size:14px;font-weight:700;transition:transform 80ms,opacity .15s}.ghost-btn:hover,.primary-btn:hover{transform:translateY(-1px)}.ghost-btn{background:var(--surface-2);color:var(--text)}.ghost-btn.answer-btn{color:var(--warn);border-color:var(--warn-border)}.ghost-btn:disabled{opacity:.5;cursor:default;transform:none}.primary-btn{background:var(--accent-grad);color:var(--on-accent);border-color:#0000;box-shadow:0 6px 16px #7c6cf64d}.primary-btn:disabled{opacity:.5;cursor:default;transform:none}.result-banner{border-radius:var(--radius);text-align:center;border:1px solid #0000;justify-content:center;align-items:center;gap:14px;padding:16px;font-weight:600;display:flex}.result-banner.correct{background:var(--success-bg);color:var(--success);border-color:var(--success-border)}.result-banner.wrong{background:var(--danger-bg);color:var(--danger);border-color:var(--danger-border)}.result-banner.info{background:var(--warn-bg);color:var(--warn);border-color:var(--warn-border)}@media (width<=699px){.result-banner{left:10px;right:10px;bottom:calc(env(safe-area-inset-bottom) + 8px);z-index:20;position:fixed}}