:root{--ink:#161616;--paper:#f3f0e9;--panel:#faf8f3;--line:#cfc9bf;--accent:#ff4d25;--muted:#69645c}*{box-sizing:border-box}html,body{margin:0;max-width:100%;overflow-x:hidden;background:var(--paper);color:var(--ink);font-family:"Pretendard Variable",Pretendard,"Noto Sans KR","Malgun Gothic",system-ui,sans-serif}button,input,select,textarea{font:inherit}button{color:inherit}.sticker-hero{min-height:320px;padding:70px clamp(20px,5vw,76px);display:grid;grid-template-columns:minmax(0,1.3fr) minmax(280px,.7fr);gap:50px;align-items:end;border-bottom:1px solid var(--line);background:#171717;color:#fff}.sticker-hero>div>p,.sticker-guide>p,.quote-modal section>p{margin:0 0 14px;color:var(--accent);font-size:10px;font-weight:900;letter-spacing:.18em}.sticker-hero h1{margin:0;font-size:clamp(42px,6vw,84px);line-height:.94;letter-spacing:-.065em}.sticker-hero>p{max-width:500px;margin:0;color:#bbb6ad;font-size:13px;line-height:1.8;word-break:keep-all}.sticker-studio{display:grid;grid-template-columns:minmax(0,1fr) minmax(390px,520px);max-width:1560px;margin:auto;border-inline:1px solid var(--line)}.preview-panel{min-width:0;background:#dedad1;border-right:1px solid var(--line)}.preview-toolbar,.preview-scale{height:54px;padding:0 22px;display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid var(--line);background:#ece9e2;font-size:10px}.preview-toolbar span{font-weight:900;letter-spacing:.08em}.preview-toolbar b{color:var(--muted);font-size:9px}.preview-stage{min-height:670px;display:grid;place-items:center;padding:70px 40px;background-color:#d8d4cb;background-image:linear-gradient(45deg,rgba(255,255,255,.28) 25%,transparent 25%),linear-gradient(-45deg,rgba(255,255,255,.28) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,rgba(255,255,255,.28) 75%),linear-gradient(-45deg,transparent 75%,rgba(255,255,255,.28) 75%);background-size:28px 28px;background-position:0 0,0 14px,14px -14px,-14px 0}.sticker-preview{position:relative;width:min(440px,78%);aspect-ratio:1;display:grid;place-items:center;padding:9%;background:#fff;box-shadow:0 24px 70px rgba(0,0,0,.16);transition:border-radius .25s,background .25s,transform .25s}.sticker-preview img{position:relative;z-index:2;width:100%;height:100%;object-fit:contain}.sticker-preview.kisscut{width:min(390px,72%);background:transparent;box-shadow:none}.sticker-preview.kisscut img{filter:drop-shadow(7px 0 0 #fff) drop-shadow(-7px 0 0 #fff) drop-shadow(0 7px 0 #fff) drop-shadow(0 -7px 0 #fff) drop-shadow(0 18px 18px rgba(0,0,0,.17))}.sticker-preview.transparent{background:rgba(255,255,255,.34)}.sticker-preview.kisscut.transparent img{filter:drop-shadow(5px 0 0 rgba(255,255,255,.6)) drop-shadow(-5px 0 0 rgba(255,255,255,.6)) drop-shadow(0 5px 0 rgba(255,255,255,.6)) drop-shadow(0 -5px 0 rgba(255,255,255,.6)) drop-shadow(0 18px 18px rgba(0,0,0,.17))}.cut-guide{position:absolute;z-index:3;inset:4%;border:1px dashed rgba(255,77,37,.82);pointer-events:none}.kisscut .cut-guide{inset:10%;border-radius:42% 58% 50% 46%;transform:rotate(-4deg)}.preview-empty{position:relative;z-index:4;display:grid;place-items:center;text-align:center;gap:8px;color:#7d776e}.preview-empty i{width:54px;height:54px;display:grid;place-items:center;border:1px solid #aaa39a;border-radius:50%;font-size:25px;font-style:normal}.preview-empty strong{font-size:13px}.preview-empty span{font-size:9px}.preview-scale{border-top:1px solid var(--line);border-bottom:0}.preview-scale span:first-child{font-weight:900}.preview-scale span:last-child{color:var(--muted)}.sticker-controls{padding:32px;background:var(--panel)}.control-head{display:flex;align-items:center;gap:10px;padding-bottom:20px;border-bottom:1px solid var(--line)}.control-head span{color:var(--accent);font-size:10px;font-weight:900}.control-head h2{margin:0;font-size:30px;letter-spacing:-.05em}.sticker-controls fieldset{margin:26px 0 18px;padding:0;border:0}.sticker-controls legend,.option-grid label,.quantity-control{display:block;margin-bottom:10px;color:var(--muted);font-size:10px;font-weight:850}.type-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.type-card{min-height:145px;padding:18px 14px;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:5px;border:1px solid var(--line);background:#fff;text-align:left;cursor:pointer}.type-card:hover,.type-card.active{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}.type-card strong{font-size:14px}.type-card small{color:var(--muted);font-size:9px;line-height:1.5}.type-shape{width:42px;height:42px;margin-bottom:auto;display:block;background:var(--accent);box-shadow:0 7px 14px rgba(255,77,37,.18)}.type-shape.square{border-radius:5px}.type-shape.contour{border-radius:58% 42% 65% 35% / 38% 62% 38% 62%;transform:rotate(14deg)}.upload-control{min-height:58px;padding:12px 14px;display:grid;grid-template-columns:auto 1fr;gap:5px 12px;align-items:center;border:1px dashed #8f897f;background:#f0ede6;cursor:pointer}.upload-control input{position:absolute;width:1px;height:1px;opacity:0}.upload-control span{grid-row:1/3;padding:10px 13px;background:var(--ink);color:#fff;font-size:10px;font-weight:900}.upload-control b{font-size:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.upload-control::after{content:"PNG · JPG · WEBP";color:var(--muted);font-size:8px}.option-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}.option-grid label{margin:0}.option-grid select{width:100%;height:46px;margin-top:7px;padding:0 11px;border:1px solid #aca69c;background:#fff;font-size:11px}.quantity-control{margin:18px 0 0}.quantity-control>div{height:48px;margin-top:7px;display:grid;grid-template-columns:46px 1fr 46px;border:1px solid #aca69c;background:#fff}.quantity-control button{border:0;background:transparent;font-size:18px;cursor:pointer}.quantity-control input{width:100%;border:0;border-inline:1px solid #ded9d0;text-align:center;font-size:13px;font-weight:900;appearance:textfield}.price-box{margin-top:22px;padding:18px 0;border-top:1px solid var(--line)}.price-box>div{display:flex;justify-content:space-between;margin:7px 0;color:var(--muted);font-size:11px}.price-box b{color:var(--ink)}.price-box .total{margin-top:14px;padding-top:14px;border-top:1px solid var(--ink);font-size:14px}.price-box .total b{font-size:25px}.price-box small{display:block;margin-top:12px;color:var(--muted);font-size:9px;line-height:1.5}.quote-button,.submit-quote{width:100%;min-height:58px;border:0;background:var(--accent);color:#fff;font-size:12px;font-weight:950;letter-spacing:.08em;cursor:pointer}.sticker-guide{padding:90px clamp(20px,5vw,76px) 110px;border-top:1px solid var(--line)}.sticker-guide h2{margin:0 0 34px;font-size:clamp(34px,4vw,58px);letter-spacing:-.055em}.sticker-guide>div{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;border:1px solid var(--line);background:var(--line)}.sticker-guide article{min-height:220px;padding:27px;background:var(--panel)}.sticker-guide article b{color:var(--accent);font-size:10px}.sticker-guide article h3{margin:48px 0 12px;font-size:22px}.sticker-guide article span{color:var(--muted);font-size:11px;line-height:1.7;word-break:keep-all}.quote-modal{position:fixed;inset:0;z-index:120;display:none;place-items:center;padding:18px}.quote-modal.open{display:grid}.modal-backdrop{position:absolute;inset:0;border:0;background:rgba(0,0,0,.62);backdrop-filter:blur(5px)}.quote-modal>section{position:relative;z-index:1;width:min(620px,100%);max-height:92vh;overflow:auto;padding:30px;background:var(--panel);box-shadow:0 30px 90px rgba(0,0,0,.28)}.modal-close{position:absolute;right:14px;top:12px;border:0;background:none;font-size:28px;cursor:pointer}.quote-modal h2{margin:0 0 20px;font-size:30px}.quote-summary{margin-bottom:18px;padding:14px;border:1px solid var(--line);font-size:10px;line-height:1.8}.quote-modal form{display:grid;grid-template-columns:1fr 1fr;gap:12px}.quote-modal form label{font-size:10px;font-weight:850}.quote-modal input,.quote-modal textarea{width:100%;margin-top:6px;padding:12px;border:1px solid #aaa39a;background:#fff}.quote-modal .full{grid-column:1/-1}.sticker-toast{position:fixed;right:22px;bottom:22px;z-index:140;max-width:390px;padding:18px 20px;background:#171717;color:#fff;box-shadow:0 20px 60px rgba(0,0,0,.3);font-size:11px;line-height:1.7}.sticker-toast b{color:#ff7657}@media(max-width:900px){.sticker-hero{grid-template-columns:1fr;gap:24px}.sticker-studio{grid-template-columns:1fr}.preview-panel{border-right:0;border-bottom:1px solid var(--line)}.preview-stage{min-height:520px}.sticker-guide>div{grid-template-columns:1fr}}@media(max-width:600px){.sticker-hero{min-height:auto;padding:46px 16px}.sticker-hero h1{font-size:43px}.sticker-studio{display:block;border-inline:0}.preview-stage{min-height:430px;padding:45px 18px}.sticker-preview{width:78%}.sticker-controls{padding:22px 16px}.type-card{min-height:132px;padding:13px}.option-grid{grid-template-columns:1fr}.sticker-guide{padding:62px 16px 72px}.sticker-guide h2{font-size:35px}.quote-modal>section{padding:24px 18px}.quote-modal form{grid-template-columns:1fr}.quote-modal .full{grid-column:auto}.sticker-toast{left:12px;right:12px;bottom:12px}}
.artwork-layer{position:absolute;z-index:2;left:50%;top:50%;width:64%;height:64%;transform:translate(-50%,-50%);transform-origin:center;touch-action:none;cursor:grab;user-select:none}.artwork-layer:active{cursor:grabbing}.artwork-layer[hidden]{display:none}.artwork-layer img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;-webkit-user-drag:none}.resize-handle{position:absolute;z-index:5;right:-12px;bottom:-12px;width:28px;height:28px;padding:0;border:3px solid #fff;border-radius:50%;background:var(--accent);box-shadow:0 2px 10px rgba(0,0,0,.28);cursor:nwse-resize;touch-action:none}.resize-handle::after{content:"";position:absolute;inset:7px;border-right:2px solid #fff;border-bottom:2px solid #fff}.preview-editbar{min-height:52px;padding:8px 22px;display:flex;align-items:center;justify-content:space-between;gap:14px;border-top:1px solid var(--line);background:#f5f2eb;color:var(--muted);font-size:10px}.preview-editbar[hidden]{display:none}.preview-editbar>div{display:flex;align-items:center;gap:5px}.preview-editbar button{height:32px;min-width:34px;padding:0 10px;border:1px solid #aaa39a;background:#fff;cursor:pointer}.preview-editbar output{min-width:48px;text-align:center;color:var(--ink);font-weight:900}@media(max-width:600px){.resize-handle{right:-14px;bottom:-14px;width:32px;height:32px}.preview-editbar{padding:8px 14px;align-items:flex-start;flex-direction:column}.preview-editbar>div{width:100%}.preview-editbar button:last-child{margin-left:auto}}
.dimension-control{margin-top:18px;padding:16px;border:1px solid var(--line);background:#fff}.dimension-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:11px;color:var(--muted);font-size:10px;font-weight:850}.dimension-head b{font-size:9px}.dimension-inputs{display:grid;grid-template-columns:1fr auto 1fr;gap:9px;align-items:end}.dimension-inputs label{color:var(--muted);font-size:9px;font-weight:800}.dimension-inputs input{width:100%;height:44px;margin-top:5px;padding:0 10px;border:1px solid #aaa39a;background:#fff;color:var(--ink);font-weight:900}.dimension-inputs i{padding-bottom:13px;color:var(--muted);font-style:normal}.ratio-lock{display:flex;align-items:center;gap:7px;margin-top:10px;color:var(--muted);font-size:9px}.ratio-lock input{accent-color:var(--accent)}.finished-size{display:grid;grid-template-columns:1fr auto;gap:5px 12px;margin-top:13px;padding-top:13px;border-top:1px solid var(--line)}.finished-size span{color:var(--muted);font-size:9px}.finished-size strong{font-size:14px}.finished-size small{grid-column:1/-1;color:var(--accent);font-size:9px;line-height:1.55}.option-grid.single{grid-template-columns:1fr}.sticker-preview.cut{padding:0}.sticker-preview.cut .cut-guide{inset:0;border-width:2px}.sticker-preview.cut .artwork-layer{cursor:default}.sticker-preview.cut .resize-handle{display:none}
