@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+KR:wght@400;500;600;700;800&display=swap');
:root{font-family:'DM Sans','Noto Sans KR',sans-serif;color:#24302e;background:#f4f6f3;font-synthesis:none;--green:#216959;--line:#e4e8e3;--muted:#89918a}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button,a,input,select{ -webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{opacity:.45;cursor:wait}button{border:0;background:transparent;color:inherit}button:focus-visible,a:focus-visible,label:focus-visible,canvas:focus-visible{outline:3px solid #4c9f86;outline-offset:3px}header{height:78px;padding:0 42px;display:flex;align-items:center;justify-content:space-between;background:#fff;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:9px;text-decoration:none;color:#183d34;font-weight:800;font-size:25px;letter-spacing:-1px}.brand-icon{background:#216959;color:#fff;width:34px;height:34px;border-radius:9px;display:grid;place-items:center;font-size:33px;line-height:1}.studio{font-size:10px;letter-spacing:2px;margin-left:5px;color:#74817b;font-weight:500}.header-caption{font-size:12px;color:#909890}.private{font-size:11px;color:#6d7c72;display:flex;align-items:center;gap:7px}.private i,.live-dot,.status-dot{display:inline-block;width:6px;height:6px;border-radius:100%;background:#4e9a78}main{max-width:1680px;margin:auto;padding:39px 38px 0}.intro{display:flex;justify-content:space-between;align-items:center;margin-bottom:31px}.eyebrow{letter-spacing:2.5px;font-size:10px;font-weight:700;color:#5e8576;margin-bottom:11px}h1{font-size:30px;letter-spacing:-1.5px;font-weight:700;margin:0 0 9px}h1 span{font-weight:400;color:#738078}.intro p{font-size:12px;color:#8b938c;margin:0}.steps{display:flex;gap:16px;align-items:center;font-size:11px;color:#7c867e;padding-right:7px}.steps span{white-space:nowrap}.steps b{font-weight:500;color:#216959;margin-right:5px}.steps em{font-style:normal;color:#bcc3bd}.workspace{display:grid;grid-template-columns:264px minmax(300px,1fr) 285px;gap:18px;align-items:stretch}.panel{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px}.panel-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:21px}.panel-title h2{font-size:13px;margin:0;font-weight:700;letter-spacing:-.4px}.panel-title h2 span{font-size:10px;color:#91a396;margin-right:8px;font-weight:500}.text-button{font-size:10px;color:#6c8375;padding:0;white-space:nowrap}.dropzone{border:1px dashed #bdcfc2;border-radius:9px;display:flex;align-items:center;flex-direction:column;background:#f7faf7;padding:16px 7px;cursor:pointer;transition:.2s}.dropzone:hover,.dropzone.drag{background:#e9f3ed;border-color:#216959}.dropzone input{display:none}.upload-icon{font-size:24px;color:#216959;margin-bottom:3px;line-height:1.1}.dropzone strong{font-size:11px;font-weight:600}.dropzone>span:not(.upload-icon){font-size:10px;color:#8a958c;margin:4px 0 8px}.dropzone small{font-size:9px;color:#a0a8a0}.source-head{display:flex;justify-content:space-between;font-size:9px;color:#849085;margin:17px 0 9px;gap:8px}.source-head span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:135px}.checker{background-color:#fafbf9;background-image:linear-gradient(45deg,#e9ede7 25%,transparent 25%),linear-gradient(-45deg,#e9ede7 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e9ede7 75%),linear-gradient(-45deg,transparent 75%,#e9ede7 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0}.image-wrap{height:178px;border:1px solid #e7eae4;border-radius:9px;display:flex;align-items:center;justify-content:center;overflow:hidden;margin-bottom:22px}#source{max-width:100%;max-height:100%;object-fit:contain;touch-action:none;cursor:default}.section-label{font-size:11px;font-weight:600}.badge{font-weight:400;color:#729180;background:#f0f6f1;padding:3px 5px;font-size:8px;border-radius:3px;margin-left:5px}.toggle-line{display:flex;justify-content:space-between;align-items:center;font-size:11px;margin-top:15px}.toggle-line input{appearance:none;width:29px;height:17px;background:#d1d8d1;border-radius:20px;cursor:pointer;margin:0;position:relative}.toggle-line input:checked{background:var(--green)}.toggle-line input:before{content:'';position:absolute;left:3px;top:3px;width:11px;height:11px;background:white;border-radius:50%;transition:.2s}.toggle-line input:checked:before{left:15px}.help{font-size:10px;color:#939b93;line-height:1.8;margin:10px 0 15px;word-break:keep-all}.range-head{display:flex;justify-content:space-between;align-items:center;font-size:11px;margin-top:15px;margin-bottom:9px}.range-head output{color:#64816f;font-size:10px}.range-head label{font-weight:500}input[type=range]{width:100%;height:4px;accent-color:var(--green);cursor:pointer;margin:5px 0 12px}.brush-tools{display:flex;border:1px solid #e5e9e3;border-radius:6px;padding:3px;gap:2px}.brush-tools button{font-size:9px;padding:6px 3px;flex:1;border-radius:4px}.brush-tools .active{background:#e9f2ec;color:#216959;font-weight:600}.secondary{border:1px solid #e4e9e2;border-radius:6px;font-size:10px;padding:9px;color:#788578}.full{width:100%}.source-foot{font-size:9px;color:#a1a99f;text-align:center;margin-top:18px}.preview-panel{background:#e9eee8;border:1px solid #dce3da;border-radius:14px;display:flex;flex-direction:column;overflow:hidden;min-height:730px}.preview-header{display:flex;justify-content:space-between;padding:17px 20px;align-items:center}.preview-header>div:first-child{display:flex;gap:8px;align-items:center}.preview-header strong{font-size:12px;font-weight:600}.muted{font-size:8px;color:#8fa18f;letter-spacing:1.5px;margin-left:2px}.view-switch{display:flex;padding:3px;background:#dfe6dd;border:1px solid #d8e0d5;border-radius:6px}.view-switch button{font-size:10px;padding:6px 12px;border-radius:4px;color:#83907e}.view-switch button.active{background:#fff;color:#486749;box-shadow:0 1px 3px #475c4b15}#viewport{flex:1;position:relative;min-height:490px;background-image:linear-gradient(#7188700c 1px,transparent 1px),linear-gradient(90deg,#7188700c 1px,transparent 1px),radial-gradient(ellipse at 50% 45%,#f4f7f1 0%,#e9eee7 65%);background-size:30px 30px,30px 30px,100% 100%;overflow:hidden}#gl{display:block;width:100%;height:100%;position:absolute;inset:0;touch-action:none;cursor:grab}#gl:active{cursor:grabbing}.viewport-label{position:absolute;left:21px;top:17px;pointer-events:none;font-size:9px;letter-spacing:1.4px;color:#94a28f}.preview-footer{padding:14px 19px;font-size:9px;color:#83917e;display:flex;justify-content:space-between;border-top:1px solid #dbe3d7}.preview-footer>span:first-child{display:flex;align-items:center;gap:6px}.status-dot{width:5px;height:5px}.preview-tools{position:absolute;right:17px;top:60px;background:#ffffffbd;border:1px solid #dbe2d6;border-radius:8px;display:flex;flex-direction:column;padding:4px}.preview-tools button{width:27px;height:29px;color:#72866b;font-size:19px}.preview-tools>span{height:1px;background:#e1e7db;margin:3px}.canvas-hint{position:absolute;bottom:22px;left:0;width:100%;display:flex;justify-content:center;gap:11px;font-size:9px;color:#93a08d;pointer-events:none}.canvas-hint i{font-style:normal}.orientation{position:absolute;bottom:61px;left:27px;width:36px;height:38px;font-size:9px;color:#899880;pointer-events:none}.orientation i{display:block;position:absolute;left:13px;top:10px;height:23px;width:1px;background:#8eaa8a;transform:rotate(-25deg)}.orientation i:after{content:'';position:absolute;left:0;top:15px;width:26px;height:1px;background:#8eaa8a;transform:rotate(40deg);transform-origin:left}.orientation b{position:absolute;right:-5px;bottom:0;font-weight:400}.orientation em{position:absolute;left:0;bottom:0;font-style:normal}.orientation span{position:absolute;left:4px;top:0}.tiny-label{font-size:8px;color:#9ca598;letter-spacing:.7px}.settings-panel{padding:20px}.settings-panel .panel-title{margin-bottom:24px}.segmented{display:flex;gap:6px}.segmented button{border:1px solid var(--line);border-radius:6px;flex:1;font-size:12px;padding:9px}.segmented button.active{background:#edf5ee;border-color:#7da28a;color:#216959;font-weight:700}.divider{height:1px;background:#edf0e9;margin:19px 0}.group{border:1px solid #e6ebe2;border-radius:8px;padding:12px 11px 5px;margin:10px 0;background:#fdfefb;transition:opacity .2s}.group-top{display:flex;align-items:center;gap:8px;font-size:10px}.swatch{width:21px;height:21px;border:1px solid #00000012;border-radius:5px;flex-shrink:0}.group-info{display:flex;flex-direction:column;gap:2px;flex:1}.group-info small{font-size:8px;color:#a1aa9a;font-family:monospace}.height-input{width:43px;padding:3px 2px;text-align:right;font-size:12px;border:0;background:transparent;font-weight:600;color:#547649;border-radius:3px;appearance:textfield}.height-input::-webkit-inner-spin-button{appearance:none}.group .unit{font-size:9px;color:#a1aa98}.group input[type=range]{margin-top:13px;margin-bottom:8px}.unit{font-size:10px;color:#9ba494}#width-number{width:47px;border:1px solid #e1e7dc;border-radius:4px;font-size:11px;padding:4px;text-align:center}.resolution select{border:1px solid #e1e7dc;border-radius:5px;background:#fff;color:#6d7e65;font-size:10px;padding:6px}.export-box{margin-top:23px;padding:15px 13px;background:#f0f5ec;border-radius:9px}.export-title{display:flex;align-items:center;gap:7px}.export-title>span:first-child{font-size:9px;color:#8a9f80}.export-title strong{font-size:11px;font-weight:600;flex:1}.export-title>span:last-child{color:#8aa17e}.export-box p{font-size:9px;line-height:1.7;color:#8b9b81;margin:9px 0 13px}.primary{background:#216959;color:#fff;border-radius:6px;font-size:11px;padding:12px 6px;box-shadow:0 3px 7px #2169591a;transition:.2s}.primary:hover{background:#164f43;transform:translateY(-1px)}.export-box small{font-size:8px;display:block;text-align:center;color:#98a68d;margin-top:9px}footer{display:flex;align-items:center;justify-content:space-between;padding:27px 4px 24px;font-size:9px;color:#a0a99c;gap:15px}.footer-logo{font-size:13px;letter-spacing:1px;font-weight:700;color:#8c9b86}footer span:nth-child(2){margin-right:auto;margin-left:8px}#toast{position:fixed;bottom:25px;left:50%;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:#193f34;color:white;border-radius:9px;padding:13px 22px;box-shadow:0 5px 25px #16281e30;transition:.25s;z-index:10;font-size:12px;max-width:90vw}#toast.show{opacity:1;transform:translate(-50%,0)}#gl-error{position:absolute;left:15%;right:15%;top:45%;font-size:13px;text-align:center;color:#7a5d4b} @media(min-width:1500px){.workspace{grid-template-columns:285px minmax(400px,1fr) 310px}.image-wrap{height:205px}.panel{padding:23px}.preview-panel{min-height:800px}}@media(max-width:1150px){header{padding:0 23px}main{padding:30px 20px 0}.workspace{grid-template-columns:230px minmax(260px,1fr) 250px;gap:12px}.panel{padding:15px}.steps{gap:8px}.preview-header{padding:17px 13px}.image-wrap{height:155px}.badge{display:block;width:max-content;margin:6px 0 0}.tiny-label{font-size:7px}.header-caption{display:none}}@media(max-width:900px){.workspace{grid-template-columns:230px minmax(300px,1fr)}.settings-panel{grid-column:1/-1;display:block}#groups{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.group{margin:0}.steps{display:none}.preview-panel{min-height:740px}.export-box{max-width:400px;margin-left:auto;margin-right:auto}}@media(max-width:600px){header{height:65px;padding:0 17px}.private{font-size:9px}.brand{font-size:21px}.studio{display:none}main{padding:25px 14px 0}.intro{margin-bottom:23px}h1{font-size:25px}.intro p{font-size:11px}.workspace{display:flex;flex-direction:column;gap:14px}.preview-panel{min-height:440px;order:1}.source-panel{order:0}.settings-panel{order:2}.image-wrap{height:200px}.badge{display:inline;margin-left:5px}.dropzone{padding:13px}#viewport{min-height:360px}.source-foot{margin-top:12px}#groups{grid-template-columns:1fr 1fr}.panel{padding:18px}.canvas-hint{font-size:8px;gap:7px}.footer-logo{display:none}footer{font-size:8px;padding:20px 0}footer span:nth-child(2){margin-left:0}footer span:last-child{display:none}}

@media(min-width:901px){.preview-panel{position:sticky;top:20px;align-self:start;height:min(740px,calc(100vh - 200px));min-height:480px}#viewport{min-height:0}}@media(max-width:900px) and (min-width:601px){.preview-panel{height:740px;align-self:start}#viewport{min-height:0}}@media(max-width:600px){.preview-panel{height:440px;min-height:440px;flex:none}#viewport{min-height:0}}