@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;600;700;800;900&display=swap');
:root{--purple:#6356e8;--ink:#292b43;--muted:#7d8091;--border:#e9e8f1;--bg:#f8f8fc}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:14px 'Noto Sans KR',system-ui,sans-serif}button,input{font:inherit}button,a,input,summary{outline-offset:4px}button,a{touch-action:manipulation}button{cursor:pointer}button:disabled{opacity:.4;cursor:default}button{border:0}a{color:inherit;text-decoration:none}[hidden]{display:none!important}.topbar{height:78px;padding:0 max(5%,calc((100vw - 1240px)/2));display:flex;align-items:center;gap:24px;border-bottom:1px solid var(--border);background:white}.brand{display:flex;align-items:center;font-size:20px;font-weight:800;gap:7px;white-space:nowrap}.brand b{font-weight:500}.brandmark{display:grid;place-items:center;width:36px;height:36px;color:white;background:var(--purple);border-radius:12px;font-size:30px;line-height:1}.header-note{color:#9192a4;font-size:12px;flex:1}.quiet{background:transparent;color:#777b90;padding:10px 12px;border-radius:9px;font-size:12px}.quiet:hover{background:#efedf9;color:var(--purple)}main{max-width:1240px;margin:auto;padding:0 26px}.intro{display:flex;justify-content:space-between;align-items:center;min-height:290px;padding:28px 12px 20px}.eyebrow{color:var(--purple);font-size:10px;font-weight:800;letter-spacing:1.8px}h1{font-size:45px;line-height:1.3;letter-spacing:-2px;margin:10px 0 14px;font-weight:900}h1 span{color:var(--purple)}h1 i{font-size:39px;color:#ffc74c;font-style:normal;margin-left:15px}.intro p{font-size:14px;line-height:1.9;color:#858698}.hero-art{position:relative;width:350px;height:235px;margin-right:65px}.orbit{position:absolute;inset:20px 0;border:1px dashed #cbc4f2;border-radius:50%;transform:rotate(-17deg)}.pixel-ship{position:absolute;left:100px;top:15px;font-size:120px;filter:drop-shadow(12px 16px 0 #ebe8fc);transform:rotate(-12deg)}.art-star{position:absolute;color:#f4bb44}.s1{font-size:52px;right:28px;top:12px}.s2{font-size:36px;left:35px;bottom:15px}.art-tag{position:absolute;bottom:25px;left:116px;background:white;border:1px solid #ddd8fb;color:var(--purple);font-size:11px;letter-spacing:2px;font-weight:800;padding:9px 15px;border-radius:8px;transform:rotate(-7deg)}.art-alien{position:absolute;right:10px;bottom:48px;font:bold 25px monospace;line-height:.8;color:#9588f3;transform:rotate(13deg)}.steps{display:flex;align-items:center;padding:15px 22px;background:white;border:1px solid var(--border);border-radius:14px;gap:22px;margin-bottom:32px}.steps button{background:transparent;font-weight:700;color:#626477;display:flex;align-items:center;gap:10px;flex:1}.steps button:first-child{color:var(--purple)}.steps b{background:#efedfc;border-radius:50%;width:28px;height:28px;display:grid;place-items:center;color:var(--purple)}.steps>span{color:#cdcbdc}.tiny{margin-left:auto;color:#aca7cd}.section-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:15px}h2{font-size:18px;letter-spacing:-.6px;margin:0}.section-heading>span{font-size:12px;color:var(--muted)}.templates{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:32px}.template{display:flex;align-items:center;text-align:left;padding:12px;background:white;border:1px solid var(--border);border-radius:15px;gap:15px;transition:.2s}.template:hover{transform:translateY(-3px);box-shadow:0 8px 20px #44336d0b}.template.active{border:2px solid var(--purple);padding:11px;box-shadow:0 0 0 3px #6356e80a}.template-art{position:relative;min-width:95px;height:94px;border-radius:10px;display:grid;place-items:center;overflow:hidden}.template-art>span{font-size:46px;position:relative;z-index:1}.template-art i{position:absolute;bottom:9px;font:12px monospace;color:#ffffff85}.space{background:#252547;background-image:radial-gradient(#ffffff70 1px,transparent 1px);background-size:17px 17px}.garden{background:#dff1e8}.garden i{color:#69b996}.candy{background:#fff0de}.candy i{color:#d9a052}.template-info b{display:block;font-size:15px;margin-bottom:6px}.template-info small{display:block;color:#9293a1;font-size:11px}.template-info em{display:block;color:var(--purple);font-size:10px;font-weight:700;font-style:normal;margin-top:10px}.workspace{display:grid;grid-template-columns: .86fr 1.14fr;gap:24px;align-items:start}.panel{background:white;border:1px solid var(--border);border-radius:17px;overflow:hidden}.panel-heading{display:flex;align-items:center;justify-content:space-between;padding:20px 22px;border-bottom:1px solid #f0eff6}.panel-heading>div{display:flex;align-items:center;gap:9px}.panel-heading h2{font-size:15px}.dot{width:7px;height:7px;border-radius:50%}.purple{background:var(--purple)}.green{background:#4ec79c}.badge{background:#f0edff;color:#8274df;border-radius:6px;padding:4px 7px;font-size:10px}.mint{background:#ecf8f2;color:#459d7b}.buddy-message{display:flex;gap:12px;padding:22px 22px 9px}.buddy{background:#f0edff;border-radius:12px;display:grid;place-items:center;color:var(--purple);font-size:28px;width:42px;height:42px;flex-shrink:0}.buddy-message b{font-size:13px}.buddy-message p{font-size:12px;color:#9394a1;line-height:1.8;margin:7px 0}.examples{display:flex;gap:7px;flex-wrap:wrap;padding:4px 22px 12px}.examples button{background:#f7f6fd;color:#736aab;border:1px solid #ebe7f8;border-radius:8px;padding:8px 9px;font-size:11px}.examples button:hover{background:#eeebff}.conversation{padding:0 22px;max-height:170px;overflow:auto;display:flex;flex-direction:column;gap:8px;margin:7px 0 16px}.reply,.request{border-radius:10px;padding:11px 12px;font-size:12px;line-height:1.8;max-width:95%;white-space:pre-wrap}.reply{background:#f5f5f9;color:#686b7c;align-self:flex-start}.request{background:var(--purple);color:white;align-self:flex-end}form{padding:0 22px}form label{font-size:11px;font-weight:700}.input-wrap{display:flex;align-items:center;border:1px solid #dcd9ec;border-radius:10px;padding:6px;margin-top:7px}.input-wrap:focus-within{border-color:var(--purple);box-shadow:0 0 0 3px #6356e810}.input-wrap input{width:100%;border:0;background:transparent;outline:0;padding:8px;font-size:12px;min-width:0}.input-wrap button{color:white;background:var(--purple);min-width:32px;height:32px;border-radius:7px;font-size:19px}.mode-note{display:block;font-size:10px;color:#9a98a9;line-height:1.6;margin:9px 0 16px}.controls{margin:0 22px;padding:15px;border:1px solid var(--border);border-radius:11px}.controls summary{font-weight:700;font-size:12px;cursor:pointer;list-style:none;display:flex;justify-content:space-between}.controls summary span{color:#aaa5c6}.setting{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-top:17px;font-size:11px;color:#737587}.setting>label,.setting>span{min-width:80px}.setting input[type=range]{width:100%;accent-color:var(--purple)}.setting output{white-space:nowrap;min-width:12px}.stepper{display:flex;align-items:center;gap:13px}.stepper button{width:25px;height:25px;color:var(--purple);background:#f1effc;border-radius:6px}.swatches{display:flex;gap:7px}.swatches button{width:20px;height:20px;border-radius:50%;border:3px solid white;box-shadow:0 0 0 1px #ddd}.swatches button.selected{box-shadow:0 0 0 2px var(--purple)}input[type=checkbox]{accent-color:var(--purple);width:17px;height:17px}.maker-footer{padding:16px 12px;display:flex;align-items:center;justify-content:space-between}.maker-footer span{font-size:9px;color:#a19faf;padding-right:9px}.preview .panel-heading{padding-bottom:18px}.game-title-row{display:flex;align-items:center;padding:16px 22px 12px}.game-title-row input{border:0;font-weight:700;color:#4e4e65;font-size:14px;width:100%;background:transparent;padding:2px}.game-title-row span{color:#aca7c8}.game-shell{position:relative;margin:0 22px;background:#1a1b34;aspect-ratio:640/420;border-radius:12px;overflow:hidden}.game-shell canvas{width:100%;height:100%;display:block;touch-action:none;image-rendering:pixelated}.hud{position:absolute;top:14px;left:16px;right:16px;display:flex;justify-content:space-between;pointer-events:none;color:#eae8ff;font:bold 12px monospace;text-shadow:0 1px 3px #000}.hud span:last-child{color:#ff9ca9}.game-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;background:#1b1a365e;text-align:center;padding:25px;color:white;backdrop-filter:blur(2px)}.overlay-icon{font-size:56px;margin-bottom:5px}.game-overlay h3{font-size:19px;margin:10px 0}.game-overlay p{font-size:11px;color:#b9bad3;margin:0 0 22px;line-height:1.8}.primary{background:var(--purple);color:white;padding:12px 18px;border-radius:9px;font-size:12px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;gap:8px}.primary:hover{background:#5144d2}.secondary{background:#f2effb;color:var(--purple);padding:12px 15px;border-radius:9px;display:inline-flex;font-size:12px;font-weight:700}.play-controls{display:flex;align-items:center;gap:7px;padding:12px 22px;flex-wrap:wrap}.play-controls>button:not(.quiet){border:1px solid #eae7f5;background:#f8f7fd;color:#827aa9;border-radius:6px;padding:7px 10px}.play-controls>span{color:#9997ac;font-size:10px;flex:1}.play-controls .quiet{padding:7px;font-size:10px}.little-tip{display:flex;gap:10px;margin:0 22px 18px;background:#fffbef;padding:11px 13px;border-radius:9px;color:#b19b60}.little-tip>span{font-size:18px}.little-tip p{font-size:10px;line-height:1.9;margin:0}.little-tip b{color:#89764b;font-weight:700}.share-callout{margin:0 22px 22px;background:#f2f0fc;border-radius:12px;padding:17px;display:flex;gap:10px;justify-content:space-between;align-items:center}.share-callout .eyebrow{font-size:8px;letter-spacing:1.3px}.share-callout h3{font-size:13px;margin:7px 0 4px}.share-callout p{font-size:10px;color:#9991b7;margin:0}.share-callout .primary{white-space:nowrap;font-size:11px;padding:11px 12px}footer{display:flex;align-items:center;gap:7px;padding:30px 0 24px;font-size:10px;color:#a19daf}footer span{margin-left:auto;font-size:9px}dialog{border:1px solid var(--border);border-radius:20px;padding:32px;max-width:540px;width:calc(100% - 32px);color:var(--ink);box-shadow:0 20px 90px #29234b30}dialog::backdrop{background:#24213980;backdrop-filter:blur(5px)}dialog h2{font-size:23px;margin:10px 0}dialog p{font-size:13px;line-height:1.8;color:var(--muted)}.dialog-close{position:absolute;top:12px;right:15px;background:#f2f0f9;border-radius:50%;width:28px;height:28px;color:#9891b2;font-size:20px}#qr{display:flex;justify-content:center;padding:15px;background:#faf9ff;border-radius:12px;margin:18px 0}#qr img{max-width:210px;width:100%;image-rendering:pixelated}dialog label{display:block;font-size:12px;font-weight:600;margin-bottom:7px}#shareUrl{border:1px solid #e1deec;border-radius:8px;padding:12px;width:100%;color:#7c72ac;font-size:11px}.dialog-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}.fine{font-size:10px!important}#shareNotice{color:var(--purple)}.toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%);background:#292b43;color:white;border-radius:12px;padding:13px 24px;box-shadow:0 10px 40px #0002;z-index:20;font-size:12px;max-width:90vw}.family-heading{text-align:center;padding:50px 15px 25px}.family-heading h1{font-size:34px}.family-heading p{color:var(--muted);line-height:1.8}.family-mode .header-note,.family-mode #myGames{display:none}.family-mode .topbar{justify-content:center}#familyMount{max-width:720px;margin:auto}#familyMount .maker,#familyMount .game-title-row,#familyMount .little-tip,#familyMount .share-callout{display:none}#familyMount .game-shell{margin-top:22px}.reactions{text-align:center;margin:30px auto;max-width:700px}.reactions h2{font-size:16px;margin-bottom:18px}.reactions button{margin:5px;border:1px solid var(--border);border-radius:12px;background:white;padding:13px;color:#626477}.reactions p{color:var(--muted);font-size:11px}.create-own{display:flex;width:max-content;margin:25px auto 60px}#libraryList{display:flex;flex-direction:column;gap:10px}.library-item{display:flex;align-items:center;gap:10px;padding:15px;border:1px solid var(--border);border-radius:10px;background:#faf9ff;text-align:left;color:var(--ink)}.library-item span{font-size:28px}.library-item small{display:block;color:var(--muted);font-size:10px;margin-top:5px}.empty{padding:20px;text-align:center;color:var(--muted)}
@media(min-width:1400px){main{padding:0}.intro{padding-top:34px}.workspace{gap:26px}}
@media(max-width:1000px){.header-note{display:none}.topbar{justify-content:space-between}.template{gap:10px}.template-art{min-width:66px;height:80px}.template-info small{font-size:10px}.hero-art{margin-right:10px}.workspace{grid-template-columns:1fr 1.2fr}.share-callout{flex-direction:column;align-items:flex-start}.share-callout button{width:100%}.play-controls span{flex-basis:60%}}
@media(max-width:760px){main{padding:0 16px}.topbar{height:66px;padding:0 18px}.brand{font-size:17px}.intro{min-height:235px;padding:22px 2px}.intro h1{font-size:33px}.intro p{font-size:12px}.hero-art{width:130px;height:170px;margin:0}.pixel-ship{font-size:70px;left:20px;top:25px}.orbit{inset:15px -8px}.art-tag{left:0;bottom:8px;font-size:8px;padding:7px}.art-alien{display:none}.s1{font-size:25px;right:0;top:0}.s2{font-size:25px;left:0;bottom:45px}.steps{gap:8px;padding:12px 10px;margin-bottom:24px}.steps button{font-size:10px;gap:5px;padding:0}.steps b{width:22px;height:22px}.steps>span{font-size:10px}.tiny{display:none}.section-heading{display:block}.section-heading h2{font-size:16px;margin-bottom:6px}.section-heading>span{font-size:10px}.templates{gap:8px;margin-bottom:22px}.template{flex-direction:column;padding:9px;text-align:center;gap:8px}.template.active{padding:8px}.template-art{width:100%;height:72px}.template-art>span{font-size:36px}.template-info b{font-size:11px}.template-info small{display:none}.template-info em{font-size:9px;margin-top:6px}.workspace{display:flex;flex-direction:column}.panel{width:100%}.maker{order:2}.preview{order:1}.panel-heading{padding:16px}.game-shell{margin:0 14px}.game-title-row{padding:14px}.play-controls{padding:12px 14px}.game-overlay h3{font-size:17px}.game-overlay .overlay-icon{font-size:42px}.game-overlay p{margin-bottom:15px}.share-callout{margin:0 14px 16px;flex-direction:row;align-items:center}.share-callout button{width:auto}.little-tip{margin:0 14px 16px}.share-callout h3{font-size:11px}footer{display:block;text-align:center;line-height:2}footer span{display:block}.family-heading h1{font-size:25px}.family-heading{padding-top:32px}.dialog-actions button,.dialog-actions a{flex:1}dialog{padding:26px 20px}.game-overlay{padding:16px}.maker-footer span{font-size:9px}}