@import "https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+KR:wght@400;500;600;700&display=swap";:root{color:#f4f4f5;font-synthesis:none;background:#090b10;font-family:DM Sans,Noto Sans KR,sans-serif}*{box-sizing:border-box}body{min-width:320px;margin:0}button,select,input{font:inherit}.app{background:radial-gradient(circle at 50% 10%,#17142c 0,#0000 28%),#090b10;min-height:100vh}header{z-index:4;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);background:#0b0d12dd;border-bottom:1px solid #22252d;justify-content:space-between;align-items:center;height:72px;padding:0 5vw;display:flex;position:relative}.brand{align-items:center;gap:11px;display:flex}.brand b{letter-spacing:2px;font-size:15px}.brand>span:last-child{color:#686b75;border-left:1px solid #30323a;padding-left:12px;font-size:12px}.brand-mark{background:#7c5cff;border-radius:10px;place-items:center;width:36px;height:36px;display:grid;box-shadow:0 0 24px #7c5cff55}.header-actions{align-items:center;gap:10px;display:flex}.storage{color:#777b86;gap:7px;font-size:12px;display:flex}.icon-btn,.char-tools button{color:#9b9eaa;cursor:pointer;background:#11141a;border:1px solid #292c35;border-radius:10px;place-items:center;display:grid}.icon-btn{width:40px;height:40px}.primary{color:#fff;cursor:pointer;background:linear-gradient(135deg,#8568ff,#6950e8);border:0;border-radius:10px;align-items:center;gap:7px;padding:11px 17px;font-weight:600;display:flex;box-shadow:0 8px 25px #6d51ed30}.primary:disabled{opacity:.45}.settings-pop{z-index:8;background:#171920;border:1px solid #30333e;border-radius:14px;width:300px;padding:18px;position:absolute;top:64px;right:5vw;box-shadow:0 20px 50px #000}.settings-pop p{color:#8c8f99;font-size:12px;line-height:1.6}.settings-pop button{color:#f78;background:#281419;border:1px solid #6c2932;border-radius:9px;justify-content:center;gap:7px;width:100%;padding:9px;display:flex}main{max-width:1440px;margin:auto;padding:0 5vw}.intro{justify-content:space-between;align-items:center;height:235px;display:flex}.eyebrow{letter-spacing:2px;color:#9c88ff;align-items:center;gap:6px;font-size:10px;font-weight:700;display:flex}.intro h1{margin:14px 0 10px;font-size:38px;line-height:1.3}.intro h1 em{color:#0000;background:linear-gradient(90deg,#b19fff,#7771ff);-webkit-background-clip:text;background-clip:text;font-style:normal}.intro p{color:#858894;font-size:14px}.stats{background:#101218;border:1px solid #22252d;border-radius:15px;align-items:center;gap:34px;padding:22px 28px;display:flex}.stats div{flex-direction:column;gap:5px;display:flex}.stats b{font-size:28px}.stats small{color:#797d89;font-size:13px}.stats span{color:#666a74;letter-spacing:1.5px;font-size:9px}.stats i{background:#2a2d35;width:1px;height:38px}.toolbar{background:#111319;border:1px solid #252832;border-radius:14px 14px 0 0;justify-content:space-between;align-items:center;height:65px;padding:0 20px;display:flex}.toolbar>div{align-items:center;gap:10px;display:flex}.toolbar b{font-size:15px}.toolbar>div span{color:#797d86;background:#232630;border-radius:10px;padding:4px 8px;font-size:11px}.toolbar label{color:#9295a0;border:1px solid #30333d;border-radius:9px;align-items:center;height:36px;padding:0 8px;display:flex}.toolbar select{appearance:none;color:#d5d6dc;background:0 0;border:0;outline:0;padding:0 26px 0 8px;font-size:12px}.toolbar option{background:#16181e}.stage-wrap{background:#0d0f14;border:1px solid #252832;border-top:0;max-height:680px;display:flex;overflow:auto}.scale{background:#101218;border-right:1px solid #272a32;width:72px;min-width:72px;position:relative}.scale-line{color:#5d606a;width:100%;padding-left:15px;font-size:9px;position:absolute}.scale-line i{border-top:1px solid #42454e;width:12px;position:absolute;top:5px;right:0}.scale-line small{color:#3f424b;font-size:7px;display:block}.stage{background:linear-gradient(90deg,#0000 49.9%,#ffffff05 50%,#0000 50.1%);flex:1;justify-content:center;align-items:flex-end;gap:34px;min-width:900px;padding:0 50px 1px;display:flex;position:relative}.stage:before{content:"";pointer-events:none;background:repeating-linear-gradient(0deg,#0000 0 53px,#20232b 54px);position:absolute;inset:0}.stage-hint{color:#50535c;font-size:10px;position:absolute;top:18px;right:20px}.character{z-index:2;cursor:grab;justify-content:center;width:160px;min-width:120px;display:flex;position:relative}.character:active{cursor:grabbing}.character img{object-fit:contain;object-position:bottom;width:100%;position:absolute}.char-label{text-align:center;white-space:nowrap;text-shadow:0 2px 8px #000;position:absolute;top:-50px}.char-label b{letter-spacing:1px;font-size:12px;display:block}.char-label span{color:#aaa4ca;font-size:11px}.char-tools{opacity:0;gap:5px;transition:all .2s;display:flex;position:absolute;top:-86px}.character:hover .char-tools{opacity:1}.char-tools button{height:26px;padding:0 7px;font-size:10px}.silhouette{background:linear-gradient(145deg,color-mix(in srgb,var(--tone) 80%,white),var(--tone));filter:drop-shadow(0 0 25px color-mix(in srgb,var(--tone) 20%,transparent));opacity:.85;border-radius:48% 48% 27% 27%;position:absolute;inset:0 16px}.silhouette i{aspect-ratio:1;background:inherit;border-radius:50%;width:55%;position:absolute;top:-2%;left:22%}.silhouette span,.silhouette b{background:inherit;border-radius:30px;width:26%;height:50%;position:absolute;top:38%}.silhouette span{left:-4%;transform:rotate(8deg)}.silhouette b{right:-4%;transform:rotate(-8deg)}.silhouette em{background:#7360ae;border-radius:20px;width:22%;height:38%;position:absolute;bottom:-1%;left:22%;box-shadow:52px 0 #7360ae}.ground{border-top:1px solid #7d5cff;position:absolute;bottom:0;left:0;right:0;box-shadow:0 0 18px #7d5cff44}.ground span{color:#6b5ba5;letter-spacing:1px;font-size:8px;position:absolute;top:7px;right:15px}.privacy{color:#5e616b;justify-content:center;gap:7px;margin:18px;font-size:11px;display:flex}.empty{text-align:center;color:#747884;z-index:2;position:absolute;bottom:150px;left:50%;transform:translate(-50%)}.empty h3{color:#ddd;margin-bottom:5px}.empty p{font-size:12px}.empty svg{color:#7c5cff}.empty button{margin:20px auto}.overlay{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:20;background:#05060add;place-items:center;padding:20px;display:grid;position:fixed;inset:0}.modal{background:#13151c;border:1px solid #30333e;border-radius:20px;width:min(720px,100%);overflow:hidden;box-shadow:0 30px 100px #000}.modal-head{border-bottom:1px solid #292c34;justify-content:space-between;align-items:center;padding:24px 27px;display:flex}.modal-head span{color:#8875e7;letter-spacing:1.7px;font-size:9px}.modal-head h2{margin:5px 0 0;font-size:21px}.form-grid{grid-template-columns:1fr 1fr;gap:25px;padding:27px;display:grid}.upload-panel{cursor:pointer;background:#0e1015;border:1px dashed #444854;border-radius:14px;flex-direction:column;justify-content:center;align-items:center;min-height:330px;display:flex;overflow:hidden}.upload-panel>img{object-fit:contain;width:100%;height:330px}.upload-panel div{color:#9d84ff;background:#24202f;border-radius:12px;height:48px;padding:12px}.upload-panel b{margin-top:15px;font-size:12px}.upload-panel span{color:#666a74;margin-top:7px;font-size:9px}.upload-panel input{display:none}.fields{flex-direction:column;gap:18px;display:flex}.fields>label{color:#9295a0;font-size:11px}.fields input:not([type=range]){color:#fff;background:#0d0f14;border:1px solid #30333d;border-radius:9px;outline:0;width:100%;margin-top:8px;padding:12px}.fields input:focus{border-color:#755be6}.height-input{position:relative}.height-input span{font-size:11px;position:absolute;top:20px;right:12px}.anchor-title{border-top:1px solid #292c34;padding-top:16px}.anchor-title b,.anchor-title span{font-size:11px;display:block}.anchor-title span{color:#636773;margin-top:3px;font-size:9px}.range span{justify-content:space-between;display:flex}.range b{color:#a995ff}.range input{accent-color:#8063f5;width:100%;margin-top:10px}.modal-foot{background:#101218;border-top:1px solid #292c34;justify-content:flex-end;gap:8px;padding:17px 27px;display:flex}.cancel{color:#9da0aa;background:0 0;border:1px solid #343741;border-radius:9px;padding:10px 20px}footer{color:#4f525c;border-top:1px solid #20232a;align-items:center;gap:18px;height:90px;padding:0 5vw;display:flex}footer b{letter-spacing:2px;color:#686b76;font-size:12px}footer span,footer small{font-size:10px}footer small{margin-left:auto}.loading{z-index:30;letter-spacing:5px;color:#7962e1;background:#090b10;place-items:center;display:grid;position:fixed;inset:0}@media (width<=700px){header{padding:0 16px}.brand>span:last-child,.storage{display:none}main{padding:0 12px}.intro{height:250px}.intro h1{font-size:28px}.stats{display:none}.stage{min-width:700px}.form-grid{grid-template-columns:1fr;max-height:65vh;overflow:auto}.upload-panel{min-height:180px}.upload-panel>img{height:180px}.modal-head,.form-grid{padding:20px}.intro p{line-height:1.7}.character{width:130px}}svg.silhouette{width:calc(100% - 10px);height:100%;fill:color-mix(in srgb,var(--tone) 72%,#d9d2ee);stroke:color-mix(in srgb,var(--tone) 88%,white);stroke-width:1.2px;filter:drop-shadow(0 0 20px color-mix(in srgb,var(--tone) 26%,transparent));opacity:.92;background:0 0;border-radius:0;position:absolute;inset:0 5px;overflow:visible}.upload-panel.has-image{cursor:default;border-style:solid}.upload-panel.has-image>div{background:#0b0d12;border-radius:0;height:330px;padding:0}.anchor-preview{touch-action:none;background:linear-gradient(45deg,#13151c 25%,#0000 25%) 0 0/18px 18px,linear-gradient(45deg,#0000 75%,#13151c 75%) 0 0/18px 18px,#0b0d12;width:100%;height:330px;position:relative;overflow:hidden}.anchor-preview>img{object-fit:contain;-webkit-user-select:none;user-select:none;pointer-events:none;width:100%;height:100%}.anchor-line{color:#fff;cursor:ns-resize;touch-action:none;background:0 0;border:0;border-top:2px solid #b49fff;width:100%;height:24px;padding:0;position:absolute;left:0;transform:translateY(-50%)}.anchor-line:before{content:"";background:#b49fff;border:2px solid #fff;border-radius:50%;width:12px;height:12px;position:absolute;top:-7px;left:50%;transform:translate(-50%);box-shadow:0 2px 8px #000}.anchor-line span,.anchor-line b{background:#755be6;border-radius:4px;padding:3px 6px;font-size:9px;line-height:1.2;position:absolute;top:4px;box-shadow:0 2px 8px #0008}.anchor-line span{left:7px}.anchor-line b{right:7px}.anchor-line.bottom{border-color:#55d6be}.anchor-line.bottom:before,.anchor-line.bottom span,.anchor-line.bottom b{background:#24a98f}.anchor-help{pointer-events:none;width:max-content;max-width:90%;font-size:9px;position:absolute;bottom:34px;left:50%;transform:translate(-50%);color:#d7d8de!important;background:#080a0dcc!important;border-radius:10px!important;height:auto!important;padding:5px 9px!important}.replace-image{color:#c5c6ce;cursor:pointer;background:#101218dd;border:1px solid #454956;border-radius:7px;align-items:center;gap:5px;padding:6px 8px;font-size:9px;display:flex;position:absolute;top:7px;right:7px}@media (width<=700px){.upload-panel.has-image>div,.anchor-preview{height:230px}.upload-panel{min-height:230px}}
