:root{--ink:#171827;--brand:#5b51e8;--line:#dfe2ea;--soft:#f5f6fb}*{box-sizing:border-box}body{margin:0;background:#f4f6fa;color:var(--ink);font-family:Pretendard,"Noto Sans KR",Arial,sans-serif}.design-header{height:76px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 clamp(20px,5vw,80px)}.design-logo{color:var(--ink);text-decoration:none;font-weight:950;font-size:23px;letter-spacing:-.07em}.design-logo b{color:var(--brand)}.design-logo span{color:#111}.design-logo em{font-size:11px;font-style:normal;letter-spacing:.08em;margin-left:8px}.header-link{color:#4e586c;text-decoration:none;font-size:13px;font-weight:800}.design-page{max-width:1280px;margin:0 auto;padding:52px 26px 80px}.design-kicker{color:var(--brand);font-size:12px;font-weight:950;letter-spacing:.14em}.design-page h1{font-size:clamp(38px,5vw,66px);letter-spacing:-.07em;line-height:1.04;margin:12px 0}.design-lead{color:#6b7486;margin:0 0 34px}.design-workspace{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(330px,.65fr);gap:22px}.editor-panel,.design-options{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 14px 40px rgba(25,34,55,.07)}.editor-panel{padding:22px}.editor-top{display:flex;justify-content:space-between;align-items:center;gap:14px}.editor-top b,.editor-top span{display:block}.editor-top span{color:#7a8494;font-size:12px;margin-top:5px}.side-switch{display:flex;border:1px solid var(--line);border-radius:10px;padding:3px}.side-switch button,.template{border:0;background:transparent;border-radius:7px;padding:9px 13px;cursor:pointer;color:#647085;font-weight:800}.side-switch button.active,.template.active{background:#eeeaff;color:var(--brand)}.canvas-wrap{margin-top:18px}.mockup{min-height:485px;display:grid;place-items:center;border-radius:15px;background:radial-gradient(circle at 50% 42%,#fff 0,#eef1f5 52%,#d9dfe8 100%);padding:42px;perspective:1100px}.canvas-card{width:min(76%,560px);aspect-ratio:1.8/1;border-radius:6px;background:#fff;position:relative;box-shadow:0 25px 32px rgba(20,27,43,.25),8px 8px 0 #d8dbe1;transform:rotateX(5deg) rotateY(-10deg);transition:.35s;overflow:hidden}.canvas-card:before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.58) 48%,transparent 67%);mix-blend-mode:screen;pointer-events:none}.safe-area{position:absolute;inset:12%;border:1px dashed rgba(91,81,232,.38);padding:12%;display:flex;flex-direction:column;justify-content:center}.safe-area strong{color:var(--brand);font-size:12px;letter-spacing:.08em}.safe-area h2{margin:12px 0 6px;font-size:clamp(20px,4vw,38px)}.safe-area p{margin:0;color:#677287;font-size:13px}.mockup.template-center .safe-area{text-align:center;align-items:center}.mockup.template-color .canvas-card{background:linear-gradient(135deg,#5b51e8 0 29%,#fff 29%)}.mockup.template-color .safe-area strong{color:#fff}.mockup.template-black .canvas-card{background:#252830;color:#fff;box-shadow:0 25px 32px rgba(12,15,23,.38),8px 8px 0 #575b65}.mockup.template-black .safe-area{border-color:#d6b56b}.mockup.template-black .safe-area h2{color:#fff}.mockup.template-black .safe-area p{color:#bdc1cc}.mockup.paper-matteblack .canvas-card{background:#24272f;color:#fff}.mockup.paper-matteblack .safe-area h2{color:#fff}.mockup.paper-matteblack .safe-area p{color:#c2c5cd}.mockup.paper-rendezvous .canvas-card{background:#eee6d8}.mockup.paper-stardream .canvas-card{background:radial-gradient(circle at 25% 25%,#fff,#e8e9ff 45%,#d7d2e8)}.mockup.finish-gloss .canvas-card:after{content:"";position:absolute;inset:0;background:linear-gradient(112deg,transparent 25%,rgba(255,255,255,.65) 48%,transparent 65%);pointer-events:none}.canvas-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2}.canvas-card .safe-area{z-index:3}.canvas-card.image-mode .safe-area{background:rgba(255,255,255,.2);backdrop-filter:blur(1px)}.canvas-controls{display:flex;justify-content:center;gap:8px;margin-top:13px}.canvas-controls button,.upload-button{border:1px solid var(--line);background:#fff;border-radius:9px;padding:9px 12px;color:#4e5b70;font-size:12px;font-weight:800;cursor:pointer}.upload-button{background:#eeeaff;border-color:#cfc9ff;color:var(--brand)}.upload-button input{display:none}.editor-fields{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:16px}.editor-fields label,.design-options label{font-size:12px;color:#667185;font-weight:800}.editor-fields input,.design-options select{display:block;width:100%;margin-top:6px;border:1px solid var(--line);border-radius:9px;padding:11px;font:inherit;font-size:13px;color:var(--ink);background:#fff}.design-options{padding:22px;height:max-content}.design-options section{padding-bottom:20px;margin-bottom:20px;border-bottom:1px solid #eceef3}.design-options section:last-of-type{border:0;margin:0}.design-options h2{font-size:16px;margin:0 0 12px}.template-row{display:grid;grid-template-columns:1fr 1fr;gap:7px}.template{border:1px solid var(--line);font-size:12px}.design-options label{display:block;margin:10px 0}.estimate{background:#171827;color:#fff;border-radius:13px;padding:17px;margin-top:8px}.estimate span,.estimate strong,.estimate small{display:block}.estimate span{color:#c5c9d8;font-size:12px}.estimate strong{font-size:28px;margin:4px 0}.estimate small{color:#aeb4c4;font-size:11px}.primary{width:100%;margin-top:14px;border:0;border-radius:11px;padding:15px;background:var(--brand);color:#fff;font:inherit;font-weight:900;cursor:pointer}.option-note{font-size:11px;color:#7a8494;line-height:1.55;margin:12px 0 0}@media(max-width:850px){.design-workspace{grid-template-columns:1fr}.design-options{order:-1}.mockup{min-height:360px;padding:24px}.canvas-card{width:min(88%,500px)}}@media(max-width:560px){.design-page{padding:34px 14px 60px}.design-header{padding:0 16px}.design-logo em{display:none}.editor-fields{grid-template-columns:1fr}.canvas-controls{flex-wrap:wrap}.mockup{min-height:300px}.canvas-card{width:94%}}
.safe-area small{display:block;margin-top:6px;color:#7a8494;font-size:10px;line-height:1.45}.editor-fields{grid-template-columns:repeat(4,1fr)}.back-fields{background:#fafaff;border:1px solid #e7e3ff;border-radius:12px;padding:12px}.image-tools{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:10px;color:#69758a;font-size:12px}.image-tools input{width:150px;accent-color:var(--brand)}.image-tools button{border:1px solid var(--line);background:#fff;border-radius:8px;padding:8px 10px;color:#4e5b70;font-weight:800}@media(max-width:850px){.editor-fields{grid-template-columns:repeat(2,1fr)}}@media(max-width:560px){.editor-fields{grid-template-columns:1fr}.image-tools{flex-wrap:wrap}}
.template-row{grid-template-columns:repeat(2,1fr)}.mockup.template-vertical .canvas-card{aspect-ratio:1/1.25;width:min(54%,360px)}.mockup.template-vertical .safe-area{text-align:center;align-items:center}.mockup.template-logo-left .safe-area{justify-content:flex-start;padding-top:16%;text-align:left}.mockup.template-logo-left .safe-area strong{font-size:16px}.mockup.template-logo-left .safe-area h2{margin-top:auto}.mockup.template-photo .canvas-card{background:linear-gradient(135deg,rgba(20,32,55,.1),rgba(20,32,55,.8)),url('/printform-collection-v39.webp') center/cover}.mockup.template-photo .safe-area{color:#fff;border-color:rgba(255,255,255,.7)}.mockup.template-photo .safe-area p,.mockup.template-photo .safe-area small{color:#eef2ff}.mockup.template-executive .canvas-card{background:linear-gradient(135deg,#f7f1e6,#fff);box-shadow:0 25px 32px rgba(80,58,30,.22),8px 8px 0 #d8c8ab}.mockup.template-executive .safe-area{border-color:#b3945d}.mockup.template-executive .safe-area strong{color:#9a7438}.mockup.template-service .canvas-card{background:linear-gradient(135deg,#e9fbf7,#fff)}.mockup.template-service .safe-area{border-left:8px solid #20a98c}.mockup.template-recommend .canvas-card{background:linear-gradient(135deg,#5b51e8,#8b83ff 45%,#fff 45%)}.mockup.template-recommend .safe-area{border-color:#fff}.mockup.template-recommend .safe-area strong,.mockup.template-recommend .safe-area h2,.mockup.template-recommend .safe-area p,.mockup.template-recommend .safe-area small{color:#fff}@media(max-width:560px){.template-row{grid-template-columns:1fr}}
/* Template cards: visual previews instead of text-only buttons */
.template{position:relative;min-height:68px;text-align:left;padding:31px 10px 8px;background:#fff;overflow:hidden}.template:before{content:'';position:absolute;left:10px;right:10px;top:9px;height:24px;border-radius:4px;background:linear-gradient(135deg,#eef0f5,#fff);box-shadow:0 3px 8px rgba(20,27,43,.12)}.template[data-template="vertical"]:before{left:28%;right:28%;height:31px;top:5px}.template[data-template="logo-left"]:before{background:linear-gradient(90deg,#5b51e8 0 18%,#fff 18%)}.template[data-template="center"]:before{background:radial-gradient(circle at 50% 50%,#5b51e8 0 5px,#fff 6px)}.template[data-template="color"]:before{background:linear-gradient(135deg,#5b51e8 0 32%,#fff 32% 68%,#ffb14e 68%)}.template[data-template="photo"]:before{background:linear-gradient(135deg,rgba(15,25,45,.2),rgba(15,25,45,.8)),url('/printform-collection-v39.webp') center/cover}.template[data-template="executive"]:before{background:linear-gradient(135deg,#f5ead5,#fff);border-bottom:2px solid #b3945d}.template[data-template="service"]:before{background:linear-gradient(90deg,#20a98c 0 14%,#e9fbf7 14%)}.template[data-template="black"]:before{background:#252830}.template[data-template="recommend"]:before{background:linear-gradient(135deg,#5b51e8,#fff)}.template.active{box-shadow:inset 0 0 0 2px #5b51e8}
